/* Layout: full-bleed 3D city; floating instrument panels pinned to the edges (scoreboard top-left,
   inspector right, control board along the bottom). Single deliberate light look. */
:root {
  color-scheme: light;
  --sky: #eef3fa;
  --panel: #ffffff;
  --panel-2: #f4f7fc;
  --line: #e2e8f2;
  --ink: #15213d;
  --ink-2: #4b5876;
  --ink-3: #8592ad;
  --blue: #2f62e8;
  --blue-2: #6d93ff;
  --blue-wash: #e8efff;
  --hot: #ff7a1a;
  --gold: #e3ab12;
  --good: #1f9d68;
  --good-wash: #e3f6ed;
  --bad: #e5484d;
  --bad-wash: #fdeaea;
  --warn: #d98a00;
  --organic: #3b82f6;
  --paid: #f59e0b;
  --push: #8b5cf6;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --r: 14px;
  --shadow: 0 1px 2px rgba(21, 33, 61, .06), 0 8px 24px rgba(21, 33, 61, .08);
  --gut: 12px;
  --tb: 60px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--sky); color: var(--ink); font: 500 13px/1.4 var(--body); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; z-index: 0; }
#scene canvas { display: block; cursor: grab; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* ---------- top bar ---------- */
.topbar { position: absolute; top: var(--gut); left: var(--gut); right: var(--gut); height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 12px 0 14px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b { display: block; font: 800 19px/1 var(--display); letter-spacing: -.01em; }
.brand small { color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.clock { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--line); }
.clock-row { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; overflow: hidden; }
.wk { font: 700 15px/1 var(--display); }
.date { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.event-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--blue-wash); color: var(--blue); overflow: hidden; text-overflow: ellipsis; }
.goal-chip { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #fff7e0; border: 1px solid #f5dc9c; padding: 2px 9px; border-radius: 99px; }
.goal-chip b { color: var(--ink); }
.event-chip.hot { background: #fff0e4; color: #c45300; }
.event-chip.factory { background: var(--bad-wash); color: var(--bad); }
.timeline { position: relative; height: 10px; display: grid; grid-template-columns: repeat(26, 1fr); gap: 2px; }
.timeline .t { height: 6px; margin-top: 2px; border-radius: 2px; background: var(--line); position: relative; }
.timeline .t.done { background: var(--blue-2); }
.timeline .t.now { background: var(--blue); }
.timeline .t .fill { position: absolute; inset: 0; width: 0; background: var(--blue); border-radius: 2px; }
.timeline .t[data-ev]::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ink-3); border: 1.5px solid var(--panel); }
.timeline .t[data-ev="hot"]::after { background: var(--hot); }
.timeline .t[data-ev="store"]::after { background: var(--blue); }
.timeline .t[data-ev="factory"]::after { background: var(--bad); }
.transport { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; fill: var(--ink); }
.icon-btn:hover { background: var(--panel-2); }
.icon-btn.play { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); border-color: var(--blue); }
.icon-btn.play svg { fill: #fff; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 2px; }
.seg button { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; color: var(--ink-2); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 33, 61, .14); }
.seg.mode button.on[data-v="copilot"], .seg.mode button.on[data-v="autopilot"] { color: var(--blue); }
.tools { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.icon-btn.help { width: 32px; height: 32px; border-radius: 50%; font: 800 14px/1 var(--display); color: var(--blue); }
.icon-btn.play.nudge { animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { box-shadow: 0 0 0 6px rgba(47, 98, 232, .2); } }
.ghost-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 7px 11px; font-weight: 700; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.ghost-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sigma { font: 700 15px/1 var(--display); }

/* ---------- scoreboard: one strip of five numbers ---------- */
.kpis { position: absolute; top: calc(var(--gut) + var(--tb) + 10px); left: var(--gut); right: calc(var(--gut) + 352px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; z-index: 4; }
.kpi { padding: 9px 12px 9px; position: relative; overflow: hidden; min-width: 0; cursor: help; }
.kpi .k-top { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.k-q { width: 14px; height: 14px; border-radius: 50%; background: var(--panel-2); color: var(--ink-3); font-size: 9.5px; font-weight: 800; display: grid; place-items: center; margin-left: auto; }
.kpi .k-val { font: 700 25px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.kpi .k-sub { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpi .k-vs { font-weight: 800; }
.up { color: var(--good); } .down { color: var(--bad); }
.kpi .k-prev { position: absolute; bottom: 7px; left: 9px; right: 9px; background: var(--panel-2); font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .15s; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .k-prev.show { opacity: 1; }
.kpi .k-prev.up { background: var(--good-wash); }
.kpi .k-prev.down { background: var(--bad-wash); }
.kpi.alert { border-color: #f6b7b9; background: #fffafa; }
.kpi .bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 5px; position: relative; overflow: hidden; }
.kpi .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.kpi .bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }

/* ---------- toasts ---------- */
.toasts { position: absolute; left: var(--gut); top: calc(var(--gut) + var(--tb) + 108px); width: 310px; display: flex; flex-direction: column; gap: 8px; z-index: 4; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 13px; display: grid; grid-template-columns: 34px 1fr 18px; gap: 10px; align-items: start; animation: slide .35s cubic-bezier(.2, .9, .3, 1.2); }
.toast .t-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 800 16px var(--display); color: #fff; background: var(--blue); }
.toast.hot .t-ico { background: var(--hot); }
.toast.factory .t-ico { background: var(--bad); }
.toast.stadium .t-ico { background: var(--good); }
.toast b { display: block; font-size: 13px; }
.toast p { margin: 2px 0 0; color: var(--ink-2); font-size: 12px; }
.toast.out { animation: fade .4s forwards; }
.t-x { border: 0; background: none; color: var(--ink-3); font-size: 12px; padding: 0; line-height: 1; }
@keyframes slide { from { transform: translateX(-16px); opacity: 0; } }
@keyframes fade { to { opacity: 0; transform: translateY(-6px); } }

.viewtools { position: absolute; right: calc(var(--gut) + 352px); top: calc(var(--gut) + var(--tb) + 108px); display: flex; flex-direction: column; gap: 4px; padding: 4px; z-index: 4; }
.viewtools .icon-btn { border: 0; }

/* ---------- inspector ---------- */
.inspector { position: absolute; top: calc(var(--gut) + var(--tb) + 10px); right: var(--gut); width: 340px; bottom: calc(var(--gut) + 198px); overflow-y: auto; z-index: 4; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.insp-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.insp-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-wash); }
.insp-ico svg { width: 22px; height: 22px; fill: var(--blue); }
.insp-head .eyebrow { margin: 0; }
.insp-head h2 { margin: 0; font: 700 17px/1.15 var(--display); }
.close { border: 0; background: var(--panel-2); width: 28px; height: 28px; border-radius: 8px; font-size: 15px; color: var(--ink-2); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-weight: 700; color: var(--blue); margin: 0 0 4px; }
.status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--good-wash); color: var(--good); }
.pill.warn { background: #fff4dc; color: var(--warn); }
.pill.bad { background: var(--bad-wash); color: var(--bad); }
.pill.blue { background: var(--blue-wash); color: var(--blue); }
.status span { color: var(--ink-2); font-size: 12px; }
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rows div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.rows dt, .rows span:first-child { color: var(--ink-2); }
.rows b { font-variant-numeric: tabular-nums; text-align: right; }
.insp-note { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; background: var(--panel-2); padding: 9px 11px; border-radius: 10px; }
.levers { display: flex; flex-wrap: wrap; gap: 6px; }
.levers button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; color: var(--blue); }
.levers button:hover { background: var(--blue-wash); }
.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.split i { display: block; }
.split-legend { display: flex; gap: 12px; font-size: 11px; color: var(--ink-2); font-weight: 600; flex-wrap: wrap; }
.split-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--c); }
.spark { width: 100%; height: 64px; display: block; }
.spark-cap { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 10.5px; font-weight: 600; }

/* Tower panel */
.versus { display: grid; grid-template-columns: 1fr auto auto auto; border-top: 1px solid var(--line); font-size: 12px; }
.versus > * { padding: 6px 0 6px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.versus > :nth-child(4n+1) { text-align: left; padding-left: 0; color: var(--ink-2); }
.versus .h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.recs { display: flex; flex-direction: column; gap: 8px; }
.rec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; animation: slide .3s ease-out; }
.rec-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rec-top b { font-size: 13px; }
.rec-top .imp { font-weight: 800; font-size: 12px; white-space: nowrap; }
.rec-top .imp.later { color: var(--warn); }
.rec p { margin: 0; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.rec-actions { display: flex; gap: 6px; }
.rec-actions button { flex: 1; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 6px 0; font-size: 11.5px; font-weight: 700; }
.rec-actions .acc { background: var(--blue); border-color: var(--blue); color: #fff; }
.empty { color: var(--ink-3); font-size: 12px; text-align: center; padding: 10px; border: 1px dashed var(--line); border-radius: 12px; }
.log { display: flex; gap: 10px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.log b { color: var(--ink); }

/* ---------- control board ---------- */
.board { position: absolute; left: var(--gut); right: var(--gut); bottom: var(--gut); height: 186px; z-index: 5; display: flex; gap: 0; padding: 10px 6px 10px 6px; overflow-x: auto; overflow-y: hidden; }
.group { display: flex; flex-direction: column; padding: 0 10px; border-right: 1px solid var(--line); flex: none; }
.group:last-child { border-right: 0; flex: 1; }
.group h3 { margin: 0 0 4px; font: 700 10.5px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.group h3 i { width: 8px; height: 8px; border-radius: 2px; }
.knobs { display: flex; gap: 4px; }
.knob { width: 132px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 2px; border-radius: 12px; position: relative; touch-action: none; user-select: none; }
.knob.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { background: var(--blue-wash); } }
.knob .kn-sub { font-size: 10px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.knob .kn-label { font-size: 12px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; }
.knob svg { width: 76px; height: 76px; cursor: grab; flex: none; outline: none; border-radius: 50%; }
.knob svg:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.knob .kn-val { font: 700 16px/1 var(--display); font-variant-numeric: tabular-nums; margin-top: -4px; }
.kn-row { display: flex; align-items: center; gap: 2px; }
.kn-step { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font: 700 15px/1 var(--body); color: var(--ink-2); padding: 0; display: grid; place-items: center; }
.kn-step:hover { background: var(--blue-wash); color: var(--blue); border-color: #c9d6ff; }
.knob.locked .kn-step, .knob.auto .kn-step { visibility: hidden; }
.knob.suggest { background: #fff7e8; box-shadow: inset 0 0 0 2px #ffc46b; animation: suggest 1.6s ease-in-out infinite; }
@keyframes suggest { 50% { box-shadow: inset 0 0 0 2px #ffc46b, 0 0 0 4px rgba(255, 170, 60, .18); } }
.knob .kn-hint { font-size: 10.5px; font-weight: 600; height: 14px; margin-top: 3px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; font-variant-numeric: tabular-nums; }
.knob .kn-hint.tower { color: var(--blue); }
.knob.auto svg { cursor: not-allowed; }
.policy { display: flex; gap: 14px; align-items: center; height: 100%; }
.constraints { display: flex; flex-direction: column; gap: 8px; min-width: 190px; flex: 1; max-width: 300px; }
.cons { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.cons .row { display: flex; justify-content: space-between; color: var(--ink-2); font-weight: 600; }
.cons .row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cons .bar { height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.cons .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--good); transition: width .3s; }
.cons .bar b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.cons .hint { color: var(--ink-3); font-size: 10.5px; }

.dial-tip { position: fixed; z-index: 30; width: 290px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; box-shadow: 0 12px 32px rgba(21, 33, 61, .2); }
.dial-tip b { font: 700 15px/1.2 var(--display); }
.dial-tip p { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.tip-trade { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; padding: 6px 8px; background: var(--panel-2); border-radius: 8px; }
.dial-tip .tip-how { font-size: 11px; color: var(--ink-3); }
.dial-tip .tip-lock { color: var(--warn); font-weight: 700; }

/* ---------- labels in the world ---------- */
.w-label { background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 9px; padding: 4px 8px 5px; box-shadow: 0 2px 8px rgba(21, 33, 61, .1); font-size: 11px; line-height: 1.25; white-space: nowrap; transform: translateY(-50%); }
.w-label b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); }
.w-label span { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- persistent legend ---------- */
.legend-bar { position: absolute; left: var(--gut); bottom: calc(var(--gut) + 198px); z-index: 3; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--ink-2); max-width: calc(100% - 2 * var(--gut) - 360px); background: rgba(255, 255, 255, .92); }
.legend-bar span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-bar i { width: 8px; height: 12px; border-radius: 4px; display: inline-block; }
.legend-bar .ico { width: 15px; height: 15px; border-radius: 50%; color: #fff; font-size: 9px; display: grid; place-items: center; }
.legend-bar .ico.red { background: var(--bad); } .legend-bar .ico.amber { background: var(--paid); } .legend-bar .ico.green { background: #1f9d68; }
body.ff .legend-bar { z-index: 8; box-shadow: 0 0 0 2px #c9d6ff; }

/* ---------- focus mode ---------- */
.w-label { transition: opacity .25s, border-color .25s; }
.w-label.dim { opacity: .22; }
.w-label.lit { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 98, 232, .14), 0 2px 8px rgba(21, 33, 61, .1); }
.callout { background: var(--ink); color: #fff; border-radius: 12px; padding: 8px 12px 9px; box-shadow: 0 8px 24px rgba(21, 33, 61, .28); white-space: nowrap; transform: translateY(-100%); position: relative; animation: pop .3s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; }
.callout::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.callout b { display: block; font: 800 20px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.callout span { display: block; font-size: 11.5px; font-weight: 600; color: #b8c4dd; margin-top: 2px; font-variant-numeric: tabular-nums; }
.callout.good { background: #12805a; } .callout.good::after { border-top-color: #12805a; } .callout.good span { color: #c7f0dd; }
.callout.bad { background: #c9353a; } .callout.bad::after { border-top-color: #c9353a; } .callout.bad span { color: #ffd5d6; }
.callout.blue { background: var(--blue); } .callout.blue::after { border-top-color: var(--blue); } .callout.blue span { color: #d6e1ff; }
@keyframes pop { from { transform: translateY(-80%) scale(.85); opacity: 0; } }

/* ---------- fast-forward ---------- */
.ff-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.ff-toggle[aria-pressed="false"] { color: var(--ink-3); }
.ff-toggle[aria-pressed="false"] svg { opacity: .5; }
.ff-toggle[aria-pressed="true"] { color: var(--blue); border-color: #c9d6ff; background: var(--blue-wash); }
.ff-banner { position: absolute; bottom: calc(var(--gut) + 240px); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 2 * var(--gut))); z-index: 7; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; border-color: #c9d6ff; animation: drop .3s ease-out; }
@keyframes drop { from { transform: translate(-50%, 10px); opacity: 0; } }
.ff-top { display: flex; align-items: center; gap: 10px; }
.ff-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-radius: 7px; }
.ff-tag svg { width: 12px; height: 12px; fill: #fff; }
.ff-top b { font: 700 15px/1.2 var(--display); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-skip { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; }
.ff-sub { margin: 0; font-size: 11.5px; color: var(--ink-2); }
.ff-bar { height: 4px; background: var(--blue-wash); border-radius: 2px; overflow: hidden; }
.ff-bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.ff-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ff-stats div { display: flex; flex-direction: column; gap: 1px; }
.ff-stats span { font-size: 10.5px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ff-stats b { font: 800 17px/1.15 var(--display); font-variant-numeric: tabular-nums; }
body.ff #scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 4px rgba(47, 98, 232, .5), inset 0 0 120px rgba(47, 98, 232, .18); }
body.ff .toasts { opacity: .3; }
.moment:not([hidden]) ~ .toasts, body:has(.moment:not([hidden])) .toasts { opacity: 0; pointer-events: none; }

/* ---------- math drawer ---------- */
.math { position: absolute; top: calc(var(--gut) + var(--tb) + 10px); right: var(--gut); bottom: calc(var(--gut) + 198px); width: 440px; z-index: 6; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.math h2 { margin: 0; font: 700 18px/1.2 var(--display); }
.math > p { margin: 0; color: var(--ink-2); font-size: 12px; }
.eq { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.eq h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.eq code { font: 500 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); white-space: pre-wrap; }
.eq .live { font: 600 11.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--blue); white-space: pre-wrap; background: var(--blue-wash); padding: 6px 8px; border-radius: 8px; }
.params { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 12px; }
.params input { width: 84px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; font: 600 12px var(--body); text-align: right; }
.params label { color: var(--ink-2); }

/* ---------- scenarios ---------- */
.scen-btn svg { width: 14px; height: 14px; fill: var(--gold); }
.timeline .t.out { opacity: .25; }
.knob.locked { opacity: .35; }
.knob.locked svg { cursor: not-allowed; }
.knob.unlocked { background: var(--blue-wash); box-shadow: inset 0 0 0 1.5px #c9d6ff; }
.mission { position: absolute; left: var(--gut); top: calc(var(--gut) + var(--tb) + 108px); width: 310px; z-index: 4; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; border-color: #c9d6ff; }
.ms-top { display: flex; justify-content: space-between; align-items: center; }
.ms-top .eyebrow { margin: 0; }
.ms-top .close { width: 24px; height: 24px; font-size: 13px; }
.ms-title { font: 700 16px/1.2 var(--display); }
.ms-bar { height: 4px; border-radius: 2px; background: var(--blue-wash); overflow: hidden; }
.ms-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s linear; }
.goals, .ms-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.goals li, .ms-goals li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.goals li i, .ms-goals li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 11px; background: var(--panel-2); color: var(--ink-3); }
.goals li.ok i, .ms-goals li.ok i { background: var(--good-wash); color: var(--good); }
.goals li.no i, .ms-goals li.no i { background: var(--bad-wash); color: var(--bad); }
.goals li small, .ms-goals li small { display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 600; }
.goals li b, .ms-goals li b { font-variant-numeric: tabular-nums; font-size: 13px; }
.ms-goals li.ok b { color: var(--good); } .ms-goals li.no b { color: var(--bad); }
.brief .goals li { grid-template-columns: 1fr auto; padding: 7px 0; border-bottom: 1px solid var(--line); }
.goals.final li { padding: 4px 0; }
.ms-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-actions .ghost-btn { padding: 5px 9px; font-size: 11.5px; }
.ms-actions .ghost-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.scen { max-width: 820px; width: 100%; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.scen h1, .brief h1 { margin: 0; font: 800 28px/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.scen-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.scen-head .lede { margin-top: 8px; }
.scen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scen-card { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; min-height: 150px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.scen-card:hover { border-color: var(--blue-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.scen-card .num { font: 800 30px/1 var(--display); color: var(--blue-wash); position: absolute; right: 12px; top: 10px; -webkit-text-stroke: 1px #c9d6ff; }
.scen-card b { font: 700 16px/1.2 var(--display); padding-right: 26px; text-wrap: balance; }
.sc-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.sc-when { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: auto; }
.stars { display: inline-flex; gap: 2px; font-size: 16px; line-height: 1; }
.stars i { font-style: normal; color: var(--line); }
.stars i.on { color: var(--gold); }
.scen-foot { display: flex; justify-content: flex-end; }
.brief { display: flex; flex-direction: column; gap: 16px; }
.brief-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.brief-grid > * { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; border: 1.5px solid var(--c); color: var(--c); }
.debrief-top { display: flex; flex-direction: column; gap: 6px; }
.debrief-top .stars { font-size: 34px; gap: 4px; }
.debrief-top .stars i.on { animation: starpop .5s cubic-bezier(.2, .9, .3, 1.5) backwards; }
.debrief-top .stars i:nth-child(2) { animation-delay: .15s; } .debrief-top .stars i:nth-child(3) { animation-delay: .3s; }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); } }
.star-key { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.star-key .stars { font-size: 12px; margin-right: 6px; }
.intro .actions, .scen .actions, .brief .actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.in-scen .seg.mode { opacity: .45; }

/* ---------- right panel: tabs, report, ledger ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel-2); border-radius: 10px; padding: 3px; gap: 2px; }
.tabs button { border: 0; background: none; padding: 7px 6px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--ink-2); display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(21, 33, 61, .12); }
.badge { background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; border-radius: 99px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; }
.insp-lead { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ledger { display: flex; flex-direction: column; gap: 2px; }
.lg-row { display: grid; grid-template-columns: 1fr 90px 64px; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.lg-row span { font-weight: 600; min-width: 0; }
.lg-row small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row b { text-align: right; font-variant-numeric: tabular-nums; }
.lg-bar { height: 10px; position: relative; background: linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat; }
.lg-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.lg-bar i.pos { background: var(--good); } .lg-bar i.neg { background: var(--bad); }
.lg-total { display: flex; justify-content: space-between; padding: 7px 0 0; font-size: 13px; font-weight: 700; }
.lg-total b { font: 800 16px/1 var(--display); font-variant-numeric: tabular-nums; }
.feed { display: flex; flex-direction: column; gap: 8px; }
.story { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; animation: slide .35s ease-out; }
.story.good { border-left-color: var(--good); } .story.bad { border-left-color: var(--bad); }
.st-date { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.st-head { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.story ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.story li { font-size: 12px; color: var(--ink-2); line-height: 1.45; padding-left: 16px; position: relative; }
.story li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.story li.bad::before { background: var(--bad); } .story li.good::before { background: var(--good); } .story li.info::before { background: var(--paid); }
.rec-num { color: var(--ink) !important; font-weight: 600; }

/* ---------- decision moments ---------- */
.moment { position: absolute; z-index: 8; top: calc(var(--gut) + var(--tb) + 108px); left: var(--gut); width: min(390px, calc(100% - 2 * var(--gut))); max-height: calc(100% - var(--gut) * 2 - var(--tb) - 108px - 198px); overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border: 2px solid #ffc46b; box-shadow: 0 16px 40px rgba(21, 33, 61, .22); animation: drop .35s ease-out; }
.mo-head { display: flex; justify-content: space-between; align-items: center; }
.mo-tag { background: #ff9a1f; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; }
.mo-when { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.moment h3 { margin: 0; font: 800 21px/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.moment p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.mo-dials { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mo-dials > span { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; width: 100%; }
.mo-dials .chip { background: var(--panel); cursor: pointer; }
.mo-advice { background: var(--blue-wash); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.mo-advice p { color: var(--ink); font-size: 12.5px; }
.mo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-opt { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.primary.small { font-size: 12.5px; padding: 8px 12px; border-radius: 9px; }
.ff-what { margin: 0; font-weight: 700; font-size: 13px; }
.ff-sub.verdict { font-size: 13px; color: var(--ink); line-height: 1.45; font-weight: 600; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.ff-sub.verdict.good { background: var(--good-wash); } .ff-sub.verdict.bad { background: var(--bad-wash); }

/* ---------- tour ---------- */
.coach-ring { position: fixed; z-index: 40; border-radius: 14px; box-shadow: 0 0 0 3px #ffb347, 0 0 0 9999px rgba(21, 33, 61, .42); pointer-events: none; transition: all .25s ease; }
.coach-ring.clear { box-shadow: none !important; }
.coach-ring.none { box-shadow: 0 0 0 9999px rgba(21, 33, 61, .42); width: 0 !important; height: 0 !important; }
.coach-card { position: fixed; z-index: 41; width: 330px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 40px rgba(21, 33, 61, .3); }
.coach-card .eyebrow { margin: 0; }
.coach-card h3 { margin: 0; font: 800 20px/1.15 var(--display); }
.coach-card p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.coach-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.coach-actions .primary { padding: 9px 16px; font-size: 13px; }
.coach-wait { font-size: 12px; font-weight: 800; color: #c46a00; background: #fff4e0; padding: 6px 10px; border-radius: 8px; }
.link { border: 0; background: none; color: var(--ink-3); font-size: 12px; font-weight: 600; text-decoration: underline; }

/* ---------- intro & report ---------- */
.scrim { position: absolute; inset: 0; z-index: 20; background: rgba(21, 33, 61, .28); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.intro { max-width: 620px; width: 100%; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.intro h1 { margin: 0; font: 800 34px/1.05 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.lede { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 14px; border-radius: 5px; flex: none; }
.legend .ico { width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 800 11px/18px var(--body); text-align: center; font-style: normal; }
.legend .ico.red { background: var(--bad); }
.legend .ico.amber { background: var(--paid); margin-left: 8px; }
.intro-paths { display: flex; flex-direction: column; gap: 8px; }
.path { text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 1fr; gap: 2px; position: relative; transition: border-color .15s, background .15s; }
.path:hover { border-color: var(--blue-2); background: var(--blue-wash); }
.path b { font: 700 16px/1.2 var(--display); }
.path span { font-size: 12.5px; color: var(--ink-2); }
.path em { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.primary-path { border: 2px solid var(--blue); }
.intro-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.intro-modes div { background: var(--panel-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-2); }
.intro-modes b { color: var(--ink); font-size: 13px; }
.fine { margin: 0; font-size: 12px; color: var(--ink-3); }
.primary { border: 0; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 11px; align-self: flex-start; }
.primary:hover { background: #2453cf; }
.secondary { border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 14px; padding: 11px 16px; border-radius: 11px; }
.report { max-width: 860px; width: 100%; padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.report h1 { margin: 0; font: 800 28px/1.1 var(--display); letter-spacing: -.02em; }
.report .verdict { margin: 0; color: var(--ink-2); font-size: 14px; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.report-grid > * { min-width: 0; }
.rtable { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; font-size: 12.5px; }
.rtable > * { padding: 7px 0 7px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.rtable > :nth-child(4n+1) { text-align: left; padding-left: 0; color: var(--ink-2); }
.rtable .h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.frontier svg { width: 100%; height: auto; display: block; }
.frontier text { font: 600 10px var(--body); fill: var(--ink-3); }
.report .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- narrow screens ---------- */
@media (max-width: 1320px) {
  .tools .ghost-btn { font-size: 0; gap: 0; padding: 7px 9px; }
  .tools .ghost-btn .sigma { font-size: 15px; }
  .kpi .k-val { font-size: 21px; }
}
@media (max-width: 820px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 8px 10px; }
  .clock { order: 5; flex-basis: 100%; border-left: 0; padding-left: 0; }
  .brand small { display: none; }
  .brand b { font-size: 16px; }
  .seg button { padding: 5px 8px; }
  .moment { max-height: none; }
  .kpis { right: var(--gut); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 140px; overflow-x: auto; padding-bottom: 4px; }
  .moment { top: auto; bottom: calc(var(--gut) + 198px); left: var(--gut); right: var(--gut); width: auto; transform: none; }
  .tools { margin-left: 0; }
  .kpi .k-val { font-size: 20px; }
  .inspector, .math { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: calc(var(--gut) + 186px); max-height: 46%; }
  .inspector.collapsed { display: none; }
  .viewtools { display: none; }
  .legend-bar { display: none; }
  .goal-chip { display: none; }
  .toasts { top: calc(var(--gut) + var(--tb) + 118px); width: auto; right: var(--gut); }
  .ff-stats { grid-template-columns: repeat(2, 1fr); }
  .ff-toggle { font-size: 0; gap: 0; }
  .report-grid, .intro-modes, .legend, .brief-grid { grid-template-columns: 1fr; }
  .scen-grid { grid-template-columns: 1fr 1fr; }
  .mission { top: calc(var(--gut) + var(--tb) + 118px); right: var(--gut); width: auto; }
  .intro h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.lg-total small { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }