@crewlethq/ui 0.84.2 → 0.86.0

package/dist/styles.css

@@ -5026,6 +5026,221 @@ a.crewlet-make-row__item:active {
 }
 
 
+/* AttentionList-LVX7KRET.css */
+/*
+ * What needs a person: a card like the page's other panels (Card supplies the
+ * surface, the hairline, the corner and the header), rows a line or two high,
+ * and the tone in each row's glyph alone. Nothing here tints the frame: the
+ * row's action is the page's own button, and the panel sits as calmly as the
+ * cards beside it.
+ */
+
+/* The header's counts: each tone's glyph in its ink beside a figure in the
+   header's quiet type, so the summary reads as the rows' glyphs, small. */
+.crewlet-attention-list__counts {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.crewlet-attention-list__count {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-attention-list__count.is-danger svg {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-attention-list__count.is-warning svg {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-attention-list__count.is-info svg {
+  color: var(--color-feedback-info-ink);
+}
+
+/*
+ * ONE SET OF COLUMNS FOR EVERY ROW. The list holds the tracks and each row is
+ * a subgrid of them, so a Details and a fix stand in one column down the
+ * panel whatever the width of each fix, every title starts on one line
+ * whether or not its row has a mark, and the body that opens under a row
+ * starts on that line too. The mark's track is there only when a row has a
+ * mark (`--media`), since an empty track still takes a gap each side.
+ */
+.crewlet-attention-list__rows {
+  --crewlet-attention-list-line: calc(var(--font-size-sm) * var(--font-line-height-normal));
+
+  display: grid;
+  grid-template-columns: [glyph] auto [text] minmax(0, 1fr) [details] auto [action] auto [end];
+  column-gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-attention-list__rows--media {
+  grid-template-columns: [glyph] auto [media] auto [text] minmax(0, 1fr) [details] auto [action] auto [end];
+}
+
+.crewlet-attention-list__item {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.crewlet-attention-list__item + .crewlet-attention-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A ghost Details takes no gutter back here: it stands in a column of its
+   own, and pulled out it would reach into the words before it. */
+.crewlet-attention-list__row {
+  --crewlet-btn-flush-outdent: 0px;
+
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+/* THE GLYPH STANDS ON THE TITLE'S LINE, as a Callout's does: a box one title
+   line tall at the row's top, the glyph centred in it. Centred on the row, it
+   would sit beside the second line of a title that wraps (a phone's width
+   wraps them). A row of one line is centred whole, since its line is the
+   row's middle. */
+.crewlet-attention-list__glyph {
+  display: inline-flex;
+  grid-column: glyph;
+  align-self: start;
+  align-items: center;
+  block-size: var(--crewlet-attention-list-line);
+}
+
+.crewlet-attention-list__row:not(:has(.crewlet-attention-list__meta)) .crewlet-attention-list__glyph {
+  align-self: center;
+}
+
+.crewlet-attention-list__glyph.is-danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-attention-list__glyph.is-warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-attention-list__glyph.is-info {
+  color: var(--color-feedback-info-ink);
+}
+
+/* A MARK IS CENTRED ON THE TWO LINES, as a table row centres its mark: it is
+   the height of the pair, not of a title's line. */
+.crewlet-attention-list__media {
+  display: inline-flex;
+  grid-column: media;
+}
+
+.crewlet-attention-list__text {
+  display: flex;
+  grid-column: text;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-attention-list__line {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-attention-list__meta {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Details and the fix are each a column of their own (see the rows). */
+.crewlet-attention-list__end {
+  display: contents;
+}
+
+.crewlet-attention-list__details {
+  grid-column: details;
+}
+
+.crewlet-attention-list__action {
+  display: inline-flex;
+  grid-column: action;
+  justify-self: end;
+}
+
+.crewlet-attention-list__details[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+/* What opens under a row starts on its title's line and keeps the card's edge. */
+.crewlet-attention-list__body {
+  grid-column: text / end;
+  padding: 0 var(--spacing-4) var(--spacing-3) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+/* The fold's control on a row of its own, its words on the card's text edge,
+   where every glyph stands. */
+.crewlet-attention-list__foot {
+  padding: var(--spacing-1) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@media (width < 640px) {
+  /* No mark, and Details and the fix wrap onto a line of their own under the
+     words, Details first on the title's line. */
+  .crewlet-attention-list__rows,
+  .crewlet-attention-list__rows--media {
+    grid-template-columns: [glyph] auto [text] minmax(0, 1fr) [end];
+  }
+
+  .crewlet-attention-list__row {
+    --crewlet-btn-flush-outdent: initial;
+  }
+
+  .crewlet-attention-list__media {
+    display: none;
+  }
+
+  .crewlet-attention-list__line,
+  .crewlet-attention-list__meta {
+    white-space: normal;
+  }
+
+  .crewlet-attention-list__row:not(:has(.crewlet-attention-list__meta)) .crewlet-attention-list__glyph {
+    align-self: start;
+  }
+
+  .crewlet-attention-list__end {
+    display: flex;
+    grid-column: text / end;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-2);
+  }
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -11939,7 +12154,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* ChoiceCards-TVMBO3HZ.css */
+/* ChoiceCards-KHJW2FKO.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
@@ -11970,10 +12185,17 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
     minmax(min(100%, var(--crewlet-choice-cards-min)), 1fr)
   );
   grid-auto-rows: auto;
+  /* DENSE, for a chosen card's detail: it spans every column after its card,
+     and the cards after it on that row pack back in before it (see below). */
+  grid-auto-flow: row dense;
   column-gap: var(--spacing-3);
   row-gap: 0;
 }
 
+.crewlet-choice-cards--xs {
+  --crewlet-choice-cards-min: 8rem;
+}
+
 .crewlet-choice-cards--sm {
   --crewlet-choice-cards-min: 15rem;
 }
@@ -12136,6 +12358,32 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   border-color: var(--color-border-strong);
 }
 
+/* A TAG THAT SAYS A STATE takes its feedback ink and line, in the card's own
+   pill: a kit Tag handed in drew a second pill inside this one. */
+.crewlet-choice-cards__tag.is-success,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-success {
+  border-color: var(--color-feedback-success-line);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-choice-cards__tag.is-warning,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-warning {
+  border-color: var(--color-feedback-warning-line);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-choice-cards__tag.is-danger,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-danger {
+  border-color: var(--color-feedback-danger-line);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-choice-cards__tag.is-info,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-info {
+  border-color: var(--color-feedback-info-line);
+  color: var(--color-feedback-info-ink);
+}
+
 /*
  * THE NAME IS THE TITLE LINE'S STRUT: at least the title step tall, its words
  * centred in it. The title wraps (a tag that does not fit takes a line of its
@@ -12314,8 +12562,24 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   }
 }
 
+/*
+ * A CHOSEN CARD'S DETAIL: the narrower choice it opens, on a line of its own
+ * straight under the chosen card's row (an item of the grid after its card,
+ * across every column, packed densely), so it reads as part of that choice and
+ * not as a second question. NO FRAME OF ITS OWN: what it holds is usually a
+ * framed list, and a tinted, bordered panel round it was a box in a box. It
+ * keeps the gap a row of cards keeps below it.
+ */
+.crewlet-choice-cards__detail {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin-block-end: var(--spacing-3);
+}
+
 
-/* ChoiceList-JN4PPNFW.css */
+/* ChoiceList-ZQMZTEZX.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
@@ -12324,8 +12588,14 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * which is the focus ring's colour.
  */
 .crewlet-choice-list {
-  /* The platform's radio, sized here so a panel can line up with the text beside it. */
-  --crewlet-choice-list-radio-size: 13px;
+  /*
+   * THE COMPACT CONTROL STEP, the box a compact Checkbox draws beside the same
+   * 13px words: a control takes the step of the text it sits beside (16px
+   * beside 14px, 14px beside 13px), and at 13px this radio matched no other
+   * control in the kit, so a list nested under a card's 16px radio, or beside
+   * a compact checkbox, drew a third size.
+   */
+  --crewlet-choice-list-radio-size: 14px;
   /* The step between two answers. Every row's pointer target reaches half of it. */
   --crewlet-choice-list-gap: var(--spacing-1);
   /*
@@ -12451,7 +12721,8 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
-  margin: 3px 0 0;
+  /* Centred on the label's first line: its 13px in the body's leading. */
+  margin: calc((var(--font-size-compact) * var(--font-line-height-body) - var(--crewlet-choice-list-radio-size)) / 2) 0 0;
   border: 1px solid var(--color-border-control);
   border-radius: 50%;
   background: transparent;
@@ -12493,28 +12764,37 @@ 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. */
+/*
+ * WHY A DISABLED CHOICE CANNOT BE MADE, on a line of its own under the
+ * detail, in the warning ink, as a ChoiceCards card puts it on its own row.
+ * Run on after the detail, it read as the detail's next clause, and in a
+ * narrow column it wrapped wherever the detail happened to end.
+ */
 .crewlet-choice-list__reason {
+  display: block;
   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. */
+/* A tag says something ABOUT an answer ("Recommended"), so it is set in a
+   quiet 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. It is
+   the pill a ChoiceCards card draws its tag in, so one word beside a choice's
+   name reads the same in a list as on a card in the same step, where it was an
+   11px capital label here and a pill there. It stands on the label's line. */
 .crewlet-choice-list__tag {
-  padding-top: 2px;
-  font-size: var(--font-size-2xs);
-  font-weight: 500;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
+  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 selected fill the default edge all but vanishes in light, so the tag takes the strong one, as a chosen card's does. */
+.crewlet-choice-list__row.is-checked .crewlet-choice-list__tag {
+  border-color: var(--color-border-strong);
+}
+
 /* A SELECTED CHOICE'S PANEL is part of the choice: it continues the row's
    fill under it, and its content starts where the label does, not under the
    radio. */
@@ -14435,7 +14715,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Copyable-IS3MHMPL.css */
+/* Copyable-P5AMRHFX.css */
 /*
  * Copyable: a value and the one control that copies it.
  *
@@ -14516,11 +14796,15 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 
 /* ---- inline ------------------------------------------------------------ */
 
+/* INLINE TAKES THE ROW'S OWN REGISTER: in a detail row it is one of the
+   row's values, so it is their size and ink, in the mono face. At a fixed
+   12px in the secondary ink, an address was the one value in its list a step
+   smaller and quieter than the values around it. */
 .crewlet-copyable--inline .crewlet-copyable__value {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   background: transparent;
   padding: 0;
-  color: var(--color-text-secondary);
+  color: inherit;
 }
 
 /* ---- block ------------------------------------------------------------- */
@@ -14541,13 +14825,23 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   padding: var(--spacing-2) var(--spacing-3);
 }
 
+/*
+ * A BLOCK SHOWS ITS VALUE WHOLE, wrapped at any character and with every
+ * space kept: it is the variant for an address a reader must allowlist or a
+ * command they must check before running it. Held to one line, it scrolled
+ * past a phone's width behind an ellipsis, with no scrollbar to say there was
+ * more, and the reader saw "https://example.com/webho…" of the address they
+ * were asked to copy into a vendor's form.
+ */
 .crewlet-copyable--block .crewlet-copyable__value {
   font-size: var(--font-size-compact);
   color: var(--color-text-primary);
   background: transparent;
   padding: 0;
-  white-space: nowrap;
-  overflow-x: auto;
+  white-space: pre-wrap;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
   flex: 1;
 }
 
@@ -14859,7 +15153,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* DataGrid-Q26F2V5Q.css */
+/* DataGrid-SAHEL4SN.css */
 /*
  * DataGrid: a list as columns, one track list on the grid.
  *
@@ -15527,6 +15821,63 @@ button.crewlet-data-grid__row-link {
   overflow-wrap: anywhere;
 }
 
+/* A VALUE THAT LEADS WITH A PICTURE IS NAMED ON ITS WORDS' LINE. The name
+   stands on the value's first baseline, and a row of a mark beside two lines
+   (a vendor's mark beside a name and its host) reads its baseline off its
+   first item, the picture, whose baseline is its bottom edge: the name stood
+   on the second line. The words after the picture take part in baseline
+   alignment instead, so the row's baseline is theirs; beside a picture no
+   taller than they are, they keep the place they had.
+   ONLY A PICTURE WITH NO WORDS OF ITS OWN: an svg or an img, or a box that
+   holds nothing but one. A monogram avatar or an avatar stack has its
+   initials' baseline already, and its name stood on its line; matched by its
+   role, the shorter words beside it rose to the top of the row, off the
+   picture's centre. */
+:where(.crewlet-data-grid[data-stacked])
+  .crewlet-data-grid__cell
+  > *
+  > :is(svg, img, :has(> :is(svg, img)):not(:has(> :not(svg, img)))):first-child
+  + * {
+  align-self: baseline;
+}
+
+/* THE ROW'S ACTIONS STAND ON ITS FIRST LINE, at its end, as a card's head
+   carries its menu. On a line of their own after every value they sat alone
+   under the names, with nothing beside them to say whose they were. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: var(--spacing-2);
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1;
+}
+
+/* ONLY THE FIRST LINE SHARES ITS WIDTH WITH THE ACTIONS. Their track is sized
+   to them, and a line held to the other track gave that width up with nothing
+   beside it: every line of a card ended a third of a phone's row short of its
+   edge, and its value wrapped. Every line after the first (a value with
+   nothing in it draws none) spans the row. */
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row:has(> .crewlet-data-grid__cell--action)
+  > .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action):not(:empty)
+  ~ .crewlet-data-grid__cell:not(.crewlet-data-grid__cell--action) {
+  grid-column: 1 / -1;
+}
+
+:where(.crewlet-data-grid[data-stacked]:not([data-phone-rows='compact']))
+  .crewlet-data-grid__row
+  > .crewlet-data-grid__cell--action {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+}
+
 /* ---- THE COMPACT ROW (`phoneRows="compact"`) ---------------------------
    TWO LINES, NO LABELS: what the row is, then its marks. One flex run that
    breaks once: the lead cells first, a zero-height full-width `::after`
@@ -19258,7 +19609,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Disclosure-D727FN5X.css */
+/* Disclosure-RJSKKO7Z.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
  *
@@ -19478,6 +19829,26 @@ svg.crewlet-datetime__chevron {
   padding: var(--spacing-1) var(--spacing-2);
 }
 
+/*
+ * FLUSH: the chevron and the panel start on the line the words around the
+ * section start on. The trigger's start inset is taken back (its hover ground
+ * and its inset ring reach into the gutter instead, as a flush Button's do),
+ * and the panel keeps no inset of either side. Inset, a section opened under
+ * a sentence put its chevron and its content a step in from that sentence.
+ */
+.crewlet-disclosure--flush .crewlet-disclosure__trigger {
+  margin-inline-start: calc(-1 * var(--spacing-2));
+  width: calc(100% + var(--spacing-2));
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__bar > .crewlet-disclosure__trigger {
+  width: auto;
+}
+
+.crewlet-disclosure--flush .crewlet-disclosure__panel {
+  padding-inline: 0;
+}
+
 /*
  * An aside: what was considered, not what was decided. The rule down its edge
  * is what lets a reader skip the block by its shape.
@@ -24088,6 +24459,53 @@ a.crewlet-icon-btn {
 }
 
 
+/* KeyValueRows-US5KW7JK.css */
+/*
+ * KeyValueRows: keys and their values as rows under one column head
+ * (KeyValueRows.tsx).
+ */
+
+/* The rows, then Add under them, a row's gap apart. */
+.crewlet-key-value-rows__body,
+.crewlet-key-value-rows__table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * EVERY ROW STANDS ON ITS FIELDS' TOP EDGE, so a key's error grows its own
+ * cell downward and nothing beside it moves. The last track is the remove
+ * button's, a square the fields' height, and the head keeps it empty so the
+ * value's name stands over the value column.
+ */
+.crewlet-key-value-rows__head,
+.crewlet-key-value-rows__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--size-control-md);
+  align-items: start;
+  gap: var(--spacing-2);
+}
+
+/* The head stands over the first row at a field label's distance from its field. */
+.crewlet-key-value-rows__head {
+  margin-block-end: calc(var(--spacing-1) - var(--spacing-2));
+}
+
+.crewlet-key-value-rows__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* Add hugs its words, on the fields' start edge, rather than spanning the list. */
+.crewlet-key-value-rows__add {
+  display: flex;
+}
+
+
 /* Layer-J222IFNX.css */
 /*
  * The portal target a LayerHost provides.
@@ -26382,6 +26800,171 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
 }
 
 
+/* MemberPicker-ZD35VEK6.css */
+/*
+ * Who gets something, as one list: a group row with its box, its name and
+ * its count, opening to its members, each a row of face, name and one quiet
+ * line. Rows stand at the kit's compact list height; the only colour is the
+ * box's own accent and a left-out member's quieter ink.
+ *
+ * A LIST'S TYPE, NOT A FORM'S: names in the 13px every list and table row
+ * sets a name in, at the medium weight a group's name takes, and every box the
+ * compact Checkbox's (14px beside 13px words). At the body's 14px, with a
+ * 16px box over 14px ones, it read a step larger than every list around it.
+ */
+.crewlet-member-picker {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-member-picker__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-member-picker__list,
+.crewlet-member-picker__members {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-member-picker__list {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-member-picker__group + .crewlet-member-picker__group {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-member-picker__group-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-1);
+}
+
+/* The open control is the kit's small ghost IconButton; only its chevron
+   turns here, a quarter turn once the group is open. */
+.crewlet-member-picker__toggle svg {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-member-picker__group.is-open .crewlet-member-picker__toggle svg {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-member-picker__toggle svg {
+    transition: none;
+  }
+}
+
+.crewlet-member-picker__count {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__members {
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-member-picker__member {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-lg);
+  /* Each member's box under its group's, past the open control and its gap. */
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) calc(var(--spacing-1) + var(--size-control-sm) + var(--spacing-2));
+}
+
+/* A MEMBER'S BOX STANDS UNDER ITS GROUP'S. The bare Checkbox centres its box
+   on the square the pointer floor allows, which set the box half the
+   difference in from the row's edge, a few pixels right of the group's box
+   above it. That inset is taken back, and the pointer square reaches into
+   the row's padding instead. */
+.crewlet-member-picker__members:not(.is-ungrouped) .crewlet-checkbox--bare {
+  margin-inline-start: calc((var(--crewlet-checkbox-size) - var(--size-target-min)) / 2);
+}
+
+.crewlet-member-picker__members.is-ungrouped {
+  border-top: 0;
+  background: transparent;
+}
+
+.crewlet-member-picker__members.is-ungrouped .crewlet-member-picker__member {
+  padding-inline-start: var(--spacing-3);
+}
+
+.crewlet-member-picker__avatar {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The name and its line label the member's box, so they take the pointer a
+   Checkbox's own words take. */
+.crewlet-member-picker__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.crewlet-member-picker__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__detail {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__mark {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__member.is-left-out .crewlet-member-picker__name,
+.crewlet-member-picker__mark.is-left-out {
+  color: var(--color-text-tertiary);
+}
+
+@media (width < 480px) {
+  .crewlet-member-picker__member {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    padding-inline-start: var(--spacing-3);
+  }
+
+  .crewlet-member-picker__mark {
+    grid-column: 3;
+  }
+}
+
+/* A group's name is the row's title: the medium weight, at the list's 13px. */
+.crewlet-member-picker__group-row .crewlet-checkbox__label {
+  font-weight: var(--font-weight-medium);
+}
+
+
 /* MentionChip-W7MZZVRZ.css */
 /*
  * A mention in a message's words: a chip in the line, in the info tone's
@@ -31194,6 +31777,106 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* RailList-N2ZBPRM2.css */
+/*
+ * RailList: a directory in a card, a rail of groups beside the chosen
+ * group's list, folding into a picker where the card is narrow
+ * (RailList.tsx).
+ *
+ * SIZED BY ITS OWN WIDTH, NOT THE WINDOW'S, because the same directory stands
+ * in a page and in a sheet: the root is an inline-size container, and under
+ * the rail's room (44rem) the rail goes and the picker shows. Both are always
+ * rendered and the stylesheet decides, so the fold costs no measurement and
+ * never draws the wrong one first.
+ */
+.crewlet-rail-list {
+  container: crewlet-rail-list / inline-size;
+  min-width: 0;
+}
+
+/* The bar across the card's top: the caller's search and chips, and the folded picker. */
+.crewlet-rail-list__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/* Wide, the rail is the choice: the picker and a bar that holds nothing else are not drawn. */
+.crewlet-rail-list__picker,
+.crewlet-rail-list__bar--picker-only {
+  display: none;
+}
+
+/* The rail at a fixed width (13rem by default), the list taking the rest. */
+.crewlet-rail-list__body {
+  display: grid;
+  grid-template-columns: var(--crewlet-rail-list-rail, 13rem) minmax(0, 1fr);
+  min-width: 0;
+}
+
+/* The rail on a hairline of its own, its note a step under its rows. */
+.crewlet-rail-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+/* The note starts on the rows' words, inside the dense rail's own inset. */
+.crewlet-rail-list__note {
+  margin: 0;
+  padding-inline: var(--spacing-2);
+}
+
+.crewlet-rail-list__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* What the chosen group holds, over its list on a hairline, at the list's own inset. */
+.crewlet-rail-list__about {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/*
+ * A GRID AT THE LIST'S TOP TAKES NO RULE OF ITS OWN. A grid in a card draws
+ * one rule above its head to part it from the card's head (DataGrid.css);
+ * here the bar's hairline, the description's or the card's own edge is
+ * already that rule, and the grid's drew a second line under it.
+ */
+.crewlet-rail-list__list > .crewlet-data-grid:first-child,
+.crewlet-rail-list__about + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* Under the rail's room the list takes the card, and the picker takes the rail's place in the bar. */
+@container crewlet-rail-list (width < 44rem) {
+  .crewlet-rail-list__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-rail-list__rail {
+    display: none;
+  }
+
+  .crewlet-rail-list__picker {
+    display: inline-flex;
+  }
+
+  .crewlet-rail-list__bar--picker-only {
+    display: flex;
+  }
+}
+
+
 /* ReactionBar-XXI4V7XG.css */
 /*
  * A message's reactions: one pill to an emoji, then the add pill. A pill at
@@ -33165,7 +33848,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SegmentedControl-B7XCUOML.css */
+/* SegmentedControl-7GY2KM44.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -33304,6 +33987,17 @@ button.crewlet-presence-stack__member:focus-visible {
   background: var(--color-brand-accent);
 }
 
+/* A COUNT IN A CHIP IS A FIGURE IN THE CHIP'S OWN INK, as on a FilterChip and
+   a lens chip: no pill of its own, since a box inside a box beside its word
+   says nothing more. On the chosen chip the inset pill's tertiary figure lay
+   on the accent fill at 1.4:1; inheriting, it is the label's on-accent ink. */
+.crewlet-segmented--chips .crewlet-count {
+  min-width: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
 /* What completes the last choice sits in the row, at the chips' own height
    and in their face: a field at its own control step stood taller than every
    chip beside it. */
@@ -39208,7 +39902,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StepList-A4YVU4JI.css */
+/* StepList-OAJ45IBX.css */
 /*
  * A request's steps: a well on the inset ground, an ordered list of steps
  * each on a three-track grid (the 16px state column, the words, the
@@ -39246,7 +39940,8 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-step-mark--refused,
-.crewlet-step-mark--stopped {
+.crewlet-step-mark--stopped,
+.crewlet-step-mark--pending {
   color: var(--color-text-tertiary);
 }
 
@@ -39299,6 +39994,16 @@ svg.crewlet-select__chevron {
   overflow-wrap: anywhere;
 }
 
+/*
+ * A STEP THAT HAS NOT STARTED IS QUIET THROUGH: its words take the tertiary
+ * ink its mark and its detail already have, so the whole step reads as one
+ * thing still to come rather than as a label in full ink beside a dimmed
+ * mark.
+ */
+.crewlet-step-list__step--pending .crewlet-step-list__label {
+  color: var(--color-text-tertiary);
+}
+
 /*
  * WHAT THE STEP ASKED FOR, in the mono face. Each piece between separators is
  * one inline block, so a line breaks only between pieces (at a space, or
@@ -40675,7 +41380,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TableCells-TKSNLRK3.css */
+/* TableCells-ZALZLLEF.css */
 /* The read-only table cells. Each one holds a single line and shrinks inside
    its column (`min-width: 0`), so a long value is cut with an ellipsis and
    its whole text on the title rather than standing the row two lines tall. */
@@ -40791,6 +41496,34 @@ b.crewlet-switcher__match {
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * A VALUE OVER A QUIETER LINE (TableTwoLineCell), each line its own block cut
+ * on one line. A column of boxes rather than two runs of text, so neither
+ * line takes the line box of the words around it, and the cell is exactly
+ * the two lines tall. `min-width: 0` lets the column shrink inside a grid's
+ * cell, which is what cuts the lines rather than pushing the column wider.
+ */
+.crewlet-table-cell__lines {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark is centred against both lines, as an entity's badge is against its name. */
+.crewlet-table-cell__two-line {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark keeps its size: the lines give way to the column, never the mark. */
+.crewlet-table-cell__two-line > :first-child {
+  flex: none;
+}
+
 
 /* Tabs-M2ELSU3V.css */
 /*