/* donation-ticker layout: segment label top-left, horizontal progress bar
   beneath it with the current raised amount anchored to the fill end and
   the goal amount anchored to the right of the track. The .complete class
   (set by JS once raised ≥ goal) repositions the current amount to the
   right and hides the goal. Shared resets/fonts/.stale come from
   ../_shared/styles.css. */

/* Page backdrop behind the ticker card. Overrides the transparent html
   background from ../_shared/styles.css. */
html {
    background-color: #253746;
}

.ticker {
    background-color: white;
    border-radius: 20px;
    padding: 1rem 1.25rem;
    text-align: left;
}

.label {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    font-weight: 600;
    color: var(--widget-fg);
    margin-bottom: 0.6rem;
    /* Allow long segment names to wrap rather than overflow. */
    overflow-wrap: anywhere;
}

.bar {
    position: relative;
}

.bar-track {
    position: relative;
    height: 1.1rem;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 0.55rem;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0%;
    background: var(--widget-fg);
    border-radius: inherit;
    /* Smooth animation when the value updates on each refresh. */
    transition: width 0.6s ease-out;
}

.amounts {
    position: relative;
    margin-top: 0.55rem;
    /* Reserve space so the absolute children don't collapse the row. */
    height: 1.2em;
}

.amount {
    position: absolute;
    top: 0;
    font-size: clamp(0.85rem, 1.7vw, 1rem);
    font-weight: 600;
    white-space: nowrap;
    /* tabular-nums keeps digit widths uniform so the number doesn't jitter
     horizontally as it counts up. */
    font-variant-numeric: tabular-nums;
    transition:
        left 0.6s ease-out,
        right 0.6s ease-out,
        opacity 0.3s ease;
}

.amount-current {
    color: var(--widget-fg);
    /* Default positioning is set by JS via inline style based on fill % +
     measured label width. CSS only handles the "complete" state below. */
}

.amount-goal {
    right: 0;
    color: var(--widget-muted);
}

/* Goal reached: bar stays 100%, current amount slides to the right edge
   (taking the goal's slot), and the goal label fades out. */
.complete .amount-current {
    left: auto;
    right: 0;
    transform: none;
}

.complete .amount-goal {
    opacity: 0;
    pointer-events: none;
}