:root {
  --ink: #eaf1f5;
  --muted: #9fb0ba;
  --faint: #667984;
  --surface: #101a20;
  --surface-2: #15242b;
  --surface-3: #1b2d35;
  --line: rgba(177, 202, 213, 0.16);
  --green: #54d69f;
  --cyan: #69c7d8;
  --yellow: #e6c76b;
  --red: #ef7b78;
  --blue: #78aee8;
  --focus: #f2d37a;
  --max: 1540px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0b1318; color: var(--ink); font: 17px/1.58 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
button, select, input { font: inherit; }
button, select { color: var(--ink); }
button { cursor: pointer; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-150%); background: var(--focus); color: #111; padding: 10px 16px; }
.skip-link:focus { transform: translateY(0); }

.masthead { min-height: 116px; padding: 24px max(28px, calc((100vw - var(--max)) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #0d171c; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand-lockup { display: flex; align-items: center; gap: 18px; }
.brand-mark { width: 48px; height: 48px; position: relative; border: 1px solid rgba(105,199,216,.45); border-radius: 50%; }
.brand-mark span { position: absolute; left: 50%; top: 50%; border: 2px solid var(--cyan); border-radius: 50%; transform: translate(-50%,-50%); }
.brand-mark span:nth-child(1) { width: 10px; height: 10px; background: var(--cyan); }
.brand-mark span:nth-child(2) { width: 25px; height: 25px; border-color: rgba(105,199,216,.65); }
.brand-mark span:nth-child(3) { width: 42px; height: 42px; border-color: rgba(105,199,216,.25); }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font-size: .78rem; font-weight: 760; text-transform: uppercase; letter-spacing: .11em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: clamp(1.65rem, 3.2vw, 2.65rem); line-height: 1.15; letter-spacing: 0; max-width: 980px; }
h3 { margin-bottom: 10px; font-size: 1.25rem; line-height: 1.25; letter-spacing: 0; }
.header-state { text-align: right; color: var(--muted); font-size: .9rem; }
.header-state div { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--ink); }
.header-state time { display: block; margin-top: 5px; }
.portfolio-proof-strip { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.portfolio-proof-strip span { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid rgba(105,199,216,.28); border-radius: 4px; background: rgba(105,199,216,.08); color: #cdeff5; font-size: .78rem; font-weight: 760; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(230,199,107,.12); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(84,214,159,.12); }
.status-dot.offline { background: var(--red); }

.tab-bar, .footer-tabs { display: flex; gap: 4px; padding: 10px max(24px, calc((100vw - var(--max)) / 2)); overflow-x: auto; background: #0f1a20; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.tab-bar { position: sticky; top: 0; z-index: 50; }
.tab-bar button, .footer-tabs button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); text-align: center; white-space: nowrap; }
.tab-bar button:hover, .tab-bar button:focus-visible, .footer-tabs button:hover, .footer-tabs button:focus-visible { color: var(--ink); background: rgba(255,255,255,.035); outline: none; }
.tab-bar button.active { color: var(--ink); border-color: var(--cyan); }

main { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.view { display: none; min-height: 70vh; padding: 46px 0 70px; }
.view.active { display: block; }
.view-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 30px; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; }
label { color: var(--muted); font-size: .84rem; font-weight: 650; }
select { display: block; min-width: 170px; margin-top: 5px; padding: 9px 36px 9px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
select:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(242,211,122,.35); outline-offset: 2px; }

.metric-strip { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.metric { min-height: 136px; padding: 18px; border-top: 3px solid var(--blue); background: var(--surface); }
.metric.primary { border-color: var(--cyan); background: #13242a; }
.metric.positive { border-color: var(--green); }
.metric.risk { border-color: var(--red); }
.metric span { color: var(--muted); font-size: .83rem; font-weight: 720; }
.metric strong { display: block; margin: 7px 0 2px; font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.1; }
.metric small { color: var(--faint); font-size: .76rem; }
[data-tooltip] { position: relative; text-decoration: underline dotted rgba(234,241,245,.45); text-underline-offset: 4px; cursor: help; }
[data-tooltip]:hover::after, [data-tooltip]:focus::after { content: attr(data-tooltip); position: absolute; z-index: 90; left: 0; bottom: calc(100% + 10px); width: min(320px, 75vw); padding: 11px 13px; border: 1px solid var(--line); border-radius: 4px; background: #24353d; color: var(--ink); font-size: .82rem; font-weight: 500; line-height: 1.45; box-shadow: 0 12px 28px rgba(0,0,0,.35); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, .8fr); gap: 16px; margin-bottom: 16px; }
.dashboard-grid > * { min-width: 0; }
.panel { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.quality-badge, .hint, .interaction-note { color: var(--muted); font-size: .79rem; }
.quality-badge { padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; }
.canvas-wrap { position: relative; min-height: 330px; }
canvas { display: block; width: 100%; }
#healthCanvas { height: 330px; }
.chart-tooltip { position: absolute; z-index: 5; pointer-events: none; min-width: 160px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: #22343d; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: .78rem; }
.chart-scale { display: flex; justify-content: space-between; color: var(--faint); font-size: .73rem; }
.lead { color: #ced9de; font-size: 1.04rem; }
.decision-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.decision-row span { color: var(--muted); }
.text-command { margin-top: 16px; padding: 8px 0; border: 0; background: transparent; color: var(--cyan); font-weight: 750; }

.reservoirs-grid { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); }
.reservoirs { display: grid; grid-template-columns: repeat(5, minmax(82px, 1fr)); gap: 22px; align-items: end; min-height: 315px; padding: 12px 8px 0; }
.reservoir-item { display: grid; justify-items: center; gap: 9px; min-width: 0; }
.reservoir-item strong { font-size: .84rem; }
.tank { position: relative; width: min(78px, 100%); height: 225px; overflow: hidden; border: 2px solid #536873; border-radius: 8px 8px 15px 15px; background: #0b1419; box-shadow: inset 0 0 20px rgba(0,0,0,.5); }
.tank::before { content: ""; position: absolute; z-index: 3; inset: -3px 6px auto; height: 8px; border: 2px solid #60757f; border-radius: 50%; background: #142229; }
.tank-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height .8s ease; opacity: .82; }
.tank-fill::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 10px; border-radius: 50%; background: inherit; filter: brightness(1.18); }
.tank-fill.keep { background: var(--green); }.tank-fill.route { background: var(--cyan); }.tank-fill.monitor { background: var(--yellow); }.tank-fill.hedge { background: var(--blue); }.tank-fill.reduce { background: var(--red); }
.tank span { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); font-weight: 820; text-shadow: 0 2px 8px #000; }
#radarCanvas { height: 305px; }

.committee-sheet { background: #f4f1e9; color: #172126; padding: 42px; border-radius: 4px; }
.print-heading { align-items: center; }
.icon-command { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 1.35rem; }
.committee-verdict { border-left: 7px solid #2a7885; padding-left: 24px; margin-bottom: 28px; }
.committee-verdict span { color: #52636a; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.committee-verdict strong { display: block; margin: 4px 0 10px; font: 750 clamp(1.8rem, 4vw, 3rem)/1.1 Georgia, serif; }
.committee-verdict p { max-width: 1100px; font-size: 1.08rem; }
.committee-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ccd4d3; border: 1px solid #ccd4d3; }
.committee-kpis div { padding: 16px; background: #fffdf8; }
.committee-kpis span { display: block; color: #66777e; font-size: .76rem; font-weight: 750; text-transform: uppercase; }
.committee-kpis strong { display: block; margin-top: 4px; font-size: 1.2rem; }
.committee-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 32px 0; }
.committee-columns h3 { border-bottom: 2px solid #c6d1d2; padding-bottom: 10px; }
.committee-columns ul { padding-left: 20px; }
.committee-columns li { margin-bottom: 10px; }
.committee-note { padding: 17px; background: #e5ece9; }

.story-layout { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.45fr); gap: 16px; }
.story-copy p:not(.chapter) { color: #c1cdd3; }
.chapter { margin: 28px 0 7px; color: var(--cyan); font-size: .74rem; font-weight: 780; text-transform: uppercase; letter-spacing: .1em; }
.chapter:first-child { margin-top: 0; }
#trajectoryCanvas { height: 390px; }
.scenario-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scenario { padding: 13px; border-top: 3px solid var(--yellow); background: var(--surface-2); }
.scenario.recovery { border-color: var(--green); }.scenario.stress { border-color: var(--red); }
.scenario span { display: block; color: var(--muted); font-size: .75rem; }.scenario strong { font-size: 1.15rem; }

.map-layout, .replay-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .6fr); gap: 16px; }
.orbit-panel, .replay-stage { padding: 18px; }
#orbitCanvas, #replayCanvas { height: min(68vh, 680px); min-height: 500px; }
.orbit-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; min-height: 34px; padding-top: 12px; color: var(--muted); font-size: .76rem; }
.legend-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; }.legend-dot.safe { background: var(--green); }.legend-dot.watch { background: var(--yellow); }.legend-dot.risk { background: var(--red); }
.asset-inspector { align-self: start; position: sticky; top: 76px; }
.asset-inspector dl { margin: 20px 0 0; }.asset-inspector dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }.asset-inspector dt { color: var(--muted); }.asset-inspector dd { margin: 0; text-align: right; font-weight: 700; }

.replay-toolbar { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); }
.play-command { min-width: 104px; min-height: 48px; border: 0; border-radius: 4px; background: var(--cyan); color: #102027; font-weight: 800; }
.replay-range { flex: 1; display: grid; grid-template-columns: auto minmax(150px,1fr) auto; align-items: center; gap: 14px; }
.replay-range input { width: 100%; accent-color: var(--cyan); }
.replay-clock { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .8rem; }.replay-clock strong { color: var(--ink); font-size: 1rem; }
.replay-reading { align-self: start; }.replay-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }.replay-kpis div { padding: 12px; background: var(--surface-2); }.replay-kpis span { display: block; color: var(--muted); font-size: .75rem; }.replay-kpis strong { font-size: 1.25rem; }

.routing-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 16px; }
.routing-card { min-height: 185px; padding: 25px; border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: 5px; background: rgba(230,199,107,.08); }.routing-card.strong { border-top-color: var(--green); background: rgba(84,214,159,.08); }.routing-card.risk { border-top-color: var(--red); background: rgba(239,123,120,.09); }.routing-card span { color: var(--muted); font-weight: 700; }.routing-card strong { display: block; margin: 5px 0; font-size: 2.3rem; }.routing-card p { margin-bottom: 0; color: #bdcbd1; }
.routing-table-panel, .data-panel { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 13px 15px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); background: var(--surface-2); font-size: .74rem; text-transform: uppercase; }
tbody tr:hover { background: rgba(255,255,255,.025); }
.weather { font-size: 1.3rem; }.action-pill { padding: 4px 8px; border-radius: 3px; background: var(--surface-3); }

.method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 30px; }.method-grid article { padding: 24px; border-top: 3px solid var(--cyan); background: var(--surface); }.method-grid p { margin-bottom: 0; color: #bdcbd1; }
.glossary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.glossary article { padding: 20px; background: var(--surface); }.glossary h3 { margin-bottom: 5px; color: var(--cyan); font-size: 1rem; }.glossary p { margin-bottom: 0; color: var(--muted); font-size: .86rem; }
#dataTable th[data-sort] { cursor: pointer; }#dataTable th[data-sort]:hover { color: var(--ink); }

.footer-tabs { justify-content: center; border-top: 1px solid var(--line); border-bottom: 0; }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 24px max(28px, calc((100vw - var(--max)) / 2)); color: var(--faint); background: #091015; border-top: 1px solid var(--line); font-size: .76rem; }
.error-banner { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(680px, calc(100vw - 32px)); padding: 13px 18px; border: 1px solid rgba(239,123,120,.5); background: #3a2022; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); }

@media (max-width: 1100px) { .metric-strip { grid-template-columns: repeat(3,1fr); }.dashboard-grid, .story-layout, .map-layout, .replay-layout { grid-template-columns: 1fr; }.reservoirs-grid { grid-template-columns: 1fr; }.asset-inspector { position: static; }.committee-columns, .glossary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { body { font-size: 16px; }.masthead { min-height: 96px; padding: 18px 20px; align-items: flex-start; }.header-state time { max-width: 150px; }.brand-mark { width: 40px; height: 40px; }.tab-bar { padding-left: 16px; }.view { padding: 32px 0 54px; }main { width: min(100% - 28px, var(--max)); }.view-heading { align-items: flex-start; flex-direction: column; }.filters { width: 100%; }.filters label { flex: 1; }.filters select { min-width: 0; width: 100%; }.metric-strip { grid-template-columns: repeat(2,1fr); }.metric { min-height: 124px; padding: 15px; }.panel { padding: 18px; }.reservoirs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-inline: 0; }.tank { height: 180px; width: min(50px, 100%); }.reservoir-item strong { writing-mode: vertical-rl; transform: rotate(180deg); height: 68px; }.committee-sheet { padding: 24px; }.committee-kpis, .committee-columns, .method-grid, .glossary, .routing-summary, .scenario-list { grid-template-columns: 1fr; }.replay-toolbar { align-items: stretch; flex-direction: column; }.replay-range { grid-template-columns: 1fr; gap: 4px; }.replay-toolbar label select { width: 100%; }.map-layout, .replay-layout { min-width: 0; }#orbitCanvas, #replayCanvas { min-height: 410px; height: 58vh; }.footer-tabs { justify-content: flex-start; }footer { flex-direction: column; padding: 22px; } }

@media print { body { background: #fff; color: #111; }.masthead, .tab-bar, .footer-tabs, footer, .view:not(#committee), .print-heading .eyebrow, .icon-command { display: none !important; }main { width: 100%; }.view#committee { display: block !important; padding: 0; }.print-heading { margin: 0 0 15px; }.committee-sheet { padding: 20px; }.committee-columns { gap: 16px; }.committee-note { break-inside: avoid; } }