@crewlethq/ui 0.52.2 → 0.54.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-BIUFNT3J.css */
+/* AppShell-5LPXYUV3.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1316,13 +1316,25 @@
    programmatic focus does not match :focus-visible, so neither the browser nor
    the document baseline draws a ring around the whole screen. */
 
+/*
+ * THE CONTENT'S END is room under the last line, so it never reads flush
+ * against the window's edge. It is a custom property,
+ * `--crewlet-app-shell-content-end`, because a screen that ends in a bar
+ * docked to the bottom of the scroller (a setup's footer) IS that edge: the
+ * bar takes the room back with a negative margin of the same length, and
+ * sits on the scroller's bottom at the end of a scroll exactly where it stood
+ * while scrolling, rather than riding the room's height above it.
+ */
 .crewlet-app-shell__content {
+  --crewlet-app-shell-content-end: var(--spacing-10);
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-5);
   max-width: var(--size-content-max);
   margin: 0 auto;
-  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+  padding: var(--spacing-5) var(--spacing-5);
+  padding-bottom: var(--crewlet-app-shell-content-end);
   min-width: 0;
 }
 
@@ -1341,8 +1353,9 @@
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
+  --crewlet-app-shell-content-end: var(--spacing-5);
+
   height: 100%;
-  padding-bottom: var(--spacing-5);
 }
 
 /* Hidden by default, revealed by the breakpoint below: the wide layout has the
@@ -1461,7 +1474,10 @@
   }
 
   .crewlet-app-shell__content {
-    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
+    --crewlet-app-shell-content-end: var(--spacing-9);
+
+    padding: var(--spacing-4) var(--spacing-4);
+    padding-bottom: var(--crewlet-app-shell-content-end);
   }
 }
 
@@ -16587,12 +16603,12 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* FolderTile-MIUEB7SO.css */
+/* FolderTile-NM7CRTVH.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
- * top corner outside the link. `row` is the full width, 44px row a phone
- * takes, and a tile becomes one under the phone breakpoint.
+ * on a neutral tint over the name and one quiet run of facts, and a More menu
+ * level with the glyph, outside the link. `row` is the full width row a phone
+ * takes (44px at least), and a tile becomes one under the phone breakpoint.
  *
  * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
  * class too: the two sheets meet at equal weight and the bundle orders them by
@@ -16600,10 +16616,11 @@ button.crewlet-finding-list__row:focus-visible {
  */
 
 /*
- * THE ARTIFACT CARD'S CORNER, so a folder tile and the cards below it read as
- * one gallery, and Card's own hover step (the hairline darkens, nothing
- * lifts). The chosen state is Card's (`selected`): the selected edge over the
- * selected fill.
+ * THE ARTIFACT CARD'S CORNER AND HOVER, so a folder tile and the cards below
+ * it read as one gallery: under the pointer the hairline darkens and a
+ * hairline shadow settles under the tile, quickly and with the standard ease,
+ * exactly as a card's does. Nothing lifts or moves. The chosen state is
+ * Card's (`selected`): the selected edge over the selected fill.
  */
 .crewlet-card.crewlet-folder-tile {
   /*
@@ -16616,6 +16633,7 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-pad-inline: var(--spacing-4);
   --crewlet-folder-tile-floor: auto;
   --crewlet-folder-tile-glyph: 40px;
+  --crewlet-folder-tile-glyph-icon: 20px;
   --crewlet-folder-tile-glyph-radius: var(--radius-md);
   /*
    * THE WORDS ARE SET AS THE CARDS BESIDE THEM: a tile's name at a gallery
@@ -16644,13 +16662,36 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-actions-shift: 0;
   --crewlet-folder-tile-reserve-link: 0px;
 
+  /*
+   * THE CARD'S SEPARATOR between two facts, a quiet dot with a step of air on
+   * each side: the width each fact after the first opens with.
+   */
+  --crewlet-folder-tile-separator: var(--spacing-5);
+  /* Who can see it is a glyph and its word; the row keeps the glyph alone. */
+  --crewlet-folder-tile-word-position: static;
+  --crewlet-folder-tile-word-size: auto;
+  --crewlet-folder-tile-word-clip: none;
+
   flex-direction: row;
   align-items: stretch;
   min-width: 0;
   border-radius: var(--crewlet-folder-tile-radius);
 }
 
-/* ---- the row: a phone's, full width at 44px ---- */
+/* The card's quick step, over Card's slower interactive one. */
+.crewlet-card.crewlet-folder-tile.is-interactive {
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-card.crewlet-folder-tile:hover {
+  box-shadow: var(--shadow-xs);
+}
+
+/* ---- the row: a phone's, full width and 44px at least ----
+   The glyph and its tint keep the tile's proportion (the glyph half the
+   tint), at the list name cell's 32px tint. */
 
 .crewlet-card.crewlet-folder-tile--row {
   --crewlet-folder-tile-radius: var(--radius-lg);
@@ -16658,8 +16699,9 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-pad-block: var(--spacing-1);
   --crewlet-folder-tile-pad-inline: var(--spacing-3);
   --crewlet-folder-tile-floor: var(--size-control-lg);
-  --crewlet-folder-tile-glyph: 28px;
-  --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+  --crewlet-folder-tile-glyph: 32px;
+  --crewlet-folder-tile-glyph-icon: 16px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-md);
   --crewlet-folder-tile-words-gap: 2px;
   --crewlet-folder-tile-actions-inset: var(--spacing-2);
   --crewlet-folder-tile-direction: row;
@@ -16667,6 +16709,9 @@ button.crewlet-finding-list__row:focus-visible {
   --crewlet-folder-tile-actions-top: 50%;
   --crewlet-folder-tile-actions-shift: -50%;
   --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+  --crewlet-folder-tile-word-position: absolute;
+  --crewlet-folder-tile-word-size: 1px;
+  --crewlet-folder-tile-word-clip: inset(50%);
 }
 
 /* UNDER THE PHONE BREAKPOINT A TILE IS THE ROW, strictly under, as the
@@ -16678,8 +16723,9 @@ button.crewlet-finding-list__row:focus-visible {
     --crewlet-folder-tile-pad-block: var(--spacing-1);
     --crewlet-folder-tile-pad-inline: var(--spacing-3);
     --crewlet-folder-tile-floor: var(--size-control-lg);
-    --crewlet-folder-tile-glyph: 28px;
-    --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+    --crewlet-folder-tile-glyph: 32px;
+    --crewlet-folder-tile-glyph-icon: 16px;
+    --crewlet-folder-tile-glyph-radius: var(--radius-md);
     --crewlet-folder-tile-words-gap: 2px;
     --crewlet-folder-tile-actions-inset: var(--spacing-2);
     --crewlet-folder-tile-direction: row;
@@ -16687,19 +16733,41 @@ button.crewlet-finding-list__row:focus-visible {
     --crewlet-folder-tile-actions-top: 50%;
     --crewlet-folder-tile-actions-shift: -50%;
     --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+    --crewlet-folder-tile-word-position: absolute;
+    --crewlet-folder-tile-word-size: 1px;
+    --crewlet-folder-tile-word-clip: inset(50%);
   }
 }
 
+/*
+ * THE STATES OUTLAST THE POINTER. Card's hover step darkens the hairline at
+ * the same weight as a state's edge, and Card's sheet comes after this one, so
+ * each state restates its edge under the pointer too: a chosen tile keeps the
+ * selected edge, and a drop target, which is under the pointer by definition,
+ * keeps its accent.
+ */
+.crewlet-card.crewlet-folder-tile.is-selected,
+.crewlet-card.crewlet-folder-tile.is-selected:hover {
+  border-color: var(--color-border-selected);
+}
+
 /*
  * SOMETHING HELD OVER IT WOULD LAND IN IT: the accent edge over the accent's
  * soft fill, the same pair a file drop target takes while files are over it,
- * so "let go here" reads one way across the package.
+ * so "let go here" reads one way across the package. The glyph's tint takes
+ * the accent's hairline and ink, so the folder itself says it is open to it.
  */
-.crewlet-card.crewlet-folder-tile.is-drop-target {
+.crewlet-card.crewlet-folder-tile.is-drop-target,
+.crewlet-card.crewlet-folder-tile.is-drop-target:hover {
   border-color: var(--color-brand-accent);
   background-color: var(--color-brand-accent-soft);
 }
 
+.crewlet-folder-tile.is-drop-target .crewlet-folder-tile__glyph {
+  box-shadow: inset 0 0 0 1px var(--color-brand-accent);
+  color: var(--color-brand-accent-ink);
+}
+
 .crewlet-card.crewlet-folder-tile:has(.crewlet-folder-tile__link:focus-visible) {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
@@ -16730,7 +16798,11 @@ button.crewlet-finding-list__row:focus-visible {
   padding-inline-end: calc(var(--crewlet-folder-tile-pad-inline) + var(--crewlet-folder-tile-reserve-link));
 }
 
-/* A NEUTRAL TINT, never a kind's: a folder is not a kind. */
+/*
+ * A NEUTRAL TINT, never a kind's: a folder is not a kind. Its hairline steps
+ * up with the tile's under the pointer, as a folder's mark does on a list
+ * row, so the one drawn thing on the tile answers too.
+ */
 .crewlet-folder-tile__glyph {
   display: inline-flex;
   flex: none;
@@ -16743,6 +16815,17 @@ button.crewlet-finding-list__row:focus-visible {
   background: var(--color-surface-inset);
   box-shadow: inset 0 0 0 1px var(--color-border-default);
   color: var(--color-text-secondary);
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-folder-tile:hover .crewlet-folder-tile__glyph {
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
+/* The glyph is drawn at the shape's size, whatever size the markup asks. */
+.crewlet-folder-tile__glyph > svg {
+  width: var(--crewlet-folder-tile-glyph-icon);
+  height: var(--crewlet-folder-tile-glyph-icon);
 }
 
 .crewlet-folder-tile__body {
@@ -16764,35 +16847,105 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 /*
- * THE FACTS WRAP, NEVER CUT. "Everyone" and "Nothing you can open yet" are
- * both things a reader has to read, and four tiles across a laptop's page do
- * not have room for them on one line: the count moves under who can see the
- * folder rather than losing its end to an ellipsis. The two are told apart by
- * the visibility glyph and the gap between them, not by a separator, so a
- * line that breaks never opens on a stray dot.
+ * THE FACTS ARE ONE RUN, WRAPPED AND NEVER CUT. "Everyone · 12 artifacts · 2
+ * folders" is the card's run: each fact after the first opens with the card's
+ * quiet dot. Four tiles across a laptop's page have no room for "Only you ·
+ * Nothing you can open yet" on one line, so the run breaks between who can
+ * see the folder and what is inside rather than losing its end to an
+ * ellipsis, and the count moves as one.
+ *
+ * A LINE NEVER OPENS ON A DOT. Every fact carries its dot in the separator's
+ * width before it, and the run is drawn that width to the left of the facts'
+ * own edge, which clips the overhang: the first fact of every line, the very
+ * first and any the run broke onto a new line, lays its dot in the clipped
+ * strip. The clip is horizontal only, so nothing above or below is cut.
+ *
+ * ONE QUIET INK for the run: who can see the folder takes the facts' tertiary
+ * step rather than the access label's stronger word, so the line reads as one
+ * calm caption beside the name, as a card's facts do.
  */
 .crewlet-folder-tile__facts {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px var(--spacing-3);
+  display: block;
   min-width: 0;
+  overflow-x: clip;
   color: var(--color-text-tertiary);
   font-size: var(--crewlet-folder-tile-facts);
   line-height: 1.35;
 }
 
-.crewlet-folder-tile__visibility {
-  display: inline-flex;
-  flex: none;
+.crewlet-folder-tile__run {
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  row-gap: 2px;
+  min-width: 0;
+  margin-inline-start: calc(-1 * var(--crewlet-folder-tile-separator));
 }
 
-.crewlet-folder-tile__contents {
+.crewlet-folder-tile__fact {
+  position: relative;
+  display: block;
   min-width: 0;
+  max-width: 100%;
+  padding-inline-start: var(--crewlet-folder-tile-separator);
   overflow-wrap: anywhere;
 }
 
+.crewlet-folder-tile__fact::before {
+  position: absolute;
+  inset-inline-start: 0;
+  width: var(--crewlet-folder-tile-separator);
+  text-align: center;
+}
+
+.crewlet-folder-tile__fact::before,
+.crewlet-folder-tile__count-dot::before {
+  content: '·';
+  content: '·' / '';
+}
+
+/*
+ * INSIDE THE COUNT the same dot in the same width, carried at the end of the
+ * part before it. Each part is one piece on the line, so "3 artifacts · 3
+ * folders" moves to its own line as one fact, a count too long even for that
+ * breaks only after a dot, and a part wraps within itself only when it alone
+ * is wider than the tile.
+ */
+.crewlet-folder-tile__count-part {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.crewlet-folder-tile__count-dot {
+  display: inline;
+  padding-inline: calc((var(--crewlet-folder-tile-separator) - 0.3em) / 2);
+}
+
+.crewlet-folder-tile__visibility {
+  display: flex;
+  align-items: center;
+}
+
+.crewlet-folder-tile__visibility > .crewlet-artifact-access {
+  color: inherit;
+}
+
+/*
+ * ON A ROW, WHO CAN SEE IT IS ITS GLYPH, as a gallery card's facts draw an
+ * artifact's access: a phone's row has room for one line of facts, and "Only
+ * you · Nothing you can open yet" beside a glyph and a menu broke onto a
+ * second, leaving rows of two heights. The word is still there, hidden from
+ * the eye only (the package's visually hidden recipe, switched by the shape),
+ * so the tile's description keeps saying "Everyone", and the label's title
+ * names it under the pointer.
+ */
+.crewlet-folder-tile__visibility .crewlet-artifact-access__word {
+  position: var(--crewlet-folder-tile-word-position);
+  width: var(--crewlet-folder-tile-word-size);
+  height: var(--crewlet-folder-tile-word-size);
+  clip-path: var(--crewlet-folder-tile-word-clip);
+}
+
 /*
  * THE TILE'S OWN CONTROLS, at its trailing edge and outside the link: hidden
  * until the tile is hovered or holds focus, so a gallery rests as names, and
@@ -16822,6 +16975,8 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .crewlet-card.crewlet-folder-tile.is-interactive,
+  .crewlet-folder-tile__glyph,
   .crewlet-folder-tile__actions {
     transition: none;
   }
@@ -24718,6 +24873,125 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ReviewList-TIN6C2JN.css */
+/*
+ * ReviewList: a setup's parts in one bordered box, a row each, before the
+ * setup is finished (ReviewList.tsx).
+ *
+ * A ROW IS A GRID OF THREE COLUMNS: the glyph's tile, the part (its title and
+ * state over its values), and the action. The values sit under the title, at
+ * its start, and reach the row's end under the action, so a row of logos or
+ * swatches has the whole width and the titles still run down one line.
+ */
+.crewlet-review-list {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  list-style: none;
+}
+
+.crewlet-review-list__item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    'icon head action'
+    '.    body body'
+    '.    error error';
+  align-items: center;
+  column-gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.crewlet-review-list__item + .crewlet-review-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-review-list__icon {
+  grid-area: icon;
+}
+
+.crewlet-review-list__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-review-list__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-review-list__action {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  grid-area: action;
+}
+
+.crewlet-review-list__body {
+  grid-area: body;
+  min-width: 0;
+  margin-top: var(--spacing-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+/* WHAT HOLDS THE FINISH, in the danger ink with its glyph, so it never rests on the hue alone. */
+.crewlet-review-list__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  grid-area: error;
+  margin: var(--spacing-2) 0 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-review-list__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+/* WITHOUT A GLYPH the part starts at the row's start, with no empty column before it. */
+.crewlet-review-list__item--plain {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'head action'
+    'body body'
+    'error error';
+}
+
+/* A NARROW LIST gives the values the whole row: an indent of a tile and a gap is a fifth of a phone. */
+@container (width < 28rem) {
+  .crewlet-review-list__item {
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .crewlet-review-list__item:not(.crewlet-review-list__item--plain) {
+    grid-template-areas:
+      'icon head action'
+      'body body body'
+      'error error error';
+  }
+}
+
+
 /* RichEditor-NPD2KAPS.css */
 /*
  * The rich editor (RichEditor.tsx).
@@ -26695,7 +26969,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-GZK5UDKC.css */
+/* SetupWizard-Z54H6RYW.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -26705,27 +26979,58 @@ svg.crewlet-select__chevron {
  * 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.
+ *
+ * THE TRACKS ARE THE MEASURE, NOT THE WINDOW. The content's track is at most
+ * its column, so on a window wider than the parts the aside stands right
+ * beside the content and the header and the footer end where the parts do.
+ * A track of 1fr with the content held to 640px inside it left the preview
+ * stranded at the window's far edge with a void between, and Continue a
+ * window's width from the fields it continues. A wide step (`wide`) takes
+ * the content and the aside's columns together, so its footer ends where
+ * every other step's does.
  */
 
 .crewlet-setup-wizard {
+  --crewlet-setup-wizard-rail: 240px;
+  --crewlet-setup-wizard-column: 640px;
+  --crewlet-setup-wizard-aside: 320px;
+  --crewlet-setup-wizard-gap: var(--spacing-8);
+  --crewlet-setup-wizard-wide: calc(
+    var(--crewlet-setup-wizard-column) + var(--crewlet-setup-wizard-gap) + var(--crewlet-setup-wizard-aside)
+  );
+
   container-type: inline-size;
   min-width: 0;
 }
 
 .crewlet-setup-wizard__frame {
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
   grid-template-areas:
     'head head'
     'rail content'
     'rail aside'
     'foot foot';
   grid-template-rows: auto auto 1fr auto;
-  column-gap: var(--spacing-8);
+  column-gap: var(--crewlet-setup-wizard-gap);
   row-gap: var(--spacing-6);
   min-width: 0;
 }
 
+/* With no aside there is no row for one, and no second gap above the footer. */
+.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+  grid-template-areas:
+    'head head'
+    'rail content'
+    'foot foot';
+  grid-template-rows: auto 1fr auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the content's and the aside's columns together. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__frame {
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+}
+
 .crewlet-setup-wizard__head {
   display: flex;
   flex-direction: column;
@@ -26757,7 +27062,6 @@ svg.crewlet-select__chevron {
   grid-area: content;
   box-sizing: border-box;
   width: 100%;
-  max-width: 640px;
   min-width: 0;
 }
 
@@ -26800,7 +27104,6 @@ svg.crewlet-select__chevron {
   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);
@@ -26810,6 +27113,14 @@ svg.crewlet-select__chevron {
  * 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.
+ *
+ * IT ENDS THE SCREEN. Inside an `AppShell` the content column keeps room
+ * under its last line (`--crewlet-app-shell-content-end`, 64px wide), and a
+ * docked bar is that last line: the footer takes the room back, so at the end
+ * of a scroll it rests on the scroller's bottom edge, where it stood while
+ * scrolling, rather than rising 64px with a strip of empty sheet under it.
+ * Outside a shell there is no room to take back and the margin is zero. The
+ * wizard is the screen's last element for the same reason.
  */
 .crewlet-setup-wizard__footer {
   position: sticky;
@@ -26820,6 +27131,7 @@ svg.crewlet-select__chevron {
   align-items: center;
   gap: var(--spacing-2);
   grid-area: foot;
+  margin-bottom: calc(-1 * var(--crewlet-app-shell-content-end, 0px));
   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);
@@ -26838,15 +27150,16 @@ svg.crewlet-select__chevron {
   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. */
+/*
+ * BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in
+ * view. Written at the specificity of the wide and no-aside rules above, and
+ * after them, so the three shapes are decided by source order alone.
+ */
 @container (min-width: 70rem) {
-  .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr) 320px;
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
+    grid-template-columns:
+      var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column))
+      var(--crewlet-setup-wizard-aside);
     grid-template-areas:
       'head head head'
       'rail content aside'
@@ -26854,15 +27167,19 @@ svg.crewlet-select__chevron {
     grid-template-rows: auto 1fr auto;
   }
 
-  /* With no aside, nothing is held for one: the content takes its column too. */
+  /* With no aside, nothing is held for one. */
   .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
     grid-template-areas:
       'head head'
       'rail content'
       'foot foot';
   }
 
+  .crewlet-setup-wizard--wide.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+  }
+
   .crewlet-setup-wizard__aside {
     position: sticky;
     top: var(--spacing-5);
@@ -26878,7 +27195,7 @@ svg.crewlet-select__chevron {
  * position line, and scrolls away with the page rather than covering it.
  */
 @media (width < 640px) {
-  .crewlet-setup-wizard__frame {
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'head'
@@ -26890,6 +27207,14 @@ svg.crewlet-select__chevron {
     row-gap: var(--spacing-5);
   }
 
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-areas:
+      'head'
+      'rail'
+      'content'
+      'foot';
+  }
+
   .crewlet-setup-wizard__rail {
     position: static;
     display: flex;
@@ -26906,6 +27231,26 @@ svg.crewlet-select__chevron {
     padding-top: 0;
     border-top: 0;
   }
+
+  /*
+   * THE ACTIONS SHARE TWO ROWS: the way out and the step's other actions on
+   * the first, the step's last action, its primary, the whole width on the
+   * second, under the thumb. The two groups give their buttons to the
+   * footer's own row, so three short buttons no longer take three lines of a
+   * footer held over the content.
+   */
+  .crewlet-setup-wizard__footer-start,
+  .crewlet-setup-wizard__footer-end {
+    display: contents;
+  }
+
+  .crewlet-setup-wizard__footer-end > :first-child {
+    margin-inline-start: auto;
+  }
+
+  .crewlet-setup-wizard__footer-end > :last-child {
+    flex: 1 1 100%;
+  }
 }
 
 .crewlet-setup-wizard__position {