/* HDX redesign tokens (data.humdata.org v2 components) */
:root {
  --hdx-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hdx-font-display: 'Merriweather', serif;
  --hdx-neutral-0: #ffffff; --hdx-neutral-01: #fafbfb; --hdx-neutral-05: #f5f7f7;
  --hdx-neutral-1: #ebeff0; --hdx-neutral-15: #e2e8e8; --hdx-neutral-2: #d8e0e1;
  --hdx-neutral-3: #c4d0d1; --hdx-neutral-4: #b1c1c2; --hdx-neutral-5: #9db1b3;
  --hdx-neutral-7: #5e6a6b; --hdx-neutral-8: #3f4748; --hdx-neutral-95: #101212;
  --hdx-primary-3: #74a1e8; --hdx-primary-5: #1862d8; --hdx-primary-6: #134ead;
  --hdx-primary-7: #0e3b82;
  --hdx-brand-15: #bee0d6; --hdx-brand-1: #d4eae4; --hdx-brand-3: #7dc1ad;
  --hdx-brand-6: #1e795f;
  --hdx-radius-sm: 2px; --hdx-radius-md: 4px;
  --hdx-shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --hdx-shadow-lg: 0 8px 35px rgba(0,0,0,0.16);
  --ink: var(--hdx-neutral-95); --muted: var(--hdx-neutral-7); --line: var(--hdx-neutral-2);
}
* { box-sizing: border-box; }
/* always reserve the scrollbar gutter so the page width doesn't shift between tabs */
html { scrollbar-gutter: stable; }
body {
  margin: 0; padding: 0 16px 32px;
  font-family: var(--hdx-font-body);
  color: var(--ink); max-width: 1200px; margin: 0 auto;
}
/* Standing notice above everything: present on every view, but quiet enough not
   to compete with the page. Full-bleed so it reads as chrome, not content. */
.dev-banner {
  margin: 0 -16px 0; padding: 9px 16px;
  background: #fdf1cf; border-bottom: 1px solid #edd58f;
  color: #5b4714; font-size: 0.82rem; line-height: 1.4;
}
.dev-banner a { color: var(--hdx-primary-7); }
@media (max-width: 700px) { .dev-banner { font-size: 0.78rem; } }

header { padding: 16px 0 4px; }
h1 { font-family: var(--hdx-font-display); font-size: 1.3rem; margin: 0 0 2px; }
#subtitle { margin: 0; color: var(--muted); font-size: 0.95rem; }

#tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 10px; }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 0.9rem; color: var(--muted);
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--hdx-primary-5); }

.note { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }

/* Country / Pixel segmented toggle — HDX button styling (tertiary; active = primary) */
.seg { display: inline-flex; border-radius: var(--hdx-radius-sm); box-shadow: var(--hdx-shadow-sm); }
/* display:inline-flex above outranks the UA [hidden] rule — restate it (the
   valid-period button group hides outside the phase-source country view) */
.seg[hidden] { display: none; }
/* Analysis-period buttons: denser than the map's Country/Pixel toggle so the
   source select, exercise dropdown and all three windows share one row. */
#hnrp-phase-periods { margin-left: 4px; }
#hnrp-phase-periods .seg-btn {
  font-size: 0.75rem; padding: 0 8px; white-space: nowrap;
}
.seg-btn {
  appearance: none; cursor: pointer; font-family: var(--hdx-font-body);
  font-size: 0.875rem; font-weight: 500; line-height: 1.3; color: var(--hdx-neutral-8);
  background: var(--hdx-neutral-0); border: 1px solid var(--hdx-neutral-2);
  height: 2.125rem; padding: 0 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.seg-btn:first-child { border-radius: var(--hdx-radius-sm) 0 0 var(--hdx-radius-sm); }
.seg-btn:last-child { border-radius: 0 var(--hdx-radius-sm) var(--hdx-radius-sm) 0; border-left: none; }
.seg-btn:hover { background: var(--hdx-neutral-01); color: var(--hdx-neutral-95); }
.seg-btn.active {
  background: var(--hdx-primary-5); border-color: var(--hdx-primary-5); color: var(--hdx-neutral-0);
}
.seg-btn:disabled { background: var(--hdx-neutral-05); color: var(--hdx-neutral-3); cursor: not-allowed; }

.prose { max-width: 760px; line-height: 1.5; }
.prose h2 { font-size: 1.2rem; margin: 14px 0 6px; }
.prose h3 { font-size: 1.0rem; margin: 20px 0 4px; }
.prose ul, .prose ol { margin: 6px 0; padding-left: 22px; }
.prose li { margin: 3px 0; }
.prose p { margin: 8px 0; }
.prose .small { font-size: 0.82rem; color: var(--muted); }
.prose table { border-collapse: collapse; font-size: 0.88rem; margin: 8px 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
.prose th { background: #f5f5f5; }
.prose a { color: var(--hdx-primary-5); }

/* No border-bottom: the tab bar already draws a rule, a second one boxed in the filters. */
#controls {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  padding: 12px 0; margin-bottom: 8px;
}
#controls label { font-size: 0.9rem; }
.toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle input[type="checkbox"] { accent-color: var(--hdx-primary-5); }
.slider-control { display: flex; flex-direction: column; gap: 4px; }
.slider-control label { white-space: nowrap; }
.slider-control input[type="range"] { width: 240px; accent-color: var(--hdx-primary-5); cursor: pointer; }
/* Selection is in-season (negative leadtime): pale the slider as a visual cue. */
.slider-control input[type="range"].in-season { accent-color: var(--hdx-primary-3); opacity: 0.75; }
.slider-control .in-season-tag { color: var(--hdx-neutral-5); font-weight: 600; }

/* match the world's 2:1 shape so the map fills to extents with no letterboxing */
#map, #skill-map { width: 100%; aspect-ratio: 2 / 1; min-height: 320px; background: #fff; border: 1px solid var(--line); }
.leaflet-container { background: #fff; }
/* crisp pixels (no smoothing) for the forecast overlay canvas */
.hatch-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
/* crisp pixels for the baked skill overlay image */
.skill-overlay { image-rendering: pixelated; image-rendering: crisp-edges; }
/* HDX native dropdown (c-dropdown--native .c-dropdown__select) */
.map-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--hdx-font-body); font-size: 0.875rem; font-weight: 500; line-height: 1.3;
  color: var(--hdx-neutral-8); height: 2.125rem; padding: 0 28px 0 10px; margin-left: 4px;
  border: 1px solid var(--hdx-neutral-2); border-radius: var(--hdx-radius-sm);
  background: var(--hdx-neutral-0)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233f4748' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  box-shadow: var(--hdx-shadow-sm); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.map-select:hover { background-color: var(--hdx-neutral-01); border-color: var(--hdx-neutral-8); }
.map-select:focus-visible { outline: 2px solid var(--hdx-primary-5); outline-offset: 2px; }
.map-select:disabled { background-color: var(--hdx-neutral-05); color: var(--hdx-neutral-3); cursor: not-allowed; }
.ctl { font-size: 0.9rem; display: inline-flex; align-items: center; }
/* display:inline-flex above outranks the UA [hidden] rule, so every .ctl that is
   toggled from JS needs this or it stays on screen while el.hidden is true —
   the Plan year selector shipped visible in IPC mode for exactly this reason. */
.ctl[hidden] { display: none; }
.lock-note { font-size: 0.78rem; color: #888; font-style: italic; margin: 8px 0 0; }

/* Map title overlay (CBPF standalone page) */
.map-title {
  background: rgba(255,255,255,0.92); padding: 7px 12px; border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2); max-width: 60vw;
}
.map-title .mt-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.map-title .mt-sub { font-size: 0.82rem; color: #555; margin-top: 2px; }

/* Country-set toggles (CBPF page) — their own little section under the selectors */
#country-sets {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
#country-sets .cs-title { font-weight: 600; font-size: 0.85rem; }
#country-sets .swatch { width: 14px; height: 11px; }
.leaflet-interactive { cursor: pointer; }

/* Leaflet tooltip — HDX c-tooltip (light): wider, soft large shadow, Roboto */
.leaflet-tooltip {
  background: var(--hdx-neutral-0); border: none; border-radius: var(--hdx-radius-sm);
  padding: 8px 12px; font-family: var(--hdx-font-body); font-size: 0.875rem;
  color: var(--hdx-neutral-95); box-shadow: var(--hdx-shadow-lg);
  max-width: 300px; min-width: 170px; line-height: 1.3; white-space: normal;
}
.leaflet-tooltip:before { display: none; }
.leaflet-tooltip .name { font-weight: 500; margin-bottom: 2px; }
.leaflet-tooltip .cat { font-weight: 500; }

/* Skill tab */
#skill-controls { padding: 14px 0 4px; }
#skill-controls label { font-size: 0.9rem; }
#skill-country {
  appearance: none; -webkit-appearance: none;
  font-family: var(--hdx-font-body); font-size: 0.875rem; font-weight: 500; line-height: 1.3;
  color: var(--hdx-neutral-8); height: 2.125rem; padding: 0 28px 0 10px; margin-left: 6px;
  border: 1px solid var(--hdx-neutral-2); border-radius: var(--hdx-radius-sm);
  background: var(--hdx-neutral-0)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233f4748' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  box-shadow: var(--hdx-shadow-sm); cursor: pointer; min-width: 220px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#skill-country:hover { background-color: var(--hdx-neutral-01); border-color: var(--hdx-neutral-8); }
#skill-chart { width: 100%; max-width: 900px; margin: 8px 0 4px; }
.skill-svg { display: block; width: 100%; height: auto; font-family: inherit; }
/* leave fill to each element (inline attr / per-class) so cell-value text colour sticks */
.skill-trilbl { font-size: 12px; }
.skill-tick { font-size: 11px; fill: #555; }
.skill-cellv { font-size: 11px; font-weight: 600; }
.skill-cellmo { font-size: 8.5px; }
.skill-axttl { font-size: 11px; fill: #555; }

#legend, #skill-map-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 14px 0; font-size: 0.8rem; align-items: flex-start; }
/* flex-start, not center: the blocks are different heights because some labels
   wrap to two lines, and centring floated the short ones down out of line with
   the rest. Their swatch rows should sit on one line across the whole legend. */
.legend-group { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 16px; height: 12px; border: 1px solid var(--hdx-neutral-3); display: inline-block; }

/* Contiguous legend strips (ordered scales) */
.legend-block { display: flex; flex-direction: column; gap: 4px; }
/* display:flex above outranks the UA [hidden] rule — restate it */
.legend-block[hidden] { display: none; }
.legend-block .lb-title { font-weight: 500; color: var(--hdx-neutral-8); }
.legend-strip { display: flex; }
.legend-strip .ls-seg { display: flex; flex-direction: column; gap: 3px; cursor: default; }
/* display:flex above outranks the UA [hidden] rule — the same trap .ctl hit. */
.legend-strip .ls-seg[hidden] { display: none; }
.legend-strip .ls-cell { height: 14px; width: 100%; }
.legend-strip .ls-seg:first-child .ls-cell { border-radius: var(--hdx-radius-sm) 0 0 var(--hdx-radius-sm); }
.legend-strip .ls-seg:last-child .ls-cell { border-radius: 0 var(--hdx-radius-sm) var(--hdx-radius-sm) 0; }
/* Detached from the ramp beside it: its own box with its own corners and a gap,
   so it does not read as the first step of the scale. */
.legend-strip .ls-seg.sep { margin-right: 9px; }
.legend-strip .ls-seg.sep .ls-cell { border-radius: var(--hdx-radius-sm); }
.legend-strip .ls-seg.sep + .ls-seg .ls-cell { border-radius: var(--hdx-radius-sm) 0 0 var(--hdx-radius-sm); }
.legend-strip .ls-lbl { font-size: 0.72rem; color: var(--hdx-neutral-7); text-align: center; line-height: 1.15; padding: 0 2px; }
.legend-strip.interactive .ls-seg { cursor: pointer; transition: opacity 0.15s; }
.legend-strip.interactive .ls-seg:hover .ls-lbl { color: var(--hdx-neutral-95); font-weight: 500; }
.legend-strip.interactive .ls-seg.sel .ls-lbl { color: var(--hdx-neutral-95); font-weight: 600; }
/* outline, not box-shadow: border:true cells carry an inline inset box-shadow that would win */
.legend-strip.interactive .ls-seg.sel .ls-cell { outline: 1.5px solid var(--hdx-neutral-95); outline-offset: -0.5px; }
.legend-item.interactive { cursor: pointer; }

/* Standalone swatches (unordered keys, e.g. skill): separated boxes rather than
   a contiguous ramp, since neither entry sits "next to" the other on a scale. */
.legend-strip.boxes { gap: 10px; }
/* Forecast categories drawn as the map draws them — a ring, not a block. Close
   together, since they are still an ordered scale; the off-season strip is a
   separate block and keeps the legend's own wider gap from them. */
.legend-strip.rings { gap: 3px; }
.legend-strip.rings .ls-seg .ls-cell {
  height: 15px; box-sizing: border-box; border-radius: var(--hdx-radius-sm);
}
/* Selectors with no counterpart on the map: same 14px cell as every other strip,
   so they line up, and no colour, so they promise no encoding. */
.legend-strip.chips { gap: 8px; }
.legend-strip.chips .ls-seg .ls-cell {
  box-sizing: border-box; border-radius: var(--hdx-radius-sm);
}
/* .ls-seg in the selector so this outranks the strip's first/last-child corner rules */
.legend-strip.boxes .ls-seg .ls-cell {
  height: 17px; box-sizing: border-box; border-radius: var(--hdx-radius-sm);
}

/* One click back to the unfiltered map. Its label never changes and its slot is
   reserved even when inactive (visibility, not display), so pinning and
   unpinning legend entries never reflows the legend. */
#hnrp-legend-clear {
  visibility: hidden;
  font: inherit; font-size: 0.72rem; color: var(--hdx-neutral-8);
  background: var(--hdx-neutral-01); border: 1px solid var(--hdx-neutral-3);
  border-radius: var(--hdx-radius-sm); padding: 3px 8px; cursor: pointer;
  white-space: nowrap;
}
#hnrp-legend-clear.on { visibility: visible; }
#hnrp-legend-clear:hover { background: var(--hdx-neutral-05); color: var(--hdx-neutral-95); }

/* Leaflet zoom control — HDX-flavoured */
.leaflet-control-zoom.leaflet-bar { border: 1px solid var(--hdx-neutral-2); box-shadow: var(--hdx-shadow-sm); border-radius: var(--hdx-radius-sm); }
.leaflet-control-zoom a {
  background: var(--hdx-neutral-0); color: var(--hdx-neutral-8);
  font-family: var(--hdx-font-body); border-bottom-color: var(--hdx-neutral-2);
}
.leaflet-control-zoom a:hover { background: var(--hdx-neutral-01); color: var(--hdx-neutral-95); }
.leaflet-control-zoom a.leaflet-disabled { background: var(--hdx-neutral-05); color: var(--hdx-neutral-3); }

footer { color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--line); padding-top: 10px; }
footer p { margin: 4px 0; }

/* ── Forecast × HNRP tab ─────────────────────────────────────────────────── */
#hnrp-controls { display: flex; flex-direction: column; gap: 7px; margin: 16px 0 12px;
  /* Pinned while scrolling so filters stay reachable from any view. z-index must
     clear Leaflet's in-map controls (~1000). */
  position: sticky; top: 0; z-index: 1200; background: var(--hdx-neutral-0);
  padding: 8px 0 10px; border-bottom: 1px solid var(--hdx-neutral-15); }
#hnrp-controls .ctl-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
#hnrp-controls .ctl-row .toggle { white-space: nowrap; }
#hnrp-controls .row-tag { min-width: 60px; font-size: 0.72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* A tag that starts a row is a gutter label and holds the 60px column so the
   rows line up under each other. One that sits MID-row is a separator between
   two groups of controls, so it drops the column width and takes a little air
   on its left instead — otherwise it opens a 60px hole in the middle of a row. */
#hnrp-controls .row-tag.inline { min-width: 0; margin-left: 6px; }
#hnrp-controls #hnrp-issued { margin: 0 0 0 auto; }
/* Chrome draws a focus ring (blue box) around a clicked SVG path / the map itself;
   selection feedback is the country outline + zoom, so the ring is just noise. */
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container:focus { outline: none; }
.hnrp-h { margin: 28px 0 8px; font-size: 1rem; }
#hnrp-scatter-legend span[data-hl] { cursor: pointer; }
#hnrp-outline-legend .sev-ramp { cursor: pointer; }
#hnrp-outline-legend .sev-ramp:hover { outline: 1px solid var(--ink); }
#hnrp-scatter-legend span[data-hl]:hover { text-decoration: underline; }
/* Per-admin trimester codes on the map (selected-country view): bare text with a
   white halo, centred on the anchor point (the divIcon anchors top-left). */
.tri-map-label-wrap { background: none; border: none; }
.tri-map-label { display: inline-block; transform: translate(-50%, -50%);
  white-space: nowrap; font-size: 10px; font-weight: 700; color: #1d2021;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
#hnrp-note { margin-top: 6px; }
#hnrp-note summary { cursor: pointer; font-weight: 600; color: var(--hdx-neutral-8);
  font-size: 0.85rem; }
#hnrp-note summary:hover { color: var(--ink); }
#hnrp-note h4 { margin: 14px 0 4px; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--hdx-neutral-7); }
#hnrp-note p { margin: 4px 0 10px; max-width: 72rem; }
/* Country alerts tab — compact summary table. table-layout: fixed pins every
   column at a constant x whatever the cell contents — no jitter across rows
   or re-sorts. */
#alerts-controls .ctl-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  margin: 0 0 14px; }
#alerts-table { border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; width: 880px; }
#alerts-table th:nth-child(1) { width: 180px; }
#alerts-table th:nth-child(2) { width: 190px; }
#alerts-table th:nth-child(3) { width: 128px; }
#alerts-table th:nth-child(4) { width: 84px; }
#alerts-table th:nth-child(5) { width: 152px; }
#alerts-table th:nth-child(6) { width: 146px; }
#alerts-table th, #alerts-table td { padding: 3px 12px; border-bottom: 1px solid var(--line);
  text-align: left; }
#alerts-table th { font-weight: 600; color: var(--muted); cursor: pointer; user-select: none;
  white-space: nowrap; }
#alerts-table th.sorted { color: var(--ink); }
#alerts-table th.num, #alerts-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#alerts-table tbody tr:hover td { background: var(--hdx-neutral-01); }
#alerts-table td.cname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#alerts-table .sev-chip { display: block; padding: 1px 8px; white-space: nowrap;
  border-radius: var(--hdx-radius-sm); font-weight: 600; font-size: 0.8rem;
  text-align: center; cursor: default; }
#alerts-table td.skill-mod { background: var(--hdx-neutral-01); color: var(--hdx-neutral-8); }
#alerts-table td.skill-hi { font-weight: 600; }
#alerts-table .in-season-tag { color: var(--hdx-neutral-5); font-weight: 600; font-size: 0.75rem; }
/* Trimester codes: every qualifying season in the row's tier; pale = already
   in progress. */
#alerts-table .tri-code { white-space: nowrap; }
#alerts-table .tri-ongoing { color: var(--hdx-neutral-4); }
/* In-cell horizontal bars, GHO operations-dashboard style: fixed track filled
   from the left, compact value to its right. */
#alerts-table .cellbar { display: inline-flex; align-items: center; gap: 6px; }
#alerts-table .bar-track { width: 66px; height: 12px; background: var(--hdx-neutral-01);
  border-radius: 2px; overflow: hidden; flex: none; }
#alerts-table .bar-fill { display: block; height: 100%; }
#alerts-table .bar-val { min-width: 58px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
#hnrp-map { height: 430px; border: 1px solid var(--line); border-radius: var(--hdx-radius-md); margin-bottom: 18px; background: #fff; }
/* Detail sidebar. Overlays the map's right edge rather than sitting beside it:
   a flex sibling would resize the map on every selection, and Leaflet has to be
   told about that mid-animation, which is the class of thing that has wedged
   this map's zoom before. fitCountry pads its fit by the panel width instead,
   so the selected country still lands in the visible part. */
#hnrp-map-wrap { position: relative; }
#hnrp-side { position: absolute; top: 0; right: 0; bottom: 18px; width: 290px;
  z-index: 1100; background: #fff; border: 1px solid var(--line);
  border-radius: 0 var(--hdx-radius-md) var(--hdx-radius-md) 0;
  overflow-y: auto; overflow-x: hidden;
  font-size: 0.78rem; line-height: 1.5; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.06); }
#hnrp-side[hidden] { display: none; }
.side-head { position: sticky; top: 0; background: #fff; padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line); z-index: 1; }
.side-crumb { display: flex; align-items: flex-start; gap: 6px; }
.side-crumb + .side-crumb { margin-top: 3px; padding-top: 3px;
  border-top: 1px dotted var(--line); }
.side-crumb .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.side-crumb .lvl { display: block; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--hdx-neutral-8); }
.side-crumb .nm { font-weight: 700; color: var(--ink); }
.side-x { flex: none; width: 20px; height: 20px; padding: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hdx-neutral-3); border-radius: var(--hdx-radius-sm);
  background: #fff; color: var(--hdx-neutral-7); cursor: pointer; }
.side-x:hover, .side-x:focus { background: var(--hdx-neutral-1); color: var(--ink);
  border-color: var(--hdx-neutral-7); outline: none; }
.side-body { padding: 8px 10px 12px; }
.side-body .cat { font-weight: 600; margin-bottom: 3px; }
.side-body .sec { margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--line); }
.side-body .sec-t { font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--hdx-neutral-8); margin-bottom: 2px; }
.side-body .muted, .side-hint { color: var(--hdx-neutral-5); }
.side-hint { padding: 0 10px 10px; }
@media (max-width: 760px) {
  /* Too narrow to overlay: drop it under the map instead of covering it. */
  #hnrp-side { position: static; width: auto; height: auto; max-height: 300px;
    border-radius: var(--hdx-radius-md); margin: -8px 0 18px; box-shadow: none; }
}
#hnrp-scatter-wrap { position: relative; margin-bottom: 6px; }
#hnrp-scatter { width: 100%; height: 460px; display: block; }
#hnrp-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--hdx-radius-sm); box-shadow: var(--hdx-shadow-sm); padding: 7px 10px;
  font-size: 0.78rem; line-height: 1.45; max-width: 240px; z-index: 10; }
#hnrp-scatter-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); margin: 8px 0 18px; }
#hnrp-scatter-note { margin: 4px 0 18px; }
#hnrp-scatter-legend i { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.15); vertical-align: -2px; margin-right: 4px; }
#hnrp-scatter-legend i.hatched { background: repeating-linear-gradient(45deg, #7f5619 0 2px, rgba(255,255,255,0.7) 2px 4px); }

/* HNRP scatter is square (both axes are population shares); bars section below it. */
#hnrp-scatter-wrap { max-width: 640px; }
#hnrp-scatter { height: auto; }
#hnrp-bars-wrap { margin: 6px 0 14px; }
#hnrp-bars-wrap h3 { font-size: 0.95rem; margin: 10px 0 6px; }
#hnrp-bars { width: 100%; display: block; }
/* Bar rows keep their identity across renders, so a legend filter reads as
   rows leaving and the rest closing the gap — not as the chart blinking. */
/* Transform only: entering rows fade via a one-shot animation instead, which
   cannot be left half-applied by a render arriving mid-frame. */
#hnrp-bars .bar-row { transition: transform 0.3s ease; }
#hnrp-bars .bar-row.leaving { opacity: 0; transition: opacity 0.18s ease; }
@media (prefers-reduced-motion: reduce) {
  #hnrp-bars .bar-row { transition: none; }
}
#hnrp-bars-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
#hnrp-bars-legend i { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.12); vertical-align: -2px; margin-right: 4px; }
#hnrp-bars-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
#hnrp-bars-head h3 { margin-right: auto; }

/* Source swap: the subnational mosaic is torn down and rebuilt while the country
   backdrop stays put. Fading the map over that hides the blank frame in between
   without hiding the country outlines the user is still oriented by. */
#hnrp-map { transition: opacity 0.15s ease; }
#hnrp-map.swapping { opacity: 0.55; }