@crewlethq/ui 0.37.1 → 0.39.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-JBCZSSX3.css */
+/* AppShell-NDU4XMGF.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -886,7 +886,9 @@
  * compact density cannot take the target under it.
  *
  * And the boundary is TRANSPARENT rather than absent, spending one pixel of
- * that step rather than adding one on top of it. A button carries one at every
+ * that step rather than adding one on top of it. It spends a pixel of the row
+ * pad too: added to it, the boundary stood the row's mark and words a pixel
+ * right of every nav glyph and word above them. A button carries one at every
  * variant so that a bordered variant and a borderless one stand the same
  * height, and the row this package draws carries the same one for the same
  * reason: without it the two rows in one foot are 34px and 36px, and the
@@ -901,7 +903,7 @@
   width: 100%;
   min-width: 0;
   min-height: var(--size-row-sm);
-  padding: calc(var(--spacing-2) - 1px) var(--size-nav-row-pad);
+  padding: calc(var(--spacing-2) - 1px) calc(var(--size-nav-row-pad) - 1px);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   background: transparent;
@@ -1132,13 +1134,22 @@
   overflow: hidden;
 }
 
+/*
+ * THE BAR'S INSET IS THE CONTENT'S, so a page's first line starts under the
+ * bar's title and its cards end under the bar's last control. It stood 16px
+ * from each edge over a content column inset 20px, and at its end the
+ * content also gives up the scroller's gutter, which the bar, not scrolling,
+ * did not: with scrollbars drawn in the layout every page's actions ended
+ * 15px past the cards under them. The gutter is measured by the shell
+ * (`--crewlet-app-shell-gutter`, 0 where scrollbars overlay the content).
+ */
 .crewlet-app-shell__topbar {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
   flex: none;
   height: var(--crewlet-app-shell-topbar);
-  padding: 0 var(--spacing-4);
+  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
   border-bottom: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
 }
@@ -1321,7 +1332,12 @@
   }
 
   /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
-     line 4px left of the title and the controls over it. */
+     line 4px left of the title and the controls over it. The bar and the
+     content take it together. */
+  .crewlet-app-shell__topbar {
+    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
+  }
+
   .crewlet-app-shell__content {
     padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
   }
@@ -1367,10 +1383,27 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/* In the rail's foot, the account row reaches up across its own padding to
-   half the foot's gap, to meet the row above (HitArea.css). */
+/*
+ * In the rail's foot, the account row reaches up across its own padding to
+ * half the foot's gap, to meet the row above (HitArea.css).
+ *
+ * AND IT STANDS ON THE NAV'S COLUMNS: the avatar centred on the column every
+ * nav glyph is centred on, and the name starting on the line every nav word
+ * starts on. On a 4px inset with an 8px gap a 26px avatar stood 2px left of
+ * the glyphs above it and the name 2px right of their words. The avatar's box
+ * takes a nav glyph's width (`sm`, 14px) and the badge is centred over it, so
+ * 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__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);
+  padding-inline-start: var(--size-nav-row-pad);
+}
+
+.crewlet-app-shell__rail-foot .crewlet-account-row__avatar {
+  justify-content: center;
+  width: 14px;
 }
 
 /* The row as the reader's menu button: a button drawn as the link is. */
@@ -2258,7 +2291,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
@@ -2290,7 +2323,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;
 }
 
@@ -2675,6 +2713,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 */
 /*
@@ -3311,7 +3356,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 
-/* ArtifactMakeRow-W3RD5YWZ.css */
+/* ArtifactMakeRow-6UX2LTF7.css */
 /*
  * The "Start a new artifact" tray.
  *
@@ -3322,9 +3367,16 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
  *
  * THE TRAY SIZES ITSELF BY ITS OWN WIDTH, never the window's: it sits in a
  * page column a sidebar narrows, so three steps are container queries on the
- * tray. Under 560px three across in two lines; from 560px the six in one
- * line, each its mark over its name, so a long name is never cut; from 920px
- * the mark beside the name and what the kind is for under it.
+ * tray. Under 560px three across, each its mark over its name; from 560px
+ * every kind in one line, still mark over name, so a long name is never cut;
+ * from 920px the mark beside the name and what the kind is for under it.
+ *
+ * AND BY ITS OWN COUNT. A reader is offered the kinds their company runs, so
+ * a tray holds five as often as six, and a grid fixed at six columns left an
+ * empty sixth of dotted field at the end of the line, and three across left a
+ * hole after the fifth. The line takes one column per kind
+ * (`--crewlet-make-row-count`, set from the items), and the narrow tray fills
+ * its rows by the count (`data-count`): see the narrow step below.
  */
 
 .crewlet-make-row {
@@ -3342,7 +3394,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-make-row__list {
   --crewlet-make-row-gap: var(--spacing-1);
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
@@ -3423,9 +3475,40 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   line-height: 1.35;
 }
 
+/*
+ * THE NARROW TRAY, on six tracks, each kind two of them: three a row. A last
+ * row that is short is centred under the full one rather than left with a
+ * hole after it, so five kinds stand three and two, the two in the middle.
+ * Two and four kinds stand two a row, which fills every row, and one kind
+ * takes the tray.
+ */
+@container (width < 560px) {
+  .crewlet-make-row__cell {
+    grid-column: span 2;
+  }
+
+  /* One kind short of a full last row: the first of the two moves in a track. */
+  .crewlet-make-row__cell:nth-child(3n + 1):nth-last-child(2) {
+    grid-column: 2 / span 2;
+  }
+
+  /* A last row of one stands in the middle. */
+  .crewlet-make-row__cell:nth-child(3n + 1):last-child {
+    grid-column: 3 / span 2;
+  }
+
+  .crewlet-make-row__list:is([data-count='2'], [data-count='4']) > .crewlet-make-row__cell {
+    grid-column: span 3;
+  }
+
+  .crewlet-make-row__list[data-count='1'] > .crewlet-make-row__cell {
+    grid-column: span 6;
+  }
+}
+
 @container (width >= 560px) {
   .crewlet-make-row__list {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(var(--crewlet-make-row-count, 6), minmax(0, 1fr));
   }
 
   .crewlet-make-row__item {
@@ -6195,7 +6278,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Card-QOVASQNU.css */
+/* Card-JR2UPQH7.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -6650,6 +6733,69 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   min-width: 0;
 }
 
+/*
+ * ON A NARROW CARD THE SUBTITLE TAKES A LINE OF ITS OWN, under the title and
+ * the card's controls, and wraps there rather than ending.
+ *
+ * One line is right while the subtitle has room to say something beside the
+ * title. In a card under 480px wide it had none: on a phone an Agent seats
+ * card drew "Resets today at midnight, the week…" in 202px of a 361px
+ * sentence, and the half it cut was the half that said when. On its own line
+ * the subtitle has the head's whole width, and the title and the controls
+ * keep the first.
+ *
+ * THE CARD IS THE CONTAINER, and only a card whose head has a subtitle, since
+ * that is the one card this changes. Inline-size containment takes a card's
+ * width from where it stands, never from its contents, which is how a panel
+ * is laid out anyway; a card that sized itself to its contents (a tile in a
+ * row that does not stretch it) and carried no subtitle is untouched.
+ *
+ * THE NAME BLOCK TAKES THE FIRST LINE'S ROOM rather than its own width. With
+ * the row free to wrap, a title wider than what the controls leave would
+ * otherwise push the controls onto a second line; from a zero basis it grows
+ * into the room they leave and clips there, exactly as the one-line head does.
+ */
+.crewlet-card:has(> .crewlet-card__header > .crewlet-card__subtitle) {
+  container: crewlet-card / inline-size;
+}
+
+@container crewlet-card (width < 480px) {
+  .crewlet-card__header:has(> .crewlet-card__subtitle) {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-card__header:has(> .crewlet-card__subtitle) > .crewlet-card__header-main {
+    flex: 1 1 0;
+  }
+
+  .crewlet-card__header > .crewlet-card__subtitle {
+    order: 1;
+    flex: 1 1 100%;
+    white-space: normal;
+  }
+}
+
+/*
+ * 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);
@@ -6664,6 +6810,140 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CatalogTile-TGR2ZZVQ.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: center;
+  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; centred on the mark
+   either way, so a tile with no state is not a tile with a hole in it. */
+.crewlet-catalog-tile__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  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
@@ -8226,7 +8506,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.
@@ -8245,6 +8525,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;
@@ -12393,18 +12686,25 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-IXMRCSMK.css */
+/* DescriptionList-DEZISDLQ.css */
 /*
  * Metadata pairs on one grid.
  *
  * The term track is `minmax(120px, max-content)`: wide enough that short terms
  * line up with each other, and free to grow for a long one rather than
  * wrapping it into two lines beside a one-word value.
+ *
+ * ONE LIST'S TRACK IS ITS OWN, which is wrong for a page of them. Four cards
+ * of limits stacked on one page each sized the column to their own longest
+ * term, so their values started at four different places and the cards did
+ * not read as one table. `--crewlet-description-list-term` names the track
+ * instead, and it is inherited: set once on the page (or passed to each list
+ * as `termWidth`), every list under it shares one column.
  */
 
 .crewlet-description-list {
   display: grid;
-  grid-template-columns: minmax(120px, max-content) 1fr;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(120px, max-content)) 1fr;
   gap: var(--spacing-2) var(--spacing-4);
   margin: 0;
   font-size: var(--font-size-compact);
@@ -12670,7 +12970,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Disclosure-VKBJJIZ7.css */
+/* Disclosure-P4FH3C35.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
  *
@@ -12788,9 +13088,35 @@ svg.crewlet-datetime__chevron {
   font-variant-ligatures: none;
 }
 
-/* A fact inside the button: quieter than the title it belongs to. */
+/*
+ * A fact inside the button: quieter than the title it belongs to, and the
+ * first thing to give up room when the row runs short.
+ *
+ * IT USED TO TAKE NONE. `flex: none` held a fact at its full width while the
+ * title, which may shrink, was the only thing that could, so a long fact (a
+ * log's replay mode, generation, range and size, beside a status badge in the
+ * actions) took the whole trigger: the title shrank to nothing, so a row no
+ * longer said which log it was, and the fact ran out of the button and under
+ * the badge beside it.
+ *
+ * A HUNDRED TO THE TITLE'S ONE, as a card's subtitle gives way to its title:
+ * two items that may shrink give up space in proportion to their widths, so
+ * at that ratio the fact absorbs effectively all of it, and ends in an
+ * ellipsis, before the title gives up a pixel. The fact is still the button's
+ * name in full; only its drawing is cut.
+ *
+ * NEVER TO NOTHING. The floor is one glyph wide, because a fact is often a
+ * mark (a failed call's glyph beside a tool's name), and a mark that shrank
+ * to nothing would say nothing at all. A long fact keeps an ellipsis there,
+ * which says a fact was cut. Once the fact is at its floor the title shrinks
+ * and ends in its own ellipsis.
+ */
 .crewlet-disclosure__meta {
-  flex: none;
+  flex: 0 100 auto;
+  min-width: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }
@@ -16410,7 +16736,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* List-MYJIV6MP.css */
+/* List-YHLIZFK4.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -16533,6 +16859,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 ------------------------------------------------------------ */
 
 /*
@@ -17729,7 +18101,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.
  *
@@ -18111,6 +18483,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);
@@ -18463,9 +18840,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;
@@ -18484,9 +18866,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);
 }
 
@@ -18501,8 +18881,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 {
@@ -18604,9 +18982,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);
 }
 
@@ -22746,6 +23122,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,
@@ -25456,7 +25995,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatCard-4T7TMWMN.css */
+/* StatCard-HAA3F5GX.css */
 /*
  * The stat tile.
  *
@@ -25645,6 +26184,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));
@@ -25653,9 +26198,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;
 }
 
 /*
@@ -25690,7 +26234,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-PADTJCUQ.css */
+/* StatGroup-ZMW7VQWP.css */
 /*
  * A row of stat tiles.
  *
@@ -25698,11 +26242,29 @@ svg.crewlet-select__chevron {
  * tiles appeared and vanished moved every number on the page for a reason that
  * had nothing to do with the numbers, which is exactly what a reader watching
  * a live board is trying not to have happen.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's. The row used to drop to two
+ * columns under a 1024px viewport, but a row's width is whatever its column
+ * leaves it: beside the rail and a settings column at exactly 1024 a
+ * four-column row was 489px wide, its tiles about 120px each, and its figures
+ * were cut ("Not s…", "1.6 …"), while on a phone a three-column row folded to
+ * two and left its third tile alone on a row of its own. So the row is a size
+ * container, and the tiles take their place from the row's own width.
+ *
+ * TWELVE TRACKS, AND EACH TILE SPANS ITS SHARE. A container query styles what
+ * is inside the container, never the container itself, so the row cannot
+ * change its own column count by its own width. Its tiles can change how many
+ * of its twelve tracks they span, which is the same layout: twelve divides by
+ * every count a row takes (one, two, three and four a row).
+ *
+ * The row's width comes from where it stands, as a block's does: inline-size
+ * containment means its contents never widen it.
  */
 
 .crewlet-stat-group {
+  container: crewlet-stat-group / inline-size;
   display: grid;
-  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
+  grid-template-columns: repeat(12, minmax(0, 1fr));
   /* The flush-panel recipe: the card's surface, its hairline and its 12px
      corner, flat as every card is, and `overflow: hidden`, which is what lets
      the tiles inside sit against the corners without their own hairlines
@@ -25713,8 +26275,19 @@ svg.crewlet-select__chevron {
   overflow: hidden;
 }
 
-/* Inside another card: the card's surface and edge are the row's. */
-.crewlet-stat-group--flush {
+/*
+ * Inside another card: the card's surface and edge are the row's.
+ *
+ * A ROW STANDING IN A CARD IS FLUSH WHETHER OR NOT ITS CALLER SAID SO. Six
+ * settings pages wrapped a row in a card without `flush`, and each drew the
+ * row's own edge and 12px corner one pixel inside the card's: a box inside a
+ * box, and inside a padded body a third frame. A row that is a card's content,
+ * or its body's, is that card's row; `flush` is for a host that is not a
+ * Card (a widget's frame, a panel of an application's own).
+ */
+.crewlet-stat-group--flush,
+.crewlet-card > .crewlet-stat-group,
+.crewlet-card__body > .crewlet-stat-group {
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
@@ -25740,40 +26313,120 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * A hairline between columns, drawn on the tile that follows one.
+ * 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.
+ */
+.crewlet-stat-group > * {
+  grid-column: span calc(12 / var(--crewlet-stat-group-cols, 4));
+}
+
+/*
+ * The hairlines between tiles: one before every tile that does not start a
+ * row, and one above every tile that is not on the first.
  *
  * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
  * weighs two classes, so a one-class selector here loses to it and the row
  * of numbers runs together with nothing between the columns. The first
- * selector matches whatever a caller puts in the row; the second weighs the
- * same as the rule it has to beat, and sits after it.
+ * selector of each pair matches whatever a caller puts in the row; the second
+ * weighs at least as much as the rule it has to beat, and sits after it.
  */
 .crewlet-stat-group > * + *,
 .crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
   border-left: 1px solid var(--color-border-default);
 }
 
+.crewlet-stat-group[data-columns='2'] > :nth-child(2n + 1),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(2n + 1),
+.crewlet-stat-group[data-columns='3'] > :nth-child(3n + 1),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(3n + 1),
+.crewlet-stat-group[data-columns='4'] > :nth-child(4n + 1),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(4n + 1) {
+  border-left: 0;
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(n + 3),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(n + 3),
+.crewlet-stat-group[data-columns='3'] > :nth-child(n + 4),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 4),
+.crewlet-stat-group[data-columns='4'] > :nth-child(n + 5),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 5) {
+  border-top: 1px solid var(--color-border-default);
+}
+
 /*
- * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row, and strictly under it, as the shell switches. The step is
- * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
- * is the width at which the shell stops holding the page beside the rail. The
- * rules are written for the general case rather than per column count: the
- * first tile of each pair loses its left hairline, and everything on the
- * second row and below gains a top one.
+ * FOUR A ROW FOLD TO TWO under 640px of row (the phone breakpoint's number):
+ * four tiles of 160px is the narrowest at which a six-character figure and a
+ * two-word label still stand on one line each. Two by two keeps every row
+ * full.
  */
-@media (width < 1024px) {
-  .crewlet-stat-group {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@container crewlet-stat-group (width < 640px) {
+  .crewlet-stat-group[data-columns='4'] > *,
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard {
+    grid-column: span 6;
   }
 
-  .crewlet-stat-group > *:nth-child(odd),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
+  .crewlet-stat-group[data-columns='4'] > :nth-child(odd),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(odd) {
     border-left: 0;
   }
 
-  .crewlet-stat-group > *:nth-child(n + 3),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
+  .crewlet-stat-group[data-columns='4'] > :nth-child(even),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(even) {
+    border-left: 1px solid var(--color-border-default);
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(n + 3),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 3) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}
+
+/*
+ * THREE A ROW STACK under 480px of row (the small breakpoint's number), at the
+ * same 160px a tile. Folded to two, three tiles stood two and one, the last
+ * alone at double width and a different height, which read as a tile that had
+ * failed to load; one a row leaves no row short.
+ */
+@container crewlet-stat-group (width < 480px) {
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard {
+    grid-column: span 12;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard + .crewlet-statcard {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > :nth-child(n + 2),
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 2) {
     border-top: 1px solid var(--color-border-default);
   }
 }
@@ -27405,7 +28058,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tag-SRGTK5KI.css */
+/* Tag-2DQOVE6W.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -27685,12 +28338,22 @@ b.crewlet-switcher__match {
   --crewlet-tag-line: var(--color-border-strong-hover);
 }
 
-/* The neutral outline is the engine's `.badge.outline`: the hairline step as
-   the boundary, and the tertiary ink, which is a quieter register than the
-   tinted outlines keep. It is the appearance for a value that is not a state
-   at all, so it says less than its neighbours on purpose. */
+/*
+ * The neutral outline: the neutral pill's own boundary with no fill, and the
+ * tertiary ink, which is a quieter register than the tinted outlines keep. It
+ * is the appearance for a value that is not a state at all, so it says less
+ * than its neighbours on purpose, by its ink and its empty ground.
+ *
+ * NOT BY A FAINTER EDGE. It used to take the plain hairline, the line that
+ * finds a card, and on the card it so often stands on that line measured
+ * 1.07:1 in dark: Limits' "Off" beside a filled "Default", an audit row's
+ * machine and open, a tool's "builtin", all read as loose words rather than
+ * as pills. The strong step is the edge the neutral soft pill already draws
+ * (1.49:1 dark, 1.52:1 light on the card), so the two neutral pills differ by
+ * their fill alone and both read as pills.
+ */
 .crewlet-tag--neutral.crewlet-tag--outline {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 
@@ -28714,6 +29377,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.