/* Same typography, section rhythm and totem palette as main's index.html. */
:root, [data-theme="day"] {
  --totem-face:#eef7ea; --totem-body:#2e7d44; --totem-tx:#1d4a2b;
}
[data-theme="night"] {
  --totem-face:#0d1812; --totem-body:#173524; --totem-tx:#3fe06c;
}
[hidden] { display:none !important; }
html { scroll-padding-top:100px; }
button, input { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
h1,h2,h3 { font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.015em; }
h2 { font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.1; }
nav.site { background:color-mix(in srgb,var(--sky) 86%,transparent); }
.stats-hero { background:linear-gradient(180deg,var(--sky) 75%,var(--paper)); }
.stats-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:36px 64px; align-items:center; padding-top:48px; padding-bottom:60px; }
.stats-hero-grid > * { min-width:0; }
.stats-intro h1 { font-size:clamp(2.5rem,5.4vw,4rem); line-height:1.06; }
.stats-intro h1 .brand-line { font-style:italic; color:var(--brand); }
.stats-intro > p:not(.stats-live) { max-width:520px; margin-top:18px; color:var(--ink-dim); font-size:1.06rem; }
.stats-live { margin-top:24px; color:var(--ink-dim); font-size:.85rem; line-height:1.6; }
.stats-live .coverage-line { display:flex; align-items:center; gap:10px; }
.stats-live time { display:block; margin-top:4px; }
.stats-live.is-error { color:var(--tier-high); }
.live-dot { display:inline-block; width:7px; height:7px; flex:none; border-radius:50%; background:var(--brand-bright); box-shadow:0 0 7px var(--brand-bright); }
.live-dot.delayed { background:var(--tier-mid); }
.stats-map { width:100%; margin:0 auto; }
.stats-map svg { width:100%; max-width:300px; height:auto; display:block; margin:0 auto; }
.stats-map .map-land { fill:var(--hill-2); stroke:var(--ink-dim); stroke-width:2; stroke-linejoin:round; opacity:.92; }
.stats-map .map-dot { fill:var(--brand); stroke:var(--paper); stroke-width:2; }
.stats-map .map-label { fill:var(--annot); font-family:'Caveat',cursive; }
.area-search-shell { grid-column:1/-1; width:100%; max-width:680px; margin:0 auto; }
.area-search-shell label { display:block; color:var(--ink); font-weight:600; margin-bottom:10px; }
.area-search-field { display:flex; align-items:center; gap:12px; border-bottom:2px solid var(--brand); }
.area-search-icon { width:20px; height:20px; color:var(--brand); flex:none; }
.area-search-input { min-width:0; width:100%; min-height:52px; border:0; border-radius:0; padding:10px 0; background:transparent; color:var(--ink); font-size:16px; -webkit-appearance:none; appearance:none; }
.area-search-input::placeholder { color:var(--ink-dim); opacity:1; }
.area-search-input:focus { outline:none; }
.area-search-field:focus-within { outline:2px solid var(--brand); outline-offset:5px; border-radius:2px; }
/* Results stay in flow at every width. No ancestor clips the list. */
.area-results { margin-top:14px; max-height:min(320px,45dvh); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scroll-padding:6px; }
.area-result { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border:0; border-radius:4px; background:transparent; color:var(--ink); text-align:left; }
.area-result strong { font-size:1rem; overflow-wrap:anywhere; }
.area-result span { color:var(--ink-dim); font-size:.875rem; text-align:right; flex:none; }
.area-result:hover,.area-result:focus-visible { background:var(--hill-1); }
.area-no-results { padding:12px 0; color:var(--ink-dim); }
.stats-loading { padding:60px 28px; text-align:center; color:var(--ink-dim); }
.stats-national { padding-top:60px; padding-bottom:96px; }
.stats-scope-heading { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px 28px; }
.stats-scope-heading span { color:var(--ink-dim); font-size:.9rem; }
.fuel-tabs { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end; margin-top:26px; }
.fuel-tab { position:relative; border:0; min-height:44px; padding:0 2px 10px; background:none; color:var(--ink-dim); font-family:'Karla',sans-serif; font-weight:600; font-size:1.06rem; letter-spacing:.01em; }
.fuel-tab[aria-pressed="true"] { color:var(--ink); }
.fuel-tab .ft-ul { position:absolute; left:-2px; bottom:0; width:calc(100% + 6px); height:10px; opacity:0; }
.fuel-tab[aria-pressed="true"] .ft-ul { opacity:1; }
.fuel-description { color:var(--ink-dim); margin-top:10px; }
.price-board-shell { position:relative; width:100%; max-width:580px; margin:46px auto 0; padding-bottom:36px; }
.price-board-note { display:block; text-align:right; margin:0 8px 10px 0; font-size:1.4rem; transform:rotate(-1.3deg); }
.price-board { position:relative; display:grid; gap:10px; padding:14px; background:var(--totem-body); border-radius:14px; }
.price-board::after { content:""; position:absolute; bottom:-36px; left:calc(50% - 8px); width:16px; height:36px; background:var(--totem-body); }
.price-board-header { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 20px; padding:4px 8px 8px; color:#eef7ea; font-size:.9rem; }
.price-board-header strong { min-width:0; overflow-wrap:anywhere; }
.price-board-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 16px; padding:20px; border-radius:6px; background:var(--totem-face); color:var(--ink); }
.price-board-copy { min-width:0; display:flex; flex-direction:column; }
.price-board-copy strong { font-size:1.12rem; }
.price-board-copy span { color:var(--ink-dim); font-size:.85rem; }
.price-board-value { color:var(--totem-tx); font-family:'Geist Mono',monospace; font-size:clamp(1.6rem,5.7vw,2.25rem); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.15; letter-spacing:-.025em; white-space:nowrap; }
.price-board-changes { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.price-board-change { min-width:0; font-size:.85rem; color:var(--ink-dim); }
.price-board-change .change-value { display:block; margin-top:2px; font-family:'Geist Mono',monospace; font-weight:500; font-size:.9rem; }
.change-value[data-direction="up"] { color:var(--tier-high); }
.change-value[data-direction="down"] { color:var(--brand); }
.change-value[data-direction="flat"],.change-value[data-direction="missing"] { color:var(--ink-dim); }
.price-board-empty { padding:20px; color:#eef7ea; }
.stats-compare { background:linear-gradient(180deg,var(--paper),var(--sky) 160px,var(--sky) calc(100% - 160px),var(--paper)); padding:96px 0; }
.stats-compare-copy { max-width:520px; color:var(--ink-dim); font-size:1.02rem; margin-top:18px; }
.area-empty { margin-top:26px; color:var(--ink-dim); }
.area-pick { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; padding:4px 0; border:0; background:none; color:var(--brand); font-weight:600; text-decoration:underline; text-decoration-style:wavy; text-underline-offset:5px; }
.area-heading { margin-top:32px; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; }
.area-heading h3 { font-size:clamp(1.6rem,3vw,2rem); line-height:1.15; overflow-wrap:anywhere; }
.area-heading p { color:var(--ink-dim); font-size:.9rem; }
.area-board-shell { max-width:580px; margin:28px auto 0; }
.area-board-shell .price-board::after { display:none; }
.stats-method { padding-top:60px; padding-bottom:96px; }
.method-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-top:34px; list-style:none; }
.method-list li { position:relative; padding-left:30px; }
.method-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-size:1.25rem; }
.method-list strong { display:block; margin-bottom:5px; }
.method-list span { color:var(--ink-dim); }
.stats-source { margin-top:32px; color:var(--ink-dim); font-size:.85rem; }
footer.site { background:linear-gradient(180deg,var(--hill-4),color-mix(in srgb,var(--hill-4) 28%,var(--paper)) 30px,var(--paper) 120px); padding-top:64px; }
.foot-links { flex-wrap:wrap; }
@media (max-width:900px) {
  .stats-hero-grid { grid-template-columns:1fr; gap:30px; padding-top:24px; padding-bottom:30px; }
  .stats-intro { text-align:center; }
  .stats-intro > p:not(.stats-live) { margin-left:auto; margin-right:auto; }
  .stats-live .coverage-line { justify-content:center; }
  .stats-map svg { max-width:250px; }
  .stats-national,.stats-compare,.stats-method { padding-top:60px; padding-bottom:60px; }
  .method-list { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px) {
  .stats-intro h1 { font-size:36px; }
  .stats-intro > p:not(.stats-live) { font-size:1.06rem; }
  .price-board-row { padding:16px; gap:12px; }
  .fuel-tab { font-size:1.12rem; padding-bottom:14px; }
  .area-result { align-items:flex-start; flex-wrap:wrap; gap:2px 12px; }
  .area-result span { text-align:left; }
}
@media (max-width:360px) {
  .nav-right { gap:10px; }
  .pill { padding-left:14px; padding-right:14px; }
  .price-board-row { padding:12px; }
  .price-board-copy strong { font-size:1rem; }
  .price-board-copy span { font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }