@crewlethq/ui 0.75.3 → 0.76.0

package/dist/styles.css

@@ -10103,7 +10103,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceButtons-3MJQAHHA.css */
+/* ChoiceButtons-T3GG6VLG.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
  * target, the recommended one first and filled with the accent.
@@ -10111,6 +10111,11 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * The plain option is the secondary button's recipe (the card's own ground
  * inside the strong hairline), and the recommended one the primary's, so the
  * pair reads as the screen's one primary action and its alternatives.
+ *
+ * AS TOGGLES (`chosen` given, so every option carries `aria-pressed`) the
+ * accent is the chosen option's alone: the recommended one is drawn plain with
+ * its mark kept, so an answer that went against the recommendation never shows
+ * the option NOT chosen as the loudest one on the screen.
  */
 
 .crewlet-choice-buttons {
@@ -10126,7 +10131,6 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--spacing-3);
   min-width: 0;
   min-height: var(--size-control-lg);
@@ -10171,13 +10175,21 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 /*
- * THE OPTION APPLIED is drawn as every chosen option in the package is: the
- * selected edge over the soft selected fill, calm beside the focus ring, and
- * held under the pointer so a hover never makes it look unchosen.
+ * THE OPTION APPLIED stands on the soft selected fill inside an edge in the
+ * accent's ink, with a check mark in the same ink, held under the pointer and
+ * the press so neither makes it look unchosen.
+ *
+ * The edge is the accent's INK, not the selected edge the package's other
+ * chosen options draw. That edge is a tint, as low as 1.65:1 against this fill
+ * (dark, on the raised rung), and here the edge is what tells a pressed toggle
+ * from the others, which WCAG 1.4.11 holds to 3:1. The ink clears 4.71:1 at
+ * its tightest (light, on the frame), and the check mark makes the state more
+ * than a colour.
  */
 .crewlet-choice-buttons__option.is-chosen,
-.crewlet-choice-buttons__option.is-chosen:hover {
-  border-color: var(--color-border-selected);
+.crewlet-choice-buttons__option.is-chosen:hover,
+.crewlet-choice-buttons__option.is-chosen:active {
+  border-color: var(--color-brand-accent-ink);
   background: var(--color-surface-selected);
 }
 
@@ -10199,7 +10211,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   cursor: progress;
 }
 
-.crewlet-choice-buttons__option--recommended {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]) {
   background: var(--color-brand-accent);
   border-color: transparent;
   color: var(--color-text-on-accent);
@@ -10212,12 +10224,12 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   --crewlet-inline-ref-mark-ink: currentColor;
 }
 
-.crewlet-choice-buttons__option--recommended:hover:not([aria-disabled='true']) {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):hover:not([aria-disabled='true']) {
   background: var(--color-brand-accent-hover);
   border-color: transparent;
 }
 
-.crewlet-choice-buttons__option--recommended:active:not([aria-disabled='true']) {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):active:not([aria-disabled='true']) {
   background: var(--color-brand-accent-active);
 }
 
@@ -10226,33 +10238,18 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * nearly the fill's own colour, so its ring stands off it as a primary
  * button's does.
  */
-.crewlet-choice-buttons__option--recommended:focus-visible {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]):focus-visible {
   outline-offset: 2px;
 }
 
 /*
- * THE RECOMMENDED OPTION, CHOSEN, is drawn as every chosen option is: the
- * selected edge over the soft selected fill, in the primary ink, its mark kept
- * so a reader still sees which option was recommended. The chosen rule swapped
- * the accent fill for the soft one and left the accent's own ink behind, white
- * on a pale tint, under 1.5:1 in the light theme. Held under the pointer and
- * the press too, which otherwise bring the accent back.
+ * The words take the room the option has to spare, so the recommended mark and
+ * the check mark after them sit together at the far end, and a picture before
+ * them keeps its place at the start.
  */
-.crewlet-choice-buttons__option--recommended.is-chosen,
-.crewlet-choice-buttons__option--recommended.is-chosen:hover:not([aria-disabled='true']),
-.crewlet-choice-buttons__option--recommended.is-chosen:active:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  background: var(--color-surface-selected);
-  color: var(--color-text-primary);
-}
-
-/* Off the accent, the ring is drawn over the selected edge again. */
-.crewlet-choice-buttons__option--recommended.is-chosen:focus-visible {
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
 .crewlet-choice-buttons__text {
   display: grid;
+  flex: 1 1 auto;
   gap: 2px;
   min-width: 0;
   overflow-wrap: anywhere;
@@ -10268,15 +10265,10 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * On the accent fill the detail takes the label's own ink. The tertiary step
  * is measured on the surfaces, not on the accent, where it does not clear.
  */
-.crewlet-choice-buttons__option--recommended .crewlet-choice-buttons__detail {
+.crewlet-choice-buttons__option--recommended:not([aria-pressed]) .crewlet-choice-buttons__detail {
   color: var(--color-text-on-accent);
 }
 
-/* Chosen, it is off the accent, and the detail takes its tertiary step again. */
-.crewlet-choice-buttons__option--recommended.is-chosen .crewlet-choice-buttons__detail {
-  color: var(--color-text-tertiary);
-}
-
 /*
  * The mark, in the micro-label register. Full ink rather than a faded one:
  * eleven pixels of white on the accent clears 4.5:1 only at full strength.
@@ -10289,8 +10281,12 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   text-transform: uppercase;
 }
 
-/* The picture before the words, centred on the label's line. */
-.crewlet-choice-buttons__media {
+/*
+ * The picture before the words and the check mark at the far end, each
+ * centred on the label's line.
+ */
+.crewlet-choice-buttons__media,
+.crewlet-choice-buttons__check {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -10299,22 +10295,22 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 
 /*
  * With a detail under it the label's line is the FIRST line, not the
- * option's middle, so the picture stands on a box one line tall at the top.
- * Centred on the label and its detail together, a suggestion's swatch sat
- * 7px under the value it shows.
+ * option's middle, so the picture and the check mark stand on a box one line
+ * tall at the top. Centred on the label and its detail together, a
+ * suggestion's swatch sat 7px under the value it shows.
  */
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__media {
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__media,
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) .crewlet-choice-buttons__check {
   align-self: flex-start;
   min-height: calc(var(--crewlet-choice-buttons-leading) * 1em);
 }
 
-/* Before the words, not at the far end with the recommended mark. */
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) {
-  justify-content: flex-start;
-}
-
-.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__media) .crewlet-choice-buttons__note {
-  margin-inline-start: auto;
+/*
+ * The chosen option's check mark, at the label's size and in the edge's ink,
+ * which clears the 3:1 a mark has to on the selected fill in every theme.
+ */
+.crewlet-choice-buttons__check {
+  color: var(--color-brand-accent-ink);
 }
 
 /*
@@ -10357,7 +10353,328 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceList-Q772QLFX.css */
+/* ChoiceCards-HAGJMK6Q.css */
+/*
+ * Choices a person compares, as cards in a grid that wraps. The chosen card
+ * takes the selected fill and the strong boundary, as a chosen ChoiceList row
+ * does; the radio stays the mark, drawn in the card's corner; and no card is
+ * ringed in the accent except by the focus ring itself.
+ *
+ * ONE LINE A ROW, THE SAME ROWS IN EVERY CARD: the picture, the name and its
+ * tag on the first; the description on the second; then each fact on a line
+ * of its own, its name and its value; and a reason line where any card has
+ * one. Every card spans the same rows of the group's grid and lays its lines
+ * on them as a subgrid, so cards side by side share each row: a description
+ * that wraps in one card moves the facts of all of them, and Runs stays level
+ * with Runs. Facts run together as one line of meta wrapped differently in
+ * each card, and three cards read as three different shapes.
+ *
+ * A card is at least 20rem (24rem at `lg`), the width a fact's name and a
+ * short value keep to one line in: a form's column holds one to a row, and a
+ * wider surface two or three, aligned.
+ */
+.crewlet-choice-cards {
+  --crewlet-choice-cards-min: 20rem;
+  --crewlet-choice-cards-radio: 16px;
+  /* How many rows a card spans, set from the options: the name, the description, the most facts, a reason. */
+  --crewlet-choice-cards-rows: 3;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--crewlet-choice-cards-min)), 1fr)
+  );
+  grid-auto-rows: auto;
+  column-gap: var(--spacing-3);
+  row-gap: 0;
+}
+
+.crewlet-choice-cards--lg {
+  --crewlet-choice-cards-min: 24rem;
+}
+
+/*
+ * THE CARD is a column of its lines. The space under a card is its margin,
+ * the gap between one row of cards and the next; the lines inside a card keep
+ * their own, smaller gap.
+ *
+ * Its first line is as tall as the largest picture a card set draws (a
+ * product's mark), so the radio and every name sit on one line whatever
+ * picture each card has.
+ */
+.crewlet-choice-cards__card {
+  --crewlet-choice-cards-title: var(--size-control-sm);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin-block-end: var(--spacing-3);
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  cursor: pointer;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-cards__card:hover {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE CHOSEN CARD wears the soft selected tint laid OVER the raised surface,
+ * inside an edge in the accent's ink, as a chosen ChoiceButtons option does.
+ * The tint is translucent: laid on its own it let the page's ground through,
+ * darker than the raised cards beside it in dark, and the chosen card looked
+ * recessed. The edge is the accent's ink rather than the strong border,
+ * because the edge is what tells the chosen card from the others at 3:1.
+ */
+.crewlet-choice-cards__card.is-checked {
+  border-color: var(--color-brand-accent-ink);
+  background-color: var(--color-surface-elevated);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+/*
+ * A CARD THAT CANNOT BE CHOSEN stands on the page's own ground and takes no
+ * hover: the subtle surface it took is brighter than the raised one in light,
+ * so the card that could not be chosen read as the most inviting. Its radio is
+ * drawn quiet, as ChoiceList's disabled radio is, and its picture muted; its
+ * words stay at full contrast, and its reason says why.
+ */
+.crewlet-choice-cards__card.is-disabled {
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.crewlet-choice-cards__card.is-disabled:hover {
+  background: transparent;
+}
+
+.crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__radio {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-choice-cards__card.is-disabled .crewlet-choice-cards__media {
+  color: var(--color-text-tertiary);
+  filter: grayscale(1);
+}
+
+/* The ring sits inside the card's own box, over its border, rather than a second line beside it. */
+.crewlet-choice-cards__card:has(.crewlet-choice-cards__radio:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The radio, drawn in the card's top end and centred on the first line: an empty ring, or the accent ring round an accent dot. */
+.crewlet-choice-cards__radio {
+  appearance: none;
+  position: absolute;
+  inset-block-start: calc(var(--spacing-3) + (var(--crewlet-choice-cards-title) - var(--crewlet-choice-cards-radio)) / 2);
+  inset-inline-end: var(--spacing-3);
+  display: inline-grid;
+  place-content: center;
+  width: var(--crewlet-choice-cards-radio);
+  height: var(--crewlet-choice-cards-radio);
+  margin: 0;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-choice-cards__radio:checked {
+  border-color: var(--color-brand-accent);
+}
+
+.crewlet-choice-cards__radio:checked::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-circle);
+  background: var(--color-brand-accent);
+}
+
+/*
+ * THE CARD DRAWS THE RING (above), so the radio's own is transparent rather
+ * than off: invisible beside the card's, and still a ring where forced-colors
+ * mode repaints every outline in the system's colour.
+ */
+.crewlet-choice-cards__radio:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* The first line: the picture, the name and its tag, stopping short of the radio. */
+.crewlet-choice-cards__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  grid-row: 1;
+  min-width: 0;
+  min-height: var(--crewlet-choice-cards-title);
+  padding-inline-end: calc(var(--spacing-2) + var(--crewlet-choice-cards-radio));
+}
+
+.crewlet-choice-cards__media {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-choice-cards__tag {
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/* On the chosen card's tint the default edge all but vanishes in light, so the tag takes the strong one. */
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag {
+  border-color: var(--color-border-strong);
+}
+
+.crewlet-choice-cards__label {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * The second row is the description's in every card once any card has one: a
+ * card without one keeps an empty cell there, so its facts stay level with
+ * the facts beside them.
+ */
+.crewlet-choice-cards__description {
+  grid-row: 2;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+/* The facts give each of their lines to the card's grid, one row a fact. */
+.crewlet-choice-cards__facts {
+  display: contents;
+}
+
+/*
+ * A fact: its name in the quiet ink, then its value, on one line while there
+ * is room. Its two parts share one size and line height and align to the top,
+ * so a fact with a dot is no taller than one without: aligned on a baseline,
+ * the dot (a box with no text) gave the line a baseline of its own and the
+ * Needs line stood a pixel taller than Runs.
+ */
+.crewlet-choice-cards__fact {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-choice-cards__fact-label {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-choice-cards__fact-value {
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A FACT WRAPS RATHER THAN CLIPS. A StatusDot is one line and its word gives
+ * way with an ellipsis, which is right in a table cell and wrong here: a
+ * fact is read to choose between the cards, and a narrow card cut "Docker
+ * 24.0.7 found" to "Docker 24.0..." with nothing to reveal the rest. The word
+ * wraps under itself, and the dot stays on the first line's centre, where it
+ * sat while the fact was one line.
+ */
+.crewlet-choice-cards__fact-value > .crewlet-status {
+  display: flex;
+  align-items: flex-start;
+}
+
+.crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status-dot {
+  margin-block-start: calc((1lh - var(--crewlet-status-dot-size)) / 2);
+}
+
+.crewlet-choice-cards__fact-value > .crewlet-status > .crewlet-status__label {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* A reason given on a fact's line (`disabledReasonAt`) takes that line's value, in the same ink. */
+.crewlet-choice-cards__fact.is-reason .crewlet-choice-cards__fact-value {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The reason a disabled card cannot be chosen: the card's last row, in the warning ink. */
+.crewlet-choice-cards__reason {
+  grid-row: -2;
+  color: var(--color-feedback-warning-ink);
+  font-size: var(--font-size-xs);
+}
+
+
+/*
+ * WHERE SUBGRID IS SUPPORTED, every card spans the same rows of the group and
+ * takes them from it, so a row is as tall as its tallest line across the cards
+ * beside it and their facts stand level. Elsewhere each card stays the plain
+ * column above: its lines still read in order, only not level with the next
+ * card's.
+ */
+@supports (grid-template-rows: subgrid) {
+  .crewlet-choice-cards__card {
+    display: grid;
+    grid-row: span var(--crewlet-choice-cards-rows);
+    grid-template-rows: subgrid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--spacing-1);
+    align-content: start;
+  }
+}
+
+/*
+ * UNDER FORCED COLOURS the system repaints every colour above, so the drawn
+ * radio's dot and the tint vanish together: the radio becomes the platform's
+ * own, which marks itself; the chosen card's edge takes the system's
+ * selection colour, twice as wide; and a card that cannot be chosen takes the
+ * system's disabled ink, edge and words, rather than reading as one that can.
+ */
+@media (forced-colors: active) {
+  .crewlet-choice-cards__radio {
+    appearance: auto;
+  }
+
+  .crewlet-choice-cards__card.is-checked {
+    border-width: 2px;
+    border-color: Highlight;
+  }
+
+  .crewlet-choice-cards__card.is-disabled {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .crewlet-choice-cards__card.is-disabled :is(.crewlet-choice-cards__label, .crewlet-choice-cards__description, .crewlet-choice-cards__fact-label, .crewlet-choice-cards__fact-value) {
+    color: GrayText;
+  }
+}
+
+/* The border's ease into its hover and checked inks is held for a reader who asked for no motion. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-cards__card {
+    transition: none;
+  }
+}
+
+
+/* ChoiceList-JN4PPNFW.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
@@ -10461,10 +10778,22 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   background: var(--color-surface-selected);
 }
 
-.crewlet-choice-list.is-disabled .crewlet-choice-list__row {
+.crewlet-choice-list.is-disabled .crewlet-choice-list__row,
+.crewlet-choice-list__row.is-disabled {
   cursor: not-allowed;
 }
 
+/* A choice that cannot be made takes no hover: the ground would offer it. */
+.crewlet-choice-list__row.is-disabled:hover {
+  background: none;
+}
+
+/* Its ring is drawn on the quiet boundary and ground; its words stay at full contrast. */
+.crewlet-choice-list__row.is-disabled .crewlet-choice-list__radio {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
 /*
  * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
  * own radio fills an unchosen answer with a grey disc, which beside the one
@@ -10523,6 +10852,15 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   overflow-wrap: anywhere;
 }
 
+/* Why a disabled choice cannot be made, after its detail on the same line, in the warning ink. */
+.crewlet-choice-list__reason {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-choice-list__detail > .crewlet-choice-list__reason:not(:first-child) {
+  margin-inline-start: var(--spacing-2);
+}
+
 /* A tag says something ABOUT an answer ("Suggested"), so it is set in the
    tertiary ink: in the accent ink it was a second accent mark on the chosen
    row, beside the radio and the fill that already say which one is chosen. */
@@ -20568,7 +20906,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Input-GEFFMKBS.css */
+/* Input-WSMB7JG2.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -21117,13 +21455,18 @@ a.crewlet-icon-btn {
 }
 
 /* Raised over the field it overhangs, so the ring a focused action draws two
-   pixels out from its edge is not painted over by the box under it. */
+   pixels out from its edge is not painted over by the box under it. The
+   action is a control, not part of the label, so it keeps its own case and
+   spacing: inside the label's capitals a link read "CLAUDE CODE'S MODEL
+   NAMES", and a button's word was set in capitals no other button has. */
 .crewlet-label__action {
   position: relative;
   z-index: var(--z-index-raised);
   display: inline-flex;
   align-items: center;
   block-size: 1lh;
+  letter-spacing: var(--font-letter-spacing-normal);
+  text-transform: none;
 }
 
 /* ── FormField ───────────────────────────────────────────────────────── */
@@ -31088,7 +31431,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-WDOFFNIM.css */
+/* SetupWizard-2SUMQEWU.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -31120,9 +31463,20 @@ svg.crewlet-select__chevron {
 
   container-type: inline-size;
   min-width: 0;
+  /*
+   * IT FILLS ITS SCREEN, so the footer rests at the bottom of the view on
+   * every step: sized to its content, a short step lifted the footer and its
+   * Continue hundreds of pixels up the page, and the next step dropped them
+   * again, so the button a person pressed moved on every press. Stretched,
+   * the content row takes the slack and the footer stays where it was.
+   */
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .crewlet-setup-wizard__frame {
+  flex: 1 0 auto;
   display: grid;
   grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
   grid-template-areas:
@@ -31269,6 +31623,25 @@ svg.crewlet-select__chevron {
   margin-inline-start: auto;
 }
 
+/*
+ * THE STEP'S PRIMARY ACTION (`primaryAction`) KEEPS ONE WIDTH on every step.
+ * Sized to its word, "Continue" grew into "Create model" or "Save changes" on
+ * the last step, and every button before it in the row moved 30px to make
+ * room: the Back a person had just pressed was no longer under the pointer.
+ * 8rem holds the longest of those words at the kit's medium button; a longer
+ * one still grows rather than clips. The box carries the width and the button
+ * fills it, so the rule names the primary action rather than whichever
+ * element happens to come last.
+ */
+.crewlet-setup-wizard__primary {
+  display: flex;
+  min-inline-size: 8rem;
+}
+
+.crewlet-setup-wizard__primary > * {
+  flex: 1 1 auto;
+}
+
 /*
  * A GHOST AT THE ROW'S START is pulled out by its padding and edge, as a card
  * foot's is (StatusCard.css), so "Exit" starts on the line the title and the
@@ -31332,7 +31705,14 @@ svg.crewlet-select__chevron {
       'content'
       'aside'
       'foot';
-    grid-template-rows: auto;
+    /*
+     * THE CONTENT'S ROW TAKES THE SLACK here too. Every row auto shared a
+     * short step's spare height among all four, the footer's with them, so the
+     * footer stood 20px above the view's bottom on a step shorter than the
+     * view and on it on every step that scrolls: Continue moved under the
+     * thumb between presses.
+     */
+    grid-template-rows: auto auto 1fr auto auto;
     row-gap: var(--spacing-5);
   }
 
@@ -31342,6 +31722,7 @@ svg.crewlet-select__chevron {
       'rail'
       'content'
       'foot';
+    grid-template-rows: auto auto 1fr auto;
   }
 
   .crewlet-setup-wizard__rail {
@@ -31351,6 +31732,89 @@ svg.crewlet-select__chevron {
     gap: var(--spacing-2);
   }
 
+  /*
+   * THE ROW OF STEPS SCROLLS RATHER THAN WRAPS: eight steps wrapped into three
+   * rows of pills between the position line and the step. The row is as wide
+   * as its steps, inside a scroller of the wizard's own that brings the
+   * current step into view (SetupWizard.tsx), with room above and under the
+   * pills for the 24px band a pill that can be picked is pressed through,
+   * which the scroller would otherwise clip.
+   *
+   * THE SCROLLER SAYS IT SCROLLS: with its bar hidden, an edge that hides
+   * steps fades out, at whichever side has steps beyond it, so a row cut at
+   * the screen's edge reads as more to come rather than as the last step.
+   */
+  .crewlet-setup-wizard__steps {
+    --crewlet-setup-wizard-fade: var(--spacing-6);
+    --crewlet-setup-wizard-fade-left: 0px;
+    --crewlet-setup-wizard-fade-right: 0px;
+
+    min-width: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--crewlet-setup-wizard-fade-left),
+      #000 calc(100% - var(--crewlet-setup-wizard-fade-right)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--crewlet-setup-wizard-fade-left),
+      #000 calc(100% - var(--crewlet-setup-wizard-fade-right)),
+      transparent
+    );
+  }
+
+  .crewlet-setup-wizard__steps::-webkit-scrollbar {
+    display: none;
+  }
+
+  .crewlet-setup-wizard__steps[data-fade-left] {
+    --crewlet-setup-wizard-fade-left: var(--crewlet-setup-wizard-fade);
+  }
+
+  .crewlet-setup-wizard__steps[data-fade-right] {
+    --crewlet-setup-wizard-fade-right: var(--crewlet-setup-wizard-fade);
+  }
+
+  /* A row that overflows takes the keyboard, so it can be scrolled without a pointer; it draws no edge, so the ring sits inside it. */
+  .crewlet-setup-wizard__steps:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: var(--size-focus-ring-inset-offset);
+  }
+
+  .crewlet-setup-wizard__steps .crewlet-stepper {
+    flex-wrap: nowrap;
+    inline-size: max-content;
+    max-inline-size: none;
+    padding-block: calc((var(--size-target-min) - var(--crewlet-stepper-pill-height)) / 2);
+  }
+
+  .crewlet-setup-wizard__steps .crewlet-stepper__step {
+    flex: none;
+  }
+
+  /* How far along, as a thin bar under the position line, in the accent. */
+  .crewlet-setup-wizard__progress {
+    display: block;
+    block-size: 2px;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background: var(--color-border-default);
+  }
+
+  .crewlet-setup-wizard__progress::before {
+    content: '';
+    display: block;
+    block-size: 100%;
+    inline-size: calc(var(--crewlet-setup-wizard-progress, 0) * 100%);
+    background: var(--color-brand-accent);
+  }
+
   /*
    * THE FOLDED PREVIEW HANGS IN THE GUTTER, as a change list's disclosure
    * does: the trigger's padding and the panel's inset stand outside the
@@ -31381,18 +31845,19 @@ svg.crewlet-select__chevron {
     display: contents;
   }
 
-  .crewlet-setup-wizard__footer-end > :first-child {
+  .crewlet-setup-wizard__footer-end > :first-child:not(.crewlet-setup-wizard__primary) {
     margin-inline-start: auto;
   }
 
-  .crewlet-setup-wizard__footer-end > :last-child {
+  /* The primary action, named, takes the second row; the actions given in `footer` share the first, whatever their count. */
+  .crewlet-setup-wizard__primary {
     flex: 1 1 100%;
   }
 
   /* The first row's last action ends it, at the row's end: a ghost there is
      pulled out as "Exit" is at its start, so the two words stand level with
      the primary's edges under them. */
-  .crewlet-setup-wizard__footer-end > .crewlet-btn--ghost.crewlet-btn--medium:nth-last-child(2) {
+  .crewlet-setup-wizard__footer-end > .crewlet-btn--ghost.crewlet-btn--medium:has(+ .crewlet-setup-wizard__primary) {
     margin-inline-end: calc(-1 * (var(--spacing-3) + 1px));
   }
 }
@@ -35372,7 +35837,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatusDot-7OMCQCZF.css */
+/* StatusDot-FJND3CZY.css */
 /*
  * The status dot: a 7px mark in its tone's fill, beside the word it belongs
  * to. See the component doc for why it is hidden from assistive technology.
@@ -35391,10 +35856,17 @@ svg.crewlet-select__chevron {
  * reader notice it" difference to. Every soft step does, by 4.48 at the least.
  */
 
+/*
+ * The size is a property of the dot rather than two bare numbers so that a
+ * layout placing the dot against a line it does not share a box with (a
+ * ChoiceCards fact that wraps) centres it on that line by the same measure.
+ */
 .crewlet-status-dot {
+  --crewlet-status-dot-size: 7px;
+
   display: inline-block;
-  width: 7px;
-  height: 7px;
+  width: var(--crewlet-status-dot-size);
+  height: var(--crewlet-status-dot-size);
   border-radius: var(--radius-circle);
   /*
    * The quiet state is still a mark, so it takes the tertiary step rather than
@@ -35683,7 +36155,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Stepper-32INSYF7.css */
+/* Stepper-YQBNYCIS.css */
 /*
  * The stepper: where a sequence has got to (Stepper.tsx).
  *
@@ -35707,6 +36179,11 @@ svg.crewlet-select__chevron {
      a half), named because the gap and the rule both measure by it (see THE
      RULE BETWEEN TWO STEPS). */
   --crewlet-stepper-rule-clearance: calc(var(--spacing-1) * 1.5);
+  /* The design's 20px pill (and a column's mark), following the density with
+     every other step height in the kit. Declared once, and read where a layout
+     sizes around a pill: SetupWizard's row of steps clears the target band
+     above and under it by this height. Read it; do not set it. */
+  --crewlet-stepper-pill-height: calc(20px * var(--density, 1));
 
   display: flex;
   flex-wrap: wrap;
@@ -35759,9 +36236,9 @@ svg.crewlet-select__chevron {
   gap: calc(var(--spacing-1) * 1.25);
   box-sizing: border-box;
   /* The design's 20px pill, which follows the density with every other step
-     height in the kit. It labels and takes no press, so the 24px target floor
-     is not its to clear. */
-  height: calc(20px * var(--density, 1));
+     height in the kit. A pill that only labels takes no press; one a reader
+     can pick clears the 24px target floor through the band below. */
+  height: var(--crewlet-stepper-pill-height);
   max-width: 100%;
   padding: 0 var(--spacing-2);
   border: 1px solid var(--color-border-default);
@@ -35897,12 +36374,30 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-stepper__chip.crewlet-stepper__target {
+  position: relative;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-medium);
   line-height: 1;
 }
 
+/*
+ * A PICKABLE PILL IS PRESSED THROUGH THE TARGET FLOOR, not its own 20px: an
+ * invisible band of --size-target-min, centred on the pill, reaches above and
+ * under it, so a phone's row of steps takes a thumb without the pill growing
+ * past the design's height. The band is sized and centred rather than inset
+ * from the pill: an inset counts from inside the pill's hairline, which left
+ * it 22px.
+ */
+.crewlet-stepper__chip.crewlet-stepper__target::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: var(--size-target-min);
+  translate: 0 -50%;
+}
+
 .crewlet-stepper__target:hover {
   background: var(--color-surface-hover);
 }
@@ -35943,9 +36438,9 @@ svg.crewlet-select__chevron {
 .crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
   content: '';
   position: absolute;
-  top: calc(var(--spacing-2) + 20px * var(--density, 1) + 4px);
+  top: calc(var(--spacing-2) + var(--crewlet-stepper-pill-height) + 4px);
   bottom: calc(4px - var(--spacing-2));
-  left: calc(var(--spacing-2) + 10px * var(--density, 1));
+  left: calc(var(--spacing-2) + var(--crewlet-stepper-pill-height) / 2);
   width: 1px;
   background: var(--color-border-strong);
   pointer-events: none;
@@ -35971,8 +36466,8 @@ svg.crewlet-select__chevron {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  width: calc(20px * var(--density, 1));
-  height: calc(20px * var(--density, 1));
+  width: var(--crewlet-stepper-pill-height);
+  height: var(--crewlet-stepper-pill-height);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-pill);
   font-size: var(--font-size-2xs);
@@ -35989,7 +36484,7 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-stepper__title {
-  line-height: calc(20px * var(--density, 1));
+  line-height: var(--crewlet-stepper-pill-height);
   overflow-wrap: anywhere;
 }