/* Programme Builder pages (pages/programme/builder/, 25 Sep 2026, HANDOFF 96).
   Extends the .steps stepper with three states and lays out the outline editor and the confirm table.
   Tokens and type come from styles.css. No new tokens. */

/* ── Stepper states. current and done reuse the is-active and is-done rules in components.css (extended there to match data-state). next, locked and error are new. ── */
.steps__dot[data-state="next"]    { border-color: var(--grey-200); color: var(--muted-foreground); }
.steps__dot[data-state="locked"]  { border-color: var(--grey-200); color: var(--grey-400); background: var(--muted); }
/* error: the step whose last AI run failed; shown with the failure notice until the trainer tries again. */
.steps__dot[data-state="error"]   { border-color: var(--destructive); color: var(--destructive); }
a.steps__dot                      { text-decoration: none; }
/* Phones: dots only, the current label stays. */
.steps--builder > span:not(.steps__dot):not(.steps__line) { display: none; }
.steps--builder > .steps__dot[data-state="current"] + span { display: inline; }
@media (min-width: 768px) {
  .steps--builder > span:not(.steps__dot):not(.steps__line) { display: inline; }
}

/* ── Page layout ── */
.builder            { padding-top: 3rem; padding-bottom: 6rem; }
.builder-cost       { font-size: var(--text-body-sm); color: var(--muted-foreground); margin-top: 0.5rem; }
.builder-counter    { font-size: var(--text-body-sm); color: var(--muted-foreground); }
.builder-actions    { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1.5rem; }
.outline-list       { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.outline-list input { width: 100%; }
.builder details > summary.btn-link { list-style: none; cursor: pointer; }
.builder details > summary.btn-link::-webkit-details-marker { display: none; }

/* ── Confirm mapping table ── */
/* Three short columns: no 36rem floor, so the whole table shows on a phone (the base .table scrolls). */
table.map-table     { min-width: 0; table-layout: fixed; }   /* table.table sets the floor; same specificity needed to beat it */
.map-table th       { text-align: left; font-weight: 600; }
@media (max-width: 639px) { .map-table th, .map-table td { padding-inline: 0.75rem; } }
.map-table td:first-child { width: 2rem; }
.map-table .is-empty { color: var(--muted-foreground); }