/* V2 shell and components (V2-S1, the S0 design language). Everything is under body.v2, which static/js/ui.js sets only when
   /api/me says UI_V2 is on: off, not one rule applies and the app is the v1 shell. Colours are role tokens from tokens.css only.

   Layout follows the window's width and the pointer, never the host name:
     phone   < 600 px   bottom tab bar, at most five places, icon over label, clear of the home indicator
     tablet  600-1199   navigation rail, icon over label
     laptop  1200+      side navigation with words; the page itself never scrolls (the work area does, panels page inside)
   pointer: coarse keeps 56 px targets at every width. */

/* ================================================================ base */
body.v2{-webkit-font-smoothing:antialiased}
body.v2{min-height:100dvh}
body.v2 h1,body.v2 .mhead h1,body.v2 .shead h1{font-family:var(--font-title);font-weight:700;font-size:var(--t28);line-height:1.2;letter-spacing:-.005em;color:var(--text)}
body.v2 h2{font-family:var(--font-title);font-weight:700;font-size:var(--t22);line-height:1.25;letter-spacing:0;text-transform:none;color:var(--text);border-color:var(--line)}
body.v2 h3{font-family:var(--font);font-weight:600;font-size:var(--t20);color:var(--text)}
body.v2 a{color:var(--accent-text)}
body.v2 .muted,body.v2 small{color:var(--text-2)}
body.v2 .small{font-size:var(--t16)}
body.v2 label{font-weight:600}
body.v2 .v2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.v2 .v2-icon{flex:none;display:inline-block;vertical-align:middle;color:inherit}
body.v2 :focus-visible{outline:3px solid var(--accent-line);outline-offset:2px}
body.v2 input:focus,body.v2 textarea:focus,body.v2 select:focus{outline:3px solid var(--accent-line);outline-offset:1px;border-color:var(--accent-line)}

/* fields: 20 px text, a 3:1 edge, never white-on-white */
body.v2 input:not([type=checkbox]):not([type=radio]):not([type=range]),body.v2 textarea,body.v2 select{font:500 var(--t20)/1.35 var(--font);min-height:var(--tap);
  background:var(--bg);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r-sm);padding:10px 12px}
body.v2 ::placeholder{color:var(--text-2);opacity:1}
body.v2 input[type=checkbox],body.v2 input[type=radio]{accent-color:var(--accent);width:24px;height:24px}

/* buttons: no gradients; the accent only on the one action that matters (.btn.go / .primary), 56 px */
body.v2 .btn{min-height:var(--tap-primary);border-radius:var(--r);font:600 var(--t20)/1.15 var(--font);letter-spacing:.005em;box-shadow:none;
  background:var(--panel);color:var(--text);border:var(--b) solid var(--line-strong);border-bottom-width:var(--b)}
body.v2 .btn:hover{border-color:var(--text-2)}
body.v2 .btn.go,body.v2 .btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
body.v2 .btn.go:hover,body.v2 .btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text))}
body.v2 .btn.alt{background:transparent;color:var(--text);border-color:var(--line-strong)}
body.v2 .btn.red{background:var(--danger-fill);color:var(--on-danger);border-color:var(--danger-fill)}
body.v2 .btn:disabled{opacity:.55;cursor:not-allowed}
body.v2 .smallbtn,body.v2 .chip2,body.v2 .linkbtn{min-height:var(--tap);font-weight:600}
body.v2 .smallbtn,body.v2 .chip2{background:var(--surface);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r-sm)}
body.v2 .linkbtn{color:var(--accent-text)}

/* surfaces are layers, not boxes (PASS4 §E principle 2): bg, then surface, then panel; no edge; 12 px radius; no shadow but the one
   raised card. A stroke only means a state: selected, a valid drop, dragged, or a dashed ghost. */
body.v2 .card,body.v2 .tile,body.v2 .tool,body.v2 .job,body.v2 .morerow,body.v2 .plate,body.v2 .crow,body.v2 .prow,body.v2 .thread,body.v2 details.unit,body.v2 .addon,body.v2 .popt{
  background:var(--surface);color:var(--text);border:0;border-radius:var(--r);box-shadow:none}
body.v2 .v2-raised{box-shadow:var(--raise)}
body.v2 .job{min-height:72px}
body.v2 .job .when,body.v2 .wkrow .w{color:var(--accent-text)}
body.v2 .empty{background:transparent;border:var(--b) dashed var(--line-strong);color:var(--text-2);border-radius:var(--r)}
body.v2 .okbox{background:var(--ok-bg);color:var(--text);border:var(--b) solid var(--ok);border-radius:var(--r-sm)}
body.v2 .err{background:var(--bad-bg);color:var(--text);border:var(--b) solid var(--danger);border-radius:var(--r-sm)}
body.v2 .pill{border-radius:99px;font:600 14px/1 var(--font);letter-spacing:.02em;text-transform:none;background:var(--panel);color:var(--text);border:0}
body.v2 .pill.ok{color:var(--ok-text)} body.v2 .pill.warn{color:var(--warn-text)} body.v2 .pill.bad{color:var(--danger-text)}
/* every pop-up (GAPS #2): phone = bottom sheet <= 60% with 16 px top corners and a 2 px steel edge; 600 px and up = a 560 px card */
body.v2 .sheet{background:rgba(0,0,0,.55);animation:v2-fade 240ms var(--ease) both}
body.v2 .sheet .panel{background:var(--surface);color:var(--text);border:var(--b) solid var(--line-strong);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:var(--raise);
  max-height:88dvh;overflow:auto;animation:v2-sheet-in 240ms var(--ease) both;font:500 var(--t18)/1.5 var(--font)}
body.v2 .sheet.v2-sheet .panel{max-height:60dvh}                         /* ui.sheet: at most 60% on a phone (GAPS #2); older sheet() screens keep 88% */
body.v2 .sheet.out{animation:v2-fade 120ms var(--ease) reverse both}
body.v2 .sheet.out .panel{animation:v2-sheet-out 120ms var(--ease) both}
@media (min-width:600px){
  body.v2 .sheet{align-items:center}
  body.v2 .sheet .panel,body.v2 .sheet.v2-sheet .panel{max-width:560px;border-bottom:var(--b) solid var(--line-strong);border-radius:16px;max-height:min(88dvh,760px)}
  body.v2 .sheet.wide .panel{max-width:720px}
}
@keyframes v2-fade{from{opacity:0}}
@keyframes v2-sheet-in{from{opacity:0;transform:translateY(24px)}}
@keyframes v2-sheet-out{to{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){ @keyframes v2-sheet-in{from{opacity:0}} @keyframes v2-sheet-out{to{opacity:0}} }
/* ui.sheet: brushed header strip, Bitter 22 title, Barlow 18 body, one 56 px accent primary bottom-right and one text secondary */
body.v2 .v2-sheet .panel{padding:0;display:flex;flex-direction:column;gap:0}
.v2-sh-h{display:flex;align-items:flex-start;gap:8px;padding:16px 8px 12px 20px;position:sticky;top:0;z-index:1;border-radius:14px 14px 0 0}
.v2-sh-hd{flex:1;min-width:0}
.v2-sh-t{margin:0;padding:0;border:0;font:700 var(--t22)/1.25 var(--font-title);color:var(--text)}
.v2-sh-s{margin:4px 0 0;font:500 var(--t16)/1.4 var(--font);color:var(--text-2)}
.v2-sh-tools{display:flex;align-items:center;gap:4px}
.v2-sh-x,.v2-sh-tools button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer}
.v2-sh-x:hover,.v2-sh-tools button:hover{background:var(--panel);color:var(--text)}
.v2-sh-b{padding:16px 20px;display:grid;gap:12px;min-height:0;font:500 var(--t18)/1.5 var(--font)}
.v2-sh-b p{margin:0}
.v2-sh-f{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 16px);border-top:0;position:sticky;bottom:0;background:var(--surface)}
.v2-sh-f .v2-sh-1{min-height:56px;padding:0 24px;width:auto}
.v2-sh-2{min-height:48px;padding:0 12px;border:0;background:transparent;color:var(--accent-text);font:600 var(--t18) var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
@media (max-width:599px){ .v2-sh-f .v2-sh-1{flex:1} }
body.v2 table th{color:var(--text-2);border-color:var(--line)} body.v2 table td{border-color:var(--line)}
body.v2 hr{border-color:var(--line)}
body.v2 .hero{border:0;border-radius:var(--r);box-shadow:none}
body.v2 .hero h1,body.v2 .hero p,body.v2 .hero .cap{color:var(--s0-text)}   /* the hero band is a dark photo in both themes */

/* the v1 fills that put white text on the old navy or red: in V2 they take the accent with its own readable text, or a neutral panel */
body.v2 .seg button[aria-selected=true],body.v2 .seg2 button[aria-selected=true],body.v2 .seg button[aria-checked=true],body.v2 .seg2 button[aria-checked=true],
body.v2 .tile[aria-checked=true],body.v2 .panes button[aria-selected=true],body.v2 .htabs button[aria-selected=true],body.v2 .svf .chip.on,
body.v2 .calc-groups .chip2[aria-selected=true],body.v2 .wfpick .chip2[aria-selected=true],body.v2 .popt.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:none}
body.v2 .seg button,body.v2 .seg2 button,body.v2 .panes button{color:var(--text);border-color:var(--line-strong);background:var(--surface)}
body.v2 .panes{background:var(--surface);border:0}
body.v2 .bub.me,body.v2 .bubble .msg.me{background:var(--panel);color:var(--text);border:0}
body.v2 .bub{background:var(--surface);color:var(--text)}
body.v2 .thread .un,body.v2 .tool .badge,body.v2 .morerow .n,body.v2 .tabbar .n,body.v2 .rail .rb .n,body.v2 .bubble .fab .n,body.v2 details.fold>summary .cnt.hot,
body.v2 .catrow .plus,body.v2 .wfstep .n,body.v2 .sugg .srow.top .srank,body.v2 .bid .cal .cw,body.v2 .typer .ttag.eq,body.v2 .track .s.on .d,body.v2 .thread.grp .gav{
  background:var(--accent);color:var(--on-accent);border-color:var(--surface)}
body.v2 .mic,body.v2 .search .smic,body.v2 .fmic,body.v2 .wk .wmic,body.v2 .wk .wcam,body.v2 .bubble .in .go,body.v2 .clockbig{background:var(--accent);color:var(--on-accent)}
body.v2 #who .wav,body.v2 .av{background:var(--panel);color:var(--text);border:0}
body.v2 .bubble .starters .chip2{background:var(--surface)}
body.v2 .story .lesson{background:var(--panel);color:var(--text)}
body.v2 .morerow .mi,body.v2 .qref .qi{background:var(--panel);color:var(--text)}
body.v2 .dock{background:var(--surface);border-top:0}
body.v2 #offline,body.v2 #newver,body.v2 .ftip,body.v2 .toast{background:var(--panel);color:var(--text);border:var(--b) solid var(--line-strong)}
body.v2 #newver button,body.v2 .toast button{color:var(--accent-text)}
body.v2 details.fold>summary .cnt{background:var(--panel);color:var(--text)}
body.v2 .hbfig,body.v2 .estpane iframe,body.v2 .estsheet iframe,body.v2 .lb .stage .svgw,body.v2 .hbcard .pv,body.v2 .wk .wqr{background:#fff}   /* documents and diagrams stay on white paper */

/* the compact right-hand box on the dashboard is gone in V2: one column; approvals and requests have their own places */
body.v2 .mgr{grid-template-columns:minmax(0,1fr)!important}
body.v2 .mgr-side{display:none!important}

/* the job card is a container component: it lays itself out by its own width */
body.v2 .list{container-type:inline-size;container-name:list}
@container list (max-width:420px){ body.v2 .job{flex-wrap:wrap} body.v2 .job .when{min-width:0;order:-1;flex:1 1 100%} }
@container list (min-width:720px){ body.v2 .job{padding:16px 20px} body.v2 .job .t{font-size:var(--t20)} }

/* ================================================================ header: brushed metal (3%), and the business unit's tone */
body.v2 header{background-color:var(--surface);color:var(--text);border-bottom:0;box-shadow:none;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 1px,transparent 1px 7px)}
body.v2[data-theme=light] header{background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px)}
body.v2[data-tone] header{background-color:color-mix(in srgb,var(--accent) 12%,var(--surface));border-bottom:4px solid var(--accent-line)}
body.v2 header .hbtn,body.v2 #who{background:var(--panel);color:var(--text);border:0}
body.v2[data-theme=dark] header .logo{filter:invert(1) hue-rotate(180deg) brightness(1.15)}

/* ================================================================ navigation */
body.v2 .tabbar,body.v2 .rail{background:var(--surface);color:var(--text-2)}
body.v2 .tabbar button,body.v2 .rail .rb{color:var(--text-2);background:transparent;font-family:var(--font);font-weight:600}
body.v2 .tabbar button[aria-selected=true],body.v2 .rail .rb[aria-selected=true]{color:var(--text)}

@media (max-width:599px){
  body.v2.in{display:block}
  body.v2.in .rail{display:none!important}
  body.v2.in:not(.docked) .tabbar{display:grid}
  body.v2 .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:7;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
    border-top:0;padding:4px 4px env(safe-area-inset-bottom,0px);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.v2 .tabbar button{min-height:var(--tap-primary);padding:4px 0;gap:2px;font-size:14px}
  body.v2 .tabbar .ti{width:56px;height:30px;border-radius:99px;display:grid;place-items:center}
  body.v2 .tabbar button[aria-selected=true] .ti{background:var(--accent);color:var(--on-accent)}
  body.v2.in:not(.docked) main{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar-h) + 96px)}
  body.v2.in:not(.docked) .bubble{bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar-h) + 16px)}
  body.v2 main{padding:16px}
}
@media (min-width:600px){
  body.v2.in{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  body.v2.in header{grid-column:1/-1}
  body.v2.in .tabbar{display:none!important}
  body.v2.in .rail{display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--hdr-h);height:calc(100dvh - var(--hdr-h));overflow:auto;
    border-right:0;padding:12px 8px;box-shadow:none}
  body.v2.in main{grid-column:2;width:100%;max-width:none;padding:24px 28px calc(env(safe-area-inset-bottom,0px) + 104px);align-content:start}
  body.v2.in .dock{left:var(--rail-w)}
  body.v2.backonly .dock{display:none!important}
  body.v2.backonly .hback:not([hidden]){display:inline-flex}
  body.v2 .bubble{right:24px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
  body.v2 .rail .rb{border-radius:var(--r)}
  body.v2 .rail .rb:hover{background:var(--panel)}
  body.v2 .rail .rb[aria-selected=true]{background:var(--panel);box-shadow:inset 4px 0 0 var(--accent-line)}
  body.v2 .rail .rb[aria-selected=true] .v2-icon{color:var(--accent-line)}
  body.v2 .rail .rme{color:var(--text-2);border-color:var(--line)}
  body.v2 .rail .rme b,body.v2 .rail .rme .muted{color:var(--text)}
}
@media (min-width:600px) and (max-width:1199px){
  body.v2 .rail .rb{position:relative;flex-direction:column;justify-content:center;gap:4px;min-height:72px;padding:8px 2px;font-size:14px;line-height:1.15;text-align:center}
  body.v2 .rail .rb .v2-icon,body.v2 .rail .rb svg{width:26px;height:26px;padding:0;background:none}
  body.v2 .rail .rb .n{position:absolute;top:4px;right:10px;margin:0}
  body.v2 #rail .rb2,body.v2 #rail .rb2h,body.v2 .rail .rme{display:none}
  body.v2 #rail .rb-more{display:flex}
  body.v2 .rail .rb[aria-selected=true]{box-shadow:inset 0 -3px 0 var(--accent-line)}
}
@media (min-width:1200px){
  body.v2.in{grid-template-columns:var(--side-w) minmax(0,1fr);height:100dvh;overflow:hidden}
  body.v2.in .rail{position:relative;top:auto;height:auto;min-height:0;padding:16px 12px}
  body.v2.in main{position:relative;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain;padding:24px 32px 104px}   /* relative: pop-overs stay inside */
  body.v2.in .dock{left:var(--side-w)}
  body.v2 .rail .rb{flex-direction:row;min-height:var(--tap);padding:0 14px;font-size:var(--t18);gap:12px}
  body.v2 .rail .rb .v2-icon{width:22px;height:22px}
  body.v2 .rail h6{color:var(--text-2);font:600 14px var(--font);letter-spacing:.06em;text-transform:none}
  body.v2 #rail .rb-more{display:none}
  body.v2 .panes{top:0}
}
@media (pointer:coarse){ body.v2 .rail .rb,body.v2 .smallbtn,body.v2 .linkbtn,body.v2 .chip2{min-height:var(--tap-primary)} }

/* ================================================================ motion helpers (fx.js animates; these are the shapes) */
.fx-ring{position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);flex:none}
.fx-ring svg{position:absolute;inset:0}
.fx-ring-n{position:relative;font:600 var(--t16)/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text)}
.fx-check{display:inline-grid;place-items:center;color:var(--ok)}
.fx-pulse{position:relative}
.fx-pulse-ring{position:absolute;inset:-10px;border-radius:50%;background:var(--accent);pointer-events:none;opacity:.2}
.fx-pulse-still::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent-line);opacity:.5;pointer-events:none}
.fx-radar{position:absolute;inset:-50%;z-index:450;pointer-events:none;opacity:.06;background:conic-gradient(from 0deg,var(--accent) 0deg,transparent 60deg,transparent 360deg)}
.fx-skel{display:grid;gap:12px;width:100%}
.fx-skel i{display:block;height:18px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 8%,transparent) 0 40%,color-mix(in srgb,var(--text) 14%,transparent) 50%,color-mix(in srgb,var(--text) 8%,transparent) 60% 100%);background-size:300% 100%;animation:fx-shimmer 1.2s linear infinite}
@keyframes fx-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .fx-skel i{animation:none} }
.fx-listen{box-shadow:0 0 0 calc(4px + var(--level,0) * 14px) color-mix(in srgb,var(--accent) 35%,transparent)!important}
.fx-underline{position:fixed;left:0;top:0;z-index:80;height:4px;border-radius:2px;background:var(--accent-line);pointer-events:none}
.fx-fly{position:fixed;z-index:85;padding:8px 14px;border-radius:99px;background:var(--accent);color:var(--on-accent);font:600 var(--t16) var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:var(--raise);transform-origin:center}

/* ================================================================ pager: one screen per step */
.v2-pager{display:grid;gap:16px;max-width:760px;margin:0 auto}
.v2-pager .phead{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.v2-pager .phead .pof,.v2-pager .phead .ptitle,.v2-pager .phead .pdots{grid-column:1}
.v2-pager .phead .fx-ring{grid-column:2;grid-row:1/span 3}
.v2-pager .pof{font:600 var(--t18)/1.2 var(--font);color:var(--accent-text)}
.v2-pager .ptitle{margin:0;padding:0;border:0;font:700 var(--t28)/1.2 var(--font-title);text-transform:none;letter-spacing:0;color:var(--text)}
.v2-pager .ptitle::after,.v2-pager .ptitle::before{content:none}
.v2-pager .pdots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.v2-pager .pdots li{flex:1;height:8px;border-radius:99px;background:var(--line-strong);border:0}
.v2-pager .pdots li.done{background:var(--text-2);border-color:var(--text-2)}
.v2-pager .pdots li.now{background:var(--accent);border-color:var(--accent)}
.v2-pager .pstep{display:grid;gap:16px;background:var(--surface);border:0;border-radius:var(--r);padding:24px;touch-action:pan-y}
.v2-pager .pstep label{display:grid;gap:8px;font-weight:600;font-size:var(--t18)}
.v2-pager .pstep textarea{min-height:144px}
.v2-pager .perr{color:var(--danger-text);font-weight:600}
.v2-pager .pnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.v2-pager .pnav .btn{width:100%;line-height:1.15;padding:8px 16px}
.v2-pager .pnav .pback[hidden]+.pnext{grid-column:1/-1}
.v2-pager .pstatus{min-height:24px;font-size:var(--t16);color:var(--text-2)}
@media (max-width:599px){ .v2-pager .pstep{padding:16px} .v2-pager .phead .fx-ring{display:none} }
@media (min-width:1200px){ .v2-pager .pnav{display:flex;justify-content:flex-end} .v2-pager .pnav .btn{width:auto;min-width:240px} }   /* primary bottom-right on a laptop */
.v2-choices{display:grid;gap:8px}
.v2-choices button{min-height:var(--tap-primary);text-align:left;padding:0 16px;font:600 var(--t20) var(--font);border:var(--b) solid var(--line-strong);border-radius:var(--r);background:var(--bg);color:var(--text);cursor:pointer}
.v2-choices button[aria-checked=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.v2-review{display:grid;gap:8px;margin:0}
.v2-review dt{font-weight:600;color:var(--text-2);font-size:var(--t16)}
.v2-review dd{margin:0 0 8px;font-size:var(--t20)}

/* ================================================================ stat tiles: one number, one caption, one sparkline; 4 / 2 / 1 a row */
.v2-tiles{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1199px){ .v2-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:599px){ .v2-tiles{grid-template-columns:minmax(0,1fr)} }
.v2-tile{display:grid;gap:8px;align-content:start;padding:16px 20px;background:var(--surface);border:0;border-radius:var(--r);color:var(--text);min-width:0}
.v2-tile .cap{margin:0;font:var(--label-weight) var(--label-size)/1.3 var(--font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-2)}
.v2-tile .num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.v2-tile .num .v{font:600 var(--t36)/1 var(--font-title);font-variant-numeric:tabular-nums;letter-spacing:.005em;color:var(--text)}
.v2-tile .num .per{font:600 var(--t16) var(--font);color:var(--text-2)}
.v2-tile .foot{display:flex;align-items:center;gap:12px;min-height:32px}
.v2-tile .note{font-size:var(--t16);color:var(--text-2)}
.v2-tile.tone-ok{box-shadow:inset 4px 0 0 var(--ok)} .v2-tile.tone-warn{box-shadow:inset 4px 0 0 var(--warn)} .v2-tile.tone-danger{box-shadow:inset 4px 0 0 var(--danger)}
.v2-tile.money .num .v{color:var(--brass-text)}

/* ================================================================ charts */
.v2-chart{position:relative;display:grid;gap:8px;min-width:0}
.v2-chart .cap,.v2-cap{margin:0;font:600 var(--t18)/1.35 var(--font);color:var(--text)}
.v2-chart .head{display:flex;align-items:baseline;gap:8px}
.v2-chart .head .hv{font:700 var(--t36)/1 var(--font-cond);font-variant-numeric:tabular-nums;color:var(--text)}
.v2-chart .head span{color:var(--text-2);font-weight:600}
.v2-chart .plot{min-width:0}
.v2-chart.fill{display:flex;flex-direction:column;height:100%}
.v2-chart.fill .plot{flex:1;min-height:120px}
.v2-tip{position:absolute;z-index:5;pointer-events:none;min-width:180px;padding:10px 14px;background:var(--panel);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r-sm);font:500 var(--t18)/1.4 var(--font);box-shadow:var(--raise)}
.v2-tip b{display:block;font-weight:700}
.v2-tip div{display:flex;align-items:center;gap:8px}
.v2-tip div span{margin-left:auto;padding-left:12px;font-variant-numeric:tabular-nums;font-weight:600}
.v2-tip i{width:12px;height:12px;border-radius:3px;flex:none}

/* ================================================================ sync chip and data age */
.v2-sync{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);min-width:var(--tap);padding:0 12px;border-radius:99px;border:var(--b) solid var(--line-strong);background:var(--surface);cursor:pointer}
.v2-sync .d,.v2-syncrows .d{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--line-strong)}
.v2-sync .d.ok,.v2-syncrows .d.ok{background:var(--ok)} .v2-sync .d.behind,.v2-syncrows .d.behind{background:var(--warn)}
.v2-sync .d.differs,.v2-syncrows .d.differs{background:var(--danger)} .v2-sync .d.na,.v2-syncrows .d.na{background:transparent;border:2px solid var(--line-strong)}
.v2-syncrows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v2-syncrows li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:12px;min-height:var(--tap);padding:0 12px;border-radius:var(--r-sm);background:var(--bg);color:var(--text)}
.v2-syncrows li span{color:var(--text-2);font-weight:600}
.v2-syncline{margin:0;color:var(--text)}
.v2-age{font:600 var(--t13) var(--font);color:var(--text-2);font-variant-numeric:tabular-nums}

/* ================================================================ empty states: line-art, one sentence, one button */
.v2-empty{display:grid;justify-items:center;gap:12px;padding:32px 16px;text-align:center;color:var(--text-2)}
.v2-empty .v2-art{color:var(--line-strong)}
.v2-empty p{margin:0;max-width:34ch;font-size:var(--t18);color:var(--text)}
.v2-empty .btn{width:auto;padding:0 24px}

/* ================================================================ panels (laptop): fixed height, tabs inside, the body pages */
.v2-panels{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.v2-panel{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:0;border-radius:var(--r)}
.v2-panel>h2{margin:0;padding:16px 16px 8px;font-size:var(--t22)}
.v2-panel .ptabs{display:flex;gap:4px;padding:0 12px;border-bottom:0;overflow-x:auto}
.v2-panel .ptabs button{min-height:var(--tap);padding:0 14px;border:0;border-bottom:3px solid transparent;background:none;font:600 var(--t18) var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap}
.v2-panel .ptabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent-line)}
.v2-panel .pbody{flex:1;min-height:0;overflow:auto;padding:16px}
@media (min-width:1200px){ .v2-panels.fill{height:calc(100dvh - var(--hdr-h) - 48px - var(--panels-top,96px))} .v2-panels.fill .v2-panel{height:100%} }

/* ================================================================ snackbar: bottom, one line, one action, never stacked */
.v2-snack{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:60;transform:translate(-50%,0);
  display:flex;align-items:center;gap:16px;max-width:min(560px,calc(100vw - 32px));min-height:var(--tap);padding:4px 8px 4px 16px;
  background:var(--panel);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r);box-shadow:var(--raise);font:500 var(--t18) var(--font)}
.v2-snack span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-snack button{flex:none;min-height:var(--tap);padding:0 12px;border:0;background:transparent;color:var(--accent-text);font:700 var(--t18) var(--font);cursor:pointer}
.v2-snack.top{top:calc(env(safe-area-inset-top,0px) + var(--hdr-h) + 8px);bottom:auto}
@media (max-width:599px){ body.v2.in:not(.docked) .v2-snack:not(.top){bottom:calc(env(safe-area-inset-bottom,0px) + var(--tabbar-h) + 12px)} }
body.v2.docked .v2-snack:not(.top){bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}

/* ================================================================ pickers: Tom Select in the tokens, 48 px rows */
body.v2 .ts-wrapper{min-height:var(--tap);font-size:var(--t20)}
body.v2 select.ts-hidden-accessible{position:fixed!important;top:0;left:0}          /* the hidden native select never adds to the page height */
body.v2 .ts-wrapper .ts-control{min-height:var(--tap);padding:8px 40px 8px 12px;border:var(--b) solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:500 var(--t20) var(--font);box-shadow:none}
body.v2 .ts-wrapper .ts-control input{font:500 var(--t20) var(--font);min-height:0;border:0;padding:0;background:transparent;color:var(--text)}
body.v2 .ts-wrapper.single .ts-control .item{border:0;background:none;padding:0;margin:0;color:var(--text);display:flex;align-items:center;gap:10px}
body.v2 .ts-wrapper.single.has-items:not(.input-active) .ts-control input{position:absolute;opacity:0;width:4px}   /* a chosen item, not a search prompt under it */
body.v2 .ts-wrapper.focus .ts-control{outline:3px solid var(--accent-line);outline-offset:1px}
body.v2 .ts-wrapper.dropdown-active{position:relative;z-index:45}
body.v2 .ts-dropdown{border:var(--b) solid var(--line-strong);border-radius:var(--r-sm);margin-top:4px;font:500 var(--t18) var(--font);color:var(--text);background:var(--surface);z-index:45;box-shadow:var(--raise)}
body.v2 .ts-dropdown .ts-dropdown-content{max-height:calc(var(--tap) * 7 + 40px)}
body.v2 .ts-dropdown .option,body.v2 .ts-dropdown .create,body.v2 .ts-dropdown .no-results{min-height:var(--tap);display:flex;align-items:center;gap:12px;padding:0 12px;color:var(--text)}
body.v2 .ts-dropdown .active{background:var(--panel);color:var(--text);box-shadow:inset 3px 0 0 var(--accent-line)}
body.v2 .ts-dropdown .selected{font-weight:700}
body.v2 .ts-dropdown .optgroup-header{padding:10px 12px 4px;font:600 var(--t16) var(--font);letter-spacing:0;color:var(--text-2);background:var(--surface)}
body.v2 .ts-dropdown .optgroup+.optgroup{border-top:1px solid var(--line)}
body.v2 .ts-dropdown .v2-ol{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.v2 .ts-dropdown .v2-oi{color:var(--text-2)}
body.v2 .ts-dropdown .v2-star{flex:none;width:44px;height:44px;border:0;background:none;color:var(--line-strong);font-size:22px;line-height:1;cursor:pointer;border-radius:50%}
body.v2 .ts-dropdown .v2-star[aria-pressed=true]{color:var(--accent-line)}

/* ================================================================ the assistant bubble: a quiet accent ring; tap is the only way in */
body.v2 .bubble .fab{background:var(--surface);color:var(--accent-line);border:var(--b) solid var(--accent-line);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent)}
body.v2 .bubble .chat{background:var(--surface);color:var(--text);border:var(--b) solid var(--line);border-top:4px solid var(--accent-line);box-shadow:var(--raise)}
body.v2 .bubble .chat .hd,body.v2 .bubble .chat .in{background:var(--surface);border-color:var(--line);color:var(--text)}
body.v2 .bubble .msg.bot,body.v2 .bubble .msg.event{background:var(--panel);color:var(--text)}
body.v2 .bubble .pop{background:var(--surface);color:var(--text);border:var(--b) solid var(--line)}
.v2-speak{display:flex;align-items:center;gap:8px;min-height:var(--tap);margin:0 12px;font-size:var(--t16);font-weight:600}

/* ================================================================ help sheet, More extras */
.v2-help textarea{min-height:120px;width:100%}
.v2-help .ctx{font-size:var(--t16);color:var(--text-2)}
body.v2 a.morerow{text-decoration:none}

/* ================================================================ large print (the Me sheet switch) keeps working */
body.v2.bigtype{font-size:var(--t20)}
body.v2.bigtype h1,body.v2.bigtype .mhead h1,body.v2.bigtype .shead h1,body.v2.bigtype .v2-pager .ptitle{font-size:var(--t36)}

/* ================================================================ laptop side nav: 232 px open, 72 px collapsed (V2-00-DETAIL-REREAD §3) */
body.v2 .rail .rb-collapse{display:none}
@media (min-width:1200px){
  body.v2 .rail .rb-collapse{display:flex;margin-top:auto;color:var(--text-2)}
  body.v2.navmini{--side-w:var(--side-mini)}
  body.v2.navmini .rail{padding:16px 8px}
  body.v2.navmini .rail .rb{font-size:0;justify-content:center;padding:0;gap:0}
  body.v2.navmini .rail .rb .n{font-size:13px}
  body.v2.navmini .rail h6,body.v2.navmini .rail .rme{display:none}
  body.v2.navmini .rail .rb-collapse .v2-icon{transform:scaleX(-1)}
}

/* ================================================================ the modular home: ui.grid (GridStack, 12 columns) */
.v2-grid{display:flex;flex-direction:column;gap:8px;min-height:0}
.v2-gridbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:var(--tap)}
.v2-gridbar .v2-sp{flex:1}
.v2-seg{display:inline-flex;padding:4px;gap:4px;border-radius:99px;background:var(--panel);border:0}
.v2-seg button{min-height:40px;padding:0 16px;border:0;border-radius:99px;background:transparent;color:var(--text);font:600 var(--t16) var(--font);cursor:pointer}
.v2-seg button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
.v2-hidden{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.v2-gbtn{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--surface);color:var(--text);font:600 var(--t16) var(--font);cursor:pointer}
.v2-gbtn:disabled{opacity:.5;cursor:default}
.v2-gbtn .v2-icon{width:20px;height:20px}
.v2-grid .grid-stack{min-height:0}
.v2-grid .grid-stack-item-content.v2-gpanel,.v2-gpanel{display:flex;flex-direction:column;min-height:0;background:var(--surface);color:var(--text);border:0;border-radius:var(--r);overflow:hidden;inset:0;container-type:inline-size}
/* the one panel header (PASS4 §E principle 7): grip, title as the small-caps label, count chip, then age or sync on the right, then ⋯ */
.v2-ph{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:4px 4px 0;border:0;flex:none}
body.v2 header.v2-ph,body.v2 header.v2-dock-h{background:transparent;background-image:none;border-bottom:0;box-shadow:none}   /* not the app header's brushed strip or tone edge */
.v2-ph-t{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}      /* the title and its count chip; screens may add to it */
body.v2 .v2-ph-title,.v2-ph-title{margin:0;min-width:0;flex:0 1 auto;font:600 var(--t18)/1.2 var(--font-title);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-ph-count{flex:none;min-width:28px;height:24px;padding:0 8px;border-radius:99px;background:var(--panel);color:var(--text);font:700 var(--t13)/24px var(--font);text-align:center;font-variant-numeric:tabular-nums}
.v2-ph-count[hidden]{display:none}
.v2-ph-count.hot{background:var(--accent);color:var(--on-accent)}
.v2-ph-count.danger{background:var(--danger-fill);color:var(--on-danger)} .v2-ph-count.warn{background:var(--warn-fill);color:var(--on-warn)}
.v2-ph-sp{flex:1;min-width:0}
.v2-ph-grip,.v2-ph-menu{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:grab}
.v2-ph-menu{cursor:pointer}
.v2-ph-grip:hover,.v2-ph-menu:hover{background:var(--panel);color:var(--text)}
.v2-gpanel .v2-ph-grip{opacity:.55}
.v2-gpanel:hover .v2-ph-grip,.v2-ph-grip:focus-visible{opacity:1}
.v2-ph-age{flex:0 1 auto;min-width:0;font:600 var(--t13)/1.2 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-ph-age:empty,.v2-ph.has-sync .v2-ph-age{display:none}
@container (max-width:340px){ .v2-ph-age{display:none} }
.v2-ph-sync:empty{display:none}
.v2-ph-sync .v2-sync{min-height:36px;min-width:0;padding:0 10px;border:0;background:var(--panel)}
.v2-pb{flex:1;min-height:0;overflow:hidden;padding:8px 16px 12px;position:relative}
.v2-pb:not(.v2-tiles){display:flex;flex-direction:column}        /* a panel's content can fill it (flex: 1), as charts and graphs do */
.v2-pb:focus-visible{outline-offset:-3px}
.v2-grid .grid-stack>.grid-stack-item>.ui-resizable-se{width:20px;height:20px;right:6px;bottom:6px;background:none;transform:none;
  border-right:3px solid var(--line-strong);border-bottom:3px solid var(--line-strong);border-radius:0 0 6px 0;opacity:.7}
.v2-grid .grid-stack-placeholder>.placeholder-content{border:2px dashed var(--accent-line)!important;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent)}
.v2-grid.stacked .grid-stack{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;height:auto!important}
.v2-grid.stacked .grid-stack::-webkit-scrollbar{display:none}
.v2-gpage{flex:0 0 100%;scroll-snap-align:start;display:grid;gap:12px;grid-template-columns:repeat(var(--gp-cols,1),minmax(0,1fr));grid-auto-rows:calc((var(--gp-h,420px) - (var(--gp-rows,1) - 1) * 12px) / var(--gp-rows,1));height:var(--gp-h,420px);align-content:start}
.v2-grid.stacked .grid-stack-item{position:relative;height:auto;min-height:0}
.v2-grid.stacked .grid-stack-item-content{position:absolute;inset:0}
.v2-gpnav{display:flex;align-items:center;gap:12px;justify-content:center}
.v2-gpof{min-width:64px;text-align:center;color:var(--text-2);font:600 var(--t16) var(--font);font-variant-numeric:tabular-nums}
.v2-gpdots{display:flex;gap:6px}
.v2-gpdots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.v2-gpdots i.on{background:var(--accent)}
.v2-gtool{display:inline-flex;align-items:center;gap:8px}
.v2-grid.stacked .v2-ph-grip{display:none}
/* full screen (GSAP Flip, 320 ms) */
.v2-gfull{position:fixed;inset:12px;z-index:70;display:flex}
.v2-gfull::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:-1}
.v2-gfull .v2-gpanel{flex:1;box-shadow:var(--raise)}
.v2-gfull-ph{width:100%;height:100%;border:2px dashed var(--line-strong);border-radius:var(--r)}
/* the panel menu */
.v2-menu{position:fixed;z-index:75;min-width:240px;padding:6px;background:var(--surface);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r);box-shadow:var(--raise);display:grid}
.v2-menu button{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font:600 var(--t18) var(--font);text-align:left;cursor:pointer}
.v2-menu button:hover,.v2-menu button:focus-visible{background:var(--panel)}
/* paged lists inside a panel */
.v2-plist{display:flex;flex-direction:column;height:100%;min-height:0}
.v2-plist-rows{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.v2-plist-rows li{min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:0 4px;border:0;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--line) 70%,transparent);color:var(--text)}
.v2-plist-rows li:last-child{box-shadow:none}
.v2-plist-rows li .r{margin-left:auto;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums}
.v2-plist-nav{display:flex;align-items:center;gap:8px;padding-top:8px}
.v2-plist-nav .v2-plist-of{flex:1;text-align:center;color:var(--text-2);font:600 var(--t16) var(--font);font-variant-numeric:tabular-nums}

/* ================================================================ the drag affordance standard (static/screens/lib/drag.js) */
.v2-lifted{scale:1.03;box-shadow:var(--raise)!important;z-index:20;transition:scale var(--d-press) var(--ease),box-shadow var(--d-press) var(--ease)}
.v2-drop-ok{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 30%,transparent),0 0 0 2px var(--accent-line)!important;transition:box-shadow var(--d-press) var(--ease)}
.v2-drop-over{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 50%,transparent),0 0 0 3px var(--accent-line)!important}
.v2-drop-no{opacity:.4!important;transition:opacity var(--d-press) var(--ease)}   /* !important: the v1 entrance animation (main>*) would hold it at 1 */
.v2-ghost{opacity:.35;outline:2px dashed var(--accent-line);outline-offset:-2px}
.v2-chosen{box-shadow:var(--raise)}
.v2-drop-check{position:absolute;right:8px;top:8px;z-index:5;pointer-events:none}
.v2-draggable{cursor:grab;touch-action:pan-y}
.v2-draggable .v2-grip{color:var(--text-2);opacity:.55}
.v2-draggable:hover .v2-grip{opacity:1}
@media (prefers-reduced-motion:reduce){ .v2-lifted{scale:none} }

/* ================================================================ first-run tour (Driver.js) in the tokens */
.v2-tour.driver-popover{background:var(--surface);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:var(--r);box-shadow:var(--raise);max-width:380px;padding:20px;font-family:var(--font)}
.v2-tour.driver-popover .driver-popover-title{font:700 var(--t22)/1.25 var(--font-title);color:var(--text)}
.v2-tour.driver-popover .driver-popover-description{font:500 var(--t18)/1.5 var(--font);color:var(--text)}
.v2-tour.driver-popover .driver-popover-progress-text{font:600 var(--t16) var(--font);color:var(--text-2)}
.v2-tour.driver-popover .driver-popover-footer button{min-height:var(--tap);padding:0 18px;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--panel);color:var(--text);font:600 var(--t18) var(--font);text-shadow:none}
.v2-tour.driver-popover .driver-popover-footer .driver-popover-next-btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.v2-tour.driver-popover .driver-popover-close-btn{width:44px;height:44px;color:var(--text-2);font-size:28px}
.v2-tour.driver-popover .driver-popover-arrow{border-color:var(--surface)}
/* stat tiles inside a grid panel: flat, divided by hairlines, as many across as fit */
.v2-pb.v2-tiles,.v2-pb>.v2-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;align-content:start}
.v2-pb.v2-tiles,.v2-pb>.v2-tiles{gap:8px}
.v2-pb.v2-tiles .v2-tile,.v2-pb>.v2-tiles .v2-tile{background:var(--panel);border:0;border-radius:var(--r-sm);padding:10px 14px;gap:6px}

/* ui.mic: the voice ring, "What is it?", the standing sub-line, a field and a camera (GAPS #1) */
@media (min-width:600px){ body.v2 .sheet.v2-micsheet{align-items:end;padding-bottom:24px} body.v2 .sheet.v2-micsheet .panel{max-width:480px} }
.v2-micsheet .v2-sh-s{font:600 var(--t16)/1.4 var(--font);color:var(--text-2)}
.v2-micring{justify-self:center;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:3px solid var(--accent-line);background:var(--panel);color:var(--accent-text);cursor:pointer;position:relative}
.v2-micring.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.v2-micring:disabled{opacity:.5;cursor:default}
.v2-heard{margin:0;font:600 var(--t20)/1.4 var(--font);color:var(--text);text-align:center}
.v2-heardbtns{display:flex;gap:12px;justify-content:center}
.v2-heardbtns .btn{width:auto;min-height:48px;padding:0 20px}
.v2-micin{display:flex;gap:8px;align-items:stretch}
.v2-micin textarea{flex:1;min-height:56px;font-size:var(--t20)}
.v2-miccam{flex:none;display:grid;place-items:center;width:56px;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer}
.v2-micphoto{display:flex;gap:12px;align-items:center;color:var(--text-2);font:600 var(--t16) var(--font)}
.v2-micphoto img,.v2-askphoto{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.v2-micuse{display:flex;justify-content:flex-end}
.v2-micuse .btn{width:auto;min-height:56px;padding:0 24px}

/* speak mode (GAPS #3): a 40 px toggle in the assistant header; the Read bar under answers */
.v2-speaktog{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--surface);color:var(--text-2);cursor:pointer}
.v2-speaktog[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.v2-read{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:8px;padding:0 14px;border-radius:99px;border:var(--b) solid var(--line-strong);background:var(--panel);color:var(--text);font:600 var(--t16) var(--font);cursor:pointer}
.v2-read .v2-icon{width:16px;height:16px}
.v2-read.on{border-color:var(--accent-line)}
.v2-read.on .v2-icon{color:var(--accent-text);animation:v2-wave 900ms ease-in-out infinite alternate}
@keyframes v2-wave{to{transform:scaleY(.55)}}
@media (prefers-reduced-motion:reduce){ .v2-read.on .v2-icon{animation:none} }

/* the first paint (GAPS #4): index.html ships this skeleton inside #view, so a skeleton shows before any script or data */
.v2-boot{max-width:720px;margin:24px auto;padding:0 16px}
.v2-boot i{height:20px;background:linear-gradient(90deg,rgba(128,128,128,.16) 0 40%,rgba(128,128,128,.28) 50%,rgba(128,128,128,.16) 60% 100%);background-size:300% 100%}   /* no theme yet: neutral greys */
.v2-boot i:first-child{height:32px;width:60%}
.v2-boot i:nth-child(n+2){height:72px}

/* ================================================================ ui.map (lib/map.js): Google Maps + deck.gl, or the plain map */
.v2-map{display:grid;gap:8px;min-width:0}
.v2-map .cap{margin:0;font:600 var(--t18)/1.35 var(--font);color:var(--text)}
.v2-mapbox{position:relative;overflow:hidden;border-radius:var(--r);border:0;background:var(--panel);min-height:200px}
.v2-mapbox.fill{height:100%}
.v2-mapbox.is-plain{background-color:var(--panel);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px}
.v2-gmap{position:absolute;inset:0}
.v2-plain,.v2-plain-svg,.v2-plain-base,.v2-plain-arcs,.v2-plain-pins{position:absolute;inset:0}
.v2-plain-arcs{pointer-events:none}
.v2-zone{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--zone) 20%,transparent);border:2px solid color-mix(in srgb,var(--zone) 80%,transparent);cursor:pointer}
.v2-zone.live{animation:v2-zone 2.4s ease-in-out infinite}
@keyframes v2-zone{50%{transform:scale(1.15)}}
.v2-pin{position:absolute;width:28px;height:28px;margin:0;padding:0;border:0;background:none;transform:translate(-50%,-50%);cursor:pointer;display:grid;place-items:center}
.v2-gmap .v2-pin{position:relative;transform:translateY(50%)}
.v2-pin i{width:16px;height:16px;background:var(--pin);border:2px solid var(--bg);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 0 2px var(--pin)}
.v2-pin.has-text i{width:26px;height:26px}
.v2-pin b{position:absolute;font:700 16px var(--font);color:var(--on-accent)}
.v2-pin.ring-emergency i{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--danger)}
.v2-pin.ring-today i{box-shadow:0 0 0 2px var(--bg),0 0 0 5px var(--warn)}
.v2-pin.sel i,.v2-pin.v2-drop-over i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 0 0 12px color-mix(in srgb,var(--accent) 30%,transparent)}
.v2-pin.v2-drop-ok{box-shadow:none!important}
.v2-pin.v2-drop-ok i{box-shadow:0 0 0 2px var(--bg),0 0 0 8px color-mix(in srgb,var(--accent) 35%,transparent)}
.v2-pin-badge{position:absolute;top:-6px;right:-10px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--surface);border:0;color:var(--text);font:700 13px/20px var(--font)}
.v2-arc{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.v2-arc.bad{stroke:var(--danger)}
.v2-arc-label{position:absolute;transform:translate(-50%,-100%);padding:4px 10px;border-radius:99px;background:var(--surface);border:var(--b) solid var(--accent-line);color:var(--text);font:600 var(--t16) var(--font);white-space:nowrap;box-shadow:var(--raise)}
.v2-gmap .v2-arc-label{position:relative;transform:none}
.v2-arc-label.bad{border-color:var(--danger)}
.v2-mapctl{position:absolute;right:12px;bottom:12px;display:grid;gap:4px}
.v2-mapctl button{width:44px;height:44px;border-radius:99px;border:0;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font:700 22px var(--font);cursor:pointer}
.v2-mapnote{position:absolute;left:12px;bottom:12px;padding:4px 12px;border-radius:99px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;color:var(--text);font:600 14px var(--font)}
@media (prefers-reduced-motion:reduce){ .v2-zone.live{animation:none} }
/* ================================================================ ui.teamDock (lib/teamDock.js): 240 px, collapsible to 72 */
.v2-dock{display:flex;flex-direction:column;width:240px;max-width:100%;min-height:0;background:var(--surface);border:0;border-radius:var(--r);overflow:hidden}
.v2-dock.mini{width:72px}
.v2-dock-h{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 4px 0 16px;border:0;flex:none}
.v2-dock-h b{flex:1;font:var(--label-weight) var(--label-size) var(--font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text)}
.v2-dock.mini .v2-dock-h b{display:none}
.v2-dock-x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer}
.v2-dock-b{flex:1;min-height:0;overflow:auto;padding:8px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.v2-crews,.v2-crew,.v2-unit{min-width:0}
.v2-unit h4{margin:0 0 6px;font:var(--label-weight) var(--label-size) var(--font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:6px}
.v2-unit h4::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--unit)}
.v2-crews{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v2-crew{display:grid;gap:6px;padding:8px 10px 10px;border-radius:var(--r-sm);background:var(--panel);border:0;border-left:4px solid var(--unit);color:var(--text)}
.v2-crew-h{display:flex;align-items:center;gap:6px;font-size:var(--t16)}
.v2-crew-h b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-clock{flex:none;display:inline-flex;align-items:center;gap:4px;font:600 13px var(--font);color:var(--text-2);white-space:nowrap}
.v2-clock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.v2-clock.in::before{background:var(--ok)}
.v2-clock.in{color:var(--ok-text)}
.v2-tms{display:flex;flex-wrap:wrap;gap:6px}
.v2-tm{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 2px var(--unit,var(--line-strong));cursor:grab;touch-action:pan-y}
.v2-tm .av{font:700 14px var(--font);color:var(--text)}
.v2-tm .dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--surface);background:var(--text-2)}
.v2-tm .dot.on{background:var(--ok)} .v2-tm .dot.driving{background:var(--warn)} .v2-tm .dot.off,.v2-tm .dot.pto{background:var(--line-strong)}
.v2-tm.pto{opacity:.55;cursor:default}
.v2-skills{display:flex;flex-wrap:wrap;gap:4px}
.v2-skill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;border:0;background:var(--surface);font:600 13px var(--font);color:var(--text)}
.v2-skill .conf{width:7px;height:7px;border-radius:50%;background:var(--text-2)}
.v2-skill .conf.hi{background:var(--ok)} .v2-skill .conf.mid{background:var(--warn)}
.v2-load{position:relative;height:22px;border-radius:99px;background:var(--surface);border:0;overflow:hidden}
.v2-load i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--unit) 45%,transparent)}
.v2-load span{position:relative;display:block;text-align:center;font:600 13px/22px var(--font);color:var(--text)}
.v2-off .v2-tms{display:grid;gap:6px}
.v2-offp{display:flex;align-items:center;gap:8px;color:var(--text-2);font:600 14px var(--font)}
.v2-dock.mini .v2-unit h4,.v2-dock.mini .v2-skills,.v2-dock.mini .v2-load,.v2-dock.mini .v2-clock,.v2-dock.mini .v2-crew-h b,.v2-dock.mini .v2-crew-h .v2-grip,.v2-dock.mini .v2-offp>span:last-child{display:none}
.v2-dock.mini .v2-crew{padding:6px;border-left-width:4px}
.v2-crew.v2-lifted .v2-skills,.v2-crew.v2-lifted .v2-load,.v2-crew.v2-lifted .v2-clock{display:none}   /* a small card under the finger, so the arc stays visible */
.v2-crew.v2-lifted{width:200px!important;opacity:.92}
/* ui.field: a 40 px mic at the right edge of every draft field (PASS3 R259) */
.v2-field{position:relative;display:block;width:100%}
.v2-field>textarea,.v2-field>input{width:100%;padding-right:56px!important}
.v2-fmic{position:absolute;right:6px;top:6px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--surface);color:var(--accent-text);cursor:pointer}
.v2-field:not(.area) .v2-fmic{top:50%;transform:translateY(-50%)}
.v2-fmic:hover{background:var(--panel)}
.v2-fmic .v2-icon{width:22px;height:22px}
/* ui.money: a money figure is a button; tap for one plain sentence and a 120 px bar (PASS3 R250) */
.v2-money{display:inline;padding:0 2px;margin:0;border:0;border-bottom:2px dotted var(--brass);background:none;color:var(--brass-text);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;min-height:0;border-radius:0}
.v2-money:hover,.v2-money:focus-visible{background:color-mix(in srgb,var(--brass) 14%,transparent)}
.v2-money-why{font:500 var(--t18)/1.5 var(--font)}
.v2-money-bar{height:120px;width:100%}
/* ui.cardStack (PASS3 R257): phone = a swipe stack; 600 px and up = a paged list with three buttons a row */
.v2-cards{display:grid;gap:12px;min-height:0}
.v2-cs-deck{position:relative;height:min(52dvh,420px)}
.v2-cs-card{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:20px;overflow:hidden;background:var(--surface);color:var(--text);border:var(--b) solid var(--line-strong);border-radius:16px;
  box-shadow:var(--raise);touch-action:pan-y;user-select:none;transition:transform 240ms var(--ease),opacity 240ms var(--ease);font:500 var(--t18)/1.5 var(--font)}
.v2-cs-card[data-k="1"]{transform:translateY(10px) scale(.96);opacity:.7;box-shadow:none}
.v2-cs-card[data-k="2"]{transform:translateY(20px) scale(.92);opacity:.4;box-shadow:none}
.v2-cs-card.drag{transition:none;cursor:grabbing}
.v2-cs-card.fly.right{transform:translateX(120%) rotate(12deg)!important;opacity:0}
.v2-cs-card.fly.left{transform:translateX(-120%) rotate(-12deg)!important;opacity:0}
.v2-cs-hint{position:absolute;top:16px;padding:4px 12px;border-radius:var(--r-sm);font:700 var(--t18) var(--font);border:3px solid;pointer-events:none}
.v2-cs-hint.ok{left:16px;color:var(--ok-text);border-color:var(--ok);opacity:var(--swr,0)}
.v2-cs-hint.no{right:16px;color:var(--danger-text);border-color:var(--danger);opacity:var(--swl,0)}
.v2-cs-of{margin:4px 0 0;text-align:center;color:var(--text-2);font:600 var(--t16) var(--font)}
.v2-cs-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.v2-cs-btns .btn{width:auto;min-height:48px;padding:0 16px;display:inline-flex;align-items:center;gap:6px}
.v2-cs-btns.big .btn{flex:1;min-height:56px;justify-content:center}
.v2-cs-list{height:min(60dvh,560px)}
.v2-pb .v2-cs-list{height:100%}
.v2-cs-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:12px 4px;min-height:0!important}
.v2-cs-body{min-width:0;display:grid;gap:2px}
.v2-cs-body>*{margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
@container (max-width:720px){ .v2-cs-row{grid-template-columns:minmax(0,1fr)} .v2-cs-row .v2-cs-btns{justify-content:flex-end} }
.v2-cs-list{container-type:inline-size}
.v2-cs-empty{color:var(--text-2);text-align:center;padding:24px}
@media (prefers-reduced-motion:reduce){ .v2-cs-card{transition:opacity 150ms linear} }
/* crew photos (PASS3 R114): three places only; fade in once over 200 ms */
.v2-signin-photo{display:none}
@media (max-width:1199px){
  .v2-signin-photo{display:block;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7);opacity:0;transition:opacity 200ms ease;z-index:0}
  .v2-signin-photo.shown{opacity:1}
  .v2-signin-card{position:relative;z-index:1;padding:24px;border-radius:16px;background:color-mix(in srgb,var(--card,#fff) 94%,transparent);box-shadow:0 8px 24px rgba(0,0,0,.35)}
}
.v2-cphoto{display:block;overflow:hidden;background:var(--panel)}
.v2-cphoto img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 200ms ease}
.v2-cphoto img.shown{opacity:1}
.v2-cphoto.week{height:120px;border-radius:var(--r) var(--r) 0 0}
.v2-pb .v2-cphoto.week{margin:-8px -16px 8px;border-radius:0}          /* in a grid panel the strip runs edge to edge under the header */
.v2-cphoto.goodwork{width:64px;height:64px;flex:none;border-radius:var(--r-sm)}
/* ui.crewPhotoScreen: one photo a page, Skip / Approve */
.v2-cpr{display:grid;gap:16px;max-width:1100px;margin:0 auto}
.v2-cpr-h{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.v2-cpr-h>div{flex:1 1 320px;min-width:0}
.v2-cpr-h h1{margin:0;font:600 var(--t28)/1.2 var(--font-title);color:var(--text)}
.v2-cpr-h p{margin:6px 0 0;font:500 var(--t18)/1.45 var(--font);color:var(--text-2)}
.v2-cpr-n{flex:none;padding:6px 14px;border-radius:99px;background:var(--panel);font:600 var(--t16) var(--font);color:var(--text)}
.v2-cpr-b{display:grid;gap:16px}
.v2-cpr-card{margin:0;display:grid;gap:10px;padding:12px;border-radius:var(--r);background:var(--surface);box-shadow:var(--raise);touch-action:pan-y;
  transition:transform var(--d-flip) var(--ease),opacity var(--d-flip) var(--ease);outline-offset:4px}
.v2-cpr-card img{display:block;width:100%;height:clamp(200px,calc(100dvh - var(--v2-hdr-h,64px) - 390px),620px);object-fit:contain;border-radius:var(--r-sm);background:var(--bg)}
.v2-cpr-card figcaption{display:flex;gap:12px;font:600 var(--t16) var(--font);color:var(--text-2)}
.v2-cpr-card figcaption span{margin-left:auto;font-variant-numeric:tabular-nums}
.v2-cpr-card.fly.right{transform:translateX(120%) rotate(8deg);opacity:0}
.v2-cpr-card.fly.left{transform:translateX(-120%) rotate(-8deg);opacity:0}
.v2-cpr-btns{display:flex;justify-content:flex-end;gap:12px}
.v2-cpr-btns .btn{width:auto;min-width:180px;min-height:var(--tap-primary);font-size:var(--t20)}
@media (max-width:599px){ .v2-cpr-btns{padding-right:68px} .v2-cpr-btns .btn{flex:1;min-width:0} .v2-cpr-card img{height:clamp(180px,calc(100dvh - var(--v2-hdr-h,64px) - 440px),520px)} }
.v2-cpr-msg{margin:0;font:500 var(--t20)/1.4 var(--font);color:var(--text)}
.v2-cpr-done{display:grid;gap:16px}
.v2-cpr-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.v2-cpr-grid li{display:grid;gap:8px;padding:8px;border-radius:var(--r);background:var(--surface)}
.v2-cpr-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){ .v2-cpr-card{transition:none} }
@media (prefers-reduced-motion:reduce){ .v2-cphoto img,.v2-signin-photo{transition:none} }
.v2-preview{margin:0;display:grid;gap:6px}
.v2-preview img{width:100%;max-height:44dvh;object-fit:contain;border-radius:var(--r-sm);background:var(--panel)}
.v2-preview figcaption,.v2-pof{color:var(--text-2);font:600 var(--t16) var(--font);margin:0}
.v2-map.mini .v2-mapctl,.v2-map.mini .v2-mapnote{display:none}
.v2-gadd{min-height:var(--tap);max-width:260px;padding:0 12px;border-radius:var(--r-sm);border:var(--b) solid var(--line-strong);background:var(--surface);color:var(--text);font:600 var(--t16) var(--font)}

/* ui.progressLine (lib/progress.js) */
.v2-prog{display:grid;gap:8px;padding:14px 16px;border-radius:var(--r);background:var(--surface)}
.v2-prog-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.v2-prog-t b{font:600 var(--t18)/1.3 var(--font);color:var(--text)}
.v2-prog-s{margin-left:auto;font:600 var(--t16) var(--font);color:var(--text-2);font-variant-numeric:tabular-nums}
.v2-prog-bar{height:8px;border-radius:99px;background:var(--panel);overflow:hidden}
.v2-prog-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width 900ms linear}
.v2-prog.slow .v2-prog-bar i{background:var(--warn)}
.v2-prog.ok .v2-prog-bar i{background:var(--ok)}
.v2-prog.bad .v2-prog-bar i{background:var(--danger)}
.v2-prog-step{margin:0;min-height:1.4em;font:500 var(--t16)/1.4 var(--font);color:var(--text)}
@media (prefers-reduced-motion:reduce){ .v2-prog-bar i{transition:none} }

/* ================================================================ the type floor (PASS4 §E principle 4; DESIGN-AUDIT §D S1b 2): nothing a person reads
   is under 16 px except the 13 px small-caps labels. The v1 screens inside V2 (Tools, Numbers, Strategy, Handbook, Me...) kept their
   13-15 px secondary text; this raises it, and only raises it. tests/ui/test_v2_s1b_design2.py walks every place and fails on a
   smaller word. */
body.v2 :is(#view, .sheet, #rail, #tabbar, #hdr) :is(.empty, .muted, small, .small, label, .tool span, .hbcard .tx span, .hero .hin p, .lesson, .cdet p, .cdet li,
  .tile .l, .tile .c, .tile .st, .tfoot button, .verdict, .seg button, .seg2 button, .segc button, .daynav button, .chip2, .pill, th, td, summary, .hbtn,
  .acts a, .asof span, .asof button, .es-use, .es-pl, .es-q small, .needrow .s, .dbhours span, .mn-pg span, .sw span, .showall button, .lst .muted, .how li, .how b,
  .wn, .rme b, .rme label, .rb2, .tl, .mn small){font-size:var(--t16)}
:where(body.v2 #view, body.v2 .sheet) button{font-size:var(--t16)} /* a button left at the browser's 13.3 px */
body.v2 #rail h6.rb2h{font:var(--label-weight) var(--label-size)/1.2 var(--font);letter-spacing:var(--label-track);text-transform:uppercase} /* a section label */
/* the screens built on the shell (S8 board, S9 sales, S10 deliveries, S12 company): their secondary words were 13-15 px. Reading
   words go to 16; the data ages, legends, lane names and key words become the 13 px small-caps label, which the floor allows. */
body.v2 :is(#view, .sheet, #hdr) :is(.x-line, .x-muted, .x-pill, .x-seg button, .x-st, .gm-showing b, .gm-showing span, .gm-note, .s8-dsum, .td-sub, #hweek .btn,
  .bg.none span, .s10-seg button, .s9-bignum span, .s9-hub, .s9-hint, .v2-mapnote, .v2-seg button){font-size:var(--t16)}
body.v2 :is(#view, .sheet, #hdr) :is(.v2-age, .x-age, .s9-age, .s10-sage, .x-lane span, .x-funnel > div, .td-key, .td-hrs, .gm-legend span, .s9-lbl, .s9-key span,
  .s8-dsync, .s8-todaychip, .x-src){font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-track);text-transform:uppercase}