.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); }

/* Cross-view links (map ↔ charts ↔ knowledge base) — same control style as
   the share button, with the accent colour marking them as navigation. */
.chart-xlink {
  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 rgba(112, 195, 226, 0.4);
  background: var(--control-bg);
  color: var(--accent);
  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;
  text-decoration: none;
}
.chart-xlink svg { width: 14px; height: 14px; flex-shrink: 0; }
.chart-xlink:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(112, 195, 226, 0.08);
  box-shadow: var(--control-shadow-ring);
}

/* Map sidebar cross-link row (filled by updateMapCrossLinks) */
.map-xlink-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.map-xlink-row:empty { display: none; }
.map-xlink-row .chart-xlink { flex: 1 1 auto; }

.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; }
  /* Cross-view links collapse to icons on mobile like the share button —
     but keep their labels inside the map sidebar row, where there is space. */
  .chart-title-row .chart-xlink span { display: none; }
  .chart-title-row .chart-xlink { 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;
}

/* Elm-rendered KB dropdowns reuse the site-wide custom-dropdown component;
   this wrapper just gives it the old select's footprint inside the flex rows
   (.kb-metric-select-row, .kb-chart-head). The .kb-pew-select rules above
   remain for the static prerender fallback shown before Elm mounts. */
.kb-dropdown {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 100%;
}
.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 {
  /* Fixed equal width so the row reads as a unit regardless of label length.
     200px with slim side padding leaves the same ~194px of text room that
     the English "Explore the background" needs on one line. */
  width: 200px;
  padding: 12px 4px;
  text-align: center;
  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;
}

/* Finnish labels are shorter ("Tutustu taustoihin" ~146px), so the row can
   tighten further when the page is in Finnish. */
:lang(fi) .home-cta-btn {
  width: 180px;
}

.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;
  }
}