/* ---- Alliance (self-hosted) — replaces Google Fonts Urbanist ---- */
@font-face { font-family: 'Alliance No.1'; src: url('/assets/webFonts/AllianceNo1Light/font.woff2')     format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.1'; src: url('/assets/webFonts/AllianceNo1Regular/font.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.1'; src: url('/assets/webFonts/AllianceNo1SemiBold/font.woff2')  format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.1'; src: url('/assets/webFonts/AllianceNo1Bold/font.woff2')      format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.1'; src: url('/assets/webFonts/AllianceNo1ExtraBold/font.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.2'; src: url('/assets/webFonts/AllianceNo2Light/font.woff2')     format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.2'; src: url('/assets/webFonts/AllianceNo2Regular/font.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.2'; src: url('/assets/webFonts/AllianceNo2SemiBold/font.woff2')  format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.2'; src: url('/assets/webFonts/AllianceNo2Bold/font.woff2')      format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alliance No.2'; src: url('/assets/webFonts/AllianceNo2ExtraBold/font.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* Base link colour. Nav + brand + speaker-name links keep their dark ink
   via more-specific selectors below. */
a, a:visited { color: var(--accent); }
a:hover { color: var(--accent-strong); }

  /* ============================================================
     GINC design tokens. Mirrors the Sovereign Speech Index palette
     so this template inherits the look-and-feel cleanly.
     ============================================================ */
  /* ------------------------------------------------------------
     ACTIVE PALETTE: color_scheme_1.
     To revert, restore color_scheme_2 (the previous warm-grey palette):
       LIGHT  --bg #f4f3ef  --panel #ebeae5  --ink #1a1a1a  --ink-muted #555
              --ink-faint #888  --neutral-bar #d9d8d2  --neutral-other #c8c7c1
              --border #d6d5d0  --toggle-bg #ebeae5
       DARK   --bg #1a1a17  --panel #262622  --ink #ebeae5  --ink-muted #aaaaa5
              --ink-faint #7a7a75  --neutral-bar #3a3a35  --neutral-other #4a4a45
              --border #3a3a35  --toggle-bg #2f2f2a
       (scheme_2 had no dedicated --accent; links used #6652ff / #4a3ce0)
     ------------------------------------------------------------ */
  :root {
    --bg: #F7FAFC;
    --panel: #EDF2F7;
    --ink: #1A202C;
    --ink-muted: #2D3748;
    --ink-faint: #718096;
    --neutral-bar: #E2E8F0;
    --neutral-other: #CBD5E0;

    --accent: #6652FF;
    --accent-strong: #4A3CE0;
    --accent-soft: #A99BFF;

    --time-past:    #F4511E;
    --time-present: #FBC02D;
    --time-future:  #1976D2;
    --act-assert:   #66D9A0;
    --act-commit:   #009688;
    --act-call:     #F4511E;
    --stance-defer: #81D4FA;
    --stance-coord: #FBC02D;
    --stance-dom:   #E53935;
    --agency-nation: #3949AB;
    --agency-ally:   #43A047;
    --agency-adv:    #D81B60;
    --ref-dom:    #6D4C41;
    --ref-bilat:  #FF8F00;
    --ref-region: #00ACC1;
    --cap-ct: #42A5F5;
    --cap-si: #1976D2;
    --cap-ns: #0D47A1;
    --cap-hc: #BA68C8;
    --cap-ii: #8E24AA;
    --cap-gi: #4A148C;
    --cap-fs: #FFB300;
    --cap-pi: #EF6C00;
    --cap-ti: #BF360C;

    --border: #E2E8F0;
    --toggle-bg: #E2E8F0;
    --col-width: 320px;
    --col-gap: 32px;
    --page-pad-x: 24px;
    --page-max-width: calc(320px * 3 + 32px * 2 + 48px);
  }
  [data-theme="dark"] {
    --bg: #1A202C;
    --panel: #2D3748;
    --ink: #F7FAFC;
    --ink-muted: #CBD5E0;
    --ink-faint: #A0AEC0;
    --neutral-bar: #4A5568;
    --neutral-other: #2D3748;
    --border: #4A5568;
    --toggle-bg: #2D3748;
    --accent: #8B7FFF;
    --accent-strong: #6652FF;
    --accent-soft: #B7AEFF;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body {
    margin: 0; padding: 0; background: var(--bg); color: var(--ink);
    font-family: 'Alliance No.1', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  body {
    min-height: 100vh;
    padding: 28px 0 64px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* App launcher (grid icon + overlay) + brand icon are styled by app-launcher.js */

  /* ----- Site navigation ----- */
  .site-nav {
    width: 100%;
    max-width: var(--page-max-width);
    padding: 0 var(--page-pad-x);
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    margin-bottom: -4px;
  }
  .site-nav .brand { font-family: 'Alliance No.2', system-ui, sans-serif;
    font-family: 'Alliance No.1', system-ui, sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink);
    text-decoration: none; flex-shrink: 0;
  }
  .site-nav .nav-group {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: 18px; margin-left: auto;
  }
  .site-nav .links { font-family: 'Alliance No.2', system-ui, sans-serif;
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: 12.5px; font-weight: 600;
  }
  .site-nav .links a {
    color: var(--ink-muted); text-decoration: none;
    transition: color 0.15s;
  }
  .site-nav .links a:hover { color: var(--ink); }
  .site-nav .links a.active {
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
  }
  .theme-toggle {
    appearance: none; background: transparent; border: 0;
    color: var(--ink-muted); cursor: pointer;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    padding: 0;
  }
  .theme-toggle:hover { color: var(--ink); background: var(--toggle-bg); }
  .theme-toggle svg { width: 18px; height: 18px; display: block; }
  .theme-toggle .icon-sun  { display: none; }
  .theme-toggle .icon-moon { display: block; }
  [data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
  [data-theme="dark"] .theme-toggle .icon-moon { display: none; }

  /* ----- Page wrapper ----- */
  .page-head, .page-body {
    width: 100%; max-width: var(--page-max-width);
    margin: 0 auto; padding: 0 var(--page-pad-x);
  }
  .page-head { display: flex; flex-direction: column; gap: 18px; }
  .page-body { display: flex; flex-direction: column; gap: 18px; }

  /* ----- Hero / meta ----- */
  .meta { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
  .meta h1 { font-family: 'Alliance No.2', system-ui, sans-serif; font-size: 48px; font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
  .meta .sub { font-size: 15.5px; color: var(--ink-muted); line-height: 1.55; }
  .meta .sub a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; }
  .meta .sub a:hover { color: var(--ink-muted); }
  @media (max-width: 700px) { .meta h1 { font-family: 'Alliance No.2', system-ui, sans-serif; font-size: 36px; } }

  /* ----- Home-style promo cards (3 across) ----- */
  .promos {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin: 8px 0 4px;
  }
  .promo {
    background: var(--panel); border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px; min-height: 100%;
    color: inherit; text-decoration: none;
    box-shadow: inset 0 0 0 0 var(--ink);
    transition: box-shadow 0.28s ease, background 0.28s ease;
    cursor: pointer;
  }
  .promo:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .promo .head { display: flex; align-items: center; gap: 10px; }
  .promo .icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); flex-shrink: 0;
  }
  .promo .icon svg { width: 24px; height: 24px; display: block; }
  .promo .title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
  .promo .desc  { font-size: 13px; color: var(--ink-muted); line-height: 1.45; flex: 1; }
  .promo .desc-clamp {
    flex: 0 0 auto; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .promo .stats-row {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: end; gap: 12px; margin-top: auto; padding-top: 14px;
  }
  .promo .stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .promo .stat .num {
    font-family: 'Alliance No.1', system-ui, sans-serif;
    font-size: 30px; font-weight: 800; color: var(--ink);
    letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums;
  }
  .promo .stat .label {
    font-family: 'Alliance No.1', system-ui, sans-serif;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 600; margin-top: 2px;
  }
  @media (max-width: 720px) { .promos { grid-template-columns: 1fr; } }

  /* ----- AI Connector typewriter ----- */
  .ai-typer {
    font-family: 'Alliance No.2', system-ui, sans-serif;
    font-size: 12.5px; line-height: 1.5; color: var(--ink);
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 9px 11px; margin-top: 2px;
    display: flex; align-items: flex-start; gap: 6px; min-height: 50px;
  }
  .ai-typer .prompt { color: var(--accent); font-weight: 700; flex-shrink: 0; }
  .ai-typer .ai-q { white-space: pre-wrap; }
  .ai-typer .ai-cursor {
    display: inline-block; width: 7px; height: 14px; margin-left: 1px;
    background: var(--ink); transform: translateY(2px);
    animation: ai-blink 1s steps(1) infinite;
  }
  @keyframes ai-blink { 50% { opacity: 0; } }

  /* ----- Indices-style shortcut cards (4 across) ----- */
  .index-promos {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 14px; margin-bottom: 12px;
  }
  @media (max-width: 900px) { .index-promos { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 540px) { .index-promos { grid-template-columns: 1fr; } }
  .index-promo {
    background: var(--panel); border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    color: inherit; text-decoration: none;
    box-shadow: inset 0 0 0 0 var(--ink);
    transition: box-shadow 0.28s ease, background 0.28s ease, transform 0.15s ease;
    cursor: pointer;
  }
  .index-promo:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-1px); }
  .index-promo .head { display: flex; align-items: center; gap: 8px; }
  .index-promo .icon {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); flex-shrink: 0;
  }
  .index-promo .icon svg { width: 20px; height: 20px; display: block; }
  .index-promo .title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .index-promo .desc  { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }

  /* ----- Section heading ----- */
  .section-heading { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 16px 0 0; }
  .section-heading.nri-second { margin-top: 52px; }
  .section-blurb {
    font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; max-width: 760px;
    margin: 0 0 8px;
  }

  /* ----- Controls: dropdowns + grouped buttons ----- */
  .controls {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  }
  .nation-picker, .pair-picker {
    appearance: none; background: var(--panel); border: 1px solid var(--border);
    color: var(--ink); font-family: inherit;
    font-size: 12.5px; font-weight: 600;
    padding: 8px 28px 8px 12px; border-radius: 7px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 13px;
  }
  .sort-controls {
    display: inline-flex; padding: 4px; gap: 4px;
    background: var(--panel); border-radius: 8px; width: fit-content;
  }
  .sort-btn {
    appearance: none; background: transparent; border: 0;
    font-family: inherit; font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-muted); padding: 8px 14px; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
  }
  .sort-btn:hover { color: var(--ink); }
  .sort-btn.active { background: var(--accent); color: #fff; }

  /* ----- Leader cards (sample grid) ----- */
  .leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; margin-top: 8px;
  }
  .leader-card {
    background: var(--panel); border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 12px;
    text-decoration: none; color: var(--ink);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .leader-card:hover { transform: translateY(-2px); background: var(--toggle-bg); }
  .leader-card .head { display: flex; gap: 12px; align-items: flex-start; }
  .leader-card .portrait {
    width: 56px; height: 56px; border-radius: 10px;
    object-fit: cover; flex-shrink: 0;
    background: var(--bg); display: flex;
    align-items: center; justify-content: center;
    color: var(--ink-faint); font-weight: 700; font-size: 18px;
    overflow: hidden;
  }
  .leader-card .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .leader-card .name-row {
    display: flex; align-items: baseline; gap: 8px;
    justify-content: space-between;
  }
  .leader-card .name { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; }
  .leader-card .flag { font-size: 18px; line-height: 1; }
  .leader-card .speech-line {
    font-size: 11px; color: var(--ink-faint);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  }
  .leader-card .stats-line {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; font-size: 11px; color: var(--ink-faint);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
    margin-top: 2px;
  }
  .leader-card .bar-wrap {
    display: flex; flex-direction: column; gap: 5px;
    padding-top: 8px; border-top: 1px dashed var(--border);
  }
  .leader-card .bar {
    display: flex; width: 100%; height: 10px;
    background: var(--bg); border-radius: 3px; overflow: hidden;
  }
  .leader-card .bar-seg { height: 100%; }
  .leader-card .speeches { display: flex; flex-wrap: wrap; gap: 3px; padding-top: 4px; }
  .leader-card .speech-sq {
    width: 12px; height: 12px;
    border-radius: 3px; background: var(--bg);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .leader-card .speech-sq:hover { background: var(--ink); border-color: var(--ink); }

  /* ----- Legend strip ----- */
  .legend-strip {
    display: flex; flex-wrap: wrap;
    gap: 6px 14px; font-size: 12px; font-weight: 500;
    color: var(--ink-muted); line-height: 1.3;
    margin-top: 8px;
  }
  .legend-swatch {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 3px; margin-right: 5px;
    vertical-align: middle; flex-shrink: 0;
  }
  .legend-strip span b { color: var(--ink); font-weight: 700; }

  /* ----- Bilateral engagement matrix (div-based table) ----- */
  .bet-scroll { width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .bet-table { width: 100%; min-width: 560px; display: flex; flex-direction: column; gap: 2px; }
  .bet-row {
    display: grid;
    /* target | 3 measures (1 unit each) | composite + dependence (2 units each) = 7 units */
    grid-template-columns: 180px 1fr 1fr 1fr 2fr 2fr;
    align-items: center; gap: 14px;
    padding: 7px 8px 7px 2px; border-radius: 8px;
  }
  .bet-row.body { transition: background 0.15s ease; }
  .bet-row.body:hover { background: var(--toggle-bg); }
  .bet-row.head {
    align-items: end;
    font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; line-height: 1.2;
    padding-bottom: 8px; margin-bottom: 2px;
    border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .bet-h { cursor: pointer; user-select: none; transition: color 0.15s; }
  .bet-h:hover { color: var(--ink); }
  .bet-h.active { color: var(--accent); }
  .bet-h .caret { font-size: 9px; }
  .bet-target { display: flex; align-items: center; gap: 9px; min-width: 0;
    font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .bet-target .rank { font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--ink-faint); width: 18px; flex-shrink: 0; text-align: right;
    font-variant-numeric: tabular-nums; }
  .bet-target .flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
  .bet-target .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hbar { display: block; width: 100%; height: 10px;
    background: var(--bg); border-radius: 3px; overflow: hidden; }
  .hbar > i { display: block; height: 100%; border-radius: 3px; }
  .bet-wide { display: flex; align-items: center; gap: 8px; }
  .bet-wide .hbar { flex: 1 1 auto; }
  .bet-wide .val { font-family: 'JetBrains Mono', monospace; font-size: 11px;
    font-weight: 600; color: var(--ink-muted); width: 22px; flex-shrink: 0;
    font-variant-numeric: tabular-nums; }
  .bet-empty { color: var(--ink-faint); font-size: 13.5px; padding: 16px 12px; }

  /* ----- Scatter chart ----- */
  .bet-chart-title {
    font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; margin: 18px 0 6px;
  }
  .bet-scatter { width: 100%; height: auto; display: block; }
  .bet-scatter text { font-family: 'Alliance No.1', sans-serif; }

  /* ----- Source buttons (matrix) ----- */
  .src-btns {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px;
    background: var(--panel); border-radius: 10px; width: fit-content; max-width: 100%;
  }
  .src-btn {
    appearance: none; background: transparent; border: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--ink-muted); padding: 7px 11px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
    transition: background 0.15s, color 0.15s;
  }
  .src-btn .flag { font-size: 15px; line-height: 1; }
  .src-btn:hover { color: var(--ink); }
  .src-btn.active { background: var(--accent); color: #fff; }

  /* ----- National Research Impact — three-column leaderboard ----- */
  .nri-toggle {
    display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
    padding: 4px; background: var(--panel); border-radius: 9px;
    width: fit-content; max-width: 100%;
  }
  .nri-chip {
    appearance: none; border: 0; font-family: inherit;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 7px 12px; border-radius: 7px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
  }
  .nri-chip:hover { filter: brightness(0.96); }
  .nri-board {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px 32px; width: 100%; margin-top: 6px;
  }
  .nri-col { display: flex; flex-direction: column; }
  .nri-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 52px 44px 32px;
    align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 7px;
    text-decoration: none; color: var(--ink); font-size: 13px;
  }
  /* Visited leaderboard rows keep their original colour (never purple). */
  .nri-row:visited, .dom-row:visited { color: var(--ink); }
  .nri-row.body { transition: background 0.15s ease; }
  .nri-row.body:hover { background: var(--toggle-bg); }
  .nri-row.head {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px; margin-bottom: 3px;
  }
  .nri-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px;
    font-size: 9.5px; font-weight: 600; color: #fff; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .nri-empty { color: var(--ink-faint); font-size: 12px; padding: 8px 6px; }
  .nri-nation { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .nri-nation .flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
  .nri-nation .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nri-row.body:hover .nm { text-decoration: underline; }
  .nri-num {
    text-align: right; font-size: 12px; color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .nri-num.growth { color: var(--agency-ally); }
  .nri-num.growth.neg { color: var(--agency-adv); }
  .nri-row.head .nri-num,
  .nri-row.head .nri-nation { font-size: 10px; color: var(--ink-faint); }
  .nri-row.head .nri-num.sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s; }
  .nri-row.head .nri-num.sort:hover { color: var(--ink); }
  @media (max-width: 900px) {
    /* Stacked board = one continuous ranked list: tighten the column gap and
       drop the repeated header rows (keep only the first) so 1..N reads as a
       single table rather than three separate ones. */
    .nri-board { grid-template-columns: 1fr; gap: 0; }
    .nri-board .nri-col:not(:first-child) .nri-row.head { display: none; }
  }

  /* ----- Country page: hero flag + per-domain three-column blocks ----- */
  .hero-flag { font-size: 0.82em; margin-right: 4px; }
  .cap-crumb {
    font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint);
    margin-top: 20px; margin-bottom: 2px;
  }
  .cap-crumb a { color: var(--accent); text-decoration: none; }
  .cap-crumb a:hover { text-decoration: underline; }

  /* ----- Capability page: trend charts (Sovereign Speech card format) ----- */
  .cap-charts {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; width: 100%; margin: 2px 0 6px;
  }
  @media (max-width: 900px) { .cap-charts { grid-template-columns: 1fr; } }
  .chart-card {
    background: var(--panel); border-radius: 10px; padding: 14px 14px 10px;
    display: grid; grid-template-rows: 52px auto 150px auto auto; gap: 6px; position: relative;
  }
  .chart-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; z-index: 4; }
  .chart-action {
    width: 26px; height: 26px; background: transparent; border: 0; border-radius: 5px;
    color: var(--ink-muted); cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  .chart-action:hover { background: var(--toggle-bg); color: var(--ink); }
  .chart-action svg { width: 15px; height: 15px; display: block; }
  .chart-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 60px; }
  .chart-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
  .chart-sub {
    font-size: 11px; color: var(--ink-muted); line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .chart-legend {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: 10.5px; font-weight: 500; color: var(--ink-muted); line-height: 1.3;
  }
  .chart-legend span b { color: var(--ink); font-weight: 700; }
  .chart-svg { width: 100%; height: 150px; display: block; cursor: crosshair; }
  .chart-svg .scrubber { stroke: var(--ink); stroke-width: 0.5; opacity: 0.55; pointer-events: none; }
  .chart-axis {
    position: relative; height: 14px; font-size: 10px; color: var(--ink-faint);
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  }
  .chart-axis .tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
  .chart-axis .tick.first { transform: none; left: 0 !important; }
  .chart-axis .tick.last { transform: none; left: auto !important; right: 0; }
  .chart-source { font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.02em; margin-top: 4px; opacity: 0.85; }
  .chart-tooltip {
    position: absolute; pointer-events: none; background: var(--ink); color: var(--bg);
    border-radius: 6px; padding: 6px 8px; font-size: 11px; line-height: 1.3;
    max-width: 200px; z-index: 10; opacity: 0; transition: opacity 0.1s;
  }
  .chart-tooltip.show { opacity: 1; }
  .chart-tooltip .yr { display: block; font-weight: 700; opacity: 0.85; margin-bottom: 3px; }
  .chart-tooltip .row { display: flex; justify-content: space-between; gap: 10px; }
  .toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; z-index: 9999;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .cap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; width: 100%; }
  .cap-table { display: flex; flex-direction: column; width: 100%; min-width: 0; }
  .cap-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 60px 52px 54px 48px 52px;
    align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px;
    text-decoration: none; color: var(--ink); font-size: 13px;
  }
  .cap-row:visited { color: var(--ink); }
  .cap-row.body { transition: background 0.15s ease; }
  .cap-row.body:hover { background: var(--toggle-bg); }
  .cap-row.body:hover .nm { text-decoration: underline; }
  .cap-row.cn { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .cap-row.cn .nm { font-weight: 700; }
  .cap-row.head {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint);
    border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 3px;
  }
  .cap-row.head .c-num.sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s; }
  .cap-row.head .c-num.sort:hover { color: var(--ink); }
  .c-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 24px; border-radius: 7px;
    font-size: 9.5px; font-weight: 600; color: #fff; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .cap-row.head .c-rank { background: none; }
  .c-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
  .c-name .flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
  .c-name .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-num {
    text-align: right; font-size: 11.5px; color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .c-num.growth { color: var(--agency-ally); }
  .c-num.growth.neg { color: var(--agency-adv); }
  .cap-row.head .c-name { font-size: 10px; color: var(--ink-faint); }
  /* Two columns of 10 collapse to one continuous list; drop the repeated header. */
  @media (max-width: 900px) {
    .cap-cols { grid-template-columns: 1fr; gap: 0; }
    .cap-cols .cap-table:not(:first-child) .cap-row.head { display: none; }
  }
  @media (max-width: 700px) {
    .cap-row { grid-template-columns: 28px minmax(0, 1fr) 56px 50px 44px; gap: 8px; font-size: 12.5px; }
    .cap-row .c-hide { display: none; }
  }

  .dom-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px 32px; width: 100%; margin: 4px 0 4px;
  }
  @media (max-width: 900px) { .dom-grid { grid-template-columns: 1fr; gap: 22px; } }
  .dom-col { display: flex; flex-direction: column; }
  .dom-col-h {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint);
    border-bottom: 1px solid var(--border);
    padding: 0 6px 8px; margin-bottom: 3px;
  }
  .dom-row {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px;
    text-decoration: none; color: var(--ink); font-size: 13px;
    transition: background 0.15s ease;
  }
  a.dom-row:hover { background: var(--toggle-bg); }
  a.dom-row:hover .nm { text-decoration: underline; }
  .dom-row.cn { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .dom-row.cn .nm { font-weight: 700; }
  .dom-val {
    text-align: right; font-size: 11.5px; color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .dom-val .dom-rk { color: var(--ink-faint); font-size: 10px; margin-right: 5px; }
  /* Dimension grouping (Hard / Soft / Economic) + per-domain sub-sections */
  .dim-head {
    font-size: 27px; margin-top: 72px; padding-bottom: 12px;
    margin-bottom: 20px; border-bottom: 2px solid var(--border);
  }
  .dom-overall-h {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent);
    margin: 22px 0 6px;
  }
  .dom-legend { margin: 6px 0 12px; }
  .dom-title {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
    margin: 44px 0 0; display: flex; align-items: center;
  }
  .dom-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; flex-shrink: 0; }
  .dom-para {
    font-size: 13.5px; color: var(--ink-muted); line-height: 1.6;
    max-width: 860px; margin: 11px 0 0;
  }
  .dom-para b { color: var(--ink); }
  .dom-para a, .section-blurb a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; }
  .dom-para a:hover, .section-blurb a:hover { color: var(--ink); }
  .method-list {
    max-width: 860px; margin: 8px 0 0; padding-left: 22px;
    color: var(--ink-muted); font-size: 13.5px; line-height: 1.6;
  }
  .method-list li { margin: 0 0 9px; padding-left: 4px; }
  .method-list li::marker { color: var(--ink-faint); }
  .method-list li b { color: var(--ink); }
  /* Three numbered step boxes under Approach */
  .method-steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; width: 100%; margin: 16px 0 4px;
  }
  @media (max-width: 760px) { .method-steps { grid-template-columns: 1fr; } }
  .method-step {
    position: relative; overflow: hidden;
    background: var(--panel); border-radius: 12px; padding: 20px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .method-step .step-num {
    position: absolute; top: -16px; right: 20px; z-index: 0;
    font-family: 'Alliance No.2', system-ui, sans-serif;
    font-size: 184px; font-weight: 800; line-height: 1;
    letter-spacing: -0.04em; color: var(--accent);
    opacity: 0.11; pointer-events: none; font-variant-numeric: tabular-nums;
  }
  .method-step .step-title,
  .method-step .step-body,
  .method-step .step-src { position: relative; z-index: 1; }
  .method-step .step-title {
    font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .method-step .step-body { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; }
  .method-step .step-body b { color: var(--ink); font-weight: 600; }
  .step-part {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--accent); margin: 18px 0 -2px;
  }
  .method-step .step-src {
    font-size: 11px; color: var(--ink-faint); line-height: 1.5;
    margin-top: 2px; font-variant-numeric: tabular-nums;
  }
  .dom-grid { margin-bottom: 14px; }
  .dom-col-h { margin-bottom: 6px; }

  /* ----- Signals gallery (two groups across, two cards each = four wide) ----- */
  .signal-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .signal-group { display: flex; flex-direction: column; gap: 12px; }
  .grp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .grp-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
  .grp-tag { font-size: 13.5px; color: var(--ink-muted); font-weight: 500; }
  .grp-tag .soon { color: var(--ink-faint); font-style: italic; }
  .signal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .signal-card .signal-tag {
    font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700;
  }
  .signal-note {
    font-size: 13px; color: var(--ink-muted); line-height: 1.6; max-width: 860px;
    margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border);
  }
  .signal-note a { color: var(--ink); border-bottom: 1px dotted currentColor; text-decoration: none; }
  .signal-note a:hover { color: var(--ink-muted); }
  @media (max-width: 900px) { .signal-groups { grid-template-columns: 1fr; } }
  @media (max-width: 540px) { .signal-cards { grid-template-columns: 1fr; } }

  /* ----- Methodology: scoring rubrics ----- */
  .method-personas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px;
    max-width: 760px; margin: 2px 0 6px;
  }
  .method-personas div { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
  .method-personas b { color: var(--ink); font-weight: 700; }
  .rubric-block {
    max-width: 760px; display: flex; flex-direction: column; gap: 9px;
    scroll-margin-top: 18px;
  }
  .rubric-title {
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 10px 0 0;
    display: flex; align-items: center; gap: 9px;
  }
  .rubric-title::before {
    content: ""; width: 10px; height: 10px; border-radius: 3px;
    background: var(--rb-accent, var(--ink)); flex-shrink: 0;
  }
  .rubric-def { font-size: 14.5px; color: var(--ink); font-weight: 600; line-height: 1.5; margin: 0; }
  .rubric-why { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; margin: 0; }
  .rubric-why .lbl {
    display: block; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; margin-bottom: 3px;
  }
  .rubric { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin-top: 2px; }
  .rubric-row {
    display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: baseline;
    padding: 9px 0 9px 13px; border-bottom: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--rb-accent, var(--ink)) calc(20% + var(--t) * 11%), transparent);
  }
  .rubric-score {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500;
    color: var(--ink-muted); font-variant-numeric: tabular-nums;
  }
  .rubric-desc { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
  .rubric-desc b { color: var(--ink); font-weight: 700; }
  @media (max-width: 540px) { .method-personas { grid-template-columns: 1fr; } }

  /* ----- Leverage / Exposure leaderboard ----- */
  .lev-scroll { width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .lev-table { width: 100%; min-width: 800px; display: flex; flex-direction: column; gap: 2px; }
  .lev-row {
    display: grid;
    /* rank | nation (fixed) | Aggregate bar | Per-partner bar | Mod | Sig | High (bands equal) | Max */
    grid-template-columns: 20px 186px 1.5fr 1.5fr 58px 58px 58px 64px;
    align-items: center; gap: 14px; padding: 8px 10px 8px 0; border-radius: 8px;
  }
  .lev-row.body { transition: background 0.15s ease; }
  .lev-row.body:hover { background: var(--toggle-bg); }
  .lev-row.head {
    align-items: end; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; line-height: 1.2;
    padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .lev-row.head .r { text-align: right; }
  .lev-row.head .s { cursor: pointer; user-select: none; transition: color 0.15s; }
  .lev-row.head .s:hover { color: var(--ink); }
  .lev-row.head .s.active { color: var(--accent); }
  .lev-row.head .caret { font-size: 9px; font-weight: 700; }
  .lev-rank { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
    color: var(--ink-faint); text-align: left; font-variant-numeric: tabular-nums; }
  .lev-nation { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .lev-nation .flag { font-size: 18px; line-height: 1; flex-shrink: 0; }
  .lev-nation .nm { font-size: 14px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lev-bar { display: flex; align-items: center; gap: 9px; }
  .lev-bar .hbar { flex: 1 1 auto; }
  .lev-bar .val { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
    font-weight: 600; color: var(--ink); width: 26px; text-align: right; flex-shrink: 0;
    font-variant-numeric: tabular-nums; }
  .lev-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px;
    color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
  .lev-num.dim { color: var(--ink-muted); }

  /* ----- Mobile responsiveness ----- */
  @media (max-width: 640px) {
    :root { --page-pad-x: 16px; }
    body { padding: 20px 0 48px; gap: 16px; }
    .site-nav { gap: 10px; }
    .site-nav .nav-group { gap: 10px; }
    .site-nav .links { gap: 12px; font-size: 12px; }
    .meta h1 { font-family: 'Alliance No.2', system-ui, sans-serif; font-size: 30px; }
    .meta .sub { font-size: 14px; }
    .section-heading { font-size: 19px; }
    .leader-grid { grid-template-columns: 1fr; }
    .bet-table { min-width: 0; }
    .bet-row { grid-template-columns: minmax(92px, 1.2fr) 1fr 1fr; gap: 10px; }
    .bet-narrow { display: none; }
    .bet-target { gap: 7px; font-size: 12.5px; }
    .bet-scroll { overflow-x: visible; }
    /* New leaderboard / dimension components on small screens */
    .nri-row { grid-template-columns: 22px minmax(0, 1fr) 50px 42px 30px; gap: 6px; font-size: 12.5px; }
    .nri-num { font-size: 11px; }
    .dom-row { font-size: 12.5px; }
    .section-heading.dim-head { font-size: 21px; margin-top: 44px; padding-bottom: 10px; margin-bottom: 14px; }
    .dom-title { font-size: 16px; margin-top: 30px; }
    .dom-para { font-size: 13px; }
  }

  /* ----- Footer ----- */
  .site-footer {
    width: 100%; max-width: var(--page-max-width);
    margin: 40px auto 0;
    padding: 18px var(--page-pad-x) 0;
    border-top: 1px solid var(--border);
    font-size: 11.5px; letter-spacing: 0.04em;
    color: var(--ink-faint); font-weight: 500;
  }
  .site-footer a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
  .site-footer a:hover { color: var(--ink); }