/* Program recommender — COMPONENTS.md §7.62. A stepped strip: the bar (steps, Start over), one question at a time, then the recommendation; Back and Next beneath. */
@layer components {
  .mp-program-finder { min-inline-size: 0; scroll-margin-block-start: var(--mp-space-3xl); }
  .mp-program-finder__strip { display: grid; gap: var(--mp-space-l); min-inline-size: 0; padding: var(--mp-space-l); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-lg); background: var(--mp-color-surface); }
  .mp-program-finder__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-s) var(--mp-space-l); padding-block-end: var(--mp-space-s); border-block-end: var(--mp-border) solid var(--mp-color-line); }
  .mp-program-finder__steps { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs) var(--mp-space-m); list-style: none; margin: 0; padding: 0; }
  .mp-program-finder__step-btn { display: inline-flex; align-items: center; gap: var(--mp-space-2xs); min-block-size: var(--mp-tap); padding: 0; border: 0; background: none; color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui); cursor: pointer; }
  .mp-program-finder__step-btn:disabled { cursor: default; opacity: .55; }
  .mp-program-finder__step-btn:focus-visible { outline: calc(var(--mp-border) * 2) solid var(--mp-color-focus); outline-offset: var(--mp-space-3xs); border-radius: var(--mp-radius-xs); }
  .mp-program-finder__step-n { display: inline-grid; place-items: center; inline-size: 1.8em; block-size: 1.8em; border: var(--mp-border) solid var(--mp-color-line-strong); border-radius: var(--mp-radius-pill); font-size: var(--mp-fs-xs); transition: background-color var(--mp-dur-fast) var(--mp-ease-out), border-color var(--mp-dur-fast) var(--mp-ease-out); }
  .mp-program-finder__step[aria-current="step"] .mp-program-finder__step-btn { color: var(--mp-color-text); }
  .mp-program-finder__step[aria-current="step"] .mp-program-finder__step-n { background: var(--mp-color-inverse); border-color: var(--mp-color-inverse); color: var(--mp-color-on-inverse); }
  .mp-program-finder__step.is-done .mp-program-finder__step-n { background: var(--mp-color-accent); border-color: var(--mp-color-accent); color: var(--mp-color-on-action); }
  .mp-program-finder__reset { min-block-size: var(--mp-tap); padding: 0; background: transparent; border: 0; color: var(--mp-color-text-2); font: inherit; font-size: var(--mp-fs-sm); text-decoration: underline; text-underline-offset: var(--mp-space-3xs); cursor: pointer; }
  .mp-program-finder__question { display: grid; gap: var(--mp-space-m); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .mp-program-finder__legend { float: inline-start; inline-size: 100%; margin-block-end: var(--mp-space-m); padding: 0; color: var(--mp-color-text); font: var(--mp-weight-display) var(--mp-fs-display-s) / var(--mp-lh-tight) var(--mp-font-display); text-transform: uppercase; }
  .mp-program-finder__legend:focus { outline: none; }
  .mp-program-finder__count { display: block; margin-block-end: var(--mp-space-2xs); color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); }
  .mp-program-finder__choices { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs); }
  .mp-program-finder__choice { position: relative; display: flex; cursor: pointer; }
  .mp-program-finder__input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
  .mp-program-finder__label { display: flex; align-items: center; min-block-size: var(--mp-tap); padding: var(--mp-space-xs) var(--mp-space-m); border: var(--mp-border) solid var(--mp-color-line-strong); border-radius: var(--mp-radius-pill); color: var(--mp-color-text); background: var(--mp-color-surface); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); line-height: var(--mp-lh-snug); transition: background-color var(--mp-dur-fast) var(--mp-ease-out), border-color var(--mp-dur-fast) var(--mp-ease-out); }
  .mp-program-finder__input:hover + .mp-program-finder__label { border-color: var(--mp-color-accent-text); }
  .mp-program-finder__input:checked + .mp-program-finder__label { background: var(--mp-color-inverse); color: var(--mp-color-on-inverse); border-color: var(--mp-color-inverse); }
  .mp-program-finder__input:focus-visible + .mp-program-finder__label { outline: calc(var(--mp-border) * 2) solid var(--mp-color-focus); outline-offset: var(--mp-space-3xs); }
  .mp-program-finder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-xs) var(--mp-space-s); }
  .mp-program-finder__actions .mp-btn[hidden] { display: none; }
  .mp-program-finder__result { min-inline-size: 0; padding: var(--mp-space-l); border-radius: var(--mp-radius-md); }
  .mp-program-finder__result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-xs) var(--mp-space-m); margin-block-end: var(--mp-space-m); }
  .mp-program-finder__result .mp-eyebrow { margin: 0; }
  .mp-program-finder__answers { display: flex; flex-wrap: wrap; gap: var(--mp-space-2xs); list-style: none; margin: 0; padding: 0; }
  .mp-program-finder__answer { min-block-size: var(--mp-h-chip); padding: 0 var(--mp-space-xs); border: var(--mp-border) solid color-mix(in srgb, var(--mp-color-text) 30%, transparent); border-radius: var(--mp-radius-pill); background: transparent; color: var(--mp-color-text); font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui); cursor: pointer; }
  .mp-program-finder__answer:hover { border-color: var(--mp-color-accent); color: var(--mp-color-accent); }
  .mp-program-finder__title { margin: 0; font-size: var(--mp-fs-display-m); scroll-margin-block-start: var(--mp-space-3xl); }
  .mp-program-finder__title:focus:not(:focus-visible) { outline: none; }
  .mp-program-finder__text { margin-block: var(--mp-space-s) 0; color: var(--mp-color-text-2); }
  .mp-program-finder__note { margin-block: var(--mp-space-s) 0; padding-inline-start: var(--mp-space-s); border-inline-start: var(--mp-border) solid var(--mp-color-accent); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-program-finder__dates, .mp-program-finder__next, .mp-program-finder__alternative { margin-block-start: var(--mp-space-m); padding-block-start: var(--mp-space-m); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-program-finder__date-label { margin: 0; font-weight: var(--mp-weight-ui); }
  .mp-program-finder__date-list { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs); list-style: none; margin: var(--mp-space-xs) 0 0; padding: 0; }
  .mp-program-finder__date { margin: 0; padding: var(--mp-space-2xs) var(--mp-space-xs); border-radius: var(--mp-radius-sm); background: var(--mp-color-surface-2); color: var(--mp-color-text); font-size: var(--mp-fs-xs); }
  .mp-program-finder__aside { margin-block: var(--mp-space-s) 0; color: var(--mp-color-text-2); font-size: var(--mp-fs-xs); }
  .mp-program-finder__primary { margin-block: var(--mp-space-m) 0; }
  .mp-program-finder__next-title { margin: 0; color: var(--mp-color-accent-text); font-size: var(--mp-fs-display-2xs); }
  .mp-program-finder__next .mp-program-finder__text { font-size: var(--mp-fs-sm); }
  .mp-program-finder__alternative-toggle { min-block-size: var(--mp-tap); color: var(--mp-color-text); cursor: pointer; }
  .mp-program-finder__alternative-toggle::marker { color: var(--mp-color-accent-text); }
  .mp-program-finder__alternative .mp-program-finder__text { font-size: var(--mp-fs-sm); }
  .mp-program-finder__link { display: inline-flex; align-items: center; min-block-size: var(--mp-tap); margin-inline-end: var(--mp-space-m); color: var(--mp-color-accent-text); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); }
  @media (width >= 64rem) {
    .mp-program-finder__question { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
    .mp-program-finder__legend { float: none; inline-size: auto; margin: 0; }
    .mp-program-finder__result { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--mp-space-xl); }
    .mp-program-finder__result-head { display: grid; align-content: start; margin: 0; }
  }
}