* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
}

button, textarea { font: inherit; }
a { color: var(--color-primary); }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--color-focus-halo);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: var(--space-sm);
  left: var(--space-sm);
  transform: translateY(-180%);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-primary);
}
.skip-link:focus { transform: translateY(0); }

.site-header,
.site-footer {
  width: min(100% - 2rem, var(--content-wide));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-header { min-height: var(--nav-height); }
.brand { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.brand span { margin-left: var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-fine); font-weight: 400; }
.hub-link { font-size: var(--text-caption); text-decoration: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  padding: clamp(3.5rem, 8vw, 7rem) max(1rem, calc((100vw - var(--content-wide)) / 2));
  background: var(--color-canvas-parchment);
}

.eyebrow {
  margin: 0 0 var(--space-xs);
  color: var(--color-primary);
  font-size: var(--text-fine);
  font-weight: 600;
  letter-spacing: .08em;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -.02em; }
h1 { margin: 0; font-size: var(--text-hero); }
.subtitle { max-width: 50rem; margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-lead); line-height: 1.45; }
.course-note { max-width: 46rem; margin: 0; color: var(--color-ink-muted); font-size: var(--text-caption); }

.progress-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-canvas);
}
.progress-copy { display: grid; gap: var(--space-xs); color: var(--color-ink-muted); font-size: var(--text-caption); }
.progress-copy div { display: flex; justify-content: space-between; gap: var(--space-md); color: var(--color-ink); }
.progress-copy strong { color: var(--color-primary); }
.progress-track { height: .5rem; margin-top: var(--space-md); overflow: hidden; border-radius: var(--radius-pill); background: var(--color-divider-soft); }
#progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width var(--transition-fast); }
.save-status { margin: var(--space-sm) 0 0; color: var(--color-ink-muted); font-size: var(--text-fine); }
.save-status.is-warning { color: var(--color-ink-soft); }

.load-state { width: min(100% - 2rem, var(--content-wide)); margin: var(--space-section) auto; color: var(--color-ink-muted); text-align: center; }
.workspace { width: min(100%, var(--content-wide)); margin: 0 auto; display: grid; grid-template-columns: 20rem minmax(0, 1fr); }

.course-rail {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: var(--space-xxl) var(--space-lg);
  border-right: 1px solid var(--color-hairline);
}
.rail-heading h2 { margin: 0 0 var(--space-lg); font-size: 1.4rem; }
.module-nav { display: grid; gap: var(--space-xs); }
.module-button {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}
.module-button:hover { background: var(--color-surface); }
.module-button[aria-current="step"] { border-color: var(--color-primary); background: var(--color-surface); }
.module-number { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-canvas-parchment); font-size: var(--text-caption); }
.module-button.is-complete .module-number { background: var(--color-primary); color: var(--color-on-primary); }
.module-name { min-width: 0; font-size: var(--text-caption); font-weight: 600; line-height: 1.35; }
.module-time { color: var(--color-ink-muted); font-size: var(--text-fine); white-space: nowrap; }

.lesson { min-width: 0; max-width: 58rem; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); }
.lesson-header { padding-bottom: var(--space-xxl); border-bottom: 1px solid var(--color-hairline); }
.lesson-header h2 { margin: 0; font-size: var(--text-display); }
.lesson-summary { margin: var(--space-md) 0 0; color: var(--color-ink-soft); font-size: var(--text-lead); }
.pace-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.pace-item { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-canvas-parchment); color: var(--color-ink-soft); font-size: var(--text-caption); }
.pace-item strong { color: var(--color-primary); }

.lesson > section { margin-top: var(--space-section); }
.section-heading h3 { margin: 0; font-size: var(--text-section); }
.section-heading.compact { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); }
.section-heading.compact span { color: var(--color-ink-muted); font-size: var(--text-fine); }
.section-intro { margin: var(--space-sm) 0 0; color: var(--color-ink-muted); font-size: var(--text-caption); }

.card-list, .prompt-list, .quiz-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.empty-state { margin: 0; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink-muted); }
.content-card, .prompt-card, .quiz-card { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); }
.content-card h4, .prompt-card h4, .quiz-card h4 { margin: 0; font-size: 1.2rem; }
.content-card p, .prompt-card p { white-space: pre-line; }
.content-card ul, .rubric-list, .coverage-list { padding-left: 1.25rem; }
.example { margin: var(--space-lg) 0 0; padding: var(--space-md); border-left: 3px solid var(--color-primary); background: var(--color-surface); white-space: pre-line; }
.example strong, .card-source { display: block; margin-bottom: var(--space-xs); color: var(--color-primary); font-size: var(--text-fine); letter-spacing: .04em; }
.card-source { margin-top: var(--space-md); margin-bottom: 0; color: var(--color-ink-muted); }

.prompt-card label { display: block; margin-top: var(--space-lg); font-size: var(--text-caption); font-weight: 600; }
.prompt-card textarea, .note-section textarea { width: 100%; resize: vertical; margin-top: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); background: var(--color-canvas); color: var(--color-ink); line-height: 1.6; }
.answer-details { margin-top: var(--space-md); border-top: 1px solid var(--color-divider-soft); padding-top: var(--space-md); }
.answer-details summary { color: var(--color-primary); cursor: pointer; font-size: var(--text-caption); font-weight: 600; }
.model-answer { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); white-space: pre-line; }

.quiz-options { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.quiz-option { min-height: 3rem; display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-hairline); border-radius: var(--radius-md); cursor: pointer; }
.quiz-option:has(input:checked) { border-color: var(--color-primary); }
.quiz-option input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: var(--color-primary); }
.quiz-feedback { margin: var(--space-md) 0 0; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-caption); }
.quiz-feedback.correct { border-left: 3px solid var(--color-primary); }
.quiz-feedback.incorrect { border-left: 3px solid var(--color-primary); }

.source-section { padding-top: var(--space-xl); border-top: 1px solid var(--color-hairline); }
.source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-lg); }
.source-grid h4 { margin: 0 0 var(--space-sm); }
.source-list { margin: 0; padding: 0; list-style: none; }
.source-list li + li { margin-top: var(--space-sm); }
.source-list a { overflow-wrap: anywhere; }
.coverage-list { margin: 0; }
.source-support { margin: var(--space-xl) 0 0; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-canvas-parchment); color: var(--color-ink-soft); font-size: var(--text-caption); }

.note-section { padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-canvas-parchment); }
.completion-row { margin-top: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); }
.completion-row p { margin: 0; color: var(--color-ink-muted); font-size: var(--text-fine); }
.primary-button, .complete-button, .error-panel button {
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  cursor: pointer;
}
.complete-button[aria-pressed="true"] { background: var(--color-ink); }
.secondary-button, .secondary-link {
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
}
.lesson-navigation { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xxl); }
.lesson-navigation button:disabled { opacity: .4; cursor: not-allowed; }
.final-panel { padding: var(--space-xxl); border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-on-primary); }
.final-panel h2 { margin: 0; font-size: var(--text-section); }
.final-panel > p:not(.eyebrow) { color: var(--color-dark-muted); }
.final-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.final-panel .secondary-link { border-color: var(--color-hairline); background: transparent; color: var(--color-primary-on-dark); }

.error-panel { width: min(100% - 2rem, 42rem); margin: var(--space-section) auto; padding: var(--space-xl); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg); text-align: center; }
.error-panel h2 { margin-top: 0; }
.site-footer { min-height: 6rem; margin-top: var(--space-section); border-top: 1px solid var(--color-hairline); color: var(--color-ink-muted); font-size: var(--text-fine); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 58rem) {
  .hero { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .course-rail { position: static; max-height: none; padding: var(--space-lg) 1rem; border-right: 0; border-bottom: 1px solid var(--color-hairline); }
  .rail-heading h2 { margin-bottom: var(--space-sm); }
  .module-nav { grid-auto-flow: column; grid-auto-columns: minmax(13rem, 70vw); overflow-x: auto; padding-bottom: var(--space-xs); scroll-snap-type: x proximity; }
  .module-button { scroll-snap-align: start; background: var(--color-surface); }
  .lesson { max-width: none; }
}

@media (max-width: 38rem) {
  .brand span { display: none; }
  .hero { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
  .source-grid { grid-template-columns: 1fr; }
  .completion-row, .section-heading.compact { align-items: stretch; flex-direction: column; }
  .lesson-navigation button { flex: 1; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

.lesson-jumps{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}.lesson-jumps a{display:inline-flex;align-items:center;min-height:44px;color:var(--color-primary)}.source-section>summary{cursor:pointer;min-height:44px;font-weight:600}

.content-card,.prompt-card,.quiz-card{min-width:0;overflow-wrap:anywhere}

button:active,.secondary-link:active{transform:scale(.95)}