/* ==========================================================================
   Components — buttons, nav, cards, badges, callouts, progress marks
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-contrast);
}

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover {
  color: var(--color-text);
  background: var(--color-accent-soft);
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.btn-icon:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* ---- Sidebar navigation ---------------------------------------------- */
.nav-section {
  margin-bottom: var(--space-2);
}

.nav-section__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.nav-link:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.nav-link[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.nav-domain-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-domain-row__link,
.nav-domain-row__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}

a.nav-domain-row__link:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

a.nav-domain-row__link[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.nav-domain-row__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-faint);
}

.nav-domain-row__toggle:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.nav-domain-row__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.nav-domain-row__toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.nav-domain__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-border-strong);
}

.nav-domain__status[data-status="in-progress"] {
  background: var(--color-warning);
}

.nav-domain__status[data-status="mastered"] {
  background: var(--color-success);
}

.nav-sublist {
  list-style: none;
  padding-left: var(--space-5);
  margin-top: var(--space-1);
  display: grid;
  gap: 1px;
}

.nav-sublist[hidden] {
  display: none;
}

.nav-lesson {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  text-decoration: none;
}

.nav-lesson:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.nav-lesson[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  background: var(--color-accent-soft);
}

.nav-lesson--planned {
  color: var(--color-text-faint);
  cursor: default;
}

.nav-lesson--planned:hover {
  background: none;
  color: var(--color-text-faint);
}

.nav-lesson__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex-shrink: 0;
}

.nav-lesson__dot[data-status="in-progress"] {
  background: var(--color-warning);
}

.nav-lesson__dot[data-status="mastered"] {
  background: var(--color-success);
}

.nav-lesson__planned-tag {
  margin-left: auto;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ---- Badges --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge--easy {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.badge--medium {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.badge--hard {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.badge--challenge {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.badge--neutral {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.badge--outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
}

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.card--interactive {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.card--interactive:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-subsection);
  margin-bottom: var(--space-2);
}

.card__body {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-prose);
}

.card--planned {
  opacity: 0.7;
}

.card-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* ---- Section headers ---------------------------------------------------*/
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.section-heading h2 {
  font-size: var(--text-section);
}

.section-heading__link {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

/* ---- Hexagonal mastery mark ---------------------------------------------
   Signature progress element: a hexagon (nodding to the AMC/MAA hex mark
   and to geometry) whose fill sweep communicates completion percentage. */
.hex-mark {
  --pct: 0;
  position: relative;
  width: var(--hex-size, 56px);
  height: var(--hex-size, 56px);
  flex-shrink: 0;
}

.hex-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hex-mark__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 6;
}

.hex-mark__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--hex-len, 300);
  stroke-dashoffset: calc(var(--hex-len, 300) - (var(--hex-len, 300) * var(--pct) / 100));
  transition: stroke-dashoffset var(--duration-base) var(--ease-standard);
}

.hex-mark__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-family: var(--font-ui);
}

.hex-mark--sm {
  --hex-size: 34px;
}
.hex-mark--sm .hex-mark__label {
  font-size: 0.6rem;
}

/* ---- Mastery status pill ------------------------------------------------*/
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.status-pill[data-status="not-started"]::before {
  background: var(--color-border-strong);
}
.status-pill[data-status="in-progress"]::before {
  background: var(--color-warning);
}
.status-pill[data-status="practicing"]::before {
  background: var(--color-info);
}
.status-pill[data-status="mastered"]::before {
  background: var(--color-success);
}

/* ---- Linear progress bar -----------------------------------------------*/
.progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width var(--duration-base) var(--ease-standard);
}

/* ---- Callouts ---------------------------------------------------------*/
.callout {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small);
  line-height: var(--leading-prose);
}

.callout + .callout {
  margin-top: var(--space-4);
}

.callout__title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.callout--strategy {
  border-left-color: var(--color-info);
  background: var(--color-info-soft);
}
.callout--mistake {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.callout--definition {
  border-left-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.callout--theorem {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
}
.callout--note {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

/* ---- Checklist ---------------------------------------------------------*/
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.checklist__item input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.checklist__item label {
  font-size: var(--text-small);
  line-height: var(--leading-snug);
}

/* ---- Breadcrumbs ---------------------------------------------------------*/
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

.breadcrumbs__sep {
  color: var(--color-text-faint);
}

/* ---- Search --------------------------------------------------------------*/
.search-box {
  position: relative;
  flex: 1;
  max-width: 360px;
  min-width: 0;
}

.search-box input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-small);
}

.search-box input:focus-visible {
  border-color: var(--color-accent);
}

.search-box__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
  pointer-events: none;
}

.search-box__kbd {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--font-mono);
}

/* ---- Theme toggle ---------------------------------------------------------*/
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}

.theme-toggle button {
  width: 30px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.theme-toggle button svg {
  width: 15px;
  height: 15px;
}

.theme-toggle button[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---- Empty state ---------------------------------------------------------*/
.empty-state {
  text-align: left;
  padding: var(--space-6);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.empty-state strong {
  color: var(--color-text);
}

.empty-state--mascot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
}

.empty-state--mascot img {
  flex-shrink: 0;
}

/* ---- Lesson stepper (paginated lesson navigation) -----------------------*/
.lesson-stepper__header {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  z-index: 1;
}

.lesson-stepper__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.lesson-page {
  min-height: 40vh;
}

.lesson-stepper__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.lesson-stepper__nav .btn:only-child {
  margin-left: auto;
}

/* ---- Quiz: answer input row ---------------------------------------------*/
.answer-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.answer-input {
  flex: 1;
  min-width: 200px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body);
  font-family: var(--font-mono);
}

.answer-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.answer-input:disabled {
  opacity: 0.7;
}

.quiz-progress {
  margin-bottom: var(--space-3);
}

.quiz-feedback {
  font-size: var(--text-small);
  line-height: var(--leading-prose);
  min-height: 1.5em;
}

.quiz-feedback--correct {
  color: var(--color-success);
}

.quiz-feedback--incorrect {
  color: var(--color-text);
}

.quiz-feedback--retry {
  color: var(--color-warning);
}

.quiz-summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-accent-soft);
}

.quiz-summary--mascot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.quiz-summary--mascot img {
  flex-shrink: 0;
}

/* ---- Video embed (reusable for challenging topics in later domains) -----*/
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin: var(--space-5) 0;
  background: var(--color-surface-raised);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed__caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

/* ---- Curriculum page: domain / module blocks --------------------------*/
.domain-block__title {
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

.domain-block__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.domain-block__index {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.domain-block__meta {
  min-width: 0;
  flex: 1;
}

.domain-block__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.domain-block__title {
  font-size: var(--text-section);
}

.prereq-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.prereq-list a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-border-strong);
}

.prereq-list a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.module-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.module-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.module-list__item + .module-list__item {
  border-top: 1px solid var(--color-border);
}

.module-list__item a,
.module-list__item .module-list__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

.module-list__item--planned .module-list__label {
  color: var(--color-text-faint);
}

.module-list__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  width: 1.5em;
  flex-shrink: 0;
}

/* ---- Lesson content: formula boxes ---------------------------------- */
.formula-box {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}

.formula-box__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.formula-box__formula {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.formula-box__meaning {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: var(--leading-prose);
}

.formula-box__meaning dt {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: inline;
}

.formula-box__meaning dd {
  display: inline;
  margin: 0 0 0 var(--space-2);
}

.formula-box__meaning dd::after {
  content: "";
  display: block;
}

/* ---- Lesson content: worked examples ---------------------------------- */
.example-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-5) 0;
  overflow: hidden;
}

.example-block__header {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--weight-semibold);
  font-size: var(--text-small);
}

.example-block__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.example-block__part-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.example-block__part p,
.example-block__part ol,
.example-block__part ul {
  font-size: var(--text-small);
  line-height: var(--leading-prose);
}

/* ---- Learning objectives -----------------------------------------------*/
.objectives-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.objectives-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
}

.objectives-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---- Native <details> as hint/solution disclosures ---------------------
   Per the style guide's "use native controls whenever possible" rule, hint
   and solution reveals are plain <details>/<summary> — keyboard-operable
   and functional without JavaScript, styled to match the design system. */
details.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  background: var(--color-surface);
}

details.disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}

details.disclosure > summary::-webkit-details-marker {
  display: none;
}

details.disclosure > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}

details.disclosure[open] > summary::before {
  transform: rotate(45deg);
}

details.disclosure > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

details.disclosure__body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-prose);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

/* ---- Practice problems ---------------------------------------------- */
.practice-problem {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.practice-problem__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.practice-problem__tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.practice-problem__statement {
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  margin-bottom: var(--space-3);
}

.practice-problem__complete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  cursor: pointer;
}

.practice-problem__complete input {
  width: 17px;
  height: 17px;
  accent-color: var(--color-success);
}

.practice-group {
  margin-top: var(--space-6);
}

.practice-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ---- Status selector (segmented control for lesson status) -------------*/
.status-selector {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}

.status-selector button {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-selector button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.status-selector button[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.status-selector button[data-status="in-progress"]::before { background: var(--color-warning); }
.status-selector button[data-status="practicing"]::before { background: var(--color-info); }
.status-selector button[data-status="mastered"]::before { background: var(--color-success); }

/* ---- Lesson prev/next navigation ----------------------------------------*/
.lesson-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.lesson-pager__link {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  display: block;
}

.lesson-pager__link:hover {
  border-color: var(--color-accent);
}

.lesson-pager__link--next {
  text-align: right;
}

.lesson-pager__label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: block;
  margin-bottom: var(--space-1);
}

.lesson-pager__title {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.lesson-pager__placeholder {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-text-faint);
  font-size: var(--text-small);
}

/* ---- Resource list -------------------------------------------------------*/
.resource-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.resource-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--text-small);
}

.resource-list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.resource-list__ext {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ---- Table of contents (right rail) -------------------------------------*/
.page-toc {
  font-size: var(--text-small);
}

.page-toc__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}

.page-toc ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  border-left: 1px solid var(--color-border);
}

.page-toc a {
  display: block;
  padding-left: var(--space-3);
  color: var(--color-text-muted);
  text-decoration: none;
}

.page-toc a:hover,
.page-toc a.is-active {
  color: var(--color-accent);
  border-left: 2px solid var(--color-accent);
  margin-left: -1px;
  padding-left: calc(var(--space-3) - 1px);
}