/* ================================================================
   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:9px;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}
.seat-it-d{font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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}

/* 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:9.5px;font-weight:700;letter-spacing:.12em;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)}
.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)}

/* 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}