/* ===================== Founder HQ v4 · visual system =====================
   Dark first, a refined light. System type stack, no external fonts or scripts. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
--ease:cubic-bezier(.22,1,.36,1);--rad:22px;--rad2:16px;
--accs:#8ab4ff;--acc-ink:#0b0d12;--acc-deep:#4c63a0;--acc-rgb:138,180,255;
--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--far:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 175 L70 140 L130 158 L210 96 L270 128 L350 70 L420 118 L470 104 L560 150 L640 112 L700 132 L790 62 L860 110 L930 96 L1010 140 L1090 104 L1200 128 L1200 300 L0 300Z' fill='%23000' fill-opacity='.26'/%3E%3C/svg%3E");
--near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 210 C140 170 250 236 390 196 S640 150 800 206 S1060 176 1200 158 L1200 300 L0 300Z' fill='%23000' fill-opacity='.5'/%3E%3C/svg%3E");
--sc-dawn:radial-gradient(40% 55% at 72% 70%,rgba(255,214,170,.95),rgba(255,170,120,.35) 45%,transparent 70%),linear-gradient(180deg,#16284a 0%,#3f5f8f 36%,#c98d78 66%,#3a2735 100%);
--sc-ice:radial-gradient(45% 50% at 24% 22%,rgba(255,255,255,.45),transparent 70%),linear-gradient(180deg,#0a2644 0%,#2a6597 42%,#9ccbe6 68%,#17324e 100%);
--sc-hill:radial-gradient(35% 45% at 80% 30%,rgba(255,246,210,.8),transparent 70%),linear-gradient(180deg,#5d93bd 0%,#a9ccd0 38%,#86b46c 60%,#26501f 100%);
--sc-dune:radial-gradient(30% 40% at 20% 30%,rgba(255,240,215,.75),transparent 70%),linear-gradient(180deg,#7ea6c8 0%,#e3bf93 40%,#cf7336 62%,#5c230c 100%);
--sc-dusk:radial-gradient(45% 45% at 50% 72%,rgba(255,150,120,.75),transparent 70%),linear-gradient(180deg,#120d2e 0%,#432771 40%,#b85478 68%,#241027 100%);
--sc-sea:radial-gradient(40% 40% at 70% 35%,rgba(220,255,245,.55),transparent 70%),linear-gradient(180deg,#0c2f42 0%,#27768a 44%,#94d0c7 63%,#0a2835 100%);
--sc-aurora:radial-gradient(60% 45% at 38% 18%,rgba(90,255,190,.55),transparent 65%),radial-gradient(45% 40% at 80% 28%,rgba(150,120,255,.45),transparent 70%),linear-gradient(180deg,#040a18 0%,#0b2140 62%,#07101f 100%);
--g-blue:linear-gradient(135deg,#1c3bd6 0%,#4f2fe0 55%,#7a3ce2 100%);
--g-bad:linear-gradient(135deg,#a3193a 0%,#b8322f 100%);
--g-ok:linear-gradient(135deg,#0a6a49 0%,#0d7a52 100%);
--g-warm:linear-gradient(135deg,#8f3a0a 0%,#c8601a 100%);
}
html[data-theme=dark]{color-scheme:dark;
--bg:#06070b;--bg2:#0c0e14;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.075);--rule:rgba(255,255,255,.11);--rule2:rgba(255,255,255,.065);
--txt:#f2f4f8;--txt2:#b9c0cc;--txt3:#8f98a9;
--good:#5fe0a5;--warn:#f2c95c;--serious:#ff9b6a;--crit:#ff7a8a;--ultra:#8ab4ff;--verm:#ff8a65;
--a1:#5fe0a5;--a2:#f2c95c;--a3:#ff9b6a;--a4:#ff7a8a;
--c1:#7fb2ff;--c2:#f0a26e;--c3:#71d9a8;--c4:#b89cff;--c5:#ff8fb0;--c6:#8f9bb0;
--track:rgba(255,255,255,.1);--glass:rgba(9,11,17,.74);--glass-b:rgba(255,255,255,.1);--solid:#12151c;--grid:rgba(255,255,255,.08);
--tip-bg:rgba(18,21,28,.94);--tip-ink:#fff;--dotring:#151922;--shadow:0 24px 60px -30px rgba(0,0,0,.7);
--ambient:radial-gradient(55% 45% at 90% -10%,rgba(var(--acc-rgb),.22),transparent 60%),radial-gradient(45% 40% at -5% 30%,rgba(255,140,110,.1),transparent 60%),radial-gradient(50% 45% at 55% 115%,rgba(80,200,170,.12),transparent 60%),linear-gradient(180deg,#090b12,#06070b)}
html[data-theme=light]{color-scheme:light;
--bg:#eef0f4;--bg2:#f7f8fa;--card:rgba(255,255,255,.74);--card2:rgba(255,255,255,.92);--rule:rgba(15,20,30,.13);--rule2:rgba(15,20,30,.07);
--txt:#0f1319;--txt2:#3d4654;--txt3:#5e6776;
--good:#08693f;--warn:#7d5400;--serious:#a63c0a;--crit:#b01a35;--ultra:#1d4ed8;--verm:#c2410c;
--a1:#2fae78;--a2:#dca400;--a3:#e8742c;--a4:#cf2c4a;
--c1:#2f7fd6;--c2:#d9772f;--c3:#1f9c6a;--c4:#7c56d9;--c5:#d64a6e;--c6:#8c95a3;
--track:rgba(15,20,30,.08);--glass:rgba(255,255,255,.76);--glass-b:rgba(255,255,255,.85);--solid:#ffffff;--grid:rgba(15,20,30,.1);
--tip-bg:rgba(15,20,28,.94);--tip-ink:#fff;--dotring:#fff;--shadow:0 24px 50px -30px rgba(20,30,50,.35);
--ambient:radial-gradient(55% 45% at 90% -10%,rgba(var(--acc-rgb),.35),transparent 60%),radial-gradient(45% 40% at -5% 30%,rgba(255,190,150,.3),transparent 60%),radial-gradient(50% 45% at 55% 115%,rgba(140,220,200,.35),transparent 60%),linear-gradient(180deg,#e9edf3,#f2f0ec)}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)!important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accs);outline-offset:2px;border-radius:6px}
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ambient)}
.bgfx::after{content:'';position:absolute;inset:0;background:var(--noise);opacity:.06;mix-blend-mode:overlay}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
kbd{font:600 10.5px/1 var(--mono);padding:3px 5px;border-radius:5px;border:1px solid var(--rule);background:var(--card2);color:var(--txt2)}
.dim{color:var(--txt3)}.dim2{color:var(--txt2)}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- top strip ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;min-height:62px;--px:20px;padding:10px max(var(--px),env(safe-area-inset-right,0px)) 10px max(var(--px),env(safe-area-inset-left,0px));
background:var(--glass);border-bottom:1px solid var(--rule2);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5)}
.lg{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.lg img{width:26px;height:26px;border-radius:8px}
.priv{display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1 var(--sans);letter-spacing:.02em;color:var(--good);
background:color-mix(in srgb,var(--good) 10%,transparent);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);padding:7px 11px;border-radius:100px;white-space:nowrap}
.priv i,.privs i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.spacer{flex:1}
/* REVIEW (priority): there are no native selects left. Windows draws a <select> popup with the OS, so the dark
   theme's light option text sat on a white list. Every picker is now a .gsel button (or the store scope button)
   opening the one glass listbox, #pickList, styled below with .slist. */
.gsel{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:36px;padding:0 10px 0 12px;border:1px solid var(--rule);background:var(--card2);border-radius:12px;
font:500 13px var(--sans);color:var(--txt);cursor:pointer;text-align:left;width:100%}
.gsel .gsv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gsel .chevd{width:16px;height:16px;opacity:.7;transition:transform .2s var(--ease)}
.gsel[aria-expanded=true]{border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.gsel[aria-expanded=true] .chevd{transform:rotate(180deg)}
.gsel:hover{border-color:var(--txt3)}
.gsel:focus-visible{outline:none;border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.28)}
.gsel:disabled{opacity:.5;cursor:not-allowed}
.add .gsel{flex:1 1 140px;width:auto}
.brow .gsel{flex:1 1 180px;width:auto}
.storesel{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 11px;height:36px;border-radius:100px;background:var(--card2);border:1px solid var(--glass-b);color:var(--txt2);max-width:230px}
.storesel[hidden]{display:none!important}
.storesel:focus-within{border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.22)}
.storesel>button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font:600 12.5px/1 var(--sans);color:var(--txt);padding:6px 2px;min-width:0;cursor:pointer}
.storesel>button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.storesel>button:focus-visible{outline:none}
.storesel .chevd{width:15px;height:15px;opacity:.7}
.slist{position:fixed;top:0;left:0;min-width:180px;max-width:min(360px,calc(100vw - 16px));max-height:min(62vh,460px);overflow:auto;list-style:none;margin:0;padding:6px;z-index:130;overscroll-behavior:contain;
background:color-mix(in srgb,var(--solid) 90%,transparent);border:1px solid var(--glass-b);border-radius:18px;box-shadow:var(--shadow),0 24px 60px rgba(0,0,0,.4);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);scrollbar-width:thin}
.slist:focus{outline:none}
.slist .sg{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);padding:11px 10px 5px}
.slist[hidden]{display:none}
.slist [role=option]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;font-size:13px;color:var(--txt);min-height:36px}
.slist [role=option].dot{grid-template-columns:9px minmax(0,1fr) auto}
/* phones: the list is a bottom sheet above the tab bar, with room for a thumb */
.slist.psheet{background:color-mix(in srgb,var(--solid) 97%,transparent);box-shadow:0 0 0 100vmax rgba(5,6,10,.45),var(--shadow);left:10px!important;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto!important;width:auto!important;max-width:none;max-height:min(66vh,520px)!important;border-radius:22px;padding:8px;animation:sheetup .22s var(--ease)}
.slist.psheet [role=option]{min-height:46px;font-size:15px}
@keyframes sheetup{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.slist [role=option] i{width:9px;height:9px;border-radius:50%}
.slist [role=option] b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slist [role=option] span{font-size:11.5px;color:var(--txt3);white-space:nowrap}
.slist [role=option].on{background:var(--card2);box-shadow:inset 3px 0 0 var(--accs)}
.slist [role=option][aria-selected=true] b::after{content:'  ✓';color:var(--accs);white-space:pre}
html[data-theme=light] .slist [role=option][aria-selected=true] b::after{color:var(--acc-deep)}
.roles{display:flex;gap:2px;padding:3px;border-radius:100px;background:var(--card2);border:1px solid var(--glass-b)}
.roles button{border:0;background:none;padding:7px 13px;border-radius:100px;font:600 12px/1 var(--sans);color:var(--txt2);cursor:pointer;transition:background .18s,color .18s}
.roles button:hover{color:var(--txt)}
.roles button.on{background:var(--accs);color:var(--acc-ink);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.tbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:100px;background:var(--card2);border:1px solid var(--glass-b);font:600 12px/1 var(--sans);color:var(--txt2);cursor:pointer;white-space:nowrap}
.tbtn:hover{color:var(--txt);border-color:var(--txt3)}
.tbtn kbd{margin-left:2px}
.day{font:600 12px/1 var(--sans);color:var(--txt2);padding:0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cyc{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--accs);color:var(--acc-ink);font:700 13px/1 var(--sans);padding:0 18px;height:40px;border-radius:100px;cursor:pointer;
box-shadow:0 8px 24px -8px rgba(var(--acc-rgb),.7);transition:transform .2s var(--ease),box-shadow .2s;white-space:nowrap}
.cyc:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(var(--acc-rgb),.8)}
.cyc:active{transform:translateY(0)}
.cyc:disabled{opacity:.4;cursor:default;transform:none}
.cyc.pulse{animation:pulse .5s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.7)}100%{box-shadow:0 0 0 14px rgba(var(--acc-rgb),0)}}
.mb{display:none;border:1px solid var(--glass-b);background:var(--card2);border-radius:100px;width:38px;height:38px;cursor:pointer;place-items:center;flex:0 0 38px}
/* FIX (top bar overflow, 28 Sep 2026): the bar was one nowrap row whose items could not shrink, so between ~1100
   and ~1300 CSS px (a 1280-1536 laptop at 125-150% Windows scaling, less the scrollbar, a longer store name or a
   two-digit day) it ran past the viewport and dragged the page sideways. app.js (fitTop) now steps through
   these levels, cumulatively, until the row fits with a clear gap in the middle. Run today never shrinks. */
.top{min-width:0;max-width:100%}
.top>*{flex-shrink:0}
.top>.spacer{flex:1 1 0;min-width:0}
.cyc{flex-shrink:0}
.cyc::after{content:attr(data-day);display:none;font:700 10.5px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0;
padding:5px 8px;margin:0 -9px 0 3px;border-radius:100px;background:color-mix(in srgb,var(--acc-ink) 14%,transparent);white-space:nowrap}
.stshort{display:none}
.rolesel{position:relative;display:none;align-items:center;gap:6px;padding:0 6px 0 11px;height:36px;border-radius:100px;background:var(--card2);border:1px solid var(--glass-b);color:var(--txt2)}
.rolesel:focus-within{border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.22)}
.rolesel>button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;font:600 12.5px/1 var(--sans);color:var(--txt);padding:6px 2px;cursor:pointer;white-space:nowrap}
.rolesel>button:focus-visible{outline:none}
.rolesel .chevd{width:15px;height:15px;opacity:.7;transition:transform .2s var(--ease)}
.rolesel>button[aria-expanded=true] .chevd,.storesel>button[aria-expanded=true] .chevd{transform:rotate(180deg)}
.storesel .chevd{transition:transform .2s var(--ease)}
.tbtn .ic{flex:none}
/* 1 · the privacy pill goes (it is also in the sidebar footer) */
.top.c-priv .priv{display:none}
/* 2 · Search becomes an icon */
.top.c-search #searchBtn span,.top.c-search #searchBtn kbd{display:none}
.top.c-search #searchBtn{width:36px;padding:0;justify-content:center}
/* 3 · Theme becomes an icon */
.top.c-theme #themeBtn span{display:none}
.top.c-theme #themeBtn{width:36px;padding:0;justify-content:center}
/* 4 · the store picker gets a short label */
.top.c-store #storeCur{display:none}
.top.c-store .stshort{display:inline;max-width:86px}
/* 5 · the role switcher becomes one compact button over the glass listbox */
.top.c-roles .roles{display:none}
.top.c-roles .rolesel{display:inline-flex}
/* 6 · Day N moves into the Run today button */
.top.c-day .day{display:none}
.top.c-day .cyc::after{display:inline-block}
/* 7 · the store picker is an icon with its chevron */
.top.c-storeic .storesel{padding:0 5px 0 10px}
.top.c-storeic .stshort{display:none}
/* 8+ · phones and very narrow windows: the store picker (the store screens carry their own scope chip), then the
   day (the time machine bar shows it), then the name beside the logo, then tighter spacing */
.top.c-storeoff .storesel{display:none}
.top.c-dayoff .cyc::after{display:none}
.top.c-brand .lg .brandname{display:none}
.top.c-tight{gap:5px;--px:10px}
.top.c-tight .cyc{padding:0 13px}
/* last-ditch safety only: if every level is spent, the brand name ellipsises instead of pushing Run today out */
.top>.lg{flex-shrink:1;min-width:0}
.lg .brandname{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- time machine ---------- */
.tm{display:none;align-items:center;gap:14px;--px:22px;padding:9px max(var(--px),env(safe-area-inset-right,0px)) 9px max(var(--px),env(safe-area-inset-left,0px));background:var(--glass);border-bottom:1px solid var(--rule2);position:sticky;top:62px;z-index:39;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tm.on{display:flex}
.tm .lb2{font:600 11.5px/1 var(--sans);color:var(--txt3);white-space:nowrap}
.tm .lb2 b{color:var(--txt);font-variant-numeric:tabular-nums}
.tm input[type=range]{flex:1;min-width:0;accent-color:var(--accs);height:22px}
.past{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:color-mix(in srgb,var(--serious) 14%,var(--card));border:1px solid color-mix(in srgb,var(--serious) 40%,transparent);border-radius:var(--rad2);padding:12px 15px;margin-bottom:16px;font-size:13px;color:var(--txt2)}
.past b{color:var(--serious)}
/* past days: controls are disabled for real in app.js (lockPast); this only styles them */
body.rew #view :is(button,input,select,textarea):disabled{opacity:.45;cursor:not-allowed}
.past.nudge{animation:nudge .45s var(--ease)}
@keyframes nudge{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- shell ---------- */
/* REVIEW: these rules were written against the bare "aside" selector, so they also hit the chat channel list and
   the Brand live preview (both <aside>). Below 1100px both were turned into an off-canvas drawer and vanished:
   the preview rendered as an empty box and the channel list could not be reached. Scoped to #side. */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px)}
#side{position:sticky;top:62px;height:calc(100vh - 62px);height:calc(100dvh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
padding:16px 12px 16px max(12px,env(safe-area-inset-left,0px));border-right:1px solid var(--rule2);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);scrollbar-width:thin}
#sidenav{flex:1}
body:has(.tm.on) #side{top:114px;height:calc(100vh - 114px);height:calc(100dvh - 114px)}
.navscrim{display:none}
.sideroles{display:none}
.nv{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:15px;cursor:pointer;color:var(--txt2);min-width:0;transition:background .18s,color .18s;user-select:none}
.nv .ic{width:20px;height:20px;opacity:.85}
.nv .nl{display:flex;flex-direction:column;min-width:0;flex:1}
.nv .nl b{font-size:14px;font-weight:600;color:var(--txt);letter-spacing:-.01em}
.nv .nl small{font-size:11px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.nv:hover{background:var(--card2)}
.nv.on{background:var(--accs);color:var(--acc-ink)}
.nv.on .nl b,.nv.on .nl small{color:inherit}
.nv.on .nl small{opacity:.75}
.nv.on .ic{opacity:1}
.nv .pchip{margin-left:4px}
.subs{display:flex;flex-direction:column;gap:1px;margin:3px 0 8px 22px;padding-left:12px;border-left:1px solid var(--rule)}
.subs .sub{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;font:500 12.5px/1.2 var(--sans);color:var(--txt2);padding:6px 10px;border-radius:9px;cursor:pointer}
.subs .sub:hover{color:var(--txt);background:var(--card2)}
.subs .sub.on{color:var(--txt);background:var(--card2);font-weight:600}
.sidefoot{display:flex;flex-wrap:wrap;gap:5px;padding:12px 2px 0;border-top:1px solid var(--rule2);margin-top:10px}
.sidefoot .btn{height:30px;padding:0 10px;font-size:11.5px;flex:1 1 auto;justify-content:center}
.privs{flex:1 0 100%;display:flex;align-items:center;gap:6px;font:500 10.5px/1.3 var(--sans);color:var(--txt3);margin-top:6px;padding-left:2px}
.privs i{background:var(--good)}
.privs em{font-style:normal;color:var(--txt2);font-weight:600}
.pchip{display:inline-flex;align-items:center;font:700 9px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:100px;font-style:normal;
background:rgba(var(--acc-rgb),.16);color:var(--accs);border:1px solid rgba(var(--acc-rgb),.35);vertical-align:middle}
html[data-theme=light] .pchip{color:var(--acc-deep)}
.nv.on .pchip{background:rgba(0,0,0,.14);color:inherit;border-color:transparent}

main{--mx:32px;padding:26px max(var(--mx),env(safe-area-inset-right,0px)) 90px max(var(--mx),env(safe-area-inset-left,0px));max-width:1280px;min-width:0;width:100%}
#view.swap{animation:swap .36s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#view.swap>.tiles,#view.swap>.grid,#view.swap>.two,#view.swap>.pnl,#view.swap>.rhero{animation:rise .5s var(--ease) both}
#view.swap>.grid{animation-delay:.05s}#view.swap>.two{animation-delay:.1s}#view.swap>.pnl{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- screen header ---------- */
.sh{margin-bottom:20px}
.shk{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-bottom:10px;flex-wrap:wrap}
.shk i{width:3px;height:3px;border-radius:50%;background:var(--txt3);display:inline-block}
.shk .scope{display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0;font:600 11.5px/1 var(--sans);color:var(--accs);
border:1px solid rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.1);border-radius:100px;padding:5px 8px 5px 9px;cursor:pointer}
.shk .scope:hover{background:rgba(var(--acc-rgb),.18)}
.shk .scope[aria-expanded=true]{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.22)}
.shk .scope .chevd{width:13px;height:13px;opacity:.8}
html[data-theme=light] .shk .scope{color:var(--acc-deep)}
.shk .scope .ic{width:14px;height:14px}
.shrow{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.sht{min-width:0;flex:1 1 420px}
h1{font-size:clamp(42px,6vw,82px);font-weight:700;letter-spacing:-.05em;line-height:.95;margin:0 0 10px -2px;
background:linear-gradient(180deg,var(--txt) 20%,color-mix(in srgb,var(--txt) 46%,transparent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere;padding-bottom:.2em;margin-bottom:calc(10px - .14em)}
.sub{color:var(--txt2);font-size:13.5px;line-height:1.55;max-width:68ch}
.sub b{color:var(--txt);font-weight:600}
.shact{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-end;margin-bottom:4px}
.tabs{display:flex;gap:2px;margin-top:16px;padding:3px;border-radius:100px;background:var(--card2);border:1px solid var(--glass-b);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 14px;border-radius:100px;font:600 12.5px/1 var(--sans);color:var(--txt2);cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}
.tab:hover{color:var(--txt)}
.tab.on{background:var(--txt);color:var(--bg)}
.tab.on .pchip{background:rgba(255,255,255,.2);color:inherit;border-color:transparent}
html[data-theme=light] .tab.on .pchip{background:rgba(0,0,0,.18)}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:138px;padding:20px 22px;border-radius:var(--rad);
background:var(--card);border:1px solid var(--glass-b);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tile b{font:600 clamp(30px,2.9vw,42px)/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .lb{display:block;font:600 12.5px/1.3 var(--sans);color:var(--txt2);margin-top:auto;padding-top:14px}
.tile .dl{display:block;font-size:12px;color:var(--txt3);margin-top:2px}
.tile.hero,.tile.bad,.tile.ok,.tile.warm{color:#fff;border-color:transparent;box-shadow:0 20px 40px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.tile.hero{background:var(--g-blue)}.tile.bad{background:var(--g-bad)}.tile.ok{background:var(--g-ok)}.tile.warm{background:var(--g-warm)}
.tile.hero .lb,.tile.bad .lb,.tile.ok .lb,.tile.warm .lb{color:#fff}
.tile.hero .dl,.tile.bad .dl,.tile.ok .dl,.tile.warm .dl{color:rgba(255,255,255,.94)}
.tile.hero::after,.tile.bad::after,.tile.ok::after,.tile.warm::after{content:'';position:absolute;inset:0;background:var(--noise);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.tile[data-go]{cursor:pointer;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.tile[data-go]:hover{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.5)}
.tile[data-go]::before{content:'open →';position:absolute;right:18px;top:20px;font:600 10.5px/1 var(--sans);opacity:0;transition:opacity .2s;color:inherit}
.tile[data-go]:hover::before{opacity:.7}
.tile.has-ring[data-go]::before{display:none}
.mini-ring{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
background:conic-gradient(currentColor calc(var(--p)*1%),rgba(127,127,127,.25) 0);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px))}
.tile:not(.hero):not(.bad):not(.ok):not(.warm) .mini-ring{color:var(--accs)}
.tile.has-ring b{padding-right:44px}

/* ---------- cards ---------- */
.grid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.card{flex:1 1 264px;min-width:0;position:relative;overflow:hidden;background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad);padding:18px 20px;
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card.wide{flex:2 1 500px}.card.full{flex:1 1 100%}
.ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ch h3{font-size:14px;font-weight:650;letter-spacing:-.01em}
.ch span{font:500 11px/1.3 var(--sans);color:var(--txt3)}
.big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.big b{font:600 38px/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.big em{font-style:normal;font-size:12px;font-weight:600;color:var(--txt2)}
.bsub{font-size:12px;color:var(--txt2);margin:7px 0 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dialwrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dialcap{font-size:12.5px;line-height:1.55;color:var(--txt2);flex:1 1 90px;min-width:0}
.dialcap b{color:var(--txt);font-variant-numeric:tabular-nums}
.rhero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:end;padding:26px 28px;border-radius:26px;color:#fff;margin-bottom:12px;
box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.rhero.g-blue{background:var(--g-blue)}
.rhero::after{content:'';position:absolute;inset:0;background:var(--noise);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.rhero .hl{display:flex;flex-direction:column;gap:6px;min-width:0}
.rhero .hk{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.rhero .hl b{font:600 clamp(48px,6vw,74px)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.rhero .hl b em{font:500 16px/1 var(--sans);letter-spacing:0;margin-left:8px;opacity:.85;font-style:normal}
.rhero .hs{font-size:13px;opacity:.86;max-width:44ch}
.rhero .hs strong{color:#fff;font-weight:700}
.rhero .hr{min-width:0;--track:rgba(255,255,255,.15);--accs:#fff;--txt3:rgba(255,255,255,.92);--txt:#fff;--crit:#ffb4be}
.rhero .vz-ax{justify-content:center}

/* ---------- panels, detail tables ---------- */
.pnl{background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad);padding:18px 20px;margin-bottom:12px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);min-width:0}
.pnl.rail{border-left:3px solid var(--accs)}
.pnl.prev{opacity:.7}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ph h2,.colh h2{font-size:15px;font-weight:650;letter-spacing:-.015em}
.ph .n,.colh .n{font:500 11px/1.3 var(--sans);color:var(--txt3)}
details.dt{padding:0}
details.dt summary{list-style:none;display:flex;align-items:center;gap:10px;padding:16px 20px;cursor:pointer;flex-wrap:wrap;user-select:none}
details.dt summary::-webkit-details-marker{display:none}
details.dt summary h2{margin-right:2px}
details.dt .dtools{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
details.dt .chev{width:22px;height:22px;border-radius:50%;background:var(--card2);position:relative;transition:transform .25s var(--ease)}
details.dt .chev::after{content:'';position:absolute;left:7px;top:6px;width:6px;height:6px;border-right:1.6px solid var(--txt2);border-bottom:1.6px solid var(--txt2);transform:rotate(45deg)}
details.dt[open] .chev{transform:rotate(180deg)}
details.dt .dtb{padding:0 20px 18px}
.tb{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--rule);background:var(--card2);border-radius:100px;padding:5px 10px;font:600 11px/1 var(--sans);color:var(--txt2);cursor:pointer}
.tb .ic{width:13px;height:13px}
.tb:hover{color:var(--txt);border-color:var(--txt3)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font:600 11px/1.4 var(--sans);letter-spacing:.03em;color:var(--txt3);padding:0 10px 9px 0;border-bottom:1px solid var(--rule);white-space:nowrap;cursor:pointer;user-select:none;position:relative}
th:hover{color:var(--txt)}
th.asc::after,th.desc::after{content:'';display:inline-block;margin-left:5px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);vertical-align:middle}
th.desc::after{transform:rotate(-135deg) translateY(-2px)}
td{padding:9px 10px 9px 0;border-bottom:1px solid var(--rule2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover td{background:rgba(127,127,127,.06)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;font-size:12.5px}
/* REVIEW: ids (ORD-, INV-, SKU) were right-aligned like amounts under a left-aligned header */
td.idc{font-size:12.5px;white-space:nowrap}
td.acts{white-space:nowrap}
td.acts .btn{margin-left:4px}
.who{font-weight:600}
.mini{display:block;font-size:11px;color:var(--txt3);margin-top:1px;font-family:var(--sans);white-space:normal;text-align:left;font-weight:400}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.scrollx.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),rgba(0,0,0,.2));mask-image:linear-gradient(90deg,#000 calc(100% - 34px),rgba(0,0,0,.2))}

/* ---------- pills, chips, buttons, forms ---------- */
.st{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--sans);white-space:nowrap;padding:5px 9px;border-radius:100px;background:color-mix(in srgb,currentColor 12%,transparent)}
.st i{font-style:normal;font-size:10px;line-height:1}
.st.good{color:var(--good)}.st.warn{color:var(--warn)}.st.serious{color:var(--serious)}.st.crit{color:var(--crit)}.st.idle{color:color-mix(in srgb,var(--txt3) 82%,var(--txt))}.st.info{color:var(--ultra)}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--rule);background:var(--card2);border-radius:100px;padding:6px 11px;font:600 11.5px/1 var(--sans);color:var(--txt2);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--txt);color:var(--bg);border-color:transparent}
.chip.up{color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent);border-color:transparent;cursor:default;padding:4px 8px;font-size:11px}
.chip.dn{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent);border-color:transparent;cursor:default;padding:4px 8px;font-size:11px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--card2);color:var(--txt);padding:0 13px;height:34px;border-radius:100px;font:600 12px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:border-color .18s,transform .18s var(--ease),background .18s}
.btn:hover{border-color:var(--txt3)}
.btn:active{transform:scale(.97)}
.btn.p{background:var(--accs);color:var(--acc-ink);border-color:transparent}
.btn.g{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.btn.g:hover{background:color-mix(in srgb,var(--good) 12%,transparent)}
.btn.on{background:var(--txt);color:var(--bg);border-color:transparent;cursor:default}
.btn:disabled{opacity:.45;cursor:default}
.btn .ic{width:15px;height:15px}
.add{display:none;gap:8px;margin:0 0 14px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-radius:var(--rad2);background:var(--card);border:1px dashed var(--rule)}
.add.show{display:flex}
.add input,.add select,.form input,.form select{border:1px solid var(--rule);background:var(--card2);border-radius:12px;padding:9px 12px;font:400 13px var(--sans);color:var(--txt);min-width:0;flex:1 1 120px;height:36px}
.add input:focus,.form input:focus,.srch input:focus{outline:none;border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.srch{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0 12px;border:1px solid var(--rule);background:var(--card2);border-radius:14px}
.srch .ic{color:var(--txt3);width:16px;height:16px}
.srch input{flex:1;min-width:0;border:0;background:none;padding:11px 0;font:400 13.5px var(--sans);color:var(--txt)}
.srch input:focus{outline:none;box-shadow:none}
.srch:focus-within{border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
h1:focus{outline:none}
.scrollx:focus-visible{outline-offset:-2px}
th[tabindex]:focus-visible{outline-offset:-3px}
.vz-empty{display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--txt3);border:1px dashed var(--rule);border-radius:var(--rad2);margin-top:8px;padding:12px}
.srch .ct{font:600 11px/1 var(--sans);color:var(--txt3);white-space:nowrap}
.more{display:block;width:100%;margin-top:12px;border:1px dashed var(--rule);background:none;border-radius:14px;padding:11px;cursor:pointer;color:var(--txt2);font:600 12px/1 var(--sans)}
.more:hover{border-color:var(--txt3);color:var(--txt)}
.gate{padding:30px 18px;text-align:center;color:var(--txt3);background:var(--card);border:1px dashed var(--rule);border-radius:var(--rad2);display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.gate b{color:var(--txt);font-size:14px;font-weight:600}
.gate span{font-size:12.5px}
.note{margin:16px 0 8px;padding:12px 16px;border-left:2px solid var(--rule);font:400 12.5px/1.65 var(--sans);color:var(--txt3);max-width:78ch}
.note b{color:var(--txt2)}
.meter{height:8px;border-radius:100px;background:var(--track);overflow:hidden;margin-top:5px}
.meter b{display:block;height:100%;background:linear-gradient(90deg,var(--c1),var(--accs));border-radius:100px}
.meter.hot b{background:linear-gradient(90deg,var(--c2),var(--crit))}
.meter.big{height:14px}
.age{display:flex;height:14px;border-radius:100px;overflow:hidden;background:var(--track)}
.age div+div{box-shadow:-2px 0 0 var(--bg)}
.lgnd{display:flex;flex-wrap:wrap;gap:11px;margin-top:9px}
.lgnd span{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--sans);color:var(--txt2)}
.lgnd i{width:9px;height:9px;border-radius:3px;display:inline-block}
.lgnd b{color:var(--txt);font-variant-numeric:tabular-nums}
.perm{border:1px solid var(--rule);background:var(--card2);border-radius:100px;padding:0 12px;height:28px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:600 11px/1 var(--sans);color:var(--txt3);transition:background .16s,border-color .16s,color .16s}
.perm i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.perm.on{background:color-mix(in srgb,var(--good) 14%,transparent);border-color:color-mix(in srgb,var(--good) 40%,transparent);color:var(--good)}
.perm.off{background:color-mix(in srgb,var(--crit) 10%,transparent);border-color:color-mix(in srgb,var(--crit) 35%,transparent);color:var(--crit)}
.perm.fix{cursor:default;border-style:dashed}

/* ---------- feed, decisions, columns ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px}
.col{min-width:0;display:flex;flex-direction:column;gap:10px}
.colh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 4px 2px}
.feed{display:flex;flex-direction:column;gap:8px}
.msg{display:flex;gap:11px;padding:11px 13px;background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad2);align-items:flex-start}
.av{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:grid;place-items:center;font:700 10.5px var(--sans);background:linear-gradient(135deg,var(--accs),color-mix(in srgb,var(--accs) 72%,var(--acc-deep)));color:var(--acc-ink)}
.msg .bd{flex:1;font-size:13px;color:var(--txt2);line-height:1.5}
.msg .bd b{color:var(--txt);font-weight:600}
.msg .tm{font:500 11px var(--sans);color:var(--txt3);white-space:nowrap}
.dc{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px 14px 18px;background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad2);position:relative;overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.dc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--txt3)}
.dc.warn::before{background:var(--warn)}.dc.info::before{background:var(--ultra)}.dc.serious::before{background:var(--serious)}.dc.crit::before{background:var(--crit)}
.dcl{display:flex;flex-direction:column;min-width:0;gap:2px}
.dck{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.dcl b{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.dcl em{font:600 20px/1.1 var(--sans);letter-spacing:-.03em;font-style:normal;font-variant-numeric:tabular-nums}
.dcm{font-size:12px;color:var(--txt3)}
.dcb{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.dcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:14px}
.dcs .dc{flex-direction:column;align-items:stretch;gap:12px}
.dcs .dcb{justify-content:flex-start}
.col .dc{flex-wrap:wrap}
.cost{background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad);padding:16px 18px}
.costrow{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--rule2);cursor:pointer;font-size:12.5px;color:var(--txt2)}
.costrow b{font-size:13px;color:var(--crit);font-variant-numeric:tabular-nums}
.costrow strong{color:var(--txt);font-weight:600}
.costrow:hover strong{color:var(--accs)}
.first{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--rad);margin-bottom:12px;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),.06));border:1px solid rgba(var(--acc-rgb),.4)}
.first>div:first-child{display:flex;flex-direction:column;gap:3px;flex:1 1 320px;min-width:0}
.first b{font-size:14px;font-weight:650}
.first span{font-size:12.5px;color:var(--txt2)}
.fbtns{display:flex;gap:8px}
.costgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-bottom:14px}
.cc{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);position:relative;overflow:hidden}
.cc::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--txt3)}
.cc.warn::before{background:var(--warn)}.cc.crit::before{background:var(--crit)}
.cch{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cch b{font:600 22px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cc.crit .cch b{color:var(--crit)}.cc.warn .cch b{color:var(--warn)}
.cc strong{font-size:14px;font-weight:650}
.ccw{font-size:12px;color:var(--txt3);display:flex;gap:6px;align-items:center}
.cc p{font-size:12.5px;color:var(--txt2);flex:1}
.cc .btn{align-self:flex-start;margin-top:4px}

/* ---------- desks, leaderboard, stores, pipeline, chat, size runs ---------- */
.desks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:12px}
.desk{padding:16px 18px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);display:flex;flex-direction:column;gap:12px}
.desk.crit{border-color:color-mix(in srgb,var(--crit) 45%,transparent)}.desk.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.dh{display:flex;align-items:center;gap:11px}
.dh .vz-ring{width:50px}
.dh .vz-ring b{font-size:11.5px}
.dh>div{flex:1;min-width:0;display:flex;flex-direction:column}
.dh b{font-size:14px;font-weight:650}
.dh>div>span{font-size:11.5px;color:var(--txt3)}
.desk ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.desk li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--txt2);padding:6px 0;border-top:1px solid var(--rule2);cursor:pointer}
.desk li:hover{color:var(--txt)}
.desk li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.desk li b{font-variant-numeric:tabular-nums;color:var(--txt3);font-weight:600}
.lead{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:12px}
.lp{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);min-width:0;position:relative}
.lp .rk{position:absolute;top:10px;right:14px;font:600 11px/1 var(--sans);color:var(--txt3)}
.lp.good .rk{color:var(--good)}
.lpi{display:flex;flex-direction:column;min-width:0;flex:1}
.lpi b{font-size:14px;font-weight:650}
.lpi span{font-size:11.5px;color:var(--txt3)}
.lpi em{font:500 11.5px var(--sans);font-style:normal;color:var(--txt2);margin-top:2px;font-variant-numeric:tabular-nums}
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:12px}
.store{position:relative;overflow:hidden;border-radius:var(--rad);padding:16px 18px 14px;min-height:196px;color:#fff;display:flex;flex-direction:column;gap:8px;cursor:pointer;
background:linear-gradient(180deg,rgba(6,9,16,.5),rgba(6,9,16,.15) 45%,rgba(6,9,16,.65)),var(--far) bottom/100% 60% no-repeat,var(--near) bottom/100% 42% no-repeat,var(--sc);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .25s var(--ease),box-shadow .25s}
.store:hover{transform:translateY(-3px)}
.store.on{box-shadow:inset 0 0 0 2px #fff,0 16px 40px -20px rgba(0,0,0,.8)}
.store.sc-dawn{--sc:var(--sc-dawn)}.store.sc-ice{--sc:var(--sc-ice)}.store.sc-hill{--sc:var(--sc-hill)}.store.sc-dune{--sc:var(--sc-dune)}.store.sc-dusk{--sc:var(--sc-dusk)}.store.sc-sea{--sc:var(--sc-sea)}.store.sc-aurora{--sc:var(--sc-aurora)}
.store::after{content:'';position:absolute;inset:0;background:var(--noise);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.store header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;opacity:.95;z-index:1}
/* REVIEW: small white text over the lighter band of a scene (Bandra, Indiranagar) needed a shadow to hold up */
.store :is(header>span:not(.chip),.sb span,footer){text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 10px rgba(0,0,0,.35)}
.store header .chip.up{color:#a6f5cf}
.store header .chip{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(10,14,22,.45);color:#fff}
.store header .chip.dn{background:rgba(255,255,255,.92);color:#a3122c}
.store h4{font:700 clamp(30px,3.2vw,40px)/.95 var(--sans);letter-spacing:-.045em;margin-top:auto;z-index:1;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));overflow-wrap:anywhere;padding-bottom:.2em;margin-bottom:-.2em}
.store .sb{z-index:1}
.store .sb b{display:block;font:600 26px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.store .sb span{font-size:11.5px;opacity:.95}
.store .vs{display:grid;gap:4px;z-index:1}
.store .vs span{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}
.store .vs span.p{height:3px}
.store .vs i{display:block;height:100%;border-radius:9px;background:#fff}
.store .vs span.p i{opacity:.55}
.store footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px;opacity:.92;z-index:1}
.staff{display:inline-flex;align-items:center;gap:3px}
.staff i{width:7px;height:7px;border-radius:50%;border:1.5px solid currentColor;display:inline-block}
.staff i.on{background:currentColor}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:10px}
.kv div{display:flex;flex-direction:column}
.kv b{font:600 20px/1.1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kv span{font-size:11.5px;color:var(--txt3);margin-top:3px}
.pipe{display:grid;gap:10px;margin-bottom:12px}
.pr{padding:14px 18px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);display:flex;flex-direction:column;gap:10px}
.pr.hold .stages i{opacity:.45}
.prh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.prh b{font-size:14.5px;font-weight:650}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stages span{display:flex;flex-direction:column;gap:6px;font:500 11px/1.2 var(--sans);color:var(--txt3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stages i{display:block;height:6px;border-radius:100px;background:var(--track)}
.stages .done i{background:var(--good)}
.stages .now i{background:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.25)}
.stages .now{color:var(--txt);font-weight:600}
.prf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--txt3)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.step{padding:13px 12px;border-radius:var(--rad2);background:var(--card2);min-width:0}
.step b{display:block;font:600 30px/1 var(--sans);letter-spacing:-.04em}
.step span{display:block;font:500 11px/1.3 var(--sans);color:var(--txt3);margin-top:7px}
.step.s1{box-shadow:inset 0 2px 0 var(--c4)}.step.s2{box-shadow:inset 0 2px 0 var(--c1)}.step.s3{box-shadow:inset 0 2px 0 var(--c2)}.step.s4{box-shadow:inset 0 2px 0 var(--good)}
.chatwrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;margin-bottom:12px}
.chlist{display:flex;flex-direction:column;gap:4px}
.chrow{display:flex;flex-direction:column;text-align:left;border:1px solid var(--glass-b);background:var(--card);border-radius:var(--rad2);padding:11px 13px;cursor:pointer;position:relative;gap:2px}
.chrow b{font-size:13.5px;font-weight:650}
.chrow span{font-size:11.5px;color:var(--txt3)}
.chrow em{position:absolute;top:10px;right:12px;font:600 10.5px/1 var(--sans);font-style:normal;color:var(--txt3);background:var(--card2);padding:4px 7px;border-radius:100px}
.chrow.on{background:var(--accs);color:var(--acc-ink);border-color:transparent}
.chrow.on span,.chrow.on em{color:inherit;opacity:.8}
/* REVIEW: in the light theme the accent is now the legible (darker) one with white ink; the dimmed secondary text and the
   count badge on a selected row are kept at full strength so they stay above 4.5:1 */
html[data-theme=light] :is(.nv.on .nl small,.chrow.on span){opacity:1}
html[data-theme=light] .chrow.on em{background:rgba(0,0,0,.22);opacity:1}
.chrow.ghost{opacity:.55;border-style:dashed;cursor:default}
.chmain{background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad);padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.chmain .add{margin:0;padding:0;border:0;background:none}
.runs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.run{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-radius:var(--rad2);background:var(--card2)}
.run b{font-size:13px;font-weight:650}
.rz{display:flex;gap:5px;flex-wrap:wrap}
.rz span{display:inline-flex;flex-direction:column;align-items:center;min-width:42px;padding:6px 6px 5px;border-radius:10px;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--track)}
.rz span i{font:600 10px/1 var(--sans);font-style:normal;letter-spacing:.06em;margin-bottom:4px}
.rz .ok{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.rz .low{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.rz .zero{color:var(--crit);background:transparent;border:1.5px dashed color-mix(in srgb,var(--crit) 60%,transparent)}
.run em{font-size:11.5px;color:var(--txt3);font-style:normal}

/* ---------- settings ---------- */
.rolecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:12px}
.rc{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);cursor:pointer;min-width:0}
.rc.on{border-color:rgba(var(--acc-rgb),.6)}
.rc>div{display:flex;flex-direction:column;min-width:0}
.rc b{font-size:14px;font-weight:650}
.rc span{font-size:11.5px;color:var(--txt2)}
.rc em{font:500 11px var(--sans);font-style:normal;color:var(--txt3);margin-top:2px}
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.bopt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 13px;border-radius:var(--rad2);border:1px solid var(--glass-b);background:var(--card2);cursor:pointer;position:relative}
.bopt img{width:28px;height:28px;border-radius:8px;margin-bottom:4px}
.bopt b{font-size:13px;font-weight:650}
.bopt span{font-size:11px;color:var(--txt3)}
.bopt i{position:absolute;top:12px;right:12px;width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 2px var(--card2)}
.bopt.on{border-color:var(--sw);box-shadow:0 0 0 1px var(--sw)}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.form label{display:flex;flex-direction:column;gap:5px;font:600 11px/1 var(--sans);color:var(--txt3);letter-spacing:.04em;text-transform:uppercase}
.form input{flex:none;width:100%;text-transform:none;letter-spacing:0}
.form input[type=file]{padding:7px 10px;font-size:12px}
.form .hint{font:400 11px var(--sans);text-transform:none;letter-spacing:0}
.colorrow{display:flex;gap:6px}
.colorrow input[type=color]{width:44px;flex:none;padding:3px;height:36px}
.colorrow input:not([type=color]){flex:1;width:auto;min-width:0}
.form label{min-width:0}
.prev{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border-radius:var(--rad2);background:var(--bg2);border:1px solid var(--rule2)}
.prev img{width:28px;height:28px;border-radius:8px}
.prev b{font-size:15px;font-weight:700;letter-spacing:-.02em;margin-right:auto}
.pillp,.pills{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:100px;font:700 12.5px/1 var(--sans)}
.pillp{background:var(--accs);color:var(--acc-ink)}
.pills{border:1px solid color-mix(in srgb,var(--good) 45%,transparent);color:var(--good)}
.pillp .ic,.pills .ic{width:14px;height:14px}
.storelist{display:flex;flex-direction:column;gap:6px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:8px;align-items:center}
.srow input{border:1px solid var(--rule);background:var(--card2);border-radius:10px;padding:8px 11px;font:500 13px var(--sans);min-width:0;height:34px}
.srow span{font-size:12px;color:var(--txt3)}
.srow em{font:500 11px var(--sans);font-style:normal;color:var(--txt3)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.planc{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b);position:relative}
.planc.mid{background:linear-gradient(180deg,rgba(var(--acc-rgb),.14),var(--card))}
.planc.on{border-color:rgba(var(--acc-rgb),.7);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.5)}
.planc h3{font-size:22px;font-weight:700;letter-spacing:-.03em}
.planc>b{font:600 30px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.planc>b em{font:500 12px var(--sans);letter-spacing:0;font-style:normal;color:var(--txt3);margin-left:4px}
.planc p{font-size:12.5px;color:var(--txt2);min-height:3.2em}
.planc ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:6px 0 10px;font-size:12.5px;color:var(--txt2)}
.planc li::before{content:'✓';color:var(--good);margin-right:8px;font-weight:700}
.planc .btn{align-self:flex-start;margin-top:auto}
.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.src{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:var(--rad);background:var(--card);border:1px solid var(--glass-b)}
.src.on{border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.srh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.srh b{font-size:15px;font-weight:650}
.src p{font-size:12.5px;color:var(--txt2)}
.src .form{grid-template-columns:1fr}
.srf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.srf span{font-size:11px;color:var(--txt3)}
.synced{list-style:none;font-size:12.5px;color:var(--txt2);display:flex;flex-direction:column;gap:4px}
.synced li::before{content:'✓';color:var(--good);margin-right:7px;font-weight:700}
.drop{border:1px dashed var(--rule)!important;border-radius:12px;padding:16px;text-align:center;cursor:pointer;position:relative;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;color:var(--txt2)!important;display:block!important}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.modc{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:13px 14px;border-radius:var(--rad2);border:1px solid var(--glass-b);background:var(--card2);cursor:pointer}
.modc b{font-size:13px;font-weight:650}
.modc span{font-size:11.5px;color:var(--txt3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modc:hover{border-color:var(--txt3)}
.abtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.keys{display:grid;gap:8px}
.keys div{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt2)}
.keys span{margin-left:6px}
.skel{display:grid;gap:8px}
.skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--track) 25%,var(--card2) 50%,var(--track) 75%);background-size:200% 100%;animation:shim 1.2s linear infinite}
.skel i:nth-child(2){width:80%}.skel i:nth-child(3){width:60%}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
.locked{text-align:center;padding:40px 20px;background:var(--card);border:1px dashed var(--rule);border-radius:var(--rad);display:flex;flex-direction:column;align-items:center;gap:10px}
.locked .lk{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--acc-rgb),.16);color:var(--accs)}
.locked .k{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.locked p{color:var(--txt2);font-size:13px;max-width:52ch}
.lbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.store::before{content:'';position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--sc-acc,#fff);opacity:.9;z-index:1}
.boottag{font:500 12px/1.4 var(--sans);color:var(--txt3);margin-top:-8px;text-align:center;max-width:280px}

/* ---------- brand studio ---------- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.bstudio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:16px;align-items:start;margin-bottom:12px}
.bctl{min-width:0;display:flex;flex-direction:column;gap:12px}
.bctl fieldset.bro{border:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.bsec{background:var(--card);border:1px solid var(--glass-b);border-radius:var(--rad);padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.bsh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bsh h3{font-size:15px;font-weight:650;letter-spacing:-.015em}
.bsh span{font:500 11px/1.3 var(--sans);color:var(--txt3)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld .fl,.fld .fl label{font:600 11px/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--txt3)}
.fld input:not([type=color]):not([type=radio]):not([type=checkbox]):not([type=file]),.fld select,.bsec .brow input,.mr input,.srow input:not([type=color]){border:1px solid var(--rule);background:var(--card2);border-radius:12px;padding:8px 11px;font:500 13px var(--sans);color:var(--txt);min-width:0;height:36px;width:100%}
.fld input:focus,.fld select:focus,.bsec .brow input:focus,.mr input:focus,.srow input:focus{outline:none;border-color:var(--accs);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.colorrow{display:flex;gap:6px;align-items:center}
.colorrow input[type=color],.srow input[type=color]{width:44px;flex:none;padding:3px;height:36px;border:1px solid var(--rule);border-radius:12px;background:var(--card2);cursor:pointer}
.colorrow input:not([type=color]){flex:1;font-family:var(--mono)!important;text-transform:lowercase}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:14px;background:var(--card2);border:1px solid var(--glass-b);width:max-content;max-width:100%}
.seg label{position:relative;display:flex}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;font:600 12px/1.1 var(--sans);color:var(--txt2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.seg span b{font-size:15px;font-weight:600}
.seg label:hover span{color:var(--txt)}
.seg input:checked+span{background:var(--accs);color:var(--acc-ink)}
.seg input:focus-visible+span{outline:2px solid var(--accs);outline-offset:2px}
.seg input:disabled+span{cursor:default;opacity:.6}
.seg.sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:6px;padding:6px}
.seg.sw span{height:46px;border-radius:10px;align-items:flex-end;padding:6px 8px;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.seg.sw span em{font:600 10.5px/1 var(--sans);font-style:normal;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.seg.sw input:checked+span{background-color:transparent;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--accs);color:#fff}
.filerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.thumb{width:36px;height:36px;border-radius:10px;object-fit:contain;background:var(--card2);border:1px solid var(--rule2);flex:none}
.fbtn{position:relative;cursor:pointer}
.fbtn:focus-within{outline:2px solid var(--accs);outline-offset:2px}
.hint{font:400 11.5px/1.45 var(--sans);color:var(--txt3);text-transform:none;letter-spacing:0}
.hint b{color:var(--txt2);font-weight:600}
.bmsg{min-height:1em}.bmsg:empty{display:none}
.bmsg:not(:empty){padding:10px 14px;border-radius:var(--rad2);background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.35);color:var(--txt)}
.brow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.brow input{flex:1 1 160px}
.bopt.saved{cursor:default}
.bopt .brow{margin-top:6px}
.mods-ed{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.mg{padding:12px;border-radius:var(--rad2);background:var(--card2);display:flex;flex-direction:column;gap:6px;min-width:0}
.mgh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mgh b{font-size:13px;font-weight:650}
.mgi{display:flex;align-items:center;gap:7px;min-width:0;flex:1}
.mgi .ic{width:16px;height:16px;color:var(--txt3)}
.mgh input.secname{height:32px;border:1px solid transparent;background:transparent;border-radius:10px;padding:6px 8px;font:650 13px var(--sans);color:var(--txt);min-width:0;width:100%}
.mgh input.secname::placeholder{color:var(--txt);opacity:1}
.mgh input.secname:hover{border-color:var(--rule)}
.mgh input.secname:focus{outline:none;border-color:var(--accs);background:var(--card2);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.tb.sq{padding:5px 7px}
.mr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}
.mr .brow{gap:3px;flex-wrap:nowrap}
.mr input{height:32px!important;font-size:12.5px!important}
.chk{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--sans);color:var(--txt2);cursor:pointer;white-space:nowrap}
.chk input{width:16px;height:16px;accent-color:var(--accs)}
.tb:disabled{opacity:.35;cursor:default}
.hts{list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:ht}
.hts li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-radius:12px;background:var(--card2);font-size:13px;font-weight:600;counter-increment:ht}
.hts li>span:first-child::before{content:counter(ht);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-right:8px;background:var(--accs);color:var(--acc-ink);font-size:11px}
.srow.st2{grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) auto}
/* live preview */
.bpv{position:sticky;top:80px;display:flex;flex-direction:column;gap:10px;min-width:0}
body:has(.tm.on) .bpv{top:132px}
.bpvh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0 4px}
.bpvh b{font-size:13px;font-weight:650}.bpvh span{font:500 11px var(--sans);color:var(--txt3)}
.bpvt{display:none;margin-left:auto}.bpvh{align-items:center}
.bsec .hint:empty{display:none}
.mh{border-radius:var(--rad);border:1px solid var(--glass-b);background:var(--bg);overflow:hidden;box-shadow:var(--shadow);font-size:12px;position:relative;isolation:isolate}
.mh::before{content:'';position:absolute;inset:0;background:var(--ambient);z-index:-1}
.mh-top{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rule2);background:var(--glass)}
.mh-top img{width:20px;height:20px;border-radius:6px}
.mh-top b{font-weight:700;font-size:12.5px;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mh-run{display:inline-flex;align-items:center;gap:4px;background:var(--accs);color:var(--acc-ink);font:700 10.5px/1 var(--sans);padding:6px 10px;border-radius:100px;white-space:nowrap}
.mh-run .ic{width:12px;height:12px}
.mh-body{display:grid;grid-template-columns:auto minmax(0,1fr)}
.mh-side{display:flex;flex-direction:column;gap:2px;padding:8px 6px;border-right:1px solid var(--rule2)}
.mh-side span{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:9px;color:var(--txt2);font-size:10.5px;font-weight:600}
.mh-side span.on{background:var(--accs);color:var(--acc-ink)}
.mh-side .ic{width:13px;height:13px}
.mh-side em{font-style:normal}
body.side-icons .mh-side em{display:none}
.mh-main{padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mh-k{font:600 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.mh-h{font:700 22px/1 var(--sans);letter-spacing:-.04em}
.mh .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.mh .tile{min-height:0;padding:9px 10px;border-radius:calc(var(--rad) * .55)}
.mh .tile b{font-size:18px}
.mh .tile .lb{font-size:10px;padding-top:6px}.mh .tile .dl{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh .card{padding:10px;border-radius:calc(var(--rad) * .55);flex:none}
.mh .card .ch{margin-bottom:6px}.mh .card h3{font-size:11.5px}
.mh-bars{display:grid;gap:4px}
.mh-bars div{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:10px;color:var(--txt2)}
.mh-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-bars i{height:7px;border-radius:9px;display:block}
.mh-bars b{font-weight:600;color:var(--txt);font-size:10px}
.mh-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mh-pills .pillp{height:26px;padding:0 10px;font-size:10.5px}
/* REVIEW: was the secondary colour as text on its own tint (2.9:1 in light). The colour is the ring and dot now, the text stays ink */
.mh-sec{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:100px;background:color-mix(in srgb,var(--c2) 18%,transparent);color:var(--txt);font:700 10.5px/1 var(--sans);border:1px solid color-mix(in srgb,var(--c2) 55%,transparent)}
.mh-sec::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c2)}
.mh-fmt{font:600 10.5px var(--sans);color:var(--txt2);margin-left:auto}
.mh-sign{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 14px 18px;border-top:1px solid var(--rule2);background:var(--glass)}
.mh-sign img{width:34px;height:34px;border-radius:10px}
.mh-sign b{font-size:14px;font-weight:700;letter-spacing:-.02em}
.mh-sign>span:not(.pillp){font-size:11px;color:var(--txt2);max-width:30ch}
.mh-sign .pillp{height:30px;font-size:11px;margin-top:4px}
.mh-sign em{font:500 10px var(--sans);font-style:normal;color:var(--txt3)}

/* ---------- workspace look: background, corners, density, cards, sidebar (Brand studio) ---------- */
html[data-theme=dark][data-bg=graphite]{--bg:#111215;--bg2:#17181c;--solid:#1b1d22;--glass:rgba(22,23,27,.8);--card:rgba(255,255,255,.05);
--ambient:radial-gradient(55% 45% at 90% -10%,rgba(var(--acc-rgb),.12),transparent 60%),linear-gradient(180deg,#15161a,#101114)}
html[data-theme=dark][data-bg=midnight]{--bg:#060b1c;--bg2:#0b1228;--solid:#0f1731;--glass:rgba(8,13,32,.78);--card:rgba(140,170,255,.055);--card2:rgba(140,170,255,.09);
--ambient:radial-gradient(60% 50% at 85% -10%,rgba(var(--acc-rgb),.26),transparent 60%),radial-gradient(50% 45% at 0% 40%,rgba(90,120,255,.14),transparent 60%),linear-gradient(180deg,#0a1230,#060b1c)}
html[data-radius=sharp]{--rad:8px;--rad2:6px}
html[data-radius=round]{--rad:30px;--rad2:22px}
html[data-radius=sharp] :is(.btn,.tbtn,.cyc,.roles,.roles button,.tabs,.tab,.chip,.tb,.perm,.storesel,.rolesel,.gsel,.shk .scope,.mb,.dock,.dock button,.sideroles,.sideroles button,.st,.srch,.more,.priv,.pchip,.seg,.seg span,.nv,.subs .sub,.mh-run,.pillp,.pills,.slist,.slist [role=option]){border-radius:6px}
html[data-density=compact] body{font-size:13px}
html[data-density=compact] main{padding-top:18px}
html[data-density=compact] .sh{margin-bottom:14px}
html[data-density=compact] h1{font-size:clamp(34px,4.8vw,62px)}
html[data-density=compact] .tile{min-height:108px;padding:14px 16px}
html[data-density=compact] .tile b{font-size:clamp(24px,2.3vw,32px)}
html[data-density=compact] :is(.card,.pnl,.bsec){padding:13px 15px}
html[data-density=compact] details.dt{padding:0}
html[data-density=compact] details.dt summary{padding:12px 15px}
html[data-density=compact] :is(.grid,.tiles,.two,.stores,.desks,.dcs,.costgrid){gap:8px;margin-bottom:8px}
html[data-density=compact] td{padding:6px 10px 6px 0}
html[data-density=compact] .nv{padding:6px 11px}
html[data-card=solid]{--card:var(--bg2)}
html[data-card=solid] :is(.tile,.card,.pnl,.dc,.bsec){backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-card=outline]{--card:transparent;--glass-b:var(--rule)}
html[data-card=outline] :is(.tile,.card,.pnl,.dc,.bsec){backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
@media(min-width:1101px){
body.side-icons .shell{grid-template-columns:78px minmax(0,1fr)}
body.side-icons #side{padding:14px 10px}
body.side-icons :is(.nv .nl,.nv .pchip,.subs,.privs){display:none}
body.side-icons .nv{justify-content:center;padding:12px 0}
body.side-icons .nv .ic{width:22px;height:22px}
body.side-icons .sidefoot{flex-direction:column}
body.side-icons .sidefoot .btn{font-size:10px;padding:0 4px}
}

/* ---------- charts ---------- */
.vz-dial{position:relative;width:var(--dial,140px);aspect-ratio:1;flex:none}
.vz-dial svg,.vz-ring svg,.vz-dw svg{display:block;width:100%;height:100%;overflow:visible}
.vz-dial circle{fill:none}
.vz-dial .trk{stroke:var(--track);stroke-width:6;stroke-dasharray:75 100;stroke-linecap:round}
.vz-dial .val{stroke:var(--accs);stroke-width:6;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease)}
.vz-dial .tks{stroke:var(--txt3);stroke-width:4;stroke-dasharray:.35 2.15;opacity:.35}
.vz-dial.crit .val,.vz-ring.crit .val{stroke:var(--crit)}
.vz-dial.warn .val,.vz-ring.warn .val{stroke:var(--warn)}
.vz-dial.good .val,.vz-ring.good .val{stroke:var(--good)}
.vz-dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.vz-dc b{font:600 calc(var(--dial,140px)*.24)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.vz-dc span{font:600 9.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-top:5px}
.vz-ring{position:relative;width:60px;aspect-ratio:1;flex:none}
.vz-ring circle{fill:none;stroke-width:7}
.vz-ring .trk{stroke:var(--track)}
.vz-ring .val{stroke:var(--accs);stroke-linecap:round}
.vz-ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 13px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dialwrap.sm .vz-ring{width:84px}
.dialwrap.sm .vz-ring b{font-size:18px}
.vz-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.vz-dw{position:relative;width:148px;aspect-ratio:1;flex:none}
.vz-dw .seg{fill:none;stroke-width:11;transition:stroke-width .2s}
.vz-dw .seg:hover{stroke-width:14}
.vz-dw .vz-dc b{font-size:22px}
.vz-lg{list-style:none;display:grid;gap:7px;flex:1 1 160px;min-width:0;max-width:440px}
.vz-lg li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2);min-width:0}
.vz-lg li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-lg li i{width:10px;height:10px;border-radius:3px;flex:none}
.vz-lg li b{margin-left:auto;color:var(--txt);font:600 11.5px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.vz-lg.row{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:11px}
.vz-lg.row li b{margin-left:3px}
.vz-bars{display:grid;gap:3px}
.vz-br{display:grid;grid-template-columns:minmax(64px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 0;font-size:12.5px}
.vz-br .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt2);font-weight:500}
.vz-br .t{height:9px;border-radius:100px;background:var(--track);overflow:hidden}
.vz-br .t i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,rgba(var(--acc-rgb),.45),var(--accs));transition:width .7s var(--ease)}
.vz-br .v{font:600 11.5px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--txt)}
.vz-br.in .t i,.vz-br.ok .t i{background:linear-gradient(90deg,color-mix(in srgb,var(--good) 45%,transparent),var(--good))}
.vz-br.out .t i,.vz-br.crit .t i{background:linear-gradient(90deg,color-mix(in srgb,var(--crit) 45%,transparent),var(--crit))}
.vz-br.warn .t i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 45%,transparent),var(--warn))}
.vz-br.cash .t i{background:linear-gradient(90deg,color-mix(in srgb,var(--ultra) 45%,transparent),var(--ultra))}
.vz-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;height:178px}
.vz-col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.vz-col .c{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:10px}
.vz-col .c i{display:block;width:min(100%,46px);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--accs),rgba(var(--acc-rgb),.35));transition:height .7s var(--ease)}
.vz-col .v{font:600 10.5px var(--sans);color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.vz-col .l{font:600 9.5px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vz-col .f em{font:600 9px/1 var(--sans);font-style:normal;color:var(--crit);white-space:nowrap}
.vz-stack{display:flex;gap:2px;height:16px;border-radius:100px;overflow:hidden;background:var(--track)}
.vz-stack i{min-width:4px;transition:flex .6s var(--ease)}
.vz-plot{position:relative;margin-top:8px;--vz-line:var(--accs)}
.vz-area{--vz-line:var(--accs);cursor:crosshair;touch-action:pan-y}
.vz-plot svg{display:block;width:100%;height:100%;overflow:visible}
.vz-plot .gl{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.vz-plot .ln{stroke:var(--vz-line);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.vz-end,.vz-pt{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--vz-line);transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--dotring);pointer-events:none}
.vz-xh{position:absolute;top:0;bottom:0;width:1px;background:var(--txt3);opacity:.7;pointer-events:none}
.vz-xh[hidden],.vz-pt[hidden]{display:none}
.vz-ax{display:flex;justify-content:space-between;font:600 10px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--txt3);margin-top:7px}
.vz-funnel{display:grid;gap:7px}
.vz-funnel div{display:grid;grid-template-columns:96px minmax(0,1fr) 34px;gap:10px;align-items:center;font-size:12px}
.vz-funnel span{color:var(--txt2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz-funnel i{display:block;height:22px;border-radius:8px;margin:0 auto;transition:width .7s var(--ease)}
.vz-funnel b{font:600 12px var(--sans);text-align:right}
.spk{width:100%;height:34px;color:var(--accs)}
.tip{position:fixed;z-index:300;pointer-events:none;max-width:270px;padding:8px 11px;border-radius:11px;background:var(--tip-bg);color:var(--tip-ink);font:550 12px/1.35 var(--sans);box-shadow:0 12px 30px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}
.tip[hidden]{display:none}

/* ---------- phone tab bar, search, tour, sheet, boot ---------- */
.dock{display:none}
.kbar{position:fixed;inset:0;z-index:120;background:rgba(5,6,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:start center;padding:12vh 16px 20px;opacity:0;transition:opacity .2s}
.kbar[hidden]{display:none}.kbar.on{opacity:1}
.kbox{width:min(640px,100%);background:var(--solid);border:1px solid var(--glass-b);border-radius:22px;box-shadow:var(--shadow),0 40px 90px rgba(0,0,0,.45);overflow:hidden;transform:translateY(8px);transition:transform .25s var(--ease)}
.kbar.on .kbox{transform:none}
.kin{display:flex;align-items:center;gap:10px;padding:6px 16px;border-bottom:1px solid var(--rule2)}
.kin .ic{color:var(--txt3)}
.kin input{flex:1;border:0;background:none;padding:12px 0;font:400 15px var(--sans);color:var(--txt);min-width:0}
.kin input:focus{outline:none}
.kres{max-height:min(52vh,440px);overflow-y:auto;padding:6px}
.kg{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);padding:10px 12px 5px}
.ki{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:12px;cursor:pointer;color:var(--txt)}
.ki b{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ki span{font-size:12px;color:var(--txt3);white-space:nowrap}
.ki.on,.ki:hover{background:var(--card2)}
.ki.on{box-shadow:inset 3px 0 0 var(--accs)}
.kft{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--rule2);font:500 11px var(--sans);color:var(--txt3)}
.kft span{display:inline-flex;align-items:center;gap:4px}
.tour{position:fixed;z-index:95;right:22px;bottom:22px;width:min(380px,calc(100vw - 32px));background:var(--solid);border:1px solid var(--glass-b);border-radius:22px;padding:18px 19px 16px;box-shadow:var(--shadow),0 24px 60px rgba(0,0,0,.35);
opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tour.on{opacity:1;transform:none}
.tour[hidden]{display:none}
.tstep{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.tstep span{font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accs)}
html[data-theme=light] .tstep span{color:var(--acc-deep)}
.tstep b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.tour p{font-size:13px;line-height:1.6;color:var(--txt2)}
.trow{display:flex;gap:8px;justify-content:flex-end;margin-top:13px}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(5,6,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:start center;padding:60px 18px;overflow-y:auto;opacity:0;transition:opacity .3s}
.scrim[hidden]{display:none}.scrim.on{opacity:1}
.sheet{width:min(760px,100%);background:var(--solid);border:1px solid var(--glass-b);border-radius:26px;padding:26px 28px 30px;box-shadow:0 30px 70px rgba(0,0,0,.4);transform:translateY(14px);transition:transform .35s var(--ease)}
.scrim.on .sheet{transform:none}
.sheet h2{font-size:24px;font-weight:700;letter-spacing:-.03em}
.sheet .k{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accs);margin-bottom:11px}
html[data-theme=light] .sheet .k{color:var(--acc-deep)}
.sheet p{color:var(--txt2);font-size:13.5px;line-height:1.7;margin-top:11px}
.sheet p b{color:var(--txt);font-weight:600}
.sheet p.dim{font-size:12.5px}
.sheet h3{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin:22px 0 9px}
.sheet .ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.sheet .bx{border:1px solid var(--glass-b);border-radius:16px;padding:13px 14px;background:var(--card2)}
.sheet .bx b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.sheet .bx.a b{color:var(--crit)}.sheet .bx.b b{color:var(--good)}
.sheet .bx p{margin:0;font-size:12.5px}
.sheet ul{margin:9px 0 0 17px;color:var(--txt2);font-size:13px;line-height:1.75}
.sheet ul b{color:var(--txt);font-weight:600}
.sheet .x{float:right;border:1px solid var(--glass-b);background:var(--card2);border-radius:100px;width:34px;height:34px;cursor:pointer;font-size:18px;color:var(--txt3);line-height:1}
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;cursor:pointer;transition:opacity .5s var(--ease),visibility .5s}
.boot::before{content:'';position:absolute;inset:0;background:var(--ambient)}
.boot.gone{opacity:0;visibility:hidden}
.bootin{position:relative;display:flex;flex-direction:column;align-items:center;gap:17px;perspective:640px}
.bootlogo{width:64px;height:64px;border-radius:18px;transform-style:preserve-3d;animation:knot 2.4s cubic-bezier(.55,.06,.3,.96) infinite;box-shadow:0 18px 44px rgba(0,0,0,.35)}
@keyframes knot{0%{transform:rotateY(0deg) rotateX(0deg)}50%{transform:rotateY(180deg) rotateX(10deg)}100%{transform:rotateY(360deg) rotateX(0deg)}}
.bootname{font:700 13px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--txt)}
.bootbar{width:196px;height:3px;border-radius:3px;background:var(--track);overflow:hidden}
.bootbar b{display:block;height:100%;width:0;background:var(--accs);animation:fill 1.3s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.bootlog{font:500 11px/1.75 var(--mono);color:var(--txt3);text-align:center;min-height:56px}
.bootlog b{color:var(--good);font-weight:600}
.bootlog span{display:block;opacity:0;animation:lg .3s var(--ease) forwards}
@keyframes lg{to{opacity:1}}
.bootskip{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);opacity:.7}
body.booting{overflow:hidden}
body.booting .top,body.booting #side,body.booting main{opacity:0}
body.booted .top{animation:dropin .5s var(--ease) forwards}
body.booted #side{animation:slidein .55s .05s var(--ease) forwards}
body.booted main{animation:risein .55s .12s var(--ease) forwards}
@keyframes dropin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes risein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- touch ---------- */
@media(hover:none){
.tile[data-go]::before{opacity:.7}
.tile[data-go]:hover{transform:none}
.nv:hover{background:transparent}.nv.on:hover{background:var(--accs)}
.store:hover{transform:none}
}

/* ---------- tablet & phone: drawer, tab bar ---------- */
@media(max-width:1100px){
.shell{grid-template-columns:minmax(0,1fr)}
.mb{display:grid}
.top{--px:14px;padding-top:9px;padding-bottom:9px;gap:8px}
.priv{display:none}
.roles,.rolesel{display:none!important}
.sideroles{display:flex;margin:0 2px 12px;padding:3px;border:1px solid var(--glass-b);border-radius:100px;background:var(--card2)}
.sideroles button{flex:1;border:0;background:none;padding:9px 4px;cursor:pointer;font:600 11px/1 var(--sans);color:var(--txt3);border-radius:100px}
.sideroles button.on{background:var(--accs);color:var(--acc-ink)}
#side{position:fixed;top:0;left:0;bottom:0;z-index:96;width:min(320px,86vw);height:auto;background:var(--solid);padding:14px 12px calc(24px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-shadow:16px 0 44px rgba(0,0,0,.3);
transform:translateX(-103%);transition:transform .3s var(--ease);overscroll-behavior:contain}
body.nav #side{transform:none}
body.booted #side{animation:none;opacity:1}
.navscrim{display:block;position:fixed;inset:0;z-index:95;background:rgba(5,6,10,.5);opacity:0;pointer-events:none;transition:opacity .28s;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body.nav .navscrim{opacity:1;pointer-events:auto}
body.nav{overflow:hidden}
body.nav .dock{opacity:0;pointer-events:none}
.tm{top:60px;--px:14px;padding-top:8px;padding-bottom:8px;gap:10px}
/* the page has to scroll clear of the tab bar and the home indicator */
main{--mx:18px;padding-top:18px;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
/* glass that does not rely on blur: where backdrop-filter is off or unsupported the bar stays readable */
.dock{display:flex;position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:2px;padding:6px;border-radius:100px;width:max-content;max-width:calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
background:color-mix(in srgb,var(--solid) 94%,transparent);border:1px solid var(--glass-b);box-shadow:0 20px 44px rgba(0,0,0,.35);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8)}
.dock button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;padding:7px 8px 6px;border-radius:100px;cursor:pointer;font:600 9.5px/1 var(--sans);color:var(--txt2)}
.dock button .ic{width:20px;height:20px}
.dock button.on{background:var(--accs);color:var(--acc-ink)}
.tour{bottom:94px}
.plans{grid-template-columns:minmax(0,1fr)}
.chatwrap{grid-template-columns:minmax(0,1fr)}
.chlist{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chrow{flex:0 0 200px}
.rhero{grid-template-columns:minmax(0,1fr)}
.bstudio{grid-template-columns:minmax(0,1fr)}
/* REVIEW: the preview used to sit, full height, above ~1,000px of controls on a phone, so every change landed off
   screen. It is now a sticky strip under the top bar that scrolls inside itself and can be folded away. */
.bpv{position:sticky;top:62px;z-index:20;order:-1;padding:10px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6)}
body:has(.tm.on) .bpv{top:113px}
.bpv:not(.open) .mh{display:none}
.bpv.open .mh{max-height:min(44vh,520px);overflow:auto;overscroll-behavior:contain}
.bpvt{display:inline-flex}
}
@media(max-width:640px){
.top{min-height:58px;--px:10px;padding-top:8px;padding-bottom:8px;gap:5px}
.lg{font-size:13.5px}
.lg img{width:24px;height:24px}
.storesel{display:none}
.tbtn span,.tbtn kbd{display:none}
.tbtn{width:36px;padding:0;justify-content:center}
.day{display:none}
.cyc{height:38px;padding:0 12px;gap:6px;font-size:12.5px}
.cyc .ic{width:16px;height:16px}
.lg{gap:6px}
.tm{top:58px;flex-wrap:wrap;row-gap:4px}
.tm input[type=range]{order:9;flex:1 0 100%;height:30px}
main{--mx:14px;padding-top:14px;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
h1{font-size:clamp(38px,11.5vw,52px);margin-bottom:8px}
.sh{margin-bottom:14px}
.tabs{width:100%}
.tabs .tab{flex:none}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tile{min-height:112px;padding:15px 16px;border-radius:18px}
.tile b{font-size:30px}
.tile.has-ring b{padding-right:36px}
.mini-ring{width:30px;height:30px;top:13px;right:13px}
.card,.pnl{border-radius:18px;padding:15px 15px}
.card{flex-basis:100%}
details.dt summary{padding:14px 15px}
details.dt .dtb{padding:0 15px 15px}
.two{grid-template-columns:minmax(0,1fr)}
.dcs{grid-template-columns:minmax(0,1fr)}
.dc{flex-direction:column;align-items:stretch;gap:10px}
.dcb{justify-content:flex-start}
.vz-dial{--dial:120px}
.vz-dw{width:128px}
.vz-cols{height:150px}
.big b{font-size:32px}
.rhero{padding:20px;border-radius:22px}
.rhero .hl b{font-size:46px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages span{font-size:9.5px}
.srow{grid-template-columns:minmax(0,1fr) auto}
.srow span{display:none}
.srow.st2{grid-template-columns:44px minmax(0,1fr)}
.srow.st2>:nth-child(n+3){grid-column:2}
.srow.st2>.tb,.srow.st2>em{justify-self:start}
.bsec{padding:15px;border-radius:18px}
.seg span{padding:8px 10px}
.seg.sw{grid-template-columns:repeat(4,minmax(0,1fr))}
.scrollx table{min-width:560px}
.add input,.add select{font-size:16px}
.first{padding:14px 16px}
.kbar{padding:8vh 10px 10px}
.sheet{padding:20px 18px 26px;border-radius:20px}
.sheet h2{font-size:20px}
.sheet .ba{grid-template-columns:1fr}
.bpv{top:58px;padding:8px}body:has(.tm.on) .bpv{top:143px}.bpv.open .mh{max-height:34vh}.bpvh span{display:none}
.sidefoot{gap:6px}
.sidefoot .btn{flex:1 1 30%;justify-content:center;padding:0 8px}
}

/* ---------- touch screens: 44px targets (desktop with a mouse is unchanged) ---------- */
@media(pointer:coarse){
.tbtn,.mb{min-width:44px;height:44px}
.mb{width:44px;flex-basis:44px}
.top{padding-top:7px;padding-bottom:7px}
.cyc,.btn,.tab,.chip,.tb,.shk .scope,#storeBtn,#roleBtn,#roles button,.sideroles button,.subs .sub,.sidefoot .btn{min-height:44px}
.storesel,.rolesel{height:44px}
.roles{padding:0}
th[tabindex]{padding-top:13px;padding-bottom:13px}
.top>.lg{min-width:44px;min-height:44px}
.srch input,.kin input{min-height:44px}
.dock button{min-height:44px}
.dock{background:color-mix(in srgb,var(--solid) 96%,transparent)}
}
@media(pointer:coarse) and (max-width:640px){.top{padding-top:6px;padding-bottom:6px}}

/* ---------- phones on their side (iPhone landscape): a compact tab bar that leaves room for the page ---------- */
@media(max-width:1100px) and (orientation:landscape) and (max-height:500px){
.dock{bottom:calc(6px + env(safe-area-inset-bottom,0px));padding:4px}
.dock button{flex-direction:row;gap:6px;min-width:0;min-height:44px;padding:4px 12px;font-size:11px}
.dock button .ic{width:18px;height:18px}
main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.tour{bottom:64px}
}

/* ---------- motion, print ---------- */
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
body.booting .top,body.booting #side,body.booting main{opacity:1}
.bootbar b{width:100%}.bootlog span{opacity:1}
}
@media print{
html,html[data-theme=dark],html[data-theme=light]{--bg:#fff;--bg2:#fff;--card:#fff;--card2:#f3f4f6;--rule:#cfd3da;--rule2:#e3e6ea;--txt:#000;--txt2:#333;--txt3:#555;
--track:#e6e8ec;--grid:#d5d8de;--accs:#3b6fd6;--acc-ink:#fff;--acc-deep:#2b4f9e;--good:#0a7d4f;--warn:#8a5d00;--serious:#b8430c;--crit:#c01d3a;--ultra:#1d4ed8;
--a1:#2fae78;--a2:#dca400;--a3:#e8742c;--a4:#cf2c4a;--c1:#2f7fd6;--c2:#d9772f;--c3:#1f9c6a;--c4:#7c56d9;--c5:#d64a6e;--c6:#8c95a3;--dotring:#fff}
.top,.tm,#side,.dock,.tour,.kbar,.scrim,.bgfx,.boot,.shact,.tabs,.tb,.btn,.first,.note,.mini-ring{display:none!important}
html,body{background:#fff!important;color:#000!important}
.shell{display:block}
main{padding:0;max-width:none}
.tile,.card,.pnl,.dc,.msg,.cc,.desk{background:#fff!important;border:1px solid #ccc!important;color:#000!important;box-shadow:none!important;backdrop-filter:none!important;break-inside:avoid}
.tile.hero,.tile.bad,.tile.ok{color:#000!important}
.tile .lb,.tile .dl,.sub,.dcm,.msg .bd,.ch span{color:#333!important}
h1{color:#000!important;background:none!important;-webkit-text-fill-color:#000;font-size:32pt}
details.dt{display:block}details.dt[open],details.dt:not([open]){display:block}
details.dt .dtb{display:block!important}
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.two{display:grid;grid-template-columns:1fr 1fr}
}