@crewlethq/ui 0.49.1 → 0.51.0

package/dist/styles.css

@@ -2913,7 +2913,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-SOB63NV5.css */
+/* ArtifactCard-F7IVRL3A.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
  * lines up whatever each preview is, the kind's badge over its foot, then the
@@ -3131,6 +3131,9 @@ button.crewlet-account-row__who:focus-visible {
 
 .crewlet-artifact-card--card .crewlet-artifact-card__facts {
   font-size: var(--font-size-sm);
+  /* The title's line height, so a card's words and a folder tile's beside it
+     keep one rhythm. */
+  line-height: 1.35;
 }
 
 .crewlet-artifact-card__meta {
@@ -5812,7 +5815,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Callout-ZAVG3P66.css */
+/* Callout-G3N3IE6M.css */
 /*
  * The callout: a status that stays in the content flow.
  *
@@ -5892,7 +5895,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   font-weight: var(--font-weight-semibold);
 }
 
+/*
+ * THE ACTIONS ARE A ROW one step apart, wrapping when there is no room, so a
+ * callout with two (Continue setting up, Review and adopt) never draws them
+ * touching, whatever the host wraps them in.
+ */
 .crewlet-callout__action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
   grid-column: 3;
   grid-row: 1;
   align-self: center;
@@ -9573,6 +9585,55 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ColorChip-A5XHTH3J.css */
+/*
+ * A colour as a small chip (ColorChip.tsx). Its fill is the one value that is
+ * not a token, and it arrives through `--crewlet-color-chip-value` only after
+ * it has passed `#rrggbb`.
+ */
+.crewlet-color-chip {
+  display: inline-block;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  background: var(--crewlet-color-chip-value, var(--color-surface-inset));
+  /* An edge of its own, so a colour that matches its ground is still a chip. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  vertical-align: middle;
+}
+
+.crewlet-color-chip--sm {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.crewlet-color-chip--round {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-color-chip--square {
+  border-radius: var(--radius-xs);
+}
+
+/* The hatch of no colour, as every swatch in the package draws it. */
+.crewlet-color-chip.is-empty {
+  background: repeating-linear-gradient(-45deg, var(--color-border-hatch) 0 1px, transparent 1px var(--spacing-1));
+}
+
+/*
+ * FORCED COLORS drops backgrounds, which is all a chip is, so the mode keeps
+ * this one: the colour is the information, and the edge is drawn in the
+ * system's text colour so the chip still has a boundary.
+ */
+@media (forced-colors: active) {
+  .crewlet-color-chip {
+    forced-color-adjust: none;
+    box-shadow: inset 0 0 0 1px CanvasText;
+  }
+}
+
+
 /* ColorField-2OIOWT3Z.css */
 /*
  * A colour a person chooses: the swatch that opens the platform's picker,
@@ -10551,6 +10612,52 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ContrastHelp-MZCAW5WQ.css */
+/*
+ * ContrastHelp: what the contrast levels mean, in a short panel opened from an
+ * info button (ContrastHelp.tsx).
+ */
+.crewlet-contrast-help {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-contrast-help__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-contrast-help__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+/* Each level's word as the badge draws it, beside what it means. */
+.crewlet-contrast-help__levels {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dt,
+.crewlet-contrast-help__levels dd {
+  margin: 0;
+}
+
+.crewlet-contrast-help__levels dd {
+  color: var(--color-text-secondary);
+}
+
+
 /* Copyable-5PNRFOLS.css */
 /*
  * Copyable: a value and the one control that copies it.
@@ -15678,7 +15785,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EditingStatus-NNA2CKIL.css */
+/* EditingStatus-YU7EGM6Y.css */
 /*
  * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
  * small step, quiet until something is unsaved.
@@ -15707,20 +15814,32 @@ svg.crewlet-datetime__chevron {
   background: var(--color-brand-accent);
 }
 
+/*
+ * THE WORDS RUN AS TEXT, not as flex items, so the space between the label
+ * and the state (which the ear needs) and the space before the time are real
+ * spaces, and the row is cut with an ellipsis rather than squeezed.
+ */
+.crewlet-editing-status__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .crewlet-editing-status__label {
   color: var(--color-text-primary);
   font-weight: var(--font-weight-medium);
 }
 
-.crewlet-editing-status__state {
-  overflow: hidden;
+.crewlet-editing-status__state,
+.crewlet-editing-status__ago {
   color: var(--color-text-tertiary);
-  text-overflow: ellipsis;
 }
 
+/* The dot between the label and the state: drawn, never read. The space
+   before it in the text gives it the step on its left. */
 .crewlet-editing-status__state::before {
   content: '\00b7';
-  margin-right: var(--spacing-2);
+  margin-inline: var(--spacing-1) var(--spacing-2);
 }
 
 /*
@@ -15734,7 +15853,8 @@ svg.crewlet-datetime__chevron {
  * "Editing" folds too, and Cancel and Save beside the dot say an edit is open.
  */
 @media (width < 480px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -15745,7 +15865,8 @@ svg.crewlet-datetime__chevron {
 }
 
 @container crewlet-artifact-bar (width < 900px) {
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -15757,7 +15878,8 @@ svg.crewlet-datetime__chevron {
 
 @container crewlet-artifact-bar (width < 640px) {
   .crewlet-editing-status__label,
-  .crewlet-editing-status__state {
+  .crewlet-editing-status__state,
+  .crewlet-editing-status__ago {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -16405,7 +16527,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* FolderTile-FDT5Y63Z.css */
+/* FolderTile-MIUEB7SO.css */
 /*
  * A folder in a gallery: a short tile on Card (no preview), the folder glyph
  * on a neutral tint over the name and one quiet line, and a More menu in the
@@ -16435,8 +16557,17 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-floor: auto;
   --crewlet-folder-tile-glyph: 40px;
   --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  /*
+   * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
+   * card's title step and weight, its facts at the card's facts step, one
+   * line height for both and the card's step between them. The row (and a
+   * tile on a phone, which is the row) keeps the same two steps, since the
+   * cards it stands above keep theirs there too, with a tighter step between
+   * the lines so it stays one compact row.
+   */
   --crewlet-folder-tile-name: var(--font-size-md);
   --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-words-gap: var(--spacing-1);
   --crewlet-folder-tile-actions-inset: var(--spacing-3);
   /*
    * A TILE STACKS: the glyph on top with the More menu level with it in the
@@ -16469,8 +16600,7 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-floor: var(--size-control-lg);
   --crewlet-folder-tile-glyph: 28px;
   --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-  --crewlet-folder-tile-name: var(--font-size-sm);
-  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-words-gap: 2px;
   --crewlet-folder-tile-actions-inset: var(--spacing-2);
   --crewlet-folder-tile-direction: row;
   --crewlet-folder-tile-align: center;
@@ -16490,8 +16620,7 @@ button.crewlet-finding-list__row:focus-visible {
     --crewlet-folder-tile-floor: var(--size-control-lg);
     --crewlet-folder-tile-glyph: 28px;
     --crewlet-folder-tile-glyph-radius: var(--radius-sm);
-    --crewlet-folder-tile-name: var(--font-size-sm);
-    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-words-gap: 2px;
     --crewlet-folder-tile-actions-inset: var(--spacing-2);
     --crewlet-folder-tile-direction: row;
     --crewlet-folder-tile-align: center;
@@ -16559,7 +16688,7 @@ button.crewlet-finding-list__row:focus-visible {
 .crewlet-folder-tile__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--crewlet-folder-tile-words-gap);
   min-width: 0;
   max-width: 100%;
 }
@@ -19230,7 +19359,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ListInput-WUP2YITQ.css */
+/* ListInput-P2ECUQJ2.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
  * listed under it.
@@ -19490,7 +19619,7 @@ a.crewlet-icon-btn {
   }
 }
 
-/* With a hidden legend the add control stands at the end of the box's row. */
+/* The Add button ends the box's row: the field and its Add read as one control. */
 .crewlet-list-input__add-control {
   display: inline-flex;
   flex: none;
@@ -26349,6 +26478,232 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SetupWizard-GZK5UDKC.css */
+/*
+ * SetupWizard: a setup walked step by step on a page of its own
+ * (SetupWizard.tsx).
+ *
+ * THE GRID. The header across the top, the footer across the bottom, and
+ * between them the rail (240px), the content (one column, at most 640px) and,
+ * from 70rem of the wizard's own width, the aside (320px). Under 70rem the
+ * aside takes the row under the content and the rail runs down beside both.
+ * Under the phone breakpoint every part is one column, in reading order.
+ */
+
+.crewlet-setup-wizard {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__frame {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-areas:
+    'head head'
+    'rail content'
+    'rail aside'
+    'foot foot';
+  grid-template-rows: auto auto 1fr auto;
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-6);
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__status {
+  display: inline-flex;
+  align-items: center;
+}
+
+/*
+ * THE RAIL stays in view while the content scrolls past it, as a column of
+ * the steps a reader can go back to.
+ */
+.crewlet-setup-wizard__rail {
+  position: sticky;
+  top: var(--spacing-5);
+  align-self: start;
+  grid-area: rail;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__content {
+  display: flex;
+  flex-direction: column;
+  grid-area: content;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 640px;
+  min-width: 0;
+}
+
+.crewlet-setup-wizard__heading {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+/*
+ * The heading takes focus when the step changes. It keeps the browser's own
+ * focus treatment: after a press nothing is drawn, and after a key the ring
+ * shows where the reader now is.
+ */
+
+.crewlet-setup-wizard__lead {
+  margin: var(--spacing-2) 0 0;
+  max-width: var(--size-measure);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-setup-wizard__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  margin-top: var(--spacing-6);
+  min-width: 0;
+}
+
+/* UNDER THE CONTENT, the aside is set off by one hairline, as AsideLayout's is. */
+.crewlet-setup-wizard__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  grid-area: aside;
+  box-sizing: border-box;
+  max-width: 640px;
+  min-width: 0;
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * THE FOOTER holds the step's actions at the bottom of the view while the
+ * content scrolls under it, on the sheet's own ground with a hairline above,
+ * and clears the device's safe area where it has one.
+ */
+.crewlet-setup-wizard__footer {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--z-index-sticky);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  grid-area: foot;
+  padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* The way out at the start of the row, the step's actions at its end. */
+.crewlet-setup-wizard__footer-start,
+.crewlet-setup-wizard__footer-end {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-setup-wizard__footer-end {
+  margin-inline-start: auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the whole width beside the rail. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__content {
+  max-width: none;
+}
+
+/* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
+@container (min-width: 70rem) {
+  .crewlet-setup-wizard__frame {
+    grid-template-columns: 240px minmax(0, 1fr) 320px;
+    grid-template-areas:
+      'head head head'
+      'rail content aside'
+      'foot foot foot';
+    grid-template-rows: auto 1fr auto;
+  }
+
+  /* With no aside, nothing is held for one: the content takes its column too. */
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-areas:
+      'head head'
+      'rail content'
+      'foot foot';
+  }
+
+  .crewlet-setup-wizard__aside {
+    position: sticky;
+    top: var(--spacing-5);
+    align-self: start;
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+/*
+ * ON A PHONE, one column in reading order: where the reader is, the step, the
+ * folded preview, and the actions. The rail is a row of steps under the
+ * position line, and scrolls away with the page rather than covering it.
+ */
+@media (width < 640px) {
+  .crewlet-setup-wizard__frame {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'head'
+      'rail'
+      'content'
+      'aside'
+      'foot';
+    grid-template-rows: auto;
+    row-gap: var(--spacing-5);
+  }
+
+  .crewlet-setup-wizard__rail {
+    position: static;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+  }
+
+  .crewlet-setup-wizard__preview {
+    grid-area: aside;
+    min-width: 0;
+  }
+
+  .crewlet-setup-wizard__preview .crewlet-setup-wizard__aside {
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+.crewlet-setup-wizard__position {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-setup-wizard__position-step {
+  color: var(--color-text-primary);
+}
+
+
 /* ShareDialog-4QDCBWMH.css */
 /*
  * Three blocks under the title: who to add and at what role, who has access,
@@ -29751,7 +30106,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Stepper-HW4JM3YH.css */
+/* Stepper-QEJI5RGX.css */
 /*
  * The stepper: where a sequence has got to (Stepper.tsx).
  *
@@ -29841,41 +30196,65 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
- * away, so the pill keeps its box and the row does not move by a pixel as the
- * current step advances along it, and so forced-colors mode, which draws a
- * transparent border in the system's own colour, still outlines it.
+ * THE CURRENT STEP, in its tone: the pill in a row, the mark in a column. The
+ * hairline goes transparent rather than away, so the pill keeps its box and
+ * the row does not move by a pixel as the current step advances along it, and
+ * so forced-colors mode, which draws a transparent border in the system's own
+ * colour, still outlines it.
  */
-.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--info .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-info-soft);
   color: var(--color-feedback-info-ink);
 }
 
-.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--success .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-success-soft);
   color: var(--color-feedback-success-ink);
 }
 
-.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--warning .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-warning-soft);
   color: var(--color-feedback-warning-ink);
 }
 
-.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--danger .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-feedback-danger-soft);
   color: var(--color-feedback-danger-ink);
 }
 
-.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
+.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip,
+.crewlet-stepper--brand .crewlet-stepper__step--current .crewlet-stepper__mark {
   border-color: transparent;
   background: var(--color-brand-accent-soft);
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * A STEP THAT NEEDS ATTENTION is the warning tint under the warning ink, the
+ * pair the palette suite holds to 4.5:1 over every rung, with the warning
+ * glyph: the pill of a step that is not current, and the mark of any step in
+ * a column. A CURRENT pill keeps its tone, so the row still says which step
+ * the reader is on, and carries the glyph in that tone's ink.
+ */
+.crewlet-stepper .crewlet-stepper__step--attention:not(.crewlet-stepper__step--current) > .crewlet-stepper__chip,
+.crewlet-stepper .crewlet-stepper__step--attention .crewlet-stepper__mark {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper__warning {
+  flex: none;
+}
+
 /*
  * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
  * Tag's reason: StatusDot paints the fill step, measured as a mark on the
@@ -29908,8 +30287,157 @@ svg.crewlet-select__chevron {
  * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
  * is the tone's soft tint and no system colour, is held still inside it.
  */
+/*
+ * A STEP THAT CAN BE PICKED is a button with no look of its own: the pill or
+ * the row it carries draws it, and a hover lays the kit's hover overlay over
+ * a step at rest. The current step keeps its tint under the pointer, since a
+ * tone rule weighs more than the hover. The ring sits inside the step's own
+ * box, over the pill's hairline rather than a second line beside it.
+ */
+.crewlet-stepper__target {
+  appearance: none;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-stepper__chip.crewlet-stepper__target {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.crewlet-stepper__target:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-stepper__target:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE COLUMN, a setup wizard's rail. Each step is a row: a 20px mark (the
+ * check, the dot, the warning glyph, or the step's number for one still to
+ * come) and beside it the label, with the description and the status words
+ * under it. A hairline in the strong hairline's colour joins one mark to the
+ * next, 4px clear of each, drawn by the step it leaves so nothing trails the
+ * last. The mark is the pills' 20px, following the density as they do, and
+ * the label's line is the mark's height so the two stand level. The row's words follow the same three inks as the pills: the current
+ * step primary and medium, a finished one secondary, the rest tertiary.
+ */
+.crewlet-stepper--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 0;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step {
+  position: relative;
+  display: block;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: none;
+}
+
+.crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--spacing-2) + 20px * var(--density, 1) + 4px);
+  bottom: calc(4px - var(--spacing-2));
+  left: calc(var(--spacing-2) + 10px * var(--density, 1));
+  width: 1px;
+  background: var(--color-border-strong);
+  pointer-events: none;
+}
+
+.crewlet-stepper__row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-stepper__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(20px * var(--density, 1));
+  height: calc(20px * var(--density, 1));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.crewlet-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-stepper__title {
+  line-height: calc(20px * var(--density, 1));
+  overflow-wrap: anywhere;
+}
+
+.crewlet-stepper__row .crewlet-stepper__label {
+  overflow: visible;
+}
+
+.crewlet-stepper__description,
+.crewlet-stepper__note {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-stepper__step--attention .crewlet-stepper__note {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__row {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT ROW is lifted as the rail's current row is (SidebarNav): the
+ * elevated rung inside a one-pixel hairline drawn as an outline, so forced
+ * colors keeps it, and it does not move the row by a pixel.
+ */
+.crewlet-stepper__step--current > .crewlet-stepper__row {
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-stepper__step--current .crewlet-stepper__description,
+.crewlet-stepper__step--current .crewlet-stepper__note {
+  font-weight: var(--font-weight-regular);
+}
+
 @media (forced-colors: active) {
-  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip,
+  .crewlet-stepper .crewlet-stepper__step--current .crewlet-stepper__mark {
     forced-color-adjust: none;
     border-color: Highlight;
     background: Highlight;
@@ -29924,9 +30452,15 @@ svg.crewlet-select__chevron {
     animation: none;
   }
 
-  .crewlet-stepper__step + .crewlet-stepper__step::before {
+  .crewlet-stepper__step + .crewlet-stepper__step::before,
+  .crewlet-stepper--vertical .crewlet-stepper__step:not(:last-child)::after {
     background: GrayText;
   }
+
+  .crewlet-stepper__target:hover {
+    outline: 1px solid Highlight;
+    outline-offset: var(--size-focus-ring-inset-offset);
+  }
 }