/* Round 3 shared styles: tokens, type, header, glass surfaces (HTML text over WebGL panes), liquid buttons.
   The panes themselves are drawn by WebGL under these elements; with no WebGL (low power) the same elements get
   a CSS backdrop-filter instead. */
:root {
  --bg: #05070c; --fg: #f2f4f8; --fg2: #c3cad7; --fg3: #a3acbc; --gold: #e6bd68; --gold-ink: #120b02; --line: rgba(255,255,255,.14);
  --glass-css: rgba(12, 24, 44, .62); --glass-css-line: rgba(255,255,255,.16);
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r-pane: 30px; --r-pill: 999px; --hdr: 64px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e4e7eb; --fg: #0b1220; --fg2: #3d4655; --fg3: #4c5463; --gold: #7d5200; --gold-ink: #120b02; --line: rgba(10,20,40,.14);
  --glass-css: rgba(250, 251, 253, .66); --glass-css-line: rgba(255,255,255,.7);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.5 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(230,189,104,.35); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* a tap answers on the control itself, never as the browser's blue flash: the liquid press on .lq (ui.js), and a short
   press (smaller, a touch brighter, darker on light) on every other button */
html { -webkit-tap-highlight-color: transparent; }
:where(button, .links a):not(.lq) { transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s; }
:where(button, .links a):not(.lq):not(:disabled):active { transform: scale(.96); filter: brightness(1.22); transition-duration: .05s; }
:where([role="button"]):active { filter: brightness(1.22); } /* moved by script every frame, so no transform here */
:root[data-theme="light"] :where(button, .links a):not(.lq):not(:disabled):active, :root[data-theme="light"] :where([role="button"]):active { filter: brightness(.9); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y; object-fit: cover; object-position: 50% 0; } /* the drawing can be taller than the box: shown 1:1 from the top (glass.js) */
.low-power #gl { display: none; }

/* header: brand left, theme + sign in right */
.hdr { position: fixed; z-index: 20; left: 0; right: 0; top: env(safe-area-inset-top, 0px); /* below the status bar in an installed app */ height: var(--hdr); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 3vw, 32px); pointer-events: none; }
.hdr > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 16px; }
.brand svg { width: 26px; height: auto; display: block; }
.hdr-r { display: flex; gap: 10px; align-items: center; }

/* glass surfaces: text sits here, the slab is drawn by WebGL underneath */
.glass { position: relative; border-radius: var(--r-pane); color: var(--fg); }
.pill { border-radius: var(--r-pill); }
.low-power .glass { background: var(--glass-css); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 1px 0 var(--glass-css-line), 0 18px 40px rgba(0,0,0,.28); }

/* liquid buttons */
.lq { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; background: transparent; border-radius: var(--r-pill); cursor: pointer; font-weight: 550; font-size: 15px; letter-spacing: -.005em; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; will-change: transform; }
.lq.gold { color: var(--gold-ink); font-weight: 650; }
.lq[aria-pressed="true"] { color: var(--gold); }
:root[data-theme="light"] .lq.gold { color: #120b02; }
.low-power .lq.gold { background: linear-gradient(180deg, #f0cf7c, #c9952f); }
.seg { display: inline-flex; padding: 4px; gap: 2px; height: 44px; align-items: center; }
.seg button { height: 36px; padding: 0 12px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--fg2); }
.seg button[aria-pressed="true"] { color: var(--fg); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background: rgba(10,20,40,.08); }

.src { font: 500 12.5px/1.4 var(--mono); color: var(--gold); letter-spacing: 0; }
.eyebrow { font: 500 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.mono { font-family: var(--mono); }

/* footer (risk line + server line) */
.foot { font-size: 13px; line-height: 1.5; color: var(--fg2); }
.foot nav { display: flex; gap: 18px; margin-top: 10px; font: 500 12.5px var(--mono); }
.foot nav a { text-decoration: none; color: var(--fg); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }