/* ================================================================
   SHELL — shell.css
   Chrome owned by app/shell.js: rail lock states, seat switcher,
   fixture marker, toast, placeholder surface, rail swap cascade.
   Tokens only — every colour comes from tokens.css / kit-ext.css.
   ================================================================ */

/* rail collapse rides a spring, per the shell's motion vocabulary */
.sb{transition:width var(--t-med) var(--ease-spring),background .35s ease}
/* the wordmark and badges must give up their width too, or they shove the icons off-centre */
.shell.slim .sb-word{width:0;overflow:hidden}
.shell.slim .sb-nav .badge{display:none}
.shell.slim .sb-nav .lbl{width:0}
/* footer identity stacks name over seat */
.u-meta .u-name,.u-meta .u-role{display:block}

/* rail items appear/disappear as a cascade when the seat changes */
.sb-nav .nav-it,.sb-nav .nav-sec{transition:background var(--t-fast) ease,color var(--t-fast) ease,opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.sb-nav.out .nav-it,.sb-nav.out .nav-sec{opacity:0;transform:translateX(-10px);transition:opacity 140ms ease,transform 140ms ease}
.sb-nav .swap-in{opacity:0;transform:translateX(-10px)}
.sb-nav .swap-in.go{opacity:1;transform:none}
.shell.slim .sb-nav .nav-it{opacity:1}
.shell.slim .sb-nav.out .nav-it{opacity:0}

/* a desk that belongs to another seat: visible, quiet, honest */
.nav-it.lock{color:var(--ink-3);height:28px;font-size:12.5px}
.nav-it.lock .nv-ic{color:color-mix(in srgb,var(--ink-3) 62%,var(--sidebar))}
.nav-it.lock:hover{background:var(--surface-2);color:var(--ink-2)}
.nav-it.lock:hover .nv-ic{color:var(--ink-3)}
.nav-lk{margin-left:auto;flex:none;color:var(--ink-3);opacity:.55;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.nav-it.lock:hover .nav-lk{opacity:.9;transform:translateY(-1px)}
.shell.slim .nav-lk{position:absolute;right:8px;top:4px;margin:0}
.badge.bad{color:var(--lc-missing-ink);background:var(--lc-missing-bg)}

/* ---------- seat switcher (the shell's signature) ---------- */
.seat-btn{display:flex;align-items:center;gap:8px;height:31px;padding:0 9px 0 4px;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;transition:background var(--t-fast) ease,border-color var(--t-fast) ease}
.seat-btn:hover{background:var(--surface);border-color:var(--hairline)}
.seat-btn .u-av{width:24px;height:24px;font-size:var(--fs-mark,10px);transition:transform var(--t-med) var(--ease-spring)}
.seat-btn:hover .u-av{transform:scale(1.08)}
.seat-btn .u-av.pop{animation:badge-pop .4s var(--ease-spring)}
.seat-name{font-size:12.5px;font-weight:600;white-space:nowrap}
.seat-as{font-size:10px;color:var(--ink-3);display:block;margin-top:-2px;font-weight:500}
.seat-cv{color:var(--ink-3);transition:transform var(--t-med) var(--ease-spring)}
.seat-btn[aria-expanded="true"] .seat-cv{transform:rotate(180deg)}

.seatpop{position:fixed;z-index:60;width:308px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 20px 60px -14px rgba(var(--shadow-c),.3);padding:8px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.seatpop.on{opacity:1;transform:none;pointer-events:auto}
.seatpop-h{padding:7px 10px 6px;font-size:10px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.seat-it{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;text-align:left;cursor:pointer;transition:background var(--t-fast) ease}
.seat-it:hover,.seat-it:focus-visible{background:var(--surface-2)}
.seat-it .u-av{width:28px;height:28px;font-size:10px;flex:none;transition:transform var(--t-med) var(--ease-spring)}
.seat-it:hover .u-av{transform:scale(1.1) rotate(-3deg)}
.seat-it-m{min-width:0;flex:1}
.seat-it-n{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
/* ⚠ This is a <span>, so it computed display:inline — and `overflow:hidden`
   and `text-overflow:ellipsis` DO NOTHING on an inline box. The rule looked
   correct and clipped nothing: nine of the ten seat descriptions ran straight
   out of the 308px card, the longest by 137px, spilling over the page behind
   it. One word fixes it, and the same trap is waiting on any other span that
   is given an ellipsis. */
.seat-it-d{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* belt and braces: nothing may paint outside the card, whatever a child does */
.seatpop{overflow:hidden}
.seat-on{flex:none;color:var(--accent-ink)}
.seat-it .go{margin-left:auto;flex:none;opacity:0;transform:translateX(-4px);transition:opacity var(--t-fast) ease,transform var(--t-fast) ease;color:var(--ink-3)}
.seat-it:hover .go{opacity:1;transform:none}

/* ---------- fixture marker: honest, quiet, and it opens ---------- */
.fix-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;border:1px dashed var(--hairline);color:var(--ink-3);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;cursor:pointer;transition:color var(--t-fast) ease,border-color var(--t-fast) ease,background var(--t-fast) ease}
.fix-chip:hover{color:var(--ink-2);border-color:color-mix(in srgb,var(--ink) 25%,var(--hairline));background:var(--surface)}
.fix-chip i{width:6px;height:6px;border-radius:50%;background:var(--viz-mute);flex:none}
/* live: a solid border and a lit dot, because dashed-and-grey is the visual
   grammar this product uses for "none of this is real" */
.fix-chip.live{border-style:solid;border-color:color-mix(in srgb,var(--ok,#2f9e60) 45%,var(--hairline));color:var(--ok-ink,var(--ink-2))}
.fix-chip.live i{background:var(--ok,#2f9e60)}

/* theme toggle: the half-moon flips over */
.icon-btn .thm{transition:transform .45s var(--ease-spring)}
.icon-btn:hover .thm{transform:rotate(-30deg)}
.tc[data-theme="paper"] .icon-btn .thm{transform:rotate(180deg)}
.tc[data-theme="paper"] .icon-btn:hover .thm{transform:rotate(150deg)}

/* sidebar toggle icon nudges toward what it will do */
.sb-toggle svg{transition:transform var(--t-med) var(--ease-spring)}
.sb-toggle:hover svg{transform:translateX(-1.5px)}
.shell.slim .sb-toggle:hover svg{transform:translateX(1.5px)}

/* ---------- toast (bottom centre, one at a time) ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:98;display:flex;align-items:center;gap:11px;max-width:520px;padding:9px 14px;border-radius:10px;background:rgba(23,22,20,.94);color:#f2f1ee;font-size:12.5px;box-shadow:0 10px 30px -8px rgba(20,19,17,.4);opacity:0;pointer-events:none;transition:opacity var(--t-fast) ease,transform var(--t-med) var(--ease-spring)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-act{flex:none;height:24px;padding:0 10px;border-radius:6px;font-size:11.5px;font-weight:600;color:#fff;background:var(--accent);cursor:pointer;transition:opacity var(--t-fast) ease,transform var(--t-fast) ease}
.toast-act:hover{opacity:.88}
.toast-act:active{transform:scale(.95)}

/* ---------- reserved room (registered surface, not built yet) ---------- */
.notyet{max-width:520px;margin:9vh auto 0;text-align:center;padding:40px 34px 34px}
.notyet .ny-ic{width:46px;height:46px;border-radius:12px;margin:0 auto 16px;display:grid;place-items:center;color:var(--ink-3);background:var(--surface-2);border:1.5px dashed var(--hairline);transition:transform var(--t-med) var(--ease-spring),color var(--t-fast) ease}
.notyet:hover .ny-ic{transform:translateY(-2px) rotate(-3deg);color:var(--ink-2)}
.ny-stage{font-family:var(--mono);font-size:var(--fs-mark,10px);font-weight:700;letter-spacing:.1em;color:var(--warn-ink);border:1.5px dashed color-mix(in srgb,var(--warn) 55%,transparent);border-radius:4px;padding:2.5px 8px;display:inline-block;margin-bottom:12px}
.notyet h2{font-size:19px;font-weight:600;letter-spacing:-.015em}
.notyet .ny-q{margin-top:7px;font-size:13px;color:var(--ink-2)}
.notyet .ny-own{margin-top:14px;font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:6px}
.notyet .ny-faces{margin-top:14px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.notyet .btn{margin-top:20px}

/* ---------- employee: no rail, one page ---------- */
.shell.norail .sb,.shell.norail .sb-toggle,.shell.norail .search{display:none}
.shell.norail .topbar-in.wide{max-width:1156px;padding:0 26px}

/* ---------- small shell-level marks reused by landings ---------- */
.mk{width:11px;height:11px;border-radius:3px;flex:none}
.mk.prov{background:repeating-linear-gradient(45deg,var(--lc-use) 0 2.5px,color-mix(in srgb,var(--lc-use) 22%,var(--surface)) 2.5px 5px);border:1px solid color-mix(in srgb,var(--lc-use) 60%,var(--surface))}
.mk.gap{background:var(--lc-missing-bg);border:1.5px dashed var(--lc-missing)}
.sev{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;white-space:nowrap}
.sev i{width:7px;height:7px;border-radius:50%;flex:none}
.sev.critical{color:var(--lc-missing-ink)}.sev.critical i{background:var(--lc-missing)}
.sev.high{color:var(--warn-ink)}.sev.high i{background:var(--warn)}
.sev.medium{color:var(--ink-2)}.sev.medium i{background:var(--viz-mute)}
.sev.low{color:var(--ink-3)}.sev.low i{background:var(--viz-track);border:1px solid var(--hairline)}
/* kept byte-identical to kit-core.css's .plate — see the type-scale note there */
.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)}

/* inline link in a page-head sub — a number that opens */
.lnk{color:var(--ink-2);border-bottom:1px solid var(--hairline);padding-bottom:1px;cursor:pointer;transition:color var(--t-fast) ease,border-color var(--t-fast) ease}
.lnk:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.lnk b{font-weight:650}

/* ---------- the filter-chip row — DESIGN-DIRECTIVE R6 ----------
   The distinct values of ONE column, with counts, each one filtering.
   Assets' eight lifecycle states, Reconciliation's six dispositions and
   Policies' three "who set it" values are all this same object. Rendered as
   KPI cards it is a legend costing 190px that does nothing; rendered here it
   is 26px and it works. Set --lc / --lc-ink on the chip (the lc-* classes do)
   to colour it; leave them off for a neutral chip. Lifted out of assets.js,
   which invented it, so nobody invents a second one. */
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.fchips .fchip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;cursor:pointer;
  font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--hairline);
  transition:border-color var(--t-fast) ease,transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast) ease,background var(--t-fast) ease}
.fchips .fchip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--lc,var(--ink-3)) 55%,var(--hairline));box-shadow:0 2px 8px -4px color-mix(in srgb,var(--lc,var(--ink-3)) 40%,transparent)}
.fchips .fchip:active{transform:translateY(0) scale(.97)}
.fchips .fchip.on{background:color-mix(in srgb,var(--lc,var(--accent)) 10%,var(--surface));border-color:color-mix(in srgb,var(--lc,var(--accent)) 55%,var(--hairline));color:var(--lc-ink,var(--accent-ink))}
.fchips .fchip b{font-weight:650;font-variant-numeric:tabular-nums}
.fchips .fchip .fc-note{font-weight:500;color:var(--ink-3)}

/* ---------- landing grid (the five Today surfaces) ---------- */
.tg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.tg>.card{padding:16px 18px 13px}
.sp12{grid-column:span 12}.sp8{grid-column:span 8}.sp6{grid-column:span 6}.sp4{grid-column:span 4}
.tg .col{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:1120px){.sp8,.sp6,.sp4{grid-column:span 12}}
.wr-tag{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.wr-days{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;white-space:nowrap}
.wr-days small{display:block;font-weight:400;font-size:10.5px;color:var(--ink-3)}
/* .wr = a landing work row: same anatomy as .row, and it can fold away */
.row.wr{max-height:64px;transition:background var(--t-fast) ease,max-height var(--t-med) var(--ease-out),opacity var(--t-med) ease,padding var(--t-med) var(--ease-out)}
.row.wr.fold{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-width:0;overflow:hidden}
.qmeta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ---------- employee page ---------- */
.eq{max-width:640px;margin:0 auto}
.eq .page-head h1{font-size:27px}
.eq-ask{font-size:15px;color:var(--ink-2);margin:2px 2px 16px}
.eq-card{display:flex;gap:16px;align-items:flex-start;padding:20px;margin-bottom:12px}
.eq-ic{flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--hairline);transition:transform var(--t-med) var(--ease-spring),color var(--t-fast) ease}
.eq-card:hover .eq-ic{transform:translateY(-2px) rotate(-4deg);color:var(--accent-ink)}
.eq-name{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.eq-sub{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eq-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.eq-actions .btn{height:34px;padding:0 16px;font-size:13px}
.eq-done{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-ctl);font-size:13px;font-weight:600;color:var(--s-good-ink);background:rgba(12,163,12,.08);border:1px solid rgba(12,163,12,.25);animation:chip-stamp .32s var(--ease-spring)}
.eq-quiet{padding:16px 20px;background:var(--surface-2);border-style:dashed}
.eq-quiet b{font-size:13px}
.eq-quiet p{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.55}
.opt-row{display:flex;align-items:center;gap:13px;width:100%;padding:15px 15px;border-radius:11px;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--hairline);margin-bottom:9px;transition:border-color var(--t-fast) ease,background var(--t-fast) ease,transform var(--t-fast) var(--ease-spring)}
.opt-row:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 18%,var(--hairline))}
.opt-row:active{transform:scale(.985)}
.opt-row .eq-ic{width:38px;height:38px;border-radius:10px}
.opt-row b{font-size:13.5px;display:block}
.opt-row span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px}

/* rail disclosure — the whole product, one click away, closed by default */
.nav-more{display:flex;align-items:center;gap:9px;width:100%;margin:14px 0 2px;padding:8px 10px;
  border:1px dashed var(--hairline);border-radius:var(--r-ctl);background:transparent;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink-3);text-align:left;
  transition:border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.nav-more:hover{border-color:color-mix(in srgb,var(--ink-3) 34%,var(--hairline));color:var(--ink-2);background:var(--surface-2)}
.nav-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-more-c{font-variant-numeric:tabular-nums;font-weight:650;font-size:11px;color:var(--ink-3);
  border:1px solid var(--hairline);border-radius:999px;padding:1px 7px;flex:0 0 auto}
.nav-more-ch{margin-left:auto;flex:0 0 auto;transition:transform var(--t-med) var(--ease-spring)}
.nav-more.on .nav-more-ch{transform:rotate(180deg)}
.nav-rest{display:flex;flex-direction:column;gap:1px;margin-top:4px}
/* ⚠ author display: beats [hidden]. This exact defect has now shipped twice in
   this product (a first-run note that was "always visible by accident", and this
   rail). Any rule that sets display on an element that can be [hidden] must say so. */
.nav-rest[hidden]{display:none}
.rail-collapsed .nav-more span:not(.nav-more-c){display:none}

/* Reports · a seat that may read the register but not carry it out of the
   building. Said in words beside the actions, not as a disabled button —
   a control that cannot work should not be drawn as though it might. */
.rp-noexp { font-size: 12px; color: var(--ink-3); font-style: italic; }

/* ================================================================
   THE TYPE FLOOR — held here on behalf of files this pass may not edit.

   The scale, and why it is two steps, is documented in kit-core.css §0.
   Nothing in this product renders below 10px. Two thirds of the sub-10px
   text was NOT in the shared kit: it is declared in kit-viz.css, in
   tokens.css, and in the per-surface <style> blocks that surfaces/*.js
   inject into <head> at first render. Those files belong to another agent
   or are off-limits to this pass, so the floor is applied from here.

   ⚠ THIS BLOCK IS A HOLDING PEN, NOT A HOME. Every rule below duplicates a
   declaration that ought to live beside the component it styles. Each is
   tagged with the file that should absorb it. When kit-viz.css is free,
   move its ten rules into it and delete them here; likewise each surface.
   Leaving them here forever means a reader of reports.js cannot see why
   .rp-nl is 10px, which is exactly the kind of action-at-a-distance this
   codebase has been careful to avoid.

   Specificity, not !important: the surface <style> blocks land in <head>
   AFTER these stylesheets, so a bare `.rp-nl` here would lose the cascade.
   The `.tc` prefix (0,2,0 against their 0,1,0) wins on specificity alone,
   which keeps these rules overridable by anything more specific and leaves
   no !important for the next person to fight.
   ================================================================ */

/* --- recognised marks and caps micro-labels → the floor, 10px --- */
/* kit-viz.css */
.tc .rb-na span,
.tc .wf-na span,
.tc .rg-l,
.tc .rp-sc-l,
/* tokens.css — avatar initials */
.tc .p-av,
/* surfaces/reports.js */
.tc .rp-nl,
.tc .rp-held,
.tc .rp-cert-x,
.tc .rp-cav>summary .rp-cav-a,
/* surfaces/assets.js · custody.js · asset.js · person.js · auth-signin.js */
.tc .cd-staged,
.tc .as-staged,
.tc .pn-staged,
.tc .au-plate,
/* surfaces/goods-in.js · import.js */
.tc .gi-u-id i,
.tc .imp-cause .imp-oc,
/* avatar initials inside surface rows */
.tc .rm-av,
.tc .gi-desk .u-av,
.tc .mz-mh .fr .u-av,
.tc .pu-vrow .u-av{font-size:var(--fs-mark,10px)}

/* --- figures and sub-captions you actually read → 10.5px --- */
/* kit-viz.css — chart axes. These are the labels §6 specifies "~9.5px";
   9.5 is below the floor, so §6's intent (an axis that recedes) is carried
   by the mono face and --ink-3, which it already was. */
.tc .cb-gl span,
.tc .cb-axis,
.tc .tl-ax,
.tc .tl-reft,
.tc .tl-axis,
/* tokens.css — line-chart axis label */
.tc .lc .axl,
/* surfaces/messages.js · assets.js · software.js · exceptions.js */
.tc .mz-id,
.tc .at-data small,
.tc .sw-fn small,
.tc .exc-bar-x,
.tc .exc-tol-l{font-size:var(--fs-micro,10.5px)}

/* kit-viz.css — the hole rail's label. It sits in the 46px axis gutter, which
   is the alignment constant the chart columns and the axis both key off, so
   the column cannot simply be widened from here. "CHAINS WITH A HOLE" already
   wrapped to four lines and overflowed the 22px track at 9px — a pre-existing
   fault, NOT one this pass introduced (tools/agentKit-cmp.js shows both). The
   floor is applied with the leading tightened to match, so the rail is no
   taller than it was. The real fix is a shorter label or a label above the
   track, and it belongs in kit-viz. */
.tc .cb-rail-l{font-size:var(--fs-mark,10px);letter-spacing:.03em;line-height:1.1}

/* surfaces/assets.js — the legacy tag. It is an IDENTIFIER, and it had no
   nowrap: at 9.5px it happened to fit the register's tag column, and at the
   floor it broke as "SMB-AST-" / "08704". A tag split across two lines is a
   different tag, so the floor comes with the nowrap that should always have
   been there. */
.tc .at-legacy{font-size:var(--fs-mark,10px);white-space:nowrap}

/* --- glyph affordances: below the floor and easy to miss, because the text
   is one character and every element-level audit skips it --- */
/* surfaces/custody.js · stocktake.js — the disclosure caret */
.tc .cd-fold>summary::after,
.tc .stt-fold>summary::after,
/* surfaces/reports.js — the `?` that carries the reason */
.tc .rp-why{font-size:var(--fs-mark,10px)}