/*
 * Progress towards a whole: a caption line and a bar.
 *
 * One component for every "how much out of how much" on a screen. In an earlier project this was
 * written three times over — a payback bar, a target bar and a share bar — and the three
 * differed only in the colour of the fill.
 *
 * The native <progress> carries the value in an attribute, and that is why it is used: a width
 * is a number that changes with the data, and a page has no way to write one — inline style is
 * forbidden by CLAUDE.md §3 and refused outright by the policy the project sends
 * (style-src 'self').
 *
 * The bar never runs past its own end: something that has passed its target has reached it, and
 * a bar spilling over would say nothing the figure beside it does not.
 */

.app-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 220px;
}

/* Caption on the left, figure on the right, both quieter than the bar they describe. */
.app-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-3);
    font-size: var(--fs-caption);
}

.app-progress__value {
    color: var(--text-2);
    font-variant-numeric: var(--numeric);
}

/* The platform look is dropped entirely; what is left is drawn by the rules below. */
.app-progress__bar {
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: var(--radius-glyph); /* an 8px bar with a 4px radius has round ends without a pill radius (core.md §17.6) */
    background: var(--surface-2);
    overflow: hidden;
}

.app-progress__bar::-webkit-progress-bar {
    border-radius: var(--radius-glyph); /* an 8px bar with a 4px radius has round ends without a pill radius (core.md §17.6) */
    background: var(--surface-2);
}

/*
 * The fill is the accent by default: a bar usually measures a share of a whole, and green would
 * claim "increased" about a row that may well be the opposite (tokens/colors.css).
 */
.app-progress__bar::-webkit-progress-value {
    border-radius: var(--radius-glyph); /* an 8px bar with a 4px radius has round ends without a pill radius (core.md §17.6) */
    background: var(--scale-accent-3);
}

.app-progress__bar::-moz-progress-bar {
    border-radius: var(--radius-glyph); /* an 8px bar with a 4px radius has round ends without a pill radius (core.md §17.6) */
    background: var(--scale-accent-3);
}

/* Reaching a goal is a good outcome, and the palette already has a colour that means one. */
.app-progress__bar--positive::-webkit-progress-value {
    background: var(--positive);
}

.app-progress__bar--positive::-moz-progress-bar {
    background: var(--positive);
}

/* Inside a table the bar is the whole cell: the column decides the width, not the block. */
.app-progress--bare {
    min-width: 0;
}

/*
 * A region being redrawn (core.md §13.5): dimmed, "wait" cursor, and its links and buttons take
 * no clicks, so a second click is not a second request. Opacity only: no spinner, no animation,
 * no layout shift. The content stays readable by a screen reader; aria-busy is the announcement.
 */
[aria-busy='true'] {
    opacity: var(--opacity-busy);
    cursor: progress;
    transition: opacity var(--transition);
}

[aria-busy='true'] :is(a, button, [type='submit']) {
    pointer-events: none;
}