:root {
  color-scheme: light;
  --ink: #10283a;
  --muted: #667b8c;
  --line: #dce5eb;
  --panel: rgba(249, 252, 253, .96);
  --paper: #fff;
  --accent: #167d73;
  --accent-2: #e4f5f1;
  --navy: #0b2537;
  --shadow: 0 22px 60px rgba(9, 32, 48, .18);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Explanations are available from the same map header on all screen sizes. */
.legend-help { float: right; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 7px; margin: -6px -6px 4px 5px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); cursor: pointer; font-size: 12px; }
.legend-help span { font-size: 11px; }
.legend-explanation { display: grid; gap: 10px; list-style: none; padding: 0; margin: 20px 0; }
.legend-explanation li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; }
.legend-explanation i { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(80,100,110,.3); }
.data-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.data-tags span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--accent-2); font-size: 13px; }
.tool-secondary { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); cursor: pointer; font: inherit; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.comparison-table { table-layout: fixed; min-width: 310px; }
.comparison-table th, .comparison-table td { overflow-wrap: anywhere; }
.comparison-table small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 500; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #319caa; outline-offset: 3px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.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; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #d7e0e4; }
button, input { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10000; background: #fff; padding: 12px 16px; border-radius: 10px; }
.skip-link:focus { top: 16px; }

.app-shell { display: grid; grid-template-columns: minmax(560px, 1fr) 430px; height: 100dvh; }
.map-stage { position: relative; min-width: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #d7e0e4; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { opacity: .72; }

.map-header { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 900; display: flex; justify-content: space-between; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 8px 13px 8px 8px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,.93); border: 1px solid rgba(255,255,255,.75); border-radius: 16px; box-shadow: 0 9px 28px rgba(18,43,58,.15); backdrop-filter: blur(14px); pointer-events: auto; }
.brand img { border-radius: 11px; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy-mobile { display: none; }
.brand strong { font-size: 16px; letter-spacing: -.02em; }
.brand small { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.round-button, .icon-button { border: 1px solid rgba(21,51,70,.13); background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(12,38,54,.15); cursor: pointer; display: grid; place-items: center; transition: transform .18s ease, background .18s ease; }
.round-button { width: 44px; height: 44px; border-radius: 14px; font-weight: 800; font-size: 21px; pointer-events: auto; }
.map-action-label { display: none; }
.round-button:hover, .icon-button:hover { transform: translateY(-2px); }
.round-button:active, .icon-button:active { transform: scale(.96); }
.map-actions { position: absolute; left: 18px; top: 92px; z-index: 800; display: grid; gap: 9px; }
.map-context-tools { position: absolute; z-index: 870; top: 92px; right: 18px; display: grid; grid-template-columns: repeat(2,108px); gap: 8px; }
.map-context-tools button { position: relative; width: 100%; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px; border: 1px solid rgba(21,51,70,.13); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(12,38,54,.15); backdrop-filter: blur(14px); cursor: pointer; }
.map-tool-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map-tool-label { font-size: 12px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.map-context-tools button:hover { transform: translateY(-2px); }
.map-context-tools button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.legend-card { position: absolute; z-index: 800; left: 18px; bottom: 20px; width: min(290px, calc(100% - 36px)); padding: 16px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.75); border-radius: 17px; box-shadow: 0 16px 42px rgba(12,36,52,.18); backdrop-filter: blur(14px); }
.legend-eyebrow, .eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.legend-card strong { display: block; font-size: 16px; }
.legend-card small { display: block; margin-top: 9px; color: var(--muted); }
.legend-scale { display: grid; grid-template-columns: repeat(5,1fr); height: 8px; border-radius: 999px; overflow: hidden; margin-top: 12px; }
.history-control { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.history-control button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 800; cursor: pointer; }
.history-control button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.history-control .history-info { flex-basis: 100%; border-style: dashed; color: var(--accent); background: #f3faf8; }
.context-history-control { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.62); }
.context-history-head { flex-basis: 100%; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 2px; }
.context-history-head strong { font-size: 10px; }
.context-history-head span { color: var(--muted); font-size: 8px; }
.context-history-control button { flex: 1 0 auto; min-height: 29px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--paper); font-size: 9px; font-weight: 850; cursor: pointer; }
.context-history-control button:hover, .context-history-control button.active { color: #fff; border-color: var(--accent); background: var(--accent); }
.context-history-control .context-history-open { width: 100%; color: var(--accent); border-style: dashed; background: var(--accent-2); }
.legend-items { display: grid; gap: 5px; margin-top: 12px; }
.legend-items div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.legend-items i { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 3px; }
.legend-definition { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; }

@keyframes inspector-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.explorer { position: relative; z-index: 1000; min-width: 0; height: 100dvh; background: var(--panel); box-shadow: -18px 0 45px rgba(15,39,55,.12); backdrop-filter: blur(18px); }
.explorer-scroll { height: 100%; overflow: auto; padding: 34px 30px calc(30px + var(--safe-bottom)); scrollbar-width: thin; }
.sheet-handle { display: none; }
.intro-row { display: block; }
.intro-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; }
.intro-meta .eyebrow { margin-bottom: 0; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 355px; margin-bottom: 22px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.04; letter-spacing: -.04em; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.025em; }
.fresh-badge { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #476172; font-size: 11px; font-weight: 750; background: #eff5f5; border: 1px solid #dce8e7; border-radius: 999px; padding: 7px 9px; }
.fresh-badge i { width: 7px; height: 7px; border-radius: 50%; background: #36a979; box-shadow: 0 0 0 4px rgba(54,169,121,.13); }

.search-wrap { position: relative; margin-bottom: 19px; }
.search-wrap > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.search-box { display: grid; grid-template-columns: 24px 1fr 30px; align-items: center; min-height: 52px; padding: 0 10px 0 15px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 15px; box-shadow: 0 6px 18px rgba(21,52,69,.06); transition: border-color .18s, box-shadow .18s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(22,125,115,.11); }
.search-box > span { font-size: 22px; color: var(--accent); transform: rotate(-12deg); }
.search-box input { width: 100%; border: 0; outline: 0; padding: 14px 8px; color: var(--ink); background: transparent; }
.search-box input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.search-box input::placeholder { color: #91a2ad; }
.search-box button { border: 0; background: #edf2f5; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: #718695; font-size: 19px; }
.search-help { margin: 8px 3px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.search-results { position: absolute; top: 83px; left: 0; right: 0; z-index: 50; max-height: 430px; overflow: auto; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.search-section-label { position: sticky; top: -7px; z-index: 2; display: flex; align-items: center; gap: 7px; margin: 0 -1px 3px; padding: 9px 11px 6px; color: var(--accent); background: rgba(255,255,255,.96); font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.search-section-label > span { font-size: 13px; line-height: 1; }
.search-section-label:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); }
.search-section-kommun { color: #825f24; }
.search-section-area { color: #167d73; }
.search-section-address { color: #a1455a; }
.search-group-empty { padding: 7px 11px 10px 52px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.search-result { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; padding: 11px; border-radius: 10px; text-align: left; cursor: pointer; }
.search-result:hover, .search-result[aria-selected="true"] { background: var(--accent-2); }
.search-result b { display: block; }
.search-result small { color: var(--muted); }
.search-result-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #eef4f5; }
.search-result-icon-kommun { background: #f7eedc; }
.search-result-icon-area { color: #0f7168; background: #e1f4f0; font-size: 18px; }
.search-result-icon-address { background: #f9e8ed; }

.selection-status { width: 100%; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 0 0 17px; padding: 11px 12px; border: 1px solid #a9ddd4; border-radius: 13px; color: var(--ink); background: linear-gradient(135deg,#eaf8f5,#f7fbfb); text-align: left; cursor: pointer; box-shadow: 0 8px 20px rgba(22,125,115,.09); }
.selection-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #27a77f; box-shadow: 0 0 0 4px rgba(39,167,127,.13); }
.selection-status[data-status="loading"] .selection-status-dot { background: #e0a126; animation: status-pulse 1.15s ease-in-out infinite; }
.selection-status[data-status="warning"] { border-color: #e8c98a; background: #fff9ed; }
.selection-status[data-status="warning"] .selection-status-dot { background: #d59219; }
.selection-status span { min-width: 0; }
.selection-status small, .selection-status strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-status small { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.selection-status strong { margin-top: 2px; font-size: 13px; }
.selection-status > b { color: var(--accent); font-size: 11px; white-space: nowrap; }
@keyframes status-pulse { 50% { opacity:.45; transform:scale(.82); } }

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 13px; }
.text-button { border: 0; background: transparent; padding: 6px 0; color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer; }
.stat-picker { display: block; }
.stat-picker-results { min-width: 0; }
.quick-carousel { display: block; }
.quick-arrow { border: 1px solid var(--line); border-radius: 11px; color: var(--accent); background: var(--paper); font-size: 21px; font-weight: 800; cursor: pointer; }
.quick-arrow { display: none; }
.quick-arrow:hover { border-color: var(--accent); background: var(--accent-2); }
.indicator-grid { min-width: 0; max-height: 242px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 76px; gap: 7px; padding-right: 5px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #afbec7 transparent; overscroll-behavior: contain; }
.indicator-grid::-webkit-scrollbar { width: 6px; }
.indicator-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: #afbec7; }
.indicator-button { width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr); align-content: center; align-items: center; justify-items: center; gap: 4px; padding: 6px; text-align: center; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: transform .18s, border-color .18s, background .18s; }
.indicator-button:hover { transform: translateY(-2px); border-color: #b7c9d2; }
.indicator-button.active { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 10px 25px rgba(11,37,55,.18); }
.indicator-icon { width: 27px; height: 27px; display: grid; place-items: center; background: #eff5f5; border-radius: 9px; font-size: 15px; }
.indicator-button.active .indicator-icon { background: rgba(255,255,255,.13); }
.indicator-button strong { display: block; overflow-wrap: normal; font-size: 14px; line-height: 1.2; }
.quick-foot { display: flex; justify-content: space-between; gap: 10px; margin: 6px 5px 0; color: var(--muted); font-size: 11px; }
.quick-foot strong { color: var(--accent); white-space: nowrap; }
.quick-foot i, .quick-foot em { font-style: normal; }
.quick-foot em { display: none; }
.history-mobile-control { display: none; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.history-mobile-control::-webkit-scrollbar { display: none; }
.history-mobile-control::before { content: 'Kommunhistorik'; align-self: center; margin-right: 3px; color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.history-mobile-control button { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 10px; font-weight: 800; }
.history-mobile-control button.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.history-mobile-control .history-info { color: var(--accent); border-style: dashed; background: #f3faf8; }

.place-card { margin-top: 18px; padding: 18px; background: linear-gradient(145deg, #eef5f6, #f8fafb); border: 1px solid #dce7e9; border-radius: 18px; scroll-margin-top: 8px; }
.mobile-scroll-cue { display: none; }
.place-card.selected { border-color: #95d2c9; box-shadow: 0 10px 30px rgba(15,105,96,.12); }
.place-card.selected::before { content: '✓ AKTIVT VAL'; display: block; width: max-content; margin: -7px 0 10px auto; padding: 4px 7px; border-radius: 999px; color: var(--accent); background: #dff3ef; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.place-card-top { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.place-mode-picker { margin-top: 13px; }
.mode-pager { display: none; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 7px; margin-top: 12px; }
.mode-pager button { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--paper); font-size: 20px; }
.mode-pager span { padding: 7px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-2); font-size: 10px; font-weight: 850; text-align: center; }
.place-icon { width: 45px; height: 45px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 13px; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.icon-button { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; font-size: 20px; }
.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 17px; }
.metric-grid div { min-width: 0; padding: 11px 7px; background: rgba(255,255,255,.72); border: 1px solid rgba(214,226,231,.9); border-radius: 11px; text-align: center; }
.metric-grid span { display: block; min-height: 32px; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.metric-grid strong { display: block; overflow-wrap: anywhere; hyphens: auto; font-size: 18px; line-height: 1.3; }
.metric-grid:has(.metric-wide) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.metric-grid .metric-wide { grid-column: 1 / -1; }
.metric-grid .metric-wide span { min-height: 0; margin-bottom: 5px; }
.place-details { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.66); }
.place-details-head, .party-results-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 9px; }
.place-details-head strong, .party-results-head strong { font-size: 13px; }
.place-details-head span, .party-results-head span { color: var(--muted); font-size: 11px; }
.place-details-empty { margin: 0; color: var(--muted); font-size: 12px; }
.election-status { display: grid; gap: 7px; margin-bottom: 14px; padding: 12px; border: 1px solid #c6a257; border-radius: 11px; background: var(--paper); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.election-status strong { font-size: 13px; }
.election-status span { color: var(--muted); }
.election-status a { color: var(--ink); text-decoration: underline; }
.party-results { display: grid; gap: 7px; }
.party-result { display: grid; grid-template-columns: 10px minmax(0,1fr) 66px 45px; align-items: center; gap: 7px; min-width: 0; }
.party-swatch { width: 9px; height: 9px; border-radius: 50%; }
.party-result > span { min-width: 0; }
.party-result b { display: block; overflow-wrap: anywhere; hyphens: auto; font-size: 11px; line-height: 1.35; }
.party-result small { display: block; color: var(--muted); font-size: 7px; }
.party-result em { height: 5px; overflow: hidden; border-radius: 999px; background: #dfe8eb; }
.party-result em i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.party-result > strong { font-size: 9px; text-align: right; }
.housing-overview section + section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.housing-mode-picker { margin-bottom: 12px; }
.mode-layer-picker { padding: 11px; border: 1px solid #b9ddd8; border-radius: 13px; background: linear-gradient(145deg,#eff9f7,#ffffff); box-shadow: 0 8px 22px rgba(22,125,115,.08); }
.housing-mode-picker > div:first-child { display: flex; justify-content: space-between; gap: 9px; align-items: baseline; margin-bottom: 7px; }
.housing-mode-picker > div:first-child strong { color: var(--accent); font-size: 12px; }
.housing-mode-picker > div:first-child span { color: var(--muted); font-size: 11px; }
.housing-mode-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.place-details .housing-mode-options, .place-mode-picker .housing-mode-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.housing-mode-options::-webkit-scrollbar { display: none; }
.housing-mode-options button { min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--paper); font-size: 12px; font-weight: 850; line-height: 1.2; text-align: left; cursor: pointer; }
.housing-mode-options button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.housing-overview h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.housing-chips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.housing-chips span { padding: 7px 5px; border-radius: 9px; background: #edf4f5; color: var(--muted); font-size: 11px; text-align: center; }
.housing-chips b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.housing-list { display: grid; gap: 5px; }
.housing-list span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.housing-list b { color: var(--ink); }
.place-note { margin: 14px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.explorer-footer { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: #80919c; font-size: 13px; }
.explorer-footer-title { color: var(--ink); font-size: 14px; }
.explorer-footer nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.explorer-footer a { display: flex; align-items: center; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--muted); font-weight: 700; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.explorer-footer a:hover, .explorer-footer a:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-2); }
.explorer-footer button { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--accent-2); color: var(--accent); font-weight: 800; cursor: pointer; text-align: left; }
#seo-kommun-info { margin-top: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); background: var(--paper); font-size: 13px; line-height: 1.6; }
#seo-kommun-info h2 { margin: 0 0 8px; color: var(--ink); font-size: 16px; letter-spacing: -.02em; }
#seo-kommun-info p { margin: 0 0 9px; }
#seo-kommun-info p:last-child { margin-bottom: 0; }
#seo-kommun-info a { color: var(--accent); font-weight: 750; }
#seo-kommun-info details { margin: 8px 0; padding: 9px 11px; border-radius: 11px; background: var(--accent-2); }
#seo-kommun-info summary { color: var(--ink); font-weight: 800; cursor: pointer; }
#seo-kommun-info .seo-faq-q { margin: 11px 0 2px; color: var(--ink); }

dialog { width: min(620px, calc(100% - 24px)); border: 0; border-radius: 22px; padding: 0; color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(4,21,32,.55); backdrop-filter: blur(5px); }
.dialog-card { padding: 25px; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-head > div { min-width: 0; }
.dialog-head button { flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 12px; font-size: 23px; cursor: pointer; }
.dialog-card > p { color: var(--muted); }
.tool-dialog-card { max-height: min(84dvh, 760px); overflow: auto; }
.tool-summary { margin: 14px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.history-principles { display: grid; gap: 8px; margin: 15px 0; }
.history-principles div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: #f6fafb; }
.history-principles strong, .history-principles span { display: block; }
.history-principles span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.tool-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 15px 0; }
.tool-metrics div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #f5f8f9; }
.tool-metrics span { display: block; color: var(--muted); font-size: 10px; }
.tool-metrics strong { display: block; margin-top: 4px; font-size: 17px; }
.tool-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.tool-table th, .tool-table td { padding: 9px 7px; border-bottom: 1px solid var(--line); text-align: left; }
.tool-table th:last-child, .tool-table td:last-child { text-align: right; }
.school-list { display: grid; gap: 7px; margin-top: 12px; }
.school-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; color: inherit; background: var(--paper); text-align: left; cursor: pointer; }
.school-row:hover, .school-row:focus-visible { border-color: var(--accent); background: var(--accent-2); outline: none; }
.school-row small { color: var(--muted); }
.tool-primary { width: 100%; min-height: 44px; margin: 4px 0 12px; border: 0; border-radius: 12px; color: #fff; background: var(--accent); font-weight: 850; cursor: pointer; }
.tool-link { display: flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; text-align: center; }
.tool-link:hover, .tool-link:focus-visible { color: #fff; background: #126f67; outline: 3px solid rgba(22,125,115,.2); outline-offset: 2px; }
.profile-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: end; margin: 15px 0; padding: 17px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, var(--navy), #174c5b); }
.profile-hero span { display: block; color: #bad0d8; font-size: 10px; }
.profile-hero strong { display: block; margin-top: 4px; font-size: 25px; }
.profile-hero small { color: #bad0d8; text-align: right; }
.profile-sections { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.profile-section { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #f6f9fa; }
.profile-section-wide { grid-column: 1 / -1; }
.profile-section h3 { margin: 0 0 11px; font-size: 13px; }
.profile-subheading { margin: 12px 0 2px; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.profile-row:last-child { border-bottom: 0; }
.profile-row span { color: var(--muted); }
.profile-row strong { text-align: right; }
.profile-source { margin: 13px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.selected-row { background: var(--accent-2); }
.governance-parties { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.governance-parties span { padding: 7px 10px; border-radius: 999px; color: var(--accent); background: var(--accent-2); font-size: 11px; font-weight: 850; }
.library-group { margin-top: 19px; }
.library-group h3 { font-size: 13px; }
.library-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.library-item { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 11px; color: inherit; background: #f5f8f9; border: 1px solid transparent; border-radius: 11px; font-size: 12px; text-align: left; }
.library-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
button.library-item { cursor: pointer; }
button.library-item:hover, button.library-item.active { border-color: var(--accent); background: var(--accent-2); }
.library-item.planned { opacity: .7; }
.level-tag { color: var(--accent); background: #e1f1ee; border-radius: 999px; padding: 4px 7px; font-size: 9px; font-weight: 850; }
.place-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 14px; }
.place-actions button { min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); font-size: 11px; font-weight: 800; cursor: pointer; }
.place-actions #profile-place { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 9px 12px; color: #fff; border: 0; background: linear-gradient(135deg, var(--accent), #0b655e); box-shadow: 0 9px 22px rgba(15,105,96,.2); text-align: left; }
.profile-action-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.16); font-size: 18px; }
.place-actions #profile-place strong { display: block; font-size: 12px; }
.place-actions #profile-place small { display: block; margin-top: 2px; color: rgba(255,255,255,.76); font-size: 8px; font-weight: 700; }
.place-actions #profile-place b { font-size: 22px; }
.place-actions button:hover { border-color: var(--accent); }
.neighbour-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.neighbour-list button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.toast { position: fixed; z-index: 5000; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 15px; color: #fff; background: var(--navy); border-radius: 12px; box-shadow: var(--shadow); font-size: 12px; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

body.dark { --ink: #e9f0f3; --muted: #9fb2bf; --line: #304858; --panel: rgba(11,30,43,.96); --paper: #152f41; --accent-2: #193f42; --navy: #071c2a; background: #0c1f2c; }
body.dark .brand, body.dark .round-button, body.dark .legend-card, body.dark .map-context-tools button { background: rgba(15,39,54,.96); color: var(--ink); border-color: #304a59; }
body.dark .map-context-tools button.active { color: #fff; border-color: #69c7b9; background: #176e66; }
body.dark .icon-button { background: #1c3949; color: var(--ink); border-color: #385161; }
body.dark .dialog-head button { color: var(--ink); background: #1c3949; }
body.dark .fresh-badge, body.dark .search-box button, body.dark .indicator-icon { background: #1c3949; color: #b9cbd4; border-color: #385161; }
body.dark .place-card { background: linear-gradient(145deg,#153244,#102b3c); border-color: #304b5b; }
body.dark .place-card.selected { border-color: #4c948b; }
body.dark .metric-grid div { background: rgba(8,30,43,.55); border-color: #345061; }
body.dark .selection-status { color: var(--ink); border-color: #2e6965; background: linear-gradient(135deg,#173f41,#153244); }
body.dark .place-details { background: rgba(8,30,43,.55); }
body.dark .context-history-control, body.dark .desktop-mode-control { background: rgba(8,30,43,.55); }
body.dark .mode-layer-picker { background: linear-gradient(145deg,#123b3c,#152f41); border-color:#2e625f; }
body.dark .housing-chips span { background: #193647; }
body.dark .search-results, body.dark dialog { background: #122d3f; color: var(--ink); }
body.dark .search-section-label { background: rgba(18,45,63,.97); }
body.dark .search-section-label { background: rgba(18,45,63,.97); }
body.dark .library-item { background: #193647; }
body.dark .tool-metrics div { background: #193647; }
body.dark .profile-section { background: #193647; }
body.dark .history-control .history-info, body.dark .history-mobile-control .history-info, body.dark .history-principles div { color: #73d1c6; background: #193647; }
body.dark #seo-kommun-info { border-color: #304b5b; background: #102b3c; }
body.dark #seo-kommun-info details { background: #193647; }

@media (max-width: 990px) {
  .app-shell { display: block; }
  .map-stage { position: absolute; inset: 0; }
  .map-header { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; }
  .brand { gap: 8px; max-width: 132px; min-height: 44px; padding: 5px 9px 5px 5px; border-radius: 14px; }
  .brand img { width: 34px; height: 34px; }
  .brand-copy-desktop { display: none; }
  .brand-copy-mobile { display: grid; }
  .brand strong { font-size: 13px; }
  .brand small { margin-top: 3px; font-size: 7px; letter-spacing: .08em; }
  .map-actions { left: 10px; top: max(126px, calc(env(safe-area-inset-top) + 122px)); gap: 7px; }
  .map-action-wide { width: 44px; min-width: 44px; display: grid; justify-content: center; padding: 0; font-size: 18px; }
  .map-action-label { display: none; }
  #home-button > span:first-child { font-size: 0; }
  #home-button > span:first-child::before { content: '←'; font-size: 21px; font-weight: 900; line-height: 1; }
  .map-context-tools { top: max(66px, calc(env(safe-area-inset-top) + 62px)); left: 10px; right: 10px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; overflow: visible; }
  .map-context-tools::-webkit-scrollbar { display: none; }
  .map-context-tools button { min-height: 50px; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; border-radius: 12px; }
  .map-tool-label { font-size: 10px; }
  .legend-card { top: max(10px, env(safe-area-inset-top)); bottom: auto; left: 142px; right: 60px; width: auto; padding: 9px 11px; border-radius: 13px; }
  .legend-card .legend-eyebrow, .legend-card small, .legend-items, .legend-definition, .history-control { display: none; }
  .legend-card strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .legend-scale { margin-top: 7px; height: 5px; }

  .explorer { --sheet-visible: 26dvh; --sheet-height: min(88dvh, 760px); position: fixed; left: 0; right: 0; bottom: 0; height: var(--sheet-height); border-radius: 23px 23px 0 0; box-shadow: 0 -20px 55px rgba(6,28,42,.25); transform: translate3d(0,calc(100% - var(--sheet-visible)),0); transition: transform .32s cubic-bezier(.22,1,.36,1); will-change: transform; }
  .explorer[data-snap="0"] { --sheet-visible: 26dvh; }
  .explorer[data-snap="1"] { --sheet-visible: 52dvh; }
  .explorer[data-snap="2"] { --sheet-visible: 88dvh; }
  .explorer.dragging { transition: none; }
  .explorer.dragging .explorer-scroll { transition: none; }
  .explorer.dragging .sheet-handle { cursor: grabbing; }
  .sheet-handle { display: grid; justify-items: center; gap: 4px; width: 100%; height: 42px; padding: 8px 0 4px; border: 0; background: transparent; cursor: grab; color: var(--muted); touch-action: none; }
  .sheet-handle span { width: 39px; height: 4px; border-radius: 999px; background: #a6b6c0; }
  .sheet-handle small { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
  .explorer-scroll { height: calc(min(var(--sheet-height), var(--sheet-visible)) - 42px); padding: 8px 16px calc(20px + var(--safe-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transition: height .32s cubic-bezier(.22,1,.36,1); }
  .explorer[data-snap="0"] .explorer-scroll { overflow-y: hidden; }
  .intro-row { display: none; }
  .search-wrap { margin-bottom: 18px; }
  .search-wrap > label { display: none; }
  .search-results { top: 58px; max-height: min(52dvh, 430px); }
  .search-help { display: none; }
  .selection-status { display: none !important; }
  .section-heading { margin-bottom: 10px; }
  .stat-picker { display: block; }
  .indicator-grid::-webkit-scrollbar { display: none; }
  .quick-carousel { grid-template-columns: 29px minmax(0,1fr) 29px; }
  .quick-carousel { display: grid; align-items: stretch; gap: 6px; }
  .quick-arrow { display: block; }
  .indicator-grid { max-height: none; display: flex; gap: 8px; padding-right: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .indicator-button { width: auto; flex: 0 0 168px; min-height: 54px; grid-template-columns: 30px minmax(0,1fr); justify-items: stretch; text-align: left; gap: 8px; padding: 8px; scroll-snap-align: start; border-radius: 14px; transition: transform .18s, border-color .18s, background .18s; }
  .indicator-icon { width: 31px; height: 31px; border-radius: 10px; font-size: 16px; }
  .indicator-button strong { font-size: 14px; }
  .quick-foot { display: flex; margin-left: 35px; margin-right: 35px; }
  .quick-foot i { display: none; }
  .quick-foot em { display: inline; }
  .history-mobile-control:not([hidden]) { display: flex; }
  .mobile-scroll-cue:not([hidden]) { position: absolute; z-index: 8; right: 0; bottom: max(10px, var(--safe-bottom)); left: 0; display: grid; place-items: center; width: 42px; height: 34px; margin: auto; color: var(--accent); pointer-events: none; }
  .mobile-scroll-cue span { width: 18px; height: 18px; display: block; border-right: 5px solid currentColor; border-bottom: 5px solid currentColor; border-radius: 2px; transform: rotate(45deg); filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)); }
  .mobile-scroll-cue.cue-animate { animation: cue-disappear 2.8s ease forwards; }
  .mobile-scroll-cue.cue-animate span { animation: cue-bounce .62s ease-in-out 4; }
  body.dark .mobile-scroll-cue { color: #fff; }
  .housing-mode-picker > div:first-child { align-items: flex-start; }
  .housing-mode-picker > div:first-child span { max-width: 105px; text-align: right; }
  .housing-mode-options { display: flex; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .housing-mode-options button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; scroll-snap-align: start; white-space: nowrap; }
  .place-card { margin-top: 16px; }
  .mode-pager:not([hidden]) { display: grid; }
  .explorer-footer { padding-bottom: 10px; }
  .place-actions:not([hidden]) { display: flex; overflow-x: auto; gap: 7px; padding-bottom: 3px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .place-actions::-webkit-scrollbar { display: none; }
  .place-actions button { flex: 1 0 100%; scroll-snap-align: start; }
  .place-actions #profile-place { min-height: 62px; padding: 10px 13px; border-radius: 13px; }
  .place-actions #profile-place strong { font-size: 14px; }
  .place-actions #profile-place small { font-size: 12px; }
  .profile-sections { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero small { text-align: left; }
  .toast { bottom: calc(116px + var(--safe-bottom)); max-width: calc(100% - 30px); text-align: center; }
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(-3px) rotate(45deg); }
  50% { transform: translateY(7px) rotate(45deg); }
}

@keyframes cue-disappear {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 390px) {
  .brand { max-width: 120px; }
  .legend-card { left: 134px; right: 57px; }
  .map-action-wide { width: 42px; min-width: 42px; padding: 0; }
  .map-context-tools { gap: 5px; }
  .map-context-tools { gap: 4px; }
  .map-tool-label { font-size: 9px; }
  .metric-grid { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Readable explanations and controls, including narrow phones. */
/* Keep long names and labels inside their own card, while retaining the full text. */
.place-card, .dialog-card { overflow-wrap: anywhere; hyphens: auto; }
.place-card-top > *, .profile-section, .tool-metrics > div, .housing-chips > span,
.library-item > span, .search-result > span { min-width: 0; }
.library-item { gap: 8px; }
.search-result { overflow-wrap: anywhere; }
.search-result-icon { flex: 0 0 34px; }
.indicator-grid { grid-auto-rows: minmax(76px,auto); }
.indicator-button strong { overflow-wrap: anywhere; hyphens: auto; }
.tool-summary, .history-principles span { font-size: 14px; line-height: 1.6; }
.profile-row, .profile-source { font-size: 13px; line-height: 1.5; }
.tool-table { font-size: 13px; }
.history-control button, .context-history-control button { min-height: 36px; font-size: 11px; }
body.dark .eyebrow, body.dark .legend-eyebrow { color: #7acdc0; }
body.dark .explorer-footer button, body.dark .quick-foot strong,
body.dark .context-history-control button:not(.active), body.dark .mode-pager span,
body.dark .selection-status > b { color: #7acdc0; }
@media (max-width: 990px) {
  .legend-card { padding: 8px 26px 8px 10px; min-height: 46px; }
  .legend-help { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0 7px; border: 0; border-radius: inherit; background: transparent; justify-content: flex-end; float: none; font-size: 17px; }
  .legend-help span { display: none; }
  .legend-card strong { font-size: 12px; }
  .explorer[data-snap="2"] .search-help { display: block; font-size: 12px; line-height: 1.5; }
  .context-history-control button, .history-mobile-control button { min-height: 40px; font-size: 11px; }
  .context-history-head span { font-size: 10px; }
  .sheet-handle small { font-size: 10px; }
  .tool-dialog-card { padding: 18px; }
  .comparison-table th, .comparison-table td { padding: 9px 5px; font-size: 12px; }
  .comparison-table small { font-size: 10px; }
}

@media (max-width: 480px) {
  .library-items { grid-template-columns: minmax(0,1fr); }
  .party-result { grid-template-columns: 10px minmax(0,1fr) minmax(32px, .5fr) 45px; }
}

/* Election type and regional totals share the compact layer picker. */
.election-history-note{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.election-region-label{display:grid;gap:6px;margin-top:12px;font-size:12px;font-weight:700}
.election-region-label select{width:100%;min-width:0;min-height:40px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;font:inherit}
.election-mode-picker .housing-mode-options button{flex:1;min-height:40px}

.election-mode-picker .housing-mode-options{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Desktop: a persistent result column, central map and independent topic navigation. */
.results-panel { display: none; }
@media (min-width: 991px) {
  .app-shell { grid-template-columns: clamp(310px, 27vw, 400px) minmax(0, 1fr) clamp(280px, 24vw, 340px); }
  .results-panel { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100dvh; background: var(--panel); border-right: 1px solid var(--line); }
  .results-heading { padding: 22px 20px 16px; border-bottom: 1px solid var(--line); }
  .results-heading h2 { margin-top: 6px; font-size: 20px; line-height: 1.3; }
  .results-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 20px 65px; scrollbar-width: thin; }
  body .results-panel .place-card { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .results-panel .place-card.selected::before { display: none; }
  .results-panel .place-card-top { gap: 10px; }
  .results-panel .place-card-top h2 { font-size: 21px; line-height: 1.25; }
  .results-panel .place-actions { order: 1; }
  body .results-panel .place-details { padding: 0; border: 0; background: transparent; }
  .results-panel .context-history-head strong { font-size: 12px; }
  .results-panel .context-history-head span { font-size: 10px; }
  .results-panel .context-history-control button { min-height: 40px; }
  .legend-disclosure { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); }
  .legend-disclosure summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: 750; }
  body .results-panel .legend-card { position: static; width: auto; padding: 12px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .results-panel .legend-eyebrow, .results-panel #legend-title { display: none; }
  .results-panel .legend-help { float: none; margin: 0; }
  .results-scroll-cue { position: absolute; bottom: 14px; left: 20px; right: 20px; min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--accent); box-shadow: 0 4px 20px rgba(9,32,48,.15); cursor: pointer; font-size: 12px; font-weight: 800; }
  .explorer-scroll { padding: 24px 20px; }
  .intro-meta { flex-wrap: wrap; gap: 8px; }
  .explorer h1 { font-size: 28px; line-height: 1.1; margin-bottom: 22px; }
  .indicator-grid { max-height: none; overflow: visible; grid-auto-rows: minmax(70px,auto); }
  .indicator-button strong { font-size: 12px; }
  .quick-foot { display: none; }
  .explorer-footer { margin-top: 24px; }
}

@media (min-width: 991px) and (max-width: 1199px) {
  .indicator-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .results-panel .metric-grid strong { font-size: 16px; }
  .results-panel .metric-grid span { font-size: 11px; }
}