/* Rinehart EXCEL — Class Launchpad.
   Neon-on-dark class site. Dark is the default; light is an opt-in toggle
   (:root[data-theme="light"]). System font stacks only — no webfont CDN, so the
   page makes zero third-party requests. */

:root{
  --mono: ui-monospace,"Cascadia Code","SF Mono","JetBrains Mono",Consolas,monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw: 1040px;
  --radius: 13px;

  /* dark (default) */
  --ground:#080b14; --panel:#111a2e; --panel-2:#0d1524;
  --line:#22304e; --line-strong:#2e3c5e;
  --text:#e9edfb; --muted:#8c98b8; --muted-dim:#5f6c8c;
  --cyan:#3ae8ff; --magenta:#ff5ad8; --lightblue:#7ec8ff;
  --glow: .85;                 /* glow strength; 0 disables all neon glow */
  --grid: rgba(255,255,255,.022);
}

/* Light theme — opt-in via the toggle (dark stays the default regardless of OS). */
:root[data-theme="light"]{
  --ground:#eef1f8; --panel:#ffffff; --panel-2:#f4f6fb;
  --line:#dbe2ee; --line-strong:#c7d0e0;
  --text:#141b2c; --muted:#54607a; --muted-dim:#8b95ad;
  --cyan:#0b83b0; --magenta:#b3249a; --lightblue:#2f7fd0;
  --glow: 0;
  --grid: rgba(20,30,60,.045);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; font-family:var(--sans); color:var(--text); line-height:1.5;
  background:var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-attachment: fixed;
}

/* ---- Grid pulse: neon glow that sweeps along the floor grid; color + direction randomized
   per sweep by JS (site.js sets --pc / --pa + animates the mask). Toggleable, behind everything. ---- */
#gridpulse{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  --pc: rgba(58,232,255,.6); --pa: 115deg;
  background-image:
    linear-gradient(var(--pc) 1px, transparent 1px),
    linear-gradient(90deg, var(--pc) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  -webkit-mask: linear-gradient(var(--pa), transparent 34%, #000 46%, #000 54%, transparent 66%);
  mask: linear-gradient(var(--pa), transparent 34%, #000 46%, #000 54%, transparent 66%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-position: 0% 0%; mask-position: 0% 0%;
}
.pulse-off #gridpulse{ display:none; }
:root[data-theme="light"] #gridpulse{ opacity:.36; }

.wrap{ width:min(var(--maxw), calc(100% - 44px)); margin:0 auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:5px; }

/* ---- Header ---- */
header{ border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ground) 72%, transparent); backdrop-filter:blur(7px); position:sticky; top:0; z-index:20; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:34px; height:34px; display:block; border-radius:10px; filter: drop-shadow(0 0 calc(12px * var(--glow)) rgba(255,43,214,.45)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--mono); letter-spacing:.13em; font-size:.82rem; text-transform:uppercase; }
.brand-text span{ color:var(--muted); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; font-family:var(--mono); }
.toggles{ display:flex; gap:8px; }
.toggles button{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--text); font:inherit; font-size:1rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .15s, background .15s; }
.toggles button:hover{ border-color:color-mix(in srgb, var(--cyan) 50%, var(--line)); }
.pulse-ico{ width:16px; height:16px; border-radius:4px; display:block; background-color:#0d1524; background-image:linear-gradient(rgba(58,232,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(58,232,255,.9) 1px,transparent 1px); background-size:5px 5px; box-shadow:0 0 7px rgba(58,232,255,.5); }
.pulse-off #pulse-toggle .pulse-ico{ filter:grayscale(.7); opacity:.5; box-shadow:none; }

/* ---- Hero ---- */
.hero{ padding:50px 0 26px; }
.eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan); margin-bottom:15px; }
.hero h1{ margin:0; font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.04; font-weight:800; letter-spacing:-.02em; text-wrap:balance; text-shadow:0 0 calc(34px * var(--glow)) color-mix(in srgb, var(--cyan) 30%, transparent); }
.hero h1 .b{ color:var(--cyan); }

/* ---- Section label ---- */
.lbl{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:32px 0 14px; display:flex; align-items:center; gap:9px; }
.lbl::before{ content:"\203A"; color:var(--cyan); font-weight:700; }

/* ---- Module grid ---- */
.module-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.module{ --c:var(--cyan); position:relative; overflow:hidden; padding:16px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; gap:9px; min-height:130px; color:var(--text); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.module::after{ content:""; position:absolute; left:16px; right:16px; top:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--c), transparent 82%); box-shadow:0 0 calc(10px * var(--glow)) var(--c); opacity:calc(.4 + .5 * var(--glow)); }
a.module:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--c) 90%, black); }
.module .icon{ width:46px; height:46px; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 12%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--c) 34%, transparent); }
.module .icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.module h3{ margin:0; font-size:1rem; font-weight:700; }
.module p{ margin:0; color:var(--muted); font-size:.83rem; line-height:1.4; }

/* ---- Homework buttons ---- */
.hw{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hwbtn{ --c:var(--cyan); display:flex; align-items:center; gap:14px; padding:17px 20px; border-radius:var(--radius); color:var(--text); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--panel)), var(--panel)); border:1px solid color-mix(in srgb, var(--c) 42%, var(--line)); box-shadow:0 0 calc(22px * var(--glow)) -12px var(--c); transition:transform .16s ease, box-shadow .16s ease; }
.hwbtn:hover{ transform:translateY(-3px); box-shadow:0 0 calc(30px * var(--glow)) -10px var(--c); }
.hwbtn .tag{ width:44px; height:44px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:1.3rem; background:color-mix(in srgb, var(--c) 18%, var(--panel-2)); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.hwbtn b{ font-size:1.05rem; font-weight:700; }
.hwbtn small{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--c); margin-top:3px; }

/* ---- Quick links ---- */
.linkgrid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.linktile{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); font-size:.9rem; font-weight:600; transition:border-color .15s, transform .15s; }
.linktile:hover{ border-color:color-mix(in srgb, var(--cyan) 45%, var(--line)); transform:translateY(-2px); }
.linktile .d{ width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 calc(8px * var(--glow)) var(--cyan); flex:none; }
.linktile .lt-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linktile .lt-ext{ margin-left:auto; color:var(--muted-dim); font-family:var(--mono); font-size:.7rem; }

/* ---- Signal panels (quote / fact) ---- */
.signals{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sig{ padding:18px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); }
.sig .cap{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:11px; }
.sig.q .cap{ color:var(--magenta); }
.sig.f .cap{ color:var(--lightblue); }
.sig blockquote{ margin:0; font-style:italic; font-size:1.05rem; line-height:1.5; }
.sig cite{ display:block; margin-top:9px; color:var(--muted); font-size:.84rem; font-style:normal; }
.sig .facttag{ display:inline-block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lightblue); border:1px solid color-mix(in srgb, var(--lightblue) 40%, transparent); border-radius:999px; padding:2px 8px; margin-bottom:10px; }
.sig .body{ margin:0; font-size:1.02rem; line-height:1.55; }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; }
.site-footer .footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; padding:20px 0 28px; color:var(--muted); font-size:.85rem; }
.site-footer a{ color:var(--muted); font-weight:600; }
.site-footer a:hover{ color:var(--text); text-decoration:underline; }
.site-footer .sep{ color:var(--muted-dim); }
.site-footer .site-ver{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--muted-dim); }

/* ---- Prose (privacy) ---- */
.prose{ max-width:760px; }
.prose h1{ margin:0 0 4px; }
.prose .updated{ color:var(--muted); font-size:.85rem; margin-bottom:20px; }
.prose h2{ font-size:1.05rem; margin:26px 0 8px; }
.prose p{ color:var(--text); margin:0 0 12px; line-height:1.6; }
.prose ul{ margin:0 0 12px 22px; color:var(--text); line-height:1.6; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--cyan); font-weight:600; }

@media (max-width:820px){
  .module-grid{ grid-template-columns:repeat(2, 1fr); }
  .hw, .signals, .linkgrid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .module-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  a.module:hover, .hwbtn:hover, .linktile:hover{ transform:none; }
}