@crewlethq/ui 0.68.0 → 0.70.0

package/dist/styles.css

@@ -5757,7 +5757,137 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Button-VRRYSXFN.css */
+/* BriefCard-L66R5U32.css */
+/*
+ * A brief inside the product's status card: one sentence, the rows that wait
+ * on the reader, one recommendation and the questions to ask next, each block
+ * under a quiet label so a reader scans straight to the part they need.
+ */
+.crewlet-brief-card__where {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.crewlet-brief-card__asof {
+  white-space: nowrap;
+}
+
+.crewlet-brief-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-brief-card__summary {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: pretty;
+}
+
+.crewlet-brief-card__block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-brief-card__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__needs {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * A ROW IS THE LIST ROW'S GRAMMAR: the dot on the first line, the words and
+ * their one fact, and the action centred at the end, so a column of rows reads
+ * down the dots and across to the presses.
+ */
+.crewlet-brief-card__need {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding-block: var(--spacing-2);
+}
+
+.crewlet-brief-card__need + .crewlet-brief-card__need {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-brief-card__need > .crewlet-button {
+  align-self: center;
+}
+
+.crewlet-brief-card__dot {
+  display: inline-flex;
+  align-items: center;
+  height: 1lh;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__words {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__clear {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-feedback-success-ink);
+}
+
+/* The recommendation: one step, on the accent's softest ground. */
+.crewlet-brief-card__next {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-accent-soft);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__arrow {
+  color: var(--color-brand-accent-ink);
+}
+
+/* The questions to ask next sit on the card's text edge: each row's own inset is pulled out. */
+.crewlet-brief-card__follow-ups {
+  margin-inline: calc(-1 * var(--spacing-3));
+}
+
+
+/* Button-GDEBGBX6.css */
 /*
  * The button, and the link drawn as one.
  *
@@ -5870,23 +6000,50 @@ a.crewlet-breadcrumb__crumb:focus-visible {
    per size. min-height rather than height, so a label that wraps is read
    rather than clipped. */
 .crewlet-btn--small {
+  --crewlet-btn-inset: var(--spacing-2);
+
   min-height: var(--size-control-sm);
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-xs);
 }
 
 .crewlet-btn--medium {
+  --crewlet-btn-inset: var(--spacing-3);
+
   min-height: var(--size-control-md);
-  padding: 0 var(--spacing-3);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-compact);
 }
 
 .crewlet-btn--large {
+  --crewlet-btn-inset: var(--spacing-4);
+
   min-height: var(--size-control-lg);
-  padding: 0 var(--spacing-4);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-sm);
 }
 
+/*
+ * FLUSH: the words start on the line. The padding and the 1px edge are taken
+ * back at the start, so a ghost button drawn as a value starts on the line
+ * the plain values in its column start on, and only the hover ground and the
+ * ring reach past it, into the gutter before it. The START ONLY: taken back at
+ * the end too, the box overran its cell's content edge, which a column that
+ * measures what it cuts short reads as a value that does not fit. The ring is
+ * drawn inside, so a container that clips (a table, a card) never cuts it.
+ *
+ * A CONTAINER WITH NO GUTTER TO GIVE sets `--crewlet-btn-flush-outdent` to 0:
+ * a table's first column and its card rows (DataGrid.css), where the outdent
+ * would pull the control toward the frame.
+ */
+.crewlet-btn--flush {
+  margin-inline-start: var(--crewlet-btn-flush-outdent, calc(-1 * (var(--crewlet-btn-inset) + 1px)));
+}
+
+.crewlet-btn--flush:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-btn--square {
   border-radius: var(--radius-md);
 }
@@ -12214,7 +12371,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* DataGrid-NHIN2I42.css */
+/* DataGrid-Q26F2V5Q.css */
 /*
  * DataGrid: a list as columns, one track list on the grid.
  *
@@ -12337,6 +12494,18 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   --crewlet-data-grid-cell-start: var(--spacing-3);
 }
 
+/*
+ * AND AN ICON COLUMN, whose track (`DATA_GRID_ICON_TRACK`) is the target size
+ * and the cells' own step either side. At the grid's edge (a card's 16px) the
+ * edge inset left 20px for a 24px mark; the column keeps the cells' step on
+ * both sides wherever it stands, as the selection column does.
+ */
+.crewlet-data-grid__th.crewlet-data-grid__th--icon,
+.crewlet-data-grid__cell.crewlet-data-grid__cell--icon {
+  --crewlet-data-grid-cell-start: var(--spacing-3);
+  --crewlet-data-grid-cell-end: var(--spacing-3);
+}
+
 /*
  * THE LIST TABLE'S HEAD: the micro-label register every table takes, 11/500
  * uppercase. A sortable head is a button with its chrome reset; the reset
@@ -12344,6 +12513,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
  */
 .crewlet-data-grid__th {
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: var(--spacing-1);
   padding-block: var(--spacing-2);
@@ -12390,22 +12560,91 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   margin-inline: calc(-1 * var(--crewlet-data-grid-cell-start)) calc(-1 * var(--crewlet-data-grid-cell-end));
   padding-block: var(--spacing-2);
   padding-inline: var(--crewlet-data-grid-cell-start) var(--crewlet-data-grid-cell-end);
+  /* THE HEAD'S WHOLE HEIGHT, so a press anywhere in the cell sorts. */
+  align-self: stretch;
   cursor: pointer;
 }
 
+/*
+ * ONE EDGE PER COLUMN, shared by its head and its values. `align` gives the
+ * head and every cell the same modifier, and both take the same inline inset
+ * (`--crewlet-data-grid-cell-start` and `-end`), so the word in the head and
+ * the values under it start (or end, or centre) on one line. A head that
+ * sorts is a button filling its head, and takes the same edge.
+ */
 .crewlet-data-grid__th--right .crewlet-data-grid__sort {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center .crewlet-data-grid__sort {
+  justify-content: center;
+}
+
 .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover,
 .crewlet-data-grid__th--sorted {
   color: var(--color-text-primary);
 }
 
+/*
+ * A SORTABLE HEAD SAYS SO UNDER THE POINTER: the row's own hover overlay over
+ * the whole cell, the way a row says it opens, so the target is the head and
+ * not the word in it.
+ */
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--plain):hover {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE SORT ARROW. Its box is always laid out, so a head never changes width
+ * when the arrow appears and the fit measured at rest still holds under the
+ * pointer. The two-way arrow of a head that is not the sort shows only on
+ * hover and focus, in the head's own ink; the sorted head's arrow is always
+ * shown, at full ink, and names the direction.
+ */
+.crewlet-data-grid__sort-mark {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--spacing-3);
+  color: inherit;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-data-grid__th:not(.crewlet-data-grid__th--sorted) .crewlet-data-grid__sort-mark {
+  opacity: 0;
+}
+
+/* BEFORE THE WORD IN A RIGHT-ALIGNED COLUMN, so the word stays on the column's
+   right edge over its figures, arrow or not. */
+.crewlet-data-grid__th--right .crewlet-data-grid__sort-mark {
+  order: -1;
+}
+
+/*
+ * AND MIRRORED IN A CENTRED COLUMN: a box the arrow's size before the word, a
+ * gap away, so the word stands on the column's middle over its values rather
+ * than half an arrow off it. ONLY BEFORE A WORD: a head with none (a sortable
+ * mark column) draws its arrow alone, already on the middle, and the reserve
+ * would push it off.
+ */
+.crewlet-data-grid__th--center .crewlet-data-grid__sort:has(> .crewlet-data-grid__truncate)::before {
+  content: '';
+  flex: none;
+  inline-size: var(--spacing-3);
+}
+
+.crewlet-data-grid__th:hover .crewlet-data-grid__sort-mark,
+.crewlet-data-grid__sort:focus-visible .crewlet-data-grid__sort-mark {
+  opacity: 1;
+}
+
 .crewlet-data-grid__th--right {
   justify-content: flex-end;
 }
 
+.crewlet-data-grid__th--center {
+  justify-content: center;
+}
+
 .crewlet-data-grid__sort:focus-visible,
 .crewlet-data-grid__cols-reset:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -12512,23 +12751,30 @@ button.crewlet-data-grid__row-link {
  * A GHOST CONTROL STARTS ON THE COLUMN'S TEXT EDGE. A small ghost button that
  * opens a cell ("Open ENG-12", a choice made in place through a menu) drew its
  * word one padding and one edge (9px) inside the line its column starts on.
- * Its padding and edge are taken back, as a card's foot does (StatusCard.css):
- * the word sits on the line and only the hover's ground reaches past it, into
- * the step between two columns. A column of figures ends its controls on the
- * far edge, so it is left alone.
- *
- * NEVER AT THE GRID'S OWN EDGE: its first column, and every line of a phone's
- * card (below). A grid standing alone has only its 12px edge there, and with
- * the 9px taken back, the 4px the control's focus ring stands off it ran past
- * the grid's clip: the ring lost a pixel and the hover ground stood 3px from
- * the frame.
- */
-.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
-  > .crewlet-btn--ghost.crewlet-btn--small:first-child,
-.crewlet-data-grid__cell:not(:first-child, .crewlet-data-grid__cell--right)
-  > .crewlet-menu-anchor:first-child
-  > .crewlet-btn--ghost.crewlet-btn--small {
-  margin-inline-start: var(--crewlet-data-grid-control-outdent, calc(-1 * (var(--spacing-2) + 1px)));
+ * ONE MECHANISM, Button's `flush`: a flush control anywhere in a cell takes
+ * its padding and edge back, and a ghost control written straight into a cell
+ * (or as a menu's trigger there) is drawn flush without being asked, by the
+ * same declaration. The word sits on the line and only the hover's ground
+ * reaches past it, into the step between two columns.
+ *
+ * THE EXEMPTIONS ARE ONE VARIABLE, `--crewlet-btn-flush-outdent: 0`, which
+ * the flush declaration reads:
+ *
+ * - THE GRID'S OWN EDGE, its first column and every line of a phone's card
+ *   (below). A grid standing alone has only its 12px edge there, and with the
+ *   9px taken back the control's focus ring ran past the grid's clip and the
+ *   hover ground stood 3px from the frame.
+ * - A RIGHT OR A CENTRED COLUMN, which lines its values up by their end or
+ *   their middle, where a control taken back at its start would stand off
+ *   both.
+ */
+.crewlet-data-grid__cell > .crewlet-btn--ghost.crewlet-btn--small:first-child,
+.crewlet-data-grid__cell > .crewlet-menu-anchor:first-child > .crewlet-btn--ghost.crewlet-btn--small {
+  margin-inline-start: var(--crewlet-btn-flush-outdent, calc(-1 * (var(--crewlet-btn-inset) + 1px)));
+}
+
+.crewlet-data-grid__cell:is(:first-child, .crewlet-data-grid__cell--right, .crewlet-data-grid__cell--center) {
+  --crewlet-btn-flush-outdent: 0px;
 }
 
 /*
@@ -12542,10 +12788,18 @@ button.crewlet-data-grid__row-link {
   overflow: clip;
 }
 
+/* A RIGHT-ALIGNED COLUMN holds figures, times and dates: tabular digits, so
+   "53s ago" and "12h ago" end on one edge and their digits stand in columns. */
 .crewlet-data-grid__cell--right {
   justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-data-grid__cell--center {
+  justify-content: center;
 }
 
+
 .crewlet-data-grid__truncate {
   min-width: 0;
   overflow: hidden;
@@ -12618,14 +12872,25 @@ button.crewlet-data-grid__row-link {
   color: var(--color-text-primary);
 }
 
+/*
+ * THE FOOT IS A CAPTION, NOT A ROW. At the row's height and on the head's
+ * raised ground it read as one more row, so a grid's head, rows and foot
+ * blurred into one stack. It takes the micro step of type, the tertiary ink,
+ * half the row's inset and the grid's own ground under the rows' hairline:
+ * quieter than either neighbour, and plainly the end of the list.
+ */
 .crewlet-data-grid__foot {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--crewlet-data-grid-edge);
-  border-top: 1px solid var(--color-border-hover);
-  background: var(--color-surface-elevated);
-  font-size: var(--font-size-xs);
+  flex-wrap: wrap;
+  gap: var(--spacing-1) var(--spacing-3);
+  min-height: var(--size-control-sm);
+  padding: var(--spacing-1) var(--crewlet-data-grid-edge);
+  border-top: 1px solid var(--color-border-default);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
 }
 
 .crewlet-data-grid__foot-spacer {
@@ -12633,7 +12898,7 @@ button.crewlet-data-grid__row-link {
 }
 
 .crewlet-data-grid__note {
-  font-size: var(--font-size-xs);
+  font-size: inherit;
   color: var(--color-text-tertiary);
 }
 
@@ -12677,9 +12942,21 @@ button.crewlet-data-grid__row-link {
   cursor: pointer;
 }
 
+/*
+ * WHERE NOTHING HOVERS (a touch screen), a sortable head shows its arrow at
+ * rest: there is no pointer to bring it out, and a head that only says it
+ * sorts under a pointer says nothing there.
+ */
+@media (hover: none) {
+  .crewlet-data-grid__th:not(.crewlet-data-grid__th--plain) .crewlet-data-grid__sort-mark {
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-data-grid__th,
-  .crewlet-data-grid__row {
+  .crewlet-data-grid__row,
+  .crewlet-data-grid__sort-mark {
     transition: none;
   }
 }
@@ -12703,7 +12980,7 @@ button.crewlet-data-grid__row-link {
   /* No ghost control is pulled out here (see above): every line of a card
      starts at the grid's edge, and a compact row's marks run on one line,
      where the hover ground swallowed the gap before it. */
-  --crewlet-data-grid-control-outdent: 0px;
+  --crewlet-btn-flush-outdent: 0px;
 
   display: block;
 }
@@ -12749,7 +13026,8 @@ button.crewlet-data-grid__row-link {
 
 /* `shrink` and `right` are column shapes, and there are no columns here. */
 :where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--shrink,
-:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right {
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--right,
+:where(.crewlet-data-grid[data-stacked]) .crewlet-data-grid__cell--center {
   white-space: normal;
   justify-content: flex-start;
 }
@@ -15089,7 +15367,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DataView-RH5UDA5F.css */
+/* DataView-L7HLNW7C.css */
 /*
  * The list screen: header, toolbar, filter chips, table.
  *
@@ -15312,118 +15590,7 @@ body.crewlet-data-table-resizing {
 
 /* ── One chip ─────────────────────────────────────────────────────────── */
 
-/*
- * TWO CONTROLS IN ONE PILL: pressing the chip opens its editor, pressing the
- * cross takes the filter off. They are drawn as one object with a divider
- * because they are one filter, and they are two BUTTONS because they do two
- * different things, which is also why the cross carries its own name rather
- * than relying on the chip's.
- */
-.crewlet-filter-axis-chip {
-  display: inline-flex;
-  align-items: stretch;
-  height: var(--size-control-sm);
-  background: var(--color-brand-accent-soft);
-  border: 1px solid var(--color-brand-accent-soft-strong);
-  border-radius: var(--radius-pill);
-  overflow: hidden;
-  max-width: 100%;
-  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-/*
- * THE EDGE, NOT THE FILL. `--color-surface-hover` is the overlay a row at rest
- * carries, and the token says a surface shows it OR a selected tint, never
- * both: put on a chip it REPLACED the accent fill, so the one control on screen
- * that means "this filter is on" went pale under the pointer and read as the
- * filter being switched off.
- *
- * The fill stays where it is and the boundary takes the accent itself.
- * Deepening the fill to the next accent step instead measures 4.48:1 under the
- * chip's own ink on the light ground, and 4.18:1 on a card, which is why that
- * step is a BORDER value in the palette and is used as one here.
- */
-.crewlet-filter-axis-chip:hover {
-  border-color: var(--color-brand-accent);
-}
-
-.crewlet-filter-axis-chip__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-  padding: 0 var(--spacing-2) 0 var(--spacing-3);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-brand-accent-ink);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-xs);
-  line-height: 1;
-}
-
-.crewlet-filter-axis-chip__trigger:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-/*
- * THE AXIS NAME IS NOT DIMMED. It read at 0.85 opacity, which takes the chip's
- * own ink off the step the pairing was measured at, and the name of the axis
- * is exactly what a reader checks before the value: "status" and "stage" narrow
- * a list to very different things. The value's own weight is what separates
- * the halves, which is a difference a reader can see at any contrast.
- */
-.crewlet-filter-axis-chip__label {
-  white-space: nowrap;
-}
-
-.crewlet-filter-axis-chip__value {
-  font-weight: var(--font-weight-semibold);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
- * The chevron carries the chip's own ink rather than a fainter version of it,
- * for the reason every mark beside its words does: a grey glyph next to
- * coloured text reads as two things. At 0.7 it measured 3.00:1 on a card in
- * light, which is the 3:1 floor for a glyph to the second decimal place.
- */
-.crewlet-filter-axis-chip__chevron {
-  flex: none;
-}
-
-/*
- * The remove control keeps the chip's own ink rather than taking the critical
- * hue on hover: removing a filter destroys nothing, and a row of chips that
- * turns red under the pointer reads as a row of dangerous things.
- */
-.crewlet-filter-axis-chip__remove {
-  /* AS TALL AS THE PILL'S INSIDE, as the trigger beside it is. At the small
-     control's own height it stood 2px past the pill's inner edge, cut off at
-     the bottom, and its cross sat 1px under the chip's middle. */
-  height: auto;
-  border-radius: 0;
-  border-left: 1px solid var(--color-brand-accent-soft-strong);
-  color: var(--color-brand-accent-ink);
-}
-
-/*
- * Its ring is drawn INSIDE it, like the trigger's beside it. The pill clips to
- * its own radius, so the outset ring an icon button carries everywhere else is
- * cut off on every edge the control touches, which here is all of them.
- */
-.crewlet-filter-axis-chip__remove:focus-visible {
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-filter-axis-chip {
-    transition: none;
-  }
-}
+/* A chip is a [FilterPill] (FilterPill.css) whose words open its editor. */
 
 /* ── A chip's editor ──────────────────────────────────────────────────── */
 
@@ -18370,6 +18537,143 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* FilterPill-4GMNFZND.css */
+/*
+ * The filter pill: one filter in force, as a sentence on the accent ground.
+ *
+ * TWO CONTROLS IN ONE PILL where the words open an editor: pressing the words
+ * opens it, pressing the cross takes the filter off. They are drawn as one
+ * object with a divider because they are one filter, and they are two BUTTONS
+ * because they do two different things, which is also why the cross carries
+ * its own name rather than relying on the words'.
+ */
+.crewlet-filter-pill {
+  display: inline-flex;
+  align-items: stretch;
+  height: var(--size-control-sm);
+  max-width: 100%;
+  min-width: 0;
+  background: var(--color-brand-accent-soft);
+  border: 1px solid var(--color-brand-accent-soft-strong);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/*
+ * THE EDGE, NOT THE FILL, under the pointer. The surface hover overlay put on
+ * the pill REPLACED the accent fill, so the one control on screen that means
+ * "this filter is on" went pale and read as the filter being switched off.
+ * The fill stays and the boundary takes the accent itself: the next fill step
+ * measures under 4.5:1 beneath the pill's own ink, which is why that step is a
+ * border value in the palette and is used as one here.
+ */
+.crewlet-filter-pill:hover {
+  border-color: var(--color-brand-accent);
+}
+
+/*
+ * THE WORDS: one line, the parts a step apart. The gap draws the space; the
+ * space characters between the parts are still in the text, which is what a
+ * copy and a screen reader take, but a flex row does not draw them, so the
+ * step is the one spacing. A long value ends in an ellipsis at the pill's
+ * edge. Plain text, or the control `renderWords` makes, which gives up a
+ * button's chrome and keeps the same line.
+ */
+.crewlet-filter-pill__words {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  padding: 0 var(--spacing-3);
+  background: transparent;
+  border: 0;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* A pill with a remove control gives the words' trailing inset to the divider. */
+.crewlet-filter-pill:has(> .crewlet-filter-pill__remove) > .crewlet-filter-pill__words {
+  padding-inline-end: var(--spacing-2);
+}
+
+button.crewlet-filter-pill__words {
+  cursor: pointer;
+}
+
+.crewlet-filter-pill__words:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THREE REGISTERS. The field and the relation are what the filter is ABOUT,
+ * in the secondary ink at the regular weight; the value is the answer, in the
+ * accent ink at the semibold weight, and the only part a long filter cuts.
+ */
+.crewlet-filter-pill__field,
+.crewlet-filter-pill__operator {
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-filter-pill__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
+}
+
+/*
+ * A glyph after the words (a popover's chevron) carries the value's ink: a
+ * grey glyph next to coloured text reads as two things.
+ */
+.crewlet-filter-pill__words > svg {
+  flex: none;
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * The remove control: as tall as the pill's inside, behind a hairline, in the
+ * pill's own ink. At the small control's own height it stood past the pill's
+ * inner edge and was cut off at the bottom.
+ *
+ * RAISED OVER ICONBUTTON'S OWN RULES (`.crewlet-icon-btn`, `--sm`), which
+ * carry the same weight as one class and can load after this sheet in a
+ * bundle: at equal weight the control kept its 26px height and its corner
+ * radius in a 26px pill with a 1px edge, overran the pill by a pixel and lost
+ * the bottom of its focus ring. The child combinator is the extra weight, and
+ * a test holds it above every IconButton rule.
+ */
+.crewlet-filter-pill > .crewlet-filter-pill__remove {
+  height: auto;
+  border-radius: 0;
+  border-inline-start: 1px solid var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * Its ring is drawn INSIDE it, like the words'. The pill clips to its own
+ * radius, so an outset ring is cut off on every edge the control touches.
+ */
+.crewlet-filter-pill > .crewlet-filter-pill__remove:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-filter-pill {
+    transition: none;
+  }
+}
+
+
 /* FindingList-MPLA2ZTO.css */
 /*
  * What a checker found: a quiet list, one row each, the tone's glyph in its
@@ -23011,7 +23315,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Menu-OLUGHX56.css */
+/* Menu-I4SNXHOT.css */
 /*
  * The menu button's panel.
  *
@@ -23301,6 +23605,18 @@ a.crewlet-icon-btn {
   }
 }
 
+/*
+ * A TRIGGER THAT IS THE VALUE it changes (`valueTrigger`): the surrounding
+ * text's size, weight and ink, not a button label's, so a writer's row reads
+ * as a reader's. Its start is Button's `flush`. Raised over the button's own
+ * size and variant rules, which carry one class each.
+ */
+.crewlet-menu-anchor > .crewlet-btn.crewlet-menu__value-trigger {
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+}
+
 
 /* MergeConflicts-HCXPRQVR.css */
 /* MergeConflicts: each clash as the other side's lines beside the draft's,
@@ -36220,7 +36536,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TableCells-F6MUV572.css */
+/* TableCells-TKSNLRK3.css */
 /* The read-only table cells. Each one holds a single line and shrinks inside
    its column (`min-width: 0`), so a long value is cut with an ellipsis and
    its whole text on the title rather than standing the row two lines tall. */
@@ -36254,6 +36570,7 @@ b.crewlet-switcher__match {
 .crewlet-table-cell__date {
   color: var(--color-text-tertiary);
   white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
 
 /*