:root {
  color-scheme: light;
  --plane:        #f4f4f1;
  --surface:      #fcfcfb;
  --surface-2:    #f4f4f0;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --grid:         #e1e0d9;
  --axis:         #c3c2b7;
  --border:       rgba(11,11,11,.10);
  --border-2:     rgba(11,11,11,.06);
  --condo:        #2a78d6;
  --villa:        #eb6834;
  --good:         #006300;
  --bad:          #d03b3b;
  --shadow:       0 1px 2px rgba(11,11,11,.05), 0 8px 24px rgba(11,11,11,.05);
  --map-bg:       #dbe6ee;
  --bubble-edge:  #c8ced6;
  --land:         #f3f1ea;
  --land-edge:    #cfd6d0;
  --land-sel:     #fbf7ec;
  --land-sel-edge:#c7a34a;
  /* sequential blue ramp (kr/m² etc.) */
  --seq-1:#cde2fb; --seq-2:#9ec5f4; --seq-3:#5598e7; --seq-4:#2a78d6; --seq-5:#184f95; --seq-6:#0d366b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #0d0d0d;
  --surface:      #1a1a19;
  --surface-2:    #232322;
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --muted:        #898781;
  --grid:         #2c2c2a;
  --axis:         #383835;
  --border:       rgba(255,255,255,.12);
  --border-2:     rgba(255,255,255,.06);
  --condo:        #3987e5;
  --villa:        #d95926;
  --good:         #0ca30c;
  --bad:          #e06464;
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --map-bg:       #0f1620;
  --bubble-edge:  #3a4149;
  --land:         #20242a;
  --land-edge:    #333a40;
  --land-sel:     #2b2a20;
  --land-sel-edge:#b7902f;
  --seq-1:#12324f; --seq-2:#184f95; --seq-3:#256abf; --seq-4:#3987e5; --seq-5:#6da7ec; --seq-6:#9ec5f4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:#0d0d0d; --surface:#1a1a19; --surface-2:#232322;
    --ink:#fff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835;
    --border:rgba(255,255,255,.12); --border-2:rgba(255,255,255,.06);
    --condo:#3987e5; --villa:#d95926; --good:#0ca30c; --bad:#e06464;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --map-bg:#0f1620; --bubble-edge:#3a4149; --land:#20242a; --land-edge:#333a40; --land-sel:#2b2a20; --land-sel-edge:#b7902f;
    --seq-1:#12324f; --seq-2:#184f95; --seq-3:#256abf; --seq-4:#3987e5; --seq-5:#6da7ec; --seq-6:#9ec5f4;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: var(--condo); }

/* ---- top bar ---- */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:block;
  box-shadow: var(--shadow); }
.brand h1 { font-size: 20px; }
.tagline { margin:2px 0 0; color: var(--ink-2); font-size: 13px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.updated { font-size:12px; color:var(--muted); text-align:right; }
.theme-toggle { width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; font-size:16px; color:var(--ink); }
.theme-toggle::before { content:"◐"; }

/* ---- controls ---- */
.controls { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px; margin-bottom:16px; box-shadow: var(--shadow); }
.seg { display:inline-flex; background:var(--surface-2); border-radius:10px; padding:3px; gap:2px; }
.seg button { border:0; background:transparent; color:var(--ink-2); padding:7px 16px; border-radius:8px;
  font:inherit; font-weight:600; cursor:pointer; }
.seg button.active { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.seg button[data-type="condo"].active { color:var(--condo); }
.seg button[data-type="villa"].active { color:var(--villa); }

.controls-top { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; }
.controls-top .grow { flex:1 1 220px; }
.filter.check.big { font-size:13.5px; padding-bottom:8px; }
.filters { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-top:14px; }

/* collapsible panels */
.more { margin-top:14px; border-top:1px solid var(--border-2); padding-top:6px; }
.more summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 2px; list-style:none; user-select:none; }
.more summary::-webkit-details-marker { display:none; }
.more summary::before { content:"▸ "; color:var(--muted); }
.more[open] summary::before { content:"▾ "; }
.more .active-count { color:var(--condo); font-weight:600; }
.filter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 14px; align-items:end; padding:10px 2px 6px; }
.filter em { font-style:normal; color:var(--muted); font-size:10px; }
.reset-btn { align-self:end; height:36px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
  border-radius:8px; font:inherit; font-weight:600; cursor:pointer; padding:0 12px; }

/* commute / home-work */
.commute-help { font-size:12.5px; color:var(--muted); margin:4px 2px 12px; }
.commute-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:6px; }
.geo-field label { font-size:12px; color:var(--ink-2); font-weight:600; display:block; margin-bottom:5px; }
.geo-input { position:relative; }
.geo-input input { width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.geo-sug { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 3px); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); overflow:hidden; display:none; }
.geo-sug.show { display:block; }
.geo-sug div { padding:8px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border-2); }
.geo-sug div:hover, .geo-sug div.hl { background:var(--surface-2); }
.rad { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); margin-top:8px; }
.rad input[type=range] { flex:1; accent-color:var(--condo); }
.rad b { color:var(--ink); }

.chart-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.chart-controls label, .card-head .chart-controls label { font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.chart-controls select { font:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:5px 8px; }
.src { color:var(--muted); font-weight:500; font-size:12px; }
.card.wide { grid-column:1 / -1; }
.filter { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.filter.grow { flex:1 1 200px; }
.filter.check { flex-direction:row; align-items:center; gap:7px; color:var(--ink-2); font-size:13px;
  padding-bottom:6px; cursor:pointer; }
.filter select, .filter input[type=search] {
  font:inherit; font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:7px 9px; min-width:120px; }
.filter input[type=search]{ width:100%; }
.filter .hint { color:var(--muted); font-size:11px; }

.muni-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-2); }
.chip { border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:5px 11px; font-size:12.5px; cursor:pointer; user-select:none; }
.chip.on { background:var(--condo); border-color:var(--condo); color:#fff; }
.chip.allbtn { font-weight:600; }

/* ---- KPIs ---- */
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); }
.kpi .k-label { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.kpi .k-val { font-size:23px; font-weight:680; margin-top:6px; letter-spacing:-.02em; }
.kpi .k-val small { font-size:13px; font-weight:600; color:var(--ink-2); }
.kpi .k-sub { font-size:11.5px; color:var(--muted); margin-top:3px; }

/* ---- grid of cards ---- */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }
/* full-width cards shouldn't stretch their chart across 1100px */
.card.wide .chart { max-width:760px; margin:0 auto; }
/* paired chart cards in a row share the tallest one's height; center the shorter
   chart vertically so the leftover space is symmetric instead of a bottom gap */
.grid > .card:not(.map-card):not(.wide):has(> .chart) { display:flex; flex-direction:column; }
.grid > .card:not(.wide):has(> .chart) > .chart { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }

/* on-map asking-price labels — small speech bubbles above each dot */
.price-label { display:flex; align-items:flex-end; justify-content:center; pointer-events:none;
  background:none; border:0; }
.price-label b {
  position:relative; background:var(--surface); color:var(--ink);
  border:1px solid var(--bubble-edge); border-radius:11px; padding:2px 8px;
  font-size:11px; font-weight:700; line-height:1.35; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.price-label b.villa { border-color:var(--villa); }
.price-label b.condo { border-color:var(--condo); }
/* the tail: outer (border) triangle, then the inner (fill) triangle on top */
.price-label b::before, .price-label b::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
}
.price-label b::before { bottom:-6px; border-top:6px solid var(--bubble-edge); }
.price-label b::after  { bottom:-4.5px; border-top:6px solid var(--surface); }
.price-label b.villa::before { border-top-color:var(--villa); }
.price-label b.condo::before { border-top-color:var(--condo); }
a.map-reset { font-size:16px; line-height:26px; text-align:center; text-decoration:none; }

/* outliers list */
.outliers { display:flex; flex-direction:column; gap:6px; }
.ol-row { display:grid; grid-template-columns:64px 1fr auto auto; gap:12px; align-items:center;
  padding:8px 10px; border:1px solid var(--border-2); border-radius:10px; text-decoration:none; color:inherit; }
.ol-row:hover { background:var(--surface-2); }
.ol-z { font-weight:700; font-size:13px; text-align:center; border-radius:6px; padding:3px 4px; }
.ol-z.lo { color:var(--good); background:color-mix(in srgb, var(--good) 12%, transparent); }
.ol-z.hi { color:var(--bad);  background:color-mix(in srgb, var(--bad) 12%, transparent); }
.ol-main { display:flex; flex-direction:column; min-width:0; }
.ol-main b { font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ol-main small, .ol-num small { color:var(--muted); font-size:11.5px; }
.ol-num { display:flex; flex-direction:column; text-align:right; font-size:13px; }
@media (max-width:640px){ .ol-row { grid-template-columns:56px 1fr; } .ol-num { display:none; } }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow); min-width:0; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.card-head h2 { font-size:14.5px; }
.card-head.sub { margin-top:18px; border-top:1px solid var(--border-2); padding-top:14px; }
.card-head.sub h3 { font-size:13px; color:var(--ink-2); font-weight:650; }
.card-head .count { color:var(--muted); font-weight:500; font-size:13px; }
.map-card { grid-column:1 / -1; }
.map-controls label, .card-head label { font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.map-controls select, .card-head select { font:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:5px 8px; }

/* ---- map ---- */
.map-body { display:flex; gap:16px; align-items:stretch; }
.map-wrap { flex:1 1 auto; min-width:0; border-radius:12px; overflow:hidden; border:1px solid var(--border-2); position:relative; }
#map { width:100%; height:min(86vh,860px); background:var(--map-bg); }
.leaflet-container { font: inherit; background:var(--map-bg); }
/* station name labels */
.st-name { font-size:10.5px; font-weight:650; color:var(--ink); white-space:nowrap;
  text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface), 0 0 3px var(--surface); pointer-events:none; }
:root[data-theme="dark"] .st-name { color:#f0f0ee; text-shadow:0 0 2px #000,0 0 3px #000; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .st-name { color:#f0f0ee; text-shadow:0 0 2px #000,0 0 3px #000; } }
/* home / work pins */
.geo-pin2 { display:flex; align-items:center; justify-content:center; }
.geo-pin2 span { font-size:20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
/* leaflet chrome to match theme */
.leaflet-bar a, .leaflet-control-scale-line { background:var(--surface); color:var(--ink); border-color:var(--border); }
.leaflet-bar a:hover { background:var(--surface-2); }
.leaflet-control-attribution { background:color-mix(in srgb, var(--surface) 82%, transparent); color:var(--muted); font-size:10px; }
.leaflet-control-attribution a { color:var(--ink-2); }
.leaflet-tooltip { background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:var(--shadow); font-size:12px; font-weight:600; }
.leaflet-tooltip-top:before { border-top-color:var(--border); }
.map-side { flex:0 0 210px; display:flex; flex-direction:column; gap:14px; }
.map-facts { display:flex; flex-direction:column; gap:9px; }
.map-facts .mf { background:var(--surface-2); border:1px solid var(--border-2); border-radius:10px; padding:9px 11px; }
.map-facts .mf-l { font-size:11px; color:var(--muted); }
.map-facts .mf-v { font-size:14px; font-weight:650; margin-top:1px; }
.map-facts .mf-v small { font-weight:600; color:var(--ink-2); font-size:12px; }
.map-legend { display:flex; flex-direction:column; flex-wrap:wrap; gap:9px; align-items:flex-start; font-size:12px; color:var(--ink-2); }
.map-legend .ramp { display:inline-flex; align-items:center; gap:0; }
.map-legend .ramp i { width:22px; height:10px; display:inline-block; }
.map-legend .ramp i:first-child{ border-radius:3px 0 0 3px;} .map-legend .ramp i:last-child{ border-radius:0 3px 3px 0;}
.legend-item { display:inline-flex; align-items:center; gap:6px; }
.legend-item .swatch{ width:11px;height:11px;border-radius:3px;display:inline-block; }
.legend-line { width:20px;height:0;border-top-width:3px;border-top-style:solid;display:inline-block; }
.legend-line.dashed{ border-top-style:dashed; }
.geo-radius { fill: var(--condo); fill-opacity:.08; stroke: var(--condo); stroke-opacity:.5; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:5 4; }
.geo-pin-dot { fill: var(--surface); stroke: var(--condo); stroke-width:2; vector-effect:non-scaling-stroke; }
.geo-pin-emoji { font-size:8px; }
.crosshair { stroke: var(--muted); stroke-width:1; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12px; color:var(--ink-2); }
.chart-note { font-size:12px; color:var(--muted); margin:8px 2px 0; text-align:center; }
.tooltip .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.commute-dist { color: var(--condo); font-weight:600; }
.st-dot { fill: var(--surface); stroke-width:1.4; }
.st-label { font-size:9px; fill: var(--ink-2); font-weight:600; paint-order:stroke; stroke:var(--surface); stroke-width:2.6px; }
.listing-dot { stroke: var(--surface); stroke-width:.5; cursor:pointer; }

/* ---- charts ---- */
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.bar-row rect { transition: opacity .1s; }
.axis-txt { fill:var(--muted); font-size:11px; }
.axis-title { fill:var(--ink-2); font-size:11.5px; font-weight:600; }
.bar-val { fill:var(--ink-2); font-size:11px; font-weight:600; }
.bar-lbl { fill:var(--ink-2); font-size:12px; }
.gridline { stroke:var(--grid); stroke-width:1; }

/* ---- listing cards ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.lcard { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface);
  display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .08s, box-shadow .12s; }
.lcard:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.lcard .thumb { height:78px; background:var(--surface-2); position:relative; overflow:hidden; }
.lcard .thumb.condo { background:linear-gradient(135deg, color-mix(in srgb, var(--condo) 16%, var(--surface-2)), var(--surface-2)); }
.lcard .thumb.villa { background:linear-gradient(135deg, color-mix(in srgb, var(--villa) 16%, var(--surface-2)), var(--surface-2)); }
.lcard .thumb::after { position:absolute; right:10px; bottom:6px; font-size:30px; opacity:.16; line-height:1; pointer-events:none; }
.lcard .thumb.condo::after { content:"🏢"; }
.lcard .thumb.villa::after { content:"🏡"; }
.lcard .badge { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.72); color:#fff;
  font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; }
.lcard .badge.villa{ background:var(--villa); } .lcard .badge.condo{ background:var(--condo); }
.lcard .newbadge { position:absolute; top:34px; left:8px; background:var(--good); color:#fff;
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; letter-spacing:.02em; }
.lcard .stbadge { position:absolute; bottom:8px; left:8px; background:var(--surface); color:var(--ink-2);
  font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.lcard .stbadge.near { color:var(--good); }
.lcard .body { padding:11px 12px 13px; display:flex; flex-direction:column; gap:2px; }
.lcard .price { font-size:16px; font-weight:680; letter-spacing:-.01em; }
.lcard .addr { font-size:13px; color:var(--ink); font-weight:600; margin-top:2px; line-height:1.25; }
.lcard .city { font-size:12px; color:var(--muted); }
.lcard .meta { font-size:12px; color:var(--ink-2); margin-top:7px; display:flex; flex-wrap:wrap; gap:4px 10px; }
.lcard .meta b{ font-weight:650; } .lcard .cut{ color:var(--bad); font-weight:650; }
/* per-listing observed price trajectory (from data/tracker.json) */
.lcard .phist { display:flex; align-items:center; gap:7px; margin-top:8px; padding-top:8px;
  border-top:1px solid var(--border-2); font-size:11.5px; font-weight:650; }
.lcard .phist.down { color:var(--good); }
.lcard .phist.up   { color:var(--bad); }
.lcard .phist.flat { color:var(--muted); }
.lcard .phist .spark { flex:0 0 auto; overflow:visible; }
.lcard .phist .ph-txt { min-width:0; }
/* saved-home heart + "changed since you saved" note */
.lcard .fav { position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; padding:0;
  border:0; border-radius:50%; cursor:pointer; font-size:16px; line-height:30px; text-align:center;
  background:rgba(0,0,0,.45); color:#fff; transition:transform .08s, background .12s, color .12s; }
.lcard .fav:hover { transform:scale(1.12); }
.lcard .fav.on { color:#ff5a7a; background:rgba(255,255,255,.92); }
.lcard .fav-change { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-2); font-size:11.5px; font-weight:650; }
.lcard .fav-change.down { color:var(--good); }
.lcard .fav-change.up { color:var(--bad); }
/* fair-value model badge (asking vs. predicted kr/m²) */
.lcard .valbadge { align-self:flex-start; margin-top:7px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:999px; }
.lcard .valbadge.down { color:var(--good); background:color-mix(in srgb, var(--good) 13%, transparent); }
.lcard .valbadge.up { color:var(--bad); background:color-mix(in srgb, var(--bad) 13%, transparent); }
.lcard .hfbadge { align-self:flex-start; margin-top:7px; font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:999px; color:var(--bad); background:color-mix(in srgb, var(--bad) 15%, transparent); }
.lcard .compline { margin-top:6px; font-size:11.5px; color:var(--muted); }
/* topbar nav link (→ renter subpage / ← back) */
.nav-link { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:700;
  font-size:14.5px; color:#fff; background:var(--brand, #1c5cb0); border:1px solid transparent;
  border-radius:999px; padding:9px 18px; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.14);
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease; }
.nav-link:hover { background:#17509c; box-shadow:0 3px 9px rgba(28,92,176,.32); transform:translateY(-1px); }
@media (max-width:520px){ .nav-link { font-size:13px; padding:7px 13px; } }

/* realkredit rate + calculator tables (renter subpage) */
.rate-table-wrap { overflow-x:auto; }
.rate-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.rate-table th, .rate-table td { padding:9px 12px; text-align:right; border-bottom:1px solid var(--border-2); white-space:nowrap; }
.rate-table th { color:var(--muted); font-weight:600; font-size:12.5px; }
.rate-table th:first-child, .rate-table td:first-child { text-align:left; color:var(--ink-2); font-weight:600; }
.rate-table td.num { font-variant-numeric:tabular-nums; }
.rate-table td.strong { font-weight:750; color:var(--ink); }
.rate-table td.up { color:var(--bad); font-weight:700; }
.rate-table td.down { color:var(--good); font-weight:700; }
.rate-table td.muted { color:var(--muted); }
.rate-table tr.row-avg td { border-top:1.5px solid var(--border); }
.rate-table tr.row-avg td:first-child { font-weight:700; }
.th-hint { color:var(--muted); font-weight:500; font-size:11.5px; }
.afdrag-details { margin:14px 0 4px; border-top:1px solid var(--border-2); padding-top:10px; }
.afdrag-details > summary { cursor:pointer; font-size:13px; font-weight:650; color:var(--brand,#1c5cb0); list-style:none; padding:4px 0; }
.afdrag-details > summary::-webkit-details-marker { display:none; }
.afdrag-details > summary::before { content:"▸ "; }
.afdrag-details[open] > summary::before { content:"▾ "; }
.afdrag-details #calcSchedule { max-height:360px; overflow:auto; margin-top:8px; }
.rate-table.afdrag th { position:sticky; top:0; background:var(--surface); z-index:1; }
.calc-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-bottom:14px; }
.calc-controls label { position:relative; display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; }
.calc-controls input, .calc-controls select { font:inherit; padding:7px 10px; border:1px solid var(--border);
  border-radius:9px; background:var(--surface-2); color:var(--ink); min-width:150px; }
/* unit sits inside the field on the right, so unit-bearing labels stay the same
   height as the plain selects (otherwise the input floats up when bottom-aligned) */
.calc-controls label:has(> .unit) input { padding-right:32px; }
.calc-controls .unit { position:absolute; right:11px; bottom:9px; font-weight:600; color:var(--muted); font-size:13px; pointer-events:none; }
.calc-controls label[hidden] { display:none; }   /* [hidden] must beat display:flex */
.calc-controls .sub { font-weight:500; color:var(--muted); font-size:11px; }
.aff-head { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.aff-head .kstat-v { font-size:18px; }
@media (max-width:560px){ .aff-head { grid-template-columns:1fr; } }
/* narrow screens: shrink the rate tables so they fit without sideways scrolling.
   Long first-column labels wrap, inline hints are dropped, and each table sheds
   its least-important trailing column (rate table: Opdateret; ydelses­beregner:
   Samlet tilbagebetaling — still derivable from ydelse × løbetid). */
@media (max-width:560px){
  .rate-table { font-size:12px; }
  .rate-table th, .rate-table td { padding:7px 6px; }
  .rate-table th:first-child, .rate-table td:first-child { white-space:normal; word-break:break-word; }
  .th-hint { display:none; }
  #rateTable .rate-table th:last-child, #rateTable .rate-table td:last-child { display:none; }
  #calcTable .rate-table th:last-child, #calcTable .rate-table td:last-child { display:none; }
}

/* compare-two-kommuner table */
.cmp-table { width:100%; max-width:640px; margin:0 auto; border-collapse:collapse; font-size:13.5px; }
.cmp-table th, .cmp-table td { padding:9px 12px; text-align:right; border-bottom:1px solid var(--border-2); }
.cmp-table th { color:var(--muted); font-weight:600; font-size:12.5px; }
.cmp-table th:first-child, .cmp-table td.cmp-l { text-align:left; color:var(--ink-2); font-weight:500; }
.cmp-table td { font-weight:650; }
.cmp-table td.good { color:var(--good); }
.load-more { display:block; margin:16px auto 0; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--border); border-radius:10px; padding:9px 22px; font:inherit; font-weight:600; cursor:pointer; }

/* ---- loading skeletons ---- */
@keyframes sk-shimmer { 0%{ background-position:-180% 0; } 100%{ background-position:180% 0; } }
.skeleton-tile, .skeleton-card { border-radius:14px;
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--border-2) 38%, var(--surface-2) 55%);
  background-size:180% 100%; animation:sk-shimmer 1.3s ease-in-out infinite; }
.skeleton-tile { height:90px; }
.skeleton-card { height:236px; }
@media (prefers-reduced-motion: reduce){ .skeleton-tile, .skeleton-card { animation:none; } }

/* ---- keyboard focus ---- */
:focus-visible { outline:2px solid var(--condo); outline-offset:2px; }
.chip:focus-visible { outline-offset:1px; border-radius:999px; }
.lcard:focus-visible { outline-offset:3px; border-radius:14px; }

/* ---- per-kommune stats (click a bar in the kommune chart) ---- */
#chartScatter { max-width:600px; }
.muni-stats { max-width:760px; margin:8px auto 0; }
.kstats-head { text-align:center; font-size:14px; margin-bottom:10px; }
.kstats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.kstat { background:var(--surface-2); border:1px solid var(--border-2); border-radius:12px; padding:10px 12px; text-align:center; }
.kstat-v { font-size:16px; font-weight:680; letter-spacing:-.01em; }
.kstat-l { font-size:11.5px; color:var(--muted); margin-top:2px; }
@media (max-width:640px){ .kstats { grid-template-columns:repeat(2,1fr); } }
.dist-wrap { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.dist-title { font-size:11.5px; color:var(--muted); margin-bottom:5px; }
.distbar { display:flex; height:22px; border-radius:6px; overflow:hidden; border:1px solid var(--border-2); }
.distseg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:10.5px; font-weight:700;
  min-width:2px; text-shadow:0 1px 1px rgba(0,0,0,.35); }
@media (max-width:640px){ .dist-wrap { grid-template-columns:1fr; } }

/* ---- tooltip ---- */
/* above Leaflet's panes/controls (which go up to z-index 1000) so the hover
   info box isn't hidden behind the map */
.tooltip { position:fixed; z-index:1200; pointer-events:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:10px; padding:9px 11px; font-size:12.5px; max-width:250px;
  box-shadow:var(--shadow); }
.tooltip .tt-title { font-weight:650; margin-bottom:3px; }
.tooltip .tt-row { color:var(--ink-2); display:flex; justify-content:space-between; gap:14px; }
.tooltip .tt-row b { color:var(--ink); font-weight:600; }

.foot { color:var(--muted); font-size:12px; margin-top:26px; text-align:center; line-height:1.6; }
.loading { text-align:center; color:var(--muted); padding:60px 0; }

@media (max-width: 880px) {
  .grid { grid-template-columns:1fr; }
  .kpis { grid-template-columns:repeat(2,1fr); }
  /* 5th KPI sits at normal half-width (was full-width span, which read as oversized) */
  .map-body { flex-direction:column; }
  .map-side { flex-basis:auto; }
  /* even 2-up grid so a lone box doesn't stretch full-width and paired boxes
     match height (was flex-grow, which made Metropræmie span the whole row) */
  .map-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
  .map-facts .mf { display:flex; flex-direction:column; justify-content:center; }
  .map-legend { flex-direction:row; flex-wrap:wrap; gap:12px; align-items:center; }
  /* the region is roughly square, so a portrait 76vh map left big empty margins —
     size the map closer to the region's aspect on narrow screens */
  #map { height:min(112vw,460px); }
  .commute-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .brand h1{ font-size:18px; } .tagline{ font-size:12px; }
  .kpi .k-val{ font-size:20px; }
}