/* ─────────────────────────────────────────────────────────────────────────────
   PlatinumWCA — component language.

   PlatinumPOS's, rebuilt by hand. POS gets these shapes from MudBlazor with a
   handful of overrides in its own app.css; WCA has no component framework, so
   each one is written out here to land on the same result: white cards with a
   soft border and no shadow, a 12px control radius, 24px panels, pill nav
   links, filled blue primaries, and Inter throughout.

   Where a rule below exists to match a specific POS rule, the POS selector is
   named in the comment so the two can be compared later.
   ──────────────────────────────────────────────────────────────────────────── */

/* ═══ CARD ══════════════════════════════════════════════════════════════════
   POS .rw-activity-card: a border, a 24px radius, and box-shadow: none. The
   border is what separates a card from the page, not elevation. */

.tape {
    position: relative;
    background: var(--stock);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-0);
}
.tape + .tape { margin-top: var(--s-6); }
.tape--flat,
.tape--sunk { background: var(--bench); }
/* The tear edge belonged to the previous world. A card here is a card. */
.tape--torn::after { content: none; }

.tape__head {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--rule);
}
.tape__titleline { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tape__title {
    font-size: var(--t-h6);
    font-weight: 600;                    /* POS H6 */
    letter-spacing: var(--track-h);
    line-height: var(--lh-snug);
    margin: 0;
}
.tape__sub {
    font-size: var(--t-small);
    color: var(--ink-2);
    line-height: var(--lh-body);
    margin-top: 2px;
}
.tape__body { padding: var(--s-5); }
.tape__body--tight { padding: var(--s-3) var(--s-5); }
.tape__foot {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--rule);
    background: var(--bench);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.tape__count {
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--ink-2);
    align-self: center;
}

/* POS .pa-footprint, verbatim in intent: a monospace code tag on the grey. */
.serial {
    background: var(--bench-deep);
    padding: 6px 12px;
    border-radius: var(--r-sm);
    font-size: var(--t-small);
    font-weight: 600;
    font-family: var(--face-value);
    color: var(--ink);
    border: 1px solid var(--rule);
    display: inline-block;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ═══ RULES ═════════════════════════════════════════════════════════════════ */

.rule       { border: none; border-top: 1px solid var(--rule); margin: var(--s-4) 0; }
.rule--soft { border-top-color: var(--rule-soft); }
/* The perforation and the double closing rule were printing idioms. Both are
   ordinary dividers now. */
.rule--perf   { border-top: 1px solid var(--rule); }
.rule--double { border: none; border-top: 1px solid var(--rule); height: 0; margin: var(--s-4) 0; }

/* ═══ LABEL / VALUE ROW ═════════════════════════════════════════════════════
   Label left, value right, a hairline between rows. No dotted leader: that
   belonged to the tape, and this is a card. */

.prow {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    min-height: 34px;
    font-size: var(--t-body);
}
.prow + .prow { border-top: 1px solid var(--rule); }
.prow__label { flex: 0 1 auto; min-width: 0; color: var(--ink-2); }
.prow__leader { flex: 1 1 auto; min-width: var(--s-4); }
.prow__value {
    flex: 0 0 auto;
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
    white-space: nowrap;
    color: var(--ink);
    font-weight: 500;
}
.prow__value--wide { min-width: 6.5ch; }
.prow__unit { color: var(--ink-3); font-size: 0.85em; }
.prow--total { border-top: 1px solid var(--rule-ink); }
.prow--total .prow__label,
.prow--total .prow__value { font-weight: 700; color: var(--ink); }
.prow--muted .prow__label, .prow--muted .prow__value { color: var(--ink-3); }
.prow--flagged .prow__value { color: var(--warn-strong); font-weight: 700; }

.prow__pair {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(5.5ch, auto) minmax(5.5ch, auto);
    gap: var(--s-5);
    text-align: right;
}

/* ═══ HEADLINE TILE ═════════════════════════════════════════════════════════
   POS .w8-tile: a coloured tile, 24px radius, the figure sized to its own
   container so a long number can never be painted under its neighbour. */

.plate {
    background: var(--spot);
    color: #FFFFFF;
    padding: var(--s-5);
    border-radius: var(--r-lg);
    position: relative;
    container-type: inline-size;
}
.plate .legend { color: #FFFFFF; font-weight: 500; }
.plate__value {
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
    /* POS's own clamp recipe: the figure scales against the tile, not the
       viewport, with a floor that stays readable. */
    font-size: clamp(1.25rem, 11cqw, var(--t-plate));
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    margin-top: var(--s-1);
}
.plate__unit { font-size: 0.45em; letter-spacing: 0; font-weight: 600; }
.plate__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.plate__grid > * + * { border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--s-5); }
.plate__note {
    display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
    margin-top: var(--s-4); padding-top: var(--s-4);
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: var(--t-small);
    font-family: var(--face-value);
    color: #FFFFFF;
}
.plate__var { margin-left: auto; }
.plate__var.is-wide {
    background: rgba(255,255,255,.18);
    border-radius: var(--r-pill);
    padding: 2px var(--s-3);
    font-weight: 700;
    color: #FFFFFF;
}

/* The value re-prints when it changes. Kept from the previous build because it
   is the one thing on the capture screen that tells an operator with both hands
   busy that the reading landed - but it is a fade now, not an ink strike. */
@keyframes strike {
    0%   { background: rgba(255,255,255,.28); }
    100% { background: transparent; }
}
.is-struck { animation: strike var(--dur-3) var(--ease); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .is-struck { animation: none; } }

/* ═══ CHIP / STATUS ═════════════════════════════════════════════════════════
   POS uses MudChip: a pill with a tinted ground and a matching foreground.
   No rotation, no double borders, no rubber-stamp conceit. */

.stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-fine);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 4px var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--bench-deep);
    color: var(--ink-2);
    white-space: nowrap;
    line-height: 1.35;
}
.stamp--ok    { background: var(--ok-wash);   color: var(--ok-strong); }
.stamp--sent  { background: var(--note-wash); color: var(--note-strong); }
.stamp--back  { background: var(--stop-wash); color: var(--stop-strong); }
.stamp--warn  { background: var(--warn-wash); color: var(--warn-strong); }
.stamp--draft { background: var(--bench-deep); color: var(--ink-2); }
.stamp--struck { transform: none; }

.tag {
    display: inline-block;
    font-size: var(--t-fine); font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 2px var(--s-3);
    color: var(--ink-2); white-space: nowrap;
    background: var(--stock);
}
.tag--hazard { color: var(--warn-strong); border-color: var(--warn); background: var(--warn-wash); }

/* ═══ ALERT ═════════════════════════════════════════════════════════════════
   MudAlert's shape: a tinted panel with a leading icon and a 12px radius. */

.notice {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--ink-2);
    background: var(--bench-deep);
    font-size: var(--t-small);
    line-height: var(--lh-body);
}
.notice__icon { flex: 0 0 auto; margin-top: 1px; }
.notice__body { flex: 1 1 auto; min-width: 0; color: inherit; }
.notice__title { font-weight: 600; display: block; color: inherit; }

/* The action is a control, not prose. Left as an ordinary flex child it
   shrinks like one: on a phone "Try again" narrowed until it wrapped mid-
   phrase and pressed the body into a column beside it, which reads as a
   broken layout rather than a button. */
.notice__action { flex: 0 0 auto; align-self: center; }
.notice__action .btn { white-space: nowrap; }

/* On a phone the two do not fit beside each other: keeping the control on one
   line squeezes the sentence explaining it into a five-line column. The
   control goes underneath instead, indented to the body's own left edge so it
   reads as part of the same notice rather than a stray button below it. */
@media (max-width: 700px) {
    /* A grid rather than a wrapping flex row: wrapping puts the icon on a line
       of its own above the text, because the body is what overflows and the
       icon is what gets pushed. Two columns keep the pin beside the sentence
       it marks and drop the control into the second row under the body. */
    .notice {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--s-3);
    }
    .notice__icon { grid-column: 1; grid-row: 1; }
    .notice__body { grid-column: 2; grid-row: 1; }
    .notice__action { grid-column: 2; grid-row: 2; margin-top: var(--s-3); align-self: start; }
}
.notice--note  { background: var(--note-wash); color: var(--note-strong); border-color: color-mix(in srgb, var(--note) 24%, transparent); }
.notice--warn  { background: var(--warn-wash); color: var(--warn-strong); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.notice--stop  { background: var(--stop-wash); color: var(--stop-strong); border-color: color-mix(in srgb, var(--stop) 26%, transparent); }
.notice--ok    { background: var(--ok-wash);   color: var(--ok-strong);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.notice--plain { background: var(--bench-deep); color: var(--ink-2); border-color: var(--rule); }
.notice a { color: inherit; }

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════════
   MudButton: filled primary, 12px radius, 600 weight, no text-transform. */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--hit);
    padding: 0 var(--s-5);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-md);
    background: var(--stock);
    color: var(--ink);
    font-size: var(--t-body);
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--bench-deep); }
.btn:active:not(:disabled) { box-shadow: var(--lift-press); }

.btn--primary {
    background: var(--spot);
    color: var(--on-spot);
    border-color: var(--spot);
}
.btn--primary:hover:not(:disabled) { background: var(--spot-lift); border-color: var(--spot-lift); }

.btn--spot { background: var(--spot); border-color: var(--spot); color: var(--on-spot); }
.btn--spot:hover:not(:disabled) { background: var(--spot-lift); border-color: var(--spot-lift); }

.btn--danger { color: var(--stop-strong); border-color: color-mix(in srgb, var(--stop) 45%, transparent); background: var(--stock); }
.btn--danger:hover:not(:disabled) { background: var(--stop-strong); color: #FFFFFF; border-color: var(--stop-strong); }

.btn--go { color: var(--ok-strong); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: var(--stock); }
.btn--go:hover:not(:disabled) { background: var(--ok-strong); color: #FFFFFF; border-color: var(--ok-strong); }

.btn--quiet { border-color: transparent; background: transparent; color: var(--spot); }
.btn--quiet:hover:not(:disabled) { background: var(--spot-wash); }

/* Disabled is a muted fill with muted text, not a transparency knock-down: an
   opacity drop turns a filled primary into a grey slab and drags its label
   below the contrast floor with it. */
.btn:disabled,
.btn.is-off {
    cursor: not-allowed;
    background: var(--bench-deep);
    color: var(--ink-disabled);
    border-color: var(--rule);
    box-shadow: none;
}
.btn:disabled:hover, .btn.is-off:hover { background: var(--bench-deep); color: var(--ink-disabled); }
.btn.is-off { pointer-events: none; }

.btn--sm { min-height: 36px; padding: 0 var(--s-4); font-size: var(--t-small); }
.btn--lg { min-height: var(--hit-lg); font-size: var(--t-body-lg); padding: 0 var(--s-6); }
.btn--block { display: flex; width: 100%; }

/* An icon button: MudIconButton is a circle. */
.ibtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--hit); height: var(--hit);
    border: none; border-radius: 50%;
    background: transparent; color: var(--ink-2); cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
    flex: 0 0 auto;
}
.ibtn:hover:not(:disabled) { background: var(--bench-deep); color: var(--ink); }
.ibtn:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.ibtn--sm { width: 36px; height: 36px; }
.ibtn--danger:hover:not(:disabled) { color: var(--stop-strong); background: var(--stop-wash); }

/* A link that has to sit in a line of text. */
.link-btn {
    background: none; border: none; padding: 0;
    color: var(--spot); font: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 0.18em;
}
.link-btn:hover { color: var(--spot-lift); }

/* ═══ FIELDS ════════════════════════════════════════════════════════════════
   MudTextField, outlined variant. */

.field { display: block; }
/* Stacked fields space themselves; fields laid out in a grid are spaced by the
   grid's own gap. Without the second rule the sibling margin also applied
   ACROSS a row, pushing every column after the first out of alignment with it. */
.field + .field { margin-top: var(--s-5); }
.cols > .field + .field,
.cols > * > .field:first-child,
.frow__pair > .field + .field { margin-top: 0; }
.field__legend {
    display: flex; align-items: baseline; gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.field__req {
    color: var(--ink-3);
    font-weight: 400;
    /* Not error red: this is a hint about the field, not a fault in it, and red
       is what the palette uses for a fault. Size is inherited from the label so
       the comma before it sits on the same baseline at the same size. */
}
.field__help { font-size: var(--t-fine); color: var(--ink-3); margin-top: var(--s-2); }
.field__err  { font-size: var(--t-fine); color: var(--stop-strong); margin-top: var(--s-2); font-weight: 600; }

.control {
    display: block;
    width: 100%;
    min-height: var(--hit);
    padding: 0 var(--s-4);
    background: var(--stock);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: var(--t-body);
    font-family: var(--face-text);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.control::placeholder { color: var(--ink-3); opacity: 1; }
.control:hover:not(:disabled) { border-color: var(--ink-3); }
.control:focus { outline: none; border-color: var(--spot); box-shadow: 0 0 0 1px var(--spot); }
.control:disabled { color: var(--ink-disabled); cursor: not-allowed; background: var(--bench-deep); }
.control[aria-invalid="true"] { border-color: var(--stop); }
.control[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--stop); }
textarea.control { min-height: 5.5rem; padding: var(--s-3) var(--s-4); line-height: var(--lh-body); resize: vertical; }

/* TextField's optional LeadingIcon. Only rendered when set, so every other
   field on the site is untouched — this wrapper never exists unless asked for. */
.control-shell { position: relative; display: block; }
.control-shell--icon .control { padding-left: 2.75rem; }
.control-shell__icon {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
}

/* The mono face and the alignment are two different decisions, and bundling
   them made every code and username in the app right-aligned. Tabular numerals
   are right for an identifier; right-alignment is right only for a quantity,
   where a column of masses lines up on the decimal. */
.control--value {
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
}

/* NumField only: the fields that actually hold a number. */
.control--num { text-align: right; }

/* The stepper comb. Kept from the previous build - full 44px targets are what
   let a gloved hand nudge a mass by 50g instead of retyping it - but restyled
   to the card system: one rounded outline, soft dividers. */
.comb {
    display: grid;
    grid-template-columns: var(--hit) 1fr var(--hit);
    align-items: stretch;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-md);
    background: var(--stock);
    overflow: hidden;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.comb:focus-within { border-color: var(--spot); box-shadow: 0 0 0 1px var(--spot); }
.comb .control { border: none; border-radius: 0; background: transparent; min-height: var(--hit); }
.comb .control:focus { box-shadow: none; }
.comb__step {
    display: flex; align-items: center; justify-content: center;
    background: var(--bench);
    color: var(--ink-2);
    border: none;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.comb__step:first-child { border-right: 1px solid var(--rule); }
.comb__step:last-child  { border-left: 1px solid var(--rule); }
.comb__step:hover:not(:disabled) { background: var(--spot-wash); color: var(--spot); }
.comb__step:disabled { color: var(--ink-disabled); cursor: not-allowed; }

.select-wrap { position: relative; display: block; }
.select-wrap > .icon-chev {
    position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--ink-2);
}
select.control { appearance: none; padding-right: var(--s-10); cursor: pointer; }

/* Switch: MD3-ish track and thumb. */
.switch { position: relative; display: inline-flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; min-height: var(--hit); }
.switch input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.switch__track {
    flex: 0 0 auto; position: relative;
    width: 44px; height: 26px; margin-top: 1px;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-pill);
    background: var(--bench-deep);
    transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.switch__lever {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: var(--ink-3);
    border-radius: 50%;
    transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.switch input:checked + .switch__track { background: var(--spot); border-color: var(--spot); }
.switch input:checked + .switch__track .switch__lever { transform: translateX(18px); background: #FFFFFF; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--spot); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }
.switch__label { font-size: var(--t-small); line-height: 1.35; padding-top: 4px; }
.switch__why { font-size: var(--t-fine); color: var(--ink-3); display: block; }

.check { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; min-height: var(--hit); }
.check input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.check__box {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 2px solid var(--rule-ink);
    border-radius: 4px;
    background: var(--stock);
    display: grid; place-items: center;
    color: transparent;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.check input:checked + .check__box { background: var(--spot); border-color: var(--spot); color: #FFFFFF; }
.check input:indeterminate + .check__box { background: var(--ink-3); border-color: var(--ink-3); color: #FFFFFF; }
.check input:focus-visible + .check__box { outline: 2px solid var(--spot); outline-offset: 2px; }
.check input:disabled + .check__box { opacity: .5; }

/* ═══ CHIPS ═════════════════════════════════════════════════════════════════ */

.chipset { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 36px; padding: 0 var(--s-4);
    border: 1px solid var(--rule); border-radius: var(--r-pill);
    background: var(--stock); color: var(--ink-2);
    font-size: var(--t-small); font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.chip:hover:not(:disabled) { background: var(--bench-deep); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-on {
    background: var(--spot-wash); color: var(--spot); border-color: var(--spot);
    font-weight: 600;
}
.chip:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.chip--hazard { border-color: var(--warn); color: var(--warn-strong); background: var(--warn-wash); }
.chip--hazard:hover, .chip--hazard.is-on { background: var(--warn-strong); color: #FFFFFF; border-color: var(--warn-strong); }

/* Segmented quarter marks. */
.seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-ink); border-radius: var(--r-md); overflow: hidden; }
.seg__btn {
    flex: 1 1 auto; min-width: 3.2rem; min-height: 40px;
    background: var(--stock); color: var(--ink-2);
    font-size: var(--t-small); font-weight: 500;
    border: none; border-right: 1px solid var(--rule);
    cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.seg__btn:last-child { border-right: none; }
.seg__btn:hover { background: var(--bench-deep); color: var(--ink); }
.seg__btn.is-on { background: var(--spot); color: #FFFFFF; font-weight: 600; }

/* ═══ THE MASS / VOLUME PAIR ════════════════════════════════════════════════
   The product's central comparison. Two solid bars sharing one origin: mass in
   the primary blue, volume in the emerald. The hatched second rail was a
   printing idiom and is gone; the two hues differ in lightness as well as hue,
   so the pair still separates in greyscale. */

.dbar { display: flex; align-items: center; gap: var(--s-3); min-width: 11rem; }
.dbar__rails { flex: 1 1 auto; min-width: 60px; display: flex; flex-direction: column; gap: 4px; }
.dbar__rail {
    position: relative; height: 8px;
    background: var(--bench-deep);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.dbar__fill { position: absolute; inset: 0 auto 0 0; background: var(--spot); border-radius: var(--r-pill); }
/* The volume rail. It is identified by POSITION - mass is always the upper rail,
   volume always the lower, and the key above the column names both - rather than
   by hue, because emerald and blue sit only 2:1 apart in greyscale and closer
   still under protanopia. What the colour has to do is separate the fill from
   its own track, which POS's Success does not (2.32:1) and its SuccessDarken
   does (3.44:1). Both figures are printed beside the rails regardless. */
.dbar__fill--hatch { background: var(--ok-fill); }
.dbar__nums { flex: 0 0 auto; display: flex; align-items: baseline; gap: var(--s-2); text-align: right; }
.dbar__num {
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--t-small);
    min-width: 3.8ch;
    color: var(--spot);
    font-weight: 600;
}
.dbar__num--vol { color: var(--ok-strong); }

.dbar-key { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-fine); color: var(--ink-2); font-weight: 500; }
.dbar-key__sw { width: 16px; height: 8px; border-radius: var(--r-pill); flex: 0 0 auto; }
.dbar-key__sw--solid { background: var(--spot); }
.dbar-key__sw--hatch { background: var(--ok-fill); }
.dbar-key > span { display: inline-flex; align-items: center; gap: var(--s-2); }

/* A single percentage bar. */
.bar { display: flex; align-items: center; gap: var(--s-3); }
.bar__track { position: relative; flex: 1 1 auto; height: 8px; min-width: 40px; background: var(--bench-deep); border-radius: var(--r-pill); overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--spot); border-radius: var(--r-pill); }
.bar__num { flex: 0 0 auto; min-width: 4.6ch; text-align: right; font-family: var(--face-value); font-variant-numeric: tabular-nums; font-size: var(--t-small); }

/* Coverage against the guideline's target. */
.gauge { position: relative; height: 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.25); overflow: hidden; }
.gauge__fill { position: absolute; inset: 0 auto 0 0; background: #FFFFFF; border-radius: var(--r-pill); }
.gauge__fill--short { background: rgba(255,255,255,.75); }

/* Indeterminate progress. */
.feed { height: 4px; background: var(--bench-deep); border-radius: var(--r-pill); overflow: hidden; position: relative; }
.feed::after {
    content: ""; position: absolute; inset: 0;
    width: 40%;
    background: var(--spot);
    border-radius: var(--r-pill);
    animation: feed 1.1s ease-in-out infinite;
}
@keyframes feed {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) { .feed::after { animation: none; width: 100%; opacity: .4; } }

.ghost { display: inline-block; background: var(--bench-deep); height: 1em; border-radius: var(--r-sm); vertical-align: middle; }

/* ═══ TABLES ════════════════════════════════════════════════════════════════
   POS: head cells 600 weight in text-secondary, 1px lines-default under every
   row, and the container scrolls sideways rather than clipping. */

.tbl-wrap { overflow-x: auto; border-radius: var(--r-md); }
.tbl-wrap:focus-visible { outline: 2px solid var(--spot); outline-offset: 2px; }
.tbl { width: 100%; font-size: var(--t-small); }
.tbl th {
    text-align: left;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--ink-2);
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    background: var(--stock);
}
.tbl td { padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
.tbl tbody tr:hover { background: var(--bench); }
.tbl tbody tr.is-picked { background: var(--spot-wash); }
.tbl .num {
    text-align: right;
    font-family: var(--face-value);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.tbl--queue td { white-space: nowrap; }
/* Sized so the eleven columns plus the open control fit a 1440 desk without
   the last one scrolling out of the card: measured at 35px over, trimmed by
   more than that so a slightly longer operator name still fits. */
.tbl--queue .cell-clip { display: block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl--queue .cell-clip--wide { max-width: 13rem; }
.pct { color: var(--ink-2); }

/* Below the fold of a phone a table stops being a table: each row becomes its
   own small record with its column names as labels. */
.tbl--folded thead { display: none; }
.tbl--folded, .tbl--folded tbody, .tbl--folded tr, .tbl--folded td { display: block; width: 100%; }
.tbl--folded tr {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--stock);
    margin-bottom: var(--s-3);
    padding: var(--s-3) var(--s-4);
}
.tbl--folded td { border: none; padding: var(--s-2) 0; display: flex; align-items: baseline; gap: var(--s-3); }
.tbl--folded td + td { border-top: 1px solid var(--rule-soft); }
.tbl--folded td::before {
    content: attr(data-legend);
    flex: 0 0 8rem;
    font-size: var(--t-fine); font-weight: 600;
    color: var(--ink-2);
}
.tbl--folded td.num { justify-content: flex-start; text-align: left; }
.tbl--folded td:empty { display: none; }

@media (max-width: 860px) {
    .tbl--fold thead { display: none; }
    .tbl--fold, .tbl--fold tbody, .tbl--fold tr, .tbl--fold td { display: block; width: 100%; }
    .tbl--fold tr {
        border: 1px solid var(--rule);
        border-radius: var(--r-md);
        background: var(--stock);
        margin-bottom: var(--s-3);
        padding: var(--s-3) var(--s-4);
    }
    .tbl--fold td { border: none; padding: var(--s-2) 0; display: flex; align-items: baseline; gap: var(--s-3); }
    .tbl--fold td + td { border-top: 1px solid var(--rule-soft); }
    .tbl--fold td::before {
        content: attr(data-legend);
        flex: 0 0 9rem;
        font-size: var(--t-fine); font-weight: 600;
        color: var(--ink-2);
    }
    .tbl--fold td.num { justify-content: flex-start; text-align: left; }
    .tbl--fold td:empty { display: none; }
    .tbl--queue td { white-space: normal; }
    .tbl--queue .cell-clip, .tbl--queue .cell-clip--wide { max-width: none; white-space: normal; }
}

/* A cell with no column name prints no label and no gutter for one. */
.tbl--fold td:not([data-legend])::before,
.tbl--folded td:not([data-legend])::before { content: none; }
.tbl--fold td:not([data-legend]),
.tbl--folded td:not([data-legend]) { justify-content: flex-start; }

/* ═══ OVERLAYS ══════════════════════════════════════════════════════════════ */

.scrim {
    position: fixed; inset: 0; z-index: var(--z-scrim);
    background: rgba(15, 23, 42, .48);
    display: grid; place-items: center;
    padding: var(--s-4);
    animation: fade var(--dur-2) var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* POS .mud-dialog: 28px radius and its exact layered shadow. */
.dialog {
    position: relative; z-index: var(--z-modal);
    width: min(34rem, 100%);
    max-height: calc(100dvh - 2rem);
    display: flex; flex-direction: column;
    background: var(--stock);
    border-radius: var(--r-xl);
    box-shadow: var(--lift-3);
    animation: lay var(--dur-3) var(--ease);
    overflow: hidden;
}
.dialog--wide { width: min(46rem, 100%); }
@keyframes lay { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dialog, .scrim { animation: none; } }
.dialog__head {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-5) var(--s-5) var(--s-4);
}
.dialog__title { font-size: var(--t-h5); font-weight: 700; letter-spacing: var(--track-h); }
.dialog__body { padding: 0 var(--s-5) var(--s-5); overflow-y: auto; }
.dialog__foot {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--rule);
    background: var(--bench);
}

.toasts {
    position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex; flex-direction: column-reverse; gap: var(--s-2);
    width: min(30rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4);
    background: var(--ink); color: var(--bench);
    border-radius: var(--r-md);
    box-shadow: var(--lift-2);
    font-size: var(--t-small);
    animation: lay var(--dur-3) var(--ease);
}
[data-theme="dark"] .toast { background: var(--stock); color: var(--ink); border: 1px solid var(--rule); }
.toast--stop { background: var(--stop-strong); color: #FFFFFF; }
.toast--ok   { background: var(--ok-strong); color: #FFFFFF; }
.toast--warn { background: var(--warn); color: #3B2A05; }
.toast__x { color: inherit; opacity: .75; flex: 0 0 auto; background: none; border: none; cursor: pointer; }
.toast__x:hover { opacity: 1; }

/* ═══ EMPTY STATES ══════════════════════════════════════════════════════════ */

.blank { padding: var(--s-12) var(--s-4); text-align: center; color: var(--ink-2); }
.blank__zero {
    font-family: var(--face-value);
    font-size: var(--t-h3);
    /* Not --ink-disabled: this is decorative, but it is still rendered text and
       axe measures it as such - #94A3B8 lands at 2.56:1 against the 3:1 floor
       for large text. */
    color: var(--ink-3);
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: var(--s-3);
}
.blank__what { color: var(--ink); font-weight: 600; font-size: var(--t-body-lg); }
.blank__how { font-size: var(--t-small); margin-top: var(--s-2); }

/* ═══ ICONS ═════════════════════════════════════════════════════════════════ */

.ico { display: block; flex: 0 0 auto; }
.icon-chev { display: inline-flex; }

.btn__spin {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spin { animation-duration: 2.4s; } }

.donut { display: block; margin: 0 auto; }

/* ═══ THE SORTING ROW ═══════════════════════════════════════════════════════ */

.frow { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--stock); padding: var(--s-4); }
.frow + .frow { margin-top: var(--s-3); }
.frow--hazard { border-color: var(--warn); background: var(--warn-wash); }
.frow__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.frow__name { font-weight: 600; font-size: var(--t-body); }
.frow__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.frow__pair--solo { grid-template-columns: 1fr; }
.frow__derived {
    margin-top: var(--s-3);
    font-size: var(--t-fine);
    color: var(--ink-2);
    display: flex; align-items: baseline; gap: var(--s-2);
}
.frow__derived b { font-family: var(--face-value); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }

/* ═══ THE SEQUENCE RAIL ═════════════════════════════════════════════════════ */

.rail { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--stock); overflow: hidden; }
.rail__step {
    flex: 1 1 0; min-width: 0;
    padding: var(--s-3) var(--s-1);
    text-align: center;
    border-right: 1px solid var(--rule);
    color: var(--ink-3);
    position: relative;
}
.rail__step:last-child { border-right: none; }
.rail__step.is-done { color: var(--ok-strong); }
.rail__step.is-now { color: var(--spot); background: var(--spot-wash); font-weight: 600; }
.rail__n { font-family: var(--face-value); font-size: var(--t-fine); display: block; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.rail__t {
    font-size: 0.6875rem; font-weight: 500;
    display: block; margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══ THE ASSISTANT ═════════════════════════════════════════════════════════ */

.ai-call { position: relative; }
.ai-call__n {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--stop); color: #FFFFFF;
    border-radius: var(--r-pill);
    font-size: 0.625rem; font-weight: 700; line-height: 1;
}
.ai-panel {
    position: fixed; right: var(--s-5); top: calc(64px + var(--s-2));
    z-index: var(--z-modal);
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100dvh - 64px - var(--s-8)));
    display: flex; flex-direction: column;
    background: var(--stock);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-3);
    animation: lay var(--dur-3) var(--ease);
    overflow: hidden;
}
.ai-log { flex: 1 1 auto; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.ai-turn { font-size: var(--t-small); line-height: var(--lh-body); }
.ai-turn__who { font-size: var(--t-fine); font-weight: 600; color: var(--ink-3); display: block; margin-bottom: 2px; }
.ai-turn--you {
    background: var(--spot-wash);
    border-radius: var(--r-md);
    padding: var(--s-3);
}
.ai-starts { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ai-start {
    text-align: left; padding: var(--s-3) var(--s-4);
    font-size: var(--t-small); color: var(--spot);
    border: none; border-bottom: 1px solid var(--rule-soft);
    background: transparent; cursor: pointer;
    transition: background-color var(--dur-1) var(--ease);
}
.ai-start:last-child { border-bottom: none; }
.ai-start:hover { background: var(--spot-wash); }
.ai-ask { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); align-items: center; }
.ai-bullet { margin-left: var(--s-4); text-indent: calc(var(--s-3) * -1); }
.ai-bullet::before { content: "\2022"; margin-right: var(--s-2); color: var(--ink-3); }
.ai-gap { height: var(--s-2); }
.ai-turn code {
    font-family: var(--face-value); font-size: 0.9em;
    background: var(--bench-deep); border-radius: 4px; padding: 1px 4px;
}

/* ═══ MY WORK ═══════════════════════════════════════════════════════════════ */

.sentback { padding: var(--s-4) 0; }
.sentback + .sentback { border-top: 1px solid var(--rule); }
.sentback__head { display: flex; align-items: center; gap: var(--s-3); }
.sentback__meta { font-size: var(--t-fine); color: var(--ink-3); display: flex; gap: var(--s-3); margin-top: 2px; flex-wrap: wrap; }

/* Four children placed by grid AREA, not three columns in source order: the
   stamp spans both rows on the left, the address and the time share the top
   row, and the metadata runs the full width underneath the address. Laid out as
   plain columns the fourth child wraps into column one and the metadata starts
   under the stamp instead of under the address it belongs to. */
.wrow {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    grid-template-areas:
        "stamp what time"
        "stamp meta meta";
    align-items: baseline;
    column-gap: var(--s-3);
    padding: var(--s-4) 0;
}
.wrow > .stamp { grid-area: stamp; }
.wrow__what { grid-area: what; }
.wrow__time { grid-area: time; }
.wrow__meta { grid-area: meta; }
/* Only rows carrying an action get the fourth track. Adding it to every row
   would leave an empty column and its gap on all of them, pulling the time out
   of alignment down a list where most rows have nothing to press. */
.wrow--act {
    grid-template-columns: 7rem minmax(0, 1fr) auto auto;
    grid-template-areas:
        "stamp what time act"
        "stamp meta meta act";
}
.wrow__act { grid-area: act; align-self: center; }

/* On a phone the row cannot carry a stamp, an address, a time AND a control on
   one line - the address was squeezed to "1 RE..." while every row without a
   button showed its street in full. The control drops to its own line under
   the metadata instead, where it still reads as part of the row. */
@media (max-width: 700px) {
    .wrow--act {
        grid-template-columns: 7rem minmax(0, 1fr) auto;
        grid-template-areas:
            "stamp what time"
            "stamp meta meta"
            "stamp act  act";
    }
    .wrow__act { justify-self: start; align-self: start; margin-top: var(--s-2); }
}

.wrow + .wrow { border-top: 1px solid var(--rule); }
.wrow__what { min-width: 0; }
.wrow > .stamp { justify-self: start; }
.wrow__meta { font-size: var(--t-fine); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: 2px; }
.wrow__mostly { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wrow__time { font-size: var(--t-fine); color: var(--ink-3); white-space: nowrap; }

/* ═══ SELECTION BAR ═════════════════════════════════════════════════════════ */

.picked {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    border-radius: var(--r-md);
    background: var(--spot-wash);
    color: var(--spot);
    font-size: var(--t-small);
}
.flagged { color: var(--warn-strong); font-weight: 600; }

/* ═══ DETAIL PANEL ══════════════════════════════════════════════════════════ */

.detail__sub {
    font-size: var(--t-fine); font-weight: 600;
    color: var(--ink-2);
    margin: var(--s-6) 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule);
}
.shots { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.shot {
    position: relative; width: 88px; height: 88px;
    border: 1px solid var(--rule); border-radius: var(--r-md);
    background: var(--bench-deep);
    overflow: hidden;
}
.shot--lg { width: 124px; height: 94px; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__meta {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: var(--ink-3);
    font-size: 0.625rem;
}
.shot__x {
    position: absolute; top: 4px; right: 4px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    background: rgba(15,23,42,.72); color: #FFFFFF;
    border: none; border-radius: 50%; cursor: pointer;
}
.shot__x:hover { background: var(--stop); }

/* ═══ RANKED BARS ═══════════════════════════════════════════════════════════ */

.hbars { display: flex; flex-direction: column; gap: var(--s-3); }
.hbar { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); }
.hbar__name { flex: 0 0 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar__track { flex: 1 1 auto; min-width: 40px; height: 10px; background: var(--bench-deep); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.hbar__fill { position: absolute; inset: 0 auto 0 0; background: var(--spot); border-radius: var(--r-pill); }
.hbar__num { flex: 0 0 auto; min-width: 5ch; text-align: right; font-family: var(--face-value); font-variant-numeric: tabular-nums; font-size: var(--t-fine); font-weight: 600; }
@media (max-width: 620px) { .hbar__name { flex-basis: 6.5rem; } }

/* ═══ TREND ═════════════════════════════════════════════════════════════════ */

.trend { overflow-x: auto; }
.trend svg { min-width: 620px; }
.trend__tick { font-family: var(--face-value); font-size: 9px; fill: var(--ink-3); }
.trend__name { font-family: var(--face-text); font-size: 11px; font-weight: 600; fill: var(--ink); }

/* ═══ INTENSITY GRID ════════════════════════════════════════════════════════ */

/* Scrolls when a study has more months than the column is wide - and says so.
   The two gradients pinned to the edges are painted in the scroller's own
   coordinate space (background-attachment: local), so each fades out exactly
   when that end is reached: a shadow on the right means there is more to the
   right, and nothing to configure or measure in script. Without it a six-month
   study silently showed four, which on a screen someone is presenting from is
   worse than a scrollbar. */
.heat {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--stock) 30%, transparent) 0 0,
        linear-gradient(to left, var(--stock) 30%, transparent) 100% 0,
        linear-gradient(to right, color-mix(in srgb, var(--ink) 14%, transparent), transparent) 0 0,
        linear-gradient(to left, color-mix(in srgb, var(--ink) 14%, transparent), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}
/* Sized to its content, not to the panel. At width:100% the name column
   absorbed every spare pixel and shoved the months against the right edge of a
   full-width card, with a lake of white between the two halves of one row. The
   floor keeps the horizontal scroll working on a phone. */
.heat__tbl { width: auto; min-width: min(520px, 100%); border-collapse: collapse; }
.heat__tbl th { padding: var(--s-2); text-align: center; font-size: var(--t-fine); font-weight: 600; color: var(--ink-2); }
.heat__name { text-align: left !important; white-space: nowrap; padding-right: var(--s-3) !important; }
.heat__cell {
    width: 52px; height: 62px;
    border: 1px solid var(--rule-soft);
    text-align: center; vertical-align: middle;
    padding: var(--s-1) 2px;
}
/* A fixed square the mark is measured against, so --fill stays a true
   percentage of one side and the mark cannot come out a rectangle. */
.heat__box { display: block; position: relative; width: 36px; height: 36px; margin: 0 auto; }
.heat__mark {
    position: absolute; top: 50%; left: 50%;
    width: var(--fill); aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--spot);
    border-radius: 4px;
    opacity: .85;
}
.heat__n {
    display: block; margin-top: 3px;
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 10px; font-weight: 600;
    color: var(--ink-2);
}

/* ═══ SCATTER ═══════════════════════════════════════════════════════════════ */

.scatter { width: 100%; height: 380px; background: var(--bench); border: 1px solid var(--rule); border-radius: var(--r-md); display: block; }
.scatter__dot { fill: var(--spot); fill-opacity: .75; stroke: var(--stock); stroke-width: 1; }
.scatter__dot--none { fill: var(--ink-disabled); }

/* ═══ FRACTION KEY ══════════════════════════════════════════════════════════ */

.key { display: flex; flex-direction: column; gap: var(--s-2); }
.key__row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-small); }
.key__sw { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 3px; }
.key__pc { margin-left: auto; font-family: var(--face-value); font-size: var(--t-fine); color: var(--ink-2); font-weight: 600; }

/* ═══ COVERAGE ══════════════════════════════════════════════════════════════ */

.cover { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: center; }
.cover__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.cover__gauge { min-width: 0; }
.cover__gaugehead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-2); gap: var(--s-3); }
.cover__basis { font-size: var(--t-fine); margin-top: var(--s-2); color: #FFFFFF; }
@media (max-width: 900px) {
    .cover { grid-template-columns: minmax(0, 1fr); }
    .cover__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ MISC ══════════════════════════════════════════════════════════════════ */

.capture-plate { position: sticky; top: 64px; z-index: var(--z-sticky); margin-bottom: var(--s-4); }

.area { display: flex; align-items: center; gap: var(--s-2); }
.area__code { display: block; font-family: var(--face-value); font-size: var(--t-fine); color: var(--ink-3); }
.area__below { display: block; font-size: var(--t-fine); color: var(--ink-3); }
.is-off td:first-child { color: var(--ink-2); }
.is-off .area b { text-decoration: line-through; }

.acts { text-align: right; white-space: nowrap; }
.acts > * { display: inline-flex; vertical-align: middle; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pager__at { font-size: var(--t-small); color: var(--ink-2); }

.fold {
    display: flex; align-items: center; gap: var(--s-2);
    width: 100%; padding: var(--s-3) 0;
    border: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    font-size: var(--t-small); font-weight: 600;
    color: var(--spot); background: transparent; cursor: pointer;
}
.fold:hover { color: var(--spot-lift); }
.fold__body { padding: var(--s-4) 0 var(--s-2); }

.cols--code-name { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 520px) { .cols--code-name { grid-template-columns: minmax(0, 1fr); } }

/* ═══ DONUT PROBE ═══════════════════════════════════════════════════════════ */

.donutwrap { position: relative; }

/* Dimming the rest is what makes one wedge readable in a twelve-fraction ring:
   the eye finds the lit one without a colour lookup, and the two rings stay
   distinguishable because only the hovered ring's wedge stays full strength. */
.donut__w { transition: opacity .12s ease; }
.donut.is-probing .donut__w { opacity: .35; }
.donut.is-probing .donut__w.is-on { opacity: 1; }

.donuttip {
    position: absolute;
    z-index: 3;
    /* Above the pointer and clear of it, so the wedge being described is never
       under the thing describing it. */
    transform: translate(-50%, calc(-100% - 14px));
    pointer-events: none;
    display: flex; flex-direction: column; gap: 1px;
    padding: var(--s-2) var(--s-3);
    /* Sized to its own content. An absolutely-positioned box with no width
       shrinks to whatever room is left between `left` and the wrapper's edge,
       so a tooltip near the right of the chart wrapped its title one word per
       line. max-content ignores that; the cap keeps a long fraction name from
       running off the card. */
    width: max-content;
    max-width: min(15rem, 62vw);
    border-radius: var(--r-md);
    background: var(--ink);
    color: var(--stock);
    font-size: var(--t-fine);
    line-height: 1.35;
    box-shadow: 0 6px 20px rgb(15 23 42 / .28);
}
.donuttip b { font-weight: 600; }
.donuttip .value { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.donuttip__abs { color: var(--rule-ink); }

/* The trend key runs across rather than down: it sits under a wide plot, and a
   column of five names there would be a tall thin list beside a lot of nothing. */
.trend__key {
    flex-direction: row; flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-4);
    padding-left: var(--s-6);
}
.trend__key .key__row { font-size: var(--t-fine); }

/* A key entry is a switch, so it is a button: focusable, operable from the
   keyboard, and announced with its pressed state. */
.keytog {
    appearance: none; border: 0; background: none;
    padding: 2px var(--s-2); margin: -2px 0;
    border-radius: var(--r-sm, 8px);
    color: var(--ink); cursor: pointer;
    font: inherit; text-align: left;
}
.keytog:hover { background: var(--bench-deep); }
.keytog:focus-visible { outline: 2px solid var(--spot); outline-offset: 1px; }
.keytog.is-off { color: var(--ink-3); }
.keytog.is-off .key__sw { background: var(--rule-ink) !important; }

.scatter { display: block; margin: 0 auto; height: auto; }

/* Income bands. Ordinal data, so the ramp runs light to dark within one hue
   rather than using four unrelated colours - Low to High is an order, and a
   categorical palette would deny it. Mixed and Unrecorded sit outside the ramp
   because neither is a rung on it. */
.scatter__dot.is-low     { fill: #93C5FD; }
.scatter__dot.is-middle  { fill: #3B82F6; }
.scatter__dot.is-high    { fill: #1E3A8A; }
.scatter__dot.is-mixed   { fill: #14B8A6; }
.scatter__dot.is-unknown { fill: var(--rule-ink); }

.scatter__sw.is-low     { background: #93C5FD; }
.scatter__sw.is-middle  { background: #3B82F6; }
.scatter__sw.is-high    { background: #1E3A8A; }
.scatter__sw.is-mixed   { background: #14B8A6; }
.scatter__sw.is-unknown { background: var(--rule-ink); }

/* Pinned to the edge, and drawn so it cannot be mistaken for a bag that is
   really there: hollow, ringed, and slightly transparent. */
.scatter__dot.is-outside {
    fill: var(--stock);
    stroke: var(--warn-strong, #92400E);
    stroke-width: 2;
    stroke-dasharray: 2 2;
    opacity: .9;
}

/* Above the plot, centred on it, because they act on the figure below rather
   than on the page - the page's own filters live in the header. */
.scatter__areas { justify-content: center; margin-bottom: var(--s-3); }

/* The count rides inside the chip, dimmer than the name: it is what tells you
   which chip is worth pressing before you press it. */
.chip__n {
    margin-left: var(--s-1);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: var(--t-fine);
    color: var(--ink-3);
}
.chip[aria-pressed="true"] .chip__n, .chip.is-on .chip__n { color: inherit; opacity: .75; }

.scatter__key {
    flex-direction: row; flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    margin-top: var(--s-3);
    justify-content: center;
}
.scatter__key .key__row { font-size: var(--t-fine); }

.scatter__north path { fill: var(--ink-3); }
.scatter__n { font-size: 9px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.scatter__scale line { stroke: var(--ink-3); stroke-width: 1.25; }