/* Capacity planner viewer: dark, map-first theme. Every colour the page chrome uses is a token on :root, so the page
   can be re-themed in one place (the map's own colours are in app.js, constant C). Layout: side panels on wide
   screens, sheets over the map at 1100 px and below, a phone layout at 900 px and below; body.embed and body.ui-hidden give the minimal iframe chrome. */
@font-face {
  font-family: "InterVar";
  src: url("vendor/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Brand palette (logo/brand.md). The chrome uses ink, ink-2, line, paper/text, muted and the secondary blue.
     Selected controls take the secondary blue rather than the brand amber, because amber already means "near
     critical" and "slowing" in the status dots and the speed ramp on the map. Amber stays for what brand.md gives
     it: focus rings, the story kicker and the loading bar. Data colours (speed, status, sites, series) are in
     app.js and keep their own semantic palette. */
  --brand-ink: #0B1219;
  --brand-ink-2: #141E28;
  --brand-line: #273645;
  --brand-paper: #EEEAE2;
  --brand-muted: #97A3AE;
  --brand-accent: #F4A23A;
  --brand-secondary: #7FA8CB;
  --brand-secondary-deep: #33658F;
  --brand-slate: #4B5865;
  /* surfaces */
  --bg: var(--brand-ink);
  --bg-2: var(--brand-ink-2);
  --panel: rgba(20, 30, 40, 0.86);        /* ink-2 */
  --panel-solid: var(--brand-ink-2);
  --panel-border: rgba(39, 54, 69, 0.95); /* line */
  --scrim: rgba(11, 18, 25, 0.8);         /* ink */
  --raise: rgba(238, 234, 226, 0.055);    /* paper on ink-2 */
  --raise-2: rgba(238, 234, 226, 0.1);
  --well: rgba(11, 18, 25, 0.55);
  /* text */
  --text: var(--brand-paper);
  --text-2: #C5CBCF;                      /* between text and muted: 10.3:1 on ink-2 */
  --muted: var(--brand-muted);            /* 6.55:1 on ink-2 */
  --ink: var(--brand-ink);                /* text on a light fill */
  --grid: rgba(238, 234, 226, 0.08);
  /* selection: brand secondary blue (ink on it 7.5:1) */
  --accent-rgb: 127, 168, 203;
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --accent-line: rgba(var(--accent-rgb), 0.55);
  --accent-ink: var(--brand-ink);         /* text on the accent */
  --accent-text: #A9C4DC;                 /* accent-tinted text on dark */
  /* brand amber: focus, story kicker, loading */
  --amber-rgb: 244, 162, 58;
  --amber: rgb(var(--amber-rgb));
  --case-rgb: 57, 214, 180;               /* the selected capacity case: the teal of the site columns */
  --switch-on: var(--brand-secondary-deep);
  --good: #3ecf72;
  --warn: #fab219;
  --bad: #ef5350;
  --bad-text: #ff8b88;
  --good-text: #6fe39a;
  --bad-text-2: #ff7b78;
  --warn-text: #ffd27a;
  /* type and layout */
  --font: "InterVar", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: clamp(13.5px, 0.84vw, 17px);
  --gap: clamp(12px, 1vw, 20px);
  --left-w: clamp(290px, 19vw, 370px);
  --right-w: clamp(340px, 23.6vw, 470px);
  --timebar-h: clamp(74px, 7.2vh, 92px);
  --panel-top: calc(var(--gap) + 136px);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
a { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); font-weight: 450; }
.small { font-size: 0.82em; }

#map { position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, var(--bg-2) 0%, var(--bg) 75%); }
#map canvas { outline: none; }
#map canvas:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.ui { position: absolute; z-index: 5; }
/* hiding the UI (h, ?ui=0) keeps the title, the disclaimer, the attribution and the full-screen link on screen */
body.ui-hidden .ui:not(#attribution):not(#data-badge):not(#story-caption):not(#titlebar):not(#open-full) { display: none !important; }
body.ui-hidden #attribution { font-size: 15px; }

/* ---------- header ---------- */
/* subtle backdrop so map labels cannot run through the title; offset so the text stays where it was */
#titlebar { top: calc(var(--gap) - 7px); left: calc(var(--gap) - 12px); max-width: calc(100vw - 2 * var(--gap) - 560px); padding: 7px 12px 8px; border-radius: 12px; background: rgba(11, 18, 25, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#titlebar h1 { margin: 0; font-size: clamp(21px, 1.72vw, 34px); font-weight: 720; letter-spacing: -0.015em; line-height: 1.12; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75); }
#titlebar .subtitle { margin: 0.35em 0 0; font-size: clamp(13px, 0.98vw, 19px); color: var(--text-2); font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
/* the brand link is the shared brandmark (/assets/css/brandmark.css), at its default size: the planner's */
#titlebar .brandmark { margin-bottom: 4px; }

#topright { top: var(--gap); right: var(--gap); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#mode-switch .short { display: none; }
.tr-row { display: flex; align-items: center; gap: 8px; }
.round-btn { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-2); font-weight: 700; font-size: 1.05em; cursor: pointer; backdrop-filter: blur(10px); display: grid; place-items: center; transition: background .18s, color .18s; }
.round-btn:hover { color: var(--text); background: var(--raise-2); }
.round-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* help: a short panel under the top-right controls */
#help { top: calc(var(--gap) + 52px); right: var(--gap); width: min(400px, calc(100vw - 2 * var(--gap))); max-height: calc(100vh - var(--gap) - 52px - var(--timebar-h) - 2 * var(--gap) - 10px); padding: 14px 16px 12px; z-index: 8; background: rgba(20, 30, 40, 0.96); }
#help h2 { margin: 0; }
#help dl { margin: 10px 0 0; font-size: 0.9em; line-height: 1.42; }
#help dt { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 650; margin-top: 10px; }
#help dt:first-child { margin-top: 0; }
#help dd { margin: 2px 0 0; color: var(--text-2); }

/* one row of stories; the row sits below the title block, so it may reach further left than the title's right edge */
#stories { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: min(70vw, 1400px); }
.stories-label { color: var(--muted); font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 2px; }
#stories button { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 0.38em 0.85em 0.38em 0.4em; cursor: pointer; display: flex; align-items: center; gap: 0.45em; font-size: 0.86em; font-weight: 560; color: var(--text-2); backdrop-filter: blur(10px); transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
#stories button b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--raise-2); color: var(--text); font-size: 0.85em; }
#stories button:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
#stories .short { display: none; }
@media (max-width: 1600px) { #stories .long { display: none; } #stories .short { display: inline; } }
#stories button.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
#stories button.on b { background: var(--accent); color: var(--accent-ink); }

#story-caption { top: var(--panel-top); left: calc(var(--left-w) + 2 * var(--gap) + (100vw - var(--left-w) - var(--right-w) - 4 * var(--gap)) / 2); transform: translateX(-50%); width: max-content; max-width: min(880px, calc(100vw - var(--left-w) - var(--right-w) - 6 * var(--gap))); text-align: center; pointer-events: none; animation: capIn .6s ease; background: var(--scrim); border: 1px solid var(--panel-border); border-radius: 14px; padding: 10px 34px 14px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#story-caption button { pointer-events: auto; background: none; border: 0; color: var(--text-2); cursor: pointer; font: inherit; line-height: 1; border-radius: 6px; }
#story-caption button:hover:not(:disabled) { color: var(--text); background: var(--raise-2); }
#story-caption button:disabled { opacity: 0.3; cursor: default; }
#story-caption .sc-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
#story-caption .sc-prev, #story-caption .sc-next { font-size: 1.35em; padding: 0 8px 3px; }
#story-caption .sc-close { position: absolute; top: 6px; right: 6px; font-size: 1.2em; padding: 2px 7px 4px; }
#story-caption .sc-pause { margin-top: 6px; padding: 4px 10px; font-size: 0.8em; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
#story-caption .sc-kicker { font-size: 0.78em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 650; }
#story-caption .sc-title { font-size: clamp(18px, 1.35vw, 26px); font-weight: 720; margin-top: 0.15em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85); }
#story-caption .sc-text { font-size: 1.02em; color: var(--text-2); margin-top: 0.3em; line-height: 1.4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
@keyframes capIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

#data-badge { top: calc(var(--panel-top) - 36px); left: var(--gap); padding: 0.35em 0.75em; border-radius: 8px; font-size: 0.8em; font-weight: 650; letter-spacing: 0.04em; background: rgba(250, 178, 25, 0.16); color: var(--warn-text); border: 1px solid rgba(250, 178, 25, 0.5); }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; overscroll-behavior: contain; }
#left { left: var(--gap); top: var(--panel-top); max-height: calc(100vh - var(--panel-top) - var(--timebar-h) - 2 * var(--gap) - 10px); width: var(--left-w); padding: 16px 16px 12px; }
#right { right: var(--gap); top: var(--panel-top); max-height: calc(100vh - var(--panel-top) - var(--timebar-h) - 2 * var(--gap) - 10px); width: var(--right-w); padding: 16px 16px 12px; }
.sheet-close { display: none; }
.panel section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--panel-border); }
.panel h2 { margin: 0 0 10px; font-size: 1.12em; font-weight: 680; letter-spacing: -0.005em; }
.panel h3 { margin: 0 0 8px; font-size: 0.8em; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.field-label { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.caption { margin: 10px 0 0; color: var(--text-2); font-size: 0.92em; line-height: 1.4; }
.caption:empty { display: none; }
.note { color: var(--text-2); background: var(--raise); border-radius: 10px; padding: 10px 12px; font-size: 0.9em; line-height: 1.4; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

body.mode-scenarios .for-capacity { display: none; }
body.mode-capacity .for-scenarios { display: none; }
body.mode-capacity #left > section.for-capacity, body.mode-capacity #right > section.for-capacity,
body.mode-scenarios #left > section.for-scenarios, body.mode-scenarios #right > section.for-scenarios { margin-top: 0; padding-top: 0; border-top: 0; }
body.mode-capacity #right #mfd-section, body.mode-capacity #left .layers { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--panel-border); }

/* segmented controls */
.seg { display: grid; grid-auto-flow: column; gap: 3px; background: var(--well); border: 1px solid var(--panel-border); border-radius: 11px; padding: 3px; }
.seg button { background: transparent; border: 0; border-radius: 8px; padding: 0.5em 0.6em; cursor: pointer; font-weight: 560; color: var(--text-2); line-height: 1.15; transition: background .18s, color .18s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.seg button small { font-size: 0.78em; color: var(--muted); font-weight: 500; margin-top: 2px; }
.seg button:hover:not(:disabled) { color: var(--text); background: var(--raise); }
.seg button.on { background: var(--text); color: var(--ink); }
.seg button.on small { color: var(--brand-slate); }
.seg button:disabled { opacity: 0.35; cursor: default; }
.seg-grid2 { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; }
.seg-grid2.seg-grid1 { grid-template-columns: 1fr; }
/* app.js fitScenGrid: a label that overflows its column on one line puts the scenario buttons in one column */
.seg-grid2.seg-measure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg-measure button { white-space: nowrap; }
.seg-lg { background: var(--panel); backdrop-filter: blur(10px); }
.seg-lg button { padding: 0.5em 1.05em; font-size: 1em; font-weight: 640; }
#scen-seg button { padding: 0.62em 0.5em; }
#scen-seg button.on, #mode-switch button.on { background: var(--accent); color: var(--accent-ink); }
#scen-seg button.on small { color: var(--brand-ink-2); }
#set-row { margin-bottom: 6px; }
#set-seg button { padding: 0.55em 0.3em; font-size: 0.86em; }

select { width: 100%; background: var(--well); border: 1px solid var(--panel-border); border-radius: 9px; padding: 0.45em 0.6em; color: var(--text); }
select:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.pill { display: inline-block; padding: 0.35em 0.7em; border-radius: 8px; background: var(--raise); color: var(--text); font-size: 0.92em; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 560; }
.switch input { display: none; }
.switch span { width: 38px; height: 22px; border-radius: 999px; background: var(--raise-2); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform .2s, background .2s; }
.switch input:checked + span { background: var(--switch-on); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--brand-paper); }
.compare-row { margin-top: 16px; }
.compare-row .switch { white-space: nowrap; gap: 8px; }

.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 0.93em; color: var(--text-2); cursor: pointer; }
.chk input { accent-color: var(--accent); width: 15px; height: 15px; }
.chk small { color: var(--muted); }

/* ---------- KPI table ---------- */
.kpi-head { margin-bottom: 8px; }
.kpi-head h2 { margin-bottom: 2px; }
#kpi-sub { font-size: 0.9em; line-height: 1.35; }
/* with both panels on screen the left panel's caption already gives the scenario's full description: three lines here
   (the full text is the title) */
@media (min-width: 1101px) { #kpi-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } }
table.kpi { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
table.kpi col.c-lab { width: 31%; }
table.kpi col.c-val { width: 23%; }
table.kpi col.c-d, table.kpi col.c-d3 { width: 23%; }
/* no third column (the run has no reference of its own): the value and the change take its width */
table.kpi.no-c3 col.c-lab { width: 42%; }
table.kpi.no-c3 col.c-val { width: 29%; }
table.kpi.no-c3 col.c-d { width: 29%; }
table.kpi.no-c3 col.c-d3 { width: 0; }
table.kpi.no-c3 th:nth-child(4), table.kpi.no-c3 td:nth-child(4) { display: none; }
/* sticky column headers; the panel's top padding moves into the section so the header sticks flush to the panel edge */
table.kpi thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-solid); box-shadow: 0 1px 0 var(--grid); }
body.mode-scenarios #right { padding-top: 0; }
body.mode-scenarios #right > #kpi-section { padding-top: 16px; }
table.kpi th { font-size: 0.7em; letter-spacing: 0.01em; color: var(--muted); font-weight: 600; padding: 4px 0 6px; text-align: left; vertical-align: bottom; white-space: normal !important; line-height: 1.2; }
table.kpi th .th-main { display: block; }
table.kpi th .th-sub { display: block; font-size: 0.86em; text-transform: none; letter-spacing: 0; font-weight: 450; margin-top: 1px; }
table.kpi td { padding: 5px 0; border-top: 1px solid var(--grid); font-size: 0.95em; }
table.kpi td.lab { color: var(--text-2); padding-right: 6px; line-height: 1.2; }
table.kpi td.val { font-weight: 660; font-size: 1.05em; }
/* the unit after a value (app.js fmtVal) */
table.kpi td.val .u { font-size: 0.74em; font-weight: 500; color: var(--text-2); margin-left: 0.25em; }
table.kpi .num { text-align: right; padding-left: 4px; white-space: nowrap; }
table.kpi tr.grp td { border-top: 0; padding: 12px 0 2px; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); font-weight: 650; }
.d { font-weight: 600; font-size: 0.92em; }
.d.good { color: var(--good-text); }
.d.bad { color: var(--bad-text-2); }
.d.neu { color: var(--text-2); }
.d.none { color: var(--muted); font-weight: 450; }
/* a word in place of a change ("none in base") wraps inside its column */
table.kpi .d.none { display: inline-block; white-space: normal; line-height: 1.15; }
/* the right panel is 340 px wide up to 1440 px, and a phone's sheet about as narrow: smaller changes there, so
   "▲+1,039 %" stays inside its cell */
@media (max-width: 1600px) {
  table.kpi .d { font-size: 0.86em; }
}
.d i { font-style: normal; font-size: 0.75em; margin-right: 2px; }

/* ---------- capacity ---------- */
.case-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.case-list button { text-align: left; background: var(--raise); border: 1px solid transparent; border-radius: 9px; padding: 0.45em 0.6em; cursor: pointer; color: var(--text-2); font-weight: 580; font-size: 0.9em; line-height: 1.2; transition: background .18s, border-color .18s, color .18s; }
.case-list button:hover { color: var(--text); background: var(--raise-2); }
.case-list button.on { border-color: rgba(var(--case-rgb), 0.7); background: rgba(var(--case-rgb), 0.13); color: var(--text); }
#case-desc { font-size: 0.86em; margin-top: 8px; min-height: 2.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.underlay-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.92em; }
.underlay-row label { min-width: 7.6em; white-space: nowrap; }
body.mode-capacity .for-scenarios-inline { display: none; }
body.mode-scenarios .underlay-row.for-capacity { display: none; }
.replay { display: flex; align-items: center; gap: 10px; }
.replay input { flex: 1; }
.iter-label { min-width: 4.4em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 620; }
.iter-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.stat { background: var(--raise); border-radius: 10px; padding: 8px 10px; }
.stat .k { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.28em; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .s { font-size: 0.8em; color: var(--text-2); }
.mini-chart { margin-top: 10px; height: clamp(84px, 9.5vh, 112px); position: relative; }
.iter-note { margin-top: 4px; font-size: 0.78em; gap: 2px 12px; }
.iter-note:empty { display: none; }
.series-legend .key.dash { height: 0; background: none; border-top: 2px dashed; width: 14px; }

#cmp-card table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
#cmp-card col.c-lab { width: 33%; }
#cmp-card th { font-size: 0.72em; font-weight: 640; color: var(--text-2); text-align: right; padding: 0 0 8px 6px; vertical-align: bottom; line-height: 1.25; }
#cmp-card th:first-child { text-align: left; padding-left: 0; }
#cmp-card th .sw { display: block; width: 18px; height: 3px; border-radius: 2px; margin: 0 0 5px auto; }
#cmp-card td { padding: 3px 0 3px 6px; border-top: 1px solid var(--grid); text-align: right; font-size: 0.92em; white-space: nowrap; }
#cmp-card td:first-child { text-align: left; padding-left: 0; color: var(--text-2); white-space: normal; }
#cmp-card tr.big td { font-size: 1.12em; font-weight: 700; }
#cmp-card tr.big2 td { font-weight: 650; }
#cmp-card sup.over { font-size: 0.72em; line-height: 0; vertical-align: 0.5em; color: var(--bad-text); font-weight: 650; margin-left: 1px; }
#cmp-card tr.sub td { border-top: 0; padding-top: 0; font-size: 0.8em; color: var(--muted); }
#cmp-card tr.grp td { border-top: 0; padding: 9px 0 2px; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 650; white-space: nowrap; }
#cmp-card .lgd { text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
#cmp-card .lgd .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-left: 4px; }
#cmp-card .lgd .dot:first-child { margin-left: 0; }
#cmp-card td.col-on { background: rgba(255, 255, 255, 0.04); }
.cmp-note { margin: 8px 0 0; font-size: 0.8em; color: var(--text-2); line-height: 1.35; }
#compare-note { margin-top: 8px; }
.ratio { display: inline-flex; align-items: center; gap: 5px; font-weight: 620; }
.ratio .dot { width: 8px; height: 8px; border-radius: 50%; }
.ratio .lbl { font-size: 0.78em; color: var(--muted); font-weight: 500; }

/* ---------- charts ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chips button { background: var(--raise); border: 1px solid transparent; border-radius: 999px; padding: 0.22em 0.62em; font-size: 0.8em; color: var(--text-2); cursor: pointer; font-weight: 560; }
.chips button:hover { color: var(--text); }
.chips button.on { background: var(--text); color: var(--ink); }
.chart { position: relative; height: clamp(190px, 23vh, 280px); }
/* the capacity act's right panel also holds the compare card: the chart is lower so it ends above the fold at 1080 px */
body.mode-capacity .chart { height: clamp(170px, 19vh, 250px); }
.chart svg, .mini-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.axis text, .chart-text { font-size: 11px; font-family: var(--font); }
.axis text, .chart-text:not([fill]):not([style]) { fill: var(--muted); }   /* a fill on a caption (n crit, storage) wins */
.axis-title { fill: var(--text-2); font-size: 11.5px; font-weight: 560; font-family: var(--font); }
.series-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 0.86em; color: var(--text-2); }
.series-legend .it { display: inline-flex; align-items: center; gap: 6px; }
.series-legend .key { width: 18px; height: 3px; border-radius: 2px; }
.series-legend .x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 1.05em; line-height: 1; }
.series-legend .x:hover { color: var(--text); }
.series-legend .branch { color: var(--muted); font-size: 0.92em; }
.series-legend .artefact { color: var(--text-2); }
.mfd-add-row { margin-top: 8px; }
.series-keys { margin: 0 0 4px; gap: 2px 10px; font-size: 0.82em; }
.series-keys:empty { display: none; }
.mfd-add-row select { width: auto; max-width: 62%; font-size: 0.86em; }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.85em; }
#mfd-collapse { padding: 8px 10px; margin: -8px -10px; }
.link-btn:hover { color: var(--text); }

/* ---------- legend ---------- */
.panel-lite { background: var(--scrim); border: 1px solid var(--panel-border); border-radius: 12px; backdrop-filter: blur(10px); padding: 10px 14px 10px; }
#legend { left: calc(var(--left-w) + 2 * var(--gap)); bottom: calc(var(--timebar-h) + 2 * var(--gap) + 10px); font-size: 0.84em; color: var(--text-2); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; max-width: calc(100vw - var(--left-w) - var(--right-w) - 4 * var(--gap)); padding: 10px 14px; }
#legend .lg-t { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 650; white-space: nowrap; }
#legend .lg-v { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
#legend .it { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#legend .ramp { height: 8px; border-radius: 4px; width: 130px; flex: none; }
#legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
#legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#legend .wbar { background: var(--brand-muted); border-radius: 3px; flex: none; width: 22px; }

/* ---------- time bar ---------- */
#timebar { left: var(--gap); right: var(--gap); bottom: calc(var(--gap) + 10px); height: var(--timebar-h); display: flex; align-items: center; gap: 16px; padding: 0 18px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); backdrop-filter: blur(14px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--text); color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .15s; }
.icon-btn:hover { transform: scale(1.06); }
.icon-btn.big { width: 52px; height: 52px; }
.icon-btn svg { width: 55%; height: 55%; fill: currentColor; }
.icon-btn .i-pause { display: none; }
.icon-btn.playing .i-play { display: none; }
.icon-btn.playing .i-pause { display: inline; }
.clock { width: 7.3em; flex: none; }
#clock-time { font-size: clamp(24px, 1.9vw, 36px); font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; }
#clock-hour { font-size: 0.8em; margin-top: 4px; white-space: nowrap; }
#time-track { position: relative; flex: 1; height: 100%; min-width: 120px; }
#profile-chart { position: absolute; left: 0; right: 0; top: 10px; bottom: 26px; }
#profile-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
#time-slider { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; margin: 0; }
#hour-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; font-size: 0.74em; color: var(--muted); font-variant-numeric: tabular-nums; }
#hour-ticks span { position: absolute; transform: translateX(-50%); }
.speed { display: flex; flex-direction: column; gap: 2px; font-size: 0.8em; flex: none; }
.speed select { width: auto; font-size: 1.1em; }
#cams { flex: none; }
#cams button { padding: 0.5em 0.8em; font-size: 0.9em; white-space: nowrap; }

input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--brand-paper); border: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.25); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-paper); border: 3px solid var(--accent); }

#attribution { right: var(--gap); bottom: 4px; font-size: 0.78em; color: var(--text-2); text-shadow: 0 1px 4px #000; background: var(--scrim); padding: 1px 8px; border-radius: 6px; }
#attribution a { text-decoration: none; }
#attribution .dsc-short { display: none; }
@media (max-width: 900px) { #attribution .dsc-short { display: inline; } #attribution .dsc-short ~ .dsc-long, #attribution .dsc-long:has(+ .dsc-short) { display: none; } #attribution:has(.dsc-short) #data-attr { display: none; } }
#attribution a:hover { text-decoration: underline; }
#open-full { top: var(--gap); right: var(--gap); padding: 0.45em 0.85em; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-border); backdrop-filter: blur(10px); color: var(--text); text-decoration: none; font-weight: 620; font-size: 0.9em; }
#open-full:hover { border-color: var(--accent-line); }

/* ---------- narrow screens: bar that opens the panels ---------- */
#mobile-bar { display: none; }

/* ---------- tooltip ---------- */
#tooltip { position: fixed; z-index: 50; pointer-events: none; background: rgba(11, 18, 25, 0.95); border: 1px solid var(--brand-line); border-radius: 10px; padding: 9px 12px; font-size: 0.88em; line-height: 1.45; color: var(--text); max-width: min(320px, calc(100vw - 32px)); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5); }
#tooltip .tt-h { font-weight: 680; margin-bottom: 3px; }
#tooltip .tt-r { display: flex; justify-content: space-between; gap: 18px; color: var(--text-2); }
#tooltip .tt-r b { color: var(--text); font-weight: 620; font-variant-numeric: tabular-nums; }
.deck-tooltip { font-family: var(--font) !important; }

/* ---------- loading, and the "data not available" state ---------- */
#loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at center, var(--brand-ink-2) 0%, var(--brand-ink) 80%); transition: opacity .8s ease; padding: 16px; }
#loading.done { opacity: 0; pointer-events: none; }
/* the title, the disclaimer and the attribution stay readable above the loading screen */
body.loading #titlebar, body.loading #attribution { z-index: 101; }
body.no-data #titlebar { display: none; }
.ld-inner { text-align: center; width: min(460px, 100%); }
.ld-brand { display: none; justify-content: center; }   /* the header shows the brandmark above the loading screen; only when it hides (no data) does this one stand in */
body.no-data .ld-brand { display: flex; }
.ld-title { font-size: 2.2em; font-weight: 740; margin: 6px 0 18px; letter-spacing: -0.02em; line-height: 1.15; }
.ld-head { font-size: 1.15em; font-weight: 680; margin: -4px 0 6px; color: var(--warn-text); }
.ld-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#ld-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-accent), var(--brand-secondary)); transition: width .3s ease; }
#ld-msg { margin-top: 12px; color: var(--muted); font-size: 0.92em; min-height: 1.4em; line-height: 1.45; }
body.no-data #ld-msg { color: var(--text-2); }
#ld-msg.err { color: var(--bad-text); white-space: pre-wrap; text-align: left; }
.ld-back { display: inline-block; margin-top: 18px; padding: 0.5em 1em; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--raise); color: var(--text); text-decoration: none; font-weight: 600; }
.ld-back:hover { border-color: var(--accent-line); }

/* ---------- embedded in an iframe (?embed=1) ---------- */
body.embed #titlebar { max-width: calc(100vw - 2 * var(--gap) - 170px); }
body.embed #titlebar h1 { font-size: clamp(16px, 2.6vw, 24px); }
body.embed #titlebar .subtitle { font-size: clamp(12px, 1.7vw, 15px); }
body.embed:not(.ui-hidden) #topright { top: calc(var(--gap) + 44px); }
body.embed.ui-hidden #attribution { font-size: 12px; }
body.ui-hidden #data-badge { top: auto; bottom: 34px; left: var(--gap); right: auto; }

/* ---------- medium screens ---------- */
@media (max-width: 1180px) {
  #cams button { font-size: 0.8em; padding: 0.45em 0.55em; }
  #stories button { font-size: 0.78em; }
  .speed label { display: none; }
}

/* ---------- up to 1100 px: the panels become sheets over the map (keep 1100 px in step with SHEETS in app.js) ---------- */
@media (max-width: 1100px) {
  #stories { display: none !important; }
  #left, #right { display: none; }
  #mobile-bar { display: flex; gap: 6px; left: var(--gap); bottom: calc(var(--timebar-h) + var(--gap) + 18px); }
  #mobile-bar button { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 0.5em 0.9em; font-weight: 620; color: var(--text-2); backdrop-filter: blur(10px); cursor: pointer; }
  #mobile-bar button.on { background: var(--text); color: var(--ink); }
  body.sheet-left #left, body.sheet-right #right { display: block; top: auto; bottom: calc(var(--timebar-h) + var(--gap) + 64px); max-height: min(64vh, calc(100vh - var(--timebar-h) - 2 * var(--gap) - 150px)); z-index: 6; }
  body.sheet-left #left { left: var(--gap); right: auto; width: min(420px, calc(100vw - 2 * var(--gap))); }
  body.sheet-right #right { right: var(--gap); left: auto; width: min(480px, calc(100vw - 2 * var(--gap))); }
  .sheet-close { display: block; margin: -6px -4px 4px auto; border-radius: 8px; padding: 4px 8px; }
  body.mode-scenarios #right { padding-top: 12px; }
  body.mode-scenarios #right > #kpi-section { padding-top: 0; }
  table.kpi thead th { position: static; }
  #story-caption { left: 50%; max-width: calc(100vw - 2 * var(--gap)); }
  #legend { left: var(--gap); bottom: calc(var(--timebar-h) + var(--gap) + 64px); max-width: calc(100vw - 2 * var(--gap)); }
  /* an open sheet would cover the story caption and the legend (a tall caption reaches into it): hide both until it
     closes; the story keeps its step */
  body.sheet-left #legend, body.sheet-right #legend,
  body.sheet-left #story-caption, body.sheet-right #story-caption { display: none; }
}

/* ---------- phones and small embeds ---------- */
@media (max-width: 900px) {
  :root { --gap: 16px; --timebar-h: 64px; --fs: 14px; }
  #titlebar { top: 10px; left: 6px; max-width: calc(100vw - var(--gap) - 6px - 118px); padding: 6px 10px 7px; }
  #titlebar .subtitle { display: none; }
  #titlebar h1 { font-size: clamp(17px, 4.6vw, 22px); }
  #titlebar .subtitle { font-size: 12.5px; }
  #titlebar .brandmark { margin-bottom: 2px; }
  #data-badge { top: auto; bottom: calc(var(--timebar-h) + var(--gap) + 64px); left: var(--gap); right: var(--gap); }
  #legend, #cams, .speed { display: none !important; }
  /* the story caption sits under the title, full width; the help button moves to the top right corner */
  #story-caption { top: 92px; left: var(--gap); right: var(--gap); transform: none; width: auto; max-width: none; padding: 8px 30px 10px; font-size: 13px; animation: none; }
  #story-caption .sc-title { font-size: 16px; }
  #story-caption .sc-text { font-size: 13px; line-height: 1.38; }
  #topright { top: auto; right: var(--gap); bottom: calc(var(--timebar-h) + var(--gap) + 18px); flex-direction: row; }
  #help-btn { position: fixed; top: 14px; right: var(--gap); width: 34px; height: 34px; }
  /* the tour starts from the top right, next to help; the bottom row keeps the panels and the mode switch */
  #tour-btn { position: fixed; top: 14px; right: calc(var(--gap) + 42px); height: 34px; padding: 0 0.95em !important; }
  body.embed #help-btn, body.embed #tour-btn { top: 58px; }
  #help { top: 56px; bottom: calc(var(--timebar-h) + var(--gap) + 64px); max-height: none; left: var(--gap); right: var(--gap); width: auto; }
  #mode-switch .long { display: none; }
  #mode-switch .short { display: inline; }
  .seg-lg button { padding: 0.45em 0.8em; font-size: 0.95em; }
  body.sheet-left #left, body.sheet-right #right { left: var(--gap); right: var(--gap); width: auto; max-height: min(60vh, calc(100vh - var(--timebar-h) - 2 * var(--gap) - 150px)); }
  #timebar { gap: 10px; padding: 0 12px; bottom: calc(var(--gap) + 8px); }
  .icon-btn.big { width: 44px; height: 44px; }
  .clock { width: 4.4em; }
  #clock-time { font-size: 22px; }
  #clock-hour { display: none; }
  #attribution { left: var(--gap); right: var(--gap); bottom: 2px; font-size: 0.7em; text-align: right; padding: 0 6px; }
  body.ui-hidden #attribution { font-size: 12px; }
  .case-list { grid-template-columns: 1fr; }
}
/* phones: 44 px touch targets */
@media (max-width: 900px) {
  #mobile-bar button, #mode-switch button { min-height: 44px; }
  #help-btn { width: 44px; height: 44px; top: 10px; }
  #tour-btn { height: 44px; top: 10px; right: calc(var(--gap) + 52px); }
  #titlebar { max-width: calc(100vw - var(--gap) - 6px - 136px); }
}
@media (prefers-reduced-motion: reduce) {
  #story-caption { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (max-width: 380px) {
  #mobile-bar button { padding: 0.45em 0.7em; }
  .seg-lg button { padding: 0.45em 0.65em; }
}