/* ==== MOBILE CONTRACT (full text: docs/MOBILE_UI.md) ====================================================
   Breakpoints: phone @media(max-width:640px) · tablet @media(min-width:641px) and (max-width:1024px) · desktop >1024px
   = the original look, NEVER change un-queried rules. Touch: @media(hover:none) and (pointer:coarse); html.is-touch.
   Tap targets >= var(--tap) 44px · phone base font 15px · inputs 16px (no iOS zoom) · no horizontal page scroll ·
   safe areas env(safe-area-inset-*) · fixed bottom UI sits above calc(var(--tabbar-h) + env(safe-area-inset-bottom)).
   Utilities: .m-hide .m-only .t-hide .t-only .d-only .m-stack .t-stack .table-scroll (sticky 1st col) .m-cards
   (table rows -> cards via td[data-label]) .chips/.chip(.on) .sheet/.sheet-card/.sheet-h/.sheet-x (SalexSheet.open(id))
   .m-section (<details>) .m-pad .m-full .m-sticky .tap .m-big. Tokens: --tap --tabbar-h --gap-1..4 --radius
   --fs-s/m/l/xl --sans. Page CSS: mobile-stock.css (M2) and mobile-lists.css (M3) load after this file.
   ======================================================================================================== */
:root{--bg:#0b0e13;--panel:#11161e;--panel2:#161c26;--line:#222b38;--txt:#d7dde6;--mut:#7d8796;
--acc:#ff9f1c;--up:#2ecc71;--dn:#ff4d4f;--amb:#f5c542;--blue:#4ea1ff;font-size:12.5px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--txt);
font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
.topbar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#06080b;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:nowrap}
.brand{flex:none}
@media(max-width:900px){.topbar{flex-wrap:wrap}.stages{flex-wrap:wrap}}
.brand{font-weight:800;color:var(--acc);letter-spacing:1px}.brand span{color:var(--txt);font-weight:400;margin-left:2px}
.cmd{position:relative;flex:1 1 300px;min-width:180px;max-width:560px}
.cmd input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--acc);padding:6px 8px;font:inherit;border-radius:3px;text-transform:uppercase}
.cmd input:focus{outline:1px solid var(--acc)}
.suggest{position:absolute;top:100%;left:0;right:0;background:var(--panel2);border:1px solid var(--line);display:none;max-height:320px;overflow:auto}
.suggest a{display:block;padding:4px 8px;color:var(--txt)}.suggest a:hover,.suggest a.sel{background:#223;text-decoration:none}
.stages{display:flex;gap:2px;flex-wrap:nowrap;align-items:center;white-space:nowrap;flex:1 1 auto;min-width:0}.stages>a{padding:4px 8px;color:var(--mut);border-radius:3px}
.stages>a.on,.stages>a:hover{background:var(--panel2);color:var(--txt);text-decoration:none}.stages b{color:var(--acc)}
.stages>*{flex:none}.stages .tb-sp{flex:1 1 0;min-width:0}
/* grouped top-bar menus (NAV "group"): click / Enter / ↓ opens, hover opens on mouse devices, Esc closes */
.ngs{display:flex;gap:2px;align-items:center}.ngs>a{padding:4px 8px;color:var(--mut);border-radius:3px}.ngs>a.on,.ngs>a:hover{background:var(--panel2);color:var(--txt);text-decoration:none}
.ng{position:relative}
body.ob-touring .ng.open>.ng-m{z-index:1001}
.ng-b{background:none;border:1px solid transparent;color:var(--mut);font:inherit;padding:4px 8px;border-radius:3px;cursor:pointer;display:flex;gap:4px;align-items:center}
.ng-b i{font-style:normal;font-size:9px;opacity:.7}
.ng.on>.ng-b{color:var(--txt);background:var(--panel2)}.ng.on>.ng-b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc)}
.ng-b:hover,.ng.open>.ng-b,.ng-b:focus-visible{color:var(--txt);background:var(--panel2);border-color:var(--line);outline:none}
.ng-m{display:none;position:absolute;left:0;top:calc(100% + 2px);min-width:200px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:4px 0;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ng.open>.ng-m{display:block}
@media(hover:hover){.ng:hover>.ng-m{display:block}}
.ng-m a{display:block;padding:5px 12px;color:var(--txt);white-space:nowrap}.ng-m a em{display:block;font-style:normal;font-size:10px;color:var(--mut)}
.ng-m a:hover,.ng-m a:focus{background:#223;text-decoration:none;outline:none}.ng-m a.on{color:var(--acc)}
.suggest a.cmdpg b{color:var(--blue)}
@media(max-width:1360px){.um-name{display:none}}
.live-link{color:var(--up)!important}
.shell{display:grid;grid-template-columns:150px 1fr;min-height:calc(100vh - 40px)}
.side{border-right:1px solid var(--line);padding:8px;background:#0a0d11}.side-h{color:var(--mut);font-size:11px;margin:10px 0 4px}
.wl{list-style:none;padding:0;margin:0}.wl li{padding:2px 0}
.main{padding:12px 16px;min-width:0}
.h{font-size:18px;margin:0 0 6px}.muted{color:var(--mut)}.small{font-size:11px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px;margin:8px 0}
.card.warn{border-color:var(--amb)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.card h3{margin:0 0 8px;font-size:12px;color:var(--acc);text-transform:uppercase;letter-spacing:.5px}
table.grid{border-collapse:collapse;width:100%}
.grid th,.grid td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.grid th{color:var(--mut);font-weight:400;position:sticky;top:0;background:var(--panel)}
.grid td:first-child,.grid th:first-child{text-align:left}
.grid tr:hover td{background:#141a23}
.up{color:var(--up)}.dn{color:var(--dn)}.amb{color:var(--amb)}
.flag{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.flag.green{background:var(--up)}.flag.amber{background:var(--amb)}.flag.red{background:var(--dn)}.flag.na{background:#444}
.pill{padding:1px 6px;border-radius:9px;font-size:10.5px;background:#222b38}
.pill.done,.pill.test-pass{background:#164a2c;color:#8ff0b5}.pill.test-fail,.pill.blocked{background:#5a1c1c;color:#ffb3b3}
.pill.start{background:#1c3a5a;color:#a9d3ff}.pill.question{background:#5a4a1c;color:#ffe08a}
.tk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:8px 0;flex-wrap:wrap}
.tabs a{padding:6px 12px;color:var(--mut);border:1px solid transparent;border-bottom:none}
.tabs a.on{color:var(--acc);border-color:var(--line);background:var(--panel);text-decoration:none}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:4px 10px;font:inherit;cursor:pointer;border-radius:3px}
.btn:hover{border-color:var(--acc)}.btn.pri{background:var(--acc);color:#000;border-color:var(--acc)}
input.in,select.in,textarea.in{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:4px 6px;font:inherit;border-radius:3px}
.funnel{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0}
.fstage{background:var(--panel);border:1px solid var(--line);padding:12px 8px;border-radius:4px;display:flex;flex-direction:column;gap:4px;color:var(--txt)}
.fstage:hover{border-color:var(--acc);text-decoration:none}.fn{color:var(--acc);font-size:20px;font-weight:800}.fq{color:var(--mut);font-size:11px}
.chart{width:100%;height:260px}
.htmx-request.tab-body{opacity:.5}
.loading{color:var(--mut);padding:20px}
kbd{border:1px solid var(--line);padding:0 4px;border-radius:3px}
.prose{line-height:1.55;font-family:-apple-system,system-ui,sans-serif;font-size:13.5px;max-width:900px}
.cite{color:var(--blue);font-size:10.5px;vertical-align:super}
@media(max-width:800px){.shell{grid-template-columns:1fr}.side{display:none}.funnel{grid-template-columns:repeat(2,1fr)}}

/* ==== MOBILE / TABLET (M1-shell) — everything below is either a new element hidden on desktop or inside a
   max-width:1024px / coarse-pointer media query. Desktop (>1024px, mouse) renders exactly as before. ==== */
:root{--tap:44px;--tabbar-h:56px;--gap-1:4px;--gap-2:8px;--gap-3:12px;--gap-4:16px;--radius:10px;
--fs-s:12px;--fs-m:15px;--fs-l:18px;--fs-xl:22px;--sans:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
/* utilities (default = desktop) */
.m-only,.t-only,.tabbar,.tb-menu,.m-today{display:none}
.sheet[hidden]{display:none!important}
.chips{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);white-space:nowrap;font:inherit;cursor:pointer}
.chip.on{border-color:var(--acc);color:var(--acc)}a.chip:hover{text-decoration:none;border-color:var(--acc)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;overscroll-behavior-x:contain}
.table-scroll table{min-width:100%}
.table-scroll .grid td:first-child,.table-scroll .grid th:first-child{position:sticky;left:0;z-index:1;background:var(--panel)}
.table-scroll .grid th:first-child{z-index:2}
details.m-section>summary{cursor:pointer;list-style:none}details.m-section>summary::-webkit-details-marker{display:none}
details.m-section>summary::after{content:"▾";float:right;color:var(--mut);transition:transform .15s}
details.m-section:not([open])>summary::after{transform:rotate(-90deg)}
details.m-section>summary em{font-style:normal;color:var(--mut);font-size:.85em;margin-left:6px}
/* sheets: bottom sheet on phone; centred dialog / right drawer (.sheet-side) above 640px */
.sheet{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:sh-fade .15s ease-out}
.sheet-card{background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;width:100%;max-width:640px;
  max-height:88vh;max-height:88dvh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:6px 16px calc(16px + env(safe-area-inset-bottom));font-family:var(--sans);animation:sh-up .2s cubic-bezier(.2,.8,.2,1)}
.sheet-grab{width:40px;height:5px;border-radius:3px;background:#3a4556;margin:4px auto 6px;cursor:grab;touch-action:none}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px;font-size:var(--fs-l)}
.sheet-x{all:unset;cursor:pointer;width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--mut);margin-right:-10px}
.sheet-x:focus-visible{outline:2px solid var(--acc);border-radius:50%}
@keyframes sh-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes sh-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-left{from{transform:translateX(40px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.sheet,.sheet-card{animation:none!important}}
@media(min-width:641px){
  .sheet{align-items:center}.sheet-card{border-radius:12px;border-bottom:1px solid var(--line);max-height:80vh;padding-bottom:16px}
  .sheet-side{justify-content:flex-end;align-items:stretch}
  .sheet-side .sheet-card{max-width:360px;height:100%;max-height:none;border-radius:0;border-width:0 0 0 1px;padding-top:calc(8px + env(safe-area-inset-top));animation:sh-left .2s ease-out}
  .sheet-side .sheet-grab{display:none}
  .sheet-full{align-items:flex-start;padding-top:10vh}.sheet-full .sheet-card{max-width:600px}
}
/* search sheet + More sheet content */
.srch-bar{display:flex;align-items:center;gap:8px;position:sticky;top:-6px;background:var(--panel);padding:10px 0;z-index:1}
.srch-bar svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--mut);stroke-width:2;stroke-linecap:round;margin-right:-36px;margin-left:10px;position:relative;z-index:1}
.srch-bar input{flex:1;min-width:0;height:var(--tap);font:600 17px var(--sans);background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:0 12px 0 38px;-webkit-appearance:none;appearance:none}
.srch-bar input:focus{outline:none;border-color:var(--acc)}
.srch-cancel{all:unset;cursor:pointer;color:var(--blue);font:16px var(--sans);padding:0 4px;min-height:var(--tap);display:flex;align-items:center}
.srch-h{color:var(--mut);font:600 12px var(--sans);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 6px}
.srch-body .chips .chip{min-height:38px;font:600 15px ui-monospace,Menlo,monospace}
.srch-list{display:flex;flex-direction:column}
.srch-list a{display:flex;align-items:baseline;gap:10px;min-height:var(--tap);padding:11px 4px;border-bottom:1px solid var(--line);color:var(--txt);font-size:15px}
.srch-list a b{font-family:ui-monospace,Menlo,monospace;color:var(--acc);flex:none;min-width:64px}
.srch-list a span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.srch-list a:hover,.srch-list a.sel{background:var(--panel2);text-decoration:none}
.srch-list a.cmdpg b{color:var(--blue)}
.more-g{margin-bottom:6px}
.more-a{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 4px;border-bottom:1px solid var(--line);color:var(--txt);font-size:16px}
.more-a span{flex:none}.more-a em{font-style:normal;color:var(--mut);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.more-a i{font-style:normal;color:var(--mut);font-size:20px;margin-left:auto}.more-a em+i{margin-left:0}
.more-a.on span{color:var(--acc)}.more-a:hover{text-decoration:none;background:var(--panel2)}.more-a:focus-visible{outline:2px solid var(--acc)}
.more-out span{color:var(--dn)}.more-a2hs{font-size:14px;line-height:1.5;margin:8px 4px}
/* Today (phone/tablet home) */
.td-hello{display:flex;flex-direction:column;gap:10px;margin:2px 0 6px}
.td-hello h1{font:800 26px var(--sans);margin:0}.td-hello .muted{font:14px var(--sans)}
.td-search{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--mut);font:15px var(--sans)}
.td-search svg,.tb-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.td-sec{margin:18px 0 6px}
.td-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px}
.td-h h2{font:700 17px var(--sans);margin:0}.td-h h2 .muted{font-weight:400;font-size:14px}.td-h a{font:15px var(--sans)}
.td-h-stages{margin-top:20px}
.td-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:10px}
.td-card{min-width:0;display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--txt)}
.td-card:hover,.td-card:active{text-decoration:none;border-color:var(--acc)}
.td-top{display:flex;align-items:center;gap:8px}.td-tk{font-size:17px;color:var(--acc)}
.td-st{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:999px;background:#222b38;color:var(--mut)}
.td-st-researching{background:#1c3a5a;color:#a9d3ff}.td-st-owned{background:#164a2c;color:#8ff0b5}
.td-flag{margin-left:auto;display:inline-flex;align-items:center;font-size:13px;color:var(--mut)}.td-flag .flag{margin-right:4px}
.td-mid{display:flex;align-items:center;gap:10px}
.td-px{font-size:20px;font-weight:700}.td-chg{font-size:15px;font-weight:600}
.td-spark{margin-left:auto;width:110px;height:32px;fill:none;stroke-width:1.6;stroke-linejoin:round;overflow:visible}
.td-spark polyline{vector-effect:non-scaling-stroke}
.td-spark.up{stroke:var(--up)}.td-spark.dn{stroke:var(--dn)}
.td-bot{display:flex;flex-direction:column;gap:2px;font:13.5px var(--sans);color:var(--mut)}
.td-one{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-list{list-style:none;margin:0;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.td-list li+li{border-top:1px solid var(--line)}
.td-row{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:10px 12px;color:var(--txt);font:14.5px var(--sans)}
.td-row b{font-family:ui-monospace,Menlo,monospace;color:var(--acc);flex:none}.td-row>span:not(.td-go){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-row em{font-style:normal}.td-row .flag{margin:0;flex:none}.td-go{color:var(--mut);font-size:20px}
.td-row:hover{text-decoration:none;background:var(--panel2)}
.td-empty{padding:14px;background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);color:var(--mut);font:14.5px var(--sans);line-height:1.5}
.td-skel{display:grid;gap:10px}.td-skel i{display:block;height:92px;border-radius:var(--radius);background:linear-gradient(90deg,var(--panel) 0,var(--panel2) 50%,var(--panel) 100%);background-size:200% 100%;animation:td-sh 1.2s infinite linear}
@keyframes td-sh{from{background-position:200% 0}to{background-position:-200% 0}}
.ob-mnote{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);z-index:1100;background:var(--panel2);border:1px solid var(--acc);border-radius:12px;padding:12px 14px;font:14.5px/1.45 var(--sans);color:var(--txt);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---- touch devices of any width (incl. iPad landscape): bigger hit areas, no hover-dependence ---- */
@media(hover:none) and (pointer:coarse){
  .ng-b{min-height:40px;padding:6px 12px}.ng-m a{padding:11px 16px}.um-menu a,.um-menu button{padding:11px 14px}
  .tap{min-height:var(--tap);display:inline-flex;align-items:center}
  .btn{min-height:38px}summary.btn{display:inline-flex;align-items:center}
  .grid tr:hover td{background:transparent}
  input.in,select.in,textarea.in,.cmd input{font-size:16px}
  .suggest a{padding:10px}
}

/* ---- phone + tablet (<= 1024px) ---- */
@media(max-width:1024px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:hidden}
  .main{overflow-x:clip}  /* safety net: a too-wide block never makes the whole page scroll sideways */
  .t-only{display:revert}.t-hide,.d-only{display:none!important}
  .t-stack{display:flex!important;flex-direction:column}.t-stack>*{width:100%;max-width:100%}
  .m-today{display:block}
  .home-desk{display:none}
  .shell{grid-template-columns:1fr;min-height:0}.side{display:none}
  .topbar{flex-wrap:nowrap;gap:8px;padding:6px 12px;padding-top:calc(6px + env(safe-area-inset-top));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
  .stages{flex-wrap:nowrap;flex:0 1 auto;gap:6px}
  .ngs,.live-link{display:none!important}
  .tb-menu{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--txt)}
  .tb-menu:focus-visible{outline:2px solid var(--acc)}
  .tb-menu svg{width:22px;height:22px}
  .main{padding:12px 16px;padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
  input.in,select.in,textarea.in,.cmd input{font-size:16px}
  .ob-check{left:calc(10px + env(safe-area-inset-left));bottom:calc(10px + env(safe-area-inset-bottom))}
  .funnel{grid-template-columns:repeat(4,1fr)}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
  .tabs a{flex:none;min-height:40px;display:flex;align-items:center}
  .suggest{max-height:60vh;-webkit-overflow-scrolling:touch}.suggest a{padding:10px}
}
/* tablet only */
@media(min-width:641px) and (max-width:1024px){
  :root{font-size:13.5px}
  .cmd{flex:1 1 auto;max-width:none}
  .td-search{display:none}
  .td-hello{flex-direction:row;align-items:center;justify-content:space-between}
}
/* ---- phone (<= 640px) ---- */
@media(max-width:640px){
  :root{font-size:15px}
  .m-only{display:revert}.m-hide{display:none!important}
  .m-stack{display:flex!important;flex-direction:column;gap:var(--gap-2)}.m-stack>*{width:100%!important;max-width:100%;min-width:0}
  .m-pad{padding-left:12px;padding-right:12px}.m-full{margin-left:-16px;margin-right:-16px;border-radius:0}
  .m-sticky{position:sticky;top:0;z-index:5;background:var(--bg)}
  .m-big{font-size:var(--fs-l);font-weight:700}
  body.has-tabbar .main{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px)}
  /* top bar: logo · market chip · bell · avatar (menus, search and help move to the tab bar / sheets) */
  .topbar{min-height:52px}
  .brand{font-size:16px}
  .cmd{display:none}
  .stages{margin-left:auto}.stages .tb-sp{display:none}
  .ob-help{display:none!important}
  #refresh-widget{font-size:12px}#refresh-widget .rw-ages{display:none}#refresh-widget .mk{font-size:11px;padding:3px 8px}
  #refresh-widget summary.btn{min-height:34px;display:flex;align-items:center}
  #alerts-badge{font-size:13px!important;padding:6px 10px!important}
  .um-btn{padding:4px}.um-av{width:30px;height:30px;font-size:12px}
  body.has-tabbar .tb-menu{display:none}
  /* bottom tab bar */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1000;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:rgba(6,8,11,.94);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line)}
  .tb-i{all:unset;box-sizing:border-box;cursor:pointer;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:var(--tabbar-h);color:var(--mut);font:600 10.5px var(--sans);-webkit-tap-highlight-color:transparent}
  .tb-i svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .tb-i.on{color:var(--acc)}.tb-i:active{color:var(--txt)}.tb-i:hover{text-decoration:none}
  .tb-i:focus-visible{outline:2px solid var(--acc);outline-offset:-4px;border-radius:10px}
  /* full-screen search sheet */
  .sheet-full{align-items:stretch;background:var(--panel)}
  .sheet-full .sheet-card{max-height:none;height:100%;border:0;border-radius:0;padding-top:calc(6px + env(safe-area-inset-top))}
  /* getting-started pill sits above the tab bar */
  body.has-tabbar .ob-check{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px)}
  .ob-check-pill>span{font-size:0}.ob-check-pill>span b{font-size:13px}  /* compact: ring + 7/11 */
  .ob-check-card{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 160px)!important}
  /* readable defaults */
  .h{font-size:20px}.small{font-size:12.5px}
  .card{padding:12px;border-radius:8px}
  .cards{grid-template-columns:1fr}
  .btn{min-height:40px;padding:6px 14px}
  .prose{font-size:15.5px}
  .grid th,.grid td{padding:6px 8px}
  /* home: stage tiles become a horizontal scroller */
  .funnel{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;margin:0 -16px 14px;padding:0 16px;scroll-snap-type:x mandatory}
  .funnel::-webkit-scrollbar{display:none}
  .fstage{flex:none;width:128px;padding:10px;scroll-snap-align:start}.fstage .fl{font-size:13.5px}.fstage .fq{font-size:12px}.fn{font-size:18px}
  .td-cards{grid-template-columns:minmax(0,1fr)}
  /* table rows -> cards */
  table.m-cards,table.m-cards tbody,table.m-cards tr,table.m-cards td{display:block;width:100%}
  table.m-cards thead{display:none}
  table.m-cards tr{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;margin:0 0 8px}
  table.m-cards td{display:flex;justify-content:space-between;gap:12px;text-align:right;border:0;padding:5px 0;white-space:normal}
  table.m-cards td::before{content:attr(data-label);color:var(--mut);text-align:left;flex:none;max-width:50%}
  table.m-cards td:first-child{font-size:16px;font-weight:700;text-align:left;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
  table.m-cards td:first-child{display:block}table.m-cards td:first-child::before{content:none}
  table.m-cards td.m-cards-skip{display:none}
  table.m-cards tr:hover td{background:none}
  details.m-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin:10px 0;padding:0 12px}
  details.m-section>summary{min-height:var(--tap);display:flex;align-items:center;gap:6px;font:700 16px var(--sans);padding:10px 0}
  details.m-section>summary::after{margin-left:auto}
  details.m-section[open]>summary{border-bottom:1px solid var(--line);margin-bottom:8px}
}