@crewlethq/ui 0.12.0 → 0.13.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);
 }
@@ -8023,14 +8402,305 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EmptyState-C6HRBGT7.css */
+/* Document-PQGXJHB7.css */
 /*
- * The empty state.
+ * Rendered markdown, set as a document (Document.tsx).
  *
- * 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
- * word in the box is on a step that clears 4.5:1, because the sentence is the
- * whole point of the component.
+ * 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
+ * word in the box is on a step that clears 4.5:1, because the sentence is the
+ * whole point of the component.
  */
 
 .crewlet-empty-state {
@@ -8465,6 +9135,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 +9364,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 +9461,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 +9506,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 +9536,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,44 +9581,299 @@ 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-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;
@@ -9685,6 +10645,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 +10878,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 +10914,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,13 +11486,162 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Menu-BT5PMFJI.css */
+/* MarkdownEditor-ZLSHTOIZ.css */
 /*
- * The menu button's panel.
+ * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
+ * and the footer, in ONE box.
  *
- * It shares the popover's surface deliberately: a menu and a popover are the
- * same object to a reader, and two surfaces that differ by a shadow step are
- * how a design system starts to look assembled rather than designed. What is
+ * 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.
+ *
+ * It shares the popover's surface deliberately: a menu and a popover are the
+ * same object to a reader, and two surfaces that differ by a shadow step are
+ * how a design system starts to look assembled rather than designed. What is
  * its own is the row: a check column, a danger ink, and a hover that is
  * neutral because focus, not the pointer, is what moves through a menu.
  *
@@ -10827,7 +12004,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-BNT3TDV2.css */
+/* Modal-3YJ2GG2T.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -10914,6 +12091,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
@@ -11309,6 +12508,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 +12538,10 @@ svg.crewlet-datetime__chevron {
   .crewlet-modal--sheet {
     animation: none;
   }
+
+  .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
+    animation: none;
+  }
 }
 
 
@@ -12373,6 +13583,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,81 +14332,278 @@ 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.
- */
-
-.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);
+  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);
-  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);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-primary);
 }
 
-/*
- * 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);
+@container crewlet-reading-pane (width < 640px) {
+  .crewlet-reading-pane__column {
+    padding-inline: var(--spacing-4);
+  }
 }
 
-/*
- * 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;
+/* ---- The byline -------------------------------------------------------- */
 
-  min-width: var(--crewlet-search-trigger-width);
-  height: var(--size-control-md);
-  background: var(--color-surface-subtle);
+.crewlet-reading-pane__byline {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
 }
 
-.crewlet-search-trigger:hover {
-  border-color: var(--color-border-hover);
-  color: var(--color-text-primary);
+.crewlet-reading-pane__start,
+.crewlet-reading-pane__leading {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
 }
 
-/* One ring, over the trigger's own boundary rather than 2px off it, which is
+.crewlet-reading-pane__by {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-reading-pane__by strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.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 {
@@ -13302,7 +14790,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* SegmentedControl-76HODRBT.css */
+/* SegmentedControl-PKBLJVSA.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -13464,6 +14952,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 +15083,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Select-4ANVLHUY.css */
+/* Select-XMZ44RWY.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -13877,6 +15383,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 +15494,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-X5NLZNWA.css */
+/* SidebarNav-KF66MLOM.css */
 /*
  * The rail's navigation.
  *
@@ -14230,26 +15760,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,6 +17162,355 @@ svg.crewlet-select__chevron {
 }
 
 
+/* Switcher-B44Q4WF4.css */
+/*
+ * 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).
+ *
+ * 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-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;
+}
+
+/* ── 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.
@@ -15819,7 +17683,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Tabs-5I5Q5KKM.css */
+/* Tabs-ITJYJFMU.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -16100,26 +17964,75 @@ svg.crewlet-select__chevron {
   box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border-default);
 }
 
-/*
- * THE RING IS AN OUTLINE. Forced-colors mode drops every box-shadow and keeps
- * outlines, so a ring drawn as a shadow disappears for exactly the readers who
- * need one most.
- */
-.crewlet-tabs__tab:focus-visible {
+/*
+ * THE RING IS AN OUTLINE. Forced-colors mode drops every box-shadow and keeps
+ * outlines, so a ring drawn as a shadow disappears for exactly the readers who
+ * need one most.
+ */
+.crewlet-tabs__tab:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
+/*
+ * A CHIP RINGS ON ITS OWN EDGE, flush rather than 2px off it. The chip that
+ * is on draws a hairline round itself, and a ring standing off that hairline
+ * was two edges with a gap between them, which reads as a second outline
+ * rather than as focus. Flush, the ring covers the hairline, and it stays
+ * inside the well's 2px inset: two pixels wide, it meets the well's own
+ * boundary rather than leaving a sliver of the well between the two.
+ */
+.crewlet-tabs--pill .crewlet-tabs__tab:focus-visible {
+  outline-offset: 0;
+}
+
+/* ─── 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;
-}
-
-/*
- * A CHIP RINGS ON ITS OWN EDGE, flush rather than 2px off it. The chip that
- * is on draws a hairline round itself, and a ring standing off that hairline
- * was two edges with a gap between them, which reads as a second outline
- * rather than as focus. Flush, the ring covers the hairline, and it stays
- * inside the well's 2px inset: two pixels wide, it meets the well's own
- * boundary rather than leaving a sliver of the well between the two.
- */
-.crewlet-tabs--pill .crewlet-tabs__tab:focus-visible {
-  outline-offset: 0;
+  outline-offset: -2px;
 }
 
 .crewlet-tabs__tab.is-disabled,
@@ -17037,6 +18950,361 @@ svg.crewlet-select__chevron {
 }
 
 
+/* 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 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-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);
+}
+
+.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);
+}
+
+/*
+ * 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-theme-swatch__row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+}
+
+/* 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);
+}
+
+/* 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-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); }
+
+/* ── The pane: the same sketch, large enough to read as a screen ───────── */
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__half {
+  grid-template-columns: 26% minmax(0, 1fr);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail {
+  gap: 7px;
+  padding: 12px 8px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__rail-row {
+  height: 5px;
+}
+
+.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-theme-swatch--pane .crewlet-theme-swatch__sheet {
+  gap: 8px;
+  margin: 6px 6px 6px 0;
+  padding: 10px;
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-theme-swatch__title {
+  display: block;
+  flex: none;
+  width: 40%;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-text);
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__card {
+  flex: none;
+  gap: 7px;
+  justify-content: flex-start;
+  padding: 8px;
+}
+
+.crewlet-theme-swatch__item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__state {
+  width: 6px;
+  height: 6px;
+}
+
+.crewlet-theme-swatch--pane .crewlet-theme-swatch__line {
+  width: 45%;
+  height: 4px;
+}
+
+.crewlet-theme-swatch__muted {
+  display: block;
+  width: 18%;
+  height: 4px;
+  margin-left: auto;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-muted);
+}
+
+.crewlet-theme-swatch__actions {
+  display: flex;
+  gap: 6px;
+  margin-top: auto;
+}
+
+.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);
+}
+
+/* The primary action's label, in the colour the theme labels its accent with. */
+.crewlet-theme-swatch__label {
+  display: block;
+  width: 50%;
+  height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-swatch-on-accent);
+}
+
+.crewlet-theme-swatch__secondary {
+  display: block;
+  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: one trigger over one panel.
@@ -17603,7 +19871,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-NVDCEIP5.css */
+/* Toaster-KZ7YE2HA.css */
 /*
  * The toast stack.
  *
@@ -17796,6 +20064,7 @@ svg.crewlet-time-window__tick {
 .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,
@@ -19270,7 +21539,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* TreeGrid-NSW7VMOX.css */
+/* TreeGrid-FBX3MSJA.css */
 /*
  * A hierarchy as rows and columns (TreeGrid.tsx).
  *
@@ -19399,6 +21668,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);