@layer components {
  /* The course page: a header (title + image), then tabs — overview (description),
     content (curriculum: chapters as bordered cards of lesson rows), and teacher. A lesson
     row links when open (preview, or any lesson to a manager) and renders locked otherwise. */

  /* One panel at a time (tabs_controller); an underline in the brand colour, so a site theme
     retints it through the brand token. */
  .course-nav { margin-block-start: var(--block-space-double); }

  /* The inactive panels ship with `hidden` so they don't flash before the controller connects.
     Without JS (no data-js on <html>) there's nothing to switch tabs, so reveal them all. */
  html:not([data-js]) .course-nav__panel[hidden] { display: block; }
  .course-nav__list {
    display: flex;
    gap: var(--block-space);
    margin-block-end: var(--block-space-double);
    border-block-end: var(--border);
  }
  .course-nav__tab {
    appearance: none;
    padding: 0;
    padding-block-end: var(--block-space-half);
    border: 0;
    background: none;
    position: relative;
    font: inherit;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--transition);
  }
  .course-nav__tab:hover { color: var(--color-text); }
  .course-nav__tab[aria-selected="true"] { color: var(--color-brand-strong); }
  .course-nav__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(-1 * var(--border-width));
    block-size: 2px;
    background: var(--color-brand);
  }
  .course-nav__tab:focus-visible {
    outline: var(--border-width) solid var(--color-brand);
    outline-offset: 3px;
    border-radius: var(--radius-small);
  }

  .course-teacher__role {
    margin-block-end: var(--inline-space-half);
    color: var(--color-muted);
    font-size: var(--text-small);
  }
  .course-teacher__name { font-size: var(--text-large); font-weight: 600; }

  .chapter { margin-block-end: var(--block-space-double); }
  .chapter__title {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space);
    margin-block-end: var(--inline-space-half);
  }
  /* A numbered chip leading each chapter heading. */
  .chapter__number {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.7em;
    block-size: 1.7em;
    font-size: var(--text-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-on-brand);
    background: var(--color-brand);
    border-radius: 50%;
  }
  .chapter__excerpt {
    margin-block-end: var(--block-space);
    color: var(--color-muted);
  }

  .lesson-list {
    list-style: none;
    margin-block: 0;
    padding: 0;
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .lesson-list__item + .lesson-list__item { border-block-start: var(--border); }

  .lesson-row {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);
    padding-inline: var(--block-space);
    color: var(--color-text);
  }
  a.lesson-row { transition: background var(--transition); }
  a.lesson-row:hover { background: var(--color-brand-tint); text-decoration: none; }
  .lesson-row--locked { color: var(--color-muted); }

  .lesson-row__icon {
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    color: var(--color-brand-strong);
  }
  .lesson-row--locked .lesson-row__icon { color: var(--color-ink-light); }

  .lesson-row__title {
    flex: 1 1 auto;
    min-inline-size: 0;
    text-wrap: balance;
  }

  .lesson-row__meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }
  .lesson-row__duration {
    color: var(--color-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }
  .lesson-row__flag {
    padding-block: 0.1em;
    padding-inline: var(--inline-space-half);
    font-size: var(--text-x-small);
    font-weight: 600;
    border-radius: var(--radius-small);
  }
  .lesson-row__flag--free {
    color: var(--color-clay);
    background: var(--color-clay-soft);
  }
  .lesson-row__flag--draft {
    color: oklch(var(--lch-ink-darkest));
    background: color-mix(in oklch, var(--color-caution) 30%, transparent);
  }
}