/* ============================================================================
 * AnalyticsScholar · DataLab — Shared Design-System Layer
 * ----------------------------------------------------------------------------
 * One token layer consumed by BOTH integration surfaces so the embedded
 * explorer and its Wagtail host page look like ONE product:
 *
 *   Surface A — the explorer SPA   datalab/web/src/app.css + *.svelte <style>
 *   Surface B — the Wagtail/CRX host  site/templates/website/**, blocks.py
 *
 * Extends (never reinvents) the canonical brand in colors_and_type.css /
 * _deploy/brand.css. Import order:
 *     <link rel="stylesheet" href="colors_and_type.css">      (brand spine)
 *     <link rel="stylesheet" href="datalab-design-system.css"> (this file)
 *
 * § RECONCILIATION — the SPA's app.css currently ships off-brand ad-hoc tokens:
 *     --as-ink: #1c2330;   --as-accent: #e8552d;
 *   These are aliased below to the canonical brand values so existing Svelte
 *   markup keeps working while the page matches the site. Migrate call-sites
 *   to the semantic tokens, then delete the aliases.
 * ==========================================================================*/

:root {
  /* ── Reconciliation aliases (DELETE once SPA call-sites migrate) ───────── */
  --as-ink:    var(--as-navy);     /* was #1c2330 → canonical navy           */
  --as-accent-legacy: var(--as-coral); /* was #e8552d → canonical coral      */

  /* ── Brand source-of-truth, restated for self-containment ─────────────── */
  --as-emerald:      #1E8F73;      /* 4th brand hue (brand.css) — data layer  */
  --as-emerald-soft: #E7F1ED;

  /* ════════════════════════════════════════════════════════════════════════
   * DATA-VIZ PALETTES  (the critical, new layer)
   * All ramps verified for deuteranopia / protanopia / tritanopia legibility:
   * hue AND lightness step together so series stay separable in greyscale.
   * ══════════════════════════════════════════════════════════════════════*/

  /* Categorical — chart series. Order = assignment order. 8 then cycle.
   * Pairs hue rotation with a lightness zig-zag so adjacent series never
   * collapse under colour-vision deficiency. */
  --dv-cat-1:  #2D6FB3;   /* azure      */
  --dv-cat-2:  #E66854;   /* coral  (brand apex)            */
  --dv-cat-3:  #1E8F73;   /* emerald (brand)                */
  --dv-cat-4:  #6B5CE7;   /* purple  (brand alt)            */
  --dv-cat-5:  #D9931A;   /* amber                          */
  --dv-cat-6:  #4BA8C9;   /* sky                            */
  --dv-cat-7:  #B7508F;   /* rose                           */
  --dv-cat-8:  #6B7B8E;   /* slate  (= --as-muted, "other") */

  /* Soft tints (12%) for area fills, hover rows, selected chips */
  --dv-cat-1-soft: rgba(45,111,179,0.12);
  --dv-cat-2-soft: rgba(230,104,84,0.12);
  --dv-cat-3-soft: rgba(30,143,115,0.12);
  --dv-cat-4-soft: rgba(107,92,231,0.12);

  /* Map event layers — high hue+value separation for overlay legibility.
   * Echoes the categorical palette so series & layers feel related. */
  --dv-layer-ucdp:  #E66854;   /* UCDP  · state-based conflict   */
  --dv-layer-acled: #D9931A;   /* ACLED · political violence     */
  --dv-layer-gtd:   #6B5CE7;   /* GTD   · terrorism              */
  --dv-layer-emdat: #1E8F73;   /* EM-DAT· natural disasters      */

  /* Sequential — single-hue navy ramp for choropleth (low → high) */
  --dv-seq-0: #EEF2F7;
  --dv-seq-1: #C9D6E5;
  --dv-seq-2: #9DB4CE;
  --dv-seq-3: #6E8EAF;
  --dv-seq-4: #46688C;
  --dv-seq-5: #2E4A66;
  --dv-seq-6: #1E2530;

  /* Heatmap — warm density ramp (sparse → dense), brand-warm through coral */
  --dv-heat-0: #FBE6C8;
  --dv-heat-1: #F6C766;
  --dv-heat-2: #EF9A3D;
  --dv-heat-3: #E66854;
  --dv-heat-4: #C13B2F;
  --dv-heat-5: #7A1E20;

  /* Diverging — emerald ↔ neutral ↔ coral, for signed indicators (change %) */
  --dv-div-neg-3: #156B57;
  --dv-div-neg-2: #4DA48C;
  --dv-div-neg-1: #A9CFC3;
  --dv-div-mid:   #F1ECE6;
  --dv-div-pos-1: #F1B6A9;
  --dv-div-pos-2: #E0826F;
  --dv-div-pos-3: #C2402E;

  /* ── Chart surfaces (light default; dark opt-in via [data-dv-surface]) ─── */
  --dv-surface:        var(--as-white);
  --dv-surface-raised: var(--as-surface);     /* #F5F7FA panels behind chart */
  --dv-gridline:       rgba(52,63,82,0.08);
  --dv-axis:           rgba(52,63,82,0.45);
  --dv-axis-label:     var(--as-muted);
  --dv-chart-fg:       var(--as-navy);
  --dv-tooltip-bg:     var(--as-navy);
  --dv-tooltip-fg:     #ffffff;
  --dv-band:           rgba(45,111,179,0.10); /* confidence band fill        */

  /* ── Density (comfortable default; compact opt-in via [data-dv-density]) ─ */
  --dl-row-h:       40px;
  --dl-control-h:   40px;
  --dl-panel-pad:   1.25rem;
  --dl-gap:         0.75rem;
  --dl-font-ui:     0.875rem;   /* 14px control/label text                   */

  /* ── DataLab layout ───────────────────────────────────────────────────── */
  --dl-panel-w:     340px;      /* explorer left rail                        */
  --dl-hubbar-h:    56px;       /* sub-product spine bar                     */
  --dl-radius:      var(--as-radius-lg);
  --dl-focus:       0 0 0 3px rgba(45,111,179,0.40); /* AA visible focus ring */
}

/* Dark chart surface — for embedded dark Data Stories & dashboards */
[data-dv-surface="dark"] {
  --dv-surface:        #1E2530;
  --dv-surface-raised: #2A3340;
  --dv-gridline:       rgba(255,255,255,0.08);
  --dv-axis:           rgba(255,255,255,0.40);
  --dv-axis-label:     rgba(255,255,255,0.62);
  --dv-chart-fg:       #ffffff;
  --dv-tooltip-bg:     #0E1116;
  --dv-tooltip-fg:     #ffffff;
  --dv-band:           rgba(75,168,201,0.16);
  --dv-seq-0: #2A3340; --dv-seq-6: #BFD4EC;   /* invert choropleth for dark   */
}

/* Compact density — small screens, dense dashboards */
[data-dv-density="compact"] {
  --dl-row-h:     32px;
  --dl-control-h: 34px;
  --dl-panel-pad: 0.875rem;
  --dl-gap:       0.5rem;
  --dl-font-ui:   0.8125rem;
}

/* Alternate categorical ramp — Okabe-Ito tuned (toggle for max CVD safety) */
[data-dv-palette="okabe"] {
  --dv-cat-1: #0072B2; --dv-cat-2: #D55E00; --dv-cat-3: #009E73;
  --dv-cat-4: #CC79A7; --dv-cat-5: #E69F00; --dv-cat-6: #56B4E9;
  --dv-cat-7: #8C5AA8; --dv-cat-8: #6B7B8E;
}

/* ============================================================================
 * COMPONENT LAYER  — matches existing SPA class names where possible
 * (.explorer, .panel, .result, .hubbar, .geo … per App.svelte / GeoHub.svelte)
 * ==========================================================================*/

/* ── Hub spine bar — ties the three sub-products together ────────────────── */
.dl-hubbar {
  display: flex; align-items: center; gap: 1.5rem;
  height: var(--dl-hubbar-h);
  padding: 0 1.25rem;
  background: var(--as-white);
  border-bottom: 1px solid var(--as-divider);
}
.dl-hubbar__tabs { display: flex; gap: 0.25rem; }
.dl-hubtab {
  font: 600 var(--dl-font-ui)/1 var(--as-font-sans);
  color: var(--as-fg-muted);
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 0.875rem; border-radius: var(--as-radius-md);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color var(--as-duration-fast) var(--as-ease),
              background var(--as-duration-fast) var(--as-ease);
}
.dl-hubtab:hover { color: var(--as-fg); background: var(--as-surface); }
.dl-hubtab[aria-selected="true"] { color: var(--as-navy); background: var(--as-surface); }
.dl-hubtab[aria-selected="true"] .dl-hubtab__dot { background: var(--as-coral); }
.dl-hubtab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-border-strong); }

/* ── Explorer shell — left rail + main stage ─────────────────────────────── */
.dl-explorer { display: grid; grid-template-columns: var(--dl-panel-w) 1fr; min-height: 0; }
.dl-panel {
  background: var(--as-white);
  border-right: 1px solid var(--as-divider);
  padding: var(--dl-panel-pad);
  display: flex; flex-direction: column; gap: 1.25rem;
  overflow-y: auto;
}
.dl-stage { background: var(--as-bg-raised); padding: 1.5rem; min-width: 0; }

/* ── Field label / group ─────────────────────────────────────────────────── */
.dl-field { display: flex; flex-direction: column; gap: 0.5rem; }
.dl-field__label {
  font: 700 var(--as-text-eyebrow)/1 var(--as-font-sans);
  letter-spacing: var(--as-tracking-eyebrow); text-transform: uppercase;
  color: var(--as-fg-muted);
}

/* ── Search combobox / typeahead ─────────────────────────────────────────── */
.dl-search { position: relative; }
.dl-search__input {
  width: 100%; height: var(--dl-control-h); box-sizing: border-box;
  font: 400 var(--dl-font-ui)/1 var(--as-font-sans); color: var(--as-fg);
  padding: 0 0.875rem 0 2.25rem;
  background: var(--as-white);
  border: 1px solid var(--as-border-strong); border-radius: var(--as-radius-md);
  transition: border-color var(--as-duration-fast) var(--as-ease),
              box-shadow var(--as-duration-fast) var(--as-ease);
}
.dl-search__input::placeholder { color: var(--as-fg-muted); }
.dl-search__input:focus { outline: none; border-color: var(--dv-cat-1); box-shadow: var(--dl-focus); }
.dl-search__icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--as-fg-muted); pointer-events: none; }

/* grouped results listbox */
.dl-results { display: flex; flex-direction: column; }
.dl-results__group {
  font: 700 var(--as-text-eyebrow)/1 var(--as-font-sans);
  letter-spacing: var(--as-tracking-eyebrow); text-transform: uppercase;
  color: var(--as-fg-muted); padding: 0.75rem 0.25rem 0.375rem;
}
.dl-result {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.625rem 0.5rem; border-radius: var(--as-radius-md);
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--as-duration-fast) var(--as-ease);
}
.dl-result:hover, .dl-result[aria-selected="true"] { background: var(--as-surface); }
.dl-result[aria-selected="true"] { border-color: var(--as-divider-strong); }
.dl-result__body { min-width: 0; }
.dl-result__title { font: 500 var(--dl-font-ui)/1.35 var(--as-font-sans); color: var(--as-fg); }
.dl-result__title mark { background: var(--dv-cat-2-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.dl-result__meta { font: 400 0.75rem/1.4 var(--as-font-sans); color: var(--as-fg-muted); margin-top: 2px; }

/* ── Badges (source / domain / data-type / has-data dot) ─────────────────── */
.dl-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font: 600 0.6875rem/1 var(--as-font-sans); letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem; border-radius: var(--as-radius-pill);
  background: var(--as-surface); color: var(--as-fg-muted);
  border: 1px solid var(--as-divider);
}
.dl-badge--source { font-family: var(--as-font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.dl-badge--domain { background: var(--dv-cat-1-soft); color: #1f5489; border-color: transparent; }
.dl-badge--type   { background: var(--dv-cat-4-soft); color: #4b3fb0; border-color: transparent; }
.dl-hasdata { display: inline-flex; align-items: center; gap: 0.375rem; font: 500 0.75rem/1 var(--as-font-sans); color: var(--as-emerald); }
.dl-hasdata__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--as-emerald); box-shadow: 0 0 0 3px var(--dv-cat-3-soft); }
.dl-nodata__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--as-border-strong); }

/* ── Chart-type tabs (pills) ─────────────────────────────────────────────── */
.dl-charttabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--as-surface); border-radius: var(--as-radius-pill); border: 1px solid var(--as-divider); }
.dl-charttab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: 600 0.8125rem/1 var(--as-font-sans); color: var(--as-fg-muted);
  background: none; border: none; cursor: pointer;
  padding: 0.5rem 0.875rem; border-radius: var(--as-radius-pill);
  transition: all var(--as-duration-fast) var(--as-ease);
}
.dl-charttab:hover { color: var(--as-fg); }
.dl-charttab[aria-selected="true"] { background: var(--as-white); color: var(--as-navy); box-shadow: var(--as-shadow-card); }

/* ── Buttons (brand) ─────────────────────────────────────────────────────── */
.dl-btn { font: 600 var(--dl-font-ui)/1 var(--as-font-sans); border: none; border-radius: var(--as-radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; height: var(--dl-control-h); transition: all var(--as-duration-fast) var(--as-ease); }
.dl-btn--coral { background: var(--as-coral); color: #fff; }
.dl-btn--coral:hover { background: var(--as-coral-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(230,104,84,0.30); }
.dl-btn--ghost { background: var(--as-white); color: var(--as-fg); border: 1px solid var(--as-border-strong); }
.dl-btn--ghost:hover { background: var(--as-surface); }
.dl-btn--icon { width: var(--dl-control-h); padding: 0; justify-content: center; }
.dl-btn:focus-visible { outline: none; box-shadow: var(--dl-focus); }

/* ── Toggle / segmented (log·linear) ─────────────────────────────────────── */
.dl-seg { display: inline-flex; border: 1px solid var(--as-border-strong); border-radius: var(--as-radius-md); overflow: hidden; }
.dl-seg button { font: 600 0.8125rem/1 var(--as-font-sans); color: var(--as-fg-muted); background: var(--as-white); border: none; cursor: pointer; padding: 0 0.75rem; height: var(--dl-control-h); }
.dl-seg button + button { border-left: 1px solid var(--as-border-strong); }
.dl-seg button[aria-pressed="true"] { background: var(--as-navy); color: #fff; }

/* ── Year / range slider with play-pause ─────────────────────────────────── */
.dl-timeline { display: flex; align-items: center; gap: 0.75rem; }
.dl-play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--as-border-strong); background: var(--as-white); color: var(--as-navy); display: grid; place-items: center; cursor: pointer; }
.dl-play:hover { border-color: var(--as-coral); color: var(--as-coral); }
.dl-track { position: relative; flex: 1; height: 4px; border-radius: 999px; background: var(--as-divider-strong); }
.dl-track__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--as-coral); }
.dl-track__thumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--as-white); border: 2px solid var(--as-coral); transform: translate(-50%,-50%); box-shadow: var(--as-shadow-card); }
.dl-year { font: 500 var(--dl-font-ui)/1 var(--as-font-mono); color: var(--as-fg); min-width: 3.5ch; }

/* ── Layer toggle (Geo-Hub) ──────────────────────────────────────────────── */
.dl-layer { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.5rem; border-radius: var(--as-radius-md); cursor: pointer; }
.dl-layer:hover { background: var(--as-surface); }
.dl-layer__sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.dl-layer__name { font: 600 var(--dl-font-ui)/1.2 var(--as-font-sans); color: var(--as-fg); flex: 1; }
.dl-layer__count { font: 400 0.75rem/1 var(--as-font-mono); color: var(--as-fg-muted); }
.dl-layer[aria-pressed="false"] { opacity: 0.45; }
.dl-layer[aria-pressed="false"] .dl-layer__sw { background: var(--as-border-strong) !important; }

/* ── Citation block (always visible — incl. embeds) ──────────────────────── */
.dl-cite { display: flex; align-items: baseline; gap: 0.5rem; font: 400 0.75rem/1.5 var(--as-font-mono); color: var(--as-fg-muted); padding-top: 0.625rem; border-top: 1px solid var(--as-divider); }
.dl-cite__src { color: var(--as-fg); font-weight: 500; }
.dl-cite a { color: var(--as-coral); text-decoration: underline; text-underline-offset: 2px; }

/* ── Cards / panels ──────────────────────────────────────────────────────── */
.dl-card { background: var(--as-white); border: 1px solid var(--as-divider); border-radius: var(--dl-radius); box-shadow: var(--as-shadow-card); }
.dl-card--pad { padding: 1.25rem; }

/* ── Skeleton loaders ────────────────────────────────────────────────────── */
.dl-skel { background: linear-gradient(90deg, var(--as-surface) 25%, #ECEFF3 37%, var(--as-surface) 63%); background-size: 400% 100%; border-radius: var(--as-radius-sm); animation: dl-shimmer 1.4s ease infinite; }
@keyframes dl-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .dl-skel { animation: none; } }

/* ── State blocks (empty / no-data / error) ──────────────────────────────── */
.dl-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 2.5rem 1.5rem; color: var(--as-fg-muted); }
.dl-state__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--as-surface); color: var(--as-fg-muted); }
.dl-state--error .dl-state__icon { background: var(--dv-cat-2-soft); color: var(--as-coral); }
.dl-state__title { font: 600 1rem/1.3 var(--as-font-serif); color: var(--as-fg); }
.dl-state__body { font: 400 0.875rem/1.5 var(--as-font-sans); max-width: 30ch; text-wrap: pretty; }

/* ── Tooltip / popover ───────────────────────────────────────────────────── */
.dl-tooltip { background: var(--dv-tooltip-bg); color: var(--dv-tooltip-fg); border-radius: var(--as-radius-md); padding: 0.625rem 0.75rem; font: 400 0.8125rem/1.45 var(--as-font-sans); box-shadow: var(--as-shadow-dark); }
.dl-tooltip__num { font-family: var(--as-font-mono); font-variant-numeric: tabular-nums; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.dl-toast { display: inline-flex; align-items: center; gap: 0.625rem; background: var(--as-navy); color: #fff; border-radius: var(--as-radius-md); padding: 0.75rem 1rem; font: 500 var(--dl-font-ui)/1.3 var(--as-font-sans); box-shadow: var(--as-shadow-dark); }

/* ── Tabular numerals utility for data ───────────────────────────────────── */
.dl-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }

/* ============================================================================
 * RTL  — every component mirrors. Set dir="rtl" on the surface root.
 * Arabic typography uses IBM Plex Sans Arabic (loaded by the host page).
 * ==========================================================================*/
[dir="rtl"] { --as-font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
[dir="rtl"] .dl-panel { border-right: none; border-left: 1px solid var(--as-divider); }
[dir="rtl"] .dl-search__input { padding: 0 2.25rem 0 0.875rem; }
[dir="rtl"] .dl-search__icon { left: auto; right: 0.75rem; }
[dir="rtl"] .dl-track__fill { inset: 0 0 0 auto; }
[dir="rtl"] .dl-cite { font-family: var(--as-font-mono); } /* citations stay LTR-numeral */

/* ── Visible focus for all interactive atoms (WCAG 2.1 AA) ───────────────── */
.dl-result:focus-visible, .dl-charttab:focus-visible, .dl-hubtab:focus-visible,
.dl-layer:focus-visible, .dl-play:focus-visible, .dl-seg button:focus-visible {
  outline: none; box-shadow: var(--dl-focus);
}