/* ───────────────────────────────────────────────────────────────────
   CRUX Staff OS v4 — .mk-ads3 dark language. One app, every role.
   FAITHFUL PORT of docs/mockups/staff_os_v4_refined_2026_06_13.html
   <style> block (2026-06-13). Mechanical transforms ONLY (contract
   BUILDER B #1):
     - every rule scoped under .sos-root (the production view target);
     - the mockup's global *{} / body{} resets scoped to
       .sos-root / .sos-root *  (NOT a global reset);
     - the chat-replica classes (the mockup's cs-workspace prefix) RENAMED
       to scw-* so they NEVER collide with cs.css's REAL inbox classes;
     - all other class names IDENTICAL to the mockup.
   The Chat tab mounts the REAL CS inbox (cs.css) for EVERY role since the
   2026-06-18 unification; the scw-* chat replica was pruned 2026-07-27.
   ─────────────────────────────────────────────────────────────────── */
.sos-root{
  /* Ops design pass 01 (2026-07-11): local names now consume the shared
     --eon-* ink mode (app.css) — the third drifted lime (#C6F24E), the
     odd red (#F0635A) and the 'SF Mono' stack die here. --good/--bad/
     --card-soft are DEFINED now (late .sos-perf/.sos-merch rules used
     to reference them undefined, so their Tailwind fallback hexes won). */
  --bg:var(--eon-bg); --card:var(--eon-bg-2); --card2:var(--eon-bg-3); --line:var(--eon-line); --line-soft:var(--eon-line-soft);
  --ink:var(--eon-ink); --ink-dim:var(--eon-ink-dim); --mute:var(--eon-ink-mute);
  --lime:var(--eon-accent); --mint:var(--eon-ok); --amber:var(--eon-warn); --red:var(--eon-danger); --blue:var(--eon-blue); --vio:var(--eon-whale);
  --bub-out:var(--eon-bub-out); --bub-out-ink:var(--eon-bub-out-ink);
  --ch-wa:var(--eon-ch-wa); --ch-ig:var(--eon-ch-ig);
  --good:var(--eon-ok); --bad:var(--eon-danger); --card-soft:rgba(255,255,255,.04);
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  position:fixed;inset:0;z-index:1000;overflow-y:auto;
  background:#050507;color:var(--ink);font:14px/1.45 'Archivo',-apple-system,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.sos-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* The margin/padding reset must be ZERO-specificity (:where) so it does NOT
   clobber the embedded CS workspace, which ships its own spacing from cs.css.
   The old `.sos-root *` reset was (0,1,1) and beat cs.css `.csw-script`/`.csw-bub`
   (0,1,0) → the CS-rep chat inside /staff rendered with flush, padding-less
   bubbles (the "broken/ugly" chat). At (0,0,0) the reset still zeroes UA margins
   on the Staff OS's own bare elements (author origin beats UA), while letting any
   class rule — i.e. cs.css — win. The Staff OS's own elements are all
   `.sos-root .x` (0,2,0+) so they are unaffected. */
:where(.sos-root) *{margin:0;padding:0}
/* Horizon stage (design pass 03, aurora anchor 2): on desktop the #050507
   void behind the phone column becomes a living WAT-keyed horizon — dawn
   amber, working mint, after-hours violet (sosMountHorizon). Masked to the
   top; hidden on phones (the frame fills the screen). */
.sos-root .sos-horizon{position:fixed;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none;display:none;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(90% 80% at 50% 0%,#000,transparent 75%)}
@media (min-width:600px){ .sos-root .sos-horizon{display:block} }
/* THE COLUMN CLEARS THE NOTCH (2026-08-21, the sweep after #2523/#2529).
   .sos-root is position:fixed; inset:0, so the body's notch padding (app.css
   body{padding-top:var(--safe-top)}) never reached it and the wordmark row
   rendered at y=0 — under the status bar on every notched iPhone, on the
   staff's primary surface. The pad goes on the column, not the shell: the
   shell IS the scroller here (overflow-y:auto), so its padding rides up with
   the content (measured: column top 59 at rest -> -341 at scrollTop 400) and
   the column would END at the inset, clipping its own background and side
   borders out of the status-bar strip. On .phone the column keeps painting
   behind the status bar while its CONTENT starts below it. box-sizing:
   border-box (.sos-root *) keeps min-height:100vh whole, so a view that
   already fits inside 100vh gains NO scroll (measured: overhang 0 at 600px
   of content); a view that sits within var(--safe-top) of the fold does now
   scroll by the inset — that is the pad being real layout, not a bug. */
.sos-root .phone{background:var(--bg);min-height:100vh;padding-top:var(--safe-top);border-left:1px solid var(--line);border-right:1px solid var(--line);position:relative;z-index:1;padding-bottom:84px;max-width:390px;margin:0 auto;overflow:hidden}
/* WebGL hero band INSIDE the phone column (aurora anchor #8, operator
   2026-07-26): phones never see .sos-horizon — it sits in the desktop
   gutters behind this opaque column and is display:none under 600px. This
   slim masked wash lives at the top of the column itself, over the header
   area only (alpha overlay mode is the house pattern — aurora.js header).
   FLAT LAW: masked out before any card or data. Aurora's own ladder
   handles reduced-motion (one static frame) and no-WebGL (no mount). */
/* the band follows the content it washes (2026-08-21): absolutes resolve
   against the PADDING box, so with the column's new notch pad a top:0 band
   kept its solid head in the status-bar strip while every element it is
   meant to sit behind moved down by the inset. Same offset as the column. */
.sos-root .sos-heroband{position:absolute;top:var(--safe-top);left:0;width:100%;height:150px;opacity:.35;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.sos-root .mono{font-family:var(--mono)}
.sos-root .chip{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.04em}
.sos-root .chip.lime{color:#0A0A0C;background:var(--lime)}.sos-root .chip.mint{color:var(--mint);background:color-mix(in srgb,var(--mint) 13%,transparent)}
.sos-root .chip.amber{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}.sos-root .chip.mute{color:var(--mute);background:rgba(255,255,255,.06)}
.sos-root .chip.red{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}.sos-root .chip.blue{color:var(--blue);background:color-mix(in srgb,var(--blue) 13%,transparent)}
.sos-root .chip.vio{color:var(--vio);background:color-mix(in srgb,var(--vio) 14%,transparent)}
.sos-root .card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin:10px 14px;padding:13px}
/* [ bracket ] eyebrows (design pass 03) — micro-labels are tracked mono */
.sos-root .sec{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin:14px 18px 0}
.sos-root .sec::before{content:'[ '}.sos-root .sec::after{content:' ]'}
.sos-root .note{font-size:10.5px;color:var(--mute);margin:10px 18px;text-align:center}
.sos-root .view{display:none}.sos-root .view.on{display:block;animation:sos-fade .22s ease}
@keyframes sos-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sos-fade{from{opacity:0}to{opacity:1}}
/* Design pass 03: the entrance cascade plays on FIRST load only — a view the
   staffer has already seen swaps in with the 220ms crossfade alone
   (sosSwitchTab stamps .sos-seen once a tab has rendered). */
.sos-root .view.sos-seen .card,.sos-root .view.sos-seen .sec,.sos-root .view.sos-seen .qa,
.sos-root .view.sos-seen .tm-rep,.sos-root .view.sos-seen .chk,.sos-root .view.sos-seen .exc,
.sos-root .view.sos-seen .kv,.sos-root .view.sos-seen .task,.sos-root .view.sos-seen .ring2 .p,
.sos-root .view.sos-seen .hello .hi,.sos-root .view.sos-seen .hello .strk{animation:none}

/* ── top bar: wordmark + ROLE PILL (opens dept-grouped picker) ── */
/* position:relative, not sticky — the sticky is DEAD, and said otherwise.
   .phone{overflow:hidden} is this bar's sticky scrollport, while the element
   that actually scrolls is .sos-root; measured 2026-08-21 in WebKit 26.5 AND
   Chromium 149 at 402x874, the bar leaves the viewport at scrollTop 400
   (top: 0 -> -400) in both.
   IT DID PIN ONCE — for six weeks. Measured across three eras: at a52b6768
   (2026-06-13) it stopped dead at top:0 under scroll, exactly as designed; at
   9ed27fda (2026-07-26, #1486 — the motion/WebGL pass) .phone gained
   overflow:hidden to CLIP THE NEW AURORA BAND, and that silently took the
   pin with it. So this is a regression with a date, not a thing that never
   worked — and RESTORING the pin (by moving the band's clip off .phone) is a
   real option, but it is a visual decision for the operator, not a silent
   side effect of a bug sweep. Until then the declaration matches reality. */
.sos-root .top{padding:12px 14px 8px;display:flex;align-items:center;gap:10px;position:relative;background:rgba(10,10,12,.95);backdrop-filter:blur(12px);z-index:20}
.sos-root .top .wm{font-weight:800;letter-spacing:.2em;font-size:12px}.sos-root .top .wm i{color:var(--lime);font-style:normal}
.sos-root .rolepill{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px 4px 4px;cursor:pointer}
.sos-root .rolepill:active{transform:scale(.97)}
.sos-root .rolepill .rav{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10.5px;color:#0A0A0C}
.sos-root .rolepill .rtx b{display:block;font-size:11.5px;line-height:1.1}
.sos-root .rolepill .rtx span{font-size:10.5px;color:var(--mute);font-family:var(--mono);letter-spacing:.03em}
.sos-root .rolepill .car{color:var(--mute);font-size:10.5px;margin-left:2px}
/* role picker sheet — dept-grouped, doubles as the org chart */
.sos-root .rp-scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:none}
.sos-root .rp-scrim.on{display:block}
.sos-root .rp{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:390px;max-height:82vh;overflow-y:auto;z-index:61;background:var(--card);border:1px solid var(--line);border-radius:22px 22px 0 0;padding:14px 14px 28px;display:none;animation:sos-up .25s ease}
.sos-root .rp.on{display:block}
@keyframes sos-up{from{transform:translate(-50%,40px);opacity:.5}to{transform:translate(-50%,0);opacity:1}}
.sos-root .rp .grab{width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 12px}
.sos-root .rp h3{font-size:15px;margin-bottom:2px}
.sos-root .rp .rpsub{font-size:11px;color:var(--mute);margin-bottom:10px}
.sos-root .rp .dept{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin:13px 2px 5px;display:flex;align-items:center;gap:7px}
.sos-root .rp .dept .dot{width:7px;height:7px;border-radius:50%}
.sos-root .rp .person{display:flex;align-items:center;gap:11px;padding:8px 6px;border-radius:10px;cursor:pointer}
.sos-root .rp .person:active,.sos-root .rp .person:hover{background:rgba(255,255,255,.04)}
.sos-root .rp .person.on{background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 9%,transparent),transparent)}
.sos-root .rp .person .rav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#0A0A0C;flex:none}
.sos-root .rp .person .nm b{display:block;font-size:13px}
.sos-root .rp .person .nm span{font-size:10.5px;color:var(--mute)}
.sos-root .rp .person .tag{margin-left:auto}

/* ── tab bar (Team appears for managers only) ── */
.sos-root .tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:390px;background:rgba(10,10,12,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.sos-root .tabbar button{flex:1;background:none;border:none;color:var(--mute);font-size:10.5px;font-weight:700;padding:9px 0 11px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;position:relative}
.sos-root .tabbar button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sos-root .tabbar button.on{color:var(--lime)}
.sos-root .tabbar button .bdg{position:absolute;top:4px;right:calc(50% - 21px);background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 5px}

/* ── DAY ── */
.sos-root .hello{padding:10px 18px 0}
.sos-root .hello .hi{font-size:21px;font-weight:800;text-transform:lowercase;letter-spacing:-.02em}
.sos-root .hello .hi i{color:var(--lime);font-style:normal}
.sos-root .hello .sub{font-size:11.5px;color:var(--mute);margin-top:2px}
.sos-root .hello .strk{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--ink-dim);background:color-mix(in srgb,var(--lime) 10%,transparent);border:1px solid color-mix(in srgb,var(--lime) 28%,transparent);border-radius:999px;padding:3px 10px}
.sos-root .hello .strk b{color:var(--lime);font-family:var(--mono)}
.sos-root .ringrow{display:flex;gap:14px;align-items:center}
.sos-root .ring2{position:relative;width:86px;height:86px;flex:none}
.sos-root .ring2 svg{transform:rotate(-90deg)}
.sos-root .ring2 .c{fill:none;stroke:rgba(255,255,255,.07);stroke-width:8}
.sos-root .ring2 .p{fill:none;stroke:var(--lime);stroke-width:8;stroke-linecap:round;stroke-dasharray:195;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--lime) 40%,transparent));transition:stroke-dashoffset .8s ease}
.sos-root .ring2 .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sos-root .ring2 .mid b{font-family:var(--mono);font-size:17px}.sos-root .ring2 .mid span{font-size:10.5px;color:var(--mute)}
.sos-root .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.sos-root .kv:last-child{border:none}.sos-root .kv b{font-family:var(--mono)}
.sos-root .qa{display:flex;gap:8px;margin:10px 14px;flex-wrap:wrap}
.sos-root .qa button{flex:1;min-width:46%;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
.sos-root .qa button.pri{background:color-mix(in srgb,var(--lime) 12%,transparent);border-color:color-mix(in srgb,var(--lime) 45%,transparent);color:var(--lime)}
/* Merch/perf actions carry qa on the BUTTON ITSELF (class="qa"/"qa pri" in
   sosBlkMerch/sosBlkPerf rows) — mirror the .qa button pill skin so they
   don't render as bare UA buttons. No flex sizing: these live inline in
   rows, not in the .qa action bar. */
.sos-root button.qa{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
.sos-root button.qa.pri{background:color-mix(in srgb,var(--lime) 12%,transparent);border-color:color-mix(in srgb,var(--lime) 45%,transparent);color:var(--lime)}
.sos-root .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:6px}
.sos-root .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--mint))}
.sos-root .cap{display:flex;align-items:center;gap:13px}
.sos-root .cap .pct{font-family:var(--mono);font-size:24px;color:var(--lime)}
/* shift checklist (store SOP) */
.sos-root .chk{display:flex;gap:11px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.sos-root .chk:last-child{border:none}
.sos-root .chk[data-chk]{cursor:pointer;-webkit-tap-highlight-color:rgba(163,230,53,.12)}
.sos-root .chk[data-chk]:active{opacity:.75}
.sos-root .chk .ct{width:42px;font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:none}
.sos-root .chk .cdot{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--mute);flex:none;display:flex;align-items:center;justify-content:center;font-size:11px}
.sos-root .chk.done .cdot{background:var(--mint);border-color:var(--mint);color:#0A0A0C;font-weight:800}
.sos-root .chk.now .cdot{border-color:var(--lime);box-shadow:0 0 8px color-mix(in srgb,var(--lime) 40%,transparent)}
.sos-root .chk .cl{font-size:12.5px;flex:1}
.sos-root .chk.done .cl{color:var(--mute)}
.sos-root .chk.now .cl{font-weight:700}
.sos-root .chk .cp{font-family:var(--mono);font-size:10.5px;color:var(--lime)}
.sos-root .chk .cdot svg{width:11px;height:11px;stroke:#0A0A0C;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sos-root .chk.now .cdot svg{stroke:var(--lime)}
/* warehouse floor-cockpit zones */
.sos-root .wz{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sos-root .wzc{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer}
.sos-root .wzc:active{transform:scale(.98)}
.sos-root .wzc .wzh{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute)}
.sos-root .wzc .wzn{font-family:var(--mono);font-size:22px;margin:3px 0 1px}
.sos-root .wzc .wzs{font-size:10.5px;color:var(--mute)}
.sos-root .wzc.hot{border-color:color-mix(in srgb,var(--lime) 45%,transparent)}.sos-root .wzc.hot .wzn{color:var(--lime)}
.sos-root .wzc.warn .wzn{color:var(--amber)}.sos-root .wzc.calm .wzn{color:var(--mint)}
/* rider run list + custody chain */
.sos-root .stop{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.06);align-items:flex-start}
.sos-root .stop:last-child{border:none}
.sos-root .stop .sn{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mute);font-family:var(--mono);font-size:10.5px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;color:var(--mute)}
.sos-root .stop.done .sn{background:var(--mint);border-color:var(--mint);color:#0A0A0C;font-weight:800}
.sos-root .stop.next .sn{border-color:var(--lime);color:var(--lime);box-shadow:0 0 8px color-mix(in srgb,var(--lime) 35%,transparent)}
.sos-root .stop .sn svg{width:11px;height:11px;stroke:#0A0A0C;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sos-root .stop .sx{flex:1}
.sos-root .stop .st1{font-size:12.5px;font-weight:600}
.sos-root .stop.done .st1{color:var(--mute)}
.sos-root .stop .st2{font-size:10.5px;color:var(--mute);margin-top:1px}
.sos-root .stop .sr{flex:none;text-align:right}
.sos-root .custody{display:flex;align-items:center;gap:0;margin:10px 0 4px}
.sos-root .custody .cs1{flex:1;text-align:center;font-size:10.5px;font-family:var(--mono);color:var(--mute);position:relative}
.sos-root .custody .cs1 .cd{width:11px;height:11px;border-radius:50%;background:var(--line);margin:0 auto 4px;border:2px solid var(--card)}
.sos-root .custody .cs1.don .cd{background:var(--mint)}
.sos-root .custody .cs1.cur .cd{background:var(--lime);box-shadow:0 0 7px color-mix(in srgb,var(--lime) 50%,transparent)}
.sos-root .custody .cs1::after{content:'';position:absolute;top:5px;left:calc(50% + 8px);width:calc(100% - 16px);height:1.5px;background:var(--line)}
.sos-root .custody .cs1:last-child::after{display:none}
.sos-root .custody .cs1.don::after{background:var(--mint)}
/* 4-store strip + dept grid (HQ pattern, mined from v2) */
.sos-root .st4{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sos-root .stc{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.sos-root .stc .sh{display:flex;justify-content:space-between;align-items:baseline}
.sos-root .stc .sh b{font-size:12px}
.sos-root .stc .rev{font-family:var(--mono);font-size:16px;margin:4px 0 1px}
.sos-root .stc .sm{font-size:10.5px;color:var(--mute)}
.sos-root .dc{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px;cursor:pointer}
.sos-root .dcg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sos-root .dc .dn{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800}
.sos-root .dc .dn .dot{width:7px;height:7px;border-radius:50%}
.sos-root .dc .dv{font-family:var(--mono);font-size:17px;margin:6px 0 1px}
.sos-root .dc .dm{font-size:10.5px;color:var(--mute)}
/* link-out rows to real EON pages */
.sos-root .lo{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);cursor:pointer}
.sos-root .lo:last-child{border:none}
.sos-root .lo .li{width:34px;height:34px;border-radius:10px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--lime);flex:none}
.sos-root .lo .lt b{display:block;font-size:12.5px}
.sos-root .lo .lt span{font-size:10.5px;color:var(--mute);font-family:var(--mono)}
.sos-root .lo .la{margin-left:auto;color:var(--mute);font-size:14px}
/* packaging bag-confirm bar (production prc-bagbar) */
.sos-root .prc-bagbar{margin:10px 14px;background:linear-gradient(135deg,#141a0d,#121216);border:1px solid color-mix(in srgb,var(--lime) 35%,transparent);border-radius:10px;padding:10px 12px}
.sos-root .prc-bagbar-row{display:flex;align-items:center;gap:8px}
.sos-root .prc-bagbar-t{font-size:12px;flex:1}
.sos-root .prc-bagbar-t b{font-family:var(--mono);color:var(--lime)}
.sos-root .prc-bagbar-btn{background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer}
.sos-root .prc-bagbar-yes{background:var(--lime);border-color:var(--lime);color:#0A0A0C}
.sos-root .prc-bagbar-x{background:none;border:none;color:var(--mute);font-size:16px;cursor:pointer;padding:0 2px}
/* money-request cards (production prc-card) */
.sos-root .prc-card{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px}
.sos-root .prc-card:last-child{margin-bottom:0}
.sos-root .prc-card-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sos-root .prc-card-title{font-size:13px;font-weight:700}
.sos-root .prc-card-amt{font-family:var(--mono);font-size:13.5px;color:var(--lime)}
.sos-root .prc-card-meta{font-size:10.5px;color:var(--mute);margin-top:3px;font-family:var(--mono)}
.sos-root .prc-card-lines{font-size:11.5px;color:var(--ink-dim);margin-top:5px}
.sos-root .prc-card-actions{display:flex;gap:7px;margin-top:9px;align-items:center;flex-wrap:wrap}
.sos-root .prc-act{background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer}
.sos-root .prc-act-ok{background:color-mix(in srgb,var(--mint) 14%,transparent);border-color:color-mix(in srgb,var(--mint) 40%,transparent);color:var(--mint)}
/* Hold-to-approve (2026-07-12): money release is irreversible, so the
   confirm is the GESTURE — a 900ms hold fills the pill left→right (grow
   verb); release early and nothing happens. No dialog, one motion. */
.sos-root .sos-hold{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.sos-root .sos-hold span{position:relative;z-index:1}
.sos-root .sos-hold .sos-hold__fill{position:absolute;inset:0;background:color-mix(in srgb,var(--mint) 34%,transparent);transform:scaleX(0);transform-origin:left center;pointer-events:none}
.sos-root .sos-hold.holding .sos-hold__fill{transform:scaleX(1);transition:transform .9s linear}
.sos-root .sos-hold.held{background:var(--mint);border-color:var(--mint);color:#0A0A0C}
.sos-root .sos-hold.held .sos-hold__fill{display:none}
/* Inline reject-reason row — replaces window.prompt; the reason is required. */
.sos-root .prc-reject{display:flex;gap:7px;align-items:center;width:100%}
.sos-root .prc-reject__in{flex:1;min-width:0;margin-top:0;padding:8px 11px;font-size:12px}
.sos-root .prc-reject__send{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red);flex:none}
.sos-root .prc-reject__keep{flex:none}
/* request-finance sheet (production prc-* + scw-sheet) */
.sos-root .prc-sheet-sub{font-size:11.5px;color:var(--mute);margin:6px 0 10px}
.sos-root .prc-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.sos-root .prc-chip{background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer}
.sos-root .prc-chip.on{background:color-mix(in srgb,var(--lime) 14%,transparent);border-color:color-mix(in srgb,var(--lime) 50%,transparent);color:var(--lime)}
.sos-root .prc-line{display:grid;grid-template-columns:1fr 52px 74px 64px 22px;gap:6px;align-items:center;margin-bottom:7px}
.sos-root .mtx-input{background:var(--card2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:8px 10px;font:inherit;font-size:12px;width:100%}
.sos-root .prc-line-total{font-family:var(--mono);font-size:11px;text-align:right;color:var(--ink-dim)}
.sos-root .prc-line-rm{background:none;border:none;color:var(--mute);font-size:15px;cursor:pointer}
.sos-root .prc-total-row{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding:10px 2px;border-top:1px solid var(--line);margin-top:8px}
.sos-root .prc-total{font-family:var(--mono);color:var(--lime)}
.sos-root .prc-quiet{font-size:11px;color:var(--mute)}
.sos-root .prc-success{text-align:center;padding:22px 8px}
.sos-root .prc-success-t{font-size:14.5px;font-weight:700;color:var(--mint)}
.sos-root .prc-success-m{font-size:12px;color:var(--mute);margin:8px 0 16px}

/* ── CHAT replica (scw-*) PRUNED 2026-07-27 — dead since the 2026-06-18
   chat unification: the Chat tab mounts the REAL CS workspace (cs.css)
   for EVERY role, and the scoped conversation-pane replica (sosOpenConvo)
   had no callers. Surviving scw-* rules are the LIVE pieces: sheets
   (scw-sheet__h/t, scw-x), pulse gauges (scw-gauges/gauge), and the
   Team @-mention typeahead (scw-mention*). ── */
/* pulse (CS roles) */
.sos-root .scw-gauges{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sos-root .scw-gauge{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px;text-align:center}
.sos-root .scw-gauge b{font-family:var(--mono);font-size:18px;display:block}
.sos-root .scw-gauge span{font-size:10.5px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;font-family:var(--mono)}
.sos-root .scw-gauge.good b{color:var(--mint)}.sos-root .scw-gauge.hero b{color:var(--lime)}.sos-root .scw-gauge.warn b{color:var(--amber)}

/* ── TASKS ── */
.sos-root .tsec{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;margin:14px 18px 4px;display:flex;justify-content:space-between}
.sos-root .tsec.over{color:var(--red)}.sos-root .tsec.today{color:var(--lime)}.sos-root .tsec.up{color:var(--mute)}
.sos-root .task{display:flex;gap:11px;align-items:flex-start;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer}
.sos-root .task:active{background:rgba(255,255,255,.02)}
.sos-root .tick{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--mute);flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:12px}
.sos-root .task.done .tick{background:var(--mint);border-color:var(--mint);color:#0A0A0C;font-weight:800}
.sos-root .tick svg{width:12px;height:12px;stroke:#0A0A0C;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sos-root .task.done .tt{text-decoration:line-through;color:var(--mute)}
.sos-root .task .tt{font-size:13px;font-weight:600}
.sos-root .task .ts{font-size:11px;color:var(--mute);margin-top:2px}
.sos-root .task .ts .tsfrom{color:var(--blue)}
.sos-root .task .tp{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--lime);flex:none}
.sos-root .task .trec{font-family:var(--mono);font-size:10.5px;color:var(--vio);border:1px solid color-mix(in srgb,var(--vio) 30%,transparent);border-radius:999px;padding:1px 6px;margin-left:6px}
/* Pack tasks (2026-08-02): the one-tap confirm lives on the row */
.sos-root .task .packtap{margin-left:auto;flex:none;background:color-mix(in srgb,var(--lime) 12%,transparent);border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);color:var(--lime);font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer}
.sos-root .task .packtap:disabled{opacity:.55;cursor:default}
.sos-root .assignbtn{margin:10px 14px 0;width:calc(100% - 28px);background:color-mix(in srgb,var(--blue) 10%,transparent);border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);color:var(--blue);font-size:12.5px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
/* sheets */
.sos-root .sheet{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);display:none}
.sos-root .sheet.on{display:block}
/* padding-bottom rides --keyboard-inset (published by app.js's
   visualViewport listener) so sheets with autofocused inputs — tracking
   waybill, assign task, request reason — lift above the iOS keyboard. */
.sos-root .sheet .pane{position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:390px;bottom:0;background:var(--card);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:16px;padding-bottom:calc(14px + env(safe-area-inset-bottom) + var(--keyboard-inset, 0px));max-height:86vh;overflow-y:auto;animation:sos-up .25s ease}
.sos-root .sheet .grab{width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 13px}
.sos-root .sheet h3{font-size:16px}
.sos-root .sla{display:flex;align-items:center;gap:10px;margin:11px 0}
.sos-root .sla .bar{flex:1;margin:0}
.sos-root .subt{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.06);font-size:12.5px}
.sos-root .subt:last-child{border:none}
.sos-root .tmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sos-root .tmeta .tm1{flex:1;min-width:45%;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.sos-root .tmeta .tm1 span{font-size:10.5px;font-family:var(--mono);letter-spacing:.08em;color:var(--mute);text-transform:uppercase;display:block}
.sos-root .tmeta .tm1 b{font-size:11.5px;display:block;margin-top:2px}
.sos-root .askeon{background:linear-gradient(135deg,color-mix(in srgb,var(--mint) 7%,transparent),color-mix(in srgb,var(--lime) 5%,transparent));border:1px solid color-mix(in srgb,var(--mint) 25%,transparent);border-radius:10px;padding:11px;margin-top:13px}
.sos-root .askeon .lbl{font-size:11px;font-weight:800;color:var(--mint);letter-spacing:.06em}
.sos-root .askeon input{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 12px;font:inherit;font-size:12.5px;margin-top:8px}
.sos-root .askeon .ans{font-size:12.5px;margin-top:9px;color:var(--ink-dim)}
.sos-root .askeon .ans b{color:var(--mint)}
.sos-root .bigdone{width:100%;margin-top:14px;background:var(--lime);border:none;color:#0A0A0C;font-weight:800;font-size:14px;padding:13px;border-radius:10px;cursor:pointer}
.sos-root .scw-sheet__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sos-root .scw-sheet__t{font-size:16px;font-weight:800}
.sos-root .scw-x{background:none;border:none;color:var(--mute);font-size:19px;cursor:pointer}
/* assign flow */
.sos-root .as-staff{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 4px}
.sos-root .as-p{display:flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-size:11.5px;font-weight:700}
.sos-root .as-p .rav{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10.5px;color:#0A0A0C}
.sos-root .as-p.on{border-color:color-mix(in srgb,var(--lime) 55%,transparent);background:color-mix(in srgb,var(--lime) 10%,transparent);color:var(--lime)}
.sos-root .as-row{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 4px}
.sos-root .as-c{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:11.5px;font-weight:700;cursor:pointer}
.sos-root .as-c.on{border-color:color-mix(in srgb,var(--lime) 55%,transparent);background:color-mix(in srgb,var(--lime) 10%,transparent);color:var(--lime)}
.sos-root .as-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-top:12px}

/* ── SCORE ── */
.sos-root .lvl{display:flex;align-items:center;gap:13px}
.sos-root .lvl .badge{width:58px;height:58px;border-radius:10px;background:linear-gradient(135deg,#2a3310,#121216);border:1px solid color-mix(in srgb,var(--lime) 50%,transparent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:17px;font-weight:800;color:var(--lime)}
.sos-root .lvl .t b{display:block;font-size:15px}.sos-root .lvl .t span{font-size:10.5px;color:var(--mute)}
.sos-root .xp{height:9px;border-radius:999px;background:rgba(255,255,255,.07);margin-top:8px;overflow:hidden}
.sos-root .xp i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--mint))}
.sos-root .ledg .l{display:flex;justify-content:space-between;font-size:12.5px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.sos-root .ledg .l:last-child{border:none}
.sos-root .ledg .l b{font-family:var(--mono);color:var(--lime)}
.sos-root .wkdots{display:flex;gap:6px;margin-top:9px}
.sos-root .wkd{flex:1;text-align:center}
.sos-root .wkd .d{width:24px;height:24px;border-radius:8px;background:var(--card2);border:1px solid var(--line);margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--mute)}
.sos-root .wkd.hit .d{background:color-mix(in srgb,var(--lime) 16%,transparent);border-color:color-mix(in srgb,var(--lime) 50%,transparent);color:var(--lime);font-weight:800}
.sos-root .wkd .d svg{width:11px;height:11px;stroke:var(--lime);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sos-root .wkd span{font-size:8px;font-family:var(--mono);color:var(--mute);display:block;margin-top:3px}
.sos-root .badges{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sos-root .bdgx{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;gap:9px;align-items:center}
.sos-root .bdgx.lock{opacity:.35}
.sos-root .bdgx .bm{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:800;color:#0A0A0C}
.sos-root .bdgx .bl{font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;color:var(--ink-dim);line-height:1.3}
.sos-root .lead .row{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.sos-root .lead .row:last-child{border:none}
.sos-root .lead .rk{font-family:var(--mono);font-size:12px;color:var(--mute);width:16px}
.sos-root .lead .av2{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#0A0A0C;flex:none}
.sos-root .lead .nm2{font-size:13px;font-weight:600}.sos-root .lead .st2{font-size:10.5px;color:var(--mute)}
.sos-root .lead .pt2{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--lime)}
.sos-root .lead .row.me{background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 7%,transparent),transparent);border-radius:10px;padding:8px}
.sos-root .bonus{display:flex;align-items:center;gap:13px}
.sos-root .bonus b{font-family:var(--mono);font-size:21px;color:var(--mint);display:block}
.sos-root .bonus span{font-size:10.5px;color:var(--mute)}
.sos-root .earn .l{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06);color:var(--ink-dim)}
.sos-root .earn .l:last-child{border:none}
.sos-root .earn .l b{font-family:var(--mono);color:var(--lime);flex:none;margin-left:10px}

/* ── TEAM (managers) ── */
.sos-root .tm-rep{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.sos-root .tm-rep:last-child{border:none}
.sos-root .tm-rep .rav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#0A0A0C;flex:none}
.sos-root .tm-rep .rx{flex:1;min-width:0}
.sos-root .tm-rep .rn{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.sos-root .tm-rep .rs{font-size:10.5px;color:var(--mute);font-family:var(--mono);margin-top:1px}
.sos-root .tm-rep .rv{text-align:right;flex:none}
.sos-root .tm-rep .rv b{font-family:var(--mono);font-size:12.5px;display:block}
.sos-root .tm-rep .rv span{font-size:10.5px;color:var(--mute);font-family:var(--mono)}
.sos-root .tm-grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;padding:9px 0 2px;display:flex;justify-content:space-between}
.sos-root .exc{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.sos-root .exc:last-child{border:none}
.sos-root .exc .ed{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px}
.sos-root .exc .et{font-size:12px;color:var(--ink-dim);flex:1}
.sos-root .exc .et b{color:var(--ink)}

/* ── EON daily review card (design pass 03 — sosBlkReview had ZERO css) ── */
.sos-root .sos-review__coach{font-size:13px;line-height:1.5;color:var(--ink-dim)}
.sos-root .sos-review__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:12px 0 5px}
.sos-root .sos-review__h::before{content:'[ '}.sos-root .sos-review__h::after{content:' ]'}
.sos-root .sos-review__row{font-size:12.5px;color:var(--ink-dim);padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.sos-root .sos-review__row:last-child{border-bottom:none}

/* ── loading / empty / error states (NOT in the mockup; honest fallbacks
      per the contract's DATA HONESTY rule — never blank) ── */
.sos-root .sos-loading,.sos-root .sos-empty,.sos-root .sos-error{padding:40px 24px;text-align:center;color:var(--mute);font-size:12.5px;line-height:1.6}
.sos-root .sos-error b{color:var(--red)}

/* ── B3 ATTENDANCE check-in (Day, top) — mirrors the "geo-verified" chk ── */
.sos-root .sos-att{padding:13px}
.sos-root .sos-att .att-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.sos-root .att-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--mute)}.sos-root .att-tag::before{content:'[ '}.sos-root .att-tag::after{content:' ]'}
.sos-root .att-pts{font-family:var(--mono);font-size:11px;color:#0A0A0C;background:var(--lime);border-radius:999px;padding:2px 9px;font-weight:800}
.sos-root .att-state{display:flex;align-items:center;gap:11px}
.sos-root .att-state .att-ic{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
/* the state ring draws on entry (dashoffset); color rides the state */
/* svg.att-ring beats the generic .att-ic svg{width:18px} icon sizing */
.sos-root .att-state .att-ic svg.att-ring{position:absolute;inset:-6px;width:46px;height:46px;transform:rotate(-90deg);pointer-events:none;stroke-width:2.5}
.sos-root .att-ring circle{fill:none;stroke-width:2.5}
.sos-root .att-ring__tr{stroke:rgba(255,255,255,.07)}
.sos-root .att-ring__pr{stroke:currentColor;stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4}
.sos-root .sos-att.att-seen .att-ring__pr{transition:stroke-dashoffset 1.1s cubic-bezier(.05,.7,.1,1);stroke-dashoffset:0}
.sos-root .att-state .att-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sos-root .att-state b{display:block;font-size:13.5px;font-weight:700}
.sos-root .att-state span{display:block;font-size:10.5px;color:var(--mute);margin-top:1px}
.sos-root .att-state.ok .att-ic{background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint)}
.sos-root .att-state.ok b{color:var(--mint)}
.sos-root .att-state.soft .att-ic{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.sos-root .att-state.soft b{color:var(--amber)}
.sos-root .att-state.bad .att-ic{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red)}
.sos-root .att-state.bad b{color:var(--red)}
.sos-root .att-state.off .att-ic{background:rgba(255,255,255,.06);color:var(--mute)}
.sos-root .att-live{width:9px;height:9px;border-radius:50%;background:var(--mint);margin-left:auto;flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 60%,transparent);animation:sos-pulse 1.6s infinite}
@keyframes sos-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 50%,transparent)}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--mint) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 0%,transparent)}}
.sos-root .att-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
/* ONE lime slab (design pass 03): the screen's single act — solid, full width */
.sos-root .att-btn{display:flex;align-items:center;justify-content:center;gap:7px;border:none;cursor:pointer;font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#0A0A0C;background:var(--lime);border-radius:8px;padding:12px 16px;width:100%;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
.sos-root .att-btn:active{transform:scale(.97)}
.sos-root .att-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sos-root .att-btn.busy{opacity:.6;cursor:default}
.sos-root .att-meta b{display:block;font-size:12.5px;font-weight:700}
.sos-root .att-meta span{display:block;font-size:10.5px;color:var(--mute);margin-top:1px}
.sos-root .att-pin{margin-top:11px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.07)}
.sos-root .att-pin button{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-dim);border-radius:9px;padding:6px 11px;font-size:11.5px;cursor:pointer}
.sos-root .att-pin button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sos-root .att-pin span{display:block;font-size:10.5px;color:var(--mute);margin-top:5px}

/* ── B2 BONUS POOL LIVE (Score) ── */
.sos-root .sos-bonus .bonus b.bonus-num{font-family:var(--mono);font-size:23px;color:var(--mint);display:block;letter-spacing:-.01em}
.sos-root .bonus-rate{font-size:11px;color:var(--mute);margin-top:9px}
.sos-root .bonus-rate b{font-family:var(--mono);color:var(--lime)}
.sos-root .bonus-spark{margin-top:12px}
.sos-root .bonus-spark .sp-row{display:flex;align-items:flex-end;gap:3px;height:38px}
.sos-root .bonus-spark .sp-b{flex:1;min-width:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--lime),var(--mint));opacity:.85;transition:height .4s ease}
.sos-root .bonus-spark .sp-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-top:5px}
.sos-root .bonus-earn{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.07)}
.sos-root .bonus-earn .be-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.sos-root .bonus-earn .be-r{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:5px 0;color:var(--ink-dim)}
.sos-root .bonus-earn .be-r b{font-family:var(--mono);color:var(--lime);flex:none;margin-left:10px}

/* ════════════════════════════════════════════════════════════════════
   PR-F #1 — CS FULL-PAGE EMBED. When a CS rep taps Chat, sosRenderChat
   mounts the production CS inbox (cs.css .csw-shell, position:fixed z-60)
   and adds .sos-csfull to #sos-root. Daniel 2026-06-16 (round 3): the chat
   must be a TRUE FULL PAGE with NO bottom footer — the footer was the
   problem (it stacked under the CS composer/queue pills and read as broken).
   So in csfull mode:
     - hide the duplicate CRUX·EON header (the inbox IS the surface now);
     - HIDE the bottom tabbar entirely (the footer is the problem) — the
       ONLY way out is the top-left back chevron, which sosRenderChat rewires
       to sosSwitchTab('day') = back home (footer returns there);
     - lift the 390px phone cap to full-width (edge-to-edge inbox);
     - DON'T override the csw-shell box at all — let cs.css own positioning
       (top:vv-offset-top, height:app-height) apply verbatim so it fills the
       viewport AND tracks the mobile keyboard exactly like standalone /cs.
   When a thread is open, cs.css :has(.has-active) already full-screens the
   conversation — we don't touch that. */
.sos-root.sos-csfull .top{ display:none; }
.sos-root.sos-csfull .tabbar{ display:none; }
.sos-root.sos-csfull .phone{ max-width:none; border-left:none; border-right:none; }

/* ── PR-F #3 — Patrick inline route map (run block) ──────────────── */
.sos-root .sos-map{position:relative;margin:10px 14px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--card);height:46vh;min-height:240px}
.sos-root .sos-map__f{width:100%;height:100%;border:0;display:block;background:#050507}
.sos-root .sos-map__full{position:absolute;right:12px;bottom:12px;background:rgba(10,10,12,.86);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);color:var(--lime);font-size:11.5px;font-weight:700;padding:8px 13px;border-radius:999px;cursor:pointer}
.sos-root .sos-map__full:active{transform:scale(.97)}

/* ── PR-F #2 — trackingsend block (Leke/Patrick Day) ────────────── */
.sos-root .sos-trk{padding:0}
.sos-root .sos-trk__head{display:flex;align-items:center;justify-content:space-between;padding:13px 13px 9px;border-bottom:1px solid var(--line-soft)}
.sos-root .sos-trk__head span:first-child{font-size:12px;color:var(--ink-dim)}
.sos-root .sos-trk__empty{padding:18px 13px;text-align:center;font-size:11.5px;color:var(--mute)}
.sos-root .sos-trk__note{padding:9px 13px;font-size:11px;line-height:1.45;color:var(--mute);border-bottom:1px solid var(--line)}
.sos-root .sos-trk__row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px dashed rgba(255,255,255,.06);cursor:pointer}
.sos-root .sos-trk__row:last-child{border-bottom:none}
.sos-root .sos-trk__row:active{background:rgba(255,255,255,.03)}
.sos-root .sos-trk__row.late{box-shadow:inset 3px 0 0 var(--amber)}
.sos-root .sos-trk__main{flex:1;min-width:0}
.sos-root .sos-trk__o{font-size:12.5px;font-weight:700}
.sos-root .sos-trk__sub{font-size:10.5px;color:var(--mute);font-family:var(--mono);margin-top:2px}
.sos-root .sos-trk__chev{color:var(--mute);font-size:16px;flex:none}
/* tracking sheet (reuses #sos-sheet .pane) */
.sos-root .sos-trk-sheet__o{margin:6px 0 4px}
.sos-root .sos-trk-sheet__o b{font-size:14px;display:block}
.sos-root .sos-trk-sheet__o span{font-size:11px;color:var(--mute)}
.sos-root .sos-trk-seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.sos-root .sos-trk-seg__b{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:11.5px;font-weight:700;color:var(--ink-dim);cursor:pointer}
.sos-root .sos-trk-seg__b.on{border-color:color-mix(in srgb,var(--lime) 55%,transparent);background:color-mix(in srgb,var(--lime) 10%,transparent);color:var(--lime)}
.sos-root .sos-trk-input{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:11px 13px;font:inherit;font-size:13px;margin-top:8px}
.sos-root .sos-trk-input:focus{outline:none;border-color:color-mix(in srgb,var(--lime) 50%,transparent)}
.sos-root .sos-trk-prev{background:linear-gradient(135deg,color-mix(in srgb,var(--mint) 6%,transparent),color-mix(in srgb,var(--lime) 4%,transparent));border:1px solid color-mix(in srgb,var(--mint) 22%,transparent);border-radius:10px;padding:11px 13px;font-size:12px;color:var(--ink-dim);line-height:1.45;margin-top:8px}
.sos-root .sos-trk-result{margin-top:11px}
.sos-root .sos-trk-chip{font-size:11.5px;line-height:1.4;border-radius:8px;padding:9px 12px}
.sos-root .sos-trk-chip.warn{background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);color:var(--amber)}
.sos-root .sos-trk-copy{margin-top:9px;width:100%;background:var(--card2);border:1px solid var(--line);color:var(--ink-dim);font-weight:700;font-size:12.5px;padding:10px;border-radius:8px;cursor:pointer}

/* assign-a-task sheet (reuses #sos-sheet .pane) */
.sos-root .sos-as-in{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:10px 12px;font:inherit;font-size:13px;margin-top:6px;-webkit-appearance:none;appearance:none}
.sos-root textarea.sos-as-in{resize:vertical;min-height:40px}
.sos-root .sos-as-in:focus{outline:none;border-color:color-mix(in srgb,var(--lime) 50%,transparent)}
.sos-root .sos-as-row{display:flex;gap:10px}
.sos-root .sos-as-col{flex:1;min-width:0}

/* ── PR-F #4 — Team @-mention typeahead (the scoped-replica team list was pruned 2026-07-27) ── */
/* @-typeahead dropdown */
.sos-root .scw-mention{position:absolute;left:10px;right:10px;bottom:58px;z-index:6;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 12px 32px -10px rgba(0,0,0,.7);max-height:230px;overflow-y:auto}
.sos-root .scw-mention__r{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-bottom:1px solid var(--line-soft);color:var(--ink);padding:9px 12px;cursor:pointer;text-align:left}
.sos-root .scw-mention__r:last-child{border-bottom:none}
.sos-root .scw-mention__r:active{background:rgba(255,255,255,.04)}
.sos-root .scw-mention__r .rav{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10.5px;color:#0A0A0C;flex:none}
.sos-root .scw-mention__n{font-size:12.5px;font-weight:600}
.sos-root .scw-mention__role{margin-left:auto;font-size:10.5px;color:var(--mute);font-family:var(--mono)}

/* ── Shift requests (off-day / leave / swap) — RESTORED (wave 2).
   The slot came back in sosRenderDay 2026-07-24 (staff feedback: "can't
   apply for leave") but design pass 03 had deleted every .sos-req-* rule,
   so the live card rendered unskinned. Rules re-added from pre-p299
   history; every token they reference is defined on .sos-root above. ── */
.sos-root .sos-req-bal{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--lime);background:color-mix(in srgb,var(--lime) 10%,transparent);border:1px solid color-mix(in srgb,var(--lime) 26%,transparent);border-radius:999px;padding:3px 9px}
.sos-root .sos-req-empty{font-size:11px;color:var(--mute);padding:4px 2px 2px;line-height:1.5}
.sos-root .sos-req-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft)}
.sos-root .sos-req-row:first-of-type{border-top:none}
.sos-root .sos-req-meta{flex:1;min-width:0}
.sos-root .sos-req-meta b{display:block;font-size:12.5px;font-weight:700}
.sos-root .sos-req-meta span{display:block;font-size:10.5px;color:var(--mute);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sos-root .sos-req-badge{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--mute)}
.sos-root .sos-req-badge.ok{color:var(--mint);background:color-mix(in srgb,var(--mint) 13%,transparent)}
.sos-root .sos-req-badge.soft{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent)}
.sos-root .sos-req-badge.bad{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.sos-root .sos-req-x{flex:none;background:none;border:none;color:var(--mute);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.sos-root .sos-req-acts{flex:none;display:flex;gap:6px}
.sos-root .sos-req-ok,.sos-root .sos-req-no{font-size:11px;font-weight:700;border-radius:9px;padding:6px 11px;cursor:pointer;border:1px solid var(--line)}
.sos-root .sos-req-ok{background:var(--lime);color:#0A0A0C;border-color:var(--lime)}
.sos-root .sos-req-no{background:transparent;color:var(--ink-dim)}
.sos-root .sos-req-row--peer{background:color-mix(in srgb,var(--blue) 6%,transparent);border-radius:10px;padding:10px;border:1px solid color-mix(in srgb,var(--blue) 20%,transparent);margin-bottom:6px}
.sos-root .sos-req-new{width:100%;margin-top:11px;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:700;padding:11px;border-radius:10px;cursor:pointer}
.sos-root .sos-req-new:active{transform:scale(.99)}
/* request sheet */
.sos-root .sos-req-tabs{display:flex;gap:6px;margin:4px 0 14px}
.sos-root .sos-req-tab{flex:1;background:var(--card2);border:1px solid var(--line);color:var(--mute);font-size:12px;font-weight:700;padding:9px 0;border-radius:10px;cursor:pointer}
.sos-root .sos-req-tab.on{background:color-mix(in srgb,var(--lime) 12%,transparent);border-color:color-mix(in srgb,var(--lime) 40%,transparent);color:var(--lime)}
.sos-root .sos-req-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 5px}
.sos-root .sos-req-in{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:13px;padding:10px 11px;border-radius:10px;font-family:inherit;-webkit-appearance:none}
.sos-root .sos-req-in:focus{outline:none;border-color:color-mix(in srgb,var(--lime) 50%,transparent)}
.sos-root .sos-req-2{display:flex;gap:10px}.sos-root .sos-req-2>div{flex:1}

/* ── Store-rep merchandising panel ──
   Ops design pass 01 (2026-07-11): these late additions were the ONLY
   rules in the file not scoped under .sos-root, and referenced tokens
   that didn't exist (--good/--bad/--card-soft), so their fallback hexes
   silently won. Scoped + fallbacks dropped (tokens defined on .sos-root). */
.sos-root .sos-merch__row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.sos-root .sos-merch__row span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sos-root .sos-merch__dead{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px; flex-wrap:wrap; }
/* The text child must be able to SHRINK: without min-width:0 a long
   product name pushed the flex:0 0 auto action group past the .phone
   clip and the markdown/transfer buttons became untappable on a phone —
   the unbounded-flex-sibling class (#2755). Vet 2026-08-31, S11. */
.sos-root .sos-merch__dead > div:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sos-root .sos-merch__dead .qa{ flex:0 0 auto; }
.sos-root .sos-merch__acts{ display:flex; gap:6px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.sos-root .sos-merch__store{ font-size:12px; padding:3px 6px; border-radius:6px; border:1px solid var(--line-soft); background:var(--card-soft); color:var(--ink); max-width:140px; }

/* ── Performance OS: EON-vs-reps scoreboard ── */
.sos-root .sos-perf__verdict{ padding:8px 10px; border-radius:8px; background:var(--card-soft); margin-bottom:8px; }
.sos-root .sos-perf__verdict.good b{ color:var(--good); }
.sos-root .sos-perf__verdict.bad b{ color:var(--bad); }
.sos-root .sos-perf__row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.sos-root .sos-perf__row.is-eon{ background:color-mix(in srgb,var(--mint) 6%,transparent); border-radius:6px; padding:6px 6px; }
.sos-root .sos-perf__rk{ flex:0 0 22px; text-align:center; opacity:.6; }
.sos-root .sos-perf__nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sos-root .sos-perf__mt{ flex:0 0 auto; opacity:.85; }
.sos-root .sos-perf .good{ color:var(--good); }
.sos-root .sos-perf .bad{ color:var(--bad); }

/* ═══════════════════════════════════════════════════════════════════
   Motion polish pass (2026-07-02) — "more fluid and animated".
   Additive only: staggered card cascade, tactile tap feedback, an
   animated tab-active indicator, ring draw-in and badge pop. All respect
   prefers-reduced-motion. Scoped under .sos-root so nothing leaks out.
   ═══════════════════════════════════════════════════════════════════ */

/* Cards cascade in rather than popping together. The base .card already
   runs `sos-in`; stagger the first handful by position so the Day view
   assembles top-to-bottom. */
.sos-root .card{ animation-duration:.42s; animation-timing-function:cubic-bezier(.2,.7,.2,1); }
.sos-root .card:nth-of-type(1){ animation-delay:.02s }
.sos-root .card:nth-of-type(2){ animation-delay:.07s }
.sos-root .card:nth-of-type(3){ animation-delay:.12s }
.sos-root .card:nth-of-type(4){ animation-delay:.17s }
.sos-root .card:nth-of-type(5){ animation-delay:.22s }
.sos-root .card:nth-of-type(n+6){ animation-delay:.26s }

/* Tactile press feedback across the interactive surfaces. */
.sos-root .card,
.sos-root .task,
.sos-root .rp,
.sos-root .askeon,
.sos-root .rolepill,
.sos-root .tm-rep{ transition:transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s ease, background .16s ease; }
.sos-root .task:active,
.sos-root .rp:active,
.sos-root .askeon:active,
.sos-root .rolepill:active{ transform:scale(.985); }

/* Tab bar: lift + glow the active icon, animate the tab you tap, and draw a
   little lime indicator dot under the current tab. */
.sos-root .tabbar button{ transition:color .2s ease, transform .15s ease; }
.sos-root .tabbar button:active{ transform:scale(.9); }
.sos-root .tabbar button svg{ transition:transform .22s cubic-bezier(.2,.7,.2,1), filter .22s ease; }
/* active = 2px lime overline on the hairline (flow grammar, design pass 03);
   badges stay red — overdue means kill semantics. */
.sos-root .tabbar button.on::after{
  content:""; position:absolute; top:-1px; left:26%; right:26%; height:2px;
  background:var(--lime); transform-origin:left center;
  animation:sos-overline .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sos-overline{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* Unread badge pops in instead of appearing flat. */
.sos-root .tabbar button .bdg{ animation:sos-bdgpop .32s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes sos-bdgpop{ 0%{ transform:scale(0); opacity:0 } 60%{ transform:scale(1.18) } 100%{ transform:scale(1); opacity:1 } }

/* Gamification ring: draw the progress arc in on load, then it still eases
   to any live change (the base rule keeps its stroke-dashoffset transition). */
.sos-root .ring2 .p{ animation:sos-ringdraw 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes sos-ringdraw{ from{ stroke-dashoffset:195 } }
.sos-root .hello .hi{ animation:sos-in .5s cubic-bezier(.2,.7,.2,1) both; }
.sos-root .hello .strk{ animation:sos-in .5s cubic-bezier(.2,.7,.2,1) .12s both; }



/* ═══════════════════════════════════════════════════════════════════
   Motion layer v2 (vet 2026-07-05) — extends the 2026-07-02 pass.
   Gaps closed: section/row cascade inside cards, quick-action + approval
   press states, loading shimmer, convo slide-in, count-up pairing.
   Additive, scoped, reduced-motion-safe.
   ═══════════════════════════════════════════════════════════════════ */

/* Section headers + quick actions join the cascade. */
.sos-root .sec{animation:sos-in .4s cubic-bezier(.2,.7,.2,1) both;}
.sos-root .qa{animation:sos-in .42s cubic-bezier(.2,.7,.2,1) .05s both;}
.sos-root .qa button{transition:transform .15s cubic-bezier(.2,.7,.2,1),filter .2s ease;}
.sos-root .qa button:active{transform:scale(.94);}

/* Rows inside a card ripple top-to-bottom (team reps, checklists, chats). */
.sos-root .tm-rep,.sos-root .chk,.sos-root .exc,.sos-root .kv{animation:sos-in .32s cubic-bezier(.2,.7,.2,1) both;}
.sos-root .tm-rep:nth-of-type(1),.sos-root .chk:nth-of-type(1){animation-delay:.03s}
.sos-root .tm-rep:nth-of-type(2),.sos-root .chk:nth-of-type(2){animation-delay:.06s}
.sos-root .tm-rep:nth-of-type(3),.sos-root .chk:nth-of-type(3){animation-delay:.09s}
.sos-root .tm-rep:nth-of-type(4),.sos-root .chk:nth-of-type(4){animation-delay:.12s}
.sos-root .tm-rep:nth-of-type(n+5),.sos-root .chk:nth-of-type(n+5){animation-delay:.15s}

/* Money-request + merch action buttons feel pressable; disabled = busy. */
.sos-root .prc-act,.sos-root .assignbtn,.sos-root .prc-bagbar-btn{
  transition:transform .15s cubic-bezier(.2,.7,.2,1),opacity .2s ease,border-color .2s ease;}
.sos-root .prc-act:active,.sos-root .assignbtn:active{transform:scale(.95);}
.sos-root .prc-act[disabled]{opacity:.55;}

/* Loading state shimmers instead of sitting as static text. */
.sos-root .sos-loading{position:relative;overflow:hidden;border-radius:10px;color:var(--mute);}
.sos-root .sos-loading::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
  background-size:200% 100%;animation:sos-shimmer 1.4s ease-in-out infinite;}
@keyframes sos-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}


/* ONE reduced-motion block (design pass 03 — merged the 07-02 + 07-05
   passes; static end-states everywhere, the att ring lands drawn). */

/* ═══════════════════════════════════════════════════════════════════
   WS-H · STAFF OS, ALIVE (2026-09-02) — the Day as vessels of the loop.
   One ring for the department's week, lanes that carry an ask out and
   its outcome back, the coach's lines landing one beat apart, the line
   that changed because of you, and the loop itself for the people who
   run it. Motion says what changed; reduced-motion gets the same page,
   still. Every colour is a house token already on .sos-root.
   ═══════════════════════════════════════════════════════════════════ */
.sos-root .hello .hi{font-variation-settings:'wdth' 100;animation:sos-breathe 2.6s cubic-bezier(.2,.7,.2,1) 1 both}
@keyframes sos-breathe{0%{font-variation-settings:'wdth' 100}45%{font-variation-settings:'wdth' 122}100%{font-variation-settings:'wdth' 112}}
.sos-root .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
/* the ring */
.sos-root .sos-ring__row{display:flex;gap:12px;align-items:center}
.sos-root .sos-ring svg .track{fill:none;stroke:var(--line);stroke-width:5}
.sos-root .sos-ring svg .arc{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.sos-root .sos-ring__n{font-size:22px;font-weight:800;color:var(--lime);line-height:1}
.sos-root .sos-ring__k{font-size:11px;color:var(--mute);margin-top:3px}
/* the vessel */
.sos-root .sos-vessel__svg{display:block;margin-top:8px}
.sos-root .sos-vessel__svg .lbl{fill:var(--mute)}
.sos-root .sos-vessel__why{flex:1;min-width:60%;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-size:13px;padding:10px;border-radius:10px}
.sos-root .sos-vessel__svg .lane{fill:none;stroke:var(--line);stroke-width:1.5}
.sos-root .sos-vessel__svg .lane.hit{stroke:var(--lime)}
.sos-root .sos-vessel__svg .lane.partial{stroke:var(--amber)}
.sos-root .sos-vessel__svg .lane.miss{stroke:var(--red);opacity:.7}
.sos-root .sos-vessel__svg .lane.open{stroke-dasharray:3 4}
.sos-root .sos-vessel__svg .lane.open.lit{stroke:var(--lime);stroke-dasharray:none}
.sos-root .sos-vessel__svg .dot{fill:var(--lime)}
.sos-root .sos-vessel__open{margin-top:8px}
/* this line changed because of you */
.sos-root .sos-changed{border-left:3px solid var(--lime)}
.sos-root .sos-changed__was{margin-top:8px;color:var(--mute);font-size:13px}
.sos-root .sos-changed__was s{opacity:.7}
.sos-root .sos-changed__now{margin-top:6px;font-size:13.5px;color:var(--ink)}
.sos-root .sos-changed__meta{margin-top:8px;display:flex;gap:6px}
/* the coach's lines */
.sos-root .sos-coach__line{padding:6px 0;border-top:1px solid var(--line);animation:sos-land .45s ease both}
.sos-root .sos-coach__line:first-child{border-top:0}
.sos-root .sos-coach__line div{font-size:13.5px;margin-top:2px}
@keyframes sos-land{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the loop, for managers */
.sos-root .sos-lanes__row{padding:7px 0;border-top:1px solid var(--line)}
.sos-root .sos-lanes__row:first-child{border-top:0}
.sos-root .sos-lanes__l{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sos-root .sos-lanes__next{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}

@media (prefers-reduced-motion: reduce){
  /* WS-H · Staff OS, Alive: the greeting does not breathe, the coach lines land
     at once, the ring is already full — the same page, still. */
  .sos-root .hello .hi{animation:none}
  .sos-root .sos-coach__line{animation:none}
  .sos-root .sos-ring svg .arc{transition:none}
  .sos-root .card,.sos-root .ring2 .p,.sos-root .hello .hi,.sos-root .hello .strk,
  .sos-root .tabbar button.on::after,.sos-root .tabbar button .bdg,
  .sos-root .sec,.sos-root .qa,.sos-root .tm-rep,.sos-root .chk,.sos-root .exc,
  .sos-root .kv,.sos-root .sos-loading::after,.sos-root .view.on,
  .sos-root .view.sos-slide,.sos-root .sos-prt,.sos-root .sos-stamp,
  .sos-root .task.done .tick svg,
  .sos-root .sheet .pane{animation:none!important;}
  .sos-root .card{ animation-delay:0s !important; }
  .sos-root .sos-prt{ animation-delay:0s !important; }
  .sos-root .task:active{ transform:none; }
  .sos-root .qa button:active,.sos-root .prc-act:active{transform:none;}
  .sos-root .att-ring__pr{transition:none;stroke-dashoffset:0!important;}
  /* hold-to-approve: the fill snaps visible instead of growing — the 900ms
     hold TIMING still applies (deliberateness is the point, not the motion) */
  .sos-root .sos-hold.holding .sos-hold__fill{transition:none;}
  /* cached-payload paint (2026-07-25): the stale dim is a state cue, not
     motion — it just stops fading in. */
  .sos-root .sos-stale{transition:none;}
}

/* small utility classes for the last converted inline styles (design pass 03) */
.sos-root .sos-slalbl{font-size:10.5px;color:var(--mute)}
.sos-root .sos-rolepill__tag{font-size:10.5px;color:var(--mute);font-family:var(--mono)}

/* ── Team-tab store-coverage strip (tail-doors 2026-07-27) ──
   Static rules only — no animation, so the ONE reduced-motion block above
   stays untouched. Tokens are the .sos-root locals (--line-soft/--mute/
   --red/--amber), never invented names. */
.sos-root .sos-cov__row{padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.sos-root .sos-cov__row:last-child{border-bottom:none}
.sos-root .sos-cov__row--dark{border-left:2px solid var(--red);padding-left:9px}
.sos-root .sos-cov__hd{display:flex;align-items:center;gap:8px}
.sos-root .sos-cov__n{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.sos-root .sos-cov__late{font-family:var(--mono);font-size:10.5px;color:var(--amber)}
.sos-root .sos-cov__miss{font-size:11px;color:var(--mute);margin-top:2px}
/* Covering / covering-elsewhere lines (2026-08-20): same weight as the
   "Missing:" line above them — they are context, not an alarm, and must
   not shout louder than the line they sit under. */
.sos-root .sos-cov__cover{font-size:11px;color:var(--mute);margin-top:2px}
.sos-root .sos-cov__alert{font-size:11px;color:var(--red);margin-top:2px}

/* ── Day-view observation-history fold (tail-doors 2026-07-27) ── */
.sos-root .sos-obs__row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.sos-root .sos-obs__row:last-child{border-bottom:none}
.sos-root .sos-obs__d{font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:0 0 auto;padding-top:2px}
.sos-root .sos-obs__t{flex:1;min-width:0}

/* Toast (body-appended, OUTSIDE .sos-root — reads the :root --eon-* ink
   tokens directly; was an inline cssText fallback, design pass 03). */
.sos-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:1100;
  background:var(--eon-bg-2);border:1px solid var(--eon-line);color:var(--eon-ink);
  font-size:12px;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  max-width:84%;text-align:center}

/* ── Peer props (Sprint 2 creative layer, 2026-07-05) ──
   Scoped under .sos-root (design pass 01) — was bare; --ease-out never
   existed so the transition always ran the 'ease' fallback. */
.sos-root .sos-prop{margin-left:8px;padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font-size:11px;font-weight:600;cursor:pointer;transition:transform .12s ease,background .12s;}
.sos-root .sos-prop:hover{background:var(--card2);color:var(--ink);}
.sos-root .sos-prop:active{transform:scale(.92);}
.sos-root .sos-prop:disabled{opacity:.5;cursor:default;}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP WORKSTATION (2026-07-14) — operator: "why is staff os only
   showing as phone web size only and not responsive". The v4 port is a
   phone-frame app: .phone caps at 390px and every fixed overlay
   (tabbar/rp/sheet) is pinned to the same 390px center, so a
   desk screen got a phone column in a void. At ≥1100px the SAME markup
   re-flows — no JS: the tabbar becomes a fixed LEFT RAIL beside a
   1128px column, Day/Team/Score cards assemble in TWO CSS columns
   (cards never split), Chat/Tasks read as one wider column, and the
   bottom sheets become centered modals. Below 1100px NOTHING here
   applies — staff phones render byte-identical. csfull (the CS-rep
   embed) keeps its own full-bleed contract via the padding escape.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1100px){
  .sos-root .phone{max-width:1128px;padding-left:224px;padding-bottom:32px}
  /* tab bar → left rail, anchored to the centered column's left edge */
  .sos-root .tabbar{left:max(0px,calc(50% - 564px));transform:none;width:224px;max-width:none;
    top:0;bottom:0;flex-direction:column;justify-content:flex-start;gap:2px;
    padding:64px 14px 18px;border-top:none;border-right:1px solid var(--line)}
  .sos-root .tabbar button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:11px;
    padding:11px 12px;border-radius:10px;font-size:12.5px}
  .sos-root .tabbar button.on{background:color-mix(in srgb,var(--lime) 9%,transparent)}
  /* the mobile overline becomes a left edge-bar on the rail row */
  .sos-root .tabbar button.on::after{top:9px;bottom:9px;left:0;right:auto;width:2px;height:auto;animation:none}
  .sos-root .tabbar button .bdg{position:static;margin-left:auto}
  /* Day / Team / Score assemble in two columns; a card never splits */
  .sos-root #sos-v-day.on,.sos-root #sos-v-team.on,.sos-root #sos-v-score.on{
    column-count:2;column-gap:16px;padding:0 16px 0 6px}
  .sos-root .view.on .card{margin:10px 0 6px;break-inside:avoid}
  .sos-root .view.on .sec{margin:14px 6px 0;break-after:avoid}
  .sos-root .view.on .qa{margin:10px 0;break-inside:avoid}
  .sos-root .view.on .note{margin:10px 6px}
  .sos-root .view.on .prc-bagbar,.sos-root .view.on .sos-map{margin:10px 0;break-inside:avoid}
  .sos-root .view.on .assignbtn{width:100%;margin:10px 0 0;break-inside:avoid}
  .sos-root .hello{column-span:all;padding:14px 6px 0}
  /* chat + tasks read best as ONE wider column */
  .sos-root #sos-v-chat.on,.sos-root #sos-v-tasks.on{max-width:660px;margin:0 auto}
  /* bottom sheets → centered modals; sos-up's Y-offset would break the
     50/50 centering, so they fade instead. Grab handles are a phone verb. */
  .sos-root .rp{bottom:auto;top:50%;transform:translate(-50%,-50%);max-width:460px;
    border-radius:18px;animation:sos-fade .18s ease}
  .sos-root .sheet .pane{bottom:auto;top:50%;transform:translate(-50%,-50%);max-width:480px;
    border:1px solid var(--line);border-radius:18px;padding-bottom:20px;animation:sos-fade .18s ease}
  .sos-root .rp .grab,.sos-root .sheet .grab{display:none}
  /* no bottom tabbar on desk — the toast returns to the floor */
  .sos-toast{bottom:36px}
  /* csfull: the CS embed stays edge-to-edge, no rail gutter */
  .sos-root.sos-csfull .phone{max-width:none;padding-left:0}
}

/* clock-out (staff feedback 2026-07-24) — sits under the check-in state */
.att-out { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.att-out span { font-size: 11.5px; color: var(--ink-mute, #9a9a92); }
.att-out .att-btn.ghost { background: transparent; color: inherit;
  border: 1px solid var(--line-strong, #3a3a44); }
.att-out.done { font-size: 12.5px; }
.att-out.done b { font-weight: 650; }
.att-out.done span { color: var(--ink-dim, #c0c0b6); }
.att-out-again { margin-left: auto; font-size: 11px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--line, #26262d);
  background: transparent; color: var(--ink-mute, #8b8b85); cursor: pointer; }
.att-out-again:hover { color: var(--ink, #f4f4ee); }


/* ══════════════════════════════════════════════════════════════════
   Staff OS — alive pass (vet PR C, 2026-07-25)
   Tap-target floor · keyboard access · verification capture · stale
   paint while a fresh payload loads.
   ════════════════════════════════════════════════════════════════ */

/* ── 44px tap floor (TL-01/RS-05) ────────────────────────────────
   The glyphs stay their designed size; a pseudo-element grows the HIT
   AREA around them. Small controls (checklist dot 19px, task tick 21px,
   sheet close, bagbar dismiss, props +1) were all well under the floor —
   on a shop floor, with one thumb, that is a missed tap every time. */
.sos-root .chk .cdot,
.sos-root .task .tick,
.sos-root .scw-x,
.sos-root .prc-bagbar-x,
.sos-root .sos-prop{ position:relative; }
.sos-root .chk .cdot::after,
.sos-root .task .tick::after,
.sos-root .scw-x::after,
.sos-root .prc-bagbar-x::after,
.sos-root .sos-prop::after{
  content:''; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
  /* the hit area belongs to the row/button that owns the glyph */
  pointer-events:none;
}
/* Buttons own their own hit area, so let it take the taps. */
.sos-root .scw-x::after,
.sos-root .prc-bagbar-x::after,
.sos-root .sos-prop::after{ pointer-events:auto; }
.sos-root .scw-x,
.sos-root .prc-bagbar-x,
.sos-root .sos-prop{ min-width:32px; min-height:32px; }

/* ── keyboard access (RS-05) ─────────────────────────────────────
   Rows painted as [role=button] were mouse/touch only. A visible focus
   ring plus the Enter/Space delegate (app.js) makes them operable. */
.sos-root [role="button"]:focus-visible,
.sos-root button:focus-visible,
.sos-root .task:focus-visible,
.sos-root .chk:focus-visible{
  outline:2px solid var(--lime); outline-offset:2px; border-radius:8px;
}

/* ── verification-photo capture in the task sheet ────────────────── */
.sos-root .sos-verifynote{
  margin-top:8px; font-size:12px; line-height:1.45;
  color:var(--amber, #F2A24C); text-align:center;
}

/* ── cached paint: the last payload shows while the fresh one loads ── */
.sos-root .sos-stale{ opacity:.62; transition:opacity .25s ease; }


/* ── Fix-or-cancel + Done history (feedback quartet 2026-07-25) ──
   Wave 2: scoped under .sos-root (these leaked app-wide) and the phantom
   sos-prefixed tokens swapped for the file's real ones (--card2/--line/
   --mute), so the fallback hexes stop silently winning. */
.sos-root .sos-taskadmin { display: flex; gap: 8px; margin-top: 10px; }
.sos-root .mgrghost {
  flex: 1; background: transparent; color: var(--mute);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.sos-root .mgrghost.danger { color: var(--red); border-color: color-mix(in srgb,var(--red) 35%,transparent); }
.sos-root .bigdone.danger { background: var(--red); color: #fff; }
.sos-root .tsec.donefold { opacity: .7; }
.sos-root .tsec.donefold:active { opacity: 1; }
.sos-root .sheetin label.as-lbl { display: block; margin: 10px 0 4px; }
.sos-root .sheetin input, .sos-root .sheetin select {
  width: 100%; background: var(--card2); color: inherit;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit;
}

/* Motion pass 2 (2026-07-26): sheets rise instead of appearing — the
   pane slides up 12px with a settle. Reduced-motion kill lives in the
   file's ONE canonical reduce block above (tests pin exactly one). */
.sos-root .sheet .pane{animation:sos-pane-up .26s cubic-bezier(.2,.7,.2,1)}
@keyframes sos-pane-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════
   v3 — TASKS ALIGNED WITH FLOOR 6 + THE APP-MOTION VOCABULARY
   (build 2026-08-08, from the approved Staff OS v3 artifact).
   Three verbs, never mixed: PRINT (a card arriving = the till roll
   feeding), SLIDE (a tab switch), STAMP (EON verifying your work —
   the one showpiece). Reduced-motion kills live in the file's ONE
   canonical reduce block above. Scoped under .sos-root.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes sos-print{from{transform:translateY(14px);clip-path:inset(0 0 100% 0);opacity:0}
  60%{opacity:1}to{transform:none;clip-path:inset(0 0 -8% 0);opacity:1}}
@keyframes sos-slide{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes sos-stampin{0%{transform:scale(1.6) rotate(-10deg);opacity:0}
  60%{transform:scale(.94) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
@keyframes sos-tickpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.sos-root .view.sos-slide{animation:sos-slide .26s cubic-bezier(.2,.9,.3,1)}
.sos-root .sos-prt{animation:sos-print .38s cubic-bezier(.2,.9,.3,1) backwards}
.sos-root .task{position:relative;transition:transform .12s}
.sos-root .task:active{transform:scale(.985)}
.sos-root .task.done .tick svg{animation:sos-tickpop .3s cubic-bezier(.2,.9,.3,1)}

/* The load rail — done · due · open at a glance (floor-6 grammar). */
.sos-root .sos-loadrail{display:flex;gap:9px;align-items:center;margin:10px 16px 4px;
  font-family:var(--mono);font-size:10.5px;color:var(--mute);white-space:nowrap}
.sos-root .sos-loadrail .seg{flex:1;height:8px;border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;background:var(--card2)}
.sos-root .sos-loadrail .seg i{height:100%;display:block}
.sos-root .sos-loadrail .seg .don{background:var(--mint)}
.sos-root .sos-loadrail .seg .due{background:var(--amber)}
.sos-root .sos-loadrail .seg .opn{background:color-mix(in srgb,var(--mute) 30%,transparent)}

/* The VERIFIED stamp — lands like a rubber stamp, only on ver rows. */
.sos-root .sos-stamp{position:absolute;right:12px;top:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;color:var(--mint);
  border:1.5px solid color-mix(in srgb,var(--mint) 75%,transparent);border-radius:3px;
  padding:2px 7px;transform:rotate(-3deg);pointer-events:none;
  animation:sos-stampin .4s cubic-bezier(.2,.9,.3,1) both}
.sos-root .task .sos-stamp ~ .tp{visibility:hidden}
/* phone widths: the title wraps CLEAR of the landed stamp instead of
   running under it (caught on the 342px harness pass) */
.sos-root .task .sos-stamp ~ div .tt{margin-right:104px}

/* Subtask progress pips — the glance; the sheet keeps the list. */
.sos-root .sos-subprog{display:flex;gap:3px;margin-top:4px}
.sos-root .sos-subprog i{width:14px;height:4px;border-radius:1px;background:color-mix(in srgb,var(--mute) 28%,transparent)}
.sos-root .sos-subprog i.on{background:var(--lime)}

/* Ask EON on every card + the drawer that answers (in the sheet). */
.sos-root .sos-askrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--vio);background:none;border:1px solid color-mix(in srgb,var(--vio) 35%,transparent);
  border-radius:999px;padding:1px 8px;cursor:pointer;margin-left:6px}
.sos-root .sos-askdrawer .sos-ask-log{max-height:180px;overflow-y:auto;display:flex;
  flex-direction:column;gap:6px;margin:8px 0}
.sos-root .sos-ask-msg{font-size:12.5px;line-height:1.45;padding:7px 10px;border-radius:10px;max-width:88%}
.sos-root .sos-ask-msg.me{align-self:flex-end;background:color-mix(in srgb,var(--lime) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 25%,transparent)}
.sos-root .sos-ask-msg.eon{align-self:flex-start;background:var(--card2);border:1px solid var(--line)}
.sos-root .sos-ask-msg.sos-ask-wait{color:var(--mute);font-style:italic}
.sos-root .sos-ask-msg.sos-ask-err{color:var(--amber)}
.sos-root .sos-ask-hint{font-size:11.5px;color:var(--mute)}
.sos-root .sos-ask-row{display:flex;gap:8px;align-items:center}
.sos-root .sos-ask-row input{flex:1;background:var(--card2);color:inherit;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:12.5px;outline:none}
.sos-root .sos-ask-row input:focus{border-color:color-mix(in srgb,var(--lime) 45%,transparent)}
.sos-root .sos-ask-send{width:38px;height:38px;flex:none;border-radius:10px;cursor:pointer;
  background:color-mix(in srgb,var(--lime) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);color:var(--lime);
  display:flex;align-items:center;justify-content:center}
.sos-root .sos-ask-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* ══════════════════════════════════════════════════════════════════
   THE CREW ROOM — the ask finds your phone (relay rooms, 2026-08-13)
   Design contract: the approved artifact "THE RELAY — the rooms it
   lands in", amended into docs/house/floors/1-crew-room-staff-os.html
   in the same diff.

   "A staffer's whole relay life fits in the Asks shape the Crew Room
   already owns: what's waiting for you, what you sent, and a bell that
   finally exists on this shell."

   NOTHING HERE IS RESERVED. app.js INSERTS #sos-relay after the
   check-in slot only once the server answers armed:true; with
   EON_RELAY off none of these rules ever has a subject and the Day is
   the Day it was yesterday, element for element.

   ONE LIME ACT PER SCREEN — the house law. Acknowledge is it;
   "Open the task" is a ghost and every state is a chip. Scoped under
   .sos-root like every rule in this file.
   ════════════════════════════════════════════════════════════════ */
/* BREAK-INSIDE: AVOID IS NOT DECORATION HERE. Above 1100px the Day view
   is a TWO-COLUMN layout (.sos-root #sos-v-day.on{column-count:2}), and
   every existing Day block survives it because .sos-root .card already
   carries this. Measured 2026-08-13 without it: the second ask card
   returned getClientRects().length === 2 and an 852x287 box — one card
   torn across the column break, its clock in one column and its ladder
   in the other. A new block in this view must opt in explicitly. */
.sos-root .sos-relay__ask{background:var(--card2);border:1px solid var(--line);
  border-radius:10px;margin:8px 14px;padding:12px;break-inside:avoid}
.sos-root .sos-relay__top{display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;margin-bottom:5px}
.sos-root .sos-relay__tid{font-family:var(--mono);font-size:10.5px;color:var(--lime)}
.sos-root .sos-relay__ask b{font-size:13px;display:block;line-height:1.4;color:var(--ink)}
.sos-root .sos-relay__act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
/* 44px TAP FLOOR, MEASURED — the file's own TL-01 law. The CS desk
   shipped a 40px control the week before this and shipped it twice. */
.sos-root .sos-relay__ack{min-height:44px;padding:0 16px;border-radius:10px;
  border:1px solid var(--lime);background:var(--lime);color:#0A0A0C;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.sos-root .sos-relay__open{display:inline-flex;align-items:center;min-height:44px;
  padding:0 10px;font-size:11.5px;color:var(--mute);text-decoration:underline}
/* SETTLED, NOT ACT. "Acknowledged by Ada" is a reading, not something
   to tap — it wears the ONE settled token (--eon-ok, which --mint
   aliases), never the lime. The lime in this panel belongs to
   Acknowledge and to nothing else. */
.sos-root .sos-relay__done{font-family:var(--mono);font-size:11px;color:var(--eon-ok);
  display:inline-flex;align-items:center;min-height:44px}
.sos-root .sos-relay__empty{color:var(--mute);font-size:12.5px}
/* "You asked" — closure comes back HERE without you chasing it. */
.sos-root .sos-relay__sentwrap{padding:4px 12px}
.sos-root .sos-relay__sent{display:flex;justify-content:space-between;align-items:center;
  gap:10px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-dim)}
.sos-root .sos-relay__sent:last-child{border-bottom:none}
.sos-root .sos-relay__sent .who b{color:var(--ink);font-weight:600;display:block;font-size:12.5px}
.sos-root .sos-relay__chip{font-family:var(--mono);font-size:10.5px;white-space:nowrap;
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--mute)}
/* ONE TOKEN FOR SETTLED, TWO WEIGHTS — outlined when the ask is
   acknowledged, FILLED when it has closed and come back here. `--mint`
   is this shell's alias for the same `--eon-ok`; written as the shared
   token so the Crew Room chip, the wire chip and the clock are provably
   one colour and not three. "returned" used to be filled with the LIME,
   which put a second act-coloured element on a screen whose one act is
   the Acknowledge button beside it. */
.sos-root .sos-relay__chip--ok{color:var(--eon-ok);
  border-color:color-mix(in srgb,var(--eon-ok) 45%,transparent)}
.sos-root .sos-relay__chip--back{color:var(--eon-on-accent);background:var(--eon-ok);
  border-color:var(--eon-ok);font-weight:700}