/**
 * AITOPIA Academy: course list, lesson detail, and the video modal the
 * Studio reuses for its quick peek.
 *
 * Every colour here is a design token (`hsl(var(--x))`) or a token with an
 * opacity multiplier. The Figma is dark-only; routing through the tokens is
 * what makes light mode work without a second design. No hex literals.
 *
 * The `public/` pages load a PRECOMPILED tailwind.css, so an arbitrary-value
 * utility that isn't already in that file resolves to nothing silently. That is
 * why the Academy's geometry lives here as plain CSS rather than in class
 * attributes.
 */

/* Content column. Figma is a 1280 frame with 96px gutters → 1088 of content;
   1136 - 2x24 padding reproduces that on a wide viewport and degrades to a
   24px gutter on a phone. */
.acad-shell,
.acad-modal {
  /* The scale has no "full" radius token; name it once instead of repeating a
     magic number at every pill. */
  --acad-pill: 9999px;
}
.acad-shell {
  width: 100%;
  max-width: 1136px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Figma draws every Academy hairline #232024. Dark only, since the light theme
   keeps the shared token. The HSL triple is that hex in the token's form. */
.dark .acad-appbar, .dark .acad-shell, .dark .acad-modal,
.dark .ab-studio-coach, .dark .ab-tips-pop { --border: 285 5.9% 13.3%; }

/* ---- Shared sub-header (identical on both screens) ---- */
.acad-appbar {
  border-block: 1px solid hsl(var(--border));
}
.acad-appbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 59px;
}
.acad-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-left: -0.35rem;
  border: none;
  border-radius: var(--acad-pill);
  background: transparent;
  color: hsl(var(--foreground));
  transition: background-color 0.15s ease;
}
.acad-back:hover { background: hsl(var(--foreground) / 0.08); }
.acad-appbar h1 {
  margin: 0;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Focus ring (U6): one visible treatment for every interactive part.
   No `border-radius` here: it would square off the pills it lands on, and the
   outline already follows each element's own corners. ---- */
.acad-shell :focus-visible,
.acad-modal :focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* ---- Course list ---- */
.acad-intro {
  padding-block: 2.5rem 1rem;
}
.acad-subtitle {
  margin: 0;
  max-width: 1031px;
  font-size: var(--text-base);
  line-height: 28px;
  color: hsl(var(--muted-foreground));
}

/* Resume banner (U3), only rendered once progress exists. */
.acad-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 0.85rem 1.15rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-2xl);
  background: hsl(var(--card));
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.acad-resume strong { color: hsl(var(--foreground)); font-weight: 600; }
.acad-resume a { color: hsl(var(--primary)); font-weight: 600; text-decoration: none; }
.acad-resume a:hover { text-decoration: underline; }

.acad-rows {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  padding-block: 2.5rem 4rem;
  list-style: none;
  margin: 0;
}
.acad-row {
  display: grid;
  grid-template-columns: minmax(0, 414fr) minmax(0, 642fr);
  gap: 2rem;
  align-items: start;
}
.acad-row-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 414 / 241;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.acad-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A course with no video anywhere has no image: its title carries the card. */
.acad-row-media.is-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  background: linear-gradient(135deg, hsl(var(--primary) / 0.18), hsl(var(--card)));
}
/* U9: rows navigate, so they must answer the pointer. */
.acad-row:hover .acad-row-media { border-color: hsl(var(--primary) / 0.4); transform: translateY(-2px); }
.acad-row-title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}
.acad-row-title a { color: inherit; text-decoration: none; }
.acad-row-title a:hover { text-decoration: underline; }
.acad-row-desc {
  margin: 0.65rem 0 0;
  max-width: 617px;
  font-size: var(--text-base);
  line-height: 24px;
  color: hsl(var(--muted-foreground));
}
/* U4: duration and completion, so the row states its cost up front. */
.acad-row-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}
.acad-row-meta .acad-done { display: inline-flex; align-items: center; gap: 0.3rem; color: hsl(var(--primary)); font-weight: 500; }
.acad-row-meta .acad-sep { opacity: 0.5; }

.acad-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 44px;
  margin-top: 1.5rem;
  padding-inline: 1.25rem;
  border: none;
  border-radius: var(--radius-2xl);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.acad-cta:hover { opacity: 0.9; }
.acad-cta:active { opacity: 0.82; }

/* ---- Empty / error / skeleton (U7) ---- */
.acad-note {
  margin-block: 2.5rem 4rem;
  padding: 2rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-3xl);
  background: hsl(var(--card));
  text-align: center;
}
.acad-note h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: hsl(var(--foreground)); }
.acad-note p { margin: 0.5rem 0 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
/* Secondary button: the retry in a note or player error, Replay on the end card. */
.acad-note button,
.acad-player-error button,
.acad-endcard-actions button {
  height: 36px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  background: transparent;
  color: hsl(var(--foreground));
  font-size: var(--text-sm);
  font-weight: 600;
}
.acad-note button { margin-top: 1.25rem; padding-inline: 1rem; }
.acad-note button:hover { background: hsl(var(--foreground) / 0.06); }

.acad-skel { background: hsl(var(--card)); border-radius: var(--radius-lg); }
.acad-skel-media { aspect-ratio: 414 / 241; border-radius: var(--radius-3xl); }
.acad-skel-line { height: 1rem; }
.acad-pulse { animation: acad-pulse 1.6s ease-in-out infinite; }
@keyframes acad-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- Player (lesson detail + modal share this) ---- */
.acad-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: hsl(var(--card));
}
.acad-player video,
.acad-player > .acad-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: hsl(var(--card));
}
/* Video.js v10 (HLS lessons): the packaged skin takes the page's tokens; its
   container is the sized box, the player element itself is display: contents. */
.acad-player video-skin {
  --media-accent-color: hsl(var(--primary));
  --media-border-radius: 0;
  --media-object-fit: contain;
  width: 100%;
  height: 100%;
}
/* Cues of the native fallback player. An HLS lesson's video lives inside the
   Video.js element's shadow tree, where the browser default (white on
   translucent black) applies. */
.acad-player video::cue {
  color: hsl(var(--background));
  background-color: hsl(var(--foreground) / 0.8);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
/* The badge, the error panel and the end card sit above the Video.js skin: its
   container is an isolated stacking context, and a later sibling at z-index
   auto loses hit-testing to the skin's own dialogs and controls. */
.acad-player > .acad-play,
.acad-player > .acad-player-error,
.acad-player > .acad-endcard { z-index: 1; }
/* Poster + centred badge until activation, then native controls take over,
   never both at once. */
.acad-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: hsl(var(--foreground));
}
.acad-play[hidden] { display: none; }
.acad-play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--acad-pill);
  background: hsl(var(--background) / 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.acad-play:hover span { transform: scale(1.06); background: hsl(var(--background) / 0.9); }
.acad-play:active span { transform: scale(0.98); }

/* Inline player error. Keeps the write-up readable below it. */
.acad-player-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  background: hsl(var(--card));
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.acad-player-error[hidden] { display: none; }
.acad-player-error button { height: 34px; padding-inline: 0.9rem; }

/* U5, the "Next:" card over the final frame, at the moment attention peaks. */
.acad-endcard {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: hsl(var(--background) / 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.acad-endcard[hidden] { display: none; }
.acad-endcard-inner {
  max-width: 320px;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-2xl);
  background: hsl(var(--card));
  text-align: center;
}
.acad-endcard-eyebrow { font-size: var(--text-xs); font-weight: 500; color: hsl(var(--muted-foreground)); }
.acad-endcard-title { margin: 0.35rem 0 0; font-size: var(--text-base); font-weight: 600; color: hsl(var(--foreground)); }
.acad-endcard-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.acad-endcard-actions .acad-next { margin: 0; }
.acad-endcard-actions button { padding-inline: 0.85rem; }

/* ---- Lesson detail layout ---- */
.acad-detail {
  display: grid;
  grid-template-columns: minmax(0, 707fr) 355px;
  gap: 13px;
  align-items: start;
  padding-top: 1.5rem;
}
/* The player's column dissolves into the grid: the player and the rail share
   the first row, and the title, divider and write-up run under both. */
.acad-detail > div { display: contents; }
.acad-rail { grid-column: 2; grid-row: 1; }
.acad-titlerow, .acad-divider, .acad-body { grid-column: 1 / -1; }
/* A lesson with no video has no player to share the first row with: its title,
   divider and notes take the first column and the rail runs down the second
   beside them. The column still dissolves, so the narrow-screen order below
   (title, rail, divider, notes) holds for it too. */
.acad-detail.is-notes .acad-titlerow, .acad-detail.is-notes .acad-divider, .acad-detail.is-notes .acad-body { grid-column: 1; }
.acad-detail.is-notes .acad-rail { grid-row: 1 / span 3; }
/* Rail. Hugs its content, since a fixed 390px panel around two rows is mostly
   empty. */
.acad-rail {
  padding: 1rem;
  border-radius: var(--radius-3xl);
  background: hsl(var(--card));
}
.acad-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--text-sm);
}
.acad-rail-head .acad-rail-current { font-weight: 500; color: hsl(var(--foreground)); }
.acad-rail-head .acad-rail-total { color: hsl(var(--muted-foreground)); }
.acad-progress {
  height: 2px;
  margin-top: 0.85rem;
  border-radius: var(--acad-pill);
  background: hsl(var(--border));
  overflow: hidden;
}
.acad-progress i {
  display: block;
  height: 100%;
  border-radius: var(--acad-pill);
  background: hsl(var(--foreground) / 0.85);
  transition: width 0.25s ease;
}
.acad-rail-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.acad-rail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.6rem 0.4rem;
  margin-inline: -0.4rem;
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.acad-rail-row:hover { background: hsl(var(--foreground) / 0.04); }
.acad-rail-row:active { background: hsl(var(--foreground) / 0.07); }
.acad-rail-thumb {
  width: 92px;
  aspect-ratio: 92 / 60;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: hsl(var(--background));
}
.acad-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acad-rail-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  line-height: 18px;
  /* Full opacity, not a dimmed derive: 0.8 alpha measures 3.25:1 on card in
     light mode, below WCAG AA. */
  color: hsl(var(--muted-foreground));
}
.acad-rail-row[aria-current] .acad-rail-eyebrow { color: hsl(var(--primary)); font-weight: 500; }
.acad-rail-status {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}
/* Two distinct states: the ring marks the CURRENT lesson, the check marks a
   COMPLETED one. Colour alone never carries the state (U10). */
.acad-rail-row[aria-current] .acad-rail-status,
.acad-rail-row.is-done .acad-rail-status { color: hsl(var(--primary)); }
.acad-rail-name {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-sm);
  line-height: 20px;
  color: hsl(var(--foreground));
}

.acad-titlerow {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.acad-lesson-title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}
/* Figma paints this white-on-black. Expressed as foreground/background so it
   inverts correctly in light mode instead of vanishing. */
.acad-next {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding-inline: 0.9rem;
  border: none;
  border-radius: var(--radius-xl);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.acad-next:hover { opacity: 0.88; }
.acad-divider {
  height: 1px;
  margin-top: 1.5rem;
  background: hsl(var(--border));
  border: none;
}
/* The write-up ends on the step to what comes next. Inside the write-up the
   notes' link rule (`.acad-body a`) outranks the pill, so its own colour and
   underline are restated here. */
.acad-body .acad-next { margin-top: 1rem; color: hsl(var(--background)); text-decoration: none; }

/* ---- Lesson write-up. `prose` does not exist in the compiled sheet. ---- */
.acad-body {
  padding-block: 2.5rem 4rem;
  max-width: 990px;
  font-size: var(--text-base);
  line-height: 28px;
  color: hsl(var(--muted-foreground));
}
.acad-body h2 {
  margin: 2rem 0 0.75rem;
  font-size: var(--text-2xl);
  line-height: 32px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.acad-body h2:first-child { margin-top: 0; }
.acad-body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: var(--text-lg);
  line-height: 28px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.acad-body p { margin: 0 0 1rem; }
.acad-body ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.acad-body ol { margin: 0 0 1rem; padding-left: 1.25rem; list-style: decimal; }
.acad-body li { margin-bottom: 0.35rem; }
/* A blank line between items makes CommonMark wrap each in a paragraph; keep them list-tight, not prose-spaced. */
.acad-body li > p { margin-bottom: 0.35rem; }
.acad-body strong { color: hsl(var(--foreground)); font-weight: 600; }
.acad-body em { font-style: italic; }
.acad-body code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  font-size: 0.9em;
}
.acad-body a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.acad-body h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: var(--text-base);
  line-height: 26px;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.acad-body ul ul, .acad-body ol ol, .acad-body ul ol, .acad-body ol ul { margin: 0.35rem 0 0; }
.acad-body blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid hsl(var(--border));
}
.acad-body blockquote p:last-child { margin-bottom: 0; }
.acad-body hr { margin: 1.5rem 0; border: 0; border-top: 1px solid hsl(var(--border)); }
.acad-body pre {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: hsl(var(--muted));
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.5;
}
.acad-body pre code { padding: 0; background: none; font-size: inherit; }
.acad-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.25rem 0 1rem;
  border-radius: 12px;
}
.acad-body-status {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--acad-pill);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

/* ---- Video modal (Studio quick peek) ---- */
.acad-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  --acad-modal-pad: 1.5rem;
  --acad-modal-chrome: 112px;   /* head 60 + foot 49, measured */
  padding: var(--acad-modal-pad);
  background: hsl(var(--background) / 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.acad-modal[hidden] { display: none; }
.acad-modal-card {
  position: relative;
  width: 100%;
  /* Larger than the Figma's 960, but never taller than the window: the second
     term is the widest a 16:9 player plus chrome can be and still fit. */
  max-width: min(1120px, calc((100dvh - (var(--acad-modal-pad) * 2) - var(--acad-modal-chrome)) * 16 / 9));
  border-radius: var(--radius-3xl);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  overflow: hidden;
}
/* Notes in place of the player: a reading column that scrolls under a fixed
   head and foot, so Close and "Open the full lesson" never scroll away. */
.acad-modal-card.is-notes {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  max-height: calc(100dvh - var(--acad-modal-pad) * 2);
}
.acad-modal-body {
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1.5rem;
  overflow: auto;
}
.acad-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
}
.acad-modal-head h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: hsl(var(--foreground));
}
.acad-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--acad-pill);
  background: transparent;
  color: hsl(var(--muted-foreground));
}
.acad-modal-close:hover { background: hsl(var(--foreground) / 0.08); color: hsl(var(--foreground)); }
.acad-modal-card .acad-player { border: none; border-radius: 0; }
.acad-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid hsl(var(--border));
}
.acad-modal-foot a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
}
.acad-modal-foot a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 63.9375rem) {
  /* One column: the rail slots in right under the player, ahead of the
     title and write-up. */
  .acad-detail { grid-template-columns: minmax(0, 1fr); }
  .acad-rail { grid-column: 1; grid-row: 2; }
  .acad-detail.is-notes .acad-rail { grid-row: 2; }
  /* The rail now spans the column; rows fill it two abreast rather than
     stacking down the left with the rest empty. Phones fall back to one. */
  .acad-rail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 1rem; }
  /* 24px over a narrowed column wrapped the title to three lines. */
  .acad-row-title { font-size: var(--text-xl); line-height: 1.4; }
  .acad-rows { gap: 3rem; }
}
@media (max-width: 47.9375rem) {
  /* Reclaim the scrim margin on a phone: 1.5rem a side is a lot of a 390px screen. */
  .acad-modal { --acad-modal-pad: 1rem; }
  /* 16px gutter, where the builder's composer sits on the same screens. */
  .acad-shell { padding-inline: 1rem; }
  /* The course title may take two lines before it truncates; the bar has the room. */
  .acad-appbar h1 {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    line-height: 1.3; padding-block: 0.4rem;
  }
  /* A 44px thumb target around the same 12px glyph; the margin and gap shrink
     by the same amount the button grew, so the glyph and the title stay put. */
  .acad-appbar-inner { gap: 0.25rem; }
  .acad-back { width: 44px; height: 44px; margin-left: -0.85rem; }

  /* Course list: one card per course, a thumb wide, with a full-width button. */
  .acad-intro { padding-block: 1.25rem 0.25rem; }
  .acad-subtitle { font-size: var(--text-sm); line-height: 22px; }
  /* Continue was a 61x21 text link at the foot of the card. Stack the banner
     and give it the secondary button's full-width, 44px form. */
  .acad-resume { flex-direction: column; align-items: stretch; margin-top: 1rem; padding: 0.75rem 1rem; gap: 0.75rem; }
  .acad-resume a {
    display: flex; align-items: center; justify-content: center; height: 44px;
    border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl);
  }
  .acad-resume a:hover { text-decoration: none; background: hsl(var(--foreground) / 0.06); }
  .acad-rows { gap: 2rem; padding-block: 1.25rem 3rem; }
  .acad-row { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .acad-row-media { border-radius: var(--radius-2xl); }
  .acad-row-title { font-size: var(--text-lg); line-height: 1.3; }
  .acad-row-desc { margin-top: 0.5rem; font-size: var(--text-sm); line-height: 22px; }
  .acad-row-meta { margin-top: 0.6rem; }
  .acad-cta { width: 100%; margin-top: 1rem; }

  /* Lesson: watch, then the outline, then the write-up, then what is next.
     The rail drops below the title row so the lesson title is not read three
     times (app bar, rail, title) before the page settles. */
  .acad-detail { padding-top: 1rem; gap: 0; }
  .acad-player { border-radius: var(--radius-2xl); }
  /* At 320px the player is 158px tall and the end card overflowed it by 8px
     with "Next Course" split across two lines. Tighter padding, whole buttons
     wrap as a unit, and auto margins centre the card when it fits and let the
     overlay scroll from the top when it does not (`safe center` dies in Safari). */
  .acad-endcard { padding: 0.75rem; overflow-y: auto; }
  .acad-endcard-inner { width: 100%; max-width: 360px; margin: auto; padding: 0.85rem 1rem; }
  .acad-endcard-title { font-size: var(--text-sm); line-height: 20px; }
  .acad-endcard-actions { flex-wrap: wrap; margin-top: 0.75rem; }
  .acad-endcard-actions button, .acad-endcard-actions .acad-next { white-space: nowrap; }
  .acad-titlerow { order: 1; margin-top: 1rem; }
  .acad-lesson-title { font-size: var(--text-xl); line-height: 26px; }
  .acad-rail { grid-row: auto; order: 2; margin-top: 1rem; padding: 0.85rem; border-radius: var(--radius-2xl); }
  .acad-detail.is-notes .acad-rail { grid-row: auto; }
  .acad-rail-list { margin-top: 0.35rem; }
  .acad-rail-row { grid-template-columns: 72px minmax(0, 1fr); padding-block: 0.5rem; }
  .acad-rail-thumb { width: 72px; }
  .acad-divider { order: 3; margin-top: 1rem; }
  .acad-body { order: 4; padding-block: 1rem 3rem; line-height: 26px; }
  .acad-body .acad-next { width: 100%; height: 44px; justify-content: center; }
}

/* Below this the player is 158px tall and "Replay" + "Open the Studio" no
   longer share a row, which pushed the end card past the player's bottom. */
@media (max-width: 22.5rem) {
  .acad-endcard { padding: 0.5rem; }
  .acad-endcard-inner { padding: 0.65rem 0.75rem; }
  .acad-endcard-actions { gap: 0.4rem; }
  .acad-endcard-actions button, .acad-endcard-actions .acad-next { padding-inline: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acad-pulse { animation: none; }
  .acad-row:hover .acad-row-media,
  .acad-play:hover span { transform: none; }
  .acad-progress i { transition: none; }
}