/* Futuristic site theme — shared override, applied AFTER each page's own
   <style> so it wins the cascade at equal specificity. Palette flip:
   dark blueprint background, neon cyan primary, amber kept for warn
   semantics, red kept for fail semantics. No content, IDs, or class
   names change; only presentation. Card pages (/cards/<ticker>/) do
   NOT load this file — they keep the old light style so a card stands
   out from the rest of the site. The homepage and /learn/ carry their
   own equivalent theme inline and do not load this file either. */
/* Breathing blue haze: every blue glow pulses on the same 4.5s
   timeline, one animation per element (a single animated custom
   property on <html> forced full-document style recalc every frame
   and cost ~12fps in software rendering; per-element filter
   animations cost nothing measurable). Same duration and easing
   everywhere keeps the pulse in sync. */
@keyframes hsHaze {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 194, 232, 0.35)); }
  50% { filter: drop-shadow(0 0 20px rgba(0, 194, 232, 0.85)); }
}
@keyframes hsHazeSoft {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 194, 232, 0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(0, 194, 232, 0.6)); }
}
.hs-guide-btn svg, .brand-logo, .brand-mini img, .go-btn, .cta-btn,
.fb-btn.primary, .pick.on, .sec-head h2::before, .generator h2::before,
.exdiv-head h2::before, .snapshot-note, .card.generated {
  animation: hsHaze 4.5s ease-in-out infinite;
}
.intro h1, .hero-kicker, .tag.good, .house-holding, .feedback-link,
.steps .num, .check-mark.pass {
  animation: hsHazeSoft 4.5s ease-in-out infinite;
}
:root {
  --bg: #04090f;
  --surface: #0a121b;
  --surface-2: #0e1a26;
  --ink: #dcebf5;
  --ink-2: #9db4c6;
  --ink-3: #647e93;
  --line: #1b2f42;
  --accent: #00e5ff;
  --accent-ink: #02161c;
  --accent-soft: #06232c;
  --gold: #ffb020;
  --gold-soft: #2a1e05;
  --red: #ff6f61;
  --red-soft: #2c130f;
  --chip: #0c1722;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 229, 255, 0.07);
}
::selection { background: rgba(0, 229, 255, 0.3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body {
  background-color: var(--bg);
  /* Grid lines live on the #grid-ripple canvas (it waves on scroll/tap);
     only the top glow stays in CSS. */
  background-image:
    radial-gradient(900px 380px at 50% -80px, rgba(0, 229, 255, 0.14), transparent 70%);
}
#grid-ripple {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Headlines go geometric sans. */
.sec-head h2,
.generator h2,
.exdiv-head h2,
.card-h1,
.brand-mini,
.sec-head p.tagline {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.sec-head p.tagline { color: var(--accent); font-weight: 700; }
/* Cyan rule marker above section headings — pure shape, no new copy. */
.sec-head h2::before,
.generator h2::before,
.exdiv-head h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: 10px;
}
/* Sticky console header. */
.page-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--line);
}
.nav-toggle { border-color: rgba(0, 229, 255, 0.4); }
.site-nav.open { border-top-color: rgba(0, 229, 255, 0.25); }
.site-nav.open a { border-bottom-color: rgba(0, 229, 255, 0.15); }
/* Glowing brand marks (halo breathes via the shared animation). */
.brand-logo { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.5); }
.brand-mini img { box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.4); }
.footer-mark { filter: none; opacity: 0.65; }
/* Neon mono labels. */
.snapshot-note {
  color: var(--accent);
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.06);
  letter-spacing: 0.04em;
}
.exdiv-item .lbl { color: var(--accent); }
.metric .k { letter-spacing: 0.09em; }
.report .issue { color: var(--accent); }
.lib-index h3 { letter-spacing: 0.09em; }
/* Glass edge on the main panels. */
.card, .generator, .exdiv, .report, .feedback, .panel, .lib-item, .door {
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.07), var(--shadow);
}
/* Primary actions: steady ring, breathing halo. */
.go-btn, .cta-btn, .fb-btn.primary {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35);
}
/* Focus rings carry cyan. */
#ticker-search:focus, .plan-amt-input:focus, .fb-input:focus, .fb-select:focus, .fb-textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
}
/* Hover borders go cyan instead of gold. */
.lib-item:hover, .door:hover, .rel-list a:hover { border-color: var(--accent); }
/* Trap-diamond icons drawn with a hardcoded fill (ledger page) join
   the theme's red instead of the old dark red. */
svg [fill="#9c2b1e"] { fill: #ff6f61; }
/* Guide bill (the floating $ helper): recolour the inline SVG from
   green to the theme's blue. CSS fill/stroke beat the SVG presentation
   attributes, so no guide.js change is needed. */
.hs-guide-btn svg [fill="#2e7d46"] { fill: #00c2e8; }
.hs-guide-btn svg [stroke="#1c5a2e"] { stroke: #014b5c; }
.hs-guide-btn svg [fill="#e9f4e6"] { fill: #e8fbff; }
.hs-guide-btn svg [stroke="#a9d3ae"] { stroke: #8ef1ff; }
.hs-guide-btn svg [fill="#1c5a2e"] { fill: #014b5c; }
/* Guide helper panel (guide.js injects its own light palette at
   runtime; body-prefixed rules win on specificity on themed pages
   only — card pages keep the panel as guide.js styles it). */
body .hs-guide-panel { background: #0a121b; color: #dcebf5; border-color: #1b2f42; }
body .hs-guide-head, body .hs-guide-foot { background: #0e1a26; border-color: #1b2f42; }
body .hs-guide-head .s, body .hs-guide-close, body .hs-guide-ans .watch, body .hs-guide-none { color: #9db4c6; }
body .hs-guide-search input { background: #04090f; color: #dcebf5; border-color: #1b2f42; }
body .hs-guide-sec { color: #647e93; }
body .hs-guide-row { color: #00e5ff; border-color: #1b2f42; }
body .hs-guide-row:hover { background: #0e1a26; }
body .hs-guide-ans { color: #dcebf5; border-color: #1b2f42; }
body .hs-guide-ans a, body .hs-guide-deflect a, body .hs-guide-none a, body .hs-guide-foot a { color: #00e5ff; }
body .hs-guide-deflect { background: #2c130f; border-color: #ffb020; color: #dcebf5; }
@media (prefers-reduced-motion: reduce) {
  .hs-guide-btn svg, .brand-logo, .brand-mini img, .go-btn, .cta-btn,
  .fb-btn.primary, .pick.on, .sec-head h2::before, .generator h2::before,
  .exdiv-head h2::before, .snapshot-note, .card.generated, .intro h1,
  .hero-kicker, .tag.good, .house-holding, .feedback-link, .steps .num,
  .check-mark.pass {
    animation: none;
  }
}