/* Layout concept: a dark measuring console set into the calm Token Economy page, category cards above it, evidence beside it. */
:root {
  --bg: #fff; --bg-alt: #f5f7fb; --panel: #fff; --border: #dce3ee;
  --text: #182033; --muted: #5b667a; --accent: #2f6df0; --accent-soft: #eaf1ff;
  --ok: #147847; --ok-soft: #e7f6ee; --warn: #956400; --warn-soft: #fff6dc; --danger: #ac3442; --danger-soft: #fbeaec;
  --hero: #2c50d0; --hero-ink: #fff; --hero-soft: #d8e1ff;
  --stage: #101726; --stage-2: #18213a; --stage-line: #2a3650; --stage-ink: #e7ecf6; --stage-muted: #9aa7bf; --stage-hi: #ffffff;
  --anthropic: #d95926; --openai: #199e70; --google: #3987e5; --other: #8e99ad;
  --gold: #e8b83e;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-sm: .4rem; --r-md: .75rem; --pill: 999rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b101b; --bg-alt: #131a29; --panel: #161d2c; --border: #29344d;
    --text: #e7ecf6; --muted: #99a5bc; --accent: #78a6ff; --accent-soft: #172542;
    --ok: #4ac388; --ok-soft: #173528; --warn: #e1b64d; --warn-soft: #342b17; --danger: #f07b87; --danger-soft: #3a1c22;
    --hero: #2c50d0; --hero-ink: #fff; --hero-soft: #d8e1ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b101b; --bg-alt: #131a29; --panel: #161d2c; --border: #29344d;
  --text: #e7ecf6; --muted: #99a5bc; --accent: #78a6ff; --accent-soft: #172542;
  --ok: #4ac388; --ok-soft: #173528; --warn: #e1b64d; --warn-soft: #342b17; --danger: #f07b87; --danger-soft: #3a1c22;
  --hero: #2c50d0; --hero-ink: #fff; --hero-soft: #d8e1ff; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
a { color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: .15rem solid var(--accent); outline-offset: .12rem; }
.wrap { max-width: 88rem; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.15; }
p { margin: 0; }

/* Hero */
.hero { background: var(--hero); color: var(--hero-ink); }
.hero .wrap { padding-block: 1rem 1.15rem; display: grid; gap: .4rem; }
.brand { font: 700 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hero-soft); }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.025em; font-weight: 750; }
.hero p { max-width: 96ch; color: var(--hero-soft); }

/* Tabs and HUD */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); }
.bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-block: .55rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.tab { border: 1px solid transparent; background: none; padding: .38rem .8rem; border-radius: var(--pill); font-weight: 650; color: var(--muted); }
.tab[aria-selected="true"] { background: var(--text); color: var(--bg); }
.tab:hover:not([aria-selected="true"]) { background: var(--bg-alt); color: var(--text); }
.hud { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; }
.hud span { display: inline-flex; gap: .35rem; align-items: baseline; padding: .22rem .6rem; border: 1px solid var(--border); border-radius: var(--pill); color: var(--muted); }
.hud b { color: var(--text); font-family: var(--mono); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }

main { padding-block: 1.1rem 3rem; display: grid; gap: 1.1rem; }
.view { display: grid; gap: 1rem; min-width: 0; }

/* Category cards */
.cats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 80rem) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .cat small span:last-child { display: none; } .cat { padding: .45rem .5rem; } .cat b { font-size: .8rem; } }
.cat { display: grid; gap: .3rem; text-align: left; padding: .55rem .65rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; transition: border-color .15s, transform .15s; }
.cat:hover { border-color: var(--accent); transform: translateY(-1px); }
.cat[aria-pressed="true"] { background: var(--stage); border-color: var(--stage); color: var(--stage-ink); }
.cat b { font-size: .88rem; line-height: 1.2; }
.cat svg { width: 100%; height: 30px; display: block; }
.cat small { font-size: .7rem; color: var(--muted); display: flex; justify-content: space-between; gap: .4rem; white-space: nowrap; }
.cat[aria-pressed="true"] small { color: var(--stage-muted); }
.spark { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cat[aria-pressed="true"] .spark { stroke: var(--stage-hi); }
.spark.dashed { stroke-dasharray: 3 3; }
.spark-dot { fill: var(--muted); opacity: .55; }
.cat[aria-pressed="true"] .spark-dot { fill: var(--stage-muted); }

/* Stage */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1rem; align-items: start; }
@media (max-width: 62rem) { .layout { grid-template-columns: minmax(0, 1fr); } }
.stage { background: var(--stage); color: var(--stage-ink); border-radius: var(--r-md); padding: .9rem; display: grid; gap: .7rem; min-width: 0; position: relative; }
.stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.seg button { background: var(--stage-2); border: 1px solid var(--stage-line); color: var(--stage-muted); padding: .28rem .65rem; border-radius: var(--pill); font-size: .8rem; }
.seg button[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); font-weight: 700; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--stage-ink); }
.stage :focus-visible { outline-color: var(--stage-hi); }
.legend { display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .76rem; color: var(--stage-muted); align-items: center; }
.legend button { background: none; border: 0; padding: .1rem .2rem; display: inline-flex; gap: .3rem; align-items: center; color: var(--stage-ink); font-size: .76rem; }
.legend button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.legend svg { width: 14px; height: 14px; overflow: visible; }
.plot { position: relative; min-width: 0; }
.plot svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.axis text { fill: var(--stage-muted); font: 11px var(--mono); }
.axis-title { fill: var(--stage-muted); font: 11.5px var(--sans); }
.grid line { stroke: var(--stage-line); stroke-width: 1; }
.pt { transition: transform .55s cubic-bezier(.3,.8,.3,1), opacity .3s; cursor: pointer; }
.pt.over { opacity: .42; }
.pt.dim { opacity: .3; }
.pt.hide { opacity: 0; pointer-events: none; }
.pt .mark { stroke: var(--stage); stroke-width: 1.5; transition: transform .15s; }
.pt.hollow .mark { fill: var(--stage) !important; stroke-width: 2.2; }
.pt:hover .mark, .pt:focus-visible .mark, .pt.sel .mark { transform: scale(1.4); }
.pt:focus { outline: none; }
.pt:focus-visible .hit { stroke: var(--stage-hi); stroke-width: 1.5; }
.hit { fill: transparent; }
.ring { fill: none; stroke: var(--gold); stroke-width: 2; }
.ladder { fill: none; stroke-width: 1.5; opacity: .55; animation: fade .5s .25s both; }
.frontier { fill: none; stroke: var(--stage-hi); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s .2s ease-out forwards; }
.frontier-tail { fill: none; stroke: var(--stage-hi); stroke-width: 1; opacity: .25; }
.pt-label { fill: var(--stage-ink); font: 11.5px var(--sans); paint-order: stroke; stroke: var(--stage); stroke-width: 3px; pointer-events: none; }
.ref-line { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ref-label { fill: var(--gold); font: 11px var(--sans); paint-order: stroke; stroke: var(--stage); stroke-width: 3px; }
.budget-shade { fill: var(--stage); opacity: .2; pointer-events: none; }
.budget-line { stroke: var(--gold); stroke-width: 1.6; }
.budget-tag { fill: var(--gold); font: 700 12px var(--mono); paint-order: stroke; stroke: var(--stage); stroke-width: 3px; }
.rug-title { fill: var(--stage-muted); font: 10.5px var(--sans); }
.rug { stroke: var(--stage-muted); stroke-width: 2; stroke-linecap: round; cursor: help; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt, .pt .mark, .cat { transition: none; } .frontier, .ladder, .pop { animation: none; stroke-dashoffset: 0; } }
.tip { position: absolute; z-index: 5; width: min(17rem, 80%); background: var(--stage-hi); color: #182033; border-radius: var(--r-sm); padding: .5rem .65rem; font-size: .8rem; pointer-events: none; box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .4); }
.tip b { display: block; }
.tip .num { font-size: .92rem; font-weight: 700; }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 1rem; align-items: end; }
@media (max-width: 40rem) { .controls { grid-template-columns: minmax(0, 1fr); } }
.ctrl { display: grid; gap: .25rem; min-width: 0; font-size: .78rem; color: var(--stage-muted); }
.ctrl-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ctrl output { color: var(--gold); font: 700 .86rem var(--mono); }
input[type=range] { width: 100%; accent-color: var(--gold); margin: 0; }
.play { background: var(--stage-2); border: 1px solid var(--stage-line); color: var(--stage-ink); border-radius: var(--pill); padding: .28rem .7rem; font-size: .8rem; font-weight: 650; }
.play:hover { border-color: var(--stage-muted); }

/* Side panel */
.side { display: grid; gap: .8rem; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: .85rem .9rem; display: grid; gap: .45rem; min-width: 0; }
.card h3 { font-size: 1rem; }
.lab { font: 700 .68rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.chip { font-size: .7rem; font-weight: 700; padding: .12rem .45rem; border-radius: var(--pill); background: var(--bg-alt); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.chip.measured { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.chartRead { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.estimated, .chip.stale { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.picks { display: grid; gap: .45rem; }
.pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; align-items: baseline; }
.pick small { grid-column: 1 / -1; color: var(--muted); font-size: .74rem; }
.pick .lab { grid-column: 1 / -1; }
.pick b { font-size: .93rem; min-width: 0; }
.bars { display: grid; gap: .28rem; }
.barrow { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto; gap: .4rem; align-items: center; font-size: .75rem; }
.barrow span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bartrack { height: 8px; }
.barfill { height: 8px; border-radius: 0 4px 4px 0; min-width: 2px; transition: width .4s; }
ul.notes { margin: 0; padding-left: 1.05rem; display: grid; gap: .28rem; font-size: .84rem; color: var(--muted); }
.detail-quote { font-size: .8rem; color: var(--muted); }
details > summary { cursor: pointer; font-weight: 650; font-size: .86rem; color: var(--accent); }
.tbl-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th, td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
td.r, th.r { text-align: right; }

/* Insights */
.section-head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; }
.section-head h2 { font-size: 1.25rem; letter-spacing: -.01em; }
.section-head p { color: var(--muted); font-size: .88rem; }
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; }
.ins { border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem .8rem; display: grid; gap: .3rem; align-content: start; background: var(--panel); }
.ins.locked { background: var(--bg-alt); border-style: dashed; }
.ins b { font-size: .92rem; }
.ins p { font-size: .83rem; color: var(--muted); }
.ins button { justify-self: start; background: none; border: 0; padding: 0; color: var(--accent); font-size: .8rem; font-weight: 650; }
.toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: min(24rem, calc(100vw - 32px)); background: var(--text); color: var(--bg); border-radius: var(--r-md); padding: .75rem .9rem; display: grid; gap: .2rem; box-shadow: 0 .6rem 2rem rgb(0 0 0 / .3); }
.toast small { font: 700 .68rem var(--mono); letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.toast p { font-size: .84rem; opacity: .92; }
.toast a { color: inherit; text-decoration: underline; }
.refs { display: grid; gap: .2rem; font-size: .82rem; }
.refs span { color: var(--muted); }
.rel-list { display: grid; gap: .5rem; }
.rel { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .2rem .8rem; padding: .65rem .8rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); scroll-margin-top: 5rem; }
.rel.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 34rem) { .rel { grid-template-columns: minmax(0, 1fr); } }
.rel time { font: 650 .78rem var(--mono); color: var(--muted); }
.rel-body { display: grid; gap: .25rem; min-width: 0; }
.rel-title { display: flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: center; font-weight: 650; }
.rel-title svg { width: 14px; height: 14px; overflow: visible; flex: none; }
.rel-body p { font-size: .85rem; color: var(--muted); }
.rel-jump { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-size: .74rem; color: var(--muted); }
.rel-jump button { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: var(--pill); padding: .12rem .5rem; font-size: .72rem; font-weight: 700; }
.rel-dot { cursor: pointer; }
.rel-dot:focus { outline: none; }
.rel-dot:focus-visible .hit, .rel-dot.sel .hit { stroke: var(--stage-hi); stroke-width: 1.5; }
.lane-label { fill: var(--stage-ink); font: 12px var(--sans); }
.rel-today { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 4 4; }
.pt.restricted .mark { stroke-dasharray: 2.5 2; stroke-width: 2.2; }
.pop { animation: pop .3s ease-out both; }
@keyframes pop { from { transform: translateY(.6rem); opacity: 0; } }

/* Missions */
.mission-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
@media (max-width: 58rem) { .mission-grid { grid-template-columns: minmax(0, 1fr); } }
.progress { display: flex; gap: .25rem; }
.progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.progress i.done { background: var(--accent); }
.progress i.now { background: var(--gold); }
.mission-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; display: grid; gap: .7rem; min-width: 0; }
.mission-card h2 { font-size: 1.35rem; letter-spacing: -.01em; }
.budget-chip { justify-self: start; font: 700 .9rem var(--mono); background: var(--stage); color: var(--gold); padding: .25rem .7rem; border-radius: var(--pill); }
.opts { display: grid; gap: .4rem; }
.opt { text-align: left; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .55rem; align-items: center; padding: .55rem .7rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 0; }
.opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.opt:disabled { cursor: default; }
.opt svg { width: 16px; height: 16px; overflow: visible; }
.opt small { color: var(--muted); font-size: .74rem; display: block; }
.opt .val { font: 700 .8rem var(--mono); text-align: right; }
.opt.picked { border-color: var(--text); border-width: 2px; }
.opt.best { background: var(--ok-soft); }
.opt.bust { background: var(--danger-soft); }
.result { display: grid; gap: .5rem; }
.result-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.result-pts { font: 800 2rem/1 var(--mono); }
.stars { color: var(--gold); font-size: 1.15rem; letter-spacing: .08em; }
.primary { justify-self: start; background: var(--accent); color: #fff; border: 0; padding: .5rem 1rem; border-radius: var(--pill); font-weight: 700; }
:root[data-theme="dark"] .primary { color: #0b101b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .primary { color: #0b101b; } }
.secondary { justify-self: start; background: none; color: var(--accent); border: 1px solid var(--accent); padding: .45rem .9rem; border-radius: var(--pill); font-weight: 650; }
.endstat { font: 800 clamp(2.4rem, 8vw, 4rem)/1 var(--mono); letter-spacing: -.03em; }

/* Mix */
.mix-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
@media (max-width: 58rem) { .mix-grid { grid-template-columns: minmax(0, 1fr); } }
.load { display: grid; gap: .1rem; }
.load label { display: flex; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.load output { font-family: var(--mono); color: var(--muted); }
.load input { accent-color: var(--accent); }
.bigstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 34rem) { .bigstats { grid-template-columns: minmax(0, 1fr); } }
.bigstats div { display: grid; gap: .15rem; }
.bigstats b { font: 750 1.55rem/1.1 var(--mono); color: var(--stage-hi); }
.bigstats span { color: var(--stage-muted); font-size: .76rem; }
.curve-line { fill: none; stroke: var(--stage-hi); stroke-width: 2; stroke-linejoin: round; }
.curve-area { fill: var(--stage-hi); opacity: .08; }
.prose { max-width: 70ch; display: grid; gap: .5rem; color: var(--muted); font-size: .92rem; }
.prose strong { color: var(--text); }

body { overflow-x: clip; }
#main-content { padding-block: 1.1rem 3rem; }