:root {
  --bg: oklch(88% 0.01 90);
  --card: oklch(96% 0.02 90);
  --card-2: oklch(92.5% 0.022 90);
  --ink: oklch(24% 0.03 140);
  --muted: oklch(24% 0.03 140 / 0.62);
  --line: oklch(85% 0.02 90);
  --brand: oklch(35% 0.07 150);
  --brand-ink: oklch(24% 0.05 150);
  --accent: oklch(64% 0.15 55);
  --lake: oklch(55% 0.09 230);
  --gold: oklch(78% 0.12 80);
  --terracotta: oklch(68% 0.12 40);
  --sand: oklch(80% 0.06 75);
  --stone: oklch(48% 0.012 95);
  --radius: 16px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  background-image: url('bg-contours.svg');
  background-repeat: repeat;
  color: var(--ink);
  font: 16px/1.5 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--brand); }

/* Top bar (scripts/shared/site-chrome.mjs + public/topbar.js) — present on
   every page: homepage, kommun pages, ranking pages. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  /* Same tint as the "Låga huspriser" ranking card (.rank-grid > .panel:nth-of-type(4n+4)). */
  background: color-mix(in oklch, var(--sand) 40%, var(--card));
}
.topbar-logo {
  display: flex; align-items: center; gap: 6px; flex: none;
  color: var(--brand-ink); text-decoration: none;
  font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; font-size: 1.05rem;
}
.topbar-logo svg { color: var(--brand); flex: none; }
.topbar-search { position: relative; flex: 1 1 auto; max-width: 320px; }
.topbar-search input {
  width: 100%; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); font: inherit; font-size: 0.9rem; color: var(--ink);
}
.topbar-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.topbar-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto;
  box-shadow: 4px 4px 0 0 var(--gold); z-index: 30;
}
.topbar-results li { border-radius: 8px; }
.topbar-results li a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; font-size: 0.92rem; }
.topbar-results li.active, .topbar-results li:hover { background: var(--card-2); }
.topbar-nav { display: flex; gap: 16px; flex: none; margin-left: auto; }
.topbar-nav a { color: var(--brand-ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topbar-nav a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px 10px; }
  .topbar-logo span { display: none; }
  .topbar-search { order: 3; max-width: none; flex: 1 1 100%; }
  .topbar-nav { gap: 12px; }
  .topbar-nav a { font-size: 0.82rem; }
}
.wrap { max-width: 720px; margin: 0 auto; padding: 28px 18px 64px; }
.wrap-wide { max-width: 1200px; }

/* Ranking hub (scripts/build-rankings.mjs hubPage) — one card per category.
   1 column by default, 2 from 800px (a card is still comfortably readable
   at ~370px), 3 from 1100px. */
.rank-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 800px) {
  .rank-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .rank-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Subtle warm tint per card so a page of 12 identical panels doesn't read
   as a mechanically repeated template — cycles through 4 warm hues (amber,
   gold, terracotta, sand), each barely a shade off the base cream card. */
.rank-grid > .panel:nth-of-type(4n+1) { background: color-mix(in oklch, var(--accent) 10%, var(--card)); }
.rank-grid > .panel:nth-of-type(4n+2) { background: color-mix(in oklch, var(--gold) 16%, var(--card)); }
.rank-grid > .panel:nth-of-type(4n+3) { background: color-mix(in oklch, var(--terracotta) 8%, var(--card)); }
.rank-grid > .panel:nth-of-type(4n+4) { background: color-mix(in oklch, var(--sand) 40%, var(--card)); }
/* Same flat offset shadow as the search-suggestions dropdown (.topbar-results),
   in a color per card (--card-shadow, set inline per card in
   scripts/build-rankings.mjs's shadowColorFor()) rather than one fixed hue —
   picked from a hash of the category slug, not position, so it doesn't just
   repeat in lockstep with the 4-cycle background tint above. */
.rank-grid > .panel { box-shadow: 4px 4px 0 0 var(--card-shadow, var(--gold)); }
/* Hub cards are narrow (1-3 per row) regardless of viewport width, so a
   value column wide enough to fit a long line of text used to squeeze the
   name column to ~0 (found 2026-09-18). Fixed at the content level instead
   of by stacking the whole row: scripts/build-rankings.mjs's
   hubValueCell()/presetValueCellHub() keep every hub-card value short (
   compact labels, no long units) and render each one as its own
   .rank-value-line, right-aligned in the same value column as before — the
   first line sits on num+name's own row, any further line flows below it,
   same base .rank-row grid as the full ranking-page rows.  */
/* "Visa alla 290 →" under every hub card, right-aligned rather than the
   default left edge (2026-09-18 request). */
.hub-more { text-align: right; margin: 10px 0 0; }

.hero { text-align: center; padding: 18px 0 26px; }
.hero h1 { font-family: 'Zilla Slab', Georgia, serif; font-size: 2.2rem; margin: 0 0 6px; color: var(--brand-ink); letter-spacing: -0.01em; }
.hero-mark { display: inline-flex; vertical-align: -6px; margin-right: 4px; color: var(--brand); }
.tagline { color: var(--muted); max-width: 30rem; margin: 0 auto; }
.hero-facts { margin-bottom: 8px; }
.tagline-hero { font-weight: 700; }
.tagline-hero em { text-decoration: underline; text-underline-offset: 3px; }
.tagline em { color: var(--ink); font-style: normal; font-weight: 600; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}

.presets { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.presets-label { color: var(--muted); font-size: 0.9rem; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--brand); background: transparent; color: var(--brand);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 0.9rem;
  text-decoration: none; display: inline-block; transition: all .12s ease;
}
.chip:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.chip.active { background: var(--brand); border-color: var(--brand); color: var(--card); }
.chip:nth-of-type(4n+1) { border-radius: 14px 20px 16px 22px; transform: rotate(-1.5deg); }
.chip:nth-of-type(4n+2) { border-radius: 20px 14px 22px 16px; transform: rotate(1.2deg); }
.chip:nth-of-type(4n+3) { border-radius: 16px 22px 14px 20px; transform: rotate(-0.8deg); }
.chip:nth-of-type(4n+4) { border-radius: 22px 16px 20px 14px; transform: rotate(1.5deg); }

.hero-links { margin-top: 14px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.hero-links .label { display: block; width: 100%; text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0 0 6px; }
.hero-links .chip { background: var(--bg); }

/* Same size as a slider row's own label (.s-label) but not bold, with ample
   space to the presets row above (which already carries its own
   margin-bottom) and the sliders below. */
.sliders-intro { margin: 40px 0 24px; font-size: 1rem; font-weight: 400; text-align: center; }
.slider-group { margin: 14px 0 -6px; font: 600 0.78rem 'Work Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.slider-group:first-child { margin-top: 0; }
.sliders { display: grid; gap: 18px; }
.slider-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 6px 12px; }
.icon-badge {
  grid-row: 1 / 4; align-self: center;
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-badge svg { width: 16px; height: 16px; }
.slider-row .s-label { grid-column: 2; font-weight: 600; }
.s-val { grid-column: 3; color: var(--brand-ink); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2ch; text-align: right; }
.slider-row .s-hint { grid-column: 2 / 4; color: var(--muted); font-size: 0.82rem; margin-top: -4px; }
.slider-row input[type="range"] {
  grid-column: 2 / 4; width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 9px; border-radius: 999px; background: var(--card-2); cursor: pointer;
}
.slider-row input[type="range"]::-webkit-slider-runnable-track { height: 9px; border-radius: 999px; background: transparent; }
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px; border-radius: 0 65% 65% 65%;
  border: 2px solid var(--card); background: var(--row-accent, var(--brand));
  transform: rotate(-45deg); cursor: pointer;
}
.slider-row input[type="range"]::-moz-range-track { height: 9px; border-radius: 999px; background: var(--card-2); }
.slider-row input[type="range"]::-moz-range-progress { height: 9px; border-radius: 999px; background: var(--row-accent, var(--brand)); }
.slider-row input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 0 65% 65% 65%;
  border: 2px solid var(--card); background: var(--row-accent, var(--brand));
  transform: rotate(-45deg); cursor: pointer;
}

.size-row { margin-top: 34px; text-align: center; }
.size-row > label { font-weight: 600; display: block; margin-bottom: 12px; }
#regionSeg, #sizeSeg, #multiSeg, #ageSeg, #commuteSeg { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: center; }

.cta {
  margin-top: 22px; width: 100%; border: 0; border-radius: 999px;
  background: var(--brand); color: var(--card); padding: 14px; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: background .12s;
  box-shadow: 6px 6px 0 0 var(--accent);
}
.size-row + .cta { margin-top: 34px; }
.cta:hover { background: var(--brand-ink); }
.cta.ghost { background: var(--card); color: var(--brand-ink); border: 1px solid var(--brand); box-shadow: none; }
.cta.ghost:hover { background: var(--card-2); }

.results-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.results-head h2 { font-family: 'Zilla Slab', Georgia, serif; margin: 0; color: var(--brand-ink); }
.link { border: 0; background: none; color: var(--brand); cursor: pointer; font-size: 0.9rem; }

.card {
  position: relative;
  background: var(--card-2);
  padding: 18px 20px;
  margin: 14px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.card:nth-of-type(6n+1) { border-radius: 30px 16px 34px 14px; transform: rotate(1deg); box-shadow: 5px 4px 0 0 var(--gold); }
.card:nth-of-type(6n+2) { border-radius: 14px 30px 16px 34px; transform: rotate(-0.7deg); box-shadow: 4px 5px 0 0 var(--lake); }
.card:nth-of-type(6n+3) { border-radius: 30px 16px 34px 14px; transform: rotate(0.9deg); box-shadow: 5px 6px 0 0 var(--accent); }
.card:nth-of-type(6n+4) { border-radius: 16px 34px 14px 28px; transform: rotate(-0.6deg); box-shadow: 6px 4px 0 0 var(--gold); }
.card:nth-of-type(6n+5) { border-radius: 28px 14px 22px 32px; transform: rotate(0.5deg); box-shadow: 4px 6px 0 0 var(--lake); }
.card:nth-of-type(6n+6) { border-radius: 20px 32px 18px 26px; transform: rotate(-0.8deg); box-shadow: 6px 5px 0 0 var(--accent); }

/* Random warm tint per result card, same four hues as the topplistor hub cards
   (.rank-grid > .panel:nth-of-type); assigned in public/app.js renderResults(). */
.card.tint-0 { background: color-mix(in oklch, var(--accent) 10%, var(--card)); }
.card.tint-1 { background: color-mix(in oklch, var(--gold) 16%, var(--card)); }
.card.tint-2 { background: color-mix(in oklch, var(--terracotta) 8%, var(--card)); }
.card.tint-3 { background: color-mix(in oklch, var(--sand) 40%, var(--card)); }
.card.top { border-radius: 34px 18px 40px 20px; transform: none; padding: 30px 28px; box-shadow: 7px 7px 0 0 var(--gold); }

.rank-badge {
  font-family: 'Zilla Slab', Georgia, serif;
  width: 42px; height: 42px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
  background: var(--card); color: var(--brand); border: 1.5px solid var(--brand);
}
.card.top .rank-badge { width: 56px; height: 56px; font-size: 1.2rem; background: var(--brand); color: var(--card); border: none; }
.card-body { flex: 1; min-width: 0; }
.kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand); margin: 0 0 6px; }
.name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.name { font-family: 'Zilla Slab', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--brand-ink); }
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; }
.card.top .name { font-size: 1.7rem; }
.match { font-family: 'Zilla Slab', Georgia, serif; font-weight: 700; color: var(--brand); font-size: 1.2rem; }
.card.top .match { font-size: 2.2rem; }
.blurb { font-size: 0.92rem; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.reasons { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tagpill { background: color-mix(in oklch, var(--brand) 14%, var(--card)); color: var(--brand-ink); font-size: 0.78rem; padding: 3px 9px; border-radius: 999px; }
.tagpill.missing { background: color-mix(in oklch, var(--stone) 18%, var(--card)); color: var(--stone); }

.share { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#shareDownload { color: var(--brand); font-size: 0.92rem; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.source { margin-top: 14px; }
.foot { text-align: center; margin-top: 8px; }
.crumb { margin: 0 0 6px; }

.ranklist-controls { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.sort-toggle { font-size: 0.85rem; padding: 5px 12px; }
.ranklist { list-style: none; margin: 0; padding: 0; }
.rank-row {
  display: grid; grid-template-columns: 2.4rem 1fr minmax(0, max-content); align-items: baseline;
  gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rank-row:last-child { border-bottom: none; }
.rank-row:nth-child(-n+3) .rank-num { color: var(--brand-ink); }
.rank-num { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-name { font-weight: 600; min-width: 0; }
/* minmax(0, max-content) above lets this column shrink in narrow cards
   (e.g. the ranking hub's 2-3 column grid) instead of forcing the row wider
   than its container — white-space: normal lets long values (multi-KPI
   categories like schools/entrepreneurship) wrap instead of overflowing. */
.rank-value { color: var(--muted); font-size: 0.85rem; text-align: right; white-space: normal; min-width: 0; overflow-wrap: break-word; }
.rank-value strong { color: var(--ink); font-weight: 700; font-size: 1rem; }
.rank-value-line { display: block; }
/* The year each category's numbers are from, shown once next to the
   headline instead of repeated on every row (rows only still carry their
   own year when it's an exception to that headline year — see
   scripts/build-rankings.mjs's valueCell()/foreignBackgroundValueText()). */
.rank-year { font-weight: 400; font-size: 0.7em; color: var(--muted); }

.catlist { list-style: none; margin: 0; padding: 0; }
.cat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cat-row:last-child { border-bottom: none; }
.cat-row a { font-weight: 600; color: var(--brand-ink); }
.cat-row .hint { color: var(--muted); font-size: 0.85rem; text-align: right; }

.source-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.source-list li { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.source-list li:last-child { border-bottom: none; padding-bottom: 0; }

.panel h2 { font-family: 'Zilla Slab', Georgia, serif; font-size: 1.25rem; margin: 0 0 12px; color: var(--brand-ink); }
.panel h2 a { color: inherit; text-decoration: none; }
.panel h2 a:hover { text-decoration: underline; }

/* Kommun facts list (scripts/build-kommun-pages.mjs) — its own class rather
   than reusing .rank-row/.rank-value: those assume a 3-column grid (rank
   number + name + value) from the ranking tables, and this list has no rank
   number, which was squeezing the name into the leftover ~2.4rem first
   column and forcing it to wrap mid-word. Flex with a flexible name + a
   non-shrinking value column fits both comfortably instead. */
.kpi-list { list-style: none; margin: 0; padding: 0; }
.kpi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kpi-row:last-child { border-bottom: none; }
.kpi-name { font-weight: 600; font-size: 0.94rem; flex: 1 1 auto; min-width: 0; }
.kpi-name a { color: inherit; }
.kpi-value { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: #000; }
.kpi-year { color: var(--muted); font-weight: 400; }
.kpi-line { display: block; font-weight: 400; }
.kpi-line strong { font-weight: 700; color: #000; }
.kpi-avg { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 400; margin-top: 2px; white-space: nowrap; }

/* Info-icon popovers — .kpi-name and Ursprung's summary <p> get colorful
   text (inline style, cycled per row), so .info-btn fixes its own colors
   explicitly rather than inheriting. */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 5px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand-ink);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 0.7rem;
  line-height: 1; vertical-align: middle; cursor: pointer;
}
.info-btn:hover, .info-btn:focus-visible { background: var(--card-2); outline: 2px solid var(--brand); outline-offset: 1px; }

dialog.info-dialog {
  position: fixed; margin: auto; border: none; border-radius: 20px;
  padding: 24px 24px 22px; max-width: 420px; width: calc(100% - 40px);
  background: var(--card); color: var(--ink);
  box-shadow: 6px 6px 0 0 var(--gold);
  font: 16px/1.5 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
dialog.info-dialog::backdrop { background: rgba(20, 22, 15, 0.5); }
dialog.info-dialog h3 { font-family: 'Zilla Slab', Georgia, serif; margin: 0 0 10px; padding-right: 34px; color: var(--brand-ink); font-size: 1.15rem; }
dialog.info-dialog p { margin: 0; }
.info-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--card-2); color: var(--ink);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.info-close:hover, .info-close:focus-visible { background: var(--line); }

.origin-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.origin-row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 10px; }
.origin-label { font-weight: 600; font-size: 0.9rem; }
.origin-bar-track { height: 10px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.origin-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--lake); }
.origin-count { color: var(--muted); font-size: 0.82rem; white-space: nowrap; text-align: right; }

@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem; }
  .panel { padding: 18px 14px; }
  .rank-row { grid-template-columns: 2rem 1fr; }
  .rank-value { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .cat-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cat-row .hint { text-align: left; }
  .kpi-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kpi-value { text-align: left; white-space: normal; }
  .kpi-avg { white-space: normal; }
  .origin-row { grid-template-columns: 1fr; gap: 3px; }
  .origin-count { text-align: left; }
  dialog.info-dialog { width: calc(100% - 28px); padding: 22px 18px 20px; }
  .info-close { width: 40px; height: 40px; font-size: 1.15rem; }
  .info-btn { width: 20px; height: 20px; font-size: 0.75rem; }
  .card { flex-direction: column; }
  .card.top { padding: 22px 20px; }
  .card.top .name { font-size: 1.4rem; }
  .card.top .match { font-size: 1.8rem; }
}

/* "Utforska" additions on kommun pages (scripts/build-kommun-pages.mjs):
   placement badges, the "Visste du att…?"
   box and the Pendling bars. Neutral wording throughout: hi/lo mean
   "top/bottom 10 of the country", not good/bad. */
.pos {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  background: var(--card-2); color: var(--stone);
}
.kpi-sub { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; margin-top: 2px; white-space: normal; }
.kpi-row:has(.kpi-sub) .kpi-name { flex: 1 0 auto; }
.kpi-row:has(.kpi-sub) .kpi-value { flex: 0 1 auto; }
.kpi-sub .kpi-avg { margin-top: 0; }
.pos.hi { background: color-mix(in oklch, var(--gold) 55%, var(--card)); color: var(--brand-ink); }
.pos.lo { background: color-mix(in oklch, var(--lake) 25%, var(--card)); color: oklch(35% 0.08 230); }
.explore-source { padding: 0 6px; }

.didyouknow { background: color-mix(in oklch, var(--gold) 16%, var(--card)); box-shadow: 4px 4px 0 0 var(--gold); }
.didyouknow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kur { display: flex; align-items: center; gap: 12px; }
.kur-big {
  flex: none; min-width: 7.2rem; text-align: center; padding: 6px 10px;
  border-radius: 14px 20px 16px 22px; transform: rotate(-1.5deg);
  font: 700 1.05rem 'Zilla Slab', Georgia, serif; background: var(--gold); color: var(--brand-ink);
}
.kur-big.lo {
  background: color-mix(in oklch, var(--lake) 35%, var(--card)); color: oklch(28% 0.07 230);
  transform: rotate(1.2deg);
}
.kur-txt { font-size: 0.95rem; }

.commute-tag { margin: 0 0 10px; font: 600 1.15rem 'Zilla Slab', Georgia, serif; color: var(--brand-ink); }
.commute-tag a { color: inherit; }
.commute { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 10px; }
.crow { display: contents; }
.clabel { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.ctrack { height: 12px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.cfill { display: block; height: 100%; border-radius: 99px; }
.cfill.out { background: var(--accent); }
.cfill.in { background: var(--lake); }
.cnum { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.92rem; text-align: right; white-space: nowrap; }
.commute-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

.newtag {
  font: 700 0.65rem 'Work Sans', sans-serif; background: var(--accent); color: #fff;
  padding: 2px 7px; border-radius: 99px; vertical-align: 3px; letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .kur { flex-direction: column; align-items: flex-start; gap: 6px; }
  .commute { gap: 10px 8px; }
  .kpi-sub { justify-content: flex-start; }
}

.year-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }

/* Homepage hero illustration: a tree grows out of the quiz card's top edge and
   spreads a pale canopy behind the heading and topplista pills
   (colours = the site's palette, class names il-*). */
.stage { position: relative; }
.stage .hero { position: relative; z-index: 2; padding-bottom: 96px; }
.hero-ill {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.il-hill-far{fill:color-mix(in oklch,var(--sand) 42%,var(--card))}
.il-hill-mid{fill:color-mix(in oklch,var(--brand) 20%,var(--card))}
.il-ground{fill:var(--card)}
.il-trunk{fill:color-mix(in oklch,var(--terracotta) 30%,oklch(40% .05 60))}
.il-trim{fill:color-mix(in oklch,#fff 80%,var(--card))}
.il-leaf1{fill:color-mix(in oklch,var(--brand) 26%,var(--card))}
.il-leaf2{fill:color-mix(in oklch,var(--brand) 38%,var(--card))}
.il-leaf3{fill:color-mix(in oklch,var(--gold) 34%,var(--card))}
.il-gold{fill:color-mix(in oklch,var(--gold) 85%,var(--card))}
.il-terra{fill:color-mix(in oklch,var(--terracotta) 80%,var(--card))}
.il-blue{fill:color-mix(in oklch,var(--lake) 70%,var(--card))}
.il-amb{fill:color-mix(in oklch,var(--accent) 80%,var(--card))}
.il-ink{fill:oklch(28% .04 150)}
.il-bark{stroke:color-mix(in oklch,var(--terracotta) 30%,oklch(40% .05 60));fill:none;stroke-linecap:round}
.il-capred{fill:color-mix(in oklch,oklch(56% .17 30) 85%,var(--card))}

/* Topplista shortcuts on the homepage: same four warm tints as the hub cards. */
.hero-links .chip:nth-of-type(4n+1) { background: color-mix(in oklch, var(--accent) 10%, var(--card)); }
.hero-links .chip:nth-of-type(4n+2) { background: color-mix(in oklch, var(--gold) 16%, var(--card)); }
.hero-links .chip:nth-of-type(4n+3) { background: color-mix(in oklch, var(--terracotta) 8%, var(--card)); }
.hero-links .chip:nth-of-type(4n+4) { background: color-mix(in oklch, var(--sand) 40%, var(--card)); }

/* Live results: current-choices chips, "what if" suggestions, the collapsible
   adjust panel, rank-change pills and the sticky top-3 bar. */
.results-head .link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.set-chips .chip { padding: 3px 10px; font-size: 0.82rem; transform: none; border-radius: 999px; }
.set-chips .chip.off { border-color: var(--stone); color: var(--stone); }
.whatif { margin: 0 0 14px; }
.whatif-lead { margin: 0 0 8px; font-weight: 600; color: var(--brand-ink); }
.whatif-list { display: grid; gap: 8px; }
.whatif-btn {
  text-align: left; border: 1px solid var(--line); border-radius: 14px 20px 16px 22px; padding: 9px 14px;
  background: color-mix(in oklch, var(--gold) 16%, var(--card)); color: var(--ink); font: inherit; font-size: 0.92rem; cursor: pointer;
  box-shadow: 3px 3px 0 0 var(--gold);
}
.whatif-btn:nth-child(2) { background: color-mix(in oklch, var(--sand) 40%, var(--card)); border-radius: 20px 14px 22px 16px; box-shadow: 3px 3px 0 0 var(--accent); }
.whatif-btn:hover { border-color: var(--brand-ink); }
.adjust-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 16px 22px; margin: 0 0 18px; }
.adjust-panel .presets { margin-top: 16px; }
.name .delta { font: 700 0.7rem 'Work Sans', sans-serif; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.delta.up { background: color-mix(in oklch, var(--brand) 22%, var(--card)); color: var(--brand-ink); }
.delta.down { background: color-mix(in oklch, var(--terracotta) 32%, var(--card)); color: oklch(36% .08 40); }
.delta.new { background: color-mix(in oklch, var(--gold) 55%, var(--card)); color: var(--brand-ink); }
.dropped { margin: 6px 0 0; }
.dropped:empty { display: none; }
.live-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--sand) 40%, var(--card));
  border-top: 1px solid var(--line); box-shadow: 0 -3px 0 0 var(--gold);
}
.live-bar[hidden] { display: none; }
.live-top { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.9rem; min-width: 0; }
.live-top b { font-weight: 700; }
.live-top .delta { margin-left: 4px; }
.share { flex-direction: column; }
@media (max-width: 480px) {
  .adjust-panel { padding: 4px 12px 18px; }
  .live-top { font-size: 0.82rem; }
}
.flash { animation: flash 1.1s ease; border-radius: 12px; }
@keyframes flash { 0%, 100% { background: transparent; } 30% { background: color-mix(in oklch, var(--gold) 40%, transparent); } }
/* Inside the adjust panel there's less width than in the quiz card, so the
   pickers wrap instead of overflowing the panel edge. */
.adjust-panel #regionSeg, .adjust-panel #sizeSeg, .adjust-panel #multiSeg, .adjust-panel #ageSeg, .adjust-panel #commuteSeg { flex-wrap: wrap; }

/* Data tables on the län/landsdel pages (scripts/build-lan-pages.mjs). */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.data-table th, .data-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.data-table th:first-child, .data-table td:first-child { text-align: left; white-space: normal; }
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.kommun-links { margin: 0; line-height: 1.9; }
@media (max-width: 520px) { .hide-sm { display: none; } .data-table { font-size: 0.88rem; } .data-table th, .data-table td { padding: 8px 4px; } }

/* Generated text blocks on kommun pages: summary paragraph and FAQ. */
.summary p { margin: 0; max-width: 68ch; }
.faq dl { margin: 0; display: grid; gap: 14px; }
.faq dt { font-weight: 600; color: var(--brand-ink); }
.faq dd { margin: 2px 0 0; max-width: 68ch; }

.about-home p { max-width: 68ch; }
.about-home h2 { margin-top: 0; }
.lead-sentence { margin: 0 0 12px; max-width: 68ch; color: var(--ink); }

/* Open-data page (scripts/build-data-page.mjs). */
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.attribution { margin: 0 0 8px; padding: 10px 14px; background: var(--card-2); border-radius: 10px; font-size: 0.92rem; }
.data-table code { font-size: 0.85em; }

/* Language switch (EN/SV) in the top bar. */
.topbar-nav .lang-switch { border: 1px solid var(--brand-ink); border-radius: 6px; padding: 0 6px; font-size: 0.78rem; line-height: 1.5; text-decoration: none; }
.topbar-nav .lang-switch:hover { background: var(--brand-ink); color: var(--card); text-decoration: none; }