/* ================== SIGNAL THEME (shipped 2026-08-10) ==================
 * The site's accent system in the signal's own colors: the red →
 * yellow → green ramp the hero's "known" wears, replacing the violet
 * accent, the teal→sky→violet→pink rainbow, and the pink/blue ambient
 * orbs. Loaded AFTER app.css as a pure override so the legacy theme
 * stays intact underneath — REVERT = remove this <link> from
 * index.html (plus restore the test_config tints in the DB + the
 * bank-loader snapshot, and buildRainbowCanvasGradient in app.js).
 * Legacy comparison deploy (frozen tints):
 *   https://aidroplets-sat-traffic-lights-pjx1203g9-ai-droplets.vercel.app
 *
 * Gradients follow the same half-cosine eased stops as app.css (see
 * the anti-banding note above .stl-app there). Ambient orbs run
 * green / yellow / red left-to-right — the wordmark's dot order. */

:root {
  /* legacy: #8b86ff / #5d8dff / rgba(139,134,255,.12) / rgba(139,134,255,.4) */
  --stl-accent:       #4ade80;
  --stl-accent-2:     #86efac;
  --stl-accent-soft:  rgba(74, 222, 128, 0.12);
  --stl-accent-line:  rgba(74, 222, 128, 0.4);
  /* legacy: 90deg #5eead4 0%, #60a5fa 33%, #a78bfa 66%, #f0abfc 100%; mid #a78bfa.
   * Direction reversed 2026-08-10 to green -> yellow -> red, matching
   * the wordmark's new dot order. */
  --stl-rainbow: linear-gradient(90deg, #86efac 0%, #fde047 50%, #fda4af 100%);
  --stl-rainbow-soft: linear-gradient(90deg,
    rgba(134, 239, 172, 0.16)  0%,
    rgba(253, 224, 71, 0.16)  50%,
    rgba(253, 164, 175, 0.16) 100%);
  --stl-rainbow-mid:     #fde047;
  --stl-rainbow-mid-rgb: 253, 224, 71;
  /* Badge-strength ramp: the same stops at the 0.25 alpha every other
   * count chip uses, so a gradient count sits BEHIND its numeral
   * instead of under it. */
  --stl-rainbow-badge: linear-gradient(90deg,
    rgba(134, 239, 172, 0.25) 0%,
    rgba(253, 224, 71, 0.25) 50%,
    rgba(253, 164, 175, 0.25) 100%);
}

/* Light theme: darker cousins of the same three hues, mirroring how
 * app.css darkens the signal tokens for white. Overrides the light
 * block's violet accent (#6963e8) by loading later at equal
 * specificity. */
:root[data-theme="light"] {
  --stl-accent:       #16a34a;
  --stl-accent-2:     #15803d;
  --stl-accent-soft:  rgba(22, 163, 74, 0.10);
  --stl-accent-line:  rgba(22, 163, 74, 0.40);
  --stl-rainbow: linear-gradient(90deg, #16a34a 0%, #ca8a04 50%, #dc2626 100%);
  --stl-rainbow-soft: linear-gradient(90deg,
    rgba(22, 163, 74, 0.12)  0%,
    rgba(202, 138, 4, 0.12) 50%,
    rgba(220, 38, 38, 0.12) 100%);
  --stl-rainbow-mid:     #ca8a04;
  --stl-rainbow-mid-rgb: 202, 138, 4;
  --stl-rainbow-badge: linear-gradient(90deg,
    rgba(22, 163, 74, 0.22) 0%,
    rgba(202, 138, 4, 0.22) 50%,
    rgba(220, 38, 38, 0.22) 100%);
}

/* Ambient orbs (Josh 2026-08-10, third pass — dark/light PARITY):
 * both themes paint the SAME three orbs in the same spots — top-left
 * + top-center on ::after, top-right on ::before. At rest the pair on
 * ::after is COLORED (deep petrol left, deep blue center — blue is
 * the ambience lane, petrol is deeper than PSAT's teal so it doesn't
 * read as a selected test) and the top-right orb stays steel slate.
 * Inside a test flow (score / assess / learn / quiz / results /
 * review / regen) all three crossfade to the ACTIVE TEST's tint.
 *
 * Selector shape matters: app.css's legacy light rules use
 * `:root[data-theme="light"]` (specificity 0,3,1+) which BEAT this
 * file's old `html[...]` overrides — that's why light mode kept the
 * legacy teal/blue/purple orbs while dark went slate (Josh's
 * screenshot 2026-08-10). Every light rule below uses the same
 * `:root[...]` form so the tie breaks on load order (this file loads
 * last). Test-tint gating stays on the VISIBLE SCREEN via :has()
 * because html.stl-test-active is sticky (SAT defaults in at boot).
 * All gradients keep the eased half-cosine 8-stop anti-banding ramps
 * — see the note above .stl-app in app.css. */
.stl-app::before {
  background: radial-gradient(closest-side,
    rgba(71, 85, 105, 0.22)  0%,
    rgba(71, 85, 105, 0.208) 10.5%,
    rgba(71, 85, 105, 0.175) 21%,
    rgba(71, 85, 105, 0.127) 31.5%,
    rgba(71, 85, 105, 0.076) 42%,
    rgba(71, 85, 105, 0.032) 52.5%,
    rgba(71, 85, 105, 0.005) 63%,
    rgba(71, 85, 105, 0)     70%);
}
html:not(.stl-test-active) .stl-app::before {
  background: radial-gradient(closest-side,
    rgba(71, 85, 105, 0.22)  0%,
    rgba(71, 85, 105, 0.208) 10.5%,
    rgba(71, 85, 105, 0.175) 21%,
    rgba(71, 85, 105, 0.127) 31.5%,
    rgba(71, 85, 105, 0.076) 42%,
    rgba(71, 85, 105, 0.032) 52.5%,
    rgba(71, 85, 105, 0.005) 63%,
    rgba(71, 85, 105, 0)     70%);
}
/* :root form — must out-load app.css's purple light neutral rule. */
:root[data-theme="light"] .stl-app::before,
:root[data-theme="light"]:not(.stl-test-active) .stl-app::before {
  background: radial-gradient(closest-side,
    rgba(71, 85, 105, 0.13)  0%,
    rgba(71, 85, 105, 0.123) 10.5%,
    rgba(71, 85, 105, 0.103) 21%,
    rgba(71, 85, 105, 0.075) 31.5%,
    rgba(71, 85, 105, 0.045) 42%,
    rgba(71, 85, 105, 0.019) 52.5%,
    rgba(71, 85, 105, 0.003) 63%,
    rgba(71, 85, 105, 0)     70%);
}
/* At rest, dark: petrol top-left + deep blue top-center (legacy
 * geometry and alphas — the spots and visibility Josh signed off on,
 * with the purple-free hues). */
.stl-app::after {
  background:
    radial-gradient(circle min(48vmax, 760px) at 3% 8%,
      rgba(20, 184, 166, 0.15)  0%,
      rgba(20, 184, 166, 0.142) 10.5%,
      rgba(20, 184, 166, 0.119) 21%,
      rgba(20, 184, 166, 0.087) 31.5%,
      rgba(20, 184, 166, 0.052) 42%,
      rgba(20, 184, 166, 0.022) 52.5%,
      rgba(20, 184, 166, 0.004) 63%,
      rgba(20, 184, 166, 0)     70%),
    radial-gradient(circle min(54vmax, 860px) at 50% 6%,
      rgba(59, 130, 246, 0.19)  0%,
      rgba(59, 130, 246, 0.180) 10.5%,
      rgba(59, 130, 246, 0.151) 21%,
      rgba(59, 130, 246, 0.110) 31.5%,
      rgba(59, 130, 246, 0.066) 42%,
      rgba(59, 130, 246, 0.028) 52.5%,
      rgba(59, 130, 246, 0.005) 63%,
      rgba(59, 130, 246, 0)     70%);
  transition: background var(--dur-slow) var(--ease-out);
}
/* At rest, light: same two orbs, light-tuned geometry (tighter —
 * diffuse washes vanish on white) and the legacy light alphas. */
:root[data-theme="light"] .stl-app::after {
  background:
    radial-gradient(circle min(36vmax, 620px) at 4% 8%,
      rgba(20, 184, 166, 0.16)  0%,
      rgba(20, 184, 166, 0.151) 9.3%,
      rgba(20, 184, 166, 0.127) 18.6%,
      rgba(20, 184, 166, 0.093) 27.9%,
      rgba(20, 184, 166, 0.055) 37.2%,
      rgba(20, 184, 166, 0.023) 46.5%,
      rgba(20, 184, 166, 0.004) 55.8%,
      rgba(20, 184, 166, 0)     62%),
    radial-gradient(circle min(62vmax, 980px) at 50% 6%,
      rgba(37, 99, 235, 0.12)  0%,
      rgba(37, 99, 235, 0.113) 9.3%,
      rgba(37, 99, 235, 0.095) 18.6%,
      rgba(37, 99, 235, 0.069) 27.9%,
      rgba(37, 99, 235, 0.041) 37.2%,
      rgba(37, 99, 235, 0.018) 46.5%,
      rgba(37, 99, 235, 0.003) 55.8%,
      rgba(37, 99, 235, 0)     62%);
}
/* In a test flow: all orbs crossfade to the active test tint. */
html.stl-test-active .stl-app:has([data-screen="score"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="assess"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="learn"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="quiz"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="results"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="review"]:not([hidden]))::before,
html.stl-test-active .stl-app:has([data-screen="regen"]:not([hidden]))::before {
  background: radial-gradient(closest-side,
    rgba(var(--stl-tint, 71, 85, 105), 0.16) 0%,
    rgba(var(--stl-tint, 71, 85, 105), 0.151) 10.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.127) 21%,
    rgba(var(--stl-tint, 71, 85, 105), 0.093) 31.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.055) 42%,
    rgba(var(--stl-tint, 71, 85, 105), 0.023) 52.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.004) 63%,
    rgba(var(--stl-tint, 71, 85, 105), 0) 70%);
}
html.stl-test-active .stl-app:has([data-screen="score"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="assess"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="learn"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="quiz"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="results"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="review"]:not([hidden]))::after,
html.stl-test-active .stl-app:has([data-screen="regen"]:not([hidden]))::after {
  background:
    radial-gradient(circle min(48vmax, 760px) at 3% 8%,
      rgba(var(--stl-tint, 71, 85, 105), 0.14) 0%,
      rgba(var(--stl-tint, 71, 85, 105), 0.132) 10.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.111) 21%,
      rgba(var(--stl-tint, 71, 85, 105), 0.081) 31.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.048) 42%,
      rgba(var(--stl-tint, 71, 85, 105), 0.021) 52.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.003) 63%,
      rgba(var(--stl-tint, 71, 85, 105), 0) 70%),
    radial-gradient(circle min(54vmax, 860px) at 50% 6%,
      rgba(var(--stl-tint, 71, 85, 105), 0.17) 0%,
      rgba(var(--stl-tint, 71, 85, 105), 0.161) 10.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.135) 21%,
      rgba(var(--stl-tint, 71, 85, 105), 0.098) 31.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.059) 42%,
      rgba(var(--stl-tint, 71, 85, 105), 0.025) 52.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.004) 63%,
      rgba(var(--stl-tint, 71, 85, 105), 0) 70%);
}
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="score"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="assess"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="learn"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="quiz"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="results"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="review"]:not([hidden]))::before,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="regen"]:not([hidden]))::before {
  background: radial-gradient(closest-side,
    rgba(var(--stl-tint, 71, 85, 105), 0.11) 0%,
    rgba(var(--stl-tint, 71, 85, 105), 0.104) 10.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.087) 21%,
    rgba(var(--stl-tint, 71, 85, 105), 0.064) 31.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.038) 42%,
    rgba(var(--stl-tint, 71, 85, 105), 0.016) 52.5%,
    rgba(var(--stl-tint, 71, 85, 105), 0.003) 63%,
    rgba(var(--stl-tint, 71, 85, 105), 0) 70%);
}
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="score"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="assess"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="learn"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="quiz"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="results"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="review"]:not([hidden]))::after,
:root[data-theme="light"].stl-test-active .stl-app:has([data-screen="regen"]:not([hidden]))::after {
  background:
    radial-gradient(circle min(36vmax, 620px) at 4% 8%,
      rgba(var(--stl-tint, 71, 85, 105), 0.10) 0%,
      rgba(var(--stl-tint, 71, 85, 105), 0.095) 9.3%,
      rgba(var(--stl-tint, 71, 85, 105), 0.079) 18.6%,
      rgba(var(--stl-tint, 71, 85, 105), 0.058) 27.9%,
      rgba(var(--stl-tint, 71, 85, 105), 0.035) 37.2%,
      rgba(var(--stl-tint, 71, 85, 105), 0.015) 46.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.002) 55.8%,
      rgba(var(--stl-tint, 71, 85, 105), 0) 62%),
    radial-gradient(circle min(62vmax, 980px) at 50% 6%,
      rgba(var(--stl-tint, 71, 85, 105), 0.11) 0%,
      rgba(var(--stl-tint, 71, 85, 105), 0.104) 9.3%,
      rgba(var(--stl-tint, 71, 85, 105), 0.087) 18.6%,
      rgba(var(--stl-tint, 71, 85, 105), 0.064) 27.9%,
      rgba(var(--stl-tint, 71, 85, 105), 0.038) 37.2%,
      rgba(var(--stl-tint, 71, 85, 105), 0.016) 46.5%,
      rgba(var(--stl-tint, 71, 85, 105), 0.003) 55.8%,
      rgba(var(--stl-tint, 71, 85, 105), 0) 62%);
}

/* Glass surface washes stay NEUTRAL (Josh 2026-08-10: no green tinge
 * on glass cards) — app.css now carries slate washes, nothing to
 * override. The teacher band below is a deliberate colored CTA band,
 * not glass, so it keeps its accent gradient. */
.stl-how__teach {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.12) 0%, rgba(163, 230, 53, 0.05) 60%, transparent 100%);
}

/* Insane difficulty tier: app.css colors it via --stl-accent (it was
 * "insane purple" in the violet era), and the accent is now GREEN —
 * which made Insane collide with Easy (Josh 2026-08-10). Insane gets
 * the blue lane instead: #60a5fa dark / #2563eb light. Overrides
 * repeat app.css's own selectors so they win by load order. */
.stl-tier[data-tier="insane"] .stl-tier__name,
.stl-tier[data-composer-tier="insane"] .stl-tier__name { color: #60a5fa; }
.stl-tier[data-tier="insane"]:not(:disabled),
.stl-tier[data-composer-tier="insane"]:not(:disabled) { border-color: rgba(96, 165, 250, 0.4); }
.stl-tier[data-tier="insane"].is-active,
.stl-tier[data-composer-tier="insane"].is-active { background: rgba(96, 165, 250, 0.12); border-color: #60a5fa; }
.stl-tier[data-tier="insane"].is-active .stl-tier__name,
.stl-tier[data-composer-tier="insane"].is-active .stl-tier__name { color: #60a5fa; }
.stl-tier[data-tier="insane"]:not(:disabled):not(.is-active):hover,
.stl-tier[data-composer-tier="insane"]:not(:disabled):not(.is-active):hover {
  border-color: rgba(96, 165, 250, 0.68);
  background: rgba(96, 165, 250, 0.08);
  box-shadow: 0 6px 16px -10px rgba(96, 165, 250, 0.55);
}
.stl-signal__tier[data-tier="insane"] { color: #60a5fa; }
/* Hint-line tier names join the blue lane too. app.css paints them from
 * --stl-accent alongside the tiles, so without this the word "Insane" in a
 * hint came out GREEN while the tile above it was blue — the exact Easy
 * collision this block was written to fix, reintroduced on a new surface
 * (2026-08-17). If another surface starts naming tiers, add it here. */
.stl-hint__tier[data-tier="insane"] { color: #60a5fa; }
.stl-msdd__dot--insane { background: #60a5fa; }
.stl-wk__cell--insane, .stl-wk__bulk.stl-wk__cell--insane { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); }
.stl-wk__cell--insane.is-on { background: rgba(96, 165, 250, 0.12); border-color: #60a5fa; }
:root[data-theme="light"] .stl-tier[data-tier="insane"] .stl-tier__name,
:root[data-theme="light"] .stl-tier[data-composer-tier="insane"] .stl-tier__name,
:root[data-theme="light"] .stl-tier[data-tier="insane"].is-active .stl-tier__name,
:root[data-theme="light"] .stl-tier[data-composer-tier="insane"].is-active .stl-tier__name,
:root[data-theme="light"] .stl-hint__tier[data-tier="insane"],
:root[data-theme="light"] .stl-signal__tier[data-tier="insane"],
:root[data-theme="light"] .stl-wk__cell--insane,
:root[data-theme="light"] .stl-wk__bulk.stl-wk__cell--insane { color: #2563eb; }
:root[data-theme="light"] .stl-msdd__dot--insane { background: #2563eb; }

/* Count badge inside the gradient "All" chip (Josh 2026-08-11). app.css
 * fills it with the ramp at FULL strength and puts --stl-bg text on
 * top; against the light stops the numeral all but disappears. Every
 * sibling chip's badge is a 0.25-alpha tint behind normal text — this
 * matches that, in the ramp's own hues, so the "All" badge still reads
 * as the gradient one without fighting its own label. Also supersedes
 * app.css's light-mode text-color patch for the same element. */
.stl-history__chip[data-history-filter="all"].is-active .stl-history__chip-n {
  background: var(--stl-rainbow-badge);
  color: var(--stl-text);
  font-weight: 600;
}