/* ---- explore shell ---- */
.explore{border-top:1px solid var(--line);border-bottom:1px solid var(--rule);background:var(--panel)}

.toolbar{position:sticky;top:var(--mh,78px);z-index:500;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--rule)}
.toolbar .tb-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:auto}
.toolbar .tb-n b{color:var(--ink);font-weight:500}
.dds{display:flex;gap:7px;flex-wrap:wrap}
.linkish{background:none;border:0;border-bottom:1px solid var(--line-2);padding:0;font:inherit;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink-2);cursor:pointer}
.linkish:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---- dropdowns ---- */
.dd{position:relative}
/* the filters are the way in, so they are coloured and bold rather than quiet:
   a translucent wash of the accent, stronger once a filter is doing something */
.dd > button{display:flex;align-items:center;gap:7px;min-width:130px;max-width:260px;padding:8px 12px;
  font:inherit;font-size:13.5px;font-weight:600;background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:0;
  color:var(--ink);cursor:pointer;text-align:left}
.dd > button:hover{border-color:var(--accent)}
.dd.open > button{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.dd.active > button{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--panel))}
.dd > button .dl-name{font-family:var(--mono);color:var(--accent);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.dd > button .dl-val{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd > button .car{color:var(--accent);font-size:9px}
.dd .pop{display:none;position:absolute;top:calc(100% + 4px);left:0;width:268px;max-height:330px;
  overflow:auto;background:var(--panel);border:1px solid var(--rule);
  box-shadow:5px 5px 0 var(--accent-soft);z-index:700;padding:7px}
.dd.open .pop{display:block}
.dd .pop input.search{width:100%;padding:6px 8px;font:inherit;font-size:12.5px;border:1px solid var(--line);
  background:var(--wash);color:var(--ink);margin-bottom:6px;border-radius:0}
.dd .pop input.search:focus{outline:none;border-color:var(--ink-2)}
/* sort the options by name or by count */
.dd .sorts{display:flex;gap:4px;margin:0 0 6px}
.dd .sorts button{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:1px solid var(--line-2);border-radius:0;padding:3px 8px;color:var(--ink-3);cursor:pointer}
.dd .sorts button:hover{color:var(--ink);border-color:var(--ink-3)}
.dd .sorts button.on{color:var(--accent);border-color:var(--accent);font-weight:600}
.opt{display:flex;align-items:center;gap:8px;padding:4px;font-size:13px;color:var(--ink-2);cursor:pointer}
.opt:hover{color:var(--ink);background:var(--wash)}
.opt input{appearance:none;width:12px;height:12px;border:1px solid var(--line-2);border-radius:0;
  background:var(--panel);flex:none;cursor:pointer}
.opt input:checked{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--panel)}
.opt .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* region headings inside the country list */
.dd .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 4px 3px;border-top:1px solid var(--line);pointer-events:none}
.dd .grp:first-child{border-top:0;padding-top:4px}

/* ---- stage: the map on the left, the findings on the right ---- */
.stage{--stage-h:clamp(520px,calc(100vh - var(--mh,98px) - 128px),760px);
  display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
.mapstage{position:relative;min-width:0}
#map{height:var(--stage-h);background:var(--wash);z-index:1}
#map.plain{background:var(--wash)}
.leaflet-container{font-family:var(--sans);background:var(--wash)}
.leaflet-bar a{border-radius:0!important;color:var(--ink)!important;border-color:var(--line-2)!important;
  background:var(--panel)!important}

.tip{background:var(--ink);color:var(--panel);border:0;border-radius:0;padding:7px 9px;font-size:12px;
  box-shadow:none;line-height:1.45}
.tip::before{border-top-color:var(--ink)!important}
.tip .tv{font-family:var(--mono);font-weight:500}
.tip .tm{opacity:.72;font-size:11px}

.mapctl{position:absolute;right:12px;top:12px;z-index:460;display:flex;flex-direction:column;gap:6px}
.mapctl button{background:var(--glass);backdrop-filter:blur(5px);border:1px solid var(--rule);
  color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 11px;cursor:pointer;white-space:nowrap}
.mapctl button:hover{border-color:var(--accent);color:var(--accent)}

/* ---- findings panel ---- */
.findings{max-height:var(--stage-h);overflow:auto;min-width:0;background:var(--panel);
  border-left:1px solid var(--rule);padding:18px 22px 26px}
.findings p[data-readout]{margin:8px 0 0;font-family:var(--display);font-size:19px;line-height:1.35;
  color:var(--ink);text-wrap:pretty}
/* the kicker and, once there is somewhere to go back to, the Back button */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.findings .back{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink);padding:5px 10px;cursor:pointer}
.findings .back:hover{background:var(--accent);color:#fff}
.findings .back[hidden]{display:none}
/* the highlight is ink, not accent: accent pink is now the colour of a decrease */
.findings p[data-readout] b{font-weight:500;color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  padding:3px 8px;border:1px solid var(--accent);color:var(--ink);background:var(--accent-soft)}
.chip button{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);font-size:11px;line-height:1}
.chip button:hover{color:var(--accent)}

.selbadge{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:470;display:none;
  align-items:center;gap:9px;background:var(--glass);backdrop-filter:blur(5px);
  border:1px solid var(--rule);padding:7px 10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.selbadge.on{display:flex}

/* colour key: sits in the corner of the map in every view */
.maplegend{position:absolute;right:12px;bottom:12px;z-index:460;
  background:var(--glass);backdrop-filter:blur(5px);border:1px solid var(--rule);padding:9px 12px 8px}
.maplegend .lbl{display:block;font-size:9.5px;margin-bottom:7px;color:var(--ink-2)}
.maplegend .ramp{width:168px}
.maplegend .ramp i{height:8px}
.maplegend .ramp-lab{margin-top:4px;font-size:9.5px}
.maplegend .mapleg-n{margin:7px 0 0;color:var(--ink-3)}
.maplegend .ramp-lab.ratio{margin-top:1px;font-size:9px;color:var(--ink-3)}
/* the badge sits along the bottom, so the key lifts rather than being hidden */
.maplegend{transition:bottom .2s}
body:has(#sel-badge.on) .maplegend{bottom:56px}
.selbadge button{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-transform:uppercase}

.sum-sec{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.sum-sec h2{font-family:var(--display);font-size:20px;font-weight:400;margin:0 0 10px}
.sum-caption,.sum-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3);max-width:62ch}

/* ---- heatmap ---- */
.heat{overflow:auto;border:1px solid var(--line)}
.heat table{border-collapse:separate;border-spacing:0;font-family:var(--mono);width:auto}
.heat th{position:sticky;top:0;z-index:3;background:var(--panel);font-weight:400;font-size:10px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);
  padding:7px 6px;text-align:center;white-space:nowrap;cursor:pointer}
.heat th:hover{color:var(--accent)}
.heat th.rowh{left:0;z-index:5;text-align:left;min-width:150px;color:var(--ink-3);
  border-right:1px solid var(--rule);cursor:default}
/* three header rows: pillar, sub-pillar, outcome. Each lower row needs its own
   sticky offset, or it scrolls under the one above. */
.heat thead tr:nth-child(1) th,.heat thead tr:nth-child(2) th{height:24px;padding:4px 6px}
.heat thead tr:nth-child(2) th{top:24px}
.heat thead tr:nth-child(3) th{top:48px}
.heat th.grp{border-left:1px solid var(--line);font-size:9px;color:var(--ink-3);cursor:default}
.heat th.grp.pillar{font-size:9.5px;letter-spacing:.09em;color:var(--ink-2);border-bottom-color:var(--line)}
.heat th.grp:hover{color:var(--ink-3)}
.heat td.rowh{position:sticky;left:0;z-index:2;background:var(--panel);font-size:11px;color:var(--ink-2);
  padding:0 10px;border-right:1px solid var(--rule);white-space:nowrap;min-width:150px;cursor:pointer}
.heat td.rowh:hover{color:var(--accent)}
.heat td.cell{height:30px;min-width:72px;text-align:center;font-size:11.5px;padding:0 6px;cursor:pointer;
  border:0;border-bottom:1px solid var(--panel);border-right:1px solid var(--panel)}
.heat td.cell.empty{background:var(--wash);color:var(--ink-3);cursor:default}
.heat td.cell:hover{outline:2px solid var(--ink);outline-offset:-2px}
.heat td.cell .cn{display:block;font-size:8.5px;opacity:.72;margin-top:-2px}

.ramp{display:flex;align-items:center;gap:0;width:240px}
.ramp i{flex:1;height:10px;display:block}
.ramp-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  color:var(--ink-3);margin-top:4px}

/* ---- table ---- */
.section-h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px 6px;flex-wrap:wrap}
.section-h h2{font-family:var(--display);font-size:22px;font-weight:400}
/* the downloads: big, bold, coloured, next to the title */
.downloads{display:flex;gap:8px;flex-wrap:wrap}
.downloads .btn{gap:6px;font-size:14px;font-weight:600;padding:11px 18px;background:var(--accent);border-color:var(--accent);color:#fff}
.downloads .btn:hover{background:var(--ink);border-color:var(--ink)}
.downloads .btn b{font-weight:600;opacity:.85}
.downloads .btn[hidden]{display:none}
.tbl-hint{margin:0 22px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
/* the Columns picker sits beside the title and shares the dropdown look */
.title-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#col-dd .pop{max-height:420px}
#col-dd .dl-val{font-weight:400;color:var(--ink-2)}

/* Excel-style filter on each heading */
thead th .cf{background:none;border:0;padding:0 0 0 5px;color:var(--ink-3);cursor:pointer;font-size:10px;line-height:1}
thead th .cf:hover,thead th.filtered .cf,thead th.filtered .hl{color:var(--accent)}
thead th.filtered .hl{font-weight:600}
.colfilter{display:none;position:fixed;z-index:950;width:270px;max-height:380px;overflow:auto;background:var(--panel);
  border:1px solid var(--rule);box-shadow:5px 5px 0 var(--accent-soft);padding:8px}
.colfilter .cf-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.colfilter .cf-head b{font-weight:600}
.colfilter .x{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:13px;line-height:1}
.colfilter .x:hover{color:var(--accent)}
.colfilter input.search,.colfilter .cf-range input{width:100%;padding:6px 8px;font:inherit;font-size:12.5px;
  border:1px solid var(--line);background:var(--wash);color:var(--ink);margin-bottom:6px;border-radius:0}
.colfilter input:focus{outline:none;border-color:var(--ink-2)}
.colfilter .cf-range label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.cf-links{display:flex;gap:10px;margin:0 0 6px}
.cf-links button{background:none;border:0;padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);cursor:pointer}
.tablewrap{overflow:auto;max-height:600px;border-top:1px solid var(--rule)}
/* thirty columns: compact type, long text clipped (the full text is the cell's
   tooltip), and the table as wide as it needs to be, scrolling sideways */
table{width:max-content;min-width:100%;border-collapse:collapse;font-size:11.5px}
thead th{position:sticky;top:0;z-index:2;background:var(--panel);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;white-space:nowrap;font-weight:400}
thead th:hover{color:var(--ink)}
thead th .ar{color:var(--accent)}
tbody td{padding:5px 8px;border-bottom:1px dotted var(--line);color:var(--ink-2);white-space:nowrap;
  max-width:190px;overflow:hidden;text-overflow:ellipsis}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--wash);color:var(--ink)}
/* opaque, because the first column is sticky and a translucent fill would show
   the scrolled cells through it */
tbody tr.sel td{background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--ink)}
td.v{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
/* the study stays put while the rest scrolls, and its left edge carries the
   record's colour, where the swatch column used to be */
thead th:first-child,tbody td:first-child{position:sticky;left:0;background:var(--panel);padding-left:26px;
  box-shadow:inset 16px 0 0 var(--sw,transparent),1px 0 0 var(--rule)}
thead th:first-child{z-index:3}
tbody td:first-child{z-index:1;color:var(--ink)}
tbody tr:hover td:first-child{background:var(--wash)}
tbody tr.sel td:first-child{background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
tbody td a{color:var(--ink);border-bottom:1px solid var(--line-2);text-decoration:none}
tbody td a:hover{border-bottom-color:var(--accent)}
.tfoot{padding:12px 22px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.03em;color:var(--ink-3);flex-wrap:wrap}

@media (max-width:999px){
  /* one column: the map, then the findings, then the table */
  .stage{grid-template-columns:minmax(0,1fr)}
  .findings{max-height:none;border-left:0;border-top:1px solid var(--rule)}
  #map{height:56vh}
}
@media (max-width:860px){
  .toolbar{position:static}
  /* the record badge takes the bottom middle, so the key moves left */
  .maplegend{right:auto;left:10px;bottom:10px;padding:7px 10px 6px}
  .maplegend .ramp{width:132px}
  .maplegend .mapleg-n{display:none}
  .dd > button{min-width:0}
  .heat td.rowh,.heat th.rowh{min-width:132px}
}