/* ============================================================
   WRP 2025 Data Explorer — tool-specific styles.
   Loads on top of lrf-theme.css (shared brand chrome).
   Data-viz colours use the WRP set; UI chrome uses theme tokens.
   ============================================================ */

.hidden { display: none !important; }

/* Full-width dashboard (the hero stays centred via the theme) */
main { max-width: none; padding: 1.25rem 2.5rem 4rem; }
@media (max-width: 900px) { main { padding: 1rem 1rem 3rem; } }

/* Wave switcher in the hero — segmented control + a small label and a status note */
.wave-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--lrf-line); }
.wave-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--lrf-muted); }
.wave-segmented { margin: 0; }
.wave-bar-note { font-size: 12px; color: var(--lrf-muted); }

/* Trends mode swaps which view tabs are visible — the trended dataset gets its
   own two purpose-built views; the six per-wave views hide. */
body:not(.wave-trended) #view-tabs .seg-btn.trended-only { display: none; }
body.wave-trended #view-tabs .seg-btn.single-wave-only { display: none; }

/* Dataset-details mode hides everything wave-specific (filters, control bar,
   view tabs, downloads) — it's a meta-view, not a wave. */
body.wave-dataset .filters,
body.wave-dataset .controlbar,
body.wave-dataset .tabbar { display: none; }

/* Collapsible filter panel */
.filters.collapsed .filters-grid { display: none; }
.filters-head { gap: 0.6rem; }
#toggle-filters { margin-left: auto; }

/* ---------- Control / filter scaffolding (shared vocabulary) ---------- */
.panel { background: var(--lrf-white); border: 1px solid var(--lrf-line); border-radius: var(--r); }
.sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--lrf-pink); margin-bottom: 0.6rem; }

.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--lrf-muted); margin-bottom: 0.35rem; }
.field select { font-size: 14px; padding: 0.55rem 2rem 0.55rem 0.7rem; background-position: right 0.6rem center; }

/* Searchable combobox used by the question and metric dropdowns. */
.combo { position: relative; }
.combo-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 14px; color: var(--lrf-ink);
  background: var(--lrf-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%236c6c78' d='M1 3l4 4 4-4z'/></svg>") no-repeat right 0.7rem center;
  border: 1.5px solid var(--lrf-line); border-radius: var(--r);
  padding: 0.55rem 2rem 0.55rem 0.7rem;
}
.combo-input:focus { outline: none; border-color: var(--lrf-pink); }
.combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 320px; overflow-y: auto;
  background: var(--lrf-white); border: 1.5px solid var(--lrf-ink); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 0.25rem 0;
}
.combo-list.hidden { display: none; }
.combo-opt { padding: 0.45rem 0.7rem; font-size: 13px; color: var(--lrf-ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt:hover, .combo-opt.active { background: var(--lrf-cream); color: var(--lrf-pink); }
.combo-opt.hide { display: none; }

/* Dataset details view */
.dataset-controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
#ds-search { font: inherit; font-size: 13px; padding: 0.45rem 0.7rem; border: 1.5px solid var(--lrf-line); border-radius: var(--r); min-width: 260px; }
#ds-search:focus { outline: none; border-color: var(--lrf-pink); }
.dataset-scroll { max-height: 72vh; overflow: auto; border: 1px solid var(--lrf-line); border-radius: var(--r); }
.dataset-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.dataset-table th { position: sticky; top: 0; background: var(--lrf-white); z-index: 1; box-shadow: 0 1px 0 var(--lrf-line);
  padding: 0.55rem 0.7rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lrf-muted); font-weight: 700; white-space: nowrap; }
.dataset-table th.wave-grp { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--lrf-ink); border-left: 1px solid var(--lrf-line); }
.dataset-table th.wave-grp + th, .dataset-table th.col-waves, .dataset-table th.col-total { border-left: 1px solid var(--lrf-line); }
.dataset-table th.num, .dataset-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dataset-table th.col-country, .dataset-table td.name { text-align: left; }
.dataset-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--lrf-line); white-space: nowrap; }
.dataset-table tr:last-child td { border-bottom: none; }
.dataset-table td.name { font-weight: 600; }
.dataset-table td.absent { color: var(--lrf-muted); text-align: right; }
.dataset-table tfoot td { background: var(--lrf-cream); font-weight: 700; border-top: 1.5px solid var(--lrf-line); }
/* Explicit column widths so values aren't crushed into 1ch slots. Country
   column flexes; numeric columns share equal slots. */
.dataset-table col.col-country { width: 180px; }
.dataset-table col.col-num     { width: 7.5%; }
.dataset-table col.col-waves   { width: 60px; }
.dataset-table col.col-total   { width: 100px; }

/* control bar: question / breakdowns / metrics / sort */
.controlbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem 1rem; margin-bottom: 1.25rem; }
.controlbar:empty { display: none; }
.controlbar .field { margin: 0; min-width: 0; }
.controlbar .field select { width: 100%; }
@media (max-width: 900px) { .controlbar { grid-template-columns: 1fr; } }

/* filter panel: many compact dimension dropdowns */
.filters { margin-bottom: 1.5rem; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; gap: 1rem; }
/* 5 × 4 = 20 filter slots per single-year wave (plus the country one). */
.filters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
@media (max-width: 1200px) { .filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* custom multi-select filter */
.filt { position: relative; }
.filt-btn {
  width: 100%; text-align: left; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--lrf-ink);
  background: var(--lrf-white); border: 1.5px solid var(--lrf-line); border-radius: var(--r);
  padding: 0.5rem 1.8rem 0.5rem 0.7rem; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filt-btn::after { content: '▾'; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--lrf-muted); font-size: 10px; }
.filt-btn.on { border-color: var(--lrf-pink); color: var(--lrf-pink); }
.filt-btn .fl { color: var(--lrf-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; display: block; }
.filt-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 220px; max-width: 320px; max-height: 280px; overflow: auto;
  background: var(--lrf-white); border: 1.5px solid var(--lrf-ink); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 0.4rem;
}
.filt-pop label { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; font-size: 13px; font-weight: 500; color: var(--lrf-ink-soft); cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; border-radius: 3px; }
.filt-pop label:hover { background: var(--lrf-cream); }
.filt-pop input { width: 15px; height: 15px; accent-color: var(--lrf-pink); }
.filt-clear { background: none; border: none; color: var(--lrf-pink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* ---------- View tabs + download bar ---------- */
.tabbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.tabbar .segmented { margin-bottom: 0; }
.downloads { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.segmented { display: inline-grid; grid-auto-flow: column; gap: 1px; background: var(--lrf-line); border: 1.5px solid var(--lrf-ink); border-radius: var(--r); overflow: hidden; margin-bottom: 1.5rem; }
.seg-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 0.55rem 1.1rem; background: var(--lrf-white); color: var(--lrf-ink); border: none; cursor: pointer; transition: background .15s, color .15s; }
.seg-btn:hover { background: var(--lrf-cream); }
.seg-btn.active { background: var(--lrf-pink); color: #fff; }

/* ---------- Views ---------- */
.view { display: none; }
.view.active { display: block; }
.view-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 1.5rem; align-items: stretch; }
.view-grid > * { min-width: 0; }   /* let the chart column shrink below its SVG width (no horizontal overflow) */
@media (max-width: 1080px) { .view-grid { grid-template-columns: 1fr; } }
.chart-wrap { min-width: 0; }
.card { background: var(--lrf-white); border: 1px solid var(--lrf-line); border-radius: var(--r); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
.card .sec-label { margin-bottom: 0.9rem; }
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; }
/* In side-by-side card layouts, keep each card a self-contained flex column so the
   table card (right) can match the chart card (left) in height. tbl-scroll fills the
   remaining space inside its own card; the cap stops a long table from pushing the row
   taller than the chart on the left. */
.view-grid > .card,
.view-grid > div { min-height: 0; }
.view-grid .tbl-scroll { flex: 1 1 0; min-height: 200px; max-height: 70vh; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 12px; color: var(--lrf-ink-soft); margin-bottom: 0.6rem; }
.legend .k { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; }

/* data tables */
table.dt { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
table.dt th, table.dt td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--lrf-line); text-align: left; overflow: hidden; text-overflow: ellipsis; }
table.dt th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lrf-muted); font-weight: 700; white-space: normal; word-break: break-word; }
table.dt th.num, table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; width: 68px; }
table.dt th.rank, table.dt td.rank { color: var(--lrf-muted); width: 26px; padding-right: 0.2rem; }
table.dt td.name { font-weight: 600; white-space: nowrap; }
.tbl-scroll { max-height: 440px; overflow-y: auto; overflow-x: hidden; }
table.dt .heat { color: var(--lrf-ink); font-weight: 600; border-radius: 2px; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; font-size: 12px; color: var(--lrf-muted); }
.tbl-foot button { background: none; border: 1px solid var(--lrf-line); border-radius: var(--r); padding: 0.2rem 0.55rem; cursor: pointer; font: inherit; font-size: 12px; color: var(--lrf-ink); }
.tbl-foot button:disabled { opacity: 0.4; cursor: default; }

/* tighten the secondary card's leading spacing so it lines up with the chart card's title row */
.view-grid > .card > .sec-label:first-child { margin-bottom: 0.7rem; }

/* map — wave page and trended change-between-waves use identical chrome:
   no rectangular background, just the rounded Natural Earth sphere. */
#map-svg, #tm-svg { width: 100%; height: auto; display: block; }
.map-sphere { fill: #eef1f4; }
.map-land-nodata { fill: #ffffff; stroke: #d6dde3; stroke-width: .5; }
.map-land { stroke: #ffffff; stroke-width: .4; }
.map-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 12px; color: var(--lrf-muted); }
.map-legend .bar { height: 12px; width: 220px; border-radius: 2px; }

/* scatter + scorecard */
.scorecard { text-align: center; padding: 1.2rem 1.2rem 1.4rem; border-bottom: 1px solid var(--lrf-line); margin-bottom: 1rem; }
.scorecard .big { font-size: 3rem; font-weight: 800; color: var(--lrf-pink); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.scorecard .cap { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lrf-muted); font-weight: 600; margin-top: 0.4rem; }
.explain { font-size: 12.5px; line-height: 1.55; color: var(--lrf-ink-soft); }
.explain h4 { font-size: 12px; font-weight: 800; color: var(--lrf-ink); margin: 0.9rem 0 0.3rem; }
.explain p { margin: 0 0 0.5rem; }
.explain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 2rem; }
.explain-grid section h4 { margin-top: 0; }
@media (max-width: 900px) { .explain-grid { grid-template-columns: 1fr; gap: 0.6rem; } }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.scatter-pt { stroke: #fff; stroke-width: 0.5; }
.trend { stroke: var(--lrf-pink); stroke-width: 1.5; opacity: 0.7; fill: none; }

/* sankey */
.sankey-node rect { stroke: #fff; stroke-width: 1; }
.sankey-link { fill: none; stroke-opacity: 0.42; }
.sankey-label { font-size: 11.5px; fill: var(--lrf-ink); }

/* status / loading */
.status { padding: 4rem 1rem; text-align: center; color: var(--lrf-muted); font-size: 15px; }
.status.err { color: var(--danger); }

/* hover tooltip (shared across all charts) */
.tip { position: fixed; pointer-events: none; z-index: 80; background: var(--lrf-white); color: var(--lrf-ink);
  border: 1px solid var(--lrf-line); border-radius: var(--r); padding: 7px 10px; font-size: 12px;
  box-shadow: var(--shadow-lg); max-width: 280px; opacity: 0; transition: opacity .08s; line-height: 1.4; }
.tip b { color: var(--lrf-ink); font-weight: 700; }
.tip .m { color: var(--lrf-muted); margin-top: 2px; }
.geo, .scatter-pt, .sankey-link, .sankey-node rect, #rel-odds rect, #dist-chart rect { cursor: pointer; }

/* mobile: let tabs and control bar wrap */
@media (max-width: 700px) {
  .segmented { display: flex; flex-wrap: wrap; }
  .controlbar { grid-template-columns: 1fr; }
  .view-grid { grid-template-columns: 1fr; }
}
.muted-note { font-size: 12px; color: var(--lrf-muted); margin-top: 0.6rem; line-height: 1.5; }