/* The one masthead, loaded by every surface: the landing and privacy pages, and the renderer at /web/
   (SiteFrame.tsx). Tokens fall back from the renderer's --tc-* to the static pages' names, so the same
   rules read right in both. Sticky so it stays put while a static page scrolls (in the renderer the
   panes scroll inside a fixed frame, so it never moves there). */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .2rem 1.5rem; padding: .4rem 1.25rem; line-height: 1.4;
  background: var(--tc-bg, var(--bg)); border-bottom: 1px solid var(--tc-border, var(--rule));
}
.site-brand { flex: 1 1 18rem; margin: 0; font-size: 1rem; line-height: 1; letter-spacing: 0; font-weight: 400; }
.site-brand a { display: inline-block; vertical-align: middle; line-height: 0; color: inherit; text-decoration: none; }
.site-brand img { height: 1.5rem; width: auto; vertical-align: middle; }
.site-brand em { font-size: .72rem; font-weight: 400; color: var(--tc-text-dim, var(--muted)); line-height: 1.4; }
.site-nav { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; margin-left: auto; }
.site-nav a, .site-nav button {
  font: inherit; font-size: .85rem; line-height: 1.4; color: var(--tc-text-dim, var(--muted)); text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 2px; cursor: pointer;
}
.site-nav a:hover, .site-nav button:hover { color: var(--tc-text, var(--fg)); }
.site-nav a.is-current, .site-nav button[aria-expanded='true'] { color: var(--tc-text, var(--fg)); border-bottom-color: var(--accent-color, var(--accent)); }
@media (max-width: 720px) { .site-brand em { display: none; } }

/* Renderer only: both lockups are in the DOM and CSS picks the one for the theme in force, because the
   app's theme preference can override the OS, which <picture> cannot see. Dark is the default. */
.site-lockup-light { display: none; }
:root[data-theme='light'] .site-lockup-dark { display: none; }
:root[data-theme='light'] .site-lockup-light { display: inline; }
@media (prefers-color-scheme: light) {
  :root[data-theme='system'] .site-lockup-dark { display: none; }
  :root[data-theme='system'] .site-lockup-light { display: inline; }
}