/* HedgeMap app theme — shared shell and tokens for every page under /app.
   Loaded after each page's own <style>, so tokens here win. */
:root{
  --ink:#0a0f14;
  --ink-2:#0c1319;
  --surface:#0f171e;
  --surface-2:#121c24;
  --surface-3:#16222c;
  --line:#1e2a34;
  --line-soft:#18232c;
  --grid:#16212a;
  --text:#e8edf1;
  --text-2:#a3afba;
  --text-3:#6f7c88;

  --long:#3dd6c6;          /* positive gamma, call concentration */
  --long-deep:#1f8a80;
  --long-dim:rgba(61,214,198,.12);
  --short:#f2766b;         /* negative gamma, put concentration */
  --short-deep:#9a3f3a;
  --short-dim:rgba(242,118,107,.12);
  --flip:#f0b54a;          /* gamma flip */
  --flip-dim:rgba(240,181,74,.12);
  --spot:#f3ecd6;          /* spot / price */
  --spot-dim:rgba(243,236,214,.10);
  --hvl:#8fa2b3;
  --accent:#4b9be0;        /* selection */
  --accent-dim:rgba(75,155,224,.14);
  --good:#3dd6c6;
  --bad:#f2766b;
  --warn:#f0b54a;

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --logo:var(--sans);
  --radius:10px;
  --shadow:none;
  color-scheme:dark;
}

/* ---------- shell ---------- */
html,body{background:var(--ink)}
body.app{
  margin:0; padding:0; min-height:100dvh;
  font-family:var(--sans); color:var(--text);
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"bar bar" "nav main";
  gap:0;
  background:var(--ink);
}
body.app::before{display:none}

.appbar{
  grid-area:bar; position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 22px; min-height:66px;
  background:rgba(10,15,20,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.appbar .hm-brand{margin-right:22px}
.appbar .spacer{flex:1}
.appbar .divider{width:1px; align-self:stretch; background:var(--line); margin:6px 4px}

.hm-brand{display:flex; align-items:center; gap:11px; color:var(--text); text-decoration:none; line-height:1}
.hm-brand svg,.hm-brand img{width:34px; height:34px; flex:none; color:#b9c7d2; object-fit:contain}
.hm-brand .wm{background:linear-gradient(180deg,#b06dfc,#6d30fb); -webkit-background-clip:text; background-clip:text; color:transparent}
.wm{background:linear-gradient(180deg,#b06dfc,#6d30fb);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-brand b{display:block; font-family:var(--sans); font-weight:700; font-size:1.3rem; letter-spacing:-.02em}
.hm-brand small{display:block; margin-top:5px; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}

.sidenav{
  grid-area:nav; position:sticky; top:66px; align-self:start;
  height:calc(100dvh - 66px);
  display:flex; flex-direction:column; gap:4px;
  padding:18px 0 18px; border-right:1px solid var(--line);
  background:var(--ink-2);
}
.sidenav a,.sidenav button{
  display:flex; align-items:center; gap:14px;
  padding:13px 22px; color:var(--text-2); text-decoration:none;
  font:500 .95rem var(--sans); background:none; border:0; cursor:pointer; text-align:left;
  border-left:3px solid transparent;
}
.sidenav a:hover,.sidenav button:hover{color:var(--text); background:rgba(255,255,255,.02)}
.sidenav a[aria-current="page"]{color:var(--text); background:var(--surface-3); border-left-color:var(--accent)}
.sidenav svg{width:22px; height:22px; flex:none}
.sidenav .grow{flex:1}
.sidenav .tagline{padding:10px 22px 0; font-size:.62rem; letter-spacing:.18em; line-height:1.9; text-transform:uppercase; color:var(--text-3)}

.main{grid-area:main; min-width:0; padding:22px 26px 40px}
.main-foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:.72rem; line-height:1.6; color:var(--text-3);
}

@media(max-width:900px){
  body.app{grid-template-columns:minmax(0,1fr); grid-template-areas:"bar" "nav" "main"}
  .appbar{padding:10px 14px; gap:10px}
  .appbar .hm-brand small,.appbar .divider{display:none}
  .sidenav{position:static; height:auto; flex-direction:row; overflow-x:auto; padding:0; border-right:0; border-bottom:1px solid var(--line)}
  .sidenav a,.sidenav button{padding:11px 14px; border-left:0; border-bottom:2px solid transparent; white-space:nowrap; font-size:.86rem}
  .sidenav a[aria-current="page"]{border-bottom-color:var(--accent)}
  .sidenav svg{width:18px; height:18px}
  .sidenav .grow,.sidenav .tagline{display:none}
  .main{padding:16px 14px 32px}
}

/* ---------- shared pieces ---------- */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface)}
.seg > *{
  font:500 .9rem var(--sans); letter-spacing:.02em; color:var(--text-2);
  padding:9px 20px; background:transparent; border:0; border-right:1px solid var(--line);
  cursor:pointer; text-decoration:none; text-transform:none; border-radius:0; margin:0;
}
.seg > *:last-child{border-right:0}
.seg > *:hover{color:var(--text)}
.seg > .on,.seg > [aria-selected="true"]{
  color:var(--text); background:var(--accent-dim);
  box-shadow:inset 0 0 0 1px var(--accent); border-radius:8px;
}
.seg > *:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

.datechip{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:9px; background:var(--surface);
  padding:9px 14px; font:500 .92rem var(--sans); color:var(--text);
}
.datechip svg{width:17px; height:17px; color:var(--text-2)}

.livechip{
  display:inline-flex; align-items:center; gap:8px;
  font:500 .72rem var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
}
.livechip .dot{width:8px; height:8px; border-radius:50%; background:var(--text-3); flex:none}
.livechip.live .dot{background:var(--long); box-shadow:0 0 0 4px rgba(61,214,198,.15)}
.livechip.warn .dot{background:var(--flip); box-shadow:0 0 0 4px rgba(240,181,74,.14)}
.livechip.down .dot{background:var(--short); box-shadow:0 0 0 4px rgba(242,118,107,.14)}

.eyebrow{font:500 .74rem var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--long); margin:0 0 6px}
.page-title{font:700 clamp(1.7rem,3.2vw,2.55rem) var(--sans); letter-spacing:-.02em; line-height:1.08; margin:0}
.page-sub{margin:8px 0 0; font-size:1.02rem; color:var(--text-2)}
.page-sub b{color:var(--text); font-weight:600}

.box{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.box-h{
  font:500 .74rem var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text-2);
  padding:14px 16px 0; margin:0;
}
.box-h.teal{color:var(--long)}

.kv{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-top:1px solid var(--line-soft); font-size:.95rem}
.kv:first-child{border-top:0}
.kv .k{color:var(--text-2)}
.kv .v{font-variant-numeric:tabular-nums; font-weight:500}

.pos{color:var(--long)} .neg{color:var(--short)} .amb{color:var(--flip)} .dim{color:var(--text-3)}

/* key-entry dialog and access bar come from access.js with inline styles; keep them in family */
#access-bar{font-family:var(--sans)}
/* events.js is generated and styles itself inline; pull its chips into this palette */
#events{font-family:var(--sans)!important; font-size:.74rem!important}
#events > span:not([title]){color:var(--text-3)!important}
#events > span[title]{background:var(--surface)!important}
#events > span[title]:not([style*="242,201,76"]){border-color:var(--line)!important; color:var(--text-2)!important}