/* =====================================================================
   Redesign layer — a research-grounded "best design" pass, loaded last.
   Distils patterns from top learning platforms and modern SaaS design:
     • calm neutrals + strategic colour, generous whitespace, low cognitive
       load  (SaaS dashboard best-practice, 2025–26)
     • readable typography: ~16px+ body, generous line-height, a comfortable
       reading measure for lessons  (e-learning readability research)
     • motivating, low-friction progress and tactile interactions  (Duolingo/
       LinkedIn engagement patterns)
     • one consistent design system across product, forms and content
   Token-driven + theme-aware + reduced-motion safe, so every template and
   page inherits it without touching PHP/markup.
   ===================================================================== */

/* ---- Foundation: crisper text rendering + softer, layered depth ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root {
  /* refined, softer shadow scale — premium depth without heaviness */
  --shadow:    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
               0 6px 20px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-lg: 0 12px 44px color-mix(in srgb, var(--ink) 13%, transparent);
}
:root[data-theme="dark"] {
  --shadow:    0 1px 2px rgba(0,0,0,.36), 0 8px 26px rgba(0,0,0,.36);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
}

/* ---- A single, elegant focus ring everywhere (accessible + premium) ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 38%, transparent);
  border-radius: 10px;
}

/* ---- Typography & hierarchy ---- */
.page-title { letter-spacing: -.022em; line-height: 1.12; }
.h2, h2.h2 { letter-spacing: -.015em; }
.page-kicker { font-weight: 800; }

/* =====================================================================
   Focused reading — a calm, centred lesson column with a comfortable
   measure and rhythm. The biggest readability win for long sessions.
   ===================================================================== */
.session-body { max-width: 74ch; }
.session-body p.para { font-size: 1.06rem; line-height: 1.78; margin: 1rem 0; color: var(--ink); }
.session-body p.para.muted { color: var(--ink-soft); }
.session-body .bullets, .session-body .numbered { line-height: 1.72; }
.session-body .bullets li, .session-body .numbered li { margin: .5rem 0; }
.session-body .h2 { margin-top: 2.6rem; }
/* the reader's top progress line picks up the brand gradient */
.read-progress { background: var(--grad-brand); box-shadow: 0 0 10px var(--glow-brand); }
/* elegant sticky outline */
.toc { border-radius: 16px; box-shadow: var(--shadow); }
.toc-list a { transition: background-color .14s ease, color .14s ease; }

/* =====================================================================
   Forms — modern, tactile inputs with a soft brand focus ring. Applies
   to login, profile and every admin form at once.
   ===================================================================== */
.field label { font-size: .82rem; letter-spacing: .1px; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--line) 92%, transparent);
  padding: 12px 14px; font-size: 1rem; background: var(--bg-elev); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea { font-family: inherit; font-size: 1rem; line-height: 1.6; min-height: 130px; }
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }

/* =====================================================================
   Quiz — tactile answer cards and clearer result states. The core
   learning interaction, made satisfying and unmistakable.
   ===================================================================== */
.q-block { border-radius: 18px; box-shadow: var(--shadow); }
.q-num { color: var(--brand-ink); }
.q-text { font-size: 1.12rem; line-height: 1.4; letter-spacing: -.01em; }
.q-options { gap: 11px; }
.q-option {
  border-radius: 14px; padding: 14px 16px; background: var(--bg-elev); font-size: 1rem;
  border: 1.5px solid color-mix(in srgb, var(--line) 92%, transparent);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.q-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--bg-elev));
  transform: translateY(-1px);
}
.q-option .q-key { width: 28px; height: 28px; border-radius: 9px; font-weight: 700;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-soft); }
.q-option.selected {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, var(--bg-elev));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.q-option.selected .q-key { background: var(--grad-brand); color: #fff; }
.q-option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg-elev)); }
.q-option.wrong   { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev)); }
.q-explain { border-radius: 12px; background: color-mix(in srgb, var(--brand) 5%, var(--bg-soft)); font-size: .95rem; line-height: 1.6; }
.quiz-timer { border-radius: 999px; box-shadow: var(--shadow); }

/* the pass/fail result: a circular badge instead of a bare number */
.quiz-result { border-radius: 18px; box-shadow: var(--shadow); }
.quiz-result .score-ring {
  display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  font-size: 1.9rem; line-height: 1;
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-elev));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ok) 45%, transparent);
}
.quiz-result.fail .score-ring {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-elev));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--danger) 45%, transparent);
}

/* =====================================================================
   Buttons — a touch more presence and a satisfying press.
   ===================================================================== */
.btn { border-radius: 12px; }
.btn-primary { background: var(--grad-brand); border: 0; }

/* =====================================================================
   Reduced motion — keep it all static for those who ask.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .q-option:hover:not(:disabled) { transform: none; }
}