@crewlethq/ui 0.38.0 → 0.40.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-NDU4XMGF.css */
+/* AppShell-NPSWZ3XW.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -835,6 +835,8 @@
 .crewlet-app-shell__rail-head {
   display: flex;
   align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
   flex: none;
   box-sizing: border-box;
   min-height: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
@@ -848,6 +850,31 @@
   scrollbar-color: var(--color-scrollbar) transparent;
 }
 
+/*
+ * THE HEAD'S FIRST CHILD TAKES ITS WIDTH: a lockup alone on its line, whose
+ * name truncates at the rail's edge rather than wrapping or pushing the head
+ * wider. It was every application's own wrapper and rule.
+ */
+.crewlet-app-shell__rail-head > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+ * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
+ * its right edge is where every row's background ends; and its glyph stands
+ * on the nav's glyph column: a row's glyph is the gutter and the row's pad
+ * in, the field's is the gutter, its own 1px edge and its pad
+ * (`SearchTrigger`'s two steps and a half), so the inset at its start makes
+ * up the difference from those measures.
+ */
+.crewlet-app-shell__rail-search {
+  padding: 0 var(--size-nav-gutter) var(--spacing-3);
+  padding-inline-start: calc(
+    var(--size-nav-gutter) + var(--size-nav-row-pad) - (var(--spacing-2) + var(--spacing-1) / 2) - 1px
+  );
+}
+
 /* The same gutter the nav takes, so what the foot says lines up with the rows
    above it rather than sitting further out. */
 .crewlet-app-shell__rail-foot {
@@ -1193,6 +1220,15 @@
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  /*
+   * A SIZE CONTAINER, so a box inside the screen can be as tall as the view
+   * it scrolls in (`100cqb`): a column that sticks beside the screen
+   * (`SectionFrame`), a record bounded by the window. The scroller's size is
+   * the shell's, never its content's, so containing it costs nothing. A box
+   * inside an inline-size container (a card, a stat row) reaches past it to
+   * this one for the block axis.
+   */
+  container-type: size;
 }
 
 /* No focus rule of its own: `main` takes focus only from the skip link, and a
@@ -1210,12 +1246,17 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. It
-   reserves no scrollbar gutter either, since nothing in it scrolls: the
-   reserved strip was a dead band down the screen's end edge. */
+   scrolling and the content column takes the height that is left.
+
+   IT KEEPS THE GUTTER RESERVED, like every other screen. The top bar's end
+   inset counts the scroller's gutter (`--crewlet-app-shell-gutter`, measured
+   by the shell), so a fill screen that reserved none put the bar's controls
+   one gutter further out than on the screen beside it: with classic
+   scrollbars, Add seat moved 11px between an org chart and its roster, two
+   tabs of one page. A strip at the end edge of a full-screen canvas is the
+   smaller cost than a bar that moves under the pointer. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
-  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
@@ -2291,7 +2332,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-FWPBBKQ5.css */
+/* ArtifactBar-6PGWGKN2.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
@@ -2323,7 +2364,12 @@ button.crewlet-account-row__who:focus-visible {
      its place, and at a row's height of its own the line under it jumped by
      three pixels between the gallery and the artifact opened from it. */
   height: calc(var(--size-shell-topbar) - 1px);
-  padding: 0 var(--spacing-3);
+  /* THE SHELL TOP BAR'S INSET, the scroller's gutter at its end included: the
+     bar stands in that bar's place, and at a 12px inset of its own a create
+     page's controls ended 19px past the content under them, where every other
+     page's end over it. The same two steps as the top bar, 20px wide and 16px
+     under the shell's breakpoint (below). */
+  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
   min-width: 0;
 }
 
@@ -2708,6 +2754,13 @@ button.crewlet-account-row__who:focus-visible {
   }
 }
 
+/* The shell's breakpoint, where its top bar and content take 16px. */
+@media (width < 1024px) {
+  .crewlet-artifact-bar__row {
+    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
+  }
+}
+
 
 /* ArtifactCard-OGTMO2KI.css */
 /*
@@ -6266,7 +6319,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Card-G2ZGT5Z6.css */
+/* Card-JR2UPQH7.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -6764,6 +6817,26 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   }
 }
 
+/*
+ * STACKED, ASKED FOR: the subtitle under the title at every width, the shape
+ * the narrow step above draws, for a row of cards of different widths whose
+ * heads have to stand at one height rather than one inline and one stacked.
+ */
+.crewlet-card__header--stacked {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-1);
+}
+
+.crewlet-card__header--stacked > .crewlet-card__header-main {
+  flex: 1 1 0;
+}
+
+.crewlet-card__header--stacked > .crewlet-card__subtitle {
+  order: 1;
+  flex: 1 1 100%;
+  white-space: normal;
+}
+
 .crewlet-card__description {
   margin: 0;
   font-size: var(--font-size-compact);
@@ -6778,6 +6851,144 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CatalogTile-XL4XLFUH.css */
+/*
+ * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
+ * fact and one action.
+ *
+ * ONE WELL FOR EVERY MARK. A vendor's mark is drawn in the vendor's colours,
+ * so the box it stands in is the one thing a catalogue can hold constant: the
+ * same size, the same raised ground and the same hairline for every tile,
+ * set up or not. A drained mark on a grey box read as a placeholder image
+ * (a white plate on grey is not a logo), so a tile not yet set up says so by
+ * its ground, never by its mark.
+ */
+
+.crewlet-catalog-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
+
+.crewlet-catalog-tile--quiet {
+  background: var(--color-surface-background);
+}
+
+.crewlet-catalog-tile__head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+/* The name, and under it the state when there is one. THE NAME STANDS ON ONE
+   LINE ACROSS A ROW whether or not a tile has a state: centred on the mark, a
+   name with a pill under it rose 13px above its stateless neighbour's, so the
+   names of one row stood at two heights. It starts one step below the mark's
+   top edge in every tile instead. */
+.crewlet-catalog-tile__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-top: var(--spacing-1);
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__name {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-catalog-tile__status {
+  display: inline-flex;
+}
+
+.crewlet-catalog-tile__description {
+  flex: 1;
+  margin: 0;
+  /* Two lines reserved, so a tile saying what it is for and one saying what
+     is owed keep their feet on one line in a row. */
+  min-height: calc(2em * var(--font-line-height-body));
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-catalog-tile__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* A SMALL CONTROL'S HEIGHT OF CONTENT, under the rule and the padding: a
+     foot holding only a fact stands as tall as one holding a button, so the
+     rules of every foot in a row sit on one line. Measured on the content
+     box, since under border-box sizing the padding spent the floor and a
+     fact-only foot stood 8px shorter. */
+  box-sizing: content-box;
+  min-height: var(--size-control-sm);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-catalog-tile__meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-catalog-tile__action {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * ONE TILE A ROW RESERVES NOTHING. The two reserved lines exist to keep the
+ * feet of tiles side by side on one line; a grid folded to one track has no
+ * neighbours to line up with, and on a phone the reserve was a blank line in
+ * every short tile.
+ */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}
+
+
 /* ChangeMark-3VMTW7MT.css */
 /*
  * A change mark (ChangeMark.tsx): a notch in the top end corner of whatever
@@ -6848,7 +7059,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-MBJG72BS.css */
+/* Charts-TZ744HT6.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -7830,6 +8041,124 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   pointer-events: none;
 }
 
+/* ─── Histogram, a log's own time axis ─────────────────────────── */
+
+/*
+ * Time runs left to right on this axis in every writing direction, as it does
+ * on every chart, and the ticks are placed on physical sides to match.
+ */
+.crewlet-histogram {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  direction: ltr;
+}
+
+/* The plot's bottom border is the axis line the ticks hang under. */
+.crewlet-histogram__plot {
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  width: 100%;
+  height: var(--crewlet-histogram-height, 96px);
+  padding: var(--spacing-1) 0;
+  border-bottom: 1px solid var(--color-border-hover);
+}
+
+/* The slot is the control, and the whole of it is the target. */
+.crewlet-histogram__bar {
+  all: unset;
+  flex: 1 1 0;
+  min-width: 2px;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+button.crewlet-histogram__bar {
+  cursor: pointer;
+}
+
+/* A slot draws no edge, so its ring stands off it. `all: unset` takes the
+   baseline ring away; this states it again at a weight the reset cannot
+   out-rank. */
+.crewlet-histogram__bar:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * A count is data, so it is drawn in the data ramp; the accent is kept for the
+ * bar the reader is pointing at, the selection a click is about to make. The
+ * fill stacks from its foot, so the failed share sits at its bottom. Floors in
+ * pixels: an empty bucket at two, the smallest real count at three.
+ */
+.crewlet-histogram__fill {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: hidden;
+  width: 63%;
+  min-width: 2px;
+  max-width: var(--spacing-7);
+  height: var(--crewlet-histogram-fill, 0%);
+  min-height: 3px;
+  background: var(--color-data-1);
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-histogram__part {
+  display: block;
+  width: 100%;
+  height: var(--crewlet-histogram-part, 0%);
+  background: var(--color-feedback-danger);
+}
+
+button.crewlet-histogram__bar:hover > .crewlet-histogram__fill,
+button.crewlet-histogram__bar:focus-visible > .crewlet-histogram__fill {
+  background: var(--color-brand-accent);
+}
+
+/* An empty bucket is a visible floor in the tone an axis is ruled in:
+   present, and plainly not a quantity. */
+.crewlet-histogram__bar[data-empty] > .crewlet-histogram__fill {
+  min-height: 2px;
+  background: var(--color-border-strong);
+}
+
+button.crewlet-histogram__bar[data-empty]:hover > .crewlet-histogram__fill,
+button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fill {
+  background: var(--color-border-strong-hover);
+}
+
+/*
+ * The dates under the bars. Absolutely placed, so a tick sits over the bucket
+ * it names; the row states its own height because absolutely placed children
+ * contribute none.
+ */
+.crewlet-histogram__axis {
+  position: relative;
+  height: calc(var(--font-size-2xs) * var(--font-line-height-normal));
+  margin-top: 2px;
+}
+
+.crewlet-histogram__tick {
+  position: absolute;
+  top: 0;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-histogram__fill {
+    transition: none;
+  }
+}
+
 
 /* Checkbox-ALWG3WV2.css */
 /*
@@ -8340,7 +8669,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CodeBlock-GYNJ2HI6.css */
+/* CodeBlock-N5ETJF24.css */
 /*
  * CodeBlock, a monospace command, config or record surface. One step off the
  * page, with an optional header carrying a filename and the copy control.
@@ -8359,6 +8688,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   min-width: 0;
 }
 
+/*
+ * A BLOCK THAT IS A CARD'S CONTENT IS THAT CARD'S SURFACE. Placed straight in
+ * a card (with `padding="none"`), it gives up its own edge, corner and ground,
+ * so the card's head rule is the only line over the code and there is no box
+ * inside a box. In a padded body it stays a well, which is what tells code
+ * from the prose beside it.
+ */
+.crewlet-card > .crewlet-codeblock {
+  border: 0;
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
 .crewlet-codeblock__header {
   display: flex;
   align-items: center;
@@ -9614,51 +9956,536 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* DataTable-NL2YWAIA.css */
-/* ─────────────────────────────────────────────────────────────────
- * Default variant.
+/* DataGrid-AQKPJD7W.css */
+/*
+ * DataGrid: a list as columns, one track list on the grid.
  *
- * Every rule is scoped under the variant root, so the table's
- * internals never match an application's own class names and the
- * compact variant's rules further down never leak into this one.
- * ───────────────────────────────────────────────────────────────── */
-.crewlet-data-table--default {
-  /*
-   * The two knobs the compact root declares, so a host that rebinds either one
-   * reaches both variants. The hover is the OVERLAY step rather than an opaque
-   * surface: a table sits on the page, on a card and inside a dialog, and only
-   * an overlay composites correctly onto all three.
-   */
-  --crewlet-data-table-row-hover-bg: var(--color-surface-hover);
-  --crewlet-data-table-active-sort-color: var(--color-brand-accent-ink);
-  width: 100%;
-  position: relative;
-  /* NO SCROLLER HERE. This carried `overflow-x: auto` and its own
-     `overscroll-behavior-x`, and neither could act: `.crewlet-data-table__scroll`
-     is rendered inside it for BOTH variants at `width: 100%`, so it absorbs
-     the table's width and the root never has anything to scroll. What the
-     declaration did still do is make this a scroll container — and per CSS
-     Overflow that pulls `overflow-y` to `auto` as well — so it quietly became
-     the scrollport a `position: sticky` descendant resolves against. The inner
-     wrapper carries the real scrolling and the gesture containment, which is
-     what the layout comment further down already describes. */
-}
+ * THE GRID MAKES NO SCROLLPORT OF ITS OWN. `overflow: clip` rounds the rows off
+ * at the corner exactly as `hidden` would, and it is the difference between a
+ * sticky head that works and one that cannot: `hidden` makes a scroll
+ * container, a sticky box is confined to its nearest scrollport, and this one
+ * grows to its rows, so its offset is always 0. The head sticks against the
+ * page's own scroller; an application whose scroller carries a sticky bar of
+ * its own sets `--crewlet-data-grid-sticky-top` to that bar's height.
+ *
+ * THE COLUMNS BELONG TO THE GRID, NOT TO A ROW. The tracks are declared once,
+ * on the grid (its inline `grid-template-columns`), and the head, the body,
+ * the bands and the rows are `subgrid` passthroughs, so a head cell and a cell
+ * twenty rows down size the same track. Everything that is not a row of cells
+ * spans the whole width.
+ */
 
-.crewlet-data-table--default .crewlet-data-table__table {
-  width: 100%;
-  border-collapse: collapse;
-  background: transparent;
-  display: table;
-  table-layout: auto;
-  /* The table register: a cell is scanned down a column rather than read as a
-     sentence, and the compact step is where a row of them still lines up with
-     the row token the cells are sized to. */
-  font-size: var(--font-size-compact);
+.crewlet-data-grid {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-md);
+  overflow: clip;
+  background: var(--color-surface-subtle);
 }
 
 /*
- * THE RULE UNDER THE HEADER IS THE HEADER'S. It used to sit on `thead`, which
- * a sticky header carries nowhere: the group does not stick, its cells do, so
+ * A CARD'S BODY (`flush`, and every grid straight in a Card or its body, told
+ * or not): the card is the frame, so the grid draws none of its own and one
+ * rule parts it from the card's head. Under the card's header, the header's
+ * own rule is that one.
+ */
+.crewlet-data-grid[data-flush],
+.crewlet-card > .crewlet-data-grid,
+.crewlet-card__body > .crewlet-data-grid {
+  border: 0;
+  border-top: 1px solid var(--color-border-default);
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
+.crewlet-card__header + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* A full-width band by default: the head, the body, the foot, the reset and
+   the empty state, which is the one child when the grid carries no tracks. */
+.crewlet-data-grid > * {
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__head,
+.crewlet-data-grid__body,
+.crewlet-data-grid__band,
+.crewlet-data-grid__row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  grid-column: 1 / -1;
+}
+
+/*
+ * The head: a floor at the row height (density shrinks the padding, not the
+ * label), on the raised ground, sticky at the application's offset.
+ */
+.crewlet-data-grid__head {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  position: sticky;
+  top: var(--crewlet-data-grid-sticky-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+}
+
+/*
+ * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
+ * uppercase. A sortable head is a button with its chrome reset; the reset
+ * takes the focus ring with it, so the ring is restated below.
+ */
+.crewlet-data-grid__th {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  min-width: 0;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th--plain {
+  cursor: default;
+}
+
+/* A sortable head's control fills the head: the whole cell is the target. */
+.crewlet-data-grid__sort {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: calc(-1 * var(--spacing-2)) calc(-1 * var(--spacing-3));
+  padding: var(--spacing-2) var(--spacing-3);
+  cursor: pointer;
+}
+
+.crewlet-data-grid__th--right .crewlet-data-grid__sort {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
+.crewlet-data-grid__th--sorted {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__th--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__sort:focus-visible,
+.crewlet-data-grid__cols-reset:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-data-grid__body {
+  min-width: 0;
+}
+
+.crewlet-data-grid__row {
+  align-items: center;
+  min-height: var(--size-row-md);
+  border-bottom: 1px solid var(--color-border-default);
+  color: inherit;
+  cursor: pointer;
+  /* The containing block for the row's link. */
+  position: relative;
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* THE ROW'S OWN LINK, STRETCHED OVER IT, out of flow so it takes no track. */
+.crewlet-data-grid__row-link {
+  position: absolute;
+  inset: 0;
+}
+
+/* A button overlay (a row that acts and has no address) gives up the chrome a
+   button brings, and draws the focus ring inside the row. */
+button.crewlet-data-grid__row-link {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.crewlet-data-grid__row-link:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * AND THE CELLS' OWN CONTROLS SIT ABOVE IT: positioned and later in the
+ * document than the overlay, they win the hit test in the same stacking
+ * context, with no z-index to reason about against the sticky head. A cell's
+ * element that is not a link or a button but must take its own clicks (a
+ * refusal sentence a reader selects) carries `data-above-row`.
+ */
+.crewlet-data-grid__row a:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row button:not(.crewlet-data-grid__row-link),
+.crewlet-data-grid__row [data-above-row] {
+  position: relative;
+}
+
+.crewlet-data-grid__row:last-child {
+  border-bottom: none;
+}
+
+.crewlet-data-grid__row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-data-grid__row--selected,
+.crewlet-data-grid__row--selected:hover {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-data-grid__row--cursor {
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+/* A FAILED ROW IS MARKED ON ITS EDGE, not tinted: the status column already
+   says so, and two signals for one fact teach a reader to trust neither. */
+.crewlet-data-grid__row--failed {
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
+}
+
+.crewlet-data-grid__cell {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/*
+ * A SHRINK COLUMN does not wrap inside its capped track, and does not paint
+ * outside it: a nowrap cell narrower than its content would spill over the
+ * column beside it. `clip`, since a scrollport here would cut the sticky head.
+ */
+.crewlet-data-grid__th--shrink,
+.crewlet-data-grid__cell--shrink {
+  white-space: nowrap;
+  overflow: clip;
+}
+
+.crewlet-data-grid__cell--right {
+  justify-content: flex-end;
+}
+
+.crewlet-data-grid__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: 1px solid var(--color-border-hover);
+}
+
+.crewlet-data-grid__band-head,
+.crewlet-data-grid__band-foot {
+  display: flex;
+}
+
+/* The band row's one cell lays its parts out on the row's own flex line. */
+.crewlet-data-grid__band-cell {
+  display: contents;
+}
+
+.crewlet-data-grid__band-head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  position: sticky;
+  /* Under the column heads, which are a row tall and parked at the offset;
+     confined to its own band, so it leaves with the band. Above the rows
+     (positioned for the row link) and below the heads. */
+  top: calc(var(--crewlet-data-grid-sticky-top, var(--spacing-0)) + var(--size-row-md));
+  z-index: var(--z-index-raised);
+}
+
+/* A SECOND AXIS IS A BAND INSIDE A BAND, inset and quieter, so it does not
+   read as its parent's sibling; and it draws no rule above itself. */
+.crewlet-data-grid__band .crewlet-data-grid__band > .crewlet-data-grid__band-head {
+  padding-left: calc(var(--spacing-3) + var(--spacing-4));
+  background: var(--color-surface-subtle);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__band .crewlet-data-grid__band + .crewlet-data-grid__band {
+  border-top: none;
+}
+
+.crewlet-data-grid__band-count {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-data-grid__band-foot {
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-data-grid__band-foot a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-data-grid__band-foot a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-data-grid__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-top: 1px solid var(--color-border-hover);
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-data-grid__foot-spacer {
+  flex: 1 1 auto;
+}
+
+.crewlet-data-grid__note {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-data-grid__cols-reset {
+  all: unset;
+  /* After the reset, which takes `grid-column` too. */
+  grid-column: 1 / -1;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-2xs);
+  color: var(--color-brand-accent-ink);
+  cursor: pointer;
+  text-align: left;
+}
+
+/* ---- The column chooser ------------------------------------------------ */
+
+.crewlet-column-chooser__label {
+  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);
+}
+
+/* TWO COLUMNS: a single file of short words makes a menu as tall as the grid
+   has columns. */
+.crewlet-column-chooser__choices {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+/* The pointer target is the row, not the 13px box. */
+.crewlet-column-chooser__choice {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-target-min);
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-data-grid__th,
+  .crewlet-data-grid__row {
+    transition: none;
+  }
+}
+
+/* ---- A ROW IS A CARD ON A PHONE -----------------------------------------
+   A GRID IS COLUMNS, AND A PHONE DOES NOT HAVE THEM: the grid clips (for its
+   sticky head), so the columns past the edge were cut off with nothing to
+   scroll to, and a sideways scroller resolves every flexible track to zero. So
+   the head goes and each cell draws its own name beside its value
+   (`data-label`); the subgrid chain is unwound to blocks and each cell is a
+   flex line, label then value. A cell with nothing in it is no line
+   (`:empty`), and a cell that draws a marked absence has content and stays.
+   The sort is in the application's state, so a sorted list still arrives
+   sorted. */
+@media (width < 640px) {
+  .crewlet-data-grid {
+    display: block;
+  }
+
+  .crewlet-data-grid__head {
+    display: none;
+  }
+
+  .crewlet-data-grid__body,
+  .crewlet-data-grid__band {
+    display: block;
+  }
+
+  .crewlet-data-grid__row {
+    display: block;
+    padding: var(--spacing-2) var(--spacing-3);
+    min-height: 0;
+  }
+
+  /* A FIXED BASIS lines the names up without a track, and the name wraps
+     inside it rather than pushing its value past every other card line. */
+  .crewlet-data-grid__cell {
+    display: flex;
+    align-items: baseline;
+    gap: var(--spacing-3);
+    padding: 1px 0;
+    min-width: 0;
+  }
+
+  .crewlet-data-grid__cell:empty {
+    display: none;
+  }
+
+  .crewlet-data-grid__cell[data-label]::before {
+    content: attr(data-label);
+    flex: 0 0 7rem;
+    overflow-wrap: anywhere;
+    font-size: var(--font-size-2xs);
+    text-transform: uppercase;
+    letter-spacing: var(--font-letter-spacing-wide);
+    color: var(--color-text-tertiary);
+  }
+
+  /* `shrink` and `right` are column shapes, and there are no columns here. */
+  .crewlet-data-grid__cell--shrink,
+  .crewlet-data-grid__cell--right {
+    white-space: normal;
+    justify-content: flex-start;
+  }
+
+  .crewlet-data-grid__cell .crewlet-data-grid__truncate {
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+  }
+
+  /* ---- 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`
+     between them and the rest, then every other cell in column order. */
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-1) var(--spacing-2);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__row::after {
+    content: '';
+    order: 1;
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell {
+    order: 2;
+    padding: 0;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-lead] {
+    order: 0;
+  }
+
+  /* The title takes the rest of the first line, beside the key. */
+  .crewlet-data-grid[data-phone-rows='compact']
+    .crewlet-data-grid__cell[data-lead]:not(.crewlet-data-grid__cell--shrink) {
+    flex: 1 1 0;
+    min-width: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-label]::before {
+    content: none;
+  }
+
+  .crewlet-data-grid[data-phone-rows='compact'] .crewlet-data-grid__cell[data-phone-omit] {
+    display: none;
+  }
+}
+
+
+/* DataTable-NL2YWAIA.css */
+/* ─────────────────────────────────────────────────────────────────
+ * Default variant.
+ *
+ * Every rule is scoped under the variant root, so the table's
+ * internals never match an application's own class names and the
+ * compact variant's rules further down never leak into this one.
+ * ───────────────────────────────────────────────────────────────── */
+.crewlet-data-table--default {
+  /*
+   * The two knobs the compact root declares, so a host that rebinds either one
+   * reaches both variants. The hover is the OVERLAY step rather than an opaque
+   * surface: a table sits on the page, on a card and inside a dialog, and only
+   * an overlay composites correctly onto all three.
+   */
+  --crewlet-data-table-row-hover-bg: var(--color-surface-hover);
+  --crewlet-data-table-active-sort-color: var(--color-brand-accent-ink);
+  width: 100%;
+  position: relative;
+  /* NO SCROLLER HERE. This carried `overflow-x: auto` and its own
+     `overscroll-behavior-x`, and neither could act: `.crewlet-data-table__scroll`
+     is rendered inside it for BOTH variants at `width: 100%`, so it absorbs
+     the table's width and the root never has anything to scroll. What the
+     declaration did still do is make this a scroll container — and per CSS
+     Overflow that pulls `overflow-y` to `auto` as well — so it quietly became
+     the scrollport a `position: sticky` descendant resolves against. The inner
+     wrapper carries the real scrolling and the gesture containment, which is
+     what the layout comment further down already describes. */
+}
+
+.crewlet-data-table--default .crewlet-data-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
+  display: table;
+  table-layout: auto;
+  /* The table register: a cell is scanned down a column rather than read as a
+     sentence, and the compact step is where a row of them still lines up with
+     the row token the cells are sized to. */
+  font-size: var(--font-size-compact);
+}
+
+/*
+ * THE RULE UNDER THE HEADER IS THE HEADER'S. It used to sit on `thead`, which
+ * a sticky header carries nowhere: the group does not stick, its cells do, so
  * the line stayed at the top of the table and the column names scrolled over
  * the rows with nothing under them.
  */
@@ -16557,7 +17384,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* List-MYJIV6MP.css */
+/* List-YHLIZFK4.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -16680,6 +17507,52 @@ button.crewlet-finding-list__row:focus-visible {
   padding-inline: 0;
 }
 
+/*
+ * NUMBERED AND DIVIDED: the divided list's hairlines, with the number in a
+ * column of its own rather than in the margin, so a statement that runs to a
+ * second line wraps under its own first word and not under its number. The
+ * row grows with its text (no row height), at the body's leading, and the
+ * number stands on the first line's baseline.
+ *
+ * The number is the list's counter, drawn by the row. The `ol` already
+ * announces each item's position, so the drawn figure is given empty
+ * alternative text and is not read a second time.
+ */
+.crewlet-list--numbered-divided {
+  counter-reset: crewlet-list-item;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item {
+  counter-increment: crewlet-list-item;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item:last-child {
+  border-bottom: none;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row {
+  align-items: baseline;
+  min-height: 0;
+  /* At a card's own inset, since a card is where these stand: the numbers
+     line up under the card head's glyph rather than 4px left of it. */
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 0;
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row::before {
+  content: counter(crewlet-list-item);
+  content: counter(crewlet-list-item) / '';
+  flex: none;
+  min-width: 2ch;
+  text-align: end;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*
@@ -17229,6 +18102,25 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
+/* LockedLabel-VQEGEB7G.css */
+/*
+ * LockedLabel: a place's words with the key after them. The words keep their
+ * own ink and size; the key takes the quiet step, a step closer to the words
+ * than the words are to anything else.
+ */
+.crewlet-locked-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-locked-label__key {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+
 /* MarkdownEditor-WOKV7CLK.css */
 /*
  * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
@@ -17876,7 +18768,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Modal-7MWRCWAI.css */
+/* Modal-TOEWHDCQ.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -18258,6 +19150,11 @@ button.crewlet-finding-list__row:focus-visible {
  */
 .crewlet-modal__title {
   margin: 0;
+  /* The text face at its own tracking, never the display face every heading
+     element takes from the baseline: the title is an h1 for the outline, at
+     the dialog's own register. */
+  font-family: var(--font-family-sans);
+  letter-spacing: var(--font-letter-spacing-normal);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-tight);
@@ -18610,9 +19507,14 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* ObjectHeader-D7GU7QNI.css */
+/* ObjectHeader-ZOS22FKX.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
+ *
+ * SENTENCE CASE, both the eyebrow and the fact labels, as `StatCard`'s label
+ * is: the uppercase, tracked-open micro-caps are a table's column head, and
+ * over an object's name ("UNIT", then TYPE, LEAD and SEATS under it) they put
+ * a heading on every fact and read as a form rather than a record.
  */
 .crewlet-object-header {
   display: flex;
@@ -18631,9 +19533,7 @@ button.crewlet-finding-list__row:focus-visible {
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 
@@ -18648,8 +19548,6 @@ button.crewlet-finding-list__row:focus-visible {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  letter-spacing: normal;
-  text-transform: none;
 }
 
 .crewlet-object-header__id--mono {
@@ -18751,9 +19649,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 .crewlet-fact-line__label {
-  font-size: var(--font-size-2xs);
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
 
@@ -19952,6 +20848,21 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
+/* PageNote-RHLXH3ML.css */
+/*
+ * PageNote: the screen's one quiet sentence. No word alone on its last line
+ * (`pretty`), which reads as a sentence that stopped rather than one that
+ * ended. No margin of its own: the column it stands in sets the gap.
+ */
+.crewlet-page-note {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+  text-wrap: pretty;
+}
+
+
 /* 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. */
@@ -20992,6 +21903,105 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* PropertyList-SCYM66LL.css */
+/*
+ * An object's properties, in sections, on one grid.
+ *
+ * ONE TERM COLUMN DOWN THE WHOLE LIST. Every section is a description list of
+ * its own, laid out as a SUBGRID of this one, so its terms and details sit on
+ * this grid's two tracks and every section's labels start and end where the
+ * others' do. The term track is the description list's own measure,
+ * `--crewlet-description-list-term`, so a page that sets it once lines a list
+ * of properties up with every key-value card on it. Unset, it is the rail's
+ * own: as wide as the longest label, and never under 92px, which a one-word
+ * label ("Due") would otherwise shrink the column to.
+ *
+ * SIDE BY SIDE AT EVERY WIDTH. A list of properties sits in a rail or a card
+ * of its own width, so the window's width says nothing about the room it has;
+ * the description list's narrow step (term over detail) is cancelled below.
+ */
+
+.crewlet-property-list {
+  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;
+  font-size: var(--font-size-compact);
+}
+
+/* Two classes, so the description list's own track and narrow step (one
+   class, in a media query) give way to the subgrid at every width. */
+.crewlet-property-list > .crewlet-property-list__group {
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  gap: inherit;
+  font-size: inherit;
+}
+
+.crewlet-property-list .crewlet-description-list__detail {
+  margin-bottom: 0;
+}
+
+/* THE LABEL IS AN IDENTIFIER (an environment variable's name, a tag's key),
+   set in the mono face; a word stays in the list's own. */
+.crewlet-property-list__identifier {
+  font-family: var(--font-family-mono);
+}
+
+/*
+ * A SECTION'S HEADING, with a hairline above it that separates it from the
+ * section before. The list's FIRST heading has nothing to be separated from,
+ * so it alone loses the hairline; a list that opens with rows of no section
+ * keeps it on its first heading, which has rows above it.
+ */
+.crewlet-property-list__heading {
+  grid-column: 1 / -1;
+  margin-top: var(--spacing-2);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-property-list__heading:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+.crewlet-property-list--eyebrow .crewlet-property-list__heading {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-property-list--sentence .crewlet-property-list__heading {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+/* A SECTION NOBODY HAS FILLED IN, said once across both tracks in the words
+   its caller wrote. It is a sentence a reader has to read, so it takes the
+   tertiary rung, never the muted one (a floor for a mark). */
+.crewlet-property-list__empty {
+  grid-column: 1 / -1;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* WHO SET IT, under the value rather than beside it: the value is what the
+   reader came for. A line of its own, so a long actor name cannot push the
+   value out of its track. */
+.crewlet-property-list__set-by {
+  display: block;
+  margin-top: 2px;
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+}
+
+
 /* Prose-BTXNFT2Q.css */
 /*
  * Natural language: the proportional face, real leading, a bounded measure.
@@ -21313,6 +22323,15 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* RelatedRow-2FVS6QQA.css */
+/* RelatedRow: the glyphs in the quiet ink; everything else is the kit's card. */
+.crewlet-related-row__glyph {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+
 /* RelativeTime-EBAQPGO2.css */
 /*
  * A relative time is text, so it takes the register around it. Its one rule is
@@ -22050,49 +23069,216 @@ button.crewlet-presence-stack__member:focus-visible {
   gap: var(--spacing-3);
 }
 
-@media (max-width: 768px) {
-  .crewlet-section--sm {
-    padding-block: var(--spacing-7);
-  }
-
-  .crewlet-section--md {
-    padding-block: var(--spacing-9);
-  }
+@media (max-width: 768px) {
+  .crewlet-section--sm {
+    padding-block: var(--spacing-7);
+  }
+
+  .crewlet-section--md {
+    padding-block: var(--spacing-9);
+  }
+
+  .crewlet-section--lg {
+    padding-block: var(--spacing-10);
+  }
+
+  .crewlet-section__header {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-section__description {
+    order: 1;
+    white-space: normal;
+    flex-basis: 100%;
+  }
+}
+
+/*
+ * NARROW: the sentence moves under the heading rather than competing with it
+ * for a line that has room for neither, and the actions stay on the heading's
+ * line. Measured on the column the section sits in where it sits in a size
+ * container (a side panel, a screen's content column), since a panel beside a
+ * wide window is as narrow as a phone; the window's width above is the answer
+ * where there is no container to ask.
+ */
+@container (width < 36rem) {
+  .crewlet-section__header {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-section__description {
+    order: 1;
+    white-space: normal;
+    flex-basis: 100%;
+  }
+}
+
+
+/* SectionFrame-M62UUVFQ.css */
+/*
+ * SectionFrame: a column of sections beside the screen, and the one-row
+ * picker it folds to.
+ */
+
+/* THE FRAME TAKES THE CONTENT COLUMN'S PADDING BACK and gives it to the body,
+   so the column is flush with the sheet and the section keeps the inset. */
+.crewlet-app-shell__content:has(> .crewlet-section-frame) {
+  min-height: 100%;
+  padding: 0;
+}
+
+.crewlet-section-frame {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-section-frame-column) minmax(0, 1fr);
+  min-height: 100%;
+}
+
+/*
+ * AS TALL AS THE VIEW, NEVER AS THE GRID. A sticky box moves only inside its
+ * grid area, which the section beside it makes as tall as its content; sized
+ * against that area the column was exactly as tall as the section, had
+ * nowhere to stick, and a wheel over a long section carried the list off the
+ * top. At the view's height (`100cqb`: the shell's scroller is a size
+ * container) it sticks for the whole scroll and a long list scrolls in itself.
+ *
+ * IT KEEPS THE WHEEL AT ITS ENDS. A box whose bottom is below the fold traps
+ * the wheel; this one is exactly the view and always all on screen, so what
+ * chaining would do is move the section beside it at the list's end, which
+ * is not what the pointer is over.
+ */
+.crewlet-section-frame__nav {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100cqb;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-4) 0;
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-section-frame__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+}
+
+/* BESIDE THE SECTION there is room for the whole list: no toggle, and the
+   list is always drawn. */
+.crewlet-section-frame__toggle {
+  display: none;
+}
+
+/*
+ * FOLDED: one pane, the picker above the section. The picker's row is its
+ * own height and the section takes the rest: two `auto` rows split a short
+ * section's spare height and opened a band of nothing between the picker
+ * and the section it names.
+ */
+.crewlet-section-frame[data-folded] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+/* IN THE FLOW, as tall as it is, on the section's own gutter: the list it
+   unfolds is part of the page rather than a pane of its own. */
+.crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+  position: static;
+  height: auto;
+  overflow-y: visible;
+  padding: var(--spacing-2) var(--spacing-5);
+  border-right: none;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/* ONE ROW NAMING WHERE THE READER IS, which unfolds the list. Its glyph and
+   name stand over the glyphs and names of the rows: the rows' own inset,
+   less the toggle's border. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: var(--size-target-min);
+  padding: 0 calc(var(--size-nav-row-pad) - 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__toggle:hover {
+  background: var(--color-surface-hover);
+}
+
+/* INSIDE ITS OWN EDGE, as every control that draws one rings. */
+.crewlet-section-frame__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-section-frame__toggle-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-section-frame__toggle-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* "Section ·" BEFORE THE NAME, in the quiet ink, so the row reads as a
+   control holding the other sections rather than as the page's title. */
+.crewlet-section-frame__toggle-prefix {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-section-frame__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-section-frame__nav[data-open] .crewlet-section-frame__chevron {
+  transform: rotate(180deg);
+}
 
-  .crewlet-section--lg {
-    padding-block: var(--spacing-10);
-  }
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav:not([data-open]) .crewlet-section-frame__list {
+  display: none;
+}
 
-  .crewlet-section__header {
-    flex-wrap: wrap;
-    row-gap: var(--spacing-1);
-  }
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav[data-open] .crewlet-section-frame__list {
+  padding-top: var(--spacing-2);
+}
 
-  .crewlet-section__description {
-    order: 1;
-    white-space: normal;
-    flex-basis: 100%;
-  }
+/* THE LIST TAKES NO GUTTER OF ITS OWN inside the folded picker, which is
+   inset already: with the rail's gutter on top, its glyphs sat 11px right of
+   the toggle's. */
+.crewlet-section-frame[data-folded] .crewlet-section-frame__list > .crewlet-sidebar-nav {
+  padding-inline: 0;
 }
 
-/*
- * NARROW: the sentence moves under the heading rather than competing with it
- * for a line that has room for neither, and the actions stay on the heading's
- * line. Measured on the column the section sits in where it sits in a size
- * container (a side panel, a screen's content column), since a panel beside a
- * wide window is as narrow as a phone; the window's width above is the answer
- * where there is no container to ask.
- */
-@container (width < 36rem) {
-  .crewlet-section__header {
-    flex-wrap: wrap;
-    row-gap: var(--spacing-1);
+/* A PHONE'S ONE GUTTER: the section and the picker start where every other
+   screen's content does. */
+@media (width < 640px) {
+  .crewlet-section-frame__body {
+    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
   }
 
-  .crewlet-section__description {
-    order: 1;
-    white-space: normal;
-    flex-basis: 100%;
+  .crewlet-section-frame[data-folded] > .crewlet-section-frame__nav {
+    padding-inline: var(--spacing-4);
   }
 }
 
@@ -22893,6 +24079,169 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SettingsTable-6DUFAFXG.css */
+/*
+ * SettingsTable: a read-only table of settings, one row each, on one grid.
+ *
+ * THE TRACKS ARE FRACTIONS OF THE TABLE, so every table of one width shares
+ * them: a page that stacks a table per group puts each column on one line
+ * down the page with nothing to coordinate. `--crewlet-settings-table-columns`
+ * is inherited, so a page that wants other proportions sets it once.
+ *
+ * Each row is its own grid on those tracks rather than a subgrid of the
+ * table's, because the tracks are fractions: one row's long label can never
+ * move another row's value, which is what a content-sized track would do.
+ */
+
+.crewlet-settings-table {
+  container: crewlet-settings-table / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  /* The flush-panel recipe, standing on its own: the card's surface, its
+     hairline and its corner. Inside a card it gives them up (below). */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * A TABLE THAT IS A CARD'S CONTENT IS THAT CARD'S TABLE. It draws no edge or
+ * corner of its own inside one, so a card never holds a box inside a box; its
+ * rows' hairlines run to the card's edges under the card's own head rule.
+ */
+.crewlet-card > .crewlet-settings-table,
+.crewlet-card__body > .crewlet-settings-table {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+.crewlet-settings-table__row {
+  display: grid;
+  grid-template-columns: var(
+    --crewlet-settings-table-columns,
+    minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr)
+  );
+  column-gap: var(--spacing-6);
+  /* ONE BASELINE PER ROW: the name, the value and the source sit on the
+     first line's baseline, whatever the name's key adds under it. */
+  align-items: baseline;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.crewlet-settings-table__body > .crewlet-settings-table__row + .crewlet-settings-table__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * The column names, in the micro-label register a table's header takes
+ * across the system, on the panel's own ground. Hidden by default (see the
+ * component): still the table's column headers for assistive technology.
+ */
+.crewlet-settings-table__head .crewlet-settings-table__row {
+  min-height: 0;
+  padding-block: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-settings-table__name {
+  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);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__head--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__setting {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-settings-table__label {
+  color: var(--color-text-primary);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE KEY IS FOR THE READER WHO WILL GO AND CHANGE IT, so it is there and
+ * quiet: the monospace face at the smallest step, in the tertiary ink, and
+ * free to break anywhere, since a dotted path is one word to a line breaker.
+ */
+.crewlet-settings-table__key {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+/* Tabular figures, so a column of numbers reads down its digits. */
+.crewlet-settings-table__value {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-settings-table__source {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* A value that differs from its default is the row a reader came to find. */
+.crewlet-settings-table__source--changed {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-settings-table__source--changed .crewlet-status-dot {
+  align-self: center;
+}
+
+/*
+ * NARROW: the name takes the row's first line, and the value and its source
+ * share the second. Three columns at this width leave a name column a word
+ * wide, which wraps every name into a stack of single words.
+ */
+@container crewlet-settings-table (width < 32rem) {
+  .crewlet-settings-table__row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-settings-table__setting {
+    grid-column: 1 / -1;
+  }
+
+  .crewlet-settings-table__source {
+    justify-self: end;
+  }
+}
+
+
 /* ShareDialog-4QDCBWMH.css */
 /*
  * Three blocks under the title: who to add and at what role, who has access,
@@ -23991,7 +25340,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-7SGUZYKK.css */
+/* SidebarNav-YI74SPDC.css */
 /*
  * The rail's navigation.
  *
@@ -24421,6 +25770,16 @@ svg.crewlet-select__chevron {
   }
 }
 
+/*
+ * A GROUP THE READER HOLDS NONE OF: the key once, after its label (see
+ * `NavGroup`'s `locked`), and its resting rows in the quiet ink, so a closed
+ * column reads as closed at a glance without a key on every row. A pointed
+ * row and the reader's own still lift to the primary step, as every row does.
+ */
+.crewlet-nav-group--locked .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}
+
 
 /* Skeleton-V735HRGM.css */
 /*
@@ -25603,7 +26962,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatCard-4T7TMWMN.css */
+/* StatCard-HAA3F5GX.css */
 /*
  * The stat tile.
  *
@@ -25792,6 +27151,12 @@ svg.crewlet-select__chevron {
  * tiles where only some carry one still stands at one height: its leading is
  * set here and the reserve is exactly one line of it, where a reserve in `em`
  * was a line shorter than the one a sub actually draws.
+ *
+ * IT WRAPS, balanced, rather than ending in an ellipsis. The line qualifies
+ * the number, so its end is the half that says what the number means, and
+ * `nowrap` cut it: "6 seats idle and waiting for ..." on a phone, a caption
+ * mid-clause at 1440. A grid of tiles (a StatGroup, or a caller's own) gives
+ * every tile in a row one height, so a second line costs no alignment.
  */
 .crewlet-statcard__sub {
   min-height: calc(1em * var(--font-line-height-body));
@@ -25800,9 +27165,8 @@ svg.crewlet-select__chevron {
   /* The quiet step, with the label. The line qualifies the number rather than
      being a second one. */
   color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 /*
@@ -25837,7 +27201,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-DOFHX5QJ.css */
+/* StatGroup-ZMW7VQWP.css */
 /*
  * A row of stat tiles.
  *
@@ -25915,6 +27279,33 @@ svg.crewlet-select__chevron {
   border-radius: var(--radius-none);
 }
 
+/*
+ * A ROW OF TILES SHARES ITS LINES. A tile stacks its label, its number and its
+ * sub in a column of its own, so a label that wrapped pushed its own number
+ * down and no other: beside a node's peek at 1440, "Behind on config" broke
+ * over two lines and its figure sat 18px below the other three. Inside a row
+ * each tile is a SUBGRID over the row's lines, one per line the tile renders
+ * (StatCard always renders three, an absent sub included), so a line is as
+ * tall as the tallest of it across the row and every figure starts together.
+ *
+ * A LABEL SITS ON ITS NUMBER: where one label in the row takes two lines, the
+ * others end at the foot of the label row, one gap above their figure, rather
+ * than floating at its top a line away from what they name.
+ *
+ * These were the engine dashboard's own rules over this component, held there
+ * with a note that the kit should carry them; they are the kit's now, with the
+ * sub's wrap (see StatCard), which the engine applied to every tile.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+}
+
+.crewlet-stat-group > .crewlet-statcard > .crewlet-statcard__label {
+  align-self: end;
+}
+
 /*
  * Each tile spans its share of the twelve tracks: the row's `columns`, set on
  * it as `--crewlet-stat-group-cols`, a row.
@@ -27185,7 +28576,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-WIF7457H.css */
+/* Tabs-S7F4RWAN.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -27588,6 +28979,83 @@ b.crewlet-switcher__match {
   display: contents;
 }
 
+/* ─── Fold (overflow: menu) ───────────────────────────────────── */
+/*
+ * THE ROW NEVER SCROLLS: what does not fit has already left it for "More".
+ * A scroll with its bar hidden cut a whole tab off at a phone's edge with
+ * nothing to say it was there, and a fade at the edge is too quiet to read as
+ * "there is more"; a menu that says More is not.
+ */
+.crewlet-tabs--fold {
+  position: relative;
+  min-width: 0;
+  overflow: visible;
+}
+
+/*
+ * A FOLDED ITEM STAYS IN THE DOCUMENT, out of the flow and invisible, so it
+ * can be measured again when the row grows. Pinned to the row's start, inside
+ * it, so it can never widen the page. A tab, "More" with nothing in it, and a
+ * note with no room alike.
+ */
+.crewlet-tabs--fold > .crewlet-tabs__tab.is-folded,
+.crewlet-tabs__more.is-folded,
+.crewlet-tabs__note.is-folded {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* "More" is the quiet menu button, centred on the tabs' line. */
+.crewlet-tabs__more {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* The note sits at the row's far end, a sentence about every tab and never
+   one of them. */
+.crewlet-tabs__note {
+  flex: none;
+  align-self: center;
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-tabs__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/*
+ * A TAB LIST HOLDS TABS ALONE, so its "More" stands beside it in a box. The
+ * row is as wide as the tabs it draws, and the underline's rule is the box's,
+ * painted on its last pixel row (the one the row's own border sits on), so
+ * it runs on under "More" to the edge.
+ */
+.crewlet-tabs-fold {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-tabs-fold > .crewlet-tabs {
+  flex: 0 1 auto;
+  width: auto;
+  min-width: 0;
+}
+
+.crewlet-tabs-fold--underline {
+  box-shadow: inset 0 -1px 0 var(--color-border-default);
+}
+
 /*
  * The slider ARRIVES rather than travels, and a chip changes without a fade.
  * The indicator still moves; what stops is the animation between the two
@@ -28953,6 +30421,61 @@ b.crewlet-switcher__match {
 }
 
 
+/* TileGrid-I6LNYD2H.css */
+/*
+ * TileGrid: tiles on a fixed track count that folds by the grid's own width.
+ *
+ * Equal tracks, so two grids of one count and one width put every tile edge
+ * on the same line; the tiles in a row stretch to the tallest of them. The
+ * folds are steps of the grid's own width (see the component): three tracks
+ * go straight to one, so a set of three never strands a tile.
+ */
+
+.crewlet-tile-grid {
+  container: crewlet-tile-grid / inline-size;
+  min-width: 0;
+}
+
+.crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 3;
+
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-tile-grid-tracks), minmax(0, 1fr));
+  gap: var(--spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-tile-grid[data-columns='2'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 2;
+}
+
+.crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 4;
+}
+
+/* Four tracks fold to two where a tile would be narrower than its content. */
+@container crewlet-tile-grid (width < 56rem) {
+  .crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 2;
+  }
+}
+
+/* Three fold to one: two up would leave the third tile alone on a row. */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
+
 /* TimeWindowPicker-I3HXC74I.css */
 /*
  * TimeWindowPicker: one trigger over one panel.