:root{
  color-scheme: light;
  --paper:#EEF0EC; --surface:#F8F9F6; --surface-2:#E3E7E0;
  --ink:#171B18; --ink-2:#3B433F; --muted:#697169;
  --line:#C6CDC4; --line-soft:#DBDFD8;
  --accent:#1B5A49; --accent-soft:#D9E6E0;

  /* Sequential ramp for magnitude — validated blue, light to dark */
  --seq-1:#cde2fb; --seq-2:#9ec5f4; --seq-3:#6da7ec; --seq-4:#3987e5;
  --seq-5:#256abf; --seq-6:#184f95; --seq-7:#0d366b;

  /* Status — fixed, never themed. Always shipped with a label. */
  --st-good:#0ca30c; --st-warning:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;

  --zone-stroke:#F8F9F6;
  --hatch:#3B433F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0E1110; --surface:#151917; --surface-2:#1D221F;
    --ink:#E6EAE5; --ink-2:#BFC6BF; --muted:#8A938B;
    --line:#2C332E; --line-soft:#212724;
    --accent:#5FBB9E; --accent-soft:#152F28;
    --seq-1:#0d366b; --seq-2:#184f95; --seq-3:#256abf; --seq-4:#3987e5;
    --seq-5:#6da7ec; --seq-6:#9ec5f4; --seq-7:#cde2fb;
    --zone-stroke:#151917;
    --hatch:#BFC6BF;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0E1110; --surface:#151917; --surface-2:#1D221F;
  --ink:#E6EAE5; --ink-2:#BFC6BF; --muted:#8A938B;
  --line:#2C332E; --line-soft:#212724;
  --accent:#5FBB9E; --accent-soft:#152F28;
  --seq-1:#0d366b; --seq-2:#184f95; --seq-3:#256abf; --seq-4:#3987e5;
  --seq-5:#6da7ec; --seq-6:#9ec5f4; --seq-7:#cde2fb;
  --zone-stroke:#151917;
  --hatch:#BFC6BF;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  background:var(--paper); color:var(--ink); margin:0;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bodoni Moda","Didot",serif; font-weight:600; margin:0; line-height:1.15; text-wrap:balance}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}

/* ---------- chrome ---------- */
.top{
  position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--line); padding:.55rem 1.25rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}
.mark{font-family:"Bodoni Moda",serif; font-size:1.05rem; font-weight:700}
.mark span{color:var(--accent)}
.tabs{display:flex; gap:.25rem; flex-wrap:wrap; align-items:center}
.tabs .lab{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:0 .15rem 0 .6rem}
.tab{
  font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; padding:.3rem .6rem; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); cursor:pointer;
}
.tab:hover{color:var(--ink); border-color:var(--muted)}
.tab[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.tab.stale{border-style:dashed}
.tab.stale::after{content:" ·old"; opacity:.65}
.stamp{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted); letter-spacing:.05em}

.wrap{max-width:1500px; margin:0 auto; padding:1.25rem}
.grid{display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr)}
@media (min-width:1080px){ .grid{grid-template-columns:minmax(0,1fr) 340px} }

/* ---------- stat row ---------- */
.stats{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1.25rem}
@media (min-width:640px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--surface); padding:.75rem .9rem; display:grid; gap:.15rem}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:"Bodoni Moda",serif; font-size:1.5rem; line-height:1.1; font-variant-numeric:tabular-nums}
.stat .d{font-size:.76rem; color:var(--muted); line-height:1.35}

/* ---------- map ---------- */
.panel{border:1px solid var(--line); background:var(--surface)}
.panel-h{
  padding:.6rem .9rem; border-bottom:1px solid var(--line); display:flex;
  align-items:center; gap:.75rem; flex-wrap:wrap;
}
.panel-h h2{font-size:1rem}
.controls{margin-left:auto; display:flex; gap:.3rem; flex-wrap:wrap}
.ctl{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.05em;
  padding:.25rem .5rem; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); cursor:pointer; text-transform:uppercase;
}
.ctl:hover{color:var(--ink)}
.ctl[aria-pressed="true"]{background:var(--surface-2); color:var(--ink); border-color:var(--muted)}

#map{display:block; width:100%; height:clamp(360px, 52vh, 620px); background:var(--surface); touch-action:manipulation}
/* MapLibre paints its own chrome; keep it in the page's voice. */
.maplibregl-ctrl-group{border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.16)}
.maplibregl-ctrl-attrib{font:11px/1.5 var(--sans, system-ui); background:color-mix(in srgb, var(--surface) 84%, transparent)}
.maplibregl-ctrl-attrib a{color:var(--muted)}
.maplibregl-ctrl-scale{border-color:var(--zone-stroke); color:var(--muted); background:transparent}

.legend{padding:.7rem .9rem; border-top:1px solid var(--line); background:var(--surface); display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-start}
.ramp{display:grid; gap:.3rem}
.ramp .bar{display:flex; height:11px; width:200px; border:1px solid var(--line)}
.ramp .bar i{flex:1}
.ramp .ends{display:flex; justify-content:space-between; width:200px; font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--muted)}
.legend .lab{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.15rem}
.keyrow{display:grid; gap:.28rem}
.keyrow div{display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--ink-2)}
.sw{width:13px; height:13px; border:1px solid var(--line); flex:none}

/* ---------- tooltip ---------- */
#tip{
  position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--surface); border:1px solid var(--ink); padding:.5rem .65rem;
  font-size:.78rem; max-width:280px; box-shadow:0 3px 14px rgba(0,0,0,.16);
}
#tip.on{opacity:1}
#tip .t{font-weight:600; margin-bottom:.2rem; font-size:.82rem}
#tip .r{display:flex; justify-content:space-between; gap:1rem; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-2)}
#tip .r b{color:var(--ink); font-weight:500}

/* ---------- side ---------- */
.side{display:grid; gap:1.25rem; align-content:start}
.side .panel{padding:0}
.sect{padding:.85rem .9rem; border-bottom:1px solid var(--line-soft)}
.sect:last-child{border-bottom:0}
.sect h3{font-size:.95rem; margin-bottom:.5rem}
.kv{display:flex; justify-content:space-between; gap:1rem; font-size:.8rem; padding:.16rem 0; font-family:"IBM Plex Mono",monospace}
.kv span{color:var(--muted)} .kv b{font-weight:500}
.empty{padding:1.5rem .9rem; color:var(--muted); font-size:.84rem; text-align:center}

/* strategy comparison — single series, winner emphasised */
.strat{display:grid; gap:.5rem; margin-top:.2rem}
.srow{display:grid; gap:.2rem}
.slab{display:flex; justify-content:space-between; font-size:.76rem; gap:.5rem}
.slab .n{color:var(--ink-2)}
.slab .amt{font-family:"IBM Plex Mono",monospace; font-weight:500}
.sbar{height:9px; background:var(--surface-2); position:relative; overflow:hidden}
.sbar i{position:absolute; inset:0 auto 0 0; background:var(--seq-3); border-radius:0 3px 3px 0}
.srow.win .sbar i{background:var(--seq-6)}
.srow.win .slab .n{color:var(--ink); font-weight:600}
.srow.neg .sbar i{background:var(--st-critical)}
.srow.na{opacity:.5}

.chip{
  display:inline-flex; align-items:center; gap:.25rem; font-family:"IBM Plex Mono",monospace;
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .38rem;
  border:1px solid currentColor;
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.q-OPPORTUNITY{color:var(--st-good)} .q-HOT{color:var(--seq-5)}
.q-OVERPRICED{color:var(--st-serious)} .q-DEAD{color:var(--st-critical)}
.q-UNKNOWN{color:var(--muted)}

.note{
  padding:.6rem .75rem; border-left:2px solid var(--st-warning);
  background:var(--surface-2); font-size:.78rem; color:var(--ink-2); margin-top:.5rem;
}
.note.crit{border-color:var(--st-critical)}
.srow.illegal .slab .n{text-decoration:line-through; color:var(--muted)}
.srow.illegal .sbar i{background:var(--surface-2)}
.banned{
  display:flex; gap:.5rem; align-items:flex-start; padding:.55rem .7rem;
  border:1px solid var(--st-critical); color:var(--st-critical);
  font-size:.78rem; margin:.4rem 0; background:var(--surface);
}
.banned b{display:block}
.banned .ico{font-family:"IBM Plex Mono",monospace; font-weight:600; flex:none}
.banned .txt{color:var(--ink-2)} .banned .txt b{color:var(--ink)}
.note b{color:var(--ink)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; margin-top:1.25rem; border:1px solid var(--line); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:840px; font-size:.8rem}
th,td{text-align:left; padding:.45rem .7rem; border-bottom:1px solid var(--line-soft); white-space:nowrap}
thead th{
  font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--surface-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; cursor:pointer; user-select:none;
}
thead th:hover{color:var(--ink)}
thead th[aria-sort]{color:var(--ink)}
td.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tbody tr.sel{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
td.loc{white-space:normal; min-width:200px; color:var(--ink-2)}

.ov{display:grid; gap:1.25rem}
.ov h3{font-size:1.05rem; margin-bottom:.15rem}
.ov .sub{font-size:.82rem; color:var(--muted); max-width:74ch; margin-bottom:.6rem}
.ov .tier{border:1px solid var(--line); background:var(--surface)}
.ov .tier > .hd{padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--surface-2)}
.minibar{display:flex; align-items:center; gap:.45rem}
.minibar .track{width:74px; height:7px; background:var(--surface-2); position:relative; flex:none}
.minibar .track i{position:absolute; inset:0 auto 0 0; background:var(--seq-5); border-radius:0 2px 2px 0}
.filters{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; padding:.6rem .9rem; border-bottom:1px solid var(--line-soft)}
.filters .lab{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-right:.2rem}
.ov .warn{border-left:2px solid var(--st-warning); background:var(--surface-2); padding:.6rem .8rem; font-size:.8rem; color:var(--ink-2)}
.ov .warn b{color:var(--ink)}

/* explainer + verdict */
.explain{border:1px solid var(--line); background:var(--surface); margin-bottom:1.25rem}
.explain summary{
  padding:.7rem .9rem; cursor:pointer; font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  list-style:none; display:flex; align-items:center; gap:.5rem;
}
.explain summary::-webkit-details-marker{display:none}
.explain summary::before{content:"?"; border:1px solid currentColor; width:15px; height:15px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; flex:none}
.explain[open] summary{border-bottom:1px solid var(--line-soft)}
.explain .body{padding:.9rem; display:grid; gap:.9rem; font-size:.88rem; color:var(--ink-2)}
.explain .body p{max-width:78ch}
.explain .body b{color:var(--ink)}
.explain dl{display:grid; gap:.45rem; margin:0}
@media (min-width:700px){ .explain dl{grid-template-columns:auto 1fr; column-gap:1.1rem} }
.explain dt{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--accent); white-space:nowrap}
.explain dd{margin:0; font-size:.85rem}

.assume{
  display:flex; flex-wrap:wrap; gap:0 1.25rem; padding:.5rem .9rem;
  border:1px solid var(--line); border-top:0; background:var(--surface-2);
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--muted);
}
.assume b{color:var(--ink-2); font-weight:500}

.verdict{padding:.85rem .9rem; border-bottom:1px solid var(--line-soft); display:grid; gap:.45rem}
.verdict .grade{
  display:inline-flex; align-items:center; gap:.35rem; align-self:start;
  font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.07em;
  text-transform:uppercase; padding:.15rem .45rem; border:1px solid currentColor;
}
.g-beats-bonds{color:var(--st-good)} .g-close{color:var(--st-warning)}
.g-below-bonds{color:var(--st-serious)} .g-loss-making{color:var(--st-critical)}
.verdict .say{font-size:.92rem; color:var(--ink); line-height:1.5}
.verdict .caveat{font-size:.84rem; color:var(--ink-2); border-left:2px solid var(--st-warning); padding-left:.6rem}

.hurdle{position:relative}
.hurdle::after{
  content:""; position:absolute; top:-2px; bottom:-2px; width:2px;
  background:var(--st-critical); left:var(--at,50%);
}

footer{padding:1.5rem 1.25rem 2.5rem; max-width:1500px; margin:0 auto; color:var(--muted); font-size:.75rem; line-height:1.6}
footer b{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }