/* Application shell + component styles.
 *
 * Reads tokens.css's custom properties exclusively -- no raw hex, font
 * size or spacing value should appear below that isn't already a token.
 *
 * Colour/contrast notes (see task-7-report.md for the full measured
 * table):
 *   - --ink on --bg / --bg-elev: ~16:1 / ~14.5:1 -- body text default.
 *   - --ink-muted on --bg / --bg-elev: ~7.3:1 / ~6.6:1 -- passes AA
 *     (4.5:1) for normal text; used for all label/meta/secondary copy.
 *   - --ink-faint on --bg / --bg-elev: ~3.35:1 / ~3.04:1 -- BELOW AA for
 *     normal text. Reserved for large (>=24px / >=19px bold) or purely
 *     decorative use (hairlines, disabled glyphs) -- never for body-sized
 *     or label-sized prose. "unverified" and every small muted string in
 *     this file therefore uses --ink-muted, not --ink-faint.
 *   - Region/person hues on --bg: 6.8:1 (Americas/Europe, the two
 *     lowest) up to 10.2:1 (Africa/Asia) -- safe for decorative fills;
 *     per the dataviz skill, prose is never set IN a hue, only beside a
 *     dot/swatch carrying identity, so this headroom is a bonus, not a
 *     requirement.
 */

/* ---------- Fonts (self-hosted, no CDN) ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Fraunces-Variable.woff2") format("woff2-variations"),
       url("../fonts/Fraunces-Variable.woff2") format("woff2");
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font-family: inherit; font-size: inherit; color: inherit; }

/* Numerals only -- see tokens.css / _macros.html for the rule. Never
 * apply .display-num to prose. */
.display-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.05;
}

:focus-visible {
  outline: 2px solid var(--oceania);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -48px;
  background: var(--bg-elev);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-firm);
  z-index: 100;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout shell ---------- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.brand {
  /* Prose (a name), so it stays in --font-ui -- --font-display is
     reserved for numerals only, per the design brief. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.brand-mark {
  color: var(--oceania);
}

.nav-auth {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.8125rem;
}
.nav-auth .nav-link {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-firm);
  text-decoration: none;
  color: var(--ink-muted);
}
.nav-auth .nav-link:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Horizontal scroller nav -- required to work at 400px width without
 * ever overflowing the page horizontally. */
.nav-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0 var(--sp-5) var(--sp-3);
}
.nav-scroll::-webkit-scrollbar { height: 4px; }
.nav-scroll::-webkit-scrollbar-thumb { background: var(--hairline-firm); border-radius: 2px; }

.nav-link {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--bg-elev); }
/* Polish pass: the active tab (top-level nav AND the per-section
   subnav, which shares this same class) used to be told apart only by
   a slightly lighter grey fill -- flat next to the rest of the shell.
   An underline in --oceania, the hue the brand mark and every
   .text-link already carry as this app's one "brand/interactive"
   accent, reuses that existing meaning rather than adding a new one. */
.nav-link.is-active {
  color: var(--ink);
  background: var(--bg-elev);
  box-shadow: inset 0 -2px 0 var(--oceania);
}
.nav-link.is-disabled { color: var(--ink-faint); pointer-events: none; }

.subnav {
  border-top: 1px solid var(--hairline);
}
.subnav .nav-scroll { padding-top: var(--sp-3); }

.site-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

.site-footer {
  margin-top: var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  border-top: 1px solid var(--hairline);
}
.footer-updated {
  /* --ink-muted, not --ink-faint -- this is body-sized prose (see the
     file-header contrast notes: --ink-faint is BELOW AA at this size).
     Owner feedback round 1: replaced the names + UN/TCC totals footer
     with this single quiet line -- kept minimal on purpose, matching
     the existing footer's understated styling rather than drawing new
     attention to it. */
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ---------- Cards ---------- */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

/* ---------- Labels (shared typographic rule) ---------- */

.label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

/* ---------- Stat tile ---------- */
/* See _macros.html for the "maximum four per tab" rule this enforces. */

.stat-tile {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-5);
  overflow: hidden;
}
.stat-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent, transparent);
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.stat-label {
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.stat-sublabel {
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
}

/* ---------- Progress ring ---------- */

/* Task 11 fix round 1 (Finding 1): the label used to live inside the
 * ring alongside the numeral, sharing an ~84px clear circle at typical
 * sizes -- a wide caption like "TCC CONFIRMED" overran that circle and
 * the arc stroke ran through the text. The label is now a separate
 * block below the ring (see _macros.html's progress_ring for the
 * markup); only .ring-circle is fixed-size and holds the numeral. */
.progress-ring {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.progress-ring .ring-circle {
  position: relative;
  display: grid;
  place-items: center;
}
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .ring-track {
  fill: none;
  stroke: var(--bg-elev-2);
  stroke-width: 10;
}
.progress-ring .ring-value {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}
.progress-ring .ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.progress-ring .ring-value-text {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.progress-ring .ring-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Region bar ---------- */

.region-bar { display: flex; flex-direction: column; gap: var(--sp-1); }
.region-bar-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 0.8125rem;
}
.region-bar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.region-bar-label { color: var(--ink); flex: 1 1 auto; }
.region-bar-count {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.region-bar-pending {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.region-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.region-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* ---------- Person switch (segmented control) ---------- */

.person-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.person-switch-item {
  padding: var(--sp-1) var(--sp-4);
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.person-switch-item:hover { color: var(--ink); }
.person-switch-item.is-active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* ---------- Badge ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
}
.badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--badge-color, var(--ink-faint));
  flex: 0 0 auto;
}

/* ---------- Verified stamp ---------- */

.verified-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.verified-stamp .verified-icon { color: var(--asia); }
.verified-stamp.is-unverified {
  color: var(--ink-muted);
  font-style: italic;
}

/* ---------- Generic content components ---------- */
/* Used by login.html / account.html (and any later plain content page).
 * Headings here are prose, so they stay in --font-ui (inherited), never
 * --font-display -- that face is reserved for numerals only. */

.page-title {
  margin: 0 0 var(--sp-2);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
}
.page-lede {
  margin: 0 0 var(--sp-5);
  color: var(--ink-muted);
}
.narrow-card {
  max-width: 26rem;
  margin: var(--sp-7) auto;
}
.field { margin: 0 0 var(--sp-4); }
.field label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
/* Radios and checkboxes must NOT get the text-input treatment: width:100%
   plus a background and border repaints them as empty boxes and suppresses
   the native checked indicator, so a selected option looks identical to an
   unselected one. */
.field input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  padding: var(--sp-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.field input:focus-visible { outline-offset: 0; }

.btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  background: var(--oceania);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn-secondary {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--hairline-firm);
}

.form-message {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
.form-message.is-error {
  background: rgba(255, 107, 107, 0.12);
  color: var(--americas);
  border: 1px solid rgba(255, 107, 107, 0.3);
}
.form-message.is-success {
  background: rgba(45, 212, 191, 0.12);
  color: var(--asia);
  border: 1px solid rgba(45, 212, 191, 0.3);
}

/* ---------- Drawer (Task 10) ---------- */
/* Slides in from the right over a scrim; becomes a bottom sheet at
 * <=600px (see the responsive block below). Markup lives in
 * app/templates/_drawer.html; content is rendered by drawer.js. */

#drawer-root:empty { display: none; }

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  overflow-y: auto;
  background: var(--bg-elev);
  border-left: 1px solid var(--hairline-firm);
  box-shadow: var(--shadow);
  padding: var(--sp-6) var(--sp-5);
  z-index: 201;
}
.drawer-panel:focus { outline: none; }

.drawer-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-firm);
  background: var(--bg-elev-2);
  color: var(--ink-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.drawer-close:hover { color: var(--ink); }

.drawer-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 var(--sp-7) var(--sp-3) 0;
}
.drawer-flag { font-size: 2rem; line-height: 1; }
.drawer-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
}

.drawer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.drawer-region { color: var(--ink-muted); }

.drawer-admission {
  margin-bottom: var(--sp-5);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.drawer-section { margin-bottom: var(--sp-6); }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-section-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

.drawer-chips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  font-size: 0.875rem;
}
.drawer-chip-mark { font-weight: 700; }
.drawer-chip.is-visited .drawer-chip-mark { color: var(--asia); }
.drawer-chip.is-unvisited .drawer-chip-mark { color: var(--ink-faint); }
.drawer-chip-name { flex: 1 1 auto; color: var(--ink); }
.drawer-chip-year { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.drawer-tcc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.drawer-tcc-item {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
}
.drawer-tcc-name { color: var(--ink); font-size: 0.875rem; font-weight: 500; }
.drawer-tcc-status { color: var(--ink-muted); font-weight: 400; }
.drawer-tcc-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
  font-size: 0.75rem;
}
.drawer-tcc-person { color: var(--ink-muted); }
.drawer-tcc-person.is-visited { color: var(--asia); }
.drawer-tcc-person.is-review { color: var(--africa); }

.drawer-wishlist-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.drawer-wishlist-notes { margin: 0; color: var(--ink-muted); font-size: 0.875rem; }

.drawer-error { color: var(--ink-muted); }

/* ---------- Summary tab (Task 11) ---------- */

.section { margin-top: var(--sp-7); }
.section-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.section-lede {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--ink-muted);
  font-size: 0.875rem;
  max-width: 44rem;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.text-link {
  color: var(--oceania);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.text-link:hover { text-decoration: underline; }

/* Hero */
.hero { margin-top: var(--sp-2); }
.hero-eyebrow { margin: 0 0 var(--sp-2); }
.hero-line {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--ink);
}
.hero-number {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.08em;
}
.hero-note {
  margin: 0 0 var(--sp-6);
  max-width: 42rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.hero-stats { margin-top: var(--sp-5); }

/* Person columns */
.person-grid {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}
.person-column { text-align: center; }
.person-column-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.person-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent, var(--ink-muted));
}
.person-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.person-rings {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.map-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  margin-bottom: var(--sp-4);
}
.person-links {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
}

/* World map component (Task 8's map.js draws into a container carrying
 * these classes -- first styled here since Task 11 is the first page to
 * actually mount it). */
.country-map { position: relative; }
.country-map-country { cursor: pointer; }
.country-map-label {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--shadow);
}

/* Wishlist strip */
.wishlist-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.wishlist-highlight {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
}
.wishlist-highlight p {
  margin: var(--sp-1) 0 0;
  color: var(--ink);
  font-size: 0.875rem;
}

/* Recent / log list */
.recent-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.recent-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.recent-flag { font-size: 1.25rem; line-height: 1; }
.recent-name { flex: 1 1 auto; color: var(--ink); font-size: 0.9375rem; }
.recent-year {
  color: var(--ink-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- UN section (Task 12) ---------- */

.un-person-eyebrow { margin: var(--sp-2) 0 var(--sp-3); }
.un-combined-note { margin: 0 0 var(--sp-4); }

/* Full-bleed map hero -- the person tab's headline element, a larger
 * cousin of the Summary tab's `.map-thumb` (Task 11) rather than a new
 * component: same rounded/bordered container, just given the full
 * width of the tab and a taller aspect ratio so the map itself, not a
 * headline number, is what a visitor sees first. */
.map-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
  margin-bottom: var(--sp-5);
}

/* Task 12 fix round 1, Finding 1: the ring pair's own value element now
 * carries data-stat="un-members"/"un-extended" directly (via
 * progress_ring's `stat_key` param) instead of a second plain-text
 * readout underneath -- so this is the last element in the section
 * before the two stat tiles, and gets the larger of the two gaps
 * (sp-6) to keep the rings from crowding into the tiles below now that
 * nothing sits between them. */
.un-person-rings {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

.un-person-stats {
  max-width: 40rem;
  margin: 0 auto;
}

/* Regions tab: three regionBars columns, side by side on desktop,
 * stacked on mobile. */
.un-regions-grid {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.un-regions-column .person-column-head {
  justify-content: flex-start;
  margin-bottom: var(--sp-4);
}

/* Timeline tab */
.un-timeline-card {
  margin-top: var(--sp-5);
}
.un-timeline-card .person-column-head {
  justify-content: flex-start;
  margin-bottom: var(--sp-4);
}

/* Prominent, PERMANENT callout (never a hover/tooltip) reconciling the
 * chart's dated-only line against the real logged total -- see
 * un_timeline.html's comment for the invariant this states in words. */
.undated-callout {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-left: 3px solid var(--oceania);
  border-radius: var(--radius-sm);
}
.undated-callout p {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.undated-callout-figure {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.undated-callout-text {
  color: var(--ink-muted);
  font-size: 0.875rem;
  flex: 1 1 16rem;
}
.undated-callout-text .text-link { margin-left: var(--sp-1); }

@media (max-width: 860px) {
  .un-regions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .map-hero { aspect-ratio: 4 / 3; }
}

/* ---------- Motion ---------- */
/* All animation lives here, gated behind prefers-reduced-motion. Outside
 * this block every transition/animation property above is intentionally
 * absent so a reduced-motion user gets instant state changes by default. */
@media (prefers-reduced-motion: no-preference) {
  .stat-value { transition: color 0.2s var(--ease); }
  .progress-ring .ring-value {
    transition: stroke-dashoffset 0.7s var(--ease);
  }
  .region-bar-fill {
    transition: width 0.7s var(--ease);
  }
  .site-main > * {
    animation: fade-in 0.18s var(--ease);
  }
  .skip-link { transition: top 0.15s var(--ease); }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes count-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .stat-tile .stat-value { animation: count-up 0.7s var(--ease); }

  .drawer-scrim { animation: drawer-fade 0.18s var(--ease); }
  .drawer-panel { animation: drawer-slide-in 0.22s var(--ease); }
  @keyframes drawer-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes drawer-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

/* ---------- Responsive: must work at 400px width ---------- */

@media (max-width: 480px) {
  .site-header-top { padding: var(--sp-3) var(--sp-4); }
  .nav-scroll { padding: 0 var(--sp-4) var(--sp-2); }
  .site-main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .brand { font-size: 1rem; }
}

/* Drawer becomes a bottom sheet at <=600px, per the Task 10 brief --
 * a different breakpoint from the 480px shell one above on purpose,
 * since the drawer's own panel width (460px) is the constraint that
 * matters here, not the nav. */
@media (max-width: 600px) {
  .drawer-panel {
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--hairline-firm);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .drawer-panel { animation: drawer-slide-up 0.22s var(--ease); }
  @keyframes drawer-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ---------- TCC section (Task 13) ---------- */

.tcc-person-eyebrow { margin: var(--sp-2) 0 var(--sp-3); }
.tcc-combined-note { margin: 0 0 var(--sp-4); }

.tcc-person-ring {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

/* Plain-text restatement of the ring's number -- same rationale as
 * .un-person-figures: carries the data-stat="tcc-confirmed" hook
 * without changing _macros.html's progress_ring signature. */
.tcc-person-figures {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--sp-6);
  text-align: center;
}
.tcc-person-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.tcc-person-figure-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

.tcc-person-stats {
  max-width: 40rem;
  margin: 0 auto;
}

/* The "Needs review" tile doubles as a link to the review queue on the
 * anup/eugenia person tabs -- same .stat-tile shell, made clickable. */
a.tcc-stat-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: none;
}
a.tcc-stat-link:hover { color: var(--ink); }
a.tcc-stat-link:hover .stat-label { color: var(--ink); }

/* Regions tab: three region_bar columns, side by side on desktop,
 * stacked on mobile -- same shape as .un-regions-grid, kept as its own
 * rule rather than shared with it so this section's CSS footprint stays
 * self-contained. */
.tcc-regions-grid {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.tcc-regions-column .person-column-head {
  justify-content: flex-start;
  margin-bottom: var(--sp-4);
}

/* Review queue */

.tcc-review-remaining {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
}
.tcc-review-remaining-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

.tcc-review-empty {
  padding: var(--sp-5);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
}

.tcc-review-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Fix round 1 (minor): the review tab read as the most monochrome of
 * the five -- every other tab carries the active person's colour via a
 * ring/dot/bar, this one didn't. A left accent bar in --accent (set
 * per-group from the page's own person_color, same custom property
 * .stat-accent uses) ties it back to the same person without touching
 * any text colour, per the "identity lives in a dot/accent, never in
 * text colour" rule the rest of the design system follows. */
.review-group {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent, var(--hairline));
  border-radius: var(--radius);
  padding: 0 var(--sp-5);
}
.review-group[open] { padding-bottom: var(--sp-4); }

.review-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
}
.review-group-summary::-webkit-details-marker { display: none; }
.review-group-summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: var(--sp-2);
  color: var(--ink-faint);
  transition: none;
}
.review-group[open] .review-group-summary::before { content: "\25BE"; }
.review-group-name { color: var(--ink); font-weight: 500; flex: 1 1 auto; }

.review-group-body { padding-top: var(--sp-2); }
.review-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.review-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
}
.review-row-body {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
}
.review-row-name { color: var(--ink); font-size: 0.9375rem; }
.review-row-status { color: var(--ink-muted); font-size: 0.75rem; }

.review-row-actions {
  display: flex;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

/* Confirm/Dismiss buttons -- .btn's default accent (--oceania) is
 * reserved for neutral primary actions elsewhere in the app, so these
 * two get their own semantic colours instead: --asia (already used for
 * the drawer's "visited" chip and the verified-stamp checkmark, i.e.
 * this app's existing "affirmative" hue) for Confirm/Confirm all,
 * --americas (already used for .form-message.is-error) for Not
 * visited/Dismiss all. Both stay CSS custom-property references, never
 * literal hex. */
.review-group-btn.is-confirm,
.review-row-btn.is-confirm {
  background: var(--asia);
  color: var(--bg);
}
.review-group-btn.is-dismiss,
.review-row-btn.is-dismiss {
  background: transparent;
  color: var(--americas);
  border-color: rgba(255, 107, 107, 0.4);
}
.review-row-btn { padding: var(--sp-2) var(--sp-3); font-size: 0.8125rem; }

@media (max-width: 860px) {
  .tcc-regions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .review-row { flex-direction: column; align-items: stretch; }
  .review-row-actions { justify-content: flex-end; }
  .review-group-actions { flex-direction: column; }
  .review-group-actions .review-group-btn { width: 100%; }
}

/* ---------- Next Up section (Task 14) ---------- */

.next-list-eyebrow { margin: var(--sp-2) 0 var(--sp-3); }
.next-list-lede { max-width: 46rem; }

.next-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.next-filter-field { margin: 0; min-width: 10rem; }
.next-filter-field select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.8125rem;
}
.next-filters-clear { align-self: center; margin-bottom: var(--sp-2); }

.next-list-count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}
.next-list-count .stat-value { font-size: 1.375rem; }
.next-list-count-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

.next-list-empty {
  padding: var(--sp-5);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
}

.next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* The card is a <button> (free keyboard + click semantics, no extra JS
 * for focus/Enter handling) styled to read as a card, not a button --
 * left-aligned text, no default button chrome. */
.next-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-4);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.next-card:hover { border-color: var(--hairline-firm); background: var(--bg-elev-2); }
.next-card:focus-visible { outline-offset: 2px; }
/* Polish pass: every card was an identical --bg-elev box regardless of
   which of the 5 regions it belonged to, so a grid of them read as flat
   as a spreadsheet. `--accent` (set per-card from REGION_COLORS, same
   custom property `.review-group`'s left bar already uses) puts a
   region-coloured edge on each card, so the grid scans by region at a
   glance -- reusing the region hue that already carries that exact
   meaning on this same card's own badge, never inventing a new one. */
.next-card { border-left: 3px solid var(--accent, var(--hairline)); }

/* Low-confidence cards (French Guiana, Gabon, New Caledonia today) get
 * their own border/background treatment -- reusing --americas, the
 * hue .form-message.is-error already established as this app's
 * "needs a second look" signal -- so the distinction survives even for
 * a viewer who can't rely on the confidence chip's text alone. */
.next-card.is-low-confidence {
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 107, 107, 0.06);
}
.next-card.is-low-confidence:hover { background: rgba(255, 107, 107, 0.1); }

.nc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.nc-flag { font-size: 1.5rem; line-height: 1; }
.nc-name { font-size: 1rem; font-weight: 600; color: var(--ink); }

.nc-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* Visa-type chip -- same pill shell as .badge but filled, since this is
 * the one piece of information every card is fundamentally organised
 * around (can I get in, and how). */
.visa-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
}

.nc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: 0.8125rem;
}
.nc-nights { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.nc-confidence { margin-bottom: var(--sp-2); }

/* Confidence chip -- visible on every card (per the task-14 brief,
 * this is never a tooltip), with `low` given the same --americas
 * warning treatment as the card border above so the two reinforce each
 * other rather than one being easy to miss. */
.confidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.confidence-chip.confidence-high { color: var(--ink-muted); }
.confidence-chip.confidence-medium { color: var(--africa); }
.confidence-chip.confidence-low {
  color: var(--americas);
  font-weight: 600;
}
.confidence-icon { font-size: 0.875rem; }

/* Gabon's mutual-suspension note (and French Guiana's/New Caledonia's
 * own low-confidence caveats) surfaced directly on the card, not left
 * to a generic "Embassy visa" chip -- see next_list.html's comment. */
.nc-caution {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 107, 107, 0.1);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.nc-needed-by { margin-top: var(--sp-2); }

@media (max-width: 480px) {
  .next-grid { grid-template-columns: 1fr; }
  .next-filters { flex-direction: column; align-items: stretch; }
  .next-filter-field { min-width: 0; }
}

/* ---------- Countries section + add-country flow (Task 15) ---------- */

.countries-eyebrow,
.countries-add-eyebrow { margin: var(--sp-2) 0 var(--sp-3); }
.countries-lede { max-width: 50rem; }

.countries-cta { margin: 0 0 var(--sp-4); }

/* ---------- Toast (add-country confirmation) ---------- */

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.toast-flag { font-size: 1.25rem; line-height: 1; }
.toast-text { flex: 1 1 auto; }
.toast-close {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--sp-1);
}
.toast-close:hover { color: var(--ink); }

/* ---------- Search / status filter toolbar ---------- */

.countries-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.countries-search-field { flex: 1 1 16rem; margin: 0; }
.countries-filter-field { margin: 0; min-width: 11rem; }
.countries-search,
.countries-filter-field select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.875rem;
}

.countries-count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.countries-count .stat-value { font-size: 1.375rem; }
.countries-count-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}

.countries-empty {
  padding: var(--sp-5);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
}

/* ---------- The 250-row table itself ---------- */

.countries-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.countries-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.countries-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  text-align: left;
  padding: var(--sp-3) var(--sp-3);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline-firm);
  white-space: nowrap;
}
.person-head-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.country-row td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.country-row:last-child td { border-bottom: none; }
.country-row:hover { background: var(--bg-elev); }
.country-row[hidden] { display: none; }

.cr-flag { font-size: 1.125rem; width: 1.5rem; }
.cr-name-btn {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.cr-name-btn:hover { text-decoration-color: var(--ink-muted); }
.cr-region { color: var(--ink-muted); white-space: nowrap; }

.visit-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.visit-cell.is-unvisited { color: var(--ink-faint); }
.visit-cell.is-visited .visit-mark { color: var(--asia); font-weight: 700; }
.visit-year-input {
  width: 5.5rem;
  padding: 2px 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.visit-remove {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.visit-remove:hover { color: var(--americas); }
.visit-save-state {
  font-size: 0.75rem;
  color: var(--asia);
  min-width: 3rem;
}
.visit-save-state.is-error { color: var(--americas); }

/* ---------- Add-country form ---------- */

.person-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}
.person-fieldset legend {
  padding: 0;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.person-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
/* Scoped to .person-fieldset (specificity 0,2,0) rather than bare
   .person-option (0,1,0): these labels live inside a `.field` fieldset,
   and the pre-existing `.field label` rule (0,1,1) otherwise wins the
   cascade and overrides display/text-transform back to block/uppercase
   regardless of source order. No !important needed once the selector
   itself out-specifies it. */
.person-fieldset .person-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Selectable chips: the whole pill is the hit target, and the selected one
   is unmistakable. Previously the radio was invisible and nothing changed
   on click, so the form gave no feedback at all. */
.person-fieldset .person-option {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--hairline-firm);
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg-elev-2);
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.person-fieldset .person-option:hover {
  border-color: var(--ink-muted);
}
.person-fieldset .person-option input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--oceania);
  cursor: pointer;
}
.person-fieldset .person-option:has(input:checked) {
  border-color: var(--oceania);
  background: color-mix(in srgb, var(--oceania) 16%, var(--bg-elev-2));
  color: var(--ink);
  font-weight: 600;
}
.person-fieldset .person-option:has(input:focus-visible) {
  outline: 2px solid var(--oceania);
  outline-offset: 2px;
}

/* ---------- Type-ahead dropdown ---------- */

.typeahead { position: relative; }
.typeahead-list {
  position: absolute;
  z-index: 20;
  left: 0; right: 0; top: calc(100% + 4px);
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.typeahead-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.typeahead-option.is-active,
.typeahead-option:hover { background: var(--bg-elev); }
.typeahead-flag { font-size: 1.125rem; line-height: 1; flex: 0 0 auto; }
.typeahead-name { flex: 1 1 auto; color: var(--ink); }
.typeahead-region { color: var(--ink-muted); font-size: 0.8125rem; }

@media (max-width: 480px) {
  .countries-toolbar { flex-direction: column; align-items: stretch; }
  /* Bug fix: flex-basis is an axis-relative size, not a width -- once
     the toolbar switches to a column main axis above, the search
     field's `flex: 1 1 16rem` basis applies to its HEIGHT, not its
     width, leaving a 256px empty box between the search bar and the
     status filter. Reset the basis so the field just sizes to content
     (full width, since align-items: stretch already fills the row). */
  .countries-search-field { flex-basis: auto; }
  .countries-filter-field { min-width: 0; }
  .person-options { flex-direction: column; gap: var(--sp-2); }
}