/* Header instrument, autopilot switch, flight clock, mobile dock
   and the heading settle (module M2). The bar is solid night ink with a
   hairline (transparent only at the very top, set by motion.js), so nothing
   ever reads through it; nothing in the header uses backdrop-filter. When the
   page lands (html.is-landed) the bar lands with it: afternoon paper, ink
   text and an amber-deep clock, faded over one scene. */

/* ── Bar ──────────────────────────────────────────────── */
/* The header's own colours are tokens, so the landing re-tokens one place. */
.site-header {
  --hd-bg: var(--ink);
  --hd-fg: var(--bone);
  --hd-muted: var(--muted);
  --hd-faint: var(--faint);
  --hd-rule: var(--line);
  --hd-edge: var(--line-2);
  --hd-edge-hover: rgb(242 240 234 / .4);
  --hd-fill-hover: rgb(242 240 234 / .06);
  --hd-halo: rgb(242 240 234 / .06);
  --hd-lamp-off: var(--signal-off);
  --hd-day: var(--muted);
  --hd-time: var(--bone);
  --hd-fade: var(--t-scene) var(--ease);
  position: fixed; inset: 0 0 auto; z-index: 40;
  color: var(--hd-fg);
  background-color: var(--ink);
  border-block-end: 1px solid var(--hd-rule);
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--hd-fade);
}
.site-header.is-top { background-color: transparent; border-block-end-color: transparent; }
.site-header:has(#mobile-nav:not([hidden])) { background-color: var(--ink); border-block-end-color: var(--line); }
/* The afternoon surface is its own layer, so the landing fades over a full
   scene in both directions while the top state keeps its quick UI timing. */
.site-header::before { content: ""; position: absolute; inset-inline: 0; inset-block: 0 -1px; z-index: -1; background: var(--afternoon); border-block-end: 1px solid var(--ink-line); opacity: 0; pointer-events: none; transition: opacity var(--hd-fade); }
.header-inner { block-size: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Landed: the cockpit chrome takes part in the arrival. The bar is a light
   surface now, so the signal and the focus ring re-token as on paper. */
html.is-landed .site-header {
  --hd-bg: var(--afternoon);
  --hd-fg: var(--ink);
  --hd-muted: var(--ink-muted);
  --hd-faint: rgb(11 13 18 / .64);  /* 5.5:1 on the afternoon: the paused AUTOPILOT word is the switch's visible label */
  --hd-rule: var(--ink-line);
  --hd-edge: rgb(11 13 18 / .22);
  --hd-edge-hover: rgb(11 13 18 / .5);
  --hd-fill-hover: rgb(11 13 18 / .05);
  --hd-halo: rgb(138 75 15 / .12);
  --hd-lamp-off: #6f6d68;
  --hd-day: var(--amber-deep);
  --hd-time: var(--amber-deep);
  --signal: var(--amber-deep);
  --focus: var(--ink);
}
html.is-landed .site-header::before { opacity: 1; }

/* ── Brand: the mark's dot is the page's first signal light ── */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); flex: none; }
.brand-mark { width: 30px; height: 30px; color: var(--bone); }
.brand-word { font: 900 22px/1 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; }
#i-mark circle { fill: var(--signal); transition: fill .5s var(--ease); }
.site-header :is(.brand, .brand-mark) { color: var(--hd-fg); }
.site-header .brand-mark { transition: color var(--hd-fade); }

/* Wordmark and flight clock share one clipped slot: after the hero the word
   rolls up and away and the clock rolls up into its place. */
.site-header .brand { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; block-size: 44px; overflow: clip; border-radius: 6px; transition: color var(--hd-fade); }
.site-header .brand-mark { grid-area: 1 / 1; }
.site-header .brand-word, .flight-clock { grid-area: 1 / 2; align-self: stretch; display: flex; align-items: center; transition: translate var(--t-ui) var(--ease), color var(--hd-fade); }
.flight-clock { translate: 0 100%; }
html.past-hero .site-header .brand-word { translate: 0 -100%; }
html.past-hero .flight-clock { translate: none; }

/* ── Flight clock (built by flightclock.js, aria-hidden) ── */
.flight-clock { gap: 7px; direction: ltr; unicode-bidi: isolate; contain: layout paint; color: var(--hd-time); white-space: nowrap; }
.fc-wheel { display: block; block-size: 1.1em; overflow: clip; }
.fc-reel { display: flex; flex-direction: column; }
.fc-reel > span { display: block; block-size: 1.1em; line-height: 1.1; }
.fc-day { font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; color: var(--hd-day); text-align: end; transition: color var(--hd-fade); }
.fc-day, .fc-day .fc-reel > span { block-size: 1.6em; line-height: 1.6; }
.fc-time { display: inline-flex; align-items: center; font: 900 20px/1 var(--font-display); font-stretch: 100%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.fc-time .fc-reel > span { text-align: center; }
.fc-colon { flex: none; inline-size: .2em; block-size: .2em; margin-inline: .14em; border-radius: 50%; background: currentColor; }
/* Machine time: condensed while the clock races, full width once it settles. */
.flight-clock[data-pace=race] .fc-time { font-stretch: 62%; }

.dock-flight { display: none; }
.top-sentinel { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 24px; visibility: hidden; pointer-events: none; }

/* ── Navigation ───────────────────────────────────────── */
.desktop-nav { display: flex; align-items: center; gap: clamp(2px, .6vw, 10px); }
/* Links are the bar's text colour at 70% (= --muted on ink, ≈ --ink-muted on
   paper): the colour follows the landing over a scene, while hover and focus
   lift the opacity at micro-interaction speed. */
.desktop-nav a { position: relative; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 10px; font-size: 14px; font-weight: 500; color: var(--hd-fg); opacity: .7; white-space: nowrap; transition: color var(--hd-fade), opacity var(--t-micro) var(--ease); }
.desktop-nav a::after { content: ""; position: absolute; inset-inline: 10px; inset-block-end: 9px; block-size: 1px; background: currentColor; scale: 0 1; transform-origin: 0 50%; transition: scale var(--t-ui) var(--ease); }
[dir=rtl] .desktop-nav a::after { transform-origin: 100% 50%; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.login-link { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 4px; font-size: 14px; font-weight: 500; color: var(--hd-fg); opacity: .7; white-space: nowrap; transition: color var(--hd-fade), opacity var(--t-micro) var(--ease); }
:is(.desktop-nav a, .login-link):focus-visible { opacity: 1; }
.site-header .pilot-language-trigger { min-block-size: 44px; border-color: var(--hd-edge); color: var(--hd-fg); transition: color var(--hd-fade), border-color var(--hd-fade), background-color var(--t-micro) var(--ease); }
.site-header .pilot-language-trigger:focus-visible { outline-color: var(--focus); }
.header-actions .button-small { white-space: nowrap; }
.menu-toggle { display: none; inline-size: 44px; block-size: 44px; flex: none; border-radius: 50%; border: 1px solid var(--hd-edge); align-items: center; justify-content: center; flex-direction: column; gap: 6px; transition: border-color var(--hd-fade), background-color var(--t-micro) var(--ease); }
.menu-toggle span { inline-size: 18px; block-size: 1.5px; background: var(--hd-fg); transition: transform var(--t-ui) var(--ease), background-color var(--hd-fade); }
.menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-nav { max-block-size: calc(100svh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--hd-bg); border-block-end: 1px solid var(--hd-rule); padding: 4px var(--gutter) 24px; clip-path: inset(0); transition: clip-path var(--t-ui) var(--ease), background-color var(--hd-fade), border-color var(--hd-fade); }
@starting-style { .mobile-nav { clip-path: inset(0 0 100% 0); } }
.mobile-nav a { display: flex; align-items: center; min-block-size: 60px; border-block-end: 1px solid var(--hd-rule); font: 700 26px/1.2 var(--font-display); letter-spacing: -.02em; }
.mobile-nav a:last-child { gap: 10px; min-block-size: 56px; margin-block-start: 6px; border-block-end: 0; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--hd-muted); }
.mobile-nav a:last-child::after { content: "\2192" / ""; display: inline-block; scale: var(--dir) 1; }

/* The register CTA joins the closing: after landing it is the same ink pill
   as the closing's own CTA (phones hide the dock while landed instead). */
@media (min-width: 761px) {
  .site-header .button-small { transition: background-color var(--hd-fade), color var(--hd-fade), transform var(--t-ui) var(--ease); }
  html.is-landed .site-header .button-red { background: var(--ink); color: var(--bone); }
  /* An ink pill now, so it takes the page's red selection back (ink on ink would vanish). */
  html.is-landed .site-header .button-red::selection, html.is-landed .site-header .button-red ::selection { background: var(--red-cta); color: var(--on-red); }
}

/* ── The autopilot switch (built by autopilot.js) ─────── */
/* A 44px lamp button; the AUTOPILOT word joins it on desktop screens where
   the header row has room for it (data-fit~=word, measured by autopilot.js). */
.ap-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px; flex: none; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--hd-edge); border-radius: 999px; color: var(--hd-fg); transition: border-color var(--hd-fade), color var(--hd-fade), background-color var(--t-micro) var(--ease), scale var(--t-micro) var(--ease); }
.ap-switch:active { scale: .96; }
.ap-switch .ap-lamp { --lamp: 10px; box-shadow: 0 0 0 4px var(--hd-halo); transition: background-color .5s var(--ease), box-shadow var(--hd-fade); }
.ap-switch[aria-pressed=false] .ap-lamp { background: var(--hd-lamp-off); }
.ap-word { display: none; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; transition: color .5s var(--ease); }
.site-header[data-fit~=word] .ap-switch { inline-size: auto; padding-inline: 16px 18px; }
.site-header[data-fit~=word] .ap-word { display: inline; }
.ap-switch[aria-pressed=false] .ap-word { color: var(--hd-faint); }

/* The engage/disengage reveal: one View Transition from the lamp, started only
   by the switch and never under reduced motion (autopilot.js). Engaging
   spreads the lit page out of the lamp; disengaging draws it back in. */
html[data-vt], html[data-vt] *, html[data-vt] *::before, html[data-vt] *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
html[data-vt]::view-transition-old(root), html[data-vt]::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .7s; animation-fill-mode: both; }
html[data-vt=engage]::view-transition-old(root) { animation: none; }
html[data-vt=engage]::view-transition-new(root) { animation-name: ap-vt-open; animation-timing-function: cubic-bezier(.3, .7, .1, 1); }
html[data-vt=disengage]::view-transition-old(root) { z-index: 1; animation-name: ap-vt-close; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
html[data-vt=disengage]::view-transition-new(root) { animation: none; }
@keyframes ap-vt-open { from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); } to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0)); } }
@keyframes ap-vt-close { from { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0)); } to { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); } }

/* Hover affordances only where a pointer can hover (no sticky tap states). */
@media (hover: hover) {
  .desktop-nav a:hover { opacity: 1; }
  .desktop-nav a:hover::after { scale: 1 1; }
  .login-link:hover { opacity: 1; }
  .site-header .pilot-language-trigger:hover { background: var(--hd-fill-hover); border-color: var(--hd-edge-hover); }
  .menu-toggle:hover { border-color: var(--hd-edge-hover); background-color: var(--hd-fill-hover); }
  .ap-switch:hover { border-color: var(--hd-edge-hover); background-color: var(--hd-fill-hover); }
  html.is-landed .site-header .button-red:hover { background: var(--ink-4); }
}

/* ── Heading settle (enabled by motion.js) ────────────── */
/* Transform only: a heading below the fold sits .3em low and settles once it
   arrives. Nothing is ever made invisible. */
.motion [data-reveal] h2 { transition: translate var(--t-scene) var(--ease); }
.motion [data-reveal].is-pending h2 { translate: 0 .3em; }

@media (max-width: 1200px) {
  .desktop-nav a { padding-inline: 8px; font-size: 13.5px; }
  .desktop-nav a::after { inset-inline: 8px; }
  .header-actions { gap: 10px; }
}

/* Stepped fit (autopilot.js): a long language name gives way to the globe,
   long languages tighten, then hand the links to the menu. */
.site-header[data-fit~=snug] .desktop-nav a { padding-inline: 6px; font-size: 13px; }
.site-header[data-fit~=snug] .desktop-nav a::after { inset-inline: 6px; }
.site-header[data-fit~=snug] .header-actions { gap: 8px; }
.site-header:is([data-fit~=snug], [data-fit~=globe]) .pilot-language-trigger { inline-size: 44px; padding-inline: 0; }
.site-header:is([data-fit~=snug], [data-fit~=globe]) .pilot-language-current { display: none; }
.site-header[data-fit~=menu] :is(.desktop-nav, .login-link) { display: none; }
.site-header[data-fit~=menu] .menu-toggle { display: inline-flex; }
@media (min-width: 1001px) {
  .site-header:not([data-fit~=menu]) .mobile-nav { display: none; }
}

@media (max-width: 1000px) {
  .desktop-nav, .login-link { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Without JavaScript the menu button cannot open anything, so phones and
   tablets get the same links as a plain row under the bar instead, login
   included, and the page starts below it. */
@media (scripting: none) and (max-width: 1000px) {
  html { scroll-padding-block-start: calc(96px + 46px); }
  body { padding-block-start: 46px; }
  .menu-toggle { display: none; }
  #mobile-nav[hidden] { display: flex !important; }
  .mobile-nav { align-items: center; gap: 0; max-block-size: none; padding: 0 var(--gutter); overflow: auto hidden; scrollbar-width: none; border-block-start: 1px solid var(--hd-rule); border-block-end: 0; clip-path: none; }
  .mobile-nav a, .mobile-nav a:last-child { flex: none; min-block-size: 44px; margin: 0; padding-inline: 7px; border: 0; font: 500 14px/1 var(--font-text); letter-spacing: 0; color: var(--hd-muted); white-space: nowrap; }
  .mobile-nav a:first-child { padding-inline-start: 0; }
  .mobile-nav a:last-child { gap: 6px; margin-inline-start: auto; padding-inline-end: 0; color: var(--hd-fg); }
}
@media (scripting: none) and (max-width: 380px) {
  .mobile-nav a { padding-inline: 6px; font-size: 13px; }
  .mobile-nav a:last-child { padding-inline: 6px 0; font-size: 13px; }
}

/* ── Mobile dock (≤760px) ─────────────────────────────── */
/* After the hero, the header CTA becomes a fixed pill at the bottom, sized to
   its words and docked beside the support launcher, so it holds about 2%
   of a phone screen. Its top hairline is the flight (span.dock-flight, scaled
   by flightclock.js). It sinks while the closing CTA is on screen, while the
   pricing section (which has its own CTAs) is centred, and while the menu is
   open. Focus scrolling keeps clear of it (scroll-padding). */
@media (max-width: 760px) {
  html { scroll-padding-block-end: calc(var(--support-lane) + 12px + env(safe-area-inset-bottom)); }
  .header-actions .button-small { position: fixed; z-index: 1; inset-block-end: calc(var(--support-edge) + 4px + env(safe-area-inset-bottom)); left: auto; right: calc(var(--support-lane) + 12px); display: flex; inline-size: max-content; max-inline-size: calc(100% - var(--support-lane) - 24px); min-block-size: 48px; padding: 0 20px; gap: 9px; overflow: clip; font-size: 15px; box-shadow: 0 16px 34px -16px rgb(0 0 0 / .9); translate: 0 calc(100% + 30px + env(safe-area-inset-bottom)); visibility: hidden; transition: translate var(--t-ui) var(--ease), visibility 0s linear var(--t-ui), background-color var(--t-ui) var(--ease); }
  .header-actions .button-small::before { content: ""; position: absolute; inset-inline: 20px; inset-block-start: 6px; block-size: 2px; border-radius: 2px; background: var(--on-red); opacity: .2; }
  .dock-flight { display: block; position: absolute; inset-inline: 20px; inset-block-start: 6px; block-size: 2px; border-radius: 2px; background: var(--on-red); opacity: .72; transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear; }
  [dir=rtl] .dock-flight { transform-origin: 100% 50%; }
  /* Over paper too: an ink halo in the outline gap keeps its red focus ring on ink (5.65:1). */
  .header-actions .button-small:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 16px 34px -16px rgb(0 0 0 / .9); }
  html.past-hero:not(.is-landed):not(.dock-hold) .site-header:not(:has(#mobile-nav:not([hidden]))) .header-actions .button-small { translate: none; visibility: visible; transition: translate .5s var(--ease), visibility 0s, background-color var(--t-ui) var(--ease); }
  /* While the support widget loads, or if it fails, its fallback card (css/support.css)
     rises above the dock instead of covering it. */
  .pilot-support > .pilot-support-fallback { bottom: calc(var(--support-edge) + 64px + env(safe-area-inset-bottom)); }
}
/* Without JavaScript the dock simply stays put, and the page makes room for it.
   There is no support launcher then, so the dock takes the corner. */
@media (scripting: none) and (max-width: 760px) {
  body { padding-block-end: calc(76px + env(safe-area-inset-bottom)); }
  .header-actions .button-small { right: var(--support-edge); translate: none; visibility: visible; }
  .header-actions .button-small::before { display: none; }
}

@media (max-width: 640px) {
  .header-inner { block-size: 64px; gap: 12px; }
  .header-actions { gap: 8px; }
  .brand-word { font-size: 19px; }
  .site-header .brand { column-gap: 9px; }
  .fc-day { display: none; }
  /* Phones get the globe alone (the trigger's aria-label names the language);
     a clipped "中文 (…" reads as a bug in every language with a long name. */
  .site-header .pilot-language-trigger { inline-size: 44px; padding-inline: 0; justify-content: center; }
  .site-header .pilot-language-current { display: none; }
}