/* 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=DM+Mono:wght@400;500&family=Syne:wght@400;700;800&display=swap');

: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;
}
.site-header .logo-mark {
  width: 32px; height: 32px;
  background: var(--accent);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 16px; color: #000; font-weight: 700;
}
/* Color only the WORDMARK spans lime, NOT the .logo-mark square. The
   previous selector was `.logo span` which matched .logo-mark too —
   higher CSS specificity than the .logo-mark color:#000 rule above —
   so the "S" inside the lime square was being painted lime (invisible).
   `:not(.logo-mark)` excludes the mark, keeping its black "S" visible. */
.site-header .logo span:not(.logo-mark) { color: var(--accent); }
.site-header .nav {
  display: flex; align-items: center; gap: 22px;
  /* Syne for nav consistency 2026-04-26 */
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.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;
  /* Switched from DM Mono → Syne 2026-04-26 for consistency with hero
     headline + lede. Letter-spacing widened slightly to compensate for
     Syne being a proportional font (looks tighter than monospace at the
     same tracking). */
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  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 {
  /* Switched from DM Mono → Syne 2026-04-26 for font consistency. */
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .18em;
  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: 'DM 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 {
  /* Switched DM Mono → Syne for visual consistency with feature h3 + hero
     lede 2026-04-26. Bumped size 12 → 14 because Syne's x-height feels
     tighter than DM Mono at the same size. */
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  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: 'DM 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: 'DM Mono', monospace;
  font-size: 11px; color: #999; line-height: 1.5;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 36px 32px;
  border-top: 1px solid var(--border);
  /* Syne for footer consistency 2026-04-26 */
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  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: 'DM 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: 'DM 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: 'DM 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: 'DM 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: 'DM 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: 'DM Mono', monospace;
  font-size: 11px; color: var(--muted);
  margin-top: 4px;
}
.thread-count {
  font-family: 'DM 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: 'DM 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: 'DM 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: 'DM 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; }
}