/* RentTrends stylesheet. Design tokens and rationale live in DESIGN.md.
   Direction (2026-07-11): COOL EDITORIAL. The credibility of official data
   with the calm of a modern data publication: cool near-white paper, a
   cerulean trust anchor lifted by indigo + teal secondaries, vivid but
   tasteful red/green movement, an expressive system-serif display over a
   system-sans body, fluid type, layered ambient shadows and gentle scroll-in
   motion. Read DESIGN.md before changing anything visual. */

:root {
  /* ── Cool paper-and-ink neutrals ─────────────────────────────────────── */
  --paper:#F6F8FA;        /* cool near-white page */
  --paper-2:#EBEEF3;      /* cooler grey for full-bleed bands */
  --surface:#FFFFFF;      /* white cards */
  --ink:#171A1F;          /* cool near-black */
  --ink-soft:#3C434D;     /* softer heading / secondary ink */
  --muted:#5A626E;        /* muted text, clears WCAG AA (5.8:1 on paper) */
  --hairline:#E4E8ED;     /* hairline / border */
  --hairline-2:#D3D9E1;   /* stronger hairline */

  /* ── Cerulean trust anchor + cool secondaries ────────────────────────── */
  --accent:#15607F;       --accent-hover:#0F4A62;
  --accent-soft:#E1EEF3;  --accent-line:#B4D5E1;
  --clay:#5257BE;         --clay-soft:#E7E9F7;   /* indigo, story / illustration accent */
  --honey:#0E7A80;        --honey-soft:#E0F0F3;  /* deep teal, highlights / kickers */
  --gold:#4FB6D0;         /* bright sky illustration highlight */
  --med-fg:#8A5E12;       /* amber sample-size caution, clears WCAG AA (5.3:1 on paper) */

  /* Direction scale (conventional): rents that ROSE are green, rents that
     EASED are red, steady is grey. Vivid but tasteful, all AA. --pos/--neg are
     the generic success/error greens & reds, kept independent of direction so
     a "saved!" tick or an error stays the expected colour when direction flips. */
  --up:#177A4C; --up-bg:#E3F2E9;
  --down:#C1301F; --down-bg:#FBE7E4;
  --flat:#5A626E; --flat-bg:#EAEDF1;   /* grey delta text, AA on paper and on flat-bg */
  --pos:#177A4C; --pos-bg:#E3F2E9; --neg:#C1301F; --neg-bg:#FBE7E4;

  /* Categorical chart lines (compare): cerulean / coral / indigo / teal. */
  --c1:#15607F; --c2:#D2604A; --c3:#5B6C9E; --c4:#0E7A80;

  /* ── Type families — system stacks, zero web-font download ──────────────
     Display was Fraunces, body was Hanken Grotesk (both from fonts.bunny.net);
     dropped 2026-07-13 for native stacks so there is no third-party font CDN,
     no render-block and no font-swap LCP delay. --font-display leans on the
     warm old-style serifs each OS ships (Iowan on Apple, Palatino/Book Antiqua
     on Windows) to keep the editorial, characterful voice; --font-sans is the
     standard UI sans (San Francisco / Segoe / Roboto). */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Fluid type scale (clamp: mobile → desktop, no breakpoint jumps) ──── */
  --t-hero: clamp(2.75rem, 1.7rem + 4.6vw, 4.6rem);
  --t-h1:   clamp(2.15rem, 1.5rem + 2.8vw, 3.35rem);
  --t-h2:   clamp(1.55rem, 1.25rem + 1.4vw, 2.15rem);
  --t-h3:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-lede: clamp(1.08rem, 1.02rem + 0.4vw, 1.3rem);
  --t-body: 1.0625rem;

  /* ── Layered ambient shadows (never one flat box-shadow) ─────────────── */
  --shadow-sm: 0 1px 2px rgba(23,32,48,.05), 0 2px 6px rgba(23,32,48,.06);
  --shadow-md: 0 1px 2px rgba(23,32,48,.05), 0 6px 16px -6px rgba(23,32,48,.11), 0 18px 34px -14px rgba(23,32,48,.13);
  --shadow-lg: 0 2px 4px rgba(23,32,48,.06), 0 12px 28px -8px rgba(23,32,48,.15), 0 34px 60px -20px rgba(23,32,48,.17);

  --wrap:1060px;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --ease: cubic-bezier(.22,1,.36,1);        /* soft overshoot for hovers */
  --ease-io: cubic-bezier(.16,.84,.44,1);   /* scroll-reveal drift */
}

/* ── Cool dark theme ─────────────────────────────────────────────────────
   Same cool-editorial identity after dark: a slate near-black paper, cool
   off-white ink, the cerulean anchor and indigo/teal secondaries lifted for
   contrast. Token-only, every component re-skins from here. A tiny head
   script sets data-theme from the saved choice or the OS preference before
   first paint (no flash); the header toggle flips it. `color-scheme` keeps
   native controls (scrollbars, form widgets) matched to the theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#10131A; --paper-2:#161B24; --surface:#171C26;
  --ink:#E8ECF2; --ink-soft:#B4BDCA; --muted:#8A93A2;
  --hairline:#262D3A; --hairline-2:#343D4D;
  --accent:#46B3CE; --accent-hover:#63C4DC; --accent-soft:#123039; --accent-line:#24505E;
  --clay:#8792E0; --clay-soft:#1E2340; --honey:#38B4C6; --honey-soft:#12303A;
  --gold:#4FB6D0; --med-fg:#D6B25A;
  --up:#4FC98C; --up-bg:#123026; --down:#F0685A; --down-bg:#3A1E1A; --flat:#8A93A2; --flat-bg:#20262F;
  --pos:#4FC98C; --pos-bg:#123026; --neg:#F0685A; --neg-bg:#3A1E1A;
  --c1:#46B3CE; --c2:#E5735B; --c3:#8A99C8; --c4:#38B4C6;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.28);
  --shadow-md: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -6px rgba(0,0,0,.45), 0 18px 34px -14px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -8px rgba(0,0,0,.5), 0 34px 60px -20px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body {
  background:var(--paper);
  background-image:
    radial-gradient(120% 80% at 8% -10%, rgba(70,179,206,.07), transparent 55%),
    radial-gradient(110% 70% at 100% 0%, rgba(135,146,224,.05), transparent 50%);
}
/* Shimmer reads as a faint light sweep, not a bright flash, on dark cards. */
:root[data-theme="dark"] .skel::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }

/* Dark-mode component fixes: some chrome and graphics hardcode light values
   (frosted overlays, white-on-teal labels, ranked-bar gradients) that don't
   invert with the tokens. These restore contrast after dark. */
:root[data-theme="dark"] .nav-overlay { background:rgba(16,19,26,.90); }
:root[data-theme="dark"] .site-head.scrolled { background:rgba(16,19,26,.72); box-shadow:0 8px 24px -16px rgba(0,0,0,.6); }
/* White on the lightened dark-mode cerulean (#46B3CE) fails AA; dark ink on it
   clears ~7:1. Covers the primary button and every active toggle/pill. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .pill.on,
:root[data-theme="dark"] .seg button.on,
:root[data-theme="dark"] .subnav a.on,
:root[data-theme="dark"] .subnav button.on,
:root[data-theme="dark"] .propbar span { color:#10131A; }
:root[data-theme="dark"] .near-btn:hover { background:var(--accent-line); }
:root[data-theme="dark"] .bar-fill { background:linear-gradient(90deg, var(--accent), var(--accent-hover)); }
:root[data-theme="dark"] .bar-fill.up { background:linear-gradient(90deg, var(--up), #177A4C); }
:root[data-theme="dark"] .bar-fill.down { background:linear-gradient(90deg, var(--down), #C1301F); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }

/* Smoother page-to-page navigation: the main content settles in with a quick
   fade on each load, so moving between regions/suburbs/pages reads as a soft
   arrival rather than a hard reload flash. Opacity-only (no transform), so it
   never affects the sticky cell-picker rail and can never leave content
   hidden — it always ends fully visible. Skipped under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  main.wrap { animation:page-in .32s var(--ease, cubic-bezier(.4,0,.2,1)) both; }
  @keyframes page-in { from { opacity:0; } to { opacity:1; } }
}
body { margin:0; color:var(--ink);
  background:var(--paper);
  font-family:var(--font-sans);
  font-size:var(--t-body); line-height:1.55; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* The faint cool wash lives on its own fixed, composited layer rather than a
   `background-attachment:fixed` on <body> — the latter forces a full-viewport
   background repaint on every scroll frame (janky on iOS Safari / low-end
   Android). A fixed pseudo-element gets its own layer, so scrolling is cheap
   while the wash still stays put in the corners. */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(120% 80% at 8% -10%, rgba(21,96,127,.06), transparent 55%),
    radial-gradient(110% 70% at 100% 0%, rgba(82,87,190,.05), transparent 50%); }

.wrap { max-width:var(--wrap); margin:0 auto; padding:clamp(20px,2.6vw,38px) clamp(18px,4vw,32px) clamp(72px,9vw,120px); }
/* The skip link moves focus to #main (tabindex="-1"); don't paint an outline
   around the whole content region when it receives that programmatic focus. */
#main:focus { outline:none; }
/* Prose stays a readable measure even as the frame widened for data. */
.lede, .story, .meta, .footnote, .about ul { max-width:64ch; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* A <table> ignores width:1px (it sizes to min-content), so an sr-only data
   table stayed ~420px wide and pushed the page into horizontal overflow on
   mobile. table-layout:fixed makes it honour the 1px, collapsing it for real. */
table.sr-only { table-layout:fixed; }
.skip-link { position:absolute; left:12px; top:-52px; z-index:120; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:var(--r-sm); font-size:0.875rem; font-weight:600; text-decoration:none; transition:top .18s var(--ease); }
.skip-link:focus { top:12px; outline:2px solid #fff; outline-offset:2px; }

/* ── Site chrome: frosted sticky header ─────────────────────────────────── */
.site-head { position:sticky; top:0; z-index:100; transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent; }
.site-head.scrolled { background:rgba(246,248,250,.72); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--hairline); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px -16px rgba(23,32,48,.4); }
.site-head-in { max-width:var(--wrap); margin:0 auto; padding:12px clamp(18px,4vw,32px); display:flex; align-items:center; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-0.01em; }
.brand-mark { width:26px; height:26px; color:var(--accent); flex:none; transition:color .25s var(--ease); }
/* Hover: brighten the mark (no motion), so the wordmark feels alive without bouncing. */
.brand:hover .brand-mark { color:var(--accent-hover); }
.site-nav { display:flex; gap:2px; margin-left:auto; font-size:0.9rem; font-weight:500; }
.site-nav a { position:relative; color:var(--ink-soft); text-decoration:none; white-space:nowrap; padding:8px 12px; border-radius:9999px;
  transition:color .2s var(--ease), background .2s var(--ease); }
.site-nav a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px;
  background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.site-nav a:hover { color:var(--ink); }
.site-nav a:hover::after { transform:scaleX(1); }
.site-nav a.on { color:var(--accent); }
.site-nav a.on::after { background:var(--accent); transform:scaleX(1); }

/* Hamburger → fullscreen overlay (mobile only). */
.nav-toggle { display:none; margin-left:auto; width:48px; height:48px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:9999px; }
.nav-toggle span { display:block; width:24px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity:0; }
.nav-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Light/dark toggle — sits after the nav on desktop, beside the hamburger on
   mobile. Shows a moon in light mode (tap for dark), a sun in dark mode. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:9999px;
  transition:color .2s var(--ease), background .25s var(--ease); }
.theme-toggle:hover { color:var(--ink); background:var(--flat-bg); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle svg { width:20px; height:20px; display:block; }
.theme-toggle .ic-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display:none; }

.nav-overlay { position:fixed; inset:0; z-index:110; background:rgba(246,248,250,.86); backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease); }
/* When closed (hidden attr) it must not exist in the layer at all, or an
   invisible full-screen layer would swallow every click on the page. */
.nav-overlay[hidden] { display:none; }
.nav-overlay.show { opacity:1; pointer-events:auto; }
.nav-overlay nav { display:flex; flex-direction:column; gap:6px; padding:24px; width:100%; max-width:440px; }
.nav-overlay a { display:flex; align-items:baseline; gap:16px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,7vw,2.2rem); color:var(--ink); text-decoration:none; padding:10px 4px; border-bottom:1px solid var(--hairline);
  transform:translateY(14px); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), color .2s var(--ease); }
.nav-overlay a:hover { color:var(--accent); }
.nav-overlay .no-i { font-family:var(--font-sans); font-size:0.8rem; font-weight:600; color:var(--clay); letter-spacing:.05em; }
.nav-overlay.show a { transform:none; opacity:1; }
.nav-overlay.show a:nth-child(1){transition-delay:.04s} .nav-overlay.show a:nth-child(2){transition-delay:.08s}
.nav-overlay.show a:nth-child(3){transition-delay:.12s} .nav-overlay.show a:nth-child(4){transition-delay:.16s}
.nav-overlay.show a:nth-child(5){transition-delay:.20s} .nav-overlay.show a:nth-child(6){transition-delay:.24s}
body.nav-open { overflow:hidden; }

section { scroll-margin-top:72px; margin-top:clamp(28px,4vw,44px); }

/* ── Scroll-reveal: gentle drift-in for key blocks ──────────────────────── */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-io), transform .7s var(--ease-io); will-change:opacity, transform; }
/* Release the compositor layer once revealed — the hint is only useful while
   the one-shot reveal is in flight; leaving it on keeps ~9 home-page elements
   promoted for the life of the page. */
[data-reveal].in { opacity:1; transform:none; will-change:auto; }
[data-reveal][data-reveal="left"] { transform:translateX(-22px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot { margin-top:clamp(48px,8vw,96px); background:var(--paper-2); border-top:1px solid var(--hairline); }
.site-foot-in { max-width:var(--wrap); margin:0 auto; padding:clamp(36px,5vw,52px) clamp(18px,4vw,32px) clamp(40px,6vw,60px); font-size:0.9rem; color:var(--muted); }
.foot-top { display:flex; flex-wrap:wrap; gap:32px 48px; justify-content:space-between; margin:0 0 24px; }
.foot-lead { flex:1 1 320px; max-width:52ch; }
.foot-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin:0 0 14px; }
.foot-mark { width:26px; height:26px; color:var(--accent); flex:none; }
.foot-name { font-family:var(--font-display); font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; color:var(--ink); }
.foot-name b { font-weight:600; color:var(--accent); }
.foot-word { margin:0; font-size:1rem; line-height:1.55; color:var(--ink-soft); }
.foot-nav { display:flex; gap:40px; flex:0 0 auto; }
.foot-col { display:flex; flex-direction:column; gap:9px; }
.foot-col h2 { margin:0 0 4px; font-size:0.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.foot-col a { color:var(--ink-soft); text-decoration:none; }
.foot-col a:hover { color:var(--accent); }
.foot-fresh { margin:0 0 10px; font-weight:600; color:var(--ink-soft); }
.foot-src { margin:0; max-width:80ch; line-height:1.6; }
.site-foot a { color:var(--accent); }
/* Footer email-capture card. NB: .foot-signup is a <form>, so the generic
   `form` rule (border/radius/shadow/background) already makes it a card — we
   own the padding + layout here so content sits inside it, properly aligned. */
.foot-signup { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 48px; margin:0 0 36px; padding:clamp(24px,3.2vw,34px); box-shadow:var(--shadow-sm); }
.fs-copy { flex:1 1 300px; }
.fs-title { font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--ink); margin:0 0 6px; }
.fs-note { margin:0; font-size:0.9rem; color:var(--muted); max-width:52ch; line-height:1.5; }
/* min-width:0 lets the form column shrink to the card width on narrow screens
   instead of holding its content's natural width and overflowing (the input
   then absorbs the shrink; the button keeps its size). */
.fs-form { flex:1 1 300px; min-width:0; }
.fs-row { display:flex; gap:8px; }
.fs-row input { flex:1 1 auto; min-width:0; font:inherit; font-size:0.95rem; padding:11px 15px; min-height:48px; border:1px solid var(--hairline-2); border-radius:9999px; background:var(--surface); color:var(--ink); }
.fs-row input::placeholder { color:var(--muted); }
.fs-row input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.fs-row .btn { flex:none; white-space:nowrap; }
.fs-status { margin:8px 0 0; font-size:0.85rem; color:var(--ink-soft); min-height:1.1em; }
/* Post-submit confirmation: replaces the whole capture card. */
.fs-done { flex:1 1 100%; display:flex; align-items:center; gap:16px; }
.fs-check { flex:none; width:44px; height:44px; }
.fs-done-copy .fs-title { margin:0 0 4px; }
.fs-done-copy .fs-note { max-width:60ch; }
@media (max-width:560px){ .foot-nav { gap:32px; } }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1 { font-family:var(--font-display); font-weight:500; font-size:var(--t-h1); line-height:1.04; letter-spacing:-0.02em; margin:0 0 16px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--clay); font-weight:600; margin:0 0 16px; }
.kicker::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--clay); }
.lede { color:var(--ink-soft); font-size:var(--t-lede); line-height:1.5; margin:0 0 14px; }
.meta { font-size:0.875rem; color:var(--muted); margin:0 0 40px; }
.meta strong { color:var(--ink); font-weight:600; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }

/* ── Editorial hero (home) — asymmetric text + illustration ──────────────── */
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(20px,4vw,48px); align-items:center;
  margin:clamp(12px,3vw,36px) 0 clamp(28px,5vw,52px); }
.hero-copy, .hero-art { min-width:0; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { font-size:var(--t-hero); font-weight:600; }
.hero h1 em { font-style:italic; font-weight:700; color:var(--clay); }
.hero .lede { max-width:46ch; }
.hero-art { position:relative; }
.hero-art svg { display:block; width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(23,32,48,.14)); }
/* Slight overlap: the hero art nudges under the copy on wide screens. */
@media (min-width:861px) { .hero-art { margin-left:-6%; } }

.spot { display:block; }
.search-hero { margin:24px 0 14px; max-width:520px; }
.search-hero input { padding:15px 18px; font-size:1.05rem; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 10px; }

/* ── Combobox / inputs ──────────────────────────────────────────────────── */
.combo { position:relative; }
.combo input, select, input[type="number"] { width:100%; padding:12px 15px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); font-variant-numeric:tabular-nums; }
.combo input { box-shadow:none; }
.combo input:focus, select:focus, input[type="number"]:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.combo input::placeholder { color:var(--muted); }
select { font-variant-numeric:tabular-nums; }
.combo-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:322px; overflow-y:auto; padding:4px; }
.combo-opt { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; font-size:0.95rem; cursor:pointer; border-radius:var(--r-sm); }
.combo-opt.hi { background:var(--accent-soft); }
/* Pointer hover gets the same affordance as the keyboard `.hi` highlight, so
   mousing the type-ahead list gives feedback before the click. */
.combo-opt:hover { background:var(--accent-soft); }
.combo-kind { font-size:0.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); align-self:center; white-space:nowrap; }
.combo-none { padding:10px 12px; font-size:0.875rem; color:var(--muted); font-style:italic; }

/* "Rents near me" pill + quick links. */
.near-btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:0.9rem; font-weight:600; min-height:44px;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px;
  padding:8px 18px; cursor:pointer; transition:transform .25s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease); }
.near-btn:hover { background:#D6E7E2; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.near-btn:disabled { opacity:.7; cursor:default; }
.near-btn svg { width:16px; height:16px; }

/* Busiest markets strip. */
#busiest:empty { display:none; }
.busiest-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; padding-top:22px; border-top:1px solid var(--hairline); }
.bs-label { font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-weight:700; }
.bs-links { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.95rem; }
.bs-links a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline-2); transition:color .2s var(--ease), border-color .2s var(--ease); }
.bs-links a:hover { color:var(--accent); border-color:var(--accent); }
.bs-note { font-size:0.85rem; color:var(--muted); margin:12px 0 0; max-width:64ch; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
form { display:grid; gap:22px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow-md); }
label { display:block; font-size:0.875rem; font-weight:600; margin:0 0 7px; color:var(--ink-soft); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hint { font-size:0.78rem; color:var(--muted); margin:6px 0 0; }
/* Loading skeleton: a soft shimmer so a section never flashes blank. */
.skel { background:var(--flat-bg); border-radius:var(--r-sm); position:relative; overflow:hidden; }
.skel + .skel { margin-top:12px; }
.skel-title { height:34px; width:52%; margin-bottom:20px; border-radius:var(--r-sm); }
.skel-line { height:14px; }
.skel-line:nth-child(3) { width:92%; } .skel-line:nth-child(4) { width:78%; } .skel-line:last-child { width:60%; }
.skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:skel-shimmer 1.4s var(--ease) infinite; }
@keyframes skel-shimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } }
.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:0.95rem; color:#fff; background:var(--accent);
  border:0; border-radius:9999px; padding:13px 24px; min-height:48px; cursor:pointer; justify-self:start;
  box-shadow:0 6px 18px -6px rgba(21,96,127,.5); transition:transform .25s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(21,96,127,.55); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* The cerulean glow all but vanishes on the near-black dark paper; a dark
   ambient shadow keeps the flagship button's lift visible after dark. */
:root[data-theme="dark"] .btn { box-shadow:0 6px 18px -6px rgba(0,0,0,.55); }
:root[data-theme="dark"] .btn:hover { box-shadow:0 10px 26px -8px rgba(0,0,0,.6); }

/* ── Rent-position rail ─────────────────────────────────────────────────── */
.rentbar { position:relative; height:14px; border-radius:9999px; background:var(--flat-bg); margin:48px 0 12px; }
.rentbar-fill { position:absolute; top:0; bottom:0; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px; }
.rentbar-med { position:absolute; top:-4px; width:3px; height:22px; margin-left:-1.5px; background:var(--accent); border-radius:2px; }
.rentbar-you { position:absolute; top:-38px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:2; }
.rentbar-you .pin-lbl { font-size:0.75rem; font-weight:600; color:var(--surface); background:var(--ink); padding:4px 10px; border-radius:9999px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.rentbar-you .pin-stem { width:2px; height:18px; background:var(--ink); }
.rentbar-legend { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:0.8125rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.rentbar-legend b { color:var(--ink); font-weight:600; }
.rentbar-legend .mid b { color:var(--accent); }
.vsnat { font-size:0.95rem; color:var(--muted); margin:12px 0 0; font-variant-numeric:tabular-nums; }
.vsnat strong { color:var(--ink); font-weight:600; }
.chk-verdict { font-size:var(--t-lede); margin:0 0 6px; }
.chk-verdict strong { font-weight:600; }
.distrib { margin:20px 0 0; }
.distrib svg { display:block; width:100%; height:auto; }
.distrib .distrib-med { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:3 3; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-md); }
.card + .card { margin-top:clamp(20px,3vw,28px); }
.footnote { font-size:0.78rem; color:var(--muted); margin:18px 0 0; }

/* ── Full-bleed pull-quote band (clay-tinted editorial breather) ─────────── */
#pullquote:empty { display:none; }
.pullquote { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:clamp(48px,8vw,88px) 24px;
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(79,182,208,.16), transparent 60%),
    linear-gradient(135deg, var(--clay-soft), var(--honey-soft)); }
.pullquote .pq-inner { max-width:760px; margin:0 auto; text-align:center; }
.pq-eyebrow { font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--clay); font-weight:700; margin:0 0 18px; }
.pq-lead { font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem, 3.8vw, 2.9rem); line-height:1.18;
  margin:0; color:var(--ink); letter-spacing:-0.02em; }
.pq-lead b { font-weight:600; color:var(--clay); white-space:nowrap; }
.pq-foot { font-size:0.8125rem; color:var(--muted); margin:22px auto 0; max-width:56ch; }

/* ── Loading skeletons ──────────────────────────────────────────────────── */
.skel { pointer-events:none; }
.skel-line { background:var(--hairline); border-radius:var(--r-sm); position:relative; overflow:hidden; }
.skel-line::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%); animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }
.skel-kicker { width:118px; height:11px; margin:0 0 14px; }
.skel-title { width:min(340px,70%); height:26px; margin:0 0 22px; }
.skel-block { width:100%; height:150px; border-radius:var(--r-md); }
.skel-row { display:flex; gap:10px; margin-top:16px; }
.skel-row .skel-line { flex:1; height:40px; }
.skel-bars { display:grid; gap:14px; }
.skel-bar { height:15px; }
.skel-hs .skel-hs-num { width:60%; height:26px; }
.skel-hs .skel-hs-lbl { width:88%; height:11px; }

/* ── Section furniture ──────────────────────────────────────────────────── */
.snap-kicker { display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay); font-weight:700; margin:0 0 10px; }
.snap-kicker::before { content:""; width:18px; height:2px; border-radius:2px; background:var(--clay); }
.snap-title { font-family:var(--font-display); font-weight:500; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.015em; margin:0 0 16px; }
.snap-median { font-family:var(--font-display); font-weight:500; font-size:var(--t-h2); line-height:1.1; margin:0 0 4px; font-variant-numeric:tabular-nums; }
.snap-median .per { font-family:var(--font-sans); font-size:0.875rem; color:var(--muted); font-weight:400; margin-left:6px; }
.snap-range { font-size:0.875rem; color:var(--muted); margin:0; font-variant-numeric:tabular-nums; }
.story { font-size:var(--t-lede); line-height:1.5; margin:0; color:var(--ink-soft); }
.sec-note { font-size:0.85rem; color:var(--muted); margin:14px 0 0; max-width:64ch; }
.sec-note a { color:var(--accent); text-decoration:none; } .sec-note a:hover { text-decoration:underline; }

/* Movers lists. */
.movers { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:22px 0 0; }
.movers.cols3 { grid-template-columns:1fr 1fr 1fr; }
.movers.board-grid { grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:24px 30px; }
.movers h3 { font-family:var(--font-display); font-size:1.2rem; letter-spacing:-0.01em; text-transform:none; color:var(--ink); font-weight:500; margin:0 0 10px; }
.movers ol { list-style:none; margin:0; padding:0; }
.movers li { border-bottom:1px solid var(--hairline); font-size:0.95rem; }
.movers li:last-child { border-bottom:0; }
.movers li a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; text-decoration:none; color:inherit; }
.movers li span:first-child { overflow-wrap:anywhere; min-width:0; }
.movers li a:hover span:first-child { color:var(--accent); }
.movers .num { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.movers .pct { color:var(--muted); font-weight:400; }

/* Charts. */
.chart-head { display:flex; justify-content:flex-end; margin:18px 0 0; }
.seg { display:inline-flex; border:1px solid var(--hairline-2); border-radius:9999px; padding:3px; gap:2px; background:var(--surface); box-shadow:var(--shadow-sm); }
.seg button { font:inherit; font-size:0.8125rem; font-weight:600; border:0; background:transparent; color:var(--muted); padding:5px 14px; min-height:36px; display:inline-flex; align-items:center; border-radius:9999px; cursor:pointer; transition:color .2s var(--ease), background .3s var(--ease); }
.seg button.on { background:var(--accent); color:#fff; }
.seg button:not(.on):hover { color:var(--ink); }
.chart { position:relative; margin:10px 0 2px; }
.spark { display:block; width:100%; height:auto; touch-action:pan-y; }
.spark:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.tip { position:absolute; pointer-events:none; background:var(--ink); color:var(--paper); font-size:0.75rem; line-height:1.35;
  padding:8px 11px; border-radius:var(--r-sm); white-space:nowrap; transform:translate(-50%,-135%); font-variant-numeric:tabular-nums; box-shadow:var(--shadow-md); }
/* Dimmed detail text inside the tooltip: the tooltip's own text colour at
   reduced opacity, so it stays the right cool tone and adapts automatically
   when the tooltip flips background between light and dark themes. */
.tip .dim { color:inherit; opacity:.62; }
.chart-note { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--muted); margin:6px 0 0; }
.chart-note svg { flex:none; }
.chart-legend { display:flex; flex-wrap:wrap; gap:4px 8px; font-size:0.75rem; color:var(--muted); margin:8px 0 0; }
/* Each legend item is a show/hide switch: a real button, dimmed when its line
   is hidden. Keyboard-focusable with a clear ring. */
.chart-legend .cl { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; min-height:36px; margin:0; border:1px solid var(--hairline); border-radius:999px; background:var(--surface); color:var(--muted); font:inherit; font-size:0.75rem; line-height:1.1; cursor:pointer; transition:background .12s, border-color .12s, opacity .12s; }
.chart-legend .cl:hover { border-color:var(--hairline-2); color:var(--ink-soft); }
.chart-legend .cl:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chart-legend .cl.off { opacity:0.5; }
.chart-legend .cl.off .cl-line { opacity:0.4; }
.chart-legend .cl-line { width:18px; height:0; flex:none; border-top:2px solid var(--accent); }
.chart-legend .cl-line.ref { border-top:1.5px dashed var(--muted); }
.chart-legend .cl-line.ma { border-top:2px solid var(--honey); }
.chart-legend .cl-line.trend { border-top:2px dashed var(--clay); }
/* The quartile-range swatch is a filled block, not a line. */
.chart-legend .cl-line.bandsw { height:10px; border-top:0; border-radius:2px; background:var(--accent); opacity:0.18; }
.trend { font-size:0.95rem; margin:14px 0 0; }
.trend .caveat { display:block; font-size:0.8125rem; color:var(--muted); font-weight:400; margin-top:2px; }
.note { font-size:0.8125rem; color:var(--med-fg); margin:12px 0 0; }
.horizons { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--hairline); }
.stat .lbl { display:block; font-size:0.75rem; color:var(--muted); }
.stat .val { font-weight:700; font-variant-numeric:tabular-nums; font-size:1.05rem; }
.stat .pct { color:var(--muted); font-weight:400; }

/* Tables. */
/* Wide tables (6–7 numeric columns) scroll sideways on narrow screens instead
   of being clipped by html{overflow-x:clip}. A hairline hints there's more. */
.tbl-scroll, .card > .tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll > table { min-width:520px; }
/* Scroll affordance: a soft shadow at whichever edge has more table off-screen,
   so a phone user can tell the wide table scrolls sideways. Pure CSS (Lea
   Verou's technique) — the cover gradients scroll WITH the content and unmask
   the shadow only when there's more to see. */
.tbl-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 36px 100% no-repeat,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 36px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(10,20,30,.16), transparent) 0 0 / 16px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(10,20,30,.16), transparent) 100% 0 / 16px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* A long table (the full ranking) keeps its column labels in view: on desktop
   it needs no sideways scroll, so we drop the scroll container and stick the
   header just below the site header. On mobile it stays horizontally scrollable
   (a scroll container can't also do a sticky header). */
@media (min-width:760px) {
  .card > .tbl.tbl-tall { overflow:visible; }
  .tbl-tall thead th { position:sticky; top:64px; z-index:2; background:var(--surface); box-shadow:0 1px 0 var(--hairline-2); }
}
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:0.9rem; }
th { text-align:left; font-weight:600; color:var(--muted); font-size:0.72rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 0; border-bottom:1px solid var(--hairline-2); }
td { padding:10px 0; border-bottom:1px solid var(--hairline); overflow-wrap:anywhere; }
td.num { overflow-wrap:normal; white-space:nowrap; padding-left:10px; }
tr:last-child td { border-bottom:0; }
.num { text-align:right; }
.sup { color:var(--muted); font-style:italic; }
/* Thin-sample tag: an "indicative" flag on rows under 20 lodged bonds. */
.samp { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--med-fg); background:var(--honey-soft); padding:2px 7px; border-radius:9999px; margin-left:7px; vertical-align:middle; }
.months { border:1px solid var(--hairline); border-radius:var(--r-md); margin:20px 0 0; overflow:hidden; }
.months summary { cursor:pointer; padding:13px 16px; font-size:0.9rem; font-weight:600; list-style:none; transition:background .2s var(--ease); }
.months summary:hover { background:var(--paper); }
.months summary::-webkit-details-marker { display:none; }
.months summary::before { content:"+ "; color:var(--accent); font-weight:700; }
.months[open] summary::before { content:"– "; }
/* The collapsible figures table nests .tbl inside .months, so the .card>.tbl
   scroll rule misses it; give it its own horizontal-scroll safety net. */
.months .tbl { padding:0 16px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#area-table tbody tr, .region-table tbody tr { cursor:pointer; }
#area-table tbody tr:hover td, .region-table tbody tr:hover td { background:var(--paper); }
#area-table tbody tr.sel td { background:var(--accent-soft); }
/* The first-cell "chart this cell" activator: looks like the cell's label, but
   is a real focusable button so the row is keyboard-operable while its <td>s
   stay cells for assistive tech. */
#area-table td .row-pick { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; text-align:left; width:100%; cursor:pointer; }
#area-table td .row-pick:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
/* Grouped "everything published" table: a property-type heading per group. */
#area-table tr.grp { cursor:default; }
#area-table tr.grp th { font-family:var(--font-display); font-weight:500; font-size:0.98rem; color:var(--ink);
  text-transform:none; letter-spacing:0; padding:18px 0 6px; border-bottom:1px solid var(--hairline-2); }
#area-table tr.grp:first-child th { padding-top:2px; }
#area-table tr.grp:hover th { background:transparent; }

/* The cell filter above the suburb chart: two rows of always-visible pills
   (property type, bedroom size) so every published combination is one click
   away — no dropdown to open, and back-series-only cells read as greyed. */
.cell-filter { display:flex; flex-direction:column; gap:9px; margin:0 0 20px; }
.pill-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pill-group .cf-label { flex:none; width:74px; font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-weight:700; }
.pill { font:inherit; font-size:0.8125rem; font-weight:600; line-height:1; color:var(--muted);
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:9999px;
  padding:8px 15px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:color .2s var(--ease), background .25s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.pill:not(:disabled):hover { color:var(--ink); border-color:var(--accent); transform:translateY(-1px); }
.pill.on { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow-md); }
.pill:disabled { color:var(--muted); opacity:.4; cursor:not-allowed; box-shadow:none; border-style:dashed; }
@media (max-width:560px) {
  .pill-group .cf-label { width:100%; }
}

/* Suburb / umbrella-suburb: the "Show me" picker is integrated into the top of
   the figure card (figure on the left, picker on the right), so the chart and
   the full table below run edge-to-edge. On narrow screens the picker drops
   under the figure. The picker is a persistent node the script relocates into
   this header on each render; its home sits after the card. */
.cell-main { min-width:0; margin-bottom:clamp(20px,3vw,28px); }
.cell-form-home:empty { display:none; }
.cell-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px clamp(18px,3vw,34px); flex-wrap:wrap; }
.cell-head-main { flex:1 1 320px; min-width:0; }
.cell-head-main > :last-child { margin-bottom:0; }
.cell-pick-slot { flex:0 1 auto; }
.cell-form { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px 16px 15px; box-shadow:var(--shadow-sm); min-width:228px; max-width:330px; }
.cell-form .cell-side-title { margin:0 0 11px; font-family:var(--font-display); font-weight:600; font-size:0.95rem; color:var(--ink); }
.cell-form .cell-filter { gap:11px; margin:0; }
.cell-form .cf-label { width:100%; margin-bottom:1px; }
.cell-form .cell-side-hint { margin:12px 0 0; font-size:0.78rem; line-height:1.45; color:var(--muted); }
@media (max-width:760px) {
  .cell-head { gap:14px; }
  .cell-pick-slot { width:100%; }
  .cell-form { max-width:none; }
}

/* ── Page furniture ─────────────────────────────────────────────────────── */
.page-title { font-family:var(--font-display); font-weight:500; font-size:var(--t-h1); line-height:1.05; letter-spacing:-0.02em; margin:0 0 12px; }
/* Page-level actions (Share/Save) sit on the title row, right-aligned, instead
   of on their own row pushing the content down. Wraps under on narrow screens. */
.title-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 16px; margin:0 0 12px; }
.title-row .page-title { margin:0; }
.title-row .share-slot, .title-row .action-row { margin-top:4px; }
.crumbs { font-size:0.8125rem; color:var(--muted); margin:0 0 14px; }
/* Underline the ancestor links: in a muted crumb trail, colour alone doesn't
   distinguish link from separator/text (WCAG 1.4.1 Use of Color). */
.crumbs a { color:var(--muted); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:var(--hairline-2); }
.crumbs a:hover { color:var(--accent); text-decoration-color:currentColor; }
.subnav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.subnav a, .subnav button { font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:7px 15px; min-height:36px; display:inline-flex; align-items:center; cursor:pointer;
  border:1px solid var(--hairline-2); border-radius:9999px; background:var(--surface); transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.subnav a:hover, .subnav button:hover { color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); }
.subnav a.on, .subnav button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

.explore-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.explore-grid a { position:relative; display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); overflow:hidden; }
.explore-grid a::after { content:"→"; position:absolute; top:24px; right:24px; color:var(--clay); font-size:1.1rem; opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.explore-grid a:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent-line); }
.explore-grid a:hover::after { opacity:1; transform:none; }
.explore-grid strong { display:block; font-family:var(--font-display); font-weight:500; font-size:1.25rem; margin:0 0 8px; }
.explore-grid span { font-size:0.9rem; color:var(--muted); }

.suburb-list { list-style:none; margin:0; padding:0; columns:2; column-gap:28px; font-size:0.95rem; }
.suburb-list li { break-inside:avoid; padding:6px 0; }
.suburb-list a { text-decoration:none; }
.suburb-list a:hover { text-decoration:underline; }

/* Nearby-suburbs list. */
.nearby-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:2px 24px; }
.nearby-list a { display:flex; align-items:baseline; gap:8px; padding:9px 0; text-decoration:none; color:inherit; border-bottom:1px solid var(--hairline); }
.nearby-list a:hover .nb-name { color:var(--accent); }
.nearby-list .nb-name { font-weight:500; }
.nearby-list .nb-med { color:var(--ink); font-variant-numeric:tabular-nums; margin-left:auto; }
.nearby-list .nb-med.sup { color:var(--muted); }
.nearby-list .nb-dist { flex-basis:100%; font-size:0.75rem; color:var(--muted); margin-top:-4px; }

/* Regions index grouped by island. */
.island-group { margin-top:26px; }
.island-group:first-of-type { margin-top:6px; }
/* Regions page: the small NZ rent map (SVG projected server-side). */
.region-map-wrap { display:flex; justify-content:center; margin:18px 0 8px; }
.region-map { width:100%; max-width:360px; height:auto; }
.rm-dots circle { fill:var(--hairline-2); }
:root[data-theme="dark"] .rm-dots circle { fill:var(--hairline); }
.rm-marker { cursor:pointer; }
.rm-lead { stroke:var(--hairline-2); stroke-width:0.8; }
.rm-dot { stroke:var(--surface); stroke-width:1.5; transition:r .12s var(--ease); }
.rm-up .rm-dot { fill:var(--up); } .rm-down .rm-dot { fill:var(--down); } .rm-flat .rm-dot { fill:var(--muted); }
.rm-name { font-family:var(--font-sans); font-size:8.5px; font-weight:700; fill:var(--ink); }
.rm-fig { font-family:var(--font-sans); font-size:8px; font-weight:600; fill:var(--muted); font-variant-numeric:tabular-nums; }
.rm-marker:hover .rm-dot, .rm-marker:focus-visible .rm-dot { r:9.5; }
.rm-marker:hover .rm-name, .rm-marker:focus-visible .rm-name { fill:var(--accent); }
.rm-marker:focus-visible { outline:none; }
.island-h { font-family:var(--font-display); font-weight:500; font-size:1.2rem; margin:0 0 10px; display:flex; align-items:baseline; gap:10px; }
.island-h span { font-family:var(--font-sans); font-size:0.75rem; font-weight:500; color:var(--muted); letter-spacing:.02em; }
.about ul { margin:0; padding:0 0 0 20px; display:grid; gap:12px; font-size:0.95rem; }

/* ── Figure block: median + quartile rail + fact chips ──────────────────── */
.fig-median { font-family:var(--font-display); font-weight:500; font-size:clamp(2.2rem,5vw,2.9rem); line-height:1.02; margin:0; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.fig-median .per { font-family:var(--font-sans); font-size:0.9375rem; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:0; }
.fig-unpub { font-family:var(--font-display); font-weight:500; font-size:1.85rem; color:var(--muted); margin:0; }
.qbar { position:relative; height:12px; border-radius:9999px; background:var(--flat-bg); margin:20px 0 8px; max-width:380px; }
.qbar-fill { position:absolute; top:0; bottom:0; left:var(--lo,0%); right:calc(100% - var(--hi,100%)); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px; }
.qbar-med { position:absolute; top:-4px; left:var(--md,50%); width:3px; height:20px; margin-left:-1.5px; background:var(--accent); border-radius:2px; }
.qbar-scale { display:flex; justify-content:space-between; max-width:380px; font-size:0.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.qbar-scale b { color:var(--ink); font-weight:600; }
.qbar-scale .mid { color:var(--accent); font-weight:600; }

.chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 0; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; padding:6px 13px; border-radius:9999px;
  background:var(--flat-bg); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; max-width:100%; }
.chip svg { width:14px; height:14px; flex:none; opacity:.9; }
.chip.on-accent { background:var(--accent-soft); color:var(--accent); }
/* Thin-sample warning: the headline's bond-count chip when under 20 lodged. */
.chip.warn { background:var(--honey-soft); color:var(--med-fg); }
.chip.warn .chip-sub { color:var(--med-fg); opacity:.85; }
.chip .chip-sub { color:var(--muted); font-weight:400; }

/* Direction delta. */
.delta { display:inline-flex; align-items:center; gap:4px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.delta svg { width:12px; height:12px; }
.delta.up { color:var(--up); } .delta.down { color:var(--down); } .delta.flat { color:var(--muted); }
.delta.pill { padding:5px 11px; border-radius:9999px; font-size:0.8125rem; }
.delta.pill.up { background:var(--up-bg); } .delta.pill.down { background:var(--down-bg); } .delta.pill.flat { background:var(--flat-bg); }

/* Region cards + district stories. */
.region-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin:18px 0 0; }
.region-card { display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.region-card:hover { transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.region-card .rc-name { font-weight:600; font-size:0.95rem; overflow-wrap:anywhere; }
.region-card .rc-fig { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.region-card .rc-median { font-family:var(--font-display); font-weight:500; font-size:1.45rem; font-variant-numeric:tabular-nums; }
.region-card .rc-median.sup { font-size:0.95rem; color:var(--muted); font-style:italic; }
.region-card .rc-sub { font-size:0.75rem; color:var(--muted); }
.story-split { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:20px 0 0; }
.story-split h3 { display:flex; align-items:center; gap:7px; font-size:0.8125rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; margin:0 0 6px; }
.story-split h3.up { color:var(--up); } .story-split h3.down { color:var(--down); }
.story-split h3 svg { width:13px; height:13px; }
.dist-list { list-style:none; margin:0; padding:0; }
.dist-list li { border-bottom:1px solid var(--hairline); font-size:0.95rem; }
.dist-list li:last-child { border-bottom:0; }
.dist-list li a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; text-decoration:none; color:inherit; }
.dist-list li a:hover span:first-child { color:var(--accent); }
.dist-rest { margin-top:22px; }
.dist-rest h3.flat { display:flex; align-items:center; gap:7px; font-size:0.8125rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--muted); margin:0 0 6px; }
.dist-rest h3.flat svg { width:13px; height:13px; }
.dist-list-wide { display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
@media (max-width:620px){ .dist-list-wide { grid-template-columns:1fr; } }
.dist-fig { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.dist-fig .num { font-variant-numeric:tabular-nums; font-weight:600; }
.dist-bonds { color:var(--muted); font-size:0.82rem; white-space:nowrap; }

.region-panel { margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline); }
.region-title { font-family:var(--font-display); font-weight:500; font-size:1.2rem; margin:0 0 10px; }
.kind-tag { font-family:var(--font-sans); font-size:0.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-left:4px; }
.cmp-grid { display:grid; gap:16px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:0.8125rem; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:9999px; display:inline-block; margin-right:5px; }
.sortable { cursor:pointer; user-select:none; }
.sortable:hover, .sortable.on { color:var(--ink); }
/* A caret makes sortability discoverable and shows the active direction. */
th.sortable::after { content:"↕"; margin-left:5px; opacity:.3; font-weight:400; }
th.sortable:hover::after { opacity:.55; }
th.sortable.on.asc::after { content:"↑"; opacity:.9; }
th.sortable.on.desc::after { content:"↓"; opacity:.9; }
th.sortable.on:not(.asc):not(.desc)::after { opacity:.9; }
/* Copy-value button beside a figure */
.copy-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-left:10px; padding:0;
  vertical-align:middle; color:var(--muted); background:transparent; border:1px solid var(--hairline-2); border-radius:7px; cursor:pointer;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.copy-btn svg { width:13px; height:13px; }
.copy-btn:hover { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.copy-btn.done { color:var(--pos); border-color:var(--pos); }
.fig-median .copy-btn { position:relative; top:-0.35em; }

/* Quartile-spread line under a figure */
.fig-spread { font-size:0.92rem; color:var(--muted); margin:12px 0 0; }

/* Server-rendered figure summary (shown before the page script hydrates) */
.fig-sample { font-size:0.875rem; color:var(--muted); margin:10px 0 0; font-variant-numeric:tabular-nums; }
.ssr-lead { font-size:0.98rem; color:var(--ink-soft); margin:14px 0 0; max-width:60ch; }

/* FAQ page: a definition list of questions and plain answers */
.faq-list { margin:0; }
.faq-list dt { font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--ink); margin:0 0 8px; }
.faq-list dt:not(:first-child) { margin-top:26px; padding-top:26px; border-top:1px solid var(--hairline); }
.faq-list dd { margin:0; color:var(--ink-soft); max-width:66ch; line-height:1.6; }

/* Quarterly report pages */
.report-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:16px; }
.rcard { margin:0; }
.rlist { list-style:none; margin:10px 0 0; padding:0; }
.rlist li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--hairline); }
.rlist li:first-child { border-top:0; }
.rlist li a { font-weight:600; color:var(--ink); text-decoration:none; }
.rlist li a:hover { color:var(--accent); text-decoration:underline; }
.rmeta { color:var(--muted); font-variant-numeric:tabular-nums; font-size:0.9rem; white-space:nowrap; }
.rindex { display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:14px; margin-top:8px; }
.rindex-item { display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--surface); text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), border-color .2s var(--ease); }
.rindex-item:hover { transform:translateY(-2px); border-color:var(--accent-line); }
.ri-period { font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--ink); }
.ri-med { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.ri-med .per { font-weight:400; color:var(--muted); font-size:0.8rem; }
.report-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--hairline); }
.report-nav a { font-weight:600; font-size:0.875rem; color:var(--accent); text-decoration:none; }
.report-nav a:hover { text-decoration:underline; }
.report-nav a[href="/reports"] { color:var(--muted); }

/* Glossary term: dotted underline + native tooltip */
.gloss { text-decoration:underline dotted; text-decoration-thickness:1px; text-underline-offset:3px; cursor:help; }

/* "Show the data table" toggle + the revealed table under a chart */
.table-toggle { font:inherit; font-size:0.85rem; font-weight:600; color:var(--accent); background:none; border:0; padding:8px 0 0; cursor:pointer; }
.table-toggle:hover { text-decoration:underline; }
.chart table:not(.sr-only) { width:100%; border-collapse:collapse; margin:8px 0 0; font-size:0.85rem; font-variant-numeric:tabular-nums; }
.chart table:not(.sr-only) th, .chart table:not(.sr-only) td { text-align:right; padding:6px 8px; border-bottom:1px solid var(--hairline); }
.chart table:not(.sr-only) caption { text-align:left; color:var(--muted); font-size:0.8rem; padding:2px 0 6px; }
.chart table:not(.sr-only) th:first-child, .chart table:not(.sr-only) td:first-child { text-align:left; }

/* Draw the main data line on first paint (off under reduced motion).
   A clip-path reveal, not the stroke-dash trick: the lines carry
   vector-effect:non-scaling-stroke (crisp screen-pixel strokes at any render
   size), which puts dash units in screen space and breaks pathLength math. */
@media (prefers-reduced-motion: no-preference) {
  .spark .dataline { clip-path:inset(0 100% 0 0); animation:draw-line .9s var(--ease-io) forwards; }
}
@keyframes draw-line { to { clip-path:inset(0 0 0 0); } }

/* Compare charts: hovering a legend entry lifts that series, the rest recede.
   Resting state keeps every line at equal weight — comparison first. */
.spark .series { transition:opacity .18s var(--ease); }
.spark.pick .series:not(.on) { opacity:0.18; }
.spark.pick .series.on polyline { stroke-width:2.5; }
.legend > span:hover { color:var(--ink); }

/* Save-to-watchlist button + saved-suburb chips */
.action-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.save-btn { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:0.9rem; font-weight:600;
  color:var(--muted); background:var(--surface); border:1px solid var(--hairline-2); border-radius:9999px;
  padding:8px 15px; min-height:40px; cursor:pointer; transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.save-btn svg { width:15px; height:15px; color:var(--hairline-2); transition:color .15s var(--ease); }
.save-btn:hover { border-color:var(--accent-line); color:var(--accent); }
.save-btn.on { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.save-btn.on svg { color:var(--gold); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.saved-chip { text-decoration:none; font-size:0.9rem; font-weight:600; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:9999px; padding:6px 14px; transition:transform .15s var(--ease); }
.saved-chip:hover { transform:translateY(-1px); }

/* Sample-size confidence chip beside a headline figure */
.conf { display:inline-block; vertical-align:middle; font-family:var(--font-sans); font-size:0.7rem; font-weight:700;
  letter-spacing:.02em; padding:3px 10px; border-radius:9999px; border:1px solid transparent; white-space:nowrap; }
.conf-high { color:var(--pos); background:var(--pos-bg); border-color:color-mix(in srgb, var(--pos) 30%, transparent); }
.conf-medium { color:var(--med-fg); background:var(--honey-soft); border-color:color-mix(in srgb, var(--med-fg) 30%, transparent); }
.conf-low { color:var(--muted); background:var(--flat-bg); border-color:var(--hairline-2); }
.note-spike { border-left:3px solid var(--clay); padding-left:12px; }

.rank-tbl tbody tr { cursor:pointer; }
.rank-tbl tbody tr:hover td { background:var(--paper); }
.rank-tbl .pct { color:var(--muted); font-weight:400; }

/* Contact form */
.contact-form { display:flex; flex-direction:column; gap:18px; max-width:560px; }
.contact-form .field { display:flex; flex-direction:column; gap:6px; }
.contact-form label { font-weight:600; font-size:0.92rem; color:var(--ink-soft); }
.contact-form input, .contact-form textarea { font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--r-sm); padding:11px 13px; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.contact-form textarea { resize:vertical; min-height:120px; }
.contact-form .hp, .foot-signup .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.contact-status { margin:0; font-size:0.92rem; }
.contact-status.ok { color:var(--pos); font-weight:600; }
.contact-status.err { color:var(--neg); font-weight:600; }
/* Contact: form (a card via the `form` rule) beside a "what to write about"
   panel, so the page gives people a reason and a route, not just a blank box. */
.contact-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(22px,3.5vw,48px); align-items:start; margin-top:24px; }
.contact-grid .contact-form { max-width:none; }
.contact-aside { align-self:start; }
.contact-h { font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); color:var(--ink); margin:0 0 16px; }
.contact-points { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:15px; }
.contact-points li { position:relative; padding-left:20px; font-size:0.95rem; line-height:1.5; color:var(--ink-soft); }
.contact-points li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--honey); }
.contact-points strong { color:var(--ink); font-weight:600; }
.contact-note { font-size:0.85rem; line-height:1.6; color:var(--muted); margin:0; }
@media (max-width:720px) { .contact-grid { grid-template-columns:1fr; } }

/* Stale-data warning banner */
.stale-banner { margin:0 0 20px; padding:12px 16px; border-radius:var(--r-md); font-size:0.92rem;
  color:var(--med-fg); background:var(--honey-soft); border:1px solid color-mix(in srgb, var(--med-fg) 30%, transparent); }

/* Ranked-table filter bar */
.rank-filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.rank-filters .rank-q, .rank-filters .rank-dir { font:inherit; font-size:0.92rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--r-sm); padding:9px 12px; min-height:42px; }
.rank-filters .rank-q { flex:1 1 200px; }
.rank-filters .rank-q:focus, .rank-filters .rank-dir:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.rank-empty { text-align:center !important; color:var(--muted); padding:24px 8px !important; }

/* Ranked-table pagination */
.pager { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:16px 0 4px; }
.pager:empty { display:none; }
.pg-btn { font:inherit; font-size:0.9rem; font-weight:600; color:var(--accent); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:9999px; padding:8px 16px; min-height:40px; cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
.pg-btn:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent-line); transform:translateY(-1px); }
.pg-btn:disabled { color:var(--muted); opacity:.5; cursor:default; }
.pg-info { font-size:0.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.pg-per { font-size:0.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.pg-per select { font:inherit; font-size:0.85rem; color:var(--ink); background:var(--surface); border:1px solid var(--hairline-2);
  border-radius:var(--r-sm); padding:6px 8px; min-height:36px; cursor:pointer; }
@media (max-width:520px){ .pg-page { display:none; } .pg-per { margin-left:0; } }

/* ── Home infographics ──────────────────────────────────────────────────── */
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:30px 0 6px; }
.hs { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.hs:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.hs-ico { color:var(--clay); height:22px; }
.hs-ico svg { width:22px; height:22px; display:block; }
.hs-num { font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1; font-variant-numeric:tabular-nums; }
.hs-num.pending { color:var(--hairline); }
.hs-lbl { font-size:0.78rem; color:var(--muted); line-height:1.35; }

/* National picture. */
.nat-fig { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:6px 0 0; }
.nat-median { font-family:var(--font-display); font-weight:500; font-size:clamp(2.4rem,5.5vw,3.1rem); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.nat-median .per { font-family:var(--font-sans); font-size:0.9375rem; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:0; }
.nat-spread { font-size:0.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.nat-spread b { color:var(--ink); font-weight:600; }

/* Proportion bar. */
.propbar { display:flex; height:44px; border-radius:var(--r-sm); overflow:hidden; margin:20px 0 16px; border:1px solid var(--hairline); box-shadow:var(--shadow-sm); }
.propbar span { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; font-size:0.8125rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; }
.propbar .up { background:var(--up); } .propbar .flat { background:var(--flat); } .propbar .down { background:var(--down); }
.prop-legend { display:flex; flex-wrap:wrap; gap:18px; font-size:0.8125rem; color:var(--muted); margin:0; }
.prop-legend span { display:inline-flex; align-items:center; gap:7px; }
.prop-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.prop-legend b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* Ranked / diverging bars. */
.bars-2 { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:18px 0 0; }
.bars-col > h3 { font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:7px; }
.bars-col > h3.up { color:var(--up); } .bars-col > h3.down { color:var(--down); }
.bars-col > h3 svg { width:15px; height:15px; flex:none; }
.bars { display:grid; gap:12px; }
.bar-row { display:block; text-decoration:none; color:inherit; }
.bar-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 5px; }
.bar-name { font-size:0.9rem; overflow-wrap:anywhere; }
a.bar-row:hover .bar-name { color:var(--accent); }
.bar-sub { font-size:0.6875rem; color:var(--muted); font-weight:400; margin-left:5px; white-space:nowrap; }
.bar-val { font-size:0.9rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-val.up { color:var(--up); } .bar-val.down { color:var(--down); }
.bar-track { height:9px; border-radius:9999px; background:var(--flat-bg); overflow:hidden; }
.bar-fill { height:100%; border-radius:9999px; background:linear-gradient(90deg, var(--accent), var(--accent-hover)); width:0; transition:width .7s var(--ease); }
.bar-fill.up { background:linear-gradient(90deg, var(--up), #0F5C39); }
.bar-fill.down { background:linear-gradient(90deg, var(--down), #9E2517); }

/* Data-pipeline explainer. */
.pipeline { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 22px; }
.pipe-step { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; transition:transform .3s var(--ease); }
.pipe-step:hover { transform:translateY(-2px); }
.pipe-n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9999px; background:var(--clay-soft); color:var(--clay); font-size:0.875rem; font-weight:700; margin:0 0 12px; }
.pipe-step h3 { font-family:var(--font-display); font-weight:500; font-size:1.05rem; margin:0 0 6px; }
.pipe-step p { font-size:0.8125rem; color:var(--muted); margin:0; line-height:1.5; }
.facts { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
.facts li { font-size:0.9rem; padding-left:24px; position:relative; }
.facts li svg { position:absolute; left:0; top:3px; width:15px; height:15px; color:var(--accent); }
.facts b { font-weight:600; }
.provenance { font-size:0.8125rem; color:var(--muted); margin:18px 0 0; padding-top:18px; border-top:1px solid var(--hairline); }
.provenance a { color:var(--accent); text-decoration:none; } .provenance a:hover { text-decoration:underline; }

/* Small-multiples. */
.traj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; margin:18px 0 0; }
.traj { display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.traj:hover { transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.traj-name { font-size:0.8125rem; font-weight:600; overflow-wrap:anywhere; }
.traj .micro { width:100%; height:40px; display:block; }
.traj-bot { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.traj-med { font-weight:700; font-variant-numeric:tabular-nums; }
.traj-bot .delta { font-size:0.75rem; }

.err { font-size:0.95rem; color:var(--muted); margin:0; }

/* "Get the data". */
.data-h { font-size:0.8125rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:24px 0 12px; }
.endpoints { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.endpoints li { display:flex; flex-direction:column; gap:4px; }
.endpoints code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:0.8125rem; color:var(--ink); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:7px 10px; overflow-wrap:anywhere; }
.endpoints code var { font-style:normal; color:var(--accent); }
.endpoints li > span { font-size:0.8125rem; color:var(--muted); }
.dl-wrap { margin:16px 0 0; }
.dl-data { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; color:var(--accent); text-decoration:none; margin-top:2px; }

/* Cite this data: a disclosure with ready-to-copy attributions */
.cite { border:1px solid var(--hairline); border-radius:var(--r-md); margin:14px 0 0; overflow:hidden; }
.cite summary { display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:11px 16px; min-height:44px; font-size:0.8125rem; font-weight:600; color:var(--ink-soft); list-style:none; transition:background .2s var(--ease); }
.cite summary:hover { background:var(--paper); color:var(--ink); }
.cite summary::-webkit-details-marker { display:none; }
.cite summary svg { width:14px; height:14px; color:var(--accent); flex:none; }
.cite-body { padding:0 16px 16px; }
.cite-note { font-size:0.8rem; color:var(--muted); margin:0 0 12px; max-width:60ch; }
.cite-row { margin-top:12px; }
.cite-row:first-of-type { margin-top:0; }
.cite-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.cite-label { font-size:0.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.cite-copy { flex:none; font:inherit; font-size:0.75rem; font-weight:600; color:var(--accent); background:var(--surface); border:1px solid var(--hairline-2); border-radius:9999px; padding:5px 13px; min-height:32px; cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.cite-copy:hover { border-color:var(--accent); }
.cite-copy.done { color:#fff; background:var(--accent); border-color:var(--accent); }
.cite-text { margin:0; font-size:0.82rem; line-height:1.5; color:var(--ink-soft); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:9px 12px; word-break:break-word; }
.cite-text.mono { display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.76rem; white-space:pre-wrap; }
.dl-data:hover { text-decoration:underline; }
.dl-data svg { width:14px; height:14px; }
.share-slot { display:flex; }
.share-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:9999px; padding:8px 15px; min-height:40px; cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.share-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.share-btn svg { width:14px; height:14px; }
.share-btn.done { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
/* Save-image button: same pill as Share; sits in a row with it on the check page */
.img-slot { display:flex; margin-top:14px; }
.img-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:9999px; padding:8px 15px; min-height:40px; cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.img-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.img-btn svg { width:14px; height:14px; }
.chk-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.chk-actions .share-slot, .chk-actions .img-slot { margin-top:0; }

/* One consistent teal focus ring for every custom-shaped interactive control.
   Covers role="button"/focusable rows AND the pill radios, segmented toggles,
   nav links, share buttons and sortable column headers — all of which are
   keyboard-reachable but weren't matched by the role="button" rule, so they
   fell back to the weak UA default (or none, on the sortable <th> now that it
   keeps its columnheader role). */
[role="button"]:focus-visible, tr[tabindex]:focus-visible, li[tabindex]:focus-visible,
.pill:focus-visible, .seg button:focus-visible, .nav-toggle:focus-visible,
.site-nav a:focus-visible, .nav-overlay a:focus-visible, .explore-grid a:focus-visible,
.subnav a:focus-visible, .subnav button:focus-visible, .share-btn:focus-visible,
.near-btn:focus-visible, .months summary:focus-visible, th.sortable:focus-visible,
.pg-btn:focus-visible, .pg-per select:focus-visible, .save-btn:focus-visible, .saved-chip:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Respect a data-saver preference: skip the decorative hero illustration. */
@media (prefers-reduced-data: reduce) {
  .hero-art { display:none; }
}

/* Reduced motion: honesty = no theatrics. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* Print: a clean paper record. */
@media print {
  .site-head, .site-foot, .skip-link, .search-hero, .subnav, .seg, .chart-head, .explore-grid, .dl-wrap, #site-search, .nav-toggle, .nav-overlay, .hero-art,
  .share-slot, .save-slot, .action-row, .pager, .table-toggle, .near-btn, .copy-btn { display:none !important; }
  body { background:#fff; color:#000; }
  .wrap { padding:0; max-width:none; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .card { border:1px solid #ccc; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
  .months { border:0; } .months .tbl { display:block !important; padding:0; }
  details.months > summary { display:none; }
  a { color:#000; text-decoration:none; }
  .spark { max-width:640px; }
  /* Print the per-period numbers under each chart, not just the SVG. */
  .chart .sr-only { position:static !important; width:auto !important; height:auto !important; margin:8px 0 0 !important;
    clip:auto !important; overflow:visible !important; border-collapse:collapse; font-size:0.8rem; }
  .chart .sr-only th, .chart .sr-only td { border-bottom:1px solid #ddd; padding:3px 8px; text-align:right; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:860px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:8px; }
  .hero-art { max-width:380px; margin:8px 0 0; }
}
@media (max-width:720px) {
  .site-nav { display:none; }
  .nav-toggle { display:flex; margin-left:0; }
  .theme-toggle { margin-left:auto; }
}
@media (max-width:540px) {
  h1 { font-size:var(--t-h1); }
  .row { grid-template-columns:1fr; }
  .movers, .movers.cols3 { grid-template-columns:1fr; }
  .story-split { grid-template-columns:1fr; }
  .horizons { grid-template-columns:1fr 1fr; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .bars-2, .pipeline, .facts { grid-template-columns:1fr; }
  .explore-grid { grid-template-columns:1fr; }
  .suburb-list { columns:1; }
  /* Long metadata chips (e.g. "…, 2 of 3 areas summed") would overflow a narrow
     viewport with nowrap; let them wrap instead of pushing the page sideways. */
  .chip { white-space:normal; }
}

/* Single-letter A–Z jump buttons: a floor width so a "Q" isn't a cramped tap. */
#letter-nav button { min-width:42px; justify-content:center; }

/* Touch devices: guarantee a 44px hit area on the compact filter/nav controls
   without changing the tighter density on precise (mouse) pointers. */
@media (pointer:coarse) {
  .pill, .subnav a, .subnav button, .seg button { min-height:44px; }
}