/* Shared across every page in the lab (homepage + all tools) - the exact
   ~30-line palette and header/hero/panel pattern that used to be hand-copied
   into every tool's own <style> block. Only rules that were byte-identical
   (or identical apart from a per-page override, kept inline on that page)
   across every page live here - anything with real per-page variance
   (padding, max-width, tool-specific components) stays in that page's own
   <style> block, after this stylesheet, so it can still override freely.
   No build step: this is a plain stylesheet, loaded with a plain <link>. */

:root {
  --navy: #0F172A;
  --navy-mid: #1E293B;
  --accent: #2563EB;
  --accent-hv: #1D4ED8;
  --surface: #F8FAFC;
  --surface-2: #F1F5F9;
  --text: #334155;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --safe: #16A34A;
  --safe-bg: #DCFCE7;
  --amber: #D97706;
  --amber-bg: #FEF3C7;
  --risk: #DC2626;
  --risk-bg: #FEE2E2;
  --severe: #7F1D1D;
  --severe-bg: #FECACA;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hv); text-decoration: underline; }

/* Skip link - hidden until keyboard-focused, lets keyboard/screen-reader
   users jump past the header straight to the page's main content. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 20px;
  font-weight: 700; font-size: 14px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Consistent visible keyboard focus ring across interactive elements. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.site-nav a:focus-visible, .nav-inner .brand:focus-visible { outline-color: #93C5FD; outline-offset: 3px; }

/* Tool pages' "← Back to Kris's Lab" header - identical on every tool. */
.lab-header { background: var(--navy); padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lab-header-inner { margin: 0 auto; }
.lab-back { color: #93C5FD; font-size: 13px; font-weight: 600; }
.lab-back:hover { color: #fff; }

/* Base hero - every page sets its own padding (tuned to how much intro
   copy it has), kept in that page's own <style> as an override. */
.hero { background: var(--navy); text-align: center; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #93C5FD; margin: 0 0 16px; }

/* Base panel card - padding/margin-bottom vary slightly per page and stay
   as inline overrides where they differ from this default. */
.panel { background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(15,23,42,0.08); padding: 28px; margin-bottom: 20px; }

/* Tool pages' shared footer structure - max-width varies per page. */
footer { margin: 0 auto; padding: 0 20px 48px; text-align: center; }
footer .links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
footer .disclaimer { font-size: 12px; color: var(--text-muted); margin: 0 auto; }