/* SetPrep website — shared design system.
   Mirrors gui.html's palette and font stack so the site and the app feel like
   the same brand. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Syne:wght@400;700;800&display=swap');

/* ── OAuth provider buttons ───────────────────────────────────────────────
   Industry-standard styling per Google brand guidelines (white) + Apple HIG
   (black). Hidden by default; pages reveal each one based on
   /api/auth/providers status (so UI works whether or not OAuth is wired). */
.oauth-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.oauth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; border-radius: 6px; font-family: 'Syne', sans-serif;
  font-size: 14px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--border2); transition: opacity 120ms ease;
}
.oauth-btn:hover { opacity: 0.9; }
.oauth-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.oauth-google:hover { color: #1f1f1f; }
.oauth-apple  { background: #000; color: #fff; border-color: #000; }
.oauth-apple:hover  { color: #fff; }
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .15em;
  margin: 4px 0 6px 0;
}
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

:root {
  --bg:        #0a0a0a;
  --surface:   #111;
  --surface2:  #181818;
  --border:    #222;
  --border2:   #2e2e2e;
  --accent:    #c8ff00;
  --accent2:   #00d4ff;
  --text:      #f0f0f0;
  --muted:     #888;
  --green:     #00ff88;
  --red:       #ff4444;
  --orange:    #ff8c00;
  --max-width: 1100px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* Transparent body so the page-wide background video shows through.
     The original solid var(--bg) is preserved as a fallback if the video
     fails to load (browser's :poster + tint cover it). */
  background: transparent;
  color:      var(--text);
  font-family:'Syne', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
html { background: var(--bg); }  /* ultimate fallback below the video */

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(200,255,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,255,0,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--accent); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(10,10,10,.85);
  backdrop-filter: blur(6px);
  position: sticky; top: 0;
}
.site-header .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -.02em; font-size: 20px;
  /* The .logo is an <a>, and the global `a { color: var(--accent2); }`
     rule otherwise makes the whole wordmark cyan. Force white here so
     "Set" reads white and matches the in-app header. */
  color: var(--text);
  text-decoration: none;
}
.site-header .logo-mark {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.site-header .logo-mark svg { display: block; }
/* Wordmark "Set" inherits the white .logo color above; "Prep" gets lime
   via the inline style on the inner span in header.js. Do NOT add a
   blanket `.logo span { color: accent }` rule — it would flatten the
   Set/Prep contrast and (previously) made the .logo-mark "S" invisible. */
.site-header .nav {
  display: flex; align-items: center; gap: 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.site-header .nav a { color: var(--muted); }
.site-header .nav a:hover { color: var(--text); }
.site-header .nav a.cta {
  background: var(--accent); color: #000;
  padding: 8px 14px; border-radius: 6px;
  font-weight: 700;
}
.site-header .nav a.cta:hover { background: #d4ff33; color: #000; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  position: relative; z-index: 1;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding: 80px 32px 64px;
  text-align: center;
  position: relative; z-index: 2;
}

/* ── Hero with background video (kick-bass.com inspired) ─────────────────── */
/* Layered: <video> at the bottom, dark gradient tint over it, then content.
   When the video file is missing, the page falls back gracefully to the
   poster image, then to the body's grid background. */
.hero-video {
  position: relative;
  /* No `overflow:hidden` — the hero used to clip the absolute video, but
     the video is now position:fixed at the body root so it covers the
     whole viewport. Hero is just the first-screen content container. */
  padding: 110px 32px 96px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}
/* ── Page-wide background video layer (kick-bass.com style) ─────────── */
/* Position: fixed at viewport root so the video remains visible behind
   every section as the user scrolls. Uses z-index 0 (NOT negative) —
   negative z-indexes get hidden behind the body's painted background
   in some browsers when the body has any background at all, which was
   why the video disappeared after the hero refactor. All content
   elements (header, hero, sections, footer) explicitly sit above. */
.hero-bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.65) saturate(0.85) contrast(1.05);
  transition: opacity 0.9s ease-in-out;
  pointer-events: none;
}
.hero-bg-active  { opacity: 1; }
.hero-bg-pending { opacity: 0; }

/* ── Background music toggle (kick-bass.com style speaker icon) ────── */
.audio-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.audio-toggle:hover {
  background: rgba(40, 40, 40, 0.85);
  border-color: rgba(200, 255, 0, 0.45);
  transform: translateY(-1px);
}
.audio-toggle .icon-playing { display: none; }
.audio-toggle.is-playing .icon-muted { display: none; }
.audio-toggle.is-playing .icon-playing { display: block; color: var(--accent); }
@media (max-width: 640px) {
  .audio-toggle { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}
.hero-bg-tint {
  /* Sits between video and content. z-index 1 puts it above the video
     (z-index 0) and below the page content (z-index 2+). */
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.30) 70%, rgba(10,10,10,0.55) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
}
.hero .pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
  background: rgba(200,255,0,.06);
  border: 1px solid rgba(200,255,0,.25);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 800;
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--accent); }
.hero p.lede {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.6;
  color: #ccc;
}
.hero .cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 8px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform .12s, background .15s;
}
.btn-primary {
  background: var(--accent);
  color: #000;
}
.btn-primary:hover { background: #d4ff33; transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.10);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.25); transform: translateY(-1px); }

/* ── Unified green CTA buttons (SetPrep brand colour) ──────────────── */
/* All hero CTAs share this style so the row reads as a coherent set
   matching the lime accent. Black text — white text on lime green is
   ~1.06:1 contrast (illegible per WCAG); black on lime is ~14:1. */
.btn-cta-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #000;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(200, 255, 0, 0.18);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-cta-green:hover {
  background: #d4ff33;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(200, 255, 0, 0.28);
}
.btn-cta-green__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.btn-cta-green--icon .btn-cta-green__icon { margin-top: -1px; }
@media (max-width: 640px) {
  .btn-cta-green { padding: 14px 22px; font-size: 15px; }
  .btn-cta-green__icon { width: 20px; height: 20px; }
}
.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.btn-secondary:hover { background: var(--border); color: var(--text); }

/* ── Section ─────────────────────────────────────────────────────────────── */
section {
  padding: 64px 0;
  border-top: 1px solid var(--border);
  /* Semi-opaque dark backdrop so text reads cleanly while the page-wide
     background video remains subtly visible behind. Tune the alpha
     (0.78) to taste — lower = more video bleed, higher = more solid. */
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: relative;
  z-index: 2;
}
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}
section h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  letter-spacing: -.015em;
  margin-bottom: 14px;
  font-weight: 800;
}
section p.lede {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.65;
  color: #bbb;
  margin-bottom: 36px;
}

/* ── Feature cards ───────────────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 22px 22px 24px;
}
.feature .ico {
  width: 36px; height: 36px;
  background: rgba(200,255,0,.08);
  border: 1px solid rgba(200,255,0,.25);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 16px;
  margin-bottom: 14px;
}
.feature h3 {
  font-size: 18px; font-weight: 700; margin-bottom: 6px;
  letter-spacing: -.005em;
}
.feature p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #aaa;
}

/* ── Video showcase ──────────────────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000 linear-gradient(135deg, #0e0e0e, #1a1a1a);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
}
.video-shell video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; background: #000;
}
.video-shell .placeholder {
  text-align: center; padding: 12px 18px;
  color: var(--muted);
}
.video-shell .placeholder .play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(200,255,0,.12);
  border: 1px solid rgba(200,255,0,.4);
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 22px;
}
.video-card .meta {
  padding: 14px 18px 16px;
}
.video-card h4 {
  font-size: 15px; font-weight: 700; margin-bottom: 4px;
}
.video-card p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #999; line-height: 1.5;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 36px 32px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  position: relative; z-index: 2;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ── Auth pages (login / signup) ─────────────────────────────────────────── */
.auth-wrap {
  max-width: 420px;
  margin: 80px auto;
  padding: 0 24px;
  position: relative; z-index: 1;
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 32px 28px;
}
.auth-card h1 {
  font-size: 26px; letter-spacing: -.01em;
  font-weight: 800; margin-bottom: 6px;
}
.auth-card p.sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--muted);
  margin-bottom: 24px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}
.field input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth-msg {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  min-height: 1em;
}
.auth-msg.error { color: var(--red); }
.auth-msg.success { color: var(--green); }
.auth-switch {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ── Forum ───────────────────────────────────────────────────────────────── */
.forum-wrap {
  padding: 56px 0 80px;
}
.forum-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.forum-toolbar h1 {
  font-size: 30px; letter-spacing: -.015em; font-weight: 800;
}
.forum-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
}
.thread-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.thread-row:hover { background: rgba(200,255,0,.02); }
.thread-row:last-child { border-bottom: none; }
.thread-title {
  font-size: 15px; font-weight: 700;
}
.thread-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
}
.thread-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent2);
  white-space: nowrap;
  align-self: center;
}

.compose-card,
.reply-card,
.thread-detail {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.compose-card textarea,
.reply-card textarea,
.field textarea {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 90px;
  outline: none;
}
.compose-card textarea:focus,
.reply-card textarea:focus,
.field textarea:focus { border-color: var(--accent); }
.thread-detail h2 {
  font-size: 24px; letter-spacing: -.01em; margin-bottom: 6px;
}
.thread-detail .meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--muted); margin-bottom: 14px;
}
.thread-detail .body {
  font-size: 15px; line-height: 1.65; color: #ddd;
  white-space: pre-wrap;
}
.post-row {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.post-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted);
  margin-bottom: 6px;
}
.post-body {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
  color: #ddd;
}

@media (max-width: 720px) {
  .site-header { padding: 14px 18px; }
  .container { padding: 0 18px; }
  .hero { padding: 56px 18px 40px; }
  section { padding: 48px 0; }
}