/* Soft light theme by default: a warm off-white page with slightly lighter cards and softened ink, easier on
   the eyes than pure white and black (all text still clears WCAG AA). Dark only when the visitor picks it
   (html[data-theme="dark"], set by the header toggle and remembered in localStorage). Chart colours follow
   the validated data-viz reference palette. */
:root {
  color-scheme: light;
  --page: #f3f1ec;
  --surface: #fbfaf7;
  --surface-2: #ebe8e1;
  --ink: #1f2228;
  --ink-2: #4b505a;
  --muted: #676b74;
  --grid: #e6e2d9;
  --axis: #c9c4b8;
  --border: #dfdad0;
  --accent: #2a78d6;
  --accent-ink: #1c5cab;
  --accent-wash: rgba(42, 120, 214, 0.09);
  --up: #006300;
  --down: #b42f2f;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(60, 50, 30, .05), 0 4px 16px rgba(60, 50, 30, .06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* logo floors, top to bottom (server/logo.js LOGO_LIGHT) */
  --logo-1: #83060e; --logo-2: #d0092d; --logo-3: #e56f05; --logo-4: #f8b43f; --logo-5: #3cb8f4; --logo-6: #3577c6; --logo-7: #183f9e;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9a9890;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5; --accent-ink: #86b6ef; --accent-wash: rgba(57, 135, 229, 0.16); --up: #0ca30c; --down: #e66767;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
  --shadow: none;
  --logo-1: #e5484d; --logo-2: #f0605a; --logo-3: #f5893a; --logo-4: #f8b43f; --logo-5: #3cb8f4; --logo-6: #5b9be3; --logo-7: #6f8ff0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.55 var(--font); }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; margin: .2em 0 .3em; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 1.8em 0 .6em; }
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
section > h2:first-child { margin-top: 1.4em; }
.lead { color: var(--ink-2); font-size: 1.08rem; max-width: 62ch; margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.note { color: var(--muted); font-size: .85rem; margin: .5em 0 0; max-width: 75ch; }
.fine { font-size: .8rem; color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--accent-wash); color: var(--accent-ink); vertical-align: 1px; }

/* header */
.top { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.top-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 1.05rem; white-space: nowrap; }
.brand svg { width: 30px; height: 30px; }
.brand .accent { color: var(--accent); }
.brand:hover { text-decoration: none; }
.top .search { flex: 1; max-width: 420px; position: relative; }
.top .search input { width: 100%; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--ink-2); padding: 6px 10px; border-radius: 8px; font-weight: 500; }
.nav a:hover, .nav a[aria-current] { background: var(--surface-2); color: var(--ink); text-decoration: none; }
@media (max-width: 760px) {
  .top { position: static; }
  .top-in { flex-wrap: wrap; gap: 8px 12px; }
  /* brand + theme toggle, then search, then the nav as one row (scrolls sideways if it ever overflows) */
  .theme-toggle { order: 1; margin-left: auto; }
  .top .search { order: 2; flex-basis: 100%; max-width: none; }
  .nav { order: 3; flex-basis: calc(100% + 16px); margin: 0 -8px; overflow-x: auto; scrollbar-width: none; gap: 0; justify-content: space-between; }
  .nav a { padding: 4px 8px; white-space: nowrap; }
}

input, select, button { font: inherit; color: inherit; }
input[type=search], input[type=number], input[type=text], select {
  background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 8px 10px; min-height: 40px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.main { max-width: 1120px; margin: 0 auto; padding: 8px 16px 48px; }
body.wide .main { max-width: none; padding: 0; }

/* search results dropdown */
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 30; overflow: hidden; }
.search-results a { display: block; padding: 8px 12px; color: var(--ink); border-top: 1px solid var(--border); }
.search-results a:first-child { border-top: 0; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--accent-wash); text-decoration: none; }
.search-results .sub { display: block; font-size: .82rem; color: var(--muted); }
.search-results .empty { padding: 10px 12px; color: var(--muted); }

.hero { padding: 32px 0 8px; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.hero-search { position: relative; max-width: 640px; margin: 16px 0; }
.hero-search input { width: 100%; font-size: 1.08rem; padding: 12px 14px; min-height: 50px; border-radius: 12px; }
.hero-links { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--axis); }
.btn.small { padding: 5px 12px; min-height: 32px; font-size: .9rem; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.tile-label { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.tile-value { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.01em; margin: 2px 0; }
.tile-sub { font-size: .82rem; color: var(--ink-2); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 4px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.kpi-v { font-size: 1.8rem; font-weight: 650; }
.kpi-l { color: var(--ink-2); font-size: .88rem; }

/* layout bits */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.cards { display: grid; gap: 10px; }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; color: var(--ink); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card strong { display: block; }
.card span { color: var(--ink-2); font-size: .9rem; }
.list { padding-left: 1.2em; }
.list li { margin: 0 0 .6em; }
.list.compact li { margin: 0 0 .25em; }
ul.list:not(ol) { list-style: none; padding-left: 0; }
.streets { columns: 3 220px; padding: 0; list-style: none; }
.streets li { break-inside: avoid; padding: 2px 0; }
.crumbs { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }
.crumbs .sep { margin: 0 6px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.head-actions { margin-top: 16px; display: flex; gap: 6px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 4px; border-bottom: 1px solid var(--border); }
.tabs a { padding: 8px 12px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--ink); }

/* segmented control */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 10px; margin-bottom: 8px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--ink-2); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }

/* tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 8px 12px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
thead th { border-top: 0; font-size: .8rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
table.sortable thead th { cursor: pointer; user-select: none; }
table.sortable thead th[aria-sort]::after { content: " ▾"; }
table.sortable thead th[aria-sort="ascending"]::after { content: " ▴"; }
table.compare th { width: 1%; white-space: nowrap; }
table.compare thead th { font-size: .95rem; color: var(--ink); font-weight: 600; white-space: normal; min-width: 160px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; align-items: center; }
.filters select, .filters input { min-height: 36px; padding: 5px 8px; }
.more { margin-top: 8px; }

/* charts */
.chart { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); height: 320px; padding: 8px 8px 4px; }
.chart.tall { height: 380px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .base { stroke: var(--axis); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 1.5; }
.chart .label { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.chart .cross { stroke: var(--axis); stroke-width: 1; }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 6px 9px; font-size: .82rem; white-space: nowrap; z-index: 5; color: var(--ink); }
.chart-tip .k { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legend-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); margin: 0 0 6px; }
.legend-row span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c); margin-right: 6px; vertical-align: middle; }

/* estimator */
.estimator { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 16px; margin-top: 24px; }
.est-form, .calc { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.est-form label, .calc label { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-2); gap: 4px; }
.est-form input { width: 110px; }
.est-out { margin-top: 14px; }
.est-big { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.est-range { color: var(--ink-2); }
.range-bar { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; margin: 12px 0 4px; max-width: 480px; }
.range-bar i { position: absolute; top: 0; bottom: 0; background: var(--accent-wash); border: 1px solid var(--accent); border-radius: 4px; }
.range-bar b { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--accent); border-radius: 2px; }
.range-bar b.ask { background: var(--ink); height: 20px; top: -6px; }
.verdict { margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px; border-left: 3px solid; font-size: .95rem; max-width: 70ch; }
.verdict strong { display: block; margin-bottom: 2px; }
.verdict.good { background: rgba(12, 163, 12, .08); border-color: #0ca30c; }
.verdict.fair { background: var(--accent-wash); border-color: var(--accent); }
.verdict.high { background: rgba(236, 131, 90, .12); border-color: #ec835a; }
details summary { cursor: pointer; color: var(--accent-ink); margin: 10px 0; }

/* affordability */
.afford { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .afford { grid-template-columns: 1fr; } }
.afford .calc { flex-direction: column; align-items: stretch; }
.afford fieldset { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 14px 14px; display: grid; gap: 10px; margin: 0 0 12px; }
.afford legend { font-weight: 600; padding: 0 4px; }
.afford label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.afford-out { position: sticky; top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.afford-out table td, .afford-out table th { padding: 6px 4px; }
.warn { background: rgba(250, 178, 25, .14); border-left: 3px solid #fab219; padding: 8px 10px; border-radius: 6px; font-size: .9rem; margin: 8px 0; }
.ok { background: rgba(12, 163, 12, .10); border-left: 3px solid #0ca30c; padding: 8px 10px; border-radius: 6px; font-size: .9rem; margin: 8px 0; }

/* map */
/* map page: header + map fill the viewport exactly (the header is taller on phones) */
body.wide { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.wide .main { flex: 1; min-height: 0; display: flex; width: 100%; margin: 0; }
.map-wrap { position: relative; flex: 1; min-height: 0; }
.map-wrap .map { position: absolute; inset: 0; }
.map-panel { position: absolute; top: 12px; left: 12px; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px 12px; width: 250px; display: grid; gap: 8px; }
.map-panel h1 { font-size: 1.05rem; margin: 0; }
.map-panel label { display: flex; flex-direction: column; font-size: .82rem; color: var(--ink-2); gap: 3px; }
.legend { display: grid; gap: 3px; font-size: .8rem; }
.legend .ramp { display: flex; height: 10px; border-radius: 3px; overflow: hidden; }
.legend .ramp i { flex: 1; }
.legend .ends { display: flex; justify-content: space-between; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .map-panel { top: auto; bottom: 12px; left: 8px; right: 8px; width: auto; grid-template-columns: 1fr 1fr; }
  .map-panel h1, .map-panel .legend, .map-panel #m-count { grid-column: 1 / -1; }
}
.maplibregl-popup-content { background: var(--surface) !important; color: var(--ink); border-radius: 10px !important; box-shadow: var(--shadow) !important; font: 14px/1.45 var(--font); padding: 10px 12px !important; }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.minimap { height: 280px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }

/* footer */
.foot { border-top: 1px solid var(--border); background: var(--surface); margin-top: 32px; }
body.wide .foot { display: none; }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 20px 16px 28px; font-size: .88rem; color: var(--ink-2); display: grid; gap: 10px; }
.foot-links a { white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* theme toggle */
.theme-toggle { border: 0; background: transparent; color: var(--ink-2); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; flex: none; }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: block; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* launches */
.launches { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.launch { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; }
.launch-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.launch-big { font-size: 1.15rem; font-weight: 600; margin: 6px 0; }
.launch ul { padding-left: 1.1em; margin: 6px 0; }
.launch li { margin-bottom: 4px; }
details.launch.past { margin-bottom: 10px; }
details.launch.past summary { margin: 0; color: var(--ink); }
.news { list-style: none; padding: 0; }
.news li { padding: 8px 0; border-top: 1px solid var(--border); }
.news li:first-child { border-top: 0; }
.next-launch { display: block; background: var(--accent-wash); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; color: var(--ink); margin: 8px 0 0; }
.next-launch:hover { text-decoration: none; border-color: var(--accent); }

/* contact form */
.contact-form { max-width: 560px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-weight: 600; font-size: .9rem; }
.form-field i { font-style: normal; font-weight: 400; color: var(--muted); font-size: .82rem; margin-left: 4px; }
.form-field input, .form-field textarea, .form-field select { width: 100%; font: inherit; font-weight: 400; background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field.invalid input, .form-field.invalid textarea { border-color: var(--down); }
.form-error { color: var(--down); font-size: .9rem; min-height: 1.3em; margin: 8px 0 0; }
.btn:disabled { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-done { max-width: 560px; }
.contact-done h2 { margin-top: .8em; }

/* pager (/recent) */
.pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 12px 0 0; }
.pager a, .pager span { min-width: 36px; min-height: 36px; padding: 6px 10px; border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.pager a { border: 1px solid var(--border); background: var(--surface); }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager .cur { background: var(--accent); color: #fff; font-weight: 600; }
.pager .off { color: var(--muted); opacity: .6; }
.pager .gap { min-width: 0; padding: 6px 2px; color: var(--muted); }
table.loading { opacity: .5; transition: opacity .15s; }