/*
 * 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 Tide locations 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); }
header.site nav.site-links { align-items: center; }
/* The site footer every page ends with (lib/header.mjs siteFooter): the
   copyright line, nothing else — the licence notices live on
   /tide-locations. Like the header, its .wrap outranks each page type's. */
footer.site { border-top: 1px solid var(--line); padding: 32px 0 48px; line-height: normal; }
footer.site .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
footer.site p { font-family: var(--font-body); font-size: 0.8125rem; color: var(--ink-faint); margin: 0; }
/* The language button: an icon, the size of a line of the nav's text. */
header.site .lang-open { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -8px -6px -8px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); cursor: pointer; }
header.site .lang-open:hover { color: var(--accent); }
header.site .lang-open svg { width: 24px; height: 22px; }

/* The language sheet: the app's (LanguageSettings.vue) as a modal — a
   search field over the list, each row its native name with the name in
   the page's language beneath, the current one ticked. */
.lang-sheet { width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
.lang-sheet::backdrop { background: rgba(4, 12, 15, 0.55); }
.lang-sheet[open] { display: flex; }
.lang-sheet-body { display: flex; flex-direction: column; min-height: 0; width: 100%; padding: 18px 16px 12px; font-family: var(--font-body); }
.lang-sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 12px; }
.lang-sheet-head h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; }
.lang-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.lang-sheet-close svg { width: 16px; height: 16px; }
.lang-search { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
.lang-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.lang-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; }
.lang-list li[hidden] { display: none; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.lang-list a:hover { background: var(--surface-2); }
.lang-list a[aria-current] { background: var(--accent-soft); }
.lang-names { display: flex; flex-direction: column; gap: 2px; }
.lang-native { font-size: 1rem; }
.lang-sub { font-size: 0.8125rem; color: var(--ink-faint); }
.lang-list a[aria-current] .lang-sub { color: var(--ink-soft); }
.lang-check { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.lang-empty { margin: 8px 12px; color: var(--ink-faint); font-size: 0.9375rem; }

/* The analytics consent bar (src/js/site.js shows it until a choice is
   stored). Both buttons the same size, so declining is as easy as
   accepting. */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-soft); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { flex: 1 1 280px; margin: 0; }
.consent a { color: var(--accent); }
.consent-buttons { display: flex; gap: 10px; margin-left: auto; }
.consent-buttons button { min-width: 96px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.consent-buttons button.primary { border-color: var(--accent); background: var(--accent); color: var(--paper); }

@media (max-width: 560px) {
  header.site .wrap { flex-wrap: wrap; gap: 10px; }
  header.site nav.site-links { gap: 8px 14px; font-size: 0.84375rem; }
  /* The nav wraps under the brand here, which left the language button on
     a line of its own: it moves up, level with the brand, at the right. */
  header.site .wrap { position: relative; }
  header.site .lang-open { position: absolute; top: 2px; right: 18px; margin: 0; }
}

/* ── 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; }
@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; }
}
/* 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 */
/* Android's half leads its tiles with the Material icons the app's own
   Accessibility section draws beside the same nine settings
   (app/src/components/AccessibilityInfo.vue MATERIAL; Apache 2.0), in the
   same order in every language. */
:where(.doc-accessibility) #android-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) #android-summary .fact:nth-child(1) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 13c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(2) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(3) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(4) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(5) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(6) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(7) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(8) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 2c-2.71 0-5.05 1.54-6.22 3.78-1.28.67-2.34 1.72-3 3C3.54 9.95 2 12.29 2 15c0 3.87 3.13 7 7 7 2.71 0 5.05-1.54 6.22-3.78 1.28-.67 2.34-1.72 3-3C20.46 14.05 22 11.71 22 9c0-3.87-3.13-7-7-7zM9 20c-2.76 0-5-2.24-5-5 0-1.12.37-2.16 1-3 0 3.87 3.13 7 7 7-.84.63-1.88 1-3 1zm3-3c-2.76 0-5-2.24-5-5 0-1.12.37-2.16 1-3 0 3.86 3.13 6.99 7 7-.84.63-1.88 1-3 1zm4.7-3.3c-.53.19-1.1.3-1.7.3-2.76 0-5-2.24-5-5 0-.6.11-1.17.3-1.7.53-.19 1.1-.3 1.7-.3 2.76 0 5 2.24 5 5 0 .6-.11 1.17-.3 1.7zM19 12c0-3.86-3.13-6.99-7-7 .84-.63 1.87-1 3-1 2.76 0 5 2.24 5 5 0 1.12-.37 2.16-1 3z'/%3E%3C/svg%3E"); }
:where(.doc-accessibility) #android-summary .fact:nth-child(9) { --fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z'/%3E%3C/svg%3E"); }

/* The iOS | Android switch (src/js/accessibility.js). Hidden until the
   script shows it; without it both halves read in turn under their
   .platform-heading. A segmented control: the chosen half filled with the
   accent, 44px tall (iOS's target, and the 48dp Android asks with the
   4px track around it). */
:where(.doc-accessibility) .platform-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 36px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
:where(.doc-accessibility) .platform-switch[hidden] { display: none; }
:where(.doc-accessibility) .platform-switch [role="tab"] { min-height: 44px; min-width: 7.5rem; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 600 0.9375rem/1 var(--font-body); cursor: pointer; }
:where(.doc-accessibility) .platform-switch [role="tab"]:hover { color: var(--ink); }
:where(.doc-accessibility) .platform-switch [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--surface); }
:where(.doc-accessibility) .platform-switch [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  :where(.doc-accessibility) .platform-switch [role="tab"] { transition: background-color 0.15s ease, color 0.15s ease; }
}
@media (forced-colors: active) {
  :where(.doc-accessibility) .platform-switch [role="tab"] { border: 1px solid ButtonText; }
  :where(.doc-accessibility) .platform-switch [role="tab"][aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
:where(.doc-accessibility) .platform-panel[hidden] { display: none; }
:where(.doc-accessibility) .platform-heading { font-family: var(--font-display); font-weight: 600; font-size: 2rem; margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
:where(.doc-accessibility) #ios > .platform-heading { border-top: 0; padding-top: 0; margin-top: 40px; }
:where(.has-platform-switch) .platform-heading { display: none; }
:where(.has-platform-switch.doc-accessibility) nav.toc { margin-top: 28px; }

: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) 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) .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); }