/* ════════════════════════════════════════════════════════════════════════
   Claude AI Class — shared DARK "outer-space" theme (2026-06-26)
   Linked AFTER each page's own inline <style> so it wins the cascade.
   Pairs with assets/space.js + a <canvas id="space"> right after <body>.
   Keeps brand purple as the accent; the violet shooting stars live in the
   canvas. Translucent "glass" panels let the space show through (AR overlay)
   while text stays on a controlled, readable backdrop (no black-on-black).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #05060d; --bg-2: #0a0c18;
  --panel: rgba(15,17,30,0.72); --panel-solid: #11131f;
  --border: rgba(139,124,255,0.18); --border-strong: rgba(139,124,255,0.38);
  --line: rgba(139,124,255,0.18);
  --text: #eef0fb; --muted: #a6abce;
  --accent: #8b7cff; --accent-2: #a99bff; --accent-soft: rgba(139,124,255,0.14);
  --green: #36d399; --gold: #d9a441;
  --warn-soft: rgba(217,164,65,0.12); --warn-border: rgba(217,164,65,0.35);
  --shadow: 0 18px 50px rgba(0,0,0,0.55);
}

/* html is the opaque space-black fallback; BODY must stay transparent — a
   non-positioned element's background paints ABOVE negative z-index children,
   so an opaque body would hide the whole #space canvas. */
html { background: var(--bg); }
body { background: transparent !important; color: var(--text); }

a { color: var(--accent); }

/* full-viewport animated space canvas, pinned behind all content */
#space {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block; background: #05060d; pointer-events: none;
}
/* faint violet nebula vignette over the canvas for depth */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 82% -8%, rgba(139,124,255,.12), transparent 60%),
    radial-gradient(55vmax 45vmax at 5% 8%, rgba(168,139,255,.08), transparent 60%),
    radial-gradient(70vmax 60vmax at 50% 120%, rgba(108,92,231,.07), transparent 60%);
}

/* ── AR glass panels: translucent dark so the stars show through, text stays
   readable. Covers the components used across the learn + course pages. ── */
.topbar, header.top, .guide, .card, .callout, .progress, .mod, .learn,
.newsletter-panel, .panel {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.topbar, header.top {
  background: rgba(8,9,18,.72) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.guide:hover, .card:hover, .mod:hover {
  border-color: var(--border-strong) !important;
  box-shadow: 0 22px 54px rgba(139,124,255,.20) !important;
}

/* Reading column on article pages → subtle dark glass so long text never sits
   raw on a moving beam. (Not the .guide cards on the hub.) */
article:not(.guide) {
  background: rgba(10,12,22,.60);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 34px !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
@media (max-width: 640px) { article:not(.guide) { padding: 22px 18px !important; } }

/* INVERTED elements that used var(--text) as a BACKGROUND (navy boxes) would
   become light-on-light after the flip — force them to dark glass. */
.cta, footer {
  background: rgba(15,17,30,.78) !important;
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cta h3, .cta p, footer, footer a, footer .disclaimer { color: var(--text); }
footer a { color: var(--accent); }

/* example-prompt / code blocks (use --bg-2 → already dark) get a violet edge */
.prompt { background: var(--panel-solid) !important; border-color: var(--border) !important; }

/* form fields → dark with a violet focus ring (course gate, newsletters, etc.) */
input, select, textarea {
  background: var(--panel-solid) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: #6f7392; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(139,124,255,.30) !important;
}

/* course player: light-green "done" states → dark green on the dark theme */
.mod.done { border-color: rgba(54,211,153,.5) !important; }
.mod.done .mod-num { background: rgba(54,211,153,.16) !important; color: var(--green) !important; }
.bar { background: rgba(255,255,255,.08) !important; }
.mod-dur { background: rgba(255,255,255,.06) !important; }

/* keep purple gradient buttons vivid; tweak ghost/soft tints for dark */
.btn-ghost { background: rgba(139,124,255,.12) !important; color: var(--accent) !important;
  border: 1px solid var(--border-strong) !important; }

/* ── COURSE PLAYER (course_body.php): convert its many light interactive
   surfaces — quiz, Claude sandbox, tip calculator, bookends, recap, email
   demos — to dark glass. These class names exist only on the player. ── */
.quiz button.opt, .msg.claude, .sb-steps, .sb-tabs, .calc, .calc .tips button,
.email, .lf, .bookend, .deepdive {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.sb-chat { background: rgba(20,18,40,.62) !important; }
.sb-prev { background: rgba(16,18,32,.62) !important; }
.bookend { background: var(--panel) !important; }
.deepdive { background: rgba(15,17,30,.72) !important; }
.learn { background: rgba(139,124,255,.10) !important; }
.recap { background: rgba(54,211,153,.10) !important; border-color: rgba(54,211,153,.4) !important; }
.quiz button.opt.right, .vlabel.good {
  background: rgba(54,211,153,.16) !important; border-color: rgba(54,211,153,.5) !important; color: var(--green) !important; }
.quiz button.opt.wrong, .vlabel.bad {
  background: rgba(255,107,107,.14) !important; border-color: rgba(255,107,107,.5) !important; color: #ff9b9b !important; }
pre.code { color: #c9cdf5 !important; }            /* was dark navy — invisible on dark */
.email .erow span, .email .ebody, .lf b, .recap p, .deepdive p { color: var(--text) !important; }
.sb-empty, .sb-steps .hint, .email .erow { color: var(--muted) !important; }
/* .video, #coldopen, .finale, .orb are already dark/cinematic — left as-is.
   .cert (certificate of completion) is an intentional cream "paper" document — left light. */
