/* ============================================================
   LIZZETTE, The Payroll Checker: the pay-run review app.

   The visual language, and where it comes from:
   - Neutrals are purely achromatic (Vercel's Geist scale: 100%,
     98%, 95%, 92%, 66%, 30%, 9% lightness at zero saturation).
     Blue-tinted greys are what made this read like an admin panel.
   - Type is Segoe UI Variable, the optical-size family Windows 11
     ships, so it is sharp and costs no network request. Weights
     stay between 400 and 600 - never 700 - and large sizes carry
     negative tracking, as Linear does.
   - Colour appears as text and small dots, never as filled tinted
     blocks. Stripe and Mercury both set financial numbers in the
     text colour and let one figure carry the hue.
   - Radii ladder 8 / 12 / 999, hairline rules, almost no shadow.

   Nothing is fetched over the network, so the app renders the
   same with no connection at all.
   ============================================================ */

:root{
  /* type: one scale, seven steps */
  --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:17px; --t-xl:21px; --t-2xl:28px; --t-3xl:40px;
  /* space: a 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r-md:12px; --r-full:999px;

  --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",-apple-system,system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,Menlo,monospace;

  --surface:#ffffff;
  --surface-2:#fafafa;
  --surface-3:#f2f2f2;
  --ink:#171717;
  --ink-2:#4d4d4d;
  --ink-3:#8f8f8f;
  --ink-4:#a8a8a8;
  --line:#e8e8e8;
  --line-2:#f0f0f0;

  --accent:#0d74ce;
  --crit:#c62a21;
  --caut:#8a5a00;
  --good:#1a7f37;
  --unk:#6b6b6b;

  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 12px 40px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ color-scheme:dark;
    --surface:#0c0c0c; --surface-2:#131313; --surface-3:#1c1c1c;
    --ink:#ededed; --ink-2:#a8a8a8; --ink-3:#7a7a7a; --ink-4:#5c5c5c;
    --line:#242424; --line-2:#1b1b1b;
    --accent:#63a9f0; --crit:#ff6d64; --caut:#e0a53a; --good:#4cb567; --unk:#9a9a9a;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-pop:0 16px 48px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{ color-scheme:dark;
  --surface:#0c0c0c; --surface-2:#131313; --surface-3:#1c1c1c;
  --ink:#ededed; --ink-2:#a8a8a8; --ink-3:#7a7a7a; --ink-4:#5c5c5c;
  --line:#242424; --line-2:#1b1b1b;
  --accent:#63a9f0; --crit:#ff6d64; --caut:#e0a53a; --good:#4cb567; --unk:#9a9a9a;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 16px 48px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font:400 var(--t-md)/1.55 var(--sans);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit;font-variant-numeric:inherit}
button{background:none;border:0;cursor:pointer;text-align:left;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
h1,h2,h3,h4,p,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
b,strong{font-weight:600}
.mono{font-family:var(--mono);font-size:.92em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* severity is carried by one variable and shown as a dot or as the
   colour of a single number - never as a filled panel */
.sev-1{--sv:var(--crit)}
.sev-2{--sv:var(--caut)}
.sev-3{--sv:var(--unk)}
.sev-4{--sv:var(--good)}
.dot{
  flex:none;width:7px;height:7px;border-radius:var(--r-full);
  background:var(--sv,var(--ink-4));transform:translateY(-1px);
}

/* ============ top bar ============ */
.topbar{
  display:flex;align-items:center;gap:var(--s4);height:56px;flex:none;
  padding:0 var(--s5);padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1}
.brandname{display:flex;align-items:baseline;gap:var(--s2);font:600 var(--t-sm)/1 var(--sans);letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.brandmark{flex:none;width:22px;height:22px}
.brandmark rect{fill:var(--accent)}
.brandmark path{fill:none;stroke:var(--surface);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.brandsub{font-weight:400;letter-spacing:0;color:var(--ink-3)}
.vrule{width:1px;height:14px;background:var(--line);flex:none}
.picker select{
  max-width:300px;padding:5px var(--s2);border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--surface-3);font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink-2);cursor:pointer;
}
.picker select:hover{color:var(--ink)}
.runstate{
  display:flex;align-items:center;gap:var(--s2);white-space:nowrap;
  font:500 var(--t-sm)/1.5 var(--sans);color:var(--sv,var(--ink-2));
}
.runstate::before{
  content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor;
}
.topacts{display:flex;align-items:center;gap:var(--s2);flex:none}
.who input{
  width:130px;padding:5px var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--t-sm);
}
.who input::placeholder{color:var(--ink-4)}
.who input:hover{border-color:var(--ink-4)}
.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 var(--s2);
  border-radius:var(--r-sm);color:var(--ink-3);font:500 var(--t-sm)/1 var(--sans);
}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}

/* ============ frame ============ */
.panes{height:calc(100% - 56px);display:grid;grid-template-columns:minmax(300px,344px) 1fr}
.rail{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.stage{overflow-y:auto;min-height:0;background:var(--surface-2)}
.sheet{max-width:760px;margin:0 auto;padding:var(--s7) var(--s6) var(--s8)}
.placeholder{color:var(--ink-3);padding:var(--s7) 0}

/* ---- rail: destinations, styled as navigation rather than as buttons ---- */
.railnav{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--s2) var(--s1)}
.dest{
  display:flex;align-items:baseline;gap:var(--s2);width:100%;
  padding:6px var(--s3);border-radius:var(--r-sm);
}
.dest:hover{background:var(--surface-3)}
.dest[aria-current="page"]{background:var(--surface-3)}
.destname{font:500 var(--t-sm)/1.5 var(--sans);color:var(--ink-2)}
.dest[aria-current="page"] .destname{color:var(--ink)}
.destnote{margin-left:auto;font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4);white-space:nowrap}

/* ---- rail: search and filters ---- */
.railfind{padding:var(--s2) var(--s3) var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.search{
  display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
}
.search:focus-within{border-color:var(--accent)}
.search svg{flex:none;width:14px;height:14px;color:var(--ink-4)}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;padding:7px 0;font-size:var(--t-sm)}
.search input::placeholder{color:var(--ink-4)}
.search input::-webkit-search-cancel-button{display:none}
.clearq{flex:none;padding:0 2px;color:var(--ink-4);font-size:var(--t-lg);line-height:1}
.clearq:hover{color:var(--ink)}

.filters{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border:1px solid var(--line);border-radius:var(--r-full);
  font:400 var(--t-xs)/1.6 var(--sans);color:var(--ink-2);white-space:nowrap;
}
.chip:hover{border-color:var(--ink-4);color:var(--ink)}
.chip .n{color:var(--ink-4)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:500}
.chip[aria-pressed="true"] .n{color:var(--surface);opacity:.6}

/* ---- rail: progress ---- */
.progress{padding:var(--s3) var(--s3) var(--s2)}
.track{display:flex;height:3px;border-radius:var(--r-full);overflow:hidden;background:var(--line)}
.track span{display:block;height:100%}
.track .st-needs-fixing{background:var(--crit)}
.track .st-fixed{background:var(--good)}
.track .st-no-action{background:var(--ink-4)}
.progtext{margin-top:var(--s2);font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4)}

/* ---- rail: the queue ---- */
.qhead{
  padding:var(--s2) var(--s3);border-top:1px solid var(--line);
  font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4);
}
.queue{flex:1;overflow-y:auto;overscroll-behavior:contain}
.qitem{
  display:block;width:100%;padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom:1px solid var(--line-2);
}
.qitem:hover{background:var(--surface-2)}
.qitem[aria-current="true"]{background:var(--surface-3);box-shadow:inset 2px 0 0 var(--ink)}
.qtop{display:flex;align-items:baseline;gap:var(--s2)}
.qname{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 var(--t-md)/1.4 var(--sans);letter-spacing:-.006em;
}
.qamt{font:500 var(--t-sm)/1.4 var(--sans);color:var(--sv);white-space:nowrap}
.qsum{
  margin-top:3px;padding-left:15px;font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.qmeta{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);padding-left:15px}
.qmore{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4)}
.qdone{margin-left:auto}
.qempty{padding:var(--s7) var(--s4);text-align:center;color:var(--ink-3);font-size:var(--t-sm)}

/* ---- decision pill: a dot and a word, no filled block ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font:500 var(--t-xs)/1.5 var(--sans);white-space:nowrap;color:var(--ink-3);
}
.pill::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.pill.st-needs-fixing{color:var(--crit)}
.pill.st-fixed{color:var(--good)}
.pill.st-no-action{color:var(--ink-3)}
.pill.st-open{color:var(--ink-4)}

/* ============ the sheet ============ */
.crumb{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;gap:var(--s2);
  font:500 var(--t-sm)/1.5 var(--sans);color:var(--sv,var(--ink-3));
}
.steps{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.steps .pos{font:400 var(--t-xs)/1 var(--sans);color:var(--ink-4);margin-right:var(--s2)}
.steps button{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;
  border-radius:var(--r-sm);color:var(--ink-3);font-size:var(--t-sm);
}
.steps button:hover:not(:disabled){background:var(--surface-3);color:var(--ink)}
.steps button:disabled{opacity:.3;cursor:default}

h1.title{
  font:600 var(--t-3xl)/1.08 var(--display);letter-spacing:-.03em;text-wrap:balance;
}
h2.title{font:600 var(--t-2xl)/1.2 var(--display);letter-spacing:-.022em;text-wrap:balance}
.lede{margin-top:var(--s4);font:400 var(--t-lg)/1.6 var(--sans);color:var(--ink-2);max-width:58ch;letter-spacing:-.006em}
.lede b{font-weight:600;color:var(--ink)}
.subtle{font-size:var(--t-sm);color:var(--ink-3)}

.section{margin-top:var(--s7)}
.section:first-child{margin-top:0}
.slabel{margin-bottom:var(--s3);font:500 var(--t-sm)/1.5 var(--sans);color:var(--ink-3)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);overflow:hidden;
}
.card + .card{margin-top:var(--s3)}

/* ---- headline figures ---- */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)}
.figure{
  display:block;width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s4) var(--s4) var(--s5);box-shadow:var(--shadow);
}
button.figure:hover{border-color:var(--ink-4)}
.figure .amt{
  display:block;font:600 var(--t-2xl)/1.15 var(--display);letter-spacing:-.028em;color:var(--sv);
}
.figure .lbl{display:block;margin-top:var(--s2);font:500 var(--t-sm)/1.5 var(--sans);color:var(--ink)}
.figure .note{display:block;margin-top:2px;font:400 var(--t-sm)/1.55 var(--sans);color:var(--ink-3)}
.figure ul{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-2);display:flex;flex-direction:column}
.figure li button{display:flex;gap:var(--s2);width:100%;align-items:baseline;padding:3px 0;font-size:var(--t-sm);color:var(--ink-2)}
.figure li button:hover{color:var(--accent)}
.figure li .w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.figure li .a{color:var(--ink-3)}

/* ---- finding card ---- */
.fhead{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s4) 0;flex-wrap:wrap}
.fhead .tag{flex:none;width:100%;margin-bottom:var(--s1)}
.fsum{flex:1;min-width:190px;font:500 var(--t-lg)/1.45 var(--sans);letter-spacing:-.008em}
.famt{font:600 var(--t-lg)/1.45 var(--sans);color:var(--sv);white-space:nowrap;letter-spacing:-.012em}
.ftext{padding:var(--s3) var(--s4) 0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);max-width:66ch}
.fsource{padding:var(--s3) var(--s4) var(--s4);font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4)}
.fbody{padding:0 var(--s4) var(--s4)}

/* ---- decide ---- */
.decide{padding:var(--s3) var(--s4);border-top:1px solid var(--line-2);background:var(--surface-2)}
.choices{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.choice{
  padding:6px var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink-2);
}
.choice:hover{border-color:var(--ink-4);color:var(--ink)}
.choice[aria-pressed="true"]{font-weight:500;color:var(--ink);border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.choice[data-state="needs-fixing"][aria-pressed="true"]{color:var(--crit)}
.choice[data-state="fixed"][aria-pressed="true"]{color:var(--good)}
.choice[data-state="no-action"][aria-pressed="true"]{color:var(--ink-2)}
.choice.undo{margin-left:auto;border-color:transparent;color:var(--ink-4)}
.choice.undo:hover{color:var(--ink-2);border-color:var(--line)}
/* Scoped to the element: the briefing's figure cards also use .note, for a
   line of prose that must stay plain text. */
textarea.note{
  display:block;width:100%;margin-top:var(--s2);padding:var(--s2) var(--s3);resize:vertical;min-height:36px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:var(--t-sm);
  line-height:1.5;
}
textarea.note::placeholder{color:var(--ink-4)}
textarea.note:focus{outline:none;border-color:var(--accent)}
.stamp{margin-top:var(--s2);font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4)}

/* ---- the reconciliation fold ---- */
.fold{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.foldhead,.foldrow{display:grid;grid-template-columns:1fr 104px 1fr}
.foldhead{border-bottom:1px solid var(--line)}
.foldhead span{padding:var(--s2) var(--s3);font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4)}
.foldhead .mid{text-align:center}
.foldhead .rt{text-align:right}
.foldrow{border-bottom:1px solid var(--line-2)}
.foldrow:last-child{border-bottom:0}
.foldrow .cat{grid-column:1/-1;padding:var(--s3) var(--s3) 2px;font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3)}
.foldrow .lf,.foldrow .rg{padding:0 var(--s3) var(--s3);display:flex;flex-direction:column}
.foldrow .rg{align-items:flex-end;text-align:right}
.foldrow .mid{
  display:flex;align-items:center;justify-content:center;
  padding:0 var(--s1) var(--s3);font:500 var(--t-sm)/1.4 var(--sans);
}
.foldrow .big{font:400 var(--t-md)/1.45 var(--sans);letter-spacing:-.008em}
.foldrow .sml{font:400 var(--t-xs)/1.45 var(--sans);color:var(--ink-4)}
.foldrow .mid.same{color:var(--ink-4)}
.foldrow .mid.down{color:var(--crit)}
.foldrow .mid.up{color:var(--caut)}
.neg{color:var(--crit)}

/* ---- figures for one person: no boxes, just rhythm ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--s5) var(--s4)}
.stat dt{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3)}
.stat dd{margin-top:2px;font:500 var(--t-xl)/1.2 var(--sans);letter-spacing:-.018em}
.stat dd.alarm{color:var(--crit)}

/* ---- tables ---- */
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow-x:auto;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
th{
  padding:var(--s2) var(--s3);text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--line);
  font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-4);
}
td{padding:var(--s3);text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2);color:var(--ink)}
th:first-child,td:first-child{text-align:left}
td:first-child{white-space:normal;color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td .sub{display:block;font-size:var(--t-xs);color:var(--ink-4);margin-top:1px}

/* ---- notice: a card with a coloured heading, not a coloured panel ---- */
.notice{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4);box-shadow:var(--shadow);
}
.notice + .notice{margin-top:var(--s3)}
.notice .edge{display:none}
.notice b{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);
  font:500 var(--t-sm)/1.5 var(--sans);color:var(--sv,var(--ink-3));
}
.notice b::before{content:"";flex:none;width:7px;height:7px;border-radius:var(--r-full);background:currentColor}
.notice p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.notice p strong{color:var(--ink)}

/* ---- disclosure ---- */
details{border-bottom:1px solid var(--line-2)}
details:first-of-type{border-top:1px solid var(--line-2)}
summary{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s1);cursor:pointer;list-style:none;
  font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::after{content:attr(data-n);margin-left:auto;font-size:var(--t-xs);color:var(--ink-4)}
summary:hover{color:var(--accent)}
.dbody{padding:0 var(--s1) var(--s4)}
.dbody p{margin-top:var(--s2);font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.dbody ul{margin-top:var(--s3);padding-left:var(--s4);list-style:disc;font-size:var(--t-sm);color:var(--ink-2);line-height:1.7}
.dbody li{margin-bottom:var(--s1)}
.scroll{max-height:300px;overflow-y:auto}

.buttons{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);padding:7px var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink-2);
}
.btn:hover{border-color:var(--ink-4);color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:500}
.btn.primary:hover{opacity:.88;color:var(--surface)}
.link{
  display:inline-flex;padding:3px 10px;border-radius:var(--r-full);border:1px solid var(--line);
  font:400 var(--t-sm)/1.5 var(--sans);color:var(--ink-2);
}
.link:hover{border-color:var(--ink-4);color:var(--ink)}
.links{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

.foot{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--ink-4);line-height:1.7;
}
.foot p{max-width:72ch}
.foot p + p{margin-top:var(--s3)}

/* ---- handover ---- */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--s5) var(--s4)}
.tally dt{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3)}
.tally dd{margin-top:2px;font:600 var(--t-2xl)/1.15 var(--display);letter-spacing:-.028em}
.hrow{
  display:flex;gap:var(--s3);align-items:baseline;width:100%;
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-2);
}
.hrow:hover{background:var(--surface-2)}
.hrow .w{font:500 var(--t-sm)/1.5 var(--sans);flex:none;width:158px}
.hrow .d{flex:1;min-width:0;font-size:var(--t-sm);color:var(--ink-3)}
.hrow .a{font:500 var(--t-sm)/1.5 var(--sans);color:var(--sv)}
.hnote{
  padding:0 var(--s4) var(--s3) calc(var(--s4) + 158px + var(--s3));
  border-bottom:1px solid var(--line-2);font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);
}
.card > .hrow:last-child,.card > .hnote:last-child{border-bottom:0}

/* ============ overlays ============ */
.toast{
  position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%) translateY(6px);
  background:var(--ink);color:var(--surface);padding:9px var(--s4);border-radius:var(--r-sm);
  font:400 var(--t-sm)/1.4 var(--sans);box-shadow:var(--shadow-pop);z-index:60;
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.toast[data-on="1"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.help{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-pop);padding:var(--s5);max-width:400px;
}
.help::backdrop{background:rgba(0,0,0,.35)}
.help h2{font:600 var(--t-xl)/1.3 var(--display);letter-spacing:-.018em;margin-bottom:var(--s4)}
.help dl > div{display:flex;gap:var(--s4);align-items:baseline;padding:5px 0}
.help dt{flex:none;width:64px;display:flex;gap:var(--s1)}
.help dd{font-size:var(--t-sm);color:var(--ink-2)}
kbd{
  display:inline-block;min-width:20px;padding:2px 6px;text-align:center;
  border:1px solid var(--line);border-radius:6px;background:var(--surface-2);
  font:400 var(--t-xs)/1.4 var(--sans);color:var(--ink-2);
}
.help .btn{margin-top:var(--s5)}

/* ---- API spend: a quiet chip in the top bar, the breakdown in a dialog ---- */
.costchip{
  display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 var(--s3);
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);
  font:500 var(--t-sm)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.costchip[hidden]{display:none}
.costchip:hover{border-color:var(--ink-4)}
.costchip .costlbl{color:var(--ink-3);font-weight:400}
.costs{width:min(600px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow-y:auto}
.costs .figures{margin-bottom:var(--s4)}
.costs .figure{padding:var(--s3) var(--s4) var(--s4);box-shadow:none;--sv:var(--ink)}
.costs .figure .amt{font-size:var(--t-xl)}
.costs h3{font:600 var(--t-md)/1.4 var(--display);margin:var(--s5) 0 var(--s2)}
.costs .tablewrap{box-shadow:none}
.costs td,.costs th{padding:var(--s2) var(--s3)}
.costs td.bad{color:var(--caut)}
.costs .foot{margin-top:var(--s4);line-height:1.55}
.costs .foot code{font:400 var(--t-xs)/1.4 var(--mono);word-break:break-all}
.costline{margin-top:var(--s4)}
.costline b{color:var(--ink);font-weight:500}
/* A phone's top bar is full: the pay-run picker needs the room. The tally is on the Check page instead. */
@media (max-width:520px){ .costchip,.costs .opt{display:none} }

/* ============ responsive ============ */
.tabbar{display:none}
@media (max-width:880px){
  .panes{grid-template-columns:1fr;height:calc(100% - 56px - 52px)}
  .rail{border-right:0}
  .stage{display:none}
  body[data-pane="stage"] .rail{display:none}
  body[data-pane="stage"] .stage{display:block}
  .sheet{padding:var(--s5) var(--s4) var(--s7)}
  h1.title{font-size:var(--t-2xl)}
  .lede{font-size:var(--t-md)}
  .topbar{gap:var(--s2);padding:0 var(--s4);height:52px}
  .panes{height:calc(100% - 52px - 52px)}
  .topacts .who,.brandname,.vrule,.costchip .costlbl{display:none}
  .costchip{padding:0 var(--s2);font-size:var(--t-xs)}
  .brand{gap:var(--s2)}
  .picker{flex:1;min-width:0}
  .picker select{width:100%;max-width:none}
  .runstate{flex:none;font-size:var(--t-xs)}
  .rs-more{display:none}
  .picker select{min-width:126px}
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);height:52px;
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .tab{display:flex;align-items:center;justify-content:center;font:400 var(--t-sm)/1.4 var(--sans);color:var(--ink-3)}
  .tab[aria-current="page"]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink)}
  .hnote{padding-left:var(--s4)}
  .hrow{flex-wrap:wrap}
  .hrow .w{width:auto}
  .stats,.tally{gap:var(--s4)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---- rows of plain statements inside a card: limits, blind spots, routing ---- */
.limitrow{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-2);font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.limitrow:last-child{border-bottom:0}
.flimit{
  margin:0 var(--s4) var(--s4);padding:var(--s2) var(--s3);
  border-left:2px solid var(--line);font:400 var(--t-xs)/1.6 var(--sans);color:var(--ink-3);
}
.progfoot{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s2)}
.progfoot .progtext{margin-top:0;flex:1;min-width:0}
.nextopen{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);white-space:nowrap}
.nextopen:hover{color:var(--accent)}

/* ============ running the next check ============
   Same language as everywhere else: a 7px dot carries state, a hairline card
   carries rows, and nothing is a filled tinted block. The stage states reuse
   the severity variable rather than inventing a second colour vocabulary. */
.sv-wait{--sv:var(--ink-4)}
.sv-warn{--sv:var(--caut)}
.sv-live{--sv:var(--accent)}
.sv-ok{--sv:var(--good)}
.sv-bad{--sv:var(--crit)}

/* the stage list, in the rail, while a check runs */
.railcheck{padding:var(--s2) var(--s3) var(--s4);overflow-y:auto}
.rchead{
  padding:var(--s2) 0 var(--s3);font:500 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);
  border-bottom:1px solid var(--line-2);
}
.rcrow{
  display:flex;align-items:baseline;gap:var(--s2);padding:7px 0;
  border-bottom:1px solid var(--line-2);font-size:var(--t-sm);color:var(--ink-2);
}
.rcrow:last-child{border-bottom:0}
.rcrow.sv-wait .rclabel{color:var(--ink-4)}
.rcrow.sv-live .rclabel{color:var(--ink);font-weight:500}
.rclabel{flex:1;min-width:0}
.rcdetail{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* With a check on screen the queue's own furniture has nothing to say. */
body[data-checking="1"] .railfind,
body[data-checking="1"] .progress,
body[data-checking="1"] .qhead,
body[data-checking="1"] .queue{display:none}

/* the form */
.runform{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap;padding:var(--s4)}
.field{display:flex;flex-direction:column;gap:var(--s1);flex:1;min-width:180px}
.flabel{font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3)}
.field input{
  padding:7px var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);font-size:var(--t-sm);outline:none;
}
.field input:hover{border-color:var(--ink-4)}
.field input:focus{border-color:var(--accent)}
.runform .btn{flex:none}
.runlist{margin-top:var(--s3);max-height:280px;overflow-y:auto}
.runlist .hrow{width:100%}
.runlist .n{flex:none;display:flex;flex-direction:column;align-items:flex-end;min-width:150px;font-variant-numeric:tabular-nums}
.runlist .ng{font:500 var(--t-sm)/1.5 var(--sans);color:var(--ink)}
.runlist .nd{font-size:var(--t-sm);color:var(--ink-3)}

/* the preflight rows */
.prow{
  display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-2);font-size:var(--t-sm);
}
.prow:last-child{border-bottom:0}
.prow b{font-weight:500;flex:none;width:158px;color:var(--ink)}
.prow span:last-child{flex:1;min-width:0;color:var(--ink-3)}

/* the quiet note that sits beside a button row: elapsed time, or why one is off */
.btnnote{align-self:center;font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3)}
.stophint{margin-top:var(--s3);max-width:66ch}

/* the log: the failures in it become findings, so it is not decoration */
.log{
  margin:0;padding:var(--s3) var(--s4);max-height:320px;overflow:auto;
  font:400 var(--t-xs)/1.7 var(--mono);color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
}

/* how far through a running check is: the number first, then the bar */
.runprog{padding:var(--s4) var(--s4) var(--s3);margin-bottom:var(--s4)}
.rpnums{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.rppct{font:600 28px/1.1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.rpleft{font-size:var(--t-sm);color:var(--ink-2)}
.rpbar{height:8px;margin:var(--s3) 0;border-radius:var(--r-full);background:var(--line-2);overflow:hidden}
.rpbar span{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .8s ease}
.rpnow{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.rpnow b{font-weight:500;color:var(--ink)}
.rpnow span{color:var(--ink-3)}

/* the steps, on the check page: plain name, what it is doing, its time */
.stagelist{list-style:none;margin:0;padding:0 var(--s4)}
.stagerow{
  display:flex;align-items:baseline;gap:var(--s2);padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:var(--t-sm);
}
.stagerow:last-child{border-bottom:0}
.stext{flex:1;min-width:0;display:flex;flex-direction:column}
.sname{color:var(--ink-2)}
.stagerow.sv-wait .sname{color:var(--ink-4)}
.stagerow.sv-live .sname{color:var(--ink);font-weight:500}
.snow{font-size:var(--t-xs);color:var(--ink-3)}
.stime{flex:none;font:400 var(--t-xs)/1.5 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.stepnote{margin-top:var(--s2)}
.techlog summary{font-size:var(--t-sm)}

@media (max-width:880px){
  .stagerow{flex-wrap:wrap}
  .stime{text-align:left;padding-left:15px;width:100%}
  .prow b{width:auto}
  .prow{flex-wrap:wrap}
}

/* ============ what has been checked, and when (2026-09-24) ============ */
/* the strip across the top of every view of the open run */
.runstrip{position:sticky;top:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);align-items:center;
  padding:var(--s2) var(--s6);border-bottom:1px solid var(--line);background:var(--surface);
  font:400 var(--t-xs)/1.6 var(--sans);color:var(--ink-3);
}
.runstrip[hidden],body[data-view="check"] .runstrip{display:none}
.runstrip .it{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.runstrip .it b{font-weight:500;color:var(--ink-2)}

/* the rail's count of runs not checked: red only while one could still change */
.destnote.alarm{color:var(--crit)}

/* "Where these findings came from" on the briefing */
.prov .srow{
  display:flex;align-items:baseline;gap:var(--s2);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-2);font-size:var(--t-sm);
}
.prov .srow:last-of-type{border-bottom:0}
.prov .stext{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--ink)}
.prov .stext small{font-size:var(--t-xs);color:var(--ink-3)}
.prov .when{flex:none;color:var(--ink-2);text-align:right;white-space:nowrap}
.prov .buttons{margin:0;padding:var(--s3) var(--s4);border-top:1px solid var(--line-2)}
.prov + .notice,.prov + details{margin-top:var(--s3)}
.hist .srow .when{order:-1;width:118px;text-align:left}

/* the pay runs list */
.prhead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s3)}
.prhead .subtle{flex:1;min-width:200px}
.prtable td{vertical-align:top;text-align:left;white-space:normal}
.prtable th{text-align:left}
.prtable td:nth-child(2){min-width:128px}
.prtable td.col-mail,.prtable td.col-rev{white-space:nowrap}
.prtable td:last-child,.prtable th:last-child{text-align:right;white-space:nowrap}
.prtable td b{font-weight:500;color:var(--ink)}
.prtable .rtag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-full);font-size:var(--t-xs);color:var(--ink-3)}
.prtable .rtag.open{color:var(--caut);border-color:currentColor}
.prtable .nc{color:var(--crit);font-weight:500;white-space:nowrap}
.prtable .nc.quiet{color:var(--ink-3);font-weight:400}
.prtable .st{color:var(--caut)}
.prtable .btn{padding:4px var(--s3)}
.prnote{margin-top:var(--s3)}
@media (max-width:880px){
  .runstrip{padding:var(--s2) var(--s4)}
  .runstrip .it.more{display:none}
  .prtable .col-mail,.prtable .col-rev{display:none}
  .hist .srow .when{width:auto}
}
.prfilters{margin-bottom:var(--s3)}

/* ---------------- hosted: who is signed in, and the sign-in page ---------------- */
/* The hosted app only (lib/auth.mjs). A desktop never shows either. */
.who[hidden],.signedin[hidden]{display:none}
.signedin{display:flex;align-items:center;gap:var(--s1);margin:0;font:500 var(--t-sm)/1.5 var(--sans);color:var(--ink-2);white-space:nowrap}
.signin-body{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.signin{max-width:380px;padding:var(--s6) var(--s6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.signin h1{margin:0 0 var(--s1);font:600 var(--t-xl)/1.3 var(--sans);color:var(--ink)}
.signin p{color:var(--ink-2);line-height:1.5}
.signin .btn{display:inline-block;margin-top:var(--s2);text-decoration:none}
.signin-note{padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-3)}
.signin-small{font-size:var(--t-xs)}
.btn.danger{color:var(--crit);border-color:currentColor}