/* =========================================================================
   PAYROLL — the runs list, the run page and the eight step pages, as the
   "Payroll Redesign v2" design draws them.

   One sheet for the whole of /runs, loaded after style.css. The base
   primitives (buttons, .badge, table.data, .fld, .filterbar, .crumb, .tabs)
   are style.css's and are used as they are; this file holds only what the
   payroll screens add on top: the step page's head, the run page's spine and
   pane, and the recipes the step pages share (figures, chain, checks, form
   card, section card, save bar). Every colour is a token, so the dark theme
   arrives with tokens.css and nothing here restates it.

   Recipes, in the order a step page stacks them:
     .pr-top      back · the run's step strip · where you are · Next
     .pr-head     stage eyebrow · h1 · sentence · rule · the page's documents
     .pr-alert    a watch-out, coloured by severity
     .pr-figs     the page's figures, one strip
     .pr-chain    how one wage / one balance is built, box by box
     .pr-checks   the page's checks as chips that filter the table
     .pr-form     the page's one way to add a row, with its bulk tools
     .pr-sec      a table in a card, with an optional collapsible head
     .pr-save     the sticky bar that says what saving does
   ========================================================================= */

/* The steps before any wage exists have no money hue of their own; they are
   drawn in the slate the R1 family is built from, a shade lighter. */
.stage-pre {
  --stage: var(--muted); --stage-wash: var(--page);
  --stage-line: var(--baseline); --stage-ink: var(--ink-2);
}

/* ---- .pr-top: the line above every step page ----------------------------- */
.pr-top { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  min-height: var(--top-line, 49px); padding: 0 0 var(--space-2); }
.pr-top .crumb { margin: 0; }
.pr-where { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 360px;
  min-width: 0; flex-wrap: wrap; }
/* One segment per step of THIS run. Done wears its stage's hue; the step the
   month is waiting on is ringed in the accent; the page you are on is
   outlined in ink, so "where am I" and "what is next" are two marks. */
.pr-strip { display: flex; gap: 3px; flex: 0 1 360px; min-width: 160px; }
.pr-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--border); }
.pr-seg.done { background: var(--stage); }
.pr-seg.next { box-shadow: inset 0 0 0 1.5px var(--accent); }
.pr-seg.here { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
a.pr-seg:hover { opacity: 0.8; }
.pr-pos { color: var(--ink-2); white-space: nowrap; }
.pr-pos b { color: var(--ink); font-weight: 600; }

/* ---- .pr-head: what this page is ----------------------------------------- */
.pr-head { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-2) 0 14px; }
.pr-head-main { flex: 1 1 460px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-eyebrow { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 600;
  color: var(--stage-ink, var(--ink-2)); }
.pr-eyebrow::before { content: ""; width: 12px; height: 3px; border-radius: 2px;
  background: var(--stage, var(--muted)); }
.pr-head h1 { margin: 0; font-size: var(--fig-xl); font-weight: 700; letter-spacing: -0.015em;
  color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.pr-head .sub { margin: 0; max-width: 80ch; line-height: 1.5; text-wrap: pretty; }
.pr-head .ph-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pr-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.pr-links > a { font-weight: 500; }
.pr-links > a::after { content: " →"; }

/* The rule behind a page as a line of text, not an info button: the design
   names what is folded away ("▸ The formula"), because on a page somebody is
   keying into, the name of the rule is what tells them whether to open it. */
.pagenote.text { margin: 0; max-width: none; }
.pagenote.text > summary { width: auto; height: auto; border: 0; background: none; padding: 0;
  border-radius: 0; color: var(--accent); font-size: inherit; font-weight: 600;
  display: inline; white-space: nowrap; }
.pagenote.text > summary::before { content: "\25B8\00a0"; font-weight: 400; }
.pagenote.text[open] > summary::before { content: "\25BE\00a0"; }
.pagenote.text > summary:hover { background: none; color: var(--accent-deep); text-decoration: underline; }
.pagenote.text .pn-body { margin-top: 6px; padding: 10px 14px; background: var(--surface);
  border: var(--card-edge); border-radius: 9px; max-width: 90ch; line-height: 1.55; color: var(--ink-2); }

/* ---- .pr-alert: a watch-out ---------------------------------------------- */
.pr-alert { --a: var(--accent); --a-wash: var(--accent-wash);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 var(--space-2); border-radius: 9px;
  background: var(--a-wash); box-shadow: inset 3px 0 0 var(--a); line-height: 1.45; }
.pr-alert > .pa-text { flex: 1 1 320px; text-wrap: pretty; }
.pr-alert > a, .pr-alert > .pa-act a { flex: none; font-weight: 600; color: var(--a); }
.pr-alert form.inline { margin: 0; }
.pr-alert.crit  { --a: var(--critical-ink); --a-wash: var(--critical-wash); }
.pr-alert.warn  { --a: var(--warn-ink); --a-wash: var(--warn-wash); }
.pr-alert.good  { --a: var(--good); --a-wash: var(--good-wash); }
.pr-alert.muted { --a: var(--muted); --a-wash: var(--page); color: var(--ink); }
.pr-alerts { margin: var(--space-1) 0 var(--space-2); }

/* ---- .pr-figs: the page's figures ---------------------------------------- */
.pr-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--border); border: var(--card-edge); border-radius: var(--radius);
  overflow: hidden; margin: 6px 0 14px; }
.pr-fig { background: var(--surface); padding: 12px 16px; display: flex; flex-direction: column;
  gap: 2px; min-width: 0; }
.pr-fig .l { font-size: var(--text-sm); color: var(--muted); }
.pr-fig .v { font-size: var(--fig); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.pr-fig .n { font-size: var(--text-xs); color: var(--muted); }
.pr-fig[class*="stage-"] .v { color: var(--stage-ink); }
.pr-fig.warn .v { color: var(--warn-ink); }
.pr-fig.crit .v { color: var(--critical-ink); }

/* ---- .pr-split: two shares of one bill ----------------------------------- */
.pr-split { background: var(--surface); border: var(--card-edge); border-radius: var(--radius);
  padding: 14px 18px; margin: 6px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.pr-split-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; }
.pr-split-bar > span { background: var(--stage); min-width: 2px; }
.pr-split-key { display: flex; gap: 22px; flex-wrap: wrap; }
.pr-split-key > span { display: flex; align-items: center; gap: 7px; }
.pr-split-key b { font-variant-numeric: tabular-nums; }
.pr-sw { width: 10px; height: 10px; border-radius: 2px; background: var(--stage, var(--muted)); flex: none; }

/* ---- .pr-chain: how one figure is built ---------------------------------- */
.pr-chain { background: var(--surface); border: var(--card-edge); border-radius: 12px;
  padding: 16px 18px; margin: 6px 0 14px; display: flex; flex-direction: column; gap: 12px; }
.pr-chain-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-chain-head b { font-size: var(--text-md); white-space: nowrap; }
.pr-chain-head span { font-size: var(--text-sm); color: var(--muted); flex: 1 1 300px; }
.pr-chain-who { font-weight: 600; }
.pr-boxes { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.pr-op { align-self: center; font-size: var(--text-lg); font-weight: 700; color: var(--muted); padding: 0 2px; }
.pr-box { flex: 1 1 110px; min-width: 110px; padding: 10px 12px; border-radius: 9px;
  border: var(--card-edge); background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.pr-box .l { font-size: var(--text-xs); color: var(--ink-2); }
.pr-box .v { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-box .how { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
.pr-box.zero { background: var(--page); }
.pr-box.res { background: var(--stage-wash); border-color: var(--stage); }
.pr-box.bad { background: var(--critical-wash); border-color: var(--critical-ink); }
.pr-box[class*="stage-"] .l::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--stage); margin-right: 5px; }

/* ---- .pr-checks: the page's checks, as filters --------------------------- */
.pr-checks { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface); border: var(--card-edge); border-radius: var(--radius);
  margin: 6px 0 0; }
.pr-checks > .pc-lbl { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); padding: 0 6px 0 2px; }
.pr-checks > .pc-meta { margin-left: auto; font-size: var(--text-sm); color: var(--muted); }
.pr-checks > .pc-pass { color: var(--good); font-weight: 600; }
.pr-chip { --c: var(--accent); --c-wash: var(--accent-wash);
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border-radius: var(--radius-pill); border: var(--card-edge); background: var(--surface);
  color: var(--ink); font-size: var(--text-sm); font-weight: 400; cursor: pointer; white-space: nowrap;
  text-decoration: none; }
.pr-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pr-chip b { color: var(--c); font-variant-numeric: tabular-nums; }
.pr-chip:hover { background: var(--c-wash); text-decoration: none; }
.pr-chip.on { background: var(--c-wash); border-color: var(--c); }
.pr-chip.crit { --c: var(--critical-ink); --c-wash: var(--critical-wash); }
.pr-chip.warn { --c: var(--warn-ink); --c-wash: var(--warn-wash); }
.pr-chip.info { --c: var(--accent); --c-wash: var(--accent-wash); }
.pr-checks + .pr-alert { margin-top: var(--space-2); }

/* ---- .pr-form: the page's one way to add a row --------------------------- */
.pr-form { background: var(--surface); border: var(--card-edge); border-radius: 12px;
  padding: 14px 18px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pr-form-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pr-form-head b { font-size: var(--text-md); white-space: nowrap; }
.pr-form-head span { font-size: var(--text-sm); color: var(--muted); flex: 1 1 300px; }
.pr-form form, .pr-form .pr-form-row { margin: 0; }
.pr-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.pr-preview { font-size: var(--text-sm); font-weight: 600; color: var(--accent-deep); }
.pr-bulk { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--grid); }
.pr-bulk > .pb-lbl { font-size: var(--text-sm); color: var(--muted); }
.pr-bulk form.inline { margin: 0; }

/* ---- .pr-sec: a table in a card ------------------------------------------ */
/* The table keeps its own clipping (table.data is overflow: clip with the
   card radius), so this card never sets overflow itself — a scroll container
   here would stop a long register's column headings pinning to the window,
   and a wide one would scroll inside the card instead of with the page. */
.pr-sec { background: var(--surface); border: var(--card-edge); border-radius: 12px; margin-top: 14px; }
.pr-sec > .pr-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--grid);
  background: color-mix(in srgb, var(--page) 45%, var(--surface));
  border-radius: 12px 12px 0 0; cursor: default; list-style: none; }
.pr-sec > .pr-sec-head::-webkit-details-marker { display: none; }
.pr-sec > .pr-sec-head b { font-size: var(--text-md); white-space: nowrap; margin-right: 4px; color: var(--ink); }
.pr-sec > .pr-sec-head .meta { font-size: var(--text-sm); color: var(--muted); }
details.pr-sec > summary.pr-sec-head { cursor: pointer; }
details.pr-sec > summary.pr-sec-head b::before { content: "\25B8\00a0"; color: var(--muted); }
details.pr-sec[open] > summary.pr-sec-head b::before { content: "\25BE\00a0"; }
details.pr-sec:not([open]) > summary.pr-sec-head { border-bottom: 0; border-radius: 12px; }
.pr-sec-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--grid); }
.pr-sec-tools > .spacer { flex: 1; }
.pr-sec-tools .filterbar, .pr-sec-tools form { margin: 0; }
.pr-sec table.data { border: 0; box-shadow: none; border-radius: 0 0 12px 12px; }
.pr-sec > table.data:first-child, .pr-sec > form:first-child > table.data { border-radius: 12px; }
.pr-sec table.data th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600;
  background: color-mix(in srgb, var(--page) 70%, var(--surface)); border-bottom-color: var(--border);
  white-space: nowrap; }
.pr-sec table.data td { padding: 8px 10px; vertical-align: top; }
.pr-sec table.data tfoot td { background: color-mix(in srgb, var(--page) 70%, var(--surface)); }
.pr-sec .empty { padding: 18px 16px; color: var(--muted); margin: 0; }
/* A row's sub-line: the reason this row is flagged, under its name. */
.pr-rowsub { font-size: var(--text-xs); margin-top: 2px; max-width: 340px; white-space: normal;
  line-height: 1.35; color: var(--muted); }
.pr-rowsub.crit { color: var(--critical-ink); }
.pr-rowsub.warn { color: var(--warn-ink); }
.pr-rowsub.info { color: var(--accent-deep); }
.pr-tags { display: flex; gap: var(--space-2); margin-top: 3px; flex-wrap: wrap; }
.pr-tag { font-size: var(--text-xs); font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.pr-tag.crit { color: var(--critical-ink); }
.pr-tag.warn { color: var(--warn-ink); }
.pr-meta { margin: 10px 2px 0; font-size: var(--text-sm); color: var(--muted); }
.pr-foot { margin: 6px 2px 0; font-size: var(--text-sm); color: var(--muted); max-width: 90ch; }

/* ---- .pr-save: what saving does, always in reach ------------------------- */
.pr-save { position: sticky; bottom: 16px; z-index: 5; margin-top: 16px;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface); border: 1px solid var(--baseline);
  border-radius: 12px; box-shadow: 0 6px 20px rgba(16, 42, 90, 0.10); }
/* The ticket button floats over the page's bottom-right corner; the bar's
   own button must not sit under it. */
@media (min-width: 761px) { .pr-save { padding-right: 78px; } }
.pr-save > .ps-text { flex: 1 1 260px; color: var(--ink-2); }

@media (max-width: 760px) {
  .pr-strip { flex-basis: 100%; }
  .pr-head h1 { font-size: var(--fig-lg); }
  .pr-save { bottom: 8px; }
}
.pr-top .pr-next { margin-left: auto; }

/* A row a check chip has filtered out (payroll.js). */
table.data tr.pr-off { display: none; }

/* =========================================================================
   THE RUN PAGE (run_detail.html) — masthead, notes, the spine and its pane.
   ========================================================================= */
.hub-top { min-height: var(--top-line, 49px); display: flex; align-items: center; }
.hub-top .crumb { margin: 0; }
.hub-head { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
  padding: var(--space-2) 0 18px; border-bottom: 1px solid var(--border); }
.hh-main { flex: 1 1 300px; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hub-head h1 { margin: 0; font-size: var(--h1); font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.hh-sub { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--ink-2); }
.hh-figs { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.hh-fig { display: flex; flex-direction: column; gap: 3px; }
.hh-fig .l, .hh-hero .l { font-size: var(--text-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hh-fig .l::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--stage); }
.hh-fig b { font-size: var(--text-lg); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hh-hero { display: flex; flex-direction: column; gap: 3px; padding-left: 28px; border-left: 1px solid var(--border); }
.hh-hero .l { font-weight: 600; color: var(--stage-r3-ink); }
.hh-hero.is-done .l { color: var(--good); }
.hh-hero.is-partial .l { color: var(--accent-deep); }
.hh-hero b { font-size: var(--fig-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.hh-hero .n { font-size: var(--text-xs); color: var(--muted); }

.hub-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0;
  border-bottom: 1px solid var(--grid); color: var(--ink-2); }
.hub-note .hn-i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-wash);
  color: var(--accent); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hub-note .hn-text { flex: 1 1 320px; text-wrap: pretty; }
.hub-note > a { flex: none; font-weight: 600; }
.hub-note form.inline { margin: 0; }

.hub-body { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; margin-top: 20px; }

/* The spine: the run's steps by stage, sticky beside the pane it drives. */
.hub-spine { flex: 0 1 340px; min-width: 280px; position: sticky; top: 16px;
  background: var(--surface); border: var(--card-edge); border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 2px; }
.hs-head { display: flex; align-items: baseline; gap: var(--space-2); padding: 6px 10px 10px; }
.hs-head { align-items: center; }
.hs-head b { font-size: var(--text-md); font-weight: 650; color: var(--ink); white-space: nowrap; }
.hs-head .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hs-head .meta { margin-left: auto; font-size: var(--text-sm); color: var(--muted); }
.hs-top, .hs-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; color: var(--ink); text-decoration: none; }
.hs-top:hover, .hs-step:hover { background: var(--nav-wash); text-decoration: none; }
.hs-top.on, .hs-step.on { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }
.hs-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--grid); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; }
.hs-l { flex: 1; min-width: 0; line-height: 1.3; }
.hs-n { font-size: var(--text-xs); color: var(--muted); }
.hs-group { display: flex; flex-direction: column; gap: 1px; padding-top: var(--space-2); }
.hs-ghead { display: flex; align-items: center; gap: var(--space-2); padding: 4px 10px; }
.hs-ghead::before { content: ""; width: 12px; height: 3px; border-radius: 2px; background: var(--stage); }
.hs-gl { flex: 1; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.hs-gc { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.hs-gc.good { color: var(--good); }
.hs-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--baseline); font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.hs-step.done .hs-mark { background: var(--good-wash); color: var(--good); box-shadow: none; }
.hs-step.done .hs-l { color: var(--ink-2); }
.hs-step.next .hs-mark { background: var(--accent-fill); color: #fff; box-shadow: none; }
.hs-step.next .hs-l { font-weight: 600; }
.hs-next { flex: none; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.hs-flag { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-wash); color: var(--accent-deep); }
.hs-flag.crit { background: var(--critical-wash); color: var(--critical-ink); }
.hs-flag.warn { background: var(--warn-wash); color: var(--warn-ink); }

/* The pane: one step, the money, or the roster. */
.hub-panes { flex: 1 1 520px; min-width: 0; }
.hub-pane { background: var(--surface); border: var(--card-edge); border-radius: 12px; padding: 24px 28px;
  min-height: 560px; display: flex; flex-direction: column; gap: 20px; }
.hub-pane[hidden] { display: none; }
.hub-pane h2 { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.hp-head { display: flex; flex-direction: column; gap: var(--space-2); }
.hp-title { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.hp-title h2 { flex: 1 1 300px; }
.hp-status { flex: none; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--grid);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; display: inline-flex; align-items: center; }
.hp-status.is-done { background: var(--good-wash); color: var(--good); }
.hp-status.is-next { background: var(--accent-wash); color: var(--accent-deep); }
.hp-does, .hp-why { margin: 0; color: var(--ink-2); max-width: 64ch; line-height: 1.55; text-wrap: pretty; }
.hp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
  background: var(--grid); border: 1px solid var(--grid); border-radius: var(--radius); overflow: hidden; }
.hp-fig { background: color-mix(in srgb, var(--page) 45%, var(--surface)); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }
.hp-fig .l { font-size: var(--text-sm); color: var(--muted); }
.hp-fig b { font-size: var(--fig-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.hp-lbl { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.hp-issues { display: flex; flex-direction: column; gap: var(--space-2); }
.hp-issue { --i: var(--accent); --i-wash: var(--accent-wash);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 11px 14px; border-radius: 9px; background: var(--i-wash); box-shadow: inset 3px 0 0 var(--i); }
.hp-issue.crit { --i: var(--critical-ink); --i-wash: var(--critical-wash); }
.hp-issue.warn { --i: var(--warn-ink); --i-wash: var(--warn-wash); }
.hi-n { font-size: var(--text-lg); color: var(--i); font-variant-numeric: tabular-nums; min-width: 44px; }
.hi-what { display: flex; flex-direction: column; gap: 2px; }
.hi-l { font-weight: 600; }
.hi-why, .hi-fix { font-size: var(--text-sm); color: var(--ink-2); }
.hi-go { font-weight: 600; color: var(--i); white-space: nowrap; }
.hp-wos { display: flex; flex-direction: column; gap: 10px; }
.hw-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hw-head .meta { font-size: var(--text-sm); color: var(--muted); }
.hw-table { box-shadow: none; }
.hw-table button.is-checked { color: var(--good); border-color: var(--good-line); background: var(--good-wash); }
.hp-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--grid); }
.hp-foot form.inline { margin: 0; }
.hp-foot .spacer { flex: 1; }
.hp-closes { font-size: var(--text-sm); color: var(--warn-ink); }
.hp-nav { padding: 6px 10px; border-radius: 7px; color: var(--ink-2); text-decoration: none; }
.hp-nav:hover { background: var(--nav-wash); text-decoration: none; }
.hp-ovhead { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.hp-ovhead h2 { flex: 1; }
.hp-ovhead + .hp-why { margin-top: -8px; max-width: 66ch; }
.hub-pills { display: flex; gap: 2px; padding: 3px; background: var(--grid); border-radius: 9px; }
.hub-pills button { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent;
  color: var(--ink-2); font-weight: 500; box-shadow: none; }
.hub-pills button:hover:not([disabled]) { background: var(--surface); color: var(--ink); }
.hub-pills button.on { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 42, 90, 0.12); }
.hub-ov[hidden] { display: none; }
/* The money flow was a card of its own; inside the pane it is the pane. */
.hub-ov .flowsec { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0; }
.hp-addroster { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hp-addroster select { min-width: 240px; }
.hub-discard { display: flex; justify-content: flex-end; margin-top: 28px; }
/* clear of the floating ticket button in the bottom-right corner */
@media (min-width: 761px) { .hub-discard { padding-right: 64px; } }

@media (max-width: 900px) {
  .hub-spine { position: static; flex-basis: 100%; }
  .hub-pane { padding: 18px; min-height: 0; }
  .hh-hero { padding-left: 0; border-left: 0; }
}

/* =========================================================================
   THE RUNS LIST (runs.html) — open runs as cards, the year, the dialog.
   ========================================================================= */
.runs-month { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; }
.runs-month h2 { margin: 0; font-size: var(--text-lg); font-weight: 650; color: var(--ink); }
.runs-month .meta { font-size: var(--text-sm); color: var(--muted); }
.run-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-4); }
/* The whole card opens the run: its name is the link, stretched over the
   card, and the "next:" link sits above that stretch so it still opens the
   step itself. */
.run-card { position: relative; background: var(--surface); border: var(--card-edge); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.run-card:hover { border-color: var(--accent-line); box-shadow: 0 2px 10px rgba(16, 42, 90, 0.06); }
.rc-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.rc-link:hover { text-decoration: none; }
.rc-head { display: flex; align-items: flex-start; gap: 10px; }
.rc-name { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-name b { font-size: var(--text-lg); font-weight: 650; color: var(--ink); }
.rc-period { font-size: var(--text-sm); color: var(--muted); }
.rc-note { font-size: var(--text-sm); color: var(--muted); margin-top: -8px; }
.rc-progress { display: flex; flex-direction: column; gap: 7px; }
.run-segs { display: flex; gap: 3px; }
.run-segs .pr-seg { height: 6px; border-radius: 3px; }
.rc-next { font-size: var(--text-sm); color: var(--ink-2); position: relative; z-index: 1; }
.rc-next b { color: var(--ink); font-weight: 600; }
.rc-flag { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--good); }
.rc-flag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rc-flag.warn { color: var(--warn-ink); }
.rc-flag.crit { color: var(--critical-ink); }
.rc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--grid);
  border-top: 1px solid var(--grid); margin: 0 -20px -18px; border-radius: 0 0 12px 12px; overflow: hidden; }
.rc-figs > div { background: color-mix(in srgb, var(--page) 45%, var(--surface)); padding: 10px 14px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.rc-figs .l { font-size: var(--text-xs); color: var(--muted); display: flex; align-items: center; gap: 5px; }
.rc-figs .l::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--stage); }
.rc-figs b { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rc-figs b.muted { color: var(--muted); font-weight: 500; }
/* The history table's step column: the same segments, smaller. */
table.data .run-segs { min-width: 120px; }
table.data .run-segs .pr-seg { height: 5px; }

.runs-year { display: flex; gap: 40px; flex-wrap: wrap; padding: 14px 0 18px; }
.runs-year > div { display: flex; flex-direction: column; gap: 2px; }
.runs-year .l { font-size: var(--text-sm); color: var(--muted); }
.runs-year b { font-size: var(--fig-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.runs-year b.muted-fig { color: var(--ink-2); }

/* Start a payroll run: kinds as cards, and a box saying what Start makes. */
#run-new { max-width: 640px; width: calc(100vw - 40px); }
#run-new .runkind { border: 0; padding: 0; margin: 0 0 14px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
#run-new .runkind legend { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-2); padding: 0; }
#run-new label.kind { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: var(--radius);
  border: var(--card-edge); background: var(--surface); cursor: pointer; }
#run-new label.kind.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent-wash) 55%, var(--surface)); }
#run-new label.kind input { position: absolute; opacity: 0; pointer-events: none; }
#run-new .k-name { font-weight: 650; display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
#run-new .k-name::before { content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--baseline); background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--surface); }
#run-new label.kind.on .k-name::before { border-color: var(--accent); background: var(--accent); }
#run-new label.kind:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#run-new .k-what { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.45; }
#run-new .k-steps { font-size: var(--text-xs); color: var(--muted); }
#run-new .periodrow { display: contents; }
#run-new .periodrow[hidden] { display: none; }
.rn-preview { --p: var(--accent); --p-wash: var(--page);
  margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--p-wash);
  box-shadow: inset 3px 0 0 var(--p); display: flex; flex-direction: column; gap: 4px; }
.rn-preview.warn { --p: var(--warn-ink); --p-wash: var(--warn-wash); }
.rn-preview.crit { --p: var(--critical-ink); --p-wash: var(--critical-wash); }
.rn-preview .rp-eyebrow { font-size: var(--text-sm); color: var(--muted); }
.rn-preview .rp-title { font-size: var(--text-lg); font-weight: 650; color: var(--ink); }
.rn-preview .rp-body { color: var(--ink-2); line-height: 1.5; }
.rn-help { margin: 10px 0 0; line-height: 1.5; }

/* =========================================================================
   THIS MONTH'S RATES and ATTENDANCE & OT (rates.html, attendance.html)
   ========================================================================= */
/* Page CSS for rates-att — folded into payroll.css when the redesign lands.
   Steps 1 (This month's rates) and 2 (Attendance & OT). */

/* A filter bar's document, pushed to the bar's right end — the design's
   "Download PDF" sits apart from the filters because it is not one. */
.filterbar .pr-push { margin-left: auto; }

/* The attendance chips are links to the server's focus filters (see the
   template), so they wear the chip without a link's underline or colour. */
a.pr-chip, a.pr-chip:hover { color: var(--ink); }

/* The two grids' row sub-lines sit under a bold name; keep them off the
   rate column's "master" note, which is already its own small line. */
#rates-table .pr-rowsub, #att-table .pr-rowsub { max-width: 300px; }

/* The autosave bar wears both recipes: .savebar for app.js's state dot,
   .pr-save for the design. The state reads first, then what a save does. */
.savebar.pr-save .sb-state { flex: none; }
.savebar.pr-save .ps-text { font-size: var(--text-sm); }


/* =========================================================================
   R1 WAGES and the STAFF PAYROLL (r1.html, staff.html)
   ========================================================================= */
/* ---- R1: the five parts of a wage, as shades of the R1 slate -------------
   One hue, five strengths, because the five parts are one wage and not five
   kinds of money — a different hue per part would read as five stages.
   Mixed toward the ink at the strong end and the surface at the light end,
   so the order of the shades survives the dark theme, where both flip. */
.r1k-days   { --r1k: color-mix(in srgb, var(--stage-r1) 70%, var(--ink)); }
.r1k-ot     { --r1k: var(--stage-r1); }
.r1k-nh     { --r1k: color-mix(in srgb, var(--stage-r1) 66%, var(--surface)); }
.r1k-safety { --r1k: color-mix(in srgb, var(--stage-r1) 46%, var(--surface)); }
.r1k-awa    { --r1k: color-mix(in srgb, var(--stage-r1) 30%, var(--surface)); }

/* The chain's boxes carry their part's swatch beside the label — the same
   shade as the bar segments below, which is what ties a box to a segment. */
.pr-box.r1k .l::before { content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 2px; background: var(--r1k); margin-right: 5px; }
.pr-chain-who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.r1-who-meta { font-weight: 400; color: var(--muted); font-size: var(--text-sm); }
.pr-chain > .pr-alert { margin: 0; }

/* The register's bar: one fixed width, so it shows a wage's shape, never
   its size (see the panel's note). */
.r1-row { display: inline-flex; align-items: center; gap: 8px; }
.r1-bar { display: flex; width: 180px; height: 10px; border-radius: 3px; overflow: hidden;
  gap: 1px; background: var(--grid); }
.r1-seg { display: block; min-width: 2px; background: var(--r1k); }
.r1-dia { color: var(--accent); font-weight: 600; text-decoration: none; padding: 0 4px; }
.r1-dia:hover { color: var(--accent-deep); text-decoration: none; }

.r1-key { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted); }
.r1-key > span { display: inline-flex; align-items: center; gap: 5px; }
.r1-sw { width: 10px; height: 10px; border-radius: 2px; background: var(--r1k); flex: none; }

/* ---- Staff payroll ------------------------------------------------------- */
/* The missing-bank-details box is a <details> (the dashboard's finding links
   to #staff-held and its list must stay one click from the headline), wearing
   the alert recipe: summary on top, the names under it. */
details.pr-alert.st-held { display: block; }
details.pr-alert.st-held > summary { cursor: pointer; list-style: none; }
details.pr-alert.st-held > summary::-webkit-details-marker { display: none; }
details.pr-alert.st-held > summary::before { content: "\25B8\00a0"; color: var(--a); }
details.pr-alert.st-held[open] > summary::before { content: "\25BE\00a0"; }
.st-held .st-fix { display: block; font-size: var(--text-sm); color: var(--ink-2); margin-top: 2px; }
.st-held ul { margin: 8px 0 0; padding-left: 20px; }
.st-held li { margin: 2px 0; }
.pr-split .st-of { color: var(--muted); }
.pr-split .tableview { margin: 0; }
.st-miss { color: var(--critical-ink); font-weight: 600; }
.st-neg { color: var(--muted); }

/* The register's filter sits in the card's tool row, so it drops the filter
   bar's own strip — the card is the edge — and takes the row's free width
   rather than shrinking until its Filter button wraps under the fields. */
.pr-sec-tools > form.r1-filter { border: 0; padding: 0; background: none; flex: 1 1 420px; }

/* =========================================================================
   THE R2 REGISTER, PF and ESIC, and the FedOne dialogs (r2.html, _fedone_wiz.html)
   ========================================================================= */
/* Page CSS for r2 — folded into payroll.css when the redesign lands.

   R2, the wage register (steps 5–7), and the FedOne "which way" chooser and
   custom-file wizard (_fedone_wiz.html), which R3 includes too — so the
   dialog rules below are scoped by the dialogs' own ids, not by the page. */

/* ---- the register tab ----------------------------------------------------- */

/* The over-wage warning ends where its table does (see the comment on it). */
.warnbox.r2-fit { width: fit-content; max-width: 100%; overflow-x: auto; }

/* A check's note carries the list of workers behind its count, folded. */
.pr-alert > .r2-list { flex: 1 1 100%; margin: 0; }
.pr-alert > .r2-list > summary { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.pr-alert > .r2-list .wtable { margin-left: 0; }

/* Prefill from R1: the ticks fold out under their button rather than into a
   dialog of their own (see the comment in r2.html). */
.r2-pop { position: relative; }
.r2-pop > summary { display: inline-flex; align-items: center; list-style: none; cursor: pointer; }
.r2-pop > summary::-webkit-details-marker { display: none; }
.r2-pop-body { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0;
  width: min(420px, 86vw); padding: 12px 14px; background: var(--surface);
  border: var(--card-edge); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(16, 42, 90, 0.14); }
.r2-pop-body > p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.45; }
.r2-pop-list { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 130px; overflow-y: auto; }
.r2-pop-list > label { display: inline-flex; align-items: center; gap: 5px; }

/* The register's filter row, inside the section's tools strip. */
.r2-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.r2-filters input[type="search"] { min-width: 180px; }
.r2-check { display: inline-flex; align-items: center; gap: 6px; }
.r2-finding { padding: 10px 14px 0; }
.r2-finding .findingbar { margin: 0; }
.r2-gnote { margin: -6px 0 8px; }

/* Per-row inputs: the widths the register always had. */
#r2-lines th.r2-tick { width: 28px; }
#r2-lines select.r2-wo { max-width: 130px; }
#r2-lines input.r2-days { width: 60px; }
#r2-lines input.r2-nh { width: 44px; }

/* Column heads in their stage hues: PF violet, ESIC magenta, Net in R2 blue
   — the hue says which money each column is, the sign which way it goes. */
.dom-payroll table.data th.stage-pf,
.dom-payroll table.data th.stage-esic,
.dom-payroll table.data th.stage-r2 { color: var(--stage-ink); }

/* ---- the PF and ESIC tabs ------------------------------------------------- */
.r2-tabhead { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 6px; }
.r2-tabhead > p { flex: 1 1 420px; margin: 0; max-width: 90ch; line-height: 1.5; }
.r2-tabhead > .btn { flex: none; }
.vtab-pane > .pr-alert { margin-top: 0; }

/* ---- the FedOne dialogs (R2 and R3) --------------------------------------- */
#file-ways[open], #fedone-wiz[open] { display: flex; flex-direction: column; gap: 14px; }
#file-ways h2, #fedone-wiz h2 { margin: 0; font-size: var(--fig); }
#file-ways .toolbar.mb0, #fedone-wiz .toolbar.mb0 { margin: 0; }

/* The two ways side by side, each a card you press. */
#file-ways .waycards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; }
#file-ways .waycard { display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border-radius: var(--radius); }
#file-ways .waycard:hover:not([disabled]) { background: var(--accent-wash); border-color: var(--accent); }
#file-ways .waycard .wc-head { color: var(--ink); font-size: var(--text-md); margin: 0; }
#file-ways .waycard .wc-note { line-height: 1.5; }

/* The establishment-address ask: a warning that holds its own form. */
#fway-estab .pa-text { flex: 1 1 100%; }
#fway-estab form { flex: 1 1 100%; display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
#fway-estab form input[name="establishment_name"] { min-width: 180px; }
#fway-estab form input[name="establishment_address"] { min-width: 240px; flex: 1; }

/* What a finished download says about itself: the good note in green. */
#fway-done .callout, #fw-done .callout { margin: 0; padding: 12px 14px; border-radius: 9px;
  background: var(--good-wash); box-shadow: inset 3px 0 0 var(--good); border: 0; color: var(--ink); }
#fway-done ul, #fw-done ul { color: var(--ink-2); }

/* Crumbs: done is a green tick, the step you are on is filled, ahead is a ring. */
#fedone-wiz .fw-crumbs { gap: var(--space-2); margin: 0; flex-wrap: wrap; font-size: var(--text-sm); }
#fedone-wiz .fw-crumb { color: var(--ink-2); font-weight: 500; }
#fedone-wiz .fw-crumb:not(.now):not(.done) .fwno { background: var(--surface); color: var(--muted);
  box-shadow: inset 0 0 0 1.5px var(--baseline); }
#fedone-wiz .fw-crumb .fwno { width: 20px; height: 20px; font-size: var(--text-2xs); }
#fedone-wiz .fw-crumb.now { color: var(--ink); font-weight: 600; }
#fedone-wiz .fw-crumb.now .fwno { box-shadow: none; }   /* style.css fills it in the accent */
#fedone-wiz .fw-crumb.done .fwno { background: var(--good-wash); color: var(--good); box-shadow: none;
  font-size: 0; }
#fedone-wiz .fw-crumb.done .fwno::after { content: "\2713"; font-size: var(--text-2xs); }
#fedone-wiz .fw-crumbs .fwsep { flex: 0 0 24px; background: var(--border); }

/* The lists: one bordered box with ruled rows, not a stack of cards. */
#fedone-wiz .fw-step > p.small { margin: 0 0 8px; line-height: 1.5; }
#fedone-wiz .rowlist { border: 1px solid var(--grid); border-radius: var(--radius); padding: 0;
  max-height: 320px; overflow: auto; }
#fedone-wiz .rowlist .pickrow { align-items: center; gap: 12px; margin: 0; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; }
#fedone-wiz .rowlist .pickrow:last-child { border-bottom: 0; }
#fedone-wiz .rowlist > p { margin: 0; padding: 10px 14px; }
#fedone-wiz .rowlist h3 { margin: 0; padding: 8px 14px; font-size: var(--text); background: var(--page);
  border-bottom: 1px solid var(--grid); }
#fedone-wiz .rowlist table.data { border: 0; border-radius: 0; }
#fedone-wiz .rowlist .fw-allbar { margin: 0; padding: 8px 14px; }
#fedone-wiz .warnbox.small { margin: 8px 0 0; }
#fedone-wiz .dialog-error, #file-ways .dialog-error { margin: 0; color: var(--critical-ink); }

/* The add-line preview is empty until somebody types; empty, it takes no row. */
.pr-form > #calc-preview { margin: 0; }
.pr-form > #calc-preview:empty { display: none; }

/* =========================================================================
   R3 BALANCES and the EL & BONUS register (r3.html, el_bonus.html)
   ========================================================================= */
/* Page CSS for r3-elb — folded into payroll.css when the redesign lands.
   Step 8 (R3 balances, r3.html) and step 9 (EL & Bonus, el_bonus.html).
   Everything here is page-local; the recipes (.pr-chain, .pr-checks, .pr-sec,
   .pr-form, .pr-alert) are payroll.css's and are used as they are. */

.pr-r3, .pr-elb { min-width: 0; }

/* The filter row sits between the checks and the register card, as the
   design spaces it; .filterbar's own margins assume it opens a page. */
.pr-r3-filters, .pr-elb-filters { margin: 14px 0 10px; }

/* ---- R3 ------------------------------------------------------------------ */
.pr-r3 .pr-chain-who { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* A note under a figure in a number column — "nothing will be paid", the
   foot's "payable on file 2". A block under the figure, right-aligned with
   it, and never as wide as the row sub-line under a name: the Balance column
   is narrow and a 340px note would widen it for every row. */
.pr-r3 .pr-r3-cellsub { display: block; max-width: 14ch; margin-left: auto; font-weight: 500; }

/* The ⬦ beside a name sits a little off it, so it reads as its own control. */
.pr-r3 #r3-table .rb-mark { margin-left: 4px; text-decoration: none; }

/* ---- EL & Bonus ---------------------------------------------------------- */
/* Prefill opens a card under its button rather than a dialog — it carries
   a filter form the reader looks at while choosing, and it was always this
   way. The card keeps its old minimum width so the work-order ticks lay out. */
.pr-elb-prefill { min-width: 0; }
.pr-elb-prefill > summary { display: inline-block; list-style: none; cursor: pointer; }
.pr-elb-prefill > summary::-webkit-details-marker { display: none; }
.pr-elb-prefill-card { margin-top: var(--space-2); max-width: min(560px, 100%); min-width: min(340px, 100%); }

/* A figure keyed by hand is kept and never recounted, so it is marked where
   it is read: the box takes the warn edge, and the word "typed" sits under
   it (and under the read-only figure, for whoever cannot edit). */
.pr-elb input.typed { border-color: var(--warn-ink); background: var(--warn-wash); }
.pr-elb .pr-elb-typed { display: block; margin-top: 2px; font-size: var(--text-2xs);
  font-weight: 600; color: var(--warn-ink); letter-spacing: 0.02em; }

@media (max-width: 760px) {
  .pr-elb .pr-form-row > .fld { flex-basis: 100% !important; }
}
.hp-empty { margin: 0; color: var(--muted); }

/* =========================================================================
   HISTORY & ANALYTICS (runs.html) — the year's two line charts and its runs.
   The geometry is main._year_line_chart's; the labels are HTML laid over the
   SVG in percentages, so they keep their type size whatever width the chart
   is drawn at (text inside a scaled viewBox would grow with the screen).
   ========================================================================= */
.hist-year > summary { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hist-year > summary .badge { margin-left: auto; }
.hist-charts { display: flex; flex-direction: column; gap: var(--space-3); padding: 18px 22px; }
.lc-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.lc-head b { font-size: var(--text-md); color: var(--ink); }
.lc-head span { font-size: var(--text-sm); color: var(--muted); }
.lc-sep { padding-top: 14px; border-top: 1px solid var(--grid); margin-top: var(--space-1); }
.lc { position: relative; margin-top: 14px; padding-bottom: 22px; }
.lc svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-grid { stroke: var(--grid); stroke-width: 1; }
.lc-axis { stroke: var(--baseline); stroke-width: 1; }
.lc-gap { fill: var(--stage-r1); opacity: 0.08; }
.lc-line { fill: none; stroke: var(--stage); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lc-line.dashed { stroke-dasharray: 5 5; }
.lc-dot { fill: var(--stage); stroke: var(--stage); stroke-width: 2; }
.lc-pt.open .lc-dot, .lc-cpt.open .lc-dot { fill: var(--surface); }
.lc-hit { fill: transparent; cursor: pointer; }
.lc-pt:hover .lc-hit, .lc-pt.hot .lc-hit { fill: var(--accent); opacity: 0.05; }
.lc-pt:hover .lc-dot, .lc-pt.hot .lc-dot { r: 5.5; }
.lc-pt:focus-visible { outline: none; }
.lc-pt:focus-visible .lc-hit { fill: var(--accent); opacity: 0.1; }
.lc-guide { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.4; }
.lc-unit { position: absolute; left: 0; top: -14px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.lc-ylab { position: absolute; left: 0; width: 7%; transform: translateY(-50%); text-align: right;
  font-size: var(--text-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc-xlab { position: absolute; bottom: 0; transform: translateX(-50%); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.lc-end { position: absolute; transform: translateY(-50%); font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; color: var(--stage-ink); }
.lc-cval { position: absolute; transform: translate(-50%, -100%); font-size: var(--text-sm); color: var(--stage-staff-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-note { margin: 0; font-size: var(--text-xs); color: var(--muted); }
/* The tooltip is on the dark surface in both themes, like #tip. */
.lc-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 210px; padding: 10px 12px;
  border-radius: 9px; background: var(--on-dark-bg-2); color: #fff; box-shadow: 0 8px 24px rgba(16, 42, 90, 0.25);
  display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm); }
.lc-tip[hidden] { display: none; }
.lc-tip b { font-variant-numeric: tabular-nums; }
.lc-tip .tt-row { display: flex; align-items: center; gap: var(--space-2); }
.lc-tip .tt-row > span:nth-child(2) { flex: 1; }
.lc-tip .tt-sw { width: 9px; height: 9px; border-radius: 2px; background: var(--stage); }
.lc-tip .tt-sub { color: var(--on-dark-ink); }
.lc-tip .tt-sub.rule { border-top: 1px solid var(--on-dark-rule); padding-top: 5px; }
.lc-tip .tt-foot { color: var(--on-dark-muted); font-size: var(--text-xs); }
.lc-crew .lc-ylab { width: 7%; }

table.hist-runs { border: 0; border-top: 1px solid var(--grid); border-radius: 0; box-shadow: none; }
table.hist-runs th { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 600;
  background: color-mix(in srgb, var(--page) 45%, var(--surface)); }
table.hist-runs tr.hist-row { cursor: pointer; }
table.hist-runs tr.monthrow td { font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--page) 70%, var(--surface)); }
table.hist-runs tr.sel td { background: color-mix(in srgb, var(--accent-wash) 60%, var(--surface)); }
table.hist-runs .muted-num { color: var(--ink-2); }
.hist-open { margin-left: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--accent-deep); }
.hist-split { font-size: var(--text-xs); color: var(--muted); font-weight: 400; white-space: nowrap; }
.hist-split .stage-r2, .hist-split .stage-r3 { color: var(--stage-ink); }

/* The spine, folded: a 64px rail of discs. Names go (each item keeps its
   name as a tooltip), the group headings keep only their stage bar, and a
   step's flag count becomes a dot on its disc. */
.hs-toggle { flex: none; width: 28px; height: 28px; padding: 0; margin-left: var(--space-1);
  border: var(--card-edge); border-radius: 7px; background: var(--surface); color: var(--ink-2);
  font-size: var(--text-md); line-height: 1; box-shadow: none; }
.hs-toggle:hover:not([disabled]) { background: var(--nav-wash); color: var(--ink); }
.hub-spine { transition: min-width 160ms ease, flex-basis 160ms ease; }
.hub-spine.collapsed { flex: 0 0 64px; min-width: 64px; padding: 10px 8px; }
.hub-spine.collapsed .hs-head { padding: 2px 0 8px; justify-content: center; }
.hub-spine.collapsed .hs-head b, .hub-spine.collapsed .hs-head .meta,
.hub-spine.collapsed .hs-l, .hub-spine.collapsed .hs-n, .hub-spine.collapsed .hs-gl,
.hub-spine.collapsed .hs-gc, .hub-spine.collapsed .hs-next { display: none; }
.hub-spine.collapsed .hs-toggle { margin: 0; }
.hub-spine.collapsed .hs-top, .hub-spine.collapsed .hs-step { justify-content: center; padding: 8px 0; position: relative; }
.hub-spine.collapsed .hs-ghead { justify-content: center; padding: 4px 0; }
.hub-spine.collapsed .hs-flag { position: absolute; left: calc(50% + 5px); top: 4px; min-width: 0; width: 9px; height: 9px;
  padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--surface); }
.hub-spine.collapsed .hs-flag.crit { background: var(--critical-ink); }
.hub-spine.collapsed .hs-flag.warn { background: var(--warn-ink); }
.hub-spine.collapsed .hs-flag.info { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .hub-spine { transition: none; } }
@media (max-width: 900px) {
  /* Stacked above the pane there is no width to win; folded, it is a row. */
  .hub-spine.collapsed { flex-basis: 100%; min-width: 0; }
  .hub-spine.collapsed .hs-group, .hub-spine.collapsed { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hub-spine.collapsed .hs-head { flex-basis: 100%; justify-content: flex-end; }
  .hub-spine.collapsed .hs-top, .hub-spine.collapsed .hs-step { width: 44px; }
}
.lc-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
@media (max-width: 760px) {
  .lc { min-width: 640px; }
  .hist-charts { padding: 14px; }
}