/* safe-travel ("דרך צלחה"): sister app of tension-index and quiet-moment, same broadsheet language.
   Paper and ink, rules instead of boxes, Frank Ruhl Libre for headlines and numerals, IBM Plex Sans Hebrew for text.
   The one accent is a calm harbour blue. No colour carries meaning on its own: every warning level is a number and words.
   Mobile first, logical properties for RTL/LTR. Colour pairs are checked for WCAG AA (see docs/A11Y.md). */

/* ---------- fonts (self-hosted, SIL OFL 1.1, licences in /fonts) ---------- */
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/frl-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/frl-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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-hebrew-400.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-hebrew-600.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plex-latin-400.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: "IBM Plex Sans Hebrew";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plex-latin-600.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;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f6f4ee;          /* newsprint, same paper as the sister app */
  --surface-2: #ebe8df;
  --text: #161512;        /* ink */
  --text-2: #46433c;
  --muted: #5d5a51;       /* 6.0:1 on --bg */
  --line: #d6d2c6;        /* hairline */
  --rule: #161512;        /* heavy section rule */
  --axis: #8a8578;
  --accent: #24587a;      /* harbour blue: links on hover, current page, primary actions on hover */
  --accent-ink: #ffffff;
  --accent-soft: #e2ebf1;
  --accent-ring: #24587a;
  --bad: #9b1c22;         /* form error text only, always with words: 7.4:1 on --bg */
  --focus: #24587a;
  --radius: 2px;
  --gutter: 16px;
  --serif: "Frank Ruhl Libre", "Times New Roman", Georgia, "Noto Serif Hebrew", serif;
  --sans: "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Hebrew", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121417;
    --surface-2: #1f2328;
    --text: #e9e7e0;
    --text-2: #c0bcb1;
    --muted: #a29e93;
    --line: #353733;
    --rule: #e9e7e0;
    --axis: #6d6a62;
    --accent: #8fc0de;
    --accent-ink: #121417;
    --accent-soft: #1d2a33;
    --accent-ring: #8fc0de;
    --bad: #e8877e;
    --focus: #8fc0de;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121417;
  --surface-2: #1f2328;
  --text: #e9e7e0;
  --text-2: #c0bcb1;
  --muted: #a29e93;
  --line: #353733;
  --rule: #e9e7e0;
  --axis: #6d6a62;
  --accent: #8fc0de;
  --accent-ink: #121417;
  --accent-soft: #1d2a33;
  --accent-ring: #8fc0de;
  --bad: #e8877e;
  --focus: #8fc0de;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

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

a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: var(--axis);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
  color: var(--text);
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.4rem, 1.25rem + 0.7vw, 1.75rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.4rem;
}

p {
  margin: 0 0 0.9rem;
}

strong {
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -80px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 100;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* ---------- masthead ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding-block: 10px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  margin-inline-end: auto;
  min-height: 44px;
}

.brand:hover {
  color: var(--text);
}

.brand svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.mark-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

.mark-core {
  fill: var(--accent);
}

.controls {
  display: flex;
  gap: 6px;
  order: 2;
}

.nav {
  order: 3;
  flex-basis: 100%;
}

/* phones: a grid of short links (three columns at normal text size) */
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* three columns on a phone; fewer when the text is enlarged, so nothing is pushed off screen */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5em), 1fr));
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px 5px;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.25;
}

.nav a:hover {
  color: var(--text);
  border-bottom-color: var(--line);
}

.nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

@media (min-width: 960px) {
  .site-header .wrap {
    padding-block: 0;
  }

  .nav {
    order: 1;
    flex-basis: auto;
    margin-inline-end: auto;
  }

  .nav ul {
    display: flex;
    gap: 0 4px;
  }

  .nav a {
    padding: 20px 8px 17px;
  }

  .brand {
    margin-inline-end: 12px;
  }
}

/* ---------- buttons ---------- */
.icon-btn,
.btn {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--radius);
  min-height: 44px;
  min-width: 44px;
  padding: 8px 18px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.25;
}

.icon-btn {
  padding-inline: 10px;
  border-color: var(--axis);
  font-size: 0.9375rem;
}

.btn.primary {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
}

.btn:hover,
.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.btn.primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.big {
  min-height: 64px;
  font-size: 1.25rem;
  padding: 12px 28px;
  width: 100%;
}

@media (min-width: 600px) {
  .btn.big { width: auto; min-width: 20rem; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block: 14px;
}

/* ---------- page head and the Home Front Command line ---------- */
.page-head {
  padding-block: 28px 4px;
}

@media (min-width: 768px) {
  .page-head { padding-block: 44px 8px; }
}

.page-head p,
.lead {
  color: var(--text-2);
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

/* An editor's note between two hairlines: no fill, no coloured stripe. */
.notice {
  color: var(--text-2);
  border-block: 1px solid var(--line);
  padding: 10px 0;
  margin-block: 12px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 43rem;
}

.notice a {
  color: var(--text);
  font-weight: 600;
}

.meta {
  color: var(--muted);
  font-size: 0.875rem;
  margin-block: 4px 16px;
}

/* an item still being checked against its official source (Chen 9.11): the words carry the meaning, not colour */
.pending {
  margin-block: 6px 12px;
  padding: 6px 10px;
  border-inline-start: 3px solid var(--muted);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 43rem;
}

.pending strong {
  font-weight: 600;
}

/* ---------- sections: rules instead of cards ---------- */
.section {
  border-top: 2px solid var(--rule);
  padding-top: 14px;
  margin-block: 28px 36px;
  max-width: 46rem;
}

.section > h2:first-child {
  margin-top: 0;
}

/* ---------- home ---------- */
.start {
  padding-block: 8px 12px;
}

.start p {
  max-width: 34rem;
}

.paths {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 2px solid var(--rule);
  max-width: 46rem;
}

.paths li {
  border-bottom: 1px solid var(--line);
}

.paths a {
  display: block;
  padding: 14px 0;
  text-decoration: none;
  min-height: 44px;
}

.paths a strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.3;
}

.paths a span {
  display: block;
  color: var(--text-2);
  font-size: 0.9875rem;
}

.paths a:hover strong {
  color: var(--accent);
}

/* ---------- prose pages ---------- */
.prose {
  max-width: 44rem;
  padding-block: 16px 40px;
}

.prose > div > h1:first-child,
.prose > h1:first-child {
  margin-top: 28px;
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .prose > div > h1:first-child,
  .prose > h1:first-child { margin-top: 44px; }
}

.prose h2 {
  margin-top: 2.2rem;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.prose p,
.prose li,
.prose dd {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.prose ul,
.prose ol {
  padding-inline-start: 22px;
}

.prose li {
  margin-bottom: 6px;
}

.prose ol li::marker {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text-2);
}

.prose a {
  overflow-wrap: anywhere;
}

/* sources line at the end of every content screen */
.sources {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.sources h2 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  border-top: 0;
  padding-top: 0;
  margin: 0 0 6px;
}

.sources ul {
  padding-inline-start: 20px;
  margin: 0 0 6px;
}

.sources li {
  font-size: 0.9375rem;
  margin-bottom: 4px;
}

.sources p {
  font-size: 0.9375rem;
}

/* ---------- more apps ---------- */
.apps-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.apps-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-block: 12px;
}

.apps-list svg {
  width: 40px;
  height: 40px;
  flex: none;
  margin-top: 4px;
}

.apps-list h2,
.apps-list h3 {
  margin: 0 0 2px;
  padding-top: 0;
  border-top: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.apps-list p {
  margin: 0 0 4px;
}

.apps-list a {
  display: inline-block;
  padding-block: 10px;
  min-width: 44px;
  text-align: center;
}

.mark-peak {
  fill: #9b1c22;
}

:root[data-theme="dark"] .mark-peak { fill: #e8877e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark-peak { fill: #e8877e; }
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 48px;
  border-top: 2px solid var(--rule);
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.875rem;
}

.site-footer .wrap {
  padding-block: 16px 32px;
}

/* who built it: one quiet line under the footer links, as in the sister apps */
.maker-line {
  margin: 10px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.maker-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-weight: 600;
}

/* footer credit, level 2 (Chen 9.11, same as tension-index): small photo + line + Facebook icon */
.maker-line {
  display: flex;
  align-items: center;
  gap: 6px 10px;
}

.maker-line .maker-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.maker-mini {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.maker-line .maker-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none; /* keeps the 44 x 44 touch target when the line is narrow */
  width: 44px;
  height: 44px;
  margin-inline-start: -6px;
}

.maker-line .maker-fb svg {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

/* new-tab marking: the Facebook icon says "opens in a new tab" in its label, so it gets no visible arrow;
   the who-link's arrow sits after its last word, inside the text, not after the photo-and-text box */
.maker-line .maker-fb::after,
.maker-line .maker-who::after {
  content: none !important;
}

.maker-line .maker-who[data-ext] > span:not(.ext-note)::after {
  content: "\2060\00a0\2197";
  content: "\2060\00a0\2197" / "";
  font-size: 0.8em;
}

[dir="rtl"] .maker-line .maker-who[data-ext] > span:not(.ext-note)::after {
  content: "\2060\00a0\2196";
  content: "\2060\00a0\2196" / "";
}

.site-footer .oref {
  margin-bottom: 10px;
  max-width: 43rem;
  font-size: 0.9375rem;
}

.site-footer .oref a {
  color: var(--text);
  font-weight: 600;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.footer-links a {
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

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

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

/* Without JavaScript the toggles and the country filter cannot work, so they are not shown.
   The inline script in <head> adds .js to <html>; the written instructions stay. */
html:not(.js) .controls,
html:not(.js) [data-filter] {
  display: none !important;
}


html:not(.js) [data-js-only],
html:not(.js) .fb-form {
  display: none !important;
}

html.js .fb-nojs {
  display: none !important;
}

/* ---------- links that open in a new tab: a small arrow (mirrored in Hebrew), as in the sister apps ---------- */
a[data-ext]:not(.btn)::after {
  content: "\2197";
  content: "\2197" / "";
  display: inline-block;
  margin-inline-start: 0.2em;
  font-size: 0.8em;
  text-decoration: none;
}

[dir="rtl"] a[data-ext]:not(.btn)::after {
  transform: scaleX(-1);
}

/* ---------- ideas and bug reports (/feedback): the same form as the sister app tension-index ---------- */
.fb-form {
  border-top: 2px solid var(--rule);
  padding-top: 14px;
  margin-block: 8px 24px;
  max-width: 40rem;
}

.fb-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}

.fb-form legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 4px;
}

.fb-kinds label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

.fb-kinds input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-block: 12px;
}

.field label {
  font-weight: 600;
}

.prose .field .hint,
.field .hint {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.fb-form textarea,
.fb-form input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--muted); /* 3:1 and more against the page, light and dark */
  border-radius: var(--radius);
  padding: 8px 12px;
  min-height: 44px;
  width: 100%;
  max-width: 36rem;
}

.fb-form textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

.fb-form textarea:hover,
.fb-form input[type="text"]:hover {
  border-color: var(--text-2);
}

.btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* honeypot for bots: off-screen, never focusable */
.fb-hp {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status {
  min-height: 1.5em;
  color: var(--text-2);
  margin-block: 8px;
  font-weight: 600;
}

.status.ok {
  color: var(--accent);
}

.status.error {
  color: var(--bad);
}

/* ---------- print: black on white, no controls, a footer with a QR code to the home page ---------- */
.print-foot {
  display: none;
}

@media print {
  @page {
    margin: 14mm 12mm;
  }

  :root,
  :root[data-theme] {
    color-scheme: light;
    --bg: #fff !important;
    --surface-2: #fff !important;
    --text: #000 !important;
    --text-2: #000 !important;
    --muted: #333 !important;
    --line: #888 !important;
    --rule: #000 !important;
    --axis: #555 !important;
    --accent: #000 !important;
    --accent-soft: #fff !important;
    --accent-ring: #000 !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    display: block;
    min-height: 0;
    font-size: 11pt;
    line-height: 1.45;
  }

  .skip,
  .site-header .controls,
  .nav,
  .btn-row,
  button,
  .footer-links,
  .maker-line,
  [data-filter],
  .fb-form {
    display: none !important;
  }

  .site-header {
    border-bottom: 1px solid #000;
  }

  .brand {
    min-height: 0;
    padding-block: 0 4px;
  }

  .site-footer {
    margin-top: 6mm;
    border-top: 1px solid #000;
  }

  .site-footer .wrap {
    padding-block: 3mm 0;
  }

  a {
    color: #000 !important;
  }

  a[data-ext]::after {
    content: none !important;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  li,
  tr,
  .official,
  .warn-head,
  .dests li,
  .apps-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  /* tables print whole: no scroll box on paper */
  .table-wrap {
    overflow: visible !important;
  }

  table.data th,
  table.data td {
    border-color: #000 !important;
  }

  /* the dates of the live data and of the last check are part of the printout */
  .meta,
  .checked {
    color: #000 !important;
  }

  .print-foot {
    display: flex !important;
    align-items: center;
    gap: 6mm;
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 1px solid #000;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pf-qr svg {
    display: block;
    width: 3cm;
    height: 3cm;
  }

  .print-foot p {
    margin: 0 0 1mm;
    color: #000;
  }

  .pf-name {
    font-family: var(--serif);
    font-size: 15pt;
    font-weight: 700;
  }

  .pf-url {
    font-size: 11pt;
    text-align: start;
  }

  .pf-scan,
  .pf-date {
    font-size: 9.5pt;
  }
}

/* ---------- live data: key numbers ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0;
  margin: 8px 0 14px;
  border-top: 2px solid var(--rule);
}

.stats > div {
  border-bottom: 1px solid var(--line);
  padding: 10px 0 8px;
  padding-inline-end: 12px;
}

.stats dt {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.stats dd {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stats .approx {
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-2);
}

/* ---------- tables ---------- */
/* A data table may scroll on its own when text is very large (WCAG 1.4.10 allows it for tables); the page never does. */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 8px;
  font-size: 0.9375rem;
  line-height: 1.4;
}

table.data caption {
  text-align: start;
  font-weight: 600;
  padding-bottom: 6px;
}

table.data th,
table.data td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

table.data thead th {
  border-bottom: 2px solid var(--rule);
  font-weight: 600;
  color: var(--text-2);
  font-size: 0.875rem;
}

table.data tbody th {
  font-weight: 600;
  overflow-wrap: anywhere;
}

table.data td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

table.data .sub {
  display: block;
  font-weight: 400;
  color: var(--text-2);
  font-size: 0.875rem;
}

table.est td {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.est-label {
  display: inline-block;
  border: 1px solid var(--axis);
  padding: 2px 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-2);
  margin: 6px 0 0;
}

/* ---------- warning level: a number and words, never colour alone ---------- */
.lvl {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}

.lvl-n {
  flex: none;
  min-width: 2.1em;
  padding: 1px 6px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  border: 1px solid var(--axis);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lvl-3 .lvl-n,
.lvl-4 .lvl-n {
  border: 2px solid var(--text);
}

.lvl-t {
  color: var(--text-2);
}

.warn-head {
  margin: 8px 0 4px;
  font-size: 1.0625rem;
}

.official {
  border-inline-start: 3px solid var(--line);
  padding-inline-start: 12px;
  margin: 6px 0 10px;
}

.official p {
  margin-bottom: 0.5rem;
}

.mfa {
  list-style: none;
  padding: 0 !important;
}

.mfa > li {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ---------- destinations list ---------- */
.dests {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 2px solid var(--rule);
  max-width: 46rem;
}

.dests > li {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.dests a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  text-decoration: none;
}

.dests a:hover {
  color: var(--accent);
}

.dests .lvl {
  display: flex;
  font-size: 0.9375rem;
}

/* ---------- all countries ---------- */
.filter {
  margin: 8px 0 16px;
  max-width: 28rem;
}

.filter label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.filter input {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--axis);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.filter p {
  margin: 6px 0 0;
  min-height: 1.6em;
}

.continent h2 {
  margin-top: 1.6rem;
}

.wlist {
  list-style: none;
  padding: 0 !important;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.wlist > li {
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.wlist summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  list-style-position: outside;
}

.wlist summary::-webkit-details-marker {
  display: none;
}

.wlist summary::before {
  content: "+";
  font-weight: 600;
  color: var(--text-2);
  width: 1em;
  grid-row: span 2;
}

.wlist details[open] summary::before {
  content: "−";
}

.wlist .w-name {
  font-weight: 600;
  font-size: 1.0625rem;
}

.wlist summary .lvl {
  grid-column: 2;
  font-size: 0.9375rem;
}

.wlist details > :not(summary) {
  margin-inline-start: calc(1em + 10px);
}

/* ---------- airspace history ---------- */
.timeline {
  list-style: none;
  padding: 0 !important;
  border-top: 2px solid var(--rule);
}

.timeline > li {
  border-bottom: 1px solid var(--line);
  padding: 12px 0 8px;
  margin: 0;
}

.timeline h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.timeline .src {
  font-size: 0.875rem;
  color: var(--text-2);
}

.checked {
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---------- brand mark: a flight arc over the horizon ---------- */
.mark-arc,
.mark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}