/* ---- 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; }
  }

  /* ===== National Capability Ratings tables (Figure 1 & 2) ===== */
  .ncr-wrap { width: 100%; overflow-x: auto; margin-top: 6px; }
  .ncr { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .ncr th, .ncr td { padding: 7px 9px; text-align: center; white-space: nowrap; }
  .ncr thead .grp th {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint); padding-bottom: 4px;
  }
  .ncr thead .sub th {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ink-faint);
    border-bottom: 1px solid var(--border); padding-bottom: 8px;
  }
  .ncr th.sort { cursor: pointer; user-select: none; transition: color 0.15s; }
  .ncr th.sort:hover { color: var(--ink); }
  .ncr .grp-start { border-left: 1px solid var(--border); }
  .ncr td.nm-c, .ncr th.nm-h { text-align: left; }
  .ncr td.rk-c { padding: 4px 9px; }
  .ncr td.nm-c a {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--ink); text-decoration: none;
  }
  .ncr td.nm-c a:visited { color: var(--ink); }
  .ncr td.nm-c a:hover .nm { text-decoration: underline; }
  .ncr td.nm-c .flag { font-size: 15px; line-height: 1; }
  .ncr td.nm-c .nm { font-weight: 500; }
  .ncr tbody tr { border-bottom: 1px solid var(--border); }
  .ncr tbody tr:hover { background: var(--toggle-bg); }
  .ncr td.tier { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .ncr td.tier.t1 {
    color: var(--accent-strong); font-weight: 700;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .ncr td.sum, .ncr th.sum {
    font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600;
  }
  /* Figure 2 — frontier nations by domain */
  .ncr-dom td.dom-nm, .ncr-dom th.dom-nm-h,
  .ncr-dom td.dom-ab, .ncr-dom th.dom-ab-h,
  .ncr-dom td.dom-flags, .ncr-dom th.dom-flags-h { text-align: left; }
  .ncr-dom td.dom-nm a {
    color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  }
  .ncr-dom td.dom-nm a:hover { color: var(--accent); }
  .ncr-dom td.dom-ab { color: var(--ink-muted); font-weight: 600; }
  .ncr-dom .dom-flags { white-space: normal; line-height: 1.7; }
  .ncr-dom .dom-flags .flag { font-size: 16px; margin-right: 2px; }
  .ncr-dom .dom-grp td {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    color: var(--ink); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em;
    text-transform: uppercase; text-align: left; padding: 6px 9px;
  }
  .ncr-dom .none { color: var(--ink-faint); }
  @media (max-width: 720px) {
    .ncr { font-size: 11.5px; }
    .ncr th, .ncr td { padding: 6px 6px; }
  }

  /* ===== National Capability Framework (capabilities.html) ===== */
  /* Full-bleed: body is a centred flex column spanning the whole viewport,
     so width:100% on this (non-stretched) flex child fills the window edge
     to edge — outside the page's normal max-width gutters. */
  .fw-full {
    width: 100%;
    padding: 22px 24px 40px; box-sizing: border-box;
  }
  .fw-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px; align-items: start;
  }
  .fw-col {
    border-radius: 16px; padding: 14px;
    background: var(--fw-bg); border: 1px solid var(--fw-bd);
  }
  .pw-hard { --pw: #3f8fd0; --pw-cat: #2b6aa3; --fw-bg: #e9f3fb; --fw-bd: #cfe5f6; }
  .pw-soft { --pw: #57b35c; --pw-cat: #2f7a3d; --fw-bg: #ebf6ec; --fw-bd: #d2ead4; }
  .pw-econ { --pw: #e8a92e; --pw-cat: #9c711d; --fw-bg: #fdf4e3; --fw-bd: #f3e2c0; }
  [data-theme="dark"] .pw-hard { --fw-bg: rgba(63,143,208,0.10); --fw-bd: rgba(63,143,208,0.32); --pw-cat: #7fb6e4; }
  [data-theme="dark"] .pw-soft { --fw-bg: rgba(87,179,92,0.10);  --fw-bd: rgba(87,179,92,0.32);  --pw-cat: #84cf89; }
  [data-theme="dark"] .pw-econ { --fw-bg: rgba(232,169,46,0.10); --fw-bd: rgba(232,169,46,0.32); --pw-cat: #e6bd66; }
  .fw-cat {
    font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--pw-cat); margin: 2px 2px 12px;
  }
  .fw-domain {
    background: var(--pw); border-radius: 11px; padding: 10px;
    margin-bottom: 12px;
  }
  .fw-domain:last-child { margin-bottom: 0; }
  .fw-dom-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 3px 10px;
  }
  .fw-badge {
    flex-shrink: 0; background: rgba(0,0,0,0.20); color: #fff;
    border-radius: 6px; padding: 2px 7px; font-size: 10.5px;
    font-variant-numeric: tabular-nums;
  }
  /* Column-major fill (top-to-bottom, then next column) — a fixed 4 rows
     (set inline) keeps domains aligned: e.g. a 6-group domain reads 4 on
     the left, 2 on the right. minmax(0,1fr) makes every card equal width. */
  .fw-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
  .fw-area {
    min-width: 0;
    position: relative; appearance: none; border: 0; font-family: inherit; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    background: color-mix(in srgb, #fff 16%, var(--pw));
    color: #fff; text-decoration: none; border-radius: 7px;
    padding: 8px 9px; font-size: 11.5px; font-weight: 500; cursor: pointer;
    transition: background 0.15s, transform 0.05s;
  }
  .fw-area:visited { color: #fff; }
  /* Hovered / focused group lifts above siblings and reveals its dropdown. */
  .fw-area:hover, .fw-area:focus-within { z-index: 70; }
  .fw-area:hover, .fw-area:focus-visible { background: color-mix(in srgb, #000 22%, var(--pw)); }
  .fw-area-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Capability dropdown (level 4) — opens on hover / keyboard focus. */
  .fw-pop {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 60;
    width: 290px; max-width: 86vw; max-height: 348px; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.3);
    padding: 6px 5px 5px;
  }
  .fw-area:hover > .fw-pop, .fw-area:focus-within > .fw-pop { display: block; }
  .fw-pop-head {
    position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; background: var(--pw); color: #fff; border-radius: 8px;
    padding: 9px 11px; font-size: 11.5px; font-weight: 700; margin-bottom: 4px;
  }
  .fw-pop-list { display: flex; flex-direction: column; gap: 1px; }
  .fw-cap {
    display: block; padding: 8px 11px; border-radius: 7px; text-decoration: none;
    color: var(--ink); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fw-cap:visited { color: var(--ink); }
  .fw-cap:hover { background: var(--toggle-bg); color: var(--accent); }
  .fw-num {
    flex-shrink: 0; background: rgba(0,0,0,0.18); color: #fff;
    border-radius: 5px; padding: 1px 6px; font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  /* As the window narrows, first collapse each domain's group cards to a
     single column so they fit (dimensions stay side by side). */
  @media (max-width: 1024px) {
    .fw-areas {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-flow: row; grid-template-rows: none !important;
    }
  }
  /* Below that, stack the three dimensions (Hard / Soft / Economic) vertically;
     full width lets the group cards return to two columns. */
  @media (max-width: 720px) {
    .fw-grid { grid-template-columns: 1fr; }
    .fw-areas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  }
  @media (max-width: 460px) {
    .fw-areas { grid-template-columns: 1fr; }
    .fw-pop { width: 86vw; }
  }

  /* ===== Nations by region (nations.html) — full-bleed ===== */
  .nat-full { width: 100%; padding: 22px 24px 40px; box-sizing: border-box; }
  /* All nations text — labels, badges and numbers — in Alliance. */
  .nat-full, .nat-full * { font-family: 'Alliance No.1', system-ui, sans-serif; }
  .nat-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; align-items: start;
  }
  .nat-col {
    border-radius: 16px; padding: 12px;
    background: var(--nbg); border: 1px solid var(--nbd);
  }
  .pw-ap { --pw: #8b5cf6; --pw-cat: #6d28d9; --nbg: #f4effe; --nbd: #e3d8fb; }
  .pw-am { --pw: #3b82f6; --pw-cat: #1d4ed8; --nbg: #eaf1fe; --nbd: #d3e2fc; }
  .pw-af { --pw: #ef9d2b; --pw-cat: #b06410; --nbg: #fdf3e4; --nbd: #f6e0bf; }
  .pw-eu { --pw: #3aaf52; --pw-cat: #2c7a3f; --nbg: #ecf7ed; --nbd: #d3ebd6; }
  [data-theme="dark"] .pw-ap { --nbg: rgba(139,92,246,0.10); --nbd: rgba(139,92,246,0.32); --pw-cat: #b9a4f7; }
  [data-theme="dark"] .pw-am { --nbg: rgba(59,130,246,0.10);  --nbd: rgba(59,130,246,0.32);  --pw-cat: #8fb6f7; }
  [data-theme="dark"] .pw-af { --nbg: rgba(239,157,43,0.10);  --nbd: rgba(239,157,43,0.32);  --pw-cat: #efb874; }
  [data-theme="dark"] .pw-eu { --nbg: rgba(58,175,82,0.10);   --nbd: rgba(58,175,82,0.32);   --pw-cat: #84cf89; }
  .nat-col-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 4px 6px 12px;
  }
  .nat-cat {
    font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--pw-cat); margin: 0;
  }
  .nat-badge {
    flex-shrink: 0; background: rgba(0,0,0,0.20); color: #fff;
    border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .nat-badge-lg { background: var(--pw); font-size: 10.5px; padding: 3px 9px; }
  .nat-region { background: var(--pw); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
  .nat-region:last-child { margin-bottom: 0; }
  .nat-region-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: #fff; font-weight: 700; font-size: 11.5px; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 2px 3px 9px;
  }
  .nat-cards {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: column; gap: 5px;
  }
  .nat-card {
    min-width: 0; display: flex; align-items: center; gap: 5px;
    background: color-mix(in srgb, #fff 15%, var(--pw));
    color: #fff; border-radius: 7px; padding: 6px 8px; font-size: 11px;
    text-decoration: none; transition: background 0.15s;
  }
  .nat-card, .nat-card:link, .nat-card:visited, .nat-card:hover, .nat-card:active { color: #fff; }
  .nat-card:hover { background: color-mix(in srgb, #fff 30%, var(--pw)); }
  .nat-card:hover .nm { text-decoration: underline; }
  .nat-card .flag { font-size: 13px; line-height: 1; flex-shrink: 0; }
  .nat-card .nm {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 500;
  }
  /* Population + GDP sit together with no real gap; name runs up close to them. */
  .nat-card .stat {
    flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 4px;
    font-variant-numeric: tabular-nums;
  }
  .nat-card .pop { font-size: 9.5px; opacity: 0.82; }
  .nat-card .gdp { font-size: 9.5px; font-weight: 600; }
  @media (max-width: 1200px) {
    .nat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 680px) {
    .nat-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 460px) {
    .nat-cards { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none !important; }
  }

  /* ===== Nation profile (nation.html) — WEF-style component table ===== */
  /* Smaller per-nation heading above the table */
  .np-profile-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
  .np-name-h {
    font-family: 'Alliance No.2', system-ui, sans-serif;
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .np-name-h .flag { font-size: 0.9em; line-height: 1; }
  .np-rank-badge { font-size: 19px; font-weight: 700; color: var(--ink); white-space: nowrap; }
  .np-rank-badge .np-of { font-size: 14px; font-weight: 500; color: var(--ink-faint); }

  /* Key-stat boxes */
  .np-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin: 4px 0 6px;
  }
  .np-stat {
    background: var(--panel); border: 1px solid var(--border); border-radius: 11px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 5px;
  }
  .np-stat-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .np-stat-val { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }

  .np-caption {
    font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-faint); margin: 14px 0 6px;
  }
  .np-wrap { width: 100%; overflow-x: auto; }
  .np { width: 100%; border-collapse: collapse; font-size: 13.5px; }

  /* Domain-summary table */
  .np-dtable { width: 100%; }
  .np-front, .np-front-h { text-align: left; }
  .np-front { white-space: normal; font-size: 15px; line-height: 1.5; letter-spacing: 1px; }
  .np-drow td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
  .np-drow:hover { background: var(--toggle-bg); }
  .np-drow .np-name { font-weight: 600; }
  .np-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
  .np-tier {
    display: inline-block; min-width: 30px; text-align: center;
    padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  }
  .np-type {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
  }
  .np-type-asym { color: var(--cap-pi); background: color-mix(in srgb, var(--cap-pi) 14%, transparent); }
  .np-type-bal { color: var(--agency-ally); background: color-mix(in srgb, var(--agency-ally) 14%, transparent); }
  .np thead th {
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ink-faint);
    text-align: right; padding: 0 12px 9px; border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  .np thead th.np-name { text-align: left; }
  .np td {
    padding: 9px 12px; border-bottom: 1px solid var(--border);
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .np td.np-name { text-align: left; white-space: normal; }
  .np tbody tr:hover { background: var(--toggle-bg); }
  .np-grp { color: var(--ink-muted); padding-left: 26px !important; }
  /* Component (capability group) links — keep the row's own colour, no recolour. */
  .np-cap, .np-cap:link, .np-cap:visited, .np-cap:hover, .np-cap:active { color: inherit; text-decoration: none; }
  .np-cap:hover { text-decoration: underline; }
  .np-sc { color: var(--ink); }
  /* Best performer — flag + name, not bold, links to the nation profile */
  .np-bp a {
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
    color: var(--ink); text-decoration: none; font-weight: 400;
  }
  .np-bp a:visited { color: var(--ink); }
  .np-bp a:hover { text-decoration: underline; }
  .np-bp .flag { font-size: 14px; line-height: 1; }
  .np-up { color: var(--agency-ally); }
  .np-dn { color: var(--agency-adv); }
  .np-eq { color: var(--ink-faint); }
  /* Domain (shaded section) rows */
  .np-dom td {
    font-weight: 700; color: var(--ink);
    background: color-mix(in srgb, var(--c) 9%, transparent);
    border-bottom: 1px solid var(--border);
  }
  .np-dom td.np-name { border-left: 3px solid var(--c); }
  .np-dom .np-bp a { font-weight: 400; }
  @media (max-width: 640px) {
    .np { font-size: 12px; }
    .np td, .np thead th { padding: 8px 7px; font-size: 11.5px; }
    .np-grp { padding-left: 16px !important; }
  }
  .np td.np-note { white-space: normal; text-align: left; color: var(--ink-muted); font-size: 12.5px; }
  .np thead th.sort { cursor: pointer; user-select: none; transition: color 0.15s; }
  .np thead th.sort:hover { color: var(--ink); }
  .np-dim { color: var(--ink-muted); font-weight: 600; }
  /* Distribution range bar (min–max light band + IQR heavy band) */
  .np-bar { width: 162px; }
  .np .rb {
    position: relative; display: inline-block; width: 150px; height: 9px;
    border-radius: 6px; vertical-align: middle;
    background: color-mix(in srgb, var(--ink-faint) 22%, transparent);
  }
  .np .rb-range, .np .rb-iqr { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
  @media (max-width: 640px) { .np-bar { width: 120px; } .np .rb { width: 108px; } }

  /* ===== Capability profile (capability.html) ===== */
  .cap-crumb {
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--ink-faint); margin-bottom: 4px;
  }
  .cap-crumb a { color: var(--ink-faint); text-decoration: none; }
  .cap-crumb a:hover { color: var(--accent); }
  /* Rating pill + sub-capacity dots + outlook */
  .cap-rt {
    display: inline-block; min-width: 38px; text-align: center;
    padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  }
  .cap-dots { display: inline-flex; gap: 3px; justify-content: flex-end; }
  .cap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
  .cap-dot.on { background: var(--ink-muted); }
  .cap-up { color: var(--agency-ally); font-size: 10.5px; font-weight: 700; white-space: nowrap; }

  /* Vertical bar chart (inside .chart-card) */
  .vbars { display: flex; align-items: flex-end; gap: 8px; padding: 8px 2px 0; }
  .vbar { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .vbar-col { height: 168px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
  .vbar-fill { width: 62%; max-width: 34px; min-height: 2px; border-radius: 4px 4px 0 0; }
  .vbar-val { font-size: 9.5px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .vbar-cap { font-size: 9px; color: var(--ink-faint); margin-top: 6px; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Distribution / header card (capability.html, nation.html) */
  .chart-card.cd-card { display: flex; flex-direction: column; grid-template-rows: none; }
  .cd-dom { display: flex; align-items: center; gap: 7px; color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none; }
  .cd-dom svg { width: 18px; height: 18px; flex-shrink: 0; }
  .cd-chev { margin-left: auto; color: var(--ink-faint); font-size: 18px; line-height: 1; }
  .cd-title { font-family: 'Alliance No.2', system-ui, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.15; margin: 9px 0 10px; }
  .cd-med { display: flex; align-items: baseline; gap: 8px; }
  .cd-rt { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
  .cd-medlbl { font-size: 13px; color: var(--ink-faint); }
  .cd-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
  .cd-sub-top { margin-top: 8px; }
  .cd-plot { display: flex; gap: 6px; height: 178px; margin-top: 14px; }
  .cd-yaxis { display: flex; flex-direction: column; justify-content: space-between; width: 22px; text-align: right; font-size: 9px; color: var(--ink-faint); }
  .cd-area { position: relative; flex: 1; min-width: 0; border-bottom: 1px solid var(--border); background: linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% calc(100% / 6); }
  .cd-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; padding: 0 1px; }
  .cd-bar { flex: 1; min-width: 0; min-height: 1px; border-radius: 2px 2px 0 0; }
  .cd-xwrap { position: relative; height: 14px; margin: 5px 0 0 28px; }
  .cd-xwrap span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--ink-faint); }

  /* Top-10 list (inside a header card) */
  .tk-list { display: flex; flex-direction: column; margin-top: 10px; }
  .tk-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 13px; }
  .tk-row:first-child { border-top: 0; }
  .tk-row .flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
  .tk-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk-row .cap-rt { min-width: 42px; }
  .cd-dom .flag { font-size: 16px; line-height: 1; }

  /* Nation card 1 — frontier capabilities */
  .nf-list { display: flex; flex-direction: column; margin-top: 10px; }
  .nf-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px solid var(--border); font-size: 12.5px; }
  .nf-row:first-child { border-top: 0; }
  .nf-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; }
  .nf-ico svg { width: 100%; height: 100%; display: block; }
  .nf-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nf-rank { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; min-width: 30px; text-align: center; }

  /* Nation card 2 — ratings distribution (horizontal bars) */
  .hb-wrap { margin-top: 14px; }
  .hb-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; margin-bottom: 3px; }
  .hb-lbl { font-size: 9px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
  .hb-track { position: relative; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--ink-faint) 10%, transparent); }
  .hb-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #3cb4e6; min-width: 1px; }
  .hb-axis { display: flex; justify-content: space-between; margin: 6px 0 0 42px; font-size: 9px; color: var(--ink-faint); }

  /* Nation card 3 — domains & tiers */
  .nd-list { display: flex; flex-direction: column; margin-top: 10px; }
  .nd-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-top: 1px solid var(--border); font-size: 13px; }
  .nd-row:first-child { border-top: 0; }
  .nd-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
  .nd-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Ratings-by-band — full-bleed, horizontal scroll */
  .br-full { width: 100%; box-sizing: border-box; padding: 8px 24px 44px; overflow-x: auto; }
  .br-head { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin: 6px 0 14px; }
  .br-row { display: flex; gap: 14px; width: max-content; align-items: flex-start; }
  .br-col { flex: 0 0 296px; width: 296px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 13px; }
  .br-col-head { display: flex; align-items: center; gap: 8px; color: var(--bc); font-weight: 700; font-size: 13.5px; text-decoration: none; }
  .br-col-head svg { width: 17px; height: 17px; flex-shrink: 0; }
  .br-col-head .br-chev { margin-left: auto; color: var(--ink-faint); font-size: 17px; }
  .br-count { margin-top: 9px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
  .br-count span { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-left: 5px; }
  .br-ratings { font-size: 11px; color: var(--ink-faint); margin: 1px 0 8px; }
  .br-list { display: flex; flex-direction: column; }
  .br-item { display: flex; align-items: center; gap: 8px; padding: 7px 1px; border-top: 1px solid var(--border); font-size: 12.5px; }
  .br-item:first-child { border-top: 0; }
  .br-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .br-item .flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
  .br-item .cap-rt { min-width: 40px; }
  .br-score { min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600; }
  .br-out { font-size: 11px; font-weight: 600; white-space: nowrap; }
  .br-out-pos { color: var(--agency-ally); }
  .br-out-neg { color: var(--agency-adv); }
  .br-out-neu { color: var(--ink-faint); }
  .br-empty { color: var(--ink-faint); font-size: 12px; padding: 10px 1px; }

  /* ===== Compare (compare.html) ===== */
  .cmp-controls { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; }
  .cmp-controls .nation-picker { flex-shrink: 0; }
  .cmp-vs { color: var(--ink-faint); font-weight: 700; font-size: 13px; flex-shrink: 0; }
  .cmp-cell { text-align: center; white-space: nowrap; }
  .cmp-h { text-align: center; }
  #cmpTable .np-bp a, #cmpTable .np-bp a:visited { color: var(--ink-muted); }
  .cmp-num { font-variant-numeric: tabular-nums; font-weight: 600; }
  .cb {
    display: inline-block; position: relative; width: 96px; height: 8px;
    border-radius: 5px; vertical-align: middle; margin-left: 8px;
    background: color-mix(in srgb, var(--ink-faint) 20%, transparent);
  }
  .cb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
  @media (max-width: 640px) { .cb { width: 60px; } }
  .cmp-cell .rb { margin-left: 8px; }
  #cmpTable .rb { width: 120px; }
  .cmp-sep { align-self: stretch; width: 1px; background: var(--border); margin: 3px 2px; }
  @media (max-width: 640px) { #cmpTable .rb { width: 80px; } }

  /* ----- 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, minmax(0, 1fr));
    gap: 16px; width: 100%; margin: 2px 0 6px; align-items: start;
  }
  @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); }
  .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); }
  .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); }