/* ============================================================
   Marginalia — split-screen wizard + live + edit
   Single stylesheet for /planner. Print rules at the bottom.
   ============================================================ */

:root {
  /* palette — paper + ink, lifted from saturn (~/projects/saturn) and
     toned for body-copy density (no eyebrow flourishes, no editorial
     spacing). The user said saturn felt approachable; we borrow the
     calm and skip the busy. */
  --bg: #f4f1ea;            /* paper */
  --surface: #faf8f2;        /* clean paper card */
  --surface-2: #efebe1;      /* recessed paper */
  --border: rgba(22, 22, 22, 0.14);   /* subtle rule */
  --border-strong: rgba(22, 22, 22, 0.32);
  --text: #161616;           /* ink */
  --text-muted: #6b6863;
  --accent: #2f5d8f;         /* saturn cool blue, 7.4:1 on --surface */
  --accent-deep: #1f4a78;
  --accent-soft: rgba(47, 93, 143, 0.08);
  --success: #2f6c3f;
  --success-soft: rgba(47, 108, 63, 0.08);
  --warning: #b26a00;
  --warning-soft: rgba(178, 106, 0, 0.08);
  --danger: #ce3526;          /* saturn hot/brick */

  /* typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  --font-serif: 'Fraunces', Charter, 'Iowan Old Style', Georgia, serif;

  /* metrics — 8px grid */
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u5: 40px;
  --u6: 48px;
  --radius: 3px;        /* saturn-tight, printed-feeling */
  --radius-lg: 6px;

  /* effects (subtle — never decorative) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04),
                 0 1px 3px rgba(0, 0, 0, 0.06);
  --focus-ring: 0 0 0 2px var(--accent);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" on;
  text-rendering: optimizeLegibility;
}
/* Saturn-style paper grain. One soft wash so the page does not read as
   a flat white surface; deliberately single-source and pointer-events:
   none so it does not interfere with anything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.55;
  background:
    radial-gradient(ellipse at 100% 0%, var(--accent-soft), transparent 55%);
}
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color 120ms ease-out, color 120ms ease-out;
}
a:hover { text-decoration-color: var(--accent); }
img, svg { display: block; max-width: 100%; }

/* ---------- accessibility primitives ---------- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--u2);
  background: var(--accent);
  color: var(--surface);
  padding: var(--u) var(--u2);
  border-radius: var(--radius);
  z-index: 100;
  font-weight: 500;
}
.skip-link:focus-visible { top: var(--u); text-decoration: none; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Continue-last-plan banner shown above the wizard when localStorage has
   a usable plan from a prior session. One Open / Start fresh choice. */
.continue-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--u2);
  padding: var(--u2) var(--u3);
  margin-bottom: var(--u3);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
}
.continue-text { display: flex; flex-direction: column; gap: 2px; }
.continue-text strong { font-size: 0.95rem; color: var(--accent-deep); }
.continue-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.continue-actions { display: flex; gap: var(--u); }
.continue-actions .btn { min-height: 36px; }

/* Read-only banner shown when /view/<id> loads without a valid ?t= token. */
.readonly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--u2);
  padding: var(--u2) var(--u3);
  margin-bottom: var(--u3);
  background: var(--bg-soft, #f3eee2);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--text);
}
.readonly-banner strong { color: var(--accent-deep, var(--accent)); }
.readonly-banner code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* PII warning above the optional-note textarea. Visible by default. */
.pii-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--u);
  margin-top: var(--u);
  padding: var(--u) var(--u2);
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text);
}
.pii-warning strong { color: var(--warning); font-weight: 600; }

/* Footer link bar with /privacy + version info. */
.foot-links {
  margin-top: var(--u4);
  padding-top: var(--u2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
}
.foot-links a {
  color: var(--text-muted);
  text-decoration: none;
  margin: 0 var(--u);
}
.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* /privacy page wrapper. */
.privacy-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--u4) var(--u3);
}
.privacy-page h1 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--u3);
}
.privacy-page h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: var(--u4);
  margin-bottom: var(--u);
}
.privacy-page p { margin-bottom: var(--u2); }
.privacy-page ul { padding-left: var(--u3); margin-bottom: var(--u2); }
.privacy-page li { margin-bottom: 4px; }
.privacy-page .pii-callout {
  padding: var(--u2);
  background: var(--warning-soft);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  margin: var(--u3) 0;
}
.privacy-page .pii-callout strong { color: var(--warning); }
.privacy-page .back-link {
  display: inline-block;
  margin-bottom: var(--u3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.privacy-page .back-link:hover { color: var(--accent); }

/* /me library page. localStorage history + claim-by-email + recover-form. */
.me-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--u4) var(--u3);
}
.me-page h1 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--u);
}
.me-page h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: var(--u4);
  margin-bottom: var(--u);
}
.me-hint { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--u3); }
.me-loading {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--u3) 0;
}
.me-empty {
  padding: var(--u4) 0;
  color: var(--text-muted);
}
.me-empty a { color: var(--accent); }

.me-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--u);
}
.me-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--u2);
  display: flex;
  flex-direction: column;
  gap: var(--u);
}
.me-row-stale {
  opacity: 0.6;
  border-style: dashed;
}
.me-row-meta {
  display: flex;
  gap: var(--u2);
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.me-row-meta .me-date { color: var(--text); }
.me-row-meta .me-level {
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.me-excerpt {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.me-row-actions {
  display: flex;
  gap: var(--u);
  flex-wrap: wrap;
}
.me-row-actions .btn { min-height: 36px; padding: 6px 14px; }
.me-stale {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.me-claim, .me-recover {
  margin-top: var(--u4);
  padding-top: var(--u3);
  border-top: 1px solid var(--border);
}
.me-claim p, .me-recover p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--u2);
}
.me-claim form, .me-recover form {
  display: flex;
  gap: var(--u);
  flex-wrap: wrap;
}
.me-claim input, .me-recover input {
  flex: 1 1 220px;
  min-width: 0;
  padding: var(--u) var(--u2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
}
.me-claim input:focus, .me-recover input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.me-status {
  margin-top: var(--u);
  padding: var(--u);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.me-status.ok { background: var(--success-soft); color: var(--success); }
.me-status.warn { background: var(--warning-soft); color: var(--warning); }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--u2) var(--u3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar h1 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.topbar h1 .accent { color: var(--accent); }

.topbar-actions {
  display: flex;
  gap: var(--u);
  align-items: center;
}
.topbar-actions .btn { min-height: 36px; padding: 6px var(--u2); font-size: 0.9rem; }

/* ---------- settings dialog ---------- */
.settings-dialog {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--surface);
  color: var(--text);
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(22, 22, 22, 0.18);
}
.settings-dialog::backdrop {
  background: rgba(22, 22, 22, 0.32);
}
.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  padding: var(--u3);
}
.settings-form h2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.settings-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.settings-providers {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--u);
  max-height: 50vh;
  overflow-y: auto;
}
.settings-loading {
  color: var(--text-muted);
  font-style: italic;
}

.provider-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--u2);
  background: var(--surface);
}
.provider-row[data-selected='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
}
.provider-head label {
  display: flex;
  align-items: center;
  gap: var(--u);
  cursor: pointer;
  font-weight: 500;
  flex: 1;
}
.provider-head input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.provider-cap {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 3px;
}
.provider-cap.has-image {
  color: var(--accent-deep);
  background: var(--accent-soft);
}
.provider-advanced summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--u) 0 0 28px;
  user-select: none;
}
.provider-advanced[open] summary { color: var(--text); }
.provider-advanced .fields {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--u);
  padding: var(--u) 0 0 28px;
  font-size: 0.85rem;
}
.provider-advanced .fields label {
  align-self: center;
  color: var(--text-muted);
}
.provider-advanced .fields input {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
}
.provider-advanced .fields input:focus { border-color: var(--accent); }

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--u);
}

/* ---------- split-screen layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(360px, 420px) 1fr;
    align-items: start;
  }
}

.left-pane,
.right-pane {
  padding: var(--u3);
}
.left-pane {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .left-pane {
    border-bottom: 0;
    border-right: 1px solid var(--border);
    /* Page scrolls as one column. The earlier sticky+overflow nesting
       trapped mousewheel events on the left pane and made the page feel
       locked; sliding off the bottom of the wizard now scrolls naturally. */
    min-height: 100%;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u);
  padding: var(--u) var(--u2);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease;
  min-height: 44px;     /* WCAG 2.5.5 target size */
  white-space: nowrap;
}
.btn.primary {
  background: var(--accent);
  color: var(--surface);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-deep); }
.btn.primary:disabled {
  background: var(--border-strong);
  color: var(--surface);
  cursor: not-allowed;
}
.btn.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.btn.ghost:disabled { color: var(--text-muted); cursor: not-allowed; }

/* ---------- wizard ---------- */
.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}
.wizard-steps {
  display: flex;
  gap: var(--u);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  counter-reset: step;
}
.wizard-steps li {
  display: flex;
  align-items: center;
  gap: var(--u);
}
.wizard-steps li::before {
  content: counter(step);
  counter-increment: step;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
}
.wizard-steps li[data-active='true']::before {
  background: var(--accent);
  color: var(--surface);
}
.wizard-steps li[data-done='true']::before {
  background: var(--success);
  color: var(--surface);
  content: '✓';
}
.wizard-steps li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: var(--u3);
  height: 1px;
  background: var(--border);
}

.step h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--u3);
  letter-spacing: -0.01em;
}

/* card grid (level + topic pickers) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--u);
  margin-bottom: var(--u3);
}
.opt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--u2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  font-size: 0.95rem;
  min-height: 60px;
  transition: border-color 120ms ease, background 120ms ease;
}
.opt-card .lead {
  font-weight: 600;
  font-size: 1rem;
}
.opt-card .sub {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.opt-card:hover:not([aria-checked='true']) {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.opt-card[aria-checked='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.opt-card[aria-checked='true'] .lead { color: var(--accent-deep); }

/* starter list (step 3) */
.starter-list {
  display: flex;
  flex-direction: column;
  gap: var(--u);
  margin-bottom: var(--u2);
}
.starter-card {
  width: 100%;
  display: block;
  padding: var(--u2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: border-color 120ms ease, background 120ms ease;
}
.starter-card:hover:not([aria-checked='true']) {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.starter-card[aria-checked='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Regenerate control injected by app.js into each unlocked section
   (1..4 only). Click the ↻ button to expose the steer textarea, type
   what to change, hit Regenerate. The button disables itself while the
   stream is in flight so the consensus-flagged double-regen race
   can't fire. */
.section-regen {
  margin-top: var(--u2);
  padding-top: var(--u2);
  border-top: 1px dashed var(--border);
}
.section-regen .btn-small {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.section-regen .btn-small svg { width: 12px; height: 12px; }
.regen-form {
  display: flex;
  flex-direction: column;
  gap: var(--u);
  margin-top: var(--u);
}
.regen-form textarea {
  width: 100%;
  padding: var(--u);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.regen-form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.regen-actions {
  display: flex;
  gap: var(--u);
  justify-content: flex-end;
}
.regen-actions .btn-small {
  min-height: 32px;
  padding: 4px 10px;
}

/* Free-text "Or describe what you want, in your own words" block.
   Always visible below the preset starter cards in step 3. Typing into it
   overrides any selected preset (handled in app.js). Replaces the prior
   <details> "Add a note" expander. */
.starter-own {
  display: flex;
  flex-direction: column;
  gap: var(--u);
  margin-top: var(--u2);
  margin-bottom: var(--u3);
}
.starter-own > label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.starter-own textarea {
  width: 100%;
  padding: var(--u2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
  min-height: 84px;
}
.starter-own textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.add-note {
  margin-bottom: var(--u3);
}
.add-note summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: var(--u);
  user-select: none;
}
.add-note[open] summary { color: var(--text); }
.add-note textarea {
  width: 100%;
  margin-top: var(--u);
  padding: var(--u2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.add-note textarea:focus { border-color: var(--accent); }

.step-actions {
  display: flex;
  gap: var(--u);
  justify-content: space-between;
}

/* ---------- status panel (during + after generation) ---------- */
.status-panel {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
}
.status-line p {
  font-size: 1.05rem;
  font-weight: 500;
}
.progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 200ms ease-out;
}
.progress-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.meta-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--u) var(--u2);
  padding: var(--u2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.meta-summary dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  align-self: center;
}
.meta-summary dd { color: var(--text); }

.error-banner {
  padding: var(--u2);
  background: #fee2e2;
  color: var(--danger);
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

/* ---------- right pane: lesson plan ---------- */
.lesson-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--u2);
  margin-bottom: var(--u3);
  padding-bottom: var(--u2);
  border-bottom: 1px solid var(--border);
}
.lesson-actions h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.action-buttons {
  display: flex;
  gap: var(--u);
  flex-wrap: wrap;
}

.lesson-empty {
  text-align: center;
  padding: var(--u6) var(--u2);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.lesson-empty p { max-width: 36ch; margin: 0 auto; }

/* one section block */
.lesson-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--u3);
  margin-bottom: var(--u3);
  position: relative;
}
.lesson-section:last-child { margin-bottom: 0; }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--u);
  margin-bottom: var(--u2);
}
.section-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.section-status.streaming { color: var(--accent); }
.section-status.done { color: var(--success); }
.section-status.saved { color: var(--success); font-weight: 500; }

/* skeleton placeholders. We dropped the shimmer animation: it was animating
   `background-position` on six elements simultaneously which forced full
   paint every frame and caused visible jitter on slower devices. The static
   bars are still recognizable as a loading state. */
.section-body[data-state='skeleton'] .skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--u);
}
.skeleton-line {
  height: 14px;
  background: var(--border);
  border-radius: 3px;
  opacity: 0.7;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 85%; }

/* live text body — read mode */
.section-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  outline: none;
}
.section-body[data-state='streaming']::after {
  content: '▍';
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .section-body[data-state='streaming']::after { animation: none; }
}

/* unlock pulse — runs once when state flips to 'done' */
.section-body[data-state='done'] {
  animation: unlock-pulse 600ms ease-out;
}
@keyframes unlock-pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* edit hover affordance — only when section is unlocked */
.lesson-section[data-unlocked='true'] .section-body:hover {
  background: var(--surface-2);
  border-radius: var(--radius);
  cursor: text;
}
.lesson-section[data-unlocked='true'] .section-body:focus-visible {
  background: var(--surface-2);
  border-radius: var(--radius);
}

/* edit hint when clicked while still streaming */
.section-locked-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--u);
}

/* markdown content styling (matches read & edit modes) */
.section-body h1,
.section-body h2,
.section-body h3,
.section-body h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--u3);
  margin-bottom: var(--u);
  line-height: 1.3;
}
.section-body h1 { font-size: 1.35rem; }
.section-body h2 { font-size: 1.2rem; }
.section-body h3 { font-size: 1.1rem; }
.section-body h4 { font-size: 1.0rem; }
.section-body > *:first-child { margin-top: 0; }
.section-body p { margin-bottom: var(--u2); }
.section-body ul,
.section-body ol { padding-left: var(--u3); margin-bottom: var(--u2); }
.section-body li { margin-bottom: 4px; }
.section-body strong { font-weight: 600; color: var(--text); }
.section-body em { font-style: italic; }
.section-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.section-body pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2);
  padding: var(--u2);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: var(--u2);
  font-size: 0.9em;
}
.section-body blockquote {
  border-left: 3px solid var(--border-strong);
  padding-left: var(--u2);
  color: var(--text-muted);
  font-style: italic;
  margin: var(--u2) 0;
}
.section-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* embedded YouTube */
.video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: var(--u2) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- icons (inline svg use) ---------- */
.icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  flex-shrink: 0;
}
.icon-lg { width: 20px; height: 20px; }

/* ---------- print ---------- */
@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --border: #cccccc;
  }
  body { background: white; color: black; font-size: 11pt; }
  .topbar, .left-pane, .lesson-actions, .skip-link, .section-status,
  .section-locked-hint, .saved-indicator, .skeleton {
    display: none !important;
  }
  .split {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }
  .right-pane { padding: 0; max-height: none; overflow: visible; }
  .lesson-section {
    border: 0 !important;
    background: white !important;
    page-break-inside: avoid;
    padding: 0 0 var(--u3) 0;
    margin-bottom: var(--u3);
  }
  .section-title {
    border-bottom: 1pt solid #999;
    padding-bottom: 4pt;
    margin-bottom: var(--u);
  }
  .video-frame {
    background: #f5f5f5;
    border: 1pt solid #ccc;
  }
  .video-frame::after {
    content: 'Video available online';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #666;
    font-style: italic;
  }
  .video-frame iframe { display: none; }
  a { color: black; text-decoration: none; }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #666;
  }
}