/* ==========================================================================
   Pomvox — base resets, fonts and keyframes.
   Everything else is inline on the elements in index.html.
   ========================================================================== */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* ---- theme tokens -------------------------------------------------------
   These live here rather than inline on #px-root so that a dark palette is a
   token swap instead of an edit to every element. Layout and spacing stay
   inline in index.html; only colour is centralised.
   The three selectors below must be kept in sync: explicit dark, system dark,
   and the :not([data-theme='light']) guard that lets an explicit light choice
   win over a dark OS setting. CSS has no way to share a token set across
   selectors without a preprocessor, and there is no build step here.
   ------------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --bg:            #FFFFFF;
  --surface:       #FCFBF7;
  --ink:           #17160F;
  --muted:         #4A4940;
  --faint:         #A3A197;
  --hair:          rgba(23, 22, 15, .13);
  --accent:        #B4552E;
  --accent-wash:   rgba(180, 85, 46, .10);
  --accent-ink:    #FFFFFF;
  --card-shadow:   0 14px 40px rgba(60, 45, 30, .10);
  --hud-ring:      transparent;
  --grain-opacity: .68;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg:            #14130E;
  --surface:       #1D1B14;
  --ink:           #F2F0E8;
  --muted:         #B3B0A4;
  --faint:         #8A8778;
  --hair:          rgba(242, 240, 232, .14);
  --accent:        #E0774E;
  --accent-wash:   rgba(224, 119, 78, .16);
  --accent-ink:    #1A160D;
  --card-shadow:   0 14px 40px rgba(0, 0, 0, .45);
  --hud-ring:      rgba(242, 240, 232, .16);
  --grain-opacity: .34;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg:            #14130E;
    --surface:       #1D1B14;
    --ink:           #F2F0E8;
    --muted:         #B3B0A4;
    --faint:         #8A8778;
    --hair:          rgba(242, 240, 232, .14);
    --accent:        #E0774E;
    --accent-wash:   rgba(224, 119, 78, .16);
    --accent-ink:    #1A160D;
    --card-shadow:   0 14px 40px rgba(0, 0, 0, .45);
    --hud-ring:      rgba(242, 240, 232, .16);
    --grain-opacity: .34;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x lives here, not on #px-root. Setting it on a descendant makes that
   element a scroll container (overflow-y computes to auto), and the sticky
   header then sticks to a scrollport that never scrolls — so it scrolls away.
   On the root element it propagates to the viewport instead, and sticky works. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* #px-root only has min-height:100vh, so without this the overscroll
   rubber-band would flash white behind a dark page. */
html, body { background: var(--bg); color: var(--ink); }
a { color: inherit; }
a:hover { color: inherit; }
button { font: inherit; color: inherit; }

/* The export's reset dropped the focus ring, and the page has three kinds of
   keyboard-reachable control: the theme toggle, the copy button, six FAQ rows. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Theme toggle. The icon swap is theme-conditional so it cannot be inline. */
#theme-toggle .icon-sun { display: none; }
#theme-toggle:hover { color: var(--ink); border-color: var(--accent); }
:root[data-theme='dark'] #theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] #theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #theme-toggle .icon-sun { display: block; }
  :root:not([data-theme='light']) #theme-toggle .icon-moon { display: none; }
}

/* The header runs out of room well before the phone breakpoint — five nowrap
   links plus the download button already overflow at 375px, and the
   overflow-x:hidden on #px-root clips it silently instead of scrolling.
   Drop the in-page anchors and keep github + toggle + download. */
@media (max-width: 820px) {
  nav [data-navlink][href^="#"] { display: none; }
  /* the wordmark link is min-width:0 and the tagline is nowrap, so on a phone
     the tagline overflows its shrunk box and collides with the nav. */
  header [data-tagline] { display: none; }
}

@keyframes px-in    { to { opacity: 1; transform: none; } }
@keyframes px-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes px-wf    { 0%, 100% { transform: scaleY(.32) } 50% { transform: scaleY(1) } }
@keyframes px-ping  { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(1.9); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-in] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}