/* =====================================================================================
   Milo · Pro Glass v3 — base kit (Pearl only)                     canvas _nccnJIfnL
   D28 Pro density · D29 Selective real glass (G1 chrome / G2 panels / G3 content)
   D30 Say less · D12 no visible focus · D26 no grid lines · D27 full width
   Paste verbatim into every frame's first <style>; then paste the renderer shim
   <script> from v3-shim.html into <head>. Never invent parallel tokens — add them here.
   ===================================================================================== */
/* Typeface (Oct 2026): Apple's system font — SF Pro on Mac and iPhone (-apple-system / BlinkMacSystemFont), the
   platform UI font elsewhere. Numbers use the same face with tabular figures (no separate mono), as Apple's own apps. */
*{margin:0;padding:0;box-sizing:border-box}
:root{color-scheme:light;
/* families — every font declaration routes through these (the shim swaps them in Doop's renderer) */
--font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
--font-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
/* inks — vibrancy: every text ink is ≥ 4.5:1 on every glass tier over the scene floor (#6a8aa1) */
--ink-1:#101e2a;--ink-2:#34434f;--ink-disabled:rgb(16 30 42/.42);--glyph:#5b6975;
--accent:#1d6ad0;--accent-hover:#1a5fbb;--accent-ink:#175cb0;--on-accent:#fff;
/* the primary fill's top sheen, as its own layer over the solid --accent (rest = #2a78dc → --accent, the same pixels as the old
   gradient). A hover only swaps the colour under it: a gradient background-image cannot transition, so it must never be reset. */
--accent-sheen:linear-gradient(180deg,rgb(55 134 232/.5),rgb(55 134 232/0));
--accent-tint:rgb(29 106 208/.14);--accent-wash:rgb(29 106 208/.07);
--inverse:#16222e;--on-inverse:#f4f7f9;--inverse-link:#a9d4f5;
/* lines — hairlines separate; only fields/checkboxes carry a 3:1 edge */
--hair:rgb(16 30 42/.08);--hair-2:rgb(16 30 42/.14);--edge-field:rgb(18 34 48/.52);--edge-hc:#6b7783;
/* status — dot (glyph ≥ 3:1) · ink (text ≥ 4.5:1 on glass) · wash (tag fill) */
--pos:#2f8a66;--pos-ink:#1f5a45;--pos-wash:rgb(47 138 102/.12);
--ntc:#a86b00;--ntc-ink:#6a430b;--ntc-wash:rgb(191 123 1/.13);
--crt:#c7443c;--crt-ink:#8e2b26;--crt-wash:rgb(199 68 60/.11);
--inf:#2b7f99;--inf-ink:#1c566a;--inf-wash:rgb(43 127 153/.12); /* teal — kept distinct from the blue accent */
--neu:#6f7d89;--neu-ink:#3d4d5a;--neu-wash:rgb(16 30 42/.07);
/* data — ≤ 3 series; trio 1·2·3, validated alt 2·3·4; never 3+6 · 2+5 · 1+4 · 2+6; slot 6 reserved */
--data-1:#1d6ad0;--data-2:#1a8a74;--data-3:#e0702a;--data-4:#7a5cc4;--data-5:#c24f8f;--data-muted:#697581;
--data-seq-1:#a9d4f5;--data-seq-2:#6fb0e8;--data-seq-3:#3d86dc;--data-seq-4:#1d6ad0;--data-seq-5:#14539f;
--track:rgb(29 106 208/.10);
/* sky — baby blue family: fills, tracks, ranges, avatars only; never carries white text (1.6:1) */
--sky:#a9d4f5;--sky-2:#d6e9fb;--sky-3:#ebf5fe;--sky-4:#6fb0e8;
/* glass tiers (D29) */
--g1:rgb(246 248 250/.56);--g1-filter:blur(40px) saturate(1.9);                 /* chrome */
--g2:rgb(250 251 252/.62);--g2-filter:blur(28px) saturate(1.7);                 /* panels */
--g3:rgb(255 255 255/.66);--g3-dense:rgb(255 255 255/.78);--g3-filter:blur(24px) saturate(1.45); /* content */
--float:rgb(250 251 252/.80);--float-filter:blur(30px) saturate(1.6);           /* menus, popovers, selects */
--chrome:rgb(238 242 245/.8);/* desktop chrome: the top bar and every ledger filter bar over the sky */
--sheet:rgb(250 251 252/.88);--sheet-filter:blur(30px) saturate(1.5);           /* sheets, dialogs */
--scrim:rgb(16 30 42/.18);
/* list ledger (kit/ledger.css, Oct 2026) — the Book's neutral grays, one definition for every list (owner D1: not the blue-black inks above).
   ink 1/3/5 = text · primary / secondary / quiet ("—", counts); line = the 1px rules; faint = skeleton bars + empty track segments; canvas = hover/pressed/segment fill;
   p/p50/p200/p700 = the accent and its 8% / 22% tints / ink; pos · warn · neg · info · mute = the tag tones; row = the 32px list row (row-2: a two-line cell) */
--lg-ink:#171717;--lg-ink-3:#6b6b6b;--lg-ink-5:#8f8f8f;--lg-line:#e2e2e2;--lg-faint:#ececec;--lg-canvas:#f4f4f4;--lg-card:#fff;
--lg-p:var(--accent);--lg-p50:color-mix(in srgb,var(--accent) 8%,#fff);--lg-p200:color-mix(in srgb,var(--accent) 22%,#fff);--lg-p700:var(--accent-ink);
--lg-strip:rgb(244 246 248/.7);--lg-pos:#16734f;--lg-warn:#946200;--lg-neg:#b4233a;--lg-info:#3b7bd6;--lg-mute:#64748b;--lg-row:32px;--lg-row-2:48px;
--lg-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* the native select's chevron (ink-3) */
--toast:rgb(22 34 46/.88);--toast-filter:blur(20px) saturate(1.4);
--spec:inset 0 1px 0 rgb(255 255 255/.8);
--rim:linear-gradient(140deg,rgb(255 255 255/.95),rgb(255 255 255/.3) 24%,rgb(255 255 255/.06) 55%,rgb(255 255 255/.55));
--sh-1:1px 0 0 rgb(16 30 42/.10);
--sh-2:0 0 0 .5px rgb(16 30 42/.13),0 1px 2px rgb(16 30 42/.06),0 18px 40px -14px rgb(16 30 42/.32);
--sh-3:0 0 0 .5px rgb(16 30 42/.08),0 1px 2px rgb(16 30 42/.04);
--sh-float:0 0 0 .5px rgb(16 30 42/.14),0 12px 32px -8px rgb(16 30 42/.30);
--sh-ctl:0 0 0 .5px rgb(16 30 42/.16),0 1px 1.5px rgb(16 30 42/.08),inset 0 1px 0 #fff;
/* geometry (D28) — radii closed set 6 · 8 · 12 · 14 · 16 · pill(native only) · 50% */
--r-tag:6px;--r-ctl:8px;--r-card:12px;--r-panel:14px;--r-sheet:16px;--r-menu:12px;--r-row:6px;--r-pill:999px;
--h-ctl:32px;--h-dense:28px;--h-mini:24px;--h-row:36px;--h-row-dense:32px;--h-side:28px;--hit:44px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
--w-side:236px;--h-band:52px;--gutter:12px;
/* type — desktop; .is-phone overrides below */
--t-title:600 24px/1.2 var(--font-ui);--t-section:600 15px/1.3 var(--font-ui);--t-strong:600 13px/1.35 var(--font-ui);
--t-body:400 13px/1.45 var(--font-ui);--t-small:400 12px/1.4 var(--font-ui);--t-label:600 11px/1.3 var(--font-ui);
--t-value:500 17px/1.25 var(--font-ui);--t-metric:500 22px/1.15 var(--font-ui);--t-numeral:300 56px/1 var(--font-ui);
--t-reading:400 15px/1.6 var(--font-ui);
/* motion — kept from v2 (the part the owner loves) */
--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
--spring:linear(0,.047,.15,.273,.397,.509,.607,.69,.757,.812,.855,.889,.916,.936,.952,.964,.973,.98,.985,.989,.992,.994,.995,.997,.997,.998,.999,1);
--spring-fling:linear(0,.042,.14,.266,.399,.525,.638,.734,.813,.875,.922,.956,.981,.997,1.007,1.012,1.015,1.015,1.014,1.012,1.01,1.008,1.007,1.005,1.004,1.003,1.002,1);
--dur-press:120ms;--dur-release:300ms;--dur-hover:140ms;--dur-toggle:260ms;--dur-morph-in:240ms;--dur-morph-out:160ms;
--dur-panel-in:280ms;--dur-panel-out:200ms;--dur-toast-in:180ms;--dur-toast-out:160ms;--drop:1}
.is-phone{--t-title:600 26px/1.15 var(--font-ui);--t-section:600 17px/1.25 var(--font-ui);--t-strong:600 15px/1.3 var(--font-ui);
--t-body:400 15px/1.4 var(--font-ui);--t-small:400 13px/1.35 var(--font-ui);--t-label:600 12px/1.3 var(--font-ui);
--t-value:500 18px/1.25 var(--font-ui);--t-metric:500 24px/1.15 var(--font-ui);--t-numeral:300 52px/1 var(--font-ui);--h-dense:32px}
body{font:var(--t-body);color:var(--ink-1);background:#cfe2f2;-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:inherit;text-decoration:none}
:focus,:focus-visible{outline:none} /* D12 — no visible focus; focus order/moves/announcements stay */
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.875;stroke-linecap:round;stroke-linejoin:round} /* stroke = 30 ÷ size */
.i.s14{width:14px;height:14px;stroke-width:2.14}.i.s12{width:12px;height:12px;stroke-width:2.5}
.num{font-variant-numeric:tabular-nums}.s2{color:var(--ink-2)}

/* ---------- L0 scene "Sky" (pearl · baby blue · sea glass · depth blue). Never darker than #6a8aa1 behind text glass ---------- */
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:
radial-gradient(50% 46% at 8% 4%,rgb(250 252 254/.98),rgb(250 252 254/0) 70%),
radial-gradient(48% 54% at 82% 0%,rgb(168 210 246/.95),rgb(168 210 246/0) 72%),
radial-gradient(44% 50% at 30% 82%,rgb(200 232 228/.7),rgb(200 232 228/0) 70%),
radial-gradient(50% 56% at 96% 92%,rgb(122 170 222/.8),rgb(122 170 222/0) 72%),
radial-gradient(40% 42% at 58% 40%,rgb(228 241 253/.9),rgb(228 241 253/0) 70%),
linear-gradient(160deg,#eef5fb 0%,#cfe2f2 50%,#a9c8e4 100%)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(116deg,transparent 30%,rgb(255 255 255/.26) 43%,transparent 57%)}
.scene.tall{background: /* phone / long frames */
radial-gradient(90% 22% at 12% 4%,rgb(250 252 254/.98),rgb(250 252 254/0) 70%),
radial-gradient(80% 20% at 92% 10%,rgb(168 210 246/.95),rgb(168 210 246/0) 72%),
radial-gradient(90% 24% at 20% 46%,rgb(200 232 228/.7),rgb(200 232 228/0) 70%),
radial-gradient(90% 22% at 90% 62%,rgb(228 241 253/.9),rgb(228 241 253/0) 70%),
radial-gradient(100% 26% at 80% 92%,rgb(122 170 222/.8),rgb(122 170 222/0) 72%),
linear-gradient(170deg,#eef5fb 0%,#cfe2f2 50%,#a9c8e4 100%)}
.scene.tall::after{display:none}

/* ---------- Glass tiers (D29) — hosts need a position; page layout classes may override it ---------- */
.g1,.g2,.g3,.float,.sheet,.toast{position:relative}
.g1{background:var(--g1);-webkit-backdrop-filter:var(--g1-filter);backdrop-filter:var(--g1-filter)}
.g2{background:var(--g2);-webkit-backdrop-filter:var(--g2-filter);backdrop-filter:var(--g2-filter);box-shadow:var(--sh-2),inset 0 0 20px rgb(255 255 255/.2)}
.g3{background:var(--g3);-webkit-backdrop-filter:var(--g3-filter);backdrop-filter:var(--g3-filter);box-shadow:var(--sh-3),var(--spec)}
.g3.dense{background:var(--g3-dense)}
.float{background:var(--float);-webkit-backdrop-filter:var(--float-filter);backdrop-filter:var(--float-filter);box-shadow:var(--sh-float),inset 0 0 16px rgb(255 255 255/.18)}
.sheet{background:var(--sheet);-webkit-backdrop-filter:var(--sheet-filter);backdrop-filter:var(--sheet-filter);box-shadow:var(--sh-float)}
/* lensing rim: 1px gradient ring on G2, float and sheet */
.g2::before,.float::before,.sheet::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;background:var(--rim);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---------- Shell: the G1 top band (D1, D23). The G1 side menu's rules live in components.css ("Side menu"). ---------- */
.brand-mk{display:block;flex:none;width:28px;height:28px;border-radius:7px;box-shadow:0 1px 2px rgb(9 15 23/.3),0 0 0 .5px rgb(9 15 23/.4)}
.mono{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(155deg,#7cbcf0,#1d6ad0 70%);color:#fff;font:700 10px/1 var(--font-ui);box-shadow:inset 0 1px 0 rgb(255 255 255/.28),0 1px 2px rgb(18 74 150/.3)}
.band{position:absolute;z-index:3;left:var(--w-side);right:0;top:0;height:var(--h-band);display:flex;align-items:center;gap:8px;padding:0 12px 0 24px;box-shadow:inset 0 -1px 0 rgb(16 30 42/.07),var(--spec)}
.band h1{margin-right:auto;font:var(--t-title);letter-spacing:-.012em}
.host{display:flex;align-items:center;gap:4px;margin-left:10px} /* credits · bell · avatar — always last (D23) */
.credits{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px;font:500 12px/1 var(--font-ui)}
.credits b{font-weight:600}.credits span{color:var(--ink-2)}
/* panes below the band: top = band + gutter; gutters show the raw scene */
.pane{position:absolute;z-index:1;border-radius:var(--r-card)}
.pane.panel{border-radius:var(--r-panel)}

/* ---------- Controls (32 standard · 28 dense · 24 mini; 44 hit on touch via ::after) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-dense);padding:0 10px;border:0;border-radius:var(--r-ctl);
background:rgb(255 255 255/.68);box-shadow:var(--sh-ctl);font:500 13px/1 var(--font-ui);color:var(--ink-1);white-space:nowrap;cursor:default;
transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
@media (hover:hover){.btn:hover{background:rgb(255 255 255/.86)}} /* hover: pointer devices only — no sticky hover after a tap */
.btn:active,.btn.is-pressed{transform:scale(.97)}
.btn.l{height:var(--h-ctl);padding:0 12px}
.btn.pri{background:var(--accent-sheen) var(--accent);color:var(--on-accent);box-shadow:0 0 0 .5px rgb(18 74 150/.6),0 1px 2px rgb(18 74 150/.24),inset 0 1px 0 rgb(255 255 255/.2)}
@media (hover:hover){.btn.pri:hover{background-color:var(--accent-hover)}} /* colour only: the sheen layer stays put, so nothing flashes while the colour fades */
.btn.pri.off,.btn.pri:disabled{background:rgb(29 106 208/.34);box-shadow:none;color:#fff}
.btn:disabled:not(.pri){color:var(--ink-disabled);box-shadow:0 0 0 .5px rgb(16 30 42/.1)}
.btn.pl{background:none;box-shadow:none;color:var(--accent-ink);padding:0 4px}
@media (hover:hover){.btn.pl:hover{background:var(--accent-wash)}}
.btn.pl .i{width:14px;height:14px;stroke-width:2.2}
.btn.crit{color:var(--crt-ink)}
.btn.crit.is-confirm{background:var(--crt-ink);color:#fff;box-shadow:0 0 0 .5px rgb(90 20 16/.6),inset 0 1px 0 rgb(255 255 255/.18)}
.btn.ic{width:var(--h-dense);padding:0}
.btn.bare{background:none;box-shadow:none}
@media (hover:hover){.btn.bare:hover{background:rgb(16 30 42/.06)}}
.is-phone .btn::after{content:"";position:absolute;inset:-6px -2px}
.seg{display:inline-flex;align-items:center;height:var(--h-dense);padding:2px;border-radius:var(--r-ctl);background:rgb(16 30 42/.07);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.05)}
.seg>button{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:24px;padding:0 10px;border:0;border-radius:6px;background:none;font:500 12px/1 var(--font-ui);color:var(--ink-1);white-space:nowrap}
.seg>button[aria-pressed=true]{background:#fff;font-weight:600;box-shadow:0 0 0 .5px rgb(16 30 42/.14),0 1px 2px rgb(16 30 42/.14)}
.seg>button b{font-weight:500;color:var(--ink-2)}
.seg.icons>button{width:28px;padding:0}.seg.icons .i{width:14px;height:14px;stroke-width:2.1}
.fld{display:flex;align-items:center;gap:6px;height:var(--h-dense);padding:0 8px;border-radius:var(--r-ctl);background:rgb(255 255 255/.72);box-shadow:inset 0 0 0 1px var(--edge-field);font:var(--t-body);color:var(--ink-1)}
.fld .ph,.fld .i{color:var(--ink-2)}
.fld.is-error{box-shadow:inset 0 0 0 1px var(--crt)}
.flabel{display:block;margin-bottom:4px;font:500 12px/1.3 var(--font-ui);color:var(--ink-1)}
.fhint{margin-top:4px;font:var(--t-small);color:var(--ink-2)}
/* pop-up button (select trigger) = .btn + a trailing chevron .i.s12 in --ink-2; it morphs into its .menu */
.tk{display:inline-flex;align-items:center;gap:5px;height:var(--h-mini);padding:0 8px;border:0;border-radius:var(--r-tag);background:rgb(16 30 42/.06);font:500 12px/1 var(--font-ui);color:var(--ink-1);white-space:nowrap}
.tk b{font-weight:500;color:var(--ink-2)}
.tk[aria-pressed=true]{background:var(--accent-tint);color:var(--accent-ink);font-weight:600}.tk[aria-pressed=true] b{color:var(--accent-ink)}
.tag{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;border-radius:var(--r-tag);background:var(--ntc-wash);color:var(--ntc-ink);font:600 11px/1 var(--font-ui);white-space:nowrap}
.tag .i{width:12px;height:12px;stroke-width:2.5}
.tag.c{background:var(--crt-wash);color:var(--crt-ink)}.tag.p{background:var(--pos-wash);color:var(--pos-ink)}.tag.f{background:var(--inf-wash);color:var(--inf-ink)}.tag.n0{background:var(--neu-wash);color:var(--neu-ink)}
.st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neu);flex:none}
.st.n::before{background:var(--ntc)}.st.c::before{background:var(--crt)}.st.f::before{background:var(--inf)}.st.p::before{background:var(--pos)}
.st.q{color:var(--ink-2)}.st.q::before{display:none} /* healthy = quiet word, no dot */
.badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;font:700 10px/16px var(--font-ui);text-align:center;box-shadow:0 0 0 2px rgb(246 248 250/.95)}
.av{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:linear-gradient(150deg,var(--sky-3),var(--sky-2));color:var(--accent-ink);font:600 11px/1 var(--font-ui);box-shadow:inset 0 0 0 .5px rgb(29 106 208/.22)}
.av.l{width:36px;height:36px;font-size:13px}
.logo{width:16px;height:16px;flex:none;border-radius:4px;background:#fff;box-shadow:0 0 0 .5px rgb(16 30 42/.14);object-fit:contain}
.car{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.chk{appearance:none;display:inline-grid;place-items:center;width:14px;height:14px;flex:none;margin:0;border-radius:4px;background:rgb(255 255 255/.7);box-shadow:inset 0 0 0 1px var(--edge-field);vertical-align:middle}
.chk:checked{background:var(--accent);box-shadow:none}
.chk:checked::after{content:"";width:7px;height:3.5px;border:1.8px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.rad{appearance:none;display:inline-grid;place-items:center;width:14px;height:14px;flex:none;margin:0;border-radius:50%;background:rgb(255 255 255/.7);box-shadow:inset 0 0 0 1px var(--edge-field)}
.rad:checked{background:var(--accent);box-shadow:none}.rad:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
/* switch — track + knob are capsules (native shape); knob becomes a clear droplet while held */
.sw{position:relative;display:inline-block;flex:none;width:32px;height:18px}
.sw input{position:absolute;z-index:2;inset:-13px -6px;margin:0;opacity:0}
.sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:rgb(16 30 42/.14);box-shadow:inset 0 0 0 .5px rgb(16 30 42/.12);transition:background-color var(--dur-toggle) ease}
.sw b{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--r-pill);background:#fff;box-shadow:0 1px 2px rgb(16 30 42/.3),0 0 0 .5px rgb(16 30 42/.08);transform:translateX(var(--x,0));transition:transform var(--dur-toggle) var(--spring),width var(--dur-press) var(--ease-out)}
.sw input:checked~i{background:var(--accent)}
.sw input:checked~b{--x:14px}
.sw input:active~b,.sw.is-pressing b{width:18px;background:rgb(255 255 255/.35);-webkit-backdrop-filter:blur(1.5px) saturate(1.4);backdrop-filter:blur(1.5px) saturate(1.4);box-shadow:inset 0 0 0 .5px rgb(255 255 255/.9),0 2px 6px rgb(16 30 42/.25)}
.sw input:checked:active~b,.sw.is-pressing input:checked~b{--x:10px}
.is-phone .sw{width:48px;height:28px}.is-phone .sw b{width:24px;height:24px}.is-phone .sw input:checked~b{--x:20px}

/* ---------- Content: sections, stats, key–value, tables (boxless, D26) ---------- */
.sec{position:relative;padding:18px 24px 20px}
.sec~.sec::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--hair-2)}
.sh{display:flex;align-items:center;gap:10px;min-height:28px}
.sh h2{font:var(--t-section);letter-spacing:-.006em}
.sh .ct{font:500 13px/1 var(--font-ui);color:var(--ink-2)}
.sh .end{margin-left:auto;display:flex;align-items:center;gap:6px}
.k{font:var(--t-label);color:var(--ink-2)}.v{font:var(--t-value);letter-spacing:-.01em}.sub{font:var(--t-small);color:var(--ink-2)}
.metric{font:var(--t-metric);letter-spacing:-.015em}.numeral{font:var(--t-numeral);letter-spacing:-.03em}
.stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.stats>div{display:grid;gap:3px;align-content:start;padding:0 14px;border-left:1px solid var(--hair-2)}
.stats>div:first-child{padding-left:0;border-left:0}
.kv{display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.kv dt,.kv dd{padding:7px 0;border-top:1px solid var(--hair)}
.kv dt{font:var(--t-small);color:var(--ink-2)}.kv dd{text-align:right}
.kv dt:first-of-type,.kv dt:first-of-type+dd{border-top:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font:var(--t-body)}
.tbl th{height:28px;padding:0 10px;text-align:left;font:var(--t-label);color:var(--ink-2);white-space:nowrap}
.tbl td{height:var(--h-row);padding:0 10px;border-top:1px solid var(--hair);white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{padding-left:0}.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl.inset th:first-child,.tbl.inset td:first-child{padding-left:16px}.tbl.inset th:last-child,.tbl.inset td:last-child{padding-right:16px}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .car{display:flex}
.tbl.dense td{height:var(--h-row-dense)}
.tbl tbody tr:hover td{background:var(--accent-wash)}
.tbl tr.is-sel td{background:var(--accent-tint)}
.tbl tr.is-sel td:first-child{box-shadow:inset 2px 0 0 var(--accent)}  /* selected = tint + accent edge (D26) */
.tbl.sticky thead th{position:sticky;top:0;z-index:2;background:var(--g2);-webkit-backdrop-filter:var(--g2-filter);backdrop-filter:var(--g2-filter);box-shadow:inset 0 -1px 0 var(--hair-2)} /* G2 head, content scrolls under */
.tbl.sticky tbody tr:first-child td{border-top:0}
/* charts — hairline grid, 2px lines, bars ≤ 24px with a 3px rounded data end, text never in series colour */
.gl{stroke:rgb(16 30 42/.08);stroke-width:1;shape-rendering:crispEdges}.bl{stroke:rgb(16 30 42/.22);stroke-width:1;shape-rendering:crispEdges}
.ax{font:500 11px var(--font-ui);fill:var(--ink-2);font-variant-numeric:tabular-nums}.axs{font:600 11px var(--font-ui);fill:var(--ink-1)}
.axv{font:600 11px var(--font-ui);fill:var(--ink-1);paint-order:stroke;stroke:rgb(240 244 247);stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.key{display:inline-flex;align-items:center;gap:6px}
.key i{width:12px;height:3px;border-radius:2px;background:var(--data-1)}
.key i.d{height:0;border-radius:0;background:none;border-top:2px dashed var(--data-1)}
.leg{display:flex;align-items:center;gap:6px;font:var(--t-small);color:var(--ink-2)}
.leg i.hatch{width:10px;height:10px;border-radius:2px;background:repeating-linear-gradient(135deg,var(--data-1) 0 2px,transparent 2px 4.2px);box-shadow:inset 0 0 0 .5px var(--data-1)}

/* scroll edge effect — content fades where it runs under a bar or footer (no ghosting through glass) */
.edge-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent calc(100% - 30px));mask-image:linear-gradient(#000 calc(100% - 72px),transparent calc(100% - 30px))}
.edge-t{-webkit-mask-image:linear-gradient(transparent 30px,#000 72px);mask-image:linear-gradient(transparent 30px,#000 72px)}

/* ---------- Inspector / side panel (G2) ---------- */
.insp{border-radius:var(--r-panel);display:flex;flex-direction:column;overflow:hidden}
.insp>header{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 10px 10px 16px;box-shadow:inset 0 -1px 0 var(--hair-2)}
.insp>header h2{font:600 17px/1.25 var(--font-ui);letter-spacing:-.01em}
.insp .blk{padding:14px 16px}
.insp .blk+.blk{box-shadow:inset 0 1px 0 var(--hair-2)}
.insp{transition:transform var(--dur-panel-in) var(--spring),opacity var(--dur-panel-in) var(--ease-out)}
.insp[data-state=closed]{opacity:0;transform:translateX(16px);transition-duration:var(--dur-panel-out);transition-timing-function:var(--ease-drawer)}

/* ---------- Transient: menus, popovers, selects (float), morph from trigger ---------- */
.menu,.popover{position:absolute;z-index:30;border-radius:var(--r-menu);transform-origin:var(--origin,top left);
transition:transform var(--dur-morph-in) var(--spring),opacity var(--dur-morph-in) var(--ease-out)}
.menu{min-width:200px;padding:6px}.popover{padding:14px 16px}
.menu[data-state=closed],.popover[data-state=closed]{opacity:0;transform:scale(.96) translateY(-4px);transition-duration:var(--dur-morph-out);transition-timing-function:var(--ease-out)}
.menu [role^=menuitem],.menu [role=option]{display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 8px;border:0;border-radius:var(--r-row);background:none;font:400 13px/1 var(--font-ui);color:var(--ink-1);text-align:left}
.menu .i{color:var(--ink-2)}
.menu .is-hl,.menu [role^=menuitem]:hover,.menu [role=option]:hover{background:var(--accent);color:#fff}
.menu .is-hl .i,.menu [role^=menuitem]:hover .i{color:#fff}
.menu [aria-checked=true],.menu [aria-selected=true]{font-weight:600}
.menu kbd,.menu .ct{margin-left:auto;font:400 12px/1 var(--font-ui);color:var(--ink-2)}
.menu hr{height:1px;margin:5px 8px;border:0;background:var(--hair-2)}
.menu .mlabel{padding:6px 8px 4px;font:var(--t-label);color:var(--ink-2)}

/* ---------- Sheets, dialogs, toast ---------- */
.scrim{position:fixed;inset:0;z-index:39;background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sheet.side-sheet{position:fixed;z-index:40;top:12px;right:12px;bottom:12px;width:min(520px,calc(100% - 24px));border-radius:var(--r-sheet);display:flex;flex-direction:column;overflow:hidden}
.sheet>header{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 20px}
.sheet>header h2{font:600 17px/1.25 var(--font-ui);margin-right:auto}
.sheet>footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;box-shadow:inset 0 1px 0 var(--hair-2)}
.dialog{position:fixed;z-index:40;left:50%;top:50%;width:420px;translate:-50% -50%;border-radius:var(--r-sheet);padding:20px 20px 16px;transform-origin:center}
.dialog h2{font:600 17px/1.3 var(--font-ui)}
.dialog p{margin-top:8px;font:var(--t-body);color:var(--ink-1)}
.dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.is-phone .sheet.bottom-sheet{position:fixed;left:8px;right:8px;bottom:8px;border-radius:var(--r-sheet)}
.grabber{width:36px;height:5px;margin:6px auto 0;border-radius:var(--r-pill);background:rgb(16 30 42/.22)}
.toast{display:inline-flex;align-items:center;gap:12px;height:36px;padding:0 4px 0 12px;border-radius:var(--r-card);background:var(--toast);-webkit-backdrop-filter:var(--toast-filter);backdrop-filter:var(--toast-filter);color:var(--on-inverse);font:500 13px/1 var(--font-ui);box-shadow:0 10px 30px -8px rgb(16 30 42/.45),inset 0 1px 0 rgb(255 255 255/.12)}
.toast .btn{background:rgb(255 255 255/.12);box-shadow:inset 0 0 0 .5px rgb(255 255 255/.16);color:var(--inverse-link)}

/* ---------- Phone shell: G1 top band, inset G3 sections, G1 tab bar capsule + tinted circle ---------- */
.is-phone .top{position:absolute;z-index:3;left:0;right:0;top:0;padding:14px 16px 10px;box-shadow:inset 0 -1px 0 rgb(16 30 42/.07)}
.is-phone .card{border-radius:var(--r-card);padding:14px 16px 16px}
.dock{position:fixed;z-index:5;left:12px;right:12px;bottom:22px;display:flex;align-items:center;gap:10px}
.tabs{flex:1;display:grid;grid-template-columns:repeat(5,1fr);height:62px;padding:4px;border-radius:31px;box-shadow:0 0 0 .5px rgb(16 30 42/.14),0 10px 30px -8px rgb(16 30 42/.32),inset 0 1px 0 rgb(255 255 255/.8),inset 0 0 18px rgb(255 255 255/.25)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:27px;font:600 10px/1.1 var(--font-ui);color:var(--ink-1)}
.tab .i{width:22px;height:22px;stroke-width:1.5}
.tab[aria-current=page]{color:var(--accent-ink);background:rgb(255 255 255/.72);box-shadow:inset 0 1px 0 #fff,0 1px 3px rgb(16 30 42/.12)}
.fab{display:grid;place-items:center;width:62px;height:62px;flex:none;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 0 0 .5px rgb(18 74 150/.6),0 10px 24px -6px rgb(18 74 150/.45),inset 0 1px 0 rgb(255 255 255/.25)}
.fab .i{width:24px;height:24px;stroke-width:1.75}

/* ---------- Adaptivity ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--g1:#eef2f5;--g2:#f4f7f9;--g3:#fbfcfd;--g3-dense:#fff;--float:#f7f9fb;--sheet:#f7f9fb;--toast:#16222e}}
@media (prefers-reduced-transparency:reduce){
:root{--g1:#eef2f5;--g2:#f4f7f9;--g3:#fbfcfd;--g3-dense:#fff;--float:#f7f9fb;--sheet:#f7f9fb;--toast:#16222e;
--g1-filter:none;--g2-filter:none;--g3-filter:none;--float-filter:none;--sheet-filter:none;--toast-filter:none;--sh-3:0 0 0 1px rgb(16 30 42/.12)}
.scene::after{display:none}.g2::before,.float::before,.sheet::before{display:none}}
@media (prefers-contrast:more){
:root{--ink-2:#1e2c38;--hair:rgb(16 30 42/.22);--hair-2:rgb(16 30 42/.3);--g1:#eef2f5;--g2:#f4f7f9;--g3:#fbfcfd;--g3-dense:#fff;--float:#f7f9fb;--sheet:#f7f9fb;
--g1-filter:none;--g2-filter:none;--g3-filter:none;--float-filter:none;--sheet-filter:none}
.btn:not(.pri):not(.pl),.seg,.seg>button[aria-pressed=true],.tk,.sw i,.g2,.g3,.float,.sheet{box-shadow:inset 0 0 0 1px var(--edge-hc)}}
@media (forced-colors:active){
.g1,.g2,.g3,.float,.sheet,.toast{background:Canvas;color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid CanvasText}
.tbl tr.is-sel td,.menu .is-hl,.seg>button[aria-pressed=true],.tk[aria-pressed=true],.tab[aria-current=page]{background:Highlight;color:HighlightText;forced-color-adjust:none}
.st::before,.badge,.btn.pri{forced-color-adjust:none}}
@media (prefers-reduced-motion:reduce){:root{--drop:0;--spring:var(--ease-out);--spring-fling:var(--ease-out);--dur-release:120ms;--dur-toggle:150ms;--dur-morph-in:150ms;--dur-morph-out:120ms;--dur-panel-in:150ms;--dur-panel-out:120ms}
.btn:active,.btn.is-pressed{transform:none}.menu[data-state=closed],.popover[data-state=closed],.insp[data-state=closed]{transform:none}}

/* ---------- Renderer shim: paste the <script> from v3-shim.html into <head> right after this stylesheet ---------- */