/* Shared site header — the ONE canonical header look, served once at
   /assets/site-header.css and <link>'d by every page so the gold-standard
   /crates header shape is repeatable instead of copy-pasted per page.

   Every rule below uses the shared :root palette vars (--bg, --bg-elev,
   --bg-card, --fg, --dim, --accent, --pass, --fail, --warn, --border)
   which each page already defines in its inline <style> :root. The
   selectors are named EXACTLY as /crates (the gold standard) uses them so
   existing page markup keeps working unchanged. */

/* Page frame — centers content, using most of the viewport on wide screens
   (was a fixed 1200px that left big empty margins on large monitors) while
   keeping a bound so line lengths stay readable on ultrawide displays. */
.frame {
  max-width: min(1800px, 94vw);
  margin: 0 auto;
  padding: 1.5rem;
}

/* Header — the 3-column grid: logo | title | nav. */
header.src-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  margin-bottom: 1.25rem;
}

/* Logo glyph — teal accent with a soft drop-shadow. */
.logo {
  font-size: 1.6rem;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(106, 216, 200, 0.5));
}

/* Title block — page name + context sub-line (the data-site-nav menu). */
.title h1 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
/* Sub-line — holds the ONE shared top-nav (filled by /assets/site-nav.js).
   Pinned to an ABSOLUTE px size (not rem) on purpose: /ci sets
   :root{font-size:13px} for its dense tables, which would otherwise shrink
   a rem-sized menu to ~10px there while every other page rendered it at
   ~12.5px. An absolute size makes the menu pixel-identical on every page
   regardless of that page's root font-size. */
.title .sub {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.6;
}
/* The shared top-nav links + active marker, styled ONCE here so the menu
   looks identical on every page instead of inheriting each page's anchor
   colour / spacing. The ` · ` separators are plain text from site-nav.js
   and inherit the --dim .sub colour. */
.title .sub [data-site-nav] a {
  color: var(--accent);
  text-decoration: none;
}
.title .sub [data-site-nav] a:hover {
  text-decoration: underline;
}
.title .sub [data-site-nav] .site-nav-active {
  color: var(--fg);
  font-weight: 700;
  opacity: 0.85;
}

/* Nav block — auth line + sign in/out buttons. */
.nav {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  font-size: 0.85rem;
}
.nav .auth {
  color: var(--dim);
}
.nav .signed-in {
  color: var(--pass);
}

/* Shared header button — the sign in / sign out affordance. Transparent
   so it reads as a ghost button against the elevated header background;
   accent text + border, small radius, compact padding. Pages can give
   their <button> this class instead of repeating an inline style. */
.hdr-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  font: inherit;
  cursor: pointer;
}
.hdr-btn:hover {
  filter: brightness(1.1);
}