/* ArriveOK. Cool cobalt on paper: ink and one accent, cobalt, used only for
   actions and selection. A status (permitted, action required, prohibited)
   is its own color and is never reused for anything else, and is never
   carried by color alone.

   Every color and font token lives in the one :root block below, with the
   dark overrides directly under it, so a later token change is a one-file
   swap. Nothing further down this file names a color literal. */

:root {
  color-scheme: light;

  /* Light, "cobalt and paper". */
  --ground: #FAFBFD;
  --surface: #F2F5F9;
  --ink: #141B26;
  --ink-2: #465264;
  --ink-3: #6B7788;
  --rule: #D7DEE8;
  --strip: #141B26;
  --strip-text: #FFFFFF;
  --accent: #1D5BC9;
  --accent-ink: #FFFFFF;
  --tint: #DDE7F8;
  --ok: #1B7F4C;
  --warn: #A86200;
  --stop: #B3261E;
  /* Text laid on a status strip. */
  --on-status: #FFFFFF;

  --font-ui: 'Source Sans 3', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  --font-title: 'Alegreya Sans', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --wrap: 680px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    /* Dark, "cobalt and paper" inverted. */
    --ground: #0D121C;
    --surface: #171E2C;
    --ink: #ECF0F6;
    --ink-2: #B3BCCB;
    --ink-3: #8390A2;
    --rule: #283246;
    --strip: #ECF0F6;
    --strip-text: #0D121C;
    --accent: #6BA3FF;
    --accent-ink: #0D121C;
    --tint: #1C2F4E;
    --ok: #5FCF95;
    --warn: #F0B24A;
    --stop: #F47C72;
    --on-status: #0F181D;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #0D121C;
  --surface: #171E2C;
  --ink: #ECF0F6;
  --ink-2: #B3BCCB;
  --ink-3: #8390A2;
  --rule: #283246;
  --strip: #ECF0F6;
  --strip-text: #0D121C;
  --accent: #6BA3FF;
  --accent-ink: #0D121C;
  --tint: #1C2F4E;
  --ok: #5FCF95;
  --warn: #F0B24A;
  --stop: #F47C72;
  --on-status: #0F181D;
}

@font-face {
  font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/alegreya-sans-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('/assets/fonts/alegreya-sans-800-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui);
  font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%;
}

@media (min-width: 700px) {
  body { font-size: 18px; }
}

h1, h2, h3 {
  font-family: var(--font-title); font-weight: 800; letter-spacing: -0.005em;
  line-height: 1.1; margin: 0 0 var(--s2); text-wrap: balance;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--s2); }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s2); }
/* The catalog is a wide table; it gets more room than the reading column. */
.wrap--wide { max-width: 1080px; }
main.wrap { padding-top: var(--s4); padding-bottom: var(--s5); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink);
  padding: var(--s1) var(--s2); border: 1px solid var(--rule);
}
.skip-link:focus { left: var(--s2); top: var(--s1); z-index: 10; }

/* Header: the wordmark, the three destinations, the theme control. */
.site-header { background: var(--surface); border-bottom: 1px solid var(--rule); }
/* Phone: row 1 is the wordmark and the theme control, row 2 is the nav.
   From 768 px all three sit on one row, the nav taking the middle. */
.site-header .bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding: 12px var(--s2);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-weight: 800;
  font-size: 1.25rem; letter-spacing: -0.005em; text-decoration: none; color: var(--ink);
  padding: 6px 0;
}
.wordmark .dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 3px solid var(--accent); background: var(--ground); flex: 0 0 auto;
}
.site-header nav { flex: 0 0 100%; }
.site-header nav ul {
  display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0;
}
.site-header nav a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 0;
  text-decoration: none; color: var(--ink-2);
}
/* The bar is wider than the 680 px reading column: it carries seven links,
   and the wide pages (home, countries, airports, devices, sources) are 1080
   px, so the wordmark lines up with them. */
.site-header .bar { max-width: 1080px; }
@media (min-width: 768px) {
  .site-header .bar { padding: 8px var(--s2); flex-wrap: nowrap; }
  .site-header nav { flex: 1 1 auto; order: 1; margin-right: auto; min-width: 0; }
  .theme { order: 2; margin-left: 0; flex: 0 0 auto; }
}
.site-header nav a:hover { color: var(--ink); text-decoration: underline; }
.site-header nav a[aria-current='page'] { color: var(--accent); font-weight: 700; }

/* Theme control: three radios styled as a segmented control. */
.theme { display: flex; align-items: center; gap: var(--s1); margin: 0 0 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.theme select {
  font: inherit; font-size: 0.9rem; min-height: 44px; padding: 0 var(--s1);
  color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); cursor: pointer;
}
.theme select:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Footer. */
.site-footer {
  border-top: 1px solid var(--rule); background: var(--surface); color: var(--ink-2);
  font-size: 0.9rem; padding: var(--s3) 0;
}
.site-footer p { margin: 0 0 var(--s1); }
.site-footer p:last-child { margin: 0; }

/* Sign: a label strip in the status color, then the message. No shadow. */
.sign {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md);
  overflow: hidden; padding: 0; margin: 0 0 var(--s3);
}
.sign-strip {
  display: flex; align-items: center; gap: var(--s1); margin: 0; padding: 10px var(--s2);
  background: var(--strip); color: var(--strip-text); font-family: var(--font-title);
  font-weight: 800; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.sign--permitted .sign-strip { background: var(--ok); color: var(--on-status); }
.sign--action_required .sign-strip { background: var(--warn); color: var(--on-status); }
.sign--prohibited .sign-strip { background: var(--stop); color: var(--on-status); }
.sign-body { padding: var(--s3) var(--s2) var(--s2); }
.icon { flex: 0 0 auto; }

.verdict-number {
  font-family: var(--font-title); font-weight: 800;
  font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 0 0 var(--s1);
}
@media (min-width: 700px) { .verdict-number { font-size: 56px; } }
.verdict-number .unit { font-size: 0.42em; font-weight: 400; margin-left: 0.2em; }
.verdict-headline { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--s2); }

.reasons { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.reasons li { border-top: 1px solid var(--rule); padding: var(--s2) 0 0; margin: 0 0 var(--s2); }
.reasons li p { margin: 0 0 6px; }
.source { font-size: 0.85rem; color: var(--ink-2); margin: 0; }
.source a { color: var(--ink-2); }
.disclaimer { font-weight: 700; border-top: 1px solid var(--rule); padding-top: var(--s2); margin: 0; }

/* Numbers, codes, dates: Atkinson, with figures that line up. */
.num, td.num, time { font-variant-numeric: tabular-nums; }

/* Forms: 48px fields, label above, unit inside the field on the right. */
.field { margin: 0 0 var(--s2); }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: 6px; }
.field .help { font-size: 0.9rem; color: var(--ink-2); margin: 6px 0 0; }
.input-shell { position: relative; display: block; }
input[type='text'], input[type='search'], input[type='number'] {
  width: 100%; height: 48px; padding: 0 var(--s2); font: inherit;
  font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 0;
}
input::placeholder { color: var(--ink-3); }
.input-shell .unit {
  position: absolute; right: var(--s2); top: 0; height: 48px; display: flex;
  align-items: center; color: var(--ink-2); pointer-events: none;
}
.input-shell input { padding-right: 56px; }
input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Segmented controls built from radios: kind, tabs. */
.segmented { display: block; border: 0; padding: 0; margin: 0 0 var(--s2); min-inline-size: 0; }
.segmented legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.segmented-options { display: flex; flex-wrap: nowrap; border: 1px solid var(--rule); }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented label {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 6px; text-align: center; cursor: pointer; font-size: 0.95rem;
  border-left: 1px solid var(--rule); color: var(--ink-2);
}
@media (min-width: 480px) { .segmented label { padding: 0 var(--s2); font-size: 1rem; } }
.segmented label:first-of-type { border-left: 0; }
.segmented input:checked + label { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.segmented input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: -2px; }

.checkbox { display: flex; align-items: center; gap: var(--s1); min-height: 48px; margin: 0 0 var(--s3); }
.checkbox input { width: 28px; height: 28px; margin: 0; flex: 0 0 auto; accent-color: var(--ink); }
.checkbox label { display: flex; align-items: center; min-height: 48px; flex: 1 1 auto; font-weight: 700; }

button {
  font: inherit; font-weight: 700; min-height: 48px; padding: 0 var(--s3); color: var(--accent-ink);
  background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm);
  cursor: pointer;
}
button:hover { opacity: 0.88; }
.button-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3);
  font-weight: 700; text-decoration: none; color: var(--accent-ink);
  background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.button-link.ghost {
  color: var(--accent); background: transparent; border-color: var(--rule);
}

/* Tabs: three ways into the same answer. */
.tablist {
  display: flex; flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--rule);
  margin: 0 0 var(--s3);
}
.tablist button {
  background: none; color: var(--ink-2); border: 0; border-bottom: 3px solid transparent;
  padding: 0 12px; min-height: 48px; font-size: 0.95rem; white-space: nowrap; flex: 0 0 auto;
}
.tablist button:first-child { padding-left: 0; }
.tablist button:hover { background: none; opacity: 1; color: var(--ink); }
.tablist button[aria-selected='true'] { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }

.results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.results:empty { border: 0; }
.results li { border-top: 1px solid var(--rule); }
.results li:first-child { border-top: 0; }
.results button {
  display: block; width: 100%; text-align: left; background: var(--surface);
  color: var(--ink); border: 0; padding: var(--s1) var(--s2); min-height: 48px;
}
.results button:hover { background: var(--ground); opacity: 1; }
.results .meta { display: block; font-size: 0.85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chosen { margin: 0 0 var(--s3); }

/* Catalog and source tables. */
.table-scroll {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-md);
  background: var(--surface); margin: 0 0 var(--s4);
}
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
caption {
  text-align: left; padding: var(--s2); font-family: var(--font-title);
  font-weight: 800; background: var(--strip);
  color: var(--strip-text);
}
th, td { text-align: left; padding: var(--s1) var(--s2); border-top: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; white-space: nowrap; }
thead th {
  border-top: 0; color: var(--ink-2); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.08em;
}
td.num { text-align: right; white-space: nowrap; }

.source-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.source-list li { border-top: 1px solid var(--rule); padding: var(--s2) 0; }
.host {
  display: inline-block; background: var(--strip); color: var(--strip-text);
  padding: 4px var(--s1); font-size: 0.95rem; letter-spacing: 0.02em;
}

.lede { font-size: 1.1rem; }
.next-list { padding-left: var(--s3); }
.next-list li { margin-bottom: var(--s1); }
.hint { color: var(--ink-2); font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Home. The only page that pitches, so the only one with a hero, a wide   */
/* layout, and the porcelain artwork. The artwork never carries meaning on */
/* its own: a label always sits beside it, and readiness is always words.  */
/* ---------------------------------------------------------------------- */

.wrap--home { max-width: 1080px; }

.eyebrow {
  font-family: var(--font-title); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s1);
}
.section-lede { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; }
.art { display: block; object-fit: contain; }

/* Hero */
.hero {
  display: grid; gap: var(--s4); align-items: center;
  margin: 0 0 var(--s5); padding: var(--s4) var(--s3) var(--s5);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 110% at 100% 0%, var(--tint) 0%, transparent 58%),
    radial-gradient(90% 90% at 0% 10%, var(--tint) 0%, transparent 48%);
}
@media (min-width: 820px) { .hero { grid-template-columns: 1.15fr 1fr; padding: var(--s5) var(--s4); } }
.hero h1 { font-size: clamp(2.3rem, 4.4vw + 0.8rem, 3.5rem); margin-bottom: var(--s3); }
.hero-lede { font-size: 1.15rem; color: var(--ink-2); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s3) 0 0; }
.hero-actions--center { justify-content: center; }
.hero-note { font-size: 0.9rem; color: var(--ink-3); margin: var(--s2) 0 0; }
.hero-art {
  display: grid; grid-template-columns: repeat(2, auto); gap: var(--s3);
  place-items: center; justify-content: center;
}
.hero-art .art { filter: drop-shadow(0 18px 24px rgba(20, 27, 38, 0.10)); }

/* A band: a full-width section with its own ground. */
.band { margin: var(--s5) 0; padding: var(--s4) var(--s3); border-radius: var(--radius-md); background: var(--surface); }
@media (min-width: 820px) { .band { padding: var(--s5) var(--s4); } }
.band h2, .feature h2, .proof h2, .personas h2, .cta-band h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.1rem); }

.problem-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 700px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
.problem-grid li { border-left: 3px solid var(--accent); padding-left: var(--s2); }
.problem-grid h3 { margin: 0 0 4px; }
.problem-grid p { margin: 0; color: var(--ink-2); }

/* Feature: copy on one side, artwork on the other. */
.feature { display: grid; gap: var(--s4); margin: var(--s5) 0; align-items: center; }
@media (min-width: 880px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .feature--reverse .feature-copy { order: 2; }
}
.feature-copy p { color: var(--ink-2); }
.feature-copy h2 { margin-bottom: var(--s2); }
.ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink-2); }
.ticks .icon { width: 20px; height: 20px; color: var(--ok); margin-top: 2px; }
.ticks--warn .icon { color: var(--warn); }
.art-caption { font-size: 0.9rem; color: var(--ink-3); margin: var(--s2) 0 0; }

/* Gear Locker shelves */
.locker-art { display: grid; gap: var(--s2); }
.shelf { background: var(--shelf-c2, var(--tint)); border-radius: var(--radius-md); padding: var(--s2); }
.shelf-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.95rem; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--shelf-c, var(--accent)); color: #fff;
  font-family: var(--font-title); font-weight: 800; font-size: 0.75rem; flex: 0 0 auto;
}
.shelf-tiles { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s1); flex-wrap: wrap; }
.shelf-tiles .tile {
  flex: 1 1 84px; min-width: 84px; background: var(--ground); border-radius: var(--radius-sm);
  padding: 10px 6px 8px; display: grid; justify-items: center; gap: 2px; text-align: center;
}
.tile-name { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.tile-meta { font-size: 0.72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shelf--t1 { --shelf-c: #1D5BC9; --shelf-c2: #DDE7F8; }
.shelf--t2 { --shelf-c: #1A7F8E; --shelf-c2: #D2ECEF; }
.shelf--t4 { --shelf-c: #7A4E9E; --shelf-c2: #EAE0F3; }

/* Travelers */
.traveler-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.traveler {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--shelf-c, var(--accent));
  border-radius: var(--radius-sm); padding: 10px var(--s2);
}
.traveler .avatar { background: var(--shelf-c, var(--accent)); }
.traveler-name { font-weight: 700; }
.traveler-meta { font-size: 0.85rem; color: var(--ink-3); }
.traveler--t1 { --shelf-c: #1D5BC9; } .traveler--t2 { --shelf-c: #1A7F8E; }
.traveler--t3 { --shelf-c: #2A73B5; } .traveler--t4 { --shelf-c: #7A4E9E; }
.traveler--t5 { --shelf-c: #B04A78; }

/* Route */
.route-band { background: var(--surface); }
.route { list-style: none; position: relative; margin: var(--s4) 0 0; padding-left: 28px; }
.stop { position: relative; padding-bottom: var(--s3); }
.stop:last-child { padding-bottom: 0; }
.stop::before { content: ''; position: absolute; left: -28px; top: 26px; bottom: -4px; width: 2px; background: var(--rule); }
.stop:last-child::before { display: none; }
.stop .node {
  position: absolute; left: -34px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink-3);
}
.stop.ok .node { border-color: var(--ok); } .stop.act .node { border-color: var(--warn); } .stop.no .node { border-color: var(--stop); }
.stop-name { font-weight: 700; margin: 0 0 4px; font-size: 1.05rem; }
.stop-code { font-family: var(--font-title); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.07em; color: var(--ink-3); margin-left: 6px; }
.stop-tag {
  display: inline-flex; align-items: center; font-family: var(--font-title); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px;
  border-radius: var(--radius-sm); margin: 0 0 6px; color: var(--on-status);
}
.stop.ok .stop-tag { background: var(--ok); } .stop.act .stop-tag { background: var(--warn); } .stop.no .stop-tag { background: var(--stop); }
.stop-note { margin: 0; color: var(--ink-2); max-width: 62ch; }
.route-foot { display: flex; gap: 8px; align-items: flex-start; margin: var(--s3) 0 0; font-size: 0.9rem; color: var(--ink-3); }
.route-foot .icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* Steps, stacked in a feature column */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.steps--stacked li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); align-items: start; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-title); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.steps h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.steps p { margin: 0; color: var(--ink-2); }

/* Panels: documents and allowances */
.doc-panel, .allow-panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--s3);
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); flex-wrap: wrap; }
.panel-head strong { font-family: var(--font-title); font-weight: 800; font-size: 1.1rem; }
.ready, .pooled {
  font-family: var(--font-title); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--warn); color: var(--on-status);
}
.pooled { background: var(--ok); }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.doc-list li:first-child { border-top: 0; }
.doc-list .icon { width: 18px; height: 18px; }
.doc-list .done .icon { color: var(--ok); } .doc-list .todo .icon { color: var(--warn); }
.doc-list span { font-weight: 700; }
.doc-list em { font-style: normal; font-size: 0.85rem; color: var(--ink-3); text-align: right; }
.panel-foot { display: flex; gap: var(--s2); align-items: center; margin: var(--s2) 0 0; padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--ink-2); }
.allow-grid { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.allow-grid li { display: grid; justify-items: center; gap: 2px; background: var(--ground); border-radius: var(--radius-sm); padding: var(--s2) 8px; text-align: center; }
.allow-n { font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.allow-l { font-size: 0.8rem; color: var(--ink-3); }

/* Pipeline grid */
.pipe-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 640px) { .pipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pipe-grid { grid-template-columns: repeat(4, 1fr); } }
.pipe-card {
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--s3) var(--s2); display: grid; gap: 6px; justify-items: start;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), border-color 0.15s;
}
.pipe-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 28px -18px var(--accent); }
.pipe-art { display: grid; place-items: center; width: 100%; margin-bottom: 4px; }
.pipe-card h3 { margin: 0; font-size: 1rem; }
.pipe-card p { margin: 0 0 6px; font-size: 0.92rem; color: var(--ink-2); }

/* Proof */
.proof { margin: var(--s5) 0; }
.proof-sign { margin-top: var(--s3); }
.proof-sign .sign-body { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.proof-sign .verdict-number { margin: 0; }
.proof-sign .verdict-headline { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.proof-sign .source { margin-top: var(--s1); }
.proof-fact { flex: 1 1 280px; min-width: 0; }
.proof-number { flex: 0 0 auto; text-align: right; }

/* Personas */
.personas { margin: var(--s5) 0; }
.persona-grid { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 700px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .persona-grid { grid-template-columns: repeat(4, 1fr); } }
.persona {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--s3); transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), border-color 0.15s;
}
.persona:hover { transform: translateY(-3px); border-color: var(--persona-c, var(--accent)); box-shadow: 0 14px 28px -18px var(--persona-c, var(--accent)); }
.persona-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: var(--radius-md); background: var(--persona-c2, var(--tint)); color: var(--persona-c, var(--accent));
  margin-bottom: var(--s2);
}
.persona-icon .icon { width: 23px; height: 23px; }
.persona h3 { margin: 0 0 6px; font-size: 1.02rem; }
.persona .worry { color: var(--ink-2); margin: 0 0 8px; font-size: 0.94rem; }
.persona p:last-child { margin: 0; font-size: 0.94rem; }
.persona--t1 { --persona-c: #1D5BC9; --persona-c2: #DDE7F8; }
.persona--t2 { --persona-c: #1A7F8E; --persona-c2: #D2ECEF; }
.persona--t4 { --persona-c: #7A4E9E; --persona-c2: #EAE0F3; }
.persona--t6 { --persona-c: #7E7160; --persona-c2: #EDE8DF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .persona--t1 { --persona-c: #6BA3FF; --persona-c2: #1C355E; }
  :root:not([data-theme='light']) .persona--t2 { --persona-c: #4FB8C9; --persona-c2: #163C43; }
  :root:not([data-theme='light']) .persona--t4 { --persona-c: #B491D9; --persona-c2: #3A2B4F; }
  :root:not([data-theme='light']) .persona--t6 { --persona-c: #C4B79E; --persona-c2: #3A342C; }
  :root:not([data-theme='light']) .shelf--t1 { --shelf-c: #6BA3FF; --shelf-c2: #1C355E; }
  :root:not([data-theme='light']) .shelf--t2 { --shelf-c: #4FB8C9; --shelf-c2: #163C43; }
  :root:not([data-theme='light']) .shelf--t4 { --shelf-c: #B491D9; --shelf-c2: #3A2B4F; }
}
:root[data-theme='dark'] .persona--t1 { --persona-c: #6BA3FF; --persona-c2: #1C355E; }
:root[data-theme='dark'] .persona--t2 { --persona-c: #4FB8C9; --persona-c2: #163C43; }
:root[data-theme='dark'] .persona--t4 { --persona-c: #B491D9; --persona-c2: #3A2B4F; }
:root[data-theme='dark'] .persona--t6 { --persona-c: #C4B79E; --persona-c2: #3A342C; }
:root[data-theme='dark'] .shelf--t1 { --shelf-c: #6BA3FF; --shelf-c2: #1C355E; }
:root[data-theme='dark'] .shelf--t2 { --shelf-c: #4FB8C9; --shelf-c2: #163C43; }
:root[data-theme='dark'] .shelf--t4 { --shelf-c: #B491D9; --shelf-c2: #3A2B4F; }

.tag {
  font-family: var(--font-title); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--rule); color: var(--ink-3);
}
.tag--live { border-color: transparent; background: var(--ok); color: var(--on-status); display: inline-flex; align-items: center; gap: 5px; }
.tag--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.cta-band {
  margin: var(--s5) 0 0; padding: var(--s5) var(--s3); border-radius: var(--radius-md);
  text-align: center;
  background:
    radial-gradient(110% 120% at 50% 0%, var(--tint) 0%, transparent 62%);
}
.cta-band h2 { margin: 0 0 var(--s2); }
.cta-band .section-lede { margin-left: auto; margin-right: auto; }

.button-link, button {
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), opacity 0.15s;
}
.button-link:hover, button:hover {
  transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--accent); opacity: 1;
}
.button-link.ghost:hover { box-shadow: 0 10px 22px -14px var(--ink); }


/* Worked scenarios: real computed answers, shown as the app would show them. */
.scenario-grid { display: grid; gap: var(--s3); margin: var(--s4) 0 0; }
@media (min-width: 900px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
.scenario {
  background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.scenario-strip {
  display: flex; align-items: center; gap: var(--s1); margin: 0; padding: 10px var(--s3);
  font-family: var(--font-title); font-weight: 800; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--on-status);
}
.scenario--action_required .scenario-strip { background: var(--warn); }
.scenario--prohibited .scenario-strip { background: var(--stop); }
.scenario--permitted .scenario-strip { background: var(--ok); }
.scenario-strip .icon { width: 19px; height: 19px; }
.scenario-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.scenario-body h3 { margin: 0; font-size: 1.15rem; }
.scenario-lede { margin: 0; color: var(--ink-2); }
.basket { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.basket li {
  display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s2); align-items: center;
  padding: 8px 0; border-top: 1px solid var(--rule);
}
.basket li:first-child { border-top: 0; }
.basket-name { font-weight: 700; font-size: 0.95rem; }
.basket-wh { font-family: var(--font-title); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reasons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reasons-list li {
  position: relative; padding-left: var(--s2); font-size: 0.95rem; color: var(--ink-2);
  border-left: 3px solid var(--warn);
}
.scenario--prohibited .reasons-list li { border-left-color: var(--stop); }
.scenario-object { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-list li { display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start; font-size: 0.94rem; color: var(--ink-2); }
.mini-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--stop); }
.mini-list li:last-child .icon { color: var(--ok); }
.scenario .source { margin-top: auto; padding-top: var(--s1); }

/* Country counts */
.count-list { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 2px; }
.count-list li {
  display: grid; grid-template-columns: auto auto 1fr; gap: var(--s2); align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--rule);
}
.count-list li:first-child { border-top: 0; }
.count-c { font-weight: 700; min-width: 4.5em; }
.count-n { font-family: var(--font-title); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.count-note { font-size: 0.88rem; color: var(--ink-3); }


/* The phone estimator, and the four carriers laid out underneath it. The
   picker is one column at 390 px; the carrier grid scrolls sideways rather
   than letting the page do it. */
.tool { margin: 0 0 var(--s3); }
/* The pickers match the number inputs: same height, same ground, same rule.
   The header's theme control keeps its own smaller treatment. */
.field select, .stop-row select {
  width: 100%; height: 48px; padding: 0 var(--s2); font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 0;
}
.field select:focus-visible, .stop-row select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.segmented-options--wrap { flex-wrap: wrap; }
.segmented-options--wrap label { flex: 1 1 42%; }
@media (min-width: 560px) { .segmented-options--wrap label { flex: 1 1 0; } }

.stops { border: 0; padding: 0; margin: 0 0 var(--s2); min-inline-size: 0; }
.stops legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.stop-row {
  display: grid; grid-template-columns: 1fr; gap: var(--s1); align-items: center;
  padding: var(--s1) 0; border-top: 1px solid var(--rule);
}
.stop-row:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 480px) { .stop-row { grid-template-columns: 1fr 8.5rem auto; } }
.input-shell.days input { padding-right: 62px; }

.field-row { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }

.option { border-top: 1px solid var(--rule); padding-top: var(--s2); margin: 0 0 var(--s2); }
.option h3 { margin: 0 0 4px; }
.option--cheapest { border-left: 0; }
.option--cheapest h3::after {
  content: 'cheapest way to cover this trip'; display: block; font-family: var(--font-ui);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ok);
}
.math { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.92rem; }
.saves { font-weight: 700; color: var(--ok); margin: 6px 0 0; }

.reasons.plain li { border-top: 0; padding-top: 0; margin-bottom: var(--s1); }
.reasons.plain li p { margin: 0 0 2px; }

.zone-key { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.zone-key li { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 4px; }
.zone-key strong { color: var(--ink); }
.cell-lead { display: block; font-weight: 700; }
.cell-detail { display: block; font-weight: 400; color: var(--ink-2); font-size: 0.86rem; white-space: normal; }
.carrier { margin: 0 0 var(--s5); }
/* The closing sentence sits hard against the next heading otherwise. */
.disclaimer + h2 { margin-top: var(--s4); }
.carrier h3 { margin-bottom: var(--s1); }
.carrier table th[scope='row'] { white-space: normal; min-width: 12rem; }
.table-tall { max-height: 30rem; overflow-y: auto; }
.table-tall thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
td.unlisted { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ------------------------------------------------------------------------
   The reference surface: /countries/, /countries/<ISO2>/, /airports/.
   Hover here follows tokens.md Interaction — a surface darkens one step to
   the tint, text underlines, and nothing lifts or scales. ------------------ */

.icon-inline { width: 0.9em; height: 0.9em; vertical-align: -0.08em; margin-left: 4px; }

.site-header .nav-app a { color: var(--accent); font-weight: 700; }
.site-header .nav-app .icon-inline { margin-left: 3px; }

.crumbs { font-size: 0.88rem; color: var(--ink-3); margin: 0 0 var(--s2); }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

.code-chip {
  font-family: var(--font-title); font-weight: 800; font-size: 0.6em;
  letter-spacing: 0.06em; color: var(--ink-3); vertical-align: 0.22em;
}

/* Source line, stale flag. One line, never a paragraph of its own weight. */
.src { font-size: 0.8rem; color: var(--ink-3); margin: 4px 0 0; }
.src a { color: var(--accent); text-decoration: none; }
.src a:hover { text-decoration: underline; }
.stale {
  display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s1);
  font-family: var(--font-title); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1.5px dashed var(--ink-3);
}

/* Verdict card. One strip, one status, one color source. */
.warnings { margin: 0 0 var(--s5); }
.vc {
  display: grid; grid-template-columns: 1fr; margin: 0 0 var(--s2);
  border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden;
}
@media (min-width: 560px) { .vc { grid-template-columns: 1fr auto; } }
.vc-strip {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px var(--s3);
  font-family: var(--font-title); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--on-status);
}
.vc-strip .icon-inline { width: 15px; height: 15px; margin: 0; }
.vc--prohibited .vc-strip { background: var(--stop); }
.vc--action_required .vc-strip { background: var(--warn); }
.vc--prohibited { background: color-mix(in srgb, var(--stop) 7%, var(--surface)); }
.vc--action_required { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.vc-body { padding: var(--s2) var(--s3) var(--s3); min-width: 0; }
.vc-body h3 { margin: 0 0 6px; font-size: 1.02rem; }
.vc-pen { margin: 0 0 6px; }
.vc-mark { display: none; }
@media (min-width: 560px) {
  .vc-mark { display: grid; place-items: center; padding: var(--s2) var(--s3) var(--s3) 0; }
}

/* The search field. The page renders every rule without it. */
.browse-search { margin: var(--s3) 0 var(--s2); }
.browse-search-shell { position: relative; display: block; }
.browse-search-shell .icon-inline {
  position: absolute; left: var(--s2); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; margin: 0; color: var(--ink-3); pointer-events: none;
}
.browse-search input {
  width: 100%; min-height: 48px; padding: 0 var(--s2) 0 44px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.browse-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.browse-count { font-size: 0.88rem; color: var(--ink-2); margin: var(--s1) 0 0; min-height: 1.3em; }

/* Categories, each with its object and its count. */
.cats { list-style: none; margin: var(--s3) 0 var(--s5); padding: 0; display: grid; gap: var(--s1); }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(3, 1fr); } }
.cat a {
  display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--s2); align-items: center;
  min-height: 64px; padding: 6px var(--s2) 6px 6px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
}
.cat a:hover { background: var(--tint); }
.cat a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-t { font-weight: 700; min-width: 0; }
.cat-n { font-family: var(--font-title); font-weight: 800; font-size: 1.15rem; color: var(--ink-3); }
.cat a .icon-inline { width: 16px; height: 16px; margin: 0; color: var(--ink-3); }

/* The object plate: one ground behind every drawing on the page. */
.cat-pad {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: var(--ground);
}
.cat-pad .art { width: 40px; height: 40px; }

/* One category and its rules. */
.cat-section { margin: 0 0 var(--s5); scroll-margin-top: var(--s3); }
.cat-head {
  display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2);
  padding-bottom: var(--s1); border-bottom: 1px solid var(--rule);
}
.cat-head .cat-n { margin-left: auto; }
/* On the page ground the plate needs the surface to read as a plate at all. */
.cat-head .cat-pad { background: var(--surface); }
td.tier { white-space: nowrap; }
.refs { list-style: none; margin: 0; padding: 0; }
.ref { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.ref:first-child { border-top: 0; }
.ref-name { font-size: 1rem; margin: 0 0 6px; font-family: var(--font-ui); font-weight: 700; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fact { min-width: 0; }
.fact-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s1); }
.fact-lab { color: var(--ink-3); font-size: 0.88rem; }
.fact-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.fact[data-status='prohibited'] .fact-val { color: var(--stop); }
.fact[data-status='action_required'] .fact-val { color: var(--warn); }
.fact[data-status='permitted'] .fact-val { color: var(--ok); }
.ref-pen {
  font-family: var(--font-title); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 2px 6px;
}
.fact-qual { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-2); }

/* The union strip, and the country's own pages. */
.union-band, .official-band, .airport-band {
  margin: 0 0 var(--s5); padding: var(--s3); border-radius: var(--radius-md);
  background: var(--surface);
}
.strip-name {
  display: inline-flex; margin: 0 0 var(--s2); padding: 5px 10px; border-radius: 3px;
  background: var(--strip); color: var(--strip-text); font-family: var(--font-title);
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase;
}
.official { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.official li { padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.official li:first-child { border-top: 0; }
.official-role {
  display: block; font-family: var(--font-title); font-weight: 800; font-size: 0.7rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}
.official a { color: var(--accent); }
.official-note { display: block; font-size: 0.88rem; color: var(--ink-2); }
.scam { margin: 0; font-weight: 700; }

.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip-list a {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px;
  padding: 0 var(--s2); background: var(--ground); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); text-decoration: none; font-size: 0.92rem;
}
.chip-list a:hover { background: var(--tint); }
.chip-code { font-family: var(--font-title); font-weight: 800; letter-spacing: 0.05em; }

.pending-list {
  list-style: none; margin: 0 0 var(--s4); padding: 0;
  display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pending-list a { color: var(--ink-2); }

/* A naming strip is black and carries no status. */
.sign--info .sign-strip { background: var(--strip); color: var(--strip-text); }