@crewlethq/ui 0.75.4 → 0.76.1

package/dist/styles.css

@@ -10353,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
@@ -10457,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
@@ -10519,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. */
@@ -20564,7 +20906,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Input-GEFFMKBS.css */
+/* Input-WSMB7JG2.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -21113,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 ───────────────────────────────────────────────────────── */
@@ -31084,7 +31431,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-WDOFFNIM.css */
+/* SetupWizard-Y2PFPBCZ.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -31116,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:
@@ -31265,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
@@ -31328,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);
   }
 
@@ -31338,6 +31722,7 @@ svg.crewlet-select__chevron {
       'rail'
       'content'
       'foot';
+    grid-template-rows: auto auto 1fr auto;
   }
 
   .crewlet-setup-wizard__rail {
@@ -31347,6 +31732,114 @@ 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.
+   *
+   * THE FADE NEVER DIMS A FOCUS RING. A mask fades everything the element
+   * paints, its own outline included, so the scroller's ring is drawn by the
+   * frame around it, which is not masked. And a pill that takes focus is
+   * scrolled clear of the faded edges, so its ring is never in the fade
+   * either: `scroll-padding-inline` is the fade's own width, which the wizard
+   * reads to place it (SetupWizard.tsx, `clearOfFade`).
+   */
+  .crewlet-setup-wizard__steps-frame {
+    --crewlet-setup-wizard-fade: var(--spacing-6);
+
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__steps {
+    --crewlet-setup-wizard-fade-left: 0px;
+    --crewlet-setup-wizard-fade-right: 0px;
+
+    min-width: 0;
+    overflow-x: auto;
+    scroll-padding-inline: var(--crewlet-setup-wizard-fade);
+    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. Its ring is the frame's, unmasked, inside the frame's edge, and
+   * the frame's ring is the one that carries the focus in a forced-colours
+   * mode too. The scroller's own outline is transparent only to turn off the
+   * browser's default ring, which would sit under the mask, dimmed, beside
+   * the frame's (transparent rather than none, as the kit's focus check asks
+   * of every focus style).
+   */
+  .crewlet-setup-wizard__steps:focus-visible {
+    outline: 2px solid transparent;
+  }
+
+  .crewlet-setup-wizard__steps-frame:has(> .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
@@ -31377,18 +31870,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));
   }
 }
@@ -35368,7 +35862,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.
@@ -35387,10 +35881,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
@@ -35679,7 +36180,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Stepper-32INSYF7.css */
+/* Stepper-YQBNYCIS.css */
 /*
  * The stepper: where a sequence has got to (Stepper.tsx).
  *
@@ -35703,6 +36204,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;
@@ -35755,9 +36261,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);
@@ -35893,12 +36399,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);
 }
@@ -35939,9 +36463,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;
@@ -35967,8 +36491,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);
@@ -35985,7 +36509,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;
 }