/* ==========================================================================
   LEECOI — Track detail (/courses/<slug>/)
   ==========================================================================

   The densest pages on the site: 8 modules, each with a skills list, a named
   methods set, a project and its deliverables. The job here is to keep that
   readable rather than to decorate it.

   Page hero, breadcrumbs and the closing band come from components.css.
   ========================================================================== */

/* ==========================================================================
   PREREQUISITES
   --------------------------------------------------------------------------
   Heading beside the list on wide screens, stacked below it on narrow. The
   list is short, so a full-width heading above four items wastes the row.
   ========================================================================== */

.track-split {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56rem) {
  .track-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  /* The section heading inside a split has no bottom margin: the grid gap is
     already doing that job, and both together double it. */
  .track-split .section-head {
    margin-block-end: 0;
  }
}

.prereqs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  padding-inline-start: var(--space-lg);
  list-style: disc outside;
  color: var(--muted);
  line-height: 1.65;
}

/* ==========================================================================
   PHASE ROADMAP
   --------------------------------------------------------------------------
   A real <table>: three columns of genuinely tabular data with a header row.
   A grid of divs would look identical and tell a screen reader nothing about
   which phase a checkpoint belongs to.
   ========================================================================== */

/* Tables are the classic source of horizontal overflow on phones. Scrolling the
   table inside its own container keeps the page itself from scrolling
   sideways. `tabindex` makes the scroll container keyboard-reachable, which it
   must be if it can scroll. */
.roadmap-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

.roadmap {
  min-inline-size: 40rem;
  border-collapse: collapse;
  text-align: left;
}

.roadmap thead th {
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--line);
  background-color: var(--bg-sunk);

  font-family: var(--font-mono);
  font-size: var(--step-micro);
  line-height: var(--step-micro-lh);
  letter-spacing: var(--step-micro-ls);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.roadmap tbody tr + tr {
  border-block-start: 1px solid var(--line);
}

.roadmap td,
.roadmap tbody th {
  padding: var(--space-md) var(--space-lg);
  vertical-align: top;
  font-size: var(--step-small);
  line-height: 1.6;
}

.roadmap tbody th {
  font-weight: var(--weight-normal);
  white-space: nowrap;
}

.roadmap td {
  color: var(--muted);
}

.roadmap__week {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* An index is justified here: phases are a sequence, and the number is the
   thing a learner uses to say where they are. */
.roadmap__index {
  font-size: var(--step-micro);
  letter-spacing: var(--step-micro-ls);
  color: var(--accent-strong);
}

.roadmap__checkpoint {
  color: var(--ink);
}

/* ==========================================================================
   MODULES
   ========================================================================== */

.modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.module {
  display: grid;
  gap: var(--space-lg);

  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

/* Grid and flex children default to `min-width: auto`, meaning they refuse to
   shrink below their min-content width. One long unbreakable string anywhere
   inside then widens the column, the section, and eventually the document.
   Explicit zero lets the track shrink and the text wrap instead. */
.module > *,
.module__body > * {
  min-inline-size: 0;
}

@media (min-width: 60rem) {
  /* Title column beside the body, so a reader scanning for a topic runs their
     eye down one edge rather than through the whole block. */
  .module {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

.module__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.module__index {
  font-size: var(--step-micro);
  letter-spacing: var(--step-micro-ls);
  color: var(--accent-strong);
}

.module__title {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
  text-wrap: balance;
}

/* ---- Body ---------------------------------------------------------------
   A definition list: each label genuinely defines the block beneath it. Using
   headings instead would put 32 extra entries into the document outline of a
   page with eight modules, which makes heading navigation useless. */
.module__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.module__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  line-height: var(--step-micro-lh);
  letter-spacing: var(--step-micro-ls);
  text-transform: uppercase;
  color: var(--muted);
}

/* dd carries a browser default indent that would step each block inward. */
.module__body dd {
  margin: 0;
}

.module__body dd + .module__label {
  margin-block-start: var(--space-md);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
}

.module__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  padding-inline-start: var(--space-lg);
  list-style: disc outside;
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--muted);
}

.module__list--marked > li::marker {
  color: var(--accent-strong);
}

.module__project {
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--ink);
}

/* Used where a module's methods entry is a note rather than a set of named
   techniques. Set as prose, because one chip is not a chip list. */
.module__note {
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
}

/* ==========================================================================
   CAPSTONES
   ========================================================================== */

.capstone {
  block-size: 100%;
}

.capstone__deliverables {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  margin-block-start: auto;
  padding-block-start: var(--space-md);
  padding-inline-start: var(--space-lg);
  border-block-start: 1px solid var(--line);

  list-style: disc outside;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--muted);
}

/* ==========================================================================
   UNWRITTEN TRACKS
   --------------------------------------------------------------------------
   The honest state. Deliberately plain: no shimmer, no skeleton rows, nothing
   that implies content is loading. Nothing is loading. It has not been written.
   ========================================================================== */

.pending-grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 48rem) {
  .pending-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
}