@crewlethq/ui 0.39.0 → 0.40.1

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-NDU4XMGF.css */
+/* AppShell-VE2MAV42.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,15 +850,48 @@
   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. */
+   above it rather than sitting further out.
+
+   THE FOOT IS THE COMPACT STEP. It holds what a reader reaches for rarely (a
+   settings link, the engine's state, who they are), so its rows stand on the
+   small control step (`--crewlet-rail-foot-row`, 26px, never under the 24px
+   target) on a half-step gap and a one-step inset, where the nav above keeps
+   its 30px rows. Only heights change: every row keeps its order, columns,
+   glyphs and words. */
 .crewlet-app-shell__rail-foot {
-  --crewlet-rail-foot-gap: var(--spacing-1);
+  --crewlet-rail-foot-gap: calc(var(--spacing-1) / 2);
+  --crewlet-rail-foot-row: var(--size-control-sm);
   flex: none;
   display: flex;
   flex-direction: column;
   gap: var(--crewlet-rail-foot-gap);
-  padding: var(--spacing-2) var(--size-nav-gutter);
+  padding: var(--spacing-1) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
 
@@ -957,6 +992,14 @@
   min-width: 14px;
 }
 
+/* The foot's own step (see `.crewlet-app-shell__rail-foot`), for its rows and
+   for a navigation dropped into it, whose rows keep the rail's columns. */
+.crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn,
+.crewlet-app-shell__rail-foot .crewlet-nav-item__row {
+  min-height: var(--crewlet-rail-foot-row);
+}
+
 /*
  * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
  * as long as the panel is open, drawn from `aria-expanded` so the picture and
@@ -1193,6 +1236,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 +1262,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 {
@@ -1395,9 +1452,16 @@
  * whatever size of badge a caller hands the row, it is centred where a glyph
  * is, and the row takes the nav row's pad and its glyph-to-word gap.
  */
+.crewlet-app-shell__rail-foot .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-0);
+}
+
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
   gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  /* On the foot's compact step: the two lines of name and detail with half a
+     step above and below them, which still clears the avatar. */
+  padding-block: calc(var(--spacing-1) / 2);
   padding-inline-start: var(--size-nav-row-pad);
 }
 
@@ -6810,7 +6874,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CatalogTile-TGR2ZZVQ.css */
+/* CatalogTile-XL4XLFUH.css */
 /*
  * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
  * fact and one action.
@@ -6841,7 +6905,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 
 .crewlet-catalog-tile__head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-3);
   min-width: 0;
 }
@@ -6859,13 +6923,17 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   color: var(--color-text-primary);
 }
 
-/* The name, and under it the state when there is one; centred on the mark
-   either way, so a tile with no state is not a tile with a hole in it. */
+/* 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: center;
+  justify-content: flex-start;
+  padding-top: var(--spacing-1);
   gap: var(--spacing-1);
   min-width: 0;
 }
@@ -7014,7 +7082,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
@@ -7996,6 +8064,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 */
 /*
@@ -9786,10 +9972,495 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   opacity: 0.5;
 }
 
-.crewlet-dashboard-cover--empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.crewlet-dashboard-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* DataGrid-AQKPJD7W.css */
+/*
+ * DataGrid: a list as columns, one track list on the grid.
+ *
+ * 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-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);
+}
+
+/*
+ * 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;
+  }
 }
 
 
@@ -17454,6 +18125,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,
@@ -20181,6 +20871,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. */
@@ -21221,6 +21926,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.
@@ -21542,6 +22346,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
@@ -22326,6 +23139,173 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* 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-frame[data-folded] .crewlet-section-frame__nav:not([data-open]) .crewlet-section-frame__list {
+  display: none;
+}
+
+.crewlet-section-frame[data-folded] .crewlet-section-frame__nav[data-open] .crewlet-section-frame__list {
+  padding-top: var(--spacing-2);
+}
+
+/* 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;
+}
+
+/* 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-frame[data-folded] > .crewlet-section-frame__nav {
+    padding-inline: var(--spacing-4);
+  }
+}
+
+
 /* SegmentedControl-B7XCUOML.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
@@ -24383,7 +25363,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-7SGUZYKK.css */
+/* SidebarNav-YI74SPDC.css */
 /*
  * The rail's navigation.
  *
@@ -24813,6 +25793,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 */
 /*
@@ -27609,7 +28599,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-WIF7457H.css */
+/* Tabs-S7F4RWAN.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -28012,6 +29002,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