@crewlethq/ui 0.4.4 → 0.5.0

package/dist/styles.css

@@ -88,7 +88,7 @@
 }
 
 
-/* AddPill-DFWXYLIQ.css */
+/* AddPill-IJQYCY6C.css */
 /*
  * The control that adds a child (AddPill.tsx).
  *
@@ -493,6 +493,15 @@
      `currentcolor` under that root then resolves to THAT: the fill was
      overridden and landed on the same purple it started from. */
   color: inherit;
+}
+
+/* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
+   inside of a Lucide glyph turns every closed shape in it solid and every
+   open one into a smear, so a `.crewlet-glyph` keeps the fill its own frame
+   decides and takes the ink through its stroke, which is `currentColor`. */
+.crewlet-add-pill__section svg:not(.crewlet-glyph),
+.crewlet-add-pill__section svg:not(.crewlet-glyph) g,
+.crewlet-add-pill__section svg:not(.crewlet-glyph) path {
   fill: currentcolor;
 }
 
@@ -525,18 +534,30 @@
 }
 
 
-/* AppShell-NVE6LHNI.css */
+/* AppShell-XARELGIH.css */
 /*
- * The application frame.
+ * The application frame: a rail on the FRAME, and the screen on a SHEET that
+ * floats beside it.
  *
  * The rail's width and the bar's height are read from the token layer through
  * two component variables, so an application with a narrower rail sets ONE
  * value rather than repeating a number in its own stylesheet, which is what
  * every consumer of the passive shell had to do.
  *
+ * THE SHEET IS INSET FROM THE FRAME, rounded, and drawn round with the plain
+ * hairline, which is the approved design's frame: the rail stands on the
+ * lowest rung and the screen a rung above it, so where the navigation ends
+ * and the page begins is a difference of ground, a line and a corner rather
+ * than a divider the rail draws. The inset is --size-shell-inset on the
+ * sheet's top, right and bottom; the rail is the gap on its left. The sheet clips what it holds to its corner, and the ONE scroller is
+ * inside it, so a screen scrolls under the bar and never past the corner.
+ *
  * The breakpoint is written out because a media query cannot read a custom
  * property. It is the shell step from @crewlethq/tokens, and the CSS check
- * compares the literal against the token.
+ * compares the literal against the token. The query is STRICTLY UNDER it,
+ * (width < 1024px): the step is the rail, the inset and the sheet's floor
+ * added up, so at exactly that width the rail still fits, and the component's
+ * own matchMedia asks the same question.
  */
 
 .crewlet-app-shell {
@@ -548,15 +569,34 @@
   --crewlet-app-shell-drawer-z: var(--z-index-overlay);
   display: grid;
   grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* One row, the viewport's height less nothing: the sheet's own margin is
+     what holds it off the frame's edges, and a row sized by its content would
+     let a tall screen push the sheet's bottom edge off the window. */
+  grid-template-rows: minmax(0, 1fr);
   /* THE DOCUMENT DOES NOT SCROLL: exactly the viewport, and nothing may grow
      past it. A page that can also scroll as a whole carries the rail off the
      top of the window. */
   height: 100dvh;
   overflow: hidden;
-  background: var(--color-surface-background);
+  /* The FRAME, the lowest rung: what the rail stands on and what shows round
+     the sheet's inset. */
+  background: var(--color-surface-frame);
   color: var(--color-text-primary);
 }
 
+/*
+ * A shell with no rail is one column, and the sheet is inset on its left as
+ * well, from the frame's edge rather than from a rail. The inset is
+ * the ROOT's padding rather than a second margin rule on the sheet, so the
+ * narrow block below takes it back with a rule of the same weight declared
+ * after this one; a margin here would have needed two classes, and would have
+ * beaten the narrow block's one.
+ */
+.crewlet-app-shell--no-rail {
+  grid-template-columns: minmax(0, 1fr);
+  padding-left: var(--size-shell-inset);
+}
+
 /* The skip link, drawn only while it holds focus, over everything. */
 .crewlet-app-shell__skip {
   position: fixed;
@@ -581,13 +621,22 @@
   outline-offset: 2px;
 }
 
+/*
+ * The rail stands on the FRAME, the application ground, and the screen beside
+ * it on the sheet: the two lowest rungs, which are what separate the chrome a
+ * reader navigates with from the page they are reading.
+ *
+ * AND IT DRAWS NO EDGE OF ITS OWN in the wide layout. It carried a right
+ * border when the screen beside it was flush against it; the sheet draws its
+ * own hairline now, an inset away, and a second line at the rail's edge would
+ * run the height of the window parallel to it, eight pixels off.
+ */
 .crewlet-app-shell__rail {
   display: flex;
   flex-direction: column;
   min-height: 0;
   min-width: 0;
-  background: var(--color-surface-topbar);
-  border-right: 1px solid var(--color-border-default);
+  background: var(--color-surface-frame);
 }
 
 .crewlet-app-shell__rail-inner {
@@ -598,8 +647,13 @@
 }
 
 /*
- * The head sits at the top bar's own height, so the first nav row starts level
- * with the top of the screen beside it.
+ * The head stands BESIDE the top bar: the inset the sheet is held off the
+ * frame by, then the bar's own height, so what the head holds (the lockup) is
+ * centred on the same line as the screen's title in the bar beside it, and the
+ * first nav row starts level with the top of the screen under the bar. The
+ * box is sized as a border box whatever the document says, because the height
+ * is written as the inset plus the bar and the padding is the inset: counted
+ * outside the height, the head would stand an inset taller than the bar.
  *
  * AND IT DRAWS NO LINE OF ITS OWN. It carried a bottom border, which put a
  * divider across the rail at the same height as the bar's, and the two read as
@@ -612,7 +666,9 @@
   display: flex;
   align-items: center;
   flex: none;
-  min-height: var(--crewlet-app-shell-topbar);
+  box-sizing: border-box;
+  min-height: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
+  padding-top: var(--size-shell-inset);
 }
 
 .crewlet-app-shell__rail-body {
@@ -646,7 +702,7 @@
  * AND SO DOES WHATEVER ELSE LANDS THERE. `AppShell.RailRow` is the row this
  * package draws, but the slot takes a control from anywhere and an application
  * that already has a status button reaches for that one: the engine drops a
- * tertiary Button into the foot, which arrived centred in a 263px rail on a
+ * ghost Button into the foot, which arrived centred in a 263px rail on a
  * toolbar's inset. The foot claims a direct child instead, which is the same
  * move the nav's badge slot makes on whatever a caller puts in it, and there
  * is no second idea of what a row in this rail is.
@@ -699,17 +755,17 @@
   color: var(--color-text-primary);
 }
 
-/* A row in the foot fills the rail, so its label takes whatever the glyph and
-   the trailing slot leave it and truncates rather than pushing them off the
-   end: a status line says what a node is doing, and what it says is as long as
-   the sentence the application wrote. */
+/* A row in the foot fills the rail, so its label takes whatever the glyph
+   leaves it and WRAPS rather than ending in an ellipsis: a status line says
+   what a node is doing, and what it says is as long as the sentence the
+   application wrote. Cut, it kept the half that said nothing ("engine
+   conn…"). */
 .crewlet-app-shell__rail-foot > .crewlet-btn > .crewlet-btn__label {
   display: block;
   flex: 1 1 auto;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 /*
@@ -730,27 +786,102 @@
   flex: none;
 }
 
-.crewlet-app-shell__rail-row-label {
+/*
+ * THE WORDS AND THE TRAILING VALUE SHARE ONE WRAPPING LINE, and the words are
+ * never cut.
+ *
+ * The words take their own width up to the whole line (`flex-basis: auto`
+ * with `max-width: 100%`), so the line breaks BEFORE the value exactly when
+ * the words and the value together are wider than the rail: the value stands
+ * at the end of the words' line while both fit, and at the start of a line
+ * of its own under them when they do not. The words grow into what is left
+ * on their line, which is what puts a value that fits at the row's end
+ * without a margin that would also push a wrapped one to the far side. And
+ * words wider than the rail wrap, at any character if they must, rather than
+ * end in an ellipsis: they are the part of the row that was the point.
+ */
+.crewlet-app-shell__rail-row-body {
+  display: flex;
   flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-app-shell__rail-row-text {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  max-width: 100%;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-/* Pushed to the end of the row whatever the label's length. */
+.crewlet-app-shell__rail-row-label,
+.crewlet-app-shell__rail-row-detail {
+  overflow-wrap: anywhere;
+}
+
 .crewlet-app-shell__rail-row-trailing {
   display: inline-flex;
   align-items: center;
   flex: none;
-  margin-left: auto;
 }
 
-.crewlet-app-shell__column {
+/*
+ * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
+ * status, its words over a second line, on the card rung inside the plain
+ * hairline, so the one row in the foot that reports on the fleet stands off
+ * the rows that only go somewhere. The words step up to the primary ink at the
+ * medium weight, since they are the state, and the detail keeps the row's
+ * quiet ink a step smaller. Both are set on the snug leading, where the
+ * design's two lines sit as one block rather than as two rows.
+ *
+ * It keeps the row's own inline pad and its transparent-border arithmetic, so
+ * its mark still lands on the line every nav glyph above it sits on; the block
+ * inset grows by a pixel for the second line, the design's 10px around the
+ * words with the border counted in.
+ */
+.crewlet-app-shell__rail-row--block {
+  padding-block: calc(var(--spacing-2) + 1px);
+  border-color: var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-app-shell__rail-row--block .crewlet-app-shell__rail-row-label {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-app-shell__rail-row-detail {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+}
+
+/*
+ * THE SHEET: the bar, a banner, the one scroller and a footer, floated on the
+ * frame. It stands on --color-surface-background, the sheet rung, inside the
+ * plain hairline and at the sheet's own corner, a step rounder than every
+ * card drawn inside it. It clips to that corner, which is what lets the bar
+ * and the scroller run square to its edges and still be rounded by it.
+ *
+ * Physical margins, as every other edge in this file is physical: the drawer
+ * slides in from the left and the rail's column is the grid's first, so the
+ * shell is drawn left to right throughout, and one logical margin in it would
+ * be a promise about a direction nothing else here keeps.
+ */
+.crewlet-app-shell__sheet {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: 0;
+  margin: var(--size-shell-inset) var(--size-shell-inset) var(--size-shell-inset) 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sheet);
+  background: var(--color-surface-background);
+  overflow: hidden;
 }
 
 .crewlet-app-shell__topbar {
@@ -761,7 +892,7 @@
   height: var(--crewlet-app-shell-topbar);
   padding: 0 var(--spacing-4);
   border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-topbar);
+  background: var(--color-surface-background);
 }
 
 .crewlet-app-shell__title {
@@ -867,17 +998,48 @@
   background: var(--color-surface-scrim);
 }
 
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-app-shell {
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .crewlet-app-shell--no-rail {
+    padding-left: 0;
+  }
+
+  /*
+   * FULL BLEED. Under the step the rail is not beside the sheet, so there is
+   * nothing for the sheet to be held off: the inset, the corner and the
+   * hairline all collapse to nothing, and the sheet is the window. A corner
+   * kept here would round the screen into the viewport's own corners, and a
+   * hairline would draw a line round the window's edge.
+   */
+  .crewlet-app-shell__sheet {
+    margin: 0;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* Beside a full-bleed sheet the bar starts at the window's top, and so does
+     the drawer's head. */
+  .crewlet-app-shell__rail-head {
+    min-height: var(--crewlet-app-shell-topbar);
+    padding-top: 0;
+  }
+
+  /*
+   * The drawer draws the edge the wide rail does not: it slides over the
+   * screen rather than standing beside a sheet that draws its own, and in
+   * light the frame and the sheet it covers are close enough that the shadow
+   * alone does not say where the drawer ends.
+   */
   .crewlet-app-shell__rail {
     position: fixed;
     inset: 0 auto 0 0;
     width: var(--crewlet-app-shell-rail);
     max-width: 100%;
     transform: translateX(-100%);
+    border-right: 1px solid var(--color-border-default);
     box-shadow: var(--shadow-xl);
     /*
      * HIDDEN, not only moved. A rail translated off screen keeps every link
@@ -923,7 +1085,7 @@
 }
 
 
-/* Avatar-P2KRQM2B.css */
+/* Avatar-XID7Z74C.css */
 /*
  * The identity badge.
  *
@@ -932,7 +1094,11 @@
  * spent on phases and event categories, so one amber meant "the execute
  * phase", "the decision category" and "the Analyst" at once. A hash of a name
  * carries no information: rename the seat and its colour changes, which is the
- * proof it never meant anything. Identity is the monogram and the name.
+ * proof it never meant anything. Identity is the OUTLINE (a squircle for an
+ * agent, a circle for a person), the monogram and the name.
+ *
+ * THE ONE HUE A BADGE CARRIES IS A STATE, as a ring round it, and the ring is
+ * the component's only coloured line.
  *
  * The seeded tints stay for the one case that earns them, a roster somebody
  * scans, and their grounds are TOKENS: measured under white initials and held
@@ -958,7 +1124,7 @@
      The box is a fixed square that centres whatever line it holds, so the ink
      lands in the same place either way; what the tight step bought was one
      more number in a component that already sets four. */
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   text-transform: uppercase;
   user-select: none;
   box-sizing: border-box;
@@ -966,8 +1132,10 @@
 
 /*
  * The four steps. Each pairs its box with a type step, so two initials sit
- * inside the circle at every one of them; a numeric size computes its own,
- * because nothing in the scale can answer for an arbitrary box.
+ * inside the outline at every one of them. A numeric size sets the same
+ * `--crewlet-avatar-size` inline and computes its own type, because nothing in
+ * the scale can answer for an arbitrary box; everything else it takes from the
+ * rules below exactly as a step does.
  */
 .crewlet-avatar--xs {
   --crewlet-avatar-size: 20px;
@@ -989,35 +1157,47 @@
   font-size: var(--font-size-sm);
 }
 
+/* ── kinds ─────────────────────────────────────────────────────────────── */
+
 /*
- * Shapes. THE SQUARE IS THE DEFAULT, which is the change: the engine's
- * identity mark is a rounded square and it is what a reader sees in every seat
- * chip, every list row and every header on that product. A circle stays for a
- * PERSON, where the round badge is the platform convention a member list
- * already speaks.
+ * AN AGENT IS A SQUIRCLE, set in the mono face: what the engine runs, named
+ * the way a handle is written.
+ *
+ * THE CORNER MOVES WITH THE BOX, at 0.29 of it (`AVATAR_CORNER_RATIO` in the
+ * component, which the suite holds equal to this number): the approved
+ * design's 7px at 24 and 9px at 30, as one proportion. It is computed here from
+ * the size property every step and every numeric size sets, so there is ONE
+ * ladder. There used to be two, a step table here and a numeric table in the
+ * component, and they disagreed: `size={80}` drew a squarer badge than
+ * `size="lg"` at half its width.
  *
- * The square's radius moves with the box rather than sitting at one step. The
- * engine draws 4px at 20, 8px at 26 and 12px at 40, which is a roughly
- * constant proportion; one radius across the four steps reads as a pill at the
- * smallest and as a plain box at the largest. A NUMERIC SIZE OBEYS THE SAME
- * LADDER, from `avatarSquareCorner` in the component, which picks the corner
- * of the step nearest the box it was given: taking one fixed step there is how
- * `size={80}` ended up drawn squarer than `size="lg"` at half its width.
+ * WHERE THE BROWSER DRAWS A SQUIRCLE, IT IS A WHOLE ONE. `corner-shape:
+ * squircle` is a superellipse of exponent 4, which at a given radius reaches
+ * much closer to the box's corner than a circular arc does: at the 45 degree
+ * point it stands 0.159 of the radius in from each edge, against 0.293 for an
+ * arc. Kept at 0.29 of the box, that corner would stand 0.046 of the box in,
+ * half the design's depth and a nearly square badge. At half the box it stands
+ * 0.0795 of the box in, against the design's 0.0849 (0.13px at 24px), with the
+ * continuous curvature a squircle is for. So the corner is the circle token
+ * there, and the fallback above is what every other browser draws.
  */
-.crewlet-avatar--circle {
-  border-radius: var(--radius-circle);
-}
-
-.crewlet-avatar--square {
-  border-radius: var(--radius-md);
+.crewlet-avatar--agent {
+  border-radius: calc(var(--crewlet-avatar-size) * 0.29);
+  font-family: var(--font-family-mono);
 }
 
-.crewlet-avatar--square.crewlet-avatar--xs {
-  border-radius: var(--radius-xs);
+@supports (corner-shape: squircle) {
+  .crewlet-avatar--agent {
+    corner-shape: squircle;
+    border-radius: var(--radius-circle);
+  }
 }
 
-.crewlet-avatar--square.crewlet-avatar--lg {
-  border-radius: var(--radius-lg);
+/* A PERSON IS A CIRCLE, set in the sans face, the round badge every member list
+   a reader has used already speaks. */
+.crewlet-avatar--human {
+  border-radius: var(--radius-circle);
+  font-family: var(--font-family-sans);
 }
 
 .crewlet-avatar--image {
@@ -1031,23 +1211,15 @@
   border: 1px solid transparent;
 }
 
+/* The design's badge: the raised rung with the strong hairline round it and
+   the secondary ink, so a badge on a card reads as a mark standing on it
+   rather than as a hole in it. */
 .crewlet-avatar--neutral {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   color: var(--color-text-secondary);
 }
 
-/*
- * The label on the accent fill is the on-accent step, not the on-brand one.
- * The themes repaint the brand fill monochrome and leave the accent where it
- * is, so on-brand is black in the dark palette and black on the accent
- * measures 4.35:1. On-accent is white in every palette and measures 4.83:1.
- */
-.crewlet-avatar--brand {
-  background: var(--color-brand-accent);
-  color: var(--color-text-on-accent);
-}
-
 .crewlet-avatar--seeded {
   color: var(--color-text-on-accent);
 }
@@ -1063,26 +1235,135 @@
 .crewlet-avatar--tint-8 { background: var(--color-avatar-tint-8); }
 .crewlet-avatar--tint-9 { background: var(--color-avatar-tint-9); }
 
+/* ── the state ring ────────────────────────────────────────────────────── */
+
+/*
+ * A 1.5px LINE 2px OUTSIDE THE BADGE, which is the design's ring: it draws a
+ * 3.5px shadow over a 2px one in the card's colour, and 3.5 less 2 is 1.5.
+ *
+ * AN OUTLINE RATHER THAN THAT SHADOW PAIR, for three reasons. The gap is
+ * TRANSPARENT, so the ring reads on whatever the badge stands on, where the
+ * design's gap is the card's own fill and cuts a card-coloured band into any
+ * other ground. An outline follows the corner, the squircle's included, in
+ * every engine this package supports. And forced-colors mode keeps an outline
+ * and drops every shadow, so the ring is still drawn for the readers who most
+ * need a boundary; it is drawn in the system colour there, which is why the
+ * state is always said in words beside the badge as well.
+ *
+ * LONGHANDS, so the tone rules below set the colour alone and cannot reset the
+ * geometry, whichever order they are read in. Each fill is measured at 3:1 as
+ * a mark on every opaque surface by @crewlethq/tokens, which is the floor a
+ * boundary a reader has to see is held to.
+ */
+.crewlet-avatar--ring-info,
+.crewlet-avatar--ring-warning,
+.crewlet-avatar--ring-danger,
+.crewlet-avatar--ring-success,
+.crewlet-avatar--ring-brand {
+  outline-style: solid;
+  outline-width: 1.5px;
+  outline-offset: 2px;
+}
+
+.crewlet-avatar--ring-info {
+  outline-color: var(--color-feedback-info);
+}
+
+.crewlet-avatar--ring-warning {
+  outline-color: var(--color-feedback-warning);
+}
+
+.crewlet-avatar--ring-danger {
+  outline-color: var(--color-feedback-danger);
+}
+
+.crewlet-avatar--ring-success {
+  outline-color: var(--color-feedback-success);
+}
+
+/* SELECTED, in the accent, which is what the accent means: where the reader
+   is. It is the only place a badge spends the accent. */
+.crewlet-avatar--ring-brand {
+  outline-color: var(--color-brand-accent);
+}
+
+
+/* AvatarStack-GEJBNV7E.css */
 /*
- * A HUMAN SEAT IS DRAWN, NOT TINTED. The engine does not run it, which is a
- * structural fact rather than a status, so it takes the edge and no fill at
- * all. Last, so it wins over whichever tone it is paired with.
+ * Several badges as one mark (AvatarStack.tsx).
+ *
+ * THE DESIGN'S STACK: each badge overlaps the one before it by 6px and is cut
+ * out of it by a 2px ring in the ground's own colour, so the overlap reads as
+ * badges standing in front of each other rather than as one blot. The ring is
+ * a SHADOW rather than a border, because it has to fall outside the badge
+ * without moving it, and it is decoration: forced-colors mode drops it and the
+ * badges' own hairlines still separate them.
  *
- * The whole border rather than its style alone: the badge is the same person
- * whether or not they have uploaded a photo, and an image draws no border of
- * its own for a style to change.
+ * THE GROUND IS A VARIABLE because a stack stands on whatever it is put on,
+ * and a cut-out in the sheet's colour on a card is a band of the wrong grey
+ * round every badge. It defaults to the SHEET, because that is where the
+ * approved design draws every stack it has: in the top bar of a page, over a
+ * board and over a knowledge page, and in a task's side column, all of them on
+ * the sheet, with the design's own cut-out drawn in the sheet's colour. A stack
+ * that stands on a card, or on anything else, sets it on the stack itself.
+ *
+ * Every rule is two classes deep, so it outweighs the badge's own one-class
+ * rules whichever order the stylesheets are bundled in.
  */
-.crewlet-avatar--dashed {
-  background: transparent;
-  /* The same hairline the solid neutral badge draws, so the human seat differs
-     by its LINE STYLE and its missing fill rather than by a second grey a
-     reader would have to hold two of in mind. */
-  border: 1px dashed var(--color-border-default);
+
+.crewlet-avatar-stack {
+  --crewlet-avatar-stack-ground: var(--color-surface-background);
+  /* The badges' box, which the component sets from the step it was given; the
+     default is the default step's, sm. The chip reads it, so it stands exactly
+     as tall as the badges beside it. */
+  --crewlet-avatar-stack-size: 26px;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.crewlet-avatar-stack > .crewlet-avatar-stack__member {
+  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+}
+
+/* The design's 6px, a little under a third of its 22px badge: enough that the
+   stack is one mark, little enough that every monogram stays readable. */
+.crewlet-avatar-stack > .crewlet-avatar-stack__member + .crewlet-avatar-stack__member {
+  margin-inline-start: -6px;
+}
+
+/*
+ * THE COUNT OF THE REST. A PILL, where every badge is a squircle or a circle:
+ * it is a number rather than somebody, and drawn in either kind's outline it
+ * would read as one more agent or one more person. Otherwise it is the neutral
+ * badge exactly (the raised rung, the strong hairline, the secondary ink), in
+ * the sans face with tabular figures so "+9" and "+12" sit alike.
+ */
+.crewlet-avatar-stack > .crewlet-avatar-stack__more {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--crewlet-avatar-stack-size);
+  height: var(--crewlet-avatar-stack-size);
+  padding-inline: var(--spacing-1);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-elevated);
   color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--font-line-height-tight);
+  white-space: nowrap;
+  user-select: none;
 }
 
 
-/* BrandLockup-6ISDEHPJ.css */
+/* BrandLockup-JKGXFCZF.css */
 /*
  * The brand lockup at the head of the rail.
  *
@@ -1094,12 +1375,19 @@
 
 /*
  * IT FITS THE BAR IT IS DRAWN BESIDE. The rail's head is the top bar's own
- * height (64px, a fixed token at every density), so the lockup has to come in
+ * height (52px, a fixed token at every density), so the lockup has to come in
  * under that height with its context line on: mark 24 plus one 11px line at
- * the document's own leading plus twice the block padding is 56.5px at the
- * normal density and 58.7px at comfortable. It was 66.5px, which grew the head
- * past the bar and put a visible kink across the window on every deployment
- * that names a company.
+ * the document's own leading (15.95px) plus twice the block padding is 47.95px
+ * at the normal density and 49.07px at comfortable. It was 66.5px once, which
+ * grew the head past the bar and put a visible kink across the window on every
+ * deployment that names a company.
+ *
+ * THE BLOCK PADDING IS THE SMALL STEP for that reason. It was the 8px step
+ * while the bar was 64px; at 52px the same padding made the lockup 55.95px,
+ * past the bar again, and the mark and the context line cannot give anything
+ * up (the mark is the home link's 24px target, the line is the document's).
+ * The head centres the lockup, so the padding is the least room it keeps at
+ * the top and the bottom rather than the room it is drawn with.
  *
  * NO GAP BETWEEN THE TWO LINES. They are one lockup rather than two stacked
  * labels, and the leading is the space between them: a gap on top of it reads
@@ -1118,7 +1406,7 @@
      link's target height, so it sits on the 24px floor rather than under it.
      A consumer with a wider mark sets this rather than editing two rules. */
   --crewlet-brand-mark: 24px;
-  padding: var(--spacing-2) calc(var(--size-nav-gutter) + var(--size-nav-row-pad));
+  padding: var(--spacing-1) calc(var(--size-nav-gutter) + var(--size-nav-row-pad));
 }
 
 .crewlet-brand__home {
@@ -1157,7 +1445,7 @@
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   color: var(--color-text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1167,24 +1455,23 @@
 /* Indented to the name above it by the mark's own box, and truncated: a
    company name is as long as somebody registered it.
 
-   THE RAIL'S OWN MICRO-LABEL REGISTER, which is the wide step rather than the
-   wider one an Eyebrow takes: this line and the nav's group labels are the two
-   uppercase runs in the rail, they sit twenty pixels apart, and at the wider
-   step the company's name was visibly broader than the sections under it
-   rather than quieter than them. The suite holds the two together. */
+   THE RAIL'S ONE UPPERCASE RUN, on the wide step rather than the wider one an
+   Eyebrow takes: at the wider step the company's name was visibly broader
+   than the sections under it rather than quieter than them. The nav's group
+   labels twenty pixels below are sentence-case words at the caption step, so
+   the case and the size are what hold the two apart; the suite holds that. */
 .crewlet-brand__context {
   padding-left: calc(var(--crewlet-brand-mark) + var(--spacing-2));
   font-family: var(--font-family-sans);
   font-size: var(--font-size-2xs);
-  /* THE REGULAR WEIGHT, which is the one thing that separates this line from
-     the nav's group labels below it. The two are the only uppercase runs in
-     the rail and they sit twenty pixels apart; drawn at the same size, the
-     same tracking and the same weight they read as two headings of one list
-     rather than as the company's name above the sections in it. A group name
-     is what a reader scans, so the weight stays there and goes from here. */
+  /* THE REGULAR WEIGHT: the company's name is a quiet line under the product
+     name, not a heading. It used to be the one thing separating this line
+     from the nav's group labels, when both were uppercase at this size; the
+     labels are sentence case at the caption step now, and the weight stays
+     here because the line is still meant to be read past. */
   font-weight: var(--font-weight-regular);
   letter-spacing: var(--font-letter-spacing-wide);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   text-transform: uppercase;
   color: var(--color-text-tertiary);
   overflow: hidden;
@@ -1193,16 +1480,16 @@
 }
 
 
-/* Button-D4J6B4MA.css */
+/* Button-X4B2TJAQ.css */
 /*
  * The button, and the link drawn as one.
  *
  * SIX VARIANTS, AND THEY ARE A HIERARCHY RATHER THAN A PALETTE. primary is the
  * one action on the screen and takes the accent fill; secondary is everything
  * else; outline is the branded yes on a page that already has a primary;
- * tertiary is for a dense toolbar; danger is destructive, and the only one
- * that spends the critical hue. accent is primary's own recipe under the name
- * a caller may already have written.
+ * ghost is for a dense toolbar and the quiet second answer beside a primary;
+ * danger is destructive, and the only one that spends the critical hue. accent
+ * is primary's own recipe under the name a caller may already have written.
  *
  * THE ONE ACTION IS THE ACCENT FILL. It reads as the answer a screen is
  * asking for, which is what a filled monochrome button could not do beside a
@@ -1212,9 +1499,12 @@
  *
  * Every size is a --size-control-* step, so a button, a select and an input in
  * one row are the same height at every density, and none of them can fall
- * under the 24px a finger can hit. The padding ramp is one spacing step per
- * size, so a small button in a toolbar is tight and a large one on a landing
- * page is not.
+ * under the 24px a finger can hit. The steps are the approved design's own
+ * control rhythm, 30px and 26px for the medium and the small button, and they
+ * live in the tokens rather than here because the field and the segmented
+ * row beside a button stand at the same height. The padding ramp is one
+ * spacing step per size, so a small button in a toolbar is tight and a large
+ * one on a landing page is not.
  */
 
 .crewlet-btn {
@@ -1332,9 +1622,16 @@
  * Primary: the accent fill, and the one action on the screen.
  *
  * `accent` is the same recipe under the other name it is written as. They are
- * one rule rather than two, so the pair cannot drift into two blues, and the
+ * one rule rather than two, so the pair cannot drift into two violets, and the
  * name stays because call sites already spell it.
  *
+ * UNDER THE POINTER AND PRESSED IT DARKENS, a step each, and never brightens.
+ * The label is the on-accent white in both palettes, so a brighter fill is a
+ * step toward it: the approved design's brightness(1.08) hover took the dark
+ * accent's label from 4.53:1 to 4.18:1, under the text floor at the one moment
+ * the reader is about to press. The steps are tokens rather than a filter, so
+ * @crewlethq/tokens can measure them.
+ *
  * THE BORDER IS TRANSPARENT rather than the fill: a filled control needs no
  * boundary, and one drawn in the fill's own colour makes the button a step
  * wider than the secondary beside it in every forced-colors stylesheet that
@@ -1359,16 +1656,30 @@
   border-color: transparent;
 }
 
-/* Secondary: a surface with a visible boundary. Everything else. */
+/*
+ * Secondary: everything else. The CARD's own ground inside the STRONG
+ * hairline, the approved design's button.
+ *
+ * STRONG, NOT DEFAULT, because a button stands on the very card it is filled
+ * with: every panel's actions sit on a card, and there the fill is no edge at
+ * all and the boundary is the whole of the button. The default hairline is
+ * the one that finds a CARD on the sheet, and a button drawn with it was a
+ * card-shaped outline of the panel's own divider; the strong step is the one
+ * a reader takes for a control's edge.
+ *
+ * Under the pointer it steps up a rung, to the raised ground, which the
+ * palette suite holds a visible step above the card, with the boundary a
+ * step stronger again; pressed, the pressed overlay.
+ */
 .crewlet-btn--secondary {
   background: var(--color-surface-subtle);
   color: var(--color-text-primary);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
 }
 
 .crewlet-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
@@ -1387,19 +1698,25 @@
   background: var(--color-brand-accent-soft);
 }
 
-/* Tertiary: borderless, for a dense toolbar. */
-.crewlet-btn--tertiary {
+/*
+ * Ghost: no ground and no boundary, for a dense toolbar and for the quiet
+ * answer beside a primary ("Reassign" next to "Raise budget"). It is the word
+ * IconButton's borderless square uses, so a toolbar holding both is written
+ * in one vocabulary. Under the pointer it takes the hover overlay, the one
+ * every row takes, and its ink steps up to the primary text.
+ */
+.crewlet-btn--ghost {
   background: transparent;
   color: var(--color-text-secondary);
   border-color: transparent;
 }
 
-.crewlet-btn--tertiary:hover:not(:disabled):not([aria-disabled='true']) {
+.crewlet-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
-.crewlet-btn--tertiary:active:not(:disabled):not([aria-disabled='true']) {
+.crewlet-btn--ghost:active:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-pressed);
 }
 
@@ -1408,15 +1725,16 @@
  *
  * A SECONDARY THAT HAS GONE RED, not a red slab. It sits in the same row as
  * Cancel and it is the button a reader must not press by reflex, so it holds
- * the secondary's own weight until it is pointed at and states itself in its
- * INK, which is the step measured as text; the red fill it used to carry
- * pulled the eye to the destructive answer first on every dialog that had one.
- * The hue arrives on hover, as the tint plus the full fill on the boundary.
+ * the secondary's own weight, the card inside the strong hairline, until it
+ * is pointed at and states itself in its INK, which is the step measured as
+ * text; the red fill it used to carry pulled the eye to the destructive
+ * answer first on every dialog that had one. The hue arrives on hover, as the
+ * tint plus the full fill on the boundary.
  */
 .crewlet-btn--danger {
   background: var(--color-surface-subtle);
   color: var(--color-feedback-danger-ink);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
 }
 
 .crewlet-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
@@ -2061,7 +2379,7 @@
 }
 
 
-/* Card-RLR254LD.css */
+/* Card-GLP7SUV6.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -2091,23 +2409,24 @@
 }
 
 /*
- * TWO GROUNDS, TWO DEVICES. On light the shadow is the elevation; on dark a
- * shadow over a dark page is nearly invisible, so the hairline along the top
- * edge does the job instead.
+ * THE CARD IS FLAT: the card rung inside the default hairline, at the 12px
+ * corner, and nothing else, which is the approved design's card in both
+ * palettes. It casts no shadow and draws no rim of light, because what finds a
+ * card on the sheet is the pair the palette suite holds together: the rung a
+ * visible step off the sheet, and the hairline a clear step off both. A
+ * shadow under every panel of a screen made a list of records into a relief
+ * map, and a rim along every top edge was a second hairline nobody measured.
+ * Lift belongs to what genuinely stands OVER the page, which is `elevated`.
  *
- * THE HAIRLINE IS ON ITS OWN ELEMENT, and that is the whole reason the rule is
- * two rules. `--shadow-hairline` is `none` in the light theme, and `none` is a
- * value a shadow list may not carry: `box-shadow: <shadow>, none` is invalid at
- * computed-value time, so the declaration is dropped and the light card loses
- * the elevation the list was built around. Alone on a pseudo element the same
- * token is valid in both themes, and it composes with the selection ring
- * rather than replacing whichever was declared last, exactly as the rail does.
+ * THE RIM IS ON ITS OWN ELEMENT where it is still drawn, and that is the whole
+ * reason the elevated card's rule is two rules. `--shadow-hairline` is `none`
+ * in the light theme, and `none` is a value a shadow list may not carry:
+ * `box-shadow: <shadow>, none` is invalid at computed-value time, so the
+ * declaration is dropped and the light card loses the elevation the list was
+ * built around. Alone on a pseudo element the same token is valid in both
+ * themes, and it composes with the selection ring rather than replacing
+ * whichever was declared last, exactly as the rail does.
  */
-.crewlet-card--default:not(.crewlet-card--flush) {
-  box-shadow: var(--shadow-xs);
-}
-
-.crewlet-card--default:not(.crewlet-card--flush)::after,
 .crewlet-card--elevated::after {
   content: '';
   position: absolute;
@@ -2122,8 +2441,9 @@
 }
 
 /*
- * THE TILE: the panel's ground with none of its lift. One of many in a grid,
- * where a shadow under every card turns a list of records into a relief map.
+ * THE TILE: the card at the tile's tighter inset. One of many records in a
+ * grid, where at the panel's own step each tile spends a third of its height
+ * on air.
  *
  * It used to take the PAGE's ground, which is a card drawn in the colour of
  * the thing behind it: on the light palette a white tile on a white page, held
@@ -2250,9 +2570,14 @@
     box-shadow var(--motion-duration-base) var(--motion-easing-default);
 }
 
+/*
+ * Under the pointer the hairline steps up and nothing lifts: a flat card that
+ * rose on hover would be the one shadow on the screen, and it would move as
+ * the pointer crossed a grid of them. The approved design's card answers the
+ * pointer with its boundary alone.
+ */
 .crewlet-card.is-interactive:hover {
   border-color: var(--color-border-hover);
-  box-shadow: var(--shadow-md);
 }
 
 .crewlet-card.is-interactive:focus-visible {
@@ -2514,9 +2839,9 @@
 }
 
 
-/* Charts-D7G2BSXH.css */
-/* The chart kit: a legend, a ranked bar list, a stacked bar and an activity
-   strip. Hand-drawn rather than a charting library, for one reason that
+/* Charts-B3YEF7R4.css */
+/* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
+   columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
    floors the palette suite measures, and a library's theming surface is a
    second design system to keep in step with this one. */
@@ -2634,10 +2959,24 @@
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * A BAR IS ROUNDED AT ITS VALUE END ONLY. The start is the baseline every row
+ * shares, so it is square and the bars read as measured from one line; the end
+ * is where the value is, and the smallest radius step marks it as an end
+ * rather than a cut. The track is the scale at full length, so it takes the
+ * same shape: a bar at the top of the scale is exactly the track.
+ *
+ * Written as LOGICAL corners, because the value end is the inline end: in a
+ * right-to-left document the bars grow leftward and their value end is the
+ * left one.
+ */
 .crewlet-bar-list__track {
   display: block;
   height: 5px;
-  border-radius: var(--radius-pill);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-xs);
+  border-end-end-radius: var(--radius-xs);
   background: var(--color-surface-inset);
   overflow: hidden;
 }
@@ -2645,7 +2984,10 @@
 .crewlet-bar-list__bar {
   display: block;
   height: 100%;
-  border-radius: var(--radius-pill);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-xs);
+  border-end-end-radius: var(--radius-xs);
   background: var(--crewlet-bar-list-bar-color, var(--color-data-other));
 }
 
@@ -2685,97 +3027,495 @@
   white-space: nowrap;
 }
 
-/* ─── Stacked bar ─────────────────────────────────────────────── */
-.crewlet-stacked-bar__track {
-  display: flex;
-  height: 6px;
-  border-radius: var(--radius-pill);
-  background: var(--color-surface-inset);
-  overflow: hidden;
+/*
+ * BESIDE: the design's ranked figure. The words in a column of their own, the
+ * bar, and the value at the bar's end, one row 30px tall: the design's, and
+ * the control step's, --size-control-md, so it follows the density. Two
+ * component variables set its geometry, because both depend on what a screen
+ * puts in it rather than on the kit:
+ *
+ * --crewlet-bar-list-label-width, the words' column (128px, the Home card's):
+ * one width for every row, so the bars share one baseline.
+ *
+ * --crewlet-bar-list-value-room, what the scale keeps free at its end for the
+ * value of the longest bar (6ch of tabular figures and the gap before them,
+ * "412.3k"). The SCALE is the plot less that room, a bar is its share of the
+ * scale, and the value follows the bar, so the longest bar's value stands in
+ * the room and every shorter bar's value just past its own end.
+ *
+ * The bar is 12px thick, the design's, and square on its baseline with the
+ * value end rounded, as the stacked register's is. It has no track: the
+ * longest bar IS the end of the scale, and a track under the rest would be a
+ * second baseline to read against.
+ */
+.crewlet-bar-list--beside {
+  --crewlet-bar-list-label-width: 128px;
+  --crewlet-bar-list-value-room: calc(6ch + var(--spacing-2));
+
+  gap: calc(var(--spacing-1) * 1.5);
 }
 
-.crewlet-stacked-bar__segment {
-  height: 100%;
-  background: var(--crewlet-stacked-bar-segment-color, var(--color-data-other));
+.crewlet-bar-list--beside .crewlet-bar-list__row {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-control-md);
 }
 
-/* ─── Activity strip ──────────────────────────────────────────── */
-.crewlet-activity-strip {
+.crewlet-bar-list__names {
   display: flex;
-  align-items: flex-end;
-  gap: var(--crewlet-activity-strip-gap, 2px);
-  height: var(--crewlet-activity-strip-height, 26px);
-  width: 100%;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-bar-list-label-width);
+  min-width: 0;
+  line-height: var(--font-line-height-tight);
 }
 
-.crewlet-activity-strip__cell {
-  flex: 1;
-  min-width: var(--crewlet-activity-strip-cell-min-width, 2px);
-  height: var(--crewlet-activity-strip-fill, 10%);
-  /*
-   * A quarter of the smallest step. A cell is two pixels wide, so at the step
-   * itself every mark was a capsule and the strip read as a row of pills
-   * rather than as a shape.
-   */
-  border-radius: calc(var(--radius-xs) / 4);
-  /* An empty bucket is a neutral hairline: the bucket happened, and nothing
-     happened in it. That is a different fact from a quiet one, so it takes a
-     different colour rather than a fainter version of the same one. */
-  background: var(--color-border-default);
+.crewlet-bar-list--beside .crewlet-bar-list__label {
+  flex: none;
+  color: var(--color-text-secondary);
 }
 
-.crewlet-activity-strip__cell.is-active {
-  background: var(--color-data-1);
+.crewlet-bar-list--beside .crewlet-bar-list__row--pressable:hover .crewlet-bar-list__label {
+  color: var(--color-text-primary);
 }
 
-/* ─── Time series, and the sparkline beside a number ──────────── */
-
-/*
- * The plot fills the width it is given and does not clip: a line that touches
- * the top of its own box is a peak, and a box that clipped it would silently
- * flatten exactly the moment a reader is looking for.
- */
-.crewlet-time-series {
-  margin: 0;
+.crewlet-bar-list__plot {
+  display: block;
+  flex: 1 1 auto;
   min-width: 0;
 }
 
-.crewlet-chart {
-  display: block;
-  width: 100%;
-  overflow: visible;
+.crewlet-bar-list__scale {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: calc(100% - var(--crewlet-bar-list-value-room));
 }
 
-/* The baseline: a hairline, because it is where the plot sits rather than
-   something to read. */
-.crewlet-chart__axis-line {
-  stroke: var(--color-border-default);
-  stroke-width: 1;
+.crewlet-bar-list--beside .crewlet-bar-list__bar {
+  flex: none;
+  height: 12px;
 }
 
-/*
- * The grid is DASHED, which is what keeps three horizontal lines from reading
- * as three series. They carry no values of their own: the peak under the plot
- * is the scale, and a chart this size cannot label four gridlines legibly.
- */
-.crewlet-chart__grid-line {
-  stroke: var(--color-border-default);
-  stroke-width: 1;
-  stroke-dasharray: 2 4;
+/* What the row is, under its name at the micro step, as the design sets it:
+   in a column 128px wide a caption at the list's own step wrapped a word. */
+.crewlet-bar-list--beside .crewlet-bar-list__sub {
+  font-size: var(--font-size-2xs);
+}
+
+/* The number the row is about: the primary ink, a step heavier than the name. */
+.crewlet-bar-list--beside .crewlet-bar-list__value {
+  flex: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+/* ─── Stacked bar ─────────────────────────────────────────────── */
+
+/*
+ * THE PARTS STAND 2PX APART. Butted together, two neighbouring hues meet at an
+ * edge the eye reads as one mark in two colours; the gap is the ground showing
+ * through, which is what makes each part a part. Two pixels, the approved
+ * artboard's own, and not a spacing step, because it is a hairline of ground
+ * rather than a space and a density setting must not widen it. Each part GROWS
+ * by its value (a style property on the part), so the gaps come out of the
+ * parts and the whole still fills the track exactly.
+ *
+ * The value end is rounded and the start is square, as a bar list's bar is.
+ */
+.crewlet-stacked-bar__track {
+  display: flex;
+  gap: 2px;
+  height: 6px;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-xs);
+  border-end-end-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+  overflow: hidden;
+}
+
+.crewlet-stacked-bar__segment {
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-width: 0;
+  height: 100%;
+  background: var(--crewlet-stacked-bar-segment-color, var(--color-data-other));
+}
+
+/* ─── Stacked columns ─────────────────────────────────────────── */
+
+/*
+ * The scale's words stand in a column of their own at the start, sized by the
+ * widest of them, and the time under the plot starts where the plot does.
+ */
+.crewlet-stacked-columns {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--spacing-2);
+  row-gap: var(--spacing-1);
+  margin: 0;
+  min-width: 0;
+}
+
+/*
+ * EACH WORD IS A BOX OF NO HEIGHT, spread from the top of the plot to its
+ * baseline, with the word centred on it: so every word stands exactly on the
+ * line it names, whatever the plot's height, with nothing measured.
+ */
+.crewlet-stacked-columns__axis {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.crewlet-stacked-columns__tick {
+  display: flex;
+  align-items: center;
+  height: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-stacked-columns__plot {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.crewlet-stacked-columns__grid {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+/* The scale's lines: hairlines, because they are where a value is read against
+   rather than something to read. The last is the baseline. */
+.crewlet-stacked-columns__grid-line {
+  display: block;
+  height: 0;
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * A SLOT IS THE COLUMN'S WHOLE SHARE OF THE WIDTH, and the pointer's target:
+ * the gaps between columns belong to a column, so the reading never drops out
+ * as the pointer crosses one. The column stands in its middle at the approved
+ * artboard's proportion, 14 of a 22.2 slot, and never wider than a finger's
+ * worth, so a week of seven buckets does not draw seven slabs.
+ */
+.crewlet-stacked-columns__slot {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  align-items: flex-end;
+  justify-content: center;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-stacked-columns__slot.is-active {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE COLUMN IS ITS TOTAL'S HEIGHT (a style property), and its parts share it
+ * by value, first series at the baseline. They stand 2px apart for the reason
+ * a stacked bar's do, and the gap comes out of the parts.
+ */
+.crewlet-stacked-columns__column {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 2px;
+  width: 63%;
+  max-width: var(--spacing-7);
+}
+
+.crewlet-stacked-columns__segment {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-height: 0;
+  background: var(--crewlet-stacked-columns-segment-color, var(--color-data-other));
+}
+
+/* The VALUE END: the top of the topmost part, rounded at the smallest step.
+   The foot stays square on the baseline every column shares. */
+.crewlet-stacked-columns__segment:last-child {
+  border-top-left-radius: var(--radius-xs);
+  border-top-right-radius: var(--radius-xs);
+}
+
+.crewlet-stacked-columns__scale {
+  position: relative;
+  grid-column: 2;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * THE HEAD AND THE LEGEND span both of the figure's columns, the axis's and
+ * the plot's. The head is one row: what the chart is at its start, and the
+ * legend at its END, top right, where the design's Spend card draws it; the
+ * legend is flushed to the end of that row and wraps from there. Below, the
+ * legend starts under the axis, a step clear of the dates.
+ */
+.crewlet-stacked-columns__head {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  margin-bottom: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-stacked-columns__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.crewlet-stacked-columns__legend--head {
+  flex: 0 1 auto;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.crewlet-stacked-columns__legend--below {
+  grid-column: 1 / -1;
+  margin-top: var(--spacing-2);
+}
+
+/* The middle label stands on the column it names (a style property). */
+.crewlet-stacked-columns__middle {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+/* ─── The reading layer: a focusable plot and its tooltip ─────── */
+
+/*
+ * THE PLOT IS ONE TAB STOP, and the positioning context its tooltip stands in.
+ * Its ring is drawn on `:focus-visible` only, so a keyboard reader sees it and
+ * a click that focuses the plot on the way to a pointer reading draws none.
+ */
+.crewlet-chart-frame {
+  position: relative;
+  min-width: 0;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-chart-frame:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * The box stands beside the mark, at the top of the plot. Its one varying
+ * value, `left`, is a style property on the element (see ChartTooltip); the
+ * side it stands on is a class, and the gap between it and the mark is a step.
+ * It never takes the pointer, so it can never steal the reading from the mark
+ * under it.
+ *
+ * IT STANDS OVER THE DATA, BY DESIGN, and that decides its ground. A kit
+ * Tooltip or Popover floats over interface; this one floats over the columns
+ * next to the one being read and over the lines and areas of a time series. So
+ * it is not the card: in the marketing palette the card is a 5% white wash,
+ * and every data hue showed through it, taking the title to 1.12:1 and the
+ * values to 2.77:1. It is the GLASS, frosted by --blur-sm, which the palette
+ * suite holds every text step over 4.5:1 on in every palette with each data
+ * hue, the residual and the inverse ground behind it (the inverse being the far
+ * end of the palette from the glass, and so the worst backdrop anything can
+ * put there). The hairline and the medium shadow are the kit's overlay edge,
+ * and every word is a TEXT step.
+ */
+.crewlet-chart-tooltip {
+  position: absolute;
+  top: 0;
+  z-index: var(--z-index-raised);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 140px;
+  max-width: 260px;
+  padding: var(--spacing-2);
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.crewlet-chart-tooltip--after {
+  transform: translateX(var(--spacing-2));
+}
+
+.crewlet-chart-tooltip--before {
+  transform: translateX(calc(-100% - var(--spacing-2)));
+}
+
+.crewlet-chart-tooltip__title {
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-chart-tooltip__rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-chart-tooltip__row,
+.crewlet-chart-tooltip__total {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+}
+
+/* The key to the series: a swatch, drawn as the legend's is. It is the one
+   place a data hue appears in the tooltip, and it is a mark, never a word. */
+.crewlet-chart-tooltip__swatch {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: calc(var(--radius-xs) / 2);
+  background: var(--crewlet-chart-tooltip-swatch-color, var(--color-data-other));
+}
+
+.crewlet-chart-tooltip__name {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-chart-tooltip__value {
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-chart-tooltip__total {
+  padding-top: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-chart-tooltip__total .crewlet-chart-tooltip__value {
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ─── Activity strip ──────────────────────────────────────────── */
+.crewlet-activity-strip {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--crewlet-activity-strip-gap, 2px);
+  height: var(--crewlet-activity-strip-height, 26px);
+  width: 100%;
+}
+
+.crewlet-activity-strip__cell {
+  flex: 1;
+  min-width: var(--crewlet-activity-strip-cell-min-width, 2px);
+  height: var(--crewlet-activity-strip-fill, 10%);
+  /*
+   * A quarter of the smallest step. A cell is two pixels wide, so at the step
+   * itself every mark was a capsule and the strip read as a row of pills
+   * rather than as a shape.
+   */
+  border-radius: calc(var(--radius-xs) / 4);
+  /* An empty bucket is a neutral hairline: the bucket happened, and nothing
+     happened in it. That is a different fact from a quiet one, so it takes a
+     different colour rather than a fainter version of the same one. */
+  background: var(--color-border-default);
+}
+
+.crewlet-activity-strip__cell.is-active {
+  background: var(--color-data-1);
+}
+
+/* ─── Time series, and the sparkline beside a number ──────────── */
+
+/*
+ * The plot fills the width it is given and does not clip: a line that touches
+ * the top of its own box is a peak, and a box that clipped it would silently
+ * flatten exactly the moment a reader is looking for.
+ */
+.crewlet-time-series {
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-chart {
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+/* The baseline: a hairline, because it is where the plot sits rather than
+   something to read. */
+.crewlet-chart__axis-line {
+  stroke: var(--color-border-default);
+  stroke-width: 1;
+}
+
+/*
+ * The grid is DASHED, which is what keeps three horizontal lines from reading
+ * as three series. They carry no values of their own: the peak under the plot
+ * is the scale, and a chart this size cannot label four gridlines legibly.
+ */
+.crewlet-chart__grid-line {
+  stroke: var(--color-border-default);
+  stroke-width: 1;
+  stroke-dasharray: 2 4;
 }
 
 /*
  * The series line. It is painted with the colour passed on the element,
  * because a series' hue is data rather than style; the shape of the stroke is
- * the one thing that is the same for all of them.
+ * the one thing that is the same for all of them. Two pixels, which is what a
+ * line a reader follows across a plot is drawn at; a sparkline's quieter
+ * stroke is its own, below.
  */
 .crewlet-chart__series {
   fill: none;
-  stroke-width: 1.75;
+  stroke-width: 2;
   stroke-linejoin: round;
   stroke-linecap: round;
 }
 
+/* The reading's crosshair: a hairline in the strong border, from the top of
+   the plot to its baseline, on the instant being read. */
+.crewlet-chart__crosshair {
+  stroke: var(--color-border-strong);
+  stroke-width: 1;
+  pointer-events: none;
+}
+
 /* The window's two ends and its peak, under the plot: the scale, as words. */
 .crewlet-time-series__scale {
   display: flex;
@@ -2787,14 +3527,64 @@
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * THE SPARKLINE: the plot stretched to the box, and, with `current`, one
+ * accent point on the last value.
+ *
+ * The point is the approved design's: an accent disc 5px across, cut out of
+ * the ground by a 2px ring in that ground's colour, so where the line runs
+ * into it the line stops a ring short of the disc rather than crossing it.
+ * The ring is `--crewlet-spark-ground`, the CARD, because a sparkline stands
+ * beside a number on a card; one on another rung sets the variable.
+ *
+ * THE PLOT GIVES UP ITS END TO THE POINT. With a point, the box keeps the
+ * disc's half and its ring back at its inline end, so the whole point stands
+ * inside the box beside whatever follows it, and the line's last value lands
+ * exactly under the disc's centre.
+ */
 .crewlet-spark {
+  --crewlet-spark-ground: var(--color-surface-subtle);
+  --crewlet-spark-point: 5px;
+  --crewlet-spark-ring: 2px;
+
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: visible;
+}
+
+.crewlet-spark__plot {
   display: block;
   width: 100%;
+  height: 100%;
   overflow: visible;
 }
 
+/* A shape beside a number is drawn quieter than a plot's line: the approved
+   design's 1.75 stroke, under the 2 a line across a plot takes. */
+.crewlet-spark__plot .crewlet-chart__series {
+  stroke-width: 1.75;
+}
+
+.crewlet-spark--current {
+  padding-inline-end: calc(var(--crewlet-spark-point) / 2 + var(--crewlet-spark-ring));
+}
+
+.crewlet-spark__current {
+  position: absolute;
+  inset-inline-end: var(--crewlet-spark-ring);
+  width: var(--crewlet-spark-point);
+  height: var(--crewlet-spark-point);
+  border-radius: var(--radius-circle);
+  background: var(--color-brand-accent);
+  box-shadow: 0 0 0 var(--crewlet-spark-ring) var(--crewlet-spark-ground);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
 
-/* Checkbox-VGW26YLQ.css */
+/* Checkbox-BOXQ747I.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -2841,8 +3631,8 @@
   flex: 0 0 auto;
   /*
    * THE TICK IS THE ACCENT, which is what "here, this one" means everywhere
-   * else in the system. It used to read --color-brand-primary, which is white
-   * in the dark theme: a white tick on a white box.
+   * else in the system. It used to read the monochrome brand fill, which was
+   * white in the dark theme: a white tick on a white box.
    */
   accent-color: var(--color-brand-accent);
   cursor: pointer;
@@ -3182,15 +3972,16 @@
 }
 
 
-/* CommandPalette-CSJDUCQA.css */
+/* CommandPalette-C5AMKGN2.css */
 /*
- * The command palette: a field, a list, and a line of keyboard hints.
+ * The command palette: a field, an optional row of scopes, one scroller
+ * holding the lead and the list, and a key legend.
  *
- * It is a Modal with its body's padding dropped, so the three bands run edge to
- * edge and the field reads as the surface rather than as a question on a form.
+ * It is a Modal with its body's padding dropped, so the bands run edge to edge
+ * and the field reads as the surface rather than as a question on a form.
  * The rows are the listbox register (`Listbox.css`), because a result here and
- * a completion in a field are the same thing to a reader and the accent that
- * marks the active row has to mean the same in both.
+ * a completion in a field are the same thing to a reader and the raised row
+ * that marks the active one has to mean the same in both.
  *
  * THE TWO OVERRIDES BELOW NAME BOTH CLASSES ON PURPOSE. A single class would
  * tie with the rule it is overriding (`.crewlet-modal--md`,
@@ -3199,11 +3990,17 @@
  */
 
 .crewlet-modal.crewlet-palette {
-  /* Wider than a prompt and shorter than the window: a launcher is read in one
-     glance, and a list taller than this is a list nobody scans. */
-  --crewlet-modal-width: 620px;
+  /*
+   * THE APPROVED DESIGN'S SURFACE: 720px wide, and as tall as its artboard
+   * draws it with an answer leading five rows, 664px of a 900px window. It was
+   * 620 by min(60dvh, 520px), sized for a list alone, and a lead that size
+   * over it left room for three rows. 74dvh is that artboard's 664/900; the
+   * 680px cap is the same surface with one more row, so a tall window does
+   * not turn a launcher read in one glance into a page.
+   */
+  --crewlet-modal-width: 720px;
 
-  max-height: min(60dvh, 520px);
+  max-height: min(74dvh, 680px);
 }
 
 /*
@@ -3227,10 +4024,18 @@
  * than at a control's. It is the first thing on the surface and the only thing
  * with focus, so it is the surface's headline as much as its input.
  */
+/*
+ * THE ROW'S TWO ENDS ARE INSET ONE STEP LESS THAN THE BANDS BELOW IT. The
+ * search glyph and the Esc keycap each carry a slot inset of their own (the
+ * glyph's, a step less than text's, see Input.css), so at the bands' 16px the
+ * glyph stood 24px in and the keycap 28px from the edge; at 12px they stand
+ * 20px and 16px in, where the approved palette draws them, and the query still
+ * starts on the line the design's does.
+ */
 .crewlet-input.crewlet-palette__field {
   flex-shrink: 0;
   min-height: var(--size-row-lg);
-  padding-inline: var(--spacing-4);
+  padding-inline: var(--spacing-3);
   border: none;
   border-bottom: 1px solid var(--color-border-default);
   border-radius: 0;
@@ -3241,6 +4046,10 @@
   font-size: var(--font-size-md);
 }
 
+.crewlet-input.crewlet-palette__field .crewlet-input__trailing {
+  padding-right: var(--spacing-1);
+}
+
 /*
  * THE FOOT IS THE KEYBOARD'S OWN BAND, at the micro register rather than the
  * modal footer's. A modal's foot carries buttons and is sized for them; this
@@ -3252,15 +4061,73 @@
  * the stylesheets are concatenated in.
  */
 .crewlet-palette .crewlet-modal__footer {
-  gap: var(--spacing-3);
-  padding: var(--spacing-2) var(--spacing-3);
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-4);
+  /* The SHEET rung under the card the results sit on, as the design draws the
+     legend: a band a step back from the surface, so it reads as the frame's
+     edge rather than as one more row. */
+  background: var(--color-surface-background);
 }
 
 .crewlet-palette .crewlet-modal__footer-start {
-  gap: var(--spacing-3);
-  font-size: var(--font-size-2xs);
+  gap: var(--spacing-4);
+  font-size: var(--font-size-xs);
+}
+
+/*
+ * THE SCOPES: a strip of words under the field, the current one in the primary
+ * ink over a bar in the same ink. Not `Tabs`, whose tabs are a roving tab stop:
+ * these are never focused (the field drives them), so the row has no ring to
+ * draw and no slider to measure, and the bar is each tab's own edge.
+ */
+.crewlet-palette__scopes {
+  flex-shrink: 0;
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+  min-height: var(--size-row-md);
+  padding-inline: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.crewlet-palette__scopes::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-palette__scope {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: 0 var(--spacing-1);
+  border: none;
+  /* The bar is drawn on every tab and coloured only on the chosen one, so a
+     choice moves no label by the bar's width. */
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crewlet-palette__scope:hover,
+.crewlet-palette__scope.is-active {
+  color: var(--color-text-primary);
 }
 
+.crewlet-palette__scope.is-active {
+  border-bottom-color: var(--color-text-primary);
+}
+
+/*
+ * THE ONE SCROLLER: the lead and the list move together, and the listbox
+ * keeps the highlighted row in view inside this element.
+ */
 .crewlet-palette__results {
   flex: 1 1 auto;
   min-height: 0;
@@ -3269,24 +4136,75 @@
   padding: var(--spacing-1);
 }
 
+/*
+ * THE LEAD: an answer on the raised rung above the rows, in the secondary ink
+ * at a reading leading, because it is prose read once rather than a row run
+ * past. Empty, it draws nothing: the region is mounted so a screen reader sees
+ * its first words arrive, and an empty box would be a band saying nothing.
+ */
+.crewlet-palette__lead:not(:empty) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: var(--spacing-2) var(--spacing-3) var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  line-height: var(--font-line-height-relaxed);
+}
+
 /*
  * The glyph takes the ROW'S colour rather than a quiet step of its own, so the
- * row under the arrows turns accent in one piece. Pinned to the tertiary step
- * it stayed grey inside the highlight, which read as a glyph that had failed
- * to load.
+ * row under the arrows lifts to the primary ink in one piece. Pinned to the
+ * tertiary step it stayed grey inside the highlight, which read as a glyph
+ * that had failed to load.
  */
 .crewlet-palette__icon {
   display: inline-flex;
   flex-shrink: 0;
 }
 
-.crewlet-palette__label {
+/*
+ * THE LABEL AND ITS HINT ARE ONE LINE, cut together: the hint reads as the
+ * rest of the label's sentence ("ENG-420 Flaky e2e, Todo, unassigned"), and
+ * the row's end is kept for its meta. A hint pushed to the end as well would
+ * put two quiet columns side by side, and neither would say which it was.
+ */
+.crewlet-palette__text {
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.crewlet-palette__label {
+  font-weight: var(--font-weight-medium);
+}
+
+/* The quiet ink on every row, the highlighted one included, as the approved
+   palette draws it: the rest of the label's sentence, a step under the label
+   it follows. The tertiary step clears 4.5:1 on the raised row as on the card,
+   so the highlight has no reason to lift it. */
+.crewlet-palette__hint {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The row's end: a short fact or an accelerator's keycap. Never cut and never
+ * wrapped, so a column of keycaps stands in one line down the list.
+ */
+.crewlet-palette__meta {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
 /*
  * An honest empty state: it says which kind of nothing this is, and the
  * component takes the sentence from the caller for that reason.
@@ -3299,6 +4217,22 @@
   text-align: center;
 }
 
+/*
+ * FORCED COLORS draws a transparent border in the system's own ink, so every
+ * scope would wear the chosen one's bar. The bar is kept where it means
+ * something and painted out everywhere else, in the two colours the mode
+ * leaves as the author wrote them.
+ */
+@media (forced-colors: active) {
+  .crewlet-palette__scope {
+    border-bottom-color: Canvas;
+  }
+
+  .crewlet-palette__scope.is-active {
+    border-bottom-color: CanvasText;
+  }
+}
+
 
 /* Container-3TSKMGNI.css */
 /*
@@ -3506,7 +4440,7 @@
 }
 
 
-/* DataTable-37UWTRN6.css */
+/* DataTable-OLHPF7D4.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
  *
@@ -4776,7 +5710,7 @@ body.crewlet-data-table-resizing {
   display: inline-block;
   height: var(--spacing-3);
   border-radius: var(--radius-xs);
-  background: var(--color-surface-elevated, var(--color-surface-muted));
+  background: var(--color-surface-elevated);
   animation: crewlet-data-table-skeleton-pulse var(--crewlet-data-table-skeleton-duration) var(--motion-easing-in-out) infinite;
   vertical-align: middle;
 }
@@ -5482,58 +6416,55 @@ body.crewlet-data-table-resizing {
    The component states its own, rather than leaning on the document
    baseline: this stylesheet also ships to an application that imports the
    component and not the baseline. The skeleton stops PULSING and keeps its
-   bars, which is what says the rows have not arrived.
-
-   THE SETTINGS FRAME IS NAMED SEPARATELY BECAUSE IT IS NOT IN THE TABLE. It
-   is a Modal, which portals onto the layer host, so a descendant selector
-   rooted at .crewlet-data-table reaches none of it: the chip row and every
-   column row kept their transitions under the preference in exactly the
-   application this rule exists for. */
-/*
- * EVERY PART OF THE TABLE, INCLUDING THE ONES DRAWN SOMEWHERE ELSE. The list
- * is not the root and its descendants: two of these live in the settings
- * frame, which is a dialog portaled to the layer host, and the chrome row is
- * drawn on a card's header wherever the table fills one. A preference
- * cancelled through the root alone leaves exactly those pieces animating,
- * which is the one place a reader who asked for stillness is least able to
- * connect it back to a table.
+   bars, which is what says the rows have not arrived. */
+/*
+ * EVERY MOTION THIS FILE STARTS IS STOPPED BY NAME, the same selector as the
+ * rule that starts it and after it, so the two tie on specificity and the stop
+ * wins on source order. The package's literal check holds the pairing
+ * selector for selector.
+ *
+ * A CATCH-ALL IS WHAT THIS REPLACED, and it lost twice. Written as
+ * `.crewlet-data-table *` it was one class against rules of two, so the row
+ * hover, the sort control, the action button and the pager and cog all kept
+ * their transitions; doubled to `.crewlet-data-table.crewlet-data-table *` it
+ * was two classes, and the row's own rule is two classes AND two elements
+ * (`… tbody tr`), so the row still eased its hover for a reader who had asked
+ * for stillness. The document-wide rule in @crewlethq/tokens covers every
+ * one of them with `!important` wherever that sheet is loaded, which is the
+ * only reason nobody saw it.
+ *
+ * Naming the rules also reaches the pieces a descendant selector cannot: the
+ * page-size and column rows are in the settings frame, a Modal portaled onto
+ * the layer host, and the chrome row is drawn on a card's header wherever the
+ * table fills one.
  */
 @media (prefers-reduced-motion: reduce) {
-  /*
-   * EACH NAME IS WRITTEN TWICE, which is not a typo: a selector repeating one
-   * class matches exactly what it matched and counts for twice as much. A
-   * cancellation is only a cancellation if it outranks what it cancels, and
-   * this one did not: written once, `.crewlet-data-table *` is one class where
-   * the rules it had to beat are two, so the row hover, the sort control, the
-   * action button and the pager and cog all kept their transitions for a
-   * reader who had asked for stillness. The document-wide rule in
-   * @crewlethq/tokens covered it with `!important` wherever that sheet is
-   * loaded, which is the only reason nobody saw it; this rule exists for the
-   * document that loads the components alone, and it has to stand on its own.
-   */
-  .crewlet-data-table.crewlet-data-table,
-  .crewlet-data-table.crewlet-data-table *,
-  .crewlet-data-table.crewlet-data-table *::before,
-  .crewlet-data-table.crewlet-data-table *::after,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *::before,
-  .crewlet-data-table__chrome.crewlet-data-table__chrome *::after,
-  .crewlet-data-table__items-per-page-btn.crewlet-data-table__items-per-page-btn,
-  .crewlet-data-table__column-toggle-item.crewlet-data-table__column-toggle-item {
-    animation: none;
+  .crewlet-data-table--default .crewlet-data-table__table tbody tr,
+  .crewlet-data-table--default .crewlet-data-table__th--sortable,
+  .crewlet-data-table--default .crewlet-data-table__sort-icon,
+  .crewlet-data-table--default .crewlet-data-table__action-btn,
+  .crewlet-data-table--default .crewlet-data-table__header-btn,
+  .crewlet-data-table__items-per-page-btn,
+  .crewlet-data-table__column-toggle-item,
+  .crewlet-data-table__chrome .crewlet-data-table__page-btn,
+  .crewlet-data-table__chrome .crewlet-data-table__settings-btn,
+  .crewlet-data-table__expand-all-btn,
+  .crewlet-data-table__chevron,
+  .crewlet-data-table__resizer::before,
+  .crewlet-data-table__copy-cell-button {
     transition: none;
   }
 
   /* The bars stay; only the pulse goes. A skeleton that vanished under a
      motion preference would take the answer to "has this loaded" with it. */
   .crewlet-data-table__skeleton-bar {
+    animation: none;
     opacity: 0.6;
   }
 }
 
 
-/* DataView-256YF32J.css */
+/* DataView-N6JX464S.css */
 /*
  * The list screen: header, toolbar, filter chips, table.
  *
@@ -5718,10 +6649,11 @@ body.crewlet-data-table-resizing {
  * and without the boundary a reader reads them as a row of the table's own.
  *
  * A SOLID HAIRLINE. The fence was dashed, and a dashed edge MEANS SOMETHING
- * ELSE here: it is the mark a card or a node wears when it stands for somebody
- * outside the system, on the canvas and in every chart. Two meanings for one
- * stroke is how a reader learns neither. Every boundary in this system is the
- * same hairline; what differs is where it is drawn.
+ * ELSE here: it marks a place nothing fills yet, an empty card slot, a unit
+ * with no lead, the ghost of a node being added. A fence round chips that are
+ * there is not one of those, and two meanings for one stroke is how a reader
+ * learns neither. Every boundary in this system is the same hairline; what
+ * differs is where it is drawn.
  */
 .crewlet-filter-axis-bar {
   display: flex;
@@ -6675,7 +7607,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* ErrorBoundary-ME36CQTA.css */
+/* ErrorBoundary-U2PA3LY2.css */
 /*
  * The default fallback: a quiet block on the inset surface rather than a red
  * panel. A screen that failed to draw is not an error the reader made, and a
@@ -6688,14 +7620,14 @@ svg.crewlet-datetime__chevron {
   flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-3);
-  /* The panel's own body inset and its lift: a fallback is still a panel of
-     the product, and one drawn without the rim read as a block of unstyled
-     text where the screen should have been. */
+  /* The card's own recipe and its body inset: a fallback is still a panel of
+     the product, and one drawn without the card's ground and hairline read as
+     a block of unstyled text where the screen should have been. Flat, as
+     every card is. */
   padding: var(--spacing-4);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   background: var(--color-surface-subtle);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   max-width: var(--size-measure);
 }
 
@@ -6896,7 +7828,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* IconButton-VQGNMJDI.css */
+/* IconButton-TVEUWK6L.css */
 /*
  * IconButton: a square icon-only control.
  *
@@ -6987,13 +7919,13 @@ svg.crewlet-datetime__chevron {
  */
 .crewlet-icon-btn--secondary {
   background: var(--color-surface-subtle);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   color: var(--color-text-primary);
 }
 
 .crewlet-icon-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-icon-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
@@ -7057,7 +7989,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* ImageUpload-HKFIZR6D.css */
+/* ImageUpload-YCHJMUGX.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
@@ -7077,10 +8009,11 @@ svg.crewlet-datetime__chevron {
      of the six places that read it: a fallback repeated six times is six
      places for the default to drift apart. */
   --crewlet-image-upload-size: 64px;
-  /* The corner that box takes, set per instance beside the size. Declared here
-     for the same reason the size is: a default repeated as a var() fallback at
-     each place that reads it is several places for one default to drift. */
-  --crewlet-image-upload-corner: var(--radius-lg);
+  /* The corner that box takes, set per instance beside the size from Avatar's
+     own `avatarCorner`, which is the one statement of the ladder a script can
+     read. There is deliberately NO default here: the only right value is a
+     proportion of the size, and a stylesheet can only restate that proportion,
+     which is how the trigger and the picture under it came apart before. */
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -7100,21 +8033,34 @@ svg.crewlet-datetime__chevron {
   cursor: pointer;
 }
 
-/* Shape modifiers keep the trigger, the overlay and the Avatar corners in step. */
-.crewlet-image-upload--circle .crewlet-image-upload__trigger,
-.crewlet-image-upload--circle .crewlet-image-upload__overlay {
+/* The kind modifiers keep the trigger, the overlay and the Avatar outlines in
+   step. A person's picture is a circle. */
+.crewlet-image-upload--human .crewlet-image-upload__trigger,
+.crewlet-image-upload--human .crewlet-image-upload__overlay {
   border-radius: var(--radius-circle);
 }
 
 /* THE SAME CORNER THE PICTURE INSIDE TAKES, which is why it is a variable
-   rather than a step: Avatar moves a square badge's radius with its box, so a
+   rather than a step: Avatar moves an agent badge's corner with its box, so a
    trigger pinned to one step is rounder or squarer than the badge under it at
    every size but one, and the badge's corners show through the overlay. */
-.crewlet-image-upload--square .crewlet-image-upload__trigger,
-.crewlet-image-upload--square .crewlet-image-upload__overlay {
+.crewlet-image-upload--agent .crewlet-image-upload__trigger,
+.crewlet-image-upload--agent .crewlet-image-upload__overlay {
   border-radius: var(--crewlet-image-upload-corner);
 }
 
+/* AND THE SAME SQUIRCLE, where the browser draws one, for the same reason:
+   Avatar.css states why its squircle is a whole one at the circle token, and
+   this is that rule for the two frames over the picture. The suite holds the
+   two blocks to one declaration list. */
+@supports (corner-shape: squircle) {
+  .crewlet-image-upload--agent .crewlet-image-upload__trigger,
+  .crewlet-image-upload--agent .crewlet-image-upload__overlay {
+    corner-shape: squircle;
+    border-radius: var(--radius-circle);
+  }
+}
+
 .crewlet-image-upload__trigger:disabled {
   cursor: default;
 }
@@ -7940,21 +8886,26 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Kbd-W66MXQI5.css */
-/* A keycap: the key's name on a small raised tile. */
+/* Kbd-JPLDVJIP.css */
+/*
+ * A keycap: the key's name on a small raised tile.
+ *
+ * THE APPROVED DESIGN'S CAP: the raised rung inside the strong hairline, at
+ * the smallest radius, in the mono face at the micro step and the tertiary
+ * ink. The raised fill is what makes it a KEY rather than a word in a box, so
+ * the cap is flat on every side: the heavier bottom edge it used to carry was
+ * a second way of saying "raised" that the fill now says, and it stood the
+ * cap a pixel taller than the line it sits in.
+ */
 .crewlet-kbd {
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-1);
+  justify-content: center;
   min-width: 18px;
-  padding: 1px var(--spacing-1);
+  padding: 0 var(--spacing-1);
   border-radius: var(--radius-xs);
-  border: 1px solid var(--color-border-default);
-  /* The thicker bottom edge is the whole of the "cap": one border, drawn
-     heavier on one side, reads as a key without a shadow that forced-colors
-     mode would drop. */
-  border-bottom-width: 2px;
-  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-strong);
+  background: var(--color-surface-elevated);
   /*
    * The MONO face, not the surrounding one. A keycap is a literal: the reader
    * is being told which character is printed on a key, and a proportional face
@@ -7968,41 +8919,46 @@ svg.crewlet-datetime__chevron {
      sentence, a shortcut in a menu row. Tightened it stood a pixel under the
      line it sits in and the row it was in wobbled by that pixel wherever a
      cap appeared and wherever one did not. */
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   color: var(--color-text-tertiary);
   white-space: nowrap;
   vertical-align: middle;
 }
 
+/*
+ * A key inside a CHORD's cap. The whole chord is one cap, so each key in it
+ * is text on that cap and nothing more, run together with the next as the
+ * platform prints a chord. It is a `kbd` of its own because that is what a key
+ * inside a key combination is, and a user agent's `kbd` rule would otherwise
+ * set its own face and size on it.
+ */
+.crewlet-kbd__key {
+  font: inherit;
+}
+
 /*
  * A quieter cap: FLATTER, not fainter. The opacity this replaces multiplied
  * the ink as well as the frame, and 0.7 of a text step measures 3.43:1 on the
  * panel, so a hint printing the key a reader is told to press was the one
- * thing on the row they could not read. The cap gives up its raised edge and
- * its fill instead, and keeps the tertiary ink, which is measured at 4.5:1 on
- * every surface the package paints on.
+ * thing on the row they could not read. The cap gives up its raised fill and
+ * takes the plain hairline instead, and keeps the tertiary ink, which is
+ * measured at 4.5:1 on every surface the package paints on.
  */
 .crewlet-kbd--subtle {
-  border-bottom-width: 1px;
+  border-color: var(--color-border-default);
   background: none;
 }
 
 /*
- * A whole shortcut: the caps drawn together, and one sentence read instead of
- * them. The caps are hidden from assistive technology by the component; this
- * only lays them out.
+ * A whole shortcut: the cap drawn, and one sentence read instead of it. The
+ * cap is hidden from assistive technology by the component; this only lays
+ * it out.
  */
 .crewlet-kbd-combo {
   display: inline-flex;
   align-items: center;
 }
 
-.crewlet-kbd-keys {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
 
 /* Layer-NAFSGCFA.css */
 /*
@@ -8287,7 +9243,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* List-XTHESXLR.css */
+/* List-MYJIV6MP.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -8434,14 +9390,24 @@ svg.crewlet-datetime__chevron {
  * A row that failed. The rail is the scannable half and the glyph beside it is
  * the honest one: a reader who cannot tell the rail's hue from the row above
  * still meets a mark and a word.
+ *
+ * Both take the danger INK step, not the fill, because both are drawn on the
+ * row, and the row is sometimes the accent tint: a failed row can also be the
+ * one the reader is on. The fill is measured to 3:1 on the opaque surfaces and
+ * no further, so a fill rail on a selected or hovered row clears it only by
+ * the luck of the current palette (the red this list drew measured 3.00:1 on
+ * a hovered row inside a raised surface in dark); the ink clears 4.5:1 on
+ * every row ground, the accent tint included, which is where the palette
+ * suite holds a row's state rail (DATA_MARKS) and where the DataTable suite's
+ * sheet scan now holds this one.
  */
 .crewlet-list__item--danger > .crewlet-list__row {
-  box-shadow: inset 2px 0 0 var(--color-feedback-danger);
+  box-shadow: inset 2px 0 0 var(--color-feedback-danger-ink);
 }
 
 .crewlet-list__danger-mark {
   flex: none;
-  color: var(--color-feedback-danger);
+  color: var(--color-feedback-danger-ink);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -8601,7 +9567,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Listbox-ZXYYNN6U.css */
+/* Listbox-6WJNJQVQ.css */
 /*
  * The listbox register: one look for every list a field offers.
  *
@@ -8666,8 +9632,8 @@ svg.crewlet-datetime__chevron {
    * The SECONDARY step, not the primary one. A list of candidates is read by
    * running the eye down it for the one that matches, and rows drawn at full
    * strength all shout at once; the row the reader is actually on is the one
-   * that takes the accent and its ink. The step is held at 4.5:1 on every
-   * ground a row can sit on, so quieter is not fainter.
+   * that lifts to the primary ink. The step is held at 4.5:1 on every ground a
+   * row can sit on, so quieter is not fainter.
    */
   color: var(--color-text-secondary);
   font-size: var(--font-size-compact);
@@ -8679,14 +9645,39 @@ svg.crewlet-datetime__chevron {
 }
 
 /*
- * The active row, whether the arrows put it there or a hover did. The accent
- * is what means "here", and it is a tint plus its ink step rather than a fill
- * with a label on it.
+ * The active row, whether the arrows put it there or a hover did: the RAISED
+ * rung with the label lifted to the primary ink, as the approved palette draws
+ * it. Every list here opens on a card (a popover, a dialog), and raised is held
+ * dE 3 off the card by @crewlethq/tokens because a chip or a well has no border
+ * of its own, which is what this row is; every text step clears 4.5:1 on it.
+ *
+ * It used to be the accent's soft tint with the accent ink. The accent is the
+ * primary action's fill and the focus ring, so a violet row under the arrows
+ * read as a second primary on every surface that offers a list, the same
+ * reason the rail's current row stopped wearing it. What the accent still
+ * marks in a list is a CHOICE made (a multi-select's tick), not where the
+ * arrows are.
  */
 .crewlet-listbox__option[aria-selected='true'],
 .crewlet-listbox__option:hover {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+/*
+ * FORCED COLORS repaints every author background to Canvas, which took the
+ * highlight with it: the arrows moved through a list in which no row looked
+ * any different, in every Select, Combobox and command palette. An outline is
+ * the one mark the mode keeps, drawn inside the row so the list's own clip
+ * does not cut it, in the system's colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-listbox__option[aria-selected='true'] {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-color: Highlight;
+    outline-offset: -2px;
+  }
 }
 
 .crewlet-listbox__option[aria-disabled='true'] {
@@ -8982,7 +9973,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Meter-SKOOXQBC.css */
+/* Meter-5VCSFMZW.css */
 /*
  * The meter.
  *
@@ -9027,22 +10018,41 @@ svg.crewlet-datetime__chevron {
 }
 
 /*
- * A 4px track, which is the engine's. A meter sits under a line of 12px text
- * inside a card, and the 6px bar read as a divider rather than as a reading of
- * something; four is the height at which the fill is still unmistakably a
- * proportion and the bar is unmistakably chrome.
+ * A 6px track with round ends, the approved design's meter, at both sizes. It
+ * stands at the end of a stat tile's value line beside a 28px number and a
+ * 28px sparkline, and under a line of 12px text inside a card; the design
+ * draws it at six in both places, where the engine's older bar was four.
+ *
+ * The track is RAISED, the approved design's, and a rung rather than a well.
+ * The fill is measured against it as a mark, and the palette suite measures a
+ * mark on the four opaque rungs: on the inset well this track used to be, the
+ * light warning and success fills measured 2.84:1 and 2.86:1 over the frame
+ * once the states took the approved hues, a pair no palette rule could see.
+ *
+ * An opaque track has an edge only against a ground that is not itself, so a
+ * meter is drawn on a CARD, where the design puts every one and where the
+ * palette holds raised a visible step above the ground (dE 3.13 dark, 3.65
+ * light). On the raised rung the unfilled remainder, and with it the extent
+ * of the bar, would not be there at all.
  */
 .crewlet-meter__track {
-  height: 4px;
+  height: 6px;
   border-radius: var(--radius-pill);
-  background: var(--color-surface-inset);
+  background: var(--color-surface-elevated);
   overflow: hidden;
 }
 
+/*
+ * The ordinary reading, `quantity`, is the first data series. A meter is a
+ * figure of ONE quantity and its label names it, which is all a data hue
+ * asks for; the accent it used to take means "act here", and a bar is not
+ * something to act on. Every other tone below is a state, derived from the
+ * fill or passed by the caller.
+ */
 .crewlet-meter__fill {
   height: 100%;
   border-radius: var(--radius-pill);
-  background: var(--color-brand-accent);
+  background: var(--color-data-1);
   transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
@@ -9071,8 +10081,28 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+/*
+ * FORCED COLORS. The mode repaints every author background to Canvas, and the
+ * track and the fill are nothing but backgrounds, so the bar used to disappear
+ * whole, track and reading together, for exactly the reader who asked for
+ * more contrast. A system colour an author writes is kept, so the fill is
+ * drawn in CanvasText and the track in GrayText, the system's own pair for
+ * "there" and "quieter", which is what a SegmentedMeter draws its parts and
+ * its remainder in. The tone goes, as every hue does in this mode; the length
+ * is the reading, and it stays.
+ */
+@media (forced-colors: active) {
+  .crewlet-meter__track {
+    background: GrayText;
+  }
+
+  .crewlet-meter__fill[data-tone] {
+    background: CanvasText;
+  }
+}
+
 
-/* Modal-XYQJ4BL6.css */
+/* Modal-JAYBS2KS.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -9295,10 +10325,11 @@ svg.crewlet-datetime__chevron {
 }
 
 /*
- * The shell's one breakpoint. Below it there is no content beside a sheet to
- * keep in view, so the sheet takes the whole width and its edge goes with it.
+ * The shell's one breakpoint, strictly under it as the shell switches. Below
+ * it there is no content beside a sheet to keep in view, so the sheet takes
+ * the whole width and its edge goes with it.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-modal--sheet {
     width: 100%;
     border-inline: none;
@@ -9324,6 +10355,14 @@ svg.crewlet-datetime__chevron {
  * it on the line the bar behind it draws, and holds the two buttons that
  * commit and abandon the form at a full control step with room around them.
  *
+ * THE HEIGHT IS THE ROOM, NOT THE PADDING. The head centres what it holds, so
+ * the room around the buttons is what the bar's height leaves, and the block
+ * padding is only the least it keeps when a title wraps. It was the 16px step
+ * while the bar was 64px, which a full control step filled exactly; at 52px
+ * the same padding stood the head 12px past the bar behind it. At the 4px step
+ * the head is the bar's height with the control step at every density, 36.48px
+ * at comfortable included, and with a subtitle under the title.
+ *
  * It used to be the tighter band, 49px with a close control alone, and the
  * commit pair sat in a foot below a body that scrolled 1,764px on a seat with
  * a dozen fields: the reader had to travel the whole form to reach Apply, and
@@ -9331,7 +10370,7 @@ svg.crewlet-datetime__chevron {
  */
 .crewlet-modal__header--sheet {
   min-height: var(--size-shell-topbar);
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: var(--spacing-1) var(--spacing-6);
   gap: var(--spacing-4);
   box-sizing: border-box;
 }
@@ -9622,7 +10661,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* OrgLabel-D7U6QJZD.css */
+/* OrgLabel-CR233G34.css */
 /*
  * What a node of an org chart and a row of an org table both say
  * (OrgLabel.tsx).
@@ -9698,26 +10737,17 @@ svg.crewlet-datetime__chevron {
      had the fill alone and therefore the same defect; one rule now answers for
      both surfaces. */
   color: inherit;
-  fill: currentColor;
-}
-
-/*
- * THE DASHED RING is the boundary something standing for somebody outside the
- * system wears, around the mark rather than instead of it: the card's own edge
- * and the row's own mark carry the same dash, and the two together are what a
- * reader recognises without reading a word.
- */
-.crewlet-org-label__icon--dashed {
-  position: relative;
 }
 
-.crewlet-org-label__icon--dashed::before {
-  content: '';
-  position: absolute;
-  width: var(--size-target-min);
-  height: var(--size-target-min);
-  border: 1px dashed var(--color-border-hover);
-  border-radius: var(--radius-circle);
+/* THE FILL IS FOR A FILLED DRAWING, and a glyph is a stroke. Painting the
+   inside of a Lucide glyph turns every closed shape in it solid and every
+   open one into a smear (a person's head and shoulders, a unit's building, a
+   warning's triangle, each a blob), so a `.crewlet-glyph` keeps the fill its
+   own frame decides and takes the ink through its stroke. */
+.crewlet-org-label__icon svg:not(.crewlet-glyph),
+.crewlet-org-label__icon svg:not(.crewlet-glyph) g,
+.crewlet-org-label__icon svg:not(.crewlet-glyph) path {
+  fill: currentColor;
 }
 
 /* ---- The name and its caption -------------------------------------------- */
@@ -10777,7 +11807,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PricingCard-JFI7RYXP.css */
+/* PricingCard-7EFXRSD2.css */
 /*
  * PricingCard, the plan-tier card surface.
  *
@@ -10816,13 +11846,12 @@ svg.crewlet-datetime__chevron {
 /* ── Card root ──────────────────────────────────────────────────── */
 .crewlet-pricing-card {
   text-align: left;
-  /* The panel recipe: on dark the top hairline is the elevation, on light the
-     shadow is. One card surface across the system, so a plan tier and a
+  /* The card recipe, flat: the card's surface, its hairline and its 12px
+     corner. One card surface across the system, so a plan tier and a
      dashboard panel are the same object. */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   padding: var(--spacing-4);
   display: flex;
   flex-direction: column;
@@ -10855,7 +11884,7 @@ svg.crewlet-datetime__chevron {
 .crewlet-pricing-card.is-selected {
   border-color: var(--color-brand-accent);
   background: var(--color-brand-accent-soft);
-  box-shadow: var(--shadow-selection), var(--shadow-hairline);
+  box-shadow: var(--shadow-selection);
 }
 
 .crewlet-pricing-card.is-disabled,
@@ -10870,7 +11899,7 @@ svg.crewlet-datetime__chevron {
 }
 
 .crewlet-pricing-card.is-selected:has(.crewlet-pricing-card__amount--discounted) {
-  box-shadow: var(--shadow-selection), var(--shadow-hairline), var(--shadow-glow);
+  box-shadow: var(--shadow-selection), var(--shadow-glow);
 }
 
 /* Compact a card's interior at small container widths, so a four-up grid on a
@@ -11173,35 +12202,62 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* SearchTrigger-QXOYAUUY.css */
+/* SearchTrigger-Z5D4AAY7.css */
 /*
  * A button drawn as the field it stands in for.
  *
- * Below the shell breakpoint it keeps the glyph and drops the label and the
- * hint, which is why the name lives on the button rather than in its text.
+ * TWO PLACES, TWO GROUNDS. The approved design draws it in the rail, the
+ * whole width of the sidebar on the frame, and in a screen's own bar on the
+ * sheet. In each it is one rung up from what it stands on, the sheet on the
+ * frame and the card on the sheet, inside the default hairline, so it reads
+ * as a field sunk into neither and lifted off both.
  */
 
 .crewlet-search-trigger {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
-  /* The resting width of the box. A topbar with less room sets it. */
-  --crewlet-search-trigger-width: 220px;
-  min-width: var(--crewlet-search-trigger-width);
-  height: var(--size-control-md);
-  padding: 0 var(--spacing-2) 0 var(--spacing-3);
+  /* The design's 10px inside each end: two steps and a half. */
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
-  background: var(--color-surface-subtle);
   color: var(--color-text-tertiary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
+  text-align: start;
   cursor: pointer;
   transition:
     border-color var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * THE RAIL'S FIELD: the full width of the sidebar, on the SHEET's ground, and
+ * a step taller than a control. It is the rail's one field and the first
+ * thing in it under the company's name, and the design stands it at 34px,
+ * the medium control and one scale step, so it reads as the way in rather
+ * than as one more button.
+ */
+.crewlet-search-trigger--rail {
+  display: flex;
+  width: 100%;
+  height: calc(var(--size-control-md) + var(--spacing-1));
+  background: var(--color-surface-background);
+}
+
+/*
+ * A SCREEN'S OWN SEARCH, in a bar on the sheet: the CARD's ground, the
+ * control height of the buttons beside it, and a resting width of its own.
+ */
+.crewlet-search-trigger--toolbar {
+  /* The resting width of the box, the design's. A bar with less room sets it. */
+  --crewlet-search-trigger-width: 200px;
+
+  min-width: var(--crewlet-search-trigger-width);
+  height: var(--size-control-md);
+  background: var(--color-surface-subtle);
+}
+
 .crewlet-search-trigger:hover {
   border-color: var(--color-border-hover);
   color: var(--color-text-primary);
@@ -11223,7 +12279,10 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-muted);
 }
 
+/* The label takes the room, so the hint stands at the box's end. */
 .crewlet-search-trigger__label {
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -11237,13 +12296,16 @@ svg.crewlet-datetime__chevron {
   flex: none;
 }
 
-@media (max-width: 900px) {
-  .crewlet-search-trigger {
+/* Under the shell's breakpoint, strictly, as the shell switches: a toolbar's
+   field collapses to its glyph where the rail becomes a drawer. The rail's
+   own field does not, because the drawer is as wide as the rail was. */
+@media (width < 1024px) {
+  .crewlet-search-trigger--toolbar {
     min-width: 0;
   }
 
-  .crewlet-search-trigger__label,
-  .crewlet-search-trigger__shortcut {
+  .crewlet-search-trigger--toolbar .crewlet-search-trigger__label,
+  .crewlet-search-trigger--toolbar .crewlet-search-trigger__shortcut {
     display: none;
   }
 }
@@ -11435,24 +12497,136 @@ svg.crewlet-datetime__chevron {
   font-size: var(--font-size-compact);
 }
 
-/* The one card that is chosen takes the accent, which is what "here, this
-   one" means everywhere else in the product. */
-.crewlet-segmented--cards .crewlet-segmented__option.is-active {
-  border-color: var(--color-brand-accent);
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
+/* The one card that is chosen takes the accent, which is what "here, this
+   one" means everywhere else in the product. */
+.crewlet-segmented--cards .crewlet-segmented__option.is-active {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-segmented__description {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+  white-space: normal;
+}
+
+.crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
+  color: var(--color-brand-accent-ink);
+}
+
+
+/* SegmentedMeter-KQNML2TW.css */
+/*
+ * The segmented meter: a whole divided into the states its parts are in
+ * (SegmentedMeter.tsx).
+ *
+ * THE APPROVED DESIGN'S STATE BAR. 8px tall with 2px between the parts, each
+ * part its tone's FILL step and the remainder the quiet --color-border-strong:
+ * "4 of 7 working" on the Home screen's first tile. The compact step is the
+ * design's 6px progress bar under a project's name, the height of a Meter's
+ * track. Both are the measure of one mark, fixed at every density, as a
+ * Meter's track and a status dot are: a bar read by its proportions does not
+ * shrink with the gaps around it.
+ *
+ * A FILL IS A MARK. Nothing is written on it, so it takes the fill step, which
+ * the palette suite in @crewlethq/tokens measures at 3:1 against every opaque
+ * rung, and the ground shows through the gap on either side of it: two states
+ * are told apart by the gap between them and by the hue each clears on the
+ * ground, never by a contrast between two fills, which no rule measures.
+ *
+ * THE REMAINDER IS THE EXTENT OF THE BAR, not a reading, as a Meter's track
+ * is: what is left of seven seats once four work, one waits and one has
+ * stopped. It is the strong hairline's colour, which stands dE 7.99 off its
+ * nearest rung (the light frame) and 17.19 off its farthest, far past the dE 3
+ * this kit holds every "can a reader notice it" difference to, so the whole is
+ * visible on any ground the bar is put on. It is quieter than a fill by design:
+ * the idle seats are the part of the picture nobody has to act on.
+ */
+
+.crewlet-segmented-meter {
+  /* The gap between two parts, declared once because the width floor below
+     takes it out of the bar as well. */
+  --crewlet-segmented-meter-gap: 2px;
+  /* How many parts share the bar. The component sets it from the parts it
+     draws; one is what a bar that says nothing else holds. */
+  --crewlet-segmented-meter-count: 1;
+
+  display: flex;
+  gap: var(--crewlet-segmented-meter-gap);
+  height: 8px;
+  min-width: 0;
+  /*
+   * ROUND AT THE TWO ENDS AND SQUARE BETWEEN THE PARTS, which is the design's
+   * bar: the corner is the bar's, clipped, rather than each part's, so a part
+   * in the middle is a plain block and the ends are round whichever parts
+   * happen to stand there. The design writes 3px; the ramp's smallest step is
+   * --radius-xs, 4px, which is half the bar at both heights, so the ends are
+   * round.
+   */
+  border-radius: var(--radius-xs);
+  overflow: hidden;
+}
+
+.crewlet-segmented-meter--compact {
+  height: 6px;
 }
 
-.crewlet-segmented__description {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--font-line-height-normal);
-  color: var(--color-text-tertiary);
-  white-space: normal;
+/*
+ * A PART'S WIDTH IS ITS SHARE, set by the component as a flex basis in
+ * percent of the whole. The bases add to 100%, the gaps push the row past its
+ * box, and every part gives back in proportion to its basis, which is what
+ * flex-shrink at 1 does: each ends at its share of the bar less the gaps.
+ *
+ * THE FLOOR is the kit's 7px status dot, the smallest mark this kit asks a
+ * reader to tell by its hue: at its share alone one stopped seat in sixty is a
+ * sixth of a pixel. It yields to an equal share of the bar where so many parts
+ * are drawn that 7px each would not fit, so no part is ever pushed out of the
+ * end. A part held at the floor overstates its share, and the name says the
+ * exact figures.
+ */
+.crewlet-segmented-meter__segment {
+  flex-grow: 0;
+  flex-shrink: 1;
+  min-width: min(
+    7px,
+    calc(
+      (100% - (var(--crewlet-segmented-meter-count) - 1) * var(--crewlet-segmented-meter-gap)) /
+        var(--crewlet-segmented-meter-count)
+    )
+  );
+  height: 100%;
 }
 
-.crewlet-segmented--cards .crewlet-segmented__option.is-active .crewlet-segmented__description {
-  color: var(--color-brand-accent-ink);
+.crewlet-segmented-meter__segment[data-tone='info'] { background: var(--color-feedback-info); }
+.crewlet-segmented-meter__segment[data-tone='success'] { background: var(--color-feedback-success); }
+.crewlet-segmented-meter__segment[data-tone='warning'] { background: var(--color-feedback-warning); }
+.crewlet-segmented-meter__segment[data-tone='danger'] { background: var(--color-feedback-danger); }
+
+.crewlet-segmented-meter__remainder {
+  background: var(--color-border-strong);
+}
+
+/*
+ * FORCED COLORS. The mode repaints every author background to Canvas, so a bar
+ * drawn only in backgrounds disappears whole for exactly the reader who asked
+ * for more contrast, and a bar is read by its LENGTHS, which that reader needs
+ * as much as anybody. A system colour an author writes is kept, so the parts
+ * are drawn in CanvasText and the remainder in GrayText, the system's own
+ * pair for "there" and "quieter", and the gaps still stand between the parts.
+ * The hues go, as every hue does in this mode: the name says which part is
+ * which state.
+ */
+@media (forced-colors: active) {
+  .crewlet-segmented-meter__segment[data-tone] {
+    background: CanvasText;
+  }
+
+  .crewlet-segmented-meter__remainder {
+    background: GrayText;
+  }
 }
 
 
@@ -11843,7 +13017,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-QGSFKZYA.css */
+/* SidebarNav-X5NLZNWA.css */
 /*
  * The rail's navigation.
  *
@@ -11864,40 +13038,106 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * THE ROWS INSIDE A GROUP ARE FLUSH. A group is a run of destinations read as
- * one block, and the space between two of them is already the row's own height
- * against a 13px line; a step on top of that spends four pixels a rail cannot
- * afford fifteen times over. It is what the group LABEL's bottom pad is for,
- * and the rail's own gap between groups is what separates one run from the
- * next.
- *
- * Measured rather than chosen: at one step per row the rail stood 823px in a
- * 755px scroller, so the last two destinations in the product were reachable
- * only by scrolling the rail. Flush it is 746px and every row is on screen.
+ * THE ROWS INSIDE A GROUP ARE HALF A STEP APART: the approved design's 2px,
+ * which is what keeps a hovered row's tint from touching the raised row under
+ * it and reading as one band two rows tall. It is half a step rather than one
+ * because a rail holds fifteen destinations and more: at 4px a row the rail
+ * stood 823px in a 755px scroller when its rows were 36px, and the last two
+ * destinations were reachable only by scrolling it. At the 30px row step the
+ * same fifteen rows and fourteen 2px gaps are 478px against 540px flush at the
+ * old step, so the gap is paid for many times over by the row it sits beside.
  */
 .crewlet-nav-group {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-0);
+  gap: calc(var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * THE HEADING: the group's name and, at its end, an optional control (the add
+ * beside "Projects"). It stands at the pointer-target floor, because that
+ * control is a target and the heading is the row it is drawn in; with no
+ * control the heading keeps the same height, so a rail whose groups differ
+ * only in whether they can add something does not change its rhythm.
+ *
+ * Held off the run above by a margin rather than a padding, so its height
+ * does not depend on the document's box-sizing: with the rail's own gap it is
+ * 14px, the design's space between two runs, at density 1.
+ *
+ * Its end inset is a step SHORTER than a row's, because the control is a
+ * 24px square with its glyph centred in it: the row pad would put the glyph
+ * five pixels inside the line every count above and below it ends on.
+ */
+.crewlet-nav-group__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
   min-width: 0;
+  min-height: var(--size-target-min);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding: 0 var(--spacing-2) 0 var(--size-nav-row-pad);
 }
 
+/*
+ * The group's name in the design's register: sentence case at the caption
+ * step, not the uppercase micro-label it was. It is the same case as every row
+ * it names, so "Projects" reads as the word it is rather than as a label
+ * shouted over the rows, and the quieter ink rather than the tracking is what
+ * sets it apart from them.
+ */
 .crewlet-nav-group__label {
-  padding: var(--spacing-3) var(--size-nav-row-pad) var(--spacing-1);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  /* The rail's own micro-label register, which is one step tighter than the
-     wider step an Eyebrow takes: a group name here sits four pixels above the
-     row it names, and at the wider step "OPERATIONS" was visibly broader than
-     the rows beneath it rather than quieter than them. */
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-tight);
   /* The 4.5:1 step: a group name is a fact a reader has to read, not
      decoration. */
   color: var(--color-text-tertiary);
 }
 
+/* The heading's control. Pushed to the end whether or not the heading has
+   words, and at the floor the heading stands at. */
+.crewlet-nav-group__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--size-target-min);
+  height: var(--size-target-min);
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-group__action:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* Inside its own box, like every control in the rail: the rail is a clipping
+   scroller. */
+.crewlet-nav-group__action:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-nav-group__action-icon {
+  display: inline-flex;
+}
+
 .crewlet-nav-item {
   min-width: 0;
 }
@@ -11912,31 +13152,35 @@ svg.crewlet-select__chevron {
 .crewlet-nav-item__row {
   display: flex;
   align-items: center;
-  gap: var(--spacing-2);
+  /* The design's 10px between a glyph and its word. */
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
-  min-height: var(--size-row-md);
+  /* The rail's own row step, 30px: a list's 36px row spent six pixels fifteen
+     times over in a column the height of the window. */
+  min-height: var(--size-nav-row);
   padding: 0 var(--size-nav-row-pad);
   border: none;
-  /* The chrome's radius, not a card's. A 12px corner on a 36px row leaves the
+  /* The chrome's radius, not a card's. A 12px corner on a 30px row leaves the
      tint reading as a lozenge floating in the gutter rather than as a band the
      width of the rail. */
   border-radius: var(--radius-md);
   background: transparent;
   /*
-   * THE RAIL READS AT FULL INK. A destination is not secondary text: a rail of
-   * fifteen rows in the quiet step is a column of grey a reader has to hunt
-   * through, and the step down bought nothing the row's own tint does not
-   * already say. It is also the darker of the two on light and the lighter on
-   * dark, so the contrast on every ground the row can have goes up rather than
-   * down.
+   * A RESTING ROW IS THE SECONDARY STEP, and the reader's own row and a
+   * pointed one lift to the primary. That step is what says which row is
+   * which before the fill does: at full ink every row carried the current
+   * row's own weight, so the rail read heavier and brighter than the approved
+   * design and the current row was found by its lift alone. The secondary step
+   * is held at 4.5:1 on the rail and under the hover overlay by
+   * @crewlethq/tokens (RAIL_PAINTS), so quieter is not fainter.
    *
-   * WHAT CARRIES HOVER IS THEREFORE THE TINT, not an ink step: there is no
-   * step left above this one. The glyph is the second half of it, lifting from
-   * the decoration ramp to the row's own ink.
+   * The glyph has no colour of its own: it is drawn in currentColor and so is
+   * this ink, on every row, which is what keeps a row from painting its word
+   * and its glyph two different answers to "where am I".
    */
-  color: var(--color-text-primary);
+  color: var(--color-text-secondary);
   font-family: var(--font-family-sans);
   /* THE CHROME IS NOT BODY TEXT. A rail row names a destination; it is read at
      a glance and never read through, so it takes the compact step in the
@@ -11955,43 +13199,44 @@ svg.crewlet-select__chevron {
 
 .crewlet-nav-item__row:hover {
   background: var(--color-surface-hover);
+  color: var(--color-text-primary);
   text-decoration: none;
 }
 
-.crewlet-nav-item__row:focus-visible {
-  outline: 2px solid var(--color-focus);
-  /* Inside the row's own box: the rail is a clipping scroller, so an outset
-     ring on the first or last row is cut off by it. */
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
 /*
- * WHERE THE READER IS: the accent's own soft tint, with the label and the
- * glyph in the accent ink. That is the whole job of an accent in a chrome, and
- * the rail is the one place in the chrome it appears.
+ * WHERE THE READER IS: the row stands on RAISED, with the plain border drawn
+ * round it as a hairline INSIDE the row, and lifts to the primary ink.
  *
- * It was a neutral lift with the accent as a one-pixel bar outside the row's
- * left edge, on the reading that accent text in a rail competes with the
- * status hues beside it and cannot be separated from the row above by a reader
- * with a colour vision deficiency. Neither holds here. Nothing in this rail
- * carries a status hue except the attention count below, which is a tint
- * BEHIND a word rather than a word in a hue; and the tint is what answers the
- * second objection, because the row still lifts off its ground by more than a
- * hovered one does whether or not the hue is seen at all (@crewlethq/tokens
- * measures exactly that, and measures this ink on this composite: 5.76:1 in
- * light, 5.96:1 in dark).
+ * It is found the way a card is found. In light, raised is only dE 1.84 off
+ * the frame the rail stands on, so the fill alone is a lift a reader may not
+ * see; the hairline is what carries the row, and in dark it is also what
+ * tells the current row from a hovered one, whose fill lands only dE 1.56
+ * away. @crewlethq/tokens holds both halves by name: the row lifts off the
+ * rail by dE 1.5 and the hairline clears dE 3 on the row it is drawn on.
  *
- * What the bar cost was that one pixel of hue was the entire signal, at the
- * one moment a reader is scanning the rail to find out where they are.
+ * It used to be the accent's own soft tint with the label in the accent ink.
+ * The accent is the fill of the primary action now, so a violet row in the
+ * rail would read as a second primary on every screen, beside the one the
+ * screen is actually asking for. Where the reader is, is the row's position,
+ * its lift and its line; aria-current says it to a screen reader.
+ *
+ * THE HAIRLINE IS AN OUTLINE, not an inset box-shadow, for the reason the
+ * focus ring is one: forced-colors mode drops every box-shadow and every
+ * background and keeps outlines, so drawn as a shadow the current row would
+ * be indistinguishable from its neighbours for exactly the readers that mode
+ * exists for. The focus ring is the same property, so its rule is declared
+ * after this one and a focused current row draws the ring instead.
  *
  * Drawn from aria-current, so the picture and what a screen reader is told
  * cannot come apart. It is declared after :hover deliberately: both selectors
- * weigh the same, a row shows the current tint or the hover overlay and never
+ * weigh the same, a row shows the current lift or the hover overlay and never
  * both, and later is what decides which.
  */
 .crewlet-nav-item__row[aria-current='page'] {
-  background: var(--color-brand-accent-soft);
-  color: var(--color-brand-accent-ink);
+  background: var(--color-surface-elevated);
+  outline: 1px solid var(--color-border-default);
+  outline-offset: -1px;
+  color: var(--color-text-primary);
 }
 
 .crewlet-nav-item__row[aria-disabled='true'] {
@@ -12001,20 +13246,25 @@ svg.crewlet-select__chevron {
 
 .crewlet-nav-item__row[aria-disabled='true']:hover {
   background: transparent;
-  color: var(--color-text-primary);
+  color: var(--color-text-secondary);
 }
 
 /*
- * THE GLYPH FOLLOWS THE LABEL. At rest it is quieter than the word beside it
- * and takes the decoration step; on a hovered row and on the reader's own it
- * takes the row's own colour, which on the current row is the accent ink.
- *
- * ONE inherit rather than a second ramp, because a second ramp is how a row
- * comes to paint its label and its glyph two different answers to "where am
- * I". The colour is set on the DRAWING rather than on the box around it, which
- * is what says the decoration step is being spent on a glyph and not on text:
- * the package's variable check holds that rule, and it is the rule the step
- * exists for.
+ * After the current row's rule, which draws its hairline on the same
+ * property: both weigh the same, so source order is what lets a focused
+ * current row draw the ring rather than the line.
+ */
+.crewlet-nav-item__row:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inside the row's own box: the rail is a clipping scroller, so an outset
+     ring on the first or last row is cut off by it. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/*
+ * THE GLYPH IS THE LABEL'S INK. Lucide draws in currentColor, so the glyph
+ * takes whatever the row is painted in, at rest, pointed and current alike,
+ * and there is no second ramp to fall out of step with the word beside it.
  */
 .crewlet-nav-item__icon {
   display: inline-flex;
@@ -12023,16 +13273,6 @@ svg.crewlet-select__chevron {
   flex: none;
 }
 
-.crewlet-nav-item__icon svg {
-  color: var(--color-text-muted);
-  transition: color var(--motion-duration-fast) var(--motion-easing-default);
-}
-
-.crewlet-nav-item__row:hover .crewlet-nav-item__icon svg,
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__icon svg {
-  color: inherit;
-}
-
 .crewlet-nav-item__label {
   flex: 1 1 auto;
   min-width: 0;
@@ -12041,7 +13281,36 @@ svg.crewlet-select__chevron {
   white-space: nowrap;
 }
 
-.crewlet-nav-item__badge {
+/*
+ * A PROJECT'S KEY, as a chip in the glyph's place: the prefix every item in
+ * the project is filed under, in mono so ENG and PROD line up by letter. It
+ * is the raised rung inside the plain hairline, in the secondary ink, which
+ * the palette suite measures on every ground a row can have; on the reader's
+ * own row, which is raised too, the hairline is what draws it.
+ */
+.crewlet-nav-item__lead {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0 calc(var(--spacing-1) + 1px);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-normal);
+  line-height: var(--font-line-height-body);
+}
+
+/*
+ * THE COUNT: how many of something the destination holds, as a quiet figure
+ * at the end of the row. Tabular, so a count that ticks up does not move the
+ * words beside it. A mark before it (the working dot beside a count of agents
+ * at work) stands half a step off the figure.
+ */
+.crewlet-nav-item__count {
   display: inline-flex;
   align-items: center;
   flex: none;
@@ -12051,54 +13320,63 @@ svg.crewlet-select__chevron {
   color: var(--color-text-tertiary);
 }
 
-/*
- * THE SLOT IS WHAT PAINTS. A caller hands in the figure and the name a screen
- * reader reads after the row's own ("3 things waiting on somebody"); the rail
- * decides whether that is a quiet number at the end of the row or the one
- * thing on the screen that should pull the eye. So whatever arrives
- * contributes its text and its accessible name and nothing else, which is why
- * a <Count> here draws its own text rather than a second pill inside this one.
- */
-.crewlet-nav-item__badge > * {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  min-width: 0;
-  font-size: inherit;
-  font-weight: inherit;
-  /* Not the `font` shorthand, which would reset font-variant and take the
-     tabular figures with it. */
-  font-variant-numeric: inherit;
-  line-height: inherit;
+.crewlet-nav-item__figure {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) + 1px);
+}
+
+.crewlet-nav-item__mark {
+  display: inline-flex;
 }
 
-/* A quiet badge takes the row's ink, the current row's accent included. The
-   attention badge keeps its own, which is the whole point of it, and the
-   :not() is what says so: both selectors would otherwise weigh the same and a
-   tone would be decided by which rule a later edit happened to move. */
-.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge:not(.crewlet-nav-item__badge--attention) {
+/* The count takes the row's ink on the current row, lifting from the tertiary
+   step to the primary ink with the row it sits in: the tertiary step is
+   measured on the rail and under the hover overlay, and the raised row is a
+   ground it was never held to. */
+.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__count {
   color: inherit;
 }
 
 /*
- * THE ONE BADGE IN THE CHROME ALLOWED A STATUS HUE. A count of what is waiting
- * on a person is the one thing that should pull the eye out of whatever screen
- * the reader is on, and it stays a tint BEHIND a word rather than a word in a
- * hue, so it reads to somebody who cannot separate the hue at all.
+ * THE BADGE, THE ONE FIGURE IN THE CHROME ALLOWED A HUE, and it is the
+ * accent. A count of what is waiting on the reader is the one thing in the
+ * rail that asks them to act, which is what the accent means, and it is the
+ * one thing that should pull the eye out of whatever screen they are on. It
+ * is a FILL carrying a figure rather than a figure in a hue, so it reads to
+ * somebody who cannot separate the hue at all: the filled pill is the signal,
+ * the figure is the count.
  *
- * Measured on every ground a row can have, the reader's own row included,
- * which is a warning tint on the accent tint on the rail: @crewlethq/tokens'
- * palette suite has that composite by name, at 5.08:1 in light and 9.75:1 in
- * dark.
+ * The design's 18px pill, at least as wide as it is tall so a single digit is
+ * a round mark and not a lozenge, and following the density like the xs Tag
+ * it matches. The label is the on-accent step, the primary action's own pair,
+ * on every row alike, because the fill is opaque.
  */
-.crewlet-nav-item__badge--attention {
-  padding: 0 var(--spacing-2);
+.crewlet-nav-item__badge {
+  --crewlet-nav-item-badge-size: calc(18px * var(--density, 1));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+  min-width: var(--crewlet-nav-item-badge-size);
+  height: var(--crewlet-nav-item-badge-size);
+  margin-left: auto;
+  padding: 0 calc(var(--spacing-1) + 1px);
   border-radius: var(--radius-pill);
-  background: var(--color-feedback-warning-soft);
-  color: var(--color-feedback-warning-ink);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+/* Beside a count the badge is the second figure, not a second push to the
+   end: two auto margins would split the room between them and float the
+   count into the middle of the row. */
+.crewlet-nav-item__count + .crewlet-nav-item__badge {
+  margin-left: var(--spacing-2);
 }
 
 .crewlet-nav-item__toggle {
@@ -12137,9 +13415,10 @@ svg.crewlet-select__chevron {
 
 /*
  * Nested rows carry an indent guide rather than more padding, because a run of
- * indents with no line is a hierarchy a reader has to measure by eye. The
- * guide takes the accent on the path the reader is on, which is the same
- * signal the top-level rail gives.
+ * indents with no line is a hierarchy a reader has to measure by eye. On the
+ * path the reader is on the guide steps up to the strong border: the same
+ * neutral lift the current row itself takes, and not the accent, which the
+ * rail keeps for the one count that asks the reader to act.
  */
 .crewlet-nav-item__children {
   display: flex;
@@ -12153,12 +13432,12 @@ svg.crewlet-select__chevron {
 /* No type step of its own any more: every row in the rail reads at the compact
    step now, and the indent guide is what says a row is nested. */
 .crewlet-nav-item__children:has(.crewlet-nav-item__row[aria-current='page']) {
-  border-left-color: var(--color-brand-accent);
+  border-left-color: var(--color-border-strong);
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .crewlet-nav-group__action,
   .crewlet-nav-item__row,
-  .crewlet-nav-item__icon svg,
   .crewlet-nav-item__chevron {
     transition: none;
   }
@@ -12589,28 +13868,41 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatCard-KYPKZUWX.css */
+/* StatCard-KPAFD4E2.css */
 /*
  * The stat tile.
  *
  * THE TONE PAINTS THE VALUE, which is what the props always said and what the
  * stylesheet never did: 0.2.0 tinted the ICON, so a caller who passed a tone
  * and no icon got a tile identical to a neutral one. Ink only, and never a
- * fill: a tinted block behind a 24px number reads as a button.
+ * fill: a tinted block behind a 28px number reads as a button.
  */
 
 .crewlet-statcard {
+  /*
+   * The width of the figure at the end of the value's line. 96px is the
+   * approved design's sparkline, and its meters and state bars stand within
+   * four pixels of it: wide enough that a fortnight of points reads as a
+   * shape, narrow enough that five tiles in a row still leave the number its
+   * room.
+   */
+  --crewlet-statcard-trend-width: 96px;
+
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
-  padding: var(--spacing-3) var(--spacing-4);
-  /* The panel recipe: the surface, the hairline, the 12px corner and the
-     elevation the engine gives every card on a screen, so a lone tile is the
-     same object as the panel beside it rather than a flatter cousin. */
+  /* The design's 10px between the three lines, and its 16px inset with 14px
+     under the last line: half a scale step each, derived from the steps so
+     they follow the density with everything else. */
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  /*
+   * The card recipe: the card's surface, its hairline and its 12px corner,
+   * FLAT, as every card is, so a lone tile is the same object as the panel
+   * beside it rather than a raised cousin of it.
+   */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   min-width: 0;
@@ -12622,35 +13914,104 @@ svg.crewlet-select__chevron {
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
-  box-shadow: none;
 }
 
-.crewlet-statcard__value {
+/*
+ * The label: SENTENCE CASE at the caption step, as the design sets it and as
+ * the caller wrote it. The uppercased, tracked-open micro-caps it used to wear
+ * are a table's column head: five of them over five numbers put a heading on
+ * every tile, and uppercasing is a transform a caller's own words should not
+ * have to survive.
+ */
+.crewlet-statcard__label {
   display: flex;
-  align-items: baseline;
-  gap: var(--spacing-2);
+  align-items: center;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-tertiary);
   min-width: 0;
-  font-size: var(--font-size-2xl);
+}
+
+.crewlet-statcard__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * The value's line: the number at its start, the figure at its end, both on
+ * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
+ * rather than centring on each other.
+ */
+.crewlet-statcard__reading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+}
+
+/*
+ * THE SCREEN'S ONE DISPLAY NUMBER. The display step, semibold, on the tight
+ * track, with tabular figures so a number that ticks up moves nothing beside
+ * it.
+ *
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * that never wraps, and any leading over it is air under the digits that
+ * opens between the number and the line below it and stands the number
+ * higher than the figure it shares a foot with.
+ *
+ * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
+ * rather than stop: `text-overflow` acts on a block container only, and as a
+ * flex row the number and its unit were anonymous flex items no rule could
+ * reach, so a value too long for its tile was cut mid-digit with nothing to
+ * say a digit was lost. The unit sits on the same line as inline text, on
+ * the number's baseline.
+ */
+.crewlet-statcard__value {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--font-size-display);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
-  /* 1.1, the engine's, which is tighter than the tight step: a 24px number
-     with 1.2 of leading sits low in its box and opens a gap between the value
-     and the line under it that the 4px gap was already spending. */
-  line-height: 1.1;
-  /* A number that ticks up must not move the label under it. */
+  line-height: 1;
   font-variant-numeric: tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
+   reads as part of the figure rather than as a second one. */
 .crewlet-statcard__unit {
+  margin-inline-start: var(--spacing-1);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-medium);
   letter-spacing: var(--font-letter-spacing-normal);
   color: var(--color-text-tertiary);
 }
 
+/*
+ * The figure at the end of the line. A figure (a sparkline, a meter, a state
+ * bar) FILLS the slot, because none of them has a width of its own to offer.
+ * A control keeps its own and stands at the slot's end: "Review" is a small
+ * button beside the number it acts on, not a bar the width of a sparkline.
+ */
+.crewlet-statcard__trend {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: none;
+  width: var(--crewlet-statcard-trend-width);
+  min-width: 0;
+}
+
+.crewlet-statcard__trend > :where(button, a) {
+  align-self: flex-end;
+}
+
 /*
  * The placeholder is a line, not a pair of dashes. `--` is read aloud as
  * "dash dash" and looks exactly like a measured value of nothing; the tile
@@ -12664,46 +14025,57 @@ svg.crewlet-select__chevron {
   background: var(--color-surface-inset);
 }
 
-.crewlet-statcard__label {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  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);
-  min-width: 0;
-}
-
-.crewlet-statcard__icon {
-  display: inline-flex;
-  flex: none;
-}
-
 /*
  * The second line keeps its space whether or not there is one, so a row of
- * tiles where only some carry a sub still sits on one baseline.
+ * 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.
  */
 .crewlet-statcard__sub {
-  min-height: 1.2em;
+  min-height: calc(1em * var(--font-line-height-body));
   font-size: var(--font-size-xs);
-  /* The quiet step, with the label. The sub qualifies the number rather than
-     being a second one, and the engine keeps both of them a step under the
-     value they belong to. */
+  line-height: var(--font-line-height-body);
+  /* 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;
 }
 
+/*
+ * A CHANGE IS COLOURED BY WHETHER IT WAS WANTED, not by its direction: the
+ * sign already says which way the number moved. Good news takes the success
+ * ink and bad news the danger ink, the steps measured as TEXT on every rung;
+ * a change that is neither takes the secondary ink, a step up from the words
+ * after it, so the figure still leads the sentence.
+ */
+.crewlet-statcard__delta {
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__delta--good { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__delta--bad { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__delta--neutral { color: var(--color-text-secondary); }
+
+/*
+ * A SECOND LINE THAT REPORTS A STATE takes that state's ink ("Oldest waiting
+ * 2h 10m" is a person kept waiting: warning), the step measured as text on
+ * every rung, as the value's tone does. The delta inside the line keeps its
+ * own ink, which is a class on the delta and outranks this one on the line.
+ */
+.crewlet-statcard__sub--success { color: var(--color-feedback-success-ink); }
+.crewlet-statcard__sub--warning { color: var(--color-feedback-warning-ink); }
+.crewlet-statcard__sub--danger { color: var(--color-feedback-danger-ink); }
+.crewlet-statcard__sub--info { color: var(--color-feedback-info-ink); }
+
 .crewlet-statcard--success .crewlet-statcard__value { color: var(--color-feedback-success-ink); }
 .crewlet-statcard--warning .crewlet-statcard__value { color: var(--color-feedback-warning-ink); }
 .crewlet-statcard--danger .crewlet-statcard__value { color: var(--color-feedback-danger-ink); }
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-TGB6AEKM.css */
+/* StatGroup-HVG6O62W.css */
 /*
  * A row of stat tiles.
  *
@@ -12716,14 +14088,13 @@ svg.crewlet-select__chevron {
 .crewlet-stat-group {
   display: grid;
   grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the surface, the hairline, the 12px corner and
-     `overflow: hidden`, which is what lets the tiles inside sit against the
-     corners without their own hairlines escaping past them. The engine puts
-     its stat row inside exactly this. */
+  /* 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
+     escaping past them. */
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xs), var(--shadow-hairline);
   overflow: hidden;
 }
 
@@ -12744,7 +14115,6 @@ svg.crewlet-select__chevron {
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
-  box-shadow: none;
 }
 
 /*
@@ -12763,13 +14133,14 @@ svg.crewlet-select__chevron {
 
 /*
  * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row: 900px is a 280px rail plus a 620px content column, so it is
- * the width at which a four-up row of numbers stops having a column each. The
+ * 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.
  */
-@media (max-width: 900px) {
+@media (width < 1024px) {
   .crewlet-stat-group {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -12786,90 +14157,371 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatusDot-HA2L2FSX.css */
+/* StatusDot-7OMCQCZF.css */
 /*
- * The status dot: a 6px mark in its tone's fill, beside the word it belongs
+ * The status dot: a 7px mark in its tone's fill, beside the word it belongs
  * to. See the component doc for why it is hidden from assistive technology.
+ *
+ * 7px is the approved design's dot. The size is written out rather than
+ * taken from a scale because it is the measure of one mark, not a step
+ * anything else shares, and it is fixed at every density: a mark read the
+ * way a glyph is does not shrink with the gaps around it.
+ *
+ * TWO VALUES PER TONE: the fill the dot is painted in, and the HALO a pulsing
+ * dot breathes out in, which is the same tone's soft step. The halo is held to
+ * being SEEN rather than to a contrast ratio: it never touches the dot (see the
+ * pulse below), so the dot clears 3:1 against the surface it stands on at every
+ * point of the round, and the word beside it says the state. The halo only has
+ * to stand off its ground by the dE 3 the palette suite holds every "can a
+ * reader notice it" difference to. Every soft step does, by 4.48 at the least.
  */
 
 .crewlet-status-dot {
   display: inline-block;
-  width: 6px;
-  height: 6px;
+  width: 7px;
+  height: 7px;
   border-radius: var(--radius-circle);
   /*
    * The quiet state is still a mark, so it takes the tertiary step rather than
-   * the decoration one the engine spends here: a 6px dot has to clear 3:1 to
+   * the decoration one the engine spends here: a 7px dot has to clear 3:1 to
    * be seen at all, and --color-text-muted measures 2.33:1 on a light page and
    * 2.25:1 on a dark one at their worst grounds. The tertiary step measures
    * 4.87:1 and 4.65:1 on the same pair, and is the nearest step that holds.
    */
   background: var(--color-text-tertiary);
+  /*
+   * The neutral family has no soft step, because it has no hue to tint with,
+   * so its halo is a translucent overlay. Pressed is the one that reads like
+   * the tones' halos: it stands dE 6.09 off its faintest ground (the light
+   * frame) and 8.84 in dark, inside the 4.48 to 8.50 the soft steps span. The
+   * hover overlay stands 3.03, on the floor, and the inset well 1.79, under it.
+   */
+  --crewlet-status-dot-halo: var(--color-surface-pressed);
   flex: none;
 }
 
 .crewlet-status-dot--info {
   background: var(--color-feedback-info);
+  --crewlet-status-dot-halo: var(--color-feedback-info-soft);
 }
 
 .crewlet-status-dot--success {
   background: var(--color-feedback-success);
+  --crewlet-status-dot-halo: var(--color-feedback-success-soft);
 }
 
 .crewlet-status-dot--warning {
   background: var(--color-feedback-warning);
+  --crewlet-status-dot-halo: var(--color-feedback-warning-soft);
 }
 
 .crewlet-status-dot--danger {
   background: var(--color-feedback-danger);
+  --crewlet-status-dot-halo: var(--color-feedback-danger-soft);
 }
 
 .crewlet-status-dot--brand {
   background: var(--color-brand-accent);
+  --crewlet-status-dot-halo: var(--color-brand-accent-soft);
+}
+
+/*
+ * STILL HAPPENING: a halo breathes out round the dot and back in, the approved
+ * design's working pulse. Five things are deliberate.
+ *
+ * THE DOT NEVER FADES. The halo is a box-shadow and it is the only property
+ * the keyframes touch, so the fill stays at the step measured to 3:1 through
+ * the whole round. The pulse this replaced faded the dot itself to 0.35, and
+ * at the bottom of that fade every fill measured 1.35:1 to 2.17:1 against the
+ * surfaces it sits on: for part of every round, a mark under its own floor.
+ *
+ * NOR DOES THE HALO TOUCH IT. The design casts the halo from the dot itself,
+ * and a spread shadow starts at the edge of the box that casts it, so for the
+ * whole round the dot's ground would be its own soft step on the surface
+ * rather than the surface. On that ground the light info, success and warning
+ * fills measure 2.65:1 to 2.95:1 (warning and success on the frame, where they
+ * clear 3.00:1 and 3.01:1 bare): the same fault as the fade, smaller. So the
+ * halo is cast by a RING BOX 2px outside the dot, the offset the Avatar state
+ * ring and the outer focus ring stand at, and an outer shadow is never painted
+ * inside the box that casts it: a band of the real ground always stands
+ * between the dot and its halo, so the dot always stands on the surface its
+ * fill was measured against. The fill does not move. Nothing in this kit
+ * holds a mark to its own soft step, which is also why a Tag draws its dot in
+ * its ink.
+ *
+ * A SHADOW ON A PSEUDO-ELEMENT, not an outline at the same offset, because an
+ * outline's width is snapped to whole device pixels, as a border's is: at 1x
+ * a width breathing to 3px is drawn 1px and then 2px and reaches 3px for an
+ * instant, a flicker between two rings rather than a breath, where a spread
+ * shadow grows smoothly. The ring box is absolutely positioned, so it takes
+ * no room, and the pulsing dot is its containing block through a rule written
+ * in :where(), which weighs nothing, so a position of your own on the dot
+ * still wins, and any position but static keeps the ring on it.
+ *
+ * IT REACHES THE DESIGN'S 5PX, 2 of ground and 3 of halo, painted outside
+ * every box, so it moves nothing beside the dot. Like the 7px it surrounds,
+ * it is the measure of this one mark and is fixed at every density.
+ *
+ * ONE ROUND IS --motion-duration-breath, which is a PERIOD rather than a
+ * transition: out by the half, back by the end, and no `alternate`, which
+ * would play each half as a whole duration and take twice as long. That is
+ * 0.45 rounds a second, far under the three flashes a second that are a
+ * seizure risk, and the in-out ease makes both ends a rest. The halo is read
+ * through the custom property each tone sets above, which the ring box
+ * inherits, so whichever tone pulses breathes in its own soft step.
+ */
+:where(.crewlet-status-dot.is-pulsing) {
+  position: relative;
 }
 
-.crewlet-status-dot--phase-onboarding {
-  background: var(--color-phase-onboarding);
+.crewlet-status-dot.is-pulsing::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: var(--radius-circle);
+  /* Paint, never a target: the box reaches 2px past the dot. */
+  pointer-events: none;
+  animation: crewlet-status-dot-pulse var(--motion-duration-breath) var(--motion-easing-in-out) infinite;
 }
 
-.crewlet-status-dot--phase-execute {
-  background: var(--color-phase-execute);
-}
+/*
+ * The spread moves and nothing else: the rests and the peak are one shadow in
+ * one colour, so the only thing that interpolates is how far it reaches.
+ */
+@keyframes crewlet-status-dot-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--crewlet-status-dot-halo);
+  }
 
-.crewlet-status-dot--phase-review {
-  background: var(--color-phase-review);
+  50% {
+    box-shadow: 0 0 0 3px var(--crewlet-status-dot-halo);
+  }
 }
 
 /*
- * Still happening. Three things are deliberate: the pulse never goes to
- * nothing, because a mark that disappears reads as a fault rather than as work
- * in progress; it alternates rather than sawtooths, so the mark comes back the
- * way it went; and the round trip is 1.8s, which is the engine's own breath
- * and is 0.55 flashes a second, well clear of the three that are a seizure
- * risk. Three of the slow step each way makes that round trip.
+ * A DOT WITH ITS WORD: one line, the dot and then the word, the way every
+ * dot in this kit is meant to be read.
+ *
+ * THE GAP CLEARS THE HALO. A pulsing dot's halo reaches 5px past its edge, 2
+ * of ground and 3 of halo, painted outside every box, so it takes no room and
+ * a gap narrower than that puts the halo on the first letter at every peak:
+ * at the 4px an ordinary mark stands off its word, it struck the R of
+ * "Reviewing". 7px is that reach and 2px of ground on the far side of it, the
+ * same band that stands between the dot and its halo, so at the peak the word
+ * stands off the halo exactly as the halo stands off the dot. It is written in
+ * pixels, not a spacing step, because what it clears is fixed at every
+ * density like the dot and the halo themselves, and it is the same for EVERY
+ * tone, pulsing or not, so a column of statuses starts its words on one line
+ * whichever of them is breathing.
  */
-.crewlet-status-dot.is-pulsing {
-  animation: crewlet-status-dot-pulse calc(var(--motion-duration-slow) * 3) var(--motion-easing-default) infinite
-    alternate;
+.crewlet-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  max-width: 100%;
 }
 
-@keyframes crewlet-status-dot-pulse {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.35;
-  }
+/* A status is one line, and the word is what gives way: the dot never does. */
+.crewlet-status__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /*
- * A mark that cannot move should not pretend to. The dot still reads as its
- * tone, and the word beside it still says what is happening.
+ * HELD, not slowed: a mark that loops for as long as the work runs is exactly
+ * what the setting is for. The stop names the selector that starts the pulse
+ * and comes after it, so it wins on source order at the same specificity,
+ * which is the pairing the package's literal check holds every stylesheet to.
+ * The dot rests at its own fill with no halo, and the word beside it still
+ * says the work is under way.
  */
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-status-dot.is-pulsing {
+  .crewlet-status-dot.is-pulsing::after {
+    animation: none;
+  }
+}
+
+
+/* Stepper-HW4JM3YH.css */
+/*
+ * The stepper: where a sequence has got to (Stepper.tsx).
+ *
+ * THE APPROVED DESIGN'S STEP ROW. Each step is a 20px pill inside the default
+ * hairline, the 11px step at the medium weight, 8px inside each end and 5px
+ * between a mark and the word; two pills are joined by a 10px rule in the
+ * strong hairline's colour with 6px either side of it. A finished step is the
+ * secondary ink behind a check, the current step its tone's soft tint under
+ * its ink behind its dot, and a step still to come the tertiary ink.
+ *
+ * EVERY INK IS A MEASURED PAIR. The secondary and tertiary steps are held to
+ * 4.5:1 on every opaque rung, and each tone's ink to 4.5:1 on its own soft
+ * tint over every rung, by the palette suite in @crewlethq/tokens; the pill
+ * draws nothing else. The current pill is the design's `work-soft` under
+ * `work-ink` in the default tone, and a Tag's colours in every tone, which is
+ * what a chip naming a state is in this kit.
+ */
+
+.crewlet-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  /* The design's 6px between a pill and the rule beside it: a step and a half. */
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-stepper__step {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+}
+
+/*
+ * THE RULE BETWEEN TWO STEPS is drawn by the second of them, so a sequence of
+ * one draws none and nothing trails the last. A pseudo-element, because it is
+ * furniture: it carries nothing a reader has to be told, and the list already
+ * says the steps are in order. 10px by a hairline, the measure of this one
+ * mark, and fixed at every density as a hairline is.
+ */
+.crewlet-stepper__step + .crewlet-stepper__step::before {
+  content: '';
+  flex: none;
+  width: 10px;
+  height: 1px;
+  background: var(--color-border-strong);
+}
+
+.crewlet-stepper__chip {
+  display: inline-flex;
+  align-items: center;
+  /* The design's 5px between the check or the dot and the word. */
+  gap: calc(var(--spacing-1) * 1.25);
+  box-sizing: border-box;
+  /* The design's 20px pill, which follows the density with every other step
+     height in the kit. It labels and takes no press, so the 24px target floor
+     is not its to clear. */
+  height: calc(20px * var(--density, 1));
+  max-width: 100%;
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.crewlet-stepper__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-stepper__check {
+  flex: none;
+}
+
+.crewlet-stepper__step--done > .crewlet-stepper__chip {
+  color: var(--color-text-secondary);
+}
+
+/*
+ * THE CURRENT STEP, in its tone. The hairline goes transparent rather than
+ * away, so the pill keeps its box and the row does not move by a pixel as the
+ * current step advances along it, and so forced-colors mode, which draws a
+ * transparent border in the system's own colour, still outlines it.
+ */
+.crewlet-stepper--info .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-info-soft);
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-stepper--success .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-success-soft);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-stepper--warning .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-warning-soft);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-stepper--danger .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-stepper--brand .crewlet-stepper__step--current > .crewlet-stepper__chip {
+  border-color: transparent;
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+/*
+ * INSIDE THE PILL THE DOT IS THE PILL'S OWN INK, as a Tag's is, and for the
+ * Tag's reason: StatusDot paints the fill step, measured as a mark on the
+ * opaque rungs, and here it stands on the tone's soft tint instead, where
+ * nothing measures it. The ink is the step that IS measured on that tint, at
+ * 4.5:1, and the colour of the word beside it. A pulsing dot keeps
+ * StatusDot's halo, the same soft step drawn once more over the pill, which
+ * stands dE 3.92 off it at the least (the light warning pill on the frame).
+ *
+ * Two classes deep, so it beats StatusDot's own tone rule whichever order the
+ * bundle writes the two files in.
+ */
+.crewlet-stepper .crewlet-stepper__dot {
+  background: currentColor;
+}
+
+/*
+ * FORCED COLORS repaints every background to Canvas, which takes the current
+ * step's tint and its dot, so the one step the row is about would read like
+ * any other. The current pill is drawn as the system draws a selection,
+ * HighlightText on Highlight, with its dot in the same ink, and the rule
+ * between two steps in GrayText; the chips' hairlines are borders, which the
+ * mode keeps in its own colour.
+ *
+ * THE CURRENT PILL OPTS OUT OF THE ADJUSTMENT, which is safe only because
+ * every colour it draws in that mode is a system colour. Left to it, Chromium
+ * paints a Canvas backplate behind every run of text, and HighlightText is
+ * written for Highlight, not for Canvas: in a dark high-contrast theme the
+ * step's words drew black on black (measured in Chromium 153 with the mode
+ * emulated). Opting out also keeps shadows, so the pulsing dot's halo, which
+ * is the tone's soft tint and no system colour, is held still inside it.
+ */
+@media (forced-colors: active) {
+  .crewlet-stepper .crewlet-stepper__step--current > .crewlet-stepper__chip {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot {
+    background: HighlightText;
+  }
+
+  .crewlet-stepper .crewlet-stepper__dot.is-pulsing::after {
     animation: none;
   }
+
+  .crewlet-stepper__step + .crewlet-stepper__step::before {
+    background: GrayText;
+  }
 }
 
 
@@ -13217,7 +14869,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-MJ2E3VPK.css */
+/* Tabs-XCNPHA7B.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -13304,21 +14956,29 @@ svg.crewlet-select__chevron {
 
 /* ─── Pill (segmented control) ────────────────────────────────── */
 /*
- * A WELL WITH CHIPS IN IT, not a panel with buttons in it. The container is
- * the inset surface and carries no boundary of its own: the chip that is on
- * is what the reader looks for, and it is found by being the one thing lifted
- * off the well rather than by a border around the whole set.
+ * A WELL WITH CHIPS IN IT, not a panel with buttons in it: the approved
+ * design's segmented control. The well is the RAISED rung inside the default
+ * hairline, and the chip that is on is the CARD's own ground, lifted by a
+ * hairline and a small shadow, so it is found by being the one thing that
+ * matches the panel the row sits on.
+ *
+ * A RUNG AND A HAIRLINE, NOT A TRANSLUCENT WELL. The inset overlay it used to
+ * be stands almost nowhere off a card, so the well had no extent and the
+ * chips floated; the raised rung is held a visible step above the card by the
+ * palette suite, and the hairline finds it on any other ground.
  *
  * The inset is 2px, which is smaller than the scale's first step on purpose:
- * it is the gap a chip needs to read as sitting IN the well, and a 4px one
- * makes the row a control step taller than the button beside it.
+ * it is the gap a chip needs to read as sitting IN the well. With the 1px
+ * boundary it is three pixels a side, and a 24px chip makes a 30px row: the
+ * medium control step, the height of the button beside it.
  */
 .crewlet-tabs--pill {
   --crewlet-tabs-pill-inset: 2px;
 
   gap: var(--crewlet-tabs-pill-inset);
   padding: var(--crewlet-tabs-pill-inset);
-  background: var(--color-surface-inset);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   width: fit-content;
 }
@@ -13406,19 +15066,22 @@ svg.crewlet-select__chevron {
 
 /*
  * A CHIP STANDS SHORTER THAN THE CONTROL IT SITS BESIDE, and it is the row
- * that has to match: the well adds its inset above and below every chip, so a
- * chip at a full control step makes the whole segmented row taller than the
- * button next to it. Six pixels off the md step and four off the sm one is
- * what the engine's own segmented row has always drawn.
- *
- * AND THE FLOOR IS TAKEN AGAIN AFTER THE SUBTRACTION. --size-control-sm
- * carries a 24px floor of its own, but subtracting from a step subtracts from
- * its floor too: at compact density `calc(var(--size-control-sm) - 4px)` is
- * 20px, under the target a finger can hit. max() against --size-target-min
- * leaves the value exactly 24px at density 1 and reachable at every other.
- *
- * The corner is one hairline tighter than the well around it rather than a
- * step of its own, which is what reads as a chip sitting IN the well.
+ * that has to match: the well adds its boundary and its inset above and below
+ * every chip, so a chip at a full control step makes the whole segmented row
+ * taller than the button next to it. Six pixels off the md step is exactly
+ * that boundary and inset, and it leaves the design's 24px chip in a 30px row.
+ *
+ * AND THE FLOOR IS TAKEN AGAIN AFTER THE SUBTRACTION. Subtracting from a step
+ * subtracts from its floor too: at compact density
+ * `calc(var(--size-control-md) - 6px)` is 18.6px, under the target a finger
+ * can hit. max() against --size-target-min holds every density at 24px or
+ * more, and at density 1 the two agree.
+ *
+ * The corner is the small radius, the design's: the well's 8px less its 1px
+ * boundary and 2px inset is 5px, and a chip a pixel rounder than that
+ * concentric curve is what reads as a chip sitting IN the well rather than a
+ * second well inside it. The side pad is the design's 10px, two steps and a
+ * half.
  *
  * AND THE CONTENT IS CENTRED IN THE CHIP. It was aligned to the start, for a
  * chip stretched on a grid track, which is a case the pill chrome's own
@@ -13432,8 +15095,9 @@ svg.crewlet-select__chevron {
  */
 .crewlet-tabs--pill .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
-  padding: 0 var(--spacing-3);
-  border-radius: var(--radius-chip);
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
   font-size: var(--font-size-xs);
 }
 
@@ -13441,12 +15105,12 @@ svg.crewlet-select__chevron {
  * THE SMALL CHIP IS THE QUIET ONE. It is the register the rail's foot wears,
  * where a theme row and a density row sit beside a status pill and are read
  * past rather than read, so its side pad is the scale's first step rather
- * than its second and its glyph is the step under the label register's.
+ * than two and a half and its glyph is the step under the label register's.
  *
- * The height does not follow: at the reader's default density this chip is
- * already exactly --size-target-min, so a shorter one would be a target a
- * finger misses. The whole reduction comes out of the width, where the pad is
- * spent, and the floor above catches what is left.
+ * The height does not follow: the medium chip is already exactly
+ * --size-target-min at the reader's default density, so a shorter one would be
+ * a target a finger misses. The whole reduction comes out of the width, where
+ * the pad is spent, and the floor catches what the subtraction leaves.
  */
 .crewlet-tabs--pill.crewlet-tabs--sm .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-sm) - 4px));
@@ -13473,9 +15137,17 @@ svg.crewlet-select__chevron {
   color: var(--color-text-primary);
 }
 
+/*
+ * The chip that is on: the CARD's ground and the primary ink, lifted by the
+ * default hairline drawn round it and the smallest shadow under it, the
+ * design's chip. The hairline is the half that finds it: on a dark palette a
+ * shadow over a dark well is nearly invisible. Both are one shadow list, and
+ * neither token in it is ever `none`, which would drop the whole list.
+ */
 .crewlet-tabs--pill .crewlet-tabs__tab.is-active {
   background: var(--color-surface-subtle);
-  box-shadow: var(--shadow-xs);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border-default);
 }
 
 /*
@@ -13527,9 +15199,9 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tag-VNZEYLB6.css */
+/* Tag-GBE7LQJP.css */
 /*
- * The tag: a small pill naming a state, a phase or a value.
+ * The tag: a small pill naming a state, a category or a value.
  *
  * THREE VARIABLES CARRY EVERY VARIANT. A tag is its tone's `soft` tint under
  * its tone's `ink`, with the `line` step as the boundary it grows when it can
@@ -13549,39 +15221,49 @@ svg.crewlet-select__chevron {
 
 .crewlet-tag {
   /*
-   * THE ENGINE'S BADGE. Its line box is 11px at the document's 1.5 leading
-   * plus a pixel of padding and a pixel of border on each side, which lands on
-   * 20.5px; the step below is the whole pixel that renders, and it scales with
-   * density the way every size token does.
+   * THE APPROVED DESIGN'S PILL: 22px tall with fully round ends, the caption
+   * step at the medium weight, and 9px of room inside each end, which is the
+   * step a rounded end eats before the first letter clears it.
    *
    * The height is a STEP and the floor is separate, because the two answer
-   * different questions. A tag that only labels takes the engine's geometry
-   * exactly. A tag that ACTS is a pointer target, and 20px fails WCAG 2.2, so
-   * it takes the 24px floor as well: the engine draws its actionable badge at
-   * the inert one's height, which is the one place its look and the target
-   * rule disagree. Nothing else about the pill changes, so a row of tags still
-   * reads as one set.
+   * different questions. A tag that only labels takes the design's geometry
+   * exactly. A tag that ACTS is a pointer target, and 22px fails WCAG 2.2, so
+   * it takes the 24px floor as well. Nothing else about the pill changes, so a
+   * row of tags still reads as one set.
+   *
+   * THE NEUTRAL PILL IS THE RAISED RUNG under the secondary ink, the design's
+   * quiet pill: a category, a count, a word that is not a state. Every other
+   * variant below is its tone's soft tint under its ink.
+   *
+   * The boundary at rest is `--crewlet-tag-edge`: transparent for a tinted
+   * pill, whose hue already separates it from any neutral ground, and the
+   * strong border step for the neutral one (see its rule below).
    */
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
   --crewlet-tag-floor: 0px;
-  --crewlet-tag-fill: var(--color-surface-inset);
+  /* The design's 9px inside each round end: two steps and a quarter, so it
+     follows the density with every other gap. The remove control and the
+     press half of a split pill read it too, to reach the pill's own ends. */
+  --crewlet-tag-pad: calc(var(--spacing-2) + var(--spacing-1) / 4);
+  --crewlet-tag-fill: var(--color-surface-elevated);
   --crewlet-tag-ink: var(--color-text-secondary);
   --crewlet-tag-line: var(--color-border-hover);
+  --crewlet-tag-edge: transparent;
 
   display: inline-flex;
   align-items: center;
-  gap: var(--spacing-1);
+  /* The design's 6px between a dot or a glyph and the word: a step and a
+     half. */
+  gap: calc(var(--spacing-1) * 1.5);
   height: max(var(--crewlet-tag-height), var(--crewlet-tag-floor));
-  padding: 0 var(--spacing-2);
-  border: 1px solid transparent;
-  border-radius: var(--radius-xs);
+  padding: 0 var(--crewlet-tag-pad);
+  border: 1px solid var(--crewlet-tag-edge);
+  border-radius: var(--radius-pill);
   background: var(--crewlet-tag-fill);
   color: var(--crewlet-tag-ink);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  /* The engine tracks the badge a hundredth of an em open, which is the
-     normal step at this size: a hundredth of 11px is a tenth of a pixel. */
   letter-spacing: var(--font-letter-spacing-normal);
   line-height: 1;
   /* A tag is an atomic token: its label never breaks across lines inside the
@@ -13634,53 +15316,54 @@ svg.crewlet-select__chevron {
 /* ── sizes ─────────────────────────────────────────────────────────────── */
 
 /*
- * THREE HEIGHTS OF ONE BADGE. The engine draws a single pill and spends its
+ * THREE HEIGHTS OF ONE PILL. The design draws a single pill and spends its
  * variation on tone rather than on size, so the steps here differ by how much
- * room the pill takes and not by what it is: the type, the radius, the weight
- * and the tracking are the engine's at every one of them.
+ * room the pill takes and not by what it is: the radius, the weight and the
+ * tracking are the design's at every one of them.
  *
- * xs is an 18px pill and is NON-INTERACTIVE for that reason: it is under the
- * 24px target floor, and the component refuses a press at this step. It is for
- * a mark inside a dense row, where the label is still the carrier.
+ * xs is the design's 18px count pill, the one a rail row carries, and is
+ * NON-INTERACTIVE for that reason: it is under the 24px target floor, and the
+ * component refuses a press at this step. It is for a mark inside a dense
+ * row, where the label is still the carrier, and it takes the micro step, the
+ * design's 10.5px at the scale's floor.
  *
  * EVERY STEP SCALES WITH DENSITY, which is not decoration: written as a flat
- * 18px, this one stayed put while the badge above it came down to
- * 20 x 0.82 = 16.4px, so the dense mark rendered TALLER than the badge it is
- * meant to sit inside a row of. A step that does not move with the rest of the
- * scale is a step that overtakes one of its neighbours at some density.
+ * 18px, this one stayed put while the pill above it came down with the
+ * density, so the dense mark rendered TALLER than the pill it is meant to sit
+ * inside a row of. A step that does not move with the rest of the scale is a
+ * step that overtakes one of its neighbours at some density.
  */
 .crewlet-tag--xs {
   --crewlet-tag-height: calc(18px * var(--density, 1));
-  padding: 0 var(--spacing-1);
-  gap: 3px;
+  --crewlet-tag-pad: calc(var(--spacing-1) * 1.5);
+  gap: var(--spacing-1);
+  font-size: var(--font-size-2xs);
 }
 
-/* The engine's badge, and the default. */
+/* The design's pill, and the default. */
 .crewlet-tag--sm {
-  --crewlet-tag-height: calc(20px * var(--density, 1));
+  --crewlet-tag-height: calc(22px * var(--density, 1));
 }
 
 /* The md step is a small control's own height, so a tag and a small button in
-   one toolbar sit on the same baseline. One type step up with it: 11px inside
-   a 28px pill reads as a label that lost its box. */
+   one toolbar sit on the same line. */
 .crewlet-tag--md {
   --crewlet-tag-height: var(--size-control-sm);
-  font-size: var(--font-size-xs);
 }
 
 /*
  * A TAG THAT ACTS CLEARS 24px, at every density and every step. Last among the
  * steps so it is the floor whichever one is drawn, and a floor rather than a
- * height so the md step keeps its 28px.
+ * height so the md step keeps its 26px.
  */
 .crewlet-tag--acts {
   --crewlet-tag-floor: max(24px, calc(24px * var(--density, 1)));
 }
 
-/* One step down from the sans, where there is a step to take: a mono face
-   draws larger than the sans at the same size, and a machine value beside a
-   word has to read as the same line. At the two smaller steps the sans is
-   already at the bottom of the scale and the mono stays beside it. */
+/* One step down from the sans: a mono face draws larger than the sans at the
+   same size, and a machine value beside a word has to read as the same line.
+   At xs the sans is already at the bottom of the scale and the mono stays
+   beside it. */
 .crewlet-tag--monospace .crewlet-tag__label {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-2xs);
@@ -13718,43 +15401,6 @@ svg.crewlet-select__chevron {
   --crewlet-tag-line: var(--color-brand-accent-soft-strong);
 }
 
-/*
- * The phase family has a soft step and no line step, because nothing else in
- * the system needed a phase boundary. The ink is the boundary here: it is the
- * same hue at a strength a 1px rule can be seen at, and a border is not text,
- * so the rule that an ink step is never a BACKGROUND is untouched.
- *
- * A PHASE IS SET IN THE MICRO-LABEL REGISTER, uppercase and tracked open,
- * where a state is set in the badge's own. Phase is the one categorical
- * identity the product spends colour on outside a chart, and it is what a
- * reader follows across four screens; the second register is what separates it
- * at a glance from the state badge sitting beside it on the same row.
- */
-.crewlet-tag--phase-onboarding,
-.crewlet-tag--phase-execute,
-.crewlet-tag--phase-review {
-  letter-spacing: var(--font-letter-spacing-wide);
-  text-transform: uppercase;
-}
-
-.crewlet-tag--phase-onboarding {
-  --crewlet-tag-fill: var(--color-phase-onboarding-soft);
-  --crewlet-tag-ink: var(--color-phase-onboarding-ink);
-  --crewlet-tag-line: var(--color-phase-onboarding-ink);
-}
-
-.crewlet-tag--phase-execute {
-  --crewlet-tag-fill: var(--color-phase-execute-soft);
-  --crewlet-tag-ink: var(--color-phase-execute-ink);
-  --crewlet-tag-line: var(--color-phase-execute-ink);
-}
-
-.crewlet-tag--phase-review {
-  --crewlet-tag-fill: var(--color-phase-review-soft);
-  --crewlet-tag-ink: var(--color-phase-review-ink);
-  --crewlet-tag-line: var(--color-phase-review-ink);
-}
-
 /* ── appearance ────────────────────────────────────────────────────────── */
 
 /*
@@ -13767,6 +15413,31 @@ svg.crewlet-select__chevron {
   border-color: var(--crewlet-tag-line);
 }
 
+/*
+ * THE NEUTRAL PILL CARRIES A BOUNDARY, because its fill IS a surface. The
+ * raised rung is also the ground of a palette's lead block, a raised card and
+ * the rail's current row, and on any of them a raised pill with a transparent
+ * boundary was the colour of what it stood on: the pill vanished and its words
+ * read as loose text with odd gaps between them.
+ *
+ * THE STRONG STEP, NOT THE DEFAULT ONE. The design's own chip is found by 1px
+ * of its line step (`.chip`), which is the default border here, and that
+ * measured under the hairline dE of 3 on five grounds a pill lands on: 2.76 on
+ * the light frame, 2.86 on a pressed row over a light card, 2.77 and 2.71 on an
+ * inset well inside a raised surface, and 2.08 on a hovered row over the dark
+ * sheet. The strong step is the design's line-2, the boundary it draws round a
+ * key cap (`.kbd`), and it clears 3 on every rung and every overlay in both
+ * themes. The suite measures all of them.
+ *
+ * The hover takes the strong step once more, because the press line a tinted
+ * pill moves to on hover IS the strong step in both themes, and a hover that
+ * lands on the resting boundary draws no hover at all.
+ */
+.crewlet-tag--neutral.crewlet-tag--soft {
+  --crewlet-tag-edge: var(--color-border-strong);
+  --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
@@ -13825,9 +15496,9 @@ svg.crewlet-select__chevron {
   align-self: stretch;
   gap: inherit;
   min-width: 0;
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-tag-pad);
   border: 0;
-  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
   background: transparent;
   /* A button inherits none of these. */
   color: inherit;
@@ -13884,10 +15555,10 @@ svg.crewlet-select__chevron {
   min-width: 24px;
   margin-block-start: -1px;
   margin-block-end: -1px;
-  margin-right: calc(var(--spacing-2) * -1);
+  margin-right: calc(var(--crewlet-tag-pad) * -1);
   padding: 0 var(--spacing-1);
   border: 0;
-  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
   background: transparent;
   color: inherit;
   cursor: pointer;
@@ -15204,7 +16875,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toolbar-IP6LXN45.css */
+/* Toolbar-HUOSMNTH.css */
 /*
  * The toolbar row.
  *
@@ -15244,7 +16915,9 @@ svg.crewlet-time-window__tick {
   display: none;
 }
 
-@media (max-width: 900px) {
+/* Under the shell's breakpoint, strictly, as the shell switches: the wide
+   controls fold into the overflow where the rail becomes a drawer. */
+@media (width < 1024px) {
   .crewlet-toolbar__wide {
     display: none;
   }
@@ -15329,7 +17002,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeCanvas-WBNQPHC7.css */
+/* TreeCanvas-HVOV4SQN.css */
 /*
  * A hierarchy drawn as cards on a canvas (TreeCanvas.tsx).
  *
@@ -15363,7 +17036,10 @@ svg.crewlet-time-window__tick {
 .crewlet-tree-canvas__card,
 .crewlet-tree-canvas__links,
 .crewlet-tree-canvas__gap,
-.crewlet-tree-canvas__margin {
+.crewlet-tree-canvas__margin,
+.crewlet-tree-canvas__group,
+.crewlet-tree-canvas__group-head,
+.crewlet-tree-canvas__group-pad {
   position: absolute;
   top: 0;
   left: 0;
@@ -15502,15 +17178,6 @@ svg.crewlet-time-window__tick {
   --crewlet-tree-canvas-card-accent: var(--color-node-blue);
 }
 
-/*
- * A card that stands for somebody outside the system takes the dashed edge
- * every such seat wears. The BOUNDARY says it rather than a hue, so it reads
- * to somebody who cannot separate the hue at all.
- */
-.crewlet-tree-canvas__card--outline {
-  border-style: dashed;
-}
-
 /*
  * THE NODES INSIDE THE CARD. `role="treeitem"` is this component's own
  * contract, handed to the caller by `ctx.item(id)`, so the inset a node sits
@@ -15670,13 +17337,13 @@ svg.crewlet-time-window__tick {
 /*
  * A reveal is a state change rather than an entrance, so under reduced motion
  * it simply happens. The control is still shown and still reached the same way.
+ * The `node` appearance's own quiet controls are stopped in its own section,
+ * below the rules that start them: named here, above those rules, the stops
+ * tied with them on specificity and lost on source order.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-tree-canvas__actions,
-  .crewlet-tree-canvas__under,
-  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
-  .crewlet-tree-canvas--node .crewlet-org-node__leading,
-  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+  .crewlet-tree-canvas__under {
     transition: none;
   }
 }
@@ -15708,6 +17375,92 @@ svg.crewlet-time-window__tick {
   pointer-events: none;
 }
 
+/* ---------------------------------------------------------------------------
+ * A GROUP: a box round a run of sibling cards, with a label along its top.
+ *
+ * The approved design's unit box: a hairline on the card rung with the unit's
+ * name in the tertiary ink at 12px, and the project key chip at the end of
+ * that line. The hairline is `--color-border-default` over
+ * `--color-surface-subtle` standing on the canvas's own ground, which is the
+ * pair the palette suite already holds to a visible step (the card hairline
+ * rule); a card inside the box is the same rung and is found by its own
+ * hairline, exactly as a card on a sheet is.
+ *
+ * THE ROOM IS THE LAYOUT'S. The padding round the members is the probe below,
+ * and the room above them is the header's own measured height, so the box is
+ * never drawn over a card it does not hold and a branch is never run through
+ * it: both are reserved by `layoutForest` before anything is placed.
+ * ------------------------------------------------------------------------- */
+
+/*
+ * The room beside and below a group's members, as a token: `--spacing-3`,
+ * which is also the label's own inset, so the label starts on the line the
+ * first member's edge does.
+ */
+.crewlet-tree-canvas__group-pad {
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/*
+ * THE BOX IS DASHED, as the approved org chart draws a unit: a card's own
+ * edge is solid, and a box round several cards drawn the same way read as one
+ * more, larger card. A dash says the edge is a grouping rather than a thing.
+ * It is the STRONG border step, the artboard's, because a dash spends half its
+ * length on gaps: at the plain hairline's step the edge all but disappeared
+ * against the box's own fill.
+ */
+.crewlet-tree-canvas__group {
+  box-sizing: border-box;
+  background: var(--color-surface-subtle);
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-xl);
+  pointer-events: none;
+}
+
+/*
+ * THE LABEL'S LINE, and what the room above the members is measured from: one
+ * line, at the box's width, truncated rather than wrapped, because a label
+ * that wrapped would move every rank below it.
+ */
+.crewlet-tree-canvas__group-head {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/*
+ * ON THE BOX'S OWN FILL, over the branches: a branch dropping into a member
+ * passes behind the words rather than striking through them, and the fill is
+ * the box's, so nothing about the label reads as a second surface.
+ */
+.crewlet-tree-canvas__group-label,
+.crewlet-tree-canvas__group-lead {
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-tree-canvas__group-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The key AHEAD of the name, a project key chip, never cut: the name after
+   it is what gives way when the line is short. */
+.crewlet-tree-canvas__group-lead {
+  display: inline-flex;
+  flex: none;
+}
+
 /* ---------------------------------------------------------------------------
  * THE CHART ARRIVING, AND REARRANGING.
  *
@@ -15724,11 +17477,16 @@ svg.crewlet-time-window__tick {
  * ------------------------------------------------------------------------- */
 
 .crewlet-tree-canvas__card[data-enter='waiting'],
-.crewlet-tree-canvas__links path[data-enter='waiting'] {
+.crewlet-tree-canvas__links path[data-enter='waiting'],
+.crewlet-tree-canvas__group[data-enter='waiting'],
+.crewlet-tree-canvas__group-head[data-enter='waiting'] {
   opacity: 0;
 }
 
-.crewlet-tree-canvas__card[data-enter='shown'] {
+/* A group arrives with its first member, at the card's pace. */
+.crewlet-tree-canvas__card[data-enter='shown'],
+.crewlet-tree-canvas__group[data-enter='shown'],
+.crewlet-tree-canvas__group-head[data-enter='shown'] {
   animation: crewlet-tree-canvas-arrive var(--motion-duration-slow) var(--motion-easing-default) both;
 }
 
@@ -15754,9 +17512,20 @@ svg.crewlet-time-window__tick {
  * when the setting changed.
  */
 @media (prefers-reduced-motion: reduce) {
+  /* Drawn, whatever step of the entrance it had reached: a card still WAITING
+     is otherwise held at nothing. */
   .crewlet-tree-canvas__card[data-enter],
-  .crewlet-tree-canvas__links path[data-enter] {
+  .crewlet-tree-canvas__links path[data-enter],
+  .crewlet-tree-canvas__group[data-enter],
+  .crewlet-tree-canvas__group-head[data-enter] {
     opacity: 1;
+  }
+
+  /* And the entrance stopped by the selectors that start it. */
+  .crewlet-tree-canvas__card[data-enter='shown'],
+  .crewlet-tree-canvas__links path[data-enter='shown'],
+  .crewlet-tree-canvas__group[data-enter='shown'],
+  .crewlet-tree-canvas__group-head[data-enter='shown'] {
     animation: none;
   }
 }
@@ -15768,10 +17537,11 @@ svg.crewlet-time-window__tick {
 
 /*
  * THE CONNECTORS ARE THE CONTENT, and they take the step that is measured to
- * be resolvable. The SHAPE is `layoutConnectors`, which draws a rounded step
- * from each parent's bottom into each child's top; what is decided here is only
- * how dark it is, and that the joins are round so a corner reads as a turn
- * rather than as two lines meeting.
+ * be resolvable. The SHAPE is `layoutConnectors`, which draws an orthogonal
+ * elbow from each parent's bottom into each child's top, in SVG attributes
+ * the layout computes rather than in a style a policy has to allow; what is
+ * decided here is only how dark and how heavy it is, and that the joins are
+ * round so a corner reads as a turn rather than as two lines meeting.
  *
  * A connector is the only thing on the chart that says who reports to whom:
  * remove it and the picture is a scatter of cards. That makes it a graphical
@@ -15782,11 +17552,22 @@ svg.crewlet-time-window__tick {
  * boundary step, which the palette suite already holds at 3:1 on every ground,
  * measures 4.83:1 and 4.78:1. Darker than the chart this is drawn from, and
  * deliberately: there the hierarchy was a line a reader had to hunt for.
+ *
+ * THE APPROVED DESIGN DRAWS IT IN `--color-border-strong`, AND THE FLOOR WINS.
+ * The artboard's connector is the strong border step at 1.5px, and on the
+ * canvas's ground that step measures 1.45:1 in dark and 1.43:1 in light (1.40
+ * and 1.50 on a group box's card rung): a line a reader cannot make out, for
+ * the one mark that says who reports to whom. The palette suite's data-mark
+ * table holds a chart's connector to 3:1 on `--color-border-control`, so the
+ * value moves up the border family to the first step that clears it, 4.40:1
+ * and 4.04:1 (4.25 and 4.26 on the card rung). The WEIGHT is the design's:
+ * 1.5px, heavier than the hairline this used to be, so a branch between two
+ * ranks of 90px cards reads as a line of the chart rather than as a seam.
  */
 .crewlet-tree-canvas__links path {
   fill: none;
   stroke: var(--color-border-control);
-  stroke-width: 1;
+  stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -16161,6 +17942,20 @@ svg.crewlet-time-window__tick {
   pointer-events: auto;
 }
 
+/*
+ * The node's quiet controls arrive as a state change too, so under reduced
+ * motion they simply appear. Stopped HERE, after the rules that start their
+ * fades: the three selectors tie with those rules on specificity, so the stop
+ * has to come later in the file to win.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tree-canvas--node .crewlet-tree-canvas__under > :not(.crewlet-add-pill),
+  .crewlet-tree-canvas--node .crewlet-org-node__leading,
+  .crewlet-tree-canvas--node .crewlet-org-node-lead__clear {
+    transition: none;
+  }
+}
+
 /*
  * THE BRANCHES ARE HEAVIER HERE. A node is half the height of a card, so a
  * hairline between two ranks of them is a thread; this is the console chart's
@@ -16261,12 +18056,11 @@ svg.crewlet-time-window__tick {
  * chart this package is drawn to match does exactly this, and every step below
  * is its step.
  *
- * IT IS THE ONLY DASHED THING ON THE CHART THAT IS NOT A HUMAN SEAT, and the
- * two never collide: `cardOutline` marks a node of the data and this marks a
- * node that is not one yet, so no card can carry both. What tells them apart
- * is the hue and the breath: a human seat's edge is the chart's own boundary
- * step and does not move, and this one is the accent, with a ring outside it
- * that pulses for as long as the form is open.
+ * IT IS THE ONLY DASHED CARD ON THE CHART, because a dashed edge marks a
+ * place nothing fills yet and this is the one card that is not a node of the
+ * data. Every node's card is solid, a person's seat included: who holds a seat
+ * is its badge's outline, never the card's frame, which is why the chart has
+ * no second dashed card for a person to be confused with this one.
  *
  * ITS GROUND IS EVERY OTHER CARD'S. The ghost holds a real form with real
  * labels, helps and refusals in it, so it is NOT tinted: every contrast
@@ -16410,8 +18204,11 @@ svg.crewlet-time-window__tick {
 @media (prefers-reduced-motion: reduce) {
   /* NOT `transform` on the card itself: its transform is where the layout
      put it, written as an inline style, and a rule here saying `none` would
-     be a rule that only ever fires when something else drops that style. */
-  .crewlet-tree-canvas__card--composing,
+     be a rule that only ever fires when something else drops that style.
+     Named with the chart's class, as the rule that starts its arrival names
+     it: by its own class alone the stop was one class short of that rule,
+     and the arrival played for a reader who had asked for none. */
+  .crewlet-tree-canvas .crewlet-tree-canvas__card--composing,
   .crewlet-tree-canvas__links path[data-composing='true'] {
     opacity: 1;
     animation: none;