/* The shared header's stylesheet. Plain CSS, no Tailwind and no framework, so one file serves the
   React sites and the static engineering notes alike.

   Colour and geometry come from --head-* variables the host may map once. Each falls back to the
   marketing site's own tokens (web/shared-tokens/tokens.css, which Tailwind emits as --color-*),
   so the React sites need no mapping at all; the engineering notes map them to their own
   light/dark variables in styles.css, and that mapping is the whole colour swap.

   Phone rules (founder, 2026-10-15, carried over from the marketing header): the wordmark TEXT
   always shows; the icon joins the lockup only where the row can hold it — from 410 px, or from
   420 px once a badge or beta pill occupies the right slot (`site-head--tight`); the pill reads
   "Coming to the App Store" from 640 px, "Coming soon" from 375 px, "Soon" below; a secondary
   link may carry a phone label (below 640 px) and a compact one (below 375 px). */
.site-head {
  --hd-canvas: var(--head-canvas, var(--color-raised, #12151B));
  --hd-page:   var(--head-page, var(--color-canvas, #0B0D11));
  --hd-ink:    var(--head-ink, var(--color-ink, #FFFFFF));
  --hd-ink-2:  var(--head-ink-2, var(--color-ink-secondary, #98989D));
  --hd-line:   var(--head-line, var(--color-hairline, rgba(255, 255, 255, 0.08)));
  --hd-accent: var(--head-accent, var(--color-accent, #9FB0C5));
  --hd-wordmark-accent: var(--head-wordmark-accent, var(--color-wordmark-accent, #9FB0C5));
  --hd-height: var(--head-height, var(--header-h, 64px));
  --hd-sans:   var(--head-sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif);
  /* How opaque the bar is over the page. 60 % suits a dark canvas; a light page sets more
     (the engineering notes use 86 %), or dark content scrolling under the bar shows through as a
     darker lower half, which reads as a gap above the header (founder, 2026-10-26). */
  --hd-blend:  var(--head-blend, 60%);
  position: var(--head-position, fixed); top: 0; left: 0; right: 0; z-index: 50;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--hd-canvas) var(--hd-blend), transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hd-line);
  color: var(--hd-ink);
  font-family: var(--hd-sans);
  -webkit-font-smoothing: antialiased;
}
.site-head *, .site-head *::before, .site-head *::after { box-sizing: border-box; }

/* In light appearances, the wordmark 'v' is #5B789D (48.6% lightness, 4.55:1 AA on white, 3.74:1 vs #1C1C1E ink) */
html.light .site-head, [data-theme="light"] .site-head {
  --hd-wordmark-accent: var(--head-wordmark-accent, var(--color-wordmark-accent, #5B789D));
}
@media (prefers-color-scheme: light) {
  :root:not(.dark):not([data-theme="dark"]) .site-head {
    --hd-wordmark-accent: var(--head-wordmark-accent, var(--color-wordmark-accent, #5B789D));
  }
}

.site-head__nav { max-width: 80rem; margin: 0 auto; width: 100%; padding: 0 1.5rem; height: var(--hd-height); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* The lockup: icon · Applivation · optional label. */
/* The lockup never shrinks: a row that cannot hold its parts must overflow visibly (a scrollbar),
   never let the wordmark spill over the link — which is how the first "Under the hood" failed. */
.site-head__brand { display: flex; align-items: center; gap: 0.5rem; color: var(--hd-ink); text-decoration: none; flex-shrink: 0; }
.site-head__icon { display: none; width: 28px; height: 28px; flex-shrink: 0; border-radius: 22.5%; overflow: hidden; background: linear-gradient(165deg, #313C49, #232C36); box-shadow: 0 0 0 1px var(--hd-line); }
.site-head__icon svg { display: block; width: 100%; height: 100%; }
.site-head__text { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; line-height: 1.15; }
.site-head__name { font-size: 1.5625rem; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }
.site-head i { font-style: italic; color: var(--hd-wordmark-accent); }
/* The labeled lockup drops its title to a second, muted line on phones (plan §2A). */
.site-head__label { font-size: 0.75rem; font-weight: 500; color: var(--hd-ink-2); letter-spacing: -0.01em; white-space: nowrap; }

/* The right group: [slot] [secondary link] [App Store slot]. */
.site-head__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-head__parts { display: contents; }
.site-head__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--hd-ink-2); text-decoration: none; white-space: nowrap; transition: color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.site-head__link:hover { color: var(--hd-ink); }
.site-head__link svg { flex: none; }
.site-head__link-mid, .site-head__link-xs { display: none; }

/* Apple's badge, unmodified and never animated: 40 px tall, its onscreen minimum. */
.site-head__store { display: inline-flex; flex-shrink: 0; }
.site-head__store img { display: block; height: 40px; width: auto; }
.site-head__pill { display: inline-flex; align-items: center; height: 2rem; padding: 0 0.875rem; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.site-head__pill--beta { background: var(--hd-ink); color: var(--hd-page); transition: transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.site-head__pill--beta:hover { transform: scale(1.05); }
.site-head__pill--beta:active { transform: scale(0.95); }
.site-head__pill--soon { background: color-mix(in srgb, var(--hd-ink) 40%, transparent); color: var(--hd-page); cursor: default; }
.site-head__cta-xs, .site-head__cta-mid { display: none; }

@media (min-width: 410px) { .site-head:not(.site-head--tight) .site-head__icon { display: block; } }
@media (min-width: 420px) { .site-head--tight .site-head__icon { display: block; } }
@media (min-width: 640px) {
  .site-head__right { gap: 1.25rem; }
  /* One row: the label shares the wordmark's baseline (founder, 2026-10-26), not its centre. */
  .site-head__text { flex-direction: row; align-items: baseline; gap: 0.625rem; }
  .site-head__label { font-size: 1rem; font-weight: 400; }
}
@media (max-width: 639.98px) {
  /* The labeled lockup on phones: the icon sits on the first line beside "Applivation" (its 28 px
     matches that line's box), and the label is a line below both, left-aligned with the wordmark
     (founder, 2026-10-26) — not centred against the two-line block. */
  .site-head--labeled .site-head__brand { align-items: flex-start; }
  .site-head--labeled .site-head__text { justify-content: flex-start; }
  .site-head__cta-full { display: none; }
  .site-head__cta-mid { display: inline; }
  .has-mid .site-head__link-full { display: none; }
  .has-mid .site-head__link-mid { display: inline; }
}
@media (max-width: 374.98px) {
  .site-head__cta-mid { display: none; }
  .site-head__cta-xs { display: inline; }
  .has-xs .site-head__link-full, .has-xs .site-head__link-mid { display: none; }
  .has-xs .site-head__link-xs { display: inline; }
}
/* A page that adds its own control to the header (the design system's theme toggle, the full
   notes' Contents menu) carries a fourth item the three-item phone arithmetic above never allowed
   for; on those pages the pill reads "Soon" below 640 px so the row still holds (measured: with
   "Coming soon" the row overflowed by 29 px at 410 px and 36 px at 375 px). */
@media (max-width: 639.98px) {
  .site-head--slot .site-head__cta-mid { display: none; }
  .site-head--slot .site-head__cta-xs { display: inline; }
}