/* ================================================================ 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 · THE TYPE SCALE — the floor, and the two steps above it. The client said the screens "aren't clean". Part of that was literal: 879 strings across 280 renders were being drawn at 9px or 9.5px, including the `NOT ASSESSED` plate — the single mark this product's honesty rests on. Text that small is not quiet, it is unreadable, and a refusal nobody can read is a refusal that was not made. The bottom of the scale used to be four steps — 8.5 · 9 · 9.5 · 10 — inside 1.5px. No reader can tell those apart, so they were not a hierarchy; they were noise that happened to be illegible. Worse, they were not even applied by role: the same object — an absence mark — was drawn at 8.5px in a rank bar, 9px on a plate and 9.5px in a compare row, for no reason anyone could state. They collapse into TWO steps, split on what the reader actually does with the text: --fs-mark 10px things you RECOGNISE rather than read. Plates, stamps, gap labels, absence values, and the uppercase tracked micro-labels that name a block. These recede because of the mono face, the tracking and the border — NOT because they are small. This is the floor: nothing in the product goes below it. --fs-micro 10.5px things you READ at the smallest size: mono axis figures, identifiers, and one-line sub-captions. A figure has to be decoded character by character, so it earns the larger step; a mark you know by its shape does not. --fs-small 11px small secondary prose (unchanged — this step was already correct and in wide use). The hierarchy survives because a mark still sits BELOW the figure it qualifies, which is the only relationship at this size that ever carried meaning. Everything from 11.5px up is untouched: above the floor the scale was never the problem. Fallbacks are inlined at every use (`var(--fs-mark,10px)`) so the component gallery pages, which load these files in subsets, keep the scale without kit-core. --------------------------------------------------------------- */ .tc{--fs-mark:10px;--fs-micro:10.5px;--fs-small:11px} /* --------------------------------------------------------------- 0b · 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:var(--fs-mark,10px);font-weight:700;letter-spacing:.08em;color:var(--ink-3);border:1.5px solid var(--hairline);border-radius:4px;padding:2.5px 7px;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)} /* the same door treatment .spl-row.open gets, for the collapsed all-absent block */ .spl-none.open{cursor:pointer;border-radius:8px;transition:background var(--t-fast) ease} .spl-none.open:hover,.spl-none.open:focus-visible{background:var(--surface-2)} .spl-none.open:hover .spl-go,.spl-none.open:focus-visible .spl-go{opacity:1;transform:none;color:var(--accent-ink)} .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:130;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)} /* ⚠ A POPOVER IS A SURFACE, NOT A GLASS. The entrance faded opacity 0 -> 1 over --t-fast, and for those ~200ms the form underneath read straight through the menu: the scan field's "paste a list" placeholder and its scan/type/paste chips sat on top of the rows. Opening is now transform-only, so the background is opaque in the first painted frame and nothing is ever legible through it. The base rule still carries the opacity transition, so removing .on still fades it out. */ .pop-menu.on{opacity:1;transform:none;transition:transform var(--t-med) var(--ease-spring)} .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)} /* while the keyboard is driving the list, one row is highlighted and it is the selected one. Without this the row under a resting cursor kept its :hover background and two rows looked selected at once. */ .pop-menu.kbd .pop-it:hover:not(.sel):not(.on){background:transparent;color:var(--ink-2)} .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{--focus-ring:none;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:var(--fs-mark,10px);font-weight:700;letter-spacing:.07em;border:1.5px solid;border-radius:4px;padding:2px 6px;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. --------------------------------------------------------------- */ /* the staleness plate was 8.5px purely to sit below the 9px .plate — a distinction no reader could see. It carries the DASH instead, which they can, and it keeps the floor. */ .plate.stl-p{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} /* a picker standing in for a stood fills its field exactly as the control it replaced did. The is one element with no children a stylesheet can see. UI.select is a