/* ============================================================
   EzVisa — Still Water
   Plain and generous, in the register of a public service: a
   green-grey ground, one humanist sans, a slate-teal accent, and
   rows sized for reading rather than auditing.
   Monospace is for code samples only — never for data, labels,
   numbers or navigation. See plans/015-interface-redesign.md.
   ============================================================ */

/* --- Typeface -----------------------------------------------
   Self-hosted so no page needs a third-party request to render.
   One variable file per subset covers weights 400-700 (54 KB
   total), which is less than the four static Inter files it
   replaced.
   Hanken Grotesk, SIL Open Font License 1.1 — see fonts/OFL.txt
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The UA sheet puts display:none on [hidden], and every author display rule
   outranks it — so a hidden .ez-list-row (display:grid) stays on screen.
   The type-to-filter lists depend on this working. */
[hidden] { display: none !important; }

:root {
  /* Accent. Slate teal — links, active nav, primary action. */
  --ez-blue: #2B5F63;
  --ez-blue-light: #3A7B80;
  --ez-blue-pale: #E2EBEA;
  --ez-indigo: #1F4C50;

  /* Status. Separate from the accent, so a coloured pill always means
     something about the traveller's situation and never about emphasis. */
  --ez-green: #2C6B4C;        /* nothing to arrange */
  --ez-green-pale: #E4EDE7;
  --ez-amber: #8A6012;        /* do something online first */
  --ez-amber-pale: #F2EEE2;
  --ez-status-app: #4F5C5A;   /* apply at an embassy — the long haul */

  /* Destructive only. Never used to carry status. */
  --ez-red: #9A3B32;
  --ez-red-pale: #F3E6E4;

  /* Neutrals, pulled toward green so the ground reads as paper rather
     than as unconsidered screen grey. */
  --ez-gray-50: #F1F3EE;      /* page ground */
  --ez-gray-100: #E4E8E0;     /* row rule */
  --ez-gray-200: #DADFD6;     /* rule */
  --ez-gray-300: #C6CDC2;     /* control border */
  --ez-gray-400: #9BA69D;
  --ez-gray-500: #6C7673;     /* muted text */
  --ez-gray-600: #5A6460;
  --ez-gray-700: #434D4B;     /* body text */
  --ez-gray-800: #2E3634;
  --ez-gray-900: #1F2624;     /* headings */
  --ez-white: #ffffff;
  --ez-surface: #FBFCFA;      /* cards, nav, rows — sits above the ground */

  --ez-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ez-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ez-radius: 8px;
  --ez-radius-lg: 12px;
  --ez-radius-full: 9999px;
  --ez-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --ez-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --ez-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --ez-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --ez-transition: 150ms ease;
}

html { height: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ez-font);
  font-size: 17px;
  color: var(--ez-gray-700);
  background: var(--ez-gray-50);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Digits line up wherever they stack into a column. */
.ez-table td, .ez-stat-value, .ez-fig-value, .ez-list-stay { font-variant-numeric: tabular-nums; }

a { color: var(--ez-blue); text-decoration: none; transition: color var(--ez-transition); }
a:hover { color: var(--ez-indigo); }

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

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--ez-gray-900);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; letter-spacing: -0.012em; }
p { color: var(--ez-gray-700); }

/* Running prose stays near 66 characters; tables and rows opt out. */
.ez-prose { max-width: 66ch; overflow-wrap: anywhere; }

.text-muted { color: var(--ez-gray-400) !important; }
.text-small { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* --- Layout --- */
.ez-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ez-container-narrow {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ez-section {
  padding: 4rem 0;
}

.ez-section-sm {
  padding: 2rem 0;
}

/* --- Navbar (Public) --- */
.ez-navbar {
  background: var(--ez-surface);
  border-bottom: 1px solid var(--ez-gray-200);
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.ez-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}

.ez-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ez-gray-900) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.ez-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--ez-blue);
  color: white;
  border-radius: var(--ez-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
}

.ez-nav {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ez-nav a {
  padding: 0.55rem 0.85rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ez-gray-600);
  border-radius: var(--ez-radius);
  transition: all var(--ez-transition);
  text-decoration: none;
}

.ez-nav a:hover {
  background: var(--ez-gray-100);
  color: var(--ez-gray-900);
}

.ez-nav a.active {
  color: var(--ez-gray-900);
  font-weight: 600;
  background: var(--ez-blue-pale);
}

/* --- Buttons --- */
.ez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--ez-font);
  border: 1px solid transparent;
  border-radius: var(--ez-radius);
  cursor: pointer;
  transition: all var(--ez-transition);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.ez-btn:focus-visible {
  outline: 2px solid var(--ez-blue);
  outline-offset: 2px;
}

.ez-btn-primary {
  background: var(--ez-blue);
  color: var(--ez-white);
  border-color: var(--ez-blue);
}
.ez-btn-primary:hover { background: var(--ez-indigo); border-color: var(--ez-indigo); color: var(--ez-white); }

.ez-btn-secondary {
  background: var(--ez-surface);
  color: var(--ez-gray-700);
  border-color: var(--ez-gray-300);
}
.ez-btn-secondary:hover { background: var(--ez-gray-50); color: var(--ez-gray-900); }

.ez-btn-danger {
  background: var(--ez-red);
  color: var(--ez-white);
  border-color: var(--ez-red);
}
.ez-btn-danger:hover { background: #7E2F28; border-color: #7E2F28; }

.ez-btn-ghost {
  background: transparent;
  color: var(--ez-gray-600);
  border-color: transparent;
}
.ez-btn-ghost:hover { background: var(--ez-gray-100); color: var(--ez-gray-900); }

.ez-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.ez-btn-lg { padding: 0.8rem 1.6rem; font-size: 1.05rem; }
.ez-btn-full { width: 100%; }
.ez-btn-icon { padding: 0.5rem; aspect-ratio: 1; }

/* --- Cards --- */
.ez-card {
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  padding: 1.5rem;
  transition: box-shadow var(--ez-transition);
}

.ez-card:hover {
  box-shadow: var(--ez-shadow-md);
}

.ez-card-flat {
  box-shadow: none;
}
.ez-card-flat:hover { box-shadow: none; }

.ez-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ez-gray-100);
}

.ez-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

/* --- Forms --- */
.ez-form-group {
  margin-bottom: 1.25rem;
}

.ez-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ez-gray-700);
  margin-bottom: 0.375rem;
}

.ez-label-required::after {
  content: " *";
  color: var(--ez-red);
}

.ez-input, .ez-select, .ez-textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  font-family: var(--ez-font);
  color: var(--ez-gray-900);
  background: var(--ez-white);
  border: 1px solid var(--ez-gray-300);
  border-radius: var(--ez-radius);
  transition: all var(--ez-transition);
  outline: none;
}

.ez-input:focus, .ez-select:focus, .ez-textarea:focus {
  border-color: var(--ez-blue);
  box-shadow: 0 0 0 3px rgba(43, 95, 99, 0.14);
}

.ez-input::placeholder { color: var(--ez-gray-400); }

.ez-textarea { resize: vertical; min-height: 100px; }
.ez-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA69D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; }

.ez-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ez-gray-700);
  cursor: pointer;
}

.ez-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ez-blue);
}

.ez-hint {
  font-size: 0.9rem;
  color: var(--ez-gray-500);
  margin-top: 0.25rem;
}

.ez-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .ez-form-row { grid-template-columns: 1fr; }
}

/* --- Tables --- */
.ez-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
}

.ez-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--ez-surface);
}

.ez-table th {
  text-align: left;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ez-gray-500);
  background: var(--ez-gray-50);
  border-bottom: 1px solid var(--ez-gray-200);
}

.ez-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--ez-gray-100);
  color: var(--ez-gray-700);
}

.ez-table tr:last-child td { border-bottom: none; }
.ez-table tr:hover td { background: var(--ez-gray-50); }

/* --- Badges --- */
.ez-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--ez-radius-full);
  white-space: nowrap;
}

.ez-badge-blue { background: var(--ez-blue-pale); color: var(--ez-blue); }
.ez-badge-green { background: var(--ez-green-pale); color: var(--ez-green); }
.ez-badge-amber { background: var(--ez-amber-pale); color: var(--ez-amber); }
.ez-badge-red { background: var(--ez-red-pale); color: var(--ez-red); }
.ez-badge-gray { background: var(--ez-gray-100); color: var(--ez-gray-600); }
.ez-badge-slate { background: var(--ez-gray-100); color: var(--ez-status-app); }

/* --- Alerts --- */
.ez-alert {
  padding: 1rem 1.15rem;
  border-radius: var(--ez-radius);
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ez-alert-info { background: var(--ez-blue-pale); color: #1F4C50; border: 1px solid #C3D6D5; }
.ez-alert-success { background: var(--ez-green-pale); color: #22543B; border: 1px solid #C2D8C9; }
.ez-alert-warning { background: var(--ez-amber-pale); color: #6E4C0E; border: 1px solid #DFD2B4; }
.ez-alert-error { background: var(--ez-red-pale); color: #7E2F28; border: 1px solid #E0C4C0; }

/* --- Hero --- */
.ez-hero {
  padding: 4.5rem 0 3.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--ez-gray-200);
}

.ez-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin-bottom: 1.1rem;
  max-width: 18ch;
  color: var(--ez-gray-900);
}

.ez-hero p {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ez-gray-600);
  max-width: 54ch;
  margin: 0 0 2rem;
}

.ez-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- Feature Grid --- */
.ez-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}

.ez-feature {
  padding: 1.5rem;
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  transition: all var(--ez-transition);
}

.ez-feature:hover {
  border-color: var(--ez-blue-light);
  box-shadow: var(--ez-shadow-md);
  transform: translateY(-2px);
}

.ez-feature-icon {
  width: 48px;
  height: 48px;
  background: var(--ez-blue-pale);
  color: var(--ez-blue);
  border-radius: var(--ez-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.ez-feature h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.ez-feature p {
  font-size: 0.875rem;
  margin: 0;
}

/* --- Country Grid --- */
.ez-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}

.ez-country-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius);
  text-decoration: none;
  color: var(--ez-gray-900);
  transition: all var(--ez-transition);
}

.ez-country-card:hover {
  border-color: var(--ez-blue-light);
  box-shadow: var(--ez-shadow);
  color: var(--ez-gray-900);
}

.ez-country-flag {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--ez-gray-200);
  background: var(--ez-gray-100);
  flex-shrink: 0;
}

.ez-country-info h4 { font-size: 0.9rem; margin: 0; font-weight: 600; }
.ez-country-info span { font-size: 0.75rem; color: var(--ez-gray-400); }

/* --- Visa Cards --- */
.ez-visa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
}

.ez-visa-card {
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--ez-transition);
}

.ez-visa-card:hover {
  border-color: var(--ez-blue-light);
  box-shadow: var(--ez-shadow-md);
  color: inherit;
}

.ez-visa-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ez-visa-card h3 { font-size: 1rem; margin: 0; }
.ez-visa-card p { font-size: 0.85rem; margin: 0; line-height: 1.5; }

/* --- Auth Card --- */
.ez-auth-page {
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: var(--ez-gray-50);
}

.ez-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ez-white);
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--ez-shadow-lg);
}

.ez-auth-card h1 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.ez-auth-card .ez-auth-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ez-gray-500);
  margin-bottom: 2rem;
}

.ez-auth-footer {
  text-align: center;
  font-size: 0.875rem;
  color: var(--ez-gray-500);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ez-gray-100);
}

/* --- Page Header --- */
.ez-page-header {
  margin-bottom: 2rem;
}

.ez-page-header h1 {
  font-size: 2.1rem;
  margin-bottom: 0.4rem;
}

.ez-page-header p {
  font-size: 1.1rem;
  color: var(--ez-gray-600);
  max-width: 58ch;
  margin: 0;
}

.ez-page-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Breadcrumbs --- */
.ez-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ez-gray-400);
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.ez-breadcrumbs a { color: var(--ez-gray-500); }
.ez-breadcrumbs a:hover { color: var(--ez-blue); }
.ez-breadcrumbs .sep::before { content: "/"; margin: 0 0.125rem; }

/* --- Stats --- */
.ez-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.75rem;
  margin-bottom: 2rem;
}

/* Flex so the number always reads before its label, whichever order the markup
   happens to use — the views disagree, and the number is the point. */
.ez-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ez-stat-label {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ez-gray-500);
  margin-top: 0.4rem;
  order: 2;
}

.ez-stat-value {
  order: 1;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ez-gray-900);
}

/* --- Empty State --- */
.ez-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ez-gray-400);
}

.ez-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ez-empty h3 { color: var(--ez-gray-600); font-size: 1.2rem; margin-bottom: 0.5rem; }
.ez-empty p { font-size: 1rem; margin-bottom: 1.5rem; }

/* --- Tabs --- */
.ez-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ez-gray-200);
  margin-bottom: 1.5rem;
}

.ez-tab {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ez-gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ez-transition);
}

.ez-tab:hover { color: var(--ez-gray-900); }
.ez-tab.active { color: var(--ez-blue); border-bottom-color: var(--ez-blue); }

/* --- Detail Grid --- */
.ez-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

.ez-detail-item label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ez-gray-400);
  display: block;
  margin-bottom: 0.125rem;
}

.ez-detail-item span {
  font-size: 0.9rem;
  color: var(--ez-gray-800);
  font-weight: 500;
}

/* --- Footer --- */
.ez-footer {
  background: var(--ez-gray-900);
  color: var(--ez-gray-400);
  padding: 3rem 1.5rem;
  margin-top: auto;
}

.ez-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.ez-footer-brand {
  color: var(--ez-white);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ez-footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ez-footer-links a {
  color: var(--ez-gray-400);
  font-size: 0.875rem;
}

.ez-footer-links a:hover { color: var(--ez-white); }

.ez-footer-copy {
  font-size: 0.8125rem;
  color: var(--ez-gray-500);
  border-top: 1px solid var(--ez-gray-800);
  margin-top: 2rem;
  padding-top: 1.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Dashboard Layout --- */
.ez-dash-wrap {
  display: flex;
  min-height: 100vh;
}

.ez-sidebar {
  width: 240px;
  background: var(--ez-gray-900);
  color: var(--ez-gray-300);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.ez-sidebar-brand {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--ez-gray-700);
  margin-bottom: 0.5rem;
}

.ez-sidebar-brand a {
  color: var(--ez-white);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ez-sidebar-section {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ez-gray-500);
  padding: 1rem 1.25rem 0.375rem;
  font-weight: 600;
}

.ez-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ez-gray-400);
  text-decoration: none;
  transition: all var(--ez-transition);
}

.ez-sidebar-link:hover {
  background: var(--ez-gray-800);
  color: var(--ez-white);
}

.ez-sidebar-link.active {
  background: var(--ez-gray-800);
  color: var(--ez-white);
  border-left: 3px solid var(--ez-blue);
}

.ez-sidebar-link i { width: 16px; text-align: center; font-size: 0.8rem; }

.ez-sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ez-gray-700);
  font-size: 0.8125rem;
}

.ez-dash-main {
  flex: 1;
  margin-left: 240px;
  min-width: 0;
}

.ez-topbar {
  background: var(--ez-white);
  border-bottom: 1px solid var(--ez-gray-200);
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.ez-topbar h1 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.ez-topbar-user {
  font-size: 0.8125rem;
  color: var(--ez-gray-500);
}

.ez-dash-content {
  padding: 1.75rem 2rem;
}

/* --- Utility --- */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.hidden { display: none; }
.w-full { width: 100%; }

/* --- Checklist --- */
.ez-checklist {
  list-style: none;
  padding: 0;
}

.ez-checklist li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--ez-gray-100);
  font-size: 0.875rem;
}

.ez-checklist li:last-child { border-bottom: none; }

.ez-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.ez-check-yes { background: var(--ez-green-pale); color: var(--ez-green); }
.ez-check-no { background: var(--ez-gray-100); color: var(--ez-gray-400); }

/* --- Responsive --- */
@media (max-width: 768px) {
  .ez-hero h1 { font-size: 2rem; }
  .ez-hero { padding: 3rem 1.5rem; }
  .ez-features { grid-template-columns: 1fr; }
  .ez-visa-grid { grid-template-columns: 1fr; }
  .ez-country-grid { grid-template-columns: 1fr 1fr; }
  .ez-stats { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }
  .ez-sidebar { display: none; }
  .ez-dash-main { margin-left: 0; }
}

@media (max-width: 480px) {
  .ez-country-grid { grid-template-columns: 1fr; }
  .ez-form-row { grid-template-columns: 1fr; }
}

/* ── Clickable feature tiles (traveller hub) ─────────────────────────────── */
a.ez-feature {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

a.ez-feature:hover {
  border-color: var(--ez-blue);
  box-shadow: 0 4px 12px rgba(31, 38, 36, 0.08);
  transform: translateY(-2px);
}

/* ============================================================
   Still Water components — plan 015
   ============================================================ */

/* --- Navigation chrome (right of the bar) -------------------
   The passport chip makes the input to every number on screen
   visible and switchable. An account with no nationality can
   compute nothing, so that state has to be legible here.
   ------------------------------------------------------------ */
.ez-nav-chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.ez-passport {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ez-gray-900) !important;
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-300);
  border-radius: var(--ez-radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ez-transition);
}

.ez-passport:hover { border-color: var(--ez-blue); }

.ez-passport-iso {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--ez-radius-full);
  background: var(--ez-blue-pale);
  color: var(--ez-blue);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Nationality not set: the one state that makes the product return nothing. */
.ez-passport-unset {
  border-color: var(--ez-amber);
  background: var(--ez-amber-pale);
  color: var(--ez-amber) !important;
  padding-left: 0.8rem;
}

.ez-setup {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ez-amber) !important;
  background: var(--ez-amber-pale);
  border-radius: var(--ez-radius-full);
  text-decoration: none;
  white-space: nowrap;
}

.ez-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--ez-radius-full);
  background: var(--ez-blue-pale);
  color: var(--ez-blue) !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
}

.ez-avatar:hover { background: var(--ez-blue); color: var(--ez-surface) !important; }

/* --- The answer block --------------------------------------- */
.ez-answer {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--ez-gray-200);
  margin-bottom: 2rem;
}

.ez-answer h1 {
  max-width: 26ch;
  margin-bottom: 0.9rem;
}

.ez-answer-said {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ez-gray-600);
  max-width: 60ch;
  margin: 0;
}

.ez-answer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.ez-held {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  font-size: 0.9rem;
  border-radius: var(--ez-radius-full);
  background: var(--ez-blue-pale);
  color: var(--ez-blue);
}

/* --- Grouped destination list ------------------------------- */
.ez-group {
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--ez-gray-200);
}

.ez-group:last-of-type { border-bottom: 0; }

.ez-group-head { margin-bottom: 1.1rem; }

.ez-group-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 1.3rem;
  margin: 0;
}

.ez-group-count {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ez-gray-500);
}

.ez-group-head p {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  color: var(--ez-gray-500);
  max-width: 54ch;
}

.ez-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--ez-radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.ez-list { display: flex; flex-direction: column; }

.ez-list-row {
  display: grid;
  grid-template-columns: 1fr 8.5rem 13.5rem;
  gap: 1.5rem;
  align-items: center;
  padding: 1.05rem 1.1rem;
  border-top: 1px solid var(--ez-gray-100);
  background: var(--ez-surface);
  text-decoration: none;
  color: inherit;
}

.ez-list-row:last-child { border-bottom: 1px solid var(--ez-gray-100); }
.ez-list-row:hover { background: var(--ez-gray-50); color: inherit; }

/* Two-column variant for the browse lists, which have no status column. */
.ez-list-row.ez-list-row-simple { grid-template-columns: 1fr auto; }

.ez-list-name {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ez-gray-900);
}

.ez-list-sub {
  font-size: 0.92rem;
  color: var(--ez-gray-500);
  margin-top: 0.1rem;
}

.ez-list-stay {
  font-size: 1.05rem;
  color: var(--ez-gray-700);
  white-space: nowrap;
}

.ez-list-stay span { font-size: 0.9rem; color: var(--ez-gray-500); }

/* Status pill. Outlined in the status colour, and always carrying the
   words — colour alone is not an encoding. */
.ez-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: var(--ez-radius-full);
  white-space: nowrap;
}

.ez-pill .ez-dot { width: 0.5rem; height: 0.5rem; }

.ez-pill-go  { color: var(--ez-green); }
.ez-pill-arr { color: var(--ez-green); }
.ez-pill-pre { color: var(--ez-amber); }
.ez-pill-app { color: var(--ez-status-app); }

.ez-text-go  { color: var(--ez-green); }
.ez-text-arr { color: var(--ez-green); }
.ez-text-pre { color: var(--ez-amber); }
.ez-text-app { color: var(--ez-status-app); }

/* --- Unlock panel ------------------------------------------- */
.ez-unlock {
  padding: 1.9rem 1.5rem;
  background: var(--ez-gray-100);
  border-radius: var(--ez-radius-lg);
  margin: 2rem 0;
}

.ez-unlock h2 { font-size: 1.3rem; margin: 0; }

.ez-unlock > p {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  color: var(--ez-gray-600);
  max-width: 56ch;
}

.ez-offer {
  padding: 1.15rem 0 0;
  margin-top: 1.15rem;
  border-top: 1px solid var(--ez-gray-200);
}

.ez-offer-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.ez-offer-head strong { font-size: 1.08rem; color: var(--ez-gray-900); }

.ez-offer-plus {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ez-amber);
}

.ez-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ez-chip {
  padding: 0.42rem 0.85rem;
  font-size: 0.95rem;
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-full);
  background: var(--ez-surface);
  color: var(--ez-gray-700);
  text-decoration: none;
}

a.ez-chip:hover { border-color: var(--ez-blue); color: var(--ez-blue); }
.ez-chip strong { font-weight: 600; color: var(--ez-gray-900); }

/* --- Collapsed group (native <details>, no script) ----------- */
.ez-more { border-top: 1px solid var(--ez-gray-200); }

.ez-more > summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
}

.ez-more > summary::-webkit-details-marker { display: none; }

.ez-more > summary h2 { font-size: 1.2rem; margin: 0; }
.ez-more > summary p { margin: 0.15rem 0 0; font-size: 1rem; color: var(--ez-gray-500); }

.ez-more-open {
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ez-blue);
  white-space: nowrap;
}

.ez-more > summary:focus-visible { outline: 2px solid var(--ez-blue); outline-offset: 3px; }
.ez-more[open] > summary .ez-more-open::after { content: " \2715"; }

/* --- Footnote ----------------------------------------------- */
.ez-note {
  padding: 1.4rem 0 0;
  font-size: 0.95rem;
  color: var(--ez-gray-500);
  max-width: 62ch;
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 760px) {
  .ez-list-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1rem;
  }
  .ez-answer h1 { max-width: none; }
  .ez-stats { gap: 1.75rem; }
  .ez-stat-value { font-size: 2.1rem; }
  .ez-nav-chrome { gap: 0.4rem; }
}

/* ============================================================
   World access map — plan 016
   Leaflet choropleth over OpenStreetMap tiles.
   ============================================================ */
.ez-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ez-map-canvas {
  height: clamp(320px, 52vh, 560px);
  width: 100%;
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  background: var(--ez-gray-100);
  z-index: 0; /* keep Leaflet panes under the sticky navbar */
}

.ez-map.is-loading .ez-map-canvas { opacity: 0.6; }

.ez-map.is-failed .ez-map-canvas { display: none; }

/* Leaflet paints its own chrome; bring it back to the type system. */
.ez-map .leaflet-container {
  font-family: var(--ez-font);
  font-size: 0.9rem;
  background: var(--ez-gray-100);
}

.ez-map .leaflet-control-attribution {
  background: rgba(251, 252, 250, 0.85);
  color: var(--ez-gray-500);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.ez-map .leaflet-control-attribution a { color: var(--ez-blue); }

.ez-map .leaflet-bar a {
  color: var(--ez-gray-800);
  background: var(--ez-surface);
  border-bottom-color: var(--ez-gray-200);
}

.ez-map .leaflet-bar a:hover { background: var(--ez-gray-50); }

/* Tooltip: two lines, the country and what it asks of you. */
.ez-map-tip {
  background: var(--ez-gray-900);
  border: 0;
  border-radius: var(--ez-radius);
  box-shadow: 0 6px 18px rgba(31, 38, 36, 0.22);
  padding: 0.5rem 0.75rem;
  color: var(--ez-white);
}

.ez-map-tip::before { display: none; }
.ez-map-tip strong { display: block; font-size: 0.95rem; font-weight: 600; }
.ez-map-tip span { display: block; font-size: 0.85rem; opacity: 0.78; margin-top: 0.1rem; }

/* Legend doubles as a count, so the map answers "how many" as well as "where". */
.ez-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.ez-map-key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--ez-gray-600);
}

.ez-map-key i {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.ez-map-key b {
  font-weight: 600;
  color: var(--ez-gray-900);
  font-variant-numeric: tabular-nums;
}

.ez-map-status {
  font-size: 0.95rem;
  color: var(--ez-gray-600);
}

.ez-map-status-warn { color: var(--ez-amber); }
.ez-map-status-error { color: var(--ez-red); }

@media (max-width: 760px) {
  .ez-map-canvas { height: 320px; }
}

/* --- "Where to next?" ---------------------------------------
   The map answers "where can I go". This answers the question
   people actually arrive with, which is the other way round.
   ------------------------------------------------------------ */
.ez-next {
  margin: 2rem 0;
  padding: 1.75rem;
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
}

.ez-next-head h2 { font-size: 1.45rem; margin: 0; }

.ez-next-head p {
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
  color: var(--ez-gray-600);
  max-width: 62ch;
}

.ez-next-pick { margin-top: 1.25rem; max-width: 24rem; }
.ez-next-pick .ez-hint { margin-top: 0.4rem; }

.ez-next-answer {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ez-gray-200);
}

.ez-next-answer h3 { font-size: 1.5rem; margin: 0; }
.ez-next-verdict { margin: 0.75rem 0 0; }

.ez-next-note {
  margin: 0.75rem 0 0;
  color: var(--ez-gray-600);
  max-width: 60ch;
}

.ez-next-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.1rem 2rem;
  margin: 1.4rem 0 0;
}

.ez-next-facts > div { display: flex; flex-direction: column; gap: 0.2rem; }

.ez-next-facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ez-gray-500);
}

.ez-next-facts dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ez-gray-800);
  overflow-wrap: anywhere;
}

.ez-next-more { margin: 1.5rem 0 0; }

/* The full list, folded away under the map. */
.ez-listing { margin-top: 2rem; }
.ez-listing > summary h2 { font-size: 1.3rem; }
.ez-listing .ez-group:first-of-type { padding-top: 0.5rem; }
.ez-listing .ez-group:last-of-type { border-bottom: 0; padding-bottom: 0.5rem; }
.ez-listing .ez-group-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
}

/* --- Country and visa detail pages ---------------------------- */
.ez-country-title { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.ez-country-flag-lg {
  width: 72px;
  height: 50px;
  border-radius: 6px;
}

/* The answer, before any supporting detail. */
.ez-verdict {
  margin: 0 0 2rem;
  padding: 1.75rem;
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
}

.ez-verdict-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.ez-verdict-head h2 { font-size: 1.3rem; margin: 0; }
.ez-verdict .ez-next-facts { margin-top: 1.4rem; }

.ez-verdict-quiet {
  background: var(--ez-gray-100);
  border-color: transparent;
}

.ez-verdict-quiet p { margin: 0; color: var(--ez-gray-600); max-width: 66ch; }

/* Document checklist on a visa page. */
.ez-docs { list-style: none; padding: 0; margin: 1.25rem 0 0; }

.ez-docs li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ez-gray-100);
}

.ez-docs li:last-child { border-bottom: 0; }

.ez-docs .ez-doc-mark {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ez-radius-full);
  background: var(--ez-blue-pale);
  color: var(--ez-blue);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.1rem;
}

.ez-docs b { display: block; color: var(--ez-gray-900); font-weight: 600; }
.ez-docs span { color: var(--ez-gray-600); font-size: 0.95rem; }

/* Collapsible question, used for FAQs on a permit page. */
.ez-faq { border-bottom: 1px solid var(--ez-gray-100); }
.ez-faq:last-of-type { border-bottom: 0; }

.ez-faq > summary {
  padding: 1rem 0;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ez-gray-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.ez-faq > summary::-webkit-details-marker { display: none; }
.ez-faq > summary::after { content: "+"; color: var(--ez-blue); font-weight: 600; }
.ez-faq[open] > summary::after { content: "‘2"; }
.ez-faq > summary:focus-visible { outline: 2px solid var(--ez-blue); outline-offset: 3px; }
.ez-faq > p { padding-bottom: 1.1rem; }

/* A way out of the "check your email" dead end, on login and activation. */
.ez-resend {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ez-gray-100);
}

.ez-resend p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--ez-gray-600);
}

.ez-resend form { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   Finding things — plan 022

   A 200-row list is only navigable if you can type at it, so
   every long list on the platform gets the same search field
   and the same behaviour (wwwroot/js/site.js).
   ============================================================ */

.ez-search {
  margin-bottom: 1.25rem;
  max-width: 26rem;
}

.ez-search-field {
  position: relative;
}

/* The magnifier is decorative; the label above it carries the meaning. */
.ez-search-field::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  pointer-events: none;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C7673' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.ez-search-field .ez-input { padding-left: 2.6rem; }

/* Safari paints its own clear button and cancel affordance on type=search. */
.ez-search-field input[type="search"]::-webkit-search-decoration,
.ez-search-field input[type="search"]::-webkit-search-results-button { display: none; }

.ez-search-count {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--ez-gray-500);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Searchable select (combobox) — plan 022

   Built over a plain <select> at runtime, so the markup stays
   a <select> and the form posts the same value it always did.
   ============================================================ */

.ez-combo { position: relative; }

.ez-combo-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-300);
  border-radius: var(--ez-radius);
  box-shadow: 0 10px 26px rgba(31, 38, 36, 0.14);
}

.ez-combo-option {
  padding: 0.55rem 0.7rem;
  border-radius: var(--ez-radius);
  font-size: 1rem;
  color: var(--ez-gray-800);
  cursor: pointer;
}

.ez-combo-option:hover,
.ez-combo-option.is-active { background: var(--ez-blue-pale); color: var(--ez-indigo); }
.ez-combo-option.is-chosen { font-weight: 600; }

/* ============================================================
   Country index beside the map — plan 022

   The map cannot show Singapore or Malta at world zoom, and
   cuts the countries at its edges in half. The list is the
   other half of the same control: every destination by name,
   searchable, and clickable whether or not it can be drawn.
   ============================================================ */

.ez-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.25rem;
  align-items: start;
}

.ez-map-index {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  background: var(--ez-surface);
  border: 1px solid var(--ez-gray-200);
  border-radius: var(--ez-radius-lg);
  min-width: 0;
}

.ez-map-index .ez-search { margin-bottom: 0; max-width: none; }

.ez-index {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Matches the map canvas, so the two halves read as one control. */
  max-height: clamp(260px, 44vh, 470px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ez-index > li { border-top: 1px solid var(--ez-gray-100); }
.ez-index > li:first-child { border-top: 0; }

.ez-index a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.35rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ez-radius);
}

.ez-index a:hover { background: var(--ez-gray-50); color: inherit; }
.ez-index a:focus-visible { outline: 2px solid var(--ez-blue); outline-offset: 1px; }
.ez-index li.is-active a { background: var(--ez-blue-pale); }

.ez-index-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  flex: 0 0 auto;
  background: var(--ez-gray-200);
}

.ez-index-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  color: var(--ez-gray-900);
  overflow-wrap: anywhere;
}

.ez-index-iso {
  flex: 0 0 auto;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ez-gray-400);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .ez-map-layout { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the list must not become the whole page. */
  .ez-index { max-height: 17rem; }
}

/* ============================================================
   Password requirements — plan 022

   Stated before anything is typed, and marked off as each one
   is met, so the rules are never discovered by being rejected.
   ============================================================ */

/* Carries state that is otherwise only in a CSS glyph, which no screen
   reader reads. */
.ez-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ez-pw { margin-top: 0.6rem; }

.ez-pw-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0.2rem 1rem;
}

.ez-pw-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ez-gray-500);
}

/* The mark is the state. Colour alone never carries it: the glyph changes
   from a dot to a tick, and the text to the rule being satisfied. */
.ez-pw-rule::before {
  content: "\2022";
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  border-radius: var(--ez-radius-full);
  background: var(--ez-gray-100);
  color: var(--ez-gray-400);
  font-size: 0.7rem;
  line-height: 1;
}

.ez-pw-rule.is-met {
  color: var(--ez-green);
}

.ez-pw-rule.is-met::before {
  content: "\2713";
  background: var(--ez-green-pale);
  color: var(--ez-green);
}

.ez-pw-rule.is-unmet {
  color: var(--ez-red);
}

.ez-pw-rule.is-unmet::before {
  background: var(--ez-red-pale);
  color: var(--ez-red);
}

.ez-pw-match {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.ez-pw-match.is-met { color: var(--ez-green); }
.ez-pw-match.is-unmet { color: var(--ez-red); }

/* ============================================================
   Small-screen hardening — plan 022

   The country page broke out of the viewport on a phone, which
   left the whole document scrolling sideways. The causes were
   fixed-minimum grid tracks (above) and unbreakable values.
   ============================================================ */

@media (max-width: 560px) {
  .ez-container, .ez-container-narrow { padding: 0 1.1rem; }
  .ez-section { padding: 2.5rem 0; }
  .ez-verdict, .ez-next, .ez-unlock { padding: 1.25rem; }
  .ez-page-header h1 { font-size: 1.6rem; }
  .ez-country-title { gap: 0.9rem; }
  .ez-verdict-head { gap: 0.6rem; }
  .ez-stats { gap: 1.25rem 2rem; }
}

/* A long word -- a URL, an email, a place name in a language that does not
   hyphenate -- must wrap rather than widen the page. */
.ez-list-name,
.ez-list-sub,
.ez-alert,
.ez-verdict-head h2,
.ez-group-head p { overflow-wrap: anywhere; }

/* ============================================================
   Header on a phone — plan 022

   The header was one non-wrapping flex row at a fixed 68px:
   logo, up to four nav links, the passport chip and two or
   three buttons. On a phone that content is wider than the
   viewport, and because nothing wrapped or scrolled it widened
   the document itself — which is why every page, and a long
   country page most of all, scrolled sideways.
   ============================================================ */

@media (max-width: 760px) {
  .ez-navbar { padding: 0 1rem; }

  .ez-navbar-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    padding: 0.7rem 0;
  }

  /* The links take a row of their own and scroll within it, so a fifth link
     never widens the page. */
  .ez-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 0.15rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ez-nav::-webkit-scrollbar { display: none; }
  .ez-nav a { white-space: nowrap; padding: 0.5rem 0.65rem; }

  .ez-nav-chrome {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* The chip keeps the code, which is the part that identifies the passport;
     the words beside it are what make it 180px wide. */
  .ez-passport > span:not(.ez-passport-iso) { display: none; }
  .ez-passport { padding: 0.3rem; }

  /* Signed in as an admin the chrome carries four controls. Trimmed like this
     they stay on one line down to a 360px phone, which keeps a sticky header
     from taking a fifth of the screen. */
  .ez-navbar-inner { gap: 0.4rem 0.6rem; }
  .ez-nav-chrome { gap: 0.3rem; }
  .ez-nav-chrome .ez-btn-sm { padding: 0.4rem 0.65rem; }

  .ez-footer-inner { gap: 1.5rem; }
}

/* ============================================================
   Divider between two ways of doing the same thing — plan 023

   Sits between "log in with a password" and "email me a code",
   which are alternatives rather than steps.
   ============================================================ */
.ez-or {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.25rem 0;
  font-size: 0.9rem;
  color: var(--ez-gray-500);
}

.ez-or::before,
.ez-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ez-gray-200);
}

/* Buttons are nowrap by default, which is right for a verb and wrong for a label
   that contains somebody's email address. */
.ez-btn-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}