/*
 * The site's stylesheet: every page generated by scripts/build-pages.mjs
 * links tokens.css and then this (as content-hashed copies in public/css).
 *
 * Rules shared by every page come first. Each page type's own rules are
 * scoped by the class on its <html> — page-home, page-doc, page-404,
 * page-redirect — through :where(), which adds no specificity, so every
 * rule competes exactly as it did when it was inline in its page.
 *
 * Font sizes are in rem (16px = 1rem), so the browser's own text-size
 * setting scales the page. Spacing, widths and breakpoints stay in px.
 */
/* ── shared by every page ── */
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
.mark svg { width: 100%; height: 100%; }
.lang-switch a { color: var(--ink-faint); text-decoration: none; }
.lang-switch a:hover, .lang-switch a[aria-current] { color: var(--accent); }
/* The current language or page is not told apart by colour alone. */
.lang-switch a[aria-current], header.site nav.site-links a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
/* One keyboard focus ring everywhere, in the accent: 4.9:1 on --paper in
   light, 8.8:1 in dark. The map page sets the same ring on its controls. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Skip link: off-screen until it takes keyboard focus. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--surface); color: var(--accent); border: 2px solid var(--accent); border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ── the site header (scripts/lib/header.mjs), on every page but the
   redirects. Its .wrap is the landing page's width on every page, so the
   mark and links sit in the same place wherever you go; the selector
   outranks each page type's own .wrap rule. ── */
header.site { padding: 28px 0; line-height: normal; }
header.site .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
header.site .brand-link { text-decoration: none; display: flex; align-items: center; gap: 12px; }
header.site .mark { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(160deg, var(--accent), var(--accent-deep)); }
header.site .brand-name { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
/* The nav gained a Coverage link and could not wrap: a three-item flex
   row that happened to fit. At 390px the fourth item pushed the header
   192px past the viewport in French — measured, not guessed, after the
   whole page reported horizontal overflow in seven of eight languages
   and not in Japanese, which is the tell that it is text width rather
   than a box. */
header.site nav.site-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 20px; font-size: 0.90625rem; }
header.site nav.site-links a { color: var(--ink-soft); text-decoration: none; }
header.site nav.site-links a:hover, header.site nav.site-links a[aria-current] { color: var(--accent); }
@media (max-width: 560px) {
  header.site .wrap { flex-wrap: wrap; gap: 10px; }
  header.site nav.site-links { gap: 8px 14px; font-size: 0.84375rem; }
}

/* ── landing page (html.page-home) ── */
/* Smooth scrolling to #features only for visitors who have not asked for
   reduced motion. It is the site's only motion; the map page and its
   script (src/js/stations.js) make the same check. */
@media (prefers-reduced-motion: no-preference) {
  html:where(.page-home) { scroll-behavior: smooth; }
}
:where(.page-home) a { color: inherit; }
:where(.page-home) img { max-width: 100%; }
:where(.page-home) .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
/* ---------- hero ---------- */
:where(.page-home) .hero { padding: 64px 0 88px; position: relative; overflow: hidden; }
:where(.page-home) .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
:where(.page-home) .eyebrow { font-family: var(--font-mono); font-size: 0.78125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
:where(.page-home) h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.375rem, 5vw, 3.625rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 22px; text-wrap: balance; }
:where(.page-home) h1 em { font-style: italic; color: var(--accent); }
:where(.page-home) .hero-dek { font-size: 1.125rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0 0 34px; }
:where(.page-home) .cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Official Apple-provided "Download on the App Store" artwork, served
   live from Apple's own badge CDN — per Apple's marketing guidelines,
   the badge may never be recreated, recolored, or rebuilt from custom
   type/icons, so this is an <img> of Apple's real artwork, not a
   lookalike. Only one <img> per badge (src picked by the inline script
   next to each one) rather than a black+white pair toggled with CSS —
   two near-identical cross-origin SVGs loaded at once (one hidden) hit
   a real Chromium decode/paint race where the hidden one's bitmap could
   flash onto the visible element; a single element with one src has
   nothing to race against. */
:where(.page-home) .appstore-badge { display: inline-flex; text-decoration: none; }
:where(.page-home) .appstore-badge img { display: block; height: 54px; width: auto; }
:where(.page-home) .cta-fine { font-size: 0.8125rem; color: var(--ink-faint); }
:where(.page-home) .hero-visual { position: relative; display: flex; justify-content: center; }
:where(.page-home) .hero-visual img { width: 100%; max-width: 340px; border-radius: 34px; box-shadow: 0 40px 80px -20px rgba(10, 40, 45, 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):where(.page-home) .hero-visual img { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6); }
}
:root[data-theme="dark"]:where(.page-home) .hero-visual img { box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6); }
/* ---------- features ---------- */
:where(.page-home) .features { padding: 20px 0 90px; }
:where(.page-home) .features h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; letter-spacing: -0.01em; margin: 0 0 44px; text-align: center; }
:where(.page-home) .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
:where(.page-home) .feature { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; }
:where(.page-home) .feature .icon { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
:where(.page-home) .feature .icon svg { width: 22px; height: 22px; }
:where(.page-home) .feature h3 { font-size: 1.0625rem; margin: 0 0 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(.page-home) .feature p { font-size: 0.90625rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
/* ---------- showcase ---------- */
:where(.page-home) .showcase { padding: 0 0 96px; }
:where(.page-home) .showcase .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
:where(.page-home) .showcase img { border-radius: 24px; box-shadow: 0 40px 80px -24px rgba(10, 40, 45, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):where(.page-home) .showcase img { box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"]:where(.page-home) .showcase img { box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55); }
:where(.page-home) .showcase-copy .eyebrow { margin-bottom: 14px; }
:where(.page-home) .showcase-copy h2 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; text-wrap: balance; }
:where(.page-home) .showcase-copy p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px; max-width: 42ch; }
:where(.page-home) .showcase-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
:where(.page-home) .showcase-copy li { display: flex; gap: 10px; font-size: 0.9375rem; color: var(--ink); }
:where(.page-home) .showcase-copy li::before { content: "—"; color: var(--accent); flex-shrink: 0; }
/* ---------- footer cta ---------- */
/* The panel's text is white, so its gradient is the light theme's accent
   pair in both themes: white is 5.4:1 on its lighter end. With the tokens,
   dark mode ended on #5bc2c4, where white is 2.1:1. */
:where(.page-home) .footer-cta { background: linear-gradient(160deg, #0a5158, #0d7680); border-radius: 28px; margin: 0 24px 80px; padding: 64px 40px; text-align: center; }
:where(.page-home) .footer-cta h2 { font-family: var(--font-display); font-weight: 600; color: white; font-size: 2.125rem; margin: 0 0 14px; }
:where(.page-home) .footer-cta p { color: white; font-size: 1rem; margin: 0 0 30px; }
:where(.page-home) .footer-cta a:focus-visible { outline-color: white; outline-offset: 4px; border-radius: 8px; }
:where(.page-home) footer.site { border-top: 1px solid var(--line); padding: 32px 0 48px; }
:where(.page-home) footer.site .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
:where(.page-home) footer.site p { font-size: 0.8125rem; color: var(--ink-faint); margin: 0; }
:where(.page-home) footer.site nav { display: flex; gap: 20px; }
:where(.page-home) footer.site nav a { font-size: 0.8125rem; color: var(--ink-faint); text-decoration: none; }
:where(.page-home) footer.site nav a:hover { color: var(--accent); }
:where(.page-home) footer.site .attribution { flex-basis: 100%; display: grid; gap: 8px; max-width: 92ch; margin: 4px 0 0; }
:where(.page-home) footer.site .attribution p { font-size: 0.75rem; line-height: 1.5; color: var(--ink-faint); margin: 0; }
:where(.page-home) footer.site .attribution a { color: inherit; text-decoration: underline; }
:where(.page-home) footer.site .attribution .admiralty { font-family: Arial, Helvetica, sans-serif; font-size: 0.75rem; }
:where(.page-home) .lang-switch { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.78125rem; }
@media (max-width: 860px) {
  :where(.page-home) .hero .wrap { grid-template-columns: 1fr; }
  :where(.page-home) .hero-visual { order: -1; }
  :where(.page-home) .showcase .wrap { grid-template-columns: 1fr; }
  :where(.page-home) .showcase .hero-visual, :where(.page-home) .showcase img { order: -1; margin: 0 auto; }
}
/* The footer nav gained a Coverage link and could not wrap: a three-item
   flex row that happened to fit (see the header note above). */
:where(.page-home) footer.site nav { flex-wrap: wrap; }
/* Free / Pro marker on every feature card. Replaces the old .soon badge,
   which advertised two shipped features as forthcoming — one of them
   free. Stating the gate per card does the pricing work without a
   pricing table, and is harder to let drift than a prose claim. */
:where(.page-home) .feature .pill { font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; }
:where(.page-home) .feature .pill.free { border-color: var(--ink-faint); color: var(--ink-faint); }
/* Six cards want three columns, not the four that a 230px minimum gives
   at this width — four leaves a widowed pair on the second row. */
:where(.page-home) .feature-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* Screenshots are 1284x2778, so width alone is the wrong constraint: a
   phone sized to half a column comes out 600px tall and each band ends
   up the height of a screen. Everything below is capped by HEIGHT, with
   width following, which is what actually governs how far the page
   scrolls. */
:where(.page-home) .showcase + .showcase { padding-top: 8px; }
:where(.page-home) .showcase.reverse .wrap > .visual { order: 2; }
:where(.page-home) .visual { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
:where(.page-home) .visual img { width: auto; max-width: 100%; max-height: 460px; border-radius: 22px; box-shadow: 0 30px 60px -22px rgba(10, 40, 45, 0.3); }
:where(.page-home) .hero .visual img { max-height: 620px; border-radius: 26px; }
:where(.page-home) .visual.pair img { max-height: 420px; }
/* One row of four rather than a 2x2: the Pro band names four surfaces,
   and four across says that in a quarter of the vertical space. */
:where(.page-home) .visual.quad { gap: 10px; flex-wrap: nowrap; }
:where(.page-home) .visual.quad img { max-height: 300px; min-width: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):where(.page-home) .visual img { box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"]:where(.page-home) .visual img { box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55); }
@media (max-width: 860px) {
  :where(.page-home) .visual.quad { flex-wrap: wrap; }
  :where(.page-home) .visual.quad img { max-height: 260px; max-width: calc(50% - 5px); }
}

/* ── privacy and accessibility (html.page-doc) ── */
:where(.page-doc) .wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 96px; }
:where(.page-doc) h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.125rem, 5.5vw, 2.875rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 14px; text-wrap: balance; }
:where(.page-doc) .dek { font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; margin: 0 0 8px; }
:where(.page-doc) .updated { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--ink-faint); margin-top: 18px; }
:where(.page-doc) nav.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin: 40px 0 56px; }
:where(.page-doc) nav.toc p { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; }
:where(.page-doc) nav.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
:where(.page-doc) nav.toc a { color: var(--ink); text-decoration: none; font-size: 0.9375rem; display: flex; gap: 10px; }
:where(.page-doc) nav.toc a:hover { color: var(--accent); }
:where(.page-doc) nav.toc a::before { content: counter(item); counter-increment: item; font-family: var(--font-mono); font-size: 0.78125rem; color: var(--accent); min-width: 1.4em; }
:where(.page-doc) nav.toc ol { counter-reset: item; }
:where(.page-doc) section { margin: 0 0 44px; scroll-margin-top: 24px; }
:where(.page-doc) section h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5625rem; letter-spacing: -0.005em; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
:where(.page-doc) section h2 .num { font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent); font-weight: 500; }
:where(.page-doc) section p, :where(.page-doc) section li { font-size: 0.96875rem; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; }
:where(.page-doc) section p { margin: 0 0 14px; }
:where(.page-doc) section ul { margin: 0 0 14px; padding-left: 1.2em; }
:where(.page-doc) section li { margin-bottom: 8px; }
:where(.page-doc) strong { color: var(--ink); font-weight: 600; }
:where(.page-doc) .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 20px; }
:where(.page-doc) .fact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
:where(.page-doc) .fact .label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
:where(.page-doc) .fact .value { font-size: 0.90625rem; color: var(--ink); line-height: 1.5; }

/* The accessibility page's summary tiles each lead with an icon. They are
   Material Symbols (rounded, filled, 0.47.6; Apache 2.0), chosen as the
   nearest open set to the SF Symbols the App Store shows beside these
   features, which Apple licenses for apps and not for websites. Drawn as a
   mask so each takes the ink of its theme. Keyed by position: the tiles
   are in the same order in every language (src/locales, accessibility
   summary), and build-pages.mjs puts doc-accessibility on <html>. */
:where(.doc-accessibility) #summary .fact::before { content: ""; display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 10px; background: var(--ink); -webkit-mask: var(--fact-icon) center / contain no-repeat; mask: var(--fact-icon) center / contain no-repeat; }
:where(.doc-accessibility) #summary .fact:nth-child(1) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M920-591q0 80-24.5 142T826-333q-10 12-24.5 13T776-330q-11-11-10.5-26t10.5-27q36-44 55-92.5T850-591q0-67-19-115.5T776-799q-10-12-10.5-27t10.5-26q11-11 25.5-10t24.5 13q45 54 69.5 116T920-591Zm-200 0q0 32-9.5 61T684-475q-8 12-22 13t-25-10q-11-11-12-25t7-27q8-14 13-31t5-36q0-19-5-36t-13-31q-8-13-7-27t12-25q11-11 25-10t22 13q17 26 26.5 55t9.5 61ZM360-441q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM40-180v-34q0-38 19-64.5t49-41.5q51-26 120.5-43T360-380q62 0 131 17t120 43q30 15 49.5 41.5T680-214v34q0 25-17.5 42.5T620-120H100q-25 0-42.5-17.5T40-180Z'/%3E%3C/svg%3E"); } /* VoiceOver: record_voice_over */
:where(.doc-accessibility) #summary .fact:nth-child(2) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M285-270v-420q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v420q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37Zm165 160v-740q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v740q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Q450-97.25 450-110ZM120-430v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37Zm495 160v-420q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v420q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37Zm165-160v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37Z'/%3E%3C/svg%3E"); } /* Voice Control: graphic_eq */
:where(.doc-accessibility) #summary .fact:nth-child(3) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M570-700H410q-20.83 0-35.42-14.62Q360-729.24 360-750.12q0-20.88 14.58-35.38Q389.17-800 410-800h420q20.83 0 35.42 14.62Q880-770.76 880-749.88q0 20.88-14.58 35.38Q850.83-700 830-700H670v490q0 20.83-14.62 35.42Q640.76-160 619.88-160q-20.88 0-35.38-14.58Q570-189.17 570-210v-490ZM210-500h-80q-20.83 0-35.42-14.62Q80-529.24 80-550.12 80-571 94.58-585.5 109.17-600 130-600h260q20.83 0 35.42 14.62Q440-570.76 440-549.88q0 20.88-14.58 35.38Q410.83-500 390-500h-80v290q0 20.83-14.62 35.42Q280.76-160 259.88-160q-20.88 0-35.38-14.58Q210-189.17 210-210v-290Z'/%3E%3C/svg%3E"); } /* Larger Text: format_size */
:where(.doc-accessibility) #summary .fact:nth-child(4) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-120q-150 0-255-105T120-480q0-135 79.5-229T408-830q20-5 34-1t22 15q8 10 7.5 25t-8.5 35q-9 23-14 47t-5 49q0 90 63 153t153 63q25 0 48.5-4.5T754-461q22-8 38-7t26 9q10 8 13 23t-2 36q-27 121-121 200.5T480-120Z'/%3E%3C/svg%3E"); } /* Appearance: dark_mode */
:where(.doc-accessibility) #summary .fact:nth-child(5) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M354-80q-56 0-106-20.5T159-160q-38-38-58.5-87.5T80-354q0-80 41.5-146T232-598q20-42 53-75t77-55q32-71 97.5-111.5T607-880q56 0 105.5 20.5T800-800q38 39 59 88t21 105q0 84-38.5 146.5T728-362q-20 44-52.5 76.5T598-232q-32 71-97.5 111.5T354-80Zm0-60q45 0 86.5-19.5T508-211q-63 7-120.5-12.5T286-286q-44-43-63-101t-12-121q-33 26-52 67.5T140-354q0 45 16 84t46 68q30 29 68.5 45.5T354-140Zm126-127q45 0 86-19t69-52q-63 7-120-13.5T415-416q-44-45-64-102.5T339-639q-40 38-56 73.5T267-480q0 44 16 83t46 69q29 29 68 45t83 16Z'/%3E%3C/svg%3E"); } /* Reduce Motion: animation */
:where(.doc-accessibility) #summary .fact:nth-child(6) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M324-111.5Q251-143 197-197t-85.5-127Q80-397 80-480t31.5-156Q143-709 197-763t127-85.5Q397-880 480-880t156 31.5Q709-817 763-763t85.5 127Q880-563 880-480t-31.5 156Q817-251 763-197t-127 85.5Q563-80 480-80t-156-31.5ZM500-140q137-10 228.5-106T820-480q0-138-91.5-234T500-820v680Z'/%3E%3C/svg%3E"); } /* Increase Contrast: contrast */
:where(.doc-accessibility) #summary .fact:nth-child(7) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m289-572 167-267q5-7 11-10.5t14-3.5q8 0 14 3.5t11 10.5l167 267q5 8 4.5 16t-4.5 15q-4 7-10.6 11t-15.4 4H315q-8.8 0-15.4-4T289-541q-4-7-4.5-15t4.5-16ZM706-80q-72.5 0-123.25-50.75T532-254q0-72.5 50.75-123.25T706-428q72.5 0 123.25 50.75T880-254q0 72.5-50.75 123.25T706-80Zm-586-55v-244q0-12.75 8.63-21.38Q137.25-409 150-409h244q12.75 0 21.38 8.62Q424-391.75 424-379v244q0 12.75-8.62 21.37Q406.75-105 394-105H150q-12.75 0-21.37-8.63Q120-122.25 120-135Z'/%3E%3C/svg%3E"); } /* Colour vision: category */
:where(.doc-accessibility) #summary .fact:nth-child(8) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M180-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h600q24 0 42 18t18 42v520q0 24-18 42t-42 18H180Zm90-201h142q12.75 0 21.38-8.63Q442-378.25 442-391v-20q0-9.86-6.57-16.43T419-434h-4q-9.86 0-16.43 6.57T392-411H290v-138h102q0 10 6.57 16.5T415-526h4q9.86 0 16.43-6.57T442-549v-20q0-12.75-8.62-21.38Q424.75-599 412-599H270q-12.75 0-21.37 8.62Q240-581.75 240-569v178q0 12.75 8.63 21.37Q257.25-361 270-361Zm421-238H549q-12.75 0-21.37 8.62Q519-581.75 519-569v178q0 12.75 8.63 21.37Q536.25-361 549-361h142q12.75 0 21.38-8.63Q721-378.25 721-391v-20q0-9.86-6.57-16.43T698-434h-4q-9.86 0-16.43 6.57T671-411H569v-138h102q0 10 6.57 16.5T694-526h4q9.86 0 16.43-6.57T721-549v-20q0-12.75-8.62-21.38Q703.75-599 691-599Z'/%3E%3C/svg%3E"); } /* Captions: closed_caption */
:where(.doc-accessibility) #summary .fact:nth-child(9) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M798-252q-12.75 0-21.37-8.63Q768-269.25 768-282q0-7 2-12.5t7-9.5q34-34 53.5-79.13 19.5-45.13 19.5-97T830.5-577Q811-622 777-656q-5-4-7-9.5t-2-12.5q0-12.75 8.63-21.38Q785.25-708 798-708q6 0 11.5 2t9.5 6q42 42 66.5 99T910-479.87q0 64.13-24 120Q862-304 820-262q-4 5-9.5 7.5T798-252ZM684.7-366q-11.9 0-20.3-9t-8.4-21.24q0-5.76 2-11.26t6-9.5q12-12 19-28.02 7-16.01 7-35 0-18.98-7-34.98-7-16-19-28-4.15-3.72-6.58-10.05-2.42-6.33-2.42-12.29 0-12.66 8.5-21.16t21.25-8.5q6 0 11.63 2.5Q702-590 707-585q20 20 31.5 47.22T750-480q0 30.56-12 57.78Q726-395 706-375q-3.75 4.15-9.37 6.58Q691-366 684.7-366ZM79.82-330Q67-330 58.5-338.63 50-347.25 50-360v-210q0-24.75 17.63-42.38Q85.25-630 110-630h100q24.75 0 42.38 17.62Q270-594.75 270-570v210q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-50H110v50q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63ZM110-470h100v-100H110v100Zm285 140q-10.83 0-17.92-7.08Q370-344.17 370-355v-250q0-10.83 7.08-17.92Q384.17-630 395-630h135q24.75 0 42.38 17.62Q590-594.75 590-570v180q0 24.75-17.62 42.37Q554.75-330 530-330H395Zm35-60h100v-180H430v180Z'/%3E%3C/svg%3E"); } /* Audio descriptions: audio_description */
:where(.page-doc) table { width: 100%; border-collapse: collapse; margin: 18px 0 20px; font-size: 0.90625rem; }
:where(.page-doc) th, :where(.page-doc) td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
:where(.page-doc) th { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
:where(.page-doc) td { color: var(--ink-soft); }
:where(.page-doc) td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
@media (max-width: 560px) {
  /* Below this width the provider table would push past the edge — the
     first column does not wrap — so each row becomes a small stacked card:
     name, what it is for, then what it receives, labelled. */
  :where(.page-doc) #thirdparty table, :where(.page-doc) #thirdparty tbody, :where(.page-doc) #thirdparty tr, :where(.page-doc) #thirdparty td { display: block; }
  :where(.page-doc) #thirdparty thead { display: none; }
  :where(.page-doc) #thirdparty tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  :where(.page-doc) #thirdparty td { border: 0; padding: 2px 0; }
  :where(.page-doc) #thirdparty td:first-child { white-space: normal; }
  :where(.page-doc) #thirdparty td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-faint); }
}
:where(.page-doc) .contact-card { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; }
:where(.page-doc) .contact-card p { color: var(--ink); }
:where(.page-doc) .contact-card .fine { color: var(--ink-soft); font-size: 0.875rem; margin-top: 8px; }
:where(.page-doc) footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-faint); }
:where(.page-doc) a { color: var(--accent); }
@media (max-width: 480px) {
  :where(.page-doc) .wrap { padding: 20px 18px 72px; }
}
:where(.page-doc) .lang-switch { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.78125rem; margin-top: 14px; }
:where(.page-doc) footer .attribution { display: grid; gap: 8px; max-width: 92ch; margin-top: 18px; }
:where(.page-doc) footer .attribution p { font-size: 0.75rem; line-height: 1.5; margin: 0; }
:where(.page-doc) footer .attribution a { color: inherit; text-decoration: underline; }
:where(.page-doc) footer .attribution .admiralty { font-family: Arial, Helvetica, sans-serif; font-size: 0.75rem; }
:where(.page-doc) .translation-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 0.84375rem; color: var(--ink-soft); margin: 0 0 32px; }

/* ── 404 (html.page-404) ── */
:where(.page-404) .wrap { max-width: 640px; margin: 0 auto; padding: 32px 24px 96px; }
:where(.page-404) .eyebrow { font-family: var(--font-mono); font-size: 0.78125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
:where(.page-404) h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.125rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 18px; }
:where(.page-404) .lost-dek { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; }
:where(.page-404) a { color: var(--accent); }
:where(.page-404) .lang-switch { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
:where(.page-404) .lang-switch a { color: var(--accent); }

/* ── root redirects (html.page-redirect) ── */
html:where(.page-redirect), :where(.page-redirect) body { height: 100%; }
:where(.page-redirect) .redirect-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
:where(.page-redirect) a { color: var(--accent); }