@crewlethq/ui 0.37.0 → 0.38.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-JTSEOA57.css */
+/* AppShell-NDU4XMGF.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -851,10 +851,11 @@
 /* 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 {
+  --crewlet-rail-foot-gap: var(--spacing-1);
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-rail-foot-gap);
   padding: var(--spacing-2) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
@@ -885,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
@@ -900,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;
@@ -914,6 +917,10 @@
 
 .crewlet-app-shell__rail-row--action,
 .crewlet-app-shell__rail-foot > .crewlet-btn {
+  /* Half the foot's gap to each neighbour, so the rows' targets meet
+     (HitArea.css), across the row's 1px border; the account row below
+     reaches back the same way. */
+  --crewlet-hit-area-block: calc(var(--crewlet-rail-foot-gap, 0px) / 2 + 1px);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -1127,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);
 }
@@ -1316,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);
   }
@@ -1340,11 +1361,12 @@
  * the controls off the rail.
  */
 .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-1);
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   min-width: 0;
-  padding: var(--spacing-1) 0;
+  padding: var(--crewlet-account-row-pad) 0;
 }
 
 .crewlet-account-row__who {
@@ -1361,6 +1383,29 @@
   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).
+ *
+ * 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. */
 button.crewlet-account-row__who {
   width: 100%;
@@ -3299,7 +3344,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-XBA2MPSY.css */
+/* ArtifactMakeRow-6UX2LTF7.css */
 /*
  * The "Start a new artifact" tray.
  *
@@ -3310,9 +3355,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 {
@@ -3328,9 +3380,10 @@ 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));
-  gap: var(--spacing-1);
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
   list-style: none;
@@ -3355,6 +3408,10 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   color: var(--color-text-primary);
   text-decoration: none;
   outline: none;
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css), and
+     the 1px border the reach is measured inside of. */
+  --crewlet-hit-area-block: calc(var(--crewlet-make-row-gap) / 2 + 1px);
+  --crewlet-hit-area-inline: calc(var(--crewlet-make-row-gap) / 2 + 1px);
   transition:
     background-color var(--motion-duration-fast) var(--motion-easing-out),
     border-color var(--motion-duration-fast) var(--motion-easing-out),
@@ -3406,9 +3463,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 {
@@ -6178,7 +6266,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Card-QOVASQNU.css */
+/* Card-G2ZGT5Z6.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -6633,6 +6721,49 @@ 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;
+  }
+}
+
 .crewlet-card__description {
   margin: 0;
   font-size: var(--font-size-compact);
@@ -8005,7 +8136,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* ChoiceList-EA2W6MOS.css */
+/* ChoiceList-KFYFAECP.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
@@ -8016,8 +8147,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-choice-list {
   /* The platform's radio, sized here so a panel can line up with the text beside it. */
   --crewlet-choice-list-radio-size: 13px;
+  /* The step between two answers. Every row's pointer target reaches half of it. */
+  --crewlet-choice-list-gap: var(--spacing-1);
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
   padding: var(--spacing-1);
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
@@ -8030,21 +8163,24 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 
 .crewlet-choice-list__group {
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
 }
 
 .crewlet-choice-list__item {
   display: grid;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-choice-list-gap);
 }
 
 /* The "Something else" a list ends with, set apart by a dashed rule. */
 .crewlet-choice-list__item.is-separated {
-  padding-top: var(--spacing-1);
+  --crewlet-choice-list-rule-pad: var(--spacing-1);
+  padding-top: var(--crewlet-choice-list-rule-pad);
   border-top: 1px dashed var(--color-border-strong);
 }
 
 .crewlet-choice-list__row {
+  /* Half the step to each neighbour, so the targets meet (HitArea.css). */
+  --crewlet-hit-area-block: calc(var(--crewlet-choice-list-gap) / 2);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
@@ -8055,6 +8191,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * THE ANSWER AFTER THE RULE reaches up across it, so the pointer leaving the
+ * row above lands on this one rather than on the rule: the dashed line sets
+ * the answer apart for the eye, and is no gap for the hand.
+ */
+.crewlet-choice-list__item.is-separated > .crewlet-choice-list__row {
+  --crewlet-hit-area-block-start: calc(var(--crewlet-choice-list-gap) / 2 + var(--crewlet-choice-list-rule-pad) + 1px);
+}
+
+/*
+ * A ROW WITH ITS PANEL OPEN reaches nothing downward: the panel is part of the
+ * answer and holds controls of its own, which the row must not cover.
+ */
+.crewlet-choice-list__item:has(> .crewlet-choice-list__panel) > .crewlet-choice-list__row {
+  --crewlet-hit-area-block-end: 0px;
+}
+
 /* A choice with a picture: the radio, the picture, the words, the tag. The
    picture centres on the label and its detail together. */
 .crewlet-choice-list__row.has-media {
@@ -8378,7 +8531,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Combobox-4FUVYIE7.css */
+/* Combobox-YDONYDTM.css */
 /*
  * Combobox: a field that offers completions.
  *
@@ -8405,9 +8558,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: var(--spacing-1);
+  --crewlet-listbox-gap: 1px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--crewlet-listbox-gap);
   /*
    * OPAQUE, and the product's own panel surface: a translucent list over a
    * form puts two sets of words in the same place, and the words underneath
@@ -8461,7 +8615,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CommandPalette-7CFGVBND.css */
+/* CommandPalette-TOZYLWLE.css */
 /*
  * The command palette: a field, an optional row of scopes, one scroller
  * holding the lead and the list, and a key legend.
@@ -8627,10 +8781,11 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * draw and no slider to measure, and the bar is each tab's own edge.
  */
 .crewlet-palette__scopes {
+  --crewlet-palette-scope-gap: var(--spacing-4);
   flex-shrink: 0;
   display: flex;
   align-items: stretch;
-  gap: var(--spacing-4);
+  gap: var(--crewlet-palette-scope-gap);
   min-height: var(--size-row-md);
   padding-inline: var(--spacing-4);
   border-bottom: 1px solid var(--color-border-default);
@@ -8659,6 +8814,9 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   font-weight: var(--font-weight-medium);
   white-space: nowrap;
   cursor: pointer;
+  /* Half the gap to each neighbour, so the scopes' targets meet (HitArea.css).
+     The row's own inline padding holds the reach at either end. */
+  --crewlet-hit-area-inline: calc(var(--crewlet-palette-scope-gap) / 2);
 }
 
 .crewlet-palette__scope:hover,
@@ -8873,7 +9031,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Composer-PXITWNEK.css */
+/* Composer-TXULCPPV.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
  * BOX takes the focus ring every field in the package draws (see Input.css):
@@ -8903,7 +9061,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   outline-offset: -1px;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -11939,7 +12097,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DatasetSource-SMGX4PS5.css */
+/* DatasetSource-FFKTD3ZU.css */
 /*
  * DatasetSource: one entry of a dashboard's Sources rail. The title and its
  * source kind, the definition, then where the rows stand, how many there are
@@ -11975,6 +12133,20 @@ body.crewlet-data-table-resizing {
 
 button.crewlet-dataset-source__summary {
   cursor: pointer;
+  /* Half the list's gap to each neighbour, so the entries' targets meet
+     (HitArea.css), across the entry's 1px boundary and the summary's own. */
+  --crewlet-hit-area-block: calc(var(--crewlet-dataset-source-list-gap, 0px) / 2 + 2px);
+}
+
+/* The list has no padding, so its first and last entries reach nothing past
+   it; and an open entry's preview holds controls the summary must not cover. */
+.crewlet-dataset-source-list__item:first-child button.crewlet-dataset-source__summary {
+  --crewlet-hit-area-block-start: 0px;
+}
+
+.crewlet-dataset-source-list__item:last-child button.crewlet-dataset-source__summary,
+.crewlet-dataset-source--open > button.crewlet-dataset-source__summary {
+  --crewlet-hit-area-block-end: 0px;
 }
 
 button.crewlet-dataset-source__summary:hover {
@@ -12100,9 +12272,10 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 .crewlet-dataset-source-list {
+  --crewlet-dataset-source-list-gap: var(--spacing-1);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-dataset-source-list-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -12113,7 +12286,7 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 
-/* DateTimePicker-2IVTKFV2.css */
+/* DateTimePicker-3A7JIIVL.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -12172,8 +12345,8 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-datetime:focus-visible,
-:root[data-crewlet-focus='pointer'] .crewlet-datetime.is-open {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime:focus-visible,
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime.is-open {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -12305,7 +12478,7 @@ svg.crewlet-datetime__chevron {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-datetime__time-input:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-datetime__time-input:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -12334,18 +12507,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);
@@ -12611,7 +12791,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Disclosure-VKBJJIZ7.css */
+/* Disclosure-P4FH3C35.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
  *
@@ -12729,9 +12909,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);
 }
@@ -13022,7 +13228,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Document-YFWTWXJP.css */
+/* Document-TZ2NBLOR.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
  *
@@ -13398,7 +13604,7 @@ svg.crewlet-datetime__chevron {
   outline: 2px solid transparent;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-document-title-field:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-document-title-field:focus-visible {
   border-block-end-color: var(--color-border-selected);
   box-shadow: none;
 }
@@ -13411,7 +13617,7 @@ svg.crewlet-datetime__chevron {
   box-shadow: 0 1px 0 var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-document-title-field[aria-invalid='true']:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-document-title-field[aria-invalid='true']:focus-visible {
   border-block-end-color: var(--color-feedback-danger);
 }
 
@@ -14214,6 +14420,44 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
+/* HitArea-QUOS6ZDJ.css */
+/*
+ * A ROW'S TARGET RUNS TO ITS NEIGHBOUR'S. The rows of one list are drawn a
+ * step apart, and the gap between them belonged to no row: a pointer crossing
+ * the list slowly met the list itself there, so the hand turned into the arrow
+ * and the hover fill went out between every two rows and came back on the
+ * next, which a reader sees as the cursor flickering. Each row that carries
+ * this class reaches half the gap on each side with an empty `::after`, so the
+ * targets meet in the middle of every gap and the drawn rows keep their
+ * spacing. The pseudo-element is part of its row: it takes the row's cursor,
+ * makes the row `:hover`, and a press on it is a press on the row.
+ *
+ * The reach is set on the ROW, from the gap its list is laid out with, as
+ * `--crewlet-hit-area-block` and `--crewlet-hit-area-inline` (each side may be
+ * set alone with the `-start` and `-end` forms). A row that sets none reaches
+ * nowhere. It stays inside the list's own padding, so no scroller grows.
+ *
+ * IT IS MEASURED FROM THE ROW'S PADDING EDGE, which is where an absolutely
+ * placed box starts, so a row drawn with a border (a transparent one
+ * included) adds the border's width to its reach.
+ *
+ * `position: relative` is at zero specificity, so a row positioned on purpose
+ * keeps its own position and is still the pseudo-element's containing block.
+ */
+:where(.crewlet-hit-area) {
+  position: relative;
+}
+
+.crewlet-hit-area::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--crewlet-hit-area-block-start, var(--crewlet-hit-area-block, 0px)) * -1);
+  bottom: calc(var(--crewlet-hit-area-block-end, var(--crewlet-hit-area-block, 0px)) * -1);
+  inset-inline-start: calc(var(--crewlet-hit-area-inline-start, var(--crewlet-hit-area-inline, 0px)) * -1);
+  inset-inline-end: calc(var(--crewlet-hit-area-inline-end, var(--crewlet-hit-area-inline, 0px)) * -1);
+}
+
+
 /* HuePicker-PAIGH6LR.css */
 /*
  * A hue's swatch: the hue itself, as a dot beside its name. The name carries
@@ -14999,7 +15243,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Input-ABGOFENS.css */
+/* Input-OQZBCRX5.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -15126,8 +15370,13 @@ button.crewlet-finding-list__row:focus-visible {
  * round it before anybody had touched a key. A refused field keeps its own
  * colour under a pointer too (below). A document that tracks nothing keeps
  * the keyboard's ring.
+ *
+ * The modality is matched inside :where(), here and in every field's narrowing
+ * rule, so it narrows a ring and never outranks a variant's own: at the
+ * attribute's specificity it beat `.crewlet-input--command`, and the palette's
+ * borderless search field drew a square accent hairline round its text.
  */
-:root[data-crewlet-focus='pointer'] .crewlet-input:has(.crewlet-input__control:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-input:has(.crewlet-input__control:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -15152,7 +15401,7 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -15397,7 +15646,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-textarea:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-textarea:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -15410,7 +15659,7 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-textarea.is-error:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-textarea.is-error:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -16632,7 +16881,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Listbox-6WJNJQVQ.css */
+/* Listbox-NQV6E3FS.css */
 /*
  * The listbox register: one look for every list a field offers.
  *
@@ -16707,6 +16956,9 @@ button.crewlet-finding-list__row:focus-visible {
   cursor: pointer;
   /* A row is chosen by the arrows as often as by the pointer, so the highlight
      lands with no transition: a fade would lag a held arrow key. */
+  /* Where a list sets its rows apart, each row's target reaches half the gap
+     (HitArea.css), so the pointer never falls between two of them. */
+  --crewlet-hit-area-block: calc(var(--crewlet-listbox-gap, 0px) / 2);
 }
 
 /*
@@ -16848,7 +17100,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* LivePreview-BROGKR4N.css */
+/* LivePreview-KQEDMQCY.css */
 /*
  * A live preview: the stand-in, the still copy of what the content drew and
  * the live layer it is drawn in, stacked in that order in one box. The box
@@ -16903,6 +17155,19 @@ button.crewlet-finding-list__row:focus-visible {
   transition: none !important;
 }
 
+/* NOR DOES ANYTHING IN IT SCROLL: a copy of a box that scrolled (a sheet
+   wider than the card, a long list) is a picture of its first view, so it
+   draws no scrollbar. Shown, the bar sat across the card as a stray band.
+   The live layer it is copied from draws none either, so what is laid out
+   there (a sheet's room for a bar included) is what the copy shows. */
+:is(.crewlet-live-preview__live, .crewlet-live-preview__still) * {
+  scrollbar-width: none !important;
+}
+
+:is(.crewlet-live-preview__live, .crewlet-live-preview__still) *::-webkit-scrollbar {
+  display: none;
+}
+
 /* THE LIVE LAYER renders out of sight: content that is copied is never seen
    live, only its copy is. A frame's page is kept rather than copied, so a
    framed preview's live layer is what fades in once it has drawn. */
@@ -21832,7 +22097,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SegmentedControl-FLI45IOW.css */
+/* SegmentedControl-B7XCUOML.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -21860,8 +22125,10 @@ button.crewlet-presence-stack__member:focus-visible {
  * equal weight in a file that happens to come later takes them back.
  */
 .crewlet-tabs.crewlet-segmented--cards {
+  --crewlet-tabs-gap: var(--spacing-2);
+  --crewlet-tabs-row-gap: var(--spacing-2);
   display: grid;
-  gap: var(--spacing-2);
+  gap: var(--crewlet-tabs-gap);
   width: 100%;
   align-items: stretch;
 }
@@ -21872,6 +22139,9 @@ button.crewlet-presence-stack__member:focus-visible {
  * surface inside a panel of the same surface reads as a second panel.
  */
 .crewlet-segmented--cards .crewlet-segmented__option {
+  /* A card's 1px border is inside the reach (HitArea.css). */
+  --crewlet-hit-area-inline: calc(var(--crewlet-tabs-gap) / 2 + 1px);
+  --crewlet-hit-area-block: calc(var(--crewlet-tabs-row-gap) / 2 + 1px);
   justify-content: flex-start;
   text-align: left;
   /* A sentence under a name is a sentence: it wraps rather than being cut. */
@@ -21916,7 +22186,8 @@ button.crewlet-presence-stack__member:focus-visible {
   /* No gap between ROWS: each chip's target already overhangs its drawing by
      half a step above and below, so two rows' drawings stand a whole step
      apart while their targets meet. */
-  gap: 0 var(--spacing-1);
+  --crewlet-tabs-gap: var(--spacing-1);
+  gap: 0 var(--crewlet-tabs-gap);
 }
 
 /*
@@ -22020,6 +22291,7 @@ button.crewlet-presence-stack__member:focus-visible {
  * every option stays visible and inside the focus ring's room.
  */
 .crewlet-tabs--pill.crewlet-segmented {
+  --crewlet-tabs-row-gap: var(--crewlet-tabs-gap);
   flex-wrap: wrap;
   min-width: 0;
   max-width: 100%;
@@ -22138,7 +22410,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Select-W3CHTZXP.css */
+/* Select-F526HLNR.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -22217,7 +22489,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-select:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select:focus-within {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -22280,7 +22552,7 @@ button.crewlet-presence-stack__member:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-select.is-error:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select.is-error:focus-within {
   outline-color: var(--color-feedback-danger);
 }
 
@@ -22427,9 +22699,10 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-select__group {
+  --crewlet-listbox-gap: 1px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: var(--crewlet-listbox-gap);
 }
 
 .crewlet-select__option {
@@ -22582,7 +22855,7 @@ svg.crewlet-select__chevron {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-select__search:focus-within {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-select__search:focus-within {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -22857,7 +23130,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-YRDXTIIZ.css */
+/* SheetGrid-XK7T7M34.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -23309,16 +23582,21 @@ svg.crewlet-select__chevron {
 /* ADD COLUMN stands beside the header row, outside the grid's roles: the
    scroller lays the grid and the control side by side, the grid's last track
    still takes the slack up to the control, and the control sticks to the top
-   with the header while the rows scroll under it. */
+   with the header while the rows scroll under it. Its track is the control's
+   own square plus an inset on each side, so the square never fills the track
+   edge to edge. THE GRID GROWS INTO WHATEVER THE CONTROL LEAVES rather than
+   into a width assumed for it: held to 100% less an assumed width, it
+   overflowed by the difference whenever the control drew wider, and the
+   sheet scrolled sideways by a few pixels. */
 .crewlet-sheet-grid__scroller--add-column {
-  --crewlet-sheet-add-column-width: var(--size-target-min);
+  --crewlet-sheet-add-column-width: calc(var(--size-control-sm) + 2 * var(--spacing-1));
   display: flex;
   align-items: flex-start;
 }
 
 .crewlet-sheet-grid__scroller--add-column > .crewlet-sheet-grid__grid {
-  flex: 0 0 auto;
-  min-width: calc(100% - var(--crewlet-sheet-add-column-width));
+  flex: 1 0 auto;
+  min-width: 0;
 }
 
 .crewlet-sheet-grid__add-column {
@@ -23713,7 +23991,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-KF66MLOM.css */
+/* SidebarNav-7SGUZYKK.css */
 /*
  * The rail's navigation.
  *
@@ -23744,9 +24022,12 @@ svg.crewlet-select__chevron {
  * old step, so the gap is paid for many times over by the row it sits beside.
  */
 .crewlet-nav-group {
+  --crewlet-nav-group-gap: calc(var(--spacing-1) / 2);
+  /* What a row reaches across (HitArea.css): its own list's gap. */
+  --crewlet-nav-row-gap: var(--crewlet-nav-group-gap);
   display: flex;
   flex-direction: column;
-  gap: calc(var(--spacing-1) / 2);
+  gap: var(--crewlet-nav-group-gap);
   min-width: 0;
 }
 
@@ -23891,6 +24172,20 @@ svg.crewlet-select__chevron {
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default);
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css). */
+  --crewlet-hit-area-block: calc(var(--crewlet-nav-row-gap, 0px) / 2);
+}
+
+/*
+ * AN OPEN ROW AND ITS FIRST NESTED ROW ABUT, with no gap between them to
+ * cross, so neither reaches into the other.
+ */
+.crewlet-nav-item:has(> .crewlet-nav-item__children:not([hidden])) > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  --crewlet-hit-area-block-end: 0px;
+}
+
+.crewlet-nav-item__children > .crewlet-nav-item:first-child > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  --crewlet-hit-area-block-start: 0px;
 }
 
 .crewlet-nav-item__row:hover {
@@ -24102,9 +24397,11 @@ svg.crewlet-select__chevron {
  * rail keeps for the one count that asks the reader to act.
  */
 .crewlet-nav-item__children {
+  --crewlet-nav-children-gap: var(--spacing-1);
+  --crewlet-nav-row-gap: var(--crewlet-nav-children-gap);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-nav-children-gap);
   margin-left: var(--size-nav-row-pad);
   padding-left: var(--spacing-2);
   border-left: 1px solid var(--color-border-default);
@@ -25136,7 +25433,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SourceEditor-QAYE2JS6.css */
+/* SourceEditor-OKPWPFXK.css */
 /*
  * Source text written in place: a gutter of line numbers beside a real
  * textarea, and the marks a checker placed drawn behind the text. The gutter,
@@ -25176,7 +25473,7 @@ svg.crewlet-select__chevron {
   outline-offset: -1px;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -25540,7 +25837,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-PADTJCUQ.css */
+/* StatGroup-DOFHX5QJ.css */
 /*
  * A row of stat tiles.
  *
@@ -25548,11 +25845,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
@@ -25563,8 +25878,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);
@@ -25590,40 +25916,93 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * A hairline between columns, drawn on the tile that follows one.
+ * 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);
   }
 }
@@ -26806,7 +27185,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-MMZXV5EF.css */
+/* Tabs-WIF7457H.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -26837,8 +27216,9 @@ b.crewlet-switcher__match {
  * row is reachable by the arrow keys either way.
  */
 .crewlet-tabs--underline {
+  --crewlet-tabs-gap: var(--spacing-2);
   display: flex;
-  gap: var(--spacing-2);
+  gap: var(--crewlet-tabs-gap);
   border-bottom: 1px solid var(--color-border-default);
   position: relative;
   width: 100%;
@@ -26912,8 +27292,9 @@ b.crewlet-switcher__match {
  */
 .crewlet-tabs--pill {
   --crewlet-tabs-pill-inset: 1px;
+  --crewlet-tabs-gap: var(--crewlet-tabs-pill-inset);
 
-  gap: var(--crewlet-tabs-pill-inset);
+  gap: var(--crewlet-tabs-gap);
   padding: var(--crewlet-tabs-pill-inset);
   background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-default);
@@ -26974,6 +27355,20 @@ b.crewlet-switcher__match {
     background-color var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default),
     box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css). A row
+     that wraps reaches across its rows' gap too. */
+  --crewlet-hit-area-inline: calc(var(--crewlet-tabs-gap, 0px) / 2);
+  --crewlet-hit-area-block: calc(var(--crewlet-tabs-row-gap, 0px) / 2);
+}
+
+/* The row's two ends reach nothing past it: the underline row is a scroller,
+   and a target past its last tab would be width it scrolls by. */
+.crewlet-tabs__tab:first-child {
+  --crewlet-hit-area-inline-start: 0px;
+}
+
+.crewlet-tabs__tab:last-child {
+  --crewlet-hit-area-inline-end: 0px;
 }
 
 /*
@@ -27120,9 +27515,10 @@ b.crewlet-switcher__match {
  * (FilterChip draws the same pair).
  */
 .crewlet-tabs--chip {
+  --crewlet-tabs-gap: calc(var(--spacing-1) / 2);
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--spacing-1) / 2);
+  gap: var(--crewlet-tabs-gap);
 }
 
 .crewlet-tabs--chip .crewlet-tabs__tab {
@@ -27238,7 +27634,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tag-SRGTK5KI.css */
+/* Tag-2DQOVE6W.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -27518,12 +27914,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);
 }
 
@@ -27817,7 +28223,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagsInput-7EGBBXHS.css */
+/* TagsInput-CLFHP6I2.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -27897,7 +28303,7 @@ b.crewlet-switcher__match {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-tags-input__box:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-tags-input__box:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -28547,7 +28953,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-DEFDV77Z.css */
+/* TimeWindowPicker-I3HXC74I.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -28602,8 +29008,8 @@ b.crewlet-switcher__match {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window:focus-visible,
-:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window:focus-visible,
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window.is-open {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -28880,7 +29286,7 @@ svg.crewlet-time-window__tick {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }