.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg,.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51,181,229,0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile{will-change:opacity}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.leaflet-zoom-anim .leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);-moz-transition:-moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);transition:transform 0.25s cubic-bezier(0, 0, 0.25, 1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,0.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255,255,255,0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;border:none;text-align:center;width:18px;height:14px;font:16px/14px Tahoma, Verdana, sans-serif;color:#c3c3c3;text-decoration:none;font-weight:bold;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-clickable{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:""}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}

@font-face {
  font-family: "Work Sans Atlas";
  src: url("../vendor/worksans/WorkSansVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans Atlas";
  src: url("../vendor/worksans/WorkSansVariable-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Atlas";
  src: url("../vendor/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Atlas";
  src: url("../vendor/inter/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-ui: "Work Sans Atlas", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: "Inter Atlas", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #07090e;
  --panel: rgba(8, 11, 18, 0.84);
  --panel-strong: rgba(10, 14, 24, 0.94);
  --panel-soft: rgba(165, 220, 255, 0.08);
  --text: #d8eaf4;
  --muted: #7f97a4;
  --border: rgba(112, 195, 226, 0.14);
  --line: rgba(112, 195, 226, 0.12);
  --accent: #70c3e2;
  --accent-hot: #d94b68;
  --accent-dim: #5a8aa0;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --mosque: #72c9ff;
  --prayer: #4ea66e;
  --other-worship: #d6b162;
  --reception: #d65485;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-right: max(14px, env(safe-area-inset-right));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  --safe-left: max(14px, env(safe-area-inset-left));
  --top-bar-height: 64px;
  --panel-width: min(324px, calc(100vw - var(--safe-left) - var(--safe-right) - 10px));
  --stats-width: clamp(256px, 25.6vw, 352px);
  --mobile-map-modes-offset: 0px;
  --btn-height: 32px;
  --control-radius: 9999px;
  --control-border: rgba(112, 195, 226, 0.12);
  --control-border-strong: rgba(112, 195, 226, 0.22);
  --control-bg: rgba(8, 12, 18, 0.9);
  --control-bg-hover: rgba(112, 195, 226, 0.1);
  --control-hover-border: rgba(112, 195, 226, 0.22);
  --control-hover-bg: rgba(112, 195, 226, 0.1);
  --control-shadow-ring: 0 0 0 1px rgba(112, 195, 226, 0.06);
  --panel-card-bg: rgba(7, 11, 18, 0.88);
  --panel-card-border: rgba(112, 195, 226, 0.10);
  --menu-surface-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  --card-radius: 18px;
  --card-radius-sm: 14px;
  --card-inset-border: rgba(255, 255, 255, 0.018);
  --surface-raised: rgba(11, 16, 25, 0.86);
  /* Semantic surfaces — both themes redefine these so components never hardcode
     a per-theme background (see body.light-theme). */
  --surface-panel: rgba(14, 20, 31, 0.97);
  --surface-bar: rgba(9, 13, 21, 0.96);
  --surface-overlay: rgba(15, 21, 32, 0.98);
  /* Knowledge-base migration-flow map (Knowledge.elm renderMigrationPath /
     renderMigrationSourceLabel / renderMigrationDot). Elm's SVG fill/stroke
     attributes reference these directly, so the animation follows the theme
     without Elm needing to know which one is active. */
  --kb-migmap-bg-radial: rgba(96, 165, 250, 0.10);
  --kb-migmap-bg-1: rgba(7, 14, 24, 0.98);
  --kb-migmap-bg-2: rgba(6, 10, 18, 0.98);
  --kb-migmap-border: rgba(255, 255, 255, 0.08);
  --kb-migmap-dest-fill: rgba(30, 60, 80, 0.45);
  --kb-migmap-dest-stroke: rgba(60, 120, 180, 0.48);
  --kb-migmap-path-stroke: rgba(80, 110, 140, 0.34);
  --kb-migmap-label: rgba(255, 180, 60, 0.72);
  --kb-migmap-dot-hot-settled: rgba(249, 115, 22, 0.58);
  --kb-migmap-dot-hot-flight: #f97316;
  --kb-migmap-dot-settled: rgba(96, 165, 250, 0.30);
  --kb-migmap-dot-flight: #60a5fa;
  /* Pew Muslim-population choropleth (Knowledge.elm renderPewMap). The bucket
     fill colors (pewColor) are data-driven and stay the same in both themes;
     only the "no data" fill and country-border stroke need to flip. */
  --kb-pew-no-data: #1a2535;
  --kb-pew-stroke: #ffffff;
  /* Consanguinity choropleth (Knowledge.elm renderConsanguinityMap). As with
     the Pew map the bucket ramp is data-driven and identical in both themes;
     only the "0 % in source" fill flips, so it reads as empty rather than as
     the palest step of the ramp. */
  --kb-consang-zero: #eef2f7;
}

* {
  box-sizing: border-box;
  scrollbar-color: rgba(112, 195, 226, 0.18) transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(112, 195, 226, 0.18);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(112, 195, 226, 0.32);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--text);
}

html {
  background: #000000;
}

body {
  background: transparent;
}

body {
  min-height: 100dvh;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  display: none;
}

body::after {
  background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.3));
  mix-blend-mode: screen;
  opacity: 0.35;
}

button,
select,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

select,
input,
button {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(10, 14, 22, 0.9);
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

input[type="range"] {
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(112, 195, 226, 0.18);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.2);
  cursor: pointer;
  margin-top: -7px;
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(112, 195, 226, 0.18);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.2);
  cursor: pointer;
}

select:hover,
input:hover,
button:hover,
select:focus,
input:focus,
button:focus-visible {
  border-color: rgba(112, 195, 226, 0.36);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.12), inset 0 0 0 1px rgba(112, 195, 226, 0.06);
}

input[type="range"]:hover,
input[type="range"]:focus {
  border-color: transparent;
  box-shadow: none;
}

button:active {
  transform: translateY(1px);
}

option {
  background: #090d15;
  color: var(--text);
}

[hidden] {
  display: none !important;
}

/* Fix leaflet feature click outline */
path.leaflet-interactive:focus {
  outline: none;
}

.leaflet-container,
.leaflet-grab,
.leaflet-drag-target {
  cursor: default;
}

.leaflet-container.is-boundary-hovering,
.leaflet-container.is-boundary-hovering .leaflet-interactive {
  cursor: pointer !important;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: grabbing !important;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 1fr;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  z-index: 1;
}

.app-shell::before {
  display: none;
}

body[data-view] #homeStage,
body[data-view] #mapStage,
body[data-view] #chartStage,
body[data-view] #newsStage,
body[data-view] #europeStage,
body[data-view] #cartogramStage,
body[data-view] #knowledgeStage,
body[data-view] #utilityPanel,
body[data-view] #menuToggleBtn,
body[data-view] #chartTocToggleBtn {
  display: none;
}

body[data-view="map"] #mapStage,
body[data-view="map"] #utilityPanel,
body[data-view="cartogram"] #utilityPanel {
  display: grid;
}

body[data-view="map"] #menuToggleBtn,
body[data-view="cartogram"] #menuToggleBtn {
  display: flex;
}

/* TOC toggles are available on desktop too (like the map menu), so the contents
   sidebar can be hidden to give the charts / knowledge base more room. */
body[data-view="chart"] #chartTocToggleBtn {
  display: flex;
}

body[data-view="home"] #homeStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

body[data-view="chart"] #chartStage,
body[data-view="news"] #newsStage,
body[data-view="europe"] #europeStage,
body[data-view="knowledge"] #knowledgeStage {
  display: flex;
}

body[data-view="cartogram"] #cartogramStage {
  display: block;
}

body[data-view="cartogram"] #overlayLayersSection {
  display: none;
}

html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #homeStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #mapStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #chartStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #newsStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #europeStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #cartogramStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #knowledgeStage,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #utilityPanel,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #menuToggleBtn,
html:not(.js) body:has(:is(#homeStage, #mapStage, #chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #chartTocToggleBtn {
  display: none;
}

html:not(.js) body:has(#homeStage:target) #homeStage {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

html:not(.js) body:has(#mapStage:target) #mapStage,
html:not(.js) body:has(#mapStage:target) #utilityPanel {
  display: grid;
}

html:not(.js) body:has(#mapStage:target) #menuToggleBtn {
  display: flex;
}

html:not(.js) body:has(#chartStage:target) #chartStage,
html:not(.js) body:has(#newsStage:target) #newsStage,
html:not(.js) body:has(#europeStage:target) #europeStage,
html:not(.js) body:has(#knowledgeStage:target) #knowledgeStage {
  display: flex;
}

html:not(.js) body:has(#cartogramStage:target) #cartogramStage {
  display: block;
}

html:not(.js) body:has(#cartogramStage:target) #utilityPanel {
  display: grid;
}

html:not(.js) body:has(#cartogramStage:target) #menuToggleBtn {
  display: flex;
}

/* ── Top bar ── */
.top-bar {
  position: relative;
  z-index: 730;
  display: block;
  height: var(--top-bar-height);
  padding: 0;
  background: var(--surface-bar);
  border-bottom: 1px solid var(--border);
}

.top-bar-layout.top-bar-layout--elm {
  position: relative;
  z-index: 730;
  height: var(--top-bar-height);
  background: var(--surface-bar);
  border-bottom: 1px solid var(--border);
}

.top-bar-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--safe-right) + 12px) 0 calc(var(--safe-left) + 10px);
}

.top-bar-zone {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-bar-left {
  justify-content: flex-start;
  gap: 8px;
}

.top-bar-center {
  justify-content: center;
}

.top-bar-right {
  justify-content: flex-end;
  gap: 8px;
}

.top-bar-right .lang-dropdown,
.top-bar-right .theme-toggle-btn {
  right: auto;
}

.top-bar-toggle {
  position: static;
  z-index: 3;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--btn-height) !important;
  padding: 0;
  line-height: 1;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.top-bar-toggle:hover {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
  box-shadow: var(--control-shadow-ring);
}

.top-bar-toggle:active {
  transform: none;
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
}

.top-bar-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.top-bar-icon * {
  pointer-events: none;
}

.top-bar-icon.is-hidden {
  display: none;
}

.top-bar-tabs-mount {
  position: static;
  width: auto;
  max-width: 100%;
  transform: none;
  z-index: 2;
  display: flex;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
}

.top-bar-tabs {
  flex: 0 1 auto;
  display: flex;
  max-width: 100%;
  min-width: 0;
  gap: 4px;
  background: rgba(8, 12, 20, 0.6);
  padding: 3px;
  border-radius: var(--card-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
  overflow: hidden;
  pointer-events: auto;
}

.top-bar-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 0;
  padding: 0 14px;
  border-radius: var(--control-radius);
  border: none;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
  z-index: 1;
}

.top-bar-tab:hover {
  color: var(--text);
  background: rgba(112, 195, 226, 0.05);
}

.top-bar-tab.is-active {
  background: rgba(112, 195, 226, 0.12);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Migri chart view toggle (by country / sex / age) */
.migri-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 10px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 8px;
}
.migri-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.migri-view-btn:hover {
  color: var(--text);
  background: rgba(112, 195, 226, 0.05);
}
.migri-view-btn.is-active {
  color: var(--accent);
  background: rgba(112, 195, 226, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* In sex/age breakdown mode the country picker does not apply, so hide it. */
.migri-mode-breakdown .chart-sidebar-mun {
  display: none;
}

/* Map/Cartogram render as one pill with a sliding indicator behind the active
   label, rather than two separate tab buttons — app_ui.js's
   syncTopBarGeoIndicator positions #topBarGeoIndicator with a translateX. */
.top-bar-tab-pair {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}

.top-bar-tab-pair-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: var(--control-radius);
  background: rgba(112, 195, 226, 0.12);
  border: 1.5px solid var(--accent);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.top-bar-tab-pair.is-off .top-bar-tab-pair-indicator {
  opacity: 0;
}

.top-bar-tab--pair {
  position: relative;
  z-index: 1;
}

body[data-view="map"] #tabMap.top-bar-tab--pair,
body[data-view="cartogram"] #tabCartogram.top-bar-tab--pair,
html:not(.js) body:has(#mapStage:target) #tabMap.top-bar-tab--pair,
html:not(.js) body:has(#cartogramStage:target) #tabCartogram.top-bar-tab--pair {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

body.light-theme[data-view="map"] #tabMap.top-bar-tab--pair,
body.light-theme[data-view="cartogram"] #tabCartogram.top-bar-tab--pair,
body.light-theme body:has(#cartogramStage:target) #tabCartogram.top-bar-tab--pair,
body.light-theme body:has(#mapStage:target) #tabMap.top-bar-tab--pair {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

/* News feed hidden from the nav (desktop tab + mobile view menu). Kept here as a
   build-independent guard so it stays hidden even before the Elm topbar is
   recompiled; the Elm source (TopBar.elm) also marks it hidden. */
#tabNews,
#mobileNavMenu li[data-view="news"] {
  display: none !important;
}

body[data-view]:not([data-view="map"]) #tabMap.is-active {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

body[data-view="home"] #tabHome,
body[data-view="map"] #tabMap,
body[data-view="chart"] #tabChart,
body[data-view="news"] #tabNews,
body[data-view="europe"] #tabEurope,
body[data-view="knowledge"] #tabKnowledge,
html:not(.js) body:has(#homeStage:target) #tabHome,
html:not(.js) body:has(#mapStage:target) #tabMap,
html:not(.js) body:has(#chartStage:target) #tabChart,
html:not(.js) body:has(#newsStage:target) #tabNews,
html:not(.js) body:has(#europeStage:target) #tabEurope,
html:not(.js) body:has(#knowledgeStage:target) #tabKnowledge {
  background: rgba(112, 195, 226, 0.12);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html:not(.js) body:has(:is(#chartStage, #newsStage, #europeStage, #cartogramStage, #knowledgeStage):target) #tabMap.is-active {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

body[data-view="cartogram"] #tabCartogram,
html:not(.js) body:has(#cartogramStage:target) #tabCartogram,
html:not(.js) body:has(#mapStage:target) #tabMap {
  background: rgba(112, 195, 226, 0.12);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.chart-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.chart-title-row .chart-view-title {
  flex: 1;
  margin: 0;
}

.chart-share-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  opacity: 0.9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chart-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.chart-share-btn:hover { opacity: 1; color: var(--text); border-color: var(--control-hover-border); background: var(--control-hover-bg); box-shadow: var(--control-shadow-ring); }
.chart-share-btn.is-copied { opacity: 1; color: #3dba6e; border-color: #3dba6e; background: rgba(61, 186, 110, 0.1); }

.map-share-btn {
  position: static;
  transform: none;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.map-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.map-share-btn:hover { color: var(--text); border-color: var(--control-hover-border); background: var(--control-hover-bg); box-shadow: var(--control-shadow-ring); }
.map-share-btn.is-copied { color: #3dba6e; border-color: #3dba6e; background: rgba(61, 186, 110, 0.1); }

/* The knowledge base has no shareable per-section state (serializeState() has no
   "knowledge" case), and the chart view already has its own per-chart share
   buttons, so the generic top-bar share button is either broken or redundant
   there — hide it on both views, at every breakpoint. */
body[data-view="chart"] .map-share-btn,
body[data-view="knowledge"] .map-share-btn,
html:not(.js) body:has(#chartStage:target) .map-share-btn,
html:not(.js) body:has(#knowledgeStage:target) .map-share-btn {
  display: none;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(112, 195, 226, 0.2);
  background: rgba(112, 195, 226, 0.06);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.share-btn:hover { color: var(--text); border-color: rgba(112, 195, 226, 0.4); background: rgba(112, 195, 226, 0.1); }
.share-btn.is-copied { color: var(--accent); border-color: var(--accent); }

.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-overlay);
  border: 1px solid rgba(112, 195, 226, 0.3);
  color: var(--accent);
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
.share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.top-bar-pill {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: var(--btn-height) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 10px;
  border: 1px solid rgba(125, 232, 178, 0.22);
  border-radius: 999px;
  background: rgba(11, 22, 18, 0.88);
  color: #8de3ba;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}

/* ── Map stage ── */
.map-stage {
  position: relative;
  min-width: 0;
  height: 100%;
}

.map-noscript-message {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1150;
  width: min(420px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  padding: 18px 20px;
  border: 1px solid rgba(112, 195, 226, 0.2);
  border-radius: var(--card-radius);
  background: rgba(8, 12, 18, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.clipboard-helper {
  position: fixed;
  opacity: 0;
}

.js-hidden-select {
  display: none;
}

.map-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1100;
  cursor: default;
  pointer-events: none;
}
.map-loading-overlay.is-active { display: block; }

.map-basemap-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    radial-gradient(circle at 24% 18%, rgba(88, 143, 164, 0.13), transparent 34%),
    radial-gradient(circle at 72% 58%, rgba(22, 78, 102, 0.15), transparent 42%),
    linear-gradient(180deg, #08131d 0%, #02070d 100%);
}

.map-basemap-fallback.is-visible {
  opacity: 1;
}

.map-basemap-fallback__glow,
.map-basemap-fallback__grid {
  position: absolute;
  inset: 0;
}

.map-basemap-fallback__glow {
  background:
    linear-gradient(180deg, rgba(58, 115, 138, 0.12), transparent 48%),
    radial-gradient(circle at 50% 42%, rgba(74, 131, 158, 0.09), transparent 38%);
  opacity: 0.62;
}

.map-basemap-fallback__grid {
  background:
    linear-gradient(100deg, transparent 0%, rgba(112, 156, 176, 0.025) 46%, transparent 64%),
    radial-gradient(circle at 58% 35%, rgba(130, 176, 196, 0.028), transparent 32%);
  opacity: 0.56;
}

.mobile-map-modes {
  display: none;
  position: absolute;
  top: calc(var(--safe-top) + var(--mobile-map-modes-offset));
  left: var(--safe-left);
  right: var(--safe-right);
  z-index: 720;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-right: 4px;
  padding-bottom: 4px;
  overflow: visible;
  scrollbar-width: none;
}

.mobile-map-modes::-webkit-scrollbar {
  display: none;
}

.map-controls-elm--mobile {
  max-width: 100%;
}

.map-controls-elm--overlays {
  display: contents;
}

.mobile-map-mode-button {
  flex: 0 0 auto;
  height: var(--btn-height);
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.94);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.mobile-map-mode-button.is-active {
  border-color: rgba(112, 195, 226, 0.4);
  background:
    linear-gradient(135deg, rgba(112, 195, 226, 0.18), transparent 70%),
    rgba(8, 12, 18, 0.96);
  color: var(--accent);
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 25% 20%, rgba(84, 138, 160, 0.10), transparent 34%),
    linear-gradient(180deg, #08131d 0%, #02070d 100%);
}

#map {
  z-index: 2;
  background: transparent;
  will-change: transform;
}

.boundary-hover-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 715;
  max-width: min(320px, calc(100vw - 28px));
  padding: 10px 12px;
  border: 1px solid rgba(112, 195, 226, 0.22);
  border-radius: var(--card-radius-sm);
  background: var(--surface-overlay);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.08s ease;
}

.boundary-hover-popup.is-visible {
  opacity: 1;
}

/* ── Floating info card (right side) ── */
.info-card {
  --panel-pad-x: 14px;
  --panel-pad-top: 14px;
  --panel-pad-bottom: 14px;
  position: fixed;
  top: 64px;
  right: 24px;
  z-index: 720;
  display: grid;
  align-content: start;
  gap: 10px;
  width: clamp(208px, 17.6vw, 272px);
  width: var(--stats-width);
  max-height: calc(100dvh - 100px);
  padding: var(--panel-pad-top) var(--panel-pad-x) var(--panel-pad-bottom);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#statsPanel {
  background: var(--surface-panel);
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.info-card.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.info-card.info-card--left {
  right: auto;
  left: 24px;
  transform: translateX(-20px);
}

.info-card.info-card--left.is-visible {
  transform: translateX(0);
}

.stats-panel-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 0 0 8px;
  transition: color 0.16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.stats-panel-close-btn:hover,
.stats-panel-close-btn:focus,
.stats-panel-close-btn:focus-visible {
  background: none;
  color: var(--text);
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.info-card .stats-card {
  padding: 9px 10px;
  border-radius: var(--card-radius-sm);
  gap: 6px;
}

#statsPanel .stats-card {
  background: rgba(10, 14, 22, 0.94);
  box-shadow: none;
}

.info-card .stats-primary-value {
  font-size: clamp(22px, 3vw, 30px);
}

.info-card .stats-subtitle,
.info-card .stats-primary-meta,
.info-card .stats-panel-empty {
  font-size: 9px;
}

.info-card #graphPanelTitle {
  font-size: 13px;
}

/* ── Menu section headings ── */
.menu-section {
  display: grid;
  gap: 8px;
}

/* ── School switcher in info panel ── */
.school-switcher-container {
  display: none;
  position: relative;
  margin-bottom: 8px;
}

.school-switcher-container.is-visible {
  display: block;
}

.school-switcher-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.school-switcher-select:hover {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
}

.school-switcher-chevron {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.school-switcher-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: var(--card-radius-sm);
  border: 1px solid var(--control-border);
  background: var(--panel-strong);
  box-shadow: var(--menu-surface-shadow);
  backdrop-filter: blur(10px);
}

.school-switcher-menu.is-open {
  display: block;
}

.school-switcher-menu li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.school-switcher-menu li:hover {
  background: rgba(112, 195, 226, 0.1);
}

.school-switcher-menu li[aria-selected="true"] {
  color: var(--accent);
  background: rgba(112, 195, 226, 0.12);
}

.school-switcher-metric {
  color: var(--muted);
  font-size: 10px;
}

.school-switcher-single {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-bg);
}

/* ── Custom dataset dropdown ── */
.custom-dropdown {
  position: relative;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 9px 14px 9px 18px;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  border-radius: 10px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.custom-dropdown-label {
  flex: 1;
  min-width: 0;
}

.custom-dropdown-trigger:hover,
.custom-dropdown.is-open .custom-dropdown-trigger {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
}

.custom-dropdown-chevron {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.custom-dropdown.is-open .custom-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--accent);
  opacity: 1;
}

#metricDropdown .custom-dropdown-trigger {
  height: auto;
  min-height: 40px;
  padding: 8px 12px 8px 16px;
  font-size: 12px;
  align-items: center;
  text-align: left;
}

.custom-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  z-index: 9999;
  margin: 0;
  padding: 4px;
  list-style: none;
  border-radius: var(--card-radius-sm);
  border: 1px solid var(--control-border);
  background: var(--panel-strong);
  box-shadow: var(--menu-surface-shadow);
  backdrop-filter: blur(10px);
}

.custom-dropdown-menu.is-open {
  display: block;
}

.custom-dropdown-menu li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.custom-dropdown-menu li:hover {
  background: rgba(112, 195, 226, 0.1);
}

.custom-dropdown-menu li[aria-selected="true"] {
  color: var(--accent);
  background: rgba(112, 195, 226, 0.12);
}

.custom-dropdown-menu li.option-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px 4px;
  cursor: default;
  user-select: none;
  pointer-events: none;
  border-radius: 0;
}

.custom-dropdown-menu li.option-indented {
  padding-left: 18px;
}

.custom-dropdown-menu li.metric-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label-text {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
}

.metric-subtitle {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

.menu-section-title {
  margin: 0;
  padding-left: 12px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}

.utility-panel .menu-section-title {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 8px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid var(--panel-card-border);
}

.menu-section-subtitle {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

#metricsSection > .menu-section-subtitle:first-child {
  margin-bottom: 10px;
}

#yearControlGroup {
  gap: 7px;
  margin-bottom: 8px;
}

#metricSelectGroup,
#yearControlGroup,
#natBgPickerGroup {
  display: none;
}

#metricsSection[data-control-mode="standard"] #metricSelectGroup,
#metricsSection[data-control-mode="natbg"] #natBgPickerGroup {
  display: block;
}

#metricsSection[data-control-mode="combined"] #yearControlGroup,
#metricsSection[data-has-years="true"] #yearControlGroup {
  display: grid;
}

.score-components-title {
  margin-top: 32px;
  padding-bottom: 18px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(112, 195, 226, 0.08);
}

/* ── Score component accordion ── */
.score-component-group {
  border-bottom: 1px solid rgba(112, 195, 226, 0.08);
  padding: 8px 0;
}

.score-component-header {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  cursor: pointer;
  user-select: none;
}

.score-component-header:hover {
  opacity: 0.85;
}

.score-component-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
}

.score-component-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  height: var(--btn-height) !important;
  padding: 0 14px;
  line-height: 1;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(112, 195, 226, 0.12);
  background: rgba(8, 12, 18, 0.9);
  color: var(--accent-dim);
}

.score-component-status.is-custom {
  background: rgba(112, 195, 226, 0.12);
}

.score-component-status[data-status-action] {
  cursor: pointer;
}

.score-component-status[data-status-action]:hover {
  border-color: var(--accent);
}

.score-component-chevron {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.18s ease;
  flex-shrink: 0;
  justify-self: end;
}

.score-component-group.is-expanded .score-component-chevron {
  transform: rotate(180deg);
}

.score-component-metrics {
  display: none;
  padding-top: 8px;
}

.score-component-group.is-expanded .score-component-metrics {
  display: grid;
  gap: 6px;
}

/* ── Left-side menu panel ── */
.utility-panel {
  --panel-pad-x: 18px;
  --panel-pad-top: 18px;
  --panel-pad-bottom: 20px;
  position: fixed;
  top: var(--top-bar-height);
  left: 0;
  bottom: 0;
  z-index: 710;
  display: grid;
  align-content: start;
  gap: 12px;
  width: var(--panel-width);
  min-width: 280px;
  max-width: 80vw;
  height: auto;
  max-height: calc(100dvh - var(--top-bar-height));
  padding: var(--panel-pad-top) var(--panel-pad-x) var(--panel-pad-bottom);
  overflow: auto;
  overscroll-behavior: contain;
  resize: none;
  border-right: 1px solid var(--border);
  background: var(--surface-panel);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.28);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.utility-panel--elm {
  grid-template-rows: auto;
}

.utility-panel-card {
  display: grid;
  gap: 12px;
}

.utility-panel-card-heading {
  display: grid;
  gap: 4px;
  padding: 2px 4px 0;
}

.utility-control-block {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.utility-control-block--combined {
  padding-top: 2px;
}

.utility-panel-native-controls {
  display: none;
}

#cartogramSidebarSection {
  display: none;
}

body[data-view="cartogram"] #cartogramSidebarSection {
  display: grid;
}

.cartogram-sidebar-legend {
  min-height: 24px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.utility-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.stats-card {
  position: relative;
  border: 1px solid var(--panel-card-border);
  background: var(--panel-card-bg);
  border-radius: var(--card-radius);
  padding: 11px 12px;
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.stats-card h3 {
  margin: 0;
  padding-top: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.stats-subtitle,
.stats-primary-meta,
.stats-empty,
.stats-panel-empty {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.stats-card {
  display: grid;
  gap: 8px;
}

.stats-card-primary {
  background:
    linear-gradient(135deg, rgba(112, 195, 226, 0.08), transparent 44%),
    rgba(7, 11, 18, 0.82);
}

#statsPanel .stats-card-primary {
  background: rgba(12, 18, 26, 0.96);
}

.graph-summary-card {
  position: relative;
  z-index: 3;
}

.dataset-range-cards {
  display: grid;
  gap: 9px;
}

.dataset-range-card {
  gap: 7px;
}

.stats-card-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stats-card-heading--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ranking-scroll-back-btn {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(112, 195, 226, 0.08);
  color: var(--accent);
  border: 1px solid rgba(112, 195, 226, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}

.ranking-scroll-back-btn:hover {
  background: rgba(112, 195, 226, 0.16);
}

.stats-card-heading .stats-subtitle {
  min-width: 0;
}

#graphPanelTitle {
  margin: 0;
  line-height: 1;
}

#graphPanelSubtitle {
  margin-top: 1px;
}

.stats-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.stats-primary-value {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: #f4fbff;
  white-space: nowrap;
}

.stats-secondary-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(112, 195, 226, 0.08);
  margin-bottom: 4px;
}

.stats-secondary-value {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  font-weight: 600;
  color: #f4fbff;
}

.stats-secondary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

.stats-supplementary {
  display: grid;
  gap: 6px;
}

.stats-supplementary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(112, 195, 226, 0.08);
  font-size: 11px;
}

.stats-supplementary-label {
  color: var(--muted);
}

.stats-supplementary-value {
  color: var(--text);
  text-align: right;
}

.stats-supplementary-source {
  margin: 10px 0 0;
  font-size: 10px;
  color: var(--muted);
}

.stats-supplementary-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(112, 195, 226, 0.35);
}

.stats-supplementary-source a:hover {
  color: var(--accent);
}

.foreign-bg-bars {
  margin-top: 10px;
  display: grid;
  gap: 4px;
}

.foreign-bg-bars-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 2px;
}

.foreign-bg-bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.foreign-bg-bar-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foreign-bg-bar-track {
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.foreign-bg-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  opacity: 0.7;
}

.foreign-bg-bar-pct {
  color: var(--muted);
  text-align: right;
  min-width: 32px;
  font-size: 10px;
}

.stats-diagram {
  display: grid;
  gap: 3px;
}

.stats-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.stats-diagram-note,
.stats-diagram-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
}

.stats-diagram-note strong {
  color: var(--text);
  font-weight: 500;
}

.stats-ranking-list {
  display: grid;
  gap: 8px;
  max-height: min(34dvh, 320px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  align-content: start;
}

.stats-ranking-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(112, 195, 226, 0.08);
  border-radius: var(--card-radius-sm);
  background: rgba(8, 12, 18, 0.64);
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}

.stats-ranking-item:hover {
  border-color: rgba(112, 195, 226, 0.2);
  background: rgba(8, 12, 18, 0.84);
}

.stats-ranking-item.is-selected {
  border-color: rgba(112, 195, 226, 0.26);
  background:
    linear-gradient(135deg, rgba(112, 195, 226, 0.12), transparent 72%),
    rgba(8, 12, 18, 0.78);
}

.stats-ranking-item.is-selected .stats-ranking-name,
.stats-ranking-item.is-selected .stats-ranking-value {
  color: #f8fdff;
}

.stats-ranking-item.is-selected .stats-ranking-name {
  font-weight: 500;
}

.stats-ranking-rank {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stats-ranking-name {
  min-width: 0;
  font-size: 11px;
  color: var(--text);
}

.stats-ranking-name strong {
  font-weight: 500;
}

.stats-ranking-value {
  font-size: 11px;
  color: #f1fbff;
}

.control-select,
.utility-panel > * {
  position: relative;
  z-index: 1;
}

.control-group {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.combined-controls-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.control-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.control-heading-empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.control-caption {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(127, 151, 164, 0.9);
  text-align: right;
}

#yearRangeCurrent {
  font-weight: 600;
  color: var(--accent);
}

.control-label {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.control-select {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.control-select-year {
  min-width: 112px;
}

.control-select select {
  min-height: 36px;
  border-color: rgba(112, 195, 226, 0.12);
  background: rgba(8, 12, 18, 0.92);
  width: 100%;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: var(--card-radius-sm);
}

.control-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.info-card h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.overlay-panel,
details {
  position: relative;
  border: 1px solid var(--panel-card-border);
  border-radius: var(--card-radius);
  background: var(--panel-card-bg);
}

.panel-section-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.panel-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.summary-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.summary-chip strong {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.panel-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.status-line {
  min-height: 17px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-line.is-error {
  color: var(--accent-hot);
}

.transparency-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 120px;
}

.transparency-control input {
  width: 100%;
}

.transparency-value {
  font-size: 11px;
  color: var(--accent);
  min-width: 32px;
  text-align: right;
}

.layer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-card-border);
}

.layer-toggle:last-of-type {
  border-bottom: none;
}

.faith-toggle-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--panel-card-border);
}

.faith-toggle-list:empty {
  display: none;
}

.faith-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(112, 195, 226, 0.16);
  border-radius: 6px;
  background: rgba(10, 18, 28, 0.54);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.1;
  cursor: pointer;
}

.faith-toggle-chip[aria-pressed="true"] {
  border-color: rgba(214, 177, 98, 0.72);
  background: rgba(214, 177, 98, 0.16);
  color: #ffe2a0;
}

.faith-toggle-count {
  color: var(--muted);
  font-size: 10px;
}

.combined-metric-toggles {
  display: grid;
  gap: 12px;
}

.combined-metric-toggle-list {
  display: grid;
  gap: 8px;
}

.combined-metric-toggle {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(112, 195, 226, 0.08);
}

.combined-metric-toggle:first-child {
  border-top: 0;
  padding-top: 0;
}

.year-slider-group {
  display: grid;
  gap: 8px;
}

.year-range {
  width: 100%;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  height: 22px;
  padding: 0;
  cursor: pointer;
}

.year-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(112, 195, 226, 0.18);
}

.year-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  margin-top: -8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.year-range:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px rgba(112, 195, 226, 0.15), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.year-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(112, 195, 226, 0.18);
}

.year-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.25), 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.year-scale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
}

.layer-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.layer-name {
  color: var(--text);
  font-size: 12px;
}

.layer-meta {
  color: var(--muted);
  font-size: 11px;
}

.layer-button {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
}

.layer-button {
  min-width: 70px;
  height: var(--btn-height) !important;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: var(--control-radius);
}

.layer-button.is-active {
  color: var(--accent);
  border-color: var(--control-border-strong);
  box-shadow: inset 0 0 0 1px rgba(112, 195, 226, 0.08);
}

.layer-button:not(.is-active) {
  color: var(--muted);
}

.layer-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.leaflet-pane.top-markers-pane {
  z-index: 610;
}

.atlas-marker {
  position: relative;
  display: block;
  width: 18px;
  height: 24px;
  --marker-color: var(--accent);
  --marker-fill: color-mix(in srgb, var(--marker-color) 68%, #09111b);
  overflow: visible;
}

.atlas-marker::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
  background: var(--marker-fill);
  border: 1px solid color-mix(in srgb, var(--marker-color) 22%, white);
  box-shadow:
    0 0 0 1px rgba(4, 8, 14, 0.88),
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 0 10px color-mix(in srgb, var(--marker-color) 16%, transparent);
}

.atlas-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 13px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  filter: blur(4px);
}

.atlas-marker-core,
.atlas-marker-accent {
  position: absolute;
  pointer-events: none;
}

.atlas-marker-core {
  left: 50%;
  top: 7px;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(246, 250, 252, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.atlas-marker-accent {
  left: 50%;
  top: 7px;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(246, 250, 252, 0.18);
  opacity: 0.52;
}

.atlas-marker-mosque {
  --marker-color: #7ab2e8;
}

.atlas-marker-prayer {
  --marker-color: #79c8a0;
}

.atlas-marker-reception {
  --marker-color: #d98da0;
}

.atlas-marker-mosque .atlas-marker-accent {
  border-radius: 999px;
}

.atlas-marker-prayer .atlas-marker-accent {
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.atlas-marker-reception .atlas-marker-accent {
  border-radius: 2px;
}

.atlas-marker-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.atlas-marker-svg svg {
  width: 100%;
  height: 100%;
}

.type-mosque {
  color: #7ab2e8;
}

.type-prayer {
  color: #79c8a0;
}

.type-other-worship {
  color: var(--other-worship);
}

.type-reception {
  color: #d98da0;
}

.type-mosque svg path,
.type-prayer svg path,
.type-other-worship svg circle,
.type-reception svg rect {
  stroke: white;
  stroke-width: 2;
  paint-order: stroke fill;
}

.type-school {
  color: #f0c94b;
}

.leaflet-tooltip {
  z-index: 650;
}

.mini-legend {
  display: grid;
  gap: 8px;
}

.mini-legend {
  margin-top: 10px;
  padding: 12px 12px 0;
  border-top: 1px solid rgba(112, 195, 226, 0.08);
  color: var(--muted);
  font-size: 11px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-legend-item:last-child {
  grid-column: 1 / -1;
}

.layer-toggle.is-hidden {
  display: none;
}

.leaflet-div-icon {
  background: none !important;
  border: none !important;
}

.news-feed-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  align-content: start;
}

.news-feed-filters {
  display: grid;
  gap: 10px;
}

.news-filter-panel {
  display: grid;
  gap: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition:
    max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.news-feed-filters.is-expanded .news-filter-panel {
  max-height: min(50dvh, 420px);
  opacity: 1;
  overflow-y: auto;
  transform: translateY(0);
  pointer-events: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.news-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-filter-chip {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.news-filter-chip:hover,
.news-filter-chip.is-active {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  color: var(--accent);
  box-shadow: var(--control-shadow-ring);
}

.news-filter-search-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  z-index: 1;
  height: 40px;
  border-radius: var(--card-radius-sm);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.news-filter-search-wrap:focus-within {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
}

.news-filter-search {
  width: 100%;
  height: 100%;
  padding: 0 36px 0 12px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  outline: none;
  box-sizing: border-box;
}

.news-filter-search::placeholder {
  color: var(--muted);
}

.news-filter-search:focus {
  background: transparent;
}

.news-filter-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.news-filter-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(112, 195, 226, 0.06);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  padding: 0;
}

.news-filter-search-clear.is-visible {
  display: inline-flex;
}

.news-filter-search-clear:hover {
  background: var(--control-hover-bg);
  border-color: var(--control-border);
  color: var(--text);
}

.news-feed-list::-webkit-scrollbar {
  width: 8px;
}

.news-feed-list::-webkit-scrollbar-thumb {
  background: rgba(112, 195, 226, 0.24);
  border-radius: 999px;
}

.news-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(112, 195, 226, 0.16);
  border-radius: var(--card-radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
  color: var(--text);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}

.news-card:hover,
.news-card:focus-visible {
  border-color: rgba(112, 195, 226, 0.3);
  background: rgba(12, 18, 25, 0.96);
  transform: translateY(-1px);
}

.news-card.is-disabled {
  opacity: 0.78;
  cursor: default;
}

.news-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.news-card-area,
.news-card-type {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.news-card-area {
  color: #ffd89a;
  background: rgba(255, 216, 154, 0.12);
  border: 1px solid rgba(255, 216, 154, 0.18);
}

.news-card-type[data-news-type="immigration"] {
  color: #70c3e2;
  background: rgba(112, 195, 226, 0.12);
  border: 1px solid rgba(112, 195, 226, 0.22);
}

.news-card-type[data-news-type="religionIntegration"] {
  color: #ffb36f;
  background: rgba(255, 179, 111, 0.12);
  border: 1px solid rgba(255, 179, 111, 0.22);
}

.news-card-type[data-news-type="honorViolence"] {
  color: #ff8ba7;
  background: rgba(255, 139, 167, 0.12);
  border: 1px solid rgba(255, 139, 167, 0.22);
}

.news-card-type[data-news-type="sexCrime"] {
  color: #ff8d8d;
  background: rgba(255, 141, 141, 0.12);
  border: 1px solid rgba(255, 141, 141, 0.22);
}

.news-card-type[data-news-type="gangCrime"] {
  color: #c7a6ff;
  background: rgba(199, 166, 255, 0.12);
  border: 1px solid rgba(199, 166, 255, 0.22);
}

.news-card-type[data-news-type="violentCrime"],
.news-card-type[data-news-type="crime"] {
  color: #ffbf66;
  background: rgba(255, 191, 102, 0.12);
  border: 1px solid rgba(255, 191, 102, 0.22);
}

.news-card-type[data-news-type="society"] {
  color: #c9d8e6;
  background: rgba(201, 216, 230, 0.08);
  border: 1px solid rgba(201, 216, 230, 0.16);
}

.news-card strong {
  display: block;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-card-meta {
  display: block;
  min-width: 0;
  font-size: 10px;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.news-card-warning {
  font-size: 10px;
  color: #ffd89a;
}

.legend-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
}

.legend-icon svg {
  width: 100%;
  height: 100%;
}

details {
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  border-radius: var(--card-radius-sm);
}


.panel-footnote {
  display: block;
  position: sticky;
  bottom: calc(-1 * var(--panel-pad-bottom));
  margin-top: auto;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.panel-footnote::before {
  display: none;
}

details summary {
  cursor: pointer;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.panel-footnote summary {
  margin: 0;
  line-height: 1.35;
  padding: 0;
}

.panel-footnote[open] summary {
  margin-bottom: 12px;
}

.panel-footnote > :not(summary) {
  margin: 0;
}

.panel-footnote .note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.leaflet-control-attribution {
  background: rgba(3, 5, 10, 0.8) !important;
  color: #bcd4e1 !important;
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: 0 !important;
  padding: 4px 8px;
}

.legend {
  background: var(--panel-card-bg);
  color: #e8f8ff;
  padding: 8px 10px;
  border: 1px solid var(--panel-card-border);
  border-radius: var(--card-radius-sm);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  font-size: 10px;
  line-height: 1.3;
  max-width: 200px;
}


.legend-scale {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.legend-scale-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #afcad7;
}

.legend-swatch {
  display: block;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}

.leaflet-bottom.leaflet-left {
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  transition: left 0.22s ease;
}

.menu-open .leaflet-bottom.leaflet-left {
  left: calc(var(--menu-actual-width, var(--panel-width)) + var(--safe-left));
}

.leaflet-bottom.leaflet-right {
  bottom: var(--safe-bottom);
  right: var(--safe-right);
}

/* The attribution control is empty (prefix:false); hide it but keep the
   bottom-right corner available for the colour-scale legend. */
.leaflet-control-attribution {
  display: none !important;
}

/* ── Zoom button theme ── */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow) !important;
}

.leaflet-control-zoom a {
  background: rgba(15, 21, 33, 0.96) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
}

.leaflet-control-zoom a:hover {
  background: rgba(20, 28, 42, 0.98) !important;
  border-color: rgba(112, 195, 226, 0.32) !important;
  color: #fff !important;
}

.leaflet-control-zoom-in {
  border-radius: 10px 10px 0 0 !important;
  border-bottom: none !important;
}

.leaflet-control-zoom-out {
  border-radius: 0 0 10px 10px !important;
}

@media (max-width: 1180px) {
  :root {
    --mobile-map-modes-offset: 10px;
  }

  .mobile-map-modes {
    /* Hidden on narrow windows at the user's request (these quick-metric chips
       only ever appeared in this <=1180px range). */
    display: none;
    max-width: calc(100% - var(--safe-left) - var(--safe-right));
  }

  .info-card {
    width: clamp(192px, 28.8vw, 256px);
  }
}

@media (min-width: 1500px), (min-height: 1100px) {
  :root {
    --top-bar-height: 50px;
    --panel-width: min(390px, calc(100vw - var(--safe-left) - var(--safe-right) - 16px));
    --stats-width: clamp(288px, 19.2vw, 368px);
  }

  .top-bar {
    padding-inline: 0;
  }

  .top-bar-tabs-mount {
    max-width: 100%;
  }

  .top-bar-search-slot {
    max-width: 620px;
  }

  .top-bar-toggle {
    left: 14px;
    width: 42px;
    height: var(--btn-height);
  }

  .top-bar-title {
    font-size: 14px;
  }

  .top-bar-pill {
    right: 16px;
    padding: 7px 12px;
    font-size: 11px;
  }

  .utility-panel {
    --panel-pad-x: 22px;
    --panel-pad-top: 22px;
    --panel-pad-bottom: 26px;
    gap: 15px;
  }

  .stats-card {
    padding: 14px 15px;
    gap: 10px;
  }

  .menu-section-title {
    font-size: 24px;
  }

  .menu-section-subtitle {
    font-size: 11px;
  }

  .control-group {
    padding: 12px;
  }

  .control-select select {
    height: var(--btn-height) !important;
    padding: 0 12px;
    font-size: 12px;
  }

  .layer-button {
    height: var(--btn-height) !important;
    padding-inline: 14px;
    font-size: 11px;
  }

  .layer-name,
  .news-card strong,
  .summary-chip strong {
    font-size: 13px;
  }

  .panel-hint,
  .layer-meta,
  .panel-footnote .note {
    font-size: 12px;
  }

  .stats-primary-value {
    font-size: clamp(34px, 3vw, 48px);
  }

  .info-card .stats-primary-value {
    font-size: clamp(26px, 2.2vw, 34px);
  }
}

@media (max-width: 920px) {
  :root {
    --mobile-map-modes-offset: 58px;
  }

  .menu-open .leaflet-bottom.leaflet-left {
    left: var(--safe-left);
  }

  .app-shell {
    display: block;
  }

  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-height);
    padding: 0;
    border-bottom-color: rgba(112, 195, 226, 0.16);
    background:
      linear-gradient(180deg, rgba(10, 14, 22, 0.9), rgba(6, 9, 14, 0.58));
    backdrop-filter: blur(12px);
  }

  .top-bar-layout.top-bar-layout--elm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-height);
    border-bottom-color: rgba(112, 195, 226, 0.16);
    background:
      linear-gradient(180deg, rgba(10, 14, 22, 0.9), rgba(6, 9, 14, 0.58));
    backdrop-filter: blur(12px);
  }

  body.light-theme .top-bar,
  body.light-theme .top-bar-layout.top-bar-layout--elm {
    background: rgba(255, 255, 255, 0.82);
  }

  .top-bar-layout {
    padding: 0 calc(var(--safe-right) + 8px) 0 calc(var(--safe-left) + 6px);
  }

  .top-bar-toggle {
    width: 38px;
    height: 36px !important;
  }

  .top-bar-title,
  .top-bar-pill {
    display: none;
  }

  .top-bar-search-slot {
    max-width: 360px;
  }

  .top-bar-tabs {
    display: none;
  }

  .mobile-nav-dropdown {
    display: flex;
    align-items: center;
    max-width: min(48vw, 210px);
  }

  .mobile-nav-trigger {
    width: 100%;
    justify-content: center;
    min-height: 36px;
  }

  .map-stage {
    position: fixed;
    inset: 0;
    height: 100dvh;
  }

  .cartogram-stage {
    position: fixed;
    inset: 0;
    height: 100dvh;
  }

  .home-stage,
  .knowledge-stage {
    position: fixed;
    inset: 0;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .home-stage {
    padding-top: calc(var(--safe-top) + var(--top-bar-height) + 28px);
  }

  .knowledge-stage {
    padding-top: calc(var(--safe-top) + var(--top-bar-height));
  }

  .utility-panel {
    top: var(--top-bar-height);
    left: calc(var(--safe-left) + 10px);
    right: calc(var(--safe-right) + 10px);
    bottom: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: min(82dvh, calc(100dvh - var(--top-bar-height) - var(--safe-bottom)));
    padding-top: 14px;
    padding-bottom: max(16px, var(--safe-bottom));
    border: 1px solid rgba(112, 195, 226, 0.22);
    border-right: 1px solid rgba(112, 195, 226, 0.22);
    border-radius: var(--card-radius);
    resize: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
    transform: translateY(-12px) scale(0.98);
    transform-origin: top center;
    visibility: hidden;
  }

  .utility-panel.is-open {
    transform: translateY(0) scale(1);
    visibility: visible;
  }

  .mobile-map-modes {
    left: 0;
    right: 0;
    max-width: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 calc(var(--safe-right) + 10px) 7px calc(var(--safe-left) + 10px);
    scroll-padding-inline: calc(var(--safe-left) + 10px) calc(var(--safe-right) + 10px);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
  }

  .menu-open .mobile-map-modes {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
  }

  .mobile-map-mode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    max-width: min(68vw, 230px);
    padding-inline: 14px;
    scroll-snap-align: start;
  }

  .combined-controls-grid {
    grid-template-columns: 1fr;
  }

  .panel-summary,
  .mini-legend {
    grid-template-columns: 1fr;
  }

  .info-card {
    left: calc(var(--safe-left) + 8px);
    right: calc(var(--safe-right) + 8px);
    top: auto;
    bottom: calc(var(--safe-bottom) + 8px);
    width: auto;
    max-height: min(42dvh, calc(100dvh - var(--top-bar-height) - var(--safe-top) - 96px));
    border-radius: var(--card-radius);
    transform: translateY(18px);
    z-index: 735;
  }

  .info-card.is-visible {
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  :root {
    --mobile-map-modes-offset: 56px;
  }

  .utility-panel {
    top: var(--top-bar-height);
    left: calc(var(--safe-left) + 8px);
    right: calc(var(--safe-right) + 8px);
    max-height: min(84dvh, calc(100dvh - var(--top-bar-height) - var(--safe-bottom)));
    padding: 12px 12px max(16px, var(--safe-bottom));
    gap: 10px;
  }

  .mobile-map-modes {
    display: none !important;
    gap: 7px;
    flex-wrap: wrap;
    overflow: visible;
    padding: 0 calc(var(--safe-right) + 10px) 7px calc(var(--safe-left) + 10px);
    -webkit-mask-image: none;
    mask-image: none;
    scroll-snap-type: none;
  }

  .mobile-map-mode-button {
    flex: 1 1 calc(33.333% - 7px);
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 42px;
    padding-inline: 14px;
    font-size: 9px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .stats-value-row,
  .stats-supplementary-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .control-group {
    padding: 9px;
  }

  .control-select select,
  .custom-dropdown-trigger,
  .mun-search-input,
  .layer-button,
  .map-quick-city-btn {
    min-height: 42px;
  }

  .places-filter-row {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile nav dropdown ── */
.mobile-nav-dropdown {
  display: none;
  position: relative;
  min-width: 0;
  /* Reset the generic <details> card box so only the pill trigger shows
     (otherwise a 14px-rounded rectangle frames the round button). */
  border: none;
  background: transparent;
  border-radius: 0;
}

.mobile-nav-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  outline: none;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.mobile-nav-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-nav-trigger::-webkit-details-marker {
  display: none;
}
.mobile-nav-trigger::marker {
  content: "";
}
.mobile-nav-trigger:hover,
.mobile-nav-trigger.is-open,
.mobile-nav-dropdown[open] .mobile-nav-trigger {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--accent);
  box-shadow: var(--control-shadow-ring);
}
.mobile-nav-chevron {
  width: 10px; height: 6px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.mobile-nav-trigger.is-open .mobile-nav-chevron,
.mobile-nav-dropdown[open] .mobile-nav-chevron {
  transform: rotate(180deg);
}
.mobile-nav-menu {
  display: none;
  position: fixed;
  z-index: 9000;
  background: var(--panel-strong);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  padding: 4px;
  list-style: none;
  margin: 0;
  box-shadow: var(--menu-surface-shadow);
  backdrop-filter: blur(10px);
  min-width: 132px;
  max-width: calc(100vw - 16px);
}

.mobile-nav-menu.is-open {
  display: block;
}

.mobile-nav-dropdown[open] .mobile-nav-menu:not(.is-open) {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.mobile-nav-menu li {
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.mobile-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-nav-menu li:hover { background: rgba(112, 195, 226, 0.1); color: var(--text); }

.mobile-nav-menu li[aria-selected="true"] {
  color: var(--accent);
  background: rgba(112, 195, 226, 0.08);
}

/* ── Chart Stage ── */
.chart-stage {
  position: relative;
  width: 100%;
  height: 100%;
  --chart-shell-height: 85dvh;
  --chart-stage-top-gap: clamp(20px, 1.8vw, 26px);
  /* Separate from --chart-stage-top-gap (which also drives ordinary visual
     margins, e.g. the TOC sidebar/drawer) so bumping the scroll offset for
     the fixed top bar on mobile can't push those unrelated margins around. */
  --chart-scroll-margin: var(--chart-stage-top-gap);
  --chart-toc-width: clamp(238px, 18.75vw, 290px);
  --chart-toc-peek: 0px;
  --chart-toc-transition: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0 clamp(22px, 2vw, 30px) 0 clamp(22px, 2vw, 30px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(18px, 2vw, 32px);
  overflow: auto;
  scroll-behavior: auto;
  scroll-padding-top: var(--chart-scroll-margin);
  scroll-padding-bottom: 0;
  /* Snapping is handled in JS (snapChartStageToNearestTarget), which centres the
     target. Native CSS scroll-snap targeted `start` instead, so the browser
     re-snapped right after the JS animation and the view juddered. */
  scroll-snap-type: none;
}

.chart-container-shell.is-deferred {
  display: none;
}

.chart-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: all;
}

.chart-methodology-panel {
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
  scroll-snap-align: start;
  scroll-margin-top: var(--chart-scroll-margin);
  box-sizing: border-box;
  background: var(--panel-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.chart-methodology-panel > summary {
  cursor: pointer;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  user-select: none;
}

.chart-methodology-panel > summary:hover {
  color: var(--text);
}

.chart-methodology-body {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.utility-panel-methodology {
  margin: 4px 0 0;
  padding: 12px 14px;
  font-size: 11px;
}

.utility-panel-methodology .chart-methodology-body {
  margin-top: 14px;
  gap: 14px;
}

.utility-panel-methodology .chart-method-title {
  font-size: 11px;
}

.utility-panel-methodology .chart-method-block {
  padding-bottom: 12px;
}

.chart-method-block {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(112, 195, 226, 0.07);
}

.chart-method-section-label {
  margin: 4px 0 -4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chart-method-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.chart-method-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px 0;
}

.chart-method-source {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 8px 0;
  opacity: 0.8;
}

.chart-method-block p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 6px 0;
  opacity: 0.85;
}

.chart-method-block p:last-child {
  margin-bottom: 0;
}

.chart-method-block strong {
  color: var(--text);
  font-weight: 600;
}

.chart-container-shell {
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
  height: var(--chart-shell-height);
  min-height: var(--chart-shell-height);
  max-height: var(--chart-shell-height);
  scroll-snap-align: start;
  scroll-margin-top: var(--chart-scroll-margin);
  content-visibility: auto;
  contain-intrinsic-size: 85dvh;
  background: var(--panel-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chart-body-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 20px;
  min-height: 0;
  overflow: hidden;
}

/* Population chart: keep compact so the key-figure cards fit above the fold */
#popChartWrap {
  min-height: 0;
}
#popChartWrap .chart-body-row {
  flex: 1 1 0;
}
#popChartWrap .chart-main {
  min-height: 0;
  flex: 1 1 0;
}
#popChartWrap .main-svg-chart {
  height: 100%;
}

/* Charts with 6 country presets need more height so the country list is usable */
#natBarChartWrap,
#unempBarWrap,
#migriWrap {
  min-height: 340px;
}

#netMigrWrap {
  min-height: 260px;
}

#popChartWrap,
#natBarChartWrap,
#unempBarWrap,
#subsidyBarWrap,
#econContribWrap,
#netMigrWrap,
#migriWrap,
#langSpeakersWrap,
#originWelfareWrap,
#correlationsWrap {
  min-height: 0;
}

.chart-sidebar {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.chart-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-sidebar-mun {
  flex: none;
  display: flex;
  flex-direction: column;
}

.chart-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.chart-mun-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

#natBgPickerGroup .chart-mun-search-wrap {
  margin-top: 10px;
}

.chart-mun-search {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--card-radius-sm);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 34px 8px 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.chart-mun-search::placeholder {
  color: var(--muted);
}

.chart-mun-search:focus {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
}

/* hide the native ✕ button in webkit */
.chart-mun-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.chart-mun-search-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(112, 195, 226, 0.06);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}

.chart-mun-search-clear.is-visible {
  display: inline-flex;
}

.chart-mun-search-clear:hover {
  opacity: 1;
  color: var(--text);
  background: var(--control-hover-bg);
  border-color: var(--control-border);
}

.chart-mun-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
  opacity: 0.6;
}

.chart-mun-presets {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chart-preset-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: var(--text);
  min-height: 34px;
  padding: 7px 10px 7px 8px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.chart-preset-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.chart-preset-option input[type="radio"]:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 45%, transparent 46%);
}

.chart-preset-option input[type="radio"]:hover:not(:checked) {
  border-color: var(--accent);
}

.chart-preset-option:hover {
  border-color: rgba(112, 195, 226, 0.18);
}

.chart-std-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius-sm);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.chart-std-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--muted);
  background: rgba(112, 195, 226, 0.08);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

.chart-std-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transform: translateY(-50%);
  transition: left 0.15s, background 0.15s;
}

.chart-std-toggle input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.chart-std-toggle input[type="checkbox"]:checked::after {
  left: 18px;
  background: #06222b;
}

.chart-std-toggle input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chart-std-details {
  margin: 5px 2px 0;
  border: none;
  background: none;
  border-radius: 0;
}

/* A bare arrow + text disclosure — no box, no uppercase. */
.chart-std-summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.85;
  user-select: none;
  outline: none;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart-std-summary::-webkit-details-marker {
  display: none;
}

.chart-std-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.chart-std-details[open] .chart-std-summary::before {
  transform: rotate(90deg);
}

.chart-std-summary:hover {
  opacity: 1;
}

.chart-std-details[open] .chart-std-summary {
  margin-bottom: 4px;
}

/* Sidebar sections hidden via the `hidden` attribute (e.g. the standardisation
   toggle when the current metric can't be standardised). */
.chart-sidebar-section[hidden] {
  display: none !important;
}

.chart-std-hint {
  margin: 5px 2px 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}

.chart-std-details .chart-std-hint {
  margin: 0 0 2px;
}

.chart-mun-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius-sm);
  padding: 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 120px;
  max-height: 220px;
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

/* The crime-by-nationality sidebar carries six presets plus the offence-type
   dropdown and the standardisation toggle, so at the shared 220px cap above its
   content overflowed and turned the whole sidebar into a scroller. Trim only
   this list — the sidebar's own scrollbar is the worse of the two. */
.nat-country-list {
  max-height: 176px;
}

/* Per-chart list heights: these sidebars have room to spare, so give their
   long lists more of it (municipalities ~1.2x, languages ~1.5x the shared cap). */
#popChartWrap .nat-country-list {
  max-height: 210px;
}
#langSpeakersWrap .nat-country-list {
  max-height: 264px;
}

.chart-mun-item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text);
  transition: background 0.1s, border-color 0.1s;
  border: 1px solid transparent;
}

.chart-mun-item:hover {
  background: rgba(112, 195, 226, 0.07);
  border-color: rgba(112, 195, 226, 0.08);
}

.chart-mun-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 2px solid var(--muted);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}

.chart-mun-cb:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.chart-mun-cb:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 6px;
  border: 1.5px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: translate(-50%, -58%) rotate(40deg);
}

.chart-mun-cb:hover:not(:checked) {
  border-color: var(--accent);
}

.chart-mun-name {
  cursor: pointer;
  flex: 1;
  min-width: 0;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-mun-name:hover {
  color: var(--accent);
}

.chart-main-area {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.chart-view-title {
  padding-left: 0;
  margin: 0;
}

.chart-select {
  height: 36px;
  width: 100%;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.chart-toggle-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  align-self: flex-start;
}

.chart-toggle-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.chart-toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chart-main {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.main-svg-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--muted);
  flex: 0 0 auto;
  min-height: 18px;
  max-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Welfare chart: legend lives in the left sidebar column, below the controls,
   so the plot gets the full width instead of losing a column to the legend. */
.welfare-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  width: 210px;
  min-height: 0;
}
.welfare-sidebar-col #welfareControlsMount {
  flex-shrink: 0;
}
.welfare-sidebar-col .chart-sidebar {
  width: 100%;
}
.welfare-legend-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.welfare-chart-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex: 1 1 0;
  min-height: 0;
}

.welfare-chart-row .welfare-chart-main {
  flex: 1 1 0;
  min-width: 0;
}

.chart-legend--side {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  width: 188px;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
  align-self: flex-start;
  padding-top: 4px;
  line-height: 1.3;
}

.chart-legend--side .chart-legend-item {
  align-items: flex-start;
}

.chart-legend--side .chart-legend-dot {
  margin-top: 3px;
}

/* Sidebar variant: fill the column width instead of the fixed 188px */
.chart-legend--sidebar {
  width: 100%;
  padding-top: 0;
}

@media (max-width: 900px) {
  .welfare-chart-row {
    flex-direction: column;
  }

  .chart-legend--side {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    max-height: 60px;
    gap: 8px 16px;
  }

  .chart-legend--side .chart-legend-item {
    align-items: center;
  }

  .chart-legend--side .chart-legend-dot {
    margin-top: 0;
  }
}

.chart-tooltip {
  position: absolute;
  background: var(--panel-strong);
  border: 1px solid var(--accent);
  padding: 10px 12px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
  font-size: 11px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  white-space: nowrap;
}

/* ── Municipality search ── */
.mun-search-section {
  padding: 12px;
  gap: 10px;
}

.utility-panel-search-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

.mun-search-wrap {
  position: relative;
}

.mun-search-input {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 14px 0 38px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--card-radius-sm);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.mun-search-input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

.mun-search-input:focus {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
}

.mun-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.mun-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  opacity: 0.9;
}

.mun-search-results {
  width: 100%;
}

.map-quick-city-panel {
  display: grid;
  gap: 8px;
}

.map-quick-city-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-quick-city-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.map-quick-city-btn {
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--card-radius-sm);
  border: 1px solid rgba(112, 195, 226, 0.14);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.map-quick-city-btn:hover,
.map-quick-city-btn:focus-visible {
  border-color: var(--control-hover-border);
  background: var(--control-hover-bg);
  color: var(--accent);
  box-shadow: var(--control-shadow-ring);
  outline: none;
}

.map-quick-city-btn.is-wide {
  grid-column: 1 / -1;
  padding-inline: 12px;
}

.utility-panel-attribution {
  padding: 6px 0 2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--muted);
}

.utility-panel-attribution a {
  color: inherit;
  text-decoration-color: rgba(112, 195, 226, 0.3);
  text-underline-offset: 2px;
}

.utility-panel-attribution a:hover {
  color: var(--text);
}

/* ── Nationality crime bar chart ── */
.chart-sidebar-hint {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
}

.chart-data-note {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  flex: 0 0 auto;
  margin-top: 8px;
}
.chart-data-note a { color: var(--accent); text-decoration: none; }
.chart-subtitle {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.8;
  margin-bottom: 4px;
}

.chart-source-link {
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
}
.chart-source-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.nat-count-badge {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-dim);
  background: rgba(112, 195, 226, 0.07);
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: 10px;
  padding: 1px 6px;
  letter-spacing: 0;
  text-transform: none;
}

.nat-country-pinned .nat-country-cb:disabled {
  border-color: var(--accent);
  background: var(--accent);
  opacity: 0.6;
  cursor: default;
}

.nat-country-pinned .nat-country-cb:disabled::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 6px;
  border: 1.5px solid var(--bg);
  border-top: none;
  border-left: none;
  transform: translate(-50%, -58%) rotate(40deg);
}

/* Nat bar chart grows to fill available column space, leaving room for slider */
.nat-bar-chart-main {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 30px;
  overflow: hidden;
}

.nat-bar-chart-main .main-svg-chart,
.subsidy-bar-chart-main .main-svg-chart,
.lang-speakers-chart-main .main-svg-chart,
#originWelfareWrap .main-svg-chart,
#natBarChartWrap .main-svg-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Subsidy dependency bar chart ── */
.subsidy-group-note {
  flex: 0 0 auto;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

/* Subsidy chart: swap the origin-group bottom notes for the language note when
   the breakdown is "by mother tongue". */
.subsidy-language-note { display: none; line-height: 1.55; }
#subsidyBarWrap.is-language-breakdown .subsidy-origin-note { display: none; }
#subsidyBarWrap.is-language-breakdown .subsidy-language-note { display: block; }
/* Only a handful of areas in language mode, so the search box is just clutter. */
#subsidyBarWrap.is-language-breakdown .chart-mun-search-wrap { display: none; }

#subsidyMetricDropdown .custom-dropdown-label,
#econMetricDropdown .custom-dropdown-label,
#migriDatasetDropdown .custom-dropdown-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.subsidy-bar-chart-main {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* ── Elm chart renderer mount + hover tooltip ── */
.subsidy-elm-mount { width: 100%; height: 100%; }
.chart-elm-wrap { position: relative; width: 100%; height: 100%; }
.chart-elm-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  /* No fixed cap: with white-space nowrap a hard max-width makes long lines
     (e.g. the pyramid's per-background rows) overflow the box instead of
     widening it. The viewport bound is just a safety net. */
  max-width: calc(100vw - 16px);
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(10, 14, 22, 0.97);
  border: 1px solid rgba(150, 214, 255, 0.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.chart-elm-tooltip-title {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(150, 214, 255, 0.1);
}
.chart-elm-tooltip-line { color: var(--muted); line-height: 1.65; }

#subsidyBarWrap {
  min-height: 560px;
}

#subsidyBarWrap .subsidy-bar-chart-main {
  min-height: 340px;
}

#subsidyBarWrap .main-svg-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#migriWrap {
  min-height: 320px;
}

#migriWrap .nat-bar-chart-main {
  min-height: 220px;
}

#migriWrap .chart-main-area {
  gap: 6px;
}

#migriCountryList {
  flex: 0 0 340px;
  min-height: 340px;
  max-height: 340px;
}

#netMigrCountryList {
  flex: 0 0 240px;
  min-height: 240px;
  max-height: 240px;
}

#netMigrLegend {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 18px;
  scrollbar-width: thin;
}

#netMigrLegend .chart-legend-item {
  flex: 0 0 auto;
}

#netMigrWrap .main-svg-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#migriWrap .main-svg-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lang-speakers-chart-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#originWelfareWrap .chart-main {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

#langSpeakersWrap {
  min-height: 0;
}

#langSpeakersWrap .main-svg-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── Statistical correlations ── */
#correlationsWrap {
  min-height: 620px;
}

.correlation-main-area {
  min-height: 0;
}

.correlation-chart-main {
  min-height: 500px;
  overflow: hidden;
}

.correlation-chart-layout {
  height: 100%;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 14px;
}

#popChartWrap,
#natBarChartWrap,
#unempBarWrap,
#subsidyBarWrap,
#econContribWrap,
#netMigrWrap,
#migriWrap,
#langSpeakersWrap,
#originWelfareWrap,
#correlationsWrap {
  min-height: 0;
}

.correlation-chart-main,
.correlation-chart-layout,
#subsidyBarWrap .subsidy-bar-chart-main,
#migriWrap .nat-bar-chart-main {
  min-height: 0;
}

.correlation-matrix-pane,
.correlation-scatter-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 var(--card-inset-border);
}

.correlation-matrix-pane {
  padding: 12px;
  overflow: auto;
}

.correlation-scatter-pane {
  gap: 12px;
  padding: 14px;
}

.correlation-axis-corner,
.correlation-axis-label {
  min-height: 34px;
}

.correlation-axis-label {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.correlation-heatmap {
  display: grid;
  gap: 4px;
  min-width: 820px;
  align-items: stretch;
}

.correlation-axis-label--top {
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-height: 112px;
}

.correlation-axis-label--top span,
.correlation-axis-label--row {
  overflow: hidden;
  text-overflow: ellipsis;
}

.correlation-axis-label--row {
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
  padding-right: 8px;
}

.correlation-cell {
  min-height: 42px;
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: 10px;
  background: var(--corr-color);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.correlation-cell:hover:not(:disabled),
.correlation-cell:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(112, 195, 226, 0.55);
  box-shadow: 0 0 0 3px rgba(112, 195, 226, 0.12);
  outline: none;
  filter: saturate(1.12) brightness(1.08);
}

.correlation-cell.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(112, 195, 226, 0.35);
}

.correlation-cell.is-diagonal,
.correlation-cell.is-empty {
  color: rgba(255, 255, 255, 0.58);
  cursor: default;
}

.correlation-scale {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.correlation-scale-bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(112, 195, 226, 0.12);
  background: linear-gradient(90deg, rgba(48, 202, 224, 0.88), rgba(229, 216, 144, 0.52), rgba(245, 44, 52, 0.9));
}

.correlation-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.correlation-kicker,
.correlation-panel-title {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.correlation-detail-heading h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
}

.correlation-badge {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 44, 52, 0.14);
  border: 1px solid rgba(245, 44, 52, 0.3);
  color: #ffb8bd;
  font-size: 12px;
  font-weight: 800;
}

.correlation-badge.is-negative {
  background: rgba(48, 202, 224, 0.14);
  border-color: rgba(48, 202, 224, 0.32);
  color: #bdf6ff;
}

.correlation-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.correlation-stat {
  min-width: 0;
  padding: 10px;
  border-radius: var(--card-radius-sm);
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(112, 195, 226, 0.08);
}

.correlation-stat span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.correlation-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.correlation-scatter-wrap {
  position: relative;
  flex: 1;
  min-height: 300px;
  border-radius: var(--card-radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.13);
  border: 1px solid rgba(112, 195, 226, 0.08);
}

.correlation-scatter-chart {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.correlation-grid-lines line {
  stroke: rgba(112, 195, 226, 0.07);
  stroke-width: 1;
}

.correlation-axis {
  stroke: rgba(112, 195, 226, 0.38);
  stroke-width: 1.2;
}

.correlation-axis-ticks text,
.correlation-axis-title {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.correlation-axis-title {
  fill: var(--text);
  opacity: 0.82;
}

.correlation-regression-line {
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.9;
}

.correlation-point {
  fill: rgba(112, 195, 226, 0.74);
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1;
  cursor: crosshair;
  transition: fill 0.1s ease, transform 0.1s ease;
}

.correlation-point:hover {
  fill: var(--accent);
  transform: scale(1.16);
}

.correlation-tooltip {
  max-width: 260px;
  white-space: normal;
  transform: translate(-50%, -100%);
}

.correlation-strongest-section {
  min-height: 0;
}

.correlation-strongest-list {
  min-height: 130px;
  max-height: 220px;
  gap: 4px;
}

.correlation-strongest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.correlation-strongest-item:hover,
.correlation-strongest-item:focus-visible,
.correlation-strongest-item.is-selected {
  border-color: rgba(112, 195, 226, 0.16);
  background: rgba(112, 195, 226, 0.075);
  outline: none;
}

.correlation-strongest-pair {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}

.correlation-strongest-r {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

.correlation-strongest-r.is-positive {
  color: #ffb8bd;
}

.correlation-strongest-r.is-negative {
  color: #bdf6ff;
}

.correlation-legend-dot.is-negative {
  background: rgba(48, 202, 224, 0.88);
}

.correlation-legend-dot.is-neutral {
  background: rgba(229, 216, 144, 0.62);
}

.correlation-legend-dot.is-positive {
  background: rgba(245, 44, 52, 0.9);
}


/* ── Nationality bar chart year range slider ── */
.nat-year-slider-section {
  flex: 0 0 auto;
  padding: 8px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nat-year-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nat-year-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.nat-dual-slider-wrap {
  position: relative;
  height: 36px;
  margin-bottom: 22px; /* room for tick labels below */
  display: flex;
  align-items: center;
}

/* Compact variant: no tick labels below, so no extra bottom margin needed */
.nat-dual-slider-wrap--compact {
  margin-bottom: 0;
}

/* Min/max range labels shown below a compact slider */
.nat-slider-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: -4px; /* tighten gap after compact wrap */
}

/* Compact slider section: tighter top padding */
.nat-year-slider-section--compact {
  padding-top: 4px;
}

.nat-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  z-index: 0;
}

.nat-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.7;
}

.nat-range-input {
  position: absolute;
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  outline: none;
}

.nat-range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
  pointer-events: all;
  transition: transform 0.1s;
}

.nat-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.nat-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer;
  pointer-events: all;
}

/* End handle: white-filled ring — visible on both dark and light backgrounds */
.nat-range-to::-webkit-slider-thumb {
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, 0.3);
  width: 22px;
  height: 22px;
}

.nat-range-to::-moz-range-thumb {
  background: #ffffff;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, 0.3);
  width: 22px;
  height: 22px;
}

.nat-slider-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.nat-slider-tick {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  flex: 1;
}

.nat-slider-tick.is-active {
  color: var(--accent);
  font-weight: 600;
}

.nat-pin-badge {
  font-size: 9px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
}

@media (min-width: 1800px), (min-height: 1300px) {
  :root {
    --top-bar-height: 56px;
    --panel-width: min(465px, calc(100vw - var(--safe-left) - var(--safe-right) - 20px));
    --stats-width: clamp(336px, 20vw, 448px);
  }

  .top-bar {
    padding-inline: 0;
  }

  .top-bar-tabs-mount {
    max-width: 100%;
  }

  .top-bar-toggle {
    left: 18px;
    width: 46px;
    height: var(--btn-height);
  }

  .top-bar-title {
    font-size: 15px;
    letter-spacing: 0.2em;
  }

  .top-bar-pill {
    right: 18px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .utility-panel {
    --panel-pad-x: 26px;
    --panel-pad-top: 24px;
    --panel-pad-bottom: 28px;
    gap: 18px;
  }

  .info-card {
    width: clamp(336px, 20vw, 432px);
  }

  .stats-card {
    padding: 16px 18px;
    gap: 12px;
  }

  .menu-section-title {
    font-size: 28px;
  }

  .menu-section-subtitle {
    font-size: 11.5px;
  }

  .panel-hint,
  .layer-meta,
  .panel-footnote .note {
    font-size: 13px;
  }

  .layer-name,
  .news-card strong,
  .summary-chip strong,
  .stats-ranking-name,
  .stats-ranking-value {
    font-size: 14px;
  }

  .control-select select {
    height: var(--btn-height) !important;
    padding: 0 12px;
    font-size: 13px;
  }

  .layer-button,
  .mobile-map-mode-button {
    height: var(--btn-height) !important;
    padding-inline: 14px;
    font-size: 11px;
  }

  .stats-primary-value {
    font-size: clamp(38px, 3vw, 54px);
  }

  .info-card .stats-primary-value {
    font-size: clamp(28px, 2vw, 38px);
  }
}
/* ── News Stage ── */
.news-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}

.news-container-shell {
  width: 100%;
  max-width: 1100px;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--panel-strong);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.news-feed-card {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}

.news-feed-card .panel-section-heading,
.news-feed-card .news-feed-header {
  flex: 0 0 auto;
}

.news-feed-card .news-feed-list {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

/* ── European Statistics Stage ── */
.europe-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: none;
  overflow: hidden;
}

/* Full-bleed map with floating overlay panels, mirroring the Finnish map view. */
.europe-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.europe-control-panel {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 600;
  width: min(330px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: rgba(8, 12, 18, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.europe-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.europe-kicker,
.europe-info-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.europe-heading h1,
.europe-info-panel h2 {
  margin: 0;
  color: var(--text);
  line-height: 1.05;
}

.europe-heading h1 {
  font-size: 19px;
}

.europe-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.europe-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.europe-dataset-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.europe-dataset-tab {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--card-radius-sm);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.europe-dataset-tab:hover,
.europe-dataset-tab:focus-visible {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
  outline: none;
}

.europe-dataset-tab.is-active {
  background: rgba(112, 195, 226, 0.11);
  border-color: rgba(112, 195, 226, 0.26);
  color: var(--accent);
  box-shadow: var(--control-shadow-ring);
}

.europe-metric-dropdown {
  width: 100%;
}

#europeMetricDropdownMenu {
  overscroll-behavior: contain;
}

.europe-metric-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.europe-metric-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: 999px;
  background: rgba(112, 195, 226, 0.055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Per-metric methodology / comparability note shown below the meta chips. */
.europe-metric-caveat {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

/* The frame (region / country) toggle reuses the dataset-tab styling but reads
   as a compact two-up segmented control. */
.europe-mode-tabs {
  grid-template-columns: 1fr 1fr;
}
.europe-mode-tabs .europe-dataset-tab {
  text-align: center;
}

.europe-legend {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  width: min(260px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: var(--card-radius-sm);
  background: rgba(8, 12, 18, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.europe-legend-bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #2b74c8, #33a6d5, #f0d66a, #f06b45, #c51f2f);
}

.europe-legend-bar span {
  flex: 1 1 0;
}

.europe-legend-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.europe-sources {
  margin-top: auto;
  max-height: min(180px, 32dvh);
  overflow: auto;
}

.europe-sources-body {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.europe-sources-body p {
  margin: 0 0 8px;
}

.europe-sources-body ul {
  margin: 0;
  padding-left: 16px;
}

.europe-map-card {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(39, 130, 176, 0.16), transparent 28%),
    radial-gradient(circle at 72% 24%, rgba(240, 214, 106, 0.08), transparent 26%),
    radial-gradient(circle at 58% 84%, rgba(197, 31, 47, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(8, 12, 18, 0.96), rgba(5, 8, 12, 0.96));
}

.europe-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(112, 195, 226, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 195, 226, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.5;
  z-index: 400;
}

.europe-map {
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: transparent;
}

.europe-map .leaflet-container,
.europe-map.leaflet-container {
  background: transparent;
}

.europe-map .leaflet-interactive {
  cursor: pointer;
}

.europe-map .leaflet-control-zoom {
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: var(--card-radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.europe-map .leaflet-control-zoom a {
  background: rgba(8, 12, 18, 0.9);
  color: var(--text);
  border-bottom-color: rgba(112, 195, 226, 0.1);
}

.europe-info-panel {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 540;
  width: min(330px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: rgba(8, 12, 18, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.europe-info-panel h2 {
  font-size: clamp(18px, 1.2vw, 24px);
}

.europe-info-value {
  color: var(--accent);
  font-size: clamp(24px, 2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.europe-info-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.europe-info-details {
  display: grid;
  gap: 6px;
  padding-top: 5px;
}

.europe-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(112, 195, 226, 0.08);
  color: var(--muted);
  font-size: 11px;
}

.europe-detail-row strong {
  color: var(--text);
  text-align: right;
}

/* ── Language Toggle ── */
.lang-dropdown {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  z-index: 100;
  flex: 0 0 auto;
  /* Reset the generic <details> card box so only the pill trigger shows. */
  border: none;
  background: transparent;
  border-radius: 0;
}

.lang-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  list-style: none;
}

.lang-dropdown-trigger::-webkit-details-marker {
  display: none;
}

.lang-dropdown-trigger:hover,
.lang-dropdown.is-open .lang-dropdown-trigger,
.lang-dropdown[open] .lang-dropdown-trigger {
  background: var(--control-bg-hover);
  border-color: var(--control-border-strong);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.06);
}

.lang-dropdown-chevron {
  width: 10px;
  height: 6px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.lang-dropdown.is-open .lang-dropdown-chevron,
.lang-dropdown[open] .lang-dropdown-chevron {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  display: none;
  position: fixed;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-overlay);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  box-shadow: var(--menu-surface-shadow);
  backdrop-filter: blur(10px);
  z-index: 9999;
  min-width: 100px;
}

.lang-dropdown-menu.is-open {
  display: block;
}

.lang-dropdown[open] > .lang-dropdown-menu:not(.is-open) {
  display: block;
}

.lang-dropdown > .lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}

.lang-dropdown-menu li {
  padding: 0;
  list-style: none;
}

.lang-dropdown-link {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  box-sizing: border-box;
}

.lang-dropdown-link:hover {
  background: rgba(112, 195, 226, 0.1);
  color: var(--text);
}

.lang-dropdown-menu li[aria-selected="true"] .lang-dropdown-link {
  color: var(--accent, #70c3e2);
  background: rgba(112, 195, 226, 0.12);
}

body[data-view="home"] .lang-dropdown-link--home,
html:not(.js) body:has(#homeStage:target) .lang-dropdown-link--home,
body[data-view="map"] .lang-dropdown-link--map,
html:not(.js) body:has(#mapStage:target) .lang-dropdown-link--map,
body[data-view="chart"] .lang-dropdown-link--chart,
html:not(.js) body:has(#chartStage:target) .lang-dropdown-link--chart,
body[data-view="cartogram"] .lang-dropdown-link--cartogram,
html:not(.js) body:has(#cartogramStage:target) .lang-dropdown-link--cartogram,
body[data-view="europe"] .lang-dropdown-link--europe,
html:not(.js) body:has(#europeStage:target) .lang-dropdown-link--europe,
body[data-view="news"] .lang-dropdown-link--news,
html:not(.js) body:has(#newsStage:target) .lang-dropdown-link--news,
body[data-view="knowledge"] .lang-dropdown-link--knowledge,
html:not(.js) body:has(#knowledgeStage:target) .lang-dropdown-link--knowledge {
  display: flex;
}

.lang-dropdown-menu .lang-code {
  display: inline-block;
  width: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* ── Light Theme Toggle & Overrides ── */
.theme-toggle-btn {
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  z-index: 100;
}

.theme-toggle-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--control-border-strong);
  background: var(--control-bg-hover);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.06);
}

.theme-toggle-btn:hover {
  background: var(--control-bg-hover);
  border-color: var(--control-border-strong);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.06);
}

.theme-toggle-btn svg {
  width: 16px;
  height: 16px;
}

body.theme-switching,
body.theme-switching *,
body.theme-switching *::before,
body.theme-switching *::after {
  transition: none !important;
}

body.light-theme {
  --bg: #f4f7f9;
  --panel: rgba(255, 255, 255, 0.95);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --panel-soft: rgba(0, 0, 0, 0.05);
  --text: #111827;
  --muted: #4b5563;
  --border: rgba(0, 0, 0, 0.15);
  --line: rgba(0, 0, 0, 0.18);
  --accent: #0284c7;
  --accent-hot: #dc2626;
  --accent-dim: #0369a1;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  background: transparent;
  background-image: none;
}

html:has(body.light-theme) {
  background: #f4f7f9;
}

body.light-theme::before,
body.light-theme::after {
  display: none;
}

body.light-theme .app-shell::before {
  opacity: 0.1;
  filter: invert(1);
}

body.light-theme {
  --control-border: rgba(82, 99, 115, 0.14);
  --control-border-strong: rgba(82, 99, 115, 0.22);
  --control-bg: #ffffff;
  --control-bg-hover: rgba(82, 99, 115, 0.08);
  --control-hover-border: rgba(82, 99, 115, 0.18);
  --control-hover-bg: rgba(82, 99, 115, 0.08);
  --control-shadow-ring: 0 0 0 1px rgba(82, 99, 115, 0.06);
  --panel-card-bg: rgba(245, 247, 250, 0.95);
  --panel-card-border: rgba(0, 0, 0, 0.1);
  --card-inset-border: rgba(255, 255, 255, 0.66);
  --surface-raised: rgba(245, 247, 250, 0.96);
  --surface-panel: #ffffff;
  --surface-bar: #ffffff;
  --surface-overlay: #ffffff;
  --kb-migmap-bg-radial: rgba(2, 132, 199, 0.07);
  --kb-migmap-bg-1: rgba(255, 255, 255, 0.98);
  --kb-migmap-bg-2: rgba(238, 244, 249, 0.98);
  --kb-migmap-border: rgba(0, 0, 0, 0.12);
  --kb-migmap-dest-fill: rgba(2, 132, 199, 0.10);
  --kb-migmap-dest-stroke: rgba(2, 132, 199, 0.4);
  --kb-migmap-path-stroke: rgba(71, 85, 105, 0.3);
  --kb-migmap-label: rgba(180, 83, 9, 0.85);
  --kb-migmap-dot-hot-settled: rgba(194, 65, 12, 0.6);
  --kb-migmap-dot-hot-flight: #c2410c;
  --kb-migmap-dot-settled: rgba(37, 99, 235, 0.35);
  --kb-migmap-dot-flight: #2563eb;
  --kb-pew-no-data: #dde5eb;
  --kb-pew-stroke: #3c4a5c;
  --kb-consang-zero: #ffffff;
}

body.light-theme select,
body.light-theme input,
body.light-theme button {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border);
}

body.light-theme input[type="range"] {
  background: #f0f0f0;
}

body.light-theme .year-range::-webkit-slider-runnable-track {
  background: rgba(82, 99, 115, 0.2);
}

body.light-theme .year-range::-moz-range-track {
  background: rgba(82, 99, 115, 0.2);
}

body.light-theme .year-range::-webkit-slider-thumb {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.light-theme .year-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.12), 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.light-theme .year-range::-moz-range-thumb {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

body.light-theme option {
  background: #ffffff;
  color: var(--text);
}

body.light-theme .theme-toggle-btn {
  background: #ffffff;
  border-color: rgba(82, 99, 115, 0.14);
}
body.light-theme .theme-toggle-btn:hover {
  background: rgba(82, 99, 115, 0.08);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(82, 99, 115, 0.06);
}

body.light-theme .top-bar-tabs {
  background: #ffffff;
  border-color: rgba(82, 99, 115, 0.14);
}

/* Stay below the .top-bar-tab hover (0.08) and active (0.1) washes so the
   sliding indicator still reads against the trough. */
body.light-theme .top-bar-tab-pair {
  background: rgba(82, 99, 115, 0.06);
  border-color: rgba(82, 99, 115, 0.14);
}

body.light-theme .top-bar-tab:hover {
  background: rgba(82, 99, 115, 0.08);
}

body.light-theme .top-bar-tab.is-active,
body.light-theme[data-view="home"] #tabHome,
body.light-theme[data-view="map"] #tabMap,
body.light-theme[data-view="chart"] #tabChart,
body.light-theme[data-view="news"] #tabNews,
body.light-theme[data-view="europe"] #tabEurope,
body.light-theme[data-view="knowledge"] #tabKnowledge {
  background: rgba(82, 99, 115, 0.1);
  color: var(--accent);
  box-shadow: none;
}

body.light-theme[data-view="cartogram"] #tabCartogram,
body.light-theme body:has(#cartogramStage:target) #tabCartogram,
body.light-theme body:has(#mapStage:target) #tabMap {
  background: rgba(82, 99, 115, 0.1);
  color: var(--accent);
  box-shadow: none;
}

body.light-theme .boundary-hover-popup {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light-theme .stats-primary-value {
  color: #1a2430;
}

body.light-theme .stats-card,
body.light-theme .news-container-shell,
body.light-theme .news-feed-card {
  background: rgba(245, 247, 250, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-theme #statsPanel .stats-card,
body.light-theme #statsPanel .stats-card-primary {
  background: rgba(245, 247, 250, 0.98) !important;
}

body.light-theme .news-feed-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}

body.light-theme .news-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(26, 36, 48, 0.1);
  color: #18222d;
}

body.light-theme .news-card:hover,
body.light-theme .news-card:focus-visible {
  background: #ffffff;
  border-color: rgba(38, 86, 132, 0.24);
}

body.light-theme .news-card-meta {
  color: #617385;
}

body.light-theme .news-card-area {
  color: #7a5100;
  background: rgba(180, 120, 0, 0.08);
  border-color: rgba(180, 120, 0, 0.2);
}

body.light-theme .news-card-type[data-news-type="immigration"] {
  color: #0070a0;
  background: rgba(0, 112, 160, 0.08);
  border-color: rgba(0, 112, 160, 0.2);
}

body.light-theme .news-card-type[data-news-type="religionIntegration"] {
  color: #8a4200;
  background: rgba(138, 66, 0, 0.08);
  border-color: rgba(138, 66, 0, 0.2);
}

body.light-theme .news-card-type[data-news-type="honorViolence"] {
  color: #961838;
  background: rgba(150, 24, 56, 0.08);
  border-color: rgba(150, 24, 56, 0.2);
}

body.light-theme .news-card-type[data-news-type="sexCrime"] {
  color: #961818;
  background: rgba(150, 24, 24, 0.08);
  border-color: rgba(150, 24, 24, 0.2);
}

body.light-theme .news-card-type[data-news-type="gangCrime"] {
  color: #5a18b4;
  background: rgba(90, 24, 180, 0.08);
  border-color: rgba(90, 24, 180, 0.2);
}

body.light-theme .news-card-type[data-news-type="violentCrime"],
body.light-theme .news-card-type[data-news-type="crime"] {
  color: #7a4400;
  background: rgba(122, 68, 0, 0.08);
  border-color: rgba(122, 68, 0, 0.2);
}

body.light-theme .news-card-type[data-news-type="society"] {
  color: #526373;
  background: rgba(82, 99, 115, 0.08);
  border-color: rgba(82, 99, 115, 0.14);
}

body.light-theme .custom-dropdown-menu,
body.light-theme .school-switcher-menu,
body.light-theme .mun-search-results,
body.light-theme .lang-dropdown-menu {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

body.light-theme .lang-dropdown-menu li:hover {
  background: rgba(82, 99, 115, 0.08);
  color: var(--text);
}

body.light-theme .lang-dropdown-menu li[aria-selected="true"] {
  color: var(--accent);
  background: rgba(82, 99, 115, 0.1);
}

body.light-theme .custom-dropdown-trigger,
body.light-theme .school-switcher-select,
body.light-theme .school-switcher-single,
body.light-theme .chart-mun-search,
body.light-theme .mun-search-input {
  background: #ffffff;
}

body.light-theme .lang-dropdown-trigger,
body.light-theme .theme-toggle-btn,
body.light-theme .mobile-nav-trigger,
body.light-theme .top-bar-toggle,
body.light-theme .map-share-btn,
body.light-theme .chart-share-btn {
  background: #ffffff;
  border-color: rgba(82, 99, 115, 0.14);
}

body.light-theme .custom-dropdown-trigger:hover,
body.light-theme .custom-dropdown.is-open .custom-dropdown-trigger {
  background: rgba(82, 99, 115, 0.08);
  border-color: rgba(82, 99, 115, 0.18);
  box-shadow: 0 0 0 1px rgba(82, 99, 115, 0.06);
}

body.light-theme .school-switcher-select:hover,
body.light-theme .lang-dropdown-trigger:hover,
body.light-theme .lang-dropdown.is-open .lang-dropdown-trigger,
body.light-theme .mobile-nav-trigger:hover,
body.light-theme .mobile-nav-trigger.is-open,
body.light-theme .mobile-nav-dropdown[open] .mobile-nav-trigger,
body.light-theme .top-bar-toggle:hover,
body.light-theme .map-share-btn:hover,
body.light-theme .chart-share-btn:hover,
body.light-theme .chart-mun-search:focus,
body.light-theme .mun-search-input:focus {
  background: rgba(82, 99, 115, 0.08);
  border-color: rgba(82, 99, 115, 0.18);
  box-shadow: 0 0 0 1px rgba(82, 99, 115, 0.06);
}



body.light-theme .utility-panel-search-card {
  box-shadow: none;
}

body.light-theme .atlas-marker::before {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.12);
}

body.light-theme .atlas-marker::after {
  background: rgba(0, 0, 0, 0.1);
}

body.light-theme .atlas-marker-svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

body.light-theme .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #526373 !important;
  border-color: rgba(82, 99, 115, 0.18);
}

body.light-theme .leaflet-control-attribution a {
  color: var(--accent);
}

body.light-theme .leaflet-control-zoom {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

body.light-theme .stats-ranking-item {
  background: rgba(82, 99, 115, 0.06);
  border-color: rgba(82, 99, 115, 0.12);
}

body.light-theme .stats-ranking-item:hover {
  background: rgba(82, 99, 115, 0.12);
  border-color: rgba(82, 99, 115, 0.22);
}

body.light-theme .stats-ranking-item.is-selected {
  background: linear-gradient(135deg, rgba(0, 120, 180, 0.1), transparent 72%),
    rgba(82, 99, 115, 0.08);
  border-color: rgba(0, 120, 180, 0.28);
}

body.light-theme .stats-ranking-item.is-selected .stats-ranking-name,
body.light-theme .stats-ranking-item.is-selected .stats-ranking-value {
  color: var(--text);
}

body.light-theme .stats-ranking-value {
  color: var(--text);
}

body.light-theme .leaflet-control-zoom a {
  background: #ffffff !important;
  color: var(--accent) !important;
  border-color: rgba(82, 99, 115, 0.18) !important;
}

body.light-theme .leaflet-control-zoom a:hover {
  background: rgba(82, 99, 115, 0.08) !important;
  border-color: rgba(82, 99, 115, 0.28) !important;
  color: var(--text) !important;
}

body.light-theme .legend {
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.light-theme .legend-scale-item {
  color: var(--muted);
}

body.light-theme .legend-swatch {
  border-color: rgba(0, 0, 0, 0.18);
}

body.light-theme .mobile-map-mode-button {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.light-theme .mobile-map-mode-button.is-active {
  background: #f0f9ff;
  border-color: var(--accent);
}

body.light-theme .score-component-status {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border);
}

body.light-theme .kb-entry,
body.light-theme .kb-article {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

body.light-theme .chart-elm-tooltip {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

body.light-theme .chart-elm-tooltip-title {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light-theme .claim-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

body.light-theme .claim-card:hover {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

body.light-theme .claim-actions {
  border-top-color: rgba(0, 0, 0, 0.07);
}

body.light-theme .claim-badge {
  background: rgba(2, 132, 199, 0.07);
  color: #0369a1;
  border-color: rgba(2, 132, 199, 0.18);
}

body.light-theme .claim-badge--fact {
  background: rgba(22, 163, 74, 0.07);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.18);
}

body.light-theme #map {
  background: transparent;
}

body.light-theme .map-basemap-fallback {
  background:
    radial-gradient(circle at 24% 18%, rgba(82, 126, 135, 0.13), transparent 34%),
    radial-gradient(circle at 72% 58%, rgba(68, 110, 122, 0.12), transparent 42%),
    linear-gradient(180deg, #edf4f1 0%, #e5efec 100%);
}

body.light-theme .map-basemap-fallback__grid {
  background:
    linear-gradient(100deg, transparent 0%, rgba(43, 78, 86, 0.034) 46%, transparent 64%),
    radial-gradient(circle at 58% 35%, rgba(43, 78, 86, 0.032), transparent 32%);
}

body.light-theme .cartogram-stage,
body.light-theme .cartogram-basemap {
  background:
    radial-gradient(circle at 48% 38%, rgba(76, 119, 134, 0.13), transparent 36%),
    linear-gradient(180deg, #edf4f1 0%, #e5efec 100%);
}

body.light-theme .cartogram-basemap::before {
  background:
    linear-gradient(90deg, rgba(49, 86, 96, 0.04), transparent 26%, transparent 74%, rgba(255, 91, 123, 0.018)),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(222, 235, 232, 0.28) 78%);
}

body.light-theme .cartogram-basemap::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(43, 78, 86, 0.030) 48%, transparent 66%),
    linear-gradient(180deg, transparent 0%, rgba(43, 78, 86, 0.06) 100%);
}

body.light-theme .cartogram-map-grid--minor {
  stroke: rgba(43, 78, 86, 0.038);
}

body.light-theme .cartogram-map-grid--major {
  stroke: rgba(43, 78, 86, 0.072);
}

body.light-theme .cartogram-map-boundaries {
  stroke: rgba(43, 78, 86, 0.13);
}

body.light-theme .cartogram-map-boundaries--postal {
  stroke: rgba(43, 78, 86, 0.074);
}

body.light-theme .cartogram-backdrop-node {
  stroke: rgba(43, 78, 86, 0.078);
}

body.light-theme .cartogram-backdrop-shadow-node {
  fill: rgba(49, 86, 96, 0.04);
}

body.light-theme .cartogram-backdrop-tone-node {
  opacity: 0.035;
}

body.light-theme .map-quick-city-btn {
  background: #ffffff;
  border-color: rgba(82, 99, 115, 0.14);
}

body.light-theme .map-quick-city-btn:hover,
body.light-theme .map-quick-city-btn:focus-visible {
  background: rgba(82, 99, 115, 0.08);
  border-color: rgba(82, 99, 115, 0.18);
  box-shadow: 0 0 0 1px rgba(82, 99, 115, 0.06);
  color: #2f6a8f;
}

body.light-theme .share-toast {
  border-color: var(--border);
}

body.light-theme .chart-share-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.light-theme .europe-map-card {
  background:
    radial-gradient(circle at 18% 20%, rgba(73, 132, 177, 0.16), transparent 28%),
    radial-gradient(circle at 72% 24%, rgba(203, 174, 103, 0.12), transparent 26%),
    radial-gradient(circle at 58% 84%, rgba(177, 76, 73, 0.08), transparent 30%),
    linear-gradient(180deg, #eef3f8 0%, #e6edf5 100%);
}

body.light-theme .europe-info-panel {
  background: rgba(255, 255, 255, 0.88);
}

body.light-theme .europe-legend,
body.light-theme .europe-metric-meta span,
body.light-theme .europe-dataset-tab {
  background: rgba(255, 255, 255, 0.62);
}

body.light-theme .europe-dataset-tab.is-active {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.2);
}

@media (max-width: 1120px) {
  .top-bar-tabs-mount { display: none; }
  .top-bar-search-slot { display: none; }
  .mobile-nav-dropdown {
    display: flex;
    align-items: center;
    max-width: min(44vw, 230px);
  }
  .mobile-nav-trigger {
    width: 100%;
    justify-content: center;
    min-height: 34px;
  }
}

/* ── Mobile chart + nav (≤768px) ── */
@media (max-width: 768px) {
  /* Replace tabs with dropdown */
  .top-bar-tabs-mount { display: none; }
  .top-bar-tabs { display: none; }
  .top-bar-search-slot { display: none; }
  .mobile-nav-dropdown {
    display: flex;
    align-items: center;
    max-width: min(48vw, 210px);
  }
  .mobile-nav-trigger {
    width: 100%;
    justify-content: center;
    min-height: 36px;
  }
  body[data-view="chart"] #chartTocToggleBtn { display: flex; }
  html:not(.js) body:has(#chartStage:target) #chartTocToggleBtn { display: flex; }

  .map-share-btn {
    /* Below the top bar, pinned to the map/cartogram canvas's own top-right
       corner — not squeezed into the top bar row next to the language and
       theme buttons, where it kept overlapping them on narrow screens. */
    position: fixed;
    top: calc(var(--safe-top) + var(--top-bar-height) + 10px);
    right: calc(var(--safe-right) + 10px);
    transform: none;
    z-index: 725;
    height: 34px;
    width: 34px;
    min-height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: var(--control-radius);
    box-shadow: none;
  }
  body:not([data-view="map"]):not([data-view="cartogram"]) .map-share-btn {
    display: none;
  }
  .menu-open .map-share-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .lang-dropdown { right: calc(var(--safe-right) + 48px); }
  .lang-dropdown-trigger {
    height: 34px;
    padding: 0 7px;
    gap: 3px;
    font-size: 11px;
  }
  .theme-toggle-btn {
    right: calc(var(--safe-right) + 8px);
    width: 34px;
    height: 34px;
  }
  .top-bar-toggle { left: calc(var(--safe-left) + 6px); }

  .chart-stage {
    --chart-shell-height: 65dvh;
    --chart-stage-top-gap: 10px;
    /* The fixed top bar sits above .chart-stage's own scrollport, so a plain
       10px gap left a card's title row (and its Valinnat/filters button)
       tucked underneath and unclickable whenever a scrollIntoView (TOC link,
       snap) landed it at the very top. Clear the bar's full height instead. */
    --chart-scroll-margin: calc(var(--safe-top) + var(--top-bar-height) + 10px);
    padding: 0 10px 0;
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .chart-stage-col {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* On mobile, TOC is shown as a collapsible block above the content */
  .chart-toc-wrap {
    position: static;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    margin-right: 0;
    margin-top: 0;
    padding-top: 0;
    transform: none;
    opacity: 0;
    transition: max-height var(--chart-toc-transition), opacity var(--chart-toc-transition);
  }
  .chart-stage.is-toc-open .chart-toc-wrap {
    max-height: 600px;
    opacity: 1;
    padding-top: 4px;
    margin-top: var(--chart-stage-top-gap);
  }
  .chart-stage.is-toc-open .chart-stage-col {
    padding-left: 12px;
  }
  .chart-toc-toggle-btn {
    left: 10px;
    top: calc(var(--top-bar-height) + 8px);
  }

  .chart-container-shell + .chart-container-shell {
    border-top: none;
    padding-top: 0;
  }

  /* News stage */
  .news-stage { padding: calc(var(--top-bar-height) + 10px) 12px 12px; }

  .europe-stage {
    padding: 0;
    overflow: hidden;
  }

  .europe-control-panel {
    top: calc(var(--top-bar-height) + 8px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 46%;
  }

  .europe-heading h1 {
    font-size: 17px;
  }

  .europe-heading p {
    font-size: 11px;
  }

  .europe-sources {
    max-height: 120px;
  }

  .europe-map {
    min-height: 0;
  }

  .europe-info-panel {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: 52%;
    padding: 13px;
  }

  .europe-legend {
    right: 10px;
    bottom: 10px;
  }

  .news-container-shell {
    padding: 16px 14px 14px;
    border-radius: var(--card-radius);
  }

  .news-feed-list {
    gap: 8px;
    margin-top: 8px;
    padding-right: 0;
  }

  .chart-container-shell {
    flex-direction: column !important;
    height: var(--chart-shell-height);
    min-height: var(--chart-shell-height);
    max-height: var(--chart-shell-height);
    padding: 14px;
    gap: 14px;
    border-radius: var(--card-radius);
    background: var(--panel-strong);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: auto;
  }

  .chart-body-row {
    flex-direction: column;
    overflow: visible;
  }

  .welfare-sidebar-col {
    width: 100%;
    gap: 10px;
  }

  .chart-sidebar {
    width: 100%;
    gap: 10px;
    flex: none;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    overflow: visible;
    padding-right: 0;
  }

  .chart-sidebar-section { gap: 7px; }
  .chart-sidebar-label { font-size: 9px; letter-spacing: 0.09em; }

  .chart-sidebar-mun {
    flex: none;
    gap: 8px;
  }

  .chart-mun-list,
  .nat-country-list {
    max-height: 150px;
    min-height: 110px;
    padding: 6px;
  }

  .chart-main-area { width: 100%; min-width: 0; gap: 8px; overflow: visible; }

  .pop-key-figures {
    max-height: none;
    overflow: visible;
  }

  .chart-title-row--hoisted {
    order: -1;
    width: 100%;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
  }

  .chart-title-row {
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }

  .chart-title-row .chart-view-title {
    font-size: 18px;
    line-height: 1.15;
  }

  .chart-main {
    max-height: 280px;
    min-height: unset;
    border-radius: var(--card-radius-sm);
  }
  .chart-main .main-svg-chart { height: auto; }
  #migriWrap, #langSpeakersWrap { min-height: unset; }
  #migriWrap .chart-main-area { min-height: unset; }

  /* flex (not a rigid px height) so this shrinks to whatever the card's fixed
     mobile height actually has left over, instead of forcing the card taller
     than its budget and needing to scroll internally to reach the sliders/
     caption below it. Floor is deliberately low — on the shortest/landscape
     screens the legend+sliders+caption alone can approach the card's whole
     budget, and a taller floor would just force the overflow back. */
  .nat-bar-chart-main,
  .subsidy-bar-chart-main,
  .lang-speakers-chart-main {
    flex: 1 1 0;
    height: auto;
    min-height: 50px;
  }

  /* Population structure: the key-figure cards stack under the chart on mobile
     and are tall (~290px), so the card's fixed dvh budget cannot hold them plus
     a legible chart. The chart row is `flex: 1 1 0; min-height: 0`, so it lost
     that fight and shrank below its own legend + plot + source note; the row is
     `overflow: visible` here, so the excess painted on top of the cards. Same
     auto-height + take-out-of-the-flex-chain fix as the family above: size the
     card to chart + cards so neither overlaps nor scrolls. */
  #popChartWrap {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  #popChartWrap .chart-body-row,
  #popChartWrap .chart-main-area {
    flex: none;
  }

  /* Definite height rather than flex:1 1 0, which has no leftover space to grow
     into once the shell above is auto-height. */
  #popChartWrap .chart-main {
    flex: none;
    height: 180px;
    min-height: 180px;
  }

  .nat-bar-chart-main,
  .subsidy-bar-chart-main {
    overflow: hidden;
  }

  /* Unemployment/crime-by-nationality: these two have an extra min-population
     slider on top of the year slider, so their legend+2-sliders+caption
     content alone can exceed the card's fixed dvh height budget even with
     chart-main shrunk to its floor. Let the card size to its content instead
     of clamping to a fixed height and scrolling internally to reach the
     sliders below the chart. */
  #unempBarWrap,
  #natBarChartWrap {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  /* .chart-body-row and .chart-main-area are flex:1-based (flex-grow into
     whatever space the shell hands down), which only makes sense when the
     shell has a definite height. With the shell now auto, flex-basis:0%
     items in an intrinsically-sized flex container don't reliably size to
     their content in every browser — empirically the card collapsed to a
     sliver instead of growing. Take both out of the flex-grow chain so
     their height is plain content-driven, like a normal block. */
  #unempBarWrap .chart-body-row,
  #natBarChartWrap .chart-body-row,
  #unempBarWrap .chart-main-area,
  #natBarChartWrap .chart-main-area {
    flex: none;
  }

  /* flex-grow has no "leftover space" to distribute once the shell above is
     auto-height, so give the chart itself a fixed height here instead of
     relying on flex:1 1 0 (which would otherwise settle at the family's
     50px floor — legible, but needlessly cramped when the card is free to
     grow to fit it). */
  #unempBarWrap .nat-bar-chart-main,
  #natBarChartWrap .nat-bar-chart-main {
    flex: none;
    height: 180px;
    min-height: 180px;
  }

  /* Subsidy / economic contribution / net migration / migri: the opposite
     problem from unemployment/crime above — their content (chart + a single
     caption or slider, no extra min-population slider) is naturally shorter
     than the card's fixed dvh budget, leaving blank space at the bottom
     instead of needing to scroll. Same auto-height + take-out-of-flex-chain
     fix, just sizing the card down to its content rather than up. */
  #subsidyBarWrap,
  #econContribWrap,
  #netMigrWrap,
  #migriWrap {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  #subsidyBarWrap .chart-body-row,
  #econContribWrap .chart-body-row,
  #netMigrWrap .chart-body-row,
  #migriWrap .chart-body-row,
  #subsidyBarWrap .chart-main-area,
  #econContribWrap .chart-main-area,
  #netMigrWrap .chart-main-area,
  #migriWrap .chart-main-area {
    flex: none;
  }

  #subsidyBarWrap .subsidy-bar-chart-main,
  #econContribWrap .subsidy-bar-chart-main,
  #netMigrWrap .nat-bar-chart-main,
  #migriWrap .nat-bar-chart-main {
    flex: none;
    height: 220px;
    min-height: 220px;
  }

  /* Let this chart's plot area fill the card's fixed height instead of leaving
     dead space below it — its sidebar/legend content is shorter than the others. */
  #langSpeakersWrap .lang-speakers-chart-main {
    flex: 1 1 0;
    height: auto;
    max-height: none;
    min-height: 180px;
  }

  #correlationsWrap { min-height: unset; }
  .correlation-chart-main,
  .correlation-chart-layout {
    min-height: unset;
  }
  .correlation-chart-layout {
    grid-template-columns: 1fr;
  }
  .correlation-heatmap {
    min-width: 760px;
  }
  .correlation-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .correlation-scatter-wrap,
  .correlation-scatter-chart {
    min-height: 280px;
  }
  .correlation-axis-title {
    font-size: 9px;
  }

  .nat-bar-chart-main .main-svg-chart,
  .subsidy-bar-chart-main .main-svg-chart,
  .lang-speakers-chart-main .main-svg-chart {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }

  /* These sit alongside the legend/chart-main/etc. as siblings in
     .chart-main-area, which already spaces them via flex `gap` — their own
     extra padding/margin was stacking on top of that gap, giving each
     section a different amount of breathing room from its neighbour. */
  .nat-year-slider-section { padding: 0; gap: 6px; }
  .chart-data-note { margin-top: 0; }

  /* Charts with two stacked slider sections (min-population + year range,
     e.g. unempBarWrap/natBarChartWrap/migriWrap) need this shorter to have
     any chance of fitting a mobile card without the card scrolling
     internally — the touch target shrinks a bit but stays draggable. */
  .nat-dual-slider-wrap {
    height: 28px;
    margin-bottom: 16px;
  }

  .news-card {
    width: 100%;
    gap: 10px;
    padding: 14px;
  }

  .news-card strong {
    font-size: 15px;
    line-height: 1.5;
  }

  .news-card-meta {
    font-size: 11px;
    line-height: 1.45;
  }

  .chart-share-btn span, .map-share-btn span { display: none; }
  .chart-share-btn, .map-share-btn { padding: 0 8px; min-width: 32px; }

  .chart-preset-option {
    align-items: center;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(112, 195, 226, 0.14);
    border-radius: 999px;
    background: rgba(112, 195, 226, 0.05);
    font-size: 11px;
    line-height: 1;
  }

  .chart-mun-search {
    min-height: 38px;
    padding: 7px 28px 7px 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  .chart-mun-item {
    gap: 8px;
    padding: 6px 7px;
    font-size: 12px;
    border-radius: 8px;
  }

  .chart-legend {
    gap: 6px 10px;
    font-size: 10px;
    min-height: 0;
  }

  .chart-legend > span,
  .chart-legend-item {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .chart-subtitle,
  .chart-data-note,
  .chart-sidebar-hint,
  .subsidy-group-note {
    font-size: 10px;
    line-height: 1.45;
  }

  .nat-year-range-label {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .chart-method-title { font-size: 11px; }
  .chart-methodology-panel { padding: 12px; border-radius: var(--card-radius); }
}


/* ── Very small screens (≤480px) ── */
@media (max-width: 480px) {
  .top-bar {
    padding-right: 0;
    padding-left: 0;
  }
  .mobile-nav-dropdown {
    max-width: min(40vw, 160px);
  }
  .map-quick-city-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lang-dropdown { right: calc(var(--safe-right) + 42px); }
  .lang-dropdown-trigger {
    min-width: 0;
    padding: 0 6px;
  }
  .chart-stage {
    --chart-shell-height: 62dvh;
    --chart-stage-top-gap: 8px;
    --chart-scroll-margin: calc(var(--safe-top) + var(--top-bar-height) + 8px);
    padding: 0 8px 0;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .chart-stage-col {
    flex-basis: 100%;
    max-width: 100%;
  }
  .chart-toc-wrap {
    width: 100%;
  }
  .chart-toc-toggle-btn {
    left: 8px;
    top: calc(var(--top-bar-height) + 6px);
    padding: 6px 10px 6px 8px;
    font-size: 0.74rem;
  }
  .news-stage { padding: calc(var(--top-bar-height) + 8px) 6px 6px; }

  .europe-stage { padding: 0; }
  .europe-control-panel {
    padding: 13px;
    left: 6px;
    right: 6px;
  }

  .chart-container-shell { padding: 12px; border-radius: var(--card-radius); }
  .news-container-shell {
    padding: 12px 10px 10px;
    border-radius: var(--card-radius-sm);
  }
  .news-feed-list {
    gap: 7px;
    margin-top: 6px;
  }
  .news-card {
    padding: 13px 12px;
    border-radius: 10px;
  }
  .news-card strong {
    font-size: 14px;
  }
  .chart-title-row .chart-view-title { font-size: 16px; }
  .chart-sidebar { padding-bottom: 10px; }
  .chart-legend { gap: 5px 8px; font-size: 9px; }
  .subsidy-group-note,
  .chart-sidebar-hint { font-size: 9px; line-height: 1.4; }
  .nat-year-range-label { font-size: 10px; }

  .chart-main {
    max-height: 240px;
  }

  .nat-bar-chart-main,
  .subsidy-bar-chart-main,
  .lang-speakers-chart-main { height: 220px; min-height: 220px; }
}

/* ── Cartogram stage ── */
.cartogram-stage {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 38%, rgba(41, 93, 118, 0.13), transparent 36%),
    linear-gradient(180deg, #08131d 0%, #02070d 100%);
}

.cartogram-basemap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(70, 129, 154, 0.12), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(255, 91, 123, 0.035), transparent 34%),
    linear-gradient(180deg, #08131d 0%, #02070d 100%);
}

.cartogram-basemap::before,
.cartogram-basemap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cartogram-basemap::before {
  background:
    linear-gradient(90deg, rgba(112, 195, 226, 0.035), transparent 26%, transparent 74%, rgba(255, 91, 123, 0.025)),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(2, 7, 13, 0.22) 78%);
  opacity: 0.72;
}

.cartogram-basemap::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(132, 171, 190, 0.030) 48%, transparent 66%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.18) 100%);
  opacity: 0.5;
}

.cartogram-basemap .leaflet-control-container {
  pointer-events: none;
}

.cartogram-basemap .leaflet-control-attribution {
  opacity: 0.82;
}

.cartogram-elm-mount {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Cartogram colour-scale legend: float bottom-left over the stage, matching the
   map view's bottom-left legend (was previously in the sidebar). */
.cartogram-floating-legend {
  position: absolute;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  z-index: 6;
  pointer-events: none;
}

.cartogram-sidebar-legend {
  display: none;
}

.cartogram-stage svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.cartogram-svg {
  cursor: grab;
}

.cartogram-svg.is-dragging {
  cursor: grabbing;
}

.cartogram-backdrop {
  pointer-events: none;
}

.cartogram-map-lines {
  pointer-events: none;
}

.cartogram-map-grid,
.cartogram-map-boundaries {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cartogram-map-grid {
  shape-rendering: crispEdges;
}

.cartogram-map-grid--minor {
  stroke: rgba(119, 158, 176, 0.035);
  stroke-width: 0.55;
}

.cartogram-map-grid--major {
  stroke: rgba(119, 158, 176, 0.075);
  stroke-width: 0.8;
}

.cartogram-map-boundaries {
  stroke: rgba(157, 205, 224, 0.135);
  stroke-width: 0.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cartogram-map-boundaries--postal {
  stroke: rgba(157, 205, 224, 0.075);
  stroke-width: 0.45;
}

/* The island handles pan/pinch itself, so the browser must not consume touch
   gestures on the SVG for scrolling or page zoom first. */
.cartogram-svg {
  touch-action: none;
}

.cartogram-backdrop-shadow-node {
  fill: rgba(111, 162, 186, 0.045);
}

.cartogram-backdrop-tone-node {
  opacity: 0.04;
}

.cartogram-backdrop-node {
  fill: transparent;
  stroke: rgba(157, 198, 216, 0.08);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
}

.cartogram-circle {
  cursor: pointer;
}
/* ── End cartogram stage ── */

/* ── Population key figures ── */
.pop-key-figures {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  max-height: 176px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 2px 0 0;
  scrollbar-gutter: stable;
}
.pop-kf-card {
  flex: 1 1 180px;
  min-width: 0;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  padding: 12px 14px 14px;
}
.pop-kf-label {
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow-wrap: anywhere;
}
.pop-kf-value {
  font-size: clamp(1.2em, 1.7vw, 1.6em);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  overflow-wrap: anywhere;
}
.pop-kf-sub {
  font-size: 0.75em;
  color: var(--muted);
  margin-top: 4px;
}
.pop-kf-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}
.pop-kf-label + .pop-kf-pair {
  margin-top: 8px;
}
.pop-kf-pair-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pop-kf-change-label {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.pop-kf-change-val {
  font-size: clamp(1.2em, 1.7vw, 1.6em);
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
}
.pop-kf-up   { color: var(--accent); }
.pop-kf-down { color: var(--muted);  }

@media (max-width: 700px) {
  .pop-key-figures {
    max-height: none;
    overflow: visible;
  }
}

.chart-category-header {
  display: none;
}
.chart-stage-col > .chart-category-header:first-child {
  padding-top: 8px;
}
.chart-main > .chart-category-header:first-child {
  padding-top: 4px;
}

/* ── Chart table of contents ── */
/* ── Chart TOC toggle button ── */
.chart-toc-toggle-btn.is-open {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
}

.chart-toc-wrap {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  align-self: flex-start;
  width: var(--chart-toc-width);
  margin-top: var(--chart-stage-top-gap);
  padding-top: 4px;
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  overflow: visible;
  transition: width var(--chart-toc-transition), opacity var(--chart-toc-transition);
}
.chart-stage.is-toc-open .chart-toc-wrap {
  width: var(--chart-toc-width);
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}
/* Desktop: collapse the chart TOC column when the toggle is off. */
.chart-stage:not(.is-toc-open) {
  gap: 0;
}
.chart-stage:not(.is-toc-open) .chart-toc-wrap {
  width: 0;
  margin: 0;
  padding-top: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.chart-toc {
  padding: 4px 4px 8px;
  overflow: visible;
  pointer-events: auto;
}
.chart-toc-title {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 0 4px;
}
.chart-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: toc-section;
}
.chart-toc-list > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-increment: toc-section;
}
.chart-toc-list > li > a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
  padding: 4px 4px;
  border-radius: 5px;
  transition: color 150ms ease;
}
.chart-toc-list > li > a::before {
  content: counter(toc-section) ".";
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  min-width: 1.4em;
  flex-shrink: 0;
}
.chart-toc-list > li > a:hover {
  color: var(--accent);
}
.chart-toc-sublist {
  margin: 0;
  padding: 0 0 6px 22px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chart-toc-sublist li {
  display: flex;
}
.chart-toc-sublist a {
  width: 100%;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 3px 4px;
  border-radius: 4px;
  transition: color 150ms ease;
}
.chart-toc-sublist a:hover {
  color: var(--accent);
}
.chart-toc-list > li > a.toc-active {
  color: var(--accent);
}
.chart-toc-sublist a.toc-active {
  color: var(--text);
  font-weight: 600;
}

/* ── Chart stage content column ── */
.chart-stage-col {
  flex: 1 1 auto;
  width: 100%;
  max-width: min(1680px, 100%);
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 0;
  padding-bottom: 0;
}
/* ─────────────────────────────────────────────
   Knowledge base (Tietopankki)
───────────────────────────────────────────── */
.knowledge-stage {
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  scroll-padding-top: 16px;
  padding: 0;
  min-height: 0;
}

@media (max-width: 920px) {
  .knowledge-stage {
    padding-top: calc(var(--safe-top) + var(--top-bar-height));
  }
}

.kb-shell {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}

.kb-toc {
  flex-shrink: 0;
  width: 220px;
  position: sticky;
  top: 24px;
  max-height: calc(100dvh - var(--top-bar-height) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 0 16px 0;
  margin-right: 32px;
  transition: width 0.22s ease, opacity 0.22s ease, margin-right 0.22s ease;
}

/* Desktop: collapse the KB TOC column when the toggle is off. */
.kb-shell .kb-toc:not(.is-open) {
  width: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.kb-toc-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px 12px;
}

.kb-main-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.kb-intro {
  font-size: 14px;
  color: var(--text);
  opacity: 0.85;
  margin: 0 0 28px;
  line-height: 1.65;
}

/* Numeric figures (percentages, counts) highlighted within KB prose. */
.kb-figure {
  color: var(--accent);
  font-weight: 700;
}

/* ── KB geographic filter bar ── */
.kb-geo-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding: 12px 14px;
  background: rgba(112, 195, 226, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.kb-geo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.kb-geo-btn:hover {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
  box-shadow: var(--control-shadow-ring);
}

.kb-geo-btn:active {
  transform: none;
}

.kb-geo-btn.is-active {
  background: rgba(112, 195, 226, 0.16);
  border-color: rgba(112, 195, 226, 0.42);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(112, 195, 226, 0.12);
}

.kb-comparisons {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 32px;
}

.kb-comparisons-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.kb-comparisons-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.kb-comparisons-sub {
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
}

.kb-comparisons-grid {
  column-count: 2;
  column-gap: 32px;
}

.kb-comparison-country {
  border: none;
  background: none;
  border-radius: 0;
  break-inside: avoid;
  display: block;
}

.kb-comparison-country-header {
  cursor: pointer;
  user-select: none;
  outline: none;
  list-style: none;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}

.kb-comparison-country-header::before {
  content: "▶";
  font-size: 8px;
  color: var(--muted);
  opacity: 0.7;
  transition: transform 0.15s;
  transform-origin: center;
  flex-shrink: 0;
}

.kb-comparison-country[open] .kb-comparison-country-header::before {
  transform: rotate(90deg);
}

.kb-comparison-country-header::-webkit-details-marker {
  display: none;
}

.kb-comparison-country-header:hover {
  opacity: 0.8;
}

.kb-comparison-country-header:hover .kb-comparison-country-name {
  color: var(--accent);
}

.kb-comparison-flag {
  font-size: 16px;
  line-height: 1;
  margin-right: 7px;
  vertical-align: middle;
  display: inline-block;
}

.kb-comparison-country-name {
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--text);
  opacity: 0.75;
  vertical-align: middle;
  display: inline-block;
}

.kb-comparison-entries {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-comparison-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
}

.kb-comparison-entry-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.kb-comparison-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.kb-comparison-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.kb-comparison-toggle {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.5;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.kb-comparison-toggle:hover {
  opacity: 0.85;
}

.kb-comparison-toggle.is-open {
  opacity: 0.8;
}

.kb-comparison-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 2px 0 2px;
  padding-left: 8px;
  border-left: 2px solid var(--border);
  opacity: 0.85;
}

.kb-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-toc-link {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}

.kb-toc-link:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.kb-toc-link.is-active {
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 600;
}

.kb-toc-group-item {
  margin-top: 4px;
}

.kb-toc-group-label {
  display: block;
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

a.kb-toc-group-label {
  text-decoration: none;
  border-radius: 8px;
}

a.kb-toc-group-label:hover {
  color: var(--text);
  background: var(--panel-soft);
}

.kb-toc-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-toc-sublink {
  padding-left: 22px;
  font-size: 12px;
}

.kb-group {
  margin-bottom: 12px;
}

.kb-group-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  margin: 40px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.kb-content {
  flex: 1;
  min-width: 0;
}

.kb-section {
  margin-bottom: 48px;
}

.kb-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Demoted section heading (smallTitle: true) — a list caption, not a subtitle */
.kb-section-title--small {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 12px;
}

.kb-country {
  margin-bottom: 32px;
}

.kb-subsection-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 0 8px;
}

.kb-cases-scroll {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.kb-origin-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
  opacity: 0.6;
}

.kb-section-lead,
.kb-group-lead {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: -8px 0 20px;
  opacity: 0.85;
}

/* Percentage figures highlighted in the page's cyan accent throughout the KB */
.kb-pct {
  color: var(--accent);
  font-weight: 700;
}

.kb-section-note {
  font-size: 12px;
  color: var(--muted);
  margin: -12px 0 16px;
}

/* Prominent "open the related chart" button shown under a section's chart. */
.kb-chart-link-row {
  margin: 16px 0 28px;
}

.kb-chart-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: rgba(112, 195, 226, 0.12);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.kb-chart-link-btn::after {
  content: "→";
  font-size: 15px;
  line-height: 1;
}

.kb-chart-link-btn:hover {
  background: rgba(112, 195, 226, 0.22);
}

.kb-article-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 8px;
  margin-bottom: 10px;
}

.kb-article-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}

.kb-article-group-summary {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 12px;
  opacity: 0.8;
  border-left: 3px solid var(--accent-dim, #6a9fb5);
  padding-left: 10px;
}

/* Highlighted key-point bullets summarising a group's central facts */
.kb-article-group-points {
  list-style: none;
  margin: 0 0 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(112, 195, 226, 0.05);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.kb-article-group-points li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}

.kb-article-group-points li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.kb-article-group .kb-articles {
  gap: 10px;
}

/* kb-article cards inside a group now use the same outlined style as standalone cards */

.kb-subgroup-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  letter-spacing: 0.01em;
}

.kb-article-group > .kb-subgroup-title:first-of-type {
  margin-top: 4px;
}

/* removed: no longer needed after unifying card style */

.kb-section-note a {
  color: var(--accent-dim);
  text-decoration: none;
}

.kb-section-note a:hover {
  color: var(--accent);
  text-decoration: underline;
}

@keyframes kb-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes kb-label-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kb-chart-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: kb-bar-grow 0.38s cubic-bezier(0.2, 0, 0.35, 1) both;
}
.kb-chart-label {
  animation: kb-label-fade 0.2s ease-out both;
}
.kb-chart {
  margin: 1.25rem 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.kb-chart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.65rem;
}
.kb-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.65rem;
  line-height: 1.4;
}
.kb-chart-head .kb-chart-title {
  margin-bottom: 0;
}
.kb-pew-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 200px;
  max-width: 100%;
  min-height: 38px;
  padding: 0 36px 0 16px;
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background-color: var(--control-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb2c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.kb-pew-select:hover,
.kb-pew-select:focus,
.kb-pew-select:focus-visible {
  border-color: var(--control-hover-border);
  background-color: var(--control-hover-bg);
  box-shadow: var(--control-shadow-ring);
  outline: none;
}

.kb-pew-select option {
  background: #0b1018;
  color: var(--text);
  font-weight: 500;
}
.kb-metric-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kb-metric-select-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.kb-pew-svg-wrap,
.kb-consang-svg-wrap,
.kb-migmap-svg-wrap {
  overflow: hidden;
  border: 1px solid var(--kb-migmap-border);
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, var(--kb-migmap-bg-radial), transparent 34%),
    linear-gradient(180deg, var(--kb-migmap-bg-1), var(--kb-migmap-bg-2));
}
.kb-pew-svg-wrap svg,
.kb-consang-svg-wrap svg,
.kb-migmap-svg-wrap svg {
  display: block;
}
.kb-consang-count {
  align-self: center;
  border: 1px solid var(--kb-migmap-border);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  padding: 0.35rem 0.55rem;
}
.kb-pew-country {
  cursor: pointer;
}
.kb-pew-country path {
  transition: filter 0.12s ease, stroke-width 0.12s ease;
}
.kb-pew-country:hover path {
  filter: brightness(1.18);
  stroke-width: 1.3px;
}
.kb-pew-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 11px;
}
.kb-pew-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.kb-pew-legend-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  flex: 0 0 auto;
}
.kb-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 0.5rem;
  font-size: 11px;
  color: var(--text);
}
.kb-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kb-chart-legend-bar {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.kb-chart-legend-bar-a {
  background: rgba(176, 196, 214, 0.7);
  opacity: 1;
}
.kb-chart-legend-bar-b {
  background: rgba(112, 195, 226, 0.82);
  opacity: 1;
}
.kb-chart-legend-line {
  width: 16px;
  height: 0;
  border-top: 2.5px solid var(--accent-hot);
  position: relative;
}
.kb-chart-legend-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-hot);
  transform: translate(-50%, -50%);
}
.kb-chart-intro {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  opacity: 0.85;
  margin: 1.25rem 0;
}
.kb-chart-caption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 0.4rem;
  opacity: 0.8;
}
.kb-catbar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0.25rem 0 0.5rem;
}
.kb-catbar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.kb-catbar-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.kb-chart-caption a {
  color: var(--muted);
  text-decoration: none;
}
.kb-chart-caption a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── KB stat tiles (compact number comparison, not a bar chart) ── */
.kb-stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0.35rem 0 0.15rem;
}
.kb-stat-tile {
  position: relative;
  flex: 1 1 160px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  overflow: hidden;
}
.kb-stat-tile-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.kb-stat-tile-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kb-stat-tile-unit {
  margin-left: 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
}
.kb-stat-tile-label {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.kb-stat-tiles-note {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.9;
}

/* ── KB ranked horizontal bar chart (rank-hbar) ── */
/* Toggle: absolute (per 100k) ↔ relative to the native baseline (× natives) */
.kb-rank-toggle-btn {
  align-self: flex-start;
  margin: 2px 0 8px;
  padding: 5px 11px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kb-rank-toggle-btn:hover,
.kb-rank-toggle-btn:focus-visible {
  background: var(--control-hover-bg);
  border-color: var(--control-hover-border);
  color: var(--text);
  outline: none;
}
.kb-rank-toggle-btn[aria-pressed="true"] {
  background: rgba(112, 195, 226, 0.11);
  border-color: rgba(112, 195, 226, 0.26);
  color: var(--accent);
}

.kb-rank-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0.2rem;
}
.kb-rank-row {
  display: grid;
  grid-template-columns: 150px 1fr 46px;
  align-items: center;
  gap: 10px;
}
.kb-rank-name {
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-rank-track {
  position: relative;
  height: 11px;
  background: rgba(150, 214, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
/* Marker for the earlier-year value on a before/after rank bar (gap to the bar
   end shows the change). */
.kb-rank-from {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(8, 12, 18, 0.55);
}
.kb-rank-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--muted);
  opacity: 0.5;
  transition: width 0.4s cubic-bezier(0.2, 0, 0.35, 1);
}
.kb-rank-bar.is-hot {
  background: var(--accent-hot);
  opacity: 0.9;
}
.kb-rank-bar.is-accent {
  background: var(--accent);
  opacity: 0.85;
}
.kb-rank-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kb-rank-val.is-hot {
  color: var(--accent-hot);
}
.kb-rank-val.is-accent {
  color: var(--accent);
}
@media (max-width: 560px) {
  .kb-rank-row {
    grid-template-columns: 104px 1fr 38px;
    gap: 8px;
  }
  .kb-rank-name {
    font-size: 10.5px;
  }
}

/* Diverging horizontal bar chart: a shared euro scale with a zero axis; bars
   extend left for negative values and right for positive. Neutral slate for
   negatives, accent cyan for positives — no alarming colours. */
.kb-div-unit {
  font-size: 11px;
  color: var(--muted);
  margin: 0.1rem 0 0.4rem;
}
.kb-div-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 0.2rem;
}
.kb-div-row {
  display: grid;
  grid-template-columns: 150px 1fr 82px;
  align-items: center;
  gap: 10px;
}
.kb-div-name {
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-div-track {
  position: relative;
  height: 12px;
  background: rgba(150, 214, 255, 0.06);
  border-radius: 3px;
}
.kb-div-zero {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.32);
}
.kb-div-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.2, 0, 0.35, 1),
    left 0.4s cubic-bezier(0.2, 0, 0.35, 1);
}
.kb-div-bar.is-neg {
  background: rgba(176, 196, 214, 0.46);
}
.kb-div-bar.is-pos {
  background: rgba(112, 195, 226, 0.82);
}
/* Reference rows (native baseline, all-foreign-born average) get a ring. */
.kb-div-bar.is-accent {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.kb-div-bar.is-accent.is-neg {
  background: rgba(176, 196, 214, 0.66);
}
.kb-div-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kb-div-val.is-pos {
  color: var(--accent);
}
.kb-div-note {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0.5rem 0 0;
}
@media (max-width: 560px) {
  .kb-div-row {
    grid-template-columns: 96px 1fr 72px;
    gap: 8px;
  }
  .kb-div-name {
    font-size: 10.5px;
  }
  .kb-div-val {
    font-size: 10.5px;
  }
}

/* Grouped diverging bar chart (two series per row: actual + age-standardised). */
.kb-gdiv-unit {
  font-size: 11px;
  color: var(--muted);
  margin: 0.1rem 0 0.4rem;
}
.kb-gdiv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0.5rem;
}
.kb-gdiv-key {
  font-size: 11px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kb-gdiv-key::before {
  content: "";
  width: 12px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}
.kb-gdiv-key.is-a::before {
  background: rgba(176, 196, 214, 0.7);
}
.kb-gdiv-key.is-b::before {
  background: rgba(112, 195, 226, 0.82);
}
.kb-gdiv-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kb-gdiv-row {
  display: grid;
  grid-template-columns: 150px 1fr 96px;
  align-items: center;
  gap: 10px;
}
.kb-gdiv-name {
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-gdiv-track {
  position: relative;
  height: 16px;
  background: rgba(150, 214, 255, 0.06);
  border-radius: 3px;
}
.kb-gdiv-zero {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(255, 255, 255, 0.32);
}
.kb-gdiv-bar {
  position: absolute;
  height: 6px;
  border-radius: 2px;
}
.kb-gdiv-bar.is-a {
  top: 2px;
  background: rgba(176, 196, 214, 0.7);
}
.kb-gdiv-bar.is-b {
  bottom: 2px;
  background: rgba(112, 195, 226, 0.82);
}
.kb-gdiv-vals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.kb-gdiv-v {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kb-gdiv-v.is-a {
  color: var(--muted);
}
.kb-gdiv-v.is-b {
  color: var(--accent);
}
.kb-gdiv-note {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0.5rem 0 0;
}
@media (max-width: 560px) {
  .kb-gdiv-row {
    grid-template-columns: 92px 1fr 78px;
    gap: 8px;
  }
  .kb-gdiv-name {
    font-size: 10px;
  }
}

/* Multi-line chart (age-profile lines) legend + unit. */
.kb-line-unit {
  font-size: 11px;
  color: var(--muted);
  margin: 0.1rem 0 0.3rem;
}
.kb-line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.35rem;
}
.kb-line-key {
  font-size: 11px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kb-line-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* Prominent methodology-limitations box for charts that are a modeled
   scenario rather than a straightforward plot of measured data. Deliberately
   louder than .kb-chart-caption — it's meant to be read, not skimmed past. */
.kb-chart-caveats {
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-radius: 4px;
}
.kb-chart-caveats-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kb-chart-caveats-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.kb-chart-caveats-list li {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  opacity: 0.92;
}

.kb-migmap-card {
  padding: 0.75rem 0.75rem 0.55rem;
}

.kb-migmap-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.kb-migmap-title {
  margin-bottom: 0;
  min-width: 0;
}

.kb-migmap-year {
  color: var(--accent);
  font-size: 2.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kb-migmap-canvas {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.kb-migmap-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.kb-migmap-playbtn {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.2;
  margin: 0;
  padding: 4px 10px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kb-migmap-playbtn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.kb-migmap-slider {
  --progress: 0%;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 16px;
  margin: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent) 0 var(--progress), var(--line) var(--progress) 100%);
  cursor: pointer;
}

.kb-migmap-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--border);
}

.kb-migmap-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--border);
}

.kb-migmap-total {
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kb-migmap-origins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
  margin: 0.5rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 10px;
  list-style: none;
}

.kb-migmap-origins li {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 6px;
}

.kb-migmap-origins b {
  color: var(--text);
}

.kb-migmap-origins i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(79,195,247,0.75) 0 var(--origin-share), rgba(255,255,255,0.10) var(--origin-share) 100%);
}

.kb-migmap-origins em {
  font-style: normal;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kb-migmap-caption {
  margin-top: 0.35rem;
}

.kb-migmap-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-top: 0.6rem;
}

.kb-migmap-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kb-migmap-lists {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kb-migmap-rank {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.kb-migmap-rank-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kb-migmap-rank-unit {
  font-size: 10.5px;
  color: var(--muted);
  opacity: 0.75;
  margin: 0.1rem 0 6px;
}

.kb-migmap-rank-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.kb-migmap-rank-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.kb-migmap-rank-list li:last-child {
  border-bottom: none;
}

.kb-migmap-rank-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kb-migmap-rank-code {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.kb-migmap-rank-value {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

@media (max-width: 620px) {
  .kb-chart-head {
    align-items: stretch;
    flex-direction: column;
  }

  .kb-pew-select {
    width: 100%;
  }

  /* The country % labels are set in SVG viewBox units, so shrinking the whole
     map to fit a narrow screen shrinks the text past legibility. Keep the map
     at a size where the numbers stay readable and let it scroll horizontally
     instead of shrinking further. */
  .kb-pew-svg-wrap {
    overflow-x: auto;
  }

  .kb-pew-svg-wrap svg {
    width: 640px !important;
    min-width: 640px;
  }

  .kb-migmap-header {
    align-items: start;
    gap: 0.55rem;
  }

  .kb-migmap-year {
    font-size: 1.65rem;
  }

  .kb-migmap-title {
    font-size: 10.5px;
    line-height: 1.3;
  }

  .kb-migmap-controls {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kb-migmap-total {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .kb-migmap-body {
    flex-direction: column;
  }

  .kb-migmap-lists {
    flex: 1 1 auto;
    flex-direction: row;
  }

  .kb-migmap-lists .kb-migmap-rank {
    flex: 1 1 0;
  }

  .kb-migmap-origins {
    grid-template-columns: 1fr;
  }
}

/* The multi-line chart's hover tooltip tracks the pointer via mousemove.
   There's no such thing as "hover" with a finger, so on a touch-primary
   portrait phone it just leaves a tooltip stuck wherever the last touch
   landed, with no precise way to move or dismiss it. Turn the tracking off
   there entirely rather than ship an interaction nobody can use cleanly. */
@media (max-width: 620px) and (orientation: portrait) {
  .kb-line-chart svg {
    pointer-events: none;
  }

  /* Stacked-bar and multi-line charts are drawn at a ~660px-wide SVG
     viewBox, sized for desktop. In portrait that no longer fits the column
     and either gets clipped or squeezed illegibly small depending on the
     parent's overflow. Keep the SVG near its natural size and let just that
     region scroll horizontally, directly under the chart — not the title,
     legend, or caption around it. Landscape/desktop have enough width that
     this isn't needed, and forcing a fixed min-width there would just make
     things worse. (Pew/migration maps have their own analogous wrapper
     already: .kb-pew-svg-wrap / .kb-migmap-svg-wrap.) */
  .kb-chart-svg-wrap {
    overflow-x: auto;
  }

  .kb-chart-svg-wrap svg {
    width: 600px !important;
    min-width: 600px;
  }

  /* Overrep multi-panel chart is drawn at a 1000px-wide viewBox (several
     side-by-side panels), wider than the single-series charts above — reuse
     the same "keep natural size, scroll instead of shrink" approach but with
     its own width so the panels stay legible. */
  .kb-overrep-svg-wrap {
    overflow-x: auto;
  }

  .kb-overrep-svg-wrap svg {
    width: 1000px !important;
    min-width: 1000px;
  }
}

.kb-country-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kb-country-name::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

.kb-country-lead {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 16px;
  opacity: 0.85;
}

.kb-surveys {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-entry {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.kb-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.kb-entry-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1 55%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kb-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kb-entry-year,
.kb-entry-n {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.kb-entry-source {
  display: block;
  font-size: 11px;
  color: var(--accent-dim);
  text-decoration: none;
  margin-bottom: 6px;
  word-break: break-all;
}

.kb-entry-source:hover {
  color: var(--accent);
  text-decoration: underline;
}

.kb-entry-findings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kb-entry-findings li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  padding-left: 16px;
  position: relative;
  overflow-wrap: anywhere;
}

.kb-entry-findings li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.kb-entry-findings li strong {
  color: var(--accent);
}

.kb-entry-findings li a {
  color: var(--accent-dim);
  text-decoration: none;
}
.kb-entry-findings li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Articles */
.kb-articles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.kb-article-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 6px;
}

.kb-article-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}

a.kb-article-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.kb-article-original {
  margin-top: 2px;
  margin-bottom: 2px;
}

.kb-article-original-link {
  font-size: 11px;
  opacity: 0.45;
  color: inherit;
  text-decoration: none;
  font-style: italic;
}

.kb-article-original-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.kb-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kb-article-evidence {
  font-size: 11px;
  font-weight: 650;
  color: var(--accent);
  background: rgba(112, 195, 226, 0.08);
  border: 1px solid rgba(112, 195, 226, 0.22);
  border-radius: 5px;
  padding: 2px 7px;
}

.kb-article-evidence[data-evidence="opinion"] {
  color: #f3c96b;
  background: rgba(243, 201, 107, 0.08);
  border-color: rgba(243, 201, 107, 0.25);
}

.kb-article-evidence[data-evidence="research"] {
  color: #a7e3bd;
  background: rgba(167, 227, 189, 0.08);
  border-color: rgba(167, 227, 189, 0.24);
}

.kb-article-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.kb-article-pub {
  font-size: 12px;
  color: var(--muted);
}

.kb-article-pub::before {
  content: "·";
  margin-right: 6px;
  color: var(--muted);
}

.kb-article-date {
  font-size: 11px;
  color: var(--muted);
  background: rgba(112, 195, 226, 0.07);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
}

.kb-article-summary {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

.kb-article-caveat {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin: 6px 0 0;
}

/* X-posts – collapsible toggle */
.kb-xposts-toggle {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.kb-xposts-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: var(--panel);
  transition: color 0.15s, background 0.15s;
}

.kb-xposts-summary::-webkit-details-marker { display: none; }

.kb-xposts-summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.kb-xposts-toggle[open] > .kb-xposts-summary::before {
  transform: rotate(90deg);
}

.kb-xposts-summary:hover {
  color: var(--text);
  background: var(--panel-soft);
}

.kb-xposts-count {
  font-weight: 400;
  color: var(--muted);
}

.kb-xposts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.kb-xpost-row {
  border-bottom: 1px solid var(--border);
}

.kb-xpost-row:last-child {
  border-bottom: none;
}

.kb-xpost-row-link {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.45;
  transition: background 0.12s, color 0.12s;
}

.kb-xpost-row-link:hover {
  background: var(--panel-soft);
  color: var(--accent);
}

.kb-xpost-row-label {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 700px) {
  .knowledge-stage {
    overflow-x: hidden;
  }

  .kb-shell {
    flex-direction: column;
    max-width: 100%;
    padding: 16px 12px 40px;
  }

  .kb-toc {
    width: 100%;
    max-height: min(34dvh, 260px);
    overflow-y: auto;
    position: static;
    padding: 10px 0;
    margin-right: 0;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(8, 11, 18, 0.72);
  }

  .kb-toc-title {
    margin-left: 12px;
  }

  .kb-content,
  .kb-comparisons,
  .kb-entry,
  .kb-article,
  .kb-article-group,
  .kb-chart,
  .kb-migmap-card {
    max-width: 100%;
  }

  .kb-comparisons-grid {
    column-count: 1;
  }

  .kb-entry-source,
  .kb-article-title,
  .kb-article-summary,
  .kb-section-lead,
  .kb-group-lead,
  .kb-country-lead,
  .kb-intro,
  .kb-comparison-desc {
    overflow-wrap: anywhere;
  }
}

/* ── Chart stage top padding ────────────────────────────── */
.chart-stage-col {
  padding-top: 20px;
}

/* ── System prose/body text ────────────────────────────── */
.kb-section-lead,
.kb-group-lead,
.kb-section-note,
.kb-intro,
.kb-comparison-desc,
.news-card-summary,
.home-hero-tagline,
.home-stat-sub,
.home-panel-sub {
  font-family: var(--font-data);
}

/* ── Home / landing stage ───────────────────────────────── */
.home-stage {
  padding: 100px 24px 64px;
  gap: 40px;
  position: relative;
  background-image:
    url("../images/dark_gradient.svg?v=2"),
    url("../images/helsinki_dark_bg.svg?v=2");
  background-attachment: local, local;
  background-size: 100% calc(50vh + 80px), auto calc(50vh + 80px);
  background-position: center -80px, center -80px;
  background-repeat: no-repeat, no-repeat;
  background-color: #000000;
}

body.light-theme .home-stage {
  background-image:
    url("../images/light_gradient.svg?v=2"),
    url("../images/helsinki_light_bg.svg?v=2");
  background-attachment: local, local;
  background-size: 100% calc(50vh + 80px), auto calc(50vh + 80px);
  background-position: center -80px, center -80px;
  background-repeat: no-repeat, no-repeat;
  background-color: #f4f7f9;
}

@media (max-width: 920px) {
  .home-stage {
    padding-top: calc(var(--safe-top) + var(--top-bar-height) + 60px);
  }
}

.home-elm-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.home-hero {
  text-align: center;
  max-width: 680px;
  width: 100%;
}

.home-hero-title {
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

.home-hero-tagline {
  font-size: clamp(0.88rem, 2vw, 1rem);
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  font-weight: 400;
}

.home-cta-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.home-cta-btn {
  padding: 12px 28px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: 0.01em;
}

.home-cta-btn--primary {
  background: var(--accent);
  color: #0a1a24;
  border: 1px solid var(--accent);
}

.home-cta-btn--primary:hover {
  background: #b8f0ff;
  border-color: #b8f0ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(112, 195, 226, 0.3);
}

.home-cta-btn--secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(112, 195, 226, 0.4);
}

.home-cta-btn--secondary:hover {
  background: rgba(112, 195, 226, 0.08);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(112, 195, 226, 0.12);
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 820px;
}

.home-stat {
  position: relative;
  background: rgba(112, 195, 226, 0.04);
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: 6px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.home-stat:hover {
  background: rgba(112, 195, 226, 0.09);
  border-color: rgba(112, 195, 226, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.home-stat:hover::before {
  transform: scaleX(1);
}

.home-stat:active {
  transform: translateY(-2px);
}

/* "hot" tiles use the same cyan as the rest — nothing is flagged as alarming. */
.home-stat--hot {
  background: rgba(112, 195, 226, 0.04);
  border-color: rgba(112, 195, 226, 0.12);
}

.home-stat--hot::before {
  background: var(--accent);
}

.home-stat--hot:hover {
  background: rgba(112, 195, 226, 0.09);
  border-color: rgba(112, 195, 226, 0.3);
}

.home-stat-number {
  font-size: clamp(1.4rem, 3.5vw, 2.1rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1;
}

.home-stat--hot .home-stat-number {
  color: var(--accent);
}

.home-stat-number--live {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.home-stat-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  animation: home-stat-live-pulse 2s ease-in-out infinite;
}

@keyframes home-stat-live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(112, 195, 226, 0.45); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(112, 195, 226, 0); }
}

.home-stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text, #d8eaf4);
  line-height: 1.35;
  margin-top: 4px;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.home-stat-sub {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Home data panels (municipality chart + trend) ──────── */
.home-data-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 820px;
}

.home-data-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 820px;
}

.home-panel {
  position: relative;
  background: rgba(112, 195, 226, 0.03);
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.home-panel:hover {
  background: rgba(112, 195, 226, 0.07);
  border-color: rgba(112, 195, 226, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.home-panel:hover::before {
  transform: scaleX(1);
}

.home-panel-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.7;
}

.home-muni-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-muni-row {
  display: grid;
  grid-template-columns: 108px 1fr 38px;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.home-muni-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.home-muni-bar-wrap {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 2px;
  height: 6px;
  overflow: hidden;
}

.home-muni-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.7;
}

.home-muni-pct {
  color: var(--accent);
  font-weight: 600;
  text-align: right;
  font-size: 0.7rem;
}

.home-data-row--wide {
  grid-template-columns: 1fr;
}

.home-panel--wide {
  width: 100%;
}

.home-postal-row {
  grid-template-columns: 150px 1fr 44px;
}

.home-postal-code {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
  font-size: 0.68rem;
}

.home-loading {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 16px 0;
}

/* ── Trend panel ────────────────────────────────────────── */
.home-panel--trend {
  justify-content: center;
}

.home-trend-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.home-trend-growth {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.home-trend-growth-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 2px;
  font-family: var(--font-data);
}

.home-trend-growth-rel {
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.65;
  margin-bottom: 12px;
  font-family: var(--font-data);
}

.home-sparkline {
  width: 100%;
  height: 52px;
  display: block;
}

.home-trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.home-trend-axis-label {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

@media (max-width: 700px) {
  .home-data-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .home-stage {
    padding-top: calc(var(--safe-top) + var(--top-bar-height) + 28px);
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 48px;
    gap: 28px;
  }
  .home-elm-shell {
    gap: 28px;
  }
  .home-stats {
    grid-template-columns: 1fr;
  }
}

/* ── Home comparison section ──────────────────────────── */
.home-compare,
.home-claims {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-claims-lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.home-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.home-compare-card {
  position: relative;
  background: rgba(112, 195, 226, 0.03);
  border: 1px solid rgba(112, 195, 226, 0.1);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-compare-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.home-compare-card:hover {
  background: rgba(112, 195, 226, 0.08);
  border-color: rgba(112, 195, 226, 0.28);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.home-compare-card:hover::before {
  transform: scaleX(1);
}

.home-compare-card-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}

.home-compare-row {
  display: grid;
  grid-template-columns: 112px 1fr 42px;
  align-items: center;
  gap: 8px;
}

.home-compare-group {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-compare-bar-wrap {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  height: 7px;
}

.home-compare-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.55;
}

.home-compare-bar--warm {
  background: #ffa857;
  opacity: 0.8;
}

.home-compare-bar--hot {
  background: var(--accent-hot);
  opacity: 0.9;
}

.home-compare-val {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
}

.home-compare-val.is-warm {
  color: #ffa857;
}

.home-compare-val.is-hot {
  color: var(--accent-hot);
}

.home-compare-source {
  font-size: 0.65rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .home-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Home tab icon ──────────────────────────────────────── */
.top-bar-tab--home {
  padding: 4px 10px;
  display: flex;
  align-items: center;
}

.top-bar-home-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Fiscal costs chart ─────────────────────────────────── */
.costs-section {
  margin-bottom: 28px;
}

.costs-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.costs-note {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.4;
  padding: 7px 10px;
  border-left: 3px solid rgba(112, 195, 226, 0.3);
  background: rgba(112, 195, 226, 0.03);
  border-radius: 0 4px 4px 0;
}

.costs-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.costs-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 72px;
  align-items: center;
  gap: 10px;
}

.costs-bar-label {
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.costs-bar-wrap {
  background: rgba(112, 195, 226, 0.08);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.costs-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent-dim);
  transition: width 0.3s ease;
}

.costs-bar--warm {
  background: #f0a040;
}

.costs-bar--hot {
  background: var(--accent-hot);
}

.costs-bar--native {
  background: var(--accent);
}

.costs-bar-val {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

.costs-bar-val.is-warm {
  color: #f0a040;
}

.costs-bar-val.is-hot {
  color: var(--accent-hot);
}

.costs-source {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 18px;
  padding: 6px 10px;
  border-left: 3px solid rgba(112, 195, 226, 0.18);
  background: rgba(112, 195, 226, 0.02);
  border-radius: 0 4px 4px 0;
}

@media (max-width: 520px) {
  .costs-bar-row {
    grid-template-columns: 110px 1fr 60px;
    gap: 7px;
  }
}

/* ── Claims & Facts chart ───────────────────────────────── */
.claims-grid {
  columns: 2;
  column-gap: 14px;
  padding: 16px;
}

.claim-card {
  background: rgba(112, 195, 226, 0.04);
  border: 1px solid rgba(112, 195, 226, 0.12);
  border-radius: 6px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  break-inside: avoid;
  margin-bottom: 14px;
}

.claim-card--hot {
}

.claim-card--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.claim-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.claim-row--fact {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.claim-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(112, 195, 226, 0.07);
  color: var(--accent-dim);
  border: 1px solid rgba(112, 195, 226, 0.11);
  border-radius: 6px;
  padding: 2px 7px;
  margin-top: 2px;
  white-space: nowrap;
}

.claim-badge--fact {
  background: rgba(100, 220, 120, 0.07);
  color: #4db060;
  border-color: rgba(100, 220, 120, 0.12);
}

.claim-text {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  font-style: italic;
}

.claim-fact {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.claim-fact strong {
  color: var(--accent);
  font-weight: 700;
}

.claim-card--hot .claim-fact strong {
  color: var(--accent);
}

.claim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.claim-sources {
  display: flex;
  flex: 1 1 240px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.claim-sources-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.claim-source-link,
.claim-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  border: 1px solid rgba(112, 195, 226, 0.18);
  border-radius: 6px;
  padding: 3px 7px;
  background: rgba(112, 195, 226, 0.05);
  color: var(--accent);
  font-size: 0.68rem;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.claim-source-link:hover,
.claim-detail-link:hover {
  border-color: rgba(112, 195, 226, 0.36);
  background: rgba(112, 195, 226, 0.1);
  text-decoration: none;
}

.claim-detail-link {
  flex: 0 0 auto;
  margin-left: auto;
  font-weight: 700;
}


.claim-kb-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(112, 195, 226, 0.3);
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s;
}
.claim-kb-link:hover {
  opacity: 1;
  background: rgba(112, 195, 226, 0.1);
  text-decoration: none;
}

@media (max-width: 700px) {
  .claims-grid {
    columns: 1;
  }
}

/* ── Claim card hover accent bar ────────────────────────── */
.claim-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.claim-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}


.claim-card:hover {
  background: rgba(112, 195, 226, 0.09);
  border-color: rgba(112, 195, 226, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}


.claim-card:hover::before {
  transform: scaleX(1);
}

/* ── Scroll-reveal ──────────────────────────────────────── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.reveal-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.reveal-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.reveal-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.reveal-on-scroll:nth-child(6) { transition-delay: 0.40s; }

/* Keep these after the base chart TOC rules so the desktop sidebar does not win on mobile. */
@media (max-width: 768px) {
  body[data-view="chart"] #chartStage,
  html:not(.js) body:has(#chartStage:target) #chartStage {
    padding: calc(var(--safe-top) + var(--top-bar-height) + 10px) 10px 0;
  }

  .chart-stage {
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: hidden;
  }

  .chart-stage-col {
    flex-basis: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-left: 0;
    transition: transform var(--chart-toc-transition);
  }

  /* Full-screen drawer sliding in from the left, matching the Knowledge Base
     TOC — pushes .chart-stage-col out of the way instead of overlaying it. */
  .chart-toc-wrap {
    position: fixed;
    top: var(--top-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: none;
    margin: 0;
    z-index: 1010;
    background: rgba(8, 12, 18, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 16px max(16px, var(--safe-bottom));
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--chart-toc-transition), visibility 0s linear 260ms;
  }

  .chart-stage.is-toc-open .chart-toc-wrap {
    transform: translateX(0);
    visibility: visible;
    padding-top: 16px;
    transition: transform var(--chart-toc-transition), visibility 0s linear 0s;
  }

  .chart-stage.is-toc-open .chart-stage-col {
    padding-left: 0;
    transform: translateX(100%);
  }

  body[data-view="chart"] .map-share-btn,
  html:not(.js) body:has(#chartStage:target) .map-share-btn {
    display: none;
  }

  .chart-toc-toggle-btn {
    left: 10px;
    top: calc(var(--safe-top) + var(--top-bar-height) + 8px);
  }
}

@media (max-width: 480px) {
  body[data-view="chart"] #chartStage,
  html:not(.js) body:has(#chartStage:target) #chartStage {
    padding: calc(var(--safe-top) + var(--top-bar-height) + 8px) 8px 0;
  }

  .chart-stage {
    gap: 10px;
  }

  .chart-toc-toggle-btn {
    left: 8px;
    top: calc(var(--safe-top) + var(--top-bar-height) + 6px);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE USABILITY IMPROVEMENTS (OVERLAYS, BOTTOM SHEETS, SCROLLABLE CHARTS)
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Header TOC Toggles */
body[data-view] #kbTocToggleBtn {
  display: none;
}

/* Show the KB TOC toggle on desktop too (like the map menu). */
body[data-view="knowledge"] #kbTocToggleBtn {
  display: flex;
}

@media (max-width: 700px) {
  body[data-view="knowledge"] #kbTocToggleBtn {
    display: flex;
  }
}

/* 2. Knowledge Base TOC — full-screen drawer sliding in from the left on mobile */
@media (max-width: 700px) {
  .kb-shell .kb-toc {
    position: fixed;
    top: var(--top-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: none;
    margin: 0;
    z-index: 1010;
    background: rgba(8, 12, 18, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    border-top: 1px solid var(--accent-dim);
    border-radius: 0;
    box-shadow: var(--shadow);
    padding: 16px 16px max(16px, var(--safe-bottom));
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
  }

  /* Push the page content out of the way (instead of just overlaying it) as
     the drawer slides in — .kb-toc and .kb-content are direct siblings. */
  .kb-content {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .kb-shell .kb-toc.is-open ~ .kb-content {
    transform: translateX(100%);
  }

  .kb-shell .kb-toc.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
}

/* 3. Collapsible Map Filters Bottom Sheet (#utilityPanel) */
@media (max-width: 920px) {
  .utility-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 75dvh !important;
    border-radius: 0 !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    /* Keep the sheet on its own compositing layer at all times so mobile
       browsers animate the slide-out on close instead of snapping it shut
       (same reason as .chart-sidebar; combined with position:fixed here). */
    will-change: transform !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: visible !important;
    padding-top: 28px !important;
    z-index: 999 !important;
  }

  .utility-panel.is-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Bottom sheet drag handle indicator */
  .utility-panel::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(112, 195, 226, 0.3) !important;
    display: block !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* 4. Collapsible Chart Filters Bottom Sheets (.chart-sidebar) */
.chart-filters-toggle-btn {
  display: none;
}

@media (max-width: 768px) {
  .chart-container-shell {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    content-visibility: visible !important;
  }

  .chart-filters-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: rgba(10, 14, 22, 0.9);
    cursor: pointer;
    margin-right: 8px;
    color: var(--text);
  }

  .chart-filters-toggle-btn.is-open {
    border-color: var(--accent);
    color: var(--accent);
  }

  .chart-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70dvh !important;
    background: rgba(8, 12, 18, 0.96) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    z-index: 1100 !important;
    padding: 28px 16px 16px !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Hints the browser to keep this on its own compositing layer at all
       times, not just while transitioning — without it, some mobile
       browsers drop the transform transition (snap instead of slide),
       particularly combined with backdrop-filter + position:fixed here. */
    will-change: transform !important;
    pointer-events: none !important;
    opacity: 0 !important;
    overflow-y: auto !important;
  }

  .chart-sidebar.is-open {
    transform: translateY(0) !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Bottom sheet drag handle indicator — tapping it closes the sheet (see
     the ".chart-sidebar.is-open" tap-position check in app_share.js). */
  .chart-sidebar::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(112, 195, 226, 0.3);
    cursor: pointer;
  }

  /* Chart TOC drawer — !important to win over the legacy persistent-sidebar
     (desktop) and older collapsible-block (mobile) rules for the same
     selectors elsewhere in this stylesheet. */
  .chart-toc-wrap {
    position: fixed !important;
    top: var(--top-bar-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100dvh - var(--top-bar-height)) !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 1010 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    transition: transform var(--chart-toc-transition), visibility 0s linear 260ms !important;
  }

  .chart-stage.is-toc-open .chart-toc-wrap {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    transition: transform var(--chart-toc-transition), visibility 0s linear 0s !important;
  }

  .chart-stage-col {
    transition: transform var(--chart-toc-transition) !important;
  }

  .chart-stage.is-toc-open .chart-stage-col {
    padding-left: 0 !important;
    transform: translateX(100%) !important;
  }
}

@media (max-width: 768px) {
  body.light-theme .chart-sidebar {
    background: #ffffff !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.12) !important;
  }

  body.light-theme .chart-sidebar::before {
    background: rgba(0, 0, 0, 0.18);
  }

  body.light-theme .chart-filters-toggle-btn {
    background: #ffffff;
    border-color: rgba(82, 99, 115, 0.2);
    color: var(--text);
  }

  body.light-theme .chart-filters-toggle-btn.is-open {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* 5. Scrollable Bar Charts on Mobile */
.chart-scroll-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ChartView.elm's single-series bar charts (subsidy, econ contribution,
   unemployment, crime-by-nationality) send a mobile-only minWidth computed
   from bar count (mobileBarChartMinWidth in app_charts_core.js), so on narrow
   screens the SVG renders at its natural per-bar width — wider than the
   viewport — instead of shrinking bars/labels to fit. This wrapper is what
   the host measures for that width (its own box stays clipped to the
   viewport; only its *content*, the wider SVG, needs to scroll), so it must
   not get a fixed width of its own — that was the 2026-07-15 attempt
   (flat 640px) and it left a dead scrollbar on charts with too few bars to
   fill 640px, e.g. migriWrap's default 2-country view. Charts that don't
   send minWidth (lines, grouped) never exceed this box, so overflow-x here
   is a no-op for them. */
@media (max-width: 768px) {
  .chart-scroll-wrapper {
    overflow-x: auto;
  }
}

/* Show a sliver of the page's own dark background below the last card
   (the "Lähteet ja huomiot" methodology panel) instead of it sitting flush
   against the bottom of the scrollport. Placed after the base .chart-stage-col
   rule (which sets padding-bottom: 0 unconditionally) so this override — same
   selector, same specificity — actually wins the cascade instead of losing to
   whichever one is later in the file. */
@media (max-width: 768px) {
  .chart-stage-col {
    padding-bottom: 20px;
  }
}

/* 6. Anchored Tooltips for Mobile Charts */
@media (max-width: 768px) {
  .chart-elm-tooltip {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(10, 14, 22, 0.9) !important;
    border-color: var(--accent-dim) !important;
    z-index: 30 !important;
    pointer-events: none !important;
  }
}

/* 7. Map Touch Gesture Guidance Overlay */
.map-gesture-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.map-gesture-overlay.is-visible {
  opacity: 1;
}

.map-gesture-overlay-text {
  background: rgba(8, 12, 18, 0.9);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 20px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 80%;
  box-shadow: var(--shadow);
}

/* 8. Mobile Landscape / Horizontal View Adjustments */
/* max-width covers common large-phone landscape widths too (e.g. iPhone 14/15
   Pro Max at 926px) — without this floor their .chart-main sits at flex:1 1 0
   with no minimum, and can be squeezed to 0 height by the row-layout sidebar
   next to it. */
@media (max-width: 960px) and (max-height: 480px) {
  .chart-main,
  .nat-bar-chart-main,
  .subsidy-bar-chart-main,
  .lang-speakers-chart-main {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}