.population-page { --male:#81bceb; --female:#d9a8c7; --chart-line:#e2ebff16; --dash-bg:#17212d83; }
[data-theme="water"] .population-page { --male:#286f9e; --female:#9d497b; --chart-line:#2048551a; --dash-bg:#effafac4; }
.population-shell { max-width:1400px; margin:auto; padding:28px 44px 70px; position:relative; }
.population-header { display:flex; align-items:center; gap:28px; margin-bottom:40px; }
.population-header .wordmark { margin-right:auto; }.population-header .back-link {font-size:13px;color:var(--muted)}
.dashboard-title {display:flex;align-items:baseline;gap:20px;margin-bottom:24px}.dashboard-title h1{font-size:clamp(24px,3vw,36px);line-height:1.2;letter-spacing:-.035em;margin:0}.dashboard-title>span{color:var(--muted);white-space:nowrap;font-size:14px}
.glass {border:1px solid var(--line);background:var(--dash-bg);backdrop-filter:blur(22px);border-radius:var(--radius-surface);padding:24px;box-shadow:inset 0 1px 0 #ffffff10;min-width:0}
.population-page label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:7px}.population-page select,.population-page input[type=number],.population-page button:not([data-theme-choice]) {min-height:44px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);padding:10px 12px;font:inherit;font-size:13px;max-width:100%}
.population-page select{width:100%}.population-page option{background:#18202d;color:#e7edf8}[data-theme=water] .population-page option{background:#effafa;color:#173d49}.population-page input:focus-visible,.population-page select:focus-visible,.population-page button:focus-visible{outline:2px solid var(--male);outline-offset:3px}
.filters {display:grid;grid-template-columns:2fr 1fr 1.1fr 1fr 1.2fr;gap:16px;align-items:end}.age-range{grid-column:1/3;font-size:12px;color:var(--muted)}.age-range>div{display:flex;gap:12px;align-items:center;margin-top:7px}.age-range input{width:80px}.age-range small{font-size:11px}.filter-actions{grid-column:3/-1;display:flex;justify-content:flex-end;gap:8px}.scope-line{font-size:13px;color:var(--muted);margin:18px 2px}
.population-page h2{font-size:18px;font-weight:520;margin:0}.population-page h3{font-size:14px;margin:0 0 12px;font-weight:500}.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.section-head>label{min-width:185px}.population-page .compare-toggle{flex-direction:row;align-items:center;font-size:13px;min-width:0}.compare-toggle input{width:18px;height:18px;accent-color:var(--male)}.compare-controls{display:flex;gap:12px;margin-bottom:20px}.compare-controls label{width:240px}.legend{display:flex;justify-content:center;gap:26px;font-size:12px;margin:8px 0 24px}.male-text{color:var(--male)!important}.female-text{color:var(--female)!important}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px}
.pyramid-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.pyramid-grid.single{grid-template-columns:minmax(0,760px);justify-content:center}figure{margin:0;min-width:0}figcaption{text-align:center;font-size:15px;margin:0 0 22px;font-weight:500}.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin:0 0 12px;font-variant-numeric:tabular-nums}.pyramid-rows{position:relative}.pyramid-row{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;min-height:19px;gap:0;cursor:crosshair}.pyramid-row.single-age{min-height:6px;height:6px}.bar-side{height:calc(100% - 3px);display:flex;align-items:center;position:relative;background:linear-gradient(90deg,transparent 49.5%,var(--chart-line) 50%,transparent 50.5%)}.bar-side.m{justify-content:flex-end}.bar-side.f{justify-content:flex-start}.age-label{font-size:10px;text-align:center;color:var(--muted);line-height:1;font-variant-numeric:tabular-nums}.population-bar{height:100%;min-height:2px;background:var(--male);border-radius:2px 0 0 2px;opacity:.82}.f .population-bar{background:var(--female);border-radius:0 2px 2px 0}.pyramid-row:hover .population-bar,.pyramid-row.selected .population-bar{opacity:1;box-shadow:0 0 14px #d2e4fa26}.pyramid-row.selected .age-label{color:var(--ink);font-weight:700}.empty-chart{padding:80px 20px;text-align:center;color:var(--muted);font-size:14px}
.data-note{color:var(--muted);font-size:12px;line-height:1.6;margin:16px 0 0}.age-inspector{border-top:1px solid var(--line);margin-top:24px;padding-top:22px;display:grid;grid-template-columns:220px 1fr;gap:16px 28px;align-items:center}.age-inspector label{flex-direction:row;align-items:center}.age-inspector input[type=number]{width:90px}.age-inspector input[type=range]{accent-color:var(--male);width:100%;min-height:44px}.age-inspector #age-detail{grid-column:1/-1;font-size:14px;line-height:1.9;color:var(--muted)}#age-detail strong{color:var(--ink);font-weight:500}#age-detail .age-comparison{display:block}

.population-shell{max-width:1080px}.filters{gap:12px;padding:18px}.pyramid-section{margin-top:20px}.pyramid-grid.single{grid-template-columns:minmax(0,760px)}.pyramid-row.single-age{min-height:4px;height:4px}.single-age .bar-side{height:3px}.legend{margin:0 0 12px}figcaption{color:var(--muted);font-size:13px;margin-bottom:16px}.age-inspector{grid-template-columns:150px 1fr;gap:12px 24px;padding-top:16px;margin-top:18px}.age-inspector #age-detail{font-size:13px}.data-note:empty{display:none}.sources{margin:18px 0 0;padding:16px 20px;background:transparent;box-shadow:none}.sources summary{cursor:pointer;color:var(--muted);font-size:12px;min-height:24px}.sources p{font-size:12px;line-height:1.7;color:var(--muted)}.sources a{text-decoration:underline;text-underline-offset:3px}.population-page #download{font-size:12px}.chart-axis{margin-bottom:10px}
@media(max-width:700px){.population-shell{padding:20px 16px 40px}.population-header{gap:10px;flex-wrap:wrap;margin-bottom:26px}.population-header .wordmark{font-size:23px}.population-header .back-link{font-size:11px}.dashboard-title{display:block;margin-bottom:20px}.dashboard-title h1{font-size:26px}.dashboard-title>span{display:block;margin-top:8px;font-size:12px}.glass{padding:16px;border-radius:var(--radius-surface)}.filters{grid-template-columns:1fr 1fr;gap:12px}.filters>label:first-child{grid-column:1/-1}.pyramid-row{grid-template-columns:1fr 36px 1fr}.pyramid-row.single-age{min-height:4px;height:4px}.age-label{font-size:9px}.age-inspector{grid-template-columns:1fr;gap:10px}.age-inspector>div:first-child{display:flex;align-items:center;justify-content:space-between}.age-inspector h3{margin:0}.age-inspector #age-detail{grid-column:auto;font-size:12px}.age-inspector input[type=range]{min-height:32px}.data-note{font-size:11px}.pyramid-grid.single{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.population-header{gap:8px}.population-header .wordmark{font-size:20px}.population-header .themes{gap:0}}

.filters{grid-template-columns:1.6fr 1fr 1fr 1fr}.year-control{max-width:760px;margin:0 auto 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}.population-page .year-control label{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;font-size:12px}.year-control output{color:var(--ink);font-size:30px;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}.year-control input{display:block;width:100%;height:44px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y;accent-color:var(--male)}.year-control input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--male) var(--year-progress,100%),var(--line) var(--year-progress,100%))}.year-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--ink);border:5px solid var(--male);box-shadow:0 0 16px #81bceb30}.year-control input::-moz-range-track{height:4px;border-radius:4px;background:var(--line)}.year-control input::-moz-range-progress{height:4px;background:var(--male)}.year-control input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:4px solid var(--male)}.year-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.year-control input:focus-visible{outline:2px solid var(--male);outline-offset:3px;border-radius:5px}
@media(max-width:700px){.filters{grid-template-columns:1fr 1fr}.filters>label:first-child{grid-column:auto}.year-control{margin-bottom:20px;padding-bottom:12px}.year-control output{font-size:28px}}

/* The age bands form a precise stepped silhouette; gaps do not dominate it. */
.pyramid-section{--age-gutter:36px}.year-control{margin-bottom:18px;padding-bottom:10px}.year-control output{font-size:27px}.year-control input{height:40px;min-height:44px}.pyramid-grid.single{grid-template-columns:minmax(0,760px)}figcaption{font-size:14px;margin:0 0 20px;font-variant-numeric:tabular-nums;font-weight:500}.legend{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--age-gutter);max-width:760px;margin:0 auto 8px;font-size:13px;letter-spacing:.01em}.legend>span{justify-self:center}.legend i{height:6px;width:6px}.age-heading{text-align:center;font-size:10px;color:var(--muted);margin-bottom:10px}.pyramid-rows{position:relative;isolation:isolate}.pyramid-guides{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--age-gutter);pointer-events:none;z-index:-1}.pyramid-guides>span{border-inline:1px solid var(--chart-line);background:linear-gradient(90deg,transparent calc(50% - .5px),var(--chart-line) calc(50% - .5px),var(--chart-line) calc(50% + .5px),transparent calc(50% + .5px))}.pyramid-row{grid-template-columns:minmax(0,1fr) var(--age-gutter) minmax(0,1fr);height:24px;min-height:24px;position:relative}.pyramid-row.single-age{height:5px;min-height:5px}.bar-side,.single-age .bar-side{height:calc(100% - .55px);background:none}.pyramid-row:not(.single-age) .bar-side{height:calc(100% - 3px)}.population-bar,.f .population-bar{border-radius:0;min-height:0;opacity:.92;box-shadow:none;background:linear-gradient(90deg,#72b7dd,var(--male));transition:width 120ms ease-out,opacity 100ms ease-out}.f .population-bar{background:linear-gradient(90deg,var(--female),#ce91b6)}.pyramid-row:hover .population-bar,.pyramid-row.selected .population-bar{box-shadow:none;opacity:1}.pyramid-row.selected{background:transparent}.age-label{position:relative;z-index:1;font-size:11px;font-weight:400;line-height:1;color:var(--muted)}.pyramid-row.selected .age-label{border-radius:5px;background:var(--surface);padding:3px 0;color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line)}.chart-axis{display:grid;grid-template-columns:1fr 1fr;gap:var(--age-gutter);margin:14px 0 0;font-size:10px;color:var(--muted)}.half-axis{display:flex;justify-content:space-between;position:relative}.half-axis>span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%)}.half-axis>span:last-child{margin-left:auto}.age-inspector{margin-top:24px}.pyramid-section .data-note{max-width:760px;margin-inline:auto}
[data-theme=water] .population-bar{background:linear-gradient(90deg,#387f9f,var(--male))}[data-theme=water] .f .population-bar{background:linear-gradient(90deg,var(--female),#a55e88)}
@media(max-width:700px){.pyramid-section{--age-gutter:30px}.legend{font-size:12px}.age-label{font-size:10px}.chart-axis{font-size:9px}.year-control{margin-bottom:16px}figcaption{font-size:13px;margin-bottom:18px}.pyramid-row.single-age{height:5px;min-height:5px}}
@media(prefers-reduced-motion:reduce){.population-bar{transition:none}}
/* Source controls remain outside the filter panel. Each source exposes only its own dimensions. */
.population-page [hidden]{display:none!important}.source-switch{display:inline-flex;gap:4px;border:1px solid var(--line);border-radius:var(--radius-segment);padding:4px;margin:0 0 14px;background:var(--dash-bg);backdrop-filter:blur(18px)}
.population-page .source-switch button{background:transparent;border-color:transparent;padding:10px 23px;border-radius:var(--radius-control);color:var(--muted);cursor:pointer;transition:background 140ms,color 140ms}.population-page .source-switch button[aria-pressed=true]{color:var(--ink);background:var(--surface);border-color:var(--line);box-shadow:0 2px 8px #00000010}.filters{grid-template-columns:repeat(var(--filter-count,4),minmax(0,1fr))}.mode-note{margin:8px 2px 0;max-width:800px}.scope-line{margin-bottom:0}.estimate-badge{display:inline-block;font-size:10px;letter-spacing:.02em;color:var(--muted);padding:4px 8px;margin-left:7px;border-radius:7px;border:1px solid var(--line);font-weight:400}.estimate-badge[data-status=projection]{color:var(--male);background:#81bceb0a}.year-ends{min-height:14px}.population-page #age-slider{min-height:44px}
@media(max-width:700px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.source-switch{display:flex;width:max-content;max-width:100%}.population-page .source-switch button{padding-inline:24px}.estimate-badge{margin-left:5px}.mode-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.population-page .source-switch button{transition:none}}
@media(max-width:700px){.filters[data-odd=true]>label.last-visible{grid-column:1/-1}}
/* Contextual information stays compact, with touch and keyboard equivalents. */
.dashboard-title{flex-wrap:wrap;gap:12px}.dashboard-title .chart-help{margin-left:auto;flex:none}.population-page .info-button{width:44px;min-width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:50%;font-size:15px;color:var(--muted);background:transparent;cursor:pointer;font-style:normal}.info-button:hover,.population-page .info-button[aria-expanded=true]{color:var(--ink);background:var(--surface)}.info-button:focus-visible,.source-switch button:focus-visible,.sources summary:focus-visible{outline:2px solid var(--male);outline-offset:2px}.source-option{display:flex;align-items:center;gap:0}.population-page .source-switch .info-button{padding:0;width:44px;border-radius:var(--radius-control);font-size:14px}.source-option:has([data-source][aria-pressed=true]){background:var(--surface);border-radius:var(--radius-control)}.population-page .source-option [data-source][aria-pressed=true]{background:transparent;box-shadow:none;border-color:transparent}.population-page .source-switch [data-source]{padding-inline:17px}.source-switch{gap:5px}.filter-field{display:flex;flex-direction:column;gap:8px;min-width:0}.filter-heading{display:flex;align-items:center;justify-content:space-between;min-height:16px;position:relative}.filter-heading label{font-size:11px;color:var(--muted)}.filter-heading .info-button{position:absolute;right:-9px;top:-16px;transform:scale(.8)}.filter-field select{width:100%;min-width:0}.help-popover{position:fixed;z-index:1000;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:12px 18px 18px;border:1px solid var(--line);border-radius:var(--radius-surface);background:#142031f5;box-shadow:0 14px 60px #0006;backdrop-filter:blur(24px);color:var(--ink)}[data-theme=water] .help-popover{background:#f1fafbf5;box-shadow:0 14px 60px #17384b26}.help-heading{display:flex;align-items:center;gap:10px}.help-heading h2{margin:0;font-size:15px;font-weight:550;line-height:1.5;flex:1;text-wrap:balance}.help-popover p,.help-popover dl{font-size:13px;line-height:1.65;margin:10px 0 0;color:var(--muted);text-wrap:pretty}.help-popover strong,.help-popover dt{color:var(--ink);font-weight:550}.help-popover dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}.help-popover dd{margin:0}.help-popover a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}.chart-tooltip{position:fixed;z-index:900;pointer-events:none;padding:12px 16px;background:#142031f5;box-shadow:0 6px 30px #0004;border:1px solid var(--line);border-radius:var(--radius-control);font-size:12px;line-height:1.65;font-variant-numeric:tabular-nums;max-width:calc(100vw - 24px)}.chart-tooltip strong,.chart-tooltip span{display:block}.chart-tooltip strong{font-weight:550;color:var(--ink)}[data-theme=water] .chart-tooltip{background:#f1fafbf5}.sources summary{min-height:44px;align-content:center}.population-page button:disabled{opacity:.5;cursor:not-allowed}.scope-line{line-height:1.6}.filters select{font-size:13px;min-height:44px}.population-page .filter-heading .info-button{transform:none;top:-16px}.chart-help{border-color:var(--line)!important}
@media(max-width:700px){.dashboard-title{display:flex;align-items:center;gap:8px}.dashboard-title h1{width:100%}.dashboard-title>span{margin-top:0}.dashboard-title .chart-help{height:44px}.population-page .source-switch [data-source]{padding-inline:16px}.filters[data-odd=true]>.last-visible{grid-column:1/-1}.help-popover{font-size:13px}.filter-field{gap:8px}}
@media(prefers-reduced-motion:reduce){.help-popover,.chart-tooltip{scroll-behavior:auto}}
.population-page button.info-button:not([data-theme-choice]){border:1px solid transparent;border-radius:50%;background:transparent;padding:0;color:var(--muted)}.population-page button.info-button:not([data-theme-choice]):hover,.population-page button.info-button[aria-expanded=true]:not([data-theme-choice]){background:var(--surface);color:var(--ink)}.population-page .help-heading h2{font-size:15px}.population-page .chart-help{border-color:var(--line)!important}

[data-theme="water"] .population-page .source-switch button[aria-pressed=true]{background:var(--selected);color:var(--selected-ink);border-color:transparent}

.population-page button.info-button{border-radius:var(--radius-round)}

/* Selection guide is independent of data-bar length and row layout. */
.pyramid-section{--age-band:#c2dcff12;--age-edge:#c2dcff55;--age-bar-edge:#e7f3ff}
[data-theme="water"] .pyramid-section{--age-band:#245e6b12;--age-edge:#245e6b55;--age-bar-edge:#173c4a}
.pyramid-rows:has(.selected) .pyramid-row:not(.selected) .population-bar{opacity:.62}
.pyramid-row{grid-template-rows:minmax(0,1fr)}
.pyramid-row.selected{z-index:2}
.pyramid-row.selected::before{content:"";position:absolute;left:0;right:0;top:50%;height:100%;min-height:13px;transform:translateY(-50%);background:var(--age-band);border-block:1px solid var(--age-edge);pointer-events:none;z-index:-1}
.pyramid-row.selected .population-bar{opacity:1;box-shadow:inset 0 0 0 1px var(--age-bar-edge)}
.pyramid-row.selected .age-label{display:flex;align-items:center;justify-content:center;min-height:22px;padding:3px 1px;white-space:nowrap;font-size:12px;font-weight:750;line-height:1;border-radius:6px;background:var(--selected);color:var(--selected-ink);box-shadow:0 0 0 2px var(--dash-bg)}

.pyramid-row:not(.single-age).selected .age-label{font-size:11px;padding-inline:0;letter-spacing:-.025em}

/* Mobile controls stay readable while the chart begins closer to the filters. */
@media(max-width:700px){
 .population-shell{padding-top:16px}
 .population-header{margin-bottom:14px}
 .dashboard-title{margin-bottom:14px;gap:4px 8px}
 .source-switch{margin-bottom:12px}
 .population-page .filters select,.population-page input[type=number]{font-size:16px}
 .filters{gap:12px;padding:14px}
 #region-filter,#place-filter,#scenario-filter{grid-column:1/-1}
 .filters[data-odd=true]>#unit-filter.last-visible{grid-column:auto}
 .scope-line{margin-top:12px}
 .mode-note{margin-top:6px}
 .pyramid-section{margin-top:14px}
}

/* Multiple regions share one compact control and one combined pyramid. */
.region-label{font-size:12px;color:var(--muted)}
.filters:has(.region-picker[open]){position:relative;z-index:10}
.region-picker{position:relative;min-width:0}
.region-picker summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 12px;list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font-size:13px;line-height:1.4}
.region-picker summary::-webkit-details-marker{display:none}
:is(#region-value,#b-region-value){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.region-picker summary svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.region-picker[open] summary svg{transform:rotate(180deg)}
.region-picker summary:focus-visible{outline:2px solid var(--male);outline-offset:3px}
.region-panel{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,280px);max-width:calc(100vw - 64px);padding:10px;background:#142031f5;border:1px solid var(--line);border-radius:var(--radius-surface);box-shadow:0 14px 40px #0005;backdrop-filter:blur(24px)}
[data-theme=water] .region-panel{background:#f1fafbf5;box-shadow:0 14px 40px #17384b26}
.region-hint{font-size:12px;line-height:1.55;color:var(--muted);margin:2px 8px 8px;text-wrap:pretty}
:is(#region-options,#b-region-options){max-height:min(308px,42dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.population-page :is(#region-options,#b-region-options) label{min-height:44px;display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-control);color:var(--ink);font-size:13px;line-height:1.4;cursor:pointer}
:is(#region-options,#b-region-options) label:has(:checked){background:var(--surface)}
:is(#region-options,#b-region-options) label:hover{background:var(--surface)}
:is(#region-options,#b-region-options) input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--male)}
:is(#region-options,#b-region-options) label:first-child{border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px}
.population-page :is(#region-done,#b-region-done){display:block;width:100%;margin-top:8px;cursor:pointer}
@media(max-width:700px){.region-picker summary{font-size:16px}.region-panel{width:100%;max-width:none}}

/* Comparison keeps dimensions local and age inspection shared. */
.view-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.view-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-segment);background:var(--dash-bg)}
.population-page .view-switch button{background:transparent;border-color:transparent;color:var(--muted);cursor:pointer}
.population-page .view-switch button[aria-pressed=true]{background:var(--surface);border-color:var(--line);color:var(--ink)}
#shared-display{margin-left:auto;display:flex;gap:12px;align-items:center}
#shared-display label{flex-direction:row;align-items:center;white-space:nowrap}
#shared-display select{min-width:92px}
.comparison-panel{min-width:0}
.comparison-panel:has(.region-picker[open]){position:relative;z-index:20}
.population-page .comparison-panel-title{font-size:14px;color:var(--muted);margin:0 0 12px;font-weight:500}
.is-comparing .population-shell{max-width:1400px}
.is-comparing #comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.is-comparing .filters{grid-template-columns:repeat(var(--filter-count),minmax(0,1fr))}
.is-comparing .pyramid-section{padding:20px}
.is-comparing .comparison-inspector{margin-top:24px}
.comparison-inspector .data-note{margin:0;color:var(--muted)}
.comparison-inspector .age-inspector{border-top:0;padding-top:0;margin-top:0}
.is-comparing #age-detail{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:20px}
.comparison-label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
#b-download{margin-left:8px}
@media(max-width:999px){
 .is-comparing #comparison-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .is-comparing .population-shell{max-width:1080px}
 .is-comparing .pyramid-section{padding:16px}
}
@media(max-width:700px){
 .view-controls{gap:8px;margin-bottom:14px}
 #shared-display{width:100%;margin-left:0}
 .is-comparing .filters{grid-template-columns:minmax(0,1fr)}
 .is-comparing #age-detail{grid-template-columns:1fr;gap:14px}
 .is-comparing .pyramid-row.single-age{height:4px;min-height:4px}
 .comparison-inspector{padding:16px}
 #b-region-filter,#b-place-filter,#b-scenario-filter{grid-column:1/-1}
}
/* A single pyramid keeps its existing compact filter grid. */
@media(max-width:700px){.filters[data-odd=true]>#group-filter.last-visible{grid-column:1/-1}}
.age-window{position:relative;margin-left:auto}
.age-window summary{list-style:none;min-height:44px;display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);padding:10px 12px;font-size:13px;color:var(--ink)}
.age-window summary::-webkit-details-marker{display:none}.age-window summary::after{content:'⌄';color:var(--muted)}
.age-window-fields{display:flex;gap:10px;align-items:end;padding:12px 0;flex-wrap:wrap}
.age-window-fields input{width:80px}
.age-window summary:focus-visible{outline:2px solid var(--male);outline-offset:3px}
.pyramid-row.single-age,.is-comparing .pyramid-row.single-age{height:clamp(5px,calc(505px / var(--age-row-count)),32px);min-height:5px}
.pyramid-row:not(.single-age){height:clamp(24px,calc(505px / var(--age-row-count)),36px)}
@media(max-width:700px){.age-window{width:100%;margin-left:0}.age-window summary{width:100%;justify-content:space-between}.age-window-fields{justify-content:space-between}.pyramid-row.single-age,.is-comparing .pyramid-row.single-age{height:clamp(4px,calc(404px / var(--age-row-count)),32px);min-height:4px}}
/* The two charts inhabit one shared glass surface. */
.is-comparing #comparison-grid{padding:24px;gap:24px}
.is-comparing .comparison-panel .glass,.is-comparing .comparison-inspector{background:transparent;box-shadow:none;backdrop-filter:none;border:0;border-radius:0;padding:0}
.is-comparing .comparison-panel .pyramid-section{margin-top:22px}
.is-comparing #panel-b{padding-left:24px;border-left:1px solid var(--line)}
.is-comparing #comparison-inspector{grid-column:1/-1;margin-top:0;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:999px){.is-comparing #panel-b{padding-left:0;padding-top:24px;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:700px){.is-comparing #comparison-grid{padding:16px;gap:24px}.is-comparing #panel-b{padding-top:24px}}
/* Divider sits in the gutter, so equal values have equal pixel lengths. */
@media(min-width:1000px){.is-comparing #panel-b{position:relative;padding-left:0;border-left:0}.is-comparing #panel-b::before{content:'';position:absolute;top:0;bottom:0;left:-12px;width:1px;background:var(--line);pointer-events:none}}

/* One age-range rail with independent, keyboard-accessible native handles. */
.age-window-fields{display:block;padding:14px 2px 0;min-width:280px}
.age-window-values{display:flex;justify-content:space-between;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.age-window-track{position:relative;height:48px;margin-inline:12px;isolation:isolate}
.age-window-track::before{content:'';position:absolute;left:0;right:0;top:22px;height:4px;border-radius:4px;background:linear-gradient(to right,var(--line) var(--range-start,0%),var(--male) var(--range-start,0%),var(--male) var(--range-end,100%),var(--line) var(--range-end,100%))}
.age-window-track input[type=range]{position:absolute;inset:0;width:100%;height:48px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;pointer-events:none;touch-action:pan-y}
.age-window-track input::-webkit-slider-runnable-track{height:4px;background:transparent}
.age-window-track input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--ink);border:5px solid var(--male);pointer-events:auto;cursor:ew-resize}
.age-window-track input::-moz-range-track{height:4px;background:transparent}
.age-window-track input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:5px solid var(--male);pointer-events:auto;cursor:ew-resize}
.age-window-track input:focus-visible{outline:none}
.age-window-track input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:3px}
.age-window-track input:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:3px}
.same-age #age-min::-webkit-slider-thumb{transform:translateX(-9px)}.same-age #age-max::-webkit-slider-thumb{transform:translateX(9px)}
.same-age #age-min::-moz-range-thumb{transform:translateX(-9px)}.same-age #age-max::-moz-range-thumb{transform:translateX(9px)}
.population-page #age-reset{display:block;margin-left:auto;font-size:12px;cursor:pointer}
@media(max-width:700px){.age-window-fields{min-width:0;width:100%}}
/* One settings surface: common choices, age controls, then each chart's year. */
.dashboard-controls{margin-bottom:20px;position:relative;z-index:5;padding:20px 24px}
.dashboard-controls .view-controls{margin:0;gap:12px;align-items:center}
.dashboard-controls .source-switch{margin:0;flex:none}
.dashboard-controls #shared-display{margin-left:auto;width:auto}
.age-controls{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.age-controls .age-window{margin:0;min-width:0;width:auto}
.age-window-heading{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.age-controls .age-window-fields{min-width:0;padding:0}
.age-controls #age-reset{min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--muted);margin-top:0}
.age-focus{min-width:0}.age-focus>div{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.population-page .age-focus h3{font-size:12px;font-weight:400;color:var(--muted);margin:0}
.age-focus label{flex-direction:row;align-items:center}.age-focus input[type=number]{width:74px}
.age-focus input[type=range]{width:100%;height:48px;min-height:48px;margin:0;accent-color:var(--male)}
.scoped-settings{display:grid;grid-template-columns:1fr;gap:24px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.is-comparing .scoped-settings{grid-template-columns:1fr 1fr}
.panel-settings{min-width:0;position:relative}.panel-settings:has(.region-picker[open]){z-index:30}
.population-page .settings-title{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 12px}
.panel-settings .filters{padding:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.panel-settings .year-control{max-width:none;margin:16px 0 0;padding:0;border:0}
.dashboard-controls:has(.region-picker[open]){z-index:30}
.is-comparing .comparison-panel .pyramid-section{margin-top:0}
.comparison-inspector .age-inspector{display:block;margin:0;padding:0}
@media(max-width:999px){.is-comparing .scoped-settings{grid-template-columns:1fr}.panel-settings+.panel-settings{border-top:1px solid var(--line);padding-top:18px}}
@media(max-width:700px){
 .dashboard-controls{padding:16px;margin-bottom:14px}
 .dashboard-controls .view-controls{gap:10px}
 .dashboard-controls #shared-display{margin-left:0;flex:1}
 .dashboard-controls .source-switch{width:max-content}
 .age-controls{grid-template-columns:1fr;gap:16px;margin-top:16px;padding-top:16px}
 .scoped-settings{margin-top:14px;padding-top:16px;gap:18px}
 .panel-settings .filters{grid-template-columns:1fr}
 .age-focus input[type=number]{font-size:16px}
}

.age-window-track{touch-action:pan-y;cursor:ew-resize}
.age-window-track input[type=range]{left:-12px;right:-12px;width:calc(100% + 24px)}
.population-page .age-window-track input[type=range]:focus-visible{outline:none;box-shadow:none}

/* Compact controls: common choices and range above independent settings. */
.dashboard-controls{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:12px 24px;padding:16px 20px}
.dashboard-controls .view-controls{gap:8px;align-content:center}
.dashboard-controls #shared-display{margin-left:0}
.age-controls{display:block;margin:0;padding:0;border:0}
.age-window-heading{margin:0;font-size:11px}
.age-window-fields{position:relative}
.age-window-values{font-size:11px}
.age-controls #age-reset{position:absolute;right:0;top:-30px;min-height:28px;font-size:11px}
.age-window-track{height:44px}
.scoped-settings{grid-column:1/-1;margin:0;padding-top:12px;gap:24px}
.panel-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;align-items:start}
.population-page .settings-title{grid-column:1/-1;margin:0;font-size:11px}
.panel-settings .year-control{margin:0}
.panel-settings .year-control output{font-size:23px}
.panel-settings .year-control label{min-height:28px}
.panel-settings .year-ends{font-size:10px}
.panel-settings .filters{gap:8px}
.panel-settings .filter-heading{min-height:28px}
.age-inspector{display:block}
#clear-age{min-height:40px;margin:0 0 8px;padding:6px 12px;font-size:12px}
.pyramid-row:focus-visible{outline:2px solid var(--male);outline-offset:2px;z-index:3}
@media(max-width:999px){
 .dashboard-controls{grid-template-columns:1fr;gap:12px;padding:16px}
 .dashboard-controls .view-controls{justify-content:space-between}
 .age-controls #age-reset{min-height:40px;top:-34px}
 .is-comparing .scoped-settings{grid-template-columns:1fr;gap:12px}
 .panel-settings+.panel-settings{padding-top:12px}
 .panel-settings .filters{grid-template-columns:1fr}
 .age-window-track,.age-window-track input[type=range]{height:48px}
}
@media(max-width:380px){.panel-settings{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4px 10px}.dashboard-controls .view-controls{gap:6px}.dashboard-controls #shared-display{flex:none}}