/**
 * signals.css: the one place a status, a count, a figure or a choice is drawn.
 *
 * Written after an owner complaint on 2026-09-06 ("tired of messy pill UI
 * across bms surfaces") and a survey of every surface, which found 73 chip
 * style class names across 38 files, 195 separate `border-radius: 999px`
 * declarations, and 118 places where a light theme colour was written out as a
 * raw rgba so it stayed light when the theme went dark.
 *
 * THE RULES THESE CLASSES ENCODE, so the next person does not have to guess:
 *
 *   1. Round means you can press it. Square means you cannot. 999px is for
 *      controls only, which is why .sig-state is square and .sig-seg is not.
 *   2. A mark that appears on the majority of rows is decoration. Render a
 *      state only when it differs from what the list already means.
 *   3. Counts, money and states never share a container. They answer
 *      different questions.
 *   4. Zero is not worth printing. Gate on > 0, or say it in words.
 *   5. A state label is three words or fewer. Longer is a sentence, and
 *      belongs in the row's prose.
 *   6. Every colour is var(--token, var(--alt, literal)). The tint carries
 *      the state, the text stays --ink.
 *   7. Anything focusable is at least 16px, and 44px tall on a touch screen.
 *
 * RETIRED INTO THIS SHEET, so nobody re-invents one of them:
 *   .pr-pill .pr-pills   payroll strip            -> .sig-flow + .sig-figures
 *   .pr-chip .st-*       payroll sheet status     -> .sig-state
 *   .ta-status           attendance row status    -> .sig-state
 *   .ta-status-strip     seven timesheet counts   -> .sig-flow
 *   .pk-state            supplier bank state      -> .sig-state
 *   .rn-chip             payment run status       -> .sig-state
 *   .uv-badge            unavailability decision  -> .sig-state
 *   .ap-tag              application flags        -> .sig-state
 *   .hl-tag              handbook page flags      -> .sig-state
 *   .od-chip .od-chips   ordering                 -> deleted, already dead
 *   .seg .viewseg        roster + requests switch -> .sig-seg
 *
 * DELIBERATELY LEFT ALONE, with the reason, so this is not re-argued:
 *   .mf-pill, .chip-name   inline OBJECT tokens (a merge field, a person, an
 *                          oil). Round is right: you can press or delete them.
 *   .rv-pill               already shared and themed in notecontent.css.
 *   .pb-chip               coloured text in a sub-line, never a pill. Only the
 *                          always-on green was dropped.
 *   the roster status bar  17 dense stats, already text, one gated zero. Its
 *                          real fault is mixed units in one row, not pills.
 *
 * Fallbacks are three deep on purpose: GnaShell defines only --g-* names, and
 * the kiosk has no --r-md or --shadow-md, so an unguarded token silently
 * resolves to currentColor or drops the radius.
 */

/* ── A progression: one bar, one sentence ──────────────────────────────────
 * For a set of items on a journey that has a direction and adds up to a whole.
 * NOT for categories with no order (incident types, teams, oil families): a
 * bar implies a direction that is not there.
 *
 * The bar carries no text, so small-type contrast rules never apply to it, and
 * the sentence underneath is its accessible name. Segments size themselves
 * from --n, so a stage with nothing in it contributes no element and no words.
 * Under eight items the bar is suppressed: three fat blocks say less than the
 * sentence already does. */
.sig-flow { margin: 0 0 14px; }
.sig-flow-bar {
  display: flex; gap: 2px; height: 6px; overflow: hidden;
  border-radius: 999px;
  background: var(--wash, rgba(35, 32, 26, .06));
}
.sig-flow[data-sparse="1"] .sig-flow-bar { display: none; }
.sig-flow-seg { flex: var(--n, 1) 1 0; min-width: 3px; }
/* Three tones is the ceiling. Five stages painted five hues is a colour wheel,
 * and the only question the bar answers is whether anything waits on you.
 *
 * ORDER IS FIXED, is-done FIRST (owner, 2026-09-07). A bar reads as a thing
 * filling up, and a thing fills from the left, so the finished share is the
 * left-hand block and grows rightward as the week is worked. Journey order
 * (to come, waiting, done) put the green on the right and read backwards:
 * the bar looked emptier the more was finished. Call sites emit
 * done, then wait, then move. */
.sig-flow-seg.is-move { background: var(--line-2, var(--g-line-strong, #D9D5CD)); }
.sig-flow-seg.is-wait { background: var(--ember, var(--g-ember, #BC5A22)); }
.sig-flow-seg.is-done { background: var(--ok, var(--g-ok, #2E7D52)); }
.sig-flow-say {
  margin: 8px 0 0; font-size: .95rem; line-height: 1.45;
  color: var(--muted, var(--g-muted, #6F6A61));
}
.sig-flow-say strong { font-weight: 650; color: var(--ink, var(--g-ink, #23201A)); }
@media (pointer: coarse) { .sig-flow-say { font-size: 1rem; } }

/* ── One row, one state, only when it deviates ─────────────────────────────
 * SQUARE, because round means pressable. Ink on a tint rather than a colour on
 * a wash of itself, which measured 3.48 to 4.28 against the card and had to be
 * abandoned when the kiosk tried it. nowrap is deliberate: a label long enough
 * to wrap is a sentence and belongs in the row's prose.
 *
 * MEASURED 2026-09-06 on the running pages, because color-mix is invisible to
 * check-contrast.mjs and every previous chip family skipped this step. Text on
 * the tint, tint composited over the real card, at the 13.12px these render at.
 * The floor for that size is 4.5.
 *
 *   Shell        is-move  is-wait  is-stop  is-done
 *   Admin dark    13.40     9.41    10.57     9.74
 *   Admin light   13.54    12.54    12.33    12.44
 *   Team dark     15.65     9.41    10.57     9.74
 *   Kiosk         19.06    11.64    12.72    10.76
 *   GNA           15.65    10.66    10.57     9.74
 *
 * Lowest is 9.41, roughly double the floor. Re-measure if a token moves. */
.sig-state {
  display: inline-block; flex: none;
  padding: 3px 8px;
  border-radius: var(--r-sm, var(--g-r-sm, 8px));
  font-size: .82rem; font-weight: 650; line-height: 1.35;
  white-space: nowrap;
  color: var(--ink, var(--g-ink, #23201A));
  background: var(--wash, rgba(35, 32, 26, .06));
}
.sig-state.is-move { background: var(--wash, rgba(35, 32, 26, .06)); }
.sig-state.is-wait { background: color-mix(in srgb, var(--warn, var(--ember, var(--g-ember, #9A6A0B))) 20%, var(--card, var(--surface, var(--g-card, #FFFFFF)))); }
.sig-state.is-stop { background: color-mix(in srgb, var(--danger, var(--g-err, #B23B27)) 18%, var(--card, var(--surface, var(--g-card, #FFFFFF)))); }
.sig-state.is-done { background: color-mix(in srgb, var(--ok, var(--g-ok, #2E7D52)) 20%, var(--card, var(--surface, var(--g-card, #FFFFFF)))); }
/* The kiosk is read at arm's length and phones one-handed, so the coarse
 * pointer is the right gate for size, not the viewport width. */
@media (pointer: coarse) { .sig-state { font-size: .88rem; padding: 4px 9px; } }

/* ── Money, hours, totals ──────────────────────────────────────────────────
 * A measured quantity and its label. Figure first at size, label above it,
 * tabular numerals so columns line up, and NEVER a colour: a dollar amount has
 * no state. Any caveat attaches directly under the figure it qualifies, so
 * wrapping can never strand it. */
.sig-figures { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0 0; }
.sig-fig { min-width: 0; }
.sig-fig dt { font-size: .78rem; font-weight: 500; color: var(--muted, var(--g-muted, #6F6A61)); }
.sig-fig dd {
  margin: 2px 0 0;
  font-size: 1.35rem; font-weight: 650; line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--g-ink, #23201A));
}
.sig-fig-note { margin: 3px 0 0; max-width: 34ch; font-size: .78rem; line-height: 1.4; color: var(--muted, var(--g-muted, #6F6A61)); }
@media (pointer: coarse) { .sig-fig dd { font-size: 1.5rem; } }

/* ── A number attached to a label, never at zero ───────────────────────────
 * Brackets for the inline form, because the row usually already has an icon, a
 * name and a chevron, and a filled pill would be a fourth thing competing.
 * The badge is round because it sits on something you press. */
.sig-count {
  flex: none; margin-left: .45ch;
  font-size: .78rem; font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted, var(--g-muted, #6F6A61));
}
.sig-count::before { content: "("; }
.sig-count::after { content: ")"; }
.sig-count.is-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700;
  background: var(--ember, var(--g-ember, #BC5A22));
  color: var(--btn-fg, var(--card, var(--g-card, #FFFFFF)));
}
.sig-count.is-badge::before, .sig-count.is-badge::after { content: none; }

/* ── Pick one of these ─────────────────────────────────────────────────────
 * Three loose pills read as three separate buttons; one track reads as one
 * choice. margin: 0 on the option is load-bearing: bms-theme.css ships
 * `label { margin-bottom: .4rem }` and the kiosk loads it. */
.sig-seg {
  border: 0; margin: 0 0 12px; padding: 3px;
  display: flex; align-items: stretch; gap: 2px;
  border-radius: var(--r-sm, var(--g-r-sm, 9px));
  background: var(--wash, rgba(35, 32, 26, .07));
}
.sig-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sig-seg-opt {
  flex: 1; margin: 0; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px;
  border-radius: calc(var(--r-sm, var(--g-r-sm, 9px)) - 3px);
  font-size: 16px; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer;
  color: var(--muted, var(--g-muted, #6F6A61));
}
.sig-seg-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* A button carries its own border, background and font. The track supplies all
   three, so they are reset here rather than at each call site. */
button.sig-seg-opt { border: 0; background: none; font-family: inherit; appearance: none; }
.sig-seg-opt:has(input:checked), .sig-seg-opt.is-on {
  background: var(--card, var(--surface, var(--g-card, #FFFFFF)));
  color: var(--ink, var(--g-ink, #23201A));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.sig-seg-opt:focus-within, .sig-seg-opt:focus-visible {
  outline: 2px solid var(--ember, var(--g-ember, #BC5A22)); outline-offset: 1px;
}
@media (pointer: coarse) { .sig-seg-opt { min-height: 44px; } }

/* Spoken-only text, for a badge whose number needs naming. */
.sig-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }