/* Explore page layout + charts, remapped onto the 2.0 report tokens. */
:root {
  --font-sans: var(--font-mono);
  --font-numbers: var(--font-display);
  --bg-0: var(--paper-2);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --ink-1: var(--ink);
  --ink-2: var(--ink-70);
  --ink-3: var(--ink-45);
  --ink-4: var(--ink-12);
  --ink-5: var(--ink-06);
  --accent-mid: var(--accent-soft);
  --accent-dim: var(--accent-soft);
  --orange: var(--accent);
  --orange-dim: var(--accent-soft);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 80px; --s8: 96px;
  --r-sm: 2px; --r-md: 2px; --r-lg: 2px;
  --ls-caps: 0.14em;
  --section-divider-weight: 1px;
  --section-divider-color: var(--ink-12);
  --gutter: 64px;
  --section-y: 64px;
  --col-gap: 48px;
  --text-xs: 0.75rem;
  --text-md: 1rem;
  --text-lead: var(--text-lg);
  --text-h4: var(--text-lg);
  --text-h3: var(--text-xl);
  --text-h2: var(--text-2xl);
  --text-h1: var(--text-hero);
  --text-display: var(--text-hero);
  --leading-tight: 1.1;
  --leading-body: var(--leading);
  --t-cap: var(--text-sm);
  --t-xs: var(--text-sm);
  --t-sm: var(--text-sm);
  --t-base: var(--text-base);
  --t-lg: var(--text-lg);
  --lh-tight: var(--leading-tight);
  --lh-snug: 1.32;
  --lh-base: var(--leading-body);
  --lh-loose: 1.62;
}

body.explore-page {
  font-family: var(--font-body);
  background: var(--paper);
  background-image: none;
}

/* Dark mode: hardcoded CSS overrides */
    [data-theme="dark"] .scale-seg-labels-row { color: rgba(245,240,232,0.48); }
    [data-theme="dark"] .stat-val             { color: var(--ink); }
    [data-theme="dark"] .scale-bar-row        { background: var(--ink-06); }
    [data-theme="dark"] .bar-track            { fill: rgba(245,240,232,0.10) !important; }
    [data-theme="dark"] .pill                 { border-color: rgba(245,240,232,0.18); color: var(--ink-2); }
    [data-theme="dark"] .pill:hover           { border-color: rgba(165,20,23,0.45); color: var(--ink-1); }
    [data-theme="dark"] .pill.active          { background: rgba(165,20,23,0.14); border-color: rgba(165,20,23,0.50); }
    /* Dark mode: SVG chart element overrides (CSS wins over presentation attributes) */
    [data-theme="dark"] .map-graticule { stroke: rgba(245,240,232,0.06); }
    [data-theme="dark"] .country        { stroke: rgba(245,240,232,0.18); }
    [data-theme="dark"] .country-empty  { fill: rgba(245,240,232,0.06); }
    [data-theme="dark"] .map-legend-text { fill: rgba(245,240,232,0.65); }
    [data-theme="dark"] text.blabel     { fill: rgba(245,240,232,0.65); }
    [data-theme="dark"] text.xlabel     { fill: rgba(245,240,232,0.55); }
    [data-theme="dark"] text.hist-unit  { fill: rgba(245,240,232,0.45); }
    [data-theme="dark"] .grid-line      { stroke: rgba(245,240,232,0.10); }
    [data-theme="dark"] .y-label        { fill: rgba(245,240,232,0.45); }
    [data-theme="dark"] .bar-row-label  { fill: rgba(245,240,232,0.94); }

    .explore-page .page-title {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(2.25rem, 4.6vw, 3.25rem);
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .explore-page .page-title em { color: var(--accent); font-style: italic; }
    .explore-page .q-card {
      border-radius: 0;
      background: transparent;
    }
    .explore-page .theme-btn { width: auto; }

    :focus:not(:focus-visible) { outline: none; }
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    /* ── Page header ── */
    .page-header {
      padding: var(--s5) var(--gutter) var(--s5);
      border-bottom: var(--section-divider-weight) solid var(--section-divider-color);
      background: var(--bg-1);
    }
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: var(--t-sm);
      font-weight: 500;
      color: var(--ink-3);
      text-decoration: none;
      transition: color 0.15s;
    }
    .back-link:hover { color: var(--accent); }
    .page-title {
      font-family: var(--font-display);
      font-size: clamp(var(--text-h2), 3.25vw + 0.25rem, var(--text-h1));
      font-weight: 700;
      letter-spacing: -0.028em;
      line-height: 1.06;
      color: var(--ink-1);
      margin-bottom: var(--s1);
    }
    .page-title em { font-style: normal; color: var(--accent); }
    .page-subtitle {
      font-family: var(--font-display);
      font-size: var(--t-lg);
      line-height: var(--lh-loose);
      color: var(--ink-2);
      max-width: 36rem;
    }

    /* ── Main (inside page-body grid) ── */
    main {
      padding: 0 0 var(--s7);
      min-width: 0;
    }

    /* ── Section ── */
    .data-section { margin-top: var(--s7); }
    .section-header {
      display: flex;
      align-items: center;
      gap: var(--s3);
      margin-bottom: var(--s5);
      padding-bottom: var(--s3);
      border-bottom: 1px solid var(--ink-4);
    }
    .section-num {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 400;
      letter-spacing: -0.04em;
      text-transform: none;
      color: var(--accent);
      flex-shrink: 0;
      user-select: none;
      padding: 0;
      border: none;
      line-height: 0.9;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 1.85vw + 0.65rem, var(--text-h2));
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: var(--lh-tight);
      color: var(--ink-1);
    }

    /* ── Question grid ── */
    .q-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--s4);
    }

    /* ── Question card ── */
    .q-card {
      background: var(--bg-2);
      border: 1px solid var(--ink-4);
      border-radius: 12px;
      padding: var(--s3);
    }
    .q-card.wide { grid-column: span 2; }
    .q-label {
      font-family: var(--font-body);
      font-size: var(--t-sm);
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--ink-2);
      margin-bottom: var(--s2);
      line-height: 1.4;
    }

    .q-eyebrow {
      display: block;
      font-size: var(--t-cap);
      font-weight: 600;
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: var(--s1);
    }
    .q-question {
      font-size: var(--t-base);
      color: var(--ink-2);
      line-height: var(--lh-base);
      margin-bottom: var(--s2);
    }
    .q-chart {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      overflow-y: visible;
    }
    .q-chart svg { overflow: visible; }

    /* ── Scale chart (pill bar + labels below — matches index Finding 03) ── */
    .scale-wrap { width: 100%; }
    .scale-bar-row {
      display: flex;
      height: 64px;
      border-radius: 9999px;
      overflow: hidden;
      margin-bottom: var(--s2);
      background: var(--ink-06);
    }
    .scale-seg {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.15s;
      overflow: hidden;
    }
    .scale-seg-labels-row {
      display: flex;
      width: 100%;
      align-items: flex-start;
      margin-bottom: var(--s2);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      letter-spacing: 0.02em;
      color: var(--ink-2);
      line-height: 1.35;
    }
    .scale-seg-label {
      text-align: center;
      flex-shrink: 0;
      padding: 0 2px;
      box-sizing: border-box;
    }
    .scale-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: var(--s1);
    }
    .scale-endpoints {
      display: flex;
      justify-content: space-between;
      font-size: var(--t-cap);
      color: var(--ink-3);
      margin-top: 4px;
      flex: 1;
    }
    .scale-mean {
      font-size: var(--t-sm);
      color: var(--ink-2);
      white-space: nowrap;
    }
    .scale-mean strong {
      font-size: var(--text-lg);
      font-weight: 400;
      color: var(--accent);
      margin-right: 2px;
    }

    /* ── Histogram stats ── */
    .hist-stats {
      display: flex;
      gap: var(--s3);
      margin-top: var(--s1);
    }
    .stat-item { text-align: center; }
    .stat-val {
      font-family: var(--font-display);
      font-size: var(--text-base);
      font-weight: 400;
      color: var(--ink);
    }
    .stat-key {
      font-size: var(--t-cap);
      font-weight: 600;
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: var(--ls-caps);
    }

    /* ── Filter bar ── */
    .filter-bar {
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--bg-1);
      border-bottom: 1px solid var(--ink-4);
      padding: 7px var(--gutter);
      display: flex;
      align-items: center;
      gap: var(--s2);
      flex-wrap: wrap;
    }
    .filter-label {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
      color: var(--ink-3);
      flex-shrink: 0;
    }
    .filter-group {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .filter-group-name {
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--ink-3);
      white-space: nowrap;
      letter-spacing: 0.03em;
    }
    .filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
    .pill {
      font-family: var(--font-sans);
      font-size: 0.75rem;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 5px;
      border: 1px solid rgba(42, 38, 34, 0.20);
      background: transparent;
      color: var(--ink-2);
      cursor: pointer;
      transition: all 0.12s;
      white-space: nowrap;
      line-height: 1.55;
    }
    .pill:hover { border-color: var(--accent-mid); color: var(--ink-1); }
    .pill.active {
      background: rgba(165,20,23,0.10);
      border-color: rgba(165,20,23,0.45);
      color: var(--ink-1);
      font-weight: 700;
    }
    .filter-divider { width: 1px; height: 20px; background: var(--ink-4); flex-shrink: 0; }
    .filter-count {
      margin-left: auto;
      font-size: var(--t-xs);
      color: var(--ink-3);
      white-space: nowrap;
    }
    .filter-count strong { color: var(--accent); font-weight: 700; }
    .filter-reset {
      font-family: var(--font-sans);
      font-size: var(--t-cap);
      font-weight: 500;
      color: var(--ink-3);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: color 0.12s, opacity 0.12s;
    }
    .filter-reset:hover { color: var(--ink-1); }
    .filter-reset:disabled { opacity: 0; pointer-events: none; }

    /* ── Toast ── */
    .toast {
      position: fixed;
      top: 32px;
      left: 50%;
      transform: translateX(-50%) translateY(-12px);
      background: rgba(165,20,23,0.92);
      border: 1px solid rgba(165,20,23,0.55);
      color: var(--on-accent);
      padding: 11px 20px;
      border-radius: var(--r-lg);
      font-size: var(--t-sm);
      font-weight: 600;
      opacity: 0;
      transition: opacity 0.18s ease, transform 0.18s ease;
      pointer-events: none;
      z-index: 200;
      white-space: nowrap;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      cursor: pointer;
      user-select: none;
    }
    .toast.visible { pointer-events: auto; }
    .toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .toast-icon { margin-right: 7px; }


    /* ── Narrow card title — smaller when card is half-width ── */
    .q-card:not(.wide) .q-label { font-size: var(--text-md); }

    /* ── Scale group (stacked scale rows in one card) ── */
    .scalegroup-wrap { display: flex; flex-direction: column; gap: var(--s3); }
    .scalegroup-item-label {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--ink-3);
      margin-bottom: var(--s1);
      line-height: var(--lh-snug);
    }

    /* ── Split stat (binary question) ── */
    .split-wrap { display: flex; flex-direction: column; gap: var(--s2); }
    .split-stats {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
    .split-stat { display: flex; flex-direction: column; }
    .split-stat:last-child { text-align: right; }
    .split-pct {
      font-family: var(--font-numbers);
      font-size: clamp(2.8rem, 5vw, 4.5rem);
      font-weight: 700;
      line-height: 1;
      color: var(--ink-1);
    }
    .split-label {
      font-size: var(--t-sm);
      color: var(--ink-2);
      margin-top: 6px;
    }
    .split-bar {
      height: 48px;
      border-radius: 9999px;
      overflow: hidden;
      display: flex;
    }
    .split-seg-a { height: 100%; background: var(--accent); }
    .split-seg-b { height: 100%; background: var(--ink-12); }

    /* ── Expand button for long charts ── */
    .chart-expand-btn {
      display: block;
      margin-top: var(--s2);
      font-family: var(--font-sans);
      font-size: var(--t-cap);
      font-weight: 600;
      color: var(--ink-3);
      background: none;
      border: 1px solid var(--ink-4);
      border-radius: var(--r-md);
      padding: 6px 14px;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s;
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
    }
    .chart-expand-btn:hover { color: var(--ink-1); border-color: var(--ink-3); }

    /* ── Page body layout (sidebar + content) ── */
    .page-body {
      max-width: 1360px;
      margin: 0 auto;
      padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: 148px 1fr;
      gap: var(--s3);
      align-items: start;
    }

    /* ── Side nav ── */
    .side-nav {
      position: sticky;
      top: calc(var(--filter-bar-height, 0px) + var(--s2));
      align-self: start;
      max-height: calc(100vh - var(--filter-bar-height, 0px) - var(--s3));
      overflow-y: auto;
      padding-top: var(--s4);
    }
    .side-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .side-nav-link {
      display: flex;
      align-items: baseline;
      gap: 7px;
      padding: 6px 10px;
      border-radius: var(--r-md);
      text-decoration: none;
      color: var(--ink-3);
      transition: background 0.12s, color 0.12s;
      line-height: 1.3;
    }
    .side-nav-link:hover { background: var(--ink-5); color: var(--ink-2); }
    .side-nav-item.active .side-nav-link { background: var(--ink-5); color: var(--ink-1); }
    .side-nav-num {
      font-family: var(--font-sans);
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: var(--ls-caps);
      color: var(--accent);
      flex-shrink: 0;
    }
    .side-nav-title {
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: 500;
      line-height: 1.3;
    }
    .side-nav-item.active .side-nav-title { font-weight: 600; color: var(--ink-1); }

    /* ── Page header top row ── */
    .page-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--s3);
    }

    /* ── Pie / donut chart ── */
    .pie-slice-0 { fill: var(--accent); }
    .pie-slice-1 { fill: color-mix(in srgb, var(--accent) 52%, transparent); }
    .pie-slice-2 { fill: var(--ink-20); }
    .pie-slice-3 { fill: var(--ink-12); }
    .pie-slice-4 { fill: var(--ink-06); }
    .pie-wrap { display: flex; align-items: center; gap: var(--s4); }
    .pie-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
    .pie-legend-item { display: flex; align-items: center; gap: 9px; }
    .pie-legend-swatch {
      width: 10px; height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .pie-legend-label {
      font-family: var(--font-display);
      font-size: var(--text-sm);
      color: var(--ink-2);
      flex: 1;
      line-height: 1.3;
    }
    .pie-legend-pct {
      font-family: var(--font-sans);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent);
    }

    /* ── Histogram: constrain width on wide cards ── */
    .hist-chart { max-width: 760px; }

    /* ── Footer ── */
    .page-footer {
      padding: var(--s5) var(--gutter);
      border-top: var(--section-divider-weight) solid var(--section-divider-color);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: var(--s2);
    }
    .footer-note {
      font-size: var(--t-sm);
      color: var(--ink-3);
      line-height: var(--lh-loose);
      max-width: 560px;
    }
    .footer-brand {
      font-size: var(--t-cap);
      font-weight: 600;
      color: var(--ink-3);
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* ── Map ── */
    .map-wrap { position: relative; width: 100%; }
    .map-tooltip {
      position: absolute;
      pointer-events: none;
      background: var(--paper);
      border: 1px solid var(--ink-4);
      border-radius: var(--r-md);
      padding: 6px var(--s2);
      font-size: var(--t-sm);
      color: var(--ink-1);
      opacity: 0;
      transition: opacity 0.1s;
      white-space: nowrap;
      z-index: 30;
      box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    }
    path.country { transition: fill 0.12s; }

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      html.use-circle-cursor * {
        cursor: none !important;
      }
      html.use-circle-cursor input,
      html.use-circle-cursor textarea {
        cursor: text !important;
      }
      .cursor-dot {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid var(--accent);
        background: rgba(213, 154, 72, 0.2);
        background: color-mix(in srgb, var(--accent) 22%, transparent);
        pointer-events: none;
        z-index: 2147483646;
        transform: translate(-50%, -50%);
        transition: opacity 0.15s ease;
      }
      html.use-circle-cursor .cursor-dot {
        display: block;
      }
    }

    @media (max-width: 980px) {
      :root {
        --gutter: 28px;
      }
      .page-body {
        grid-template-columns: 1fr;
        gap: var(--s2);
      }
      .q-grid { grid-template-columns: 1fr; }
      .q-card.wide { grid-column: span 1; }
      .side-nav {
        position: static;
        top: auto;
        max-height: none;
        overflow-y: visible;
        padding-top: var(--s4);
      }
      .side-nav-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .side-nav-link {
        align-items: flex-start;
        padding: 10px 12px;
      }
    }

    @media (max-width: 640px) {
      :root {
        --gutter: 20px;
      }
      .side-nav-list {
        grid-template-columns: 1fr;
      }
    }

/* ── Shared 2.0 type on Explore (no fake-bold serifs) ── */
.explore-page .page-title,
.explore-page .section-title,
.explore-page .q-label,
.explore-page .side-nav-title,
.explore-page .split-pct {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}
.explore-page .page-title {
  font-size: var(--text-2xl);
  line-height: 1.14;
}
.explore-page .page-title em { font-style: italic; }
.explore-page .section-title {
  font-size: var(--text-xl);
  line-height: 1.2;
}
.explore-page .q-label {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
}
.explore-page .page-subtitle,
.explore-page .footer-note {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading);
  max-width: 42em;
}
.explore-page .back-link,
.explore-page .section-num,
.explore-page .filter-label,
.explore-page .filter-group-name,
.explore-page .pill,
.explore-page .filter-reset,
.explore-page .filter-count,
.explore-page .side-nav-num,
.explore-page .chart-expand-btn,
.explore-page .footer-brand,
.explore-page .pie-legend-pct {
  font-family: var(--font-mono);
  font-weight: 500;
}
.explore-page .hist-stats .stat-val,
.explore-page .scale-mean strong,
.explore-page .split-pct {
  font-weight: 400;
}
.explore-page .q-card:not(.wide) .q-label { font-size: var(--text-base); }