/* ============================================================================
   lesson.css — Benali AI Learning Library
   Lesson-experience layer built ON TOP of atlas.css. Uses Atlas tokens only;
   invents no colors, no second font. Honors the Atlas rules:
     - majorelle is ink not paint (dots/ticks/kickers only, never fills/borders)
     - no accent word in headers (accent lives in the kicker)
     - filled pill = interactive control only; status = dot + caps
     - one font (Hanken), figures hairline 300
   ========================================================================== */

/* ---- Lesson canvas -------------------------------------------------------- */
.lesson-main { padding-bottom: var(--space-9); }
.lesson-wrap { max-width: var(--measure-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* Lesson head: kicker (accent lives here) -> title (all slate) -> lede */
.lesson-head { padding: var(--space-8) 0 var(--space-6); }
.lesson-head .kicker { display: block; margin-bottom: var(--space-3); }
.lesson-head h1 { margin: 0; }
.lesson-head .lede { margin-top: var(--space-4); max-width: 46ch; }

/* ---- Progress rail (dots, never a filled bar) ---------------------------- */
.progress-rail {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) 0; flex-wrap: wrap;
}
.progress-rail .step-dot {
  width: 9px; height: 9px; border-radius: 100px;
  border: 1.5px solid var(--taupe); background: transparent;
  transition: background .4s var(--ease-breath), border-color .4s var(--ease-breath);
}
.progress-rail .step-dot.done { background: var(--majorelle); border-color: var(--majorelle); }
.progress-rail .step-dot.current { border-color: var(--majorelle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--majorelle) 14%, transparent); }
.progress-rail .progress-label { margin-left: var(--space-2); }

/* ---- Section rhythm inside a lesson -------------------------------------- */
.lesson-section { padding: var(--space-5) 0; }
.lesson-section > .kicker { display:block; margin-bottom: var(--space-3); }
.lesson-section h2 { margin: 0 0 var(--space-3); }
.lesson-section h3 { margin: var(--space-4) 0 var(--space-2); }
.lesson-section p { max-width: 60ch; }

/* ---- Exercise block: "Do this now" --------------------------------------- */
.exercise {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-object);
  box-shadow: var(--shadow-object-soft);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.exercise .exercise-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--majorelle);
}
.exercise h3 { margin: var(--space-2) 0 var(--space-3); }
.exercise ol { margin: 0; padding-left: 1.25em; }
.exercise ol li { margin: var(--space-2) 0; line-height: 1.6; }

/* ---- Copy-paste prompt block --------------------------------------------- */
/* Copy control lives in a footer bar below the text, never overlapping it. */
.prompt {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-object);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-3) 0;
}
.prompt .prompt-body {
  white-space: pre-wrap; line-height: 1.6; color: var(--slate);
  font-size: 15px;
}
.prompt-foot {
  display: flex; justify-content: flex-end;
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line-faint);
}
.copy-btn.copied { color: var(--majorelle); }

/* Example toggle in the layout heading ("The CRIT Layout: example"). Borrows
   the inline majorelle-underline treatment the glossary terms already use, so
   the control reads as a link in the heading rather than a new kind of button.
   The word itself carries the state: "example" going in, "blank layout" coming
   back, with the underline going solid while the example is showing. The
   control is created by lesson.js, so no JS means no dead link in the heading.
   Only the shown body renders; the hidden one stays in the DOM for the swap. */
.example-toggle {
  font: inherit; color: var(--majorelle); cursor: pointer;
  background: none; border: 0; padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--majorelle-soft);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease-breath);
}
.example-toggle:hover,
.example-toggle.is-on { text-decoration-color: var(--majorelle); }
.example-toggle:focus-visible { outline: 2px solid var(--majorelle); outline-offset: 2px; border-radius: 2px; }
.prompt .prompt-body[hidden] { display: none; }
/* Prompt copy buttons only (not every .btn-ghost on the site) get a subtle
   majorelle outline — on-brand pop without shouting. Overrides the neutral
   .btn-ghost border-color just for this control. */
.prompt .copy-btn { border-color: var(--majorelle); }
.prompt .copy-btn:hover {
  border-color: var(--majorelle);
  background: color-mix(in srgb, var(--majorelle) 8%, transparent);
}
.prompt .copy-btn.copied { border-color: var(--majorelle); }

/* ---- Dictation-tool callout (do the talking inside Claude, not here) ------ */
.tool-note {
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-object); padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}
.tool-note .kicker { display: block; margin-bottom: var(--space-2); }
.tool-note ul { margin: var(--space-2) 0 var(--space-2); padding-left: 1.1em; }
.tool-note li { margin: 6px 0; line-height: 1.55; }

/* ---- In-page dictation widget -------------------------------------------- */
.dictation { margin: var(--space-4) 0; }
.dictation-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.mic-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.mic-btn .mic-dot {
  width: 8px; height: 8px; border-radius: 100px; background: var(--slate-mid);
  transition: background .3s var(--ease-breath);
}
.mic-btn.recording .mic-dot { background: var(--majorelle); animation: quietPulse 1.6s var(--ease-breath) infinite; }
.dictation textarea {
  width: 100%; min-height: 150px; resize: vertical;
  background: var(--bone); color: var(--slate);
  border: 1px solid var(--line); border-radius: var(--radius-object);
  padding: var(--space-4); font-family: inherit; font-size: 15px; line-height: 1.6;
}
.dictation textarea:focus { outline: none; border-color: var(--slate-mid); }
.dictation .dictation-hint { margin-top: var(--space-2); }
.dictation .unsupported { color: var(--slate-mid); }

/* ---- "Method to the madness" — progressive-disclosure expandable ---------- */
.method { margin: var(--space-4) 0; border-top: 1px solid var(--line-faint); }
.method > summary {
  list-style: none; cursor: pointer; padding: var(--space-3) 0;
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--majorelle);
}
.method > summary::-webkit-details-marker { display: none; }
.method > summary .chev { transition: transform .3s var(--ease-breath); font-size: 12px; }
.method[open] > summary .chev { transform: rotate(90deg); }
.method .method-body { padding: 0 0 var(--space-4); max-width: 60ch; color: var(--slate-mid); }
.method .method-body p { color: var(--slate-mid); }

/* ---- "What to change" closing beat ---------------------------------------- */
.change-beat {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-object); padding: var(--space-5);
  margin: var(--space-5) 0 var(--space-4);
}
.change-beat .tick {
  flex: 0 0 auto; margin-top: 3px;
  width: 16px; height: 16px; color: var(--majorelle);
}
.change-beat .change-copy .kicker { display:block; margin-bottom: var(--space-2); }
.change-beat .change-copy p { margin: 0; }

/* ---- Lesson footer nav ---------------------------------------------------- */
.lesson-nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-6) 0 0; margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.lesson-nav .spacer { flex: 1; }

/* ---- Session hub: lesson list -------------------------------------------- */
.session-hero { padding: var(--space-8) 0 var(--space-5); }
.lesson-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.lesson-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-object); text-decoration: none; color: inherit;
  transition: box-shadow .4s var(--ease-breath), transform .4s var(--ease-breath);
}
.lesson-card:hover { box-shadow: var(--shadow-object-soft); transform: translateY(-1px); }
.lesson-card.locked { opacity: .6; pointer-events: none; }
.lesson-card .lesson-idx { font-size: 13px; font-weight: 300; color: var(--slate-mid); flex: 0 0 auto; width: 2.5em; }
.lesson-card .lesson-body { flex: 1; }
.lesson-card .lesson-body h3 { margin: 0; font-size: 19px; }
.lesson-card .lesson-body p { margin: 4px 0 0; }
.lesson-card .lesson-meta { flex: 0 0 auto; }

/* ---- Bigger reading size for lead paragraphs ------------------------------ */
.lead-lg { font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 60ch; }

/* ---- Prominent action step (where to go / what to do) --------------------- */
.action-step {
  background: var(--bone); border: 1px solid var(--line-strong);
  border-radius: var(--radius-object); box-shadow: var(--shadow-object-soft);
  padding: var(--space-5); margin: var(--space-4) 0;
}
.action-step .step-kicker {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--majorelle); display: block; margin-bottom: var(--space-2);
}
.action-step .path { font-size: 22px; font-weight: 600; color: var(--slate); line-height: 1.25; }
.action-step p { margin-top: var(--space-3); font-size: 17px; }

/* ---- Resource download card (cheat-sheet pointer) -------------------------- */
/* One per lesson, at the end of the section its cheat sheet compresses.
   Links the printable one-pager in resources/ plus its PDF. */
.resource-download {
  background: var(--bone); border: 1px solid var(--line-strong);
  border-radius: var(--radius-object); box-shadow: var(--shadow-object-soft);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0 0;
}
.resource-download__kicker {
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--majorelle); display: block; margin-bottom: var(--space-2);
}
.resource-download__body {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.resource-download__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--slate); line-height: 1.3; }
.resource-download__desc { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--slate-mid); max-width: 46ch; }
.resource-download__actions { display: inline-flex; gap: 10px; flex: 0 0 auto; }
.resource-download__btn {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: var(--bone);
  color: var(--slate); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
  transition: background .2s var(--ease-breath);
}
.resource-download__btn:hover { background: var(--ivory); }
.resource-download__btn--primary { background: var(--majorelle); border-color: var(--majorelle); color: var(--bone); }
.resource-download__btn--primary:hover { background: var(--majorelle); opacity: .92; }

/* ---- Sequential walk-through steps ---------------------------------------- */
.steps { list-style: none; margin: var(--space-4) 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative; padding-left: 42px; margin: 0 0 var(--space-4);
  font-size: 17px; line-height: 1.55; color: var(--slate);
}
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--slate);
}
.steps > li:last-child { margin-bottom: 0; }
/* Explicit step numbers for lists that continue after an interleaved block
   (layouts, stuck lists). attr() is immune to counter-scope differences
   between browsers — Carson saw counter-reset lists restart at 1. */
.steps > li[data-n]::before { content: attr(data-n); }

/* ---- Exercise unit: the whole exercise as one object ----------------------
   Carson, 2026-08-12: "I like that the start of the exercises has a distinct
   box with a shadow, but i think we could benefit from making the numbered
   steps have something similar or the entire exercise." The .action-step box
   marked only the opening; the numbered steps and prompts that follow read as
   ordinary lesson prose, so the exercise had no visible extent.

   .exercise-unit wraps the whole exercise on one cream-tinted plate. The
   layering does the signalling: ivory page ground -> cream exercise plate ->
   the bone .action-step header and ivory .prompt objects raised on top of it.
   No new accent (law 1 — majorelle never fills or borders a panel); the
   accent stays where it already lived, in the .step-kicker ink. No new font,
   no heavy rules: one hairline and the same soft object shadow the rest of
   the library uses.
   ------------------------------------------------------------------------ */
.exercise-unit {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-object);
  box-shadow: var(--shadow-object-soft);
  padding: var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
}
.exercise-unit > *:first-child { margin-top: 0; }
.exercise-unit > *:last-child { margin-bottom: 0; }

/* The opening action-step is the unit's header: it keeps the border, shadow,
   and bone surface Carson likes, and sits flush to the plate's top padding. */
.exercise-unit > .action-step:first-child { margin-top: 0; }

/* Exercise bar: solid majorelle header spanning the plate's full top edge.
   Carson, 2026-08-12: the prior .exercise-unit__label kicker-on-hairline
   treatment (and an earlier large-text variant) read as "too small and not
   obvious" — this bar is the locked design, on every one of the 14 plates,
   replacing __label where it was the plate's only opening signal. Deliberate,
   scoped exception to "majorelle is ink not paint" (Carson's explicit call
   for this one treatment only — no other panel gets a majorelle fill). Real
   markup, real text — not a heading (so it never registers as a page
   heading), not generated ::before content (so it stays in the accessibility
   tree and copy-pastes normally). Bleeds past the plate's own padding via
   negative margins so it reads as the plate's edge, not an inset banner. */
.exercise-unit > .exercise-unit__bar:first-child {
  display: block;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--majorelle);
  border-radius: var(--radius-object) var(--radius-object) 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone);
}

/* Reading sizes: the edit-pass rules below are scoped to .lesson-section's
   direct children, so the plate re-supplies them for the content it now owns. */
.exercise-unit > p { font-size: 18px; line-height: 1.65; max-width: 60ch; }
.exercise-unit > ol:not(.steps) > li,
.exercise-unit > ul:not(.steps) > li { font-size: 18px; line-height: 1.65; }
.exercise-unit > .kicker { display: block; margin-bottom: var(--space-3); }

@media (max-width: 640px) {
  .exercise-unit { padding: var(--space-4); }
}

/* ---- Visible model explainer (rows, not cards) ---------------------------- */
.model-list { margin: var(--space-4) 0; }
.model-row {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--line);
  align-items: baseline;
}
.model-row:last-child { border-bottom: 1px solid var(--line); }
.model-row .model-name { font-weight: 600; color: var(--slate); }
.model-row .model-name .model-sub { display:block; font-weight: 400; font-size: 13px; color: var(--slate-mid); margin-top: 2px; }
.model-row .model-best { color: var(--slate); line-height: 1.55; }
@media (max-width: 640px) {
  .model-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---- "Dive deeper" theory drawer ------------------------------------------ */
:root { --z-deep-tab: 40; --z-deep-scrim: 60; --z-deep-panel: 70; }

/* Per-section button: stationary — absolutely positioned at the vertical
   middle of the section it covers, in the right gutter. It scrolls WITH the
   content (never chases the viewport); JS shows only the section being read,
   so exactly one is on screen at a time. Wide screens only. */
.lesson-section { position: relative; }
.deep-btn {
  position: absolute; top: 50%; left: calc(100% + 28px);
  transform: translateY(-50%);
  z-index: var(--z-deep-tab);
  display: none; align-items: center; gap: 9px; white-space: nowrap;
  background: var(--bone); color: var(--slate);
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 11px 17px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  box-shadow: var(--shadow-object-soft);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-breath), visibility .3s var(--ease-breath), box-shadow .2s var(--ease-breath);
}
.deep-btn.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.deep-btn:hover { box-shadow: var(--shadow-object); }
.deep-btn .deep-dot { width: 7px; height: 7px; border-radius: 100px; background: var(--majorelle); flex: 0 0 auto; }

/* Docked fallback tab: narrow screens have no right gutter for per-section
   buttons, so a single static button sits bottom-right. It never moves. */
.deep-tab {
  position: fixed; right: 16px; bottom: 18px;
  z-index: var(--z-deep-tab);
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bone); color: var(--slate);
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 11px 17px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  box-shadow: var(--shadow-object-soft);
  transition: box-shadow .2s var(--ease-breath);
}
.deep-tab:hover { box-shadow: var(--shadow-object); }
.deep-panel__body > h2:first-child { margin-top: 0; }
.deep-tab .deep-dot { width: 7px; height: 7px; border-radius: 100px; background: var(--majorelle); flex: 0 0 auto; }

/* Wide screens: per-section buttons take over; the docked tab disappears. */
@media (min-width: 1200px) {
  .deep-btn { display: inline-flex; }
  .deep-tab { display: none; }
}

.deep-scrim {
  position: fixed; inset: 0; background: rgba(34, 38, 45, .12);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; z-index: var(--z-deep-scrim);
  transition: opacity .22s var(--ease-breath), visibility .22s var(--ease-breath);
}
.deep-scrim.open { opacity: 1; visibility: visible; }

.deep-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(460px, 92vw); background: var(--ivory);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 70px rgba(34, 38, 45, .14);
  transform: translateX(100%); z-index: var(--z-deep-panel);
  overflow-y: auto; overscroll-behavior: contain;
  transition: transform .24s var(--ease-breath);
}
.deep-panel.open { transform: translateX(0); }
.deep-panel__inner { padding: var(--space-6) var(--space-5) var(--space-8); }
.deep-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.deep-panel__head .kicker { margin: 0; }
.deep-panel h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 var(--space-4); }
.deep-panel h3 { font-size: 17px; margin: var(--space-5) 0 var(--space-2); }
.deep-panel p { color: var(--slate); line-height: 1.65; margin: var(--space-2) 0; }
.deep-close {
  border: 1px solid var(--line); background: var(--bone); color: var(--slate);
  width: 32px; height: 32px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background .2s var(--ease-breath);
}
.deep-close:hover { background: var(--cream); }

/* On anything but wide screens, dock the tab bottom-right so it never
   overlaps the centered reading column. */
@media (max-width: 1024px) {
  .deep-tab { top: auto; bottom: 18px; right: 16px; transform: none; }
  .deep-tab:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .deep-tab, .deep-scrim, .deep-panel { transition: none; }
}

/* ---- Small utilities ------------------------------------------------------ */
.stack-sm > * + * { margin-top: var(--space-2); }
.muted { color: var(--slate-mid); }

/* ---- Glossary term links + left term panel -------------------------------- */
:root { --z-term-panel: 70; }

a.term {
  color: var(--majorelle); cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--majorelle-soft);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease-breath);
}
a.term:hover { text-decoration-color: var(--majorelle); }

.term-scrim {
  position: fixed; inset: 0; background: rgba(34, 38, 45, .30);
  opacity: 0; visibility: hidden; z-index: var(--z-deep-scrim);
  transition: opacity .22s var(--ease-breath), visibility .22s var(--ease-breath);
}
.term-scrim.open { opacity: 1; visibility: visible; }

.term-panel {
  position: fixed; top: 0; left: 0; height: 100%;
  width: min(420px, 92vw); background: var(--ivory);
  border-right: 1px solid var(--line);
  box-shadow: 24px 0 70px rgba(34, 38, 45, .14);
  transform: translateX(-100%); z-index: var(--z-term-panel);
  overflow-y: auto; overscroll-behavior: contain;
  transition: transform .24s var(--ease-breath);
}
.term-panel.open { transform: translateX(0); }
.term-panel__inner { padding: var(--space-6) var(--space-5) var(--space-8); }
.term-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.term-panel__head .kicker { margin: 0; }
.term-panel figure {
  margin: 0 0 var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-object); overflow: hidden; background: var(--bone);
}
.term-panel figure svg, .term-panel figure img { display: block; width: 100%; height: auto; }
.term-panel h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 var(--space-2); }
.term-panel .term-tldr { font-weight: 600; color: var(--slate); line-height: 1.55; margin: 0 0 var(--space-3); }
.term-panel .term-body p { color: var(--slate); line-height: 1.65; margin: var(--space-2) 0; }
.term-panel .term-body h3 { font-size: 16px; margin: var(--space-4) 0 var(--space-1); }
.term-panel .term-body blockquote {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--bone); border-left: 2px solid var(--majorelle);
  border-radius: var(--radius-object); color: var(--slate); line-height: 1.6;
}
.term-related { margin-top: var(--space-4); }
.term-related .kicker { display: block; margin-bottom: var(--space-2); }
.term-related a.term {
  display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  background: var(--bone); font-size: 13px; text-decoration: none;
}
.term-related a.term:hover { background: var(--cream); }
.term-close {
  border: 1px solid var(--line); background: var(--bone); color: var(--slate);
  width: 32px; height: 32px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background .2s var(--ease-breath);
}
.term-close:hover { background: var(--cream); }

/* Wide screens: panels are side rails, not modals — text stays readable in
   the middle, term panel left + deep explanation right can be open together. */
@media (min-width: 1360px) {
  /* The glossary term panel is a scrim-free side rail on wide screens —
     readers keep it open while they read, so it must NOT blur or lock the
     page (2026-07-21, operator request). The Dive-deeper scrim keeps its
     blur on all sizes. */
  .term-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .term-panel, .term-scrim { transition: none; }
}

/* ============================================================================
   Topic → Lessons restructure (2026-07-20)
   Topic-intro "cover" screens, screen-to-screen arrow navigation, and the
   homepage session-gating lock state. All reusable across every session —
   this is template layer, not Session-1 content.
   ========================================================================== */

/* ---- Topic intro (cover) screen ------------------------------------------- */
.topic-main { padding-bottom: var(--space-9); }
.topic-intro {
  max-width: 1000px; margin: 0 auto; padding: var(--space-8) var(--gutter);
  min-height: calc(100vh - 210px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8);
  align-items: center;
}
.topic-intro__text { max-width: 46ch; }
.topic-intro__text .kicker { display: block; margin-bottom: var(--space-3); }
.topic-intro__text h1 { margin: 0 0 var(--space-4); font-size: clamp(34px, 5vw, 52px); line-height: 1.04; }
.topic-lede { font-size: 19px; line-height: 1.6; color: var(--slate); max-width: 42ch; margin: 0 0 var(--space-5); }

.topic-lessons { margin: 0 0 var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.topic-lessons .kicker { display: block; margin-bottom: var(--space-3); }
.topic-lessons ol { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
.topic-lessons li {
  position: relative; padding-left: 34px; margin: 0 0 var(--space-2);
  font-size: 16px; color: var(--slate); line-height: 1.5;
}
.topic-lessons li:last-child { margin-bottom: 0; }
.topic-lessons li::before {
  counter-increment: tl; content: counter(tl);
  position: absolute; left: 0; top: -2px;
  width: 22px; height: 22px; border-radius: 100px;
  border: 1px solid var(--line-strong); background: var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--slate-mid);
}

/* Bespoke topic motif (same visual grammar as the glossary motifs) */
.topic-intro__visual { display: flex; justify-content: center; }
.topic-motif {
  margin: 0; width: 100%; max-width: 440px;
  border: 1px solid var(--line); border-radius: var(--radius-object);
  overflow: hidden; background: var(--ivory); box-shadow: var(--shadow-object-soft);
}
.topic-motif svg { display: block; width: 100%; height: auto; }
.topic-motif .motif-glow { animation: quietPulse 5.5s var(--ease-breath) infinite; transform-origin: center; }

@media (max-width: 860px) {
  .topic-intro { grid-template-columns: 1fr; gap: var(--space-6); min-height: 0; padding-top: var(--space-6); }
  .topic-intro__visual { order: -1; }
  .topic-motif { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-motif .motif-glow { animation: none; }
}

/* ---- Arrow CTA: the primary "advance to the next screen" control ---------- */
.arrow-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 0 16px 0 26px; border-radius: 100px;
  background: var(--slate); color: var(--bone); text-decoration: none;
  font-size: 16px; font-weight: 600; letter-spacing: .01em; border: 0;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.arrow-cta:hover { background: var(--slate-deep); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(34,38,45,.18); }
.arrow-cta .arrow-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 100px;
  background: rgba(252,250,244,.14);
  transition: transform .22s var(--ease-breath);
}
.arrow-cta:hover .arrow-ring { transform: translateX(3px); }
.arrow-cta .arrow-ring svg { width: 18px; height: 18px; display: block; }

/* ---- Screen-to-screen nav (topic intro + lessons) ------------------------- */
.screen-nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-6) 0 0; margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.screen-nav .spacer { flex: 1; }
.nav-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--slate-mid); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .2s ease;
}
.nav-back:hover { color: var(--slate); }
.nav-back svg { width: 16px; height: 16px; transition: transform .22s var(--ease-breath); }
.nav-back:hover svg { transform: translateX(-3px); }

/* ---- Homepage session gating: locked card state --------------------------- */
.lesson-card.locked { opacity: .55; pointer-events: none; }
.lesson-card .lock-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate-mid);
}
.lesson-card .lock-note svg { width: 13px; height: 13px; }

/* ---- Per-lesson cover: its own full screen, then flows into content -------
   Each lesson opens on a full-viewport cover (title + visual), mirroring the
   topic cover. A down-arrow ("Start lesson") scrolls into the content below. */
html { scroll-behavior: smooth; }
.lesson-cover {
  min-height: calc(100vh - 56px); /* fill the screen below the sticky nav — header + visual only, no content peeking */
  display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8);
  align-items: center;
  padding: 0;
}
.lesson-cover__text { min-width: 0; }
.lesson-cover__text .kicker { display: block; margin-bottom: var(--space-3); }
.lesson-cover__text h1 { margin: 0 0 var(--space-4); font-size: clamp(32px, 4.6vw, 46px); line-height: 1.06; }
.lesson-cover__lede { font-size: 18px; line-height: 1.55; color: var(--slate-mid); max-width: 46ch; margin: 0 0 var(--space-6); }
.lesson-cover__visual { margin: 0; display: flex; justify-content: center; }
.lc-motif {
  width: 100%; max-width: 340px;
  border: 1px solid var(--line); border-radius: var(--radius-object);
  overflow: hidden; background: var(--ivory); box-shadow: var(--shadow-object-soft);
}
.lc-motif svg, .lc-motif img { display: block; width: 100%; height: auto; }

/* Down-arrow that flows the reader from the cover into the lesson body */
.cover-advance {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: 0 14px 0 24px; border-radius: 100px;
  background: var(--slate); color: var(--bone); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .01em; border: 0;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.cover-advance:hover { background: var(--slate-deep); box-shadow: 0 14px 34px rgba(34,38,45,.18); }
.cover-advance .arrow-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 100px; background: rgba(252,250,244,.14);
  transition: transform .22s var(--ease-breath);
}
.cover-advance:hover .arrow-ring { transform: translateY(2px); }
.cover-advance .arrow-ring svg { width: 17px; height: 17px; display: block; }
#lesson-body { scroll-margin-top: 96px; } /* clear the sticky nav so the first paragraph isn't clipped */

/* Topic-cover motif via external <img> too */
.topic-motif img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  .lesson-cover { grid-template-columns: 1fr; gap: var(--space-5); min-height: 0; padding-top: var(--space-6); }
  .lesson-cover__visual { order: -1; }
  .lc-motif { max-width: 300px; }
}

/* ============================================================================
   Review pass (2026-07-20): larger readable text, larger logo, white feature
   boxes (tools / ways to use Claude / models / projects), "better" example
   highlight, side-by-side frameworks, and review zones. Reusable template layer.
   Operator-requested accents (majorelle "better" border, green/amber/red zone
   bands) intentionally deviate from the majorelle-is-ink rule.
   ========================================================================== */

/* ---- No tiny text anywhere -------------------------------------------------- */
.small { font-size: 15px; line-height: 1.65; }
.kicker { font-size: 12px; }
.mark-lockup .lockup-title { font-size: 15px; }
.nav .mark-img { height: 30px; width: auto; } /* larger Benali wordmark */
.lesson-card .lesson-body p { font-size: 15px; }
.model-row .model-name .model-sub { font-size: 14px; }

/* Homepage "Sessions" heading — a real heading, not a tiny kicker */
.section-label { display: block; font-size: 23px; font-weight: 600; color: var(--slate); letter-spacing: 0; text-transform: none; margin-bottom: var(--space-2); }
.section-intro { font-size: 17px; color: var(--slate-mid); line-height: 1.6; margin: 0 0 var(--space-4); }

/* ---- White feature boxes ---------------------------------------------------- */
.feature-grid { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-5) 0; }
.feature-box {
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-object); box-shadow: var(--shadow-object-soft);
  padding: var(--space-5);
}
.feature-box__head { display: flex; align-items: center; gap: var(--space-4); }
.feature-box__icon { flex: 0 0 auto; width: 128px; border: 1px solid var(--line); border-radius: var(--radius-object); overflow: hidden; background: var(--ivory); }
.feature-box__icon img { display: block; width: 100%; height: auto; }
.feature-box__wordmark {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 128px; height: 62px; padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-object); background: var(--ivory);
  font-size: 19px; font-weight: 700; letter-spacing: .01em; color: var(--slate);
}
.feature-box__title { font-size: 20px; font-weight: 600; margin: 0; }
.feature-box__meta { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-mid); margin-top: 5px; }
.feature-box__desc { font-size: 16px; line-height: 1.6; color: var(--slate); margin: var(--space-3) 0 0; }
.feature-box__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-3); font-weight: 600; color: var(--slate); text-decoration: none; }
.feature-box__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease-breath); }
.feature-box__link:hover svg { transform: translateX(3px); }
@media (max-width: 640px) { .feature-box__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); } }

/* ---- "Better" example highlight (operator-requested majorelle border) -------- */
.card--better { border: 1.5px solid var(--majorelle); }
.better-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--majorelle); margin-bottom: 6px; }
.better-tag::before { content: ""; width: 8px; height: 8px; border-radius: 100px; background: var(--majorelle); }

/* ---- Before / After pair with arrow toward the better card ------------------ */
.before-after { display: flex; align-items: stretch; gap: var(--space-3); margin-top: var(--space-4); }
.before-after .card { flex: 1; }
.ba-arrow { display: flex; align-items: center; flex: 0 0 auto; color: var(--majorelle); }
.ba-arrow svg { width: 28px; height: 28px; }
@media (max-width: 720px) {
  .before-after { flex-direction: column; }
  .ba-arrow { justify-content: center; }
  .ba-arrow svg { transform: rotate(90deg); }
}

/* ---- Side-by-side frameworks (CRIT / COPE) ---------------------------------- */
.framework-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0; }
.framework { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-object); padding: var(--space-5); box-shadow: var(--shadow-object-soft); }
.framework h3 { margin: 0 0 4px; font-size: 21px; }
.framework .framework-sub { font-size: 14px; color: var(--slate-mid); margin: 0 0 var(--space-3); }
.framework ol { margin: 0; padding-left: 1.25em; }
.framework li { margin: 8px 0; font-size: 15px; line-height: 1.5; }
.framework li strong { color: var(--majorelle); } /* operator order 2026-08-06: framework steps read blue */
@media (max-width: 700px) { .framework-cols { grid-template-columns: 1fr; } }

/* ---- Review zones (green / amber / red) ------------------------------------- */
:root { --zone-green: #4f8a5b; --zone-amber: #bd8a34; --zone-red: #b4472f; }
.zone-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.zone { background: var(--bone); border: 1px solid var(--line); border-left: 4px solid var(--taupe); border-radius: var(--radius-object); padding: var(--space-4) var(--space-5); }
.zone--green { border-left-color: var(--zone-green); }
.zone--amber { border-left-color: var(--zone-amber); }
.zone--red { border-left-color: var(--zone-red); }
.zone__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.zone__dot { width: 9px; height: 9px; border-radius: 100px; }
.zone--green .zone__dot { background: var(--zone-green); } .zone--green .zone__label { color: var(--zone-green); }
.zone--amber .zone__dot { background: var(--zone-amber); } .zone--amber .zone__label { color: var(--zone-amber); }
.zone--red .zone__dot { background: var(--zone-red); } .zone--red .zone__label { color: var(--zone-red); }
.zone h3 { margin: 8px 0 4px; font-size: 18px; }
.zone p { margin: 4px 0 0; font-size: 16px; }

/* ============================================================================
   Edit pass (2026-07-20): uniform larger body text, tool logos, interface shots
   ========================================================================== */
/* Body paragraphs: one comfortable size everywhere (no small body text) */
.lesson-section > p { font-size: 18px; line-height: 1.65; }
.lesson-section > p.lead-lg { font-size: 20px; line-height: 1.5; }
/* Plain lists in the lesson body match paragraph size (Carson, 2026-08-06:
   list text was rendering at the 16px base while paragraphs sit at 18px) */
.lesson-section > ol:not(.steps) > li, .lesson-section > ul:not(.steps) > li { font-size: 18px; line-height: 1.65; }
.change-beat .change-copy p { font-size: 18px; line-height: 1.6; }
.action-step p { font-size: 18px; }
.feature-box__desc { font-size: 17px; }

/* Real tool logo, left of the tool title */
.feature-box__logo { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; overflow: hidden; background: var(--ivory); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.feature-box__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Interface mockup (what Chat / Cowork / Code look like) */
.feature-box__shot { flex: 0 0 auto; width: 168px; border: 1px solid var(--line); border-radius: var(--radius-object); overflow: hidden; }
.feature-box__shot img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .feature-box__shot { width: 100%; max-width: 260px; } }

/* Benali wordmark links back to the all-sessions dashboard */
.mark-link { display: inline-flex; align-items: center; text-decoration: none; }
.mark-link:hover { opacity: 0.72; transition: opacity .15s ease; }

/* ============================================================================
   Topic stepper (2026-07-20): circle indicators per topic at the top of screen.
   not-started = cream fill + slate outline · current = blue ring + cream ·
   completed = filled majorelle. Injected by initTopicSteps() in lesson.js.
   ========================================================================== */
.topic-steps {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  padding: var(--space-4) var(--gutter) 0;
}
.topic-step {
  width: 14px; height: 14px; border-radius: 100px; box-sizing: border-box;
  background: var(--cream); border: 2px solid var(--slate);
  transition: background .3s var(--ease-breath), border-color .3s var(--ease-breath), box-shadow .3s var(--ease-breath);
}
.topic-step.current { background: var(--cream); border-color: var(--majorelle); box-shadow: 0 0 0 3px color-mix(in srgb, var(--majorelle) 16%, transparent); }
.topic-step.done { background: var(--majorelle); border-color: var(--majorelle); }

/* Reclaim the stepper's height so the full-screen covers still fill the view */
.lesson-cover { min-height: calc(100vh - 108px); }
.topic-intro { min-height: calc(100vh - 262px); }

/* ============================================================================
   Template pass (2026-07-21): (1) lesson covers get a distinct centered-stack
   layout so they don't read like the topic covers they follow; (2) Dive-deeper
   + term panels blur the page and keep their toggle reachable; (3) a left
   progress rail shows the current topic + lesson and tracks scroll. All
   template-layer — reusable across every session.
   ========================================================================== */

/* ---- (1) Lesson cover: centered stack (topic covers stay side-by-side) ----- */
.lesson-cover {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  gap: var(--space-5); grid-template-columns: none;
}
.lesson-cover__visual { order: -1; width: auto; }
.lesson-cover .lc-motif { max-width: 220px; }
.lesson-cover__text { max-width: 620px; min-width: 0; }
.lesson-cover__lede { margin-left: auto; margin-right: auto; }
.lesson-cover .cover-advance { margin: 0 auto; }
@media (max-width: 760px) {
  .lesson-cover .lc-motif { max-width: 200px; }
}

/* ---- (2) Panel-open: pin the Dive-deeper toggle left of the panel ---------- */
/* The right-side panel would otherwise cover the per-section button. When the
   panel is open we fix the active button just left of the panel, above the
   blur scrim, so it stays crisp and clickable (to close). */
body.deep-open .deep-btn.visible {
  position: fixed; top: 50%; left: auto;
  right: calc(min(460px, 92vw) + 22px);
  transform: translateY(-50%);
  z-index: 65; /* above --z-deep-scrim (60), below --z-deep-panel (70) */
}

/* ---- (3) Left progress rail ------------------------------------------------ */
.lesson-rail {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  width: 196px; z-index: 30; padding-left: 16px; display: none;
}
/* Wide screens only — the left gutter has room. The top stepper stands in on
   narrower screens, so hide it here to avoid a double indicator. */
@media (min-width: 1340px) {
  .lesson-rail { display: block; }
  .topic-steps { display: none; }
}
.lesson-rail .rail-track,
.lesson-rail .rail-fill {
  position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px;
}
.lesson-rail .rail-track { bottom: 0; background: var(--line); }
.lesson-rail .rail-fill {
  bottom: 0; background: var(--majorelle);
  transform: scaleY(0); transform-origin: top; transition: transform .12s linear;
}
.lesson-rail .rail-head {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-mid); margin-bottom: var(--space-3);
}
.lesson-rail ol { list-style: none; margin: 0; padding: 0; }
.rail-topic {
  position: relative; padding: 7px 0 7px 22px;
  color: var(--slate-mid); line-height: 1.3;
}
.rail-topic::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 9px; height: 9px; border-radius: 100px; box-sizing: border-box;
  border: 1.5px solid var(--taupe); background: var(--cream);
  transition: background .3s var(--ease-breath), border-color .3s var(--ease-breath);
}
.rail-topic.done::before { background: var(--majorelle); border-color: var(--majorelle); }
.rail-topic.current::before {
  border-color: var(--majorelle);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--majorelle) 15%, transparent);
}
.rail-topic .rail-topic-name { color: inherit; text-decoration: none; font-size: 13px; }
.rail-topic .rail-topic-name:hover { color: var(--slate); }
.rail-topic.current > .rail-topic-name { color: var(--slate); font-weight: 600; }
.rail-lessons { margin: 5px 0 2px; padding: 0; }
.rail-lesson { padding: 3px 0; font-size: 12.5px; color: var(--slate-mid); }
.rail-lesson a { color: inherit; text-decoration: none; }
.rail-lesson a:hover { color: var(--slate); }
.rail-lesson.current { color: var(--majorelle); font-weight: 600; }
.rail-mins { display: block; font-size: 11px; color: var(--slate-mid); margin-top: 3px; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) {
  .lesson-rail .rail-fill { transition: none; }
}

/* ---- Chat-style example: user message right, Claude reply left (2026-07-21) - */
.chat-demo {
  background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--radius-object); box-shadow: var(--shadow-object-soft);
  padding: var(--space-5); margin: var(--space-4) 0;
}
.chat-demo--better { border: 1.5px solid var(--majorelle); }
.chat-demo + .chat-demo { margin-top: var(--space-4); }
.chat-demo > .demo-tag, .chat-demo > .better-tag { margin-bottom: var(--space-3); }
/* Neutral caps label (NOT a pill/button) — mirrors .better-tag in form */
.demo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate-mid);
}
.demo-tag::before { content: ""; width: 8px; height: 8px; border-radius: 100px; background: var(--taupe); }
/* Full-sentence header above a chat demo (2026-07-24 lesson-1 pattern) */
.chat-demo .demo-head { margin: 0 0 var(--space-3); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.45; }
.chat { display: flex; flex-direction: column; gap: var(--space-3); }
.chat-msg { max-width: 84%; padding: var(--space-3) var(--space-4); border-radius: 16px; }
.chat-msg p { margin: 0; font-size: 16px; line-height: 1.55; }
.chat-msg .chat-who {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 5px; opacity: .68;
}
.chat-user { align-self: flex-end; background: var(--slate); color: var(--bone); border-bottom-right-radius: 5px; }
.chat-ai { align-self: flex-start; background: var(--ivory); border: 1px solid var(--line); color: var(--slate); border-bottom-left-radius: 5px; }
.chat-note { margin: var(--space-3) 0 0; font-size: 15px; color: var(--slate-mid); line-height: 1.55; }

/* ---- Model-picker shot inside the "where to find it" step ------------------ */
.picker-shot {
  margin: var(--space-3) 0 0; max-width: 300px;
  border: 1px solid var(--line); border-radius: var(--radius-object); overflow: hidden;
}
.picker-shot img { display: block; width: 100%; height: auto; }
.picker-shot--lg { max-width: 620px; } /* real app screenshots need more width than mockups */

/* ---- Screenshot ring map (2026-08-06, Carson) -------------------------------
   Indicator rings drawn as overlays instead of baked into the PNG, so the
   prose can light them up: hovering or clicking an element with
   data-ring-for="<name>" bolds the matching ring. Positions are percentages
   of the screenshot so they survive any display width. */
.shot-map { position: relative; }
.shot-ring {
  position: absolute; pointer-events: none;
  border: 2px solid var(--majorelle); border-radius: 8px;
  transition: box-shadow .18s ease;
}
.shot-ring.hot {
  /* Bolder without animating border-width (layout property): an inset shadow
     thickens the stroke, an outer one adds the glow. */
  box-shadow: inset 0 0 0 1.5px var(--majorelle),
              0 0 0 3px color-mix(in srgb, var(--majorelle) 22%, transparent);
}
[data-ring-for] { cursor: pointer; }

/* ---- Home: topic cards (2026-08-03, Carson) ---------------------------------
   Collapsed, a card carries exactly three things: title, cover motif, and the
   whole-topic time estimate. The description and sub-topic list live in a
   detail block that opens on hover (or keyboard focus — the sub-topic links
   are tabbable, so focus-within must reveal them or they'd be focusable while
   hidden). Devices without hover keep the detail open; a tap can't hover. */
.session-card {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) 148px;
  gap: 0 var(--space-4);
  align-items: center;
}
/* Whole-card click target (lesson.js initSessionCardClick) — the class is
   added by the handler, so the pointer only shows where the click works. */
.session-card.card-clickable { cursor: pointer; }
.session-card .lesson-idx { grid-column: 1; grid-row: 1; }
.session-card .lesson-body { grid-column: 2; grid-row: 1; min-width: 0; }
.session-card .lesson-body .lesson-meta { display: block; margin-top: 5px; }
/* Collapsed state is title + visual + time only — the constant "Ready" pill
   carries no information there. Lock notes on gated cards still show. */
.session-card .lesson-meta .status.live { display: none; }
.card-motif {
  grid-column: 3; grid-row: 1;
  display: block; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--ivory);
}
.card-motif svg { display: block; width: 100%; height: auto; }

.session-detail {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease-breath);
}
.session-detail-inner { min-height: 0; overflow: hidden; }
.session-detail-inner > p { margin: var(--space-3) 0 0; }
.session-card:hover .session-detail,
.session-card:focus-within .session-detail { grid-template-rows: 1fr; }
@media (hover: none) {
  .session-detail { grid-template-rows: 1fr; }
}
/* Narrow screens: the motif leaves the title row (three columns don't fit)
   and slots underneath instead. */
@media (max-width: 640px) {
  .session-card { grid-template-columns: 2.5em minmax(0, 1fr); }
  .card-motif { grid-column: 2; grid-row: 2; margin-top: var(--space-3); max-width: 240px; }
  .session-detail { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .session-detail { transition: none; }
}

.session-title-link { text-decoration: none; color: inherit; }
.session-title-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.session-topics {
  list-style: none; counter-reset: st;
  width: 100%; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line-faint);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
}
.session-topics li { counter-increment: st; }
.session-topics a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 4px 0; text-decoration: none; color: var(--slate-mid); font-size: 14.5px; line-height: 1.35;
}
.session-topics a:hover { color: var(--slate); }
.session-topics a::before { content: counter(st) " · "; color: var(--slate-mid); flex: none; margin-right: -6px; }
.session-topics .st-name { flex: 1; }
.session-topics .st-min { flex: none; font-size: 12.5px; color: var(--slate-mid); }
.lesson-meta .session-mins { font-size: 12.5px; color: var(--slate-mid); margin-right: 10px; }
@media (max-width: 640px) { .session-topics { grid-template-columns: 1fr; } }

/* "How to use this library" link under the home lede — majorelle, like the
   glossary term links (blue = clickable is the library's own convention) */
.howto-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-3);
  font-size: 15px; color: var(--majorelle);
  text-decoration: underline; text-decoration-color: var(--majorelle-soft);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease-breath);
}
.howto-link:hover { text-decoration-color: var(--majorelle); }
.howto-link svg { width: 15px; height: 15px; }

/* ---- Risk ladder: zones + bar graph combined (Check AI's Work) --------------- */
.risk-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.risk-col .risk-barwrap { height: 150px; display: flex; align-items: flex-end; }
.risk-col .risk-bar { width: 100%; border-radius: 5px 5px 0 0; border: 1px solid rgba(46, 51, 59, 0.18); border-bottom: 3px solid; }
.risk-col--green .risk-bar { height: 56px; background: rgba(79, 138, 91, 0.10); border-bottom-color: var(--zone-green); }
.risk-col--amber .risk-bar { height: 100px; background: rgba(189, 138, 52, 0.10); border-bottom-color: var(--zone-amber); }
.risk-col--red .risk-bar { height: 144px; background: rgba(180, 71, 47, 0.10); border-bottom-color: var(--zone-red); }
.risk-col .risk-label { display: block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5b626d; }
.risk-col h3 { font-size: 15px; margin: 4px 0; }
.risk-col p { font-size: 13.5px; color: #5b626d; margin: 0; }
@media (max-width: 640px) {
  .risk-ladder { grid-template-columns: 1fr; }
  .risk-col .risk-barwrap { height: auto; }
  .risk-col .risk-bar { height: 10px !important; border-radius: 5px; }
}

/* ---- Cross-document page transitions --------------------------------------
   Browsers with cross-document View Transitions crossfade between pages
   natively, replacing the old JS fade-out/fade-in (which left a white gap
   while the next page loaded). Progressive enhancement: unsupported browsers
   navigate normally. Honors reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 0.16s; }
  ::view-transition-new(root) { animation-duration: 0.16s; }
}

/* ---- Saved glossary terms --------------------------------------------------
   Star button in the term panel head saves a term (localStorage); the home
   page lists saved terms as chips in #saved-terms, hidden while empty. */
.term-head-btns { display: inline-flex; align-items: center; gap: 8px; }
.term-star {
  border: 1px solid var(--line); background: var(--bone); color: var(--slate);
  width: 32px; height: 32px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease-breath);
}
.term-star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.term-star:hover { background: var(--cream); }
.term-star.on { border-color: #4a52d8; color: #4a52d8; }
.term-star.on svg { fill: #4a52d8; stroke: #4a52d8; }
.term-chips a.term {
  display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: 100px;
  background: var(--bone); font-size: 13px; text-decoration: none;
}
.term-chips a.term:hover { background: var(--cream); }

/* ---- Model ladder: branded columns with expandable cards -------------------
   A two-column table: each column opens with a brand header (logo + company
   name), then that company's models top tier to lightest. Cards are buttons:
   the one-line description is always visible, clicking expands the fuller
   explanation (.feature-box__more). */
.ladder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; align-items: start; }
.ladder-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 2px; border-bottom: 1px solid var(--line-strong);
  margin-bottom: 2px;
}
.ladder-head img { height: 22px; width: auto; display: block; }
.ladder-brand { font-size: 19px; font-weight: 600; color: var(--ink, #2e333b); }
.ladder-brand--claude { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0.01em; }
button.expand-card {
  font: inherit; color: inherit; text-align: left; width: 100%;
  cursor: pointer; position: relative;
}
button.expand-card::after {
  content: ""; position: absolute; top: 18px; right: 16px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--slate); border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg); transition: transform .25s var(--ease-breath);
}
button.expand-card.open::after { transform: rotate(225deg); }
.feature-box__more { display: none; margin-top: var(--space-2); }
.expand-card.open .feature-box__more { display: block; }
@media (max-width: 640px) {
  .ladder-row { grid-template-columns: 1fr; }
}

/* ---- Video slots (Grammar 4) ------------------------------------------------
   Rendered by initVideoSlots() from shared/video-manifest.js. Two states from
   one markup shape: the real player once the manifest has a file, a naming
   placeholder until then. Video is additive everywhere — never a step the
   learner has to complete — so nothing here reads as a required control. */
.video-slot { margin: var(--space-4) 0; }
.video-figure {
  margin: 0;
  background: var(--bone);
  border: 1px solid var(--taupe);
  border-radius: var(--radius-object);
  box-shadow: var(--shadow-object-soft);
  overflow: hidden;
}
.video-figure video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; background: var(--slate-deep);
}

/* Caption block — carries all the words, per the no-text-in-the-asset rule. */
.video-cap { padding: 14px 18px 16px; border-top: 1px solid var(--line-faint); }
.video-ph .video-cap { border-top: 1px solid var(--taupe); }
.video-kick {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-mid); margin-bottom: 6px;
}
.video-title { font-size: 18px; font-weight: 600; color: var(--slate); margin: 0; }
.video-brief { font-size: 16px; color: var(--slate-mid); margin: 6px 0 0; }

/* Placeholder art: the cover-motif ground (ivory + faint grid) with a single
   majorelle accent in the play glyph. Deliberately not interactive — no
   pointer cursor, no hover, no pill (ux rule: nothing that isn't clickable
   may look clickable). */
.video-ph .video-art {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(to right,  var(--grid-soft) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(to bottom, var(--grid-soft) 0 1px, transparent 1px 20px),
    var(--ivory);
}
.video-ph .video-glyph { display: block; width: 64px; height: 64px; }
.video-ph .video-note {
  display: block; margin-top: 12px; text-align: center;
  font-size: 14px; color: var(--slate-mid);
}

/* Topic-cover variant: sits above the lesson list on the cover's text column. */
.topic-video { margin: var(--space-3) 0 var(--space-4); max-width: 520px; }

@media (max-width: 720px) {
  .video-cap { padding: 12px 14px 14px; }
  .video-ph .video-glyph { width: 48px; height: 48px; }
}

/* Topic cover: the educational video sits in the visual column, beneath the
   motif, so the text column's read (lede → lesson list → Start CTA) is
   untouched and the CTA stays above the fold.
   On narrow screens the visual column becomes `display: contents` so the
   motif and the video become independent grid items — that's the only way to
   keep motif-first / video-last around the text without reordering the whole
   cover grid (which would regress all eight covers). */
.topic-intro__visual { flex-direction: column; align-items: center; gap: var(--space-4); }
.topic-intro__visual .video-slot { width: 100%; max-width: 440px; margin: 0; }

@media (max-width: 860px) {
  .topic-intro__visual { display: contents; }
  .topic-intro__visual .topic-motif { order: -1; justify-self: center; }
  .topic-intro__text { order: 0; }
  .topic-intro__visual .video-slot { order: 1; justify-self: center; max-width: 440px; }
}

/* ---- Home hub: three columns (2026-08-03) ----------------------------------
   Saved terms left · toggle-driven topics centre · supporting resources right.
   A deliberate, spec-recorded overturn of the one-centered-column rule, scoped
   to the home page only — the hub is a wayfinding surface, not a reading one.
   Covers and lesson pages keep the single centered column.

   Column position teaches panel position: terms sit left because the glossary
   panel opens left everywhere else; resources sit right because right is the
   detour side (Dive deeper lives there). */
.home-wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.home-wrap .session-hero { max-width: var(--measure-narrow); }

.home-hub {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 288px;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.hub-col { min-width: 0; }
.hub-col--main { min-width: 0; }

/* Side rails stay pinned while the centre column scrolls. max-height is
   load-bearing: a rail taller than the viewport can't hold its pin (sticky
   releases it to keep its bottom inside the grid row), which reads as the
   rail scrolling away with the page. Capping at viewport height keeps the
   panel still for the whole scroll; anything past the fold scrolls inside
   the rail itself. */
@media (min-width: 1081px) {
  .hub-col--terms, .hub-col--resources {
    /* Pin offset clears the sticky nav (~67px tall) so the rail heading is
       never clipped under it. */
    position: sticky; top: var(--space-8);
    /* Subtracting the page's bottom padding (lesson-main's space-9) too: the
       rail only holds its pin through the last screenful of scroll if rail
       height + everything below the hub fits inside one viewport. */
    max-height: calc(100vh - var(--space-8) - var(--space-9));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.hub-panel {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-object);
  padding: var(--space-4);
}
.hub-panel + .hub-panel { margin-top: var(--space-4); }
.hub-panel .section-label { display: block; margin-bottom: 6px; }
.hub-panel .section-intro { font-size: 15px; color: var(--slate-mid); margin: 0 0 var(--space-3); }
.hub-empty { font-size: 15px; color: var(--slate-mid); margin: 0; }
/* Terms arrive asynchronously (glossary.js unhides #saved-terms once stars
   exist). Show the teaching empty-state only while the list is still hidden,
   so a first-time learner learns the feature instead of seeing a blank rail. */
.hub-col--terms:has(#saved-terms:not([hidden])) .hub-empty { display: none; }

/* Resource list — cheat sheets (disclosure depth 4). Rows, not cards: these
   are references, not units of work. */
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li + li { margin-top: 2px; padding-top: var(--space-2); border-top: 1px solid var(--line-faint); }
.res-list a {
  display: block; text-decoration: none; color: var(--slate);
  padding: 6px 0; border-radius: var(--radius-object);
}
.res-list a:hover .res-name { text-decoration: underline; }
.res-name { display: block; font-size: 16px; font-weight: 600; }
.res-meta { display: block; font-size: 13px; color: var(--slate-mid); margin-top: 2px; }
.res-pdf {
  display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600;
  color: var(--majorelle); text-decoration: none;
}
.res-pdf:hover { text-decoration: underline; }

/* ---- Track toggle: AI Learning | AI Practice -------------------------------
   Controls the centre column only (spec rule) — the side rails never change.
   Pill styling is correct here: this IS an interactive control. */
.track-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--cream); border-radius: var(--radius-control);
  margin-bottom: var(--space-4);
}
.track-toggle button {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 8px 18px; border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent; color: var(--slate-mid);
  cursor: pointer; transition: background .2s var(--ease-breath), color .2s var(--ease-breath);
}
.track-toggle button:hover { color: var(--slate); }
.track-toggle button[aria-selected="true"] {
  background: var(--bone); color: var(--slate); border-color: var(--line);
  box-shadow: 0 1px 2px rgba(34, 38, 45, 0.06);
}
.track-toggle button:focus-visible { outline: 2px solid var(--majorelle); outline-offset: 2px; }
.track-note { font-size: 15px; color: var(--slate-mid); margin: 0 0 var(--space-4); }

@media (max-width: 1080px) {
  /* One stacked column, reading order topics → resources → saved terms.
     The centre column never loses primacy. */
  .home-hub { grid-template-columns: 1fr; gap: var(--space-5); }
  .hub-col--main { order: 0; }
  .hub-col--resources { order: 1; }
  .hub-col--terms { order: 2; }
}
@media (max-width: 720px) {
  .track-toggle { display: flex; width: 100%; }
  .track-toggle button { flex: 1; padding: 10px 12px; }
}