/* Story page: chat left, map right, a year clock on top. A copy of site/children-in-the-path/story/story.css;
   tokens come from ../../lib/site.css. Berlin adds the value ramp (--v1 … --v5, the blues of the analysis page). */
:root {
  --v1: #dbe3f7; --v2: #b3c3ea; --v3: #86a0dd; --v4: #5a7dd0; --v5: #2d4aa8;
  --storm-1: #f6eadb; --storm-2: #ecd2b0; --storm-3: #dcaf7d; --storm-4: #c4864a; --storm-5: #9a5b22;
  --storm-line: #8a5418;
  /* observed water (flood scenarios): a restrained teal-leaning blue, kept apart from the primary/q ramp */
  --flood-1: #d3e7ef; --flood-2: #8fc0d6; --flood-3: #3f88ad; --flood-line: #1f6a8f; --flood-prev: #4d7f99;
  --chat-w: 520px;
}

body.story { min-height: 100vh; }
.stage { flex: none; height: calc(100vh - 57px); min-height: 520px; display: grid; grid-template-columns: var(--chat-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

/* ------------------------------------------------------------------ bar */
.bar { grid-column: 1 / -1; display: grid; grid-template-columns: var(--chat-w) minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--p-line); background: var(--p-bg); }
.bar-title { padding: 10px 20px; border-inline-end: 1px solid var(--p-line); min-width: 0; }
.bar { position: relative; }
.scen { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; }
.scen a { font: 500 10.5px/1.2 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-2); text-decoration: none; border: 1px solid var(--p-line-soft); border-inline-start-width: 0; padding: 3px 7px; background: var(--p-paper); }
.scen a:first-child { border-inline-start-width: 1px; }
.scen a:hover { color: var(--p-ink); background: var(--p-bg-soft); }
.scen a[aria-current="page"] { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-bg); }
.bar-title h1 { font-size: 22px; letter-spacing: -0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock { padding: 8px 20px; min-width: 0; }
.clock-main { font: 500 24px/1.2 var(--p-mono); letter-spacing: -0.01em; color: var(--p-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-sep { color: var(--p-ink-3); margin: 0 4px; }
.clock-adv { color: var(--p-ink-2); }
.clock-adv b { font-weight: 600; color: var(--storm-line); display: inline-block; min-width: 3ch; }
.clock-rule { font: 400 11px/1.4 var(--p-mono); letter-spacing: 0.02em; color: var(--p-ink-3); margin-top: 2px; }
.clock[data-state="none"] .clock-main, .clock[data-state="after"] .clock-main { color: var(--p-ink-3); font-size: 18px; }
.clock[data-state="none"] .clock-adv, .clock[data-state="after"] .clock-adv, .clock[data-state="none"] .adv-sep, .clock[data-state="after"] .adv-sep { display: none; }
.clock[data-state="after"] .clock-rule { visibility: hidden; }
.clock.ticking .clock-main { color: var(--storm-line); }
.clock .flash { animation: adv-flash 0.7s ease-out; }
/* date clocks (flood scenarios): no hour, the product in force instead of an advisory */
.clock[data-mode="date"][data-state="set"] .clock-time, .clock[data-mode="date"][data-state="set"] .time-sep { display: none; }
.clock[data-mode="date"] .clock-adv b { color: var(--flood-line); min-width: 0; }
.clock[data-mode="date"].ticking .clock-main { color: var(--flood-line); }
.clock[data-mode="date"] .flash { animation: date-flash 0.7s ease-out; }
@keyframes date-flash { from { background: var(--flood-1); } to { background: transparent; } }
@keyframes adv-flash { from { background: var(--storm-2); } to { background: transparent; } }

.rail { position: absolute; z-index: 5; top: 12px; left: 12px; right: 60px; display: flex; flex-wrap: wrap; gap: 0; pointer-events: none; }
.rail button { pointer-events: auto; }
.rail button { position: relative; border: 1px solid var(--p-line-soft); border-inline-start-width: 0; background: var(--p-paper); padding: 6px 9px; font: 500 11px/1.2 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-2); cursor: pointer; white-space: nowrap; }
.rail button:first-child { border-inline-start-width: 1px; }
.rail button b { font-weight: 600; color: var(--p-ink-3); margin-inline-end: 5px; }
.rail button:hover { color: var(--p-ink); background: var(--p-bg-soft); }
.rail button.done { color: var(--p-ink); }
.rail button.on { background: var(--p-primary); border-color: var(--p-primary); color: var(--p-on-primary); }
.rail button.on b { color: rgba(255, 255, 255, 0.75); }
.rail button.mock::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; background: var(--p-warn); }

/* ----------------------------------------------------------------- chat */
.chat { display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--p-line); background: var(--p-bg); }
.msgs { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 8px; scroll-behavior: auto; }
.msg { margin: 0 0 14px; font-size: 15px; line-height: 1.55; animation: rise 0.35s ease; max-width: var(--p-measure); }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.msg .who { display: inline-block; margin-bottom: 4px; border: 0; padding: 0; color: var(--p-ink-3); }
.msg.user { margin-inline-start: auto; text-align: start; max-width: 42ch; }
.msg.user .b { background: var(--p-primary); color: var(--p-on-primary); padding: 9px 13px; font-weight: 500; }
.msg.user .who { display: block; text-align: end; }
.msg.agent .b { color: var(--p-ink); }
.msg.agent .b b { font-weight: 700; }
.cur { display: inline-block; width: 7px; height: 14px; background: var(--p-primary); margin-inline-start: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { font: 400 12px/1.4 var(--p-mono); color: var(--p-ink-3); padding: 0 0 12px; letter-spacing: 0.02em; }
.typing::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--p-primary); margin-inline-end: 8px; vertical-align: 1px; animation: shell-pulse 1s ease-in-out infinite; }
.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; font: 500 11px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-3); }
.divider::after { content: ""; flex: 1; border-top: 1px solid var(--p-line-soft); }
.divider .mockbadge { margin-inline-start: 4px; }
.mockbadge { display: inline-block; font: 500 10px/1 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-warn-ink); border: 1px solid currentColor; padding: 3px 5px; }

/* tool cards: the machine register, quieter than the agent's voice */
.tool { margin: 0 0 12px; border: 1px solid var(--p-line-soft); border-inline-start: 2px solid var(--p-ink-3); background: var(--p-paper); font: 400 11.5px/1.5 var(--p-mono); animation: rise 0.3s ease; }
.tool .cmd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: none; border: 0; cursor: pointer; text-align: start; color: var(--p-ink-2); font: inherit; }
.tool .cmd:hover { background: var(--p-bg-soft); }
.tool .ttag { flex: none; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-primary-ink); border: 1px solid var(--p-line-soft); padding: 1px 6px; }
.tool .lbl { flex: 1; min-width: 0; color: var(--p-ink); font-weight: 500; }
.tool .chev { flex: none; color: var(--p-primary); transition: transform 0.15s; }
.tool.open .chev { transform: rotate(180deg); }
.tool .sql { display: none; margin: 0; border: 0; border-top: 1px solid var(--p-line-soft); font-size: 11px; max-height: 260px; white-space: pre-wrap; word-break: break-word; }
.tool.open .sql { display: block; }
.tool .res { margin: 0; padding: 7px 10px 7px 26px; background: none; border: 0; border-top: 1px solid var(--p-line-soft); color: var(--p-ink-2); font-size: 11.5px; white-space: pre; overflow-x: auto; position: relative; }
.tool .res::before { content: "→"; position: absolute; left: 10px; color: var(--p-ink-3); }
.tool .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--p-line-soft); color: var(--p-ink-3); font-size: 10.5px; }
.tool .meta a { color: var(--p-primary); }
.tool .meta .fail { color: var(--p-warn-ink); }
.tool .res.raw { white-space: pre-wrap; word-break: break-word; }
.tool .rerun { margin-inline-start: auto; border: 1px solid var(--p-success); color: var(--p-success); background: var(--p-paper); font: 500 10px/1.2 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; cursor: pointer; }
.tool .rerun:hover { background: var(--p-bg-soft); }
.tool .rerun:disabled { opacity: 0.6; cursor: progress; }
.tool .cmp { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--p-line-soft); }
.tool .cmp > div { min-width: 0; padding: 6px 10px; }
.tool .cmp > div + div { border-top: 1px dashed var(--p-line-soft); }
.tool .cmp pre.raw { white-space: pre-wrap; word-break: break-word; }
.tool .cmp h4 { font: 500 9.5px/1.3 var(--p-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-3); margin-bottom: 3px; }
.tool .cmp pre { background: none; border: 0; padding: 0; font-size: 11px; white-space: pre; overflow-x: auto; }
.tool .cmp .browser h4 { color: var(--p-success); }
.tool .cmp .err { color: var(--p-danger); white-space: pre-wrap; }

.stat { margin: 0 10px 10px; border: 1px solid var(--p-line); border-inline-start: 3px solid var(--p-primary); padding: 8px 12px; background: var(--p-paper); animation: rise 0.35s ease; }
.stat .l { font: 400 10.5px/1.4 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-3); }
.stat .v { font: 500 22px/1.2 var(--p-mono); letter-spacing: -0.02em; color: var(--p-ink); font-variant-numeric: tabular-nums; margin: 2px 0; }
.stat .s { font: 400 10.5px/1.4 var(--p-mono); color: var(--p-ink-2); }
.msgs > .stat { margin: 0 0 12px; max-width: var(--p-measure); }

/* folded steps: the recorded evidence, one click away */
.fold { margin: 0 0 12px; max-width: var(--p-measure); border: 1px solid var(--p-line-soft); border-inline-start: 2px solid var(--p-ink-3); background: var(--p-paper); animation: rise 0.3s ease; }
.fold > summary { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; font: 400 11px/1.45 var(--p-mono); color: var(--p-ink-3); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸"; flex: none; color: var(--p-primary); transition: transform 0.15s; }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { background: var(--p-bg-soft); }
.fold .fk { flex: none; color: var(--p-ink-2); font-weight: 500; }
.fold .fl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-body { padding: 10px 10px 0; border-top: 1px solid var(--p-line-soft); }
.fold-body > * { animation: none; }
.fold-body .msg { font-size: 13.5px; color: var(--p-ink-2); }

/* gaps: honest caveats, said out loud — not errors */
.gap { margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--p-line-soft); border-inline-start: 3px solid var(--p-ink-3); background: var(--p-bg-soft); max-width: var(--p-measure); animation: rise 0.35s ease; }
.gap .k { font: 500 10px/1.3 var(--p-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-3); }
.gap h4 { font-size: 14.5px; margin: 2px 0 3px; }
.gap p { font-size: 13.5px; line-height: 1.5; color: var(--p-ink-2); margin: 0; }

.assess { margin: 4px 0 16px; border: 1px solid var(--p-line); background: var(--p-paper); padding: 12px 14px; animation: rise 0.4s ease; }
.assess .k { font: 500 10.5px/1.3 var(--p-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-3); }
.assess .vd { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 4px 0 10px; letter-spacing: -0.01em; }
.factor { display: grid; grid-template-columns: 9px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--p-line-soft); font-size: 13.5px; }
.factor .fl { color: var(--p-ink-2); }
.factor .fv { font-family: var(--p-mono); font-size: 12.5px; color: var(--p-ink); text-align: end; font-variant-numeric: tabular-nums; }
.factor .d { flex: none; width: 9px; height: 9px; border: 1px solid var(--p-ink-3); align-self: center; }
.d.s-high { background: var(--storm-5); border-color: var(--storm-5); }
.d.s-mid { background: var(--storm-3); border-color: var(--storm-4); }
.d.s-low { background: var(--p-paper); border-color: var(--p-ink-2); }
.d.s-gap { background: repeating-linear-gradient(45deg, var(--p-ink-3) 0 1px, transparent 1px 3px); }
.assess .note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--p-line-soft); font-size: 12.5px; color: var(--p-ink-2); line-height: 1.5; }

/* pipeline cards */
.pipes { margin: 0 0 14px; border: 1px solid var(--p-line); background: var(--p-paper); animation: rise 0.35s ease; }
.pipes-head { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font: 500 10.5px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-3); border-bottom: 1px solid var(--p-line); }
.pipe { border-bottom: 1px solid var(--p-line-soft); }
.pipe:last-child { border-bottom: 0; }
.pipe-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 110px 86px; gap: 10px; align-items: center; padding: 7px 10px; background: none; border: 0; text-align: start; cursor: pointer; color: inherit; font: inherit; }
.pipe-row:hover { background: var(--p-bg-soft); }
.pipe-name { min-width: 0; }
.pipe-name b { display: block; font-size: 13px; line-height: 1.3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-name span { display: block; font: 400 10.5px/1.3 var(--p-mono); color: var(--p-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { display: flex; height: 8px; gap: 1px; }
.mini i { display: block; min-width: 2px; background: var(--p-line-soft); transition: background 0.2s; }
.mini i.lit { background: var(--p-primary); }
.pipe-t { font: 500 11px/1.2 var(--p-mono); text-align: end; color: var(--p-ink-2); font-variant-numeric: tabular-nums; }
.pipe.published .pipe-t { color: var(--p-success); }
.pipe-body { display: none; padding: 4px 10px 10px; }
.pipe.open .pipe-body { display: block; }
.pipe.open .pipe-row { background: var(--p-bg-soft); }
.pipe-meta { font: 400 10.5px/1.5 var(--p-mono); color: var(--p-ink-3); margin: 2px 0 8px; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.node:nth-child(5) { border-inline-start-width: 1px; }
.node:nth-child(n+5) { border-top-width: 0; }
.node { position: relative; padding: 6px 4px 6px 6px; border: 1px solid var(--p-line-soft); border-inline-start-width: 0; background: var(--p-paper); min-width: 0; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.node:first-child { border-inline-start-width: 1px; }
.node .nn { font: 500 9.5px/1.2 var(--p-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .ns { font: 500 12px/1.3 var(--p-mono); color: var(--p-ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; }
.node .fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--p-primary); }
.node.active { background: var(--p-bg-soft); }
.node.active .nn, .node.active .ns { color: var(--p-ink); }
.node.done { background: var(--q1); border-color: var(--q2); }
.node.done .nn { color: var(--p-primary-ink); }
.node.done .ns { color: var(--p-ink); }
.node.done .fill { width: 100%; }
.pipe-detail { font: 400 11px/1.45 var(--p-mono); color: var(--p-ink-2); min-height: 2.9em; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flow-key { font: 400 10px/1.4 var(--p-mono); color: var(--p-ink-3); margin-top: 4px; }
.node.shared { background: repeating-linear-gradient(135deg, var(--p-bg-soft) 0 3px, var(--p-paper) 3px 6px); }
.node.shared.done { background: var(--p-bg-soft); border-color: var(--p-line-soft); }
.node.shared.done .nn, .node.shared.done .ns { color: var(--p-ink-3); }
.pipes-note { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--p-line-soft) !important; }
.pipe-note { font: 400 10.5px/1.5 var(--p-mono); color: var(--p-ink-3); padding: 7px 10px; margin: 0; }
.pipe-note { padding: 6px 0 0; }
.outputs .ok { color: var(--p-success); border-color: var(--p-success); }
.pipe mark { background: var(--storm-2); color: var(--p-ink); }
.pipe pre.prose { white-space: pre-wrap; font-size: 11px; }
.outputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; opacity: 0; transition: opacity 0.4s; }
.outputs.on { opacity: 1; }
.outputs span, .outputs a { font: 500 10.5px/1.2 var(--p-mono); letter-spacing: 0.02em; padding: 4px 7px; border: 1px solid var(--p-line-soft); color: var(--p-ink); background: var(--p-paper); }
.outputs a { border-color: var(--p-primary); color: var(--p-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe details.sql { margin: 8px 0 0; }
.pipe details.sql pre { font-size: 10.5px; max-height: 220px; }

/* compose */
.compose { border-top: 1px solid var(--p-line); padding: 10px 20px 10px; background: var(--p-bg); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips-row:empty { display: none; }
.chip-q { border: 1px solid var(--p-primary); background: var(--p-paper); color: var(--p-primary-ink); padding: 7px 11px; font: 500 13.5px/1.35 var(--p-sans); text-align: start; cursor: pointer; max-width: 100%; }
.chip-q:hover { background: var(--p-primary); color: var(--p-on-primary); }
.chip-q.replay { border-color: var(--p-line-soft); color: var(--p-ink-2); font: 500 11px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 8px 10px; }
.chip-q.replay:hover { background: var(--p-bg-soft); color: var(--p-ink); }
.chip-q small { display: block; font: 500 10px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; margin-bottom: 2px; }
.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.seg { display: flex; align-items: center; }
.seg-l { font: 400 10.5px/1 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-3); margin-inline-end: 6px; }
.seg button { border: 1px solid var(--p-line-soft); border-inline-start-width: 0; background: var(--p-paper); padding: 4px 8px; font: 500 10.5px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-2); cursor: pointer; }
.seg .seg-l + button, .seg button:first-child { border-inline-start-width: 1px; }
.seg button:hover { color: var(--p-ink); background: var(--p-bg-soft); }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-bg); }
.controls-row .status { margin: 0 0 0 auto; }
.controls-row .status:empty { display: none; }
body.paused .msgs { box-shadow: inset 0 -2px 0 var(--p-warn); }

/* ------------------------------------------------------------------ map */
.map-side { position: relative; min-height: 0; min-width: 0; }
.stage-map.map-frame { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.legend .row { display: flex; align-items: center; gap: 7px; }
.legend .lt { min-width: 0; }
.legend .row + .row { margin-top: 2px; }
.legend .sw { flex: none; display: inline-block; width: 14px; height: 10px; border: 1px solid var(--p-line); }
.legend .sw.line { height: 0; border: 0; border-top: 2px solid var(--p-ink-2); }
.legend .sw.dash { height: 0; border: 0; border-top: 2px dashed var(--p-ink-3); }
.legend .sw.dot { width: 9px; height: 9px; border-radius: 50%; }
.legend .ramp { display: inline-flex; }
.legend .ramp i { width: 10px; height: 10px; display: block; }
.legend .lt { font: 400 11px/1.4 var(--p-mono); color: var(--p-ink-2); }
.callout { font: 500 11px/1.2 var(--p-mono); letter-spacing: 0.02em; color: var(--p-ink); background: rgba(252, 252, 250, 0.96); border: 1px solid var(--p-ink); padding: 4px 7px; white-space: nowrap; }
.callout.warn { border-color: var(--storm-line); color: var(--storm-line); }
.callout.info { border-color: var(--p-primary); color: var(--p-primary-ink); }
.callout .cm { font-style: italic; font-weight: 400; }
.callout::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 7px; background: currentColor; }
.maplibregl-popup-content { font: 12px/1.45 var(--p-sans); padding: 8px 10px; }
.maplibregl-popup-content b { font-family: var(--p-mono); font-weight: 500; }

/* -------------------------------------------------------- small screens */
@media (max-width: 1100px) { :root { --chat-w: 440px; } }
@media (max-width: 860px) {
  .stage { display: flex; flex-direction: column; height: auto; }
  .bar { grid-template-columns: 1fr; }
  .bar-title { border-inline-end: 0; border-bottom: 1px solid var(--p-line-soft); padding: 8px 16px; }
  .bar-title h1 { font-size: 19px; }
  .scen { top: 8px; right: 16px; transform: none; }
  .bar-title { padding-inline-end: 150px; }
  .clock { padding: 8px 16px; }
  .clock-main { font-size: 15px; white-space: normal; }
  .rail { top: 8px; left: 8px; right: 50px; overflow-x: auto; flex-wrap: nowrap; pointer-events: auto; scrollbar-width: none; }
  .rail button span { display: inline; }
  .map-side { order: 2; height: 44vh; min-height: 280px; border-bottom: 1px solid var(--p-line); }
  .chat { order: 3; border-inline-end: 0; }
  .msgs { height: 62vh; min-height: 360px; flex: none; padding: 14px 16px 8px; }
  .compose { position: sticky; bottom: 0; padding: 8px 16px; }
  .pipe-row { grid-template-columns: minmax(0, 1fr) 70px 56px; }
  .legend { bottom: 30px; left: 8px; max-height: 46%; overflow: auto; padding: 6px 28px 6px 8px; }
  .legend .lt { font-size: 10px; }
}

/* heat scenarios: daily Tmax ramp, Météo-France vigilance colours, cool places */
:root {
  --heat-1: #fbecc0; --heat-2: #f6cf83; --heat-3: #eea657; --heat-4: #df7a3a; --heat-5: #c44c2a; --heat-6: #8f2419;
  --vig-1: #3fae49; --vig-2: #f5e22a; --vig-3: #f39200; --vig-4: #d6001c;
  --cool-park: #5f9e5a; --cool-room: #178f8f; --cool-water: #2878b8;
}
.clock-adv small.clock-src { font: 400 12px/1 var(--p-mono); color: var(--p-ink-3); letter-spacing: 0; }
.clock[data-level="1"] .clock-adv b { color: #2f8a38; }
.clock[data-level="2"] .clock-adv b { color: #9a8600; }
.clock[data-level="3"] .clock-adv b { color: #c26f00; }
.clock[data-level="4"] .clock-adv b { color: var(--vig-4); }
.clock[data-level="0"] .clock-adv b { color: var(--p-ink-2); }

/* Two entry paths: a label before each group of scene buttons */
.rail .rail-path { pointer-events: none; align-self: center; padding: 0 8px 0 14px; font: 600 10px/1.2 var(--p-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ink-3); background: none; }
.rail .rail-path:first-child { padding-inline-start: 2px; }
.rail .rail-path + button { border-inline-start-width: 1px; }

/* Help panel (H), after the Barcelona story's "how this works" */
.receipt { position: absolute; z-index: 6; top: 52px; right: 56px; width: min(720px, calc(100% - 80px)); max-height: calc(100% - 110px); overflow: auto; background: var(--p-paper); border: 1px solid var(--p-line); box-shadow: 0 8px 28px rgba(22, 23, 15, 0.16); padding: 12px 14px; animation: rise 0.25s ease; }
.receipt[hidden] { display: none; }
.receipt .r-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.receipt .r-k { font: 500 10px/1.3 var(--p-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-ink-3); }
.receipt h3 { font-size: 15px; line-height: 1.3; margin: 2px 0 0; }
.receipt .r-x { border: 1px solid var(--p-line-soft); background: var(--p-paper); width: 26px; height: 26px; font: 500 16px/1 var(--p-mono); cursor: pointer; color: var(--p-ink-2); }
.receipt .r-t { font: 500 10.5px/1.3 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink-2); margin: 10px 0 5px; }
.receipt p { font-size: 12.5px; line-height: 1.5; color: var(--p-ink-2); margin: 6px 0 8px; }
.receipt code { font: 400 11px/1.4 var(--p-mono); }
.receipt a { color: var(--p-primary); }
.receipt table.r-in { width: 100%; border-collapse: collapse; font: 400 11px/1.4 var(--p-mono); margin: 4px 0 6px; }
.receipt table.r-in td { border-bottom: 1px solid var(--p-line-soft); padding: 3px 4px; vertical-align: top; }
.receipt table.r-in td:first-child { white-space: nowrap; color: var(--p-ink); width: 1%; padding-inline-end: 12px; }
.hw-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--p-line-soft); margin: 8px 0 6px; }
.hw-kpis > div { padding: 6px 8px; border-inline-start: 1px solid var(--p-line-soft); min-width: 0; }
.hw-kpis > div:first-child { border-inline-start: 0; }
.hw-kpis .l { font: 400 9.5px/1.3 var(--p-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ink-3); }
.hw-kpis .v { font: 500 17px/1.25 var(--p-mono); color: var(--p-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hw-cats { margin: 0 0 8px; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.5; color: var(--p-ink-2); }
.hw-note { font-size: 11.5px; color: var(--p-ink-3); }
.hw-flow { display: flex; align-items: stretch; gap: 6px; margin: 6px 0 2px; }
.hw-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hw-h { font: 500 9.5px/1.3 var(--p-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-ink-3); min-height: 2.6em; }
.hw-box { border: 1px solid var(--p-line-soft); border-inline-start: 3px solid var(--p-primary); background: var(--p-bg-soft); padding: 5px 7px; font-size: 12px; line-height: 1.3; }
.hw-box b { display: block; font-weight: 600; color: var(--p-ink); }
.hw-box span { display: block; color: var(--p-ink-2); font-size: 11.5px; }
.hw-arrow { flex: none; align-self: center; font: 500 16px/1 var(--p-mono); color: var(--p-ink-3); }
@media (max-width: 760px) { .hw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hw-flow { flex-direction: column; } .hw-arrow { transform: rotate(90deg); } }


/* Path tabs on the rail: the story (default) | the data and the pipeline; only the selected path's scenes follow */
.rail .rail-tabs { pointer-events: auto; display: flex; margin-inline-end: 10px; border: 1px solid var(--p-ink); background: var(--p-paper); }
.rail .rail-tabs .tab { border: 0; border-inline-start: 1px solid var(--p-ink); padding: 6px 10px; font: 600 11px/1.2 var(--p-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-ink); background: var(--p-paper); cursor: pointer; }
.rail .rail-tabs .tab:first-child { border-inline-start: 0; }
.rail .rail-tabs .tab.on { background: var(--p-ink); color: var(--p-paper); }
.rail .rail-tabs + button.scene { border-inline-start-width: 1px; }

/* Berlin: the value ramp in the legend, one swatch per class with its range under it */
.legend .vramp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 2px 0 6px; }
.legend .vramp span { display: flex; flex-direction: column; gap: 2px; font: 400 10px/1.2 var(--p-mono); color: var(--p-ink-2); white-space: nowrap; }
.legend .vramp i { display: block; height: 9px; }
.pp-src { color: var(--p-ink-3); font-size: 11px; }
/* the year clock reads in the value blue, not the flood teal */
.clock[data-mode="date"] .clock-adv b { color: var(--v5); }
.clock[data-mode="date"].ticking .clock-main { color: var(--v5); }
@keyframes date-flash { from { background: var(--v1); } to { background: transparent; } }
.tool .res-note { padding: 0 10px 6px; font: 400 10.5px/1.4 var(--p-mono); color: var(--p-ink-3); }