@import "https://assets.elements.dev/assets/app/shared/styles/page.98db1d1b345dbefc.css";
/* Pull in .post-meta byline + dropdown chrome from the canonical
   post-detail stylesheet. The course outline reuses the same
   single-row meta block (lesson count + duration on the left,
   owner-only Edit kebab on the right). */
@import "https://assets.elements.dev/assets/app/pages/posts/show/style.c23616ff7fb4d275.css";
/* Kebab chrome (.action-menu / .action-menu-wrap / .action-menu-panel)
   — courses/show doesn't render an <ActionRow> but reuses the same
   kebab classes for the owner-only Edit menu, so we need the styles
   even though the template isn't on the page. */
@import "https://assets.elements.dev/assets/app/shared/templates/action-row/style.cbdd9afd4407833a.css";

.courses-show-page { background: var(--bg); color: var(--ink); }

/* Two-row meta: identity ("by chris") on top, counts
   ("4 lessons · 15:51 · ⋯") below. .post-meta inherits flex+gap
   from posts/show, so override to column stacking. The owner kebab
   sits INLINE at the end of the counts row — not pinned to the
   page's right edge — so the meta + menu read as one strip. */
.courses-show-meta {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
}
.courses-show-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.courses-show-meta-row--counts {
  font-size: 0.8125rem;
  color: var(--ink-dim);
}

/* Action row — vote chip + kebab. align-items:center so the kebab
   and the taller vote chip (which has padding for the count pill)
   share a visual center, not a text baseline. Tiny top gap so the
   action row reads as a follow-up to the meta line above. */
.courses-show-actions-row {
  align-items: center;
  margin-top: 0.125rem;
}
.courses-show-actions-row .action-menu-wrap {
  display: inline-flex;
  align-items: center;
}
.courses-show-actions-row .action-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Course outline is a DISCOVERY surface, not prose. Same
   marketing-shell width + padding ladder as .feed-page-shell /
   .courses-index-shell so /learn → /learn/:id reads as one column.
   Lesson pages narrow inside because they're reading mode — that
   transition is deliberate, not jarring. */
.courses-show-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8) 4rem;
}
@media (max-width: 700px) { .courses-show-shell { padding: 0 var(--space-5) 4rem; } }
@media (max-width: 640px) { .courses-show-shell { padding: 0 var(--space-4) 4rem; } }
/* Tighter inset for content-reader pages on phones. */
@media (max-width: 480px) { .courses-show-shell { padding: 0 var(--space-3) 4rem; } }

/* ─── Header ────────────────────────────────────────────────────── */

.courses-show-head { margin-bottom: 1.75rem; }

/* Byline mirrors `.courses-lesson-byline` — same flex/center/gap so the
   parent up-link + meta share one rhythm with the lesson page. The
   <ParentIcon/> + accent-coloured link come from the shared
   `.nav-parent-link` rules in app/shared/templates/nav-icons. */
/* Parent link wrapper above the title — small bottom margin so the
   title sits close enough that the link reads as "from <parent>". */
.courses-show-back {
  margin: 0 0 0.625rem;
}

/* Healthy gap above the .post-meta byline so it doesn't crowd the
   description (or title when there's no description). */
.courses-show-head .post-meta { margin-top: 1.25rem; }

/* Content-show title — smaller than the top-level page h1 so the
   title anchors the page without dominating the content. Matches
   .post-title / .courses-lesson-title. */
.courses-show-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2rem 0 var(--space-4);
}
@media (max-width: 640px) {
  .courses-show-title { margin-top: 1.5rem; }
}

.courses-show-desc {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
}

/* ─── Lesson list ──────────────────────────────────────────────── */

.courses-show-list {
  list-style: none;
  /* No section label / progress strip above — the list IS the page
     body. Top margin gives breathing room from the course header
     directly above without inventing a separator. */
  margin: 1.75rem 0 0;
  padding: 0;
}
.courses-show-row {
  margin: 0;
  position: relative;
}
.courses-show-row-link {
  display: grid;
  /* Number column auto-sizes to its content (no fixed 28px slot
     burning horizontal real estate on mobile). Title body flushes
     left with the page padding so the TOC reads as left-aligned —
     the number sits as a small marker, not a column. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.625rem;
  /* Top-align so the number sits on the same baseline as the title's
     first line — matches the /learn courses list rhythm. */
  align-items: start;
  padding: 0.875rem 0.75rem;
  text-decoration: none;
  color: var(--ink);
  border-left: 3px solid transparent;
  margin: 0 -0.75rem;
  transition: border-color 100ms, background 100ms;
}
/* Hover, .is-focused (keyboard cursor on the existing course-outline
   handler), and .is-selected (keyboard cursor when initFeedNav drives
   the page) all share the same bg-soft fill, matching .feed-row and
   .hnitem on /feed and /learn. Title goes accent-deep when either
   keyboard-cursor class is set. */
.courses-show-row-link:hover,
.courses-show-row.is-focused .courses-show-row-link,
.courses-show-row.is-selected .courses-show-row-link {
  background: var(--bg-soft);
}
.courses-show-row.is-focused .courses-show-row-title,
.courses-show-row.is-selected .courses-show-row-title {
  color: var(--accent-deep);
}

/* When keyboard nav has taken over, suppress :hover so the row
   under the mouse cursor doesn't stay lit alongside the
   keyboard-selected row. body.is-keyboard-mode is set by
   feed-nav and cleared on the next mousemove. */
body.is-keyboard-mode .courses-show-row-link:hover {
  background: transparent;
}

.courses-show-row-num {
  /* Match .feed-num exactly so course outline numbers read with the
     same weight/color/size as the rank column on /feed. */
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  color: var(--ink-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.courses-show-row.is-focused .courses-show-row-num {
  color: var(--accent-deep);
  font-weight: var(--weight-medium);
}

.courses-show-row-body { min-width: 0; }
.courses-show-row-title {
  font-family: var(--font-sans);
  /* Medium weight to match .feed-title + .hntitle (the canonical
     list-row title weight across feed, /learn/courses, and
     /learn/guides). The earlier comment claimed "regular to match
     feed-title" but feed-title was already medium — that comment
     was wrong, leaving this surface lighter than every other
     list page. */
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.courses-show-row-sub {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courses-show-row-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.courses-show-row-dur {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}
.courses-show-row.is-focused .courses-show-row-dur {
  color: var(--accent-deep);
}
.courses-show-empty {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-dim);
  text-align: center;
  padding: 3rem 1rem;
}

/* Progress strip CSS removed — the N/M complete bar pulled the
   eye away from the actual lesson list and read as ceremony.
   Per-row ✓ check below still surfaces what's been viewed. */

/* Per-row "Viewed" check. Sits in the same .courses-show-row-right
   cluster as duration + format chip; muted green ✓. */
.courses-show-row-viewed {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--success);
  font-weight: var(--weight-medium);
}
/* No de-emphasis on viewed-lesson titles — gray reads as disabled
   and these links are still fully clickable + the user wants them to
   stay visually first-class even after they've watched. The green ✓
   to the right is the existing "viewed" signal; that's enough. */