#toast-region {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: 24rem;
  z-index: 200;
  pointer-events: none;
}

#toast-region > * {
  pointer-events: auto;
}

.toast {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-inline-start-width: 0.25rem;
  border-radius: var(--radius);
}

.toast--info { border-inline-start-color: var(--color-status-info); }
.toast--success { border-inline-start-color: var(--color-status-success); }
.toast--warning { border-inline-start-color: var(--color-status-warning); }
.toast--error { border-inline-start-color: var(--color-status-error); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
}

.status-pill--success { border-color: var(--color-status-success); }
.status-pill--warning { border-color: var(--color-status-warning); }
.status-pill--error { border-color: var(--color-status-error); }

.course-map {
  display: grid;
  gap: var(--space-3);
}

.course-map__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.lesson-view__section {
  margin-block: var(--space-5);
}

.exercise {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
}

.exercise__feedback--correct { color: var(--color-status-success); }
.exercise__feedback--incorrect { color: var(--color-status-error); }

.waveform {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  height: auto;
}

.waveform-grid {
  stroke: var(--color-waveform-grid);
}

.waveform-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lesson .lead { font-size: 1.15rem; max-inline-size: 60rem; }
.week-orientation, .guided-practice, .knowledge-check, .chapter-sources {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
}
.week-orientation nav ol { columns: 2; padding-inline-start: 1.5rem; }
.chapter { margin-block: var(--space-6); scroll-margin-block-start: 5rem; }
.chapter > h2 { font-size: clamp(1.45rem, 2vw, 2rem); }
.chapter h3 { margin-block-start: var(--space-4); }
.chapter-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-5); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
.code-example { margin-block: var(--space-4); }
.code-example figcaption { padding: var(--space-2) var(--space-3); font-size: .875rem; color: var(--color-fg-muted); background: var(--color-bg-muted); border: 1px solid var(--color-border); border-block-end: 0; border-radius: var(--radius) var(--radius) 0 0; }
.code-example pre { margin-block: 0; border-radius: 0 0 var(--radius) var(--radius); }
.equation { padding: var(--space-3); overflow-x: auto; border-inline-start: .25rem solid var(--color-status-info); background: var(--color-bg-muted); }
.table-scroll { overflow-x: auto; margin-block: var(--space-4); }
table { inline-size: 100%; border-collapse: collapse; }
th, td { padding: var(--space-2) var(--space-3); text-align: start; border: 1px solid var(--color-border); }
th { background: var(--color-bg-muted); }
caption { text-align: start; margin-block-end: var(--space-2); font-weight: 600; }
.failure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.callout { padding: var(--space-3) var(--space-4); margin-block: var(--space-4); border-inline-start: .25rem solid var(--color-status-info); background: var(--color-bg-muted); }
.callout-warning { border-inline-start-color: var(--color-status-warning); }
.callout-capstone { border-inline-start-color: var(--color-status-success); }
.vocabulary dt { font-weight: 700; margin-block-start: var(--space-2); }
.vocabulary dd { margin-inline-start: 1rem; }
.expected { padding: var(--space-3); border: 1px dashed var(--color-border); }
.optional-reading span { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.search-results p { margin-block: var(--space-1) var(--space-3); color: var(--color-fg-muted); }
.course-map li { display: grid; gap: var(--space-1); }
.course-map li span { font-size: .85rem; color: var(--color-fg-muted); }
@media (max-width: 700px) { .week-orientation nav ol { columns: 1; } .chapter-nav { flex-direction: column; } }