/* ═══ SHADCN/UI DESIGN SYSTEM ═══════════════════════════════════
   shadcn/ui "new-york" style, zinc base, dark theme — ported to plain
   CSS for this static site. It is loaded after each page's inline
   <style>, so the `shadcn` layer is declared last and always wins over
   the page's own layers without !important.

   SOURCE OF TRUTH: /shadcn.css at the repo root. Each country folder
   keeps a copy so it can deploy on its own; run
   `scripts/sync-shadcn.sh` after editing this file.

   Component map (shadcn primitive → selectors here):
     Tabs        .segmented/.seg (hub), .tabs-list/.layer-btn (country)
     Card        .stat, .card, .stat-section, .footer .cta, .caveat
     Badge       .stats-bar .stat
     Button      .back-link (outline), .close-btn (default), summaries (ghost)
     HoverCard   .tip, .tooltip
     Dialog      .modal-bg/.modal
     Table       .tscroll table
     Collapsible details.tablewrap, details.prompt-section

   Data colours (treemap tiles, bars, legend ramps) stay in each page's
   JS — they encode values, not chrome. */

@layer shadcn {
  :root {
    color-scheme: dark;

    /* ── shadcn tokens (zinc, dark) ─────────────────────────── */
    --radius: 0.625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.92 0.004 286.32);
    --primary-foreground: oklch(0.21 0.006 285.885);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    /* shadcn's --accent (hover surface) is renamed: every page already
       uses --accent for its data/brand colour. */
    --accent-surface: oklch(0.274 0.006 286.033);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.552 0.016 285.938);
    /* Tertiary text: lighter than zinc-500 so 10–11px labels keep ≥4.5:1. */
    --subtle-foreground: oklch(0.63 0.014 286);

    --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.25), 0 4px 6px -4px oklch(0 0 0 / 0.2);
    --focus-ring: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);

    --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", monospace;

    /* ── Legacy page tokens remapped onto shadcn ────────────── */
    /* Hub page */
    --bg: var(--background);
    --surface-1: var(--card);
    --surface-2: var(--muted);
    --surface-3: oklch(0.32 0.006 286);
    --line: var(--input);
    --line-soft: var(--border);
    --text: var(--foreground);
    --text-2: var(--muted-foreground);
    --text-3: var(--subtle-foreground);
    /* Country pages */
    --surface: var(--card);
    --surface2: var(--muted);
    --surface3: oklch(0.32 0.006 286);
    --border-soft: var(--border);
    --text-dim: var(--muted-foreground);
    --text-muted: var(--subtle-foreground);
    /* Shared radii/elevation, now on the shadcn scale. */
    --r-sm: var(--radius-sm); --r-md: var(--radius-md);
    --r-lg: var(--radius-lg); --r-xl: var(--radius-xl);
    --e1: var(--shadow-xs); --e2: var(--shadow-sm); --e3: var(--shadow-lg);
  }

  /* ── Base ─────────────────────────────────────────────────── */
  body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  ::selection { background: color-mix(in oklch, var(--primary) 25%, transparent); }

  /* One shadcn focus ring for every control. */
  :is(a, button, summary, [role="button"], [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--ring);
  }

  code, pre, kbd, .prompt-box { font-family: var(--font-mono); }

  /* Links inside prose: foreground + underline, not a second accent. */
  :is(.lede, .subtitle, .note) a {
    color: var(--foreground);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--foreground) 35%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s;
  }
  :is(.lede, .subtitle, .note) a:hover { text-decoration-color: var(--foreground); }

  /* ── Page chrome ──────────────────────────────────────────── */
  .masthead, .header { border-bottom: 1px solid var(--border); }
  :is(.masthead, .header) h1 { font-weight: 600; letter-spacing: -0.025em; }
  .lede, .header .subtitle { color: var(--muted-foreground); }

  .brand, .header-logo { border-radius: var(--radius-sm); }

  /* Uppercase micro-labels → shadcn's sentence-case muted labels. */
  :is(.label, .control-label) {
    font-size: 12px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--muted-foreground);
  }

  /* ── Tabs (segmented controls) ────────────────────────────── */
  .controlbar, .controls {
    background: color-mix(in oklch, var(--background) 85%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .segmented, .tabs-list {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0;
    min-height: 36px;
    padding: 3px;
    background: var(--muted);
    color: var(--muted-foreground);
    border-radius: var(--radius-lg);
  }

  :is(.seg, .layer-btn) {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-lg) - 3px);
    background: transparent;
    color: var(--muted-foreground);
    font: inherit; font-size: 13px; font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition-property: color, background-color, box-shadow, border-color, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
  :is(.seg, .layer-btn):hover { color: var(--foreground); background: transparent; border-color: transparent; }
  :is(.seg[aria-pressed="true"], .layer-btn.active) {
    background: var(--surface-3);
    border-color: var(--input);
    color: var(--foreground);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
  }

  /* ── Card ─────────────────────────────────────────────────── */
  /* Hub stat strip → row of cards. */
  .stats {
    gap: 12px;
    background: transparent;
    border: 0;
    padding: 16px var(--gutter);
  }
  .stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
  }
  .stats .stat dt {
    font-size: 13px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--muted-foreground);
    margin-bottom: 6px;
  }
  .stats .stat dd { font-weight: 600; letter-spacing: -0.025em; }
  .stats .stat .sub { font-size: 12px; letter-spacing: 0; color: var(--muted-foreground); margin-top: 4px; }

  /* Hub country cards. */
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--shadow-sm);
  }
  .card:hover {
    background: var(--card);
    border-color: var(--input);
    box-shadow: var(--shadow-lg);
    translate: 0 -2px;
  }
  .card-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
  /* "Open →" → outline Button (sm). */
  .card-head .open {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
    border: 1px solid var(--input); border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--input) 30%, transparent);
    font-size: 12px; font-weight: 500; color: var(--foreground);
    box-shadow: var(--shadow-xs);
  }
  .card:hover .open { color: var(--foreground); background: color-mix(in oklch, var(--input) 60%, transparent); translate: 0 0; }
  .card-src { font-size: 12px; color: var(--muted-foreground); }
  .kpi dt, .fact dt {
    font-size: 11px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--muted-foreground);
  }
  .kpi dd { font-weight: 600; }
  .kpi .unit { font-size: 11px; letter-spacing: 0; color: var(--subtle-foreground); }
  .mix-key { font-size: 11px; color: var(--muted-foreground); }
  .facts { border-top: 1px solid var(--border); }
  .fact { font-size: 12px; }
  .fact dd { color: var(--muted-foreground); }
  .fact dd b { color: var(--foreground); font-weight: 500; }

  /* Country breakdown panels. */
  .stats-bar, .breakdown-bar { border-bottom: 1px solid var(--border); }
  .breakdown-bar { background: transparent; }
  .stat-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
  }
  .stat-section-title {
    font-size: 12px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--muted-foreground);
    margin-bottom: 6px;
  }
  .stat-section-value { font-weight: 600; letter-spacing: -0.025em; }
  .stat-section-sub { font-size: 12px; color: var(--muted-foreground); }
  .breakdown-bar-bg { background: var(--muted); }
  .breakdown-label { color: var(--muted-foreground); }
  .breakdown-value { font-weight: 500; }

  /* ── Badge (country stat chips) ───────────────────────────── */
  .stats-bar { gap: 8px; padding-block: 12px; }
  .stats-bar .stat {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    font-size: 12px; font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
  }
  .stats-bar .stat strong { color: var(--foreground); font-weight: 600; }

  /* ── Ranking rows (hub) ───────────────────────────────────── */
  .rank-row { border-radius: var(--radius-md); }
  .rank-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
  .track { background: var(--muted); border-radius: var(--radius-sm); }
  .zero { background: var(--input); }
  .rank-val { font-weight: 600; }
  .sechead h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .sechead .aside { font-size: 13px; color: var(--muted-foreground); }
  .note { font-size: 13px; color: var(--muted-foreground); }

  /* ── Collapsible (details/summary as ghost Button) ────────── */
  :is(details.tablewrap, details.prompt-section) > summary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; width: fit-content;
    padding: 0 12px 0 10px;
    border-radius: var(--radius-md);
    list-style: none;
    font-size: 13px; font-weight: 500;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 0.15s;
  }
  :is(details.tablewrap, details.prompt-section) > summary::-webkit-details-marker { display: none; }
  :is(details.tablewrap, details.prompt-section) > summary:hover { background: var(--accent-surface); }
  /* Lucide chevron-right, rotated when open. */
  :is(details.tablewrap, details.prompt-section) > summary::before {
    content: "";
    inline-size: 16px; block-size: 16px; flex: 0 0 auto;
    margin: 0;
    background: var(--muted-foreground);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 0.2s;
  }
  :is(details.tablewrap, details.prompt-section)[open] > summary::before { content: ""; rotate: 90deg; }

  details.prompt-section .prompt-box {
    margin-top: 8px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--muted-foreground);
  }

  /* ── Table ────────────────────────────────────────────────── */
  .tscroll {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }
  .tscroll table { font-size: 13px; }
  .tscroll :is(th, td) { border-bottom: 1px solid var(--border); padding: 10px 12px; }
  .tscroll tbody tr:last-child td { border-bottom: 0; }
  .tscroll th {
    height: 40px;
    font-size: 13px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--foreground);
    background: var(--card);
  }
  .tscroll td { color: var(--muted-foreground); }
  .tscroll tbody tr:hover td { background: color-mix(in oklch, var(--muted) 50%, transparent); color: var(--foreground); }
  .tscroll td:first-child { color: var(--foreground); font-weight: 500; }

  /* ── HoverCard (floating tooltips) ────────────────────────── */
  .tip, .tooltip {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    font-size: 13px;
  }
  .tip h4, .tooltip .tt-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .tip .r, .tooltip .tt-label { color: var(--muted-foreground); }
  .tip .r b, .tooltip .tt-val { color: var(--foreground); font-weight: 500; }
  .tip .hint { font-size: 12px; color: var(--muted-foreground); }
  .tooltip .tt-cat, .modal .m-cat {
    display: inline-flex; width: fit-content;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: 11px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
  }
  .tooltip .tt-cat { margin: 4px 0 10px; }
  .tooltip .tt-highlight { border-bottom: 1px solid var(--border); }
  .tooltip .tt-hint { font-style: normal; color: var(--muted-foreground); font-size: 12px; }

  /* ── Dialog ───────────────────────────────────────────────── */
  .modal-bg { background: oklch(0 0 0 / 0.6); backdrop-filter: blur(2px); }
  .modal-bg.show .modal { animation: shadcn-dialog-in 0.2s cubic-bezier(0.2, 0, 0, 1); }
  .modal {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    max-width: 32rem;
  }
  .modal h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
  .modal .m-cat { margin-bottom: 16px; }
  .modal .dgrid { gap: 8px; }
  .modal .dcard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
  }
  .modal .dcard .dl {
    font-size: 12px; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--muted-foreground);
    margin-bottom: 4px;
  }
  .modal .dcard .dv { font-weight: 600; letter-spacing: -0.02em; }
  .modal .bar-bg { background: var(--muted); }
  .modal .rationale { font-size: 14px; color: var(--muted-foreground); line-height: 1.6; }
  @keyframes shadcn-dialog-in {
    from { opacity: 0; scale: 0.96; }
    to   { opacity: 1; scale: 1; }
  }

  /* ── Button ───────────────────────────────────────────────── */
  /* default */
  .modal .close-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 16px;
    margin-top: 20px; margin-left: auto;
    background: var(--primary);
    color: var(--primary-foreground);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-xs);
    transition: background-color 0.15s, box-shadow 0.15s;
  }
  .modal .close-btn:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
  .modal .close-btn:focus-visible { box-shadow: var(--focus-ring); }
  .modal:has(.close-btn) { display: flex; flex-direction: column; }

  /* outline, size sm, with a lucide arrow-left icon */
  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px 0 10px;
    margin-bottom: 12px;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--input) 30%, transparent);
    color: var(--foreground);
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    box-shadow: var(--shadow-xs);
  }
  .back-link:hover {
    color: var(--foreground);
    border-color: var(--input);
    background: color-mix(in oklch, var(--input) 50%, transparent);
  }

  /* ── Alert-style callouts ─────────────────────────────────── */
  .footer .cta, .caveat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.6;
  }
  .footer .cta a {
    color: var(--foreground);
    font-weight: 600;
  }
  .caveat b { color: var(--foreground); }

  /* ── Footer ───────────────────────────────────────────────── */
  footer, .footer {
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 13px;
    font-weight: 400;
  }
  .footer .credit { font-size: 13px; color: var(--muted-foreground); }
  .footer .credit strong { color: var(--foreground); font-weight: 600; }

  /* ── Treemap frame ────────────────────────────────────────── */
  #treemap {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
  }

  /* ── Small screens ────────────────────────────────────────── */
  @media (max-width: 768px) {
    :is(.seg, .layer-btn) { height: 28px; padding: 0 8px; font-size: 12px; }
    .stats-bar { gap: 6px; }
    .stats-bar .stat { font-size: 11.5px; padding: 2px 8px; }
  }
  @media (max-width: 560px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat { padding: 12px 14px; }
    .segmented, .tabs-list { width: 100%; }
  }

  /* ── Press feedback (scale 0.96) on every button-like control ─ */
  :is(.seg, .layer-btn, .back-link, .modal .close-btn, .cmdk-trigger, .card-head .open,
      details.tablewrap > summary, details.prompt-section > summary) {
    transition-property: color, background-color, border-color, box-shadow, scale, translate;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
  :is(.seg, .layer-btn, .back-link, .modal .close-btn, .cmdk-trigger,
      details.tablewrap > summary, details.prompt-section > summary):active { scale: 0.96; }

  /* ── Stat card icons (hub) ────────────────────────────────── */
  .stats .stat dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .stat-icon { inline-size: 16px; block-size: 16px; flex: 0 0 auto; color: var(--muted-foreground); stroke-width: 1.5; }

  /* ── Header actions: search trigger + logo ────────────────── */
  .header-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

  /* Outline Button that looks like a search field (shadcn docs-site pattern). */
  .cmdk-trigger {
    appearance: none;
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; min-width: 15rem;
    padding: 0 6px 0 10px;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--input) 30%, transparent);
    color: var(--muted-foreground);
    font: inherit; font-size: 13px; font-weight: 400;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
  }
  .cmdk-trigger:hover { background: color-mix(in oklch, var(--input) 50%, transparent); color: var(--foreground); }
  .cmdk-trigger .icon { inline-size: 16px; block-size: 16px; stroke-width: 1.5; flex: 0 0 auto; }
  .cmdk-trigger-label { flex: 1; text-align: start; }
  kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 4px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-family: var(--font-sans); font-size: 11px; font-weight: 500;
    pointer-events: none; user-select: none;
  }

  /* ── Command (in a native <dialog>) ───────────────────────── */
  .cmdk {
    position: fixed; inset: 0;
    margin: min(18vh, 140px) auto auto;
    width: min(32rem, calc(100vw - 32px));
    max-height: min(70vh, 30rem);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: none; flex-direction: column;
  }
  .cmdk[open] { display: flex; animation: shadcn-dialog-in 0.15s cubic-bezier(0.2, 0, 0, 1); }
  .cmdk::backdrop { background: oklch(0 0 0 / 0.6); backdrop-filter: blur(2px); }

  .cmdk-input {
    display: flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 14px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .cmdk-input .icon { inline-size: 16px; block-size: 16px; color: var(--muted-foreground); stroke-width: 1.5; flex: 0 0 auto; }
  .cmdk-input input {
    flex: 1; min-width: 0; height: 100%;
    background: transparent; border: 0; outline: none;
    color: var(--foreground); font: inherit; font-size: 14px;
  }
  .cmdk-input input::placeholder { color: var(--muted-foreground); }
  .cmdk-input:focus-within { box-shadow: none; }

  .cmdk-list { overflow-y: auto; overscroll-behavior: contain; padding: 4px; flex: 1 1 auto; scroll-padding-block: 4px; }
  .cmdk-group + .cmdk-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
  .cmdk-heading { padding: 6px 8px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
  /* Concentric: dialog radius (14px) − list padding (4px). */
  .cmdk-item {
    display: flex; align-items: center; gap: 10px;
    min-height: 36px; padding: 6px 8px;
    border-radius: calc(var(--radius-xl) - 4px);
    font-size: 14px;
    color: var(--foreground);
    cursor: pointer;
    user-select: none;
  }
  .cmdk-item[aria-selected="true"] { background: var(--accent-surface); }
  .cmdk-item > .icon { inline-size: 16px; block-size: 16px; color: var(--muted-foreground); stroke-width: 1.5; flex: 0 0 auto; }
  .cmdk-flag { inline-size: 16px; text-align: center; font-size: 15px; line-height: 1; flex: 0 0 auto; }
  .cmdk-label { flex: 1; min-width: 0; }
  .cmdk-current {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--muted-foreground);
  }
  .cmdk-current .icon { inline-size: 14px; block-size: 14px; }
  .cmdk-empty { padding: 32px 16px; text-align: center; font-size: 14px; color: var(--muted-foreground); }
  .cmdk-footer {
    display: flex; gap: 16px; align-items: center;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--muted-foreground);
    flex: 0 0 auto;
  }
  .cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; }

  /* ── Staged entrance (hub, first paint only) ──────────────── */
  @keyframes shadcn-rise {
    from { opacity: 0; translate: 0 8px; filter: blur(4px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .masthead, .stats, .controlbar, main > section {
      animation: shadcn-rise 0.5s cubic-bezier(0.2, 0, 0, 1) backwards;
    }
    .stats { animation-delay: 0.1s; }
    .controlbar { animation-delay: 0.2s; }
    main > section:nth-of-type(1) { animation-delay: 0.3s; }
    main > section:nth-of-type(2) { animation-delay: 0.4s; }
  }

  @media (max-width: 768px) {
    .cmdk-trigger { min-width: 0; }
    .cmdk-trigger-label, .cmdk-trigger kbd { display: none; }
    .cmdk-trigger { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .cmdk-footer { display: none; }
  }
  @media (hover: none) { .cmdk-trigger kbd, .cmdk-footer { display: none; } }

  /* ═══ COUNTRY IDENTITY ═══════════════════════════════════════
     Each country page sets <html data-country="xx">. Two colours are
     lifted from its flag (tuned for contrast on the zinc background):
     --flag-1 drives the page accent, --flag-2 the secondary glow.
     flag.svg sits next to each page (flag-icons, MIT). */
  :root[data-country="gb"] { --flag-1: oklch(0.64 0.16 264); --flag-2: oklch(0.62 0.21 25); }
  :root[data-country="ca"] { --flag-1: oklch(0.64 0.22 27);  --flag-2: oklch(0.78 0.10 25); }
  :root[data-country="de"] { --flag-1: oklch(0.84 0.16 88);  --flag-2: oklch(0.60 0.22 28); }
  :root[data-country="cn"] { --flag-1: oklch(0.63 0.22 29);  --flag-2: oklch(0.87 0.17 95); }
  :root[data-country="jp"] { --flag-1: oklch(0.62 0.21 22);  --flag-2: oklch(0.90 0.01 20); }
  :root[data-country="ae"] { --flag-1: oklch(0.66 0.15 150); --flag-2: oklch(0.60 0.22 27); }
  :root[data-country="tr"] { --flag-1: oklch(0.62 0.22 25);  --flag-2: oklch(0.90 0.01 20); }
  :root[data-country="ie"] { --flag-1: oklch(0.68 0.15 150); --flag-2: oklch(0.75 0.16 60); }
  :root[data-country="pk"] { --flag-1: oklch(0.64 0.13 158); --flag-2: oklch(0.90 0.01 158); }

  :root[data-country] {
    --accent: var(--flag-1);
    --ring: color-mix(in oklch, var(--flag-1) 70%, var(--foreground));
  }
  :root[data-country] ::selection { background: color-mix(in oklch, var(--flag-1) 35%, transparent); }

  /* ── Header: faded flag + two-colour glow ─────────────────── */
  :root[data-country] .header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0;
  }
  /* The flag, anchored right, dissolving leftwards and downwards. */
  :root[data-country] .header::before {
    content: "";
    position: absolute; z-index: -1;
    /* The box is the flag's own 4:3 shape, sized by the header's height,
       so the fade runs across the flag and never leaves a hard edge. */
    inset-block-start: -17.5%; inset-inline-end: 0;
    height: 135%; aspect-ratio: 4 / 3;
    background: url("flag.svg") center / cover no-repeat;
    opacity: 0.16;
    filter: saturate(0.85);
    -webkit-mask-image: linear-gradient(to left, #000 25%, transparent), linear-gradient(to bottom, #000 50%, transparent 85%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to left, #000 25%, transparent), linear-gradient(to bottom, #000 50%, transparent 85%);
            mask-composite: intersect;
    pointer-events: none;
  }
  /* Soft light from the flag's colours, plus a flag-coloured rule
     in place of the plain border. */
  :root[data-country] .header::after {
    content: "";
    position: absolute; z-index: -2; inset: 0;
    background:
      linear-gradient(to right, var(--flag-1), var(--flag-2) 45%, transparent 85%) bottom / 100% 1px no-repeat,
      radial-gradient(60% 120% at 100% 0%, color-mix(in oklch, var(--flag-1) 16%, transparent), transparent 70%),
      radial-gradient(40% 90% at 70% 110%, color-mix(in oklch, var(--flag-2) 8%, transparent), transparent 70%);
    pointer-events: none;
  }
  /* flag.js swaps the static flag for a waving dot flag in the same box. */
  :root[data-country] .header.has-flag-wave::before { display: none; }
  .flag-wave {
    position: absolute; z-index: -1;
    inset-block-start: -4%; inset-inline-end: 1%;
    height: 112%; aspect-ratio: 4 / 3;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 70%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 70%, transparent);
            mask-composite: intersect;
    pointer-events: none;
  }
  .flag-wave canvas { display: block; width: 100%; height: 100%; }
  /* globe.js adds a globe zoomed on the country; the waving flag steps
     back behind it. */
  :root[data-country] .header.has-globe .flag-wave { opacity: 0.32; }
  .hub-globe.is-country {
    inset-inline-end: 16%; top: 50%;
    height: clamp(300px, 180%, 420px);
    translate: 0 -46%;
    z-index: -1;
  }
  /* Keep the logo and text crisp above the flag. */
  :root[data-country] .header-logo { opacity: 1; }

  /* ── Accent touches (chrome only; data colours stay untouched) ─ */
  :root[data-country] :is(.seg[aria-pressed="true"], .layer-btn.active) {
    background: color-mix(in oklch, var(--flag-1) 16%, var(--surface-3));
    border-color: color-mix(in oklch, var(--flag-1) 45%, transparent);
  }
  :root[data-country] :is(.subtitle, .footer) a {
    text-decoration-color: color-mix(in oklch, var(--flag-1) 70%, transparent);
  }
  :root[data-country] :is(.subtitle, .footer) a:hover { text-decoration-color: var(--flag-1); }
  :root[data-country] .back-link:hover { border-color: color-mix(in oklch, var(--flag-1) 50%, transparent); }
  :root[data-country] .cmdk-item[aria-selected="true"] {
    background: color-mix(in oklch, var(--flag-1) 14%, var(--accent-surface));
  }
  :root[data-country] :is(.tooltip .tt-cat, .modal .m-cat) {
    background: color-mix(in oklch, var(--flag-1) 14%, var(--secondary));
    border-color: color-mix(in oklch, var(--flag-1) 35%, transparent);
  }
  :root[data-country] .modal { border-top: 2px solid var(--flag-1); }
  :root[data-country] .footer .cta { border-inline-start: 2px solid var(--flag-1); }

  /* ── Hub cards: a flag watermark in the corner ────────────── */
  .card[style*="--flag"] { position: relative; isolation: isolate; overflow: hidden; }
  .card[style*="--flag"]::before {
    content: "";
    position: absolute; z-index: -1;
    inset-block-start: 0; inset-inline-end: 0;
    width: 60%; aspect-ratio: 4 / 3;
    background: var(--flag) right top / cover no-repeat;
    opacity: 0.1;
    -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 75%);
            mask-image: radial-gradient(100% 100% at 100% 0%, #000 20%, transparent 75%);
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
  }
  .card[style*="--flag"]:hover::before { opacity: 0.18; }

  @media (max-width: 768px) {
    :root[data-country] .header::before { inset-block-start: 0; height: 60%; opacity: 0.12; }
    .flag-wave { inset-block-start: 0; height: 55%; opacity: 0.35; }
  }

  /* ── Hub masthead: dotted globe (drawn by /globe.js) ──────── */
  .masthead:has(> .hub-globe) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 0;
  }
  .hub-globe {
    position: absolute; z-index: -1;
    inset-inline-end: 10%; top: 50%;
    height: clamp(280px, 200%, 380px); aspect-ratio: 1;
    translate: 0 -42%;
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 75%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 75%, transparent);
            mask-composite: intersect;
    pointer-events: none;
  }
  .hub-globe canvas { display: block; width: 100%; height: 100%; }
  /* The masthead's rule, in the colours of the markers it sits over. */
  .masthead:has(> .hub-globe)::after {
    content: "";
    position: absolute; z-index: -1; inset: auto 0 0;
    height: 1px;
    background: linear-gradient(to right, var(--border), oklch(0.64 0.16 264 / 0.7) 55%, oklch(0.66 0.15 150 / 0.7) 75%, oklch(0.64 0.22 27 / 0.6) 90%, var(--border));
  }
  @media (max-width: 768px) {
    .hub-globe { inset-inline-end: -25%; top: 0; translate: 0 -25%; height: 340px; opacity: 0.7; }
    .hub-globe.is-country { inset-inline-end: -12%; height: 300px; translate: 0 -30%; }
  }

  /* ═══ SITE FOOTER ═══════════════════════════════════════════
     Sources + CTA card, a country switcher, and a bottom bar.
     On country pages the flag colours carry into the bullets,
     the CTA's top edge and the current-country pill. */
  .site-footer {
    max-width: none;
    margin: 40px 0 0;
    padding: 40px var(--gutter) 28px;
    border-top: 1px solid var(--border);
    background: linear-gradient(to bottom, color-mix(in oklch, var(--card) 55%, transparent), transparent 70%);
    color: var(--muted-foreground);
    font-size: 13px; font-weight: 400; line-height: 1.6;
  }
  :root[data-country] .site-footer {
    background:
      radial-gradient(60% 120% at 100% 0%, color-mix(in oklch, var(--flag-1) 7%, transparent), transparent 70%),
      linear-gradient(to bottom, color-mix(in oklch, var(--card) 55%, transparent), transparent 70%);
  }
  .sf-main {
    display: grid; gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: start;
  }
  .sf-title {
    margin-bottom: 12px;
    font-size: 13px; font-weight: 500; letter-spacing: 0;
    color: var(--foreground);
  }
  .sf-list { list-style: none; display: grid; gap: 8px; max-width: 80ch; }
  .sf-list li { position: relative; padding-inline-start: 18px; text-wrap: pretty; }
  .sf-list li::before {
    content: "";
    position: absolute; inset-inline-start: 2px; top: 0.62em;
    inline-size: 6px; block-size: 6px; border-radius: 2px;
    background: var(--subtle-foreground);
  }
  :root[data-country] .sf-list li::before { background: var(--flag-1); }
  .sf-about { max-width: 80ch; text-wrap: pretty; }
  .site-footer a:not(.sf-button, .sf-top, .sf-countries a) {
    color: var(--foreground); font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--foreground) 35%, transparent);
    text-underline-offset: 3px;
  }
  :root[data-country] .site-footer a:not(.sf-button, .sf-top, .sf-countries a) {
    text-decoration-color: color-mix(in oklch, var(--flag-1) 70%, transparent);
  }

  .site-footer :is(.sf-button, .sf-top, .sf-countries a) { text-decoration: none; }

  /* CTA → Card with a default Button */
  .sf-cta {
    position: relative; overflow: hidden;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }
  .sf-cta::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    background: linear-gradient(to right, oklch(0.64 0.16 264), oklch(0.66 0.15 150), oklch(0.64 0.22 27));
  }
  :root[data-country] .sf-cta::before { background: linear-gradient(to right, var(--flag-1), var(--flag-2)); }
  .sf-eyebrow { font-size: 12px; color: var(--muted-foreground); margin-bottom: 6px; }
  .sf-cta-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--foreground); margin-bottom: 8px; text-wrap: balance; }
  .sf-cta p:not(.sf-eyebrow) { margin-bottom: 16px; }
  .sf-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 16px;
    border-radius: var(--radius-md);
    background: var(--primary); color: var(--primary-foreground);
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-xs);
    transition-property: background-color, box-shadow, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
  .sf-button:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
  .sf-button:active { scale: 0.96; }
  .sf-button svg { transition: translate 0.15s cubic-bezier(0.2, 0, 0, 1); }
  .sf-button:hover svg { translate: 2px 0; }

  /* Country switcher → outline pills */
  .sf-countries { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
  .sf-countries ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
  .sf-countries a {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--input) 20%, transparent);
    color: var(--foreground);
    font-size: 13px; font-weight: 500;
    transition-property: background-color, border-color, scale;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
  .sf-countries a:hover { background: color-mix(in oklch, var(--input) 50%, transparent); border-color: var(--input); }
  .sf-countries a:active { scale: 0.96; }
  .sf-countries a[aria-current="page"] {
    border-color: color-mix(in oklch, var(--flag-1, var(--ring)) 55%, transparent);
    background: color-mix(in oklch, var(--flag-1, var(--ring)) 14%, transparent);
  }
  .sf-countries img {
    inline-size: 20px; block-size: 15px; border-radius: 2px;
    outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px;
    object-fit: cover;
  }
  .sf-globe { color: var(--muted-foreground); }

  /* Bottom bar */
  .sf-bottom {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 28px; padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 12px;
  }
  .sf-bottom p { flex: 1; min-width: 12rem; }
  .sf-bottom strong { color: var(--foreground); font-weight: 600; }
  .sf-top {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 10px;
    border-radius: var(--radius-md);
    color: var(--muted-foreground); font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
  }
  .sf-top:hover { background: var(--accent-surface); color: var(--foreground); }

  @media (max-width: 900px) {
    .sf-main { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 560px) {
    .site-footer { padding-top: 28px; }
    .sf-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  }

  /* ═══ FAQ (generated by scripts/build-seo.py) ══════════════════
     Native <details> styled as shadcn's Accordion. */
  .faq {
    padding-block: 40px 8px;
    padding-inline: var(--gutter);
    max-width: calc(900px + 2 * var(--gutter));
  }
  .faq-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .faq-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .faq-head .aside { font-size: 13px; color: var(--muted-foreground); }
  .faq-list { border-top: 1px solid var(--border); }
  .faq-item { border-bottom: 1px solid var(--border); }
  .faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 4px;
    list-style: none;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item h3 {
    font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4;
    color: var(--foreground);
    text-wrap: pretty;
  }
  .faq-item > summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklch, var(--foreground) 40%, transparent); }
  :root[data-country] .faq-item > summary:hover h3 { text-decoration-color: var(--flag-1); }
  .faq-chevron { flex: 0 0 auto; color: var(--muted-foreground); transition: rotate 0.2s cubic-bezier(0.2, 0, 0, 1); }
  .faq-item[open] .faq-chevron { rotate: 180deg; }
  .faq-a { padding: 0 4px 18px; }
  .faq-a p { max-width: 75ch; font-size: 14px; line-height: 1.65; color: var(--muted-foreground); text-wrap: pretty; }
}