/* ============================================================================
   Learn engine — unified programming-course player.
   Uses the site design tokens (design_system.css): --bg-*, --text-*, --space-*,
   --radius-*, --text-*. Theme-aware (works in light + dark). --learn-accent is
   set per-course inline so every course shares ONE layout, just a different hue.
   ============================================================================ */

.learn-shell,
.learn-overview,
.learn-index { color: var(--text-primary); }

/* ---- Contrast-safe accent derivations -----------------------------------
   --learn-accent stays the raw per-course brand hue and is used ONLY for
   decorative fills, borders and progress bars (contrast there is with the
   element itself, not small text). Small text and white-on-accent buttons
   read the derived tokens below, which are tuned so EVERY course hue clears
   WCAG AA in both themes:
     --learn-ink : accent used as TEXT — darkened on light, lightened on dark.
     --learn-cta : accent used as a solid button background under #fff text —
                   darkened enough that white clears AA on the lightest hue
                   (ML green / JS amber), theme-independent (the bg is the
                   accent, not the page). Verified via the browser contrast
                   audit across all six accents. */
.learn-shell,
.learn-overview,
.learn-index,
.learn-card {
  --learn-ink: color-mix(in srgb, var(--learn-accent), #000 42%);
  --learn-cta: color-mix(in srgb, var(--learn-accent), #000 32%);
}
:root[data-theme="dark"] .learn-shell,
:root[data-theme="dark"] .learn-overview,
:root[data-theme="dark"] .learn-index,
:root[data-theme="dark"] .learn-card,
body.dark-theme .learn-shell,
body.dark-theme .learn-overview,
body.dark-theme .learn-index,
body.dark-theme .learn-card {
  --learn-ink: color-mix(in srgb, var(--learn-accent), #fff 42%);
}

/* ---- Buttons (shared) ---------------------------------------------------- */
.learn-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--bg-tertiary);
  background: var(--bg-secondary); color: var(--text-primary);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all .15s ease; line-height: 1.2;
}
.learn-btn:hover { background: var(--bg-hover); }
.learn-btn--primary { background: var(--learn-cta); border-color: var(--learn-cta); color: #fff; }
.learn-btn--primary:hover { filter: brightness(1.08); }
.learn-btn--run { background: color-mix(in srgb, var(--learn-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--learn-accent) 40%, transparent); color: var(--learn-ink); }
.learn-btn--run:hover { background: color-mix(in srgb, var(--learn-accent) 26%, transparent); }
.learn-btn--ghost { background: transparent; }

/* ---- Chips / badges ------------------------------------------------------ */
.learn-chip { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--learn-accent) 14%, transparent);
  color: var(--learn-ink); font-size: var(--text-xs); font-weight: 600; }
.learn-chip--muted { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ============================================================================
   LESSON PLAYER  (learn-shell = rail + main). Hide global chrome for focus.
   ============================================================================ */
.learn-shell + * , body:has(.learn-shell) .side-nav { }
body:has(.learn-shell) .side-nav,
body:has(.learn-shell) .sidebar-reopen-btn { display: none !important; }
body:has(.learn-shell) .main-content { margin-left: 0 !important; padding: 0 !important; max-width: 100% !important; }

.learn-shell {
  display: grid; grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 70px); align-items: start;
}

/* Lesson rail */
.learn-rail {
  position: sticky; top: 70px; align-self: start;
  height: calc(100vh - 70px); overflow-y: auto;
  background: var(--bg-secondary); border-right: 1px solid var(--bg-tertiary);
  padding: var(--space-5) var(--space-4);
}
.learn-rail__back { display: inline-block; margin-bottom: var(--space-4);
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.learn-rail__back:hover { color: var(--learn-ink); }
.learn-rail__progress { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.learn-rail__bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--bg-tertiary); overflow: hidden; }
.learn-rail__bar span { display: block; height: 100%; width: 0; background: var(--learn-accent); transition: width .3s ease; }
.learn-rail__count { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.learn-rail__phase { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; }
.learn-rail__lesson { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); }
.learn-rail__lesson:hover { background: var(--bg-hover); color: var(--text-primary); }
.learn-rail__lesson.is-active { background: color-mix(in srgb, var(--learn-accent) 16%, transparent); color: var(--learn-ink); font-weight: 600; }
.learn-rail__check { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--bg-active); flex-shrink: 0; }
.learn-rail__lesson.is-complete .learn-rail__check { background: var(--learn-accent); border-color: var(--learn-accent); }
.learn-rail__lesson.is-complete .learn-rail__check::after { content: "✓"; color: #fff; font-size: 10px; display: grid; place-items: center; height: 100%; }

/* Lesson main column */
.learn-main { max-width: 820px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); width: 100%; }
.learn-lesson-head__meta { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.learn-lesson-title { font-size: var(--text-4xl); font-weight: 700; margin: 0 0 var(--space-4); }
.learn-objectives { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary);
  border-left: 3px solid var(--learn-accent); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); }
.learn-objectives__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.learn-objectives ul { margin: 0; padding-left: var(--space-5); color: var(--text-secondary); }
.learn-objectives li { margin: var(--space-1) 0; }

/* ---- Prose --------------------------------------------------------------- */
.learn-prose { font-size: var(--text-lg); line-height: 1.7; color: var(--text-secondary); }
.learn-prose > *:first-child { margin-top: 0; }
.learn-prose h2 { font-size: var(--text-2xl); color: var(--text-primary); margin: var(--space-8) 0 var(--space-3); }
.learn-prose h3 { font-size: var(--text-xl); color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); }
.learn-prose p { margin: var(--space-3) 0; }
.learn-prose a { color: var(--learn-ink); }
.learn-prose code { background: var(--bg-tertiary); padding: 2px 6px; border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; color: var(--text-primary); }
.learn-prose pre code { background: none; padding: 0; }
.learn-prose table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-base); }
.learn-prose th, .learn-prose td { border: 1px solid var(--bg-tertiary); padding: var(--space-2) var(--space-3); text-align: left; }
.learn-body > * { margin-bottom: var(--space-5); }

/* ---- Callout ------------------------------------------------------------- */
.learn-callout { border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--bg-tertiary);
  background: var(--bg-secondary); border-left: 3px solid var(--learn-accent); }
.learn-callout--warn { border-left-color: #f59e0b; }
.learn-callout--tip { border-left-color: #10b981; }
.learn-callout__title { font-weight: 700; margin-bottom: var(--space-1); color: var(--text-primary); }

/* ---- Figures (mermaid / svg / image) ------------------------------------ */
.learn-figure { margin: var(--space-6) 0; text-align: center; }
.learn-figure .mermaid, .learn-figure__svg { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-lg); padding: var(--space-5); overflow-x: auto; }
.learn-figure img { max-width: 100%; border-radius: var(--radius-lg); }
.learn-figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* ---- Code blocks (runnable) --------------------------------------------- */
.learn-code, .learn-exercise { margin: var(--space-6) 0; border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-secondary); }
.learn-code__caption, .learn-exercise__head { padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--bg-tertiary); font-size: var(--text-sm); }
.learn-code__editor, .learn-exercise__editor, .learn-exercise__solution {
  margin: 0; padding: var(--space-4); background: var(--bg-primary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-sm);
  line-height: 1.6; color: var(--text-primary); white-space: pre; overflow-x: auto; outline: none; tab-size: 4; }
.learn-code__editor[contenteditable="true"], .learn-exercise__editor { border-left: 3px solid var(--learn-accent); }
.learn-code__bar, .learn-exercise__bar { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.learn-code__output, .learn-exercise__output {
  margin: 0; padding: var(--space-4); border-top: 1px solid var(--bg-tertiary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-sm);
  white-space: pre-wrap; word-break: break-word; background: var(--bg-primary); color: var(--text-secondary); }
.learn-code__output.is-error, .learn-exercise__output.is-error { color: #ef4444; }
.learn-code.is-loading .learn-btn--run { opacity: .6; pointer-events: none; }

/* ---- SQL result grid ----------------------------------------------------- */
.learn-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.learn-table th, .learn-table td { border: 1px solid var(--bg-tertiary);
  padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; }
.learn-table th { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 700; }
.learn-table td { color: var(--text-secondary); }
.learn-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-tertiary) 40%, transparent); }

/* ---- Exercises ----------------------------------------------------------- */
.learn-exercise__badge { display: inline-block; margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--learn-ink); }
.learn-exercise__hints { padding: var(--space-2) var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
/* predict-the-output: read-only code + the learner's typed prediction */
.learn-exercise__code { margin: 0; padding: var(--space-4); background: var(--bg-primary);
  border-left: 3px solid var(--learn-accent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-sm);
  line-height: 1.6; color: var(--text-primary); white-space: pre; overflow-x: auto; }
.learn-exercise__label { display: block; padding: var(--space-4) var(--space-4) 0; }
.learn-exercise__label > span { display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-secondary); margin-bottom: var(--space-2); }
.learn-exercise__prediction { width: 100%; padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--bg-tertiary); background: var(--bg-primary); color: var(--text-primary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--text-sm);
  line-height: 1.6; resize: vertical; }
.learn-exercise__prediction:focus { outline: none; border-color: var(--learn-accent); }
.learn-exercise__result { padding: var(--space-3) var(--space-4); font-weight: 600; font-size: var(--text-sm); }
.learn-exercise__result.is-pass { color: #10b981; background: color-mix(in srgb, #10b981 12%, transparent); }
.learn-exercise__result.is-fail { color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }

/* ---- Choices (mcq / quiz) ------------------------------------------------ */
.learn-choices { list-style: none; margin: var(--space-3) 0 0; padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-2); }
.learn-choice { width: 100%; text-align: left; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--bg-tertiary); border-radius: var(--radius-md); background: var(--bg-primary);
  color: var(--text-primary); font-size: var(--text-base); cursor: pointer; transition: all .12s ease; }
.learn-choice:hover { border-color: var(--learn-accent); }
.learn-choice.is-correct { border-color: #10b981; background: color-mix(in srgb, #10b981 14%, transparent); }
.learn-choice.is-wrong { border-color: #ef4444; background: color-mix(in srgb, #ef4444 14%, transparent); }

/* ---- Quiz / resources / nav --------------------------------------------- */
.learn-quiz { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--bg-tertiary); }
.learn-quiz__title, .learn-resources__title { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.learn-quiz__item { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.learn-quiz__prompt { font-size: var(--text-base); color: var(--text-primary); }
.learn-quiz__explain, .learn-exercise__explain { margin: var(--space-2) var(--space-4) 0; padding: var(--space-3);
  background: var(--bg-tertiary); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); }
.learn-resources { margin-top: var(--space-8); }
.learn-resources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.learn-resources li { display: flex; align-items: center; gap: var(--space-2); }
.learn-resources a { color: var(--learn-ink); text-decoration: none; }
.learn-resources a:hover { text-decoration: underline; }
.learn-cred { font-size: var(--text-xs); padding: 1px 8px; border-radius: var(--radius-full);
  background: var(--bg-tertiary); color: var(--text-muted); text-transform: capitalize; }
/* Credibility badges on --bg-tertiary. Darkened for light, lightened for dark,
   so each clears WCAG AA (the raw brand-bright hues did not). */
.learn-cred--official { color: #047857; }
.learn-cred--university { color: #4338ca; }
.learn-cred--company { color: #b45309; }
.learn-cred--reference { color: #475569; }
:root[data-theme="dark"] .learn-cred--official,
body.dark-theme .learn-cred--official { color: #34d399; }
:root[data-theme="dark"] .learn-cred--university,
body.dark-theme .learn-cred--university { color: #a5b4fc; }
:root[data-theme="dark"] .learn-cred--company,
body.dark-theme .learn-cred--company { color: #fbbf24; }
:root[data-theme="dark"] .learn-cred--reference,
body.dark-theme .learn-cred--reference { color: #94a3b8; }
.learn-lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--bg-tertiary); }

/* ============================================================================
   COURSE OVERVIEW + INDEX
   ============================================================================ */
.learn-overview, .learn-index { max-width: 960px; margin: 0 auto; padding: var(--space-10) var(--space-6) var(--space-16); }
.learn-hero { text-align: center; margin-bottom: var(--space-10); }
.learn-hero__icon { font-size: 3.5rem; }
.learn-hero__title { font-size: var(--text-5xl); font-weight: 800; margin: var(--space-2) 0; }
.learn-hero__tagline { font-size: var(--text-xl); color: var(--text-secondary); }
.learn-hero__stats { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap;
  margin: var(--space-4) 0; color: var(--text-muted); font-size: var(--text-sm); }
.learn-hero__cta { margin: var(--space-4) 0; font-size: var(--text-lg); padding: var(--space-3) var(--space-8); }
.learn-hero__summary { max-width: 640px; margin: var(--space-4) auto 0; color: var(--text-secondary); line-height: 1.7; }
.learn-phase { margin-bottom: var(--space-8); }
.learn-phase__title { font-size: var(--text-2xl); }
.learn-phase__summary { color: var(--text-secondary); margin-top: var(--space-1); }
.learn-phase__lessons { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); counter-reset: lesson; }
.learn-phase__lesson { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--bg-tertiary); border-radius: var(--radius-lg);
  background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; transition: all .12s ease; }
.learn-phase__lesson:hover { border-color: var(--learn-accent); transform: translateX(2px); }
.learn-phase__check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg-active); flex-shrink: 0; }
.learn-phase__lesson.is-complete .learn-phase__check { background: var(--learn-accent); border-color: var(--learn-accent); }
.learn-phase__lesson-title { flex: 1; }
.learn-phase__mins { color: var(--text-muted); font-size: var(--text-sm); }

.learn-index__head { text-align: center; margin-bottom: var(--space-8); }
.learn-index__head h1 { font-size: var(--text-4xl); }
.learn-index__head p { color: var(--text-secondary); font-size: var(--text-lg); }
.learn-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.learn-card { display: block; padding: var(--space-5); border: 1px solid var(--bg-tertiary); border-top: 3px solid var(--learn-accent);
  border-radius: var(--radius-xl); background: var(--bg-secondary); text-decoration: none; color: var(--text-primary); transition: all .15s ease; }
.learn-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.learn-card__icon { font-size: 2.25rem; }
.learn-card__title { font-size: var(--text-xl); margin: var(--space-2) 0; }
.learn-card__tagline { color: var(--text-secondary); font-size: var(--text-sm); }
.learn-card__meta { display: flex; gap: var(--space-3); margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .learn-shell { grid-template-columns: 1fr; }
  .learn-rail { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--bg-tertiary); }
  .learn-main { padding: var(--space-6) var(--space-4) var(--space-12); }
  .learn-lesson-title { font-size: var(--text-3xl); }
  .learn-hero__title { font-size: var(--text-4xl); }
}