@crewlethq/ui 0.55.0 → 0.57.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-5LPXYUV3.css */
+/* AppShell-ZVCJRGXH.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -731,6 +731,25 @@
 .crewlet-app-shell {
   --crewlet-app-shell-rail: var(--size-shell-rail);
   --crewlet-app-shell-topbar: var(--size-shell-topbar);
+  /* What stands on the frame to the sheet's left: the rail's column, or
+     nothing where there is no rail or the rail is a drawer. The aside's cap
+     below subtracts it, so it is one name for both. */
+  --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
+  /* THE ASIDE'S TRACK, while it is a column: the panel's width and the inset
+     it is held off the window's edge by, capped so the sheet keeps the
+     host's floor (`--crewlet-app-shell-aside-reserve`, the page's sheet with
+     its own inset and hairlines). The host publishes both widths on this
+     element; with no reserve the panel takes the width it was given. */
+  --crewlet-app-shell-aside-track: calc(
+    min(
+      var(--crewlet-app-shell-aside),
+      max(
+        0px,
+        100% - var(--crewlet-app-shell-beside) - var(--crewlet-app-shell-aside-reserve, 0px) - var(--size-shell-inset)
+      )
+    ) +
+      var(--size-shell-inset)
+  );
   /* Where the drawer's veil sits while it is open. The shell replaces it with
      the surface's own place in the layer band; this default only has to clear
      the page chrome for the moment before that lands. */
@@ -761,10 +780,22 @@
  * beaten the narrow block's one.
  */
 .crewlet-app-shell--no-rail {
+  --crewlet-app-shell-beside: 0px;
   grid-template-columns: minmax(0, 1fr);
   padding-left: var(--size-shell-inset);
 }
 
+/* THE ASIDE AS A COLUMN: a third track, mirroring the rail. The page's sheet
+   keeps its column and is only narrower, so nothing under the bar moves but
+   its end edge. */
+.crewlet-app-shell[data-aside='column'] {
+  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+}
+
+.crewlet-app-shell--no-rail[data-aside='column'] {
+  grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+}
+
 /* The skip link, drawn only while it holds focus, over everything. */
 .crewlet-app-shell__skip {
   position: fixed;
@@ -1295,8 +1326,22 @@
  * and a short one does not shift every element sideways by the scrollbar's
  * width, which reads as the page jumping on each move.
  */
-.crewlet-app-shell__main {
+/*
+ * THE BODY: the row under the bar that the scroller and a peek column share.
+ * It takes the sheet's remaining height, and the scroller takes the row's
+ * remaining width, so a sheet with no peek draws exactly as it did before the
+ * row existed.
+ */
+.crewlet-app-shell__body {
+  display: flex;
   flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-app-shell__main {
+  flex: 1 1 0%;
+  min-width: 0;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
@@ -1395,11 +1440,131 @@
   background: var(--color-surface-scrim);
 }
 
+/*
+ * THE ASIDE: a second sheet on the frame, to the right of the page's, the
+ * same ground, hairline and corner, held off the window's top, right and
+ * bottom by the inset. The seam between the two sheets is the page sheet's
+ * own end inset, and the grip stands in it (`ResizeHandle`, outside the
+ * sheet that clips). The sheet clips what it holds to its corner, so the
+ * panel inside runs square to its edges.
+ */
+.crewlet-app-shell__aside {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  grid-column: -2 / -1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  margin: var(--size-shell-inset) var(--size-shell-inset) var(--size-shell-inset) 0;
+}
+
+/* The grip stands in the seam and over the sheet's hairline, which is the
+   edge it moves. */
+.crewlet-app-shell__aside > .crewlet-resize-handle--left {
+  left: calc((var(--crewlet-resize-handle-width) + 1px) * -1);
+  width: calc(var(--crewlet-resize-handle-width) + 1px);
+}
+
+.crewlet-app-shell__aside-sheet {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sheet);
+  background: var(--color-surface-background);
+  overflow: hidden;
+}
+
+/* A dialog takes focus on itself only as the stack's last resort, so its
+   own ring would draw round the whole panel; its content draws the focus.
+   Transparent rather than none, so forced colours still draw one. */
+.crewlet-app-shell__aside:focus {
+  outline: 2px solid transparent;
+}
+
+/*
+ * THE OVERLAY: over the page's end edge, lifted off it, behind a veil. It
+ * keeps the column's corner and inset, so the panel is the same sheet in
+ * both shapes and only its ground changes, and it never takes the whole
+ * window: a strip of the page stays in view to say what it is over.
+ */
+.crewlet-app-shell__aside[data-shape='overlay'] {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-overlay);
+  width: min(var(--crewlet-app-shell-aside), calc(100vw - var(--spacing-10) - var(--size-shell-inset) * 2));
+}
+
+.crewlet-app-shell__aside[data-shape='overlay'] > .crewlet-app-shell__aside-sheet {
+  box-shadow: var(--shadow-xl);
+}
+
+/* THE SHEET: the whole window on a phone, its inset, corner and hairline
+   collapsed to nothing, as the page's sheet is under the shell step. */
+.crewlet-app-shell__aside[data-shape='sheet'] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  margin: 0;
+}
+
+.crewlet-app-shell__aside[data-shape='sheet'] > .crewlet-app-shell__aside-sheet {
+  border-width: 0;
+  border-radius: 0;
+}
+
+/* What a modal aside sits on: the dialog's ground, the application faded
+   back into its own frame, rather than the rail drawer's darker scrim. */
+.crewlet-app-shell__aside-veil {
+  background: var(--color-surface-veil);
+}
+
+/*
+ * AN ENTRANCE, never an exit: the panel arrives from the edge it stands on,
+ * and leaves at once when it is closed, so a close is never a wait. The page
+ * beside a column reflows at once, because a grid track that appears has no
+ * width to start from.
+ */
+@keyframes crewlet-app-shell-aside-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--spacing-4));
+  }
+}
+
+@keyframes crewlet-app-shell-aside-slide {
+  from {
+    transform: translateX(calc(100% + var(--size-shell-inset)));
+  }
+}
+
+.crewlet-app-shell__aside[data-shape='column'] > .crewlet-app-shell__aside-sheet {
+  animation: crewlet-app-shell-aside-in var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
+.crewlet-app-shell__aside[data-shape='overlay'],
+.crewlet-app-shell__aside[data-shape='sheet'] {
+  animation: crewlet-app-shell-aside-slide var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
 @media (width < 1024px) {
   .crewlet-app-shell {
+    --crewlet-app-shell-beside: 0px;
     grid-template-columns: minmax(0, 1fr);
   }
 
+  /* The host decides the aside's shape, so a column it asks for under the
+     step is still a column; the rail is a drawer here and takes no track. */
+  .crewlet-app-shell[data-aside='column'],
+  .crewlet-app-shell--no-rail[data-aside='column'] {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  }
+
   .crewlet-app-shell--no-rail {
     padding-left: 0;
   }
@@ -1490,6 +1655,12 @@
   .crewlet-app-shell__rail-status-mark--action {
     transition: none;
   }
+
+  .crewlet-app-shell__aside[data-shape='column'] > .crewlet-app-shell__aside-sheet,
+  .crewlet-app-shell__aside[data-shape='overlay'],
+  .crewlet-app-shell__aside[data-shape='sheet'] {
+    animation: none;
+  }
 }
 
 /* ── the account row ───────────────────────────────────────────────────── */
@@ -2490,7 +2661,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-UMZCTARR.css */
+/* ArtifactBar-LEBMR35Y.css */
 /*
  * One row, one hairline under it, the height of a large row. The lead (the
  * way back, the glyph, the title, the version) takes what the end leaves it
@@ -2503,7 +2674,7 @@ button.crewlet-account-row__who:focus-visible {
  * width the presence stack goes (the People control still counts who is
  * here), then the labelled tools' words, and under a phone's two panes the
  * views, the unlabelled tools and the kind's glyph fold away, the first two
- * into More.
+ * into More. The host's own control at the end (`end`) never folds.
  */
 
 .crewlet-artifact-bar {
@@ -2764,6 +2935,19 @@ button.crewlet-account-row__who:focus-visible {
   display: none;
 }
 
+/* THE HOST'S OWN CONTROL ENDS THE ROW (`end`), such as the Ask button every
+   page bar ends with: a step further from the bar's own tools than they
+   stand from each other, so it reads as the frame's rather than the
+   artifact's. It never folds and never wraps; the title gives way to it. */
+.crewlet-artifact-bar__trail {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-inline-start: var(--spacing-1);
+  white-space: nowrap;
+}
+
 /* A rule between two groups of tools: the kind's, then every artifact's. */
 .crewlet-artifact-bar__rule {
   width: 1px;
@@ -2850,6 +3034,11 @@ button.crewlet-account-row__who:focus-visible {
     flex: none;
   }
 
+  /* The phone's row is tight, and so is the host's control beside More. */
+  .crewlet-artifact-bar__end > .crewlet-artifact-bar__trail {
+    margin-inline-start: 0;
+  }
+
   .crewlet-artifact-bar__end > .crewlet-artifact-bar__status {
     display: block;
     flex: 0 1 auto;
@@ -3971,165 +4160,49 @@ a.crewlet-make-row__item:active {
 }
 
 
-/* ArtifactPanel-KKUUIPEU.css */
+/* ArtifactPanel-TN4FFK2F.css */
 /*
- * The workspace is a row: the artifact's body, then at most one panel. The
- * body scrolls itself, so a panel beside it stays in view however far the
- * artifact is read; the panel's own body scrolls under its head.
+ * The artifact's presets of the side panel and its frame (`ArtifactPanel`,
+ * `ArtifactWorkspace`). SidePanel.css draws them; what is here is only what
+ * the artifact sets differently, and the names it has always published.
  *
- * ONE HAIRLINE between the two, the panel's start edge, and none at the
- * workspace's own edges: whatever frames the workspace already draws those.
+ * Every rule names BOTH classes, so it outranks the side panel's own rule of
+ * one class whichever of the two stylesheets a bundle puts first.
  */
 
-.crewlet-artifact-workspace {
-  container: crewlet-artifact-workspace / inline-size;
-  position: relative;
-  display: flex;
-  min-width: 0;
-  min-height: 0;
+/* The workspace answers to its own container name as well as the frame's,
+   so a page's `@container crewlet-artifact-workspace` query keeps matching. */
+.crewlet-side-panel-frame.crewlet-artifact-workspace {
+  container-name: crewlet-side-panel-frame crewlet-artifact-workspace;
 }
 
-.crewlet-artifact-workspace__body {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
-.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
-  display: none;
-}
-
-.crewlet-artifact-panel {
+.crewlet-side-panel.crewlet-artifact-panel {
   /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
      those moved the artifact's edge 80px between Details and History. */
   --crewlet-artifact-panel-width: 22.5rem;
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  width: var(--crewlet-artifact-panel-width);
-  min-height: 0;
-  border-left: 1px solid var(--color-border-default);
-  background: var(--color-surface-background);
+  --crewlet-side-panel-width: var(--crewlet-artifact-panel-width);
+  /* The head on the row step, under the artifact's own bar. */
+  --crewlet-side-panel-head-height: var(--size-row-lg);
 }
 
-.crewlet-artifact-panel--lg {
+.crewlet-side-panel.crewlet-artifact-panel--lg {
   --crewlet-artifact-panel-width: 36rem;
 }
 
-.crewlet-artifact-panel[data-expanded] {
-  flex: 1 1 auto;
-  width: auto;
-  border-left: 0;
-}
-
-.crewlet-artifact-panel__head {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-2);
-  height: var(--size-row-lg);
-  padding: 0 var(--spacing-2) 0 var(--spacing-4);
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-.crewlet-artifact-panel__icon {
-  display: inline-flex;
-  flex: none;
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-artifact-panel__title {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-artifact-panel__title:focus-visible {
+/* The heading rings when the keyboard reaches it, as it always has here. */
+.crewlet-side-panel__title.crewlet-artifact-panel__title:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
   border-radius: var(--radius-sm);
 }
 
-.crewlet-artifact-panel__actions {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-/* THE BODY'S INSET IS PUBLISHED (--crewlet-artifact-panel-inset) for content
-   that sticks to its scrollport: a sticky edge stops at the padding, so a
-   foot with `bottom: 0` left a band under it that the content scrolled
-   through; such a foot offsets itself by the inset to sit on the edge. */
-.crewlet-artifact-panel__body {
-  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
-     rather than the window's; and its sections head at the panel title's
-     step, a level under it and never louder than it. */
-  container: crewlet-artifact-panel / inline-size;
-  --crewlet-section-title-size: var(--font-size-sm);
+/* THE BODY'S INSET IS PUBLISHED under its own name too
+   (--crewlet-artifact-panel-inset), which a sticky foot offsets itself by,
+   and the body answers to its own container name. */
+.crewlet-side-panel__body.crewlet-artifact-panel__body {
+  container-name: crewlet-side-panel crewlet-artifact-panel;
   --crewlet-artifact-panel-inset: var(--spacing-4);
-
-  /* A COLUMN, so content that should fit the panel rather than scroll it
-     can: a child that sets `min-height: 0` shrinks to the room the body has
-     (a sheet's rows, whose grid then scrolls itself), and every other child
-     keeps its content's height and scrolls the body as before. */
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: var(--crewlet-artifact-panel-inset);
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
-   stays in reach at every scroll. Its inset is the body's. */
-.crewlet-artifact-panel__foot {
-  flex: none;
-  padding: var(--spacing-3) var(--spacing-4);
-  border-top: 1px solid var(--color-border-default);
-  background: var(--color-surface-background);
-}
-
-/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
-   raised off it, rather than squeezing the artifact under a useful width. */
-@container crewlet-artifact-workspace (width < 960px) {
-  .crewlet-artifact-panel {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-    z-index: var(--z-index-overlay);
-    width: min(var(--crewlet-artifact-panel-width), 100%);
-    /* THE DRAWER'S LIFT, the shell's own rail drawer's: the large step falls
-       below a box and left the panel's start edge reading as a cut through
-       the artifact rather than a sheet over it. */
-    box-shadow: var(--shadow-xl);
-  }
-
-  .crewlet-artifact-panel[data-expanded] {
-    inset-inline-start: 0;
-    width: auto;
-    box-shadow: none;
-  }
-}
-
-/* A PHONE: the panel is the screen until it is closed. */
-@container crewlet-artifact-workspace (width < 640px) {
-  .crewlet-artifact-panel {
-    inset-inline-start: 0;
-    width: auto;
-    border-left: 0;
-    box-shadow: none;
-  }
+  --crewlet-side-panel-inset: var(--crewlet-artifact-panel-inset);
 }
 
 
@@ -5346,7 +5419,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Button-UWKBTKYD.css */
+/* Button-VXJ7M5XF.css */
 /*
  * The button, and the link drawn as one.
  *
@@ -5656,47 +5729,24 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 /*
- * Pending. The spinner takes the leading icon's place, so a button that has
- * one neither moves nor changes width mid-action, and the label stays exactly
- * as it was: a button whose text becomes "Saving" has stopped saying what it
- * does.
+ * Pending. The spinner (the package's one ring, `Spinner`) takes the leading
+ * icon's place, so a button that has one neither moves nor changes width
+ * mid-action, and the label stays exactly as it was: a button whose text
+ * becomes "Saving" has stopped saying what it does. The ring's drawing, its
+ * turn and its reduced-motion stop are Spinner.css's.
+ *
+ * A disabled button already reads as unavailable; a loading one should still
+ * read as this button, mid-action.
  */
-.crewlet-btn__spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--radius-circle);
-  opacity: 0.7;
-  animation: crewlet-btn-spin var(--motion-duration-slow) linear infinite;
-  flex: none;
-}
-
-@keyframes crewlet-btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* A disabled button already reads as unavailable; a loading one should still
-   read as this button, mid-action. */
 .crewlet-btn--loading {
   cursor: progress;
 }
 
-/*
- * A spinner that cannot spin should not pretend to, and a colour change that
- * cannot fade is still a colour change. The ring reads as pending either way.
- */
+/* A colour change that cannot fade is still a colour change. */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-btn {
     transition: none;
   }
-
-  .crewlet-btn__spinner {
-    animation: none;
-  }
 }
 
 
@@ -7667,6 +7717,160 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* ChangeList-CB2DLR5S.css */
+/*
+ * What a change will do, as a before and after on PropertyList's grid: one
+ * label column (as wide as the longest label, never under 92px) and one value
+ * column, rows a spacing step apart with no rules, and the tones of DiffList.
+ */
+.crewlet-change-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* The eyebrow register: a heading a reader passes over to reach the rows. */
+.crewlet-change-list__heading {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-change-list__rows {
+  display: grid;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(92px, max-content)) minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-3);
+  align-items: baseline;
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-change-list__row {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.crewlet-change-list__label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-change-list__value {
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+/* Long text takes the row's whole width under its label. */
+.crewlet-change-list__row--text > .crewlet-change-list__value {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-change-list__fact {
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * A PAIR WRAPS AS A UNIT: the old value, then the arrow and the new value
+ * together, which drop under the old value on a narrow card rather than
+ * splitting the arrow from what it points at.
+ */
+.crewlet-change-list__pair {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  max-width: 100%;
+}
+
+.crewlet-change-list__next {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-change-list__arrow {
+  flex: none;
+  align-self: center;
+  color: var(--color-text-tertiary);
+}
+
+/* The old value: struck through in the tertiary ink. */
+.crewlet-change-list__from {
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* The new value: the primary ink at medium weight, on the added tint. */
+.crewlet-change-list__to,
+.crewlet-change-list__inserted {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-success-soft);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+/* A value taken away: struck through on the removed tint, in its ink. */
+.crewlet-change-list__removed {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* A word diff: one compact paragraph, removed words struck in the danger ink. */
+.crewlet-change-list__words {
+  margin: 0;
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-change-list__deleted {
+  color: var(--color-feedback-danger-ink);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* The disclosure's padding hangs into the gutter, so its chevron sits on the text edge. */
+.crewlet-change-list__whole {
+  margin-inline-start: calc(var(--spacing-2) * -1);
+}
+
+.crewlet-change-list__note {
+  display: block;
+  margin-top: 2px;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Settled: the values step back; the tints stay, so the record is still there. */
+.crewlet-change-list--settled .crewlet-change-list__fact,
+.crewlet-change-list--settled .crewlet-change-list__to,
+.crewlet-change-list--settled .crewlet-change-list__inserted,
+.crewlet-change-list--settled .crewlet-change-list__value {
+  color: var(--color-text-secondary);
+}
+
+
 /* ChangeMark-3VMTW7MT.css */
 /*
  * A change mark (ChangeMark.tsx): a notch in the top end corner of whatever
@@ -8870,6 +9074,67 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
+/* ChatThread-52KMDXHB.css */
+/*
+ * A conversation as it grows: the scroller, the items a spacing step and a
+ * half apart on the panel's 16px inset, and the Jump to latest pill floating
+ * over its foot.
+ */
+.crewlet-chat-thread {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/*
+ * THE BROWSER'S SCROLL ANCHORING IS OFF: it pins the content above the
+ * reader's view, which fights a last child that keeps growing as an answer
+ * streams in. ChatThread.tsx anchors to the end itself.
+ */
+.crewlet-chat-thread__scroller {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
+}
+
+/* A ring inside the region, which an edge-to-edge scroller would otherwise clip. */
+.crewlet-chat-thread__scroller:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-chat-thread__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+}
+
+.crewlet-chat-thread__items > * {
+  flex: none;
+}
+
+/* The pill, centred a step above the thread's foot. */
+.crewlet-chat-thread__jump {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-pill);
+}
+
+.crewlet-chat-thread__fresh {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}
+
+
 /* Checkbox-MB22OW6P.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
@@ -10449,7 +10714,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Composer-TXULCPPV.css */
+/* Composer-JSGTOW3F.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
  * BOX takes the focus ring every field in the package draws (see Input.css):
@@ -10459,17 +10724,34 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  * border to the accent AND lay a 2px soft halo outside it: two highlights for
  * one state, and the loudest edge on a page whose field was focused on load.
  */
+/*
+ * THE FIELD'S EDGE, as every text field draws it: `--color-border-field`, the
+ * step measured to 3:1 against the ground, stepping up to the control boundary
+ * under the pointer. It drew `--color-border-strong`, which is 1.46:1, so the
+ * box a person types in was the faintest edge on the panel.
+ */
 .crewlet-composer {
+  /* The edge's width, named because the nested send button's corner is
+     derived from it (see .crewlet-composer__trailing). */
+  --crewlet-composer-edge: 1px;
+
   display: grid;
   overflow: hidden;
-  border: 1px solid var(--color-border-strong);
+  border: var(--crewlet-composer-edge) solid var(--color-border-field);
   border-radius: var(--radius-md);
   background: var(--color-surface-background);
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-composer:hover {
-  border-color: var(--color-border-strong-hover);
+.crewlet-composer:not(.is-disabled):hover {
+  border-color: var(--color-border-control);
+}
+
+/* The field and, in a chat composer, its send button on one row. */
+.crewlet-composer__row {
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
 }
 
 /* Keyed on the FIELD, not :focus-within: the footer holds the send action,
@@ -10485,6 +10767,8 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 .crewlet-composer .crewlet-composer__field {
+  flex: 1;
+  min-width: 0;
   min-height: 68px;
   max-height: 220px;
   padding: var(--spacing-2) var(--spacing-3);
@@ -10502,6 +10786,80 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   outline: none;
 }
 
+/*
+ * A CHAT COMPOSER: the field and its send button share one row. The field
+ * starts as one line exactly as tall as the button and its inset (so the
+ * line sits centred beside it), grows to six lines and then scrolls, and the
+ * button stays on the last line.
+ */
+.crewlet-composer--inline .crewlet-composer__field {
+  --crewlet-composer-line: calc(var(--font-line-height-normal) * var(--font-size-compact));
+  --crewlet-composer-row: calc(var(--size-control-md) + var(--spacing-2));
+
+  min-height: var(--crewlet-composer-row);
+  max-height: 140px;
+  padding-block: max(0px, calc((var(--crewlet-composer-row) - var(--crewlet-composer-line)) / 2));
+}
+
+/*
+ * A PLACEHOLDER NEVER GROWS THE FIELD. It is one line of example or one word
+ * of reason ("Offline"); wrapped to a second line it made the composer jump
+ * taller the moment the connection dropped.
+ */
+.crewlet-composer--inline .crewlet-composer__field::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE SEND BUTTON NESTS IN THE BOX'S CORNER: inset by one spacing step, its
+ * radius is the box's less that inset and the box's own edge, so the two
+ * corners run parallel rather than a square sitting in a rounded box.
+ */
+.crewlet-composer__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+}
+
+.crewlet-composer__trailing .crewlet-icon-btn {
+  border-radius: calc(var(--radius-md) - var(--spacing-1) - var(--crewlet-composer-edge));
+}
+
+/*
+ * WHAT TRAVELS WITH THE MESSAGE, above the field inside the box's edge: a row
+ * of tags that wraps, on the field's own inset so a tag starts where the text
+ * does.
+ */
+.crewlet-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-3) 0;
+}
+
+/*
+ * DISABLED, AS A FIELD IS: the whole box at the disabled field's 0.6 and the
+ * not-allowed cursor, so it no longer reads as somewhere to type. Faded once:
+ * the field and a disabled send button inside it keep their own opacity at 1,
+ * or the box's fade and theirs would multiply into a control nobody can read.
+ */
+.crewlet-composer.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.crewlet-composer.is-disabled .crewlet-composer__field.is-disabled,
+.crewlet-composer.is-disabled .crewlet-composer__trailing :disabled,
+.crewlet-composer.is-disabled .crewlet-composer__trailing [aria-disabled='true'] {
+  opacity: 1;
+}
+
 /* Past its cap the field scrolls rather than pushing the page. */
 .crewlet-composer .crewlet-composer__field.is-auto-resize {
   overflow-y: auto;
@@ -14614,7 +14972,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DiffList-3EX64AAE.css */
+/* DiffList-GE6YBRLJ.css */
 /* DiffList: one path per row, with its mark, its word and its tint.
 
    The tint is the soft step of the state the row is in and the text is the
@@ -14710,6 +15068,59 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * STACKED: each path over its value, both wrapping, so a value is read rather
+ * than cut by the 200px path track. `auto` is the same drawing under 480px of
+ * the list's own width, which a window query cannot know: a list in a 420px
+ * drawer on a wide screen is as narrow as one on a phone.
+ */
+.crewlet-diff-list--auto {
+  container: crewlet-diff-list / inline-size;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__row {
+  grid-template-columns: auto minmax(0, 1fr);
+  row-gap: 0;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__value {
+  grid-column: 2;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__path,
+.crewlet-diff-list--stacked .crewlet-diff-list__value,
+.crewlet-diff-list--stacked .crewlet-diff-list__from,
+.crewlet-diff-list--stacked .crewlet-diff-list__to {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-list--stacked .crewlet-diff-list__value {
+  flex-wrap: wrap;
+}
+
+@container crewlet-diff-list (width < 480px) {
+  .crewlet-diff-list--auto .crewlet-diff-list__row {
+    grid-template-columns: auto minmax(0, 1fr);
+    row-gap: 0;
+  }
+
+  .crewlet-diff-list--auto .crewlet-diff-list__value {
+    grid-column: 2;
+    flex-wrap: wrap;
+  }
+
+  .crewlet-diff-list--auto .crewlet-diff-list__path,
+  .crewlet-diff-list--auto .crewlet-diff-list__value,
+  .crewlet-diff-list--auto .crewlet-diff-list__from,
+  .crewlet-diff-list--auto .crewlet-diff-list__to {
+    overflow: visible;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}
+
 
 /* DiffView-RVLIHTKG.css */
 /* DiffView: a line diff, monospace and line-numbered on both sides.
@@ -14957,7 +15368,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Disclosure-P4FH3C35.css */
+/* Disclosure-FVMA4RW2.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
  *
@@ -15063,6 +15474,32 @@ svg.crewlet-datetime__chevron {
   transform: rotate(0deg);
 }
 
+/*
+ * NOTHING TO OPEN YET: the bar is words rather than a button, and the
+ * chevron keeps its slot unpainted, so the mark after it does not move when
+ * the section gains content and the chevron appears.
+ */
+.crewlet-disclosure__chevron--reserved {
+  visibility: hidden;
+}
+
+.crewlet-disclosure__trigger--static {
+  cursor: default;
+}
+
+/* Words, so nothing answers the pointer. */
+.crewlet-disclosure__trigger--static:hover {
+  background: none;
+  color: var(--color-text-secondary);
+}
+
+/* The section's state mark, between the chevron and the title. */
+.crewlet-disclosure__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
 .crewlet-disclosure__title {
   min-width: 0;
   overflow: hidden;
@@ -15123,6 +15560,16 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-secondary);
 }
 
+/*
+ * CLOSED IS HIDDEN. The panel closes with the `hidden` attribute, and the
+ * browser's own `[hidden] { display: none }` is a user agent rule that any
+ * author `display` outranks: the flex above drew every closed panel open,
+ * under a trigger that said it was collapsed.
+ */
+.crewlet-disclosure__panel[hidden] {
+  display: none;
+}
+
 /* ---- Sizes and variants ------------------------------------------------ */
 
 /*
@@ -16158,6 +16605,64 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* EntityList-XIICECVC.css */
+/* One row per person, seat or record, divided by hairlines, on the card's 16px inset. */
+.crewlet-entity-list__rows {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-entity-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-entity-list__row + .crewlet-entity-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-entity-list__avatar {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-entity-list__words {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-entity-list__name {
+  overflow: hidden;
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-entity-list__fact {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* The row's own link, its ghost padding pulled out to the card's text edge. */
+.crewlet-entity-list__action {
+  display: inline-flex;
+  flex: none;
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+
 /* ErrorBoundary-U2PA3LY2.css */
 /*
  * The default fallback: a quiet block on the inset surface rather than a red
@@ -17080,7 +17585,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* IconButton-K24JQHLF.css */
+/* IconButton-6WA7UEBJ.css */
 /*
  * IconButton: a square icon-only control.
  *
@@ -17177,6 +17682,24 @@ button.crewlet-finding-list__row:focus-visible {
   height: var(--font-size-xl);
 }
 
+/*
+ * primary: the accent square, the primary Button's fill, hover and press with
+ * no room for a label. One per surface, for the control that is the decision
+ * there (a composer's Send); every other icon-only control stays a ghost.
+ */
+.crewlet-icon-btn--primary {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-icon-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-hover);
+}
+
+.crewlet-icon-btn--primary:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-brand-accent-active);
+}
+
 /*
  * secondary: the bordered square. The same surface, boundary and states as a
  * secondary Button, for an icon-only control that has to read as a control
@@ -17199,27 +17722,6 @@ button.crewlet-finding-list__row:focus-visible {
   background: var(--color-surface-pressed);
 }
 
-/*
- * THE PLACE THE READER IS ON (`IconButtonLink current`): the selected
- * treatment a nav row draws, the lifted ground inside the default hairline,
- * drawn on the square's own transparent boundary so nothing moves. With an
- * edge to draw, its ring covers the edge, as the bordered squares' does.
- */
-a.crewlet-icon-btn {
-  text-decoration: none;
-}
-
-.crewlet-icon-btn--current,
-.crewlet-icon-btn--current:hover {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border-default);
-  color: var(--color-text-primary);
-}
-
-.crewlet-icon-btn--current:focus-visible {
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
 /* ghost: transparent, neutral ink, a mild tint on hover. */
 .crewlet-icon-btn--ghost {
   color: var(--color-text-secondary);
@@ -17264,6 +17766,32 @@ a.crewlet-icon-btn {
   border-color: var(--color-brand-accent);
 }
 
+/*
+ * THE PLACE THE READER IS ON (`IconButtonLink current`): the selected
+ * treatment a nav row draws, the lifted ground inside the default hairline,
+ * drawn on the square's own transparent boundary so nothing moves. With an
+ * edge to draw, its ring covers the edge, as the bordered squares' does.
+ *
+ * AFTER EVERY VARIANT, on purpose. The two tie on specificity, so the later
+ * rule wins: written above the variants, a ghost square's secondary ink (and
+ * a ghost-brand's tertiary one) followed it and won, and the place the reader
+ * was on was drawn in the ink of every other square in the row.
+ */
+a.crewlet-icon-btn {
+  text-decoration: none;
+}
+
+.crewlet-icon-btn--current,
+.crewlet-icon-btn--current:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-icon-btn--current:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /* A toggle that is on, drawn from the state a screen reader is already told. */
 .crewlet-icon-btn[aria-pressed='true'] {
   background: var(--color-brand-accent-soft);
@@ -17277,7 +17805,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* IconTile-4GNWTLAW.css */
+/* IconTile-G52XZVR4.css */
 /*
  * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
  * from one measured family (`--color-node-*`); left out, the brand accent's
@@ -17302,6 +17830,9 @@ a.crewlet-icon-btn {
 .crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
 .crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
 
+/* A place or a record rather than a kind: the raised ground, the secondary ink. */
+.crewlet-icon-tile--neutral { --crewlet-icon-tile-fill: var(--color-surface-elevated); --crewlet-icon-tile-ink: var(--color-text-secondary); }
+
 .crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
 .crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
 .crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
@@ -21058,6 +21589,80 @@ a.crewlet-icon-btn {
 }
 
 
+/* MessageBubble-GKO6X3QG.css */
+/*
+ * One message: the bubble on its writer's side, and what it carried and its
+ * quiet foot under it, on the same side, a spacing step below.
+ */
+.crewlet-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  max-width: 85%;
+}
+
+.crewlet-message--self {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+.crewlet-message--other {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+
+.crewlet-message__bubble {
+  max-width: 100%;
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* The reader's own: the raised ground, no edge, the tail at the end corner. */
+.crewlet-message--self .crewlet-message__bubble {
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
+  background: var(--color-surface-elevated);
+}
+
+/* Anybody else's: the card ground inside a hairline, the tail at the start corner. */
+.crewlet-message--other .crewlet-message__bubble {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-message__attachment,
+.crewlet-message__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-message--enter {
+  animation: crewlet-message-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@keyframes crewlet-message-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-message--enter {
+    animation: none;
+  }
+}
+
+
 /* Meter-ZZRFUEOH.css */
 /*
  * The meter.
@@ -22218,6 +22823,33 @@ a.crewlet-icon-btn {
 }
 
 
+/* OpenInAppCard-CKHCK7DO.css */
+/* The place: its tile, then its name over where it lives. */
+.crewlet-open-in-app-card__place {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-open-in-app-card__words {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-open-in-app-card__title {
+  overflow-wrap: anywhere;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-open-in-app-card__path {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+
 /* OrgLabel-R5KY7C3W.css */
 /*
  * What a node of an org chart and a row of an org table both say
@@ -23391,6 +24023,104 @@ a.crewlet-icon-btn {
 }
 
 
+/* PeekRail-4L5YUQMW.css */
+/*
+ * The peek (`PeekRail`): a rail beside the list it was opened from, on the
+ * subtle ground, with a bar at the page bar's height and a scrolling body.
+ *
+ * Its shape is an attribute with one value (`data-shape`), decided by the
+ * host, so there is no width at which it is both a column and a drawer, or
+ * neither. Its width is one variable (`--crewlet-peek-rail-width`), written
+ * on the rail by the component, so the column and the drawer read the same
+ * value and cannot disagree about how wide it is.
+ */
+
+.crewlet-peek-rail {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--color-surface-subtle);
+  border-left: 1px solid var(--color-border-hover);
+}
+
+/*
+ * A COLUMN beside the scroller: the reader's width, capped at what leaves the
+ * list its floor (`--crewlet-peek-rail-reserve`, the gutter, the padding, any
+ * section column and the list). At the threshold the host decided the column
+ * at, the cap is exactly the resting width, so the column never opens
+ * narrower than the width it was decided at.
+ */
+.crewlet-peek-rail[data-shape='column'] {
+  flex: none;
+  width: min(var(--crewlet-peek-rail-width), max(0px, 100% - var(--crewlet-peek-rail-reserve, 0px)));
+}
+
+/* The grip straddles the rail's hairline, a little narrower than the frame's
+   seam, since it stands over one line rather than in a gap. */
+.crewlet-peek-rail > .crewlet-resize-handle--left {
+  --crewlet-resize-handle-width: calc(var(--spacing-1) + var(--spacing-1) / 2);
+  left: calc(var(--crewlet-resize-handle-width) / -2);
+}
+
+/* The bar stands at the page bar's height, so the two lines meet. */
+.crewlet-peek-rail__bar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--size-shell-topbar);
+  padding: 0 var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-hover);
+}
+
+.crewlet-peek-rail__spacer {
+  flex: 1 1 auto;
+}
+
+/* THE PEEK'S OWN SCROLLER, and a SIZE container for the reason the shell's
+   `main` is one: a record inside a peek is bounded by what the peek shows
+   (`100cqb`), and with no size container between it and the root `cqb`
+   falls back to the viewport, which counts the peek's bar as view. Its
+   height is the flex column's, never its content's, so containing it costs
+   nothing. */
+.crewlet-peek-rail__body {
+  container: crewlet-peek-rail / size;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 var(--spacing-4) var(--spacing-6);
+}
+
+/*
+ * THE DRAWER: below the host's threshold the rail slides over the page
+ * behind a veil, and a fixed box takes no room, so the page stays one column
+ * under it. No grip: there is no list beside it to give way.
+ */
+/*
+ * Beside an aside column the drawer and its veil stop at the page sheet's
+ * edge (`--crewlet-app-shell-aside-occupied`, measured by the shell), so the
+ * peek stands over the page, next to the aside, rather than over the aside.
+ */
+.crewlet-peek-rail[data-shape='drawer'] {
+  position: fixed;
+  top: 0;
+  right: var(--crewlet-app-shell-aside-occupied, 0px);
+  bottom: 0;
+  z-index: var(--z-index-overlay);
+  width: min(var(--crewlet-peek-rail-width), 92vw);
+  box-shadow: var(--shadow-md);
+}
+
+.crewlet-peek-rail__veil {
+  position: fixed;
+  inset: 0 var(--crewlet-app-shell-aside-occupied, 0px) 0 0;
+  z-index: calc(var(--z-index-overlay) - 1);
+  background: var(--color-surface-veil);
+}
+
+
 /* PeopleRail-SZGHZXVT.css */
 /* PeopleRail: a raised column of everybody present, one row a person, the
    name over what they are doing and the controls at the row's end. */
@@ -24530,6 +25260,38 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ProposalCard-23575F4C.css */
+/*
+ * A proposed change. The card, its head, its strip and its foot are
+ * StatusCard's; only the note's register is said here: the consequence is a
+ * quieter sentence than the summary it follows.
+ */
+.crewlet-proposal-card__note {
+  color: var(--color-text-secondary);
+}
+
+/* WHY THE PRIMARY IS HELD, on a line of its own above the decision and at
+   its end, in the foot's quiet register, so it wraps rather than pushing the
+   buttons apart. */
+.crewlet-proposal-card__blocked {
+  flex: 1 1 100%;
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  text-align: end;
+}
+
+/* WHY THE LAST DECISION WAS REFUSED, on a line of its own above the
+   decision and at its end, as the held primary's reason is: the refusal
+   strip's own inline drawing, which wraps rather than widening the row. */
+.crewlet-proposal-card__refusal {
+  display: flex;
+  flex: 1 1 100%;
+  justify-content: flex-end;
+  text-align: end;
+}
+
+
 /* Prose-BTXNFT2Q.css */
 /*
  * Natural language: the proportional face, real leading, a bounded measure.
@@ -24851,6 +25613,113 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ReceiptStrip-IIRKRTBG.css */
+/*
+ * A card's foot strip: the card's hairline above it, a tint under the words,
+ * the mark on the first line. The tints are the soft step of the tone under
+ * its ink step, the pairing the palette suite measures; the quiet strip is
+ * the inset ground under the secondary ink.
+ */
+.crewlet-receipt-strip {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-receipt-strip--success {
+  background: var(--color-feedback-success-soft);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-receipt-strip--neutral {
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-receipt-strip--info {
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-receipt-strip--warning {
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-receipt-strip--danger {
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+/* The 16px mark, centred on the first line of the words beside it. */
+.crewlet-receipt-strip__icon {
+  display: inline-flex;
+  align-items: center;
+  height: calc(var(--font-size-compact) * var(--font-line-height-normal));
+}
+
+.crewlet-receipt-strip__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The actions keep the strip's ink, so a ghost button reads as part of it. */
+.crewlet-receipt-strip__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
+.crewlet-receipt-strip__actions .crewlet-btn--ghost {
+  color: inherit;
+}
+
+/*
+ * THE INLINE REFUSAL, under the control that caused it: the sentence in the
+ * danger ink, the hint in the secondary ink, the actions beside them, wrapping
+ * onto a second line rather than widening the row.
+ */
+.crewlet-refusal-strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  max-width: 40rem;
+  font-size: var(--font-size-compact);
+  color: var(--color-feedback-danger-ink);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-refusal-strip__hint {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-refusal-strip--foot .crewlet-refusal-strip__hint {
+  color: inherit;
+}
+
+
+/* RefusalCard-UM67F5HB.css */
+/* The first sentence carries the weight; "Nothing changed." closes in the secondary ink. */
+.crewlet-refusal-card__heading {
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-refusal-card__nothing {
+  color: var(--color-text-secondary);
+}
+
+
 /* RelatedRow-2FVS6QQA.css */
 /* RelatedRow: the glyphs in the quiet ink; everything else is the kit's card. */
 .crewlet-related-row__glyph {
@@ -24873,6 +25742,111 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ResizeHandle-2UNSZ4ZQ.css */
+/*
+ * The grip between a panel and the page beside it (`ResizeHandle`).
+ *
+ * DRAWN AS NOTHING AT REST. It stands in a seam that is already drawn (the
+ * frame's inset between two sheets, a panel's hairline), so a handle of its
+ * own would be a second line beside one. It washes in the soft accent under
+ * the pointer, under keyboard focus and for the whole of a drag.
+ *
+ * ITS DRAWN WIDTH IS THE SEAM'S (`--crewlet-resize-handle-width`, the frame's
+ * inset), and its target is the 24px floor whatever that width is: the
+ * hit area reaches half the difference out on each side, so a seam of 8px
+ * is still a target a finger can find.
+ *
+ * Placed by whoever holds it: the shell's aside and a side panel put it on
+ * their own start edge. Absolute, so it takes no room in the layout it sizes.
+ */
+.crewlet-resize-handle {
+  --crewlet-resize-handle-width: var(--size-shell-inset);
+  --crewlet-hit-area-inline: max(0px, calc((var(--size-target-min) - var(--crewlet-resize-handle-width)) / 2));
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: var(--z-index-raised);
+  width: var(--crewlet-resize-handle-width);
+  border-radius: var(--radius-xs);
+  background: transparent;
+  cursor: col-resize;
+  /* A touch drags the edge rather than scrolling the page under it. */
+  touch-action: none;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* On a panel's left edge it stands outside the panel, in the seam before it. */
+.crewlet-resize-handle--left {
+  left: calc(var(--crewlet-resize-handle-width) * -1);
+}
+
+.crewlet-resize-handle--right {
+  right: calc(var(--crewlet-resize-handle-width) * -1);
+}
+
+.crewlet-resize-handle:hover,
+.crewlet-resize-handle:focus-visible,
+.crewlet-resize-handle[data-dragging] {
+  background: var(--color-brand-accent-soft);
+}
+
+/* Inside its own box: it draws no edge, and the seam it stands in is the
+   two neighbours' edges, which a ring set outward would run over. */
+.crewlet-resize-handle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-resize-handle {
+    transition: none;
+  }
+}
+
+
+/* ResultTableCard-HZRUDNTX.css */
+/*
+ * A result in a card. The card, its head and its foot are StatusCard's and
+ * the table is Table's, drawn flush; what a result adds is the column model:
+ * the first column takes the room the figures leave and ends a long name in
+ * an ellipsis, and the figures never wrap.
+ */
+.crewlet-result-table-card__table .crewlet-table__table {
+  table-layout: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-result-table-card__table td:first-child {
+  width: 100%;
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+.crewlet-result-table-card__table .crewlet-table__cell--end {
+  white-space: nowrap;
+}
+
+/*
+ * THE DOWNLOADS ARE SPANS AROUND A BUTTON (the status region beside each is
+ * a sibling of its button), so the foot's ghost outdent is stated for them
+ * here: the first one's padding and edge are pulled out so its glyph sits on
+ * the card's text edge.
+ */
+.crewlet-result-table-card .crewlet-status-card__actions > .crewlet-result-table-card__download:first-child {
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+/* The link stands at the foot's far end, its own padding pulled out to the edge. */
+.crewlet-result-table-card__link {
+  display: inline-flex;
+  margin-inline-start: auto;
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+
 /* ReviewList-TIN6C2JN.css */
 /*
  * ReviewList: a setup's parts in one bordered box, a row each, before the
@@ -25414,6 +26388,52 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* RunChip-I2S4VZ3R.css */
+/*
+ * A request's state on the disclosure trigger. Only what differs from the
+ * disclosure is said here: the trigger is as wide as its words (not the whole
+ * row), its padding hangs into the gutter so the chevron sits on the text
+ * edge, its figures are tabular so a ticking time does not shake the row, and
+ * the title takes the state's tone.
+ */
+.crewlet-run-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-run-chip .crewlet-run-chip__trigger {
+  flex: none;
+  width: auto;
+  max-width: calc(100% + var(--spacing-2));
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-run-chip__separator {
+  color: var(--color-text-tertiary);
+}
+
+/* The state's tone, in the title's ink, at rest and under the pointer. */
+.crewlet-run-chip--waiting .crewlet-run-chip__trigger,
+.crewlet-run-chip--waiting .crewlet-run-chip__trigger:hover {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-run-chip--failed .crewlet-run-chip__trigger,
+.crewlet-run-chip--failed .crewlet-run-chip__trigger:hover {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* The steps it opens fill the thread's width under it. */
+.crewlet-run-chip__panel {
+  align-self: stretch;
+  min-width: 0;
+}
+
+
 /* SandboxedFrame-P5NASXB7.css */
 /*
  * The frame fills the box it is given. The page around it does not scroll
@@ -28364,6 +29384,244 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SidePanel-ERBUIELD.css */
+/*
+ * A side panel and the frame that lays it beside the content or over it
+ * (`SidePanel`, `SidePanelFrame`, and their artifact presets).
+ *
+ * The frame is a row: the content, then at most one panel. The content
+ * scrolls itself, so a panel beside it stays in view however far it is read;
+ * the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * frame's own edges: whatever holds the frame already draws those.
+ */
+
+.crewlet-side-panel-frame {
+  container: crewlet-side-panel-frame / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-side-panel-frame__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the frame; the content stays mounted behind it, so
+   a page's state survives the look at its data. */
+.crewlet-side-panel-frame[data-panel='expanded'] > .crewlet-side-panel-frame__body {
+  display: none;
+}
+
+/*
+ * THE PANEL. Its width is one variable (`--crewlet-side-panel-width`), which
+ * the `width` prop sets on the element itself, and its head stands at the page
+ * bar's height (`--crewlet-side-panel-head-height`), so beside the shell's bar
+ * the two lines meet. Positioned, so the grip on its start edge has a box to
+ * stand against.
+ */
+.crewlet-side-panel {
+  --crewlet-side-panel-width: 26.25rem;
+  --crewlet-side-panel-head-height: var(--size-shell-topbar);
+  --crewlet-side-panel-inset: var(--spacing-4);
+  position: relative;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-side-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* IN THE SHELL'S ASIDE the panel fills the aside's sheet, which draws the
+   edge, the corner and the ground, and whose track is the width. */
+.crewlet-side-panel--fill {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+  background: transparent;
+}
+
+.crewlet-side-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+/* The grip straddles the panel's hairline, which is the edge it moves. */
+.crewlet-side-panel > .crewlet-resize-handle--left {
+  left: calc(var(--crewlet-resize-handle-width) / -2);
+}
+
+/*
+ * THE HEAD: the mark, the title, and the actions at the end. The title keeps
+ * what the actions leave it and truncates, so the actions never wrap. Its
+ * start inset is the body's, so the mark stands on the line the body's
+ * content starts on.
+ */
+.crewlet-side-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--crewlet-side-panel-head-height);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-side-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-side-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* THE HEADING TAKES FOCUS WITHOUT A RING. It is focused so a screen reader
+   announces what opened, and it is not a control: a ring round a title reads
+   as something to press. Transparent rather than none, so forced colours,
+   which draw every outline in the system colour, still show where focus is. */
+.crewlet-side-panel__title--quiet:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* Named for assistive technology only, where the mark beside it says it. */
+.crewlet-side-panel__title--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-side-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: auto;
+}
+
+/* THE BODY'S INSET IS PUBLISHED (--crewlet-side-panel-inset) for content
+   that sticks to its scrollport: a sticky edge stops at the padding, so a
+   foot with `bottom: 0` would leave a band under it that the content
+   scrolled through; such a foot offsets itself by the inset to sit on the
+   edge. */
+.crewlet-side-panel__body {
+  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
+     rather than the window's; and its sections head at the panel title's
+     step, a level under it and never louder than it. */
+  container: crewlet-side-panel / inline-size;
+  --crewlet-section-title-size: var(--font-size-sm);
+
+  /* A COLUMN, so content that should fit the panel rather than scroll it
+     can: a child that sets `min-height: 0` shrinks to the room the body has,
+     and every other child keeps its content's height and scrolls the body. */
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--crewlet-side-panel-inset);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* FLUSH, the body draws no inset of its own: what it holds owns its edges
+   (a chat thread that scrolls and insets itself). The published inset reads 0
+   inside it, so anything that offsets itself by the inset follows. */
+.crewlet-side-panel__body--flush {
+  --crewlet-side-panel-inset: 0px;
+}
+
+/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
+   stays in reach at every scroll. Its inset is the body's. */
+.crewlet-side-panel__foot {
+  flex: none;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* ── shapes the host decides ─────────────────────────────────────────── */
+
+/* A COLUMN keeps the content its floor: a width dragged in a wide frame is
+   capped at what leaves the content `--crewlet-side-panel-reserve` wide. */
+.crewlet-side-panel-frame[data-shape='column'] > .crewlet-side-panel:not([data-expanded]) {
+  width: min(var(--crewlet-side-panel-width), max(0px, 100% - var(--crewlet-side-panel-reserve, 0px)));
+}
+
+/* A DRAWER slides over the content's end edge, raised off it, rather than
+   squeezing the content under a useful width. */
+.crewlet-side-panel-frame[data-shape='drawer'] > .crewlet-side-panel:not([data-expanded]) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: var(--z-index-overlay);
+  width: min(var(--crewlet-side-panel-width), 100%);
+  /* THE DRAWER'S LIFT, the shell's own rail drawer's: a smaller step left
+     the panel's start edge reading as a cut through the content rather than
+     a sheet over it. */
+  box-shadow: var(--shadow-xl);
+}
+
+/* A SHEET is the frame until it is closed. */
+.crewlet-side-panel-frame[data-shape='sheet'] > .crewlet-side-panel {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  width: auto;
+  border-left: 0;
+}
+
+/* ── shapes the frame measures (no `shape`) ─────────────────────────── */
+
+/* NOT ROOM FOR TWO COLUMNS: the drawer, as above. */
+@container crewlet-side-panel-frame (width < 960px) {
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-side-panel-width), 100%);
+    box-shadow: var(--shadow-xl);
+  }
+
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the frame until it is closed. */
+@container crewlet-side-panel-frame (width < 640px) {
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}
+
+
 /* SidebarNav-YI74SPDC.css */
 /*
  * The rail's navigation.
@@ -29986,6 +31244,55 @@ svg.crewlet-select__chevron {
 }
 
 
+/* Spinner-XZ2TVYE5.css */
+/*
+ * The package's one ring. See Spinner.tsx for why it is inline-block, why it
+ * stays open when it stops, and why its ink is the current colour.
+ */
+.crewlet-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--radius-circle);
+  opacity: 0.7;
+  animation: crewlet-spinner-turn var(--motion-duration-slow) linear infinite;
+}
+
+/* The glyph scale of @crewlethq/icons: xs 12px, sm 14px, md 16px. */
+.crewlet-spinner--xs {
+  width: var(--font-size-xs);
+  height: var(--font-size-xs);
+}
+
+.crewlet-spinner--sm {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+}
+
+.crewlet-spinner--md {
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+}
+
+@keyframes crewlet-spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* It stops, and keeps its open quarter: a closed ring reads as an empty status
+   circle, the open one still reads as pending. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-spinner {
+    animation: none;
+  }
+}
+
+
 /* StatCard-HAA3F5GX.css */
 /*
  * The stat tile.
@@ -30479,6 +31786,71 @@ svg.crewlet-select__chevron {
 }
 
 
+/* StatusCard-6RPEE6UU.css */
+/*
+ * A record with a state. The card, its head, its body and its foot are
+ * Card's; only what a status card adds is said here.
+ */
+
+/* The body holds a sentence, a list and a note, one gap apart. */
+.crewlet-status-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-status-card__body > p {
+  margin: 0;
+}
+
+/* Settled: the body steps back so the strip at the foot reads first. */
+.crewlet-status-card--settled .crewlet-status-card__body {
+  color: var(--color-text-secondary);
+}
+
+/* The strip fills its flush footer edge to edge. */
+.crewlet-status-card__strip {
+  display: block;
+}
+
+/*
+ * THE FOOT'S ONE RULE. A decision ends the row; utilities start it, with a
+ * ghost button at either end pulled out by its padding and edge so its glyph
+ * sits on the card's text edge.
+ */
+.crewlet-status-card__actions {
+  flex-wrap: wrap;
+  container: crewlet-status-card-actions / inline-size;
+}
+
+.crewlet-status-card__actions--end {
+  justify-content: flex-end;
+}
+
+.crewlet-status-card__actions--start {
+  justify-content: flex-start;
+}
+
+.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:first-child {
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:last-child {
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+/* A decision on a narrow card (a phone sheet): its buttons share the row as blocks. */
+@container crewlet-status-card-actions (width < 328px) {
+  .crewlet-status-card__actions--end > .crewlet-btn {
+    flex: 1 1 0;
+  }
+}
+
+
 /* StatusDot-7OMCQCZF.css */
 /*
  * The status dot: a 7px mark in its tone's fill, beside the word it belongs
@@ -30668,6 +32040,128 @@ svg.crewlet-select__chevron {
 }
 
 
+/* StepList-A4YVU4JI.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
+ * duration), every track aligned to the label's first line.
+ */
+
+/*
+ * A STATE'S MARK, shared with the run chip: a 16px box, the mark centred in
+ * it at the glyph's 14px, inked by state. The box's height is the line it
+ * stands on (`--crewlet-step-mark-line`), so it sits on that line's middle.
+ */
+.crewlet-step-mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--font-size-md);
+  height: var(--crewlet-step-mark-line, var(--font-size-md));
+}
+
+.crewlet-step-mark--running {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-step-mark--done {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-step-mark--failed {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-step-mark--waiting {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-step-mark--refused,
+.crewlet-step-mark--stopped {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list {
+  --crewlet-step-list-line: calc(var(--font-size-compact) * var(--font-line-height-normal));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-step-list__summary {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-step-list__step {
+  --crewlet-step-mark-line: var(--crewlet-step-list-line);
+
+  display: grid;
+  grid-template-columns: var(--font-size-md) minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-compact);
+  line-height: var(--crewlet-step-list-line);
+  color: var(--color-text-primary);
+}
+
+.crewlet-step-list__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-step-list__label {
+  overflow-wrap: anywhere;
+}
+
+/*
+ * 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
+ * after `/`, `?` or `&`) and a piece wraps inside itself only when it alone
+ * is wider than the line.
+ */
+.crewlet-step-list__detail {
+  display: block;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  font-variant-ligatures: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list__piece {
+  display: inline-block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-step-list__duration {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--crewlet-step-list-line);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+
 /* Stepper-QEJI5RGX.css */
 /*
  * The stepper: where a sequence has got to (Stepper.tsx).
@@ -31026,6 +32520,111 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SuggestionRow-OKBGNHSS.css */
+/*
+ * A suggestion, in the list row's grammar: the medium row height, a spacing
+ * step by a step and a half, the hover tint, and the inset focus ring that a
+ * row inside a clipped card can still show.
+ */
+.crewlet-suggestion-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-suggestion-list--divided {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-suggestion-list--divided > .crewlet-suggestion-list__item + .crewlet-suggestion-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-suggestion-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-suggestion-list--divided .crewlet-suggestion-row {
+  border-radius: 0;
+}
+
+.crewlet-suggestion-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-suggestion-row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-suggestion-row:disabled {
+  cursor: not-allowed;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row:disabled:hover {
+  background: none;
+}
+
+.crewlet-suggestion-row__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row__icon .crewlet-glyph {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+}
+
+.crewlet-suggestion-row__words {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-suggestion-row__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-suggestion-row__trail {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-suggestion-row {
+    transition: none;
+  }
+}
+
+
 /* Switch-66RAQCRE.css */
 /*
  * Switch: a setting that takes effect as it moves.
@@ -31556,7 +33155,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Table-TGCS4C3F.css */
+/* Table-RUYMMWXT.css */
 /*
  * Table: the operator's table, on the elements a table is made of.
  *
@@ -31677,6 +33276,55 @@ b.crewlet-switcher__match {
  * a control.
  */
 
+/* A column of figures stands against the end, its heading over its numbers. */
+.crewlet-table__table .crewlet-table__cell--end {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * THE TOTAL ROW, fenced from the rows it sums by the same hairline and set at
+ * medium weight. Its first cell heads the row, so it is a th and is reset to
+ * the body's register rather than the header's micro-label.
+ */
+.crewlet-table__table tfoot th,
+.crewlet-table__table tfoot td {
+  position: static;
+  height: var(--size-row-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+  border-bottom: none;
+  background: none;
+  font-size: inherit;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+  color: var(--color-text-primary);
+  vertical-align: middle;
+}
+
+/*
+ * IN A CARD, the card is the frame: no edge, corner or ground of the table's
+ * own, and the outer cells take the card's 16px inset so every row lines up
+ * with the card's title.
+ */
+.crewlet-table--flush {
+  background: none;
+  border: none;
+  border-radius: 0;
+}
+
+.crewlet-table--flush .crewlet-table__table th:first-child,
+.crewlet-table--flush .crewlet-table__table td:first-child {
+  padding-left: var(--spacing-4);
+}
+
+.crewlet-table--flush .crewlet-table__table th:last-child,
+.crewlet-table--flush .crewlet-table__table td:last-child {
+  padding-right: var(--spacing-4);
+}
+
 .crewlet-table__empty {
   padding: var(--spacing-7) var(--spacing-3);
   text-align: center;
@@ -34375,7 +36023,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-C6BQ7L6I.css */
+/* Toaster-MX7TBMC3.css */
 /*
  * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
  * on the page's deepest ground with the large shadow and the rim light, a
@@ -34392,35 +36040,45 @@ svg.crewlet-time-window__tick {
  * reduced motion gets no wash and still gets the toast taken away.
  */
 .crewlet-toaster {
+  /*
+   * THE HOST'S INSET: room on the stack's own side and edge that something
+   * else occupies, such as a panel beside the page or a phone sheet's foot.
+   * Set by `inset` on the Toaster (or by the host on these two properties)
+   * and added to the window inset below, so the stack stands beside the
+   * panel rather than over it. Zero by default.
+   */
+  --crewlet-toaster-inset-inline: 0px;
+  --crewlet-toaster-inset-block: 0px;
+
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
   gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
-  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
+  width: min(380px, calc(100vw - 2 * var(--spacing-6) - var(--crewlet-toaster-inset-inline)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-6);
-  right: var(--spacing-6);
+  bottom: calc(var(--spacing-6) + var(--crewlet-toaster-inset-block));
+  right: calc(var(--spacing-6) + var(--crewlet-toaster-inset-inline));
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-6);
-  right: var(--spacing-6);
+  top: calc(var(--spacing-6) + var(--crewlet-toaster-inset-block));
+  right: calc(var(--spacing-6) + var(--crewlet-toaster-inset-inline));
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-6);
-  left: var(--spacing-6);
+  bottom: calc(var(--spacing-6) + var(--crewlet-toaster-inset-block));
+  left: calc(var(--spacing-6) + var(--crewlet-toaster-inset-inline));
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-6);
-  left: var(--spacing-6);
+  top: calc(var(--spacing-6) + var(--crewlet-toaster-inset-block));
+  left: calc(var(--spacing-6) + var(--crewlet-toaster-inset-inline));
 }
 
 .crewlet-toast {
@@ -34658,12 +36316,23 @@ svg.crewlet-time-window__tick {
 
   .crewlet-toaster--bottom-right,
   .crewlet-toaster--bottom-left {
-    bottom: var(--spacing-3);
+    bottom: calc(var(--spacing-3) + var(--crewlet-toaster-inset-block));
   }
 
   .crewlet-toaster--top-right,
   .crewlet-toaster--top-left {
-    top: var(--spacing-3);
+    top: calc(var(--spacing-3) + var(--crewlet-toaster-inset-block));
+  }
+
+  /* Across the width, the host's inline inset still keeps its own side clear. */
+  .crewlet-toaster--bottom-right,
+  .crewlet-toaster--top-right {
+    right: calc(var(--spacing-3) + var(--crewlet-toaster-inset-inline));
+  }
+
+  .crewlet-toaster--bottom-left,
+  .crewlet-toaster--top-left {
+    left: calc(var(--spacing-3) + var(--crewlet-toaster-inset-inline));
   }
 }