/* Aspelin Reitan theme for the story page — loaded after ./lib/site.css and ./story.css.
   Warm-neutral UI: Parchment canvas, Walnut header bar, hairline outlines, 8px radius on buttons only,
   no shadows, one sans (Inter as the ModernEra substitute) at weights 400/500. Mono stays only inside
   SQL, code and result blocks, where column alignment matters. Map data colors (flood, residents, sand)
   stay as they are: they encode data, not brand. */
:root {
  --color-warm-parchment: #ffebd0; --color-candlelight: #fff8e9; --color-obsidian: #000000;
  --color-walnut-shell: #2f2116; --color-aged-bronze: #4f3622; --color-amber-glow: #fee197; --color-muted-gold: #987f61;
  --radius-buttons: 8px;

  --p-primary: var(--color-aged-bronze); --p-primary-ink: var(--color-walnut-shell); --p-on-primary: var(--color-warm-parchment);
  --p-bg: var(--color-warm-parchment); --p-bg-soft: #f7e0c2; --p-paper: var(--color-candlelight);
  --p-ink: var(--color-obsidian); --p-ink-2: #3a2c20; --p-ink-3: #6e5a45;
  --p-line: var(--color-obsidian); --p-line-soft: #dcc3a2;
  --p-success: #4f6b3a; --p-warn: #a8762e; --p-warn-ink: #7a4f17; --p-danger: #8f2a1c;
  --p-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --p-mono: var(--p-sans);
  --p-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ext: #7a4f17;
}
html { font-family: var(--p-sans); font-feature-settings: "tnum" 1, "cv11" 1; }
body.story { background: var(--p-bg); }

/* one sans everywhere; mono only for SQL, code and tabular results */
pre, code, kbd, .tool .sql, .tool .res, .tool .cmp pre, .receipt pre, .receipt code { font-family: var(--p-code); }
h1, h2, h3, h4, b, strong, .msg.agent .b b, .assess .vd, .hw-box b { font-weight: 500; letter-spacing: 0; }

/* small uppercase labels become quiet sentence-case captions */
.kicker, .lv-l, .level-rule, .typing, .divider, .mockbadge, .tool .ttag, .tool .cmp h4, .stat .l, .gap .k, .assess .k,
.chip-q.replay, .chip-q small, .seg-l, .seg button, .keys, .who, .msg .who, .answer .a-k, .answer .a-foot, .receipt .r-k, .receipt .r-t,
.receipt .r-ql, .hw-kpis .l, .hw-h, .tool .script-body .k, .tool .bytes .l, .lv-seg button small, .tool .rerun,
.shell-nav a, .shell-pub, .shell-index, .shell-status {
  text-transform: none; letter-spacing: 0;
}
.lv-l, .seg-l, .stat .l, .gap .k, .assess .k, .answer .a-k, .receipt .r-k, .receipt .r-t, .hw-kpis .l, .hw-h, .tool .bytes .l,
.tool .script-body .k, .tool .cmp h4, .receipt .r-ql, .divider { font-size: 13px; font-weight: 400; color: var(--p-ink-3); }
.kicker { font: 400 14px/1.3 var(--p-sans); color: var(--color-muted-gold); }
.kicker b { color: var(--p-ink); font-weight: 500; }
.keys, .level-rule, .typing, .answer .a-foot, .hw-colls { font-size: 12.5px; }

/* ------------------------------------------------------------------ header: walnut */
.shell-top { background: var(--color-walnut-shell); border-bottom: 1px solid var(--color-aged-bronze); }
/* story page: full-width top bar, title aligned with the story title below (20 px gutter, 16 px on phones) */
body.story .shell-top .row { max-width: none; padding-inline: 20px; }
.shell-brand, .shell-brand:hover { color: var(--color-warm-parchment); }
.shell-brand svg { color: var(--color-warm-parchment); }
.shell-brand .title { font: 600 21px/1.1 var(--p-sans); letter-spacing: -0.01em; color: var(--color-warm-parchment); }
.shell-nav { gap: 20px; }
.shell-nav a { font: 400 16px/1 var(--p-sans); color: var(--color-warm-parchment); padding: 6px 0; border-bottom: 1px solid transparent; }
.shell-nav a:hover, .shell-nav a[aria-current] { color: var(--color-warm-parchment); border-bottom-color: var(--color-amber-glow); }
.shell-pub { font-size: 13px; color: var(--color-muted-gold); }
.shell-pub svg, .shell-pub img { filter: brightness(0) invert(92%) sepia(20%) saturate(400%) hue-rotate(330deg); }
.shell-status { font-size: 13px; color: var(--color-muted-gold); }
.shell-status::before { background: var(--color-amber-glow); }
.shell-progress { background: linear-gradient(90deg, var(--color-amber-glow) 0 40%, transparent 40% 100%); background-size: 250% 100%; }
.shell-index { background: transparent; color: var(--color-warm-parchment); border: 1px solid var(--color-warm-parchment); border-radius: var(--radius-buttons); font: 400 16px/1 var(--p-sans); padding: 6px 16px; }
.shell-menu { background: var(--color-walnut-shell); border-top-color: var(--color-aged-bronze); }
.shell-menu a { color: var(--color-warm-parchment); border-bottom-color: var(--color-aged-bronze); }
.shell-menu a[aria-current] { color: var(--color-amber-glow); font-weight: 500; }
.shell-foot { background: var(--color-walnut-shell); color: var(--color-warm-parchment); border-top: 0; }
.shell-foot .row { color: var(--color-warm-parchment); font-size: 16px; }
.shell-foot a { color: var(--color-warm-parchment); border-bottom: 1px solid var(--color-muted-gold); }
.shell-foot a:hover { text-decoration: none; color: var(--color-amber-glow); }
.shell-foot .brands svg, .shell-foot .brands img { color: var(--color-warm-parchment); }

/* ------------------------------------------------------------------ story bar */
.bar { background: var(--p-bg); border-bottom-color: var(--p-line); }

/* outlined controls, 8px radius, no fills except the chosen state */
.lv-seg button, .seg button { background: transparent; border-color: var(--p-line); font-family: var(--p-sans); }
.lv-seg button { font-size: 16px; font-weight: 400; }
.lv-seg button:first-child, .seg .seg-l + button, .seg button:first-child { border-start-start-radius: var(--radius-buttons); border-end-start-radius: var(--radius-buttons); }
.lv-seg button:last-child, .seg button:last-child { border-start-end-radius: var(--radius-buttons); border-end-end-radius: var(--radius-buttons); }
.seg button { font-size: 13px; font-weight: 400; padding: 5px 10px; }
.lv-seg button small { font-size: 10px; font-weight: 500; }
.lv-seg.years button small { font-size: 10px; }
.lv-seg button.extreme { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(122, 79, 23, 0.08) 5px 7px); }
.lv-seg button:hover:not(:disabled):not([aria-checked="true"]), .seg button:hover { background-color: var(--p-paper); color: var(--p-ink); }
.lv-seg.years button[aria-checked="true"], .seg button.on, .seg button[aria-pressed="true"] { background: var(--color-obsidian); border-color: var(--color-obsidian); color: var(--color-warm-parchment); }

/* ------------------------------------------------------------------ chat */
.chat, .compose { background: var(--p-bg); }
.msg { font-size: 16px; line-height: 1.45; }
.msg .who { color: var(--color-muted-gold); font-size: 13px; }
.msg.user .b { background: #f2d5ae; color: var(--p-ink); border: 1px solid var(--p-line); border-radius: var(--radius-buttons); font-weight: 400; }
.cur, .typing::before { background: var(--p-ink); }
.who { border-color: var(--p-line-soft); }
.mockbadge { font-size: 11px; border-radius: 4px; }

.tool { background: var(--p-paper); border-color: var(--p-line-soft); border-inline-start: 1px solid var(--p-line); font-size: 13px; }
.tool .cmd { font-size: 13px; }
.tool .ttag { font-size: 11px; color: var(--p-ink-2); border-color: var(--p-line-soft); border-radius: 4px; }
.tool .chev { color: var(--p-ink-3); }
.tool .sql, .tool .res, .tool .cmp pre { font-size: 11.5px; }
.tool .meta { font-size: 12px; }
.tool .meta a, .receipt a, .legend .lt a { color: var(--p-ink); border-bottom: 1px solid var(--p-ink); text-decoration: none; }
.tool .rerun { border-radius: var(--radius-buttons); border-color: var(--p-line); color: var(--p-ink); background: transparent; font: 400 12px/1.2 var(--p-sans); }
.tool .rerun:hover { background: var(--color-obsidian); color: var(--color-warm-parchment); }
.tool.script { border-inline-start-color: var(--flood-2); }

.stat { background: var(--p-paper); border: 1px solid var(--p-line); border-inline-start: 1px solid var(--p-line); }
.stat .v { font: 400 28px/1.17 var(--p-sans); letter-spacing: 0; }
.stat .s { font: 400 13px/1.4 var(--p-sans); }
.stat .v.num:hover { color: var(--p-ink-2); }

.gap { background: transparent; border-color: var(--p-line-soft); border-inline-start: 1px solid var(--color-muted-gold); }
.gap h4 { font-size: 16px; }
.gap p { font-size: 14.5px; }
.assess { background: var(--p-paper); }
.assess .vd { font-size: 20px; line-height: 1.22; }
.factor { font-size: 14.5px; }
.factor .fv { font-size: 14px; }

.compose { border-top-color: var(--p-line); }
.chip-q { background: transparent; border: 1px solid var(--p-line); border-radius: var(--radius-buttons); color: var(--p-ink); font: 500 15px/1.35 var(--p-sans); padding: 10px 14px; }
.chip-q:hover { background: var(--color-obsidian); color: var(--color-warm-parchment); }
.chip-q small { font-size: 12px; font-weight: 400; opacity: 0.75; }
.chip-q.replay { border-color: var(--p-line-soft); font: 400 13px/1.3 var(--p-sans); }
.status { font-size: 13px; color: var(--p-ink-3); }
body.paused .msgs { box-shadow: inset 0 -1px 0 var(--color-muted-gold); }

/* ------------------------------------------------------------------ over the map: flat, no shadows */
.legend, .legend-toggle, .callout { background: rgba(255, 248, 233, 0.96); }
.legend .lt { font: 400 12.5px/1.4 var(--p-sans); }
.callout { font: 500 12px/1.2 var(--p-sans); }
.callout.info { border-color: var(--p-ink); color: var(--p-ink); }
.maplibregl-popup-content { font-family: var(--p-sans); background: var(--color-candlelight); border-radius: 0; box-shadow: none; border: 1px solid var(--p-line); }
.maplibregl-popup-content b { font-family: var(--p-sans); }
.maplibregl-ctrl-scale { font-family: var(--p-sans) !important; }

.answer { background: rgba(255, 248, 233, 0.97); border: 1px solid var(--p-line); border-inline-start: 4px solid var(--flood-1); }
.answer .a-v { font: 400 40px/1.17 var(--p-sans); letter-spacing: -0.01em; }
.answer .a-l { font-size: 14px; }
.answer .a-row { font-size: 13px; }
.answer .a-row .c { font: 500 13px/1.3 var(--p-sans); }

.receipt { background: var(--color-candlelight); box-shadow: none; }
.receipt h3 { font-size: 18px; }
.receipt .r-x { border: 1px solid var(--p-line); border-radius: var(--radius-buttons); background: transparent; font-family: var(--p-sans); }
.receipt .r-x:hover { background: var(--color-obsidian); color: var(--color-warm-parchment); }
.receipt .r-v { font: 400 28px/1.17 var(--p-sans); letter-spacing: 0; }
.receipt p { font-size: 14px; }
.receipt table.r-in { font: 400 12.5px/1.4 var(--p-sans); }
.hw-kpis .v { font: 400 20px/1.22 var(--p-sans); }
.hw-box { background: var(--p-bg); font-size: 13px; }
.hw-box span { font-size: 12.5px; }
.hw-d { font: 400 13px/1.4 var(--p-sans); }
.hw-arrow { font-family: var(--p-sans); }
pre { background: var(--p-bg-soft); border-inline-start: 1px solid var(--p-line); }
code { background: var(--p-bg-soft); }

/* phone: the title and the outlined Index button must fit 390 px */
@media (max-width: 600px) {
  .shell-top .row { gap: 12px; }
  body.story .shell-top .row { padding-inline: 16px; }
  .shell-index { font-size: 14px; padding: 6px 12px; }
  .shell-brand .title { font-size: 16px; white-space: nowrap; }
}