/* ==========================================================================
   Lesson Reviewer · v2 design tokens + base
   --------------------------------------------------------------------------
   - Single source of truth for color, type, radii, motion. All v2 components
     consume these CSS variables; nothing in this file knows about a specific
     page. Per-page styles live below the "PAGE: auth" banner.
   - Dark theme is the default for the v2 surface; a future light theme can
     ship by re-declaring the same variables under [data-theme="light"].
   - We deliberately avoid `box-shadow: 0 0 0 1px rgba(...)` for borders —
     real 1px borders behave better at zoom, on hi-DPI and in screenshots.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Theme tokens
   ---------------------------------------------------------------------------
   We declare LIGHT as the default (under :root) and DARK as an override under
   [data-theme="dark"]. The product is targeted at SMEs who spend hours reading
   article copy; warm white surfaces with high-contrast ink reduce eye strain
   more than dark mode for that use case. Dark mode is a single-attribute
   opt-in (data-theme="dark" on <html>) so a future preference toggle is a
   one-line operation.
   --------------------------------------------------------------------------- */

:root {
  /* ---- Color: surfaces (light) ---------------------------------------- */
  --c-bg:           #f6f8fb;          /* page background */
  --c-bg-1:         #ffffff;          /* brightest surface (inputs, focus fill) */
  --c-bg-2:         #ffffff;          /* card background */
  --c-bg-3:         #f1f5f9;          /* elevated card */
  --c-bg-4:         #e2e8f0;          /* hover / sunk */
  --c-line:         rgba(15,23,42,0.08);
  --c-line-strong:  rgba(15,23,42,0.16);

  /* ---- Color: ink (light) -------------------------------------------- */
  --c-ink:          #0f172a;
  --c-ink-1:        #0f172a;          /* primary ink (alias of --c-ink) */
  --c-ink-2:        #334155;
  --c-ink-3:        #64748b;
  --c-ink-4:        #94a3b8;

  /* ---- Color: accent / state (shared) -------------------------------- */
  --c-brand:        #6366f1;          /* indigo-500 */
  --c-brand-2:      #4f46e5;
  --c-brand-soft:   rgba(99,102,241,0.10);
  --c-ok:           #16a34a;
  --c-warn:         #d97706;
  --c-fail:         #dc2626;
  --c-live:         #0d9488;

  /* ---- Radius / motion / type ---------------------------------------- */
  --r-xs: 6px;  --r-s: 10px;  --r-m: 14px;  --r-l: 20px;  --r-xl: 28px;
  --space-unit: 4px;

  --t-fast: 120ms cubic-bezier(0.22,1,0.36,1);
  --t-med:  220ms cubic-bezier(0.22,1,0.36,1);
  --t-slow: 360ms cubic-bezier(0.22,1,0.36,1);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 0 rgba(255,255,255,1) inset,
              0 1px 2px rgba(15,23,42,0.06),
              0 8px 24px rgba(15,23,42,0.06);
  --shadow-2: 0 1px 0 rgba(255,255,255,1) inset,
              0 12px 40px rgba(15,23,42,0.10),
              0 4px 12px rgba(15,23,42,0.06);

  color-scheme: light;
}

/* ---- Dark theme override ------------------------------------------------- */

[data-theme="dark"] {
  --c-bg:           #0a0d14;
  --c-bg-1:         #1a2030;          /* brightest surface (inputs, focus fill) */
  --c-bg-2:         #0e131c;
  --c-bg-3:         #131927;
  --c-bg-4:         #1a2030;
  --c-line:         rgba(255,255,255,0.07);
  --c-line-strong:  rgba(255,255,255,0.14);

  --c-ink:          #e6eaf3;
  --c-ink-1:        #e6eaf3;          /* primary ink (alias of --c-ink) */
  --c-ink-2:        #b6bfd1;
  --c-ink-3:        #8390a8;
  --c-ink-4:        #5a657c;

  --c-brand-soft:   rgba(99,102,241,0.16);
  --c-brand-2:      #7c7af2;
  --c-ok:           #22c55e;
  --c-warn:         #f59e0b;
  --c-fail:         #ef4444;
  --c-live:         #14b8a6;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 1px 2px rgba(0,0,0,0.4),
              0 8px 24px rgba(0,0,0,0.3);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset,
              0 12px 40px rgba(0,0,0,0.5),
              0 4px 12px rgba(0,0,0,0.4);

  color-scheme: dark;
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11","ss01","ss02";
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }


/* ==========================================================================
   PAGE: auth (sign-in / landing)
   --------------------------------------------------------------------------
   Two-column layout. Left = panel with the sign-in CTA. Right = the
   "hero" — a decorative preview of three product surfaces (queue, chat,
   analysis toast) on a glowing gradient mesh. The hero is decorative; we
   mark it aria-hidden so screen readers skip the noise.
   ========================================================================== */

.page--auth {
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(99,102,241,0.10) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(20,184,166,0.08) 0%, transparent 60%),
    var(--c-bg);
}
[data-theme="dark"] .page--auth {
  background:
    radial-gradient(1200px 600px at 30% -10%, #1a2240 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #1a2a2f 0%, transparent 60%),
    var(--c-bg);
}
[data-theme="dark"] .auth__cta { background: #ffffff; color: #1f2024; }
[data-theme="dark"] .hero__grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 520px) 1fr;
  gap: 0;
}

@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth__hero { display: none; }
}

/* Left: sign-in panel ------------------------------------------------------ */
.auth__panel {
  position: relative;
  padding: clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
              var(--c-bg-2);
  border-right: 1px solid var(--c-line);
}

.auth__brand { display: flex; gap: 16px; align-items: center; }
.auth__logo { width: 48px; height: 48px; border-radius: 12px; }
.auth__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.auth__sub {
  margin: 4px 0 0;
  color: var(--c-ink-3);
  font-size: 14px;
}

.auth__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  color: var(--c-ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}
.auth__features li { display: flex; gap: 12px; align-items: flex-start; }
.auth__feat-icon {
  flex: 0 0 32px; height: 32px;
  border-radius: 10px;
  background: var(--c-brand-soft);
  color: var(--c-brand-2);
  display: grid; place-items: center;
}

.auth__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: #ffffff;
  color: #1f2024;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 24px rgba(99,102,241,0.18);
}
.auth__cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 28px rgba(99,102,241,0.28); }
.auth__cta:active { transform: translateY(0); }
.auth__cta-g {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 6px;
}

.auth__legal {
  margin: 0;
  color: var(--c-ink-4);
  font-size: 12.5px;
  line-height: 1.5;
}
.auth__legal strong { color: var(--c-ink-2); font-weight: 600; }

/* Right: hero --------------------------------------------------------------
   We layer three "card preview" tiles over a faint dot-grid and two big
   glow blobs. Everything here is decorative — these are NOT live components.
   The point is to communicate the product shape (queue + chat + analysis)
   without a screenshot.                                                     */

.auth__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 48px;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
  z-index: -1;
}
.hero__glow {
  position: absolute;
  filter: blur(80px);
  opacity: 0.6;
  z-index: -1;
  border-radius: 50%;
}
.hero__glow--a { width: 480px; height: 480px; left: -120px; top: -120px; background: #4f46e5; }
.hero__glow--b { width: 520px; height: 520px; right: -140px; bottom: -160px; background: #0d9488; }

/* Hero cards — glass-card look in both themes. Light uses a slightly
   tinted white over the page glow; dark uses a low-alpha white over the
   navy. The single border-color token + backdrop-filter handles both. */
.hero__card {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
[data-theme="dark"] .hero__card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}
.hero__card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  font-size: 13.5px;
  color: var(--c-ink-2);
}
.hero__card-head strong { color: var(--c-ink); font-weight: 600; }
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-ink-4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}
.hero__dot--ok   { background: var(--c-ok); }
.hero__dot--live { background: var(--c-live); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,184,166,0.5); }
  100% { box-shadow: 0 0 0 12px rgba(20,184,166,0); }
}
.hero__pill {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-ink-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Queue card */
.hero__card--queue {
  width: 340px; left: 6%;  top: 12%;
}
.hero__card--queue ul { list-style: none; margin: 0; padding: 8px; }
.hero__card--queue li {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-s);
  font-size: 13.5px;
}
.hero__card--queue li:hover { background: rgba(255,255,255,0.03); }
.hero__lesson { flex: 1; color: var(--c-ink-2); }
.hero__badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
}
.hero__badge--ok   { color: #6ee7b7; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); }
.hero__badge--warn { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); }
.hero__badge--fail { color: #fda4af; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }

/* Chat card */
.hero__card--chat {
  width: 380px; right: 4%; top: 28%;
}
.hero__msg {
  margin: 12px 16px;
  padding: 10px 14px;
  border-radius: var(--r-m);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 86%;
}
.hero__msg--user { background: var(--c-brand-soft); color: var(--c-ink); margin-left: auto; border: 1px solid rgba(99,102,241,0.3); }
.hero__msg--bot  { background: rgba(255,255,255,0.04); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.hero__caret {
  display: inline-block;
  width: 8px; height: 16px;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--c-brand-2);
  animation: caret 1.0s steps(2, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Toast card */
.hero__card--toast {
  width: 320px; left: 18%; bottom: 12%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.hero__card--toast strong { display: block; font-size: 14px; color: var(--c-ink); }
.hero__card--toast small { color: var(--c-ink-3); font-size: 12.5px; }