/* aurora-glass.css — Student v2 "Aurora Glass" (raw, operator taste call)
 * Loaded LAST after layout-b.css. Scoped to body[data-route="students-v2"] so it
 * cannot affect the live /students/ page (which keeps its scrim + §6.7 mesh).
 *
 * Per docs/superpowers/specs/2026-06-02-persona-ui-variants-design.md §5:
 *  - Background: aurora radial washes (violet/magenta/orange) + rotating conic
 *    halo over a near-black base.
 *  - Glass panels go RAW: 7% white fill, hairline, NO scrim, blur(14px).
 *  - Contrast handled by §6.7 placement (panels favor the dark base zones);
 *    documented mobile AA-large waiver in the spec.
 */

/* ── 1. Static near-black base. The colored auras are NOT baked into the body
 *      background (which would scroll/stick); they live in fixed, scroll-faded
 *      layers (.aura-top / .aura-bottom) driven by aurora-scroll.js. ── */
body[data-route="students-v2"] {
  background: linear-gradient(180deg, #070a12 0%, #0b1020 55%, #05070d 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Fixed aura layers. .aura-top (violet/magenta) fades OUT as the user scrolls
   down; .aura-bottom (orange) fades IN. Opacity set inline by aurora-scroll.js;
   the values below are the at-rest defaults (top lit, bottom dark). */
body[data-route="students-v2"] .aura-top,
body[data-route="students-v2"] .aura-bottom {
  position: fixed; inset: 0; pointer-events: none; z-index: -2; will-change: opacity;
}
body[data-route="students-v2"] .aura-top {
  background:
    radial-gradient(900px 520px at 16% 12%, rgba(162, 35, 231, 0.50), transparent 60%),
    radial-gradient(820px 560px at 74% 52%, rgba(231, 35, 142, 0.50), transparent 62%);
  opacity: 1;
}
body[data-route="students-v2"] .aura-bottom {
  background: radial-gradient(1100px 720px at 60% 104%, rgba(231, 84, 35, 0.42), transparent 66%);
  opacity: 0;
}
@supports (background: color-mix(in oklab, white, black)) {
  body[data-route="students-v2"] .aura-top {
    background:
      radial-gradient(900px 520px at 16% 12%, color-mix(in oklab, #A223E7 60%, transparent), transparent 60%),
      radial-gradient(820px 560px at 74% 52%, color-mix(in oklab, #E7238E 60%, transparent), transparent 62%);
  }
  body[data-route="students-v2"] .aura-bottom {
    background: radial-gradient(1100px 720px at 60% 104%, color-mix(in oklab, #E75423 50%, transparent), transparent 66%);
  }
}
/* Reduced motion: no scroll-driven fade — a gentle static blend instead. */
@media (prefers-reduced-motion: reduce) {
  body[data-route="students-v2"] .aura-top { opacity: 0.7; }
  body[data-route="students-v2"] .aura-bottom { opacity: 0.4; }
}

/* ── 2. Rotating conic halo (extra color motion behind the glass) ── */
body[data-route="students-v2"] .glow-stage {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  z-index: -1; isolation: isolate;
}
body[data-route="students-v2"] .glow-stage::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 180deg,
    #A223E7, #E723DC, #E7238E, #E72340, #E75423, #A223E7);
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: aurora-spin 16s linear infinite;
  will-change: transform;
}
@keyframes aurora-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body[data-route="students-v2"] .glow-stage::before { animation: none; }
}

/* ── 3. RAW glass override: 7% white fill, hairline, NO scrim, blur 14px ── */
body[data-route="students-v2"] .glass-panel,
body[data-route="students-v2"] .c-card--b,
body[data-route="students-v2"] .c-ticker--b,
body[data-route="students-v2"] .stat-card-b {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body[data-route="students-v2"] .c-card--b:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
}
/* kill the mandatory scrim — raw look per operator choice */
body[data-route="students-v2"] .glass-panel::before,
body[data-route="students-v2"] .c-card--b::before,
body[data-route="students-v2"] .c-ticker--b::before,
body[data-route="students-v2"] .stat-card-b::before {
  display: none;
}

/* ── 4. Fallback when backdrop-filter unsupported: solidify so text stays legible ── */
@supports not (backdrop-filter: blur(1px)) {
  body[data-route="students-v2"] .glass-panel,
  body[data-route="students-v2"] .c-card--b,
  body[data-route="students-v2"] .c-ticker--b,
  body[data-route="students-v2"] .stat-card-b {
    background: rgba(20, 25, 40, 0.85);
  }
}

/* ── 5. Typography "Fintech Audit": Montserrat heavy geometric headers + Inter
 *      body + UI math. Kills the editorial Instrument-Serif italic so
 *      "Don't get played" reads as an absolute rule. Wordmark keeps Instrument
 *      Serif italic. ── */
body[data-route="students-v2"] { --font-body: 'Inter', 'Satoshi', sans-serif; }
body[data-route="students-v2"] h1,
body[data-route="students-v2"] h2,
body[data-route="students-v2"] h3 {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  text-align: left;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body[data-route="students-v2"] h2,
body[data-route="students-v2"] h3 { font-weight: 700; }
/* Inter for all UI math: big stat numerals + slider output (kill serif italic) */
body[data-route="students-v2"] .stat-number,
body[data-route="students-v2"] .calc-input-row output {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 6. CTA hover: brighten + lift + accent glow (a real highlight). The shared
 *      glass.css hover paled the pink to #f090f8 (reads as fading); v2 keeps the
 *      saturated magenta and lights it UP instead, consistent across all CTAs. ── */
body[data-route="students-v2"] .c-btn--b:hover {
  background: var(--color-cta);          /* stay saturated — keeps dark text crisp */
  /* Override tokens-b.css `a:hover { color: var(--color-primary) }` (pink), which
     otherwise turns button labels pink-on-pink (invisible) on anchor CTAs. */
  color: var(--color-cta-text);
  -webkit-text-fill-color: var(--color-cta-text);
  box-shadow: 0 0 34px var(--color-cta-glow),
              0 0 12px var(--color-cta-glow),
              0 6px 18px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}
body[data-route="students-v2"] .c-btn--b:active {
  transform: translateY(0);
  box-shadow: 0 0 14px var(--color-cta-glow);
}

/* ── 7. Inventory carousel.
 *      IMPORTANT: inventory-carousel.js detectVariant() gates the card skin on a
 *      STRICT `body.dataset.route === 'students'` check, so this "students-v2"
 *      route renders .inv-card--a cards (not --b). The JS is locked, so we skin
 *      the rendered cards as glass here, variant-agnostically, and fix the title
 *      font variant-agnostically (the old .inv-card--b-scoped rule never matched).
 *      Without this the cards render flat near-black with italic-serif titles
 *      (.inv-card--a uses var(--color-bg)=#0c0c18 + undefined --neuro-* on the
 *      tokens-b page). Also widen the wrap so cards read comfortably. ── */
body[data-route="students-v2"] .inventory-section > .wrap { max-width: 1120px; }

/* Glass-skin whichever variant the engine emits (covers --a today, --b if the
   route check is ever widened) — overrides inventory.css .inv-card--a. */
body[data-route="students-v2"] .inv-card--a,
body[data-route="students-v2"] .inv-card--b {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body[data-route="students-v2"] .inv-card--a:hover,
body[data-route="students-v2"] .inv-card--b:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
@supports not (backdrop-filter: blur(1px)) {
  body[data-route="students-v2"] .inv-card--a,
  body[data-route="students-v2"] .inv-card--b { background: rgba(20, 25, 40, 0.85); }
}

/* Title fixed variant-agnostically (was scoped to .inv-card--b → never matched). */
body[data-route="students-v2"] .inv-card__title {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
body[data-route="students-v2"] .inv-card__price {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── 8. Ledger digit alignment: pad suffix-less OTD/monthly by the "/mo" width. ── */
body[data-route="students-v2"] #calc-otd,
body[data-route="students-v2"] #calc-monthly { padding-right: 2.6ch; }

/* ── 6. CTA breathing room: let the user digest the verdict before acting ── */
body[data-route="students-v2"] .calc-result__cta { margin-top: 1.75rem; }

/* ── 7. Ledger math: values right-justified, tabular digits (same flex-wrap
 *      model as parent v2 — calc.js nests rows inside the monthly line). ── */
body[data-route="students-v2"] .calc-result__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-4);
}
body[data-route="students-v2"] .calc-result__line > strong {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-route="students-v2"] .calc-line {
  flex: 1 0 100%;
  margin: var(--space-2) 0 0;
}
body[data-route="students-v2"] .calc-line__label { order: 1; }
body[data-route="students-v2"] .calc-line__tag   { order: 2; margin-left: var(--space-2); }
body[data-route="students-v2"] .calc-line__value {
  order: 3; margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}