/* Shared color variables and site-nav styling -- previously duplicated
   identically across every page (webapp/static/*.html,
   webapp/templates/*.html), which meant every color-scheme or nav change
   required a batch find-and-replace across ~10 files instead of one edit
   here. :root[data-theme="dark"] is a dormant manual opt-in -- nothing on
   the site currently sets data-theme, see webapp/app.py's history for why
   (prefers-color-scheme auto-switching was deliberately removed). */
:root {
  --paper: #F3F8FB;
  --paper-raised: #FFFFFF;
  --ink: #16232E;
  --muted: #51697A;
  --faint: #8599A6;
  --line: #DCE7EE;
  --line-strong: #BFD2DD;
  --accent: #1B72A8;
  --accent-ink: #0A4D73;
  --accent-soft: #DCEEFA;
  --gold: #93641C;
  --gold-soft: #F3E6C9;
  --error: #A6402E;
  --shadow: 0 1px 2px rgba(18, 32, 46, 0.06), 0 4px 16px rgba(18, 32, 46, 0.05);
}
:root[data-theme="dark"] {
  --paper: #0E1620; --paper-raised: #16212E; --ink: #E7EEF5; --muted: #93A8B8; --faint: #64768A;
  --line: #223040; --line-strong: #2E4256; --accent: #4FB3E8; --accent-ink: #B8E2F5;
  --accent-soft: #163244; --gold: #E3B75C; --gold-soft: #33291A; --error: #E68A79;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}

/* Header lockup: the mark sits beside the wordmark. Two selectors because
   the markup comes in two shapes -- most pages wrap an <a> in .wordmark,
   while privacy.html and terms.html put .wordmark on the <a> itself.

   The mark is an <img> pointing at the shared file rather than inline SVG,
   so 16 headers share one cacheable request. The name stays live text: it
   remains selectable and searchable, and its spelling lives in exactly one
   place per page instead of being baked into an SVG that would then have to
   be kept in sync with every <title> tag.

   Sized in em so it tracks whatever font-size each page sets on .wordmark
   (26px on most, smaller on the denser pages) instead of needing a per-page
   override. 1.12em lands the square slightly taller than the serif cap
   height, which is what stops it reading as an afterthought next to the
   text. */
.wordmark a, a.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.wordmark-mark { width: 1.12em; height: 1.12em; flex: none; }

/* The nav links measured 22px tall at 375px, against the ~40px a finger
   needs, on all 14 pages that carry this file.

   The height is added ABOVE the text rather than around it, and the nav's own
   margin-top drops by the same amount to absorb it. That keeps two things
   fixed: the text sits where it always did, and the 2px current-page underline
   stays snug beneath it instead of drifting to the bottom of a tall box, which
   is what symmetric padding would have done. Only the touch area changes. */
.site-nav { display: flex; gap: 18px; margin-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.site-nav a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; padding-top: 18px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--accent-ink); }
.site-nav a.current { color: var(--accent-ink); border-bottom-color: var(--accent); }