/* Styles for the new /courses/ feature only. Fully separate from
   custom.css's lesson/learn styling — new classes, own file, loaded
   only on course pages via <link> in the course layouts. */

/* Sign-in gate for course CONTENT pages (lessons/labs/quizzes/glossary/
   certificate) — never the /courses/ catalog itself, which is an open
   teaser. The page stays reachable and visible — nothing redirects away —
   but everything except the navbar, the lock button, and the chatbot
   (chat support should never be gated) is blurred and inert by default.
   Scoped via :has() so it only ever activates on pages
   where `.w-course-lock` is actually present (default.html only renders
   that div outside the catalog page). This is the default (no JS needed),
   so there's no flash of unlocked content before auth resolves;
   course-gate.js only ever adds `.w-course-unlocked` once Firebase
   confirms a signed-in user, which is what removes the blur. */
body:has(.w-course-lock):not(.w-course-unlocked) > *:not(.w-nav):not(.w-course-lock):not(.cbot-mascot):not(.cbot) {
  filter: blur(10px);
  pointer-events: none;
  user-select: none;
}
.w-course-lock {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.18);
}
body.w-course-unlocked .w-course-lock { display: none; }
.w-course-lock-btn {
  position: relative;
  display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--w-surface); border: 2px solid var(--w-ai-orange);
  color: var(--w-ai-orange);
  box-shadow: var(--w-shadow-lg);
  transition: transform .2s ease;
}
.w-course-lock-btn:hover, .w-course-lock-btn:focus-visible { transform: scale(1.07); }
.w-course-lock-icon { width: 30px; height: 30px; }
.w-course-lock-label {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; padding: 8px 16px; border-radius: 999px;
  background: var(--w-fg); color: var(--w-bg);
  font-family: var(--w-sans); font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.w-course-lock-btn:hover .w-course-lock-label,
.w-course-lock-btn:focus-visible .w-course-lock-label { opacity: 1; }

/* custom.css's reading-mode rules hide `.w-article-topbar` (the post layout's
   topbar class). Course pages use `.w-lesson-topbar` instead, so that one
   extra selector needs to be added here, scoped to this course-only file so
   it can never affect learn/'s `.w-lesson-topbar` (this file isn't loaded
   on learn/ pages at all). */
body.is-reading-mode .w-lesson-topbar { display: none; }

/* custom.css's `.w-lesson-topbar` uses `justify-content: space-between`
   with no `gap`, sized for the 2 buttons learn/ puts there. Course pages
   pack 4 in (back-link, font-size control, reading-mode toggle, outline
   trigger), which crowds and can overlap without room to breathe. Scoped
   here so learn/'s topbar (2 buttons, no crowding) is unaffected. */
.w-lesson-topbar {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 8px;
}
/* Group the 3 utility buttons (font size, reading mode, outline) together
   on the right, separate from the back-link on the left, rather than
   pushing just the last one away from the other two. */
.w-lesson-topbar .w-font-size-ctrl { margin-left: auto; }

.w-course-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 10px;
}
.w-course-crumb .sep { opacity: 0.5; }

.w-course-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.w-course-badge.is-lesson { background: rgba(99, 102, 241, 0.14); color: #6366f1; }
.w-course-badge.is-lab { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.w-course-badge.is-quiz { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }

.w-course-readtime {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 13px;
  opacity: 0.75;
}

.w-course-outline-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(127, 127, 127, 0.25);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

.w-course-outline-overlay,
.w-course-outline-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.w-course-outline-overlay {
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.w-course-outline-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.w-course-outline-drawer {
  right: 0;
  left: auto;
  width: min(360px, 90vw);
  background: var(--w-bg, #fff);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding: 24px 20px;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
}
.w-course-outline-drawer.is-open {
  transform: translateX(0);
}

.w-course-outline-phase { margin-bottom: 18px; }
.w-course-outline-phase h4 { font-size: 14px; margin-bottom: 8px; }
.w-course-outline-module { margin-bottom: 10px; }
.w-course-outline-module h5 { font-size: 12px; opacity: 0.7; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.w-course-outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
}
.w-course-outline-item:hover { background: rgba(127, 127, 127, 0.08); }
.w-course-outline-item.is-current { background: rgba(99, 102, 241, 0.12); font-weight: 600; }
.w-course-outline-item .check { width: 14px; height: 14px; flex: none; opacity: 0.3; }
.w-course-outline-item.is-done .check { opacity: 1; color: #10b981; }

/* Course catalog grid on courses/index.html. Each course gets its own
   grid cell (`.w-course-group`, holding the glossary link + the `.w-track`
   card itself). `align-items: start` keeps every card sized to its own
   content. (An earlier version stretched cards to match the tallest one
   via a flex-grow chain, but `<details>` isn't a flex container, so that
   chain broke the moment a card's curriculum was opened — the footer
   looked "stuck" with a stray gap instead of the card growing normally.
   `.w-coursecard-tagline`'s min-height below absorbs the difference in
   tagline length instead, so cards still look consistently sized while
   collapsed, without fighting the expand/collapse layout.) */
#w-courses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px;
  align-items: start;
}
#w-courses-list .w-track { margin-bottom: 0; }
/* Keep cards in a row top-aligned. The per-course glossary link that sits
   above each card wraps to two lines for long course names ("Machine Learning
   Fundamentals") but stays one line for short ones ("Deep Learning"), which
   would otherwise start the cards at different heights. Reserve a consistent
   two-line box (line-height 1.6 × 2 = 3.2em) so every card begins level. */
#w-courses-list .w-course-group > .w-lrn-sub { min-height: 3.2em; }
@media (max-width: 480px) {
  #w-courses-list { grid-template-columns: 1fr; }
}

/* Compact course card: a square bordered icon and a level-badge pill sit
   side by side at the top, then title/tagline, a divider, then a footer
   with meta, progress, and a CTA row (plain text + a separate circular
   arrow button). The whole thing lives inside a <details><summary>
   (`.w-course-curriculum`) so clicking anywhere on the card reveals the
   full curriculum below it; the card's own border turns orange while
   open. `.w-track` already gives the outer box (background/border/
   radius/shadow); `.w-coursecard` only resets the padding so this inner
   layout can fully control its own spacing. */
.w-coursecard {
  padding: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--w-accent) 25%, transparent), 0 0 22px 0 color-mix(in oklab, var(--w-accent) 30%, transparent);
}
.w-track.w-coursecard:has(.w-course-curriculum[open]) { border-color: var(--w-ai-orange); }
.w-coursecard > .w-course-complete-banner { margin: 22px 24px 0; }
.w-course-curriculum { border: none; }
.w-coursecard-summary {
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 24px 26px 22px;
}
.w-coursecard-summary::-webkit-details-marker { display: none; }

.w-coursecard-top { padding-bottom: 18px; }
.w-coursecard-topline {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.w-coursecard-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--w-border-strong);
  color: var(--w-ai-orange);
}
.w-coursecard-icon svg { width: 21px; height: 21px; }
.w-coursecard-level {
  display: inline-flex;
  font-family: var(--w-mono);
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.w-coursecard-level.w-difficulty-beginner {
  border: 1px solid #22c55e; color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.14), 0 4px 14px -4px rgba(34,197,94,0.45);
}
.w-coursecard-level.w-difficulty-intermediate {
  border: 1px solid var(--w-ai-orange); color: var(--w-ai-orange);
  box-shadow: 0 0 0 3px var(--w-ai-orange-soft), 0 4px 14px -4px color-mix(in oklab, var(--w-ai-orange) 55%, transparent);
}
.w-coursecard-level.w-difficulty-advanced {
  border: 1px solid #ef4444; color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.14), 0 4px 14px -4px rgba(239,68,68,0.45);
}
.w-coursecard-title {
  font-family: var(--w-serif); font-weight: 600; font-size: 21px;
  margin: 0 0 8px; color: var(--w-fg); letter-spacing: -0.005em;
}
.w-coursecard-tagline {
  font-family: var(--w-sans); font-size: 13.5px; color: var(--w-muted);
  margin: 0; line-height: 1.55; min-height: 7.75em;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-coursecard-foot { border-top: 1px solid var(--w-border); padding-top: 18px; }
.w-coursecard-meta {
  display: flex; gap: 8px;
  font-family: var(--w-mono); font-size: 13px; color: var(--w-muted);
  margin-bottom: 14px;
}
.w-coursecard-prog { margin-bottom: 18px; }
.w-coursecard-prog-bar {
  height: 5px; border-radius: 999px; background: var(--w-surface-2); overflow: hidden;
}
.w-coursecard-prog-bar i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: var(--w-ai-orange); transition: width .4s ease;
}
.w-track.done .w-coursecard-prog-bar i { background: #10b981; }
.w-coursecard-prog-label {
  font-family: var(--w-mono); font-size: 12.5px; color: var(--w-muted);
  margin-top: 8px;
}
.w-coursecard-prog-label b { color: var(--w-fg); font-weight: 700; }

/* CTA is two distinct pieces, not one merged pill: a plain text label on
   the left (no border/background of its own) and a separate circular
   arrow button on the right, which fills solid once the curriculum is
   open — matching the reference card's outline-by-default,
   filled-when-active treatment, rather than rotating like a chevron. */
.w-coursecard-cta {
  display: flex; align-items: center; justify-content: space-between;
}
.w-coursecard-cta-text {
  font-family: var(--w-sans); font-size: 13.5px; font-weight: 600;
  color: var(--w-ai-orange); text-decoration: none;
}
.w-coursecard-cta-text:hover { text-decoration: underline; }
.w-coursecard-cta-arr {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--w-ai-orange);
  color: var(--w-ai-orange);
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
/* Signed out: show a lock instead of the "go" arrow, with a tooltip on
   hover. Signed in: normal "go" arrow, no tooltip needed. */
.w-coursecard-cta-arr-lock { display: none; }
body.is-authed .w-coursecard-cta-arr-go { display: block; }
body:not(.is-authed) .w-coursecard-cta-arr-go { display: none; }
body:not(.is-authed) .w-coursecard-cta-arr-lock { display: block; }
.w-coursecard-cta-tooltip {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  white-space: nowrap; padding: 7px 12px; border-radius: 8px;
  background: var(--w-fg); color: var(--w-bg);
  font-family: var(--w-sans); font-size: 12px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
body.is-authed .w-coursecard-cta-tooltip { display: none; }
.w-coursecard-cta:hover .w-coursecard-cta-tooltip { opacity: 1; }
.w-track.w-coursecard:has(.w-course-curriculum[open]) .w-coursecard-cta-arr {
  background: var(--w-ai-orange); color: #fff;
}
.w-track.done .w-coursecard-cta-text,
.w-track.done .w-coursecard-cta-arr { color: #10b981; border-color: #10b981; }
.w-track.done.w-coursecard:has(.w-course-curriculum[open]) .w-coursecard-cta-arr {
  background: #10b981; color: #fff;
}

/* When a card is opened, JS moves `.w-course-curriculum-body` out of the
   card's own narrow grid column into one of these, inserted as a new
   grid item spanning every column — the curriculum becomes a full-width
   row under the clicked card's row, instead of staying squeezed into a
   single column. With JS disabled, the native <details> toggle still
   works and the body just expands inline within the card instead. */
.w-coursecard-panel-row {
  grid-column: 1 / -1;
  background: var(--w-surface);
  border: 1px solid var(--w-ai-orange);
  border-radius: 16px;
  box-shadow: var(--w-shadow-sm);
}
.w-course-curriculum-body {
  padding: 22px 26px 18px;
  border-top: 1px solid var(--w-border);
}
.w-coursecard-panel-row .w-course-curriculum-body { border-top: none; }
.w-course-curriculum-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.w-course-curriculum-title {
  font-family: var(--w-serif); font-weight: 600; font-size: 21px;
  margin: 0; color: var(--w-fg);
}
.w-course-curriculum-close {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--w-border-strong);
  background: none; color: var(--w-muted);
  cursor: pointer; transition: border-color .2s, color .2s;
}
.w-course-curriculum-close:hover { border-color: var(--w-fg); color: var(--w-fg); }
.w-course-curriculum-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--w-mono); font-size: 13px; color: var(--w-muted);
  margin-bottom: 16px;
}
.w-course-curriculum-pill {
  padding: 5px 12px; border: 1px solid var(--w-border-strong);
  border-radius: 999px; text-transform: lowercase;
}
.w-course-curriculum-dot { display: inline-flex; align-items: center; gap: 6px; }
.w-course-curriculum-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.w-course-curriculum-dot.w-difficulty-beginner     { color: #22c55e; }
.w-course-curriculum-dot.w-difficulty-intermediate { color: #f59e0b; }
.w-course-curriculum-dot.w-difficulty-advanced     { color: #ef4444; }

/* Collapsible phase blocks on courses/index.html. Native <details>/<summary>
   so expand/collapse works even with JS disabled (only phase 1 starts open
   server-side; JS later re-opens whichever phase the learner should
   continue from). Deliberately not reusing `.w-step` for the phase row,
   it's a 3-column grid built for checkbox+title+badge rows; a bare text div
   dropped into it collapses into just the first (28px) column and wraps
   one word per line, which is what broke it the first time around. */
.w-course-phase-block {
  margin-top: 18px;
  border-top: 1px solid var(--w-border);
}
.w-track .w-course-phase-block:first-of-type { margin-top: 0; }
.w-course-phase-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
}
.w-course-phase-summary::-webkit-details-marker { display: none; }
.w-course-phase-summary-name {
  font-family: var(--w-serif);
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  min-width: 0;
}
.w-course-phase-progress-bar {
  flex: none;
  width: 80px;
  height: 5px;
  border-radius: 999px;
  background: var(--w-surface-2);
  overflow: hidden;
}
.w-course-phase-progress-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--w-accent);
  transition: width 0.3s ease;
}
.w-course-phase-progress-text {
  flex: none;
  font-family: var(--w-mono);
  font-size: 13px;
  color: var(--w-muted);
  min-width: 32px;
  text-align: right;
}
.w-course-phase-chevron {
  flex: none;
  color: var(--w-muted);
  transition: transform 0.2s ease;
}
.w-course-phase-block[open] .w-course-phase-chevron { transform: rotate(180deg); }
.w-course-phase-block.is-phase-complete .w-course-phase-summary-name { color: var(--w-muted); }
.w-course-phase-block.is-phase-complete .w-course-phase-progress-bar i { background: #10b981; }
.w-course-phase-body { padding-bottom: 8px; }

.w-course-module-header {
  font-family: var(--w-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--w-muted);
  margin: 14px 0 2px;
}

/* Numbered lesson rows in the curriculum list: 01/02/03 index, then
   title + description stacked, then the type badge + read time, then the
   completion checkbox, matching the reference panel's row layout. Scoped
   to this page's `.w-step` instances since other pages don't use it. */
#w-courses-list .w-step {
  grid-template-columns: 30px 1fr auto 26px;
  align-items: start;
}
#w-courses-list .w-step-num {
  font-family: var(--w-mono); font-size: 13px; color: var(--w-dim);
  padding-top: 3px;
}
#w-courses-list .w-step-right {
  flex-direction: row; align-items: center; gap: 10px;
  padding-top: 3px;
}
#w-courses-list .w-step-check { margin-top: 3px; }
#w-courses-list .w-step-body {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0;
}
#w-courses-list .w-step-body .w-course-badge { flex: none; width: 70px; justify-content: center; }
#w-courses-list .w-step-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.w-course-lab-section { margin: 18px 0; }
.w-course-lab-section h2 { font-size: 19px; }

.w-course-quiz-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--w-surface-2);
  border-bottom: 1px solid var(--w-border);
}
.w-course-quiz-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--w-serif);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  background: linear-gradient(135deg, var(--w-accent), color-mix(in oklab, var(--w-accent) 70%, #4f1fb8));
  box-shadow: 0 4px 12px -2px color-mix(in oklab, var(--w-accent) 50%, transparent);
}
.w-course-quiz-head-t { flex: 1; min-width: 0; }
.w-course-quiz-head-t h2 {
  font-family: var(--w-serif);
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--w-fg);
  letter-spacing: -0.005em;
}
.w-course-quiz-head-t h2 em { font-style: normal; color: var(--w-muted); font-size: 13px; font-weight: 500; }
.w-course-quiz-head-sub { font-family: var(--w-sans); font-size: 12.5px; color: var(--w-muted); margin-top: 2px; }
.w-course-quiz-score {
  flex: none;
  font-family: var(--w-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--w-muted);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--w-surface-2);
}
.w-course-quiz-score b { color: var(--w-accent); }

.w-course-quiz-progress-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--w-border);
  overflow: hidden;
  margin: 16px 22px 0;
}
.w-course-quiz-progress-bar i {
  display: block;
  height: 100%;
  background: var(--w-accent);
  width: 0%;
  transition: width 0.3s ease;
}
/* `.w-quiz-q` is the first child of this wrapper, so custom.css's shared
   `.w-quiz-q:first-child` rule (no top divider) already applies correctly.
   Just supply the horizontal padding custom.css's `.w-quiz-body` normally
   provides, since this version skips the collapse-animation wrapper. */
.w-course-quiz-body { padding: 8px 22px 22px; }

/* Key-takeaway / important-notation callout cards */
.w-course-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 4px solid #6366f1;
  background: rgba(99, 102, 241, 0.08);
}
.w-course-note .w-course-note-ic {
  flex: none;
  font-size: 18px;
  line-height: 1.4;
}
.w-course-note .w-course-note-body p {
  margin: 0;
}
.w-course-note .w-course-note-body p + p {
  margin-top: 8px;
}
.w-course-note-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6366f1;
  margin-bottom: 4px;
}
.w-course-note.is-warning {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.w-course-note.is-warning .w-course-note-label { color: #b45309; }
.w-course-note.is-notation {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}
.w-course-note.is-notation .w-course-note-label { color: #047857; }

/* Runnable code blocks (Pyodide) */
.w-course-runner {
  margin: 20px 0;
  border-radius: 12px;
  border: 1px solid rgba(127, 127, 127, 0.22);
  overflow: hidden;
  background: #1e1e2e;
}
.w-course-runner-editor {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  resize: vertical;
  padding: 14px 16px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  background: #1e1e2e;
  color: #e2e2f0;
  tab-size: 4;
}
.w-course-runner-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #16161f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.w-course-runner-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.w-course-runner-run:disabled { opacity: 0.6; cursor: progress; }
.w-course-runner-status { font-size: 12.5px; color: #9ca0c0; }
.w-course-runner-output {
  padding: 12px 16px;
  background: #0f0f17;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.w-course-runner-text {
  margin: 0;
  color: #d4d4e8;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}
.w-course-runner-img {
  max-width: 100%;
  border-radius: 6px;
  margin: 6px 0;
  background: #fff;
}

/* Cited reference images inside lesson/lab body content */
.w-course-figure {
  margin: 22px 0;
  text-align: center;
}
.w-course-figure img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(127, 127, 127, 0.18);
}
.w-course-figure figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  opacity: 0.7;
}
.w-course-figure figcaption a { text-decoration: underline; }

/* Glossary page */
.w-course-glossary h2 {
  margin-top: 36px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}
.w-course-glossary-list {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: 10px 18px;
  margin: 16px 0;
}
.w-course-glossary-list dt {
  font-weight: 700;
  align-self: start;
}
.w-course-glossary-list dd {
  margin: 0;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .w-course-glossary-list {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .w-course-glossary-list dd {
    margin-bottom: 10px;
  }
}

.w-course-complete-banner {
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 14px;
  font-weight: 600;
}
.w-course-complete-banner a { text-decoration: underline; }

/* "Pick your starting point" phase picker on courses/index.html */
.w-course-starter {
  margin: 22px 0 36px;
  padding: 36px 40px;
  border: 1px solid var(--w-border);
  border-radius: 20px;
  background: var(--w-surface-2);
}
.w-course-starter-label {
  font-family: var(--w-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-ai-orange);
  margin-bottom: 8px;
}
.w-course-starter-h {
  font-family: var(--w-serif);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 28px;
  color: var(--w-fg);
}
.w-course-starter-h em { font-style: italic; color: var(--w-ai-orange); }
.w-course-starter-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.w-course-starter-opt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border: 1px solid var(--w-ai-orange);
  border-radius: 14px;
  background: var(--w-ai-orange-soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 0 3px var(--w-accent-soft), 0 10px 24px -12px color-mix(in oklab, var(--w-accent) 55%, transparent);
}
.w-course-starter-opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--w-accent-soft), 0 14px 30px -10px color-mix(in oklab, var(--w-accent) 65%, transparent);
}
.w-course-starter-opt-n {
  font-family: var(--w-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--w-ai-orange);
}
.w-course-starter-opt h4 {
  font-family: var(--w-serif);
  font-weight: 600;
  font-size: 20px;
  margin: 2px 0 0;
  color: var(--w-fg);
  line-height: 1.3;
}
.w-course-starter-opt p {
  font-family: var(--w-sans);
  font-size: 13.5px;
  color: var(--w-muted);
  margin: 0 0 6px;
  line-height: 1.5;
}
.w-course-starter-opt-go {
  font-family: var(--w-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--w-ai-orange);
  margin-top: auto;
}

/* ── Skill badge (shared: achievements list + per-course badge page) ──────── */
/* Ring color is keyed to course level so badges are comparable at a glance:
   Beginner = purple, Intermediate = steel/silver, Advanced = gold. */
.w-skillbadge {
  position: relative; width: 220px; height: 246px; flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(255,106,0,.22));
  --rc1: #6B3FA0; --rc2: #3B1E6E; --rc-glow: rgba(107,63,160,.45); --rc-tint: 59,30,110;
}
.w-skillbadge[data-level="Intermediate"] {
  --rc1: #CBD5E0; --rc2: #5B6770; --rc-glow: rgba(91,103,112,.45); --rc-tint: 71,85,94;
}
.w-skillbadge[data-level="Advanced"] {
  --rc1: #F5D061; --rc2: #9C6B0A; --rc-glow: rgba(156,107,10,.45); --rc-tint: 120,82,12;
}
.w-skillbadge-glow, .w-skillbadge-ring, .w-skillbadge-body, .w-skillbadge-keyline {
  position: absolute; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.w-skillbadge-glow {
  inset: -8px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,138,0,.75), var(--rc-glow) 65%, transparent 100%);
  filter: blur(10px);
  opacity: .6;
  animation: w-skillbadge-pulse 3.2s ease-in-out infinite;
}
.w-skillbadge-ring {
  inset: 0;
  background: radial-gradient(120% 120% at 50% 16%, var(--rc1), var(--rc2) 70%);
}
.w-skillbadge-body {
  inset: 9px;
  background: linear-gradient(155deg, #FFB35C 0%, #FF9A3D 35%, #FF6A00 75%, #EA5A00 100%);
}
.w-skillbadge-sheen {
  inset: 9px;
  background: radial-gradient(85% 55% at 50% 0%, rgba(255,255,255,.55), transparent 60%);
  mix-blend-mode: soft-light;
}
.w-skillbadge-keyline { inset: 20px; border: 1.5px solid rgba(var(--rc-tint), .28); background: none; }
@keyframes w-skillbadge-pulse {
  0%, 100% { opacity: .65; transform: scale(.97); }
  50%      { opacity: .95; transform: scale(1.04); }
}
.w-skillbadge-content {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0 28px; text-align: center;
}
.w-skillbadge-symbol {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(var(--rc-tint), .18);
  border: 1px solid rgba(var(--rc-tint), .45);
  display: grid; place-items: center; margin-bottom: 14px;
  font-family: "Space Mono", monospace; font-size: 20px; font-weight: 700; color: #fff;
}
.w-skillbadge-name {
  font-family: "Space Grotesk", var(--w-sans); font-weight: 700; font-size: 18px;
  line-height: 1.15; color: #2C1556; letter-spacing: -.01em; text-wrap: balance;
}
.w-skillbadge-rule { width: 32px; height: 2px; background: var(--rc2); border-radius: 2px; margin: 12px 0 9px; }
.w-skillbadge-level {
  font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: rgba(44,21,86,.9); text-shadow: 0 1px 2px rgba(255,255,255,.45);
  text-transform: uppercase;
}
.w-skillbadge-locked { filter: grayscale(.9) opacity(.55); }
.w-skillbadge-locked .w-skillbadge-glow { display: none; }