/* AAR OPS · OPS Intelligence — single stylesheet.
   No inline styles are used in markup. Dynamic values (progress widths, marker
   positions, grid spans) are passed as CSS custom properties set from JS and
   consumed here with calc(). Tokens: theme (data-theme) x colour scheme
   (data-scheme 0..19) x accessibility flags (data-contrast/motion/plain/scale). */

/* ============ tokens ============ */
:root{
  --bg:#0B0E0D; --p1:#121614; --p2:#181E1A;
  --tx:#E6EAE7; --tx2:#B8C2BC; --dm:#8B968F;
  --fg:#FFFFFF; --sh:#000000; --scrim:#06080A; --onac:#14100A;
  --ac:#F2A63B; --achi:#FFC97A; --acfg:#F7C57C; --onai:#10130F;
  --ai:#64C6C0; --rd:#D9564F; --gn:#79BE7E;
  --ln:color-mix(in oklab, var(--fg) 9%, transparent);
  --ln2:color-mix(in oklab, var(--fg) 18%, transparent);
  --rdfg:color-mix(in oklab, var(--rd) 62%, var(--tx));
  --gnfg:color-mix(in oklab, var(--gn) 62%, var(--tx));
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'IBM Plex Sans', system-ui, sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px;
  --pagebg:
    radial-gradient(1100px 560px at 80% -14%, color-mix(in oklab, var(--ac) 7%, transparent), transparent 62%),
    radial-gradient(900px 500px at -6% 104%, color-mix(in oklab, var(--ai) 5.5%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--fg) 2.1%, transparent) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg) 2.1%, transparent) 0 1px, transparent 1px 46px),
    var(--bg);
; --disc-h:30px}
html[data-theme="light"]{
  --bg:#F3F2EE; --p1:#FFFFFF; --p2:#E9E8E2;
  --tx:#161B18; --tx2:#414A45; --dm:#606B64;
  --fg:#14181A; --sh:#0E1211; --scrim:#3A403C; --onac:#14100A;
  --rd:oklch(0.55 0.17 25); --gn:oklch(0.56 0.13 150);
  --ln:color-mix(in oklab, var(--fg) 13%, transparent);
  --ln2:color-mix(in oklab, var(--fg) 24%, transparent);
  --rdfg:color-mix(in oklab, var(--rd) 78%, var(--tx));
  --gnfg:color-mix(in oklab, var(--gn) 78%, var(--tx));
}
html[data-theme="dark"][data-scheme="0"]{--ac:oklch(0.88 0.19 95);--achi:oklch(0.9 0.1 95);--acfg:oklch(0.88 0.085 95);--ai:oklch(0.86 0.155 191);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="0"]{--ac:oklch(0.66 0.2 95);--achi:oklch(0.72 0.15 95);--acfg:oklch(0.38 0.12 95);--ai:oklch(0.64 0.165 191);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="1"]{--ac:oklch(0.88 0.19 101);--achi:oklch(0.9 0.1 101);--acfg:oklch(0.88 0.085 101);--ai:oklch(0.86 0.155 197);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="1"]{--ac:oklch(0.66 0.2 101);--achi:oklch(0.72 0.15 101);--acfg:oklch(0.38 0.12 101);--ai:oklch(0.64 0.165 197);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="2"]{--ac:oklch(0.88 0.19 107);--achi:oklch(0.9 0.1 107);--acfg:oklch(0.88 0.085 107);--ai:oklch(0.86 0.155 203);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="2"]{--ac:oklch(0.66 0.2 107);--achi:oklch(0.72 0.15 107);--acfg:oklch(0.38 0.12 107);--ai:oklch(0.64 0.165 203);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="3"]{--ac:oklch(0.88 0.19 113);--achi:oklch(0.9 0.1 113);--acfg:oklch(0.88 0.085 113);--ai:oklch(0.86 0.155 209);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="3"]{--ac:oklch(0.66 0.2 113);--achi:oklch(0.72 0.15 113);--acfg:oklch(0.38 0.12 113);--ai:oklch(0.64 0.165 209);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="4"]{--ac:oklch(0.88 0.19 119);--achi:oklch(0.9 0.1 119);--acfg:oklch(0.88 0.085 119);--ai:oklch(0.86 0.155 215);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="4"]{--ac:oklch(0.66 0.2 119);--achi:oklch(0.72 0.15 119);--acfg:oklch(0.38 0.12 119);--ai:oklch(0.64 0.165 215);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="5"]{--ac:oklch(0.88 0.19 126);--achi:oklch(0.9 0.1 126);--acfg:oklch(0.88 0.085 126);--ai:oklch(0.86 0.155 222);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="5"]{--ac:oklch(0.66 0.2 126);--achi:oklch(0.72 0.15 126);--acfg:oklch(0.38 0.12 126);--ai:oklch(0.64 0.165 222);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="6"]{--ac:oklch(0.88 0.19 133);--achi:oklch(0.9 0.1 133);--acfg:oklch(0.88 0.085 133);--ai:oklch(0.86 0.155 229);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="6"]{--ac:oklch(0.66 0.2 133);--achi:oklch(0.72 0.15 133);--acfg:oklch(0.38 0.12 133);--ai:oklch(0.64 0.165 229);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="7"]{--ac:oklch(0.88 0.19 140);--achi:oklch(0.9 0.1 140);--acfg:oklch(0.88 0.085 140);--ai:oklch(0.86 0.155 236);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="7"]{--ac:oklch(0.66 0.2 140);--achi:oklch(0.72 0.15 140);--acfg:oklch(0.38 0.12 140);--ai:oklch(0.64 0.165 236);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="8"]{--ac:oklch(0.88 0.19 147);--achi:oklch(0.9 0.1 147);--acfg:oklch(0.88 0.085 147);--ai:oklch(0.86 0.155 243);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="8"]{--ac:oklch(0.66 0.2 147);--achi:oklch(0.72 0.15 147);--acfg:oklch(0.38 0.12 147);--ai:oklch(0.64 0.165 243);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="9"]{--ac:oklch(0.88 0.19 154);--achi:oklch(0.9 0.1 154);--acfg:oklch(0.88 0.085 154);--ai:oklch(0.86 0.155 250);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="9"]{--ac:oklch(0.66 0.2 154);--achi:oklch(0.72 0.15 154);--acfg:oklch(0.38 0.12 154);--ai:oklch(0.64 0.165 250);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="10"]{--ac:oklch(0.88 0.19 161);--achi:oklch(0.9 0.1 161);--acfg:oklch(0.88 0.085 161);--ai:oklch(0.86 0.155 257);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="10"]{--ac:oklch(0.66 0.2 161);--achi:oklch(0.72 0.15 161);--acfg:oklch(0.38 0.12 161);--ai:oklch(0.64 0.165 257);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="11"]{--ac:oklch(0.88 0.19 168);--achi:oklch(0.9 0.1 168);--acfg:oklch(0.88 0.085 168);--ai:oklch(0.86 0.155 264);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="11"]{--ac:oklch(0.66 0.2 168);--achi:oklch(0.72 0.15 168);--acfg:oklch(0.38 0.12 168);--ai:oklch(0.64 0.165 264);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="12"]{--ac:oklch(0.88 0.19 175);--achi:oklch(0.9 0.1 175);--acfg:oklch(0.88 0.085 175);--ai:oklch(0.86 0.155 271);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="12"]{--ac:oklch(0.66 0.2 175);--achi:oklch(0.72 0.15 175);--acfg:oklch(0.38 0.12 175);--ai:oklch(0.64 0.165 271);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="13"]{--ac:oklch(0.88 0.19 182);--achi:oklch(0.9 0.1 182);--acfg:oklch(0.88 0.085 182);--ai:oklch(0.86 0.155 278);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="13"]{--ac:oklch(0.66 0.2 182);--achi:oklch(0.72 0.15 182);--acfg:oklch(0.38 0.12 182);--ai:oklch(0.64 0.165 278);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="14"]{--ac:oklch(0.88 0.19 189);--achi:oklch(0.9 0.1 189);--acfg:oklch(0.88 0.085 189);--ai:oklch(0.86 0.155 285);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="14"]{--ac:oklch(0.66 0.2 189);--achi:oklch(0.72 0.15 189);--acfg:oklch(0.38 0.12 189);--ai:oklch(0.64 0.165 285);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="15"]{--ac:oklch(0.88 0.19 196);--achi:oklch(0.9 0.1 196);--acfg:oklch(0.88 0.085 196);--ai:oklch(0.86 0.155 292);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="15"]{--ac:oklch(0.66 0.2 196);--achi:oklch(0.72 0.15 196);--acfg:oklch(0.38 0.12 196);--ai:oklch(0.64 0.165 292);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="16"]{--ac:oklch(0.88 0.19 203);--achi:oklch(0.9 0.1 203);--acfg:oklch(0.88 0.085 203);--ai:oklch(0.86 0.155 299);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="16"]{--ac:oklch(0.66 0.2 203);--achi:oklch(0.72 0.15 203);--acfg:oklch(0.38 0.12 203);--ai:oklch(0.64 0.165 299);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="17"]{--ac:oklch(0.88 0.19 210);--achi:oklch(0.9 0.1 210);--acfg:oklch(0.88 0.085 210);--ai:oklch(0.86 0.155 306);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="17"]{--ac:oklch(0.66 0.2 210);--achi:oklch(0.72 0.15 210);--acfg:oklch(0.38 0.12 210);--ai:oklch(0.64 0.165 306);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="18"]{--ac:oklch(0.88 0.19 88);--achi:oklch(0.9 0.1 88);--acfg:oklch(0.88 0.085 88);--ai:oklch(0.86 0.155 184);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="18"]{--ac:oklch(0.66 0.2 88);--achi:oklch(0.72 0.15 88);--acfg:oklch(0.38 0.12 88);--ai:oklch(0.64 0.165 184);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="19"]{--ac:oklch(0.88 0.19 82);--achi:oklch(0.9 0.1 82);--acfg:oklch(0.88 0.085 82);--ai:oklch(0.86 0.155 178);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="19"]{--ac:oklch(0.66 0.2 82);--achi:oklch(0.72 0.15 82);--acfg:oklch(0.38 0.12 82);--ai:oklch(0.64 0.165 178);--onac:#10130F;--onai:#10130F}
html[data-theme="dark"][data-scheme="20"]{--ac:oklch(0.83 0.175 20);--achi:oklch(0.9 0.1 20);--acfg:oklch(0.88 0.085 20);--ai:oklch(0.82 0.14 192);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="20"]{--ac:oklch(0.6 0.195 20);--achi:oklch(0.72 0.15 20);--acfg:oklch(0.38 0.12 20);--ai:oklch(0.6 0.15 192);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="21"]{--ac:oklch(0.83 0.175 38);--achi:oklch(0.9 0.1 38);--acfg:oklch(0.88 0.085 38);--ai:oklch(0.82 0.14 210);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="21"]{--ac:oklch(0.6 0.195 38);--achi:oklch(0.72 0.15 38);--acfg:oklch(0.38 0.12 38);--ai:oklch(0.6 0.15 210);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="22"]{--ac:oklch(0.83 0.175 56);--achi:oklch(0.9 0.1 56);--acfg:oklch(0.88 0.085 56);--ai:oklch(0.82 0.14 228);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="22"]{--ac:oklch(0.6 0.195 56);--achi:oklch(0.72 0.15 56);--acfg:oklch(0.38 0.12 56);--ai:oklch(0.6 0.15 228);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="23"]{--ac:oklch(0.83 0.175 74);--achi:oklch(0.9 0.1 74);--acfg:oklch(0.88 0.085 74);--ai:oklch(0.82 0.14 246);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="23"]{--ac:oklch(0.6 0.195 74);--achi:oklch(0.72 0.15 74);--acfg:oklch(0.38 0.12 74);--ai:oklch(0.6 0.15 246);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="24"]{--ac:oklch(0.83 0.175 92);--achi:oklch(0.9 0.1 92);--acfg:oklch(0.88 0.085 92);--ai:oklch(0.82 0.14 264);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="24"]{--ac:oklch(0.6 0.195 92);--achi:oklch(0.72 0.15 92);--acfg:oklch(0.38 0.12 92);--ai:oklch(0.6 0.15 264);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="25"]{--ac:oklch(0.83 0.175 110);--achi:oklch(0.9 0.1 110);--acfg:oklch(0.88 0.085 110);--ai:oklch(0.82 0.14 282);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="25"]{--ac:oklch(0.6 0.195 110);--achi:oklch(0.72 0.15 110);--acfg:oklch(0.38 0.12 110);--ai:oklch(0.6 0.15 282);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="26"]{--ac:oklch(0.83 0.175 128);--achi:oklch(0.9 0.1 128);--acfg:oklch(0.88 0.085 128);--ai:oklch(0.82 0.14 300);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="26"]{--ac:oklch(0.6 0.195 128);--achi:oklch(0.72 0.15 128);--acfg:oklch(0.38 0.12 128);--ai:oklch(0.6 0.15 300);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="27"]{--ac:oklch(0.83 0.175 146);--achi:oklch(0.9 0.1 146);--acfg:oklch(0.88 0.085 146);--ai:oklch(0.82 0.14 318);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="27"]{--ac:oklch(0.6 0.195 146);--achi:oklch(0.72 0.15 146);--acfg:oklch(0.38 0.12 146);--ai:oklch(0.6 0.15 318);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="28"]{--ac:oklch(0.83 0.175 164);--achi:oklch(0.9 0.1 164);--acfg:oklch(0.88 0.085 164);--ai:oklch(0.82 0.14 336);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="28"]{--ac:oklch(0.6 0.195 164);--achi:oklch(0.72 0.15 164);--acfg:oklch(0.38 0.12 164);--ai:oklch(0.6 0.15 336);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="29"]{--ac:oklch(0.83 0.175 182);--achi:oklch(0.9 0.1 182);--acfg:oklch(0.88 0.085 182);--ai:oklch(0.82 0.14 354);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="29"]{--ac:oklch(0.6 0.195 182);--achi:oklch(0.72 0.15 182);--acfg:oklch(0.38 0.12 182);--ai:oklch(0.6 0.15 354);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="30"]{--ac:oklch(0.83 0.175 200);--achi:oklch(0.9 0.1 200);--acfg:oklch(0.88 0.085 200);--ai:oklch(0.82 0.14 12);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="30"]{--ac:oklch(0.6 0.195 200);--achi:oklch(0.72 0.15 200);--acfg:oklch(0.38 0.12 200);--ai:oklch(0.6 0.15 12);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="31"]{--ac:oklch(0.83 0.175 218);--achi:oklch(0.9 0.1 218);--acfg:oklch(0.88 0.085 218);--ai:oklch(0.82 0.14 30);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="31"]{--ac:oklch(0.6 0.195 218);--achi:oklch(0.72 0.15 218);--acfg:oklch(0.38 0.12 218);--ai:oklch(0.6 0.15 30);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="32"]{--ac:oklch(0.83 0.175 236);--achi:oklch(0.9 0.1 236);--acfg:oklch(0.88 0.085 236);--ai:oklch(0.82 0.14 48);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="32"]{--ac:oklch(0.6 0.195 236);--achi:oklch(0.72 0.15 236);--acfg:oklch(0.38 0.12 236);--ai:oklch(0.6 0.15 48);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="33"]{--ac:oklch(0.83 0.175 254);--achi:oklch(0.9 0.1 254);--acfg:oklch(0.88 0.085 254);--ai:oklch(0.82 0.14 66);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="33"]{--ac:oklch(0.6 0.195 254);--achi:oklch(0.72 0.15 254);--acfg:oklch(0.38 0.12 254);--ai:oklch(0.6 0.15 66);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="34"]{--ac:oklch(0.83 0.175 272);--achi:oklch(0.9 0.1 272);--acfg:oklch(0.88 0.085 272);--ai:oklch(0.82 0.14 84);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="34"]{--ac:oklch(0.6 0.195 272);--achi:oklch(0.72 0.15 272);--acfg:oklch(0.38 0.12 272);--ai:oklch(0.6 0.15 84);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="35"]{--ac:oklch(0.83 0.175 290);--achi:oklch(0.9 0.1 290);--acfg:oklch(0.88 0.085 290);--ai:oklch(0.82 0.14 102);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="35"]{--ac:oklch(0.6 0.195 290);--achi:oklch(0.72 0.15 290);--acfg:oklch(0.38 0.12 290);--ai:oklch(0.6 0.15 102);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="36"]{--ac:oklch(0.83 0.175 308);--achi:oklch(0.9 0.1 308);--acfg:oklch(0.88 0.085 308);--ai:oklch(0.82 0.14 120);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="36"]{--ac:oklch(0.6 0.195 308);--achi:oklch(0.72 0.15 308);--acfg:oklch(0.38 0.12 308);--ai:oklch(0.6 0.15 120);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="37"]{--ac:oklch(0.83 0.175 326);--achi:oklch(0.9 0.1 326);--acfg:oklch(0.88 0.085 326);--ai:oklch(0.82 0.14 138);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="37"]{--ac:oklch(0.6 0.195 326);--achi:oklch(0.72 0.15 326);--acfg:oklch(0.38 0.12 326);--ai:oklch(0.6 0.15 138);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="38"]{--ac:oklch(0.83 0.175 344);--achi:oklch(0.9 0.1 344);--acfg:oklch(0.88 0.085 344);--ai:oklch(0.82 0.14 156);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="38"]{--ac:oklch(0.6 0.195 344);--achi:oklch(0.72 0.15 344);--acfg:oklch(0.38 0.12 344);--ai:oklch(0.6 0.15 156);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="39"]{--ac:oklch(0.83 0.175 2);--achi:oklch(0.9 0.1 2);--acfg:oklch(0.88 0.085 2);--ai:oklch(0.82 0.14 174);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="39"]{--ac:oklch(0.6 0.195 2);--achi:oklch(0.72 0.15 2);--acfg:oklch(0.38 0.12 2);--ai:oklch(0.6 0.15 174);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="40"]{--ac:oklch(0.75 0.072 20);--achi:oklch(0.9 0.1 20);--acfg:oklch(0.88 0.085 20);--ai:oklch(0.74 0.062 168);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="40"]{--ac:oklch(0.52 0.085 20);--achi:oklch(0.72 0.15 20);--acfg:oklch(0.38 0.12 20);--ai:oklch(0.52 0.072 168);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="41"]{--ac:oklch(0.75 0.072 38);--achi:oklch(0.9 0.1 38);--acfg:oklch(0.88 0.085 38);--ai:oklch(0.74 0.062 186);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="41"]{--ac:oklch(0.52 0.085 38);--achi:oklch(0.72 0.15 38);--acfg:oklch(0.38 0.12 38);--ai:oklch(0.52 0.072 186);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="42"]{--ac:oklch(0.75 0.072 56);--achi:oklch(0.9 0.1 56);--acfg:oklch(0.88 0.085 56);--ai:oklch(0.74 0.062 204);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="42"]{--ac:oklch(0.52 0.085 56);--achi:oklch(0.72 0.15 56);--acfg:oklch(0.38 0.12 56);--ai:oklch(0.52 0.072 204);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="43"]{--ac:oklch(0.75 0.072 74);--achi:oklch(0.9 0.1 74);--acfg:oklch(0.88 0.085 74);--ai:oklch(0.74 0.062 222);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="43"]{--ac:oklch(0.52 0.085 74);--achi:oklch(0.72 0.15 74);--acfg:oklch(0.38 0.12 74);--ai:oklch(0.52 0.072 222);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="44"]{--ac:oklch(0.75 0.072 92);--achi:oklch(0.9 0.1 92);--acfg:oklch(0.88 0.085 92);--ai:oklch(0.74 0.062 240);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="44"]{--ac:oklch(0.52 0.085 92);--achi:oklch(0.72 0.15 92);--acfg:oklch(0.38 0.12 92);--ai:oklch(0.52 0.072 240);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="45"]{--ac:oklch(0.75 0.072 110);--achi:oklch(0.9 0.1 110);--acfg:oklch(0.88 0.085 110);--ai:oklch(0.74 0.062 258);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="45"]{--ac:oklch(0.52 0.085 110);--achi:oklch(0.72 0.15 110);--acfg:oklch(0.38 0.12 110);--ai:oklch(0.52 0.072 258);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="46"]{--ac:oklch(0.75 0.072 128);--achi:oklch(0.9 0.1 128);--acfg:oklch(0.88 0.085 128);--ai:oklch(0.74 0.062 276);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="46"]{--ac:oklch(0.52 0.085 128);--achi:oklch(0.72 0.15 128);--acfg:oklch(0.38 0.12 128);--ai:oklch(0.52 0.072 276);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="47"]{--ac:oklch(0.75 0.072 146);--achi:oklch(0.9 0.1 146);--acfg:oklch(0.88 0.085 146);--ai:oklch(0.74 0.062 294);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="47"]{--ac:oklch(0.52 0.085 146);--achi:oklch(0.72 0.15 146);--acfg:oklch(0.38 0.12 146);--ai:oklch(0.52 0.072 294);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="48"]{--ac:oklch(0.75 0.072 164);--achi:oklch(0.9 0.1 164);--acfg:oklch(0.88 0.085 164);--ai:oklch(0.74 0.062 312);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="48"]{--ac:oklch(0.52 0.085 164);--achi:oklch(0.72 0.15 164);--acfg:oklch(0.38 0.12 164);--ai:oklch(0.52 0.072 312);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="49"]{--ac:oklch(0.75 0.072 182);--achi:oklch(0.9 0.1 182);--acfg:oklch(0.88 0.085 182);--ai:oklch(0.74 0.062 330);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="49"]{--ac:oklch(0.52 0.085 182);--achi:oklch(0.72 0.15 182);--acfg:oklch(0.38 0.12 182);--ai:oklch(0.52 0.072 330);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="50"]{--ac:oklch(0.75 0.072 200);--achi:oklch(0.9 0.1 200);--acfg:oklch(0.88 0.085 200);--ai:oklch(0.74 0.062 348);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="50"]{--ac:oklch(0.52 0.085 200);--achi:oklch(0.72 0.15 200);--acfg:oklch(0.38 0.12 200);--ai:oklch(0.52 0.072 348);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="51"]{--ac:oklch(0.75 0.072 218);--achi:oklch(0.9 0.1 218);--acfg:oklch(0.88 0.085 218);--ai:oklch(0.74 0.062 6);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="51"]{--ac:oklch(0.52 0.085 218);--achi:oklch(0.72 0.15 218);--acfg:oklch(0.38 0.12 218);--ai:oklch(0.52 0.072 6);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="52"]{--ac:oklch(0.75 0.072 236);--achi:oklch(0.9 0.1 236);--acfg:oklch(0.88 0.085 236);--ai:oklch(0.74 0.062 24);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="52"]{--ac:oklch(0.52 0.085 236);--achi:oklch(0.72 0.15 236);--acfg:oklch(0.38 0.12 236);--ai:oklch(0.52 0.072 24);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="53"]{--ac:oklch(0.75 0.072 254);--achi:oklch(0.9 0.1 254);--acfg:oklch(0.88 0.085 254);--ai:oklch(0.74 0.062 42);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="53"]{--ac:oklch(0.52 0.085 254);--achi:oklch(0.72 0.15 254);--acfg:oklch(0.38 0.12 254);--ai:oklch(0.52 0.072 42);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="54"]{--ac:oklch(0.75 0.072 272);--achi:oklch(0.9 0.1 272);--acfg:oklch(0.88 0.085 272);--ai:oklch(0.74 0.062 60);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="54"]{--ac:oklch(0.52 0.085 272);--achi:oklch(0.72 0.15 272);--acfg:oklch(0.38 0.12 272);--ai:oklch(0.52 0.072 60);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="55"]{--ac:oklch(0.75 0.072 290);--achi:oklch(0.9 0.1 290);--acfg:oklch(0.88 0.085 290);--ai:oklch(0.74 0.062 78);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="55"]{--ac:oklch(0.52 0.085 290);--achi:oklch(0.72 0.15 290);--acfg:oklch(0.38 0.12 290);--ai:oklch(0.52 0.072 78);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="56"]{--ac:oklch(0.75 0.072 308);--achi:oklch(0.9 0.1 308);--acfg:oklch(0.88 0.085 308);--ai:oklch(0.74 0.062 96);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="56"]{--ac:oklch(0.52 0.085 308);--achi:oklch(0.72 0.15 308);--acfg:oklch(0.38 0.12 308);--ai:oklch(0.52 0.072 96);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="57"]{--ac:oklch(0.75 0.072 326);--achi:oklch(0.9 0.1 326);--acfg:oklch(0.88 0.085 326);--ai:oklch(0.74 0.062 114);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="57"]{--ac:oklch(0.52 0.085 326);--achi:oklch(0.72 0.15 326);--acfg:oklch(0.38 0.12 326);--ai:oklch(0.52 0.072 114);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="58"]{--ac:oklch(0.75 0.072 344);--achi:oklch(0.9 0.1 344);--acfg:oklch(0.88 0.085 344);--ai:oklch(0.74 0.062 132);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="58"]{--ac:oklch(0.52 0.085 344);--achi:oklch(0.72 0.15 344);--acfg:oklch(0.38 0.12 344);--ai:oklch(0.52 0.072 132);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="59"]{--ac:oklch(0.75 0.072 2);--achi:oklch(0.9 0.1 2);--acfg:oklch(0.88 0.085 2);--ai:oklch(0.74 0.062 150);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="59"]{--ac:oklch(0.52 0.085 2);--achi:oklch(0.72 0.15 2);--acfg:oklch(0.38 0.12 2);--ai:oklch(0.52 0.072 150);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="60"]{--ac:oklch(0.66 0.145 20);--achi:oklch(0.9 0.1 20);--acfg:oklch(0.88 0.085 20);--ai:oklch(0.66 0.115 218);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="60"]{--ac:oklch(0.43 0.165 20);--achi:oklch(0.72 0.15 20);--acfg:oklch(0.38 0.12 20);--ai:oklch(0.43 0.13 218);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="61"]{--ac:oklch(0.66 0.145 38);--achi:oklch(0.9 0.1 38);--acfg:oklch(0.88 0.085 38);--ai:oklch(0.66 0.115 236);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="61"]{--ac:oklch(0.43 0.165 38);--achi:oklch(0.72 0.15 38);--acfg:oklch(0.38 0.12 38);--ai:oklch(0.43 0.13 236);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="62"]{--ac:oklch(0.66 0.145 56);--achi:oklch(0.9 0.1 56);--acfg:oklch(0.88 0.085 56);--ai:oklch(0.66 0.115 254);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="62"]{--ac:oklch(0.43 0.165 56);--achi:oklch(0.72 0.15 56);--acfg:oklch(0.38 0.12 56);--ai:oklch(0.43 0.13 254);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="63"]{--ac:oklch(0.66 0.145 74);--achi:oklch(0.9 0.1 74);--acfg:oklch(0.88 0.085 74);--ai:oklch(0.66 0.115 272);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="63"]{--ac:oklch(0.43 0.165 74);--achi:oklch(0.72 0.15 74);--acfg:oklch(0.38 0.12 74);--ai:oklch(0.43 0.13 272);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="64"]{--ac:oklch(0.66 0.145 92);--achi:oklch(0.9 0.1 92);--acfg:oklch(0.88 0.085 92);--ai:oklch(0.66 0.115 290);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="64"]{--ac:oklch(0.43 0.165 92);--achi:oklch(0.72 0.15 92);--acfg:oklch(0.38 0.12 92);--ai:oklch(0.43 0.13 290);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="65"]{--ac:oklch(0.66 0.145 110);--achi:oklch(0.9 0.1 110);--acfg:oklch(0.88 0.085 110);--ai:oklch(0.66 0.115 308);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="65"]{--ac:oklch(0.43 0.165 110);--achi:oklch(0.72 0.15 110);--acfg:oklch(0.38 0.12 110);--ai:oklch(0.43 0.13 308);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="66"]{--ac:oklch(0.66 0.145 128);--achi:oklch(0.9 0.1 128);--acfg:oklch(0.88 0.085 128);--ai:oklch(0.66 0.115 326);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="66"]{--ac:oklch(0.43 0.165 128);--achi:oklch(0.72 0.15 128);--acfg:oklch(0.38 0.12 128);--ai:oklch(0.43 0.13 326);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="67"]{--ac:oklch(0.66 0.145 146);--achi:oklch(0.9 0.1 146);--acfg:oklch(0.88 0.085 146);--ai:oklch(0.66 0.115 344);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="67"]{--ac:oklch(0.43 0.165 146);--achi:oklch(0.72 0.15 146);--acfg:oklch(0.38 0.12 146);--ai:oklch(0.43 0.13 344);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="68"]{--ac:oklch(0.66 0.145 164);--achi:oklch(0.9 0.1 164);--acfg:oklch(0.88 0.085 164);--ai:oklch(0.66 0.115 2);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="68"]{--ac:oklch(0.43 0.165 164);--achi:oklch(0.72 0.15 164);--acfg:oklch(0.38 0.12 164);--ai:oklch(0.43 0.13 2);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="69"]{--ac:oklch(0.66 0.145 182);--achi:oklch(0.9 0.1 182);--acfg:oklch(0.88 0.085 182);--ai:oklch(0.66 0.115 20);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="69"]{--ac:oklch(0.43 0.165 182);--achi:oklch(0.72 0.15 182);--acfg:oklch(0.38 0.12 182);--ai:oklch(0.43 0.13 20);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="70"]{--ac:oklch(0.66 0.145 200);--achi:oklch(0.9 0.1 200);--acfg:oklch(0.88 0.085 200);--ai:oklch(0.66 0.115 38);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="70"]{--ac:oklch(0.43 0.165 200);--achi:oklch(0.72 0.15 200);--acfg:oklch(0.38 0.12 200);--ai:oklch(0.43 0.13 38);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="71"]{--ac:oklch(0.66 0.145 218);--achi:oklch(0.9 0.1 218);--acfg:oklch(0.88 0.085 218);--ai:oklch(0.66 0.115 56);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="71"]{--ac:oklch(0.43 0.165 218);--achi:oklch(0.72 0.15 218);--acfg:oklch(0.38 0.12 218);--ai:oklch(0.43 0.13 56);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="72"]{--ac:oklch(0.66 0.145 236);--achi:oklch(0.9 0.1 236);--acfg:oklch(0.88 0.085 236);--ai:oklch(0.66 0.115 74);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="72"]{--ac:oklch(0.43 0.165 236);--achi:oklch(0.72 0.15 236);--acfg:oklch(0.38 0.12 236);--ai:oklch(0.43 0.13 74);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="73"]{--ac:oklch(0.66 0.145 254);--achi:oklch(0.9 0.1 254);--acfg:oklch(0.88 0.085 254);--ai:oklch(0.66 0.115 92);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="73"]{--ac:oklch(0.43 0.165 254);--achi:oklch(0.72 0.15 254);--acfg:oklch(0.38 0.12 254);--ai:oklch(0.43 0.13 92);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="74"]{--ac:oklch(0.66 0.145 272);--achi:oklch(0.9 0.1 272);--acfg:oklch(0.88 0.085 272);--ai:oklch(0.66 0.115 110);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="74"]{--ac:oklch(0.43 0.165 272);--achi:oklch(0.72 0.15 272);--acfg:oklch(0.38 0.12 272);--ai:oklch(0.43 0.13 110);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="75"]{--ac:oklch(0.66 0.145 290);--achi:oklch(0.9 0.1 290);--acfg:oklch(0.88 0.085 290);--ai:oklch(0.66 0.115 128);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="75"]{--ac:oklch(0.43 0.165 290);--achi:oklch(0.72 0.15 290);--acfg:oklch(0.38 0.12 290);--ai:oklch(0.43 0.13 128);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="76"]{--ac:oklch(0.66 0.145 308);--achi:oklch(0.9 0.1 308);--acfg:oklch(0.88 0.085 308);--ai:oklch(0.66 0.115 146);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="76"]{--ac:oklch(0.43 0.165 308);--achi:oklch(0.72 0.15 308);--acfg:oklch(0.38 0.12 308);--ai:oklch(0.43 0.13 146);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="77"]{--ac:oklch(0.66 0.145 326);--achi:oklch(0.9 0.1 326);--acfg:oklch(0.88 0.085 326);--ai:oklch(0.66 0.115 164);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="77"]{--ac:oklch(0.43 0.165 326);--achi:oklch(0.72 0.15 326);--acfg:oklch(0.38 0.12 326);--ai:oklch(0.43 0.13 164);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="78"]{--ac:oklch(0.66 0.145 344);--achi:oklch(0.9 0.1 344);--acfg:oklch(0.88 0.085 344);--ai:oklch(0.66 0.115 182);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="78"]{--ac:oklch(0.43 0.165 344);--achi:oklch(0.72 0.15 344);--acfg:oklch(0.38 0.12 344);--ai:oklch(0.43 0.13 182);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-theme="dark"][data-scheme="79"]{--ac:oklch(0.66 0.145 2);--achi:oklch(0.9 0.1 2);--acfg:oklch(0.88 0.085 2);--ai:oklch(0.66 0.115 200);--onac:#10130F;--onai:#10130F}
html[data-theme="light"][data-scheme="79"]{--ac:oklch(0.43 0.165 2);--achi:oklch(0.72 0.15 2);--acfg:oklch(0.38 0.12 2);--ai:oklch(0.43 0.13 200);--onac:#F4F6F4;--onai:#F4F6F4}
html[data-contrast="on"]{--tx:#FFFFFF;--tx2:#E2E8E4;--dm:#B7C1BA;--ln:color-mix(in oklab, var(--fg) 20%, transparent);--ln2:color-mix(in oklab, var(--fg) 40%, transparent)}
html[data-theme="light"][data-contrast="on"]{--tx:#0C100E;--tx2:#242A26;--dm:#39423D;--ln:color-mix(in oklab, var(--fg) 26%, transparent);--ln2:color-mix(in oklab, var(--fg) 46%, transparent)}
html[data-cbsafe="on"]{--rd:oklch(0.72 0.16 48);--gn:oklch(0.74 0.13 250)}
html[data-theme="light"][data-cbsafe="on"]{--rd:oklch(0.62 0.17 48);--gn:oklch(0.58 0.15 250)}
html[data-plain="on"]{--pagebg:var(--bg)}
html[data-motion="off"] *{animation:none!important;transition:none!important}
html[data-scale="110"]{zoom:1.1} html[data-scale="125"]{zoom:1.25} html[data-scale="140"]{zoom:1.4}

/* ============ base ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--pagebg);color:var(--tx);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
input,textarea,select,button{font:inherit;color:inherit}
textarea{resize:none}
a{color:var(--ac);text-decoration:none}
a:hover{color:var(--achi)}
h1,h2,h3,p{margin:0}
h1{font-size:25px;font-weight:600;letter-spacing:-.025em}
h2{font-size:19px;font-weight:600;letter-spacing:-.015em}
h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--fg) 13%, transparent)}
::-webkit-scrollbar-track{background:transparent}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--ac) 50%, transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* ============ text helpers ============ */
.mono{font-family:var(--mono)}
.label{font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dm)}
.label-sm{font:400 9px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dm)}
.meta{font:400 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--dm)}
.dim{color:var(--dm)}
.tx2{color:var(--tx2)}
.pretty{text-wrap:pretty}
.balance{text-wrap:balance}
.grow{flex:1}
.rule{flex:1;min-width:20px;height:1px;background:var(--ln)}
.nowrap{white-space:nowrap}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}

/* ============ shell ============ */
.topbar{flex:none;display:flex;align-items:center;gap:var(--s2);flex-wrap:nowrap;overflow-x:auto;padding:10px 22px;border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--bg) 72%, transparent)}
.topbar>.btn,.topbar>.lang,.topbar>.brand-mark,.topbar>.back-mark{align-self:center}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
a.btn:hover{color:var(--tx)}
a.btn.btn-accent{color:var(--onac)}
a.btn.btn-ai{color:var(--ai)}
.topbar>.titles,.topbar>.brand{margin-right:var(--s2)}
.brand{flex:none;display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ac);color:var(--ac);font:600 11px var(--mono);letter-spacing:.04em}
a.brand-mark:hover{background:color-mix(in oklab, var(--ac) 14%, transparent);color:var(--ac)}
.back-mark{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ln2);color:var(--dm);font-size:15px;line-height:1;background:transparent;cursor:pointer}
.back-mark:hover{border-color:var(--tx);color:var(--tx)}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:600;letter-spacing:-.01em;line-height:1.1}
.titles{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden}
.titles-sub{font:400 10px var(--mono);letter-spacing:.1em;color:var(--dm)}
.page{flex:1;min-height:0;overflow-y:auto;padding:14px 22px 56px;display:flex;flex-direction:column;gap:var(--s4)}

body[data-assist="on"] .page{padding-right:22px}
.page-split{flex-wrap:wrap;flex-direction:row;align-content:flex-start;gap:18px}
.pane{flex:1 1 360px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--s4)}
.pane-narrow{flex:1 1 250px}
.full{flex:1 1 100%}
.card.full{flex:0 0 auto;width:100%}
.page:not(.page-split)>*{flex:0 0 auto}
.page:not(.page-split)>.full{width:100%}
.page:not(.page-split)>.window-body{flex:1 1 auto;min-height:0}
.bar{width:100%}
.zone-head>.bar,.row>.bar{flex:1 1 60px;width:auto;min-width:40px}
/* compact key/value block: the value column stays narrow instead of stretching */
.kv{max-width:440px}
/* record forms: the title is one line, the description is the only wide field */
.form-row{display:flex;flex-direction:column;gap:4px;width:100%}
.form-row>.input{width:100%;max-width:520px}
.form-row>.textarea{width:100%;min-height:96px}
.row-stack>.form-row{flex:0 0 auto}
.kv .row{gap:8px 10px;padding:8px 12px}
.kv .row>.input{flex:0 0 190px;max-width:190px}
.kv .row>.row-main{flex:1 1 auto}
.kv .row>.row-num{flex:0 0 auto;text-align:right}
/* plan lists: header and rows share one column geometry, so every label sits
   above its own data and inline controls end up the same width */
.pl-row{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 14px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;text-align:left;overflow-x:auto;color:inherit;font:inherit}
button.pl-row{cursor:pointer}
button.pl-row:hover{background:var(--p2)}
.pl-row.row-head{padding:8px 14px;background:var(--p2);align-items:flex-end}
.pl-row>span{display:block}
.pl-row>.pl-c-num{flex:0 0 42px;min-width:42px}
.pl-row>.pl-c-title{flex:1 1 220px;min-width:150px}
.pl-row>.pl-c-fix{flex:0 0 104px;min-width:104px}
.pl-row>.pl-c-wide{flex:0 0 148px;min-width:148px}
.pl-row .input,.pl-row .select{width:100%}
.pl-row .sortable{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dm);white-space:nowrap}
.pl-row .sortable .sort-arrow{opacity:.55}
.pl-row .sortable:hover,.pl-row .sortable[aria-sort="ascending"],.pl-row .sortable[aria-sort="descending"]{color:var(--ac)}
.pl-row .row-main{display:flex;flex-direction:column;gap:2px}
@media (max-width:1180px){.pl-row>.tk-hide{display:none}}
@media (max-width:900px){.pl-row>.pl-c-wide{display:none}}
/* the export trio stays on one line with the rest of the plan header */
.btn-xs{height:28px;padding:0 9px;font:600 10px var(--mono);letter-spacing:.06em}
.agent-feed{overflow-x:hidden}
.agent-status{flex:none;padding:11px 16px;border-bottom:1px solid var(--ln);font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--dm)}
.toolbar{flex:none;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 55%, transparent)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field-grow{flex:1 1 220px}
.zone-head>.field-grow{flex:1 1 220px}
.field-sm{flex:0 1 110px;min-width:96px}
.field-fill{flex:1 1 150px;min-width:0}
.field>.input,.field>.select,.field>.textarea{width:100%;min-width:0}

/* ============ controls ============ */
.btn{height:32px;padding:0 13px;background:transparent;border:1px solid var(--ln2);cursor:pointer;font-size:12.5px;white-space:nowrap}
.btn:hover{border-color:var(--tx)}
.btn-accent{background:var(--ac);border:0;color:var(--onac);font-weight:600}
.btn-accent:hover{filter:brightness(1.06)}
.btn-ai{border-color:color-mix(in oklab, var(--ai) 45%, transparent);color:var(--ai)}
.seg>button[aria-selected="true"],.chip[aria-pressed="true"]{color:var(--ac)}
.btn-ai:hover{background:color-mix(in oklab, var(--ai) 14%, transparent);border-color:var(--ai)}
.btn-danger:hover{border-color:var(--rd);color:var(--rd)}
/* a toggle button shows its on-state, not just its hover */
.btn[aria-pressed="true"]{background:color-mix(in oklab, var(--ai) 18%, transparent);border-color:var(--ai);color:var(--ai)}
.btn[aria-pressed="true"]:hover{background:color-mix(in oklab, var(--ai) 26%, transparent);border-color:var(--ai);color:var(--ai)}
#assistToggle[aria-pressed="true"]{font-weight:600}
.btn-lg{height:40px;padding:0 18px;font-size:13px}
/* SIZE ONLY: colour belongs to the variant (.btn-accent/.btn-ai/.btn-quiet) */
.btn-sm{height:28px;padding:0 11px;font:500 10.5px var(--mono);letter-spacing:.06em}
.btn-quiet,.btn-sm:not(.btn-accent):not(.btn-ai):not(.btn-danger){color:var(--dm)}
.btn-sm.btn-accent{color:var(--onac)}
.btn-sm.btn-ai{color:var(--ai)}
.btn-icon{width:26px;height:26px;display:grid;place-items:center;padding:0;background:transparent;border:1px solid var(--ln2);cursor:pointer;color:var(--dm);font-size:12px;line-height:1}
.btn-icon:hover{border-color:var(--ac);color:var(--ac)}
.input,.select,.textarea{height:38px;padding:0 12px;background:var(--p2);border:1px solid var(--ln);outline:none;font-size:13px;min-width:0}
.input:focus,.select:focus,.textarea:focus{border-color:var(--ac)}
.input-mono{font:500 12.5px var(--mono)}
.textarea{height:202px;padding:14px;line-height:1.65;font-family:var(--sans)}
.seg{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--ln2)}
.seg>button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 13px;background:transparent;border:0;cursor:pointer;font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx2);white-space:nowrap}
.seg>button:hover{background:color-mix(in oklab, var(--fg) 3.5%, transparent)}
.seg>button[aria-selected="true"]{background:color-mix(in oklab, var(--ac) 13%, transparent);color:var(--ac)}
.lang{display:flex;flex:none;border:1px solid var(--ln2)}
.lang>button{width:40px;height:32px;border:0;cursor:pointer;background:transparent;font:600 11px var(--mono);color:var(--tx2)}
.lang>button:hover{color:var(--tx)}
/* the active chip is a filled accent plate: ink must invert against it, in both themes */
.lang>button[aria-selected="true"]{background:var(--ac);color:var(--onac)}
html[data-contrast="on"] .lang>button[aria-selected="true"]{color:var(--onac)}
html[data-contrast="on"] .lang>button{color:var(--tx)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 10px;background:transparent;border:1px solid var(--ln);cursor:pointer;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--dm);white-space:nowrap}
.chip:hover{border-color:var(--ac)}
.chip[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 12%, transparent);border-color:var(--ac);color:var(--ac)}
.tag{padding:3px 8px;border:1px solid var(--ln2);font:500 9.5px var(--mono);letter-spacing:.1em;color:var(--dm);white-space:nowrap}
.tag-ac{border-color:color-mix(in oklab, var(--ac) 45%, transparent);color:var(--ac)}
.tag-ai{border-color:color-mix(in oklab, var(--ai) 45%, transparent);color:var(--ai)}
.tag-gn{border-color:color-mix(in oklab, var(--gn) 45%, transparent);color:var(--gn)}
.tag-rd{border-color:color-mix(in oklab, var(--rd) 45%, transparent);color:var(--rd)}
.tag-xs{padding:2px 6px;font-size:8.5px;letter-spacing:.08em}
.toggle{display:flex;align-items:flex-start;gap:11px;padding:0;background:transparent;border:0;cursor:pointer;text-align:left}
.toggle-track{flex:none;width:34px;height:18px;margin-top:2px;padding:2px;border:1px solid var(--ln2);display:flex;justify-content:flex-start}
.toggle-knob{width:12px;height:12px;background:var(--dm);display:block}
.toggle[aria-pressed="true"] .toggle-track{background:color-mix(in oklab, var(--ai) 22%, transparent);border-color:var(--ai);justify-content:flex-end}
.toggle[aria-pressed="true"] .toggle-knob{background:var(--ai)}
.toggle-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.toggle-title{font-size:12.5px;font-weight:500}

/* ============ surfaces ============ */
.card{display:flex;flex-direction:column;gap:var(--s3);padding:16px;background:var(--p1);border:1px solid var(--ln)}
.card-top{border-top:2px solid var(--ac)}
.card-left{border-left:2px solid var(--ac)}
.card-ac{background:color-mix(in oklab, var(--ac) 7%, transparent);border-color:color-mix(in oklab, var(--ac) 32%, transparent);border-left:2px solid var(--ac)}
.card-ai{background:color-mix(in oklab, var(--ai) 6%, transparent);border-color:color-mix(in oklab, var(--ai) 32%, transparent);border-left:2px solid var(--ai)}
.card-rd{background:color-mix(in oklab, var(--rd) 6%, transparent);border-color:color-mix(in oklab, var(--rd) 30%, transparent);border-left:2px solid var(--rd)}
.card-gn{background:color-mix(in oklab, var(--gn) 7%, transparent);border-color:color-mix(in oklab, var(--gn) 30%, transparent)}
.card-btn{cursor:pointer;text-align:left;box-shadow:0 4px 14px -14px var(--sh)}
.card-btn:hover{background:var(--p2)}
.zone{display:flex;flex-direction:column;gap:var(--s4);padding:18px;background:color-mix(in oklab, var(--p1) 70%, transparent);border:1px solid var(--ln2)}
.zone-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.grid{display:grid;gap:12px}
.grid-apps{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.grid-tiles{grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr))}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:8px}
.grid-swatches{grid-template-columns:repeat(auto-fill,minmax(min(74px,100%),1fr));gap:8px}
.stat{padding:13px 14px;background:var(--p1);border:1px solid var(--ln);display:flex;flex-direction:column;gap:6px}
.stat-n{font:600 22px var(--mono);letter-spacing:-.02em}
.stat-n-sm{font-size:16px}
.bar{display:block;height:3px;background:color-mix(in oklab, var(--fg) 9%, transparent)}
.bar>span{display:block;height:100%;width:calc(var(--pct,0) * 1%);background:var(--ac)}
.bar-gn>span{background:var(--gn)} .bar-rd>span{background:var(--rd)}
.bar-dm>span{background:color-mix(in oklab, var(--fg) 24%, transparent)}
.bar-thin{height:2px}

/* ============ lists / rows / trees ============ */
.list{display:flex;flex-direction:column;gap:1px;background:var(--ln);border:1px solid var(--ln)}
.list>*{flex:0 0 auto}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;padding:12px 14px;background:var(--p1);border:0;border-left:2px solid transparent;text-align:left;width:100%}
button.row{cursor:pointer}
button.row:hover{background:var(--p2)}
.row-head{background:var(--p2);font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dm);padding:9px 14px}
.row-ac{border-left-color:var(--ac)} .row-ai{border-left-color:var(--ai)}
.row-gn{border-left-color:var(--gn)} .row-rd{border-left-color:var(--rd)}
.row-active{background:color-mix(in oklab, var(--ac) 6%, transparent)}
.row-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-lead{flex:1 1 220px;min-width:0;display:flex;flex-direction:row;align-items:center;gap:9px}
.row-lead>.row-title{flex:1;min-width:0}
.row-tight{flex-wrap:nowrap}
.row-tight>.row-main{flex:1 1 auto}
.row-tight>.input{flex:0 1 auto}
.row-title{font-size:13px;line-height:1.45}
/* a card's lead line is a short bold title; long prose belongs in .meta below it */
.card>.row-title,.board-card>.row-title,.app-card>.row-title{font-weight:600;color:var(--tx)}
.board-card>.row-title,.app-card>.row-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card>.row-title.tx2{font-weight:400;color:var(--tx2)}
/* prose is never clamped — .pretty marks running text */
.card>.row-title.pretty{font-weight:400;display:block;overflow:visible}
.row-when{flex:none;font:500 11px var(--mono);color:var(--dm)}
.row-num{flex:none;font:500 11.5px var(--mono);color:var(--tx)}
.row-col{flex:none;font:400 9.5px var(--mono);color:var(--dm)}
.row-chev{flex:none;font-size:14px;color:var(--dm)}
.tree-group{display:flex;flex-direction:column;background:var(--p1)}
.tree-head{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;padding:12px 14px;background:transparent;border:0;cursor:pointer;text-align:left}
.tree-head:hover{background:var(--p2)}
.tree-head>.row-main{flex:1 1 auto}
.zone-head>.input,.toolbar>.input,.row>.input{flex:1 1 200px}
/* the add-strip field is an invitation to type: active border, focus ring */
.zone-head>.input{height:36px;background:var(--p1);
  border:1px solid color-mix(in oklab, var(--ac) 45%, transparent);color:var(--tx)}
.zone-head>.input::placeholder{color:var(--dm)}
.zone-head>.input:hover{border-color:var(--ac)}
.zone-head>.input:focus{outline:none;border-color:var(--ac);
  background:color-mix(in oklab, var(--ac) 7%, transparent);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--ac) 18%, transparent)}
/* in-place record fields keep their quiet underline — they are not add-strips */
.ctx-row>.input,.stat>.input,.ctx-hero>.input{height:auto;background:transparent;box-shadow:none}
.tree-twist{flex:none;width:13px;font:600 11px var(--mono);color:var(--ac)}
.tree-item{display:flex;flex-direction:column;background:var(--p1);border-top:1px solid var(--ln)}
.tree-item-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 14px 10px 36px}
.tree-item-btn{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:9px;padding:0;background:transparent;border:0;cursor:pointer;text-align:left}
.tree-detail{display:flex;flex-wrap:wrap;gap:14px;margin:0 14px 14px 36px;padding:14px;background:var(--p2);border:1px solid var(--ln);border-left:2px solid var(--ac)}
/* sortable column header */
.sortable{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.sortable:hover{color:var(--ac)}
.sortable[aria-sort="ascending"],.sortable[aria-sort="descending"]{color:var(--ac)}
.sort-arrow{font-size:9px;opacity:.9}
.tk-grid{display:grid;align-items:center;gap:10px;padding:10px 14px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;text-align:left}
.tk-grid.row-head{padding:9px 14px;align-items:end}
.tk-grid>*{min-width:0}
.tk-grid>.input,.tk-grid>.select{width:100%}

.wi-grid{display:grid;grid-template-columns:84px 44px minmax(150px,1fr) 96px 44px 96px 96px 58px;align-items:center;gap:10px;padding:8px 14px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;text-align:left}
/* every control in a table row is the same height and fills its column */
.wi-grid>.btn,.wi-grid>.select,.wi-grid>.input{height:28px;width:100%;min-width:0;margin:0;justify-content:center}
.wi-grid>.btn{padding:0 8px;font:600 10px var(--mono);letter-spacing:.06em}
.wi-grid>.row-tools{display:flex;gap:4px;justify-content:flex-end}
.wi-grid>.row-tools>.btn{width:26px;height:26px;padding:0}
/* inline editing in a table row: typographic, not boxed */
.wi-grid>.input,.wi-grid>.select{background:transparent;border:0;
  border-bottom:1px dashed color-mix(in oklab, var(--ac) 55%, transparent);border-radius:0;
  color:var(--tx);box-shadow:none;font:inherit;padding:0}
.wi-grid>.input:focus,.wi-grid>.select:focus{outline:none;
  border-bottom:1px solid var(--ac);background:color-mix(in oklab, var(--ac) 7%, transparent)}
.wi-grid>.select{font:500 11px var(--mono)}
.wi-grid>.input[class*="mono"]{font:500 11.5px var(--mono)}
.wi-grid.row-head{padding:9px 14px}
.wi-grid>*{min-width:0}
.wi-grid>.input,.wi-grid>.select{width:100%;flex:none}
.wi-grid>.btn{width:100%;padding:0 6px;overflow:hidden;text-overflow:ellipsis}
.wi-grid>.tag{justify-self:start}
@media (max-width:840px){.wi-grid>.wi-hide{display:none}
  .wi-grid{grid-template-columns:84px 44px minmax(140px,1fr) 96px 44px 58px}}

.as-grid{display:grid;grid-template-columns:minmax(0,1fr) 92px 74px repeat(var(--cols,5), minmax(58px,74px));align-items:center;gap:10px;padding:10px 16px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;text-align:left}
.as-grid.row-head{padding:9px 16px;align-items:end}
.as-grid>*{min-width:0}
.as-cell{height:30px;display:grid;place-items:center;border:1px solid var(--ln);font:600 12px var(--mono);color:var(--dm)}
.as-cell.on{border-color:color-mix(in oklab, var(--tone) 55%, transparent);background:color-mix(in oklab, var(--tone) 13%, transparent);color:var(--tone)}
.as-cell.off{border-style:dashed;color:color-mix(in oklab, var(--fg) 22%, transparent)}
.as-col{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dm);text-align:center;line-height:1.3}

.textarea-sm{height:62px} .textarea-md{height:84px}
.input-lg{height:42px} .input-wide{flex:1 1 100%}
.input-num{max-width:118px}
.clickable{cursor:pointer}
.row-off{opacity:.42;cursor:not-allowed;position:relative}
.row-off:hover{opacity:.62;background:color-mix(in oklab, var(--fg) 3%, transparent)}
.row-off .joke{display:none;flex:1 1 100%;padding-top:6px;font:400 11px var(--mono);line-height:1.5;color:var(--ac)}
.row-off:hover .joke,.row-off:focus-visible .joke{display:block}
.title-btn{display:block;width:100%;padding:0;background:transparent;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.title-btn:hover{color:var(--ac)}
.card-foot-top{padding-top:0;border-top:none}
.card-flex-lg{flex:1 1 210px} .card-flex{flex:1 1 160px}
.stat-n-lg{font-size:30px}
.page-flush{padding:0}
.card-flush{padding:0;max-width:820px}
.row-stack{flex-direction:column;align-items:stretch}
.row-stack>*{flex:0 0 auto}
.row-compact{padding:7px 8px}
.row-fixed{flex:0 0 auto}
.bar-mini{width:28px}
.statusbars{width:78px;height:4px}
.dist{display:grid;grid-template-columns:minmax(0,132px) minmax(48px,1fr) 44px;align-items:center;gap:10px 12px;padding:9px 14px;background:var(--p1)}
.dist-label{font-size:12px;line-height:1.3;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist>.bar{width:100%;min-width:0}
.dist-val{font:500 12px var(--mono);text-align:right}
@media (max-width:620px){.dist{grid-template-columns:minmax(0,96px) minmax(36px,1fr) 40px;gap:8px}}
.statusbars>i{flex:var(--seg,1)}
.window-wide{max-width:1000px}
.mtabs{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;
  border:1px solid var(--ln2);margin-bottom:2px}
.mtabs>button{min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 10px;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;font:700 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tx2);white-space:nowrap}
.mtabs>button:hover{background:color-mix(in oklab, var(--fg) 3.5%, transparent)}
.mtabs>button[aria-selected="true"]{background:color-mix(in oklab, var(--ac) 12%, transparent);border-bottom-color:var(--ac);color:var(--tx)}
.mtabs>button>.meta{font-weight:700;font-size:11px;color:inherit;opacity:.72}
.jtable{display:grid;gap:10px 12px;align-items:start;padding:10px 16px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;text-align:left}
.jtable.row-head{padding:9px 16px;align-items:end}
.jtable>*{min-width:0}
.jtable>.input{width:100%}
.jcell{font-size:12.5px;line-height:1.45;color:var(--tx2)}
.jcell-mono{font:500 12px var(--mono);color:var(--tx)}
.jcell-num{font:500 12px var(--mono);color:var(--tx);text-align:right}
.jcell-long{font-size:12.5px;line-height:1.5;color:var(--tx2);text-wrap:pretty}
@media (max-width:760px){.jtable{grid-template-columns:minmax(0,1fr)!important;gap:4px;padding:12px 14px}.jtable.row-head{display:none}.jcell-label{display:block;font:400 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dm)}}
.jcell-label{display:none}
.board-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;overflow-y:auto}
.board-bar{flex:none;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:10px 16px;border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 60%, transparent)}
.board-bar>*{flex:none}
.board-bar>.grow{flex:1 1 220px;min-width:0}
.board-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.board-btns{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--ln2)}
.board-btns>button{display:flex;align-items:center;justify-content:center;min-width:38px;height:32px;padding:0 9px;background:transparent;border:0;cursor:pointer;font:500 11px var(--mono);letter-spacing:.04em;color:var(--dm);white-space:nowrap}
.board-btns>button:hover{background:color-mix(in oklab, var(--fg) 4%, transparent);color:var(--tx)}
.board-btns>button[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 14%, transparent);color:var(--ac)}
.board-swatches{display:flex;flex-wrap:wrap;gap:5px}
.board-swatch{width:26px;height:26px;padding:0;border:1px solid var(--ln2);cursor:pointer}
.board-swatch[aria-pressed="true"]{outline:2px solid var(--tx);outline-offset:-5px}
.board-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--p2);color:var(--tx)}
.board-icon:hover{border-color:var(--ac);color:var(--ac)}
.board-icon[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 18%, transparent);border-color:var(--ac);color:var(--ac);outline:none}
.board-icon:disabled{opacity:.35;cursor:not-allowed}
.board-group.grow{flex:1 1 320px;min-width:120px}
.board-group.grow .board-swatches{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.board-body{flex:1 1 auto;min-height:min(58vh, 380px);display:flex;min-width:0}
.board-stage{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:var(--p1)}
.board-side{flex:none;width:var(--side-w, 393px);min-width:180px;max-width:min(560px, 60vw);display:flex;flex-direction:column;border-left:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 62%, transparent)}
/* draggable divider between canvas and panel */
.board-split{flex:none;width:10px;display:flex;align-items:center;justify-content:center;cursor:col-resize;background:linear-gradient(90deg, color-mix(in oklab, var(--sh) 40%, transparent), color-mix(in oklab, var(--sh) 8%, transparent));border-left:1px solid var(--ln);border-right:1px solid var(--ln2);touch-action:none}
.board-split:hover,.board-split[data-drag="true"]{background:color-mix(in oklab, var(--ac) 22%, transparent)}
.board-split i{display:block;width:2px;height:2px;margin:2px 0;background:color-mix(in oklab, var(--fg) 34%, transparent)}
.board-body[data-resizing="true"]{cursor:col-resize;user-select:none}
.board-body[data-resizing="true"] .board-stage canvas{pointer-events:none}
.board-side-head{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--ln)}
.board-side-tabs{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--ln)}
.board-side-tabs>button{padding:9px 8px;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dm)}
.board-side-tabs>button[aria-selected="true"]{background:color-mix(in oklab, var(--ac) 9%, transparent);border-bottom-color:var(--ac);color:var(--tx)}
.board-side-body{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.board-side-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.board-side-grid .board-icon{width:100%;height:46px;flex-direction:column;gap:2px}
.board-icon[draggable="true"]{cursor:grab}
.board-icon[draggable="true"]:active{cursor:grabbing}
@media (max-width:760px){.board-body{flex-direction:column}.board-side{width:100%;max-width:none;border-left:0;border-top:1px solid var(--ln);max-height:210px}.board-split{display:none}}
.board-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.board-map{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.05)}
.board-stage[data-map="draw"] .board-map{pointer-events:none}
.board-stage[data-map="pan"] canvas{pointer-events:none}
.board-stage[data-map="pan"]{cursor:grab}
.board-stage[data-drop="true"]::after{content:attr(data-drop-label);position:absolute;inset:16px;display:grid;place-items:center;border:2px dashed var(--ac);font:500 12px var(--mono);letter-spacing:.06em;color:var(--ac);background:color-mix(in oklab, var(--bg) 62%, transparent);pointer-events:none}
/* in-canvas editor for callouts and text — replaces the browser prompt */
/* note editor: structure · editor · conversion */
.ed-wrap{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.ed-side{flex:0 1 210px;min-width:170px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.ed-main{flex:1 1 460px;min-width:0;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.ed-toolbar{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--ln2)}
.ed-toolbar>button{min-width:34px;height:30px;padding:0 8px;background:transparent;border:0;cursor:pointer;font:500 11px var(--mono);color:var(--dm)}
.ed-toolbar>button:hover{background:color-mix(in oklab, var(--fg) 4%, transparent);color:var(--ac)}
.ed-body{width:100%;min-height:300px;padding:14px;background:var(--p1);border:1px solid var(--ln);outline:none;font:400 13.5px/1.7 var(--sans);resize:vertical}
.ed-body:focus{border-color:var(--ac)}
.ed-struct{display:flex;flex-direction:column;gap:1px;background:var(--ln);border:1px solid var(--ln)}
.ed-struct>button{display:flex;gap:8px;padding:8px 10px;background:var(--p1);border:0;border-left:2px solid transparent;cursor:pointer;text-align:left;font-size:12px;color:var(--tx2)}
.ed-struct>button:hover{background:var(--p2);color:var(--tx)}
.ed-struct>button[data-lvl="3"]{padding-left:22px;font-size:11.5px;color:var(--dm)}
.ed-struct>button[data-lvl="2"]{border-left-color:var(--ac)}
.ed-files{display:flex;flex-direction:column;gap:1px;background:var(--ln);border:1px solid var(--ln)}
.ed-file{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--p1)}
.ed-file-mark{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--ln2);font:600 8.5px var(--mono);color:var(--dm)}
.board-pop{position:absolute;z-index:6;width:272px;max-width:calc(100% - 24px);display:flex;flex-direction:column;gap:10px;padding:13px;background:var(--bg);border:1px solid var(--ln2);box-shadow:0 16px 34px -18px var(--sh);animation:up .14s ease-out}
.board-pop-head{display:flex;align-items:center;gap:8px}
.board-pop textarea{width:100%;height:64px;padding:9px 10px;background:var(--p2);border:1px solid var(--ln);outline:none;font:400 13px/1.45 var(--sans);resize:none}
.board-pop textarea:focus{border-color:var(--ac)}
.board-pop-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.board-pop-kinds{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--ln2)}
.board-pop-kinds>button{flex:1 1 auto;padding:6px 8px;background:transparent;border:0;cursor:pointer;font:500 10px var(--mono);letter-spacing:.06em;color:var(--dm)}
.board-pop-kinds>button[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 14%, transparent);color:var(--ac)}
.board-empty-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 18px;border:1px dashed var(--ln2);font:400 11.5px var(--mono);line-height:1.6;letter-spacing:.04em;color:var(--dm);text-align:center;pointer-events:none;max-width:min(420px,80%)}
.board-foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:9px 16px 14px;border-top:1px solid var(--ln)}
.indent-1{padding-left:18px} .indent-2{padding-left:36px} .indent-3{padding-left:54px}

/* ============ board ============ */
.board{display:flex;gap:12px;align-items:flex-start;min-width:min-content;overflow-x:auto;padding-bottom:6px}
.board-col{flex:1 1 224px;min-width:208px;display:flex;flex-direction:column;gap:9px}
.board-col-head{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--p2);border:1px solid var(--ln);border-top:2px solid var(--ac)}
.board-card{display:flex;flex-direction:column;gap:9px;padding:12px;background:var(--p1);border:1px solid var(--ln);border-left:2px solid var(--ac)}
.board-empty{padding:16px 12px;border:1px dashed var(--ln2);font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--dm);text-align:center}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding-top:8px;border-top:1px solid var(--ln)}

/* ============ matrix ============ */
.matrix{display:grid;grid-template-columns:78px repeat(3,minmax(0,1fr));gap:4px;align-items:stretch}
.matrix-cell{height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:8px;background:var(--p1);border:1px solid var(--ln);cursor:pointer}
.matrix-cell[aria-pressed="true"]{border-color:var(--ac)}
.matrix-cell-n{font:600 16px var(--mono)}
.matrix-row-label{height:64px;display:grid;place-items:center end;font:400 9px var(--mono);letter-spacing:.06em;color:var(--dm);text-align:right;line-height:1.3}
.matrix-col-label{display:grid;place-items:center;padding-top:5px;font:400 9px var(--mono);letter-spacing:.06em;color:var(--dm)}
.sev-gn{--sev:var(--gn)} .sev-ac{--sev:var(--ac)} .sev-rd{--sev:var(--rd)}
.matrix-cell.filled{background:color-mix(in oklab, var(--sev) 12%, transparent);border-color:color-mix(in oklab, var(--sev) 40%, transparent)}
.matrix-cell.filled .matrix-cell-n{color:var(--sev)}

/* ============ session / map ============ */
.qhead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.qtitle{font-size:29px;font-weight:600;letter-spacing:-.025em;line-height:1.12}
.timer{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--ln);background:var(--p1)}
.timer-dot{width:7px;height:7px;border-radius:50%;background:var(--gn);animation:blip 2s ease-in-out infinite}
.timer-val{font:500 21px var(--mono);letter-spacing:.02em}
.workspace{flex-direction:column}
.rail{flex:none;width:auto;display:flex;flex-direction:column;border-right:0;border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 45%, transparent)}
/* mission context: a hero line, then a tight definition list */
.ctx-hero{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;padding:0 0 4px}
.ctx-hero>h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ctx-hero>.input{width:100%;max-width:640px;font-size:16px}
.ctx-dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:0 32px}
.ctx-row{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--ln)}
.ctx-key{flex:0 0 132px;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dm)}
.ctx-val{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.ctx-val.mono{font-family:var(--mono);font-size:12.5px}
.ctx-row>.input{flex:1;min-width:0}
.stat>.input,.stat>.textarea,.ctx-row>.input,.ctx-hero>.input,.ctx-hero>.textarea,
.person .row-main>.input,.card-foot>.input{
  height:auto;padding:3px 0;background:transparent;border:0;
  border-bottom:1px dashed color-mix(in oklab, var(--ac) 55%, transparent);
  border-radius:0;font:inherit;color:var(--tx);box-shadow:none}
.stat>.input:focus,.ctx-row>.input:focus,.ctx-hero>.input:focus,.ctx-hero>.textarea:focus,
.stat>.textarea:focus,.person .row-main>.input:focus{
  outline:none;border-bottom:1px solid var(--ac);background:color-mix(in oklab, var(--ac) 6%, transparent)}
.stat>.input{font-size:13.5px;line-height:1.45;width:100%}
.textarea.readonly{border-style:solid;border-color:var(--ln);background:transparent;cursor:default}
.textarea.soft{background:transparent;border:1px dashed color-mix(in oklab, var(--ac) 45%, transparent);
  height:68px;min-height:40px}
.textarea.grow-fit{min-height:40px;height:auto;overflow:hidden;line-height:1.45;padding:7px 9px}
.textarea.soft:focus{border-style:solid;border-color:var(--ac);background:color-mix(in oklab, var(--ac) 5%, transparent)}
.ctx-row>.input{font-size:13.5px}
.ctx-hero>.input{font-size:19px;font-weight:600;letter-spacing:-.015em;max-width:min(720px,100%)}
.ctx-hero>.input+.input{font-size:13px;font-weight:400;letter-spacing:0}
.person .row-main>.input{font-size:12.5px}
/* an unlocked record says so with a hairline, not with form chrome everywhere */
.rail-solo[data-edit="on"] .ctx-dl,.rail-solo[data-edit="on"] .ctx-hero{position:relative}
.tab-tools{flex:none;padding:5px 22px;border-bottom:1px solid var(--ln);gap:7px;background:color-mix(in oklab, var(--p2) 45%, transparent)}
.tab-tools .btn,.tab-tools .btn-sm,.tab-tools .btn-icon{height:24px;min-height:24px;padding:0 9px;
  font:500 10.5px var(--mono);letter-spacing:.04em;flex:0 0 auto}
.tab-tools .btn-icon{width:28px;padding:0}
.tab-tools>.tag{align-self:center}
.rail-toolbar{flex:none;padding:9px 22px;border-bottom:1px solid var(--ln);gap:8px}
.rail-tabs{flex:none;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));border-bottom:1px solid var(--ln)}



.rail-tabs>button{padding:8px 6px;font-size:10px;letter-spacing:.04em;gap:5px}
.rail-tabs>button{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;font:700 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);overflow:hidden}
.rail-tabs>button[aria-selected="true"]{background:color-mix(in oklab, var(--ac) 7%, transparent);border-bottom-color:var(--ac);color:var(--tx)}
.rail-body{flex:none;max-height:40vh;overflow-y:auto;padding:14px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));align-content:start;gap:10px 14px}
.rail-body>.zone-head,.rail-body>.list,.rail-body>.label,.rail-body>.board-empty,.rail-body>.btn,.rail-body>.card,.rail-body>.subtabs{grid-column:1/-1}
.rail-body .row-stack{height:100%}
/* a supporting tab takes the full screen instead of a 40vh strip */
.rail-solo{flex:1;min-height:0;border-bottom:0}
.rail-solo .rail-body{flex:1;max-height:none;min-height:0}
/* second-level tabs: the four AAR stages inside the Сесія tab */
.subtabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--ln2);background:var(--ln)}
.subtabs>button{position:relative;display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--p1);border:0;border-top:3px solid transparent;cursor:pointer;text-align:left;color:var(--tx2);font:inherit;opacity:.68;transition:opacity .12s ease,background .12s ease;border-bottom:2px solid transparent}
.subtabs>button:hover{opacity:1;background:var(--p2)}
.subtabs>button>.label{flex:none;width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--ln2);font:600 10px var(--mono);color:var(--dm)}
.subtabs>button[aria-selected="true"]{opacity:1;color:var(--tx);
  background:color-mix(in oklab, var(--ai) 14%, transparent);border-bottom-color:var(--ai)}
.subtabs>button[aria-selected="true"]>.label{background:var(--ac);border-color:var(--ac);color:var(--onac)}
.subtabs>button[aria-selected="true"]>.row-title{font-weight:600}
.subtabs>button[aria-selected="true"]>.meta{color:var(--ac)}
.subtabs .row-title{font-size:12px}
@media (max-width:760px){.subtabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rail-drag{display:none}
@media (max-width:760px){.rail-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.phase-nav{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--p2) 60%, transparent)}
.phase-nav>button{padding:7px 10px 8px;gap:7px;opacity:.62}
.phase-nav>button[aria-selected="true"]{opacity:1;background:color-mix(in oklab, var(--ac) 8%, transparent);border-bottom-color:var(--ac)}
.phase-nav>button:hover{opacity:1}
.phase-nav .phase-label{font-size:11.5px}
.phase-nav .bar{height:2px}
.phase-nav .phase-pct{font-size:9.5px}
.phase-nav>button{position:relative;display:flex;align-items:center;gap:12px;padding:13px 16px 15px;background:transparent;border:0;border-right:1px solid var(--ln);cursor:pointer;text-align:left}
.phase-nav>button:hover{background:color-mix(in oklab, var(--fg) 3.5%, transparent)}
.phase-nav>button[aria-selected="true"]{background:color-mix(in oklab, var(--ac) 9%, transparent)}
.phase-body{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.workspace{flex:1;display:flex;min-height:0}
.map{position:relative;width:100%;aspect-ratio:1.4;min-height:250px;overflow:hidden;background:#0C1110 center/cover no-repeat}
.map-grid,.map-ink{position:absolute;inset:0;pointer-events:none}
.map-grid{background:repeating-linear-gradient(0deg, color-mix(in oklab, var(--fg) 5%, transparent) 0 1px, transparent 1px 46px),repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg) 5%, transparent) 0 1px, transparent 1px 46px)}
.map-marker{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);width:23px;height:23px;display:grid;place-items:center;padding:0;background:color-mix(in oklab, var(--bg) 82%, transparent);border:1px solid var(--ln2);cursor:pointer;font:600 10px var(--mono);color:var(--dm)}
.map-marker.flagged{background:color-mix(in oklab, var(--ac) 16%, transparent);border-color:var(--ac);color:var(--tx)}
.map-marker[aria-pressed="true"]{background:var(--ac);border-color:var(--ac);color:var(--onac);animation:ring 1.8s ease-out infinite}
.map-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 13px;border-top:1px solid var(--ln)}
.map-legend span{display:flex;align-items:center;gap:6px;font:400 9.5px var(--mono);letter-spacing:.08em;color:var(--dm)}
.map-legend i{width:13px;border-top:3px solid var(--ac)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(236px,100%),1fr));gap:12px}
.slot{width:100%;height:168px;display:grid;place-items:center;padding:12px;background:var(--p2);border:1px dashed var(--ln2);font:400 10.5px var(--mono);letter-spacing:.06em;color:var(--dm);text-align:center}

/* ============ overlays ============ */
.scrim{position:fixed;inset:0;z-index:22;background:color-mix(in oklab, var(--scrim) 70%, transparent);display:flex;padding:22px}
.scrim-right{justify-content:flex-end;padding:0}
.window{display:flex;flex-direction:column;width:100%;max-width:1180px;margin:0 auto;background:var(--bg);border:1px solid var(--ln2);overflow:hidden;animation:up .18s ease-out}
.window-head{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--ln)}
.window-body{flex:1;min-height:0;display:flex;flex-wrap:wrap;overflow-y:auto}
.window-nav{flex:1 1 262px;min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 55%, transparent)}
.window-nav-list{flex:1;min-height:0;overflow-y:auto;padding-bottom:12px}
.window-main{flex:1 1 420px;min-width:0;min-height:0;display:flex;flex-direction:column}
.article{flex:1;min-height:0;overflow-y:auto;padding:22px 22px 40px;display:flex;flex-direction:column;gap:17px}
.article h2{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.article p{font-size:14px;line-height:1.7;color:var(--tx2)}
.article-sec{display:flex;flex-direction:column;gap:9px}
.article-sec-h{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.num{flex:none;width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--ln2);font:600 9px var(--mono);color:var(--ac)}
.drawer{width:520px;max-width:92vw;height:100%;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--ln2);animation:up .18s ease-out}

/* ============ agent panel ============ */
.agent{flex:none;width:348px;display:flex;flex-direction:column;background:color-mix(in oklab, var(--p1) 60%, transparent)}
.agent-divider{flex:none;width:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg, color-mix(in oklab, var(--sh) 42%, transparent), color-mix(in oklab, var(--sh) 8%, transparent));border-left:1px solid var(--ln);border-right:1px solid var(--ln2)}
.agent-divider i{width:2px;height:2px;background:color-mix(in oklab, var(--fg) 34%, transparent);display:block;margin:2px 0}
.agent-head{flex:none;display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ln)}
.agent-dot{width:8px;height:8px;border-radius:50%;background:var(--ai);animation:blip 2.4s ease-in-out infinite}
.agent-feed{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.agent-card{display:flex;flex-direction:column;gap:9px;padding:13px;background:var(--p1);border:1px solid var(--ln);border-left:2px solid var(--ai);animation:up .22s ease-out}
.agent-card-hint{border-left-color:var(--ac)} .agent-card-chk{border-left-color:var(--rd)}
.agent-cite{padding:7px 9px;background:color-mix(in oklab, var(--fg) 3%, transparent);border-left:1px solid var(--ln2);font:400 10.5px var(--mono);line-height:1.5;color:var(--dm)}
.agent-foot{flex:none;padding:13px 16px 74px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:11px}
.agent-collapsed{flex:none;width:44px;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:16px;border:0;border-left:1px solid var(--ln);background:color-mix(in oklab, var(--p1) 60%, transparent);cursor:pointer}
.agent-collapsed span{writing-mode:vertical-rl;font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ai)}

/* ============ AI assistant dock ============ */
body[data-assist="on"]{padding-right:var(--assist-w, 340px)}
.assist{position:fixed;right:0;top:0;bottom:0;width:var(--assist-w, 340px);max-width:92vw;z-index:38;display:flex;flex-direction:column;border-left:1px solid var(--ln2);background:color-mix(in oklab, var(--p1) 92%, var(--bg));box-shadow:-18px 0 40px -28px var(--sh)}
.assist[hidden]{display:none}
.assist-head{flex:none;display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--ln)}
.assist-ctx{flex:none;padding:9px 14px;border-bottom:1px solid var(--ln);font:400 10px var(--mono);letter-spacing:.08em;color:var(--dm);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.assist-ctx-line{flex:1 1 auto;min-width:0}
.assist-feed{flex:1;min-height:0;overflow-y:auto;padding:13px 14px;display:flex;flex-direction:column;gap:11px}
.assist-msg{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border:1px solid var(--ln);background:var(--p1);animation:down .16s ease-out}
.assist-msg[data-who="you"]{border-left:2px solid var(--ac);background:color-mix(in oklab, var(--ac) 7%, var(--p1))}
.assist-msg[data-who="agent"]{border-left:2px solid var(--ai)}
.assist-msg p{font-size:12.5px;line-height:1.6;color:var(--tx2);text-wrap:pretty}
.assist-cite{padding:7px 9px;background:color-mix(in oklab, var(--fg) 3%, transparent);border-left:1px solid var(--ln2);font:400 10.5px var(--mono);line-height:1.5;color:var(--dm)}
.assist-foot{flex:none;padding:12px 14px 16px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:9px}
.assist-quick{display:flex;flex-direction:column;gap:5px}
.assist-quick>button{padding:8px 10px;background:var(--p1);border:1px solid var(--ln);cursor:pointer;font-size:12px;line-height:1.45;color:var(--tx2);text-align:left}
.assist-quick>button:hover{border-color:var(--ai);color:var(--tx)}
.assist-split{position:fixed;top:0;bottom:0;right:var(--assist-w, 340px);width:8px;z-index:39;cursor:col-resize;background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--sh) 26%, transparent));touch-action:none}
.assist-split:hover,.assist-split[data-drag="true"]{background:color-mix(in oklab, var(--ai) 26%, transparent)}
.assist-split[hidden]{display:none}
@media (max-width:760px){body[data-assist="on"]{padding-right:0}.assist{width:100%;max-width:none}.assist-split{display:none}}

/* ============ вибір додатка ============ */
/* Кнопка живе у верхній панелі, тому сторінка більше не резервує під неї кут:
   перелік — fixed і позиціюється від кнопки в JS, бо панель горизонтально прокручувана
   і `overflow-x:auto` обрізав би absolute-нащадка. */
.appsw{display:contents}
.appsw-btn{font:var(--ctl-f);letter-spacing:.02em}
.appsw-btn[aria-expanded="true"]{border-color:var(--ac);color:var(--ac)}
.switcher[hidden]{display:none}
.switcher{position:fixed;z-index:60;width:288px;max-width:calc(100vw - 36px);display:flex;flex-direction:column;gap:1px;background:var(--ln);border:1px solid var(--ln2);box-shadow:0 18px 40px -20px var(--sh);animation:up .16s ease-out}
.switcher-head{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--p2)}
.switcher a{display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--p1);border-left:2px solid transparent;color:var(--tx2)}
.switcher a:hover{background:var(--p2);color:var(--tx)}
.switcher a[aria-current="page"]{background:color-mix(in oklab, var(--ac) 7%, transparent);border-left-color:var(--ac);color:var(--tx)}
.switcher-code{flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--dm);color:var(--onac)}
.switcher-code{background:var(--card,var(--ac));border-color:var(--card,var(--ac))}
.code-ac{border-color:var(--ac);color:var(--ac)} .code-ai{border-color:var(--ai);color:var(--ai)}
.code-gn{border-color:var(--gn);color:var(--gn)} .code-rd{border-color:var(--rd);color:var(--rd)}
.code-dm{border-color:var(--ln2);color:var(--dm)}

.m-TRZ{--card:oklch(0.84 0.14 178)}
.m-FSH{--card:oklch(0.80 0.13 205)}
.m-SWT{--card:oklch(0.82 0.15 142)}
.m-WHY{--card:oklch(0.76 0.16 24)}
html[data-theme="light"] .m-TRZ{--card:oklch(0.70 0.15 178)}
html[data-cbsafe="on"] .m-TRZ{--card:oklch(0.84 0.09 178)}
/* the contradiction: two poles that cannot both be satisfied */
.trz-poles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.trz-pole{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--p1);border:1px solid var(--ln);border-left:2px solid var(--rd)}
.trz-pole[data-pole="b"]{border-left-color:var(--ac)}
.m-DSS{--card:oklch(0.82 0.155 265)}
html[data-theme="light"] .m-DSS{--card:oklch(0.72 0.17 265)}
html[data-cbsafe="on"] .m-DSS{--card:oklch(0.82 0.10 265)}
/* decision matrix: criteria columns sized from the option count */
.dss-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--opts,3), minmax(88px,120px));gap:8px 10px;padding:10px 14px;background:var(--p1);align-items:center}
.dss-grid.row-head{background:var(--p2);align-items:end}
.dss-cell{height:32px;display:grid;place-items:center;border:1px solid var(--ln);font:600 13px var(--mono)}
.dss-cell[data-best="true"]{border-color:var(--gn);background:color-mix(in oklab, var(--gn) 14%, transparent);color:var(--gn)}
.dss-total{font:700 15px var(--mono)}
/* ---- per-module fills: one hue each, inverse (dark) glyph on top ---- */
.m-PLN{--card:oklch(0.82 0.155 45)}
html[data-theme="light"] .m-PLN{--card:oklch(0.72 0.17 45)}
html[data-cbsafe="on"] .m-PLN{--card:oklch(0.82 0.1 45)}
.m-AAR{--card:oklch(0.82 0.155 25)}
html[data-theme="light"] .m-AAR{--card:oklch(0.72 0.17 25)}
html[data-cbsafe="on"] .m-AAR{--card:oklch(0.82 0.1 25)}
.m-TSK{--card:oklch(0.82 0.155 8)}
html[data-theme="light"] .m-TSK{--card:oklch(0.72 0.17 8)}
html[data-cbsafe="on"] .m-TSK{--card:oklch(0.82 0.1 8)}
.m-RES{--card:oklch(0.82 0.155 196)}
html[data-theme="light"] .m-RES{--card:oklch(0.72 0.17 196)}
html[data-cbsafe="on"] .m-RES{--card:oklch(0.82 0.1 196)}
.m-PRJ{--card:oklch(0.82 0.155 148)}
html[data-theme="light"] .m-PRJ{--card:oklch(0.72 0.17 148)}
html[data-cbsafe="on"] .m-PRJ{--card:oklch(0.82 0.1 148)}
.m-RSK{--card:oklch(0.82 0.155 352)}
html[data-theme="light"] .m-RSK{--card:oklch(0.72 0.17 352)}
html[data-cbsafe="on"] .m-RSK{--card:oklch(0.82 0.1 352)}
.m-ANL{--card:oklch(0.82 0.155 330)}
html[data-theme="light"] .m-ANL{--card:oklch(0.72 0.17 330)}
html[data-cbsafe="on"] .m-ANL{--card:oklch(0.82 0.1 330)}
.m-STR{--card:oklch(0.82 0.155 172)}
html[data-theme="light"] .m-STR{--card:oklch(0.72 0.17 172)}
html[data-cbsafe="on"] .m-STR{--card:oklch(0.82 0.1 172)}
.m-KNH{--card:oklch(0.82 0.155 128)}
html[data-theme="light"] .m-KNH{--card:oklch(0.72 0.17 128)}
html[data-cbsafe="on"] .m-KNH{--card:oklch(0.82 0.1 128)}
.m-NOT{--card:oklch(0.82 0.155 88)}
html[data-theme="light"] .m-NOT{--card:oklch(0.72 0.17 88)}
html[data-cbsafe="on"] .m-NOT{--card:oklch(0.82 0.1 88)}
.m-JRN{--card:oklch(0.82 0.155 64)}
html[data-theme="light"] .m-JRN{--card:oklch(0.72 0.17 64)}
html[data-cbsafe="on"] .m-JRN{--card:oklch(0.82 0.1 64)}
.m-BRD{--card:oklch(0.82 0.155 108)}
html[data-theme="light"] .m-BRD{--card:oklch(0.72 0.17 108)}
html[data-cbsafe="on"] .m-BRD{--card:oklch(0.82 0.1 108)}
.m-SRC{--card:oklch(0.82 0.155 250)}
html[data-theme="light"] .m-SRC{--card:oklch(0.72 0.17 250)}
html[data-cbsafe="on"] .m-SRC{--card:oklch(0.82 0.1 250)}
.m-AI{--card:oklch(0.82 0.155 212)}
html[data-theme="light"] .m-AI{--card:oklch(0.72 0.17 212)}
html[data-cbsafe="on"] .m-AI{--card:oklch(0.82 0.1 212)}
.m-KB{--card:oklch(0.82 0.155 232)}
html[data-theme="light"] .m-KB{--card:oklch(0.72 0.17 232)}
html[data-cbsafe="on"] .m-KB{--card:oklch(0.82 0.1 232)}
.m-MTD{--card:oklch(0.82 0.155 288)}
html[data-theme="light"] .m-MTD{--card:oklch(0.72 0.17 288)}
html[data-cbsafe="on"] .m-MTD{--card:oklch(0.82 0.1 288)}
.m-HLP{--card:oklch(0.82 0.155 308)}
html[data-theme="light"] .m-HLP{--card:oklch(0.72 0.17 308)}
html[data-cbsafe="on"] .m-HLP{--card:oklch(0.82 0.1 308)}
.m-UNT{--card:oklch(0.82 0.155 268)}
html[data-theme="light"] .m-UNT{--card:oklch(0.72 0.17 268)}
html[data-cbsafe="on"] .m-UNT{--card:oklch(0.82 0.1 268)}
.app-mark,.tile-mark,.switcher-code{color:#10130F}
html[data-contrast="on"] .app-mark,html[data-contrast="on"] .tile-mark{color:#000}
.app-mark svg,.tile-mark svg,.switcher-code svg{stroke-width:1.8}

/* ============ app tiles ============ */
.app-card{--card:var(--ac);display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--p1);
  border:1px solid var(--ln);border-top:2px solid var(--card);cursor:pointer;text-align:left;
  box-shadow:0 4px 14px -14px var(--sh);color:inherit}
.app-card:hover{background:var(--p2);border-color:var(--card)}
/* the icon block is the only filled surface */
.app-card .app-mark{background:var(--card);border-color:var(--card);color:var(--onac)}
.app-mark-num{font:600 15px var(--mono);letter-spacing:0;line-height:1}
.app-card-head{display:flex;align-items:center;gap:11px;width:100%}
.app-mark{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ac);color:var(--ac)}
.app-mark svg,.tile-mark svg,.switcher-code svg{display:block}
.app-metrics{display:flex;flex-wrap:wrap;gap:10px 14px;width:100%;padding-top:12px;border-top:1px solid var(--ln)}
.app-card-head>.row-chev{flex:none}
.app-metric{display:flex;flex-direction:column;gap:3px}
.app-metric-n{font:600 16px var(--mono);letter-spacing:-.01em}
.tile{--card:var(--ac);display:flex;align-items:center;gap:15px;padding:20px 18px;background:var(--p1);
  border:1px solid var(--ln);cursor:pointer;text-align:left;box-shadow:0 4px 14px -14px var(--sh);color:inherit}
.tile:hover{background:var(--p2);border-color:var(--card)}
.tile .tile-mark{background:var(--card);border-color:var(--card);color:var(--onac)}
.tile-mark{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ac);color:var(--ac)}
.tile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tile-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.theme-card{flex:1 1 170px;display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--p1);border:1px solid var(--ln);cursor:pointer;text-align:left}
.theme-card[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 9%, transparent);border-color:var(--ac)}
.theme-swatch{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ln2)}
.theme-swatch i{width:14px;height:14px;background:var(--ac);display:block}
.theme-swatch.dark{background:#0B0E0D} .theme-swatch.light{background:#F3F2EE}
.swatch{display:flex;flex-direction:column;gap:6px;padding:7px;background:var(--p1);border:1px solid var(--ln);cursor:pointer}
.swatch[aria-pressed="true"]{background:color-mix(in oklab, var(--ac) 12%, transparent);border-color:var(--ac)}
.swatch-bars{display:flex;gap:3px;height:22px}
.swatch-bars i{display:block}
.swatch-bars i:first-child{flex:2;background:var(--sw-ac)}
.swatch-bars i:last-child{flex:1;background:var(--sw-ai)}
.swatch-name{font:500 9px var(--mono);letter-spacing:.04em;color:var(--dm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swatch-edit{gap:5px;padding:7px 6px 6px}
.swatch-edit .board-icon{width:100%;height:36px}
.swatch-actions{display:flex;gap:3px;justify-content:center}
.swatch-actions>.btn-icon{width:20px;height:20px;font-size:10px}
.swatch-input{height:24px;padding:0 6px;font-size:11px;width:100%}
.grid-swatches{grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr))}

/* ============ spec panel (developer documentation) ============ */
.spec{position:fixed;right:0;top:0;bottom:0;width:min(520px,100%);z-index:45;overflow-y:auto;padding:20px 22px 60px;background:var(--p1);border-left:1px solid var(--ln2);box-shadow:-20px 0 50px -30px var(--sh);display:flex;flex-direction:column;gap:14px}
.spec[hidden]{display:none}
.spec h2{font-size:17px}
.spec h3{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac);margin-top:6px}
.spec p,.spec li{font-size:12.5px;line-height:1.65;color:var(--tx2)}
.spec ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.spec code{font:400 11.5px var(--mono);color:var(--ai)}
.spec-head{display:flex;align-items:center;gap:10px}
.spec-table{width:100%;border-collapse:collapse;font-size:12px}
.spec-table th,.spec-table td{border:1px solid var(--ln);padding:6px 8px;text-align:left;vertical-align:top}
.spec-table th{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dm)}

/* ============ masking game ============ */
.mask{--cell:min(3.4vh, 7.2vw, calc((100vh - 176px) / 20));--board-w:calc(var(--cell) * 10 + 9px + 12px);position:fixed;inset:0;z-index:60;overflow-y:auto;background:#0A0A0C;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px;font-family:var(--mono);color:#E8E8EC}
.mask[hidden]{display:none}
.mask-head{display:flex;align-items:center;gap:14px;width:100%}
.mask-title{font:700 15px var(--mono);letter-spacing:.24em;color:#9AA0B5}
.mask-body{display:flex;gap:16px;align-items:flex-start}
.mask-board{display:grid;grid-template-columns:repeat(10,var(--cell));grid-auto-rows:var(--cell);gap:1px;padding:5px;background:#12131A;border:1px solid #23262F}
.mask-cell{display:block;width:100%;height:100%;background:#0E0F16;border:1px solid #14161F}
.mask-cell.on{border-color:rgba(255,255,255,.18)}
.mask-side{display:flex;flex-direction:column;gap:14px;min-width:96px}
.mask-next{display:grid;grid-template-columns:repeat(4,13px);grid-auto-rows:13px;gap:1px}
.mask-next i{display:block;background:#12131A}
.mask-pad{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:9px;width:var(--board-w);max-width:100%;margin:0 auto}
.mask-pad button{width:100%;height:46px;background:#14161F;border:1px solid #262A36;cursor:pointer;color:#C9CDDB;font-size:16px}
.mask-pad button:active{background:#1B1E29;color:#E8E8EC}
.mask-head{width:var(--board-w);max-width:100%}
.mask-pause{position:absolute;inset:0;background:rgba(8,8,11,.9);display:flex;align-items:center;justify-content:center;padding:18px}
.mask-pause-box{width:100%;max-width:286px;display:flex;flex-direction:column;gap:14px;padding:20px;background:#12131A;border:1px solid #262A36}
.mask-dots{display:flex;gap:7px}
.mask-dots i{flex:1;height:34px;display:grid;place-items:center;background:#0C0D13;border:1px solid #262A36;font:600 15px var(--mono);color:#E8E8EC}
.mask-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mask-keys button{height:44px;background:#14161F;border:1px solid #262A36;cursor:pointer;color:#C9CDDB;font:500 15px var(--mono)}

/* ---- reorder + delete controls (rows and cards) ---- */
.row-tools{display:flex;flex-direction:row;align-items:center;gap:2px;flex:0 0 auto;width:auto}
.row-tools .btn-icon{width:22px;height:22px;min-height:22px;padding:0;font-size:11px;line-height:1}
.row-tools .btn-icon[disabled]{opacity:.3;cursor:default}
/* spans inside .card-foot are block-level, so the display is restated here */
.card-foot>.row-tools,.card .row-tools{display:flex;flex-direction:row;margin-left:auto}
.card .row-tools .btn-icon{width:20px;height:20px;min-height:20px;font-size:10px}


/* ============================================================
   CONTROL SYSTEM — one scale, fixed widths, no reflow
   Three sizes only:
     --ctl-s 24px  toolbars, row controls
     --ctl-m 32px  page-level buttons, add-strips
     --ctl-l 40px  primary page actions
   A control whose LABEL CHANGES WITH STATE gets a min-width in ch
   units sized on its longest label, so the row never reflows.
   ============================================================ */
:root{--ctl-s:24px;--ctl-m:32px;--ctl-l:40px;
  --ctl-f-s:500 10.5px var(--mono);--ctl-f-m:500 12px var(--mono);
  --ctl-f-ui:500 12.5px var(--sans)}

/* --- size, never colour --- */
.btn,.btn-sm,.btn-xs,.btn-icon,.input,.select{box-sizing:border-box}
.btn{height:var(--ctl-m);padding:0 13px;font:500 12.5px var(--sans);letter-spacing:0}
.btn-sm{height:var(--ctl-s);padding:0 10px;font:var(--ctl-f-s);letter-spacing:.04em}
.btn-lg{height:var(--ctl-l);padding:0 16px;font:var(--ctl-f-ui)}
.btn-icon{width:var(--ctl-s);height:var(--ctl-s);min-height:var(--ctl-s);padding:0;font-size:11px}

/* --- toolbars: one band, one height, grouped left → right --- */
.tab-tools{flex:none;display:flex;align-items:center;gap:6px;padding:5px 22px;
  border-bottom:1px solid var(--ln);background:color-mix(in oklab, var(--p2) 45%, transparent)}
.tab-tools .btn,.tab-tools .btn-sm,.tab-tools .btn-icon{height:var(--ctl-s);min-height:var(--ctl-s);
  padding:0 10px;font:var(--ctl-f-s);flex:0 0 auto}
/* the primary action swaps «Редагувати» ↔ «Зберегти»: fixed box, no jump */
.tab-tools>.btn:first-child{min-width:13ch;justify-content:center}
.tab-tools .board-btns{flex:0 0 auto}

/* --- list rows: every control the same height, widths by role --- */
.row{--ctl:var(--ctl-s);align-items:center}
.row>.input,.row>.select,.row>.btn,.row>.btn-sm,.row>.btn-icon{
  height:var(--ctl);min-height:var(--ctl);font:var(--ctl-f-s)}
.row>.input,.row>.select{padding:0 8px;background:var(--p2);border:1px solid var(--ln);color:var(--tx)}
.row>.input:focus,.row>.select:focus{outline:none;border-color:var(--ac)}
.row>.input-mono{flex:0 0 13ch;max-width:13ch}          /* 04:52, 26.09 */
.row>.select{flex:0 0 17ch;max-width:17ch}              /* event type */
.row>.btn-sm{flex:0 0 auto;min-width:12ch;justify-content:center}  /* state toggles */
.row>.btn-icon{flex:0 0 var(--ctl)}
.row>.input:not(.input-mono){flex:1 1 220px;max-width:none}
.row .row-tools .btn-icon{flex:0 0 22px;width:22px;height:22px;min-height:22px}

/* --- in-place record fields stay typographic, never boxed --- */
.ctx-row>.input,.stat>.input,.ctx-hero>.input,.ctx-hero>.textarea{
  height:auto;min-height:0;padding:3px 0;background:transparent;border:0;
  border-bottom:1px dashed color-mix(in oklab, var(--ac) 55%, transparent);box-shadow:none}

/* --- add-strip: the one field that invites input --- */
.zone-head>.input{height:var(--ctl-m);background:var(--p1);
  border:1px solid color-mix(in oklab, var(--ac) 45%, transparent)}
.zone-head>.btn,.zone-head>.btn-accent{height:var(--ctl-m)}

/* rows were 30px and 48px side by side: the control row now has one height,
   and only rows holding wrapping prose are allowed to grow */
.row{min-height:30px}
.row:has(>.input,>.select,>.btn-sm){min-height:34px;padding:6px 14px;flex-wrap:nowrap;overflow-x:auto}
.row.row-head{min-height:28px}
.tab-tools{padding:4px 22px;line-height:1}

/* ============================================================
   MODULE CHROME — every module wears the same bands
   .toolbar / .board-bar / .tab-tools are the SAME control band;
   .mtabs / .rail-tabs / .seg are the SAME tab band.
   Module pages differ in content, never in chrome geometry.
   ============================================================ */
.toolbar,.board-bar,.tab-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:4px 22px;min-height:34px;border-bottom:1px solid var(--ln);
  background:color-mix(in oklab, var(--p2) 45%, transparent);line-height:1}
.toolbar>.btn,.toolbar>.btn-sm,.toolbar>.btn-icon,
.board-bar>.btn,.board-bar>.btn-sm,.board-bar>.btn-icon{
  height:var(--ctl-s);min-height:var(--ctl-s);padding:0 10px;font:var(--ctl-f-s);flex:0 0 auto}
.toolbar>.btn-icon,.board-bar>.btn-icon{width:var(--ctl-s);padding:0}
.toolbar>.input,.board-bar>.input,.tab-tools>.input{height:var(--ctl-s);font:var(--ctl-f-s);
  background:var(--p1);border:1px solid var(--ln)}
.toolbar>.select,.board-bar>.select,.tab-tools>.select{height:var(--ctl-s);font:var(--ctl-f-s)}
/* a state-toggling control in ANY band keeps its box */
.toolbar>.btn:first-child,.board-bar>.btn:first-child{min-width:13ch;justify-content:center}

/* tab bands: one height, one type scale, one active treatment */
.mtabs>button,.rail-tabs>button{padding:8px 10px;font:700 10.5px var(--mono);letter-spacing:.05em;
  text-transform:uppercase;gap:6px}
.seg>button{height:var(--ctl-s);padding:0 10px;font:var(--ctl-f-s)}
.subtabs>button{padding:7px 11px}

/* every module's page body uses the same rhythm.
   Правий край більше нічим не зайнятий: вибір додатка переїхав у верхню панель. */
.page{padding-block:14px 56px;padding-inline:22px;gap:var(--s4)}
.zone{gap:var(--s3)}
.grid-cards{gap:12px}
.list .row{min-height:30px}

/* long values in a key/value block wrap instead of running past the edge */
.kv .row{align-items:flex-start}
.kv .row>.row-num{flex:1 1 auto;min-width:0;white-space:normal;text-align:left;
  overflow-wrap:anywhere;line-height:1.45}
.kv .row>.row-main{flex:0 0 132px;max-width:132px}

/* a header/placeholder cell the width of the reorder+delete group, so the
   columns line up whether or not the record is unlocked */
.row-tools-space{flex:0 0 70px;width:70px}
.row-tools{flex:0 0 70px;width:70px;justify-content:flex-end}

/* 2. header cells take the SAME widths as the controls beneath them, so the
   grid has one sizing system instead of two */
.row-head>.row-main{flex:1 1 220px;min-width:0}
.row-head>.row-col:nth-of-type(1){flex:0 0 17ch}
.row-head>.row-col:nth-of-type(2){flex:0 0 13ch}
.row-head>.row-col:nth-of-type(3){flex:0 0 12ch;min-width:12ch}
.row-head>.row-tools-space{flex:0 0 70px}

/* app-card description is supporting copy, not a heading */
.app-card .row-title.tx2{font-weight:400}

/* ---- plan phase: ordinal + window on the left, title and tasks on the right ---- */
.phase{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 14px;padding:10px 14px;
  background:var(--p1);border-left:2px solid var(--ac);border-top:1px solid var(--ln)}
.list>.phase:first-child{border-top:0}
.phase-ord{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.phase-ord .label{font:600 12px var(--mono);color:var(--ac)}
.phase-time,.phase-ord .input{font:500 11px var(--mono);color:var(--dm)}
.phase-ord .input{width:100%;height:22px;padding:0 6px;background:var(--p2);border:1px solid var(--ln)}
.phase-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.phase-head{display:flex;align-items:center;gap:10px;min-width:0}
.phase-head>.input{flex:1 1 auto;min-width:0;height:26px;padding:0 8px;background:var(--p2);border:1px solid var(--ln)}
.phase-task{display:flex;align-items:center;gap:9px;min-width:0}
.phase-task>.input{flex:1 1 auto;min-width:0;height:24px;padding:0 8px;background:var(--p2);border:1px solid var(--ln);font-size:12px}
.phase-dot{flex:none;width:17px;height:17px;display:grid;place-items:center;border:1px solid var(--ln2);
  font:600 9px var(--mono);color:var(--dm)}

/* ---- modal: metadata first, then the record ---- */
.scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:color-mix(in oklab, var(--bg) 72%, transparent);backdrop-filter:blur(2px)}
.modal{width:min(520px,100%);max-height:86vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:14px;
  padding:20px;background:var(--p1);border:1px solid var(--ln2);box-shadow:0 18px 44px -28px var(--sh)}
.modal>*{min-width:0}
.modal-field>.textarea{min-height:76px;max-height:180px}
.modal-foot{position:sticky;bottom:-20px;margin:0 -20px -20px;padding:12px 20px;background:var(--p1);
  border-top:1px solid var(--ln)}
.modal-head{display:flex;align-items:baseline;gap:10px}
.modal-head .label{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.modal h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em}
.modal-field{display:flex;flex-direction:column;gap:5px}
.modal-field>.input,.modal-field>.select{height:34px;padding:0 10px;background:var(--p2);
  border:1px solid var(--ln);color:var(--tx);font-size:13.5px}
.modal-field>.input:focus,.modal-field>.select:focus{outline:none;border-color:var(--ac)}
.modal-field>.textarea{min-height:76px;padding:9px 10px;background:var(--p2);border:1px solid var(--ln)}
.modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.modal-foot{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--ln)}
.modal-foot .grow{flex:1}
.modal-err{font:500 11.5px var(--mono);color:var(--rd)}

/* ---- charts ---- */
.chart-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 14px;background:var(--p1);border:1px solid var(--ln)}
.chart-plot{position:relative;flex:none;display:grid;place-items:center}
.chart-donut-hole{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none}
.chart-total{font:600 22px var(--mono);letter-spacing:-.02em;color:var(--tx)}
.chart-legend{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:5px}
.chart-key{display:flex;align-items:center;gap:8px;min-width:0}
.chart-dot{flex:none;width:9px;height:9px}
.chart-key-label{flex:1;min-width:0;font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-key-val{flex:none;font:600 12px var(--mono);color:var(--tx)}
.chart-bars{--chart-h:120px;display:flex;align-items:flex-end;gap:10px;padding:12px 14px;
  background:var(--p1);border:1px solid var(--ln)}
.chart-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.chart-col-val{font:600 11px var(--mono);color:var(--tx)}
.chart-track{width:100%;height:var(--chart-h);display:flex;align-items:flex-end;background:color-mix(in oklab, var(--fg) 5%, transparent)}
.chart-fill{width:100%;min-height:2px}
.chart-col-label{font:500 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dm);
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.phase-link{cursor:pointer}
.phase-link:hover{background:var(--p2)}
.phase-link:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}

/* inline editing inside a table row follows the same rule as record fields:
   typographic, transparent, dashed accent underline — never a boxed control */
.pl-row .input,.pl-row .select,.phase .input,.list .row-stack .input{
  height:24px;padding:2px 0;background:transparent;border:0;
  border-bottom:1px dashed color-mix(in oklab, var(--ac) 55%, transparent);
  border-radius:0;color:var(--tx);box-shadow:none;font:inherit;width:100%}
.pl-row .select{padding-right:14px}
.pl-row .input:focus,.pl-row .select:focus,.phase .input:focus,.list .row-stack .input:focus{
  outline:none;border-bottom:1px solid var(--ac);
  background:color-mix(in oklab, var(--ac) 7%, transparent)}
.pl-row .input::placeholder{color:var(--dm)}
.pl-row .pl-c-title .input{font-size:13px}
.pl-row .pl-c-fix .input,.pl-row .pl-c-wide .input,.pl-row .pl-c-num .input{font:500 11.5px var(--mono)}

/* the priority/severity column holds a whole word: size it to the longest label */
.pl-row>.pl-c-fix{flex:0 0 15ch;min-width:15ch}
.pl-row .select{padding-right:2px;text-overflow:ellipsis}
.pl-row .pl-c-fix .select,.pl-row .pl-c-fix .input{font:500 11px var(--mono);letter-spacing:.02em}
@media (max-width:1320px){.pl-row>.pl-c-wide{flex:0 0 13ch;min-width:13ch}}

.pl-row>.pl-c-fix.tk-hide{flex:0 0 26ch;min-width:26ch}
.pl-row .pl-c-fix.tk-hide .input{font:500 11.5px var(--mono)}

/* ---- methodology tab: navigator + article ---- */
.method-split{align-items:start}
.method-nav{position:sticky;top:0}
.method-part{display:flex;align-items:center;gap:10px;padding:2px 0 0}
.method-part .rule{flex:1;height:1px;background:var(--ln)}
.method-item .label{color:var(--dm)}
.method-article{gap:12px}
.method-lead{margin:0;font-size:14.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty}
.method-article .agent-cite{margin-top:2px}

/* a table row that opens its record form behaves like a button but keeps the grid */
button.tk-grid{border:0;border-left:2px solid transparent;width:100%;text-align:left;
  color:inherit;font:inherit;cursor:pointer}
button.tk-grid:hover{background:var(--p2)}
button.tk-grid:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}

/* ---- classic wiki tree ---- */
.tree{display:flex;flex-direction:column;border:1px solid var(--ln);background:var(--p1)}
.tree-node{display:flex;flex-direction:column}
.tree-branch{display:flex;align-items:center;gap:8px;padding:8px 10px;background:transparent;border:0;
  border-bottom:1px solid var(--ln);cursor:pointer;text-align:left;color:var(--tx);font:inherit}
.tree-branch:hover{background:var(--p2)}
.tree-caret{flex:none;width:12px;font:600 9px var(--mono);color:var(--ac)}
.tree-label{flex:1;min-width:0;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-count{flex:none;font:500 10px var(--mono);color:var(--dm)}
.tree-kids{display:flex;flex-direction:column;padding-left:19px;
  border-left:1px solid var(--ln);margin-left:10px}
.tree-leaf{display:flex;align-items:baseline;gap:8px;padding:7px 10px 7px 12px;background:transparent;
  border:0;border-bottom:1px solid var(--ln);cursor:pointer;text-align:left;color:var(--tx2);font:inherit;
  position:relative}
.tree-leaf::before{content:'';position:absolute;left:0;top:50%;width:8px;height:1px;background:var(--ln)}
.tree-leaf:hover{background:var(--p2);color:var(--tx)}
.tree-leaf.is-active{background:color-mix(in oklab, var(--ac) 11%, transparent);color:var(--tx)}
.tree-leaf.is-active .tree-num{color:var(--ac)}
.tree-num{flex:none;font:500 10px var(--mono);color:var(--dm)}
.tree-title{flex:1;min-width:0;font-size:12.5px;line-height:1.4;text-wrap:pretty}

.row-stack .form-row>.textarea,.list .row-stack .textarea{min-height:52px;max-height:120px;
  padding:6px 0;line-height:1.5;font-size:13px;field-sizing:content}
.modal-field>.textarea{min-height:64px}

.row-stack>.zone-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:100%;padding:0}
.row-stack>.zone-head:has(>.field,>.field-sm,>.field-grow){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px;align-items:end}
.row-stack>.zone-head>.field,.row-stack>.zone-head>.field-sm,.row-stack>.zone-head>.field-grow{
  display:flex;flex-direction:column;gap:4px;min-width:0;flex:none;width:auto}
.row-stack>.zone-head .label-sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-stack>.zone-head:has(>.field,>.field-sm,>.field-grow) .input,
.row-stack>.zone-head:has(>.field,>.field-sm,>.field-grow) .select,
.row-stack>.zone-head:has(>.field,>.field-sm,>.field-grow) .btn{width:100%;max-width:none}
.row-stack>.zone-head .btn{justify-content:flex-start}

.toolbar .board-btns,.zone-head>.board-btns{display:flex;align-items:stretch;gap:1px;
  border:1px solid var(--ln2);height:32px;align-self:center}
.toolbar .board-btns>button,.zone-head>.board-btns>button{height:100%;padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;
  cursor:pointer;color:var(--tx2);font:600 11px var(--mono);letter-spacing:.06em}
.toolbar .board-btns>button:hover,.zone-head>.board-btns>button:hover{background:var(--p2);color:var(--ac)}
.toolbar .btn,.toolbar .board-btns{flex:none}
.toolbar .btn{height:32px;align-self:center}

.toolbar .btn,.zone-head>.btn{border-width:1px;font-weight:600;letter-spacing:.01em}
.toolbar .btn:not(.btn-accent):not(.btn-ai):not(.btn-danger),
.zone-head>.btn:not(.btn-accent):not(.btn-ai):not(.btn-danger){border-color:var(--ln2);color:var(--tx)}
.toolbar .btn:not(.btn-accent):not(.btn-ai):not(.btn-danger):hover,
.zone-head>.btn:not(.btn-accent):not(.btn-ai):not(.btn-danger):hover{border-color:var(--tx);background:var(--p2)}
/* toned buttons keep their own ink token wherever they sit */
.toolbar .btn.btn-accent,.zone-head>.btn.btn-accent{color:var(--onac);border-color:var(--ac)}
.toolbar .btn.btn-ai,.zone-head>.btn.btn-ai{color:var(--ai);border-color:var(--ai)}
.toolbar .btn.btn-danger,.zone-head>.btn.btn-danger{color:var(--rd);border-color:var(--rd)}
.btn-ai{border-color:var(--ai);color:var(--ai);
  background:color-mix(in oklab, var(--ai) 12%, transparent)}
.btn-ai:hover{background:color-mix(in oklab, var(--ai) 22%, transparent);border-color:var(--ai);color:var(--ai)}
.btn-accent{background:var(--ac);border-color:var(--ac);color:var(--onac);font-weight:700}
.btn-accent:hover{background:var(--achi);border-color:var(--achi);color:var(--onac)}
.btn:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.btn:disabled{opacity:.45;cursor:default}

.pl-row,button.tk-grid,.tk-grid{border-left:2px solid var(--ln2)}
.pl-row.row-dm,.tk-grid.row-dm{border-left-color:var(--dm)}
.pl-row.row-ac,.tk-grid.row-ac{border-left-color:var(--ac)}
.pl-row.row-rd,.tk-grid.row-rd{border-left-color:var(--rd)}
.pl-row.row-gn,.tk-grid.row-gn{border-left-color:var(--gn)}
.pl-row.row-ai,.tk-grid.row-ai{border-left-color:var(--ai)}
.pl-row.row-head,.tk-grid.row-head{border-left-color:var(--ln2)}

.toolbar>.meta,.tab-tools>.meta{flex:0 1 auto;min-width:0;max-width:34ch;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.zone-head>.field-grow>.select,.toolbar .field-grow>.select{max-width:28ch}
.zone-head>.field-grow:has(>.select){flex:0 1 28ch;min-width:16ch}

.chip{height:30px;padding:0 12px;font-size:11.5px;letter-spacing:.05em}
.chips{gap:7px}

/* ---- methodology: a wiki. Tree left, article right. Nothing else. ---- */
.wiki{display:grid;grid-template-columns:minmax(200px,264px) minmax(0,1fr);gap:0;
  border:1px solid var(--ln);background:var(--p1)}
.wiki-tree{display:flex;flex-direction:column;padding:10px 0;border-right:1px solid var(--ln);
  background:color-mix(in oklab, var(--p1) 60%, transparent)}
.wiki-part{padding:12px 16px 6px;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dm)}
.wiki-link{display:flex;gap:9px;align-items:baseline;padding:7px 16px;background:transparent;border:0;
  border-left:2px solid transparent;cursor:pointer;text-align:left;color:var(--tx2);font:inherit}
.wiki-link:hover{background:color-mix(in oklab, var(--fg) 4%, transparent);color:var(--tx)}
.wiki-link.is-on{border-left-color:var(--ac);background:color-mix(in oklab, var(--ac) 9%, transparent);color:var(--tx)}
.wiki-num{flex:none;font:500 10px var(--mono);color:var(--dm)}
.wiki-link.is-on .wiki-num{color:var(--ac)}
.wiki-name{font-size:12.5px;line-height:1.4;text-wrap:pretty}
.wiki-article{padding:26px 30px 34px;max-width:74ch}
.wiki-title{margin:0 0 14px;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.wiki-lead{margin:0 0 18px;font-size:15px;line-height:1.75;color:var(--tx);text-wrap:pretty}
.wiki-h2{margin:22px 0 10px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.wiki-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.wiki-list li{font-size:13.5px;line-height:1.6;color:var(--tx2);text-wrap:pretty}
.wiki-p{margin:0;font-size:13.5px;line-height:1.7;color:var(--tx2);text-wrap:pretty}
.wiki-src{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--ln);
  font:400 11px var(--mono);color:var(--dm)}
@media (max-width:760px){.wiki{grid-template-columns:minmax(0,1fr)}
  .wiki-tree{border-right:0;border-bottom:1px solid var(--ln)}
  .wiki-article{padding:20px 18px 26px}}
.wiki-state{margin-left:8px;font:500 9.5px var(--mono);letter-spacing:.08em;color:var(--dm)}
.wiki-list strong{color:var(--tx);font-weight:600}

/* дерево довідки: тека модуля і розділи опису в ній */
/* док помічника: вибір контексту вручну */
.assist-pick{display:flex;flex-direction:column;gap:4px;padding:8px 12px 0}
.assist-mode{display:flex;flex-direction:column;gap:4px;padding:8px 12px 0}
.assist-mode select.input{width:100%;font-size:12px;font-weight:600;border-color:var(--ai)}
.assist-starts-head{padding:0 12px}
.assist-pick select.input{width:100%;font-size:12px}

/* довідка: дерево на 50% ширше за вікі-типове — у ньому три рівні, а не один */
.wiki-wide{grid-template-columns:minmax(300px,396px) minmax(0,1fr)}
@media (max-width:760px){.wiki-wide{grid-template-columns:minmax(0,1fr)}}
.wiki-mod{display:flex;gap:8px;align-items:baseline;width:100%;padding:9px 14px 9px 12px;background:transparent;border:0;
  border-left:2px solid transparent;cursor:pointer;text-align:left;color:var(--tx);font:inherit;font-weight:600}
.wiki-mod:hover{background:color-mix(in oklab, var(--fg) 4%, transparent)}
.wiki-mod.is-open{border-left-color:color-mix(in oklab, var(--ac) 50%, transparent)}
.wiki-mod .wiki-name{font-size:12.5px;flex:1 1 auto}
.wiki-mod .wiki-num{margin-left:auto}
.wiki-sub{padding:8px 16px 3px 30px;font:600 8.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dm)}
.wiki-link.is-sub{padding-left:30px}
.wiki-link.is-sub .wiki-name{font-size:12px}

.wiki-link.is-cur{background:color-mix(in oklab, var(--ac) 12%, transparent);
  border-left-color:var(--ac);color:var(--tx)}
.wiki-crumb{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.wiki-search{padding:10px 12px;border-bottom:1px solid var(--ln)}
.wiki-search .input{width:100%}

.tag{align-self:start;width:max-content;max-width:100%;flex:0 0 auto}
.row-stack>.row-title,.row-stack>.card-foot,.row-stack>.list,.row-stack>.chips,.row-stack>.form-row{width:100%}
.wiki-sub{padding:8px 14px 3px;font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);opacity:.85}
.wiki-trigger{display:flex;flex-direction:column;gap:3px;padding:9px 12px;margin:0 0 4px;
  background:color-mix(in oklab, var(--ac) 7%, transparent);border-left:2px solid var(--ac);font-size:12.5px;line-height:1.55}

/* ---- portal: compact density — one line per module ---- */
.portal-compact .grid-apps{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:8px}
.portal-compact .app-card{display:block;padding:0;border-top-width:2px}
.portal-compact .app-card>.row-title,.portal-compact .app-card>.app-metrics{display:none}
.portal-compact .app-card-head{padding:10px 12px;gap:11px;align-items:center}
.portal-compact .app-mark{width:28px;height:28px}
.portal-compact .app-mark svg{width:16px;height:16px}
.portal-compact .app-card .tile-name{font-size:13.5px;line-height:1.2}
.portal-compact .app-card .tag{display:none}
.portal-compact .app-card .row-main>.label-sm{display:block;font-size:9px;letter-spacing:.1em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.portal-compact .grid-tiles{gap:8px}
.portal-compact .tile{padding:10px 12px}

/* ---- portal: square tiles — the mark fills the field, the name sits at the foot ---- */
.portal-tiles .grid-apps,.portal-tiles .grid-tiles{
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.portal-tiles .app-card,.portal-tiles .tile{
  position:relative;display:block;aspect-ratio:1;padding:0;overflow:hidden;
  border:1px solid var(--ln2);border-top:3px solid var(--card, var(--ac));
  background:var(--p1);box-shadow:0 4px 14px -14px var(--sh);
  transition:border-color .12s ease,background .12s ease}
.portal-tiles .app-card:hover,.portal-tiles .tile:hover{
  border-color:var(--card, var(--ac));background:var(--p2)}
.portal-tiles .app-card:active,.portal-tiles .tile:active{background:var(--p1)}
.portal-tiles .app-card>.row-title,.portal-tiles .app-card>.app-metrics,
.portal-tiles .app-card .tag,.portal-tiles .app-card .row-chev,
.portal-tiles .tile>.row-chev{display:none}
.portal-tiles .app-card-head,.portal-tiles .tile{gap:0}
.portal-tiles .app-card-head{display:block;height:100%;padding:0}
.portal-tiles .app-mark,.portal-tiles .tile-mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-68%);
  width:54px;height:54px;display:grid;place-items:center;border:0;
  background:var(--card, var(--ac));color:var(--onac)}
.portal-tiles .app-mark svg,.portal-tiles .tile-mark svg{width:30px;height:30px;stroke-width:1.7}
.portal-tiles .app-card .row-main,.portal-tiles .tile-text{
  position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-height:52px;padding:8px 10px;min-width:0;text-align:center;
  background:var(--p2);border-top:1px solid var(--ln)}
.portal-tiles .app-card .tile-name,.portal-tiles .tile-name{
  font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.005em;text-align:center;
  white-space:normal;overflow-wrap:break-word;text-wrap:balance;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.portal-tiles .app-card .row-main>.label-sm,.portal-tiles .tile-text>.meta{display:none}
.portal-tiles .app-card::after,.portal-tiles .tile::after{
  content:attr(data-code);position:absolute;top:9px;left:11px;
  font:600 9px var(--mono);letter-spacing:.14em;color:var(--dm)}
@media (max-width:520px){.portal-tiles .grid-apps,.portal-tiles .grid-tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}}

/* the register table: the risk statement gets the room, the rest are fixed */
.risk-grid{display:grid;gap:10px;align-items:center;padding:10px 14px;background:var(--p1);border:0;
  border-left:2px solid transparent;width:100%;text-align:left;color:inherit;font:inherit}
button.risk-grid{cursor:pointer}
button.risk-grid:hover{background:var(--p2)}
.risk-grid.row-head{background:var(--p2);align-items:end;padding:8px 14px}
.risk-grid>*{min-width:0}


.jrn-grid{display:grid;gap:10px;
  align-items:center;padding:10px 14px;background:var(--p1);border:0;border-left:2px solid transparent;
  width:100%;text-align:left;color:inherit;font:inherit}
button.jrn-grid{cursor:pointer}
button.jrn-grid:hover{background:var(--p2)}
.jrn-grid.row-head{background:var(--p2);align-items:end;padding:8px 14px}
.jrn-grid>*{min-width:0}


.toolbar{flex-wrap:wrap;row-gap:10px}
.toolbar>.input{flex:0 1 320px;min-width:220px}
.toolbar>.chips{flex:0 1 auto;flex-wrap:wrap}
/* the segmented control stays one line and scrolls instead of becoming a grid */
.toolbar .seg,.zone-head .seg{flex:0 0 auto;flex-wrap:nowrap;max-width:100%;overflow-x:auto}
.toolbar .seg>button{flex:0 0 auto;white-space:nowrap}
.toolbar>.grow{flex:1 1 0;min-width:0}
/* header cells never bleed into the next column */
.jrn-grid>*{overflow:hidden;text-overflow:ellipsis}
.jrn-grid .sortable{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.not-grid{display:grid;gap:10px;align-items:center;
  padding:10px 14px;background:var(--p1);border:0;border-left:2px solid transparent;width:100%;
  text-align:left;color:inherit;font:inherit}
button.not-grid{cursor:pointer}
button.not-grid:hover{background:var(--p2)}
.not-grid.row-head{background:var(--p2);align-items:end;padding:8px 14px}
.not-grid>*{min-width:0;overflow:hidden;text-overflow:ellipsis}

.viewbar{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
.viewbar>.label-sm{flex:none;white-space:nowrap}
.btn-mask{flex:none;white-space:nowrap}
@media (max-width:900px){.btn-mask{padding:0 10px;font-size:0}
.btn-mask::before{content:"◼";font-size:12px}}

/* classic filters: one labelled dropdown per criterion, wrapping as needed */
.filter-row{gap:10px 12px}
.field-filter{flex:1 1 150px;max-width:220px;min-width:128px;display:flex;flex-direction:column;gap:4px}

.field-filter>.select{width:100%;height:30px;padding:0 8px;background:var(--p2);border:1px solid var(--ln);
  color:var(--tx);font:500 11.5px var(--mono)}
.field-filter>.select:focus{outline:none;border-color:var(--ac)}
.field-filter>.select.is-set{border-color:var(--ac);color:var(--ac)}

/* list rows: trailing cells get real tracks, so id, owner, date and the status
   chip line up between rows instead of collapsing to their content width */
.list>.row>.row-col{flex:0 0 84px;min-width:84px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list>.row>.row-col:first-child{flex:0 0 68px;min-width:68px}
.list>.row>.row-when{flex:0 0 64px;min-width:64px}
.list>.row>.tag{flex:0 0 116px;min-width:116px;justify-content:flex-start;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:17px}
/* a leading type chip is sized by its own label, not by the status track */
.list>.row>.tag:first-of-type:has(+ .row-main),.list>.row>.tag:first-child{flex:0 0 auto;min-width:0}
.list>.row>.row-chev{flex:0 0 12px;min-width:12px;text-align:right}

/* classes the JS emits that had no rule: each gets the behaviour its name promises */
.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pane-split{display:flex;flex-wrap:wrap;gap:14px;align-items:start;width:100%}
.pane-split>*{flex:1 1 300px;min-width:0}
.stage-note{display:flex;flex-direction:column;gap:4px;padding:11px 13px;
  background:color-mix(in oklab, var(--ai) 7%, transparent);border-left:2px solid var(--ai)}
.pane-index{flex:0 1 300px;min-width:230px}
.row-dim{opacity:.6}

/* shared table rows: the engine owns the template; a narrow viewport scrolls */
.tk-grid,.jrn-grid,.not-grid,.risk-grid{overflow-x:auto}
.list:has(>.tk-grid),.list:has(>.jrn-grid),.list:has(>.not-grid),
.list:has(>.risk-grid),.list:has(>.wi-grid){overflow-x:auto}

.wi-grid>.row-main{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;max-height:2.7em}
.wi-grid.row-head>*{align-self:end}

/* list rows keep one height: the title clamps instead of pushing the row open */
.list>.row>.row-main.pretty{display:block;white-space:normal;overflow-wrap:break-word;
  overflow:visible;text-overflow:clip;line-height:1.45}

/* a table cell truncates its text; cells that stack a title and a source keep
   their flex column, so the truncation goes on the children */
.risk-grid>.row-main:not(:has(*)),.jrn-grid>.row-main:not(:has(*)),
.not-grid>.row-main:not(:has(*)),.tk-grid>.row-main:not(:has(*)){
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-grid>.row-main>.row-title,.tk-grid>.row-main>.meta,
.wi-grid>.row-main>.row-title,.wi-grid>.row-main>.meta{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* the record action strip: short controls, one row, the delete tinted */
.board-btns>button.is-danger{color:var(--rd)}
.board-btns>button.is-danger:hover{border-color:var(--rd);background:color-mix(in oklab, var(--rd) 12%, transparent)}

/* record toolbar: every chip has a ceiling, so the bar cannot wrap */
.zone-head.toolbar>.select{max-width:16ch;padding:0 6px;flex:0 1 auto}
.zone-head.toolbar>.btn-link{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* modal form fields: editable by appearance, not just by behaviour */
.modal-field>.input,.modal-field>.select,.modal-field>.textarea{
  background:var(--bg);border:1px solid var(--ln2);color:var(--tx);
  box-shadow:0 1px 0 color-mix(in oklab, var(--fg) 4%, transparent) inset}
.modal-field>.input::placeholder,.modal-field>.textarea::placeholder{color:var(--dm);opacity:1}
.modal-field>.input:hover,.modal-field>.select:hover,.modal-field>.textarea:hover{border-color:var(--dm)}
.modal-field>.input:focus,.modal-field>.select:focus,.modal-field>.textarea:focus{
  border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in oklab, var(--ac) 22%, transparent)}

/* the leading chip names a type or tool: its own track, never the status one */
.list>.row>.tag:first-of-type:has(+ .row-main){flex:0 0 132px;min-width:132px}
.list>.row>.tag:first-child:has(+ .row-col){flex:0 0 auto;min-width:0}

.subtabs{border-color:color-mix(in oklab, var(--ai) 34%, var(--ln2))}
.subtabs>button:hover{background:color-mix(in oklab, var(--ai) 7%, transparent)}
.subtabs>button>.label{color:var(--ai)}

/* closes a group of fields before the next section label */
.section-div{flex:none;width:100%;height:1px;margin:2px 0 0;background:var(--ln)}

/* stage 1: a compact index of the components on the left, the components on the right */
.prep-grid{display:grid;grid-template-columns:186px minmax(0,1fr);gap:0 18px;align-items:start;width:100%}
.prep-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:1px;
  border:1px solid var(--ln);background:var(--p1)}
.prep-nav-head{padding:9px 11px;border-bottom:1px solid var(--ln);background:var(--p2);
  font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dm)}
.prep-nav-item{display:flex;align-items:center;gap:8px;padding:8px 11px;background:transparent;
  border:0;border-left:2px solid transparent;cursor:pointer;text-align:left;color:var(--tx2);font:inherit}
.prep-nav-item:hover{background:var(--p2);color:var(--tx)}
.prep-nav-item[aria-current="true"]{border-left-color:var(--ai);color:var(--tx);
  background:color-mix(in oklab, var(--ai) 10%, transparent)}
.prep-nav-name{flex:1;min-width:0;font-size:12px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep-nav-state{flex:none;font:600 10px var(--mono);color:var(--ac)}
.prep-body{display:flex;flex-direction:column;gap:12px;min-width:0}
.prep-block{display:flex;flex-direction:column;gap:10px;scroll-margin-top:8px}
@media (max-width:860px){.prep-grid{grid-template-columns:minmax(0,1fr)}
  .prep-nav{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:10px}
  .prep-nav-head{width:100%}.prep-nav-item{border-left:0;border-bottom:2px solid transparent}
  .prep-nav-item[aria-current="true"]{border-bottom-color:var(--ai)}}
.map-fact{display:flex;flex-direction:column;gap:3px;padding-left:2px}
/* a record block inside the session rail spans the whole panel */
.rail-body>.pane.full,.rail-body>.prep-grid,.rail-body>.graph-wrap{grid-column:1/-1;width:100%;max-width:none;
  flex:0 0 auto;height:max-content;min-height:max-content;align-self:start}
/* a column stack sizes its children by content, whatever span marker they carry */
.graph-wrap>*,.prep-body>*{flex:0 0 auto}
.graph-wrap>.pane.full,.graph-wrap>.zone-head.full{width:100%;max-width:none;height:auto}

/* ---- influence graph: layered nodes with drawn edges ---- */
.graph-wrap{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.graph-scroll{width:100%;overflow-x:auto;background:var(--p1);border:1px solid var(--ln)}
.graph-canvas{position:relative;margin:0 auto}
.graph-edges{position:absolute;inset:0;pointer-events:none}
.graph-edges path{pointer-events:stroke}
.graph-col-head{position:absolute;top:0;padding-bottom:5px;border-bottom:1px solid var(--ln);
  font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graph-node{position:absolute;display:flex;flex-direction:column;gap:2px;padding:7px 9px;
  background:var(--p2);border:1px solid var(--ln);border-left:2px solid var(--ln2);
  cursor:pointer;text-align:left;color:var(--tx);font:inherit;overflow:hidden}
.graph-node[data-tone="ai"]{border-left-color:var(--ai)}
.graph-node[data-tone="ac"]{border-left-color:var(--ac)}
.graph-node[data-tone="rd"]{border-left-color:var(--rd)}
.graph-node[data-tone="gn"]{border-left-color:var(--gn)}
.graph-node[data-tone="dm"]{border-left-color:var(--dm)}
.graph-node:hover{background:color-mix(in oklab, var(--fg) 6%, var(--p2));z-index:3}
.graph-node[aria-current="true"]{border-color:var(--ac);z-index:3;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--ac) 24%, transparent)}
.graph-node.is-dim{opacity:.22}
.graph-node.is-dead{border-style:dashed}
.graph-node-id{font:600 10px var(--mono);letter-spacing:.04em;color:var(--tx)}
.graph-node-text{font-size:10.5px;line-height:1.3;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.graph-node-deg{position:absolute;top:5px;right:6px;font:600 9px var(--mono);color:var(--dm)}
.graph-legend{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.graph-legend-item{display:flex;align-items:center;gap:5px;font:500 9.5px var(--mono);
  letter-spacing:.03em;color:var(--dm);white-space:nowrap}
.graph-legend-dash{width:14px;height:2px;display:block}


/* ---- session hub: compact summary, then one tile per section ---- */
.rail-body.hub{display:flex;flex-direction:column;gap:14px}
.hub-sum{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start;
  padding:14px 16px;background:var(--p1);border:1px solid var(--ln);border-left:2px solid var(--ac)}
.hub-sum-main{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.hub-sum-main h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.hub-kpis{flex:1 1 380px;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px 14px}
.hub-kpi{display:flex;flex-direction:column;gap:2px;min-width:0}
.hub-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px}
.hub-tile{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px;
  background:var(--p1);border:1px solid var(--ln);border-top:3px solid var(--ln2);
  cursor:pointer;text-align:left;color:var(--tx);font:inherit;
  box-shadow:0 4px 14px -14px var(--sh);transition:border-color .12s ease,background .12s ease}
.hub-tile[data-tone="ac"]{border-top-color:var(--ac)}
.hub-tile[data-tone="ai"]{border-top-color:var(--ai)}
.hub-tile[data-tone="rd"]{border-top-color:var(--rd)}
.hub-tile[data-tone="gn"]{border-top-color:var(--gn)}
.hub-tile[data-tone="dm"]{border-top-color:var(--dm)}
.hub-tile:hover{background:var(--p2)}
.hub-tile[data-tone="ac"]:hover{border-color:var(--ac)}
.hub-tile[data-tone="ai"]:hover{border-color:var(--ai)}
.hub-tile[data-tone="rd"]:hover{border-color:var(--rd)}
.hub-tile[data-tone="gn"]:hover{border-color:var(--gn)}
.hub-tile[data-tone="dm"]:hover{border-color:var(--dm)}
.hub-tile.is-alert{border-color:var(--ac)}
.hub-tile-mark{flex:none;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid currentColor}
.hub-tile[data-tone="ac"] .hub-tile-mark{color:var(--ac)}
.hub-tile[data-tone="ai"] .hub-tile-mark{color:var(--ai)}
.hub-tile[data-tone="rd"] .hub-tile-mark{color:var(--rd)}
.hub-tile[data-tone="gn"] .hub-tile-mark{color:var(--gn)}
.hub-tile[data-tone="dm"] .hub-tile-mark{color:var(--dm)}
.hub-tile-mark svg{width:20px;height:20px}
.hub-tile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hub-tile-name{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.hub-tile-note{font-size:11.5px;line-height:1.4;color:var(--tx2);text-wrap:pretty}
.hub-tile-n{position:absolute;top:10px;right:12px;font:600 11px var(--mono);color:var(--dm)}
/* a section screen: the way back, the title, and a compact jump between sections */
.section-bar{position:sticky;top:0;z-index:4;background:var(--bg);border-bottom:1px solid var(--ln)}
.section-bar .seg button{padding:0 9px;font-size:11px}

/* the section bar is a control row, not a flex filler */
#rail>.section-bar{flex:0 0 auto;width:100%}

/* the crux of each stage: one card per AAR question */
.hub-digest{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:10px}
.hub-thesis{display:flex;flex-direction:column;gap:8px;padding:13px 14px;background:var(--p1);
  border:1px solid var(--ln);border-left:2px solid var(--ln2);cursor:pointer;text-align:left;
  color:var(--tx);font:inherit}
.hub-thesis[data-tone="gn"]{border-left-color:var(--gn)}
.hub-thesis[data-tone="ac"]{border-left-color:var(--ac)}
.hub-thesis[data-tone="rd"]{border-left-color:var(--rd)}
.hub-thesis:hover{background:var(--p2)}
.hub-thesis-head{display:flex;align-items:baseline;gap:9px;width:100%}
.hub-thesis-head .label{color:var(--dm)}
.hub-thesis-title{font-size:12.5px;font-weight:600;line-height:1.3;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-thesis-pct{flex:none;font:600 11px var(--mono)}
.hub-thesis[data-tone="gn"] .hub-thesis-pct{color:var(--gn)}
.hub-thesis[data-tone="ac"] .hub-thesis-pct{color:var(--ac)}
.hub-thesis[data-tone="rd"] .hub-thesis-pct{color:var(--rd)}
.hub-thesis-lead{font-size:12.5px;line-height:1.5;color:var(--tx)}
.hub-thesis-facts{display:flex;flex-direction:column;gap:4px}
.hub-thesis-fact{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.4;color:var(--tx2)}
.hub-thesis-dot{flex:none;width:4px;height:4px;margin-top:5px;background:currentColor;opacity:.5}

/* ---- colour flag markers ---- */
.flag{position:relative;flex:0 0 auto;display:flex;align-items:center}
.flag-btn{width:22px;height:22px;display:grid;place-items:center;padding:0;background:transparent;
  border:1px solid var(--ln2);cursor:pointer}
.flag-btn:hover{border-color:var(--ac)}
.flag-dot{width:11px;height:11px;display:block;background:var(--dm)}
.flag-dot.is-empty{background:transparent;border:1px dashed var(--ln2)}
.flag-pop{position:absolute;top:calc(100% + 4px);right:0;z-index:20;display:none;gap:4px;
  padding:6px;background:var(--p1);border:1px solid var(--ln2);box-shadow:0 10px 28px -18px var(--sh)}
.flag-pop.is-open{display:flex}
.flag-sw{width:18px;height:18px;padding:0;border:1px solid color-mix(in oklab, var(--fg) 22%, transparent);cursor:pointer}
.flag-sw[aria-current="true"]{outline:2px solid var(--tx);outline-offset:1px}
.flag-clear{width:18px;height:18px;padding:0;background:transparent;border:1px solid var(--ln2);
  cursor:pointer;color:var(--dm);font:600 11px var(--mono);line-height:1}
/* a flagged row carries its colour on the leading edge */
.row[data-flag],.card[data-flag]{border-left:3px solid var(--flag)}
.graph-node[data-flag]{border-left-color:var(--flag)}

/* a stacked record row lays its children along the left edge */
.row.row-stack{align-items:stretch}

/* ---- fishbone diagram ---- */
.fb-wrap{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}
.fb-scroll{width:100%;overflow-x:auto;background:var(--p1);border:1px solid var(--ln)}
.fb-svg{display:block;margin:0 auto}
.fb-svg text{font-family:var(--sans);fill:var(--tx2)}
.fb-head{font:600 12px var(--sans);fill:var(--tx)}
.fb-bone{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.fb-txt{font-size:11px;fill:var(--tx2)}
.fb-txt.is-root{fill:var(--tx);font-weight:600}
.fb-cause{cursor:pointer}
.fb-cause:hover .fb-txt{fill:var(--tx)}
.fb-cause:hover circle{stroke:var(--tx);stroke-width:1.5}
.fb-cause:focus-visible{outline:2px solid var(--ac)}

/* ---- sign-in gate ---- */
.gate-body{min-height:100vh;display:block}
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,560px) minmax(0,380px);
  gap:0;align-content:center;justify-content:center;padding:32px 24px;
  background:radial-gradient(900px 480px at 18% -10%, color-mix(in oklab, var(--ac) 8%, transparent), transparent 62%),
    radial-gradient(760px 420px at 96% 104%, color-mix(in oklab, var(--ai) 7%, transparent), transparent 60%), var(--pagebg)}
.gate-card{display:flex;flex-direction:column;gap:12px;padding:26px 26px 22px;
  background:var(--p1);border:1px solid var(--ln2);box-shadow:0 24px 60px -34px var(--sh)}
.gate-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--ln)}
.gate-mark{flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:var(--ac);color:var(--onac)}
.gate-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.gate-app{font:600 14px var(--sans);letter-spacing:-.01em;color:var(--tx)}
.gate-h1{margin:6px 0 0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.gate-lead{margin:0;font-size:12.5px;line-height:1.6;color:var(--tx2)}
.gate-field{display:flex;flex-direction:column;gap:4px}
.gate-input{width:100%;height:42px;padding:0 14px;background:var(--bg);border:1px solid var(--ln2);
  color:var(--tx);font:500 14px var(--mono);letter-spacing:.06em;
  box-shadow:0 1px 0 color-mix(in oklab, var(--fg) 4%, transparent) inset}
.gate-input::placeholder{color:var(--dm);letter-spacing:.06em}
.gate-input:hover{border-color:var(--dm)}
.gate-input:focus{outline:none;border-color:var(--ac);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--ac) 22%, transparent)}
.gate-hint{font:400 10.5px var(--mono);letter-spacing:.02em;color:var(--dm)}
.gate-remember{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx2);cursor:pointer}
.gate-remember input{accent-color:var(--ac);width:14px;height:14px}
.gate-err{display:none;padding:9px 11px;background:color-mix(in oklab, var(--rd) 12%, transparent);
  border-left:2px solid var(--rd);font-size:12px;line-height:1.5;color:var(--rdfg, var(--tx))}
.gate-err .gate-offer{margin-top:6px;font-size:12px;line-height:1.5;color:var(--tx2)}
.gate-err .btn{margin-top:8px}
.gate-err.is-on{display:block}
.gate-submit{height:42px;font-size:13.5px}
.gate-submit:disabled{opacity:.45;cursor:not-allowed}
.gate-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--ln)}
.gate-foot .meta{flex:1;min-width:0}
.gate-side{display:flex;flex-direction:column;gap:10px;padding:26px 24px;
  background:color-mix(in oklab, var(--p1) 55%, transparent);border:1px solid var(--ln2);border-left:0}
.gate-why{font-size:12.5px;line-height:1.65;color:var(--tx2)}
.gate-facts{display:flex;flex-direction:column;gap:1px;background:var(--ln);border:1px solid var(--ln)}
.gate-fact{display:flex;flex-wrap:wrap;gap:2px 10px;padding:9px 11px;background:var(--p1)}
.gate-fact-k{flex:0 0 118px;font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dm)}
.gate-fact-v{flex:1;min-width:0;font-size:12px;line-height:1.4;color:var(--tx)}
.gate-node{font-size:12.5px;line-height:1.65;color:var(--tx2)}
.gate-lang{display:flex;border:1px solid var(--ln2);align-self:flex-start}
.gate-lang>button{width:42px;height:30px;border:0;cursor:pointer;background:transparent;
  font:600 11px var(--mono);color:var(--tx2)}
.gate-lang>button[aria-selected="true"]{background:var(--ac);color:var(--onac)}
@media (max-width:980px){.gate{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
  .gate-side{border-left:1px solid var(--ln2);border-top:0}}

/* ---- system overview ---- */
.ov-hero{display:flex;flex-direction:column;gap:14px;max-width:760px;padding:22px 0 18px}
.ov-h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.24;
  max-width:34ch;text-wrap:balance}
.ov-lead{margin:0;font-size:14px;line-height:1.65;color:var(--tx2)}
.ov-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:100%}
.ov-step{display:flex;flex-direction:column;gap:6px;padding:14px;min-width:0;
  background:var(--p1);border:1px solid var(--ln);border-top:3px solid var(--ln2);
  color:var(--tx);text-decoration:none;position:relative}
.ov-step[data-tone="ac"]{border-top-color:var(--ac)}
.ov-step[data-tone="ai"]{border-top-color:var(--ai)}
.ov-step[data-tone="rd"]{border-top-color:var(--rd)}
.ov-step[data-tone="gn"]{border-top-color:var(--gn)}
.ov-step:hover{background:var(--p2)}
.ov-step-head{display:flex;align-items:center;gap:9px}
.ov-step-mark{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--ln2);color:var(--tx2)}
.ov-step[data-tone="ac"] .ov-step-mark{border-color:var(--ac);color:var(--ac)}
.ov-step[data-tone="ai"] .ov-step-mark{border-color:var(--ai);color:var(--ai)}
.ov-step[data-tone="rd"] .ov-step-mark{border-color:var(--rd);color:var(--rd)}
.ov-step[data-tone="gn"] .ov-step-mark{border-color:var(--gn);color:var(--gn)}
.ov-step-n{font:600 11px var(--mono);color:var(--dm)}
.ov-step-q{font:600 12.5px var(--sans);line-height:1.3;color:var(--tx)}
.ov-step-name{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.ov-step-note{font-size:11.5px;line-height:1.5;color:var(--dm)}
.ov-step-foot{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid var(--ln)}
.ov-step-foot .label-sm{flex:1}
.ov-step-count{font:600 14px var(--mono);color:var(--tx)}
.ov-apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px;border-top:1px solid var(--ln)}
.ov-app{display:flex;align-items:center;gap:6px;padding:5px 9px;background:var(--p2);
  border:1px solid var(--ln);color:var(--tx2);text-decoration:none;font-size:11.5px;white-space:nowrap}
.ov-app:hover{border-color:currentColor;color:var(--tx)}
.ov-app[data-tone="ac"]{color:var(--acfg)}
.ov-app[data-tone="ai"]{color:var(--ai)}
.ov-app[data-tone="rd"]{color:var(--rdfg, var(--rd))}
.ov-app[data-tone="gn"]{color:var(--gnfg, var(--gn))}
@media (max-width:1100px){.ov-chain{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ov-chain{grid-template-columns:minmax(0,1fr)}}

/* ---- SWOT 2×2 ---- */
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln)}
.sw-cell{display:flex;flex-direction:column;gap:6px;padding:13px 14px;background:var(--p1);min-width:0;
  border-top:2px solid var(--ln2)}
.sw-cell[data-tone="gn"]{border-top-color:var(--gn)}
.sw-cell[data-tone="rd"]{border-top-color:var(--rd)}
.sw-cell[data-tone="ai"]{border-top-color:var(--ai)}
.sw-cell[data-tone="ac"]{border-top-color:var(--ac)}
.sw-cell-head{display:flex;align-items:baseline;gap:9px;padding-bottom:7px;border-bottom:1px solid var(--ln)}
.sw-cell-k{font:600 15px var(--mono);letter-spacing:.04em;color:var(--tx)}
.sw-cell-name{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2)}
.sw-item{display:flex;align-items:flex-start;gap:9px;min-width:0}
.sw-item-t{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--tx)}
.sw-w{flex:none;display:flex;gap:2px;padding-top:5px}
.sw-dot{width:5px;height:5px;display:block;background:color-mix(in oklab, var(--fg) 16%, transparent)}
.sw-dot.is-on{background:currentColor}
.sw-cell[data-tone="gn"] .sw-dot.is-on{background:var(--gn)}
.sw-cell[data-tone="rd"] .sw-dot.is-on{background:var(--rd)}
.sw-cell[data-tone="ai"] .sw-dot.is-on{background:var(--ai)}
.sw-cell[data-tone="ac"] .sw-dot.is-on{background:var(--ac)}
.sw-ev{flex:none;padding:2px 6px;background:transparent;border:1px solid var(--ln2);cursor:pointer;
  font:500 9.5px var(--mono);letter-spacing:.06em;color:var(--dm)}
.sw-ev:hover{border-color:var(--ac);color:var(--ac)}
.sw-noev{flex:none;font:500 9.5px var(--mono);color:color-mix(in oklab, var(--dm) 60%, transparent)}
.sw-empty{padding:9px 0;font:600 11px var(--mono);color:var(--dm)}
@media (max-width:760px){.sw-grid{grid-template-columns:minmax(0,1fr)}}
.ov-row-mark{flex:none;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--ln2);color:var(--tx2)}
.ov-row-mark[data-tone="ac"]{border-color:color-mix(in oklab, var(--ac) 50%, transparent);color:var(--acfg)}
.ov-row-mark[data-tone="ai"]{border-color:color-mix(in oklab, var(--ai) 50%, transparent);color:var(--ai)}
.ov-row-mark[data-tone="rd"]{border-color:color-mix(in oklab, var(--rd) 50%, transparent);color:var(--rd)}
.ov-row-mark[data-tone="gn"]{border-color:color-mix(in oklab, var(--gn) 50%, transparent);color:var(--gn)}
.ov-row-mark[data-tone="dm"]{border-color:var(--ln2);color:var(--dm)}
.ov-idea{display:flex;flex-direction:column;gap:8px;max-width:740px;padding:18px 20px;
  background:var(--p1);border:1px solid var(--ln);border-left:3px solid var(--ac)}
.ov-idea-t{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--tx)}

/* ---- the terms strip: one line, no claim on content height ---- */
.disc{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:var(--disc-h);padding:0 14px;
  background:var(--p2);border-top:1px solid var(--ln);overflow:hidden;position:relative;z-index:41}
.disc-line{flex:1;min-width:0;font:400 10.5px var(--mono);letter-spacing:.04em;color:var(--dm)}
.disc-sw{flex:none;display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;background:transparent;
  border:1px solid var(--ln2);cursor:pointer;font:500 10px var(--mono);letter-spacing:.03em;color:var(--tx2);white-space:nowrap}
.disc-sw:hover{border-color:var(--ac);color:var(--ac)}
.disc-sw[aria-pressed="true"]{border-color:color-mix(in oklab, var(--ac) 50%, transparent);color:var(--acfg)}
.disc-dot{width:6px;height:6px;display:block;background:var(--dm)}
.disc-sw[aria-pressed="true"] .disc-dot{background:var(--ac)}
.disc-more{flex:none;height:22px;padding:0 9px;background:transparent;border:1px solid var(--ln2);
  cursor:pointer;font:500 10px var(--mono);letter-spacing:.03em;color:var(--tx2);white-space:nowrap}
.disc-more:hover{border-color:var(--ac);color:var(--ac)}
.disc-modal{width:min(620px,100%);gap:10px}
.disc-item{display:flex;flex-direction:column;gap:4px;padding:11px 12px;background:var(--p2);
  border:1px solid var(--ln);border-left:2px solid var(--ln2)}
.disc-item[data-tone="ac"]{border-left-color:var(--ac)}
.disc-item[data-tone="ai"]{border-left-color:var(--ai)}
.disc-item[data-tone="gn"]{border-left-color:var(--gn)}
.disc-item[data-tone="rd"]{border-left-color:var(--rd)}
.disc-text{font-size:11.5px;line-height:1.5;color:var(--tx2);text-wrap:pretty}
.btn-work{white-space:nowrap}
@media (max-width:760px){.disc-line{display:none}}

.use-head{display:flex;align-items:center;gap:10px}
.use-mark{flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:color-mix(in oklab, var(--tone, var(--ac)) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--tone, var(--ac)) 45%, transparent);color:var(--tone, var(--ac))}
.use-mark[data-tone="ac"]{--tone:var(--ac)}
.use-mark[data-tone="ai"]{--tone:var(--ai)}
.use-mark[data-tone="gn"]{--tone:var(--gn)}
.use-mark[data-tone="rd"]{--tone:var(--rd)}
.use-ret{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--ln)}
.use-ret[data-tone="ac"] .label-sm{color:var(--acfg)}
.use-ret[data-tone="ai"] .label-sm{color:var(--ai)}
.use-ret[data-tone="gn"] .label-sm{color:var(--gn)}
.use-ret[data-tone="rd"] .label-sm{color:var(--rd)}

/* AI assistant toggle: the agent's tone, visible in either state */
#assistToggle{background:var(--ai);border-color:var(--ai);color:var(--onai);font-weight:600}
#assistToggle:hover{background:color-mix(in oklab, var(--ai) 86%, var(--fg));border-color:var(--ai)}
#assistToggle[aria-pressed="true"]{background:color-mix(in oklab, var(--ai) 86%, var(--fg));
  border-color:var(--ai);color:var(--onai)}
.stat.win{gap:3px;border-top:2px solid var(--gn)}
.win-n{font:600 24px var(--mono);letter-spacing:-.02em;line-height:1.05;color:var(--gn)}
.win-note{font-size:11.5px;line-height:1.5;color:var(--tx2);text-wrap:pretty}
.ov-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px}
.ov-name{display:flex;flex-direction:column;gap:6px;padding:15px 16px;background:var(--p1);
  border:1px solid var(--ln);border-top:3px solid var(--ln2)}
.ov-name[data-tone="ai"]{border-top-color:var(--ai)}
.ov-name[data-tone="ac"]{border-top-color:var(--ac)}
.ov-name[data-tone="gn"]{border-top-color:var(--gn)}
.ov-name-t{font:600 15px var(--sans);letter-spacing:-.01em;line-height:1.25;color:var(--tx)}
.ov-name-w{font-size:12.5px;line-height:1.6;color:var(--tx2);text-wrap:pretty}

/* an overview card carries a soft wash of its module tone, not a flat panel */
.ov-tint{background:
  linear-gradient(158deg, color-mix(in oklab, var(--tone, var(--ac)) 10%, transparent),
    color-mix(in oklab, var(--tone, var(--ac)) 3%, transparent) 58%, transparent),
  var(--p1);
  border-color:color-mix(in oklab, var(--tone, var(--ac)) 20%, var(--ln))}
.ov-tint:hover{background:
  linear-gradient(158deg, color-mix(in oklab, var(--tone, var(--ac)) 15%, transparent),
    color-mix(in oklab, var(--tone, var(--ac)) 5%, transparent) 58%, transparent),
  var(--p1)}
/* the terms as page content: a wrapping row of the five points */
.disc-block{display:flex;flex-direction:column;gap:9px;margin-top:6px;padding-top:14px;
  border-top:1px solid var(--ln)}
.disc-block-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:8px}
.disc-site{flex:none;font:600 10.5px var(--mono);letter-spacing:.04em;color:var(--acfg);text-decoration:none;white-space:nowrap}
.disc-site:hover{color:var(--ac);text-decoration:underline}
.ov-eyebrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ov-site{font:600 10px var(--mono);letter-spacing:.1em;text-transform:lowercase;color:var(--acfg);text-decoration:none}
.ov-site:hover{color:var(--ac);text-decoration:underline}
/* account: who is signed in, and the way out */
.acct{flex:none;display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;
  background:transparent;border:1px solid var(--ln2);color:var(--tx2);text-decoration:none}
.acct:hover{border-color:var(--ac);color:var(--ac)}
.acct-id{font:600 10.5px var(--mono);letter-spacing:.06em;white-space:nowrap}

/* ---- the formula banner: three ingredients, one sum ---- */
.tc-banner{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;padding:19px 22px;margin-bottom:4px;
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--ac) 9%, transparent),
      color-mix(in oklab, var(--gn) 7%, transparent) 46%,
      color-mix(in oklab, var(--ai) 9%, transparent)),
    var(--p1);
  border:1px solid var(--ln2)}
.tc-part{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:3px;
  padding-left:13px;border-left:4px solid var(--ln2)}
.tc-part[data-tone="ac"]{border-left-color:var(--ac)}
.tc-part[data-tone="gn"]{border-left-color:var(--gn)}
.tc-part[data-tone="ai"]{border-left-color:var(--ai)}
.tc-part-l{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dm)}
.tc-part-n{font:600 20px var(--sans);letter-spacing:-.015em;line-height:1.2;color:var(--tx)}
.tc-plus{flex:none;align-self:center;font:400 23px var(--mono);color:var(--dm)}
.tc-eq{display:none}
.tc-sum{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding-top:14px;margin-top:3px;border-top:1px solid var(--ln2)}
.tc-sum-n{font:700 20px var(--sans);letter-spacing:-.015em;line-height:1.2;color:var(--tx)}
.tc-sum-w{font-size:14px;line-height:1.45;color:var(--tx2)}
@media (max-width:820px){.tc-plus,.tc-eq{display:none}
  .tc-banner{flex-direction:column}}
/* the wider card puts two codes side by side; the access code stays short */
.gate-fields{display:flex;flex-direction:column;gap:12px}

/* consultant advice cards inside the assistant dock */
.assist-advice{margin:8px 0 0;padding:8px 10px;border:1px solid var(--ln);border-left:3px solid var(--dm);border-radius:6px;display:flex;flex-direction:column;gap:4px}
.assist-advice[data-tone=rd]{border-left-color:var(--rd)}
.assist-advice[data-tone=ac]{border-left-color:var(--ac)}
.assist-advice .tag.clickable{cursor:pointer}