/* ==========================================================================
   BorderStat Stylesheet - full rewrite
   Strict palette: WHITE background + BLACK/near-black ink + BLUE accents.
   Neutral lines/fills are BLACK or BLUE with alpha only.
   No green, amber, orange, red, teal, beige or purple. Light only.
   Mobile-first. Works at 360px with no horizontal overflow.
   Motion is gated behind prefers-reduced-motion.
   UTF-8 without BOM. ASCII only. Comments in plain English.
   Font: Inter (loaded in the layout).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS / ROOT
   -------------------------------------------------------------------------- */
:root {
  /* Surface: always white */
  --bg: #ffffff;
  --surface: #ffffff;

  /* Ink (near-black text) */
  --ink: #0b0b0c;
  --ink-strong: #111111;
  --ink-70: rgba(0, 0, 0, 0.70);
  --ink-60: rgba(0, 0, 0, 0.60);
  --ink-50: rgba(0, 0, 0, 0.50);
  --muted: rgba(0, 0, 0, 0.58);

  /* Blue ramp */
  --blue: #2563eb;        /* primary link / accent */
  --blue-mid: #1e4d8c;    /* mid tone */
  --navy: #0a2540;        /* deep navy for strong headings / hero */
  --blue-strong: #1d4ed8; /* hover darken for buttons */

  /* Alpha lines and fills (black or blue only) */
  --line: rgba(0, 0, 0, 0.06);
  --line-2: rgba(0, 0, 0, 0.10);
  --line-3: rgba(0, 0, 0, 0.14);
  --fill-soft: rgba(0, 0, 0, 0.03);
  --fill-zebra: rgba(0, 0, 0, 0.03);
  --blue-fill: rgba(37, 99, 235, 0.08);
  --blue-fill-2: rgba(37, 99, 235, 0.12);
  --blue-line: rgba(37, 99, 235, 0.24);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Shadows (black alpha only) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);

  /* Layout
     Content column is 70% of the viewport on desktop, centered, with an upper
     cap so lines never get uncomfortably long on very wide screens, and it
     relaxes to full width on small screens (handled in the .container rule). */
  --container-width: 70%;
  --container-max: 1180px;
  --header-h: 84px;

  /* Type */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: "Inter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;

  /* Optional spotlight/tilt hooks defaults */
  --mx: 50%;
  --my: 50%;
  --tiltX: 0deg;
  --tiltY: 0deg;

  /* Legend dot default */
  --dot: var(--blue);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(15px, 0.9rem + 0.2vw, 17px);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3);
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink-strong);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--sp-4);
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img,
svg,
canvas {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
select,
textarea,
button {
  font-family: inherit;
  /* 16px is the minimum size iOS Safari will render without auto-zooming the
     page when a field gains focus. Setting it on the base control rule (not
     only inside a mobile media query) stops the "zoom in on tap" behaviour at
     every width. Paired with `touch-action: manipulation` (set on html) which
     disables double-tap-to-zoom, the mobile view no longer jumps around. */
  font-size: 16px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: var(--sp-5) 0;
}

::selection {
  background: var(--blue);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Visually hidden but accessible */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: var(--container-width);   /* 70% on desktop */
  max-width: var(--container-max);  /* but never wider than the cap */
  margin-inline: auto;              /* centered */
  padding-inline: clamp(16px, 4vw, 32px);
  min-width: 0;
}

/* On tablets and phones a fixed 70% is too cramped, so let the content use the
   full width (minus the side padding) below this breakpoint. */
@media (max-width: 1024px) {
  .container {
    width: 100%;
  }
}

.site-main {
  padding-top: clamp(12px, 2vw, 20px);
  padding-bottom: clamp(48px, 8vw, 96px);
  min-height: 60vh;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.site-main > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   4. HEADER (main.php)
   -------------------------------------------------------------------------- */
.header-utility {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.header-utility a {
  color: #ffffff;
}

.header-utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 28px;
  padding-block: 5px;
}

.header-utility-inner > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Left: the official-sounding label, in small caps for an official tone. */
.header-utility-org {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Right: the disclaimer, kept quiet and sentence-case so the bar reads as one
   clean official line rather than two shouting all-caps phrases. */
.header-utility-note {
  color: rgba(255, 255, 255, 0.66);
  text-align: right;
}

/* Single call-to-action link that replaces the old two-part utility strip. */
.header-utility-inner:has(.header-utility-link) {
  justify-content: center;
}

.header-utility-link {
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.header-utility-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
  min-width: 0;
  max-width: 100%;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  flex: none;
  box-shadow: var(--shadow-sm);
}

/* Wide/horizontal logo: size by HEIGHT and let width follow the aspect ratio
   so the image never gets squashed into a square. max-width keeps it from
   crowding the hamburger on small screens. */
.brand-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: min(60vw, 260px);
  object-fit: contain;
  flex: 0 1 auto;
}

@media (max-width: 519px) {
  .brand-logo { height: 40px; max-width: 56vw; }
}

.brand-copy {
  min-width: 0;
  line-height: 1.1;
}

.brand:hover .brand-copy strong {
  color: var(--blue);
}

.brand-copy strong {
  display: block;
  font-weight: 800;
  color: var(--ink-strong);
  font-size: clamp(15px, 1rem + 0.2vw, 18px);
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
  overflow-wrap: anywhere;
}

.brand-copy small {
  display: block;
  color: var(--ink-60);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   MOBILE NAV - rebuilt from scratch
   Model: a hamburger <button> (shown only <= 880px) toggles the .is-open class
   on .site-nav via JS. The nav becomes a fixed right-side drawer that fills the
   full viewport height, has its own sticky header (logo + a single close X),
   and sits above a dimmed backdrop. Desktop keeps the plain inline nav row.
   Only ONE close control exists: the X in the drawer header (the hamburger is
   hidden while the drawer is open).
   ========================================================================== */

/* Hamburger button (hidden on desktop; shown in the mobile media query). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  flex: none;
}

.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

/* Hide the hamburger while the drawer is open so only the drawer's X shows. */
.nav-toggle[aria-expanded="true"] { display: none; }

/* In-drawer header (logo + close X). Hidden on desktop. */
.site-nav__head { display: none; }

.site-nav__logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.nav-close:hover { border-color: var(--blue); color: var(--blue); }
.nav-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Dimmed backdrop behind the drawer (hidden until open). */
.nav-backdrop {
  display: none;
}

/* Site nav (desktop row) */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.site-nav-links a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
}

.site-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.site-nav-links a:hover {
  text-decoration: none;
}

.site-nav-links a:hover::after,
.site-nav-links a.active::after {
  transform: scaleX(1);
}

.site-nav-links a.active {
  color: var(--blue);
}

.nav-admin {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-admin:hover {
  background: var(--blue);
  color: #ffffff;
  text-decoration: none;
}

/* ===== Grouped nav with dropdown submenus =================================
   Each group is a <details class="nav-group"> whose <summary> is the top-level
   item and .nav-group__menu is the dropdown. Base styles below are the
   DESKTOP presentation; the mobile drawer overrides them to an accordion. */
.nav-group {
  position: relative;
}

.nav-group__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.nav-group__label::-webkit-details-marker { display: none; }

.nav-group.is-current > .nav-group__label { color: var(--blue); }

.nav-group__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
  opacity: 0.7;
  margin-top: -2px;
}

.nav-group[open] > .nav-group__label .nav-group__caret { transform: rotate(-135deg); margin-top: 2px; }

.nav-group__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 120;
}

/* Shown when the group is toggled open (click / keyboard / details[open]). */
.nav-group[open] > .nav-group__menu {
  display: flex;
}

/* Small hover bridge so the dropdown doesn't close in the 10px gap. */
.nav-group__menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav-group__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-group__menu a::after { display: none; }

.nav-group__menu a:hover {
  background: var(--fill-soft);
  text-decoration: none;
}

.nav-group__menu a.active {
  background: var(--blue-fill);
  color: var(--blue);
}

/* Open on hover (desktop pointer) in addition to click, with keyboard focus
   support via :focus-within. The drawer breakpoint re-defines these rules. */
@media (min-width: 881px) and (hover: hover) {
  .nav-group:hover > .nav-group__menu,
  .nav-group:focus-within > .nav-group__menu {
    display: flex;
  }
}

.site-nav-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.lang-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
}

.lang-switch {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--ink);
  font-size: 14px;
  max-width: 100%;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   5. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #ffffff;
  border-top: 1px solid var(--line-2);
  padding-block: clamp(32px, 6vw, 64px);
  margin-top: clamp(48px, 8vw, 96px);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  min-width: 0;
}

.footer-col {
  min-width: 0;
}

.footer-col h4 {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-3);
  overflow-wrap: anywhere;
}

.footer-col a {
  display: block;
  color: var(--ink-70);
  padding-block: 4px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.footer-col a:hover {
  color: var(--blue);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--blue);
}

.footer-intro {
  color: var(--ink-70);
  font-size: 14px;
  max-width: 40ch;
  width: 100%;
  margin-top: var(--sp-2);
  overflow-wrap: anywhere;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  color: var(--navy);
  font-size: 17px;
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.footer-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  object-fit: contain;
  flex: none;
}

.footer-muted {
  color: var(--ink-60);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.footer-status {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
}

/* Footer bottom bar is a .container as well; keep its horizontal padding but
   stack contents on small screens. */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  font-size: 12px;
  color: var(--ink-60);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.footer-bottom span {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   6. GENERIC / SHARED
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  border: 1px solid var(--blue);
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn:hover {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn.btn-ghost {
  background: #ffffff;
  color: var(--blue);
}

.btn.btn-ghost:hover {
  background: var(--blue-fill);
  color: var(--blue-strong);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-weight: 600;
}

.text-link::after {
  content: " ->";
  transition: transform var(--dur) var(--ease);
}

.text-link:hover {
  text-decoration: underline;
}

.text-link:hover::after {
  transform: translateX(3px);
}

.bs2-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  max-width: 100%;
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.bs2-note {
  font-size: 13px;
  color: var(--ink-60);
  overflow-wrap: anywhere;
}

.muted {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.lead {
  font-size: clamp(17px, 1rem + 0.5vw, 21px);
  color: var(--ink-70);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.hl {
  color: var(--blue);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.page-head {
  margin-bottom: clamp(24px, 4vw, 48px);
}

.page-head h1 {
  font-size: clamp(24px, 4vw, 44px);
  color: var(--navy);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.section-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  max-width: 100%;
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.section-heading {
  font-size: clamp(21px, 3vw, 34px);
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  overflow-wrap: anywhere;
}

/* Card */
.card {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 3vw, 24px);
  min-width: 0;
  max-width: 100%;
}

/* Grid helper */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 24px);
  min-width: 0;
}

.grid > * {
  min-width: 0;
  max-width: 100%;
}

/* Factbar */
.factbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.fact {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: #ffffff;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.fact .k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.fact .v {
  display: block;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}

.table-wrap table {
  min-width: 520px;
}

.table-wrap th,
.table-wrap td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
  border-bottom: 1px solid var(--line-2);
}

.table-wrap tbody tr:nth-child(even) {
  background: var(--fill-zebra);
}

.table-wrap .num,
.bs2-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Very long numbers should still be able to break rather than force scroll. */
.hl,
.fact .v,
.hero-number strong,
.bs2-kpi .v,
.bs2-bcard .v,
.data-rail-item strong,
.movement-values strong,
.indicator-value,
.bs2-chero-fact .v {
  word-break: break-word;
}

.table-wrap.figures table {
  min-width: 640px;
}

/* --------------------------------------------------------------------------
   7. SECTION NAV
   -------------------------------------------------------------------------- */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.section-nav-inner,
.section-nav .container {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  min-width: 0;
}

.section-nav a {
  display: inline-flex;
  align-items: center;
  padding: 12px 12px;
  color: var(--ink-70);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  flex: none;
  white-space: nowrap;
}

.section-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.section-nav a.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

.home-section-nav,
.country-section-nav {
  /* inherit .section-nav styles */
}

/* Section-nav here is a bare <nav> without an inner .container/.section-nav-inner,
   so make the nav element itself the horizontal flex track. */
.section-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  padding-inline: clamp(16px, 4vw, 32px);
}

.section-nav.home-section-nav .container,
.section-nav.country-section-nav .container {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   8. HOME PAGE (index.php)
   -------------------------------------------------------------------------- */
.home-page,
.home-page > * {
  min-width: 0;
  max-width: 100%;
}

/* Hero */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
  /* No horizontal padding: the hero content spans the full container width so
     its left/right edges line up exactly with the cards (data-rail) below it,
     which sit flush to the container. Only vertical padding is kept. */
  padding: clamp(20px, 5vw, 48px) 0;
  position: relative;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--blue-fill), transparent 60%);
  border-radius: var(--r-lg);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.home-hero-copy,
.movement-band > *,
.definition-grid,
.data-rail,
.factbar > *,
.hero-number-row > *,
.hero-number-row {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.home-hero-copy {
  min-width: 0;
  max-width: 100%;
}

.home-hero-copy h1 {
  font-size: clamp(25px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  overflow-wrap: anywhere;
}

.home-hero-lead {
  color: var(--ink-70);
  font-size: clamp(16px, 1rem + 0.4vw, 20px);
  max-width: 52ch;
  width: 100%;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-5);
  overflow-wrap: anywhere;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  min-width: 0;
  max-width: 100%;
}

.home-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.home-hero-proof > * {
  position: relative;
  padding-right: var(--sp-3);
}

.home-hero-proof > *:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--blue);
}

/* Hero data column */
.home-hero-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  min-width: 0;
}

.home-hero-data > * {
  min-width: 0;
  max-width: 100%;
}

.hero-number {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.hero-number-primary {
  padding-left: calc(var(--sp-4) + 6px);
  box-shadow: var(--shadow-md);
}

.hero-number-primary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--blue);
}

.movement-values strong {
  overflow: visible;
}

.hero-number-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.hero-number strong,
.hero-number .value {
  display: block;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 800;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-number-primary strong,
.hero-number-primary .value {
  color: var(--blue);
  font-size: clamp(26px, 4vw, 44px);
  max-width: 100%;
}

.hero-number small {
  display: block;
  color: var(--ink-60);
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-number-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}

.hero-live-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--ink-60);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-live-line strong {
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  animation: livePulse 2s var(--ease) infinite;
  flex: none;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Editorial sections */
.editorial-section {
  padding-block: clamp(40px, 7vw, 88px);
  min-width: 0;
  max-width: 100%;
}

.atlas-section,
.definition-section,
.explore-section,
.country-browser-section {
  max-width: 100%;
}

/* Anchor targets that sit under both the sticky header and section-nav. */
.editorial-section,
.atlas-section,
.definition-section,
.country-browser-section,
.explore-section,
.movement-band {
  scroll-margin-top: calc(var(--header-h) + 56px);
  min-width: 0;
  max-width: 100%;
}

.section-intro {
  margin-bottom: clamp(24px, 4vw, 40px);
  min-width: 0;
  max-width: 100%;
}

.section-intro-wide {
  max-width: 68ch;
  width: 100%;
  min-width: 0;
}

.section-intro h2 {
  font-size: clamp(22px, 3.4vw, 38px);
  color: var(--navy);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.section-intro p {
  color: var(--ink-70);
  margin-top: var(--sp-3);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

/* Data rail - compact stat cards in a responsive grid */
.data-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
}

/* Compact figure cards: tighter padding, a thin blue rule instead of a chunky
   left bar, and smaller labels so each card reads as a neat stat, not a box. */
.data-rail-item {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.data-rail-item span,
.data-rail-item {
  max-width: 100%;
}

.data-rail-item span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 1px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.data-rail-item strong {
  display: block;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-rail-item small {
  display: block;
  color: var(--ink-60);
  font-size: 10px;
  margin-top: 1px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Definition section */
.definition-section {
  padding-block: clamp(40px, 7vw, 88px);
  min-width: 0;
}

.definition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.definition-grid article {
  min-width: 0;
}

.definition-grid article {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: #ffffff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.definition-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-line);
}

.definition-index {
  display: block;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  -webkit-text-stroke: 1.5px var(--blue);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.definition-grid article h3 {
  font-size: 17px;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.definition-grid article:hover h3 {
  color: var(--blue);
}

.definition-grid article p {
  color: var(--ink-70);
  font-size: 14px;
  margin-top: var(--sp-2);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

/* Movement band */
.movement-band {
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-lg);
  background: #ffffff;
  padding: clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.movement-copy {
  min-width: 0;
  max-width: 100%;
}

.movement-copy h2 {
  color: var(--navy);
  font-size: clamp(21px, 3vw, 32px);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.movement-copy p {
  color: var(--ink-70);
  margin-top: var(--sp-3);
  margin-bottom: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Single recorded-movement figure card: one label, one big number, one line
   of explanation. Compact and self-contained, in the blue-accent card style. */
.movement-single {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 4px;
  padding: clamp(14px, 2.5vw, 20px); 
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);        
  background: var(--blue-fill);      
}

/* Split layout: EU / US / combined shown side by side, wrapping on small
   screens. The combined card is emphasised as the primary total. */
.movement-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(12px, 2vw, 18px);
  min-width: 0;
  max-width: 100%;
  margin-top: var(--sp-3, 12px);
}

.movement-single--total {
  border-color: var(--navy, #0b1f3a);
  background: var(--navy, #0b1f3a);
}

.movement-single--total .movement-single__label,
.movement-single--total .movement-single__value,
.movement-single--total .movement-single__foot,
.movement-single--total .movement-single__foot strong {
  color: #fff;
}

.movement-single__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.movement-single__value {
  display: block;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.movement-single__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 60ch;
  overflow-wrap: anywhere;
}

.movement-single__foot {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--blue-line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-60);
  max-width: 60ch;
  overflow-wrap: anywhere;
}

.movement-single__foot strong {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.movement-transit-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--blue-tint, rgba(37, 99, 235, 0.06));
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--blue);
  color: var(--ink-70);
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.movement-transit-note strong {
  color: var(--ink-strong);
}

.movement-transit-note a {
  color: var(--blue);
  font-weight: 600;
}

/* Atlas / globe */
.atlas-section {
  padding-block: clamp(40px, 7vw, 88px);
  min-width: 0;
}

.atlas-shell {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.atlas-shell > * {
  min-width: 0;
  max-width: 100%;
}

.bs2-globe-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}

/* Each atlas control is a labelled group: a small caption stacked above its
   segmented control, so it is obvious what every toggle changes. */
.atlas-ctl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.atlas-ctl-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  line-height: 1.2;
}

.atlas-ctl-label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--ink-50);
}

.atlas-ctl-step {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--blue-fill);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

/* The migration-direction group is the primary control: make it stand out. */
.atlas-ctl-primary .atlas-ctl-label {
  color: var(--blue);
}

.bs2-segment.is-primary {
  background: var(--blue-fill-2);
  border-color: var(--blue-line);
}

.bs2-segment.is-primary button {
  padding: 8px 16px;
  font-weight: 600;
}

.bs2-segment.is-primary button.active:not(.is-secondary) {
  background: var(--blue);
  color: #ffffff;
}

/* "Totals" sits inside the primary segment but is the de-emphasized fallback. */
.bs2-segment.is-primary button.is-secondary {
  font-weight: 500;
  color: var(--ink-60);
  margin-left: 4px;
  border-left: 1px solid var(--blue-line);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

.bs2-segment.is-primary button.is-secondary.active {
  background: #ffffff;
  color: var(--blue);
}

.bs2-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--blue-fill);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  min-width: 0;
}

.bs2-segment button {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bs2-segment button:hover {
  color: var(--blue);
}

.bs2-segment button.active {
  background: #ffffff;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.bs2-segment select {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  min-width: 0;
}

/* Named segments used in the OLD .bs2-segment atlas controls inherit its
   styling. Scoped to .bs2-segment so these legacy rules never leak onto the
   newer .atlas-segment control panel (which carries the same .heatmap-buttons /
   .kind-buttons class names because the globe JS selects on them). */
.bs2-segment.metric-buttons,
.bs2-segment.heatmap-buttons {
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Compact + mobile-friendly atlas controls.
   On phones the labelled control groups take too much vertical space and the
   pill buttons are oversized, so shrink the whole controls row: each group
   goes full-width and stacks cleanly, labels get smaller, and the segmented
   buttons become touch-sized but tighter. */
@media (max-width: 720px) {
  /* MOBILE ATLAS CONTROLS - fully reworked (v2).
     Each labelled group is stacked full-width so long option labels ("Refugees
     & asylum", "Country totals colour") are never clipped. The segmented
     control drops its pill container and becomes a wrapping set of clean,
     bordered toggle chips with big tap targets and an obvious active state. */
  .bs2-globe-controls-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 10px;
    margin-bottom: var(--sp-3);
  }
  .atlas-ctl {
    gap: 6px;
    width: 100%;
  }
  .atlas-ctl-primary,
  .atlas-ctl-metric {
    grid-column: 1 / -1;
  }
  .atlas-ctl-label {
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  /* Turn each pill container into a structured, even GRID of chips (no inner
     pill background / rounded track). A grid keeps every option the same size
     and perfectly aligned - "more structure" than ragged wrapping pills. */
  .bs2-segment,
  .bs2-segment.is-primary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* default: neat 2 columns */
    width: 100%;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* Groups with 3 options get 3 even columns; the 4-option direction group
     stays 2x2. Scoped to .bs2-segment so they only affect the OLD markup and
     never override the newer .atlas-segment layout (same class names). */
  .bs2-segment.kind-buttons,
  .bs2-segment.metric-buttons,
  .bs2-segment.view-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
  .bs2-segment.heatmap-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Each option: a comfortable, legible bordered chip filling its grid cell.
     Text wraps instead of clipping and every chip is identical in size. */
  .bs2-segment button,
  .bs2-segment.is-primary button,
  .bs2-segment.is-primary button.is-secondary {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    white-space: normal;          /* allow wrapping instead of clipping */
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--blue-line);
    border-left: 1px solid var(--blue-line);
    border-radius: var(--r-md);
    box-shadow: none;
  }

  /* Active chip: solid blue, high contrast - obvious which option is on. */
  .bs2-segment button.active,
  .bs2-segment.is-primary button.active:not(.is-secondary),
  .bs2-segment.is-primary button.is-secondary.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
    box-shadow: none;
  }

  /* The year dropdown becomes a full-width native select styled like a field.
     It spans the full grid so it does not leave an empty column beside it. */
  .heatmap-buttons select,
  .bs2-segment select {
    grid-column: 1 / -1;
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid var(--blue-line);
    border-radius: var(--r-md);
    color: var(--ink);
  }
}

.bs2-globe-stage {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* The heat map year select sits inside a segment; keep it compact and readable. */
.heatmap-buttons select {
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 6px 8px;
  font-size: 14px;
  max-width: 100%;
  min-width: 0;
}

/* The globe keeps its own visual colors: do not force white inside. */
#globe {
  position: relative;               /* containing block for the absolute canvas */
  width: 100%;
  max-width: 100%;
  height: clamp(320px, 60vw, 560px);
  min-height: 320px;                /* never collapse to 0 on mobile before JS sizes it */
  max-height: 70vh;                 /* never taller than the viewport on mobile */
  border-radius: var(--r-md);
  overflow: hidden;                 /* clip anything globe.gl draws outside */
  background: radial-gradient(circle at 50% 40%, #0a2540, #05121f 70%);
}

/* Defensive: globe.gl injects its own scene wrapper + <canvas>. On some mobile
   browsers it can briefly size that to the viewport BEFORE our JS resize runs,
   which pushes the page height up and creates an "endless scroll". Pin the
   wrapper and canvas absolutely inside the fixed-height stage so they can never
   contribute to page height, no matter what size globe.gl computes.

   IMPORTANT: this must NOT match our own overlays (the country info card and
   the status message), which are ALSO direct children of #globe. The old
   `#globe > *` selector forced the info card to width:100%/height:100% !important,
   which is why the desktop modal ballooned to the full stage. Exclude them. */
#globe > *:not(.globe-info):not(.globe-msg) {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

#globe canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

/* JS toggles a plain black sphere; keep the stage backdrop black then. */
#globe.globe-black {
  background: #000000;
}

.globe-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

.globe-controls button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.globe-controls button svg {
  width: 18px;
  height: 18px;
}

.globe-controls button:hover {
  background: var(--blue-fill);
  color: var(--blue);
}

.globe-controls button.active {
  background: var(--blue);
  color: #ffffff;
}

.globe-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  padding: var(--sp-4);
  pointer-events: none;
}

/* Legend */
.bs2-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: 12px;
  color: var(--ink-70);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.bs2-legend-ramp {
  height: 8px;
  width: clamp(90px, 22vw, 180px);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: linear-gradient(90deg, var(--blue-fill-2), var(--blue) 55%, var(--navy));
}

.bs2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bs2-chip::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--dot);
  flex: none;
}

.bs2-chip.is-plain::before {
  display: none;
}

/* Legend switches meaning between totals mode and net mode. globe.js adds the
   .is-net class to .bs2-legend when the Net direction is active. In totals mode
   we show the sequential ramp + standard chips and hide the net chips; in net
   mode we hide the ramp/standard chips and show the diverging gain/loss chips. */
.bs2-legend .legend-net {
  display: none;
}

.bs2-legend.is-net .legend-standard,
.bs2-legend.is-net .legend-extra,
.bs2-legend.is-net .bs2-legend-ramp {
  display: none;
}

.bs2-legend.is-net .legend-net {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* "Fewer people -> ramp -> More people" reads as one continuous scale, so the
   three parts sit together with a tighter gap and do not wrap apart. */
.legend-standard {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}

.legend-extra {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Globe info card + tooltip.
   The click card is styled to MATCH the dark hover tooltip (.globe-tip) instead
   of a white-on-white box: dark navy glass background, white text, muted-white
   labels and light-blue accents so it reads clearly over the globe. */
.globe-info {
  position: absolute;
  left: 12px;
  right: auto;
  bottom: 12px;
  width: 280px;
  max-width: calc(100% - 24px);
  background: rgba(10, 37, 64, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.globe-info.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.globe-info::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: rgba(10, 37, 64, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transform: rotate(45deg);
}

.globe-info-name {
  font-weight: 800;
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

/* The markup uses class names with the "globe-info-" prefix. */
.globe-info .metric,
.globe-info-metric {
  display: block;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.globe-info .more,
.globe-info-more {
  display: inline-flex;
  margin-top: var(--sp-2);
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
}

.globe-info .note,
.globe-info-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.globe-info .x,
.globe-info-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1;
}

.globe-info .x:hover,
.globe-info-x:hover {
  color: #ffffff;
}

/* The "more" link is emitted as a .btn as well; on the dark card it becomes a
   light-blue solid button so it reads as the primary action. */
.globe-info-more.btn {
  padding: 7px 12px;
  font-size: 13px;
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-3);
  background: var(--blue);
  color: #ffffff;
  border: 0;
}

.globe-info-more.btn:hover {
  background: #ffffff;
  color: var(--navy);
}

/* Wider, richer country-click card. Fixed width, left-anchored (JS sets left);
   never wider than the stage. */
.globe-info {
  width: 300px;
  max-width: calc(100% - 24px);
}

.globe-info-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.globe-info-iso {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* Flow stats: a 3-up mini grid (Incoming / Outgoing / Net). */
.globe-info-stats {
  margin-top: var(--sp-2);
}

/* The three flow figures (Incoming / Outgoing / Net) are wrapped in
   .globe-info-grid, so the 3-up grid must live here - otherwise the cards
   stack vertically. */
.globe-info-stats .globe-info-grid,
.globe-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.globe-info-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  min-width: 0;
}

.globe-info-stat-l {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.globe-info-stat-v {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Brighter green/red so net gain/loss stays legible on the dark card. */
.globe-info-stat.is-pos .globe-info-stat-v { color: #34d399; }
.globe-info-stat.is-neg .globe-info-stat-v { color: #f87171; }

/* When the stat block only holds a single totals value line, let it span. */
.globe-info-stats:not(:empty) + .globe-info-note { margin-top: var(--sp-2); }

/* Empty / no-data state and the year label inside the dark card must use light
   text so they do not disappear against the navy background. */
.globe-info .state__msg,
.globe-info-empty .state__msg,
.globe-info-year {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   MOBILE COUNTRY CARD - fully reworked to a slim bottom sheet.
   On phones the absolute card was too large and covered most of the globe.
   Pin it to the bottom edge as a compact, full-width sheet with tight padding,
   a capped height that scrolls internally, and smaller type + stats. */
@media (max-width: 720px) {
  .globe-info {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
    width: auto;
    padding: 10px 12px;
    border-radius: var(--r-md);
    max-height: 48%;               /* never cover more than ~half the globe */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The little pointer arrow looks odd on a full-width sheet - drop it. */
  .globe-info::after {
    display: none;
  }
  .globe-info-head {
    margin-bottom: 6px;
  }
  .globe-info-name {
    font-size: 14px;
  }
  .globe-info .metric,
  .globe-info-metric {
    font-size: 18px;
  }
  /* Keep the 3 flow stats on one tight row. */
  .globe-info-stats {
    margin-top: 6px;
  }
  .globe-info-grid {
    gap: 4px;
  }
  .globe-info-stat {
    padding: 4px 6px;
  }
  .globe-info-stat-l {
    font-size: 8px;
  }
  .globe-info-stat-v {
    font-size: 13px;
  }
  .globe-info-note {
    font-size: 11px;
  }
  /* Compact primary action button. */
  .globe-info-more.btn {
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 12px;
  }
  /* Bigger, easier-to-hit close target on touch. */
  .globe-info-x {
    top: 6px;
    right: 6px;
    padding: 6px;
    font-size: 18px;
  }
}

/* Very small phones: allow the sheet a bit more scroll room. */
@media (max-width: 380px) {
  .globe-info {
    max-height: 56%;
  }
}

.scene-tooltip {
  position: absolute;
  background: transparent;
  pointer-events: none;
  z-index: 5;
}

/* Dark tooltip is allowed for readability over the globe visual only. */
.globe-tip {
  background: rgba(10, 37, 64, 0.95);
  color: #ffffff;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  box-shadow: var(--shadow-md);
  min-width: 140px;
  max-width: 220px;
  overflow-wrap: anywhere;
}

.globe-tip-name {
  display: block;
  font-weight: 700;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Markup uses "globe-tip-" prefixed spans; keep descendant fallbacks too. */
.globe-tip .metric,
.globe-tip-metric {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.globe-tip .value,
.globe-tip-value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.globe-tip .hint,
.globe-tip-hint {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

/* Heat-mode tooltip: year badge, mini table of Incoming/Outgoing/Net.
   Green/red accents are allowed here ONLY because this tooltip sits on the
   dark navy globe visual and mirrors the map net colors. */
.globe-tip-year {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.globe-tip-rows {
  display: block;
  margin-top: 6px;
}

.globe-tip-rows span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.globe-tip-rows span:first-child {
  border-top: 0;
}

.globe-tip-rows span b {
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.globe-tip-rows span em {
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.globe-tip-rows .is-pos em {
  color: #34d399;
}

.globe-tip-rows .is-neg em {
  color: #f87171;
}

/* Dependency-free SVG flat map host and its tooltip. */
.bs2-flatmap {
  position: relative;
  width: 100%;
  height: clamp(320px, 60vw, 560px);
  background: #f8fafc;
  border-radius: var(--r-md);
  overflow: hidden;
}

.bs2-flatmap[hidden] {
  display: none;
}

.bs2-flatmap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bs2-flatmap-svg path {
  cursor: pointer;
  transition: stroke 0.12s ease, stroke-width 0.12s ease;
}

.bs2-flatmap-svg path:hover {
  stroke: #ffffff;
  stroke-width: 1.25px;
}

/* The flat-map tip reuses the dark globe tooltip look; JS injects
   .globe-tip markup inside it and sets left/top. */
.flatmap-tip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  max-width: 240px;
}

.flatmap-tip .globe-tip {
  min-width: 140px;
}

/* Migration corridors / transit-hub panel. */
.atlas-corridors {
  margin-top: var(--sp-4);
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.atlas-corridors-title {
  color: var(--navy);
  font-size: clamp(16px, 2vw, 20px);
  margin: 0;
}

.atlas-corridors-lead {
  color: var(--ink-70);
  font-size: 13px;
  margin-top: var(--sp-2);
}

.atlas-corridors-list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* "Show all / Show fewer" toggle for the corridor (migration flows) list. */
.corridor-toggle {
  justify-self: start;
  margin-top: var(--sp-2);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-fill);
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.corridor-toggle:hover {
  background: var(--blue);
  color: #fff;
}

/* Same pill for the "Show all / Show fewer" toggle under the country list. */
.country-list-more {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-fill);
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.country-list-more:hover {
  background: var(--blue);
  color: #fff;
}

/* NOTE: The migration-flow cards are styled below in the "Movement flow cards"
   section using the .flow-card* classes emitted by globe.js. The old
   .corridor-row / .corridor-place / .corridor-o|d / .corridor-arrow /
   .corridor-v / .corridor-rank rules were removed as dead code. The panel
   shell (.atlas-corridors*), the "Show all" toggle (.corridor-toggle) and the
   transit-hub badge (.hub-badge) remain live and are defined elsewhere. */

/* Country browser */
.country-browser-section {
  padding-block: clamp(40px, 7vw, 88px);
  min-width: 0;
}

/* The markup places .country-browser-copy and .country-list directly in the
   section, so lay the section itself out as the responsive grid. */
.country-browser-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

.country-browser-section .country-browser-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  min-width: 0;
}

.country-browser-section .country-browser-inner > * {
  min-width: 0;
  max-width: 100%;
}

.country-browser-copy,
.country-browser-section > * {
  min-width: 0;
  max-width: 100%;
}

.country-browser-copy h2 {
  color: var(--navy);
  font-size: clamp(21px, 3vw, 32px);
  overflow-wrap: anywhere;
}

.country-browser-copy p {
  color: var(--ink-70);
  margin-top: var(--sp-3);
  overflow-wrap: anywhere;
}

.country-list {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.bs2-clist-search {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 16px;
  font-size: 15px;
  background: #ffffff;
  color: var(--ink);
}

.bs2-clist-search::placeholder {
  color: var(--ink-50);
}

.bs2-clist {
  max-height: 360px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rendered as an <a> by the JS, so reset link styling. */
.country-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  color: inherit;
  transition: background var(--dur) var(--ease);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Rows past the first 5 (and search-filtered rows) carry the HTML `hidden`
   attribute; the .country-row display rule above would otherwise keep them
   visible, so force hidden rows to stay hidden. */
.country-row[hidden] {
  display: none !important;
}

.country-row:hover {
  background: var(--blue-fill);
  color: inherit;
  text-decoration: none;
}

.country-row:last-child {
  border-bottom: 0;
}

.country-row .country-name {
  color: var(--ink);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-row .country-val {
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: none;
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-row:hover .country-val {
  color: var(--blue);
}

/* .bs2-empty base styles are unified with .state above (loading/empty/error).
   This rule keeps the legacy font tuning for the plain empty text label. */
.bs2-empty {
  font-size: 14px;
  color: var(--ink-60);
}

/* Explore section */
.explore-section {
  padding-block: clamp(40px, 7vw, 88px);
  min-width: 0;
}

/* The atlas legend uses inline --dot styles on chips; keep them plain when
   is-plain is present, otherwise show the dot in the provided color. */
.bs2-chip[style*="--dot"]::before {
  background: var(--dot);
}

.explore-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.explore-links > * {
  min-width: 0;
  max-width: 100%;
}

.explore-links a {
  display: block;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  background: #ffffff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.explore-links a {
  color: inherit;
}

.explore-links a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-line);
  text-decoration: none;
}

.explore-links a span {
  display: block;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: var(--blue);
  -webkit-text-stroke: 1.5px var(--blue);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* text-stroke on a colored fill gives an outlined numeral where supported,
   and a solid blue numeral as a graceful fallback otherwise. */
@supports (-webkit-text-stroke: 1px #000) {
  .explore-links a span,
  .definition-index {
    color: transparent;
  }
}

/* Global safety net: any direct grid/flex child that the markup places without
   its own rule still gets a zero minimum so nothing forces a scroll at 360px.
   Kept after the section rules so it does not override more specific ones. */
.editorial-section > *,
.definition-section > *,
.atlas-section > *,
.explore-section > *,
.country-browser-section > * {
  min-width: 0;
  max-width: 100%;
}

.explore-links a strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  max-width: 100%;
  margin-bottom: 4px;
  margin-top: var(--sp-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.explore-links a:hover strong {
  color: var(--blue);
}

.explore-links a small {
  display: block;
  color: var(--ink-60);
  font-size: 13px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.explore-links a:hover {
  color: inherit;
}

/* --------------------------------------------------------------------------
   9. COUNTRY PAGE (show.php)
   -------------------------------------------------------------------------- */
.bs2 {
  min-width: 0;
}

.bs2 {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  max-width: 100%;
  margin-bottom: var(--sp-4);
  overflow-wrap: anywhere;
}

.bs2-back::before {
  content: "<- ";
}

.bs2-back:hover {
  text-decoration: underline;
}

.country-overview {
  min-width: 0;
}

.country-movement {
  min-width: 0;
}

.country-overview,
.country-movement {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Country masthead */
.bs2-chero {
  background:
    radial-gradient(120% 100% at 100% 0%, var(--blue-fill), transparent 60%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(20px, 4vw, 40px);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-chero-top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.bs2-chero-flag {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  flex: none;
}

.bs2-chero-id {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 min(220px, 100%);
}

.bs2-chero-id h1 {
  color: var(--navy);
  font-size: clamp(23px, 4vw, 42px);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.bs2-chero-iso {
  color: var(--ink-60);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.bs2-chero-lead {
  color: var(--ink-70);
  max-width: 62ch;
  width: 100%;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-5);
  overflow-wrap: anywhere;
}

.bs2-chero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}

.bs2-chero-fact {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  background: #ffffff;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-chero-fact .k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.bs2-chero-fact .v {
  display: block;
  font-weight: 700;
  color: var(--ink-strong);
  font-size: clamp(15px, 1.8vw, 19px);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Section rhythm */
.bs2-sec {
  padding-block: clamp(28px, 5vw, 56px);
  min-width: 0;
  max-width: 100%;
}

.bs2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.bs2-head > * {
  min-width: 0;
  max-width: 100%;
}

.bs2-h {
  color: var(--navy);
  font-size: clamp(19px, 2.8vw, 30px);
  margin: 0;
  overflow-wrap: anywhere;
}

.bs2-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--blue-fill);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reusable collapsible section/panel.
   Wrap any space-heavy block in <details class="bs2-collapse"> with a
   <summary class="bs2-head bs2-collapse-head"> so the whole block can be
   folded away to save space. Add the `open` attribute to start expanded. */
.bs2-collapse {
  min-width: 0;
  max-width: 100%;
}
.bs2-collapse-head {
  cursor: pointer;
  list-style: none;
  align-items: flex-start;
}
.bs2-collapse-head::-webkit-details-marker { display: none; }
.bs2-collapse-head::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: auto;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  align-self: center;
}
.bs2-collapse[open] > .bs2-collapse-head::after {
  transform: rotate(45deg);
}
.bs2-collapse-head:hover .bs2-h {
  color: var(--blue);
}

/* Compact per-year picker: a single dropdown that loads one year at a time
   instead of listing every year down the page. */
.bs2-year-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.bs2-year-picker .bs2-eyebrow {
  margin-bottom: 0;
}
.bs2-year-select {
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  padding: 6px 12px;
  border: 1px solid var(--blue);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  max-width: 160px;
}
.bs2-year-select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.bs2-year-panel[hidden] {
  display: none;
}

/* Compact KPIs */
.bs2-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}

.bs2-kpi {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  padding-left: calc(var(--sp-4) + 6px);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--blue);
}

.bs2-kpi .v {
  display: block;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bs2-kpi .k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

/* The .k label can carry an inline year and each card an optional note (.n);
   the Statistics stock/flow cards use both, so keep them legible and muted. */
.bs2-kpi .k small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-50);
}

.bs2-kpi .n {
  display: block;
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

/* Balance band */
.bs2-balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
}

.bs2-bcard {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--line-3);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-bcard .k {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.bs2-bcard .v {
  display: block;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bs2-bcard .n {
  display: block;
  color: var(--ink-60);
  font-size: 12px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bs2-meter-row .lab {
  overflow-wrap: anywhere;
}

/* Inbound uses blue; outbound uses black/navy. No green or red. */
.bs2-bcard.is-in {
  border-left-color: var(--blue);
}

.bs2-bcard.is-in .v {
  color: var(--blue);
}

.bs2-bcard.is-out {
  border-left-color: var(--navy);
}

.bs2-bcard.is-out .v {
  color: var(--navy);
}

/* Two column layout */
.bs2-two {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  min-width: 0;
  max-width: 100%;
}

.bs2-two > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Grids of cards on the country page all need zero-min children so long
   numbers wrap instead of forcing the page to scroll horizontally. */
.bs2-kpis > *,
.bs2-balance > *,
.bs2-ind-grid > *,
.bs2-chero-facts > * {
  min-width: 0;
  max-width: 100%;
}

.bs2-card {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-card > * {
  min-width: 0;
  max-width: 100%;
}

.bs2-chart {
  position: relative;
  min-height: 240px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.bs2-chart canvas,
.bs2 canvas,
.card canvas,
.card > canvas,
.home-page canvas {
  display: block;
  max-width: 100% !important;
  height: auto;
}

/* The Statistics trend chart is now wrapped in a shared .bs2-chart like every
   other chart, so it inherits the fluid canvas rules above. Keep this guard as
   a belt-and-braces so the canvas can never force a horizontal scroll. */
#statsChart {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* The bare statsChart canvas has no wrapper aspect ratio, so give it a sensible
   responsive height (Chart.js otherwise collapses to 0 without a fixed size). */
.bs2-chart > #statsChart {
  height: clamp(200px, 40vw, 320px) !important;
}

/* Result panel returned by the compare endpoint is unknown markup; keep it
   from overflowing and give tables the same scroll treatment. */
#compareResult {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  max-width: 100%;
}

#compareResult canvas {
  max-width: 100%;
}

#compareResult table {
  width: 100%;
}

/* Indicators */
.bs2-ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.bs2-ind-title {
  color: var(--navy);
  font-size: 17px;
  margin-bottom: var(--sp-3);
  overflow-wrap: anywhere;
}

/* Section-nav under the sticky header offsets anchor targets. */
.bs2-sec {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

.indicator-card {
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.indicator-name {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.indicator-value {
  display: block;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.indicator-value em {
  font-style: normal;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-60);
  margin-left: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.indicator-spark {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 48px;
  margin-top: var(--sp-2);
}

.indicator-card small {
  display: block;
  color: var(--ink-60);
  font-size: 12px;
  margin-top: var(--sp-2);
  overflow-wrap: anywhere;
}

/* Meter rows */
.bs2-meter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}

.bs2-meter-row .lab {
  font-size: 13px;
  color: var(--ink-70);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bs2-meter-row .val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.bs2-meter {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 100%;
}

.bs2-meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--blue-mid), var(--blue));
  transition: width 600ms var(--ease);
}

/* Country table */
.bs2-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}

.bs2-table table {
  min-width: 560px;
}

.bs2-table th,
.bs2-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.bs2-table thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
  z-index: 1;
}

.bs2-table tbody tr:nth-child(even) {
  background: var(--fill-zebra);
}

.bs2-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chart panel toggle */
.chart-panel[hidden] {
  display: none;
}

/* Flag emoji, used inline and in the country masthead. */
.flag {
  font-size: 1.2em;
  line-height: 1;
}

/* Charts sit inside .bs2-card; keep canvases fluid and never overflow. */
.bs2-card canvas,
.compare-controls + * canvas {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   10. NEWS + COMPARE
   -------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-4);
  min-width: 0;
  max-width: 100%;
}

.news-grid > * {
  min-width: 0;
  max-width: 100%;
}

.news-card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-width: 0;
  max-width: 100%;
}

.news-card {
  color: inherit;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-line);
  color: inherit;
  text-decoration: none;
}

.news-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fill-soft);
}

.news-body {
  padding: var(--sp-4);
}

.news-body h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.news-card:hover .news-body h3 {
  color: var(--blue);
}

.news-meta {
  color: var(--ink-60);
  font-size: 12px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* News article body: the content is editor-authored HTML of unknown shape, so
   keep long words, images and wide tables from overflowing the narrow column. */
.news-article {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.news-hero {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
}

.news-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.news-content img {
  max-width: 100%;
  height: auto;
}

.news-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.news-content pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Compare */
/* Compare controls: A, vs, B and an actions row. */
.compare-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-5);
  min-width: 0;
  max-width: 100%;
}

.compare-controls > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.compare-controls label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 4px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.compare-controls select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  min-width: 0;
}

.compare-vs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 100%;
  align-self: center;
  justify-self: center;
  flex: none;
}

.compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  min-width: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   11. REVEAL / MOTION HOOKS (JS-driven)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
  max-width: 100%;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.card.reveal {
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), box-shadow var(--dur) var(--ease);
}

/* Optional spotlight hook: uses --mx / --my */
.has-spotlight {
  position: relative;
  isolation: isolate;
}

.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(180px 180px at var(--mx) var(--my), var(--blue-fill), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* Optional tilt hook: the JS sets --tiltX / --tiltY on these card types. */
.bs2-kpi[style*="--tiltX"],
.bs2-bcard[style*="--tiltX"],
.bs2-fact[style*="--tiltX"],
.news-card[style*="--tiltX"],
[style*="--tiltX"],
[style*="--tiltY"] {
  transform: perspective(700px) rotateX(var(--tiltY)) rotateY(var(--tiltX));
  transition: transform var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   Unified UI state block: loading / empty / error
   Shared by app/Views/partials/state.php and the JS presentation layer.
   Palette: white / ink / navy / blue only.
   -------------------------------------------------------------------------- */
.state,
.bs2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  max-width: 100%;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--fill-soft);
  overflow-wrap: anywhere;
}

.state__msg {
  font-size: 14px;
  color: var(--ink-60);
  max-width: 100%;
}

.state__icon {
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  flex: none;
}

.state--empty .state__icon {
  background: var(--blue-fill);
  border: 2px solid var(--blue-line);
}

.state--error {
  border-style: solid;
  border-color: var(--blue-line);
}

.state--error .state__icon {
  background: var(--blue-fill-2);
  border: 2px solid var(--blue);
}

.state--loading .state__icon {
  border: 2px solid var(--blue-line);
  border-top-color: var(--blue);
  animation: state-spin 0.8s linear infinite;
}

@keyframes state-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .state--loading .state__icon {
    animation: none;
  }
}

/* When the shared state block is dropped into a table cell (Statistics/Country
   "no data" rows) or a compact KPI/balance card, it must not keep the tall,
   centred padding meant for full-width panels. Slim it down so it reads as an
   inline placeholder inside those shared components. */
td > .state,
.bs2-kpi > .state,
.bs2-bcard > .state,
.data-rail-item > .state,
.home-hero-fig > .state {
  padding: var(--sp-2) 0;
  border: 0;
  background: transparent;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--sp-2);
}

/* Icon is decorative and oversized for an inline placeholder; shrink it. */
td > .state .state__icon,
.bs2-kpi > .state .state__icon,
.bs2-bcard > .state .state__icon,
.data-rail-item > .state .state__icon,
.home-hero-fig > .state .state__icon {
  width: 12px;
  height: 12px;
}

/* A chart whose series is empty has its <canvas> swapped for a .state block by
   charts.js; keep that block full-width inside the chart container so an empty
   time-series reads as a proper no-data state rather than a blank chart box. */
.bs2-chart > .state {
  width: 100%;
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   Breakpoints: 520, 720, 880, 1024
   -------------------------------------------------------------------------- */

/* Hide utility second span on very small screens */
@media (max-width: 519px) {
  .header-utility-inner > span:nth-child(2) {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* >= 520px */
@media (min-width: 520px) {
  .compare-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .compare-controls .compare-actions {
    grid-column: 1 / -1;
  }
}

/* >= 720px */
@media (min-width: 720px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Roomier data rail once there is space, before the desktop grid kicks in. */
  .data-rail {
    grid-auto-columns: minmax(min(240px, 100%), 1fr);
  }
}

/* Mobile nav behaviour: hamburger + drawer appear at <= 880px */
@media (max-width: 880px) {
  /* Show the hamburger. */
  .nav-toggle {
    display: inline-flex;
  }

  /* Backdrop covers the page behind the drawer; tap it to close. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(10, 20, 40, 0.5);
  }
  .nav-backdrop:not([hidden]) {
    display: block;
  }

  /* The drawer: a fixed panel pinned to the right, full viewport height, with
     its own scroll. Starts off-screen and slides in when .is-open is added. */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #ffffff;
    border-left: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg);
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s var(--ease), visibility 0.25s var(--ease);
  }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Sticky in-drawer header: logo left, close (X) right. Always reachable at
     the top of the panel even when the link list is long and scrolls. */
  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px clamp(16px, 4vw, 20px);
    background: #ffffff;
    border-bottom: 1px solid var(--line-2);
  }

  /* Link list + tools get comfortable padding inside the scrolling panel. */
  .site-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: 12px clamp(16px, 4vw, 20px) 0;
  }

  .site-nav-links a {
    display: block;
    padding: 14px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    color: var(--ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .site-nav-links a:hover {
    background: var(--fill-soft);
    text-decoration: none;
  }

  .site-nav-links a.active {
    background: var(--blue-fill);
    color: var(--blue);
  }

  .site-nav-links a::after {
    display: none;
  }

  /* Grouped nav inside the drawer: behave as an accordion, not a dropdown.
     The submenu flows in-document and indents under its heading. */
  .nav-group {
    position: static;
    border-radius: 12px;
  }

  .nav-group__label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
  }

  .nav-group__label:hover { background: var(--fill-soft); }

  .nav-group.is-current > .nav-group__label { color: var(--blue); }

  .nav-group__menu {
    position: static;
    transform: none;
    min-width: 0;
    display: flex;
    margin: 2px 0 6px;
    padding: 2px 0 2px 10px;
    border: 0;
    border-left: 2px solid var(--line-2);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-group__menu::before { display: none; }

  .nav-group__menu a {
    padding: 12px 12px;
    font-size: 15px;
    font-weight: 500;
  }

  .site-nav-tools {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: var(--sp-4) clamp(16px, 4vw, 20px) calc(env(safe-area-inset-bottom, 0px) + var(--sp-4));
  }

  .nav-admin {
    width: 100%;
    justify-content: center;
  }

  /* Lock background scroll while the drawer is open (JS toggles body.nav-open). */
  body.nav-open {
    overflow: hidden;
  }
}

/* >= 880px: multi-column layouts and desktop nav */
@media (min-width: 880px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .movement-band {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .country-browser-section,
  .country-browser-section .country-browser-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .bs2-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* >= 1024px: a bit more breathing room */
@media (min-width: 1024px) {
  .definition-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .data-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    overflow: visible;
  }
}

/* On mobile, rotate the movement divider arrow to point down, and drop the
   section-nav sticky offset a touch since it scrolls horizontally. */
@media (max-width: 879px) {
  .movement-divider {
    transform: rotate(90deg);
    align-self: center;
  }

  .indicator-value {
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION
   Neutralize transforms and animations when requested.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Meters should show their final width without an animated sweep. */
  .bs2-meter > span {
    transition: none !important;
  }

  .live-dot {
    animation: none !important;
    box-shadow: none !important;
  }

  .has-spotlight::before {
    display: none;
  }

  [style*="--tiltX"],
  [style*="--tiltY"] {
    transform: none !important;
  }

  .btn:hover,
  .news-card:hover,
  .explore-links a:hover,
  .definition-grid article:hover {
    transform: none !important;
  }

  /* Neutralize the JS tilt hooks too. */
  [style*="--tiltX"],
  [style*="--tiltY"],
  .bs2-kpi[style*="--tiltX"],
  .bs2-bcard[style*="--tiltX"],
  .bs2-fact[style*="--tiltX"],
  .news-card[style*="--tiltX"] {
    transform: none !important;
  }
}

/* --- Mobile: prevent double-tap-to-zoom and input auto-zoom --- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
@media (max-width: 640px) {
  input,
  select,
  textarea,
  .bs2-clist-search,
  #country-list-search {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   11. ATLAS / FLOW MAP REFINEMENTS (added)
   The interactive atlas is the hero of the home page, so it is allowed to be
   wider than the (now narrower) reading column and gets a cleaner frame. The
   flat map supports drag-pan + wheel-zoom and draws flow arcs on top.
   -------------------------------------------------------------------------- */

/* Standardization: the atlas must share the SAME content width as every other
   section (header, hero, tables, cards). It previously broke out to a wider
   column, which made the page look inconsistent (atlas wider than the header /
   hero). Keep it inside the container column. */
.atlas-section .atlas-shell {
  width: 100%;
  margin-inline: 0;
  max-width: 100%;
}

/* Give the map stage a soft, modern frame instead of a bare rectangle. */
.bs2-globe-stage,
.bs2-flatmap {
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-lg);
}
.bs2-globe-stage { background: radial-gradient(circle at 50% 35%, #0a2540, #05121f 72%); }

/* Flat map: nicer land tone + clear grab cursor + smooth pan/zoom feel. */
.bs2-flatmap {
  background: linear-gradient(180deg, #eef3fb 0%, #e6eef8 100%);
  cursor: grab;
  touch-action: none;               /* let JS own wheel/drag gestures */
}
.bs2-flatmap:active { cursor: grabbing; }
.bs2-flatmap-svg { cursor: inherit; }
.bs2-flatmap-svg .flat-geo path {
  transition: fill 0.15s ease, stroke 0.12s ease, stroke-width 0.12s ease;
}
.bs2-flatmap-svg .flat-geo path:hover {
  stroke: #0a2540;
  stroke-width: 1px;
}

/* Flow arcs on the flat map: a gentle draw-in + travelling dash so the
   direction of movement reads at a glance. */
.bs2-flatmap-svg .flat-arc {
  stroke-dasharray: 6 5;
  animation: bs2-arc-flow 2.4s linear infinite;
}
@keyframes bs2-arc-flow {
  to { stroke-dashoffset: -22; }
}

/* A small hint chip so users know the flat map can be moved and zoomed. */
.bs2-flatmap::after {
  content: "Drag to move \00B7 scroll to zoom";
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
}

/* Legend: tidy pill row that wraps neatly and reads as one clear key. */
.bs2-legend {
  gap: 8px 14px;
  padding: 10px 12px;
  background: var(--fill-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bs2-legend .bs2-chip {
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .bs2-flatmap-svg .flat-arc { animation: none; }
}

/* Compact home hero: short title on the left, a few live figures on the right,
   with the atlas promoted directly beneath so the globe is visible on load. */
.home-hero-compact {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-4);
}
.home-hero-compact .home-hero-copy h1 {
  margin: 6px 0 8px;
}
.home-hero-compact .home-hero-lead {
  margin: 0 0 12px;
  max-width: 54ch;
}
.home-hero-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
/* Compact hero figures, matched to the flow-card language: tight padding, a
   small uppercase label and a single-line figure. */
.home-hero-fig {
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--fill-soft);
  padding: 8px 12px;
}
.home-hero-fig-primary {
  grid-column: 1 / -1;
  background: var(--blue-fill);
  border-color: var(--blue-line);
}
.home-hero-fig .home-hero-fig-l {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.home-hero-fig strong {
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong);
}
.home-hero-fig-primary strong {
  font-size: clamp(20px, 3.2vw, 28px);
  color: var(--navy);
}

/* The promoted atlas gets a touch more breathing room above the fold. */
.atlas-hero {
  margin-top: var(--sp-3);
}

@media (max-width: 820px) {
  .home-hero-compact {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12. COUNTRY PROFILE: AT-A-GLANCE SUMMARY STRIP (added)
   A systematic, scannable row of the country's key figures right under the
   masthead, so the whole picture reads before the detailed sections below.
   -------------------------------------------------------------------------- */
/* Country profile: primary call-to-action row (flows + impact). Uses the
   native .btn / .btn-secondary components; this only handles layout. */
/* Compact button modifier - reused by the hero CTA row. */
.btn.btn-sm {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
/* Hero CTA row: sits inside the country hero, left-aligned with the rest of
   the header content, on one line. */
.country-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.country-cta .btn {
  white-space: nowrap;
}

/* Migration impact page: "what this could fund" cards + action row.
   White cards, neutral hairline border, blue left accent - no extra colours. */
.impact-fund-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--sp-3);
}
.impact-fund {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  padding-left: calc(var(--sp-4) + 6px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.impact-fund::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: var(--r-pill);
  background: var(--blue);
}
.impact-fund__count {
  display: block;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
}
.impact-fund__label {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--ink);
}
.impact-fund__note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-60);
}
.impact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-6);
}

.bs2-glance {
  margin: var(--sp-4) 0 var(--sp-2);
}
.bs2-glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--sp-3);
}
.bs2-glance-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: #ffffff;
  border-top: 3px solid var(--blue);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bs2-glance-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.bs2-glance-tile.is-empty {
  border-top-color: var(--line-3);
  background: var(--fill-soft);
}
.bs2-glance-k {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.bs2-glance-v {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.bs2-glance-tile.is-empty .bs2-glance-v {
  color: var(--ink-50);
  font-weight: 700;
}
.bs2-glance-n {
  font-size: 12px;
  color: var(--ink-60);
}

/* Make the profile read as an organised set: a little more separation between
   the numbered sections and their headings. */
.country-section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 4;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Atlas controls + movement flow cards - one-row PC / compact mobile. */

/* ================= Atlas filter controls ================= */
/* Mobile: a single tight wrapping row of compact segmented groups.
   Desktop: one horizontal row, groups sitting inline side by side. */
/* Mobile-first: the filter panel is a compact 2-column grid so the four
   segmented controls + year pack into ~2-3 short rows above the globe instead
   of five full-width lines. Direction (4 options) spans the full width; the
   rest share rows two-up. Desktop (>=721px) overrides this to a single row. */
.atlas-filter-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 8px 10px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.atlas-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
/* Full-width fields on mobile: direction has 4 options and the totals-metric
   row (when shown) also spans. People and Year deliberately SHARE one row
   (People takes the flexible left column, Year the narrower right column) so
   the People segment never sits alone and wrap onto several lines. */
.atlas-field--direction,
.atlas-field--metric { grid-column: 1 / -1; }
/* People + Year share one row: People takes the whole flexible left column so
   its three pills have room and never wrap; Year is a compact fixed column on
   the right. This needs the panel to become a 2-track [flex | auto] grid for
   this row, which the rule just below sets up. */
.atlas-filter-panel { grid-template-columns: minmax(0, 1fr) auto; }
.atlas-field--people { grid-column: 1 / 2; min-width: 0; }
.atlas-field--year { grid-column: 2 / 3; min-width: 0; justify-self: end; }
.atlas-field--year .atlas-select { width: auto; min-width: 92px; }
.atlas-field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
}
/* Segmented control: pills sitting in a soft track. Compact by default. */
.atlas-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  background: var(--fill-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.atlas-segment button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 3px 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.atlas-segment button:hover { background: var(--blue-fill); }
.atlas-segment button.active {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Hardening: the atlas segments also carry the legacy .heatmap-buttons /
   .kind-buttons class names (the globe JS selects on them), so older rules
   written for the .bs2-segment markup could try to turn them into a borderless
   grid and make the buttons look broken above the globe. Re-assert the pill
   track + flex layout here, at higher specificity, so the atlas controls always
   render as a clean segmented control on every screen size. */
.atlas-filter-panel .atlas-segment.heatmap-buttons,
.atlas-filter-panel .atlas-segment.kind-buttons,
.atlas-filter-panel .atlas-segment.metric-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: var(--fill-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
}
.atlas-filter-panel .atlas-segment button {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.atlas-filter-panel .atlas-segment button.active {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Year picker: a real <select> (works + accessible on every device) dressed to
   look like the pill segment buttons. We reset the native OS chrome and draw a
   custom chevron so it no longer renders as an ugly default dropdown on mobile. */
.atlas-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 7px 40px 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.atlas-select:hover { border-color: var(--blue); }
.atlas-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.atlas-metric-panel[hidden],
.atlas-metric-panel[aria-hidden="true"] { display: none !important; }

/* Mobile compaction: tighter labels, shorter year picker and segment buttons
   that share their row evenly so the whole panel is only 2-3 short rows above
   the globe. Overridden back to roomier sizes on desktop (>=721px). */
@media (max-width: 720px) {
  .atlas-field__label { font-size: 9px; letter-spacing: .05em; }
  .atlas-segment { gap: 2px; padding: 2px; }
  .atlas-segment button { flex: 1 1 0; padding: 5px 6px; font-size: 12px; text-align: center; }
  .atlas-select { min-height: 38px; padding: 6px 34px 6px 12px; font-size: 13px; }

  /* People + Year share one row. The People segment must stay a single
     no-wrap row of 3 pills: force nowrap, let the pills shrink, and keep each
     label on one line (ellipsis if it truly cannot fit) so nothing breaks onto
     a second line. Align the Year select to the same height so the row is neat. */
  .atlas-field--people .atlas-segment {
    flex-wrap: nowrap;
  }
  .atlas-field--people .atlas-segment button {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 4px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .atlas-field--year .atlas-select { min-height: 34px; }
}

/* ================= Globe info sheet + control stacking ================= */
.bs2-globe-stage { position: relative; overflow: hidden; isolation: isolate; }
#globe > *:not(.globe-info):not(.globe-msg) { z-index: 1; }
.globe-controls { z-index: 3; }
.globe-info { z-index: 20; overscroll-behavior: contain; }
#globe.is-info-open .flatmap-tip { display: none !important; }
.bs2-globe-stage.has-info-open .globe-controls,
#globe.is-info-open .globe-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ================= Movement flow cards (new design) ================= */
.corridor-intro {
  margin: 0 0 14px;
  color: var(--ink-60);
  font-size: 13px;
  line-height: 1.5;
}
/* Inline "dot + words" legend used inside the intro sentence. The dot no
   longer sits in the text flow on its own (which pushed the baseline around);
   it is aligned to the words next to it and the pair never breaks across a
   line. */
.hub-legend {
  white-space: nowrap;
  font-weight: 700;
  color: var(--blue);
}
.hub-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  vertical-align: 0.06em;
  border-radius: var(--r-pill);
  background: var(--blue);
}

/* Mobile: single-column dense stack. Desktop: auto-fit multi-column row. */
.atlas-corridors-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
/* Mobile-first flow card: ONE tight row -> [rank]  origin -> destination
   [value]. Height is driven by a single line of text, so cards are about half
   as tall as the old stacked layout. The route truncates with an ellipsis
   instead of wrapping, keeping every card the same compact height. */
.flow-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.flow-card:hover { border-color: var(--blue-line); box-shadow: var(--shadow-sm); }
.flow-card[hidden] { display: none !important; }
.flow-card__rank {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--blue-fill);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Origin -> destination on a single line; names ellipsize, never wrap. */
.flow-card__route {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.flow-card__place {
  min-width: 0;
  flex: 1 1 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-card__to { text-align: right; }
.flow-card__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--blue);
}
.flow-card__value {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Transit-hub marker: a small blue dot appended inline to a country name. */
.hub-badge {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  vertical-align: middle;
  border-radius: var(--r-pill);
  background: var(--blue);
}
.corridor-toggle { min-height: 44px; }

/* ================= Desktop: everything on one row ================= */
@media (min-width: 721px) {
  .atlas-filter-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 16px;
  }
  .atlas-field { flex: 1 1 auto; }
  /* Reset the mobile full-width spans so everything sits on one row again. */
  .atlas-field--direction,
  .atlas-field--metric { grid-column: auto; }
  .atlas-field--year { flex: 0 0 auto; grid-column: auto; min-width: 120px; }
  .atlas-segment { flex-wrap: nowrap; }
  .atlas-segment button { padding: 3px 9px; }
  /* Flow cards flow across the row, wrapping to as many columns as fit. */
  .atlas-corridors-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-2);
  }
}

/* ================= Very narrow phones: stay compact ================= */
@media (max-width: 400px) {
  .atlas-segment button { padding: 3px 8px; font-size: 12px; min-height: 0; }
  .flow-card { gap: 8px; padding: 7px 10px; }
  .flow-card__place { font-size: 12px; }
  .flow-card__value { font-size: 14px; }
}

/* ================= Migration flows pages ================= */
.mig-page { display: block; }
.mig-breadcrumb { margin: 0 0 10px; font-size: 13px; }
.mig-breadcrumb a { color: var(--blue); text-decoration: none; font-weight: 600; }
.mig-breadcrumb a:hover { text-decoration: underline; }

/* Filters row */
.mig-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 20px;
}
.mig-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mig-field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.mig-controls select {
  min-height: 44px;
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.mig-profile-link {
  margin-left: auto;
  align-self: center;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mig-profile-link:hover { text-decoration: underline; }

/* Two-column layout: stacked on mobile, side by side on desktop. */
.mig-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.mig-col {
  min-width: 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.mig-col__head { margin: 0 0 14px; }
.mig-col__head h2 { margin: 0; font-size: 18px; }
.mig-col__head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-60); }
.mig-col__head--gain h2 { color: #15803d; }
.mig-col__head--loss h2 { color: #b91c1c; }

/* Overview rank list */
.mig-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mig-rowcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.mig-rowcard:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.mig-rowcard:active { transform: translateY(1px); }
.mig-rowcard__rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--fill-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-60);
}
.mig-rowcard__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mig-rowcard__name { font-weight: 700; overflow-wrap: anywhere; }
.mig-rowcard__sub { font-size: 12px; color: var(--ink-60); }
.mig-rowcard__net { font-size: 15px; font-weight: 800; white-space: nowrap; }
.mig-rowcard__net--pos { color: #15803d; }
.mig-rowcard__net--neg { color: #b91c1c; }
.mig-rowcard__go { color: var(--ink-60); font-size: 20px; line-height: 1; }
.mig-rowcard--gain .mig-rowcard__rank { background: rgba(21, 128, 61, 0.10); color: #15803d; }
.mig-rowcard--loss .mig-rowcard__rank { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }

/* Detail totals */
.mig-detail__totals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 18px;
}
.mig-total {
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
}
.mig-total__l { display: block; font-size: 12px; color: var(--ink-60); }
.mig-total strong { font-size: 22px; font-weight: 800; }
.mig-total--out { border-left: 4px solid var(--blue); }
.mig-total--in { border-left: 4px solid #15803d; }

/* Detail flow list with mini bars */
.mig-flowlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mig-flow { min-width: 0; }
.mig-flow__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  padding: 2px 0;
}
.mig-flow__link:hover .mig-flow__name { color: var(--blue); }
.mig-flow__rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--fill-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-60);
}
.mig-flow__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.mig-flow__value { font-weight: 800; white-space: nowrap; }
.mig-flow__bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--fill-soft);
  overflow: hidden;
}
.mig-flow__bar-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.mig-flow__bar-fill--out { background: var(--blue); }
.mig-flow__bar-fill--in { background: #15803d; }

/* ===== Insights: mini map + timeline ===== */
.mig-insights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 22px;
}
.mig-map-card,
.mig-trend-card {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-s, 0 1px 2px rgba(10, 37, 64, 0.06));
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mig-card__head { margin: 0 0 12px; }
.mig-card__title { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.mig-card__note { margin: 6px 0 0; font-size: 13px; color: var(--ink-60); }
.mig-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 240px;
  height: 100%;
  border-radius: var(--r-sm, 8px);
  overflow: hidden;
  background: #eaf1fb;
  touch-action: none;
  z-index: 0;
}
.mig-flatmap-svg { width: 100%; height: 100%; display: block; }
/* Country polygons: soft neutral land on a light blue sea. */
.mig-flatmap-svg .mig-country {
  fill: #cfd9e6;
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: 0.4;
}
/* Focus country marker. */
.mig-flatmap-svg .mig-focus-dot {
  fill: #0a2540;
  stroke: #ffffff;
  stroke-width: 1;
}
/* Flow arrows: colour is set inline (red = leaving, green = arriving); keep
   joins smooth and let pointer events pass through to the tooltip <title>. */
.mig-flatmap-svg .mig-arc { stroke-linejoin: round; }
/* Country name labels: green = origins (from), red = destinations (to). A white
   halo (paint-order: stroke) keeps them legible over land, sea and arcs. */
.mig-flatmap-svg .mig-label {
  font-family: inherit;
  font-weight: 700;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2.4px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  dominant-baseline: alphabetic;
}
.mig-flatmap-svg .mig-label--out { fill: #DC2626; }   /* going to */
.mig-flatmap-svg .mig-label--in { fill: #15803d; }    /* coming from */
.mig-flatmap-svg .mig-label--focus { fill: #0a2540; }
.mig-flatmap-svg .mig-label-dot { vector-effect: non-scaling-stroke; }
.mig-flatmap-svg .mig-label-dot--out { fill: #DC2626; }
.mig-flatmap-svg .mig-label-dot--in { fill: #15803d; }
.mig-flatmap-svg .mig-label-dot--focus { fill: #0a2540; stroke: #ffffff; stroke-width: 1; }
.mig-legend { font-weight: 700; }
.mig-legend--out { color: #DC2626; }
.mig-legend--in { color: #15803d; }

/* Map + on-map zoom controls. The wrap is the positioning context so the
   buttons float over the top-right corner of the map. */
.mig-map-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 240px;
}
.mig-map-wrap .mig-map { flex: 1 1 auto; height: auto; }
.mig-map-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.mig-map-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-s, 0 1px 3px rgba(10, 37, 64, 0.18));
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.mig-map-btn:hover { background: var(--fill-soft); border-color: var(--blue); color: var(--blue); }
.mig-map-btn:active { transform: translateY(1px); }
.mig-map-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ===== Crawlable filter segments (real <a> links) ===== */
/* People buttons and the Year control sit on the SAME line: align each
   mig-field to the bottom so the label+control rows line up, and let fields
   share the row and wrap only when there is no space. */
.mig-filterbar { flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.mig-filterbar .mig-field { justify-content: flex-end; }
.mig-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.mig-seg__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mig-seg__link:hover { border-color: var(--blue); color: var(--blue); }
.mig-seg__link.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
}
.mig-seg--years { max-width: 100%; }

/* Year as a compact dropdown styled like the segment buttons. A real <select>
   (reliable + native picker on mobile) with the OS chrome reset and a custom
   chevron, sized/coloured to match .mig-seg__link so People and Year look like
   one consistent control set. */
.mig-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 32px 4px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mig-select:hover { border-color: var(--blue); color: var(--blue); }
.mig-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }

/* ===== Country search (crawlable list + instant filter) ===== */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.mig-search {
  position: relative;
  margin: 6px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
}
.mig-search__title { margin: 0; font-size: 16px; }
.mig-search__hint { margin: 3px 0 10px; font-size: 12px; color: var(--ink-60); }
.mig-search__input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.mig-search__input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
/* Options are hidden until the user opens the search (focus / typing). The
   full list stays in the DOM so it remains crawlable for search engines. */
.mig-search__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.mig-search.is-open .mig-search__list { display: grid; }
.mig-search__empty { display: none; }
.mig-search.is-open .mig-search__empty[hidden] { display: none; }
.mig-search.is-open .mig-search__empty { display: block; }
.mig-search__item a {
  display: block;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 8px);
  background: var(--fill-soft);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mig-search__item a:hover { border-color: var(--blue); color: var(--blue); }
.mig-search__empty { margin: 12px 0 0; font-size: 14px; color: var(--ink-60); }

/* ===== Social share bar (reusable) ===== */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 26px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.share__label { font-size: 13px; font-weight: 700; color: var(--ink-60); text-transform: uppercase; letter-spacing: 0.04em; }
.share__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.share__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.share__btn:hover { border-color: var(--blue); color: var(--blue); background: var(--fill-soft); }
.share__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.share__btn--copy.is-copied { border-color: #15803d; color: #15803d; }
.mig-trend-chart {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 260px;
  height: 260px;
}
.mig-trend-chart canvas { max-width: 100%; }

@media (min-width: 721px) {
  .mig-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .mig-detail__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mig-insights { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .mig-map { min-height: 300px; }
}

/* Compact "see more" strip: a single pill-like row, centered, that keeps the
   label + its one arrow (from .text-link::after) on one line and shrinks the
   text on narrow screens instead of stacking or showing a second arrow. */
.atlas-more-link { margin: 14px 0 0; }
.atlas-more-link .text-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-weight: 700;
  font-size: clamp(12px, 2.2vw, 14px);
  line-height: 1.25;
  text-align: center;
  background: var(--blue-fill);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
}
.atlas-more-link .text-link:hover { background: var(--blue-fill-2); text-decoration: none; }
.atlas-more-link .text-link::after { flex: 0 0 auto; }
.atlas-more-link__text { min-width: 0; }

/* Sync ALL live batch progress */
.syncall-live { margin-top: 12px; }
.syncall-progress { height: 6px; border-radius: var(--r-pill, 999px); background: var(--line, #e2e8f0); overflow: hidden; }
.syncall-progress-bar { height: 100%; width: 0; background: var(--blue, #2563EB); transition: width .3s ease; }
.syncall-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.syncall-steps-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: var(--r-sm, 8px); font-size: 13px; }
.syncall-pill { text-transform: uppercase; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill, 999px); }
.syncall-pill--success { background: #dcfce7; color: #059669; }
.syncall-pill--error { background: #fee2e2; color: #DC2626; }
.syncall-pill--running { background: #e2e8f0; color: #475569; }
.syncall-err { color: #DC2626; width: 100%; font-size: 12px; }

/* =====================================================================
   Conflicts: two-flag cards, home carousel and the comparison page.
   Each conflict is painted in both sides' flag colours so it instantly
   reads as "two countries, one conflict".
   ===================================================================== */

/* --- Shared two-flag card (landing grid + home carousel) --- */
.conflict-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 8px 0 40px; }
.conflict-card { display: flex; flex-direction: column; border-radius: var(--radius, 16px); overflow: hidden; background: var(--card, #fff); box-shadow: 0 4px 14px rgba(15,23,42,.08); border: 1px solid var(--border, #E6EAF0); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.conflict-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px -14px rgba(15,23,42,.3); }
.conflict-card-flags { position: relative; height: 92px; overflow: hidden; }
.conflict-card-flag { position: absolute; top: 0; height: 100%; width: 62%; }
.conflict-card-flag--a { left: 0; clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%); }
.conflict-card-flag--b { right: 0; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
.conflict-card-vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 15px; color: #fff; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.conflict-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.conflict-card-sides { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--muted, #64748B); flex-wrap: wrap; }
.conflict-card-side { display: inline-flex; align-items: center; gap: 5px; }
.conflict-card-emoji { font-size: 16px; }
.conflict-card-dash { opacity: .6; font-weight: 600; }
.conflict-card-title { margin: 0; font-size: 19px; line-height: 1.25; }
.conflict-card-summary { margin: 0; font-size: 14px; color: var(--muted, #64748B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conflict-card-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.conflict-card-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.conflict-card-badge--ongoing { background: #fee2e2; color: #DC2626; }
.conflict-card-badge--ceasefire { background: #fef9c3; color: #a16207; }
.conflict-card-badge--ended { background: #e2e8f0; color: #475569; }
.conflict-card-since { font-size: 12px; color: var(--muted, #64748B); font-weight: 600; }
.conflict-card-cta { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--link, #2563EB); }

/* --- Home top strip: a thin, compact carousel of flag-split pills --- */
/* Full-bleed: break out of the centered, padded .container so the strip spans
   the whole viewport width edge-to-edge, regardless of the container size. */
.conflict-strip { display: flex; align-items: center; gap: 6px; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 16px; padding: 7px max(16px, calc(50vw - 620px)); border: 0; border-bottom: 1px solid var(--border, #E6EAF0); border-radius: 0; background: var(--card, #fff); box-shadow: 0 1px 4px rgba(15,23,42,.05); box-sizing: border-box; position: relative; z-index: 1; }
.conflict-strip-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; flex: 1; padding: 2px; }
.conflict-strip-track::-webkit-scrollbar { display: none; }
.conflict-strip-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #64748B); padding: 0 6px 0 4px; }
.conflict-strip-nav { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border, #E6EAF0); background: var(--card, #fff); color: var(--a1, #0A2540); font-size: 16px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.conflict-strip-nav:hover { background: var(--a1, #0A2540); color: #fff; }
.conflict-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 999px; background: var(--bg, #F6F8FC); border: 1px solid var(--border-soft, #EEF2F7); text-decoration: none; color: var(--text, #0F172A); scroll-snap-align: start; transition: transform .15s ease, box-shadow .15s ease; }
.conflict-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,23,42,.12); }
.conflict-pill-flags { position: relative; width: 26px; height: 18px; border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.conflict-pill-flag { position: absolute; top: 0; height: 100%; width: 60%; }
.conflict-pill-flag:first-child { left: 0; clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); }
.conflict-pill-flag:last-child { right: 0; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.conflict-pill-text { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.conflict-pill-vs { color: var(--muted, #64748B); font-weight: 600; font-size: 11px; }
.conflict-pill--all { font-size: 12px; font-weight: 800; color: var(--link, #2563EB); background: transparent; border-color: transparent; }

/* --- Comparison page: modern hero --- */
.cx-hero { position: relative; overflow: hidden; border-radius: var(--radius, 16px); margin: 18px 0; background: radial-gradient(120% 140% at 15% 0%, #15335c 0%, #0a1b30 55%, #060f1d 100%); color: #fff; isolation: isolate; }
.cx-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 20%, rgba(124,58,237,.22), transparent 70%); pointer-events: none; z-index: 0; }
.cx-hero-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex; z-index: 2; }
.cx-hero-ribbon > span { flex: 1; }
.cx-hero-inner { position: relative; z-index: 1; padding: clamp(22px, 4vw, 40px) clamp(18px, 4vw, 40px); }
.cx-hero-inner h1 { color: #fff; margin: 12px 0 16px; font-size: clamp(26px, 5vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.cx-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(3px); }
.cx-chip--soft { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.cx-chip--status { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.cx-chip--ongoing { background: #DC2626; }
.cx-chip--ceasefire { background: #d97706; }
.cx-chip--ended { background: rgba(255,255,255,.18); }
.cx-hero-matchup { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cx-side { display: inline-flex; align-items: center; gap: 10px; }
.cx-side--b { flex-direction: row-reverse; }
.cx-side-flag { width: 40px; height: 28px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cx-side-flag span { font-size: 18px; line-height: 1; }
.cx-side-name { font-weight: 800; font-size: clamp(16px, 2.4vw, 22px); }
.cx-vs { font-weight: 900; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cx-hero-lead { margin: 16px 0 0; max-width: 820px; font-size: clamp(14px, 1.6vw, 16px); color: rgba(255,255,255,.9); line-height: 1.6; }
.cx-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.cx-hero-stat { display: flex; flex-direction: column; }
.cx-hero-stat strong { font-size: clamp(18px, 3vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-hero-stat span { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px; }

.conflict-scope-note { background: #fef9c3; color: #854d0e; border-radius: var(--radius-sm, 10px); padding: 10px 14px; font-size: 13px; margin: 0 0 18px; }

/* --- Comparison page: section shells --- */
.cx-section-title { font-size: clamp(19px, 2.6vw, 24px); margin: 0 0 4px; }
.cx-section-intro { margin: 0 0 18px; color: var(--muted, #64748B); font-size: 14px; max-width: 760px; }
.cx-section-note { margin: 14px 0 0; font-size: 12px; color: var(--muted-2, #94A3B8); }

/* --- Comparison: labelled mirrored bars (mobile-first, stacks cleanly) --- */
.cx-compare { margin: 26px 0; }
.cx-compare-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.cx-legend { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; }
.cx-legend-dot { width: 12px; height: 12px; border-radius: 4px; }
.cx-rows { display: flex; flex-direction: column; gap: 14px; }
.cx-row { background: var(--card, #fff); border: 1px solid var(--border, #E6EAF0); border-radius: var(--radius-sm, 12px); padding: 12px 14px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06)); }
.cx-row-label { font-size: 13px; font-weight: 800; color: var(--ink, #0F172A); margin-bottom: 10px; }
.cx-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.cx-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cx-cell-val { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.cx-cell.is-lead .cx-cell-val { color: var(--ink-strong, #111); }
.cx-cell:not(.is-lead) .cx-cell-val { color: var(--muted, #64748B); }
.cx-track { position: relative; height: 10px; width: 100%; background: var(--border-soft, #EEF2F7); border-radius: 999px; overflow: hidden; }
.cx-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.16,.84,.44,1); }
.cx-compare-links { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* --- Population & migration cards --- */
.cx-pop { margin: 30px 0; }
.cx-pop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cx-pop-card { background: var(--card, #fff); border: 1px solid var(--border, #E6EAF0); border-radius: var(--radius, 16px); padding: 18px 20px; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.cx-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cx-pop-flagdot { width: 34px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: 0 0 auto; }
.cx-pop-flagdot span { font-size: 15px; }
.cx-pop-name { font-weight: 800; font-size: 16px; }
.cx-pop-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx-pop-now { font-size: clamp(24px, 4vw, 32px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cx-pop-now-l { font-size: 12px; color: var(--muted, #64748B); }
.cx-pop-change { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
.cx-pop-change-l { font-weight: 500; color: var(--muted, #64748B); font-size: 12px; }
.cx-pop-change--up { background: #dcfce7; color: #15803d; }
.cx-pop-change--down { background: #fee2e2; color: #DC2626; }
.cx-pop-change--flat { background: var(--border-soft, #EEF2F7); color: var(--muted, #64748B); }
.cx-pop-arrow { font-size: 10px; }
.cx-pop-mig { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border, #E6EAF0); }
.cx-pop-mig-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-pop-mig-val--in { color: #15803d; }
.cx-pop-mig-val--out { color: #DC2626; }
.cx-pop-mig-l { display: block; font-size: 12px; color: var(--muted, #64748B); margin-top: 2px; }
.cx-pop-mig-share { display: block; margin-top: 8px; font-size: 13px; color: var(--ink, #0F172A); }
.cx-pop-displaced { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border, #E6EAF0); font-size: 13px; color: var(--muted, #64748B); }
.cx-pop-missing { margin: 8px 0 0; font-size: 12px; color: var(--muted-2, #94A3B8); }

/* On the narrowest phones, stack the two comparison cells so bars get full width. */
@media (max-width: 460px) {
  .cx-row-grid { grid-template-columns: 1fr; gap: 12px; }
  .cx-cell { border-left: 3px solid var(--border, #E6EAF0); padding-left: 10px; }
  .cx-cell--a { border-left-color: var(--a-main, #0A2540); }
  .cx-cell--b { border-left-color: var(--b-main, #7C3AED); }
}

.conflict-about { margin: 28px 0; }
.conflict-about p { color: var(--text, #0F172A); line-height: 1.7; }
.conflict-news { margin: 28px 0; }
.conflict-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.conflict-news-card { display: flex; flex-direction: column; border-radius: var(--radius-sm, 12px); overflow: hidden; background: var(--card, #fff); border: 1px solid var(--border, #E6EAF0); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.conflict-news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(15,23,42,.26); }
.conflict-news-img { display: block; height: 120px; background-size: cover; background-position: center; }
.conflict-news-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.conflict-news-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--link, #2563EB); }
.conflict-news-excerpt { font-size: 13px; color: var(--muted, #64748B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =====================================================================
   Conflicts - design refresh (serious, polished, mobile-first).
   This block intentionally comes AFTER the base rules above and overrides
   them so the redesign is additive and easy to roll back by deleting it.
   ASCII only. Works down to 360px with no horizontal overflow.
   ===================================================================== */

/* ---- Landing: intro + grid ---- */
.conflicts-page .section-intro h1 { font-size: clamp(26px, 4.4vw, 40px); letter-spacing: -.02em; }
.conflict-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(14px, 2vw, 22px); margin: 14px 0 48px; }

/* Premium two-flag card */
.conflict-card { border-radius: 18px; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px -18px rgba(15,23,42,.35); transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease; }
.conflict-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 30px 60px -24px rgba(15,23,42,.42); border-color: rgba(15,23,42,.14); }
.conflict-card:focus-visible { outline: 3px solid var(--link, #2563EB); outline-offset: 3px; }

/* Taller, richer flag banner with a soft dark scrim and a glass VS medallion */
.conflict-card-flags { height: 128px; }
.conflict-card-flag { width: 60%; }
.conflict-card-flag--a { clip-path: polygon(0 0, 100% 0, 56% 100%, 0 100%); }
.conflict-card-flag--b { clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%); }
.conflict-card-flags::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,15,29,0) 40%, rgba(6,15,29,.28) 100%); pointer-events: none; }
.conflict-card-vs { font-size: 13px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; letter-spacing: .1em; background: rgba(8,15,30,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 18px -6px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

.conflict-card-body { padding: 18px 20px 20px; gap: 10px; }
.conflict-card-sides { font-size: 12.5px; letter-spacing: .01em; }
.conflict-card-emoji { font-size: 17px; }
.conflict-card-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.conflict-card-summary { font-size: 13.5px; line-height: 1.5; }
.conflict-card-meta { gap: 8px; padding-top: 12px; border-top: 1px solid rgba(15,23,42,.07); }
.conflict-card-badge { padding: 4px 10px; }
/* Keep status badges on-palette (quiet, not loud reds/yellows) */
.conflict-card-badge--ongoing { background: rgba(220,38,38,.1); color: #DC2626; }
.conflict-card-badge--ceasefire { background: rgba(217,119,6,.12); color: #b45309; }
.conflict-card-badge--ended { background: rgba(71,85,105,.12); color: #475569; }
.conflict-card-cta { color: var(--link, #2563EB); }
.conflict-card:hover .conflict-card-cta { text-decoration: underline; }

/* ---- Detail: hero ---- */
.cx-hero { border-radius: 22px; margin: 20px 0 24px; box-shadow: 0 30px 60px -30px rgba(6,15,29,.55); }
.cx-hero-ribbon { height: 6px; }
.cx-hero-inner { padding: clamp(24px, 4.5vw, 46px) clamp(20px, 4.5vw, 46px); }
.cx-hero-inner h1 { font-size: clamp(28px, 5.2vw, 48px); margin: 14px 0 18px; }
.cx-chip { border: 1px solid rgba(255,255,255,.14); }
.cx-hero-matchup { gap: 14px 20px; }
.cx-side-flag { width: 46px; height: 32px; border-radius: 7px; }
.cx-side-name { font-size: clamp(17px, 2.6vw, 24px); }

/* ---- Section headings ---- */
.cx-section-title { font-size: clamp(20px, 2.8vw, 26px); font-weight: 800; letter-spacing: -.015em; }

/* Scope note: calmer, on-brand (was a loud yellow) */
.conflict-scope-note { background: rgba(37,99,235,.07); color: var(--ink, #0F172A); border: 1px solid rgba(37,99,235,.16); border-radius: 12px; padding: 11px 15px; font-size: 13px; }

/* ---- Comparison rows ---- */
.cx-row { border-radius: 14px; border-color: rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: box-shadow .25s ease, transform .25s ease; }
.cx-row:hover { box-shadow: 0 10px 26px -16px rgba(15,23,42,.3); }
.cx-track { height: 12px; }
.cx-fill { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---- Population + migration cards ---- */
.cx-pop-grid { gap: clamp(14px, 2vw, 20px); }
.cx-pop-card { border-radius: 18px; border-color: rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -22px rgba(15,23,42,.4); position: relative; overflow: hidden; }
.cx-pop-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--a-main, #0A2540); opacity: .9; }
.cx-pop-grid > .cx-pop-card:nth-child(2)::before { background: var(--b-main, #7C3AED); }
.cx-pop-card > * { position: relative; }
.cx-pop-head { gap: 11px; margin-bottom: 14px; }
.cx-pop-flagdot { width: 38px; height: 27px; border-radius: 6px; }
.cx-pop-name { font-size: 17px; letter-spacing: -.01em; }
.cx-pop-now { font-size: clamp(26px, 4.4vw, 34px); }
.cx-pop-change { padding: 5px 11px; }
.cx-pop-change--up { background: rgba(21,128,61,.1); color: #15803d; }
.cx-pop-change--down { background: rgba(220,38,38,.1); color: #DC2626; }
.cx-pop-mig-val--in { color: #15803d; }
.cx-pop-mig-val--out { color: #DC2626; }
.cx-pop-displaced { font-size: 13px; color: var(--ink, #0F172A); }
.cx-pop-displaced strong { font-variant-numeric: tabular-nums; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .conflict-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  .conflict-card-flags { height: 112px; }
  .cx-hero { border-radius: 18px; }
  .cx-pop-grid { grid-template-columns: 1fr; }
  .cx-pop-grid > .cx-pop-card:nth-child(2)::before { background: var(--a-main, #0A2540); }
  .cx-compare-links { flex-direction: column; }
  .cx-compare-links .btn { width: 100%; text-align: center; }
}
@media (max-width: 460px) {
  .cx-hero-matchup { gap: 10px 14px; }
  .cx-side-name { font-size: 16px; }
  .cx-vs { font-size: 11px; }
  .conflict-card-title { font-size: 18px; }
}