/* ================================================================
   UI KIT CORE — kit-core.css
   The foundation every surface builds on. Pairs with kit-core.js.
   Requires tokens.css + kit-ext.css (lifecycle palette) first.
   Components: vocabulary (.lcc · .inr-c · .plate) · state card
   (.stc, seven kinds) · spec list (.spl) · select (.flt + .pop-menu).
   The .flt / .pop-menu / .pop-it chrome is PROMOTED verbatim from
   surfaces/assets.js — this file owns those classes now.
   ================================================================ */

/* ---------------------------------------------------------------
   0 · VOCABULARY
   --------------------------------------------------------------- */
/* lifecycle chip — swatch + human label, colour from the lc-* registry */
.lcc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--lc-ink);white-space:nowrap}
.lcc b{font-weight:650;font-variant-numeric:tabular-nums}
/* compact money — the exact figure lives on hover/focus, never lost */
.inr-c{font-variant-numeric:tabular-nums;border-bottom:1px dotted color-mix(in srgb,var(--ink) 28%,transparent);border-radius:2px;cursor:help;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.inr-c:hover,.inr-c:focus-visible{border-bottom-color:var(--accent-ink);background:var(--accent-bg)}
/* absence plate — identical to shell.css so kit pages stand alone */
.plate{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);border:1.5px solid var(--hairline);border-radius:4px;padding:2px 6px;white-space:nowrap}
.plate.miss{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 55%,transparent)}
.plate.warnp{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}

/* ---------------------------------------------------------------
   1 · STATE CARD  (.stc) — none · filtered · loading · failed ·
       unevaluable · denied · first-run. Different chrome per kind,
       never different prose. No spinner, no illustration.
   --------------------------------------------------------------- */
.stc{position:relative}
/* centred kinds (none / filtered / failed / denied / first-run) */
.stc.c{max-width:520px;margin:0 auto;text-align:center;padding:36px 34px 32px}
.stc-ic{width:42px;height:42px;border-radius:12px;margin:0 auto 14px;display:grid;place-items:center;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--hairline);transition:transform var(--t-med) var(--ease-spring),color var(--t-fast) ease,border-color var(--t-fast) ease}
.stc:hover .stc-ic{transform:translateY(-2px) rotate(-3deg);color:var(--ink-2)}
.stc-what{font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.stc-why{margin:7px auto 0;max-width:46ch;font-size:12.5px;color:var(--ink-3);line-height:1.62}
.stc-why b{color:var(--ink-2);font-weight:600}
.stc-meta{margin-top:10px;font-size:11px;color:var(--ink-3)}
.stc-acts{margin-top:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
/* filtered — the count outside the view is the headline fact */
.stc.filtered .stc-meta{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.stc.filtered .stc-meta b{font-weight:650;color:var(--ink)}
/* failed — a danger-tinted hairline on the top edge; failure ≠ emptiness */
.stc.failed::before{content:"";position:absolute;top:-1px;left:14px;right:14px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--lc-missing) 68%,var(--surface))}
.stc.failed .stc-ic{color:var(--lc-missing-ink);background:var(--lc-missing-bg);border-color:color-mix(in srgb,var(--lc-missing) 38%,var(--hairline))}
.stc.failed:hover .stc-ic{color:var(--lc-missing-ink)}
.stc.failed .stc-meta{font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums}
/* first-run — forward-looking, accent, never an error face */
.stc.first-run .stc-ic{color:var(--accent-ink);background:var(--accent-bg);border-color:color-mix(in srgb,var(--accent) 30%,var(--hairline))}
.stc.first-run:hover .stc-ic{color:var(--accent-ink)}
/* denied — the rail's locked-plate move: the seat that owns it, shown as a seat */
.stc-seat{margin:16px auto 0;display:flex;align-items:center;gap:11px;max-width:340px;padding:11px 13px;border:1px solid var(--hairline);border-radius:10px;background:var(--surface-2);text-align:left;transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.stc-seat:hover{border-color:color-mix(in srgb,var(--ink) 14%,var(--hairline));background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
.stc-seat .u-av{width:30px;height:30px;font-size:10.5px}
.stc-seat-n{display:block;font-size:12.5px;font-weight:600}
.stc-seat-d{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
/* unevaluable — the dashed CANNOT EVALUATE band from exceptions.js, generalised.
   Full width, left-aligned: a report that cannot run is a finding, not an apology. */
.stc.unevaluable{border-style:dashed;max-width:none;margin:0;text-align:left;padding:16px 18px}
.stc.unevaluable .stc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:4px}
.stc.unevaluable .stc-what{font-size:14px}
.stc.unevaluable .stc-why{margin:6px 0 0;max-width:72ch}
.stc.unevaluable .stc-meta{margin-top:8px}
.stc.unevaluable .stc-acts{justify-content:flex-start;margin-top:13px}
/* loading — skeleton the evidence, never the answer. Fades in on a 45ms
   stagger, then HOLDS STILL. No shimmer, no pulse, nothing loops. */
.stc.loading{padding:0;overflow:hidden}
@keyframes skc-in{to{opacity:1}}
.skr{display:flex;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--hairline-2);opacity:0;animation:skc-in .5s var(--ease-out) forwards}
.skr:last-child{border-bottom:0}
.sk{height:11px;border-radius:5px;background:var(--surface-2);flex:none}
.sk.av{width:25px;height:25px;border-radius:50%}
.sk.grow{flex:1}
.skc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:14px}
.skc-tile{border:1px solid var(--hairline-2);border-radius:10px;padding:15px 16px;opacity:0;animation:skc-in .5s var(--ease-out) forwards}
.skc-tile .sk{margin-top:10px}
.skc-tile .sk:first-child{margin-top:0}

/* ---------------------------------------------------------------
   2 · SPEC LIST  (.spl) — label · value rows. Absence is a plate,
       a value with onOpen is a door.
   --------------------------------------------------------------- */
.spl{display:flex;flex-direction:column}
.spl-row{display:flex;align-items:baseline;gap:14px;padding:7.5px 8px;margin:0 -8px;border-radius:8px;border-bottom:1px solid var(--hairline-2);transition:background var(--t-fast) ease}
.spl>.spl-row:last-child{border-bottom:0}
.spl-row:hover{background:var(--surface-2)}
.spl-l{flex:0 0 var(--spl-l,128px);font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.spl-v{min-width:0;flex:1;font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.spl-v.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.spl-note{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;font-variant-numeric:normal}
.spl-v.tone-good{color:var(--s-good-ink)}
.spl-v.tone-warn{color:var(--warn-ink)}
.spl-v.tone-bad{color:var(--lc-missing-ink)}
.spl-v.tone-mute{color:var(--ink-3)}
/* an openable value: chevron slides in, the value warms — a door, by default */
.spl-row.open{cursor:pointer}
.spl-row.open:hover .spl-v,.spl-row.open:focus-visible .spl-v{color:var(--accent-ink)}
.spl-go{flex:none;align-self:center;margin-left:auto;color:var(--ink-3);opacity:0;transform:translateX(-4px);transition:opacity var(--t-fast) ease,transform var(--t-fast) ease}
.spl-row.open:hover .spl-go,.spl-row.open:focus-visible .spl-go{opacity:1;transform:none;color:var(--accent-ink)}
/* all-absent: said ONCE at the top; the fields become a quiet roll-call */
.spl-none{display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;border-bottom:1px solid var(--hairline-2);font-size:12px;color:var(--ink-3)}
.spl-none b{color:var(--ink-2);font-weight:600}
.spl-fields{display:flex;flex-wrap:wrap;gap:5px;padding:10px 0 4px}
.spl-fields span{font-size:11px;color:var(--ink-3);border:1px dashed var(--hairline);border-radius:99px;padding:2px 9px}

/* ---------------------------------------------------------------
   3 · SELECT — one control, two modes. Chrome promoted from
       assets.js (.flt trigger, .pop-menu/.pop-it popover) with the
       .seatpop entrance and the .pal-it.sel highlighted-row move.
   --------------------------------------------------------------- */
/* trigger (verbatim from assets.js, + a value slot: the value stays visible) */
.flt{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:var(--r-ctl);
  font-size:12.5px;font-weight:550;color:var(--ink-2);background:var(--surface);border:1px solid var(--hairline);cursor:pointer;
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease,box-shadow var(--t-fast) ease,transform var(--t-fast) var(--ease-spring),background var(--t-fast) ease}
.flt:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 20%,var(--hairline));box-shadow:0 1px 2px rgba(var(--shadow-c),.06)}
.flt:active{transform:scale(.97)}
.flt .cv{color:var(--ink-3);transition:transform var(--t-med) var(--ease-spring)}
.flt.open .cv{transform:rotate(180deg)}
.flt.onf{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));color:var(--accent-ink);background:var(--accent-bg)}
.flt .n{font-size:10.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:var(--surface);border-radius:99px;padding:0 6px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline))}
.flt .val{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flt .val.ph{color:var(--ink-3);font-weight:500}
.flt .pre{color:var(--ink-3);font-weight:500}
.flt.onf .pre{color:color-mix(in srgb,var(--accent-ink) 70%,transparent)}
/* no options at all: disabled WITH the reason — never a mute grey button */
.sel-none{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px;border-radius:var(--r-ctl);
  font-size:12px;color:var(--ink-3);background:transparent;border:1.5px dashed var(--hairline);cursor:not-allowed;transition:border-color var(--t-fast) ease}
.sel-none:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--hairline))}
.sel-none .lnk2{cursor:pointer;color:var(--accent-ink);font-weight:550;border-bottom:1px dotted color-mix(in srgb,var(--accent-ink) 55%,transparent);transition:border-color var(--t-fast) ease}
.sel-none .lnk2:hover{border-bottom-color:var(--accent-ink)}
/* popover (verbatim from assets.js — the .seatpop entrance, spring in, fade out) */
.pop-menu{position:fixed;z-index:95;min-width:212px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:12px;box-shadow:0 18px 50px -12px rgba(var(--shadow-c),.3);padding:6px;
  opacity:0;transform:translateY(-6px) scale(.98);transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.pop-menu.on{opacity:1;transform:none}
.pop-menu.up{transform:translateY(6px) scale(.98)}
.pop-menu.up.on{transform:none}
.pop-h{padding:6px 10px 5px;font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pop-it{display:flex;align-items:center;gap:9px;width:100%;padding:6.5px 9px;border-radius:8px;text-align:left;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink-2);transition:background var(--t-fast) ease,color var(--t-fast) ease}
.pop-it:hover,.pop-it:focus-visible,.pop-it.sel{background:var(--surface-2);color:var(--ink)}
.pop-it .n{margin-left:auto;font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
/* position/transform/font reset shields against tokens.css's timeline-axis
   .tick (position:absolute) — the latent collision assets.js shipped with */
.pop-it .tick{position:static;transform:none;top:auto;font-size:0;flex:none;width:15px;height:15px;border-radius:4.5px;border:1.5px solid var(--hairline);display:grid;place-items:center;color:transparent;background:var(--surface);transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.pop-it.on .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.pop-it.on .tick svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:tick-draw .28s var(--ease-out) forwards}
@keyframes tick-draw{to{stroke-dashoffset:0}}
.pop-it.on{color:var(--ink);font-weight:550}
.pop-it .pop-on{flex:none;margin-left:2px}
/* population mode: focused search, grouped rows, the disambiguating fact */
.pop-flt{display:flex;align-items:center;gap:8px;margin:2px 4px 6px;padding:0 9px;height:30px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-2);transition:border-color var(--t-fast) ease,box-shadow var(--t-med) var(--ease-spring),background var(--t-fast) ease}
.pop-flt:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));box-shadow:0 0 0 3px var(--accent-bg);background:var(--surface)}
.pop-flt svg{color:var(--ink-3);flex:none;transition:color var(--t-fast) ease}
.pop-flt:focus-within svg{color:var(--accent-ink)}
.pop-flt input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);min-width:0}
.pop-flt input::placeholder{color:var(--ink-3);transition:opacity var(--t-fast) ease}
.pop-flt:focus-within input::placeholder{opacity:.5}
.pop-list{max-height:272px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pop-m{min-width:0;flex:1}
.pop-name{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-sub{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* status mark: absconded and exited people are OFFERED, marked, never hidden */
.pop-mark{flex:none;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;border:1.5px solid;border-radius:4px;padding:1.5px 5px;white-space:nowrap}
.pop-mark.bad{color:var(--lc-missing-ink);border-color:color-mix(in srgb,var(--lc-missing) 55%,transparent)}
.pop-mark.warn{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.pop-mark.mute{color:var(--ink-3);border-color:var(--hairline)}
/* "10 of 2,800 shown, keep typing" — never ten anonymous rows */
.pop-cnt{margin-top:4px;padding:7px 10px 4px;border-top:1px solid var(--hairline-2);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* no match: what → why → the escape hatch */
.pop-emp{padding:16px 12px 12px;text-align:center}
.pop-emp b{display:block;font-size:12px;font-weight:600;color:var(--ink-2)}
.pop-emp p{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.pop-esc{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:11px}

/* ---------------------------------------------------------------
   5 · STALENESS (.stl) — the mark a conclusion wears when a value
   underneath it has moved. Amber and dashed, never red: a verdict
   resting on a corrected fact is expensive, not a reportable
   exposure, and red belongs to the missing device alone. The
   BASIS UNKNOWN variant drops the amber entirely — it is the
   product's dashed "unknown" tone, so the two never read alike.
   --------------------------------------------------------------- */
.plate.stl-p{font-size:8.5px;border-style:dashed}
.plate.stl-moved{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 62%,transparent)}
.plate.stl-unk{color:var(--ink-3);border-color:var(--hairline)}
.stl{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;margin-top:10px;
  border:1.5px dashed color-mix(in srgb,var(--warn) 42%,var(--hairline));border-radius:var(--r-ctl);
  background:color-mix(in srgb,var(--warn) 5%,transparent);
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.stl.unk{border-color:var(--hairline);background:transparent}
.stl .plate{margin-top:1px;flex:none}
.stl-body{min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.5}
.stl-said{color:var(--ink);font-weight:600}
.stl-moved-l{color:var(--ink-2)}
.stl-moved-l b{font-weight:600;color:var(--ink-2)}
.stl-moved-l .plate{display:inline-block;vertical-align:baseline;margin:0}
.stl-told{color:var(--warn-ink)}
.stl.unk .stl-told{color:var(--ink-2)}
.stl-settle{color:var(--ink-3)}
.stl-go{flex:none;margin:2px 0 0 auto;color:var(--ink-3);transition:transform var(--t-fast) var(--ease-out),color var(--t-fast) ease}
.stl.open{cursor:pointer}
.stl.open:hover{border-color:color-mix(in srgb,var(--warn) 78%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.stl.unk.open:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--hairline));background:var(--hairline-2)}
.stl.open:hover .stl-go{transform:translateX(2px);color:var(--ink-2)}
.stl.open:active{transform:translateY(1px)}
.stl.open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* inside a drawer or a verdict the band carries the width it is given */
.fc-verdict .stl{margin:10px 0 0}