*{box-sizing:border-box}html{font-family:Arial,Helvetica,sans-serif;color:#193f3d;background:#edf6f4}body{margin:0;font-size:16px}button,select{font:inherit}button{cursor:pointer}a{color:#08796b}button:focus-visible,select:focus-visible,a:focus-visible,svg [tabindex]:focus-visible{outline:3px solid #edb638;outline-offset:3px}header{display:flex;align-items:center;gap:28px;padding:24px 30px;color:white;background:linear-gradient(110deg,#073b3b,#0b6868 78%,#108080);border-bottom:5px solid #2ab7a9}.brand{border-right:1px solid #7292a9;padding-right:30px}.brand b{display:block;font-size:clamp(32px,3.7vw,58px);line-height:1;font-weight:900;letter-spacing:-2px;white-space:nowrap}.brand small{display:block;letter-spacing:1px;font-size:12px;margin-top:10px}.province p{font-size:14px;margin:0 0 6px;font-weight:bold;letter-spacing:.5px}.province h1{font-size:clamp(23px,2.8vw,40px);color:#ffda63;margin:0 0 7px;letter-spacing:1px}.province small{color:#bed9e9;font-size:12px;letter-spacing:1px}.year{margin-left:auto;font-size:30px;color:#ffdb67;font-weight:bold;border:1px solid #50758a;padding:12px 16px;border-radius:7px}.year small{font-size:12px;display:block;color:#d8e8ef;margin-top:6px}.workspace{display:grid;grid-template-columns:192px minmax(0,1fr)}aside{background:linear-gradient(#085858,#063f40);color:#d5e5f2;min-height:calc(100vh - 135px);padding:25px 12px;display:flex;flex-direction:column}.nav-label{font-size:12px;letter-spacing:1.3px;color:#a6bfd2;margin:3px 12px 22px}nav button{border:0;background:transparent;color:#dbe9f4;text-align:left;width:100%;padding:15px 12px;margin-bottom:7px;border-radius:5px;font-size:14px;line-height:1.5}nav button:hover{background:#0e706b}nav button.active{background:#13877f;color:white;box-shadow:inset 3px 0 #6de0ce}.aside-bottom{margin-top:auto;border-top:1px solid #397b78;padding:25px 12px 0;font-size:12px;line-height:1.8}.aside-bottom small{display:block;color:#a6bfd2;font-size:12px;margin-top:6px}main{padding:24px;min-width:0}.heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.eyebrow{margin:0 0 7px;font-size:12px;letter-spacing:1.5px;color:#60788c;font-weight:bold}h2{margin:0;font-size:26px;letter-spacing:-.5px}.pill{background:#e8f6ef;color:#176244;font-size:12px;border:1px solid #baddc8;border-radius:30px;padding:8px 12px;white-space:nowrap}.filters{display:flex;align-items:end;gap:16px;background:white;border:1px solid #d9e4eb;border-radius:7px;padding:15px}label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:bold;min-width:0}.filters label{flex:1}select{background:#f6fbf9;border:1px solid #cbd9e4;color:#174b46;width:100%;border-radius:4px;padding:10px 28px 10px 10px;font-size:14px;text-overflow:ellipsis}button{border:1px solid #cbd9e4;background:white;border-radius:4px;color:#235a53;padding:10px;font-size:14px}button:hover{background:#dff3ee}button:disabled{cursor:not-allowed;opacity:.5}.scope{font-size:14px;color:#587088;margin:15px 0 11px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.kpis article{padding:18px;display:flex;align-items:center;color:white;border-radius:7px;min-height:114px;box-shadow:0 3px 7px #18476812}.blue{background:linear-gradient(120deg,#075d59,#108b80)}.teal{background:linear-gradient(120deg,#117979,#149d93)}.green{background:linear-gradient(120deg,#147750,#149960)}.cyan{background:linear-gradient(120deg,#087775,#15a99c)}.kpis h3{font-size:12px;letter-spacing:.5px;margin:0 0 8px}.kpis b{display:block;font-size:32px;line-height:1.1}.kpis small{font-size:12px;display:block;margin-top:8px;color:#e0f6f8}.panel{background:white;border:1px solid #d8e4ed;border-radius:7px;overflow:hidden;min-width:0;box-shadow:0 2px 4px #12354b03}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(95deg,#075450,#0d7971);color:white;padding:13px 14px;min-height:48px}.panel-title h3{font-size:15px;margin:0;line-height:1.4}.panel-title>span{font-size:12px;color:#cfdfeb}.dashboard-grid{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:16px}.table-scroll{max-height:470px;min-height:220px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#e5f2ee;color:#315f57;font-size:12px;position:sticky;top:0;z-index:1;padding:12px 10px;line-height:1.4}td{padding:10px;border-bottom:1px solid #e7edf2;line-height:1.4}th:not(:first-child),td:not(:first-child){text-align:right}tbody tr:nth-child(even){background:#f5faf8}tbody tr.selected{background:#e2f2fc}td button{border:0;background:transparent;color:#17685d;text-align:left;padding:0;font-size:14px;line-height:1.4}td button:hover{text-decoration:underline}tfoot{font-weight:bold;background:#d5ece5}.huc{font-size:12px;color:#6f638e;background:#f0eafa;padding:2px 4px;margin-left:4px;border-radius:2px}.table-subtitle{padding:0 14px;font-size:14px;line-height:1.5;color:#526f85}.panel-foot{font-size:12px;color:#62798b;padding:12px 14px;line-height:1.6;border-top:1px solid #e9eff4}.panel-foot p{margin:8px 0}.map-wrap{height:440px;background:linear-gradient(150deg,#e7f5f0,#c9e7df);position:relative}.map-wrap svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab}svg path{cursor:pointer;transition:fill .15s}svg path:hover,svg path:focus{filter:brightness(1.13);stroke:#06233c;stroke-width:2;vector-effect:non-scaling-stroke}svg text{pointer-events:none;font-size:12px;font-weight:700;fill:#102f48;paint-order:stroke;stroke:#ffffffda;stroke-width:3px;stroke-linejoin:round}svg .north{font-size:18px;fill:#133e5c}.map-toolbar{padding:8px 10px;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #deebf2}.map-toolbar button{font-size:12px;padding:6px 8px}.map-toolbar>div{display:flex;gap:5px}#map-tooltip{position:absolute;bottom:12px;left:12px;right:12px;pointer-events:none;background:#fffffff2;border:1px solid #bfd3e1;border-radius:5px;padding:10px 12px;font-size:13px;box-shadow:0 3px 9px #20374b11;display:none;line-height:1.5}.map-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;font-size:12px}.swatch{display:inline-block;width:13px;height:13px;border-radius:2px;vertical-align:middle;margin-right:4px}.chart{padding:18px;min-height:340px;overflow:auto}.bar-row{display:grid;grid-template-columns:minmax(95px,1fr) 1fr 62px;align-items:center;gap:8px;margin-bottom:15px;font-size:12px}.bar-row button{font-size:12px;text-align:left;border:0;background:transparent;padding:0;line-height:1.4}.bar-row>div{background:#e3f1ec;height:14px;border-radius:2px}.bar-row i{display:block;background:linear-gradient(90deg,#0d8077,#46bbae);height:100%;border-radius:2px}.bar-row strong{text-align:right;font-size:12px}.empty{min-height:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;gap:10px;color:#627c90;font-size:14px;line-height:1.6}.empty b{color:#2d526d}.muted{color:#637c90;font-size:13px;line-height:1.6}.metric-controls{padding:17px;margin-bottom:18px}.controls-grid{display:grid;grid-template-columns:1.1fr 1.4fr .65fr;gap:14px;align-items:end}.controls-grid:has(#download:not([hidden])){grid-template-columns:1fr 1.2fr .6fr auto}#download{background:#087d73;color:white;border-color:#087d73}.metric-controls p{margin-bottom:0;font-size:14px;line-height:1.6}#overview-chart-controls{padding:12px 16px}.sdg-panel{margin-top:18px}.sdg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px}.sdg-card{text-align:left;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #dfe7ed;min-height:90px;background:#fafcfd}.sdg-card.active{background:#e0f3ed;border-color:#15978a;box-shadow:inset 3px 0 #15978a}.sdg-number{font-size:20px;font-weight:bold;color:white;min-width:38px;height:38px;display:grid;place-items:center;border-radius:3px}.sdg-card span:not(.sdg-number){font-size:12px;line-height:1.4}.sdg-card b{display:block;font-size:21px;margin-bottom:4px}.sdg-controls{display:grid;grid-template-columns:1fr 200px;gap:16px;padding:0 18px}.sdg-panel>p{margin:14px 18px;font-size:14px;line-height:1.6}.sdg-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;padding:0 18px 18px}.sdg-grid>div{min-width:0}.sdg-grid h4{font-size:14px;margin:14px 0}.sdg-grid .table-scroll{max-height:370px}.sdg-grid .chart{padding:8px 0}.methodology{margin-top:20px;padding:16px;border:1px solid #d9e4ec;background:#f9fcfe;border-radius:6px;font-size:14px;line-height:1.7}summary{cursor:pointer;font-weight:bold}.methodology p{margin:12px 0 0}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0 2px;font-size:12px;color:#59738a}footer small{display:block;font-size:12px;margin-top:6px}footer i{font-size:19px;font-family:Georgia,serif;color:#146359}[hidden]{display:none!important}.downloads-view .dashboard-grid{grid-template-columns:1fr}.downloads-view .data-panel .table-scroll{max-height:600px}.downloads-view .ranking-panel{display:none}.status-note{padding:12px;background:#fff5db;color:#705525;font-size:13px;line-height:1.6}.metric-unavailable{color:#806e54}@media(max-width:1250px){.workspace{grid-template-columns:170px minmax(0,1fr)}main{padding:18px}.dashboard-grid{grid-template-columns:1fr 1.2fr}.ranking-panel{grid-column:1/-1}.ranking-panel .chart{min-height:260px;columns:2;column-gap:35px}.ranking-panel .bar-row{break-inside:avoid}.year{display:none}.sdg-cards{grid-template-columns:repeat(3,1fr)}.controls-grid:has(#download:not([hidden])){grid-template-columns:1fr 1fr}.kpis b{font-size:28px}}@media(max-width:760px){header{padding:20px;display:block}.brand{border:0;padding:0}.brand b{font-size:40px}.brand small{font-size:12px}.province{margin-top:18px}.province p{font-size:12px}.province h1{font-size:26px}.province small{display:none}.workspace{display:block}aside{padding:10px;min-height:0}nav{display:flex;overflow:auto;gap:5px}nav button{width:auto;white-space:nowrap;margin:0;padding:9px;font-size:13px}nav button br{display:none}.nav-label,.aside-bottom{display:none}main{padding:14px}.heading{align-items:flex-start;flex-direction:column}h2{font-size:23px}.filters{display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:12px}.kpis{grid-template-columns:1fr 1fr}.kpis article{padding:14px}.kpis b{font-size:26px}.kpis h3,.kpis small{font-size:12px;line-height:1.4}.dashboard-grid,.sdg-grid{grid-template-columns:1fr}.ranking-panel{grid-column:auto}.ranking-panel .chart{columns:1}.map-wrap{height:410px}.table-scroll{max-height:420px}.sdg-cards{grid-template-columns:1fr 1fr;padding:12px}.sdg-card{padding:8px;gap:8px}.sdg-number{min-width:28px;width:28px;height:32px;font-size:16px}.sdg-card b{font-size:19px}.sdg-controls,.controls-grid,.controls-grid:has(#download:not([hidden])){grid-template-columns:1fr}.controls-grid select{max-width:100%}footer{flex-direction:column;align-items:flex-start}.panel-title h3{font-size:14px}.bar-row{grid-template-columns:1fr 1fr 65px}}
.sdg-card small{display:block;margin-top:5px;font-size:12px;color:#56758d}.sdg-card{min-height:110px}svg g[role="button"]:hover path{filter:brightness(1.12)}
#download{display:inline-block;padding:12px;text-align:center;border-radius:4px;font-size:14px;text-decoration:none;white-space:nowrap}#download[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* Keep navigation stationary while the document scrolls. */
aside{position:sticky;top:0;align-self:start;height:100dvh;min-height:0;overflow:visible}
.sidebar-toolbar{position:sticky;top:0;z-index:5;padding:8px 0;background:#edf6f4;margin:-8px 0 14px}
#sidebar-toggle{background:#0b6868;color:white;border-color:#0b6868}
.workspace.sidebar-hidden{grid-template-columns:minmax(0,1fr)}
@media(max-height:700px) and (min-width:761px){aside{padding:12px}nav button{padding:8px 10px;margin-bottom:4px}.nav-label{margin-bottom:12px}.aside-bottom{padding-top:12px}}
@media(max-width:760px){aside{height:auto;z-index:6}nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}nav button{white-space:normal;width:100%;font-size:13px}aside:not([hidden])~main .sidebar-toolbar{top:var(--sidebar-height,210px)}.workspace.sidebar-hidden .sidebar-toolbar{top:0}}
.header-logos{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}.agency-logo{display:block;width:76px;height:76px;overflow:hidden;background:white;border-radius:50%;border:3px solid white;flex-shrink:0}.psa-mark img{display:block;height:70px;width:auto;max-width:none}.cbms-mark{display:grid;place-items:center}.cbms-mark img{width:66px;height:66px;object-fit:contain}header .year{display:none}header .province{min-width:0}header .province h1{font-size:clamp(23px,2.3vw,36px)}
@media(max-width:1100px){header{flex-wrap:wrap;gap:18px}.header-logos{margin-left:0}.province{flex:1}.brand{padding-right:18px}.agency-logo{width:66px;height:66px}.psa-mark img{height:60px}.cbms-mark img{width:60px;height:60px}}
@media(max-width:760px){.header-logos{margin-top:18px;gap:12px}header .province h1{font-size:26px}}
.header-logos .agency-logo{display:grid;place-items:center;border-radius:6px;padding:3px}.header-logos .agency-logo img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;object-fit:contain}
.sdg-icon{width:80px;height:80px;object-fit:contain;flex-shrink:0}.sdg-card{min-height:120px}.sdg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:1000px){.sdg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.sdg-cards{grid-template-columns:1fr}}
.controls-grid:has(#sex-filter:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(130px,.55fr) minmax(140px,.65fr)}.controls-grid:has(#sex-filter:not([hidden])) #download{grid-column:1/-1;justify-self:end}@media(max-width:1000px){.controls-grid:has(#sex-filter:not([hidden])){grid-template-columns:1fr 1fr}}@media(max-width:760px){.controls-grid:has(#sex-filter:not([hidden])){grid-template-columns:1fr}}
.controls-grid:has(#age-filter:not([hidden])){grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}@media(max-width:760px){.controls-grid:has(#age-filter:not([hidden])){grid-template-columns:1fr}}
.header-logos .agency-logo{border-radius:50%;}
.visualizations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.viz-body{padding:16px;min-width:0}.stat-viz{width:100%;height:auto;display:block}.stat-viz text{font-family:Arial,sans-serif;font-size:12px;font-weight:400;fill:#214a43;stroke:none}.stat-viz .viz-big{font-size:23px;font-weight:bold}.stat-viz circle:focus{outline:3px solid #e9b936}.viz-panel .panel-foot{margin:0}.stat-viz rect:hover{opacity:.8}@media(max-width:1000px){.visualizations{grid-template-columns:1fr}}
.sdg-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr);align-items:start;gap:16px;padding:16px}.sdg-top .sdg-cards{padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sdg-top .sdg-icon{width:44px;height:44px}.sdg-top .sdg-card{min-height:92px;padding:10px;gap:9px}.sdg-top .sdg-card b{font-size:19px}#sdg-map-slot{position:sticky;top:52px;min-width:0}#sdg-map-slot .map-wrap{height:470px}@media(max-width:1100px){.sdg-top{grid-template-columns:1fr}#sdg-map-slot{position:static}.sdg-top .sdg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.sdg-top .sdg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sdg-top .sdg-icon{width:36px;height:36px}}@media(max-width:430px){.sdg-top .sdg-cards{grid-template-columns:1fr}}
.population-sex-panel{display:flex;flex-direction:column}.population-sex-panel .viz-body{flex:1;display:flex;flex-direction:column;justify-content:center}.population-donut h4{margin:4px 10px 0;color:#075b59;font-size:15px}.population-donut+.population-donut{border-top:1px solid #dcebe5;padding-top:16px}.single-population-chart .population-donut{width:100%}.single-population-chart .stat-viz{min-height:360px;height:100%;max-height:620px}.single-population-chart .viz-body{padding:8px}.single-population-chart .population-donut{flex:1;display:flex;flex-direction:column;justify-content:center}@media(max-width:600px){.single-population-chart .stat-viz{min-height:240px}}
.all-category-bars{display:grid;gap:12px;max-height:650px;overflow:auto;padding:8px}.category-bar-row{display:grid;grid-template-columns:minmax(130px,2fr) minmax(70px,3fr) minmax(65px,1fr);align-items:center;gap:10px;font-size:12px}.category-bar-track{height:18px;background:#edf5f2}.category-bar-track i{display:block;height:100%;background:#0e8a7c}.category-bar-row strong{text-align:right;font-size:12px}
.vertical-category-chart{overflow-x:auto;padding:28px 10px 12px}.vertical-category-columns{display:flex;gap:22px;min-width:100%;align-items:flex-start}.vertical-category-column{flex:1 0 110px;min-width:110px;text-align:center;font-size:12px}.vertical-category-track{height:280px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid #aac8c1;background:repeating-linear-gradient(to top,transparent 0,transparent 64px,#e6efec 65px)}.vertical-category-bar{position:relative;width:60%;max-width:100px;background:#0e8a7c}.vertical-category-bar strong{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:7px;white-space:nowrap;font-size:12px}.vertical-category-column>span{display:block;padding-top:12px;max-width:180px;margin:auto;overflow-wrap:anywhere}
.sector-dots>div{display:grid;grid-template-columns:minmax(120px,2fr) 3fr 85px;gap:14px;align-items:center;padding:12px 0;font-size:12px}.sector-dots i{height:2px;background:#c8ded7;position:relative}.sector-dots b{position:absolute;width:12px;height:12px;border-radius:50%;background:#0e8a7c;top:-5px;transform:translateX(-50%)}.sector-stack{display:flex;height:42px;background:#edf5f2}.sector-stack i{height:100%}.sector-waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-width:350px;margin:20px auto}.sector-waffle i{aspect-ratio:1;background:#e1eae6;border-radius:3px}.sector-waffle .filled{background:#0e8a7c}.sector-coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;max-height:480px;overflow:auto}.sector-coverage>div{padding:12px;background:#e3f3ee;border-left:4px solid #0e8a7c;font-size:12px}.sector-coverage b{display:block;margin-top:8px}.sector-coverage .missing{background:#edf0f1;border-color:#8c9b9f}
.filters{position:sticky;top:var(--filter-sticky-top,56px);z-index:5;box-shadow:0 4px 12px #073b3b18}.sidebar-toolbar{z-index:7}#sdg-map-slot{top:calc(var(--filter-sticky-top,56px) + var(--filter-bar-height,96px) + 12px)}
.workspace.sidebar-hidden{display:grid;grid-template-columns:64px minmax(0,1fr)}aside .sidebar-toolbar{position:static;background:transparent;margin:0 0 12px;padding:0;display:flex;justify-content:flex-end}#sidebar-toggle{width:36px;height:36px;padding:4px;font-size:18px}nav button{display:flex;align-items:center;gap:10px}.nav-icon{width:22px;flex-shrink:0;text-align:center;font-size:20px}.workspace.sidebar-hidden aside{padding:12px 7px;height:100dvh}.sidebar-hidden .nav-text,.sidebar-hidden .nav-label,.sidebar-hidden .aside-bottom{display:none}.sidebar-hidden nav{display:flex;flex-direction:column;gap:4px}.sidebar-hidden nav button{justify-content:center;padding:10px 4px;width:100%;margin:0}.sidebar-hidden .sidebar-toolbar{justify-content:center}@media(max-width:760px){.workspace{display:grid;grid-template-columns:175px minmax(0,1fr)}aside{height:100dvh;padding:12px 7px}nav{display:flex;flex-direction:column}nav button{padding:8px 4px}main{padding:10px}.filters{gap:6px;padding:8px}.workspace.sidebar-hidden{grid-template-columns:56px minmax(0,1fr)}}
/* Landmark photographs blend into the teal masthead, opening between title and logos. */
.landmark-header{position:relative;isolation:isolate;overflow:hidden;min-height:190px;gap:22px;background:#064d4d}.header-landmarks{position:absolute;inset:0;z-index:-1;pointer-events:none}.header-landmarks>div{position:absolute;top:0;bottom:0;background-size:cover;background-repeat:no-repeat}.landmark-falls{left:42%;width:35%;background-image:url('assets/maria-cristina.jpg?v=20261015');background-position:center 48%;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 75%,transparent)}.landmark-bridge{left:65%;right:0;background-image:url('assets/panguil-bridge.png?v=20261015');background-position:center 50%;mask-image:linear-gradient(90deg,transparent,#000 24%)}.header-landmarks:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#064d4d 0%,#064d4df5 35%,#064d4dac 53%,#064d4d12 72%,#064d4d28 87%,#064d4da8 100%)}.landmark-header .province{max-width:520px;flex:0 1 520px;text-shadow:0 2px 5px #003936}.landmark-header .province h1{font-size:clamp(24px,2.1vw,36px)}.landmark-window{flex:1 1 220px;min-width:160px;align-self:stretch}.landmark-header .header-logos{margin-left:0;position:relative}.landmark-header .brand{flex-shrink:0;text-shadow:0 2px 5px #003936}@media(max-width:1250px){.landmark-header{gap:16px;padding:20px}.landmark-header .brand b{font-size:38px}.landmark-header .brand small{max-width:230px;font-size:10px}.landmark-header .province{max-width:410px}.landmark-window{min-width:100px;flex-basis:100px}}@media(max-width:1100px){.landmark-header{flex-wrap:wrap}.landmark-header .province{flex:1;max-width:none}.landmark-window{flex:1 1 60%;min-height:100px}.landmark-falls{left:12%;width:58%}.landmark-bridge{left:52%}.header-landmarks:after{background:linear-gradient(180deg,#064d4df5 0%,#064d4de0 40%,#064d4d20 72%,#064d4d45 100%)}}@media(max-width:760px){.landmark-header{display:flex}.landmark-header .province{flex-basis:100%;margin-top:0}.landmark-header .header-logos{margin-top:0}.landmark-window{flex-basis:35%;min-width:50px;min-height:90px}.landmark-header .brand{border:0}.landmark-falls{left:0;width:65%}.landmark-bridge{left:48%}}
.downloads-view .controls-grid{grid-template-columns:minmax(0,1fr) minmax(180px,.45fr) auto}.controls-grid>label[hidden]{display:none}@media(max-width:760px){.downloads-view .controls-grid{grid-template-columns:1fr}}
.downloads-view .controls-grid{grid-template-columns:minmax(0,1fr) auto}@media(max-width:760px){.downloads-view .controls-grid{grid-template-columns:1fr}}
.downloads-view .controls-grid:has(#download:not([hidden])){display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px}.downloads-view .controls-grid>label:not([hidden]){flex:1;max-width:600px}.downloads-view #download{margin-left:auto;flex:0 0 auto;width:auto;align-self:flex-end;white-space:nowrap}@media(max-width:600px){.downloads-view .controls-grid>label:not([hidden]){flex-basis:100%;max-width:none}.downloads-view #download{margin-left:auto}}
.measure-donut{display:grid;grid-template-columns:minmax(150px,1fr) minmax(140px,1fr);align-items:center;gap:20px}.measure-donut-legend>div{display:flex;align-items:flex-start;gap:10px;margin:20px 0;line-height:1.5;overflow-wrap:anywhere}.measure-donut-legend i{width:14px;height:14px;flex-shrink:0;margin-top:4px}.measure-donut-legend small{display:block;margin-top:5px;color:#587088}@media(max-width:500px){.measure-donut{grid-template-columns:1fr}.measure-donut .stat-viz{max-width:280px;margin:auto}}
.kpis[hidden]{display:none}
.sdg-controls[hidden],#sdg-description[hidden]{display:none}
aside .sidebar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:4px}.sidebar-toolbar .nav-label{display:block;margin:0;font-size:11px;letter-spacing:.8px;white-space:nowrap}.sidebar-toolbar #sidebar-toggle{display:grid;place-items:center;flex-shrink:0;width:32px;height:34px;padding:3px;background:transparent;border:0}.sidebar-toolbar #sidebar-toggle:hover{background:#ffffff20}.sidebar-hidden .sidebar-toolbar .nav-label{display:none}.sidebar-hidden .sidebar-toolbar{justify-content:center}.toggle-chevron{transform-origin:9px 16px;transform:rotate(180deg)}.sidebar-hidden .toggle-chevron{transform:none}
.sidebar-toolbar .nav-label{font-size:13px;font-weight:600;letter-spacing:.6px;line-height:1.3}
#side-panel .nav-icon,#sidebar-toggle{color:#fff}
.landmark-header .header-logos{gap:16px}.landmark-header .agency-logo{width:100px;height:100px}.landmark-header .agency-logo img{width:100%;height:100%;object-fit:contain}@media(max-width:1250px){.landmark-header .agency-logo{width:88px;height:88px}}@media(max-width:760px){.landmark-header .header-logos{gap:12px}.landmark-header .agency-logo{width:80px;height:80px}}@media(max-width:400px){.landmark-header .agency-logo{width:70px;height:70px}}
#table-foot:empty{display:none}
/* Fill the data card with rows instead of leaving unused space below the scroller. */
.data-panel{display:flex;flex-direction:column;min-height:0}.data-panel>.panel-title,.data-panel>.table-subtitle,.data-panel>.panel-foot{flex-shrink:0}.data-panel>.table-scroll{flex:1 1 0;min-height:220px;max-height:none;overflow:auto}.downloads-view .data-panel>.table-scroll{flex:0 1 auto;max-height:600px}@media(max-width:760px){.data-panel>.table-scroll{flex:0 1 auto;max-height:520px}}
.vertical-category-chart{overflow-x:hidden;padding:28px 4px 12px;container-type:inline-size}.vertical-category-columns{display:grid;grid-template-columns:repeat(var(--category-count),minmax(0,1fr));gap:clamp(2px,1cqw,14px);min-width:0;width:100%}.vertical-category-column{min-width:0;max-width:100%;font-size:clamp(9px,1.7cqw,12px)}.vertical-category-bar{width:65%;max-width:100px}.vertical-category-bar strong{font-size:clamp(8px,1.5cqw,12px);white-space:normal;overflow-wrap:anywhere;width:max-content;max-width:150%}.vertical-category-column>span{max-width:100%;overflow-wrap:anywhere;hyphens:auto}.dense-category-chart .vertical-category-column>span{writing-mode:vertical-rl;text-align:left;max-height:190px;margin:0 auto;padding-top:8px}.dense-category-chart .vertical-category-bar strong{writing-mode:vertical-rl;white-space:nowrap;max-width:none;padding-bottom:5px}.dense-category-chart{padding-top:65px}
/* =========================================================
Interactive landmark masthead — responsive/mobile upgrade
========================================================= */
.header-landmarks > div{
transition:opacity .3s ease, transform .4s ease, filter .3s ease;
transform-origin:center;
}
.landmark-falls,
.landmark-bridge{
opacity:.9;
filter:saturate(1) contrast(1.02);
}
.landmark-header[data-focus="falls"] .landmark-falls{
opacity:1;
transform:scale(1.025);
filter:saturate(1.08) contrast(1.05);
}
.landmark-header[data-focus="falls"] .landmark-bridge{
opacity:.48;
filter:saturate(.85);
}
.landmark-header[data-focus="bridge"] .landmark-bridge{
opacity:1;
transform:scale(1.025);
filter:saturate(1.08) contrast(1.05);
}
.landmark-header[data-focus="bridge"] .landmark-falls{
opacity:.48;
filter:saturate(.85);
}
.landmark-header .brand,
.landmark-header .province,
.landmark-header .header-logos,
.landmark-header .year{
position:relative;
z-index:2;
}
.landmark-controls{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:13px;
}
.landmark-tab{
border:1px solid #ffffff5c;
background:#073b3b99;
color:#fff;
padding:7px 11px;
border-radius:999px;
font-size:11px;
font-weight:700;
line-height:1.2;
box-shadow:0 2px 6px #002f2d24;
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.landmark-tab:hover{
background:#13877fcc;
border-color:#70d7cb;
transform:translateY(-1px);
}
.landmark-tab.active{
background:#ffda63;
border-color:#ffda63;
color:#073b3b;
box-shadow:0 2px 8px #001f1e42;
}
.landmark-tab:focus-visible{
outline:3px solid #fff;
outline-offset:2px;
}
@media(max-width:760px){
.landmark-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:
"brand logos"
"province province";
align-items:start;
gap:12px 10px;
min-height:0;
padding:18px 16px 20px;
border-bottom-width:4px;
}
.landmark-header .brand{
grid-area:brand;
min-width:0;
padding:0;
margin:0;
}
.landmark-header .brand b{
font-size:clamp(30px,9vw,40px);
letter-spacing:-1px;
line-height:1;
}
.landmark-header .brand small{
max-width:220px;
margin-top:8px;
font-size:10px;
line-height:1.15;
letter-spacing:.75px;
}
.landmark-header .province{
grid-area:province;
max-width:none;
margin:0;
padding:4px 0 0;
text-shadow:0 2px 5px #003936;
}
.landmark-header .province p{
margin-bottom:7px;
font-size:11px;
}
.landmark-header .province h1{
margin-bottom:8px;
max-width:360px;
font-size:clamp(20px,6.4vw,27px);
line-height:1.08;
}
.landmark-header .province > small{
display:none;
}
.landmark-header .header-logos{
grid-area:logos;
align-self:start;
margin:0;
gap:7px;
}
.landmark-header .agency-logo{
width:56px;
height:56px;
border-width:2px;
padding:2px;
}
.landmark-window,
.landmark-header .year{
display:none;
}
.header-landmarks{
inset:0;
}
.landmark-falls{
left:0;
width:72%;
background-position:center 48%;
mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);
}
.landmark-bridge{
left:43%;
right:0;
background-position:center 50%;
mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
}
.header-landmarks:after{
background:linear-gradient(180deg,#064d4ddb 0%,#064d4d8e 38%,#064d4d4a 66%,#064d4daa 100%);
}
.landmark-controls{
gap:6px;
margin-top:10px;
}
.landmark-tab{
min-height:34px;
padding:7px 10px;
font-size:10px;
}
}
@media(max-width:480px){
.landmark-header{
grid-template-columns:minmax(0,1fr) auto;
padding:16px 14px 17px;
gap:10px 8px;
}
.landmark-header .brand b{
font-size:clamp(28px,9.5vw,36px);
}
.landmark-header .brand small{
max-width:185px;
font-size:9px;
}
.landmark-header .province h1{
max-width:300px;
font-size:clamp(19px,6.5vw,24px);
}
.landmark-header .agency-logo{
width:48px;
height:48px;
}
.landmark-controls{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
width:min(100%,330px);
}
.landmark-tab{
width:100%;
min-width:0;
white-space:normal;
}
}
@media(max-width:350px){
.landmark-header{
grid-template-columns:1fr;
grid-template-areas:
"brand"
"logos"
"province";
}
.landmark-header .header-logos{
justify-self:start;
}
.landmark-controls{
grid-template-columns:1fr;
}
}
@media(prefers-reduced-motion:reduce){
.header-landmarks > div,
.landmark-tab{
transition:none;
}
}
/* ============================================================
Stable responsive masthead — no landmark selection controls.
This block intentionally sits at the end so it overrides the
older header media queries without affecting the dashboard.
============================================================ */
.landmark-controls,.landmark-tab{display:none!important}
.landmark-header[data-focus] .landmark-falls,
.landmark-header[data-focus] .landmark-bridge,
.landmark-falls,.landmark-bridge{
opacity:1;
transform:none;
filter:none;
}
.landmark-header{
display:grid;
grid-template-columns:minmax(220px,.85fr) minmax(300px,1.35fr) minmax(120px,.65fr) auto;
grid-template-areas:"brand province window logos";
align-items:center;
gap:clamp(18px,2vw,34px);
min-height:190px;
padding:22px 28px;
}
.landmark-header .brand{grid-area:brand;min-width:0;margin:0;padding-right:24px}
.landmark-header .province{grid-area:province;min-width:0;max-width:none;margin:0}
.landmark-header .landmark-window{grid-area:window;min-width:0}
.landmark-header .header-logos{grid-area:logos;margin:0;justify-self:end;align-self:center}
.landmark-header .year{display:none}
.landmark-header .brand b{font-size:clamp(34px,3vw,54px);line-height:1;letter-spacing:-1.5px}
.landmark-header .brand small{max-width:260px;line-height:1.2}
.landmark-header .province h1{font-size:clamp(23px,2.3vw,36px);line-height:1.08;max-width:620px}
.landmark-header .province p{font-size:clamp(11px,1vw,14px)}
.landmark-header .province>small{display:block}
/* Tablet: title gets its own row so it never collapses into a narrow column. */
@media(max-width:1100px){
.landmark-header{
grid-template-columns:minmax(220px,1fr) auto;
grid-template-areas:
"brand logos"
"province province";
gap:14px 18px;
min-height:230px;
padding:20px 22px;
}
.landmark-header .brand{padding-right:0}
.landmark-header .province{padding-top:3px}
.landmark-header .province h1{max-width:720px;font-size:clamp(24px,4vw,34px)}
.landmark-header .landmark-window{display:none}
.landmark-header .header-logos{justify-self:end}
.landmark-falls{left:0;width:65%;background-position:center 48%}
.landmark-bridge{left:48%;right:0;background-position:center 50%}
}
/* Phone: compact, readable two-row header. */
@media(max-width:760px){
.landmark-header{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-areas:
"brand logos"
"province province"!important;
align-items:start!important;
gap:12px 10px!important;
min-height:0!important;
padding:16px 16px 18px!important;
}
.landmark-header .brand{
grid-area:brand!important;
border:0!important;
padding:0!important;
margin:0!important;
min-width:0!important;
}
.landmark-header .brand b{
font-size:clamp(29px,8.5vw,39px)!important;
line-height:1!important;
white-space:nowrap!important;
letter-spacing:-1px!important;
}
.landmark-header .brand small{
display:block!important;
max-width:210px!important;
margin-top:7px!important;
font-size:9px!important;
line-height:1.15!important;
letter-spacing:.65px!important;
}
.landmark-header .province{
grid-area:province!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
padding:3px 0 0!important;
}
.landmark-header .province p{
margin:0 0 5px!important;
font-size:10px!important;
line-height:1.2!important;
}
.landmark-header .province h1{
margin:0!important;
max-width:390px!important;
font-size:clamp(20px,5.7vw,27px)!important;
line-height:1.08!important;
letter-spacing:.2px!important;
}
.landmark-header .province>small{display:none!important}
.landmark-header .header-logos{
grid-area:logos!important;
justify-self:end!important;
align-self:start!important;
margin:0!important;
gap:6px!important;
}
.landmark-header .agency-logo{
width:50px!important;
height:50px!important;
padding:2px!important;
border-width:2px!important;
}
.landmark-header .landmark-window,.landmark-header .year{display:none!important}
.header-landmarks{inset:0!important}
.landmark-falls{
left:0!important;
width:67%!important;
background-position:center 50%!important;
mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%)!important;
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%)!important;
}
.landmark-bridge{
left:45%!important;
right:0!important;
width:auto!important;
background-position:center 52%!important;
mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%)!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%)!important;
}
.header-landmarks:after{
background:linear-gradient(180deg,#064d4de8 0%,#064d4daa 42%,#064d4d6b 72%,#064d4dbc 100%)!important;
}
}
/* Very narrow phones: logos move below the brand instead of squeezing text. */
@media(max-width:420px){
.landmark-header{
grid-template-columns:1fr!important;
grid-template-areas:
"brand"
"province"
"logos"!important;
gap:9px!important;
padding:15px 14px 16px!important;
}
.landmark-header .brand b{font-size:clamp(28px,10vw,35px)!important}
.landmark-header .brand small{max-width:190px!important}
.landmark-header .province h1{max-width:300px!important;font-size:clamp(19px,7vw,24px)!important}
.landmark-header .header-logos{justify-self:start!important;margin-top:3px!important}
.landmark-header .agency-logo{width:45px!important;height:45px!important}
}
/* Smooth side-panel resize when auto-collapsing. */
.workspace{transition:grid-template-columns .2s ease}
aside{transition:padding .2s ease}
@media (prefers-reduced-motion: reduce){
.workspace, aside{transition:none}
}
/* Match municipality and barangay labels with a light, zoom-scaled halo. */
#map .map-label{fill:#102f48;font-weight:700;paint-order:stroke;stroke:#ffffffda;stroke-width:.12em;stroke-linejoin:round;text-shadow:none;filter:none}
/* Distinguish the main geographic filters from statistical table controls. */
.filters{background:#d8eeea;border-color:#9ccdc4;border-top:3px solid #108b80}
.filters label{color:#084f4b}
.filters select{background:#ffffff;border-color:#a9cec7;color:#174b46}
.filters #reset{background:#f4fbf9;border-color:#86bdb3;color:#085858}
.filters #reset:hover{background:#c4e5dd}
/* Hover feedback for the main geographic filter. */
.filters{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.filters:hover{background:#cce8e2;border-color:#108b80;box-shadow:0 0 0 2px #108b8026}
.filters select:hover,.filters select:focus-visible{background:#effaf6;border-color:#08796b}
@media(prefers-reduced-motion:reduce){.filters{transition:none}}
/* Secondary filters use the dashboard gold accent; geography retains teal. */
select{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
select:hover{background:#fff8e2;border-color:#dba629;box-shadow:0 0 0 2px #edb63826}
select:focus-visible{background:#fff8e2;border-color:#b78412;outline:2px solid #dba629;outline-offset:2px}
.filters select:hover{background:#effaf6;border-color:#08796b;box-shadow:0 0 0 2px #108b8026}
.filters select:focus-visible{background:#effaf6;border-color:#08796b;outline:2px solid #08796b;outline-offset:2px;box-shadow:0 0 0 2px #108b8026}
select:disabled{box-shadow:none;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){select{transition:none}}
/* Coordinated background highlights for filter panels and their controls. */
.metric-controls,.sdg-controls,#overview-chart-controls{transition:background-color .18s ease,box-shadow .18s ease}
.metric-controls:hover,.metric-controls:focus-within,.sdg-controls:hover,.sdg-controls:focus-within,#overview-chart-controls:hover,#overview-chart-controls:focus-within{background:#e0f4f5;box-shadow:inset 0 0 0 2px #72bec5}
select:hover,select:focus-visible{background:#e5f6f7;border-color:#389ca7;box-shadow:0 0 0 2px #389ca726}
select:focus-visible{outline-color:#278792}
.filters:hover,.filters:focus-within{background:#b9e0d6;border-color:#08796b;box-shadow:0 0 0 2px #08796b33}
.filters select:hover,.filters select:focus-visible{background:#d9f0e8;border-color:#08796b;box-shadow:0 0 0 2px #08796b33}
.filters select:focus-visible{outline-color:#08796b}
@media(prefers-reduced-motion:reduce){.metric-controls,.sdg-controls,#overview-chart-controls{transition:none}}
/* Consistent hover treatment across charts, maps, tables and SDG displays. */
.viz-panel,.map-panel,.ranking-panel,.data-panel,.sdg-card,.sdg-grid>div{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
.viz-panel:hover,.map-panel:hover,.ranking-panel:hover,.data-panel:hover,.sdg-card:hover,.sdg-grid>div:hover{background:#e3f3ef;border-color:#83bfb2;box-shadow:inset 0 3px 0 #108b80,0 3px 10px #08585814}
:is(.viz-panel,.map-panel,.ranking-panel,.data-panel):hover>.panel-title{box-shadow:inset 0 3px 0 #2ab7a9}
:is(.viz-panel,.map-panel,.ranking-panel,.data-panel):hover :is(.viz-body,.chart,.map-toolbar,.map-legend,.panel-foot,.table-subtitle){background-color:#e3f3ef}
.data-panel:hover tbody tr,.sdg-grid>div:hover tbody tr{background-color:#e3f3ef}
.data-panel:hover tbody tr:nth-child(even),.sdg-grid>div:hover tbody tr:nth-child(even){background-color:#d8eee7}
@media(prefers-reduced-motion:reduce){.viz-panel,.map-panel,.ranking-panel,.data-panel,.sdg-card,.sdg-grid>div{transition:none}}
/* Highlight individual data marks without replacing their category colors. */
.stat-viz :is(rect,circle,path):has(>title),.bar-row>div>i,.vertical-category-bar,.sector-stack>i,.sector-dots b,.sector-waffle i{transition:filter .16s ease,opacity .16s ease,fill-opacity .16s ease}
.stat-viz :is(rect,circle,path):has(>title):hover,.stat-viz :is(rect,circle,path):has(>title):focus-visible,.bar-row:hover>div>i,.bar-row:focus-within>div>i,.vertical-category-column:hover .vertical-category-bar,.sector-stack>i:hover,.sector-dots b:hover,.sector-waffle i:hover{filter:brightness(1.18) saturate(1.15);opacity:1;fill-opacity:1}
.stat-viz circle[stroke-dasharray]{pointer-events:visibleStroke}
.bar-row:hover,.bar-row:focus-within{background:#108b8010;border-radius:4px}
@media(prefers-reduced-motion:reduce){.stat-viz :is(rect,circle,path):has(>title),.bar-row>div>i,.vertical-category-bar,.sector-stack>i,.sector-dots b,.sector-waffle i{transition:none}}
/* Four clearly separated SDG sections: indicators, map, table and ranking. */
#sdg-panel{background:#edf6f4}
.sdg-top{gap:22px;padding:18px}
.sdg-top .sdg-cards,.sdg-grid>div{background:#fff;border:1px solid #b5d8cf;border-top:3px solid #108b80;border-radius:7px;padding:14px;box-shadow:0 2px 6px #0858580a;min-width:0}
#sdg-map-slot>.map-panel{border-color:#b5d8cf;border-top:3px solid #108b80}
.sdg-grid{gap:22px;padding:18px;border-top:1px solid #b5d8cf;margin:0 18px 18px;padding:20px 0 0}
.sdg-grid>div>h4{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #d8eee7;color:#085858}
@media(max-width:760px){.sdg-top{padding:12px;gap:16px}.sdg-grid{margin:0 12px 12px;gap:16px}.sdg-top .sdg-cards,.sdg-grid>div{padding:10px}}
.dashboard-footer{display:block;border-top:1px solid #b5d8cf;margin-top:22px;padding-top:16px}
.footer-source{margin:0 0 16px;font-size:14px;line-height:1.5;color:#235a53}
.footer-details{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer-credit{text-align:right}.footer-disclaimer{display:block;margin-top:8px;font-size:12px;color:#085858}
@media(max-width:760px){.footer-details{flex-direction:column;align-items:flex-start}.footer-credit{text-align:left}}
/* Compact SDG cards: three per row, aligned with the map. */
.sdg-top{align-items:stretch}
.sdg-top .sdg-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-content:stretch;gap:8px}
.sdg-top .sdg-card{min-height:84px;padding:9px;gap:8px;min-width:0}
.sdg-top .sdg-icon{width:36px;height:36px;flex-shrink:0}
.sdg-top .sdg-card>span{min-width:0;overflow-wrap:anywhere}
#sdg-map-slot{position:static;display:flex;align-items:stretch}
#sdg-map-slot>.map-panel{width:100%;margin:0;display:flex;flex-direction:column}
#sdg-map-slot .map-wrap{flex:1;min-height:390px}
@media(max-width:700px){.sdg-top .sdg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.sdg-top .sdg-cards{grid-template-columns:1fr}}
/* Larger SDG images aligned with the percentage and indicator text. */
.sdg-top .sdg-card{align-items:center;gap:12px}
.sdg-top .sdg-icon{width:60px;height:60px;object-fit:contain;flex-shrink:0}
@media(max-width:700px){.sdg-top .sdg-icon{width:52px;height:52px}}
body.about-view .workspace{height:auto;min-height:calc(100dvh - 190px)}
body.about-view main{display:block}
.about-view :is(.filters,#scope,.kpis,#dataset-controls,.dashboard-grid,#sdg-panel,#visualizations){display:none!important}
#dashboard-about{display:grid;gap:16px;margin:16px 0}
#dashboard-about .panel{padding:20px;border-top:3px solid #108b80}
#dashboard-about h3{font-size:18px;color:#085858;margin:0 0 10px}
#dashboard-about p,#dashboard-about li{font-size:15px;line-height:1.65}
#dashboard-about p{margin:8px 0}#dashboard-about ol{padding-left:22px;margin:0}
.about-intro{background:#fff}.about-intro strong{color:#08796b;font-size:13px}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
/* Overview information card hover feedback. */
#dashboard-about .panel{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
#dashboard-about .panel:hover{background:#e3f3ef;border-color:#83bfb2;box-shadow:0 3px 10px #08585814}
@media(prefers-reduced-motion:reduce){#dashboard-about .panel{transition:none}}
/* Original local-dashboard introduction, consistent with the data panels. */
body.about-view main{background:#edf6f4;color:#193f3d;padding:24px}
.about-view .heading{display:none}
#dashboard-about{margin-top:0}
.portal-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);align-items:stretch;gap:0;background:#fff;border:1px solid #b5d8cf;border-top:5px solid #108b80;border-radius:10px;overflow:hidden}
.portal-copy{padding:clamp(24px,4vw,60px)}
#dashboard-about .portal-authority{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#08796b;margin:0 0 20px}
#portal-title{font-family:Arial,Helvetica,sans-serif;font-size:clamp(32px,3.7vw,58px);line-height:1.12;letter-spacing:-1.5px;color:#085858;margin:0}
#dashboard-about .portal-location{font-size:17px;line-height:1.6;color:#426b65;max-width:540px;margin:24px 0}
#overview-explore-sdg{display:inline-block;padding:13px 22px;background:#08796b;color:white;border:1px solid #08796b;border-radius:5px;font-size:15px;font-weight:700;transition:background .18s,box-shadow .18s}
#overview-explore-sdg:hover{background:#0d9483;box-shadow:0 0 0 4px #108b801a}
.portal-about-link{display:inline-block;margin:12px 0 12px 18px;color:#08796b;font-size:14px;text-underline-offset:4px}
.portal-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#dcefe9;border-left:1px solid #b5d8cf}
.portal-logo img{width:130px;height:130px;object-fit:contain}
#dashboard-about .overview-year{font-size:22px;font-weight:700;color:#085858;margin:16px 0 4px}
#dashboard-about .overview-region{font-size:16px;line-height:1.5;margin:0 0 20px;color:#426b65}
.overview-coverage{display:flex;justify-content:center;gap:24px;border-top:1px solid #afd2c7;padding-top:18px;width:100%;font-size:12px;color:#426b65}
.overview-coverage b{display:block;font-size:28px;color:#08796b;margin-bottom:4px}
@media(max-width:900px){.portal-hero{grid-template-columns:1fr}.portal-logo{border-left:0;border-top:1px solid #b5d8cf}.portal-logo img{width:100px;height:100px}.about-view main{padding:14px}}
@media(max-width:480px){.portal-about-link{display:block;margin:16px 0 0}}
@media(prefers-reduced-motion:reduce){#overview-explore-sdg{transition:none}}
/* Fit Overview below the full title banner within one desktop viewport. */
@media(min-width:1280px) and (min-height:750px){
body.about-view .workspace{height:100dvh;min-height:0}
body.about-view main{height:100%;min-height:0;padding:12px 18px;display:flex;flex-direction:column;gap:10px}
body.about-view #dashboard-about{flex:1;min-height:0;margin:0;gap:10px;grid-template-rows:minmax(0,1fr) auto auto}
body.about-view .portal-hero{min-height:0}
body.about-view .portal-copy{padding:clamp(18px,2.4vh,32px) 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
body.about-view #portal-title{font-size:clamp(32px,4.7vh,48px);line-height:1.08}
body.about-view #dashboard-about .portal-authority{margin:0 0 12px}
body.about-view #dashboard-about .portal-location{font-size:15px;line-height:1.5;margin:16px 0}
body.about-view #overview-explore-sdg{padding:10px 18px;font-size:14px}
body.about-view .portal-logo{padding:16px}
body.about-view .portal-logo img{width:90px;height:90px}
body.about-view #dashboard-about .overview-year{margin:10px 0 3px;font-size:20px}
body.about-view #dashboard-about .overview-region{font-size:14px;margin:0 0 12px}
body.about-view .overview-coverage{padding-top:10px;gap:24px}
body.about-view .overview-coverage b{font-size:24px}
body.about-view #dashboard-about .panel{padding:12px 16px}
body.about-view #dashboard-about h3{font-size:16px;margin:0 0 6px}
body.about-view #dashboard-about p{font-size:14px;line-height:1.45;margin:5px 0}
body.about-view .about-grid{gap:10px}
body.about-view .dashboard-footer{flex-shrink:0;margin:0;padding:8px 0 0}
body.about-view .footer-source{font-size:12px;margin:0 0 6px}
body.about-view .footer-details{font-size:11px}
body.about-view footer small,body.about-view .footer-disclaimer{font-size:11px;margin-top:3px}
body.about-view aside,body.about-view .workspace.sidebar-hidden aside{height:100dvh;min-height:0}
body.about-view nav button{padding:10px 8px;margin-bottom:3px}
}
/* Refined Overview: strong local identity with balanced information hierarchy. */
body.about-view .portal-hero{border:1px solid #b5d8cf;border-radius:14px;grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr);box-shadow:0 6px 20px #0858580c}
body.about-view .portal-copy{background:linear-gradient(125deg,#064c4b,#0a7169);position:relative;border-top:4px solid #29b5a4}
body.about-view #dashboard-about .portal-authority{color:#b5e8de;letter-spacing:1.8px;font-size:12px}
body.about-view #portal-title{color:#fff;letter-spacing:-1.4px;font-weight:750}
body.about-view #dashboard-about .portal-location{color:#daeee9;max-width:560px}
body.about-view #overview-explore-sdg{background:#f5d778;color:#174b46;border-color:#f5d778;border-radius:7px;padding:12px 20px;box-shadow:0 3px 8px #003c3c20}
body.about-view #overview-explore-sdg:hover{background:#ffe69c;border-color:#ffe69c;box-shadow:0 0 0 4px #f5d77822}
body.about-view #overview-explore-sdg:focus-visible{outline-color:#fff}
body.about-view .portal-logo{background:linear-gradient(150deg,#fff,#e4f2ed);border-left:0;border-top:4px solid #b7dacf}
body.about-view .portal-logo img{width:clamp(100px,14vh,150px);height:clamp(100px,14vh,150px);background:#fff;border-radius:50%;padding:5px;box-shadow:0 5px 18px #08585812}
body.about-view #dashboard-about .overview-year{font-size:24px;letter-spacing:.4px}
body.about-view .overview-coverage{border-top:0;gap:12px;padding-top:12px;max-width:360px}
body.about-view .overview-coverage span{flex:1;background:#fff;border:1px solid #cae3db;border-radius:9px;padding:12px 8px;color:#426b65}
body.about-view .overview-coverage b{font-size:30px;line-height:1.1;margin-bottom:6px}
body.about-view #dashboard-about .panel{border-top:0;border-left:4px solid #108b80;border-radius:9px;box-shadow:0 2px 8px #08585806}
body.about-view #dashboard-about .panel h3{color:#075b59;letter-spacing:-.2px}
body.about-view #dashboard-about .panel:hover{background:#e3f3ef;box-shadow:0 4px 14px #08585812}
body.about-view .about-intro strong{display:inline-block;font-size:11px;letter-spacing:.4px;color:#08796b}
@media(min-width:1280px) and (min-height:750px){
body.about-view #dashboard-about{grid-template-rows:minmax(0,1fr) auto auto;gap:12px}
body.about-view .portal-copy{padding:28px 40px}
body.about-view #portal-title{font-size:clamp(36px,5.5vh,58px)}
body.about-view #dashboard-about .panel{padding:16px 18px}
body.about-view #dashboard-about .panel p{font-size:14px;line-height:1.55}
body.about-view #dashboard-about .panel h3{font-size:17px;margin-bottom:8px}
body.about-view .portal-logo{padding:20px}
}
@media(max-width:900px){body.about-view .portal-hero{grid-template-columns:1fr}body.about-view .portal-copy{padding:28px}body.about-view .portal-logo{border-top:0}}
/* Independent hover highlights for the two Overview introduction panels. */
body.about-view .portal-copy,body.about-view .portal-logo{transition:box-shadow .18s ease,border-color .18s ease}
body.about-view .portal-copy:hover{background:linear-gradient(125deg,#085b58,#0d8277);border-top-color:#63d9c6;box-shadow:inset 0 0 0 2px #56cbb65c}
body.about-view .portal-logo:hover{background:linear-gradient(150deg,#effaf6,#d0eae1);border-top-color:#108b80;box-shadow:inset 0 0 0 2px #108b8038}
@media(prefers-reduced-motion:reduce){body.about-view .portal-copy,body.about-view .portal-logo{transition:none}}
/* Keep the CBMS subtitle together when the header has sufficient width. */
.landmark-header .brand small{max-width:none;white-space:normal;text-wrap:wrap}
@media(min-width:1101px){
.landmark-header{grid-template-columns:minmax(max-content,.85fr) minmax(300px,1.35fr) minmax(0,.65fr) auto}
.landmark-header .brand small{white-space:nowrap;max-width:none}
}
@media(min-width:761px) and (max-width:1100px){.landmark-header .brand small{max-width:none;white-space:nowrap}}
/* Regional coverage card: clear identity and balanced statistical tiles. */
body.about-view .portal-logo{background:radial-gradient(ellipse at 50% 30%,#fff 0%,#edf8f4 48%,#dceee7 100%);gap:0;border-top-color:#108b80}
.coverage-edition{display:inline-block;border:1px solid #acd4c7;border-radius:20px;padding:5px 14px;color:#08685f;background:#ffffffb3;font-size:12px;font-weight:700;letter-spacing:1.5px;margin-bottom:16px}
.coverage-seal{padding:7px;border:1px solid #c5e3d8;border-radius:50%;background:#ffffff80;box-shadow:0 8px 24px #0858580a}
body.about-view .coverage-seal img{display:block;width:clamp(88px,12vh,120px);height:clamp(88px,12vh,120px);padding:0;box-shadow:none}
body.about-view #dashboard-about .portal-logo .overview-region{font-size:24px;font-weight:700;line-height:1.25;color:#075b59;margin:16px 0 18px;letter-spacing:-.4px}
body.about-view #dashboard-about .overview-region span{font-size:16px;font-weight:400;letter-spacing:0;color:#49766e}
.coverage-caption{display:flex;align-items:center;gap:12px;width:min(100%,370px);font-size:10px;letter-spacing:1.7px;font-weight:700;color:#5b8177}
.coverage-caption::before,.coverage-caption::after{content:'';flex:1;height:1px;background:#b8d9ce}
body.about-view .overview-coverage{width:100%;max-width:370px;gap:12px;padding-top:12px}
body.about-view .overview-coverage span{padding:12px 8px;border:1px solid #c2dfd4;border-bottom:3px solid #159587;background:#ffffffdf;border-radius:9px;font-size:12px;box-shadow:0 3px 9px #08585806;transition:background .18s,box-shadow .18s}
body.about-view .overview-coverage b{font-size:32px;color:#087b70;margin-bottom:5px}
body.about-view .overview-coverage span:hover{background:#e3f5ed;box-shadow:0 4px 12px #08585815}
@media(max-height:850px) and (min-width:1280px){.coverage-edition{margin-bottom:8px}.coverage-seal{padding:4px}body.about-view .coverage-seal img{width:80px;height:80px}body.about-view #dashboard-about .portal-logo .overview-region{margin:10px 0 12px;font-size:22px}}
@media(prefers-reduced-motion:reduce){body.about-view .overview-coverage span{transition:none}}
/* Simple CBMS identity panel with a prominent logo. */
body.about-view .portal-logo .overview-cbms-logo{width:clamp(160px,28vh,300px);height:clamp(160px,28vh,300px);max-width:85%;object-fit:contain;padding:0;border:0;box-shadow:none;background:transparent}
body.about-view #dashboard-about .portal-logo .overview-region{margin:18px 0 0;font-size:clamp(20px,2vw,28px);line-height:1.35}
body.about-view #dashboard-about .portal-logo .overview-region span{font-size:18px}
/* Size Overview against the space remaining below the title banner. */
@media(min-width:1280px) and (min-height:800px){
body.about-view{min-height:100dvh}
body.about-view .workspace{height:calc(100dvh - var(--overview-banner-height,190px));min-height:610px}
body.about-view main{padding:10px 16px;gap:8px}
body.about-view #dashboard-about{gap:8px;grid-template-rows:minmax(230px,1fr) auto auto}
body.about-view .portal-copy{padding:18px 28px}
body.about-view #portal-title{font-size:clamp(30px,3.7vh,40px);line-height:1.1}
body.about-view #dashboard-about .portal-authority{margin-bottom:10px;font-size:11px}
body.about-view #dashboard-about .portal-location{font-size:14px;margin:12px 0;line-height:1.4}
body.about-view #overview-explore-sdg{padding:9px 16px;font-size:13px}
body.about-view .portal-logo{padding:12px}
body.about-view .portal-logo .overview-cbms-logo{width:clamp(120px,16vh,170px);height:clamp(120px,16vh,170px)}
body.about-view #dashboard-about .portal-logo .overview-region{font-size:22px;margin-top:10px;line-height:1.2}
body.about-view #dashboard-about .portal-logo .overview-region span{font-size:15px}
body.about-view #dashboard-about .panel{padding:10px 14px}
body.about-view #dashboard-about .panel h3{font-size:15px;margin-bottom:5px}
body.about-view #dashboard-about .panel p{font-size:13px;line-height:1.4;margin:4px 0}
body.about-view .about-grid{gap:8px}
body.about-view .dashboard-footer{padding-top:6px}
body.about-view .footer-source{margin-bottom:4px}
body.about-view aside,body.about-view .workspace.sidebar-hidden aside{height:100%;min-height:0;padding-top:12px}
body.about-view nav button{padding:8px;margin-bottom:2px}
body.about-view .aside-bottom{padding:10px 8px 0}
}
/* Leave enough document height to align each selected panel below the banner. */
body.panel-open .workspace{min-height:100dvh}
@media(min-width:1280px) and (min-height:800px){body.about-view.panel-open .workspace{height:100dvh}}
/* Give the Overview explanations more room within the same screen. */
@media(min-width:1280px) and (min-height:800px){
body.about-view #dashboard-about{gap:12px;grid-template-rows:minmax(210px,1fr) auto auto}
body.about-view #dashboard-about .panel{padding:18px 20px}
body.about-view #dashboard-about .panel h3{font-size:16px;margin-bottom:9px}
body.about-view #dashboard-about .panel p{font-size:14px;line-height:1.55;margin:7px 0}
body.about-view .about-grid{gap:12px}
body.about-view .portal-copy{padding:14px 28px}
body.about-view .portal-logo{padding:10px}
body.about-view .portal-logo .overview-cbms-logo{width:clamp(110px,14vh,145px);height:clamp(110px,14vh,145px)}
}
/* Let the CBMS logo fill the available card height above its caption. */
body.about-view .portal-logo{container-type:size;min-height:0}
body.about-view .portal-logo .overview-cbms-logo{width:min(85cqw,calc(100cqh - 65px));height:min(85cqw,calc(100cqh - 65px));max-width:90%;flex-shrink:0;object-fit:contain}
body.about-view #dashboard-about .portal-logo .overview-region{margin-top:8px}
@media(max-width:1279px),(max-height:799px){body.about-view .portal-logo{container-type:normal}body.about-view .portal-logo .overview-cbms-logo{width:min(70vw,280px);height:auto;aspect-ratio:1}}
body.about-view #dashboard-about .portal-logo .overview-region{font-family:Arial,Helvetica,sans-serif;font-size:clamp(14px,1.4vw,22px);font-weight:700;line-height:1.3;white-space:nowrap;color:#075b59;letter-spacing:-.3px}
@media(max-width:380px){body.about-view #dashboard-about .portal-logo .overview-region{font-size:13px}}
/* First data section fills the desktop space below the page controls. */
@media(min-width:1280px) and (min-height:750px){
body.panel-open:not(.about-view) .workspace{height:auto;min-height:100dvh}
body.panel-open:not(.about-view) main{display:block}
body.panel-open:not(.about-view) .dashboard-grid{height:var(--first-viz-height,600px);min-height:0}
body.panel-open:not(.about-view) .dashboard-grid>.panel{display:flex;flex-direction:column;min-height:0}
body.panel-open:not(.about-view) .dashboard-grid>.ranking-panel{grid-column:auto}
body.panel-open[data-view="overview"] .dashboard-grid>.ranking-panel{display:none}
body.panel-open:not(.about-view) .map-wrap{height:auto;min-height:0;flex:1}
body.panel-open:not(.about-view) #map{height:100%;width:100%}
body.panel-open:not(.about-view) .data-panel .table-scroll{flex:1;min-height:0;max-height:none}
body.panel-open:not(.about-view) .ranking-panel .chart{flex:1;min-height:0;columns:1}
body.panel-open[data-view="sdg"] #sdg-panel{display:block}
body.panel-open[data-view="sdg"] .sdg-top{height:var(--first-viz-height,600px);min-height:0;grid-template-columns:1.2fr 1fr;align-items:stretch;padding:10px;gap:14px}
body.panel-open[data-view="sdg"] .sdg-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;padding:8px;min-height:0}
body.panel-open[data-view="sdg"] .sdg-card{min-height:0;padding:7px;gap:8px;font-size:12px;line-height:1.2}
body.panel-open[data-view="sdg"] .sdg-card b{font-size:18px;line-height:1.2}
body.panel-open[data-view="sdg"] .sdg-card small{font-size:10px;margin-top:3px}
body.panel-open[data-view="sdg"] .sdg-icon{width:40px;height:40px}
body.panel-open[data-view="sdg"] #sdg-map-slot{position:static;min-height:0}
body.panel-open[data-view="sdg"] #sdg-map-slot .map-wrap{height:auto;min-height:0;flex:1}
body.panel-open[data-view="sdg"] .sdg-grid{height:auto;min-height:320px;margin-top:16px}
body.panel-open:not(.about-view) .visualizations{height:auto;margin-top:16px}
}
/* Population has two primary panels; do not reserve a third ranking column. */
body[data-view="overview"] .dashboard-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
body[data-view="overview"] .dashboard-grid>.ranking-panel{display:none}
@media(min-width:1100px) and (min-height:650px){
body.panel-open:not(.about-view) .dashboard-grid{height:var(--first-viz-height,560px);min-height:0;align-items:stretch}
body.panel-open:not(.about-view) .dashboard-grid>.panel{display:flex;flex-direction:column;min-height:0}
body.panel-open:not(.about-view) .dashboard-grid>.ranking-panel{grid-column:auto}
body.panel-open[data-view="overview"] .dashboard-grid>.ranking-panel{display:none}
body.panel-open:not(.about-view):not([data-view="overview"]) .dashboard-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,1fr)}
body.panel-open:not(.about-view) .map-wrap{flex:1;height:auto;min-height:0}
body.panel-open:not(.about-view) #map{width:100%;height:100%}
body.panel-open:not(.about-view) .data-panel .table-scroll{flex:1;min-height:0;max-height:none;height:auto}
body.panel-open:not(.about-view) .ranking-panel .chart{flex:1;min-height:0;columns:1;overflow:auto}
}
@media(max-width:760px){body[data-view="overview"] .dashboard-grid{grid-template-columns:minmax(0,1fr)}}
/* Dark dashboard surfaces retain the original teal and gold data colors. */
html:has(body.dark-theme){background:#111c20;color-scheme:dark}
body.dark-theme{background:#111c20;color:#e3efec}
body.dark-theme main,body.dark-theme.about-view main,body.dark-theme #sdg-panel{background:#111c20;color:#e3efec}
body.dark-theme :is(.panel,.sdg-grid>div,.sdg-cards,.sdg-card,.map-toolbar,.map-legend,.panel-foot,.table-subtitle,.viz-body,.chart){background-color:#1b2c30!important;border-color:#38565a;color:#e3efec}
body.dark-theme :is(.panel,.sdg-card,.sdg-grid>div):hover{background-color:#213b3e!important}
body.dark-theme :is(.viz-panel,.map-panel,.ranking-panel,.data-panel):hover :is(.viz-body,.chart,.map-toolbar,.map-legend,.panel-foot,.table-subtitle){background-color:#213b3e!important}
body.dark-theme :is(h2,h3,h4,#dashboard-about h3,#dashboard-about .panel h3){color:#e0f6ef!important}
body.dark-theme :is(.scope,.eyebrow,.muted,.panel-foot,.sdg-card small,footer,.footer-source,.footer-disclaimer){color:#adc9c3!important}
body.dark-theme #dashboard-about .panel{color:#e3efec}
body.dark-theme .filters{background:#193d3e;border-color:#34786e}
body.dark-theme .filters:hover,body.dark-theme .filters:focus-within{background:#214b49}
body.dark-theme label,body.dark-theme .filters label{color:#d9f0e9}
body.dark-theme select,body.dark-theme .filters select,body.dark-theme button:not(nav button):not(.sdg-card):not(#overview-explore-sdg),body.dark-theme .filters #reset{background-color:#15272b;color:#e3efec;border-color:#496a6c}
body.dark-theme select:hover,body.dark-theme select:focus-visible{background:#26464b;border-color:#65bbae}
body.dark-theme .filters select:hover,body.dark-theme .filters select:focus-visible{background:#24534b}
body.dark-theme :is(.metric-controls,.sdg-controls,#overview-chart-controls):hover{background:#244045!important}
body.dark-theme th{background:#254448;color:#def3ec}
body.dark-theme td{color:#d9e9e6;border-color:#324b50}
body.dark-theme tbody tr{background:#1b2c30!important}
body.dark-theme tbody tr:nth-child(even){background:#20363a!important}
body.dark-theme tbody tr:hover{background:#2a4c4c!important}
body.dark-theme td button{color:#93ded0!important;background:transparent!important}
body.dark-theme .sdg-card.active{background:#28544e!important;border-color:#5cc8b4}
body.dark-theme .map-wrap{background:linear-gradient(145deg,#152e32,#24464a)}
body.dark-theme #map-tooltip{background:#15272bf5;color:#e3efec;border-color:#547774}
body.dark-theme .stat-viz text{fill:#d9eae6}
body.dark-theme .portal-logo{background:radial-gradient(ellipse at 50% 30%,#264544,#1b3034)!important;border-color:#3c6b63}
body.dark-theme #dashboard-about .portal-logo .overview-region{color:#d8f2e9}
body.dark-theme .portal-hero{border-color:#3c6b63}
body.dark-theme a:not(#download){color:#8edccb}
body.dark-theme #overview-explore-sdg{color:#174b46}
body.dark-theme #dashboard-about .panel:hover{background:#213b3e!important}
body.dark-theme .sector-coverage>div{background:#254448;color:#e3efec}
/* Consistent soft transitions without delaying data updates or navigation. */
@media(prefers-reduced-motion:no-preference){
body nav button,body .panel,body .sdg-card,body select,body button,body .filters,body .portal-copy,body .portal-logo,body #dashboard-about .panel{transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease}
body .panel-title,body .viz-body,body .chart,body .map-toolbar,body .map-legend,body .panel-foot,body tbody tr,body td{transition:background-color .24s ease,color .24s ease}
#map path{transition:fill .24s ease,stroke .18s ease}
body .bar-row>div>i,body .vertical-category-bar{transition:width .3s ease,height .3s ease,filter .2s ease}
}
@media(prefers-reduced-motion:reduce){body main{animation:none!important}#map path{transition:none}}
#theme-toggle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:0 0 10px;padding:7px 8px;background:#ffffff12;color:#e3f6ef;border:1px solid #74b6ad66;border-radius:6px;font-size:13px;flex-shrink:0}
#theme-toggle:hover{background:#ffffff24;border-color:#91dbca}
#theme-toggle .theme-symbol{font-size:19px;line-height:1}
.sidebar-hidden #theme-toggle .theme-label{display:none}
.sidebar-hidden #theme-toggle{padding:8px 0}
html:has(body:not(.dark-theme)){color-scheme:light}
/* Muted cartography coordinated with the night-mode surfaces. */
body.dark-theme .map-wrap{background:linear-gradient(145deg,#172a30,#213a40)}
body.dark-theme #map .map-label{fill:#e2eeea;stroke:#182e34;stroke-width:.18em;font-weight:600}
body.dark-theme #map path:hover,body.dark-theme #map g:focus-visible path,body.dark-theme #map path:focus-visible{stroke:#e6c879;stroke-width:2;filter:brightness(1.08)}
/* Keep the night-mode sidebar collapse control unfilled. */
body.dark-theme #side-panel #sidebar-toggle,body.dark-theme #side-panel #sidebar-toggle:hover,body.dark-theme #side-panel #sidebar-toggle:active{background:transparent;border-color:transparent;box-shadow:none;color:#e3efec}
/* Contain panel slides without introducing horizontal page scrolling. */
.workspace{overflow-x:clip}
/* Theme switch: moon/sun and a sliding circular thumb. */
#side-panel #theme-toggle{background:transparent;border:0;box-shadow:none;padding:4px;margin-bottom:12px;gap:0}
#side-panel #theme-toggle:hover{background:transparent}
#theme-toggle .theme-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.theme-track{position:relative;display:block;width:88px;height:38px;border-radius:24px;background:#baded5;border:1px solid #79b8ab;box-shadow:inset 0 1px 3px #063f4030;transition:background .3s,border-color .3s}
.theme-track svg{position:absolute;top:8px;width:20px;height:20px;transition:opacity .25s;color:#155f59}
.theme-moon{left:10px;fill:currentColor;opacity:0}
.theme-sun{right:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-knob{position:absolute;top:5px;left:5px;width:26px;height:26px;border-radius:50%;background:#f1faf6;box-shadow:0 2px 5px #052f3a40;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
body.dark-theme .theme-track{background:#17383c;border-color:#4d8b82}
body.dark-theme .theme-moon{opacity:1;color:#c6e8dc}
body.dark-theme .theme-sun{opacity:0}
body.dark-theme .theme-knob{transform:translateX(50px);background:#c6e8dc}
#theme-toggle:hover .theme-track{border-color:#a8e2d2}
.sidebar-hidden .theme-track{width:44px;height:26px}
.sidebar-hidden .theme-track svg{top:6px;width:12px;height:12px}
.sidebar-hidden .theme-moon{left:4px}
.sidebar-hidden .theme-sun{right:4px}
.sidebar-hidden .theme-knob{width:18px;height:18px;top:3px;left:3px}
body.dark-theme .sidebar-hidden .theme-knob{transform:translateX(18px)}
@media(prefers-reduced-motion:reduce){.theme-track,.theme-track svg,.theme-knob{transition:none}}
/* Smooth sidebar resizing with stable navigation rows. */
.workspace{transition:grid-template-columns .46s cubic-bezier(.22,1,.36,1)}
#side-panel{min-width:0;overflow-x:clip;transition:padding .46s cubic-bezier(.22,1,.36,1)}
#side-panel nav{gap:4px}
#side-panel nav button{min-height:58px;margin:0;overflow:hidden;justify-content:flex-start;transition:padding .46s cubic-bezier(.22,1,.36,1),gap .46s ease,background-color .24s,color .24s}
#side-panel .nav-text{display:block;min-width:0;max-width:150px;opacity:1;transition:opacity .18s ease,max-width .46s cubic-bezier(.22,1,.36,1),transform .46s cubic-bezier(.22,1,.36,1);transform:translateX(0)}
.sidebar-hidden #side-panel .nav-text{display:block;max-width:0;opacity:0;transform:translateX(-8px);pointer-events:none;white-space:nowrap}
.sidebar-hidden #side-panel nav button{gap:0;padding-left:13px;padding-right:0}
#side-panel .sidebar-toolbar{position:relative;min-height:34px;justify-content:flex-end}
#side-panel .sidebar-toolbar .nav-label{display:block;position:absolute;left:0;opacity:1;transition:opacity .18s ease,transform .3s ease}
.sidebar-hidden #side-panel .sidebar-toolbar .nav-label{opacity:0;transform:translateX(-8px);pointer-events:none}
#side-panel .aside-bottom{display:block;overflow:hidden;opacity:1;transition:opacity .2s ease}
.sidebar-hidden #side-panel .aside-bottom{display:block;opacity:0;pointer-events:none}
.toggle-chevron{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.theme-track{transition:width .46s ease,height .46s ease,background .3s,border-color .3s}
.theme-track svg{transition:opacity .25s,width .46s,height .46s,top .46s,left .46s,right .46s}
.theme-knob{transition:transform .46s cubic-bezier(.22,1,.36,1),width .46s,height .46s,top .46s,left .46s}
@media(max-width:760px){.sidebar-hidden #side-panel nav button{padding-left:9px}}
@media(prefers-reduced-motion:reduce){.workspace,#side-panel,#side-panel nav button,#side-panel .nav-text,#side-panel .sidebar-toolbar .nav-label,#side-panel .aside-bottom,.toggle-chevron,.theme-track,.theme-track svg,.theme-knob{transition:none}}
/* Keep barangay names legible against every choropleth shade. */
#map .barangay-map-label{font-family:Arial,Helvetica,sans-serif;font-weight:700;stroke:#f5faf8;stroke-width:.22em;stroke-linejoin:round;paint-order:stroke;fill:#123d42}
body.dark-theme #map .barangay-map-label{font-weight:700;fill:#f1f8f5;stroke:#18343a;stroke-width:.24em}
/* Readable totals and selected-area summaries on dark tables. */
body.dark-theme tfoot,body.dark-theme tfoot tr,body.dark-theme tfoot td,body.dark-theme tfoot th{background:#294b4d;color:#eff8f4;border-color:#527874;font-weight:700}
body.dark-theme tfoot td,body.dark-theme tfoot th{border-top:2px solid #60988b}
/* Download preview across the page, with charts below. */
body.panel-open[data-view="downloads"] .dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;gap:16px;align-items:stretch}
body.panel-open[data-view="downloads"] .dashboard-grid>.data-panel{grid-column:1/-1;grid-row:1;min-width:0}
body.panel-open[data-view="downloads"] .data-panel .table-scroll{flex:none;max-height:480px;min-height:180px;overflow:auto}
body.panel-open[data-view="downloads"] .dashboard-grid>.ranking-panel{display:flex;grid-column:1;grid-row:2;min-width:0}
body.panel-open[data-view="downloads"] #visualizations{display:grid;grid-template-columns:minmax(0,1fr);grid-column:2;grid-row:2;margin:0;min-width:0;height:auto;gap:16px}
body.panel-open[data-view="downloads"] #visualizations .viz-panel{min-width:0}
@media(max-width:900px){body.panel-open[data-view="downloads"] .dashboard-grid{grid-template-columns:minmax(0,1fr)}body.panel-open[data-view="downloads"] #visualizations{grid-column:1;grid-row:3}}
body.panel-open[data-view="downloads"] main.downloads-view .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:900px){body.panel-open[data-view="downloads"] main.downloads-view .dashboard-grid{grid-template-columns:minmax(0,1fr)!important}}
/* Downloads show only the selected table, fitted to the desktop viewport. */
body.panel-open[data-view="downloads"] .dashboard-grid>.ranking-panel,
body.panel-open[data-view="downloads"] #visualizations{display:none!important}
body.panel-open[data-view="downloads"] main.downloads-view .dashboard-grid{grid-template-columns:minmax(0,1fr)!important}
@media(min-width:1000px) and (min-height:650px){
body.panel-open[data-view="downloads"] main.downloads-view{height:100dvh;min-height:0;display:flex;flex-direction:column;padding-top:12px;padding-bottom:10px}
body.panel-open[data-view="downloads"] main.downloads-view>.heading{margin-bottom:10px}
body.panel-open[data-view="downloads"] .filters{padding:10px;gap:12px}
body.panel-open[data-view="downloads"] .scope{margin:8px 0}
body.panel-open[data-view="downloads"] .kpis{display:none}
body.panel-open[data-view="downloads"] #dataset-controls{margin-bottom:10px}
body.panel-open[data-view="downloads"] main.downloads-view .dashboard-grid{flex:1;min-height:0;height:auto;grid-template-rows:minmax(0,1fr)}
body.panel-open[data-view="downloads"] .dashboard-grid>.data-panel{min-height:0;display:flex;flex-direction:column}
body.panel-open[data-view="downloads"] .data-panel .table-scroll{flex:1;min-height:0;max-height:none;overflow:auto}
body.panel-open[data-view="downloads"] .data-panel .table-subtitle,body.panel-open[data-view="downloads"] .data-panel .panel-foot{padding:8px 12px}
body.panel-open[data-view="downloads"] .dashboard-footer{flex-shrink:0;margin-top:10px;padding-top:8px}
}
#download-search{display:none}
.downloads-view #download-search{display:block;flex:1;min-width:240px;max-width:520px}
#download-search>label{margin-bottom:7px}
.download-search-input{display:flex;gap:6px;align-items:center}
#download-keyword{min-width:0;flex:1;padding:10px;border:1px solid #8bbcb3;border-radius:4px;background:#f6fbf9;color:#174b46;font:inherit;font-size:14px}
#download-keyword:focus-visible{outline:2px solid #159d90;outline-offset:2px}
#download-search-status{display:block;font-size:12px;margin-top:4px;line-height:1.3}
body.dark-theme #download-keyword{background:#15272b;color:#e3efec;border-color:#496a6c}
body.dark-theme #download-keyword::placeholder{color:#adc9c3}
/* Balanced download toolbar: table, search, and export share one aligned row. */
.downloads-view #dataset-controls .controls-grid:has(#download:not([hidden])){display:grid;grid-template-columns:minmax(240px,1fr) minmax(340px,1fr) auto;gap:16px;align-items:start}
.downloads-view #dataset-controls .controls-grid>label:not([hidden]){max-width:none;min-width:0;margin:0}
.downloads-view #download-search{max-width:none;min-width:0;position:relative}
.downloads-view #dataset-controls label{font-size:13px;line-height:18px;gap:7px}
.downloads-view #download-search>label{margin:0 0 7px}
.downloads-view #dataset-controls #dataset,.downloads-view #download-keyword,.downloads-view #download-search-button,.downloads-view #download-search-clear,.downloads-view #dataset-controls #download{height:40px;border-radius:6px}
.downloads-view #download-keyword{width:100%;padding:9px 12px}
.downloads-view .download-search-input{gap:8px}
.downloads-view #download-search-button{padding:0 16px;background:#087e74;color:#fff;border-color:#087e74;font-weight:600}
.downloads-view #download-search-button:hover{background:#096b64}
.downloads-view #download-search-clear{padding:0 12px;background:transparent;color:#34746c;border-color:#a6c9c2}
body.dark-theme .downloads-view #download-search-clear{color:#bbdad3;border-color:#496a6c;background:transparent}
.downloads-view #dataset-controls #download{margin:25px 0 0;align-self:start;display:flex;align-items:center;justify-content:center;padding:0 18px;font-weight:600;white-space:nowrap}
.downloads-view #download-search-status:empty{display:none}
.downloads-view #download-search-status{margin-top:6px}
.downloads-view #dataset-description{margin-top:14px;padding-top:12px;border-top:1px solid #a7cec533;line-height:1.5;font-size:13px}
@media(max-width:1250px){.downloads-view #dataset-controls .controls-grid:has(#download:not([hidden])){grid-template-columns:minmax(200px,1fr) minmax(300px,1.2fr);gap:12px}.downloads-view #dataset-controls #download{grid-column:1/-1;justify-self:end;margin-top:0}}
@media(max-width:760px){.downloads-view #dataset-controls .controls-grid:has(#download:not([hidden])){grid-template-columns:minmax(0,1fr)}.downloads-view #dataset-controls #download{width:100%}.downloads-view #download-search-button{padding:0 12px}}
.downloads-view #dataset-controls{overflow:visible;position:relative;z-index:10}
#download-suggestions{position:absolute;left:0;right:0;top:69px;max-height:290px;overflow:auto;padding:5px;background:#fff;border:1px solid #7bada4;border-radius:8px;box-shadow:0 10px 25px #001e3433;z-index:20}
#download-suggestions[hidden]{display:none}
#download-suggestions button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;color:#174b46;border-radius:4px}
#download-suggestions button small{display:block;margin-top:4px;font-size:12px;line-height:1.4;opacity:.8}
#download-suggestions button:hover,#download-suggestions button:focus-visible{background:#e0f2ed;outline:2px solid #50aa9a;outline-offset:-2px}
body.dark-theme #download-suggestions{background:#193236;border-color:#568a80}
body.dark-theme #download-suggestions button{background:transparent;color:#e3efec}
body.dark-theme #download-suggestions button:hover,body.dark-theme #download-suggestions button:focus-visible{background:#28514f}
.overview-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
body.about-view :is(#overview-about-cbms,#overview-visit-psa){display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #9bd0c6;border-radius:7px;color:#e9f8f3;background:transparent;text-decoration:none;font-size:13px;font-weight:600;line-height:normal;transition:background .2s,border-color .2s}
body.about-view :is(#overview-about-cbms,#overview-visit-psa):hover{background:#ffffff18;border-color:#d0f4e9}
body.about-view :is(#overview-about-cbms,#overview-visit-psa):focus-visible{outline:3px solid #f5d778;outline-offset:3px}
.cbms-logo-link{display:contents}
.cbms-logo-link .overview-cbms-logo{cursor:pointer}
.cbms-logo-link:focus-visible .overview-cbms-logo{outline:3px solid #e4bf52;outline-offset:5px;border-radius:50%}
/* Match the compact sidebar controls in width and alignment. */
.sidebar-hidden #side-panel .sidebar-toolbar{justify-content:center}
.sidebar-hidden #side-panel #sidebar-toggle{width:42px;height:34px;padding:4px}
.sidebar-hidden #side-panel #sidebar-toggle svg{width:28px;height:28px}
.sidebar-hidden #side-panel #theme-toggle{width:42px;height:34px;align-self:center;padding:4px 0}
.sidebar-hidden .theme-track{width:32px;height:22px;flex-shrink:0}
.sidebar-hidden .theme-track svg{top:5px;width:10px;height:10px}
.sidebar-hidden .theme-moon{left:3px}
.sidebar-hidden .theme-sun{right:3px}
.sidebar-hidden .theme-knob{width:14px;height:14px;top:3px;left:3px}
body.dark-theme .sidebar-hidden .theme-knob{transform:translateX(10px)}
/* Overview actions share a clear, polished visual rhythm. */
body.about-view .overview-actions{gap:12px;align-items:center}
body.about-view #overview-explore-sdg,body.about-view :is(#overview-about-cbms,#overview-visit-psa){display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:42px;padding:10px 18px;border-radius:9px;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;line-height:20px;letter-spacing:.1px;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
body.about-view #overview-explore-sdg{background:linear-gradient(135deg,#ffe491,#f3ce65);border:1px solid #f9dd84;color:#154b46;box-shadow:0 3px 8px #003c3c24}
body.about-view :is(#overview-about-cbms,#overview-visit-psa){background:#ffffff09;border:1px solid #90c8bd;color:#edf9f5;box-shadow:none}
body.about-view #overview-explore-sdg:hover{background:linear-gradient(135deg,#ffecad,#ffdc7c);transform:translateY(-1px);box-shadow:0 5px 12px #003c3c35}
body.about-view :is(#overview-about-cbms,#overview-visit-psa):hover{background:#ffffff16;border-color:#d0eee6;transform:translateY(-1px);box-shadow:0 4px 10px #003c3c20}
body.about-view #overview-explore-sdg:active,body.about-view :is(#overview-about-cbms,#overview-visit-psa):active{transform:translateY(0);box-shadow:none}
.overview-actions svg{flex-shrink:0}
@media(prefers-reduced-motion:reduce){body.about-view #overview-explore-sdg,body.about-view :is(#overview-about-cbms,#overview-visit-psa){transition:none;transform:none}}
body[data-view="downloads"] #table-foot:empty{display:none}
/* Refined SDG indicator cards, preserving the compact grid. */
body #sdg-cards{gap:8px;padding:10px;border-radius:10px;background:#e7f2ef;border:1px solid #bdd7d0;box-shadow:none}
body #sdg-cards .sdg-card{position:relative;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #cadfd9;border-radius:8px;background:#fff;color:#214e49;box-shadow:0 2px 5px #123b3510;overflow:hidden;transition:background-color .2s,border-color .2s,box-shadow .2s}
body #sdg-cards .sdg-icon{width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:3px;box-shadow:0 2px 5px #001e2420}
body #sdg-cards .sdg-card>span{min-width:0;font-size:11px;line-height:1.35;text-align:left}
body #sdg-cards .sdg-card b{display:block;margin:0 0 5px;font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:750;line-height:1.1;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:#075d59}
body #sdg-cards .sdg-card small{display:block;margin-top:5px;font-size:10px;line-height:1.25;color:#607e78;letter-spacing:.15px}
body #sdg-cards .sdg-card:hover{background:#f1faf6;border-color:#6aaea0;box-shadow:0 3px 9px #123b3520}
body #sdg-cards .sdg-card.active{background:#e0f3ec;border-color:#159987;box-shadow:inset 3px 0 #159987,0 2px 6px #123b3515}
body.dark-theme #sdg-cards{background:#14282d!important;border-color:#355459}
body.dark-theme #sdg-cards .sdg-card{background:#1c3338!important;border-color:#3b575c;color:#dfede8;box-shadow:0 2px 6px #00000015}
body.dark-theme #sdg-cards .sdg-card b{color:#f0faf6}
body.dark-theme #sdg-cards .sdg-card small{color:#a5c5bc!important}
body.dark-theme #sdg-cards .sdg-card:hover{background:#25454a!important;border-color:#6dada0;box-shadow:0 3px 9px #00000025}
body.dark-theme #sdg-cards .sdg-card.active{background:#264d48!important;border-color:#72c9b5;box-shadow:inset 3px 0 #72c9b5,0 2px 8px #00000020}
@media(max-width:1100px){body #sdg-cards .sdg-card{gap:8px;padding:8px}body #sdg-cards .sdg-icon{width:34px;height:34px;flex-basis:34px}body #sdg-cards .sdg-card b{font-size:18px}}
@media(prefers-reduced-motion:reduce){body #sdg-cards .sdg-card{transition:none}}
/* Public-facing attribution and source footer. */
body .dashboard-footer{display:block;border-top:1px solid #9dc9bf;margin-top:14px;padding:12px 0 0;color:#456e67;font-size:11px;line-height:1.5}
body .dashboard-footer .footer-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px;width:100%;align-items:start}
body .dashboard-footer .footer-identity>b{font-size:12px;color:#175d55;display:block}
body .dashboard-footer small{display:block;font-size:11px;line-height:1.5;margin:2px 0 0}
body .dashboard-footer .footer-source{font-size:11px;line-height:1.5;margin:4px 0 0;padding:0;border:0}
body .dashboard-footer .footer-credit{text-align:right}
body .dashboard-footer .footer-about{display:inline-block;margin-top:3px;font-size:11px;font-weight:600;color:#08796b;text-decoration:none}
body .dashboard-footer .footer-about:hover{text-decoration:underline;text-underline-offset:3px}
body.dark-theme .dashboard-footer{border-color:#3d615b;color:#adc9c3}
body.dark-theme .dashboard-footer .footer-identity>b{color:#def2eb}
body.dark-theme .dashboard-footer .footer-about{color:#8edccb}
@media(max-width:760px){body .dashboard-footer .footer-details{grid-template-columns:1fr;gap:10px}body .dashboard-footer .footer-credit{text-align:left}}
/* Theme-aware sidebar surfaces, navigation, and attribution. */
body #side-panel{background:linear-gradient(180deg,#e0f1eb 0%,#cde6de 100%);color:#24594f;border-right:1px solid #b4d6ca;box-shadow:3px 0 14px #164c4010;transition:background-color .3s,color .3s,border-color .3s,padding .46s cubic-bezier(.22,1,.36,1)}
body #side-panel .nav-label{color:#537a70;font-weight:700;letter-spacing:1px}
body #side-panel nav button{color:#285b52;border:1px solid transparent;border-radius:8px;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,padding .46s,gap .46s}
body #side-panel .nav-icon,body #side-panel #sidebar-toggle{color:#226a5e}
body #side-panel #sidebar-toggle{background:transparent;border:0;box-shadow:none}
body #side-panel nav button:hover{background:#f4fbf7;border-color:#b6d9cd;color:#105a4d}
body #side-panel nav button.active{background:#087c70;color:#fff;border-color:#087c70;box-shadow:inset 3px 0 #8ce1c9,0 3px 8px #075d5920}
body #side-panel nav button.active .nav-icon{color:#fff}
body #side-panel .aside-bottom{border-color:#9bc7b8;color:#346457}
body #side-panel .aside-bottom small{color:#527b70}
body.dark-theme #side-panel{background:linear-gradient(180deg,#172f34 0%,#10262b 100%);border-color:#36565a;color:#dcece6;box-shadow:3px 0 14px #00000018}
body.dark-theme #side-panel .nav-label{color:#91b7ad}
body.dark-theme #side-panel nav button{color:#c7ddd5}
body.dark-theme #side-panel .nav-icon,body.dark-theme #side-panel #sidebar-toggle{color:#a2d2c4}
body.dark-theme #side-panel nav button:hover{background:#24444a;border-color:#42666a;color:#f0faf6}
body.dark-theme #side-panel nav button.active{background:#28564f;color:#f1faf6;border-color:#538f7f;box-shadow:inset 3px 0 #8ad4bb,0 3px 8px #00000018}
body.dark-theme #side-panel nav button.active .nav-icon{color:#b1edd5}
body.dark-theme #side-panel .aside-bottom{border-color:#365951;color:#bdd7ce}
body.dark-theme #side-panel .aside-bottom small{color:#91b5a9}
body #side-panel #theme-toggle .theme-track{box-shadow:inset 0 1px 3px #073b3b20,0 2px 6px #073b3b12}
@media(prefers-reduced-motion:reduce){body #side-panel,body #side-panel nav button{transition:none}}
body #side-panel{background-image:linear-gradient(180deg,#ffffff08,#003d3510);background-color:#dcefe7}
body.dark-theme #side-panel{background-image:linear-gradient(180deg,#ffffff08,#003d3510);background-color:#142b30}
/* Slightly stronger separation between sidebar and page in both themes. */
body #side-panel{background-color:#c1ddd2;border-right-color:#94bcae}
body.dark-theme #side-panel{background-color:#254148;border-right-color:#527077}
/* Phone and tablet layouts: preserve text size and contain wide data. */
@media(max-width:999px){
body .workspace,body .workspace.sidebar-hidden{grid-template-columns:56px minmax(0,1fr)!important;min-height:100dvh;height:auto}
body #side-panel{position:sticky;top:0;width:230px;height:100dvh!important;min-height:0!important;z-index:30;padding:12px 7px!important;overflow-y:auto;box-shadow:8px 0 24px #001e3430}
body .sidebar-hidden #side-panel{width:56px;box-shadow:none}
body #side-panel nav{display:flex;flex-direction:column;overflow:visible;gap:4px}
body #side-panel nav button{min-height:44px;padding:9px 10px;font-size:13px}
body .sidebar-hidden #side-panel nav button{padding-left:9px}
body #side-panel .aside-bottom{padding:12px 4px 0;font-size:10px}
body .sidebar-hidden #side-panel .aside-bottom{display:none}
body main,body.about-view main,body.panel-open main.downloads-view{padding:12px;min-width:0;height:auto;display:block}
body .heading{margin-bottom:12px}
body h2{font-size:23px;line-height:1.2}
body .filters{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
body select,body input[type="search"]{font-size:16px!important;min-height:44px}
body #reset,body .map-toolbar button{min-height:44px}
body .controls-grid,body .sdg-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
body .dashboard-grid,body .sdg-top,body .sdg-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;height:auto!important;gap:14px}
body .dashboard-grid>.panel{grid-column:1!important;min-width:0}
body .map-wrap{height:380px!important;min-height:300px;flex:none!important}
body #map{width:100%;height:100%}
body .map-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:8px}
body .map-toolbar>div{display:flex;gap:5px}
body .map-legend{display:flex;flex-wrap:wrap;gap:6px;font-size:11px}
body .table-scroll,body .data-panel .table-scroll{max-height:420px!important;min-height:160px;overflow:auto;-webkit-overflow-scrolling:touch}
body table{font-size:13px;min-width:440px}
body th,body td{padding:10px 9px}
body .visualizations{display:grid;grid-template-columns:minmax(0,1fr)!important;height:auto}
body #sdg-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto}
body #sdg-cards .sdg-card{min-height:102px}
body #sdg-map-slot{position:static}
body.about-view #dashboard-about{height:auto;display:block}
body.about-view .portal-hero{height:auto;min-height:0;grid-template-columns:1fr}
body.about-view .portal-copy{padding:24px}
body.about-view #portal-title{font-size:clamp(27px,5vw,40px)}
body.about-view .portal-logo{padding:20px;min-height:0;container-type:normal}
body.about-view .portal-logo .overview-cbms-logo{width:180px;height:180px}
body.about-view #dashboard-about .overview-region{white-space:normal;font-size:18px}
body.about-view #dashboard-about>.panel,body.about-view #dashboard-about .about-grid{margin-top:12px}
body.about-view .about-grid{display:grid;grid-template-columns:minmax(0,1fr)}
body.about-view #dashboard-about .panel{height:auto;min-height:0;padding:16px}
body.about-view #dashboard-about p{font-size:14px;line-height:1.6}
body .downloads-view #dataset-controls .controls-grid:has(#download:not([hidden])){grid-template-columns:minmax(0,1fr)!important}
body .downloads-view #dataset-controls #download{width:100%;margin-top:0;min-height:44px}
body .downloads-view #download-search{min-width:0;width:100%}
body .download-search-input{flex-wrap:wrap}
body #download-keyword{flex-basis:100%}
body #download-search-button,body #download-search-clear{min-height:44px;flex:1}
body #download-suggestions{top:116px;max-height:240px}
body .dashboard-footer .footer-details{grid-template-columns:1fr;gap:10px}
body .dashboard-footer .footer-credit{text-align:left}
}
@media(max-width:540px){
body main,body.about-view main{padding:10px}
body .filters{grid-template-columns:minmax(0,1fr)}
body .kpis{grid-template-columns:minmax(0,1fr);gap:8px}
body .kpis article{min-height:90px;padding:14px}
body #sdg-cards{grid-template-columns:minmax(0,1fr)}
body #sdg-cards .sdg-card{min-height:88px;padding:12px;gap:12px}
body #sdg-cards .sdg-card>span{font-size:13px}
body #sdg-cards .sdg-card small{font-size:11px}
body .panel-title{flex-wrap:wrap;padding:10px;gap:4px}
body .panel-title h3{font-size:14px}
body .portal-copy{padding:18px!important}
body .overview-actions{gap:8px}
body .overview-actions>*{width:100%}
body .brand b{font-size:34px}
body header{padding:16px}
}
/* Keep map range symbols crisp and readable on phones and tablets. */
@media(max-width:999px){
body .map-legend{font-family:Arial,Helvetica,sans-serif;font-size:13px!important;line-height:1.6;gap:8px 12px;padding:10px 12px}
body .map-legend>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:0}
body .map-legend .swatch{display:inline-block;width:12px;height:12px;flex:0 0 12px;margin:0}
}
/* Keyboard access and readable chart alternatives. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-content{position:fixed;top:8px;left:8px;z-index:1000;transform:translateY(-150%);padding:12px 18px;background:#fff;color:#075450!important;border:3px solid #087c70;border-radius:6px;font-weight:700}
.skip-content:focus{transform:none}
body :is(button,a,input,select,summary,[tabindex="0"]):focus-visible{outline:3px solid #087c70;outline-offset:3px}
body.dark-theme :is(button,a,input,select,summary,[tabindex="0"]):focus-visible{outline-color:#f5d778}
#side-panel button:focus-visible{outline-offset:-3px}
#map [role="button"]:focus-visible path,#map path[role="button"]:focus-visible{stroke:#d28a00;stroke-width:3;filter:brightness(1.12)}
body.dark-theme #map [role="button"]:focus-visible path,body.dark-theme #map path[role="button"]:focus-visible{stroke:#ffe39a}
.chart-text-alternative{padding:10px 14px;border-top:1px solid #86aaa655;font-size:13px;line-height:1.5}
.chart-text-alternative summary{cursor:pointer;font-weight:600;min-height:28px}
.chart-text-alternative ul{padding-left:20px;max-height:240px;overflow:auto}
body:not(.dark-theme) .sdg-card small{color:#44655d!important}
@media(forced-colors:active){nav button.active,.sdg-card.active{outline:2px solid Highlight} .swatch{border:1px solid CanvasText}}
body[data-view="compare"] main>.filters,body[data-view="compare"] main>.scope,body[data-view="compare"] main>.kpis,body[data-view="compare"] #dataset-controls,body[data-view="compare"] .dashboard-grid,body[data-view="compare"] #sdg-panel,body[data-view="compare"] #visualizations{display:none!important}
#compare-panel[hidden]{display:none}
.compare-controls{padding:18px}
.compare-controls>p{margin:0 0 16px;line-height:1.5}
.compare-filters{display:grid;grid-template-columns:1fr 1fr 180px;gap:14px}
.compare-picker{margin-top:16px}
.compare-picker summary{cursor:pointer;font-weight:700;padding:8px 0}
.compare-area-actions{display:flex;gap:8px;margin:8px 0}
.compare-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.compare-areas label{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:400;min-height:32px}
.compare-areas input{width:18px;height:18px;accent-color:#087c70}
.compare-bars{padding:18px;display:grid;gap:12px}
.compare-bar{display:grid;grid-template-columns:180px minmax(0,1fr) 95px;gap:12px;align-items:center;font-size:14px}
.compare-bar b{text-align:right;font-variant-numeric:tabular-nums}
.compare-track{height:18px;background:#d5e9e2;border-radius:4px;overflow:hidden}
.compare-track i{height:100%;display:block;background:#13897c;border-radius:4px}
body.dark-theme .compare-track{background:#304d52}
body.dark-theme .compare-track i{background:#76bca9}
.compare-note,.compare-empty{padding:12px 18px;margin:0;line-height:1.5;font-size:13px}
#compare-result .table-scroll{max-height:450px}
@media(max-width:999px){.compare-filters{grid-template-columns:1fr}.compare-areas{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-bar{grid-template-columns:minmax(0,1fr) 85px}.compare-bar>span{grid-column:1/-1}.compare-controls{padding:12px}}
@media(max-width:540px){.compare-areas{grid-template-columns:1fr}}
#download-confirmation{width:min(540px,calc(100vw - 32px));max-height:85dvh;padding:26px;border:1px solid #98c6b9;border-radius:12px;background:#f6fbf8;color:#174f48;box-shadow:0 20px 70px #001c4050}
#download-confirmation::backdrop{background:#071e29a8}
#download-confirmation h2{font-size:21px;line-height:1.5;letter-spacing:0;margin:0;overflow-wrap:anywhere}
.download-confirmation-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.download-confirmation-actions button{min-height:44px;padding:10px 22px;border-radius:6px}
#download-confirmation .confirm-download{background:#087c70;color:#fff;border-color:#087c70;font-weight:700}
#download-confirmation .confirm-download:hover{background:#09665d}
body.dark-theme #download-confirmation{background:#1b3338;color:#e3efec;border-color:#557d74}
body.dark-theme #download-confirmation .confirm-download{background:#197f70;color:#fff;border-color:#5aac97}
/* Download dialog: distinct primary and secondary actions in both themes. */
#download-confirmation{border-top:4px solid #36b6a1;box-shadow:0 24px 72px #001c4060}
#download-confirmation .download-confirmation-actions button{min-width:104px;border-radius:9px;font-weight:700;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body #download-confirmation button[value="cancel"]{background:#edf5f2;color:#315e55;border-color:#afcbc1}
body #download-confirmation button[value="cancel"]:hover{background:#dcece5;border-color:#6f9e8e}
body #download-confirmation button.confirm-download{background:linear-gradient(135deg,#087c70,#09655d);color:#fff;border-color:#087c70;box-shadow:0 4px 12px #087c7030}
body #download-confirmation button.confirm-download:hover{background:#075b52;border-color:#075b52;box-shadow:0 6px 16px #087c7040;transform:translateY(-1px)}
body.dark-theme #download-confirmation .download-confirmation-actions button[value="cancel"]{background:#233e43;color:#cce2de;border-color:#577b7d}
body.dark-theme #download-confirmation .download-confirmation-actions button[value="cancel"]:hover{background:#304e52;border-color:#8baba6}
body.dark-theme #download-confirmation .download-confirmation-actions button.confirm-download{background:linear-gradient(135deg,#84dfc5,#5dc7b0);color:#103b35;border-color:#a0edd8;box-shadow:0 4px 16px #63d2b82e}
body.dark-theme #download-confirmation .download-confirmation-actions button.confirm-download:hover{background:#a0edd8;border-color:#c0f6e7;box-shadow:0 6px 20px #63d2b84d}
#download-confirmation .download-confirmation-actions button:focus-visible{outline:3px solid #e5b53e;outline-offset:4px}
#download-confirmation .download-confirmation-actions button:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){#download-confirmation .download-confirmation-actions button{transition:none;transform:none}}
/* Clarify the source directly beneath the population summary. */
.cbms-source-notice{display:block;min-height:0;margin:0 0 18px;padding:14px 17px;border:1px solid #b9d7cd;border-left:4px solid #13877f;border-radius:8px;background:#edf7f2;color:#234f48;font-size:14px;line-height:1.6}
.cbms-source-notice>strong{display:block;color:#08665d;margin-bottom:3px}
.cbms-source-notice p{margin:0}
body.dark-theme .cbms-source-notice{background:#203a3e;border-color:#42666a;border-left-color:#7bd6bb;color:#d5e7e1}
body.dark-theme .cbms-source-notice>strong{color:#a0e7d1}
.kpis[hidden]+.cbms-source-notice,body.about-view .cbms-source-notice,body.compare-view .cbms-source-notice{display:none}
.cbms-source-notice[hidden]{display:none!important}
#map-expand{white-space:nowrap}
#map-dialog{width:calc(100vw - 40px);max-width:1600px;height:calc(100dvh - 40px);max-height:none;padding:0;border:1px solid #76a99c;border-radius:12px;background:#edf7f2;color:inherit;overflow:hidden;box-shadow:0 24px 80px #001c4060}
#map-dialog::backdrop{background:#061b25b8}
body #map-dialog #map-panel{display:flex;flex-direction:column;width:100%;height:100%;margin:0;border:0;max-height:none}
body #map-dialog #map-panel .map-wrap{flex:1 1 0;height:auto!important;min-height:0!important;max-height:none!important}
body #map-dialog #map{width:100%;height:100%}
#map-dialog .panel-title,#map-dialog .map-toolbar,#map-dialog .map-legend,#map-dialog .panel-foot{flex-shrink:0}
body.map-expanded{overflow:hidden}
body #map-dialog #map-expand{background:#d3eee4;color:#075b51;border-color:#409e8b}
body.dark-theme #map-dialog{background:#1b3338;border-color:#5b9585}
body.dark-theme #map-dialog #map-expand{background:#28564f;color:#e4fff4;border-color:#8ad4bb}
@media(max-width:600px){#map-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}}
#map-data-title{flex-shrink:0;padding:12px 14px;font-size:14px;font-weight:700;line-height:1.5;color:#155b52;background:#e4f2ed;border-bottom:1px solid #bdd9cf;overflow-wrap:anywhere}
body.dark-theme #map-data-title{color:#d8f1e8;background:#234147;border-color:#42666a}
/* Compact summary section leaves more room for the map and tables. */
body .kpis{margin-bottom:12px}
body .kpis article{min-height:90px;padding:12px 17px}
body .kpis h3{margin-bottom:5px}
body .kpis b{font-size:29px;line-height:1.1}
body .kpis small{margin-top:5px}
body .cbms-source-notice{padding:9px 14px;margin-bottom:12px;font-size:13px;line-height:1.45}
body .cbms-source-notice>strong{margin-bottom:2px}
@media(max-width:760px){body .kpis article{min-height:88px;padding:10px 12px}body .kpis b{font-size:26px}}
/* Compact geography and statistical filters. */
body .filters{padding:9px 14px;gap:14px}
body .filters label,body #dataset-controls label{gap:4px;font-size:13px;line-height:18px}
body .filters select,body #dataset-controls select{padding-top:7px;padding-bottom:7px;min-height:34px}
body .filters #reset{padding:7px 10px;min-height:34px}
body #dataset-controls{padding:10px 14px;margin-bottom:12px}
body #dataset-controls .controls-grid{gap:12px}
body #dataset-description{margin:8px 0 0;font-size:13px;line-height:1.4}
body #scope{margin:10px 0 8px}
@media(pointer:coarse){body .filters select,body #dataset-controls select,body .filters #reset{min-height:44px}}
@keyframes map-backdrop-in{from{background:transparent}to{background:#061b25b8}}
@keyframes map-backdrop-out{from{background:#061b25b8}to{background:transparent}}
#map-dialog[open]::backdrop{animation:map-backdrop-in .32s ease-out both}
#map-dialog.map-closing::backdrop{animation:map-backdrop-out .22s ease-in both}
@media(prefers-reduced-motion:reduce){#map-dialog[open]::backdrop{animation:none}}
/* Slightly shorter desktop title banner. */
@media(min-width:1101px){body .landmark-header{min-height:165px;padding-top:14px;padding-bottom:14px}}
/* Phone layouts: compact summaries, readable controls, and contained overlays. */
@media(max-width:999px){
body .landmark-header{min-height:0;padding:16px 18px;gap:10px 14px}
body .landmark-header .province h1{font-size:clamp(21px,4vw,30px);line-height:1.15}
body .landmark-header .province>small{font-size:10px;line-height:1.5}
body .filters,body #dataset-controls{padding:10px;gap:10px}
body .filters label,body #dataset-controls label{font-size:13px;line-height:1.4}
body .map-toolbar>div{flex-wrap:wrap;justify-content:flex-end}
body .map-toolbar button{min-width:44px}
body .panel-title>span{white-space:normal}
body .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body .kpis article{min-height:102px;padding:12px 10px;align-items:flex-start}
body .kpis h3{font-size:11px;line-height:1.3;letter-spacing:0}
body .kpis b{font-size:clamp(21px,5vw,28px);overflow-wrap:anywhere}
body .kpis small{font-size:11px;line-height:1.4}
body .cbms-source-notice{font-size:13px;line-height:1.5}
body.about-view .portal-logo .overview-cbms-logo{width:140px;height:140px}
body .overview-actions>*{min-height:44px}
body #map-dialog #map-panel .map-wrap{flex:1 1 0!important;min-height:120px!important;height:auto!important}
body #map-dialog #map-panel{overflow-y:auto}
body #map-dialog #map-data-title{font-size:12px;padding:8px 10px;max-height:100px;overflow:auto}
body #map-dialog .panel-foot{padding:6px 10px;font-size:11px}
body #map-dialog .map-legend{padding:6px 10px;font-size:11px!important;gap:4px 8px}
body #map-dialog .map-legend>span{font-size:11px}
body .dashboard-footer{overflow-wrap:anywhere}
}
@media(max-width:360px){body .kpis{grid-template-columns:1fr}body .kpis article{min-height:80px}}
/* Desktop layouts scale by available width without crushing maps on short screens. */
@media(min-width:1000px){
body main{padding:clamp(16px,1.3vw,28px)}
body.panel-open:not(.about-view) .dashboard-grid{height:auto;align-items:start;gap:16px}
body.panel-open:not(.about-view) .dashboard-grid>.panel{height:clamp(480px,var(--first-viz-height,600px),780px);min-height:0;display:flex;flex-direction:column}
body.panel-open:not(.about-view) .map-wrap{flex:1;min-height:200px;height:auto}
body.panel-open:not(.about-view) .data-panel .table-scroll{flex:1;min-height:0;max-height:none;overflow:auto}
body.panel-open:not(.about-view) .ranking-panel .chart{flex:1;min-height:0;overflow:auto}
body .filters{flex-wrap:wrap}
body .filters label{min-width:160px}
body .map-toolbar{flex-wrap:wrap;gap:6px}
body .map-toolbar>div{display:flex;flex-wrap:wrap;gap:4px}
body .panel-title{gap:8px;flex-wrap:wrap}
body .panel-title>span{white-space:normal}
body.panel-open[data-view="sdg"] .sdg-top{height:auto;min-height:0;align-items:stretch}
body.panel-open[data-view="sdg"] #sdg-map-slot>.map-panel{height:100%;min-height:560px}
body.panel-open[data-view="sdg"] .sdg-cards{grid-template-rows:none;align-content:start}
body.panel-open[data-view="sdg"] .sdg-card{min-height:104px}
}
@media(min-width:1000px) and (max-width:1599px){
body.panel-open:not(.about-view):not([data-view="overview"]) .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.panel-open:not(.about-view) .dashboard-grid>.ranking-panel{grid-column:1/-1;height:auto;min-height:300px}
body.panel-open:not(.about-view) .ranking-panel .chart{columns:2;column-gap:28px}
body.panel-open:not(.about-view) .ranking-panel .bar-row{break-inside:avoid}
body.panel-open[data-view="sdg"] .sdg-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.panel-open[data-view="sdg"] .sdg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1600px){
body.panel-open:not(.about-view):not([data-view="overview"]) .dashboard-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,1fr)}
}
@media(min-width:2400px){body main,body.about-view main{max-width:2200px;width:100%;margin-inline:auto}body .panel-title h3{font-size:16px}}
/* Floating map dimensions take priority over desktop panel sizing. */
body #map-dialog #map-panel{height:100%;min-height:0}
/* Compact phone map controls. */
@media(max-width:600px){
body #map-panel .map-toolbar{padding:6px;gap:5px}
body #map-panel .map-toolbar>div{gap:4px}
body #map-panel .map-toolbar button{font-size:12px;line-height:16px;min-height:36px;min-width:36px;padding:6px 8px;border-radius:5px}
body #map-panel .map-toolbar #zoom-in,body #map-panel .map-toolbar #zoom-out{width:36px;padding:6px}
body #map-panel .map-toolbar #map-back{max-width:100%;white-space:normal;text-align:left}
}
/* The population ranking fills its own row instead of leaving an empty column. */
@media(min-width:1000px){
body.panel-open[data-view="overview"] .dashboard-grid>.ranking-panel{display:flex;grid-column:1/-1;height:auto;min-height:0}
body.panel-open[data-view="overview"] .ranking-panel .chart{columns:2;column-gap:28px;overflow-x:hidden;min-height:0;padding:16px}
body.panel-open[data-view="overview"] .ranking-panel .bar-row{break-inside:avoid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 72px;min-width:0}
body.panel-open[data-view="overview"] .ranking-panel .bar-row>*{min-width:0}
}
/* Population overview: ranking beside the map, area table below. */
@media(min-width:1000px){
body.panel-open[data-view="overview"] .dashboard-grid>#map-panel{order:0}
body.panel-open[data-view="overview"] .dashboard-grid>.ranking-panel{order:1;grid-column:auto;height:clamp(480px,var(--first-viz-height,600px),780px);min-height:0}
body.panel-open[data-view="overview"] .ranking-panel .chart{columns:1;overflow-y:auto}
body.panel-open[data-view="overview"] .dashboard-grid>.data-panel{order:2;grid-column:1/-1;height:auto}
body.panel-open[data-view="overview"] .data-panel .table-scroll{flex:none;max-height:520px;min-height:220px}
}
@media(max-width:999px){
body[data-view="overview"] .dashboard-grid>#map-panel{order:0}
body[data-view="overview"] .dashboard-grid>.ranking-panel{display:flex;flex-direction:column;order:1}
body[data-view="overview"] .dashboard-grid>.data-panel{order:2}
}
/* Distribute SDG cards evenly across the height beside the map. */
@media(min-width:1000px){
body.panel-open[data-view="sdg"] .sdg-cards{align-content:stretch;grid-auto-rows:minmax(104px,1fr)}
body.panel-open[data-view="sdg"] .sdg-card{height:100%}
}
/* Scale SDG content with its card width, not the monitor width. */
body #sdg-cards .sdg-card{container-type:inline-size;gap:clamp(8px,1vw,16px)}
body #sdg-cards .sdg-card .sdg-icon{width:clamp(40px,17cqw,72px);height:clamp(40px,17cqw,72px);flex:0 0 auto;object-fit:contain}
body #sdg-cards .sdg-card>span{min-width:0;font-size:clamp(12px,4.5cqw,18px);line-height:1.35;overflow-wrap:break-word}
body #sdg-cards .sdg-card b{font-size:clamp(20px,8cqw,34px);line-height:1.15;margin-bottom:5px}
body #sdg-cards .sdg-card small{font-size:clamp(10px,3.6cqw,14px);line-height:1.35;margin-top:5px}
/* Emphasize the CBMS data-source notice. */
body .cbms-source-notice{background:#fff8df;border:1px solid #d7b85b;border-left:5px solid #b68b20;box-shadow:0 2px 8px #8b6a1412;color:#51421c}
body .cbms-source-notice>strong{color:#725510}
body.dark-theme .cbms-source-notice{background:#343727;border-color:#8b7d42;border-left-color:#f0cf70;box-shadow:0 2px 10px #00000020;color:#eee6cc}
body.dark-theme .cbms-source-notice>strong{color:#f5d778}
/* Data-source highlight follows the dashboard teal and mint palette. */
body .cbms-source-notice{background:#ddf2eb;border:1px solid #7bbdb0;border-left:5px solid #0d8b7d;box-shadow:0 2px 8px #075b5912;color:#234f48}
body .cbms-source-notice>strong{color:#07675d}
body.dark-theme .cbms-source-notice{background:#244641;border-color:#4e8d7f;border-left-color:#83d8bf;box-shadow:0 2px 10px #00000020;color:#dfefe9}
body.dark-theme .cbms-source-notice>strong{color:#a4ead3}
/* Boundary disclaimer travels with the shared map, including its dialog. */
body #map-panel .map-boundary-notice{flex-shrink:0;margin:0;padding:5px 12px 8px;font-size:12px;font-style:italic;line-height:1.4;color:#345e56;background:#e4f2ed}
body.dark-theme #map-panel .map-boundary-notice{color:#c4dfd5;background:#203a3e}
/* Keep the download preview in document flow above the footer. */
body.panel-open[data-view="downloads"] main.downloads-view{height:auto;min-height:0;display:block}
body.panel-open[data-view="downloads"] main.downloads-view .dashboard-grid{height:auto;min-height:0;grid-template-rows:auto;align-items:start}
body.panel-open[data-view="downloads"] .dashboard-grid>.data-panel{height:auto;min-height:0}
body.panel-open[data-view="downloads"] .data-panel>.table-scroll{flex:none;min-height:0;max-height:600px;overflow:auto}
body.panel-open[data-view="downloads"] .dashboard-grid>.ranking-panel,
body.panel-open[data-view="downloads"] .dashboard-grid>#map-panel{display:none}
/* Preserve readable download columns and expose horizontal scrolling. */
body[data-view="downloads"] .data-panel>.table-scroll{max-width:100%;overflow-x:scroll;overflow-y:auto;scrollbar-width:auto;scrollbar-color:#559b91 #dcece7}
body[data-view="downloads"] #detail-table{width:max-content;min-width:100%;table-layout:auto}
body[data-view="downloads"] #detail-table th,
body[data-view="downloads"] #detail-table td{min-width:180px;white-space:nowrap}
body.dark-theme[data-view="downloads"] .data-panel>.table-scroll{scrollbar-color:#82c7bb #203a3e}