@crewlethq/ui 0.12.0 → 0.14.0

package/dist/styles.css

@@ -1088,7 +1088,7 @@
 }
 
 
-/* Avatar-QHYOFID3.css */
+/* Avatar-BPJ36QZR.css */
 /*
  * The identity badge.
  *
@@ -1233,7 +1233,7 @@
 }
 
 .crewlet-avatar--seeded {
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-scrim);
 }
 
 .crewlet-avatar--tint-0 { background: var(--color-avatar-tint-0); }
@@ -1662,6 +1662,202 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* Breadcrumb-YMWVM3SV.css */
+/*
+ * The trail in a top bar.
+ *
+ * IT IS WHAT GIVES WAY, AND WHAT TAKES THE SLACK. `flex-grow: 1` is the spacer
+ * a bar would otherwise need: the trail absorbs the free space, so the
+ * controls after it stay in the bar's far corner. Its BASIS is 0, which is
+ * what lets a wrapping bar break by what it holds rather than at a width, and
+ * `flex-shrink: 100` puts it ahead of anything else on the bar that can give.
+ *
+ * ITS FLOOR IS THE WAY BACK OUT, measured by the component
+ * (`--crewlet-breadcrumb-floor`): the ancestors at their width and the last
+ * crumb's stub, at least 20ch, and never more than the whole bar. A fixed 20ch
+ * alone let a seat's trail share a phone's line with its one button and cut
+ * "Engineering · Co" mid-letter under it; measured, a trail that cannot show
+ * its ancestry beside the controls makes the bar break a line instead.
+ *
+ * Past the whole bar the trail SCROLLS rather than clipping as a box: the
+ * ancestors never shrink, so once they alone are wider than the bar there is
+ * nothing left to ellipsise, and a clip lands wherever the pixels ran out.
+ */
+.crewlet-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 100 0;
+  min-width: min(100%, max(20ch, var(--crewlet-breadcrumb-floor, 0px)));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-breadcrumb::-webkit-scrollbar {
+  display: none;
+}
+
+/* A trail that overflows is a tab stop (see Breadcrumb.tsx), and shows it. */
+.crewlet-breadcrumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-breadcrumb__part {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+/*
+ * THE OBJECT'S OWN NAME TAKES THE CUT, never the way back out. The reader
+ * knows which object they are on, because the page below says so; what they
+ * cannot reconstruct is the links out of it. So the ancestors keep their width
+ * and the last part is the one that ellipsises.
+ */
+.crewlet-breadcrumb__part:not(:last-child) {
+  flex: 0 0 auto;
+}
+
+svg.crewlet-breadcrumb__separator {
+  flex: none;
+  margin: 0 var(--spacing-1);
+  color: var(--color-text-muted);
+}
+
+.crewlet-breadcrumb__crumb,
+.crewlet-breadcrumb__here {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/*
+ * The ancestors in the quiet ink: a link lifts to the primary ink under the
+ * pointer, and one with nothing to press stays where it is. NO UNDERLINE: a
+ * crumb is a piece of chrome, not a word in a sentence, and the step between
+ * two measured text rungs is its hover in both themes.
+ */
+.crewlet-breadcrumb__crumb {
+  border-radius: var(--radius-xs);
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+a.crewlet-breadcrumb__crumb:hover {
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+a.crewlet-breadcrumb__crumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* FORCED COLOURS paints a link LinkText hovered or not, so the ink step cannot
+   be seen there: the rule under the words is the hover in that mode. */
+@media (forced-colors: active) {
+  a.crewlet-breadcrumb__crumb:hover {
+    text-decoration: underline;
+  }
+}
+
+/* A glyph sits a step further from its word than a chip does from its name. */
+.crewlet-breadcrumb__icon {
+  display: inline-flex;
+  flex: none;
+  margin-right: calc(var(--spacing-1) / 2);
+}
+
+.crewlet-breadcrumb__badge,
+.crewlet-breadcrumb__key {
+  flex: none;
+}
+
+/*
+ * THE LABEL IS THE BOX THAT ELLIPSISES. The crumb around it is a flex
+ * container, and `text-overflow` never reaches the anonymous item text inside
+ * one makes; a span is a real flex item, and its `min-width: 0` is what lets
+ * it shrink below its text at all.
+ */
+.crewlet-breadcrumb__text {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* THE LAST CRUMB IS THE PAGE'S `h1`, so the heading's own margins and size are
+   the bar's, not the document's. */
+.crewlet-breadcrumb__here {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: inherit;
+  font-weight: var(--font-weight-medium);
+  line-height: inherit;
+}
+
+/*
+ * AND IT NEVER COLLAPSES TO NOTHING: a floor of a few characters keeps an
+ * ellipsised stub, which is what tells a reader the trail has a last part at
+ * all. The floor is the last part's alone; an ancestor never shrinks.
+ */
+.crewlet-breadcrumb__part:last-child > .crewlet-breadcrumb__here {
+  min-width: 5ch;
+}
+
+/*
+ * A CONTROL AS THE HEADING'S WORDS draws its own edges: its hover fill and its
+ * focus ring run to its own box, so the heading around it clips nothing.
+ */
+.crewlet-breadcrumb__here--control {
+  overflow: visible;
+}
+
+/* An identifier still waiting for its name, in the mono face a step down. */
+.crewlet-breadcrumb__crumb.is-mono,
+.crewlet-breadcrumb__here.is-mono {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+/*
+ * ON A PHONE AN ANCESTOR WITH A GLYPH IS ITS GLYPH. The workspace's mark is
+ * the one sign of where the reader is that survives a sidebar folded into a
+ * drawer, and the line it shares with the drawer toggle and the page's primary
+ * action has no room for its word as well. The word stays, out of sight, so
+ * the crumb is still named.
+ */
+@media (width < 640px) {
+  .crewlet-breadcrumb__part:not(:last-child) > .crewlet-breadcrumb__crumb:has(> .crewlet-breadcrumb__icon) > .crewlet-breadcrumb__text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-breadcrumb__crumb {
+    transition: none;
+  }
+}
+
+
 /* Button-UWKBTKYD.css */
 /*
  * The button, and the link drawn as one.
@@ -4053,6 +4249,136 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* ChoiceButtons-DJ5EOGUA.css */
+/*
+ * One answer, sent with one press: a column of buttons as tall as a touch
+ * target, the recommended one first and filled with the accent.
+ *
+ * The plain option is the secondary button's recipe (the card's own ground
+ * inside the strong hairline), and the recommended one the primary's, so the
+ * pair reads as the screen's one primary action and its alternatives.
+ */
+
+.crewlet-choice-buttons {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-2);
+}
+
+.crewlet-choice-buttons__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: var(--size-control-lg);
+  padding: calc(var(--spacing-2) + var(--spacing-1) / 2) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-strong-hover);
+}
+
+.crewlet-choice-buttons__option:active:not([aria-disabled='true']) {
+  background: var(--color-surface-pressed);
+}
+
+/*
+ * The plain option draws the strong hairline, so its ring is drawn over that
+ * edge rather than a gap away from it, which would read as a second outline.
+ */
+.crewlet-choice-buttons__option:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-choice-buttons__option[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+/* The option on its way: still this option, mid-action. */
+.crewlet-choice-buttons__option[aria-busy='true'] {
+  cursor: progress;
+}
+
+.crewlet-choice-buttons__option--recommended {
+  background: var(--color-brand-accent);
+  border-color: transparent;
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-choice-buttons__option--recommended:hover:not([aria-disabled='true']) {
+  background: var(--color-brand-accent-hover);
+  border-color: transparent;
+}
+
+.crewlet-choice-buttons__option--recommended:active:not([aria-disabled='true']) {
+  background: var(--color-brand-accent-active);
+}
+
+/*
+ * The accent fill draws no edge, and an inset ring on it would be drawn in
+ * nearly the fill's own colour, so its ring stands off it as a primary
+ * button's does.
+ */
+.crewlet-choice-buttons__option--recommended:focus-visible {
+  outline-offset: 2px;
+}
+
+.crewlet-choice-buttons__text {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-choice-buttons__detail {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * On the accent fill the detail takes the label's own ink. The tertiary step
+ * is measured on the surfaces, not on the accent, where it does not clear.
+ */
+.crewlet-choice-buttons__option--recommended .crewlet-choice-buttons__detail {
+  color: var(--color-text-on-accent);
+}
+
+/*
+ * The mark, in the micro-label register. Full ink rather than a faded one:
+ * eleven pixels of white on the accent clears 4.5:1 only at full strength.
+ */
+.crewlet-choice-buttons__note {
+  flex: none;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-choice-buttons__option {
+    transition: none;
+  }
+}
+
+
 /* ChoiceList-2PQJS4DX.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
@@ -4439,7 +4765,7 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
-/* CommandPalette-C5AMKGN2.css */
+/* CommandPalette-HBTNKHZQ.css */
 /*
  * The command palette: a field, an optional row of scopes, one scroller
  * holding the lead and the list, and a key legend.
@@ -4498,17 +4824,70 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
  * 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.
+ *
+ * The band is the BAR around the field, so a step's chip shares it: the field
+ * itself draws no box and fills what the chip leaves.
  */
-.crewlet-input.crewlet-palette__field {
+.crewlet-palette__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
   flex-shrink: 0;
   min-height: var(--size-row-lg);
   padding-inline: var(--spacing-3);
-  border: none;
   border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-input.crewlet-palette__field {
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+  padding-inline: 0;
+  border: none;
   border-radius: 0;
   background: transparent;
 }
 
+/*
+ * THE STEP'S CHIP: where the reader is, and the way back. It wears the
+ * accent's soft tint and ink, the kit's mark for "this is on", because a step
+ * is a narrowing the reader chose, as a filter that is on is; it is a control,
+ * so it takes the pointer and draws its own ring.
+ */
+.crewlet-palette__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  min-height: var(--size-target-min);
+  padding: 0 var(--spacing-2) 0 var(--spacing-1);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* Under the pointer it draws the line the soft tint is paired with, rather
+   than a stronger fill its ink was never measured on. */
+.crewlet-palette__step:hover {
+  box-shadow: inset 0 0 0 1px var(--color-brand-accent-soft-strong);
+}
+
+.crewlet-palette__step:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+/* In a step the query starts a gap after the chip, not a text inset after it. */
+.crewlet-palette__bar.is-step .crewlet-input__control {
+  padding-left: 0;
+}
+
 .crewlet-input.crewlet-palette__field .crewlet-input__control {
   font-size: var(--font-size-md);
 }
@@ -7478,11 +7857,12 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DateTimePicker-4AZBTODT.css */
+/* DateTimePicker-NJ6XH2TE.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
- * The trigger borrows the Select's geometry so a date box and a picker line
+ * The trigger borrows the Select's geometry and its button boundary
+ * (--color-border-strong; see Select.css) so a date box and a picker line
  * up in the same toolbar; the panel holds the shared CalendarGrid, so the
  * month looks and behaves the same here as in every other picker.
  */
@@ -7498,7 +7878,7 @@ body.crewlet-data-table-resizing {
      height. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -7515,7 +7895,7 @@ body.crewlet-data-table-resizing {
 }
 
 .crewlet-datetime:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -8023,9 +8403,300 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EmptyState-C6HRBGT7.css */
+/* Document-PQGXJHB7.css */
 /*
- * The empty state.
+ * Rendered markdown, set as a document (Document.tsx).
+ *
+ * Every size here is a step on the type ramp and every gap a spacing step,
+ * because a reading column set in sizes of its own (32, 20, 18, 15 and 14.5px
+ * were measured on one) is a column that drifts from every other surface.
+ */
+
+.crewlet-document {
+  /* The two rhythms a size sets: between blocks, and above a section. */
+  --crewlet-document-gap: var(--spacing-4);
+  --crewlet-document-section-gap: var(--spacing-6);
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+  /* The renderer decides what a break is, so the whitespace rule is normal. */
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+.crewlet-document--sm {
+  --crewlet-document-gap: var(--spacing-3);
+  --crewlet-document-section-gap: var(--spacing-5);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-document--measure {
+  max-width: var(--size-measure);
+}
+
+/*
+ * EVERY BLOCK'S OWN MARGIN IS ZEROED FIRST, and the rhythm is one rule over
+ * siblings. The other way round, a margin reset per element after the sibling
+ * rule, is how a rhythm dies: the shorthand resets the top margin too, at the
+ * same specificity and later in the file, and every block runs into the next.
+ */
+.crewlet-document :where(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, figure) {
+  margin: 0;
+}
+
+.crewlet-document > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}
+
+.crewlet-document :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  color: var(--color-text-primary);
+  /* An outline that scrolls a heading into view leaves it a little air. */
+  scroll-margin-block-start: var(--spacing-6);
+}
+
+/* A heading opens a section, so it gets more air above it than a paragraph. */
+.crewlet-document > * + :where(h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--crewlet-document-section-gap);
+}
+
+.crewlet-document h1 {
+  font-size: var(--font-size-2xl);
+}
+
+.crewlet-document h2 {
+  font-size: var(--font-size-xl);
+}
+
+.crewlet-document h3 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document :where(h4, h5, h6) {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h1 {
+  font-size: var(--font-size-lg);
+}
+
+.crewlet-document--sm h2 {
+  font-size: var(--font-size-md);
+}
+
+.crewlet-document--sm h3 {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-document--sm :where(h4, h5, h6) {
+  font-size: var(--font-size-compact);
+  color: var(--color-text-secondary);
+}
+
+/*
+ * A HEADING AN OUTLINE MOVED TO takes focus, so a keyboard carries on from it.
+ * A press draws no ring (`:focus-visible` does not match one); a keyboard's is
+ * drawn off the text, because the heading is not a control.
+ */
+.crewlet-document :where(h1, h2, h3, h4, h5, h6):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--spacing-1);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document :where(strong, b) {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-document :where(ul, ol) {
+  padding-inline-start: var(--spacing-5);
+}
+
+.crewlet-document li + li,
+.crewlet-document li > :where(ul, ol) {
+  margin-block-start: var(--spacing-1);
+}
+
+.crewlet-document li::marker {
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * A TASK LIST keeps its box on the line rather than in the marker's place: the
+ * marker is what says "list", and the box is what says "done". The item's
+ * content is ONE column beside the box, never a second cell of the row, so a
+ * sublist hangs under the line it belongs to.
+ */
+.crewlet-document ul:has(> li > input[type='checkbox']) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.crewlet-document li:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-document li:has(> input[type='checkbox']) > :not(input) {
+  flex: 1;
+  min-width: 0;
+}
+
+.crewlet-document li > input[type='checkbox'] {
+  flex: none;
+  margin: 0;
+  /* On the first line's centre rather than on the top of its box. */
+  margin-block-start: 0.35em;
+  accent-color: var(--color-brand-accent);
+}
+
+/*
+ * A FENCED BLOCK WRAPS RATHER THAN SCROLLING. One long line of JSON in a body
+ * otherwise pushes the whole page sideways, and a block that scrolled instead
+ * would owe a tab stop, since a scroller no keyboard reaches is content no
+ * keyboard reads. `anywhere` because these lines have no spaces to break at.
+ */
+.crewlet-document pre {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document pre code {
+  padding: 0;
+  background: none;
+  font: inherit;
+}
+
+.crewlet-document :not(pre) > code {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-document blockquote {
+  padding-inline-start: var(--spacing-3);
+  border-inline-start: 2px solid var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-document hr {
+  margin-block: var(--crewlet-document-section-gap);
+  border: 0;
+  border-block-start: 1px solid var(--color-border-default);
+}
+
+/*
+ * A link in running prose keeps a permanent underline, through hover too:
+ * colour alone is not what says "link" (WCAG 1.4.1). The pointer is answered
+ * by the ink moving to the primary step.
+ */
+.crewlet-document a,
+.crewlet-document a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.crewlet-document a {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-document a:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-document a:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-sm);
+}
+
+/*
+ * A TABLE WRITTEN FOR A DOCUMENT can be wider than the column it lands in, so
+ * the element a renderer wraps it in scrolls rather than the page. The table
+ * itself keeps its display, because a table set `display: block` loses its
+ * table semantics to more than one screen reader.
+ */
+.crewlet-document :where(div):has(> table) {
+  overflow-x: auto;
+}
+
+/* The scroller is a tab stop (see Document.tsx), so it draws the ring inside
+   its own box, where the table's edge would otherwise clip an outset one. */
+.crewlet-document :where(div):has(> table):focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-document table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-document--sm table {
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-document :where(th, td) {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-block-end: 1px solid var(--color-border-default);
+  text-align: start;
+  vertical-align: top;
+}
+
+.crewlet-document th {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/*
+ * The title above a body. The largest step a reading screen spends, at the
+ * tight tracking every title on the ramp takes, and it wraps anywhere because
+ * a title is an address somebody typed and may hold no space at all.
+ */
+.crewlet-document-title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+
+/* EmptyState-C6HRBGT7.css */
+/*
+ * The empty state.
  *
  * ITS MARK IS DECORATION and takes the decoration ink, which is the one place
  * that step is allowed: a 32px glyph a reader does not have to make out. Every
@@ -8465,6 +9136,38 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Highlight-DXLV2R6L.css */
+/*
+ * Words a search matched (Highlight.tsx).
+ */
+
+/*
+ * A GROUND, NEVER AN INK. The marked word keeps the ink of the text around it,
+ * so it reads at the contrast that text was measured at, and the accent's soft
+ * step behind it says "this is what you searched for" without making the word
+ * louder than its sentence. The accent is the one colour that means "where the
+ * reader is", and a match is exactly that: the reader's own question, found.
+ */
+.crewlet-highlight__match {
+  border-radius: var(--radius-xs);
+  background: var(--color-brand-accent-soft-strong);
+  color: inherit;
+}
+
+/*
+ * Forced colours replaces every author ground with the canvas, which would
+ * leave a match drawn exactly like the words beside it. The system's own pair
+ * for a mark is what that mode reserves for this job.
+ */
+@media (forced-colors: active) {
+  .crewlet-highlight__match {
+    forced-color-adjust: none;
+    background: Mark;
+    color: MarkText;
+  }
+}
+
+
 /* HuePicker-5QIUR6L7.css */
 /*
  * A hue's swatch: the hue itself, as a dot beside its name. The name carries
@@ -8662,14 +9365,17 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* ImageUpload-L2GE4JUM.css */
+/* ImageUpload-NVGMN7DP.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
  *
- * WHITE ON THE SCRIM, from tokens, in both palettes. The overlay used to spell
+ * WHITE ON THE SCRIM, from tokens, in every theme. The overlay used to spell
  * its own rgba(0, 0, 0, 0.5) and three shades of white; the scrim and the
- * on-accent step are the two values the palette already measures for exactly
- * this, which is a label drawn on something dark whatever is behind it.
+ * on-scrim step are the two values the palette measures for exactly this,
+ * which is a label drawn on something dark whatever is behind it. The
+ * on-accent step is not: a theme whose accent is light labels it dark. The
+ * remove button is the danger fill, and takes the on-danger step for the
+ * same reason.
  *
  * NO LITERAL FALLBACKS INSIDE var(). A fallback is what renders whenever the
  * token name is misspelt, so it hides the very failure it looks like
@@ -8756,7 +9462,7 @@ svg.crewlet-datetime__chevron {
   justify-content: center;
   gap: 2px;
   background: var(--color-surface-scrim);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-scrim);
   opacity: 0;
   transition: opacity var(--motion-duration-base) var(--motion-easing-default);
   pointer-events: none;
@@ -8801,7 +9507,7 @@ svg.crewlet-datetime__chevron {
   height: calc(var(--crewlet-image-upload-size) * 0.3);
   border-radius: var(--radius-circle);
   border: 2px solid var(--color-surface-scrim);
-  border-top-color: var(--color-text-on-accent);
+  border-top-color: var(--color-text-on-scrim);
   animation: crewlet-image-upload-spin calc(var(--motion-duration-slow) * 2.5) linear infinite;
 }
 
@@ -8831,7 +9537,7 @@ svg.crewlet-datetime__chevron {
   border-radius: var(--radius-circle);
   background: var(--color-feedback-danger);
   border: 2px solid var(--color-surface-background);
-  color: var(--color-text-on-accent);
+  color: var(--color-text-on-danger);
   cursor: pointer;
   opacity: 0;
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
@@ -8876,48 +9582,303 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* InlineCode-6WSR5COL.css */
+/* InboxList-YMFWKGGS.css */
 /*
- * One identifier inside a sentence: a mono chip on the inset surface.
+ * The inbox's column: groups of rows, each row a control with the task it is
+ * about under it, and the quiet toggles at the end.
  *
- * The size is relative (0.92em) rather than a step off the scale, because the
- * chip has to sit inside whatever register its sentence is set in. A fixed
- * size makes it either a shout inside a caption or a whisper inside a lead.
+ * EVERY TRACK IS minmax(0, 1fr). An `auto` track grows to its widest content,
+ * and a row holding a long unbroken word pushed the whole column past its
+ * edge, cutting every row off at the right.
  */
 
-.crewlet-inline-code {
-  /*
-   * RELATIVE, so it is deliberately not a step off the type scale: the chip
-   * sits inside whatever register its sentence is set in, and an absolute size
-   * makes it a shout inside a caption or a whisper inside a lead. The mono
-   * face also runs larger than the sans at the same nominal size, which is
-   * what the reduction corrects.
-   */
-  --crewlet-inline-code-size: 0.92em;
-  font-family: var(--font-family-mono);
-  /* An identifier is read character by character; a ligature joins two of them
-     into a drawing of something nobody typed. */
-  font-variant-ligatures: none;
-  font-size: var(--crewlet-inline-code-size);
-  background: var(--color-surface-inset);
-  border-radius: var(--radius-xs);
-  padding: 1px var(--spacing-1);
-  color: var(--color-text-secondary);
-  /* A URL IS ONE UNBREAKABLE WORD to a line breaker. Without this the chip is
-     pushed whole onto its own line and the sentence around it is torn up. */
-  overflow-wrap: anywhere;
+.crewlet-inbox-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: 2px;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
 }
 
-/*
- * A `${NAME}` pointer. It is one token a reader copies, so it keeps its braces
- * together. THE SAME INK AS ANY OTHER CHIP: a pointer is the name of a sealed
- * entry, and drawn a step quieter than the identifiers around it, it read as
- * decoration rather than as the thing an operator has to type back.
- */
-.crewlet-inline-code--reference {
-  overflow-wrap: normal;
-  white-space: nowrap;
-}
+.crewlet-inbox-list__group {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+  min-width: 0;
+}
+
+/* The heading's own line box is the label's, so the label sits where it is drawn. */
+.crewlet-inbox-list__label {
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
+  font: inherit;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-inbox-list__rows {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ---- The row ------------------------------------------------------------ */
+
+/*
+ * The ITEM takes the hover and the selected fill, so the control and the task
+ * under it read as one row. The selected fill is the neutral pressed step, and
+ * a selected row takes no hover on top of it: both are a background on the
+ * same element, and a composite of the two is a colour nothing has measured.
+ */
+.crewlet-inbox-row {
+  min-width: 0;
+  border-radius: var(--radius-md);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-row:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-inbox-row--selected,
+.crewlet-inbox-row--selected:hover {
+  background: var(--color-surface-pressed);
+}
+
+/*
+ * FORCED COLORS repaints every author background to Canvas, which takes the
+ * open row's fill with it, so the row the pane is showing would look like
+ * every other. An outline is the one mark the mode keeps, drawn inside the row
+ * so the scroller does not clip it, in the system's colour for exactly this.
+ */
+@media (forced-colors: active) {
+  .crewlet-inbox-row--selected {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
+
+.crewlet-inbox-row__control {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: 100%;
+  min-width: 0;
+  padding: calc(var(--spacing-2) + var(--spacing-1) / 2) var(--spacing-2) var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* With no task under it, the control closes the row at the same padding it opened with. */
+.crewlet-inbox-row__control:only-child {
+  padding-bottom: calc(var(--spacing-2) + var(--spacing-1) / 2);
+}
+
+/*
+ * The ring is drawn INSIDE: the list sits in a clipping scroller, where an
+ * outset ring is cut off on the first and last rows and painted over by the
+ * row below.
+ */
+.crewlet-inbox-row__control:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-inbox-row__leading {
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  width: var(--size-target-min);
+  margin-top: 1px;
+}
+
+.crewlet-inbox-row__main {
+  display: grid;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-inbox-row__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-inbox-row__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-row__qualifier {
+  flex: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-inbox-row__qualifier--danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-inbox-row__meta {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-inbox-row__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-inbox-row__excerpt {
+  color: var(--color-text-tertiary);
+}
+
+/* Unread: a heavier name, and the words in the primary ink. */
+.crewlet-inbox-row__control--unread .crewlet-inbox-row__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-inbox-row__control--unread .crewlet-inbox-row__text,
+.crewlet-inbox-row__control--actionable .crewlet-inbox-row__text {
+  color: var(--color-text-primary);
+}
+
+/*
+ * Settled. The strike is drawn in the strong hairline rather than the text's
+ * own ink, so the words under it stay legible; the state is also read out,
+ * because a line through a word says nothing to somebody listening.
+ */
+.crewlet-inbox-row__control--done .crewlet-inbox-row__text {
+  text-decoration: line-through;
+  text-decoration-color: var(--color-border-strong);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * The task, under the words and lined up with them: the control's start pad,
+ * the leading slot and the gap after it.
+ */
+.crewlet-inbox-row__aside {
+  min-width: 0;
+  padding:
+    0 var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2)
+    calc(var(--spacing-2) + var(--size-target-min) + var(--spacing-2) + var(--spacing-1) / 2);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/* ---- The end of the list ---------------------------------------------- */
+
+.crewlet-inbox-list__more {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  padding: calc(var(--spacing-3) + var(--spacing-1) / 2) var(--spacing-2) 0;
+}
+
+.crewlet-inbox-list__toggle {
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  font: inherit;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-list__toggle:hover,
+.crewlet-inbox-list__toggle[aria-expanded='true'] {
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-list__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-inbox-row {
+    transition: none;
+  }
+
+  .crewlet-inbox-list__toggle {
+    transition: none;
+  }
+}
+
+
+/* InlineCode-6WSR5COL.css */
+/*
+ * One identifier inside a sentence: a mono chip on the inset surface.
+ *
+ * The size is relative (0.92em) rather than a step off the scale, because the
+ * chip has to sit inside whatever register its sentence is set in. A fixed
+ * size makes it either a shout inside a caption or a whisper inside a lead.
+ */
+
+.crewlet-inline-code {
+  /*
+   * RELATIVE, so it is deliberately not a step off the type scale: the chip
+   * sits inside whatever register its sentence is set in, and an absolute size
+   * makes it a shout inside a caption or a whisper inside a lead. The mono
+   * face also runs larger than the sans at the same nominal size, which is
+   * what the reduction corrects.
+   */
+  --crewlet-inline-code-size: 0.92em;
+  font-family: var(--font-family-mono);
+  /* An identifier is read character by character; a ligature joins two of them
+     into a drawing of something nobody typed. */
+  font-variant-ligatures: none;
+  font-size: var(--crewlet-inline-code-size);
+  background: var(--color-surface-inset);
+  border-radius: var(--radius-xs);
+  padding: 1px var(--spacing-1);
+  color: var(--color-text-secondary);
+  /* A URL IS ONE UNBREAKABLE WORD to a line breaker. Without this the chip is
+     pushed whole onto its own line and the sentence around it is torn up. */
+  overflow-wrap: anywhere;
+}
+
+/*
+ * A `${NAME}` pointer. It is one token a reader copies, so it keeps its braces
+ * together. THE SAME INK AS ANY OTHER CHIP: a pointer is the name of a sealed
+ * entry, and drawn a step quieter than the identifiers around it, it read as
+ * decoration rather than as the thing an operator has to type back.
+ */
+.crewlet-inline-code--reference {
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
 
 /*
  * Inside a Callout or a field error the chip carries that message's ink, or a
@@ -9685,6 +10646,39 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* KeyChip-4XJU4BBE.css */
+/*
+ * A project's key as a chip: the raised rung inside the plain hairline, in the
+ * mono face at the micro step and the secondary ink.
+ *
+ * The rail's suite measures this ink on this fill against every ground a rail
+ * row can have (SidebarNav.test.tsx), because the rail is where the chip sits
+ * on the most grounds: the frame, a pointed row and the current row.
+ */
+.crewlet-key-chip {
+  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);
+  white-space: nowrap;
+}
+
+/* The letters a search matched: the weight carries it, in the primary ink. */
+.crewlet-key-chip__match {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+
 /* Layer-NAFSGCFA.css */
 /*
  * The portal target a LayerHost provides.
@@ -9885,9 +10879,10 @@ svg.crewlet-datetime__chevron {
 
 
 
-/* Link-6BEFNMN2.css */
+/* Link-WPMVLKLY.css */
 /*
- * A link, in the two registers a console needs: a navigation and an identity.
+ * A link, in the three registers a console needs: a navigation, an identity
+ * and a quiet reference.
  *
  * The ink is the accent's INK step, not the accent fill. The fill is a mark
  * and clears 3:1; text has to clear 4.5:1, and at caption size it is exactly
@@ -9920,10 +10915,44 @@ svg.crewlet-datetime__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * A reference among other words. Its own ink sits between the accent ink and
+ * the secondary text, so a column of rows that each name a task does not read
+ * as a column of links, and the hover steps it up to the full accent ink with
+ * no underline. The ink is a token rather than a mix of two, because a mix is
+ * a colour nobody measured; this one clears 4.5:1 on every surface and on a
+ * pressed row.
+ */
+.crewlet-link--quiet {
+  color: var(--color-text-link-quiet);
+}
+
+.crewlet-link--quiet:hover {
+  color: var(--color-brand-accent-ink);
+  text-decoration: none;
+}
+
+/*
+ * FORCED COLORS paints every link in LinkText whatever its state, so the step
+ * up to the accent ink cannot be seen there, and a hover with no underline is
+ * no hover at all. The rule under the words is the one mark the mode leaves to
+ * the author, so it is where the quiet variant's hover goes in that mode.
+ */
+@media (forced-colors: active) {
+  .crewlet-link--quiet:hover {
+    text-decoration: underline;
+  }
+}
+
 .crewlet-link--body {
   font-size: var(--font-size-sm);
 }
 
+/* Set inside a sentence: the sentence's own size, whatever it is. */
+.crewlet-link--inherit {
+  font-size: inherit;
+}
+
 /*
  * A caption-sized link takes the caption's SIZE and keeps the link's ink. It
  * is medium weight and does not wrap, because the thing it names (an event id,
@@ -10458,7 +11487,156 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Menu-BT5PMFJI.css */
+/* MarkdownEditor-ZLSHTOIZ.css */
+/*
+ * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
+ * and the footer, in ONE box.
+ *
+ * THE BOX TAKES THE RING, and only for the field. It is the package's one ring
+ * for a field: the box's own hairline drawn in the focus colour, laid on the
+ * boundary (see Input.css). It is asked of the FIELD rather than of
+ * :focus-within, so a reader walking the bar's controls sees each control's
+ * own ring and not a second one round the whole editor.
+ */
+
+.crewlet-markdown-editor {
+  /* The height the field and the preview stand at, so switching between them
+     does not move what is under the editor. */
+  --crewlet-markdown-editor-height: calc(
+    var(--crewlet-markdown-editor-rows, 14) * var(--font-size-compact) * var(--font-line-height-relaxed) +
+      var(--spacing-3) * 2
+  );
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-markdown-editor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.crewlet-markdown-editor:has(.crewlet-markdown-editor__field:focus-visible) {
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+/* A refused body keeps its colour while the writer is in it: the ring takes
+   the danger step, so "here" and "refused" stay one edge. */
+.crewlet-markdown-editor--invalid {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-markdown-editor--invalid:has(.crewlet-markdown-editor__field:focus-visible) {
+  outline-color: var(--color-feedback-danger);
+}
+
+.crewlet-markdown-editor--disabled {
+  opacity: 0.6;
+}
+
+/* The bar sits on the box's top edge, a hairline under it. Two classes, so it
+   outranks the toolbar's own padding whichever stylesheet loads first. */
+.crewlet-markdown-editor .crewlet-markdown-editor__bar {
+  gap: var(--spacing-1);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+.crewlet-markdown-editor__group {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+}
+
+/* A hairline between groups, so nine controls read as three ideas. */
+.crewlet-markdown-editor__group + .crewlet-markdown-editor__group {
+  padding-inline-start: var(--spacing-1);
+  border-inline-start: 1px solid var(--color-border-default);
+}
+
+.crewlet-markdown-editor__spacer {
+  flex: 1;
+}
+
+.crewlet-markdown-editor__panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/*
+ * THE SOURCE IS SET IN THE MONOSPACE FACE: a writer counts the hashes of a
+ * heading and lines up the bars of a table, and a proportional face makes
+ * both a guess.
+ */
+.crewlet-markdown-editor__field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--crewlet-markdown-editor-height);
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  resize: vertical;
+}
+
+.crewlet-markdown-editor__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* The ring is the box's. A transparent outline stays, because forced colours
+   paints an outline where this would otherwise draw none. */
+.crewlet-markdown-editor__field:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.crewlet-markdown-editor__field:disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-markdown-editor__preview {
+  min-height: var(--crewlet-markdown-editor-height);
+  padding: var(--spacing-3) var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-markdown-editor__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-markdown-editor__footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-3);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-block-start: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-markdown-editor {
+    transition: none;
+  }
+}
+
+
+/* Menu-BT5PMFJI.css */
 /*
  * The menu button's panel.
  *
@@ -10827,7 +12005,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-BNT3TDV2.css */
+/* Modal-RQAYGG4L.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -10914,6 +12092,28 @@ svg.crewlet-datetime__chevron {
   padding-top: var(--spacing-10);
 }
 
+/*
+ * THE BOTTOM SHEET: pinned to the bottom edge with no inset, so it rises from
+ * where a thumb already is. Its frame takes the window's width and keeps a
+ * corner on its top edge only, and its foot stays clear of a phone's home
+ * indicator.
+ */
+.crewlet-modal-overlay--dialog.crewlet-modal-overlay--bottom {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
+  width: 100%;
+  max-height: calc(100dvh - var(--spacing-10));
+  border-bottom: none;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  /* It rises further and sooner than a dialog drops in: a sheet arrives from
+     the edge it is pinned to, and a thumb is waiting on it. */
+  animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
+}
+
 /*
  * The sheet's veil fades over the same span the sheet itself travels, so the
  * two are one movement rather than a ground that lands and a panel that
@@ -11097,7 +12297,7 @@ svg.crewlet-datetime__chevron {
  * 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
+ * the head is the bar's height with the control step at every density, 37.12px
  * 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
@@ -11309,6 +12509,13 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+@keyframes crewlet-modal-lift {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-6));
+  }
+}
+
 /*
  * A SHEET TRAVELS ITS OWN WIDTH, which is what makes the motion read as a
  * sheet rather than as a box appearing beside the page: the frame starts
@@ -11332,6 +12539,10 @@ svg.crewlet-datetime__chevron {
   .crewlet-modal--sheet {
     animation: none;
   }
+
+  .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
+    animation: none;
+  }
 }
 
 
@@ -12373,6 +13584,87 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Outline-VCXKKU3E.css */
+/*
+ * A document's outline, "On this page" (Outline.tsx).
+ *
+ * QUIET UNTIL IT IS CURRENT. The entries are the tertiary ink at the caption
+ * step, so the column beside a page reads as a map rather than as a second
+ * page, and the entry the reader is in takes the primary ink and the accent
+ * edge every current row in the system takes.
+ */
+
+.crewlet-outline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* The outline's name in the register of a group label: sentence case at the
+   caption step, the 4.5:1 ink. */
+.crewlet-outline__title {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-outline__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * One entry: the heading's text, wrapped rather than cut, because a heading
+ * cut to fit is a section the reader cannot tell from its neighbour. The edge
+ * the current entry draws is held on every entry in its resting colour, so
+ * nothing moves when the current entry changes.
+ */
+.crewlet-outline__item {
+  display: block;
+  width: 100%;
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: calc(var(--spacing-1) / 2) var(--spacing-2);
+  padding-inline-start: calc(var(--spacing-3) + var(--spacing-3) * var(--crewlet-outline-depth, 0));
+  border: 0;
+  border-inline-start: 2px solid var(--color-border-default);
+  border-radius: 0;
+  background: none;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-snug);
+  text-align: start;
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.crewlet-outline__item:hover {
+  color: var(--color-text-primary);
+}
+
+/* The ring lies on the entry's own edge, never a second line beside it. */
+.crewlet-outline__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The weight stays the resting one: a bolder entry is a wider one, and a
+   wider entry can wrap onto a second line as the reader scrolls past it. */
+.crewlet-outline__item--current {
+  border-inline-start-color: var(--color-brand-accent);
+  color: var(--color-text-primary);
+}
+
+
 /* PageHeader-6EYWQXRE.css */
 /*
  * The head of a screen.
@@ -13041,82 +14333,279 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* RelativeTime-EBAQPGO2.css */
+/* ReadingPane-5UOLPWY5.css */
 /*
- * A relative time is text, so it takes the register around it. Its one rule is
- * tabular figures: the words change once a second, and proportional digits
- * would move whatever sits beside them on every tick.
+ * One item read in full, in one column.
+ *
+ * The pane is its own container, so the column narrows its margins when the
+ * PANE is narrow (beside a list on a small laptop, or alone on a phone)
+ * rather than when the window is.
  */
 
-.crewlet-relative-time {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
+.crewlet-reading-pane {
+  container: crewlet-reading-pane / inline-size;
+  min-width: 0;
 }
 
+.crewlet-reading-pane__column {
+  /* A question and its answers read best at about seventy characters a line. */
+  --crewlet-reading-pane-measure: 640px;
 
-/* SearchTrigger-KIZLWBEH.css */
-/*
- * A button drawn as the field it stands in for.
- *
- * 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.
- */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  max-width: var(--crewlet-reading-pane-measure);
+  margin: 0 auto;
+  padding: calc(var(--spacing-6) + var(--spacing-1)) calc(var(--spacing-6) + var(--spacing-1)) var(--spacing-8);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-primary);
+}
 
-.crewlet-search-trigger {
-  display: inline-flex;
+@container crewlet-reading-pane (width < 640px) {
+  .crewlet-reading-pane__column {
+    padding-inline: var(--spacing-4);
+  }
+}
+
+/* ---- The byline -------------------------------------------------------- */
+
+.crewlet-reading-pane__byline {
+  display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  /* 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);
+  min-width: 0;
+  margin: 0;
   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);
+.crewlet-reading-pane__start,
+.crewlet-reading-pane__leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
 }
 
-/*
- * 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-reading-pane__by {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
 }
 
-.crewlet-search-trigger:hover {
-  border-color: var(--color-border-hover);
+.crewlet-reading-pane__by strong {
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
 
-/* One ring, over the trigger's own boundary rather than 2px off it, which is
-   two edges with a gap between them: the rule every field keeps (see
+.crewlet-reading-pane__note {
+  color: var(--color-text-tertiary);
+}
+
+/* ---- The title and what it needs -------------------------------------- */
+
+.crewlet-reading-pane__title {
+  margin: 0;
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-snug);
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__lead {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__lead > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__quote > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__quote--verbatim {
+  padding: var(--spacing-2) var(--spacing-3);
+  border-left: 2px solid var(--color-border-strong);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  white-space: pre-wrap;
+}
+
+/* ---- The reasoning ----------------------------------------------------- */
+
+.crewlet-reading-pane__reasoning {
+  display: grid;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3) calc(var(--spacing-3) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-reading-pane__reasoning-title {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-reading-pane__reasoning-title strong {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-reading-pane__reasoning-body {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__reasoning-body > * {
+  margin: 0;
+}
+
+.crewlet-reading-pane__reasoning-footer {
+  margin-top: calc(var(--spacing-1) / 2);
+}
+
+/* ---- What the reader did ----------------------------------------------- */
+
+.crewlet-reading-pane__outcome {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-reading-pane__outcome-mark {
+  flex: none;
+}
+
+.crewlet-reading-pane__outcome strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+/* ---- A section after the answer ---------------------------------------- */
+
+.crewlet-reading-pane__section {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--spacing-3);
+  padding-top: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* The heading's own line box is the label's, so the label sits where it is drawn. */
+.crewlet-reading-pane__section-label {
+  margin: 0;
+  font: inherit;
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+}
+
+
+/* RelativeTime-EBAQPGO2.css */
+/*
+ * A relative time is text, so it takes the register around it. Its one rule is
+ * tabular figures: the words change once a second, and proportional digits
+ * would move whatever sits beside them on every tick.
+ */
+
+.crewlet-relative-time {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+
+/* SearchTrigger-KIZLWBEH.css */
+/*
+ * A button drawn as the field it stands in for.
+ *
+ * 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 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);
+  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);
+}
+
+/* One ring, over the trigger's own boundary rather than 2px off it, which is
+   two edges with a gap between them: the rule every field keeps (see
    Input.css). */
 .crewlet-search-trigger:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -13302,7 +14791,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* SegmentedControl-76HODRBT.css */
+/* SegmentedControl-PKBLJVSA.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -13464,6 +14953,24 @@ svg.crewlet-datetime__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * EQUAL SHARES. The row fills the width it is given and every option takes
+ * an equal column of it, so two settings stacked in one panel draw one box.
+ * Two classes, for the reason the card row gives: the pill's own rules size
+ * the row to its content.
+ */
+.crewlet-tabs.crewlet-segmented--fill {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  width: 100%;
+}
+
+.crewlet-segmented--fill .crewlet-segmented__option {
+  justify-content: center;
+  min-width: 0;
+}
+
 
 /* SegmentedMeter-KQNML2TW.css */
 /*
@@ -13577,7 +15084,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Select-4ANVLHUY.css */
+/* Select-2P7AWUE4.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -13587,9 +15094,12 @@ svg.crewlet-datetime__chevron {
  * into the nearest layer host and drawn with the shared listbox register, so
  * a list of options looks the same wherever it is offered from.
  *
- * The boundary is --color-border-control, like every other control: the
- * hairline measured 1.27:1 in light, which is a box a reader has to know is
- * there already.
+ * THE BOUNDARY IS A BUTTON'S, --color-border-strong, the secondary button's
+ * and the date and time-window pickers'. A picker shows its value and its
+ * chevron, and those are what a reader knows it by. --color-border-control,
+ * at 3:1, is for the controls whose outline IS the control (a text box, a
+ * checkbox, a switch; see Input.css): on a picker it drew the one bright box
+ * in a row of buttons and switchers, brighter at rest than under the pointer.
  */
 
 .crewlet-select {
@@ -13607,7 +15117,7 @@ svg.crewlet-datetime__chevron {
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -13628,7 +15138,7 @@ svg.crewlet-datetime__chevron {
 }
 
 .crewlet-select:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -13777,7 +15287,7 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-height: var(--crewlet-select-menu-max-height);
+  max-height: min(var(--crewlet-select-menu-max-height), 60vh);
   /*
    * THE PANEL IS THE PRODUCT'S SURFACE, on the panel hairline, at the panel
    * corner. A list offered from a field is another panel over the one the
@@ -13804,11 +15314,25 @@ svg.crewlet-select__chevron {
   position: absolute;
 }
 
+/*
+ * THE PANEL'S HEIGHT IS THE LIST'S. The shared listbox register caps a list
+ * at min(360px, 60vh) on its own, which inside this panel made
+ * `--crewlet-select-menu-max-height` a promise it could not keep past 360px:
+ * a taller panel drew the same short list and scrolled it. Here the list
+ * fills what the panel allows, and the panel keeps the register's cap on the
+ * window (see `.crewlet-select__menu`).
+ */
 .crewlet-select__list {
   flex: 1;
   min-height: 0;
 }
 
+/* Scoped to the panel for the weight, as the option rules below are: the
+   register's cap is one class, and the bundle orders equal weights by hash. */
+.crewlet-select__menu .crewlet-select__list {
+  max-height: none;
+}
+
 .crewlet-select__group {
   display: flex;
   flex-direction: column;
@@ -13870,6 +15394,15 @@ svg.crewlet-select__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * AT THE ROW'S END in a list whose rows lead with a mark (see `tickAtEnd`),
+ * so the mark starts at the panel's edge. After a hint it follows the hint,
+ * which already takes the free space; without one it takes it itself.
+ */
+.crewlet-select__option-body + .crewlet-select__option-tick--end {
+  margin-left: auto;
+}
+
 .crewlet-select__option-body {
   display: flex;
   flex-direction: column;
@@ -13877,6 +15410,30 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/*
+ * WHAT AN OPTION DRAWS BEFORE ITS LABEL (a swatch, an avatar, a glyph),
+ * centred on the label's first line rather than on the row, so a row with a
+ * second line keeps its mark beside the words it belongs to. The same slot on
+ * the trigger, while that option is the one chosen, sits on the value's line.
+ */
+.crewlet-select__option-leading,
+.crewlet-select__leading {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+
+.crewlet-select__option-leading {
+  min-height: calc(var(--font-line-height-normal) * 1em);
+}
+
+/* A hint ends the row's FIRST line, on the label's baseline, rather than
+   sitting on the row's top edge at its own smaller size. */
+.crewlet-select__option:has(> .crewlet-listbox__hint) .crewlet-select__option-body,
+.crewlet-select__option > .crewlet-listbox__hint {
+  align-self: baseline;
+}
+
 /*
  * ONE LINE, WHICH IS WHAT THE ELLIPSIS BELOW WAS ALWAYS FOR. `overflow:
  * hidden` clips what leaves the box and `text-overflow` replaces what a LINE
@@ -13964,7 +15521,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-X5NLZNWA.css */
+/* SidebarNav-KF66MLOM.css */
 /*
  * The rail's navigation.
  *
@@ -14230,26 +15787,11 @@ svg.crewlet-select__chevron {
 
 /*
  * 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.
+ * the project is filed under, in mono so ENG and PROD line up by letter. The
+ * chip is the kit's `KeyChip` (KeyChip.css); the suite below measures its ink
+ * on every ground a row can have, and on the reader's own row, which is raised
+ * too, its 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
@@ -15647,36 +17189,385 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Table-TGCS4C3F.css */
+/* Switcher-B44Q4WF4.css */
 /*
- * Table: the operator's table, on the elements a table is made of.
+ * The switcher: a button that is the page's name, and a banded panel under it
+ * (a search band, a list that scrolls, and a footer that does not).
  *
- * ONE TABLE REGISTER FOR THE WHOLE PRODUCT, and this is it: a micro-label
- * header on the panel's own ground, hairline rows, cells at the compact step,
- * and a row as tall as the row token every other list in the system uses. The
- * DataTable below carries the same values; the two differ in what they DO
- * (sorting, columns, pagination), never in what a row looks like.
+ * The rows are the listbox register (`Listbox.css`), because a project in this
+ * list and a result in the command palette are read the same way, and the
+ * raised row that marks where the arrows are must mean the same in both. What
+ * this adds is the switcher's own: a lead column every row's key lines up in,
+ * the current subject outlined in the accent, and a held row that keeps its
+ * reason without a hover.
  */
-.crewlet-table {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  /*
-   * THE FRAME IS THE TABLE'S, NOT THE SCROLLER'S. The boundary and the radius
-   * used to sit on the scroller inside, which put the action row underneath
-   * the frame as a loose word on the page, and let a sideways scroll carry the
-   * table's own edge out of view. Here the frame clips a header band that runs
-   * to the edge and a foot that is fenced from the rows above it, which is the
-   * flush panel every table on the dashboard sits in.
-   */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
+
+.crewlet-switcher {
+  /* The panel's own measures: a width that holds a key, a long name and a
+     count, and a height that holds eight projects with Recent above them
+     without scrolling. */
+  --crewlet-switcher-width: 360px;
+  --crewlet-switcher-max-height: 520px;
+  --crewlet-switcher-lead: 52px;
 }
 
-.crewlet-table__container {
+/* ── The button ─────────────────────────────────────────────────────────── */
+
+/*
+ * THE PAGE'S NAME, WITH NO BOX AT REST. It is the heading of the page as much
+ * as it is a control, so it reads as text in the trail until the pointer
+ * reaches it; the fill appears under the pointer and stays while the panel is
+ * open, and the chevron turns. The name takes the cut, never the key or the
+ * chevron.
+ */
+.crewlet-switcher-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  min-width: 0;
+  max-width: 100%;
+  height: var(--size-row-sm);
+  padding: 0 var(--spacing-1) 0 calc(var(--spacing-1) * 1.5);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-switcher-trigger:hover,
+.crewlet-switcher-trigger[aria-expanded='true'] {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-switcher-trigger:active {
+  background: var(--color-surface-pressed);
+}
+
+/* Inside the button's own edge, so the trail's scrollport never clips it. */
+.crewlet-switcher-trigger:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-switcher-trigger__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-switcher-trigger.is-mono .crewlet-switcher-trigger__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-switcher-trigger .crewlet-key-chip,
+.crewlet-switcher-trigger__tag {
+  display: inline-flex;
+  flex: none;
+}
+
+svg.crewlet-switcher-trigger__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transition:
+    transform var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-switcher-trigger:hover svg.crewlet-switcher-trigger__chevron {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-switcher-trigger[aria-expanded='true'] svg.crewlet-switcher-trigger__chevron {
+  color: var(--color-text-secondary);
+  transform: rotate(180deg);
+}
+
+/* ── The three surfaces ─────────────────────────────────────────────────── */
+
+/*
+ * ANCHORED: the popover's own surface (the subtle rung, the default hairline,
+ * the large corner and the deepest shadow) at the switcher's size. The bands
+ * lay themselves out inside it, so the panel itself does not scroll.
+ */
+.crewlet-popover.crewlet-switcher {
+  display: flex;
+  flex-direction: column;
+  width: var(--crewlet-switcher-width);
+  min-width: 0;
+  max-width: calc(100vw - var(--spacing-4));
+  max-height: min(var(--crewlet-switcher-max-height), calc(100dvh - var(--spacing-10) - var(--spacing-4)));
+  overflow: hidden;
+}
+
+/*
+ * CENTRED: the same panel as a dialog, a step lower than a dialog stands so
+ * it clears the page's bar, arriving at the popover's pace rather than a
+ * dialog's, because it is the same panel opened from somewhere else.
+ */
+.crewlet-modal.crewlet-switcher--centered {
+  --crewlet-modal-width: var(--crewlet-switcher-width);
+
+  max-height: min(var(--crewlet-switcher-max-height), calc(100dvh - var(--spacing-10) - var(--spacing-6)));
+  margin-top: var(--spacing-2);
+  animation-duration: var(--motion-duration-base);
+}
+
+/* A SHEET carries a grab handle over its title, which says it came from the
+   edge it is pinned to. Decoration: the close control is what closes it. */
+.crewlet-modal.crewlet-switcher--sheet::before {
+  content: '';
+  flex: none;
+  width: calc(var(--spacing-7) + var(--spacing-1));
+  height: var(--spacing-1);
+  margin: var(--spacing-2) auto 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-border-strong);
+}
+
+.crewlet-switcher--sheet .crewlet-modal__header {
+  min-height: var(--size-control-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+}
+
+/* A dialog's body scrolls its whole content; here the list alone scrolls. */
+.crewlet-switcher .crewlet-modal__body {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.crewlet-switcher__panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* ── The search band ────────────────────────────────────────────────────── */
+
+/*
+ * The field with no box of its own, as the command palette draws it: the band
+ * is the field. It is set at the trail's size rather than the palette's
+ * headline size, because the panel is a list read at a glance, and at the
+ * reading size on a phone, where a smaller field zooms the page when tapped.
+ */
+.crewlet-input.crewlet-switcher__search {
+  flex-shrink: 0;
+  min-height: var(--size-control-lg);
+  padding-inline: var(--spacing-3) var(--spacing-2);
+  border: none;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+}
+
+.crewlet-input.crewlet-switcher__search .crewlet-input__control {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-switcher--sheet .crewlet-input.crewlet-switcher__search .crewlet-input__control {
+  font-size: var(--font-size-md);
+}
+
+/* ── The list ───────────────────────────────────────────────────────────── */
+
+.crewlet-switcher__scroller {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+  scrollbar-width: thin;
+}
+
+.crewlet-switcher__list {
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+ * A ROW: a lead column, the name, and a figure at the end. Both classes are
+ * named so this ties with nothing in `Listbox.css`, whose rows are a step
+ * shorter and padded on every side.
+ */
+.crewlet-listbox__option.crewlet-switcher__option {
+  gap: 0;
+  min-height: var(--size-row-md);
+  padding-block: 0;
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+}
+
+.crewlet-switcher--sheet .crewlet-listbox__option.crewlet-switcher__option {
+  min-height: var(--size-control-lg);
+  font-size: var(--font-size-sm);
+}
+
+/*
+ * THE CURRENT SUBJECT, outlined by its own accent hairline inside the row: an
+ * outline rather than a shadow, so forced-colours mode keeps it. The row the
+ * arrows are on takes the raised fill as every listbox row does; both can land
+ * on one row, and it never gains a second border.
+ */
+.crewlet-listbox__option.crewlet-switcher__option.is-current {
+  color: var(--color-text-primary);
+  outline: 1px solid var(--color-brand-accent);
+  outline-offset: -1px;
+}
+
+/* A HELD ROW answers no pointer: no fill under it, and the reason in the quiet
+   ink at its end says why. */
+.crewlet-listbox__option.crewlet-switcher__option[aria-disabled='true'] {
+  background: transparent;
+  color: var(--color-text-tertiary);
+}
+
+/* Every row's key starts on one line, whatever the key's length. */
+.crewlet-switcher__lead {
+  display: flex;
+  flex: none;
+  align-items: center;
+  width: var(--crewlet-switcher-lead);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-switcher__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The letters a search matched: the weight carries it, in the primary ink. */
+b.crewlet-switcher__match {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-switcher__meta {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: calc(var(--spacing-1) * 1.5);
+  margin-left: var(--spacing-3);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* A group's heading carries its count at its end. */
+.crewlet-switcher__heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.crewlet-switcher__count {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: normal;
+}
+
+/* A line about the list itself, on the inset rung: not a row, so not a row's
+   shape. */
+.crewlet-switcher__note {
+  margin: calc(var(--spacing-1) * 1.5) var(--spacing-2) var(--spacing-1);
+  padding: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+/* A state of the list, said in two lines, with its actions as rows under it. */
+.crewlet-switcher__message {
+  display: grid;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-3) var(--spacing-2);
+}
+
+.crewlet-switcher__message-title {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-switcher__message-body {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+/* Placeholder rows the shape of the rows on their way. */
+.crewlet-switcher__skeleton-row {
+  display: flex;
+  align-items: center;
+  height: var(--size-row-md);
+  padding: 0 var(--spacing-3);
+}
+
+.crewlet-switcher__skeleton-row > .crewlet-switcher__meta {
+  margin-left: auto;
+}
+
+/* ── The footer ─────────────────────────────────────────────────────────── */
+
+.crewlet-switcher__footer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  padding: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-switcher-trigger {
+    transition: none;
+  }
+
+  svg.crewlet-switcher-trigger__chevron {
+    transition: none;
+  }
+}
+
+
+/* Table-TGCS4C3F.css */
+/*
+ * Table: the operator's table, on the elements a table is made of.
+ *
+ * ONE TABLE REGISTER FOR THE WHOLE PRODUCT, and this is it: a micro-label
+ * header on the panel's own ground, hairline rows, cells at the compact step,
+ * and a row as tall as the row token every other list in the system uses. The
+ * DataTable below carries the same values; the two differ in what they DO
+ * (sorting, columns, pagination), never in what a row looks like.
+ */
+.crewlet-table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  /*
+   * THE FRAME IS THE TABLE'S, NOT THE SCROLLER'S. The boundary and the radius
+   * used to sit on the scroller inside, which put the action row underneath
+   * the frame as a loose word on the page, and let a sideways scroll carry the
+   * table's own edge out of view. Here the frame clips a header band that runs
+   * to the edge and a foot that is fenced from the rows above it, which is the
+   * flush panel every table on the dashboard sits in.
+   */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.crewlet-table__container {
   /* The overflow is a safety net for a cell that cannot wrap (a long token, a
      hash); the fixed layout below is what keeps a table inside the width it is
      given. A `maxHeight` gives it something to scroll vertically, which is
@@ -15819,7 +17710,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-5I5Q5KKM.css */
+/* Tabs-ITJYJFMU.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -16122,8 +18013,57 @@ svg.crewlet-select__chevron {
   outline-offset: 0;
 }
 
-.crewlet-tabs__tab.is-disabled,
-.crewlet-tabs__tab:disabled {
+/* ─── Chip (a lens row) ───────────────────────────────────────── */
+/*
+ * QUIET CHIPS WITH NO WELL: the lenses of an object or a scope, set beside its
+ * name in a page's bar. A well round them was a second box beside the name the
+ * lenses are about, and a raised chip inside it a second highlight. Here the
+ * chip that is on is drawn by its own border in the accent and nothing else,
+ * which is the kit's one way of saying "this one is chosen".
+ */
+.crewlet-tabs--chip {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing-1) / 2);
+}
+
+.crewlet-tabs--chip .crewlet-tabs__tab {
+  min-height: var(--size-control-sm);
+  padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-tabs--chip .crewlet-tabs__tab:hover:not(.is-disabled):not(.is-active) {
+  background: var(--color-surface-hover);
+}
+
+/* A COUNT IS A QUIET FIGURE here, not a pill: a pill inside a chip is a box
+   inside a box, beside a name that already has its own. */
+.crewlet-tabs--chip .crewlet-count {
+  min-width: 0;
+  padding: 0;
+  background: none;
+}
+
+/* An outline rather than a border, so a chip turning on does not move its
+   neighbours by a pixel, and forced-colors mode keeps it. */
+.crewlet-tabs--chip .crewlet-tabs__tab.is-active {
+  color: var(--color-text-primary);
+  outline: 1px solid var(--color-brand-accent);
+  outline-offset: -1px;
+}
+
+/* THE RING TAKES THE BORDER'S PLACE: declared after it and of the same
+   weight, so a focused chip that is on draws one edge, the ring. */
+.crewlet-tabs--chip .crewlet-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -2px;
+}
+
+.crewlet-tabs__tab.is-disabled,
+.crewlet-tabs__tab:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
@@ -16849,200 +18789,556 @@ svg.crewlet-select__chevron {
   color: var(--color-text-primary);
 }
 
-.crewlet-tags-input__list .crewlet-listbox__option.is-highlight,
-.crewlet-tags-input__list .crewlet-listbox__option:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
+.crewlet-tags-input__list .crewlet-listbox__option.is-highlight,
+.crewlet-tags-input__list .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The tick column, which holds its width whether or not a row is chosen, so
+   the labels line up down the list. */
+.crewlet-tags-input__option-tick {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-tags-input__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tags-input__box {
+    transition: none;
+  }
+}
+
+
+/* Text-XIPYYZX2.css */
+/*
+ * The type registers, one rule each.
+ *
+ * Every register states its size, its weight, its tracking and its ink
+ * together, because those move as one: a caption is not "body, smaller", it is
+ * a different job. The ink a register sets is its default, and the tone
+ * modifiers below override it, so they are declared after.
+ */
+
+.crewlet-text {
+  min-width: 0;
+}
+
+.crewlet-text--display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--stat {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--heading {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  /* The tight step, which is the one every heading in the product is set on.
+     Two tracking values across two heading registers is how a card title and
+     the section title above it stop looking like one family. */
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--lead {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--body {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--cell {
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+/*
+ * Metadata: the tertiary step rather than the decoration one. A caption is
+ * read, not glanced at, so it carries the 4.5:1 ink.
+ */
+.crewlet-text--caption {
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE one micro-label register, declared once and never overridden. The system
+ * this replaces declared it once and then redeclared it in six selectors with
+ * six different tracking values.
+ */
+.crewlet-text--label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-text--tone-primary {
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--tone-secondary {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-text--tone-tertiary {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-text--mono {
+  font-family: var(--font-family-mono);
+  /*
+   * An identifier is read character by character, so a ligature that joins two
+   * of them into one drawing is a drawing of something the reader did not
+   * type.
+   */
+  font-variant-ligatures: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-text--numeric {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+.crewlet-text--truncate {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.crewlet-text--clamp-2,
+.crewlet-text--clamp-3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.crewlet-text--clamp-2 {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.crewlet-text--clamp-3 {
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+
+/*
+ * A measure is a maximum, never a width: a bounded block still shrinks with
+ * the column it sits in.
+ */
+.crewlet-text--measure-normal {
+  display: block;
+  max-width: var(--size-measure);
+}
+
+.crewlet-text--measure-narrow {
+  display: block;
+  max-width: var(--size-measure-narrow);
+}
+
+
+/* ThemeGallery-NITASULQ.css */
+/*
+ * The gallery of themes: each group's heading over a grid of cards.
+ *
+ * A ROW HOLDS THE SAME NUMBER OF CARDS IN EVERY GROUP (`columns`, three by
+ * default), so a group of one draws a card the size of every other card
+ * rather than one stretched across the row, and the swatches line up from
+ * group to group.
+ */
+
+.crewlet-theme-gallery__groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.crewlet-theme-gallery__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.crewlet-theme-gallery__heading {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-theme-gallery__cards {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-theme-gallery-columns), minmax(0, 1fr));
+  gap: var(--spacing-2);
+}
+
+/*
+ * A CARD IS ITS BORDER. Resting, the plain hairline; under the pointer, the
+ * strong one; chosen, the accent. One line round the card in every state, so
+ * the chosen card is never a card inside a frame.
+ */
+.crewlet-theme-gallery__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* Not on the chosen card: under the pointer it keeps the accent, or the one
+   card that says "this one" would stop saying it while it is being pointed at. */
+.crewlet-theme-gallery__card:hover:not(:disabled):not(.is-chosen) {
+  border-color: var(--color-border-strong);
+}
+
+.crewlet-theme-gallery__card.is-chosen {
+  border-color: var(--color-brand-accent);
+}
+
+/* The ring is drawn OVER the border, inset by its width, never a second line outside it. */
+.crewlet-theme-gallery__card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+.crewlet-theme-gallery__card:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.crewlet-theme-gallery__name {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * FORCED COLORS keeps the border and drops the accent, so the chosen card
+ * would look like every other; the system's own selected colour says it.
+ */
+@media (forced-colors: active) {
+  .crewlet-theme-gallery__card.is-chosen {
+    border-color: Highlight;
+    border-width: 2px;
+  }
+}
+
+
+/* ThemeSwatch-4DL457ZB.css */
+/*
+ * A theme's thumbnail.
+ *
+ * EVERY COLOUR IS THE THEME'S OWN, from the custom properties ThemeSwatch sets
+ * on each half (--crewlet-swatch-*), and none is the page's except the
+ * outline, which is the page's hairline because the page is where the
+ * thumbnail sits. Two halves share the box equally: dark, then light.
+ *
+ * IT IS A PICTURE, so forced-colors mode leaves it alone: repainted to the
+ * system's two colours, every theme would draw the same blank box.
+ */
+
+.crewlet-theme-swatch {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  flex: none;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  forced-color-adjust: none;
+}
+
+.crewlet-theme-swatch--chip {
+  width: 26px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-theme-swatch--card {
+  width: 100%;
+  height: 38px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch--pane {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--radius-md);
+}
+
+.crewlet-theme-swatch__half {
+  display: grid;
+  grid-template-columns: 26% minmax(0, 1fr);
+  min-width: 0;
+  background: var(--crewlet-swatch-frame);
+}
+
+/* ── The chip: each palette's frame, with its accent on it ────────────── */
+
+.crewlet-theme-swatch--chip .crewlet-theme-swatch__half {
+  grid-template-columns: none;
+  place-items: center;
+}
+
+.crewlet-theme-swatch__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+  background: var(--crewlet-swatch-accent);
+}
+
+/* ── The card: a rail, a sheet, a card on it ──────────────────────────── */
+
+.crewlet-theme-swatch__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 6px 4px;
+  min-width: 0;
+}
+
+.crewlet-theme-swatch__rail-row {
+  display: block;
+  width: 80%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
 }
 
-/* The tick column, which holds its width whether or not a row is chosen, so
-   the labels line up down the list. */
-.crewlet-tags-input__option-tick {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  color: var(--color-brand-accent-ink);
+/* The row the reader is on stands on the raised rung, as the rail draws it. */
+.crewlet-theme-swatch__rail-row.is-current {
+  width: 100%;
+  height: 6px;
+  background: var(--crewlet-swatch-raised);
 }
 
-.crewlet-tags-input__option-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.crewlet-theme-swatch__sheet {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 3px 3px 3px 0;
+  padding: 3px;
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-sheet);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-tags-input__box {
-    transition: none;
-  }
+.crewlet-theme-swatch__card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 4px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
 }
 
+.crewlet-theme-swatch__line {
+  display: block;
+  width: 60%;
+  height: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
 
-/* Text-XIPYYZX2.css */
 /*
- * The type registers, one rule each.
- *
- * Every register states its size, its weight, its tracking and its ink
- * together, because those move as one: a caption is not "body, smaller", it is
- * a different job. The ink a register sets is its default, and the tone
- * modifiers below override it, so they are declared after.
+ * THE ACTION GIVES WAY BEFORE IT DISAPPEARS. A narrow thumbnail has less room
+ * than the action and the four states take, so the action narrows to a floor
+ * and the row clips its last states, rather than the action, which is what a
+ * theme is chosen for, shrinking to nothing.
  */
-
-.crewlet-text {
-  min-width: 0;
+.crewlet-theme-swatch__row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
 }
 
-.crewlet-text--display {
-  font-family: var(--font-family-display);
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-tight);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-primary);
+/* The primary action: the accent's fill. */
+.crewlet-theme-swatch__action {
+  display: block;
+  flex: 0 1 14px;
+  min-width: 6px;
+  height: 6px;
+  margin-right: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-accent);
 }
 
-.crewlet-text--stat {
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-tight);
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-primary);
+/* The four states, in the order the kit names them. */
+.crewlet-theme-swatch__state {
+  display: block;
+  flex: none;
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-circle);
 }
 
-.crewlet-text--heading {
-  font-family: var(--font-family-display);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  /* The tight step, which is the one every heading in the product is set on.
-     Two tracking values across two heading registers is how a card title and
-     the section title above it stop looking like one family. */
-  letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-snug);
-  color: var(--color-text-primary);
-}
+.crewlet-theme-swatch__state--info { background: var(--crewlet-swatch-info); }
+.crewlet-theme-swatch__state--warning { background: var(--crewlet-swatch-warning); }
+.crewlet-theme-swatch__state--danger { background: var(--crewlet-swatch-danger); }
+.crewlet-theme-swatch__state--success { background: var(--crewlet-swatch-success); }
 
-.crewlet-text--lead {
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--font-line-height-normal);
-  color: var(--color-text-primary);
-}
+/* ── The pane: the same sketch, large enough to read as a screen ───────── */
 
-.crewlet-text--body {
-  font-size: var(--font-size-sm);
-  line-height: var(--font-line-height-normal);
-  color: var(--color-text-primary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__half {
+  grid-template-columns: 26% minmax(0, 1fr);
 }
 
-.crewlet-text--cell {
-  font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-snug);
-  color: var(--color-text-primary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail {
+  gap: 7px;
+  padding: 12px 8px;
 }
 
-/*
- * Metadata: the tertiary step rather than the decoration one. A caption is
- * read, not glanced at, so it carries the 4.5:1 ink.
- */
-.crewlet-text--caption {
-  font-size: var(--font-size-xs);
-  line-height: var(--font-line-height-snug);
-  color: var(--color-text-tertiary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row {
+  height: 5px;
 }
 
-/*
- * THE one micro-label register, declared once and never overridden. The system
- * this replaces declared it once and then redeclared it in six selectors with
- * six different tracking values.
- */
-.crewlet-text--label {
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--font-letter-spacing-wide);
-  line-height: var(--font-line-height-snug);
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row.is-current {
+  height: 12px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
 }
 
-.crewlet-text--tone-primary {
-  color: var(--color-text-primary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__sheet {
+  gap: 8px;
+  margin: 6px 6px 6px 0;
+  padding: 10px;
+  border-radius: var(--radius-sm);
 }
 
-.crewlet-text--tone-secondary {
-  color: var(--color-text-secondary);
+.crewlet-theme-swatch__title {
+  display: block;
+  flex: none;
+  width: 40%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
 }
 
-.crewlet-text--tone-tertiary {
-  color: var(--color-text-tertiary);
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__card {
+  flex: none;
+  gap: 7px;
+  justify-content: flex-start;
+  padding: 8px;
 }
 
-.crewlet-text--mono {
-  font-family: var(--font-family-mono);
-  /*
-   * An identifier is read character by character, so a ligature that joins two
-   * of them into one drawing is a drawing of something the reader did not
-   * type.
-   */
-  font-variant-ligatures: none;
-  font-variant-numeric: tabular-nums;
+.crewlet-theme-swatch__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.crewlet-text--numeric {
-  font-variant-numeric: tabular-nums;
-  font-feature-settings: 'tnum' 1;
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__state {
+  width: 6px;
+  height: 6px;
 }
 
-.crewlet-text--truncate {
-  display: inline-block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: bottom;
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__line {
+  width: 45%;
+  height: 4px;
 }
 
-.crewlet-text--clamp-2,
-.crewlet-text--clamp-3 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.crewlet-theme-swatch__muted {
+  display: block;
+  width: 18%;
+  height: 4px;
+  margin-left: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
 }
 
-.crewlet-text--clamp-2 {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
+.crewlet-theme-swatch__actions {
+  display: flex;
+  gap: 6px;
+  margin-top: auto;
 }
 
-.crewlet-text--clamp-3 {
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__action {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 40%;
+  height: 16px;
+  margin-right: 0;
+  border-radius: var(--radius-xs);
 }
 
-/*
- * A measure is a maximum, never a width: a bounded block still shrinks with
- * the column it sits in.
- */
-.crewlet-text--measure-normal {
+/* The primary action's label, in the colour the theme labels its accent with. */
+.crewlet-theme-swatch__label {
   display: block;
-  max-width: var(--size-measure);
+  width: 50%;
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-on-accent);
 }
 
-.crewlet-text--measure-narrow {
+.crewlet-theme-swatch__secondary {
   display: block;
-  max-width: var(--size-measure-narrow);
+  width: 26%;
+  height: 16px;
+  border: 1px solid var(--crewlet-swatch-hairline);
+  border-radius: var(--radius-xs);
+  background: var(--crewlet-swatch-card);
 }
 
 
-/* TimeWindowPicker-GBF4JDFI.css */
+/* TimeWindowPicker-BZ5HHATU.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
- * The trigger takes the same geometry as a Select and a DateTimePicker, so the
- * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * The trigger takes the same geometry and button boundary as a Select and a
+ * DateTimePicker (--color-border-strong; see Select.css), so the three line
+ * up in a filter bar. The panel is a RAIL of named windows beside
  * the calendars, rather than two tabs with one of them hidden: the windows a
  * reader picks by name are the road, and the absolute range is the turning off
  * it, so both are on screen at once and each shows what the other chose.
@@ -17057,7 +19353,7 @@ svg.crewlet-select__chevron {
   /* The side inset only: see DateTimePicker's own trigger. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -17074,7 +19370,7 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-time-window:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -17603,102 +19899,102 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-NVDCEIP5.css */
+/* Toaster-VZKISP2S.css */
 /*
- * The toast stack.
+ * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
+ * on the page's deepest ground with the large shadow and the rim light, a
+ * 12px corner, the variant said by its mark alone, never a flood of its hue,
+ * and the countdown as a wash behind the words that drains from the right.
  *
- * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
- * black, which is a dark strip whatever palette is painting: on a light page
- * the toast's own text measured 1.56:1 against it.
+ * IN TOKENS RATHER THAN ITS LITERALS, so it follows every theme. The strip is
+ * --color-surface-background: the first release mixed the panel with black,
+ * which read as a dark bar on a light page, where its words measured 1.56:1.
+ * The marks are the feedback INK steps, the soft moss, amber and rose it drew,
+ * measured as text on every theme. The washes are the feedback SOFT steps.
  *
- * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
- * layer under the message is a composite nothing measured, and it moves while
- * the message is being read; a 2px bar at the edge says the same thing and
- * touches no text at all. It is decoration either way: the dismissal is a
- * timer now, so a reader who asks for reduced motion still gets the toast
- * taken away.
+ * The wash is decoration: the dismissal is a timer, so a reader who asks for
+ * reduced motion gets no wash and still gets the toast taken away.
  */
-
 .crewlet-toaster {
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
-  /* The engine's 420px, held under the viewport at the width a phone has.
-     The strip is one or two lines of 13px text and an action; at 380 the
-     commonest failure message wrapped onto a third. */
-  width: min(420px, calc(100vw - var(--spacing-9)));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-4);
-  right: var(--spacing-4);
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-4);
-  right: var(--spacing-4);
+  top: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-4);
-  left: var(--spacing-4);
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-4);
-  left: var(--spacing-4);
+  top: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toast {
+  /* The mark and the wash are the two places a variant spends its hue. */
   --crewlet-toast-mark: var(--color-text-secondary);
-  /*
-   * The boundary and the two inks are variables so a tone can spend them. Only
-   * one does: a failure, which is the engine's one toned strip.
-   */
-  --crewlet-toast-line: var(--color-border-default);
-  --crewlet-toast-ink: var(--color-text-primary);
-  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+  --crewlet-toast-wash: var(--color-surface-pressed);
+  /* 14px at the normal density, and the corner the dismiss sits in beside it. */
+  --crewlet-toast-inset: calc(var(--spacing-3) + var(--spacing-1) / 2);
 
   pointer-events: auto;
   position: relative;
   display: flex;
   align-items: flex-start;
-  /* The panel's own gap and padding, and the panel's own surface: the engine
-     draws a toast as a small panel that happens to float, so it sits on the
-     same ground, the same hairline and the same corner as everything the
-     screen behind it is made of. */
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--crewlet-toast-line);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  color: var(--crewlet-toast-ink);
+  gap: var(--spacing-3);
+  padding: var(--crewlet-toast-inset) calc(var(--spacing-7) + var(--spacing-1) * 1.5) var(--crewlet-toast-inset)
+    var(--crewlet-toast-inset);
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  /* The large shadow and the rim light, both from tokens that are a shadow in
+     every palette: --shadow-hairline is `none` in light, and a `none` inside a
+     list drops the whole declaration. */
+  box-shadow: var(--shadow-xl), var(--shadow-rim-lit);
+  color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   letter-spacing: var(--font-letter-spacing-snug);
   overflow: hidden;
-  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+  animation: crewlet-toast-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
 @keyframes crewlet-toast-in {
   from {
     opacity: 0;
-    transform: translateY(6px);
+    transform: translateX(var(--spacing-4));
   }
-
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
+/* The words sit over the wash: every child is raised, and the dismiss and the
+   wash below take their own places back. */
+.crewlet-toast > * {
+  position: relative;
+  z-index: var(--z-index-raised);
+}
+
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
@@ -17706,34 +20002,26 @@ svg.crewlet-time-window__tick {
   color: var(--crewlet-toast-mark);
 }
 
-/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
-   words beside it stay in the primary ink: a coloured sentence on a coloured
-   strip is the pair that has to be measured, and this one does not exist. */
+/*
+ * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
+ * and the edge stays the hairline, so a failure is a rose mark on a faint rose
+ * wash rather than a red strip: the outcome is said by the glyph and the title,
+ * and the sentence beside them is read in the ink every sentence is read in.
+ * Information is the neutral mark on the neutral wash.
+ */
 .crewlet-toast--success {
-  --crewlet-toast-mark: var(--color-feedback-success);
+  --crewlet-toast-mark: var(--color-feedback-success-ink);
+  --crewlet-toast-wash: var(--color-feedback-success-soft);
 }
 
 .crewlet-toast--warning {
-  --crewlet-toast-mark: var(--color-feedback-warning);
+  --crewlet-toast-mark: var(--color-feedback-warning-ink);
+  --crewlet-toast-wash: var(--color-feedback-warning-soft);
 }
 
-/*
- * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
- * confirmation and the one that does not take itself away, so the engine gives
- * it the hue twice: the fill step on the edge, where 3:1 is the floor a
- * boundary has to clear, and the INK step on every word, which is the measured
- * text pair on this surface. Never the fill behind a word: that is the swap
- * the whole soft-and-ink split exists to stop.
- */
 .crewlet-toast--danger {
-  --crewlet-toast-mark: var(--color-feedback-danger);
-  --crewlet-toast-line: var(--color-feedback-danger);
-  --crewlet-toast-ink: var(--color-feedback-danger-ink);
-  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
-}
-
-.crewlet-toast--info {
-  --crewlet-toast-mark: var(--color-feedback-info);
+  --crewlet-toast-mark: var(--color-feedback-danger-ink);
+  --crewlet-toast-wash: var(--color-feedback-danger-soft);
 }
 
 /* A usage limit notice is the application's own variant: it paints the glyph
@@ -17755,12 +20043,12 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-toast__message {
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
 }
 
 .crewlet-toast__actions {
-  margin-top: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
   display: flex;
   gap: var(--spacing-2);
 }
@@ -17792,10 +20080,12 @@ svg.crewlet-time-window__tick {
   border-color: var(--color-brand-accent-hover);
 }
 
+/* A failure's one filled thing is the way out of it. */
 .crewlet-toast--danger .crewlet-toast__action-btn,
 .crewlet-toast--danger .crewlet-toast__action-link {
   background: var(--color-feedback-danger);
   border-color: var(--color-feedback-danger);
+  color: var(--color-text-on-danger);
 }
 
 .crewlet-toast--danger .crewlet-toast__action-btn:hover,
@@ -17812,8 +20102,9 @@ svg.crewlet-time-window__tick {
 }
 
 /* The dismiss sits absolute in the corner so a multi-line message flows
-   under it rather than around it. 24px square: the smallest target
-   WCAG 2.2 accepts. */
+   under it rather than around it, and after the body in the document, so it
+   is drawn over the words at the same raised step. 24px square: the smallest
+   target WCAG 2.2 accepts. */
 .crewlet-toast__dismiss {
   position: absolute;
   top: var(--spacing-2);
@@ -17827,10 +20118,7 @@ svg.crewlet-time-window__tick {
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  /* The strip's own quiet ink rather than the neutral tertiary step, so the
-     close on a failure is part of the failure rather than the one grey thing
-     inside it. */
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-tertiary);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -17838,25 +20126,28 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-toast__dismiss:hover {
-  background: var(--color-surface-hover);
-  color: var(--crewlet-toast-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
 }
 
+/*
+ * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
+ * whole strip, draining from the right as the time runs out. It sits under
+ * every raised child, and it is the timer's picture, not the timer.
+ */
 .crewlet-toast__progress {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
+  inset: 0;
+  z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-mark);
+  background: var(--crewlet-toast-wash);
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-/* Paused by the class rather than by :hover, so the bar and the timer that
+/* Paused by the class rather than by :hover, so the wash and the timer that
    actually dismisses are stopped by the same event. */
 .crewlet-toast__progress.is-paused {
   animation-play-state: paused;
@@ -17866,7 +20157,6 @@ svg.crewlet-time-window__tick {
   from {
     transform: scaleX(1);
   }
-
   to {
     transform: scaleX(0);
   }
@@ -17892,8 +20182,8 @@ svg.crewlet-time-window__tick {
 
 /*
  * The strip still arrives and still goes; it just does not slide, and the
- * countdown bar holds still. The timer is untouched: a reader who asked for
- * less motion did not ask to be left with a toast that never leaves.
+ * wash is not drawn. The timer is untouched: a reader who asked for less
+ * motion did not ask to be left with a toast that never leaves.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-toast {
@@ -19270,7 +21560,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeGrid-NSW7VMOX.css */
+/* TreeGrid-FBX3MSJA.css */
 /*
  * A hierarchy as rows and columns (TreeGrid.tsx).
  *
@@ -19399,6 +21689,25 @@ svg.crewlet-time-window__tick {
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A HEADLESS GRID keeps its header row for a screen reader and draws no band:
+ * the row is taken out of the layout the way VisuallyHidden takes text out,
+ * and the first row of the body loses the hairline that would otherwise sit
+ * under the frame's own edge as a second line.
+ */
+.crewlet-tree-grid--headless .crewlet-tree-grid__head {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-tree-grid--headless .crewlet-tree-grid__head + [role='rowgroup'] > .crewlet-tree-grid__row:first-child {
+  border-top: 0;
+}
+
 /* The selection is where the reader is, so it takes the accent. */
 .crewlet-tree-grid__row[aria-selected='true'] {
   box-shadow: inset 2px 0 0 var(--color-brand-accent);