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

   Colour comes from five --foot-* variables the host page maps once (defaults = the marketing
   site's dark tokens, web/shared-tokens/tokens.css). The engineering notes map them to their
   own light/dark variables, and that mapping is the whole colour swap. */
.site-foot {
  --sf-canvas: var(--foot-canvas, #0B0D11);
  --sf-ink:    var(--foot-ink, #FFFFFF);
  --sf-ink-2:  var(--foot-ink-2, #98989D);
  --sf-line:   var(--foot-line, rgba(255, 255, 255, 0.08));
  --sf-accent: var(--foot-accent, #9FB0C5);
  --sf-wordmark-accent: var(--foot-wordmark-accent, var(--sf-accent));
  --sf-sans:   var(--foot-sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif);
  width: 100%; box-sizing: border-box;
  background: var(--sf-canvas); color: var(--sf-ink-2);
  border-top: 1px solid var(--sf-line);
  padding: 48px 24px;
  display: flex; justify-content: center;
  font: 400 14px/1.5 var(--sf-sans);
  -webkit-font-smoothing: antialiased;
}
.site-foot *, .site-foot *::before, .site-foot *::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-foot, [data-theme="light"] .site-foot {
  --sf-wordmark-accent: var(--foot-wordmark-accent, #5B789D);
}
@media (prefers-color-scheme: light) {
  :root:not(.dark):not([data-theme="dark"]) .site-foot {
    --sf-wordmark-accent: var(--foot-wordmark-accent, #5B789D);
  }
}

/* One wrapping row: the link columns sit to the right whenever they fit beside the brand block
   and drop below it only when they do not — no breakpoint, the row wraps by content. */
.site-foot__inner { width: 100%; max-width: 72rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 40px; text-align: left; }
.site-foot__brand { display: flex; align-items: center; gap: 16px; }
.site-foot__logo-link { display: block; flex-shrink: 0; line-height: 0; border-radius: 22.5%; }
.site-foot__icon { display: block; width: 32px; height: 32px; flex-shrink: 0; border-radius: 22.5%; box-shadow: 0 0 0 1px var(--sf-line); }
.site-foot__id { display: flex; flex-direction: column; gap: 1px; }
.site-foot__name, .site-foot a.site-foot__name { font-size: 16px; font-weight: 600; color: var(--sf-ink); letter-spacing: -0.025em; line-height: 1.2; margin-top: 1px; }
.site-foot a.site-foot__name:hover { color: var(--sf-ink); }
.site-foot i { font-style: italic; color: var(--sf-wordmark-accent); }
.site-foot__legal { font-size: 13px; line-height: 1.35; opacity: 0.8; }
.site-foot__legal a { text-decoration: underline; text-decoration-color: var(--sf-line); text-underline-offset: 2px; }
.site-foot a { color: inherit; text-decoration: none; transition: color 150ms var(--foot-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)); }
.site-foot a:hover { color: var(--sf-ink); }

/* Phones: one stacked column indented 48 px (the icon plus its gap) so the links line up under
   the wordmark. From 410 px — an iPhone Max — the three columns sit side by side. The gap there
   is 16 px, not the 24 px the old footer used: "Engineering Notes" is wider than what sat in
   that column before, and at 24 px the third column wrapped at exactly 410 px. 48 px from 640. */
.site-foot__links { display: flex; flex-direction: column; row-gap: 24px; padding-left: 48px; font-size: 13px; }
.site-foot__col { display: flex; flex-direction: column; gap: 10px; }
.site-foot__head { font-weight: 600; color: var(--sf-ink); }
.site-foot__soon { opacity: 0.5; }
@media (min-width: 410px) { .site-foot__links { flex-direction: row; flex-wrap: wrap; column-gap: 16px; padding-left: 0; } }
@media (min-width: 640px) { .site-foot__links { column-gap: 48px; } }