:root {
  --fg:          #1a1a1a;
  --fg-muted:    #555;
  --bg:          #fafafa;
  --bg-card:     #ffffff;
  --border:      #e5e5e5;
  --accent:      #2d5fd9;
  --accent-soft: #e8efff;
  --danger:      #c62828;
  --danger-soft: #fdecea;
}

:root[data-theme="dark"] {
  --fg:          #e8e8e8;
  --fg-muted:    #a0a0a0;
  --bg:          #0f1115;
  --bg-card:     #181b21;
  --border:      #2a2e37;
  --accent:      #6d92ff;
  --accent-soft: #1c243a;
  --danger:      #ff6b6b;
  --danger-soft: #3a1c1c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--accent-soft); color: var(--accent); padding: 0.05em 0.3em; border-radius: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

/* ── Header / nav ─────────────────────────────────────────────────── */

header.site {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 10;
}
header.site .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}
header.site .brand { font-weight: 700; letter-spacing: -0.01em; font-size: 1rem; }
header.site .brand a { color: var(--fg); }
header.site nav a {
  margin-left: 1rem;
  color: var(--fg-muted);
  font-size: 0.9rem;
}
header.site nav a.active { color: var(--fg); font-weight: 600; }
header.site .tools { display: flex; align-items: center; gap: 0.6rem; }
header.site button.icon {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  color: var(--fg-muted);
}
header.site button.icon:hover { color: var(--fg); border-color: var(--accent); }

h1 { font-size: 1.75rem; margin: 0 0 0.4rem; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
p.lede { color: var(--fg-muted); font-size: 1rem; margin: 0 0 1.25rem; }

/* ── Search + pills ───────────────────────────────────────────────── */

.search-box {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--fg);
}
.search-box:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.65rem 0 1.25rem;
}
.pill {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
}
.pill:hover { background: var(--accent); color: white; }
.pill.active { background: var(--accent); color: white; }
.pill.ghost { background: transparent; border-color: var(--border); color: var(--fg-muted); }
.pill.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* ── Search results ───────────────────────────────────────────────── */

.results { list-style: none; padding: 0; margin: 0; }
.results li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: 0.45rem;
  cursor: pointer;
  transition: border-color 0.12s;
}
.results li:hover { border-color: var(--accent); }
.results li .name { font-weight: 600; }
.results li .meta { color: var(--fg-muted); font-size: 0.82rem; margin-top: 0.15rem; }
.results li .category {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.72rem;
  margin-right: 0.4rem;
  font-weight: 500;
}

/* ── Controls grid ────────────────────────────────────────────────── */

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1rem;
}
.controls label {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.controls select, .controls input[type=number], .controls input[type=text], .controls input[type=url] {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--fg);
}
.controls select[multiple] { min-height: 160px; background: var(--bg-card); }
.controls .span-2 { grid-column: span 2; }
.controls .row { display: flex; gap: 0.5rem; align-items: center; }
.controls .row > * { flex: 1; }
.controls .check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--fg); }
.controls .check input { width: auto; }

/* ── Chart card ───────────────────────────────────────────────────── */

.chart-card {
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.chart-card .chart-wrap {
  position: relative;
  height: 440px;
}
.chart-card .caption {
  font-size: 0.82rem;
  color: var(--fg-muted);
  margin-top: 0.75rem;
  text-align: right;
}

/* ── Tabs ─────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tab {
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.tab:hover { color: var(--fg); }
.tab.active {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--fg);
  font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Status banners ───────────────────────────────────────────────── */

.loading, .error, .info {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  font-size: 0.88rem;
}
.loading { background: var(--accent-soft); color: var(--accent); }
.error { background: var(--danger-soft); color: var(--danger); }
.info { background: var(--accent-soft); color: var(--fg); border: 1px solid var(--border); }

/* ── Stats table ──────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.stat {
  padding: 0.6rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.stat .k { font-size: 0.7rem; text-transform: uppercase; color: var(--fg-muted); letter-spacing: 0.04em; }
.stat .v { font-size: 1.1rem; font-weight: 600; margin-top: 0.15rem; }

/* ── Upload dropzone ─────────────────────────────────────────────── */

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone p { margin: 0.3rem 0; color: var(--fg-muted); }
.dropzone .primary { color: var(--fg); font-weight: 600; font-size: 1rem; }

/* ── Slider (Gapminder year) ─────────────────────────────────────── */

.year-slider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.5rem 0 1rem;
}
.year-slider input[type=range] { flex: 1; }
.year-slider .year-label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.year-slider button {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}
.year-slider button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Action row ──────────────────────────────────────────────────── */

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.actions button {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.actions button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.actions button:hover { border-color: var(--accent); color: var(--accent); }
.actions button.primary:hover { color: white; background: var(--accent); filter: brightness(1.1); }

/* ── Footer ──────────────────────────────────────────────────────── */

footer.site {
  margin-top: 3rem;
  padding: 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* ── Code modal (R / Python replication) ─────────────────────────── */

.ev-modal-root {
  display: none;
  position: fixed; inset: 0; z-index: 100;
}
.ev-modal-root.open { display: block; }
.ev-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
.ev-modal {
  position: absolute;
  top: 3vh; left: 50%; transform: translateX(-50%);
  width: min(980px, 94vw);
  max-height: 94vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
}
.ev-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border);
}
.ev-modal-tabs { display: flex; gap: 0.25rem; }
.ev-modal-tab {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.ev-modal-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.ev-modal-actions { display: flex; gap: 0.35rem; }
.ev-modal-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
}
.ev-modal-btn:hover { border-color: var(--accent); color: var(--accent); }
.ev-modal-pre {
  flex: 1; overflow: auto;
  margin: 0; padding: 1rem 1.1rem;
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre;
  color: var(--fg);
}
.ev-modal-code { background: transparent; color: inherit; padding: 0; }
.ev-modal-foot {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 0.78rem;
}

/* Show-code button placed in .actions rows */
.code-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.code-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Methodology caption block */
.methodology {
  font-size: 0.82rem;
  color: var(--fg-muted);
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin: 0.6rem 0;
  line-height: 1.5;
}
.methodology strong { color: var(--fg); }

/* Diagnostics / coverage */
.diagnostics {
  font-size: 0.82rem;
  color: var(--fg-muted);
  padding: 0.55rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0.4rem 0 0.8rem;
}
.diagnostics summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg);
  padding: 0.1rem 0;
}
.diagnostics .cov-bar {
  display: inline-block;
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.15rem 0;
}
.diagnostics .cov-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.diagnostics table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.diagnostics table th, .diagnostics table td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Citation block */
.citation {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  white-space: pre-wrap;
  margin: 0.3rem 0;
}

/* Saved views list */
.saved-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0 0.8rem;
}
.saved-view {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem 0.25rem 0.7rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid transparent;
}
.saved-view a { color: inherit; font-weight: 500; }
.saved-view button {
  border: none; background: transparent; color: inherit;
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0 0.15rem;
}
.saved-view button:hover { color: var(--danger); }

/* ── Map page ─────────────────────────────────────────────────────── */
.map-wrap {
  position: relative;
  width: 100%;
  min-height: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
}
.map-wrap svg { display: block; width: 100%; height: auto; }
.map-wrap .country { stroke: var(--bg-card); stroke-width: 0.4; cursor: pointer; }
.map-wrap .country.missing { fill: var(--border); }
.map-wrap .graticule { fill: none; stroke: var(--border); stroke-opacity: 0.4; }
.map-wrap .outline { fill: none; stroke: var(--border); stroke-width: 0.6; }
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  color: var(--fg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: opacity 0.1s;
}
.legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0.1rem;
  color: var(--fg-muted);
  font-size: 0.78rem;
}
.legend .swatches { display: flex; }
.legend .swatch { width: 32px; height: 12px; display: inline-block; }

/* Correlation heatmap cells */
.corr-table { border-collapse: collapse; margin: 0.4rem 0; font-size: 0.82rem; }
.corr-table th, .corr-table td {
  padding: 0.35rem 0.55rem; text-align: center;
  border: 1px solid var(--border); min-width: 55px;
}
.corr-table th { background: var(--bg-card); }
.corr-table td.diag { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ── Help icons + tooltip ────────────────────────────────────────── */

.ev-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 0.25rem;
  border-radius: 50%;
  background: var(--border);
  color: var(--fg-muted);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
  vertical-align: middle;
  transition: background 0.12s, color 0.12s;
}
.ev-help:hover, .ev-help:focus {
  background: var(--accent);
  color: white;
  outline: none;
}

.ev-help-tip {
  position: absolute;
  z-index: 200;
  max-width: 280px;
  padding: 0.5rem 0.7rem;
  background: var(--fg);
  color: var(--bg-card);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.12s;
}
.ev-help-tip.show { opacity: 1; }

/* Retry button embedded in error banners */
.ev-retry {
  margin-left: 0.6rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.8rem;
}
.ev-retry:hover { background: currentColor; color: var(--bg-card); }

/* ── Landing tiles (index.html) ──────────────────────────────────── */

.landing-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.landing-tile {
  display: block;
  padding: 0.9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  transition: border-color 0.12s, transform 0.12s;
}
.landing-tile:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.landing-tile .tile-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.landing-tile .tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
}
.landing-tile .tile-desc {
  font-size: 0.82rem;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* ── Empty-state example-query chips ─────────────────────────────── */

.empty-state {
  padding: 1.5rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  margin: 0.75rem 0;
}
.empty-state h3 { margin-top: 0; color: var(--fg); font-size: 1rem; }
.empty-state .examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.empty-state .example-chip {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: none;
}
.empty-state .example-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .controls { grid-template-columns: 1fr; }
  .chart-card .chart-wrap { height: 340px; }
  header.site nav { display: none; }
  .ev-modal { width: 98vw; top: 1vh; max-height: 98vh; }
  .ev-help-tip { max-width: 200px; }
}

/* ── Print stylesheet (for clean chart/map exports) ──────────────── */

@media print {
  header.site, footer.site, .actions, .controls, .tabs,
  .year-slider, .saved-views, #status, .diagnostics,
  .ev-modal-root, .ev-help, .ev-help-tip {
    display: none !important;
  }
  body, html { background: white !important; color: black !important; }
  .chart-card, .map-wrap, .corr-table, .methodology {
    border-color: #ccc !important;
    background: white !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .chart-card .chart-wrap { height: 420px; }
  h1 { font-size: 1.25rem; }
  p.lede, .methodology { font-size: 0.78rem; color: #333; }
}