/* shell.css · the TETRAVAULT design tokens + header shared by every page (copied from app.css; keep in sync) */
:root{
  color-scheme:light;
  /* paper + ink (OKLCH-derived, hex for reach) */
  --bg:#F1F5F3; --surface:#FCFDFC; --sunk:#E6EBE9; --bar-bg:rgba(241,245,243,.86);
  --ink:#0E1824; --ink2:#424C56; --ink3:#677078;
  --line:#D0D7D8; --line2:#B4BCBE; --grid:rgba(14,24,36,.055); --hatch:rgba(14,24,36,.12);
  --blank:#E5EBE8; --blank-line:rgba(14,24,36,.085); --blank-hi:rgba(255,255,255,.85);
  /* the one metal */
  --metal:#A78241; --metal-ink:#815B26; --metal-soft:#F1E7D2; --metal-line:rgba(167,130,65,.45);
  /* function */
  --ok:#276C4F; --ok-soft:#DCEFE4; --ok-line:rgba(39,108,79,.35);
  --warn:#B14328; --warn-soft:#FBE6E0; --warn-line:rgba(177,67,40,.35);
  /* names the JS / older markup still reference */
  --floor:var(--ok); --floor-soft:var(--ok-soft); --brass:var(--metal-ink); --brass-soft:var(--metal-soft);
  /* reserve legs (the logo's facets, muted) — read by ui.js as var(--spy|gld|uso|eth|cash) */
  --spy:#346AAC; --gld:#C79534; --uso:#6E519D; --eth:#CD6A39; --cash:#81878D;
  /* the four instruments */
  --i-buy:#0B4A3A; --i-buy2:#03342A; --i-buy-fg:#F1F5F3; --i-buy-fg2:rgba(241,245,243,.72); --i-buy-ln:#6FAE96;
  --i-earn:#E2C072; --i-earn2:#C18E3D; --i-earn-hi:#F4DDA6; --i-earn-fg:#2B1C08; --i-earn-fg2:rgba(43,28,8,.72);
  --i-bond:#152D51; --i-bond2:#0D1E3B; --i-bond-fg:#EEF2F7; --i-bond-fg2:rgba(238,242,247,.72); --i-bond-ln:#7C9CC6;
  --i-exit:#8B2727; --i-exit-on:#FFFFFF; --i-exit-field:var(--surface); --i-exit-hover:#FBF3F1;
  /* seal */
  --seal-1:#A78241; --seal-2:#5F6E7C; --seal-a:.85; --seal-b:.42;
  /* depth */
  --sh-1:0 1px 0 rgba(14,24,36,.04),0 1px 2px rgba(14,24,36,.06);
  --sh-2:0 22px 44px -22px rgba(14,24,36,.42),0 3px 8px -2px rgba(14,24,36,.10);
  --sh-sheet:0 40px 90px -30px rgba(5,10,16,.5);

  /* type */
  --f-sans:"Mona Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --f-serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --f-mono:"Fragment Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --t-micro:10px; --t-xs:11.5px; --t-s:13px; --t-b:15px; --t-m:17px;
  --t-l:clamp(20px,2.2vw,26px);
  --t-xl:clamp(28px,3.4vw,44px);
  --t-xxl:clamp(26px,4.6vw,60px);
  --t-fig:clamp(32px,10.4vw,78px);

  /* grid + space */
  --maxw:1240px; --pad:clamp(16px,4vw,48px); --gut:12px;
  --r-xs:2px; --r-s:4px; --r-m:8px; --r-l:12px;

  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1); --e-std:cubic-bezier(.2,.7,.2,1);
  --d-fast:160ms; --d-mid:360ms; --d-slow:900ms;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#070D13; --surface:#0E151C; --sunk:#04080C; --bar-bg:rgba(7,13,19,.82);
  --ink:#E9EEEC; --ink2:#AEB5BB; --ink3:#7C848B;
  --line:#1E262E; --line2:#343C46; --grid:rgba(233,238,236,.04); --hatch:rgba(233,238,236,.10);
  --blank:#0D151C; --blank-line:rgba(233,238,236,.075); --blank-hi:rgba(233,238,236,.07);
  --metal:#DBB975; --metal-ink:#E0C07F; --metal-soft:#2D220F; --metal-line:rgba(219,185,117,.4);
  --ok:#62C49D; --ok-soft:#0E2A1F; --ok-line:rgba(98,196,157,.35);
  --warn:#E98664; --warn-soft:#371C15; --warn-line:rgba(233,134,100,.38);
  --spy:#5D94DA; --gld:#DEAF56; --uso:#987ACA; --eth:#E48559; --cash:#757B81;
  --i-buy:#0D5141; --i-buy2:#023A2F; --i-buy-fg:#EEF4F1; --i-buy-fg2:rgba(238,244,241,.72); --i-buy-ln:#6FB59A;
  --i-earn:#D6B26A; --i-earn2:#B2823C; --i-earn-hi:#EBD29A; --i-earn-fg:#261704; --i-earn-fg2:rgba(38,23,4,.74);
  --i-bond:#213F6C; --i-bond2:#152B4E; --i-bond-fg:#EEF2F7; --i-bond-fg2:rgba(238,242,247,.72); --i-bond-ln:#89A8D2;
  --i-exit:#E2726B; --i-exit-on:#1B0B0A; --i-exit-field:var(--surface); --i-exit-hover:#1A1517;
  --seal-1:#DBB975; --seal-2:#8FA3B8; --seal-a:.62; --seal-b:.34;
  --sh-1:0 1px 0 rgba(0,0,0,.4); --sh-2:0 26px 50px -24px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.4);
  --sh-sheet:0 40px 100px -20px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070D13; --surface:#0E151C; --sunk:#04080C; --bar-bg:rgba(7,13,19,.82);
  --ink:#E9EEEC; --ink2:#AEB5BB; --ink3:#7C848B;
  --line:#1E262E; --line2:#343C46; --grid:rgba(233,238,236,.04); --hatch:rgba(233,238,236,.10);
  --blank:#0D151C; --blank-line:rgba(233,238,236,.075); --blank-hi:rgba(233,238,236,.07);
  --metal:#DBB975; --metal-ink:#E0C07F; --metal-soft:#2D220F; --metal-line:rgba(219,185,117,.4);
  --ok:#62C49D; --ok-soft:#0E2A1F; --ok-line:rgba(98,196,157,.35);
  --warn:#E98664; --warn-soft:#371C15; --warn-line:rgba(233,134,100,.38);
  --spy:#5D94DA; --gld:#DEAF56; --uso:#987ACA; --eth:#E48559; --cash:#757B81;
  --i-buy:#0D5141; --i-buy2:#023A2F; --i-buy-fg:#EEF4F1; --i-buy-fg2:rgba(238,244,241,.72); --i-buy-ln:#6FB59A;
  --i-earn:#D6B26A; --i-earn2:#B2823C; --i-earn-hi:#EBD29A; --i-earn-fg:#261704; --i-earn-fg2:rgba(38,23,4,.74);
  --i-bond:#213F6C; --i-bond2:#152B4E; --i-bond-fg:#EEF2F7; --i-bond-fg2:rgba(238,242,247,.72); --i-bond-ln:#89A8D2;
  --i-exit:#E2726B; --i-exit-on:#1B0B0A; --i-exit-field:var(--surface); --i-exit-hover:#1A1517;
  --seal-1:#DBB975; --seal-2:#8FA3B8; --seal-a:.62; --seal-b:.34;
  --sh-1:0 1px 0 rgba(0,0,0,.4); --sh-2:0 26px 50px -24px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.4);
  --sh-sheet:0 40px 100px -20px rgba(0,0,0,.8);
}
@media (min-width:900px){:root{--gut:24px}}

/* ───── shared shell: header, nav, theme toggle, section heads, footer (tetravault.xyz sub-pages) ───── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-b)/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
::selection{background:var(--metal-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--metal);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.spacer{flex:1}
header.bar{position:sticky;top:0;z-index:30;background:var(--bar-bg);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
header.bar>.wrap{display:flex;align-items:center;gap:10px;height:56px}
header.bar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;color:var(--ink)}
header.bar .brand svg{width:22px;height:22px;flex:none}
header.bar .brand span{font:700 11px/1 var(--f-sans);font-stretch:125%;letter-spacing:.2em;white-space:nowrap}
header.bar .brand small{font:400 11px/1 var(--f-mono);letter-spacing:.06em;color:var(--metal-ink)}
header.bar .nav{display:none;gap:22px;margin-left:28px;height:100%}
header.bar .nav a,header.bar .mnav a{position:relative;display:flex;align-items:center;flex:none;font-size:13.5px;font-weight:500;color:var(--ink2);text-decoration:none;transition:color var(--d-fast)}
header.bar .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);scale:0 1;transform-origin:left;transition:scale var(--d-mid) var(--e-out)}
header.bar .nav a:hover,header.bar .nav a[aria-current="page"],header.bar .mnav a[aria-current="page"]{color:var(--ink)}
header.bar .nav a[aria-current="page"]::after,header.bar .nav a:hover::after{scale:1 1}
header.bar .iconbtn{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid transparent;border-radius:var(--r-s);background:transparent;color:var(--ink2);cursor:pointer;text-decoration:none}
header.bar .iconbtn:hover{color:var(--ink);border-color:var(--line)}
header.bar .iconbtn svg{width:17px;height:17px}
header.bar .mnav{border-top:1px solid var(--line)}
header.bar .mnav .wrap{display:flex;gap:20px;height:40px;align-items:stretch;overflow-x:auto;scrollbar-width:none}
header.bar .mnav .wrap::-webkit-scrollbar{display:none}
@media (min-width:900px){header.bar .nav{display:flex}header.bar>.wrap{height:64px}header.bar .brand span{font-size:12px}header.bar .mnav{display:none}}
/* section head, as on the main page: number, serif title, ink rule above */
.sechead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 14px;padding-top:14px;margin-bottom:26px;border-top:1px solid var(--ink)}
.sechead .sn{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.08em;color:var(--metal-ink);padding-top:2px}
.sechead h2{font:300 var(--t-xl)/1.04 var(--f-serif);letter-spacing:-.012em;margin:0}
.sechead p{grid-column:1/-1;margin:8px 0 0;max-width:58ch;font-size:14.5px;line-height:1.6;color:var(--ink2)}
.foot{border-top:1px solid var(--line);padding-block:34px 56px;color:var(--ink3);font-size:13px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.foot a{color:var(--ink2);text-decoration:none}.foot a:hover{color:var(--ink)}
header.bar .hbtn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;flex:none;border:1px solid var(--line2);border-radius:var(--r-s);background:transparent;color:var(--ink2);font:600 12.5px/1 var(--f-sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer}
header.bar .hbtn:hover{border-color:var(--ink2);color:var(--ink)}
header.bar .hbtn i{width:7px;height:7px;border-radius:50%;background:var(--ink3)}
header.bar .hbtn[aria-pressed="true"] i,header.bar .hbtn.on i{background:var(--ok)}
header.bar .hbtn.pri{background:var(--ink);border-color:var(--ink);color:var(--bg)}
header.bar .hbtn.pri:hover{background:var(--ink2);border-color:var(--ink2)}
@media (max-width:560px){header.bar .iconbtn.soc,header.bar .hide-s{display:none}}

/* ecosystem dropdown in the top bar (Prism · Biggest Buy · CHAD) */
header.bar .nav a{white-space:nowrap}
header.bar .nav .eco{position:relative;display:flex;align-items:center;height:100%}
header.bar .nav .eco>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;height:100%;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
header.bar .nav .eco>summary::-webkit-details-marker{display:none}
header.bar .nav .eco>summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--d-fast)}
header.bar .nav .eco[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
header.bar .nav .eco[open]>summary,header.bar .nav .eco>summary:hover,header.bar .nav .eco.cur>summary{color:var(--ink)}
header.bar .nav .eco-m{position:absolute;top:calc(100% - 4px);left:-12px;min-width:280px;display:grid;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-s);box-shadow:var(--sh-2);z-index:40}
header.bar .nav .eco-m a{display:grid;gap:3px;height:auto;padding:10px 12px;border-radius:var(--r-xs);text-decoration:none}
header.bar .nav .eco-m a::after{display:none}
header.bar .nav .eco-m a:hover,header.bar .nav .eco-m a[aria-current="page"]{background:var(--sunk)}
header.bar .nav .eco-m b{font-size:13.5px;font-weight:600;color:var(--ink)}
header.bar .nav .eco-m small{font-size:12px;font-weight:400;color:var(--ink3);white-space:normal}
header.bar .brand{flex:none}
@media (min-width:900px) and (max-width:1099px){header.bar .nav{display:none}header.bar .mnav{display:block}}