@crewlethq/ui 0.17.1 → 0.18.0

package/dist/styles.css

@@ -1,3 +1,14 @@
+/* AccessDeniedCard-WXM5DBDZ.css */
+/* The card holds one empty state and nothing else, at a reading width, so a
+   refusal in a wide viewer body reads as one sentence rather than a banner. */
+
+.crewlet-access-denied-card {
+  width: 100%;
+  max-width: var(--size-measure);
+  margin-inline: auto;
+}
+
+
 /* Accordion-ZI2WLD5C.css */
 /*
  * Accordion: a stack of disclosures, one hairline between them.
@@ -1256,6 +1267,118 @@ a.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactCard-EXVAEBV6.css */
+/*
+ * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
+ * lines up whatever each preview is, then the title and up to three lines of
+ * facts. `compact` is a row with the kind's glyph in place of the preview.
+ */
+
+.crewlet-artifact-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-decoration: none;
+}
+
+.crewlet-artifact-card--compact {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card__preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-inset);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__glyph {
+  display: inline-flex;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__glyph--compact {
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-artifact-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-3);
+}
+
+.crewlet-artifact-card--compact .crewlet-artifact-card__body {
+  padding: 0;
+}
+
+.crewlet-artifact-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__title {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-card__pin {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-card__facts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-artifact-card__line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__owner,
+.crewlet-artifact-card__presence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-card__changes {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -3513,6 +3636,31 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* ChangeMark-3VMTW7MT.css */
+/*
+ * A change mark (ChangeMark.tsx): a notch in the top end corner of whatever
+ * it sits on, which is the nearest positioned ancestor. A triangle drawn by
+ * two borders, so it is a shape at any zoom and needs no glyph.
+ */
+
+.crewlet-change-mark {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  width: 0;
+  height: 0;
+  border-top: var(--spacing-2) solid var(--color-change-mark);
+  border-inline-start: var(--spacing-2) solid transparent;
+  pointer-events: auto;
+}
+
+@media (forced-colors: active) {
+  .crewlet-change-mark {
+    border-top-color: CanvasText;
+  }
+}
+
+
 /* CharacterPicker-ZEYIKUNQ.css */
 /*
  * The grid of characters.
@@ -5671,6 +5819,70 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CursorFlag-AJQJBUGY.css */
+/*
+ * A collaborator's name flag (CursorFlag.tsx): the name on a plate of their
+ * presence hue, in the ink the palette suite holds at 4.5:1 on every hue.
+ */
+
+.crewlet-cursor-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  max-width: 16em;
+  padding: 0 calc(var(--spacing-1) * 1.5);
+  border-radius: var(--radius-pill);
+  background: var(--crewlet-presence-hue);
+  box-shadow: var(--shadow-cursor);
+  color: var(--color-presence-flag-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-normal);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.crewlet-cursor-flag--agent {
+  border-radius: var(--radius-xs);
+}
+
+.crewlet-cursor-flag__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.crewlet-cursor-flag__glyph {
+  flex: none;
+}
+
+/* Pinned to the element it labels, which is the nearest positioned ancestor. */
+.crewlet-cursor-flag--top-end,
+.crewlet-cursor-flag--bottom-end {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: var(--z-index-presence);
+}
+
+.crewlet-cursor-flag--top-end {
+  bottom: 100%;
+}
+
+.crewlet-cursor-flag--bottom-end {
+  top: 100%;
+}
+
+@media (forced-colors: active) {
+  .crewlet-cursor-flag {
+    border: 1px solid CanvasText;
+    background: Canvas;
+    color: CanvasText;
+  }
+}
+
+
 /* DataTable-WZK3V62B.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
@@ -11363,6 +11575,43 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* LinkInterstitial-ET4MSVSV.css */
+/*
+ * The destination, said twice: the host as the claim a reader decides on, in
+ * the title's register, then the whole address in mono for whoever wants to
+ * read it exactly. The address wraps anywhere, because a long URL that does
+ * not wrap pushes the dialog wider than a phone.
+ */
+
+.crewlet-link-interstitial {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-link-interstitial__label {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-link-interstitial__host {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-link-interstitial__href {
+  align-self: flex-start;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+
 /* List-MYJIV6MP.css */
 /*
  * The non-tabular list. One row recipe, four framings.
@@ -11853,6 +12102,56 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* LiveCursor-DZHGIYWE.css */
+/*
+ * A collaborator's live pointer and its flag (LiveCursor.tsx). It stands at a
+ * point by transform, so a moving cursor repaints without a layout, and the
+ * flag hangs below and after the pointer's tip.
+ */
+
+.crewlet-live-cursor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--z-index-presence);
+  display: block;
+  pointer-events: none;
+}
+
+.crewlet-live-cursor__pointer {
+  display: block;
+  color: var(--crewlet-presence-hue);
+}
+
+.crewlet-live-cursor__flag {
+  position: absolute;
+  top: calc(var(--spacing-4) + var(--spacing-1));
+  left: var(--spacing-3);
+}
+
+.crewlet-live-cursor--resting {
+  opacity: 0.4;
+}
+
+.crewlet-live-cursor--gone {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .crewlet-live-cursor--glide {
+    transition:
+      transform var(--motion-duration-fast) linear,
+      opacity var(--motion-duration-base) var(--motion-easing-default);
+  }
+}
+
+@media (forced-colors: active) {
+  .crewlet-live-cursor__pointer {
+    color: Highlight;
+  }
+}
+
+
 /* MarkdownEditor-ZLSHTOIZ.css */
 /*
  * Writing markdown (MarkdownEditor.tsx): the bar, the source or its preview,
@@ -14495,60 +14794,193 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PricingCard-HTAHG4ST.css */
+/* PresenceRing-M4C22Q6U.css */
 /*
- * PricingCard, the plan-tier card surface.
- *
- * The primitive owns the outer card (border, radius, padding, states), the
- * header, the price block and the grid container, and leaves the body and the
- * footer to the caller.
+ * The presence hues and the ring drawn in them (PresenceRing.tsx).
  *
- * EVERY COLOUR IS A TOKEN NOW. The tags, the price note and the card's own
- * ground were dark-theme literals: an amber at rgba(251, 191, 36, 0.75), a
- * green at #86efac and a white lift at 2 percent, none of which is visible on
- * a light page. The status hues here are the same soft-and-ink pairs the Tag
- * and the Callout draw, so a "Save 10 percent" chip and a success tag on the
- * screen behind it are the same green.
+ * ONE TABLE OF HUES for every presence mark: a ring, a flag, a cursor and a
+ * badge's ring each read `--crewlet-presence-hue` from the class
+ * `presenceHueClass` writes, so the six node hues are spelt once. The hue is
+ * the presence colour exception: it ties a mark to a name and is spent on
+ * nothing else.
  */
 
-/* ── Grid container ─────────────────────────────────────────────── */
-.crewlet-pricing-card-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--spacing-3);
-  align-items: stretch;
+.crewlet-presence-hue--purple {
+  --crewlet-presence-hue: var(--color-node-purple);
 }
 
-@media (max-width: 1200px) {
-  .crewlet-pricing-card-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.crewlet-presence-hue--cyan {
+  --crewlet-presence-hue: var(--color-node-cyan);
 }
 
-@media (max-width: 768px) {
-  .crewlet-pricing-card-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
+.crewlet-presence-hue--green {
+  --crewlet-presence-hue: var(--color-node-green);
 }
 
-/* ── Card root ──────────────────────────────────────────────────── */
-.crewlet-pricing-card {
-  text-align: left;
-  /* The card recipe, flat: the card's surface, its hairline and its 12px
-     corner. One card surface across the system, so a plan tier and a
-     dashboard panel are the same object. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  font-family: var(--font-family-sans);
-  color: var(--color-text-primary);
-  min-width: 0;
-  container-type: inline-size;
-  transition:
+.crewlet-presence-hue--amber {
+  --crewlet-presence-hue: var(--color-node-amber);
+}
+
+.crewlet-presence-hue--rose {
+  --crewlet-presence-hue: var(--color-node-rose);
+}
+
+.crewlet-presence-hue--blue {
+  --crewlet-presence-hue: var(--color-node-blue);
+}
+
+.crewlet-presence-hue--neutral {
+  --crewlet-presence-hue: var(--color-border-strong);
+}
+
+/*
+ * THE RING IS INSET and drawn on a pseudo element, so it never moves the
+ * content, never doubles the element's own border and is never read. 2px,
+ * the weight a selection ring is drawn at.
+ */
+.crewlet-presence-ring {
+  --crewlet-presence-ring-inset: 1px;
+  position: relative;
+  display: inline-block;
+}
+
+.crewlet-presence-ring::after {
+  position: absolute;
+  inset: var(--crewlet-presence-ring-inset);
+  z-index: var(--z-index-presence);
+  border: 2px solid var(--crewlet-presence-hue);
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+
+.crewlet-presence-ring--idle::after {
+  border-style: dashed;
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-ring::after {
+    border-color: Highlight;
+  }
+}
+
+
+/* PresenceStack-QSXQJND5.css */
+/*
+ * Who is here (PresenceStack.tsx), on the avatar stack's own geometry: the
+ * overlap and the counted chip are the stack's. What this adds is the ring in
+ * each present collaborator's hue, outside the cut-out, and the idle fade.
+ */
+
+/* The wrapper (a span, or a button when badges select) carries no edge of its
+   own: the cut-out and the hue ring are drawn on the badge inside it, which
+   has the badge's own outline to follow. */
+.crewlet-presence-stack > .crewlet-presence-stack__member {
+  display: inline-flex;
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--human {
+  border-radius: var(--radius-circle);
+}
+
+.crewlet-presence-stack > .crewlet-presence-stack__member--agent {
+  border-radius: var(--radius-sm);
+}
+
+button.crewlet-presence-stack__member {
+  cursor: pointer;
+}
+
+button.crewlet-presence-stack__member:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge {
+  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+}
+
+/* The hue ring sits outside the cut-out, so it reads as a ring round the
+   badge rather than a stroke on it. */
+.crewlet-presence-stack .crewlet-presence-stack__badge--present {
+  box-shadow:
+    0 0 0 2px var(--crewlet-avatar-stack-ground),
+    0 0 0 4px var(--crewlet-presence-hue);
+}
+
+.crewlet-presence-stack .crewlet-presence-stack__badge--idle {
+  opacity: 0.5;
+}
+
+@media (forced-colors: active) {
+  .crewlet-presence-stack .crewlet-presence-stack__badge--present {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+
+/* PricingCard-HTAHG4ST.css */
+/*
+ * PricingCard, the plan-tier card surface.
+ *
+ * The primitive owns the outer card (border, radius, padding, states), the
+ * header, the price block and the grid container, and leaves the body and the
+ * footer to the caller.
+ *
+ * EVERY COLOUR IS A TOKEN NOW. The tags, the price note and the card's own
+ * ground were dark-theme literals: an amber at rgba(251, 191, 36, 0.75), a
+ * green at #86efac and a white lift at 2 percent, none of which is visible on
+ * a light page. The status hues here are the same soft-and-ink pairs the Tag
+ * and the Callout draw, so a "Save 10 percent" chip and a success tag on the
+ * screen behind it are the same green.
+ */
+
+/* ── Grid container ─────────────────────────────────────────────── */
+.crewlet-pricing-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--spacing-3);
+  align-items: stretch;
+}
+
+@media (max-width: 1200px) {
+  .crewlet-pricing-card-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .crewlet-pricing-card-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* ── Card root ──────────────────────────────────────────────────── */
+.crewlet-pricing-card {
+  text-align: left;
+  /* The card recipe, flat: the card's surface, its hairline and its 12px
+     corner. One card surface across the system, so a plan tier and a
+     dashboard panel are the same object. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  font-family: var(--font-family-sans);
+  color: var(--color-text-primary);
+  min-width: 0;
+  container-type: inline-size;
+  transition:
     border-color var(--motion-duration-fast) var(--motion-easing-default),
     background var(--motion-duration-fast) var(--motion-easing-default),
     box-shadow var(--motion-duration-fast) var(--motion-easing-default);
@@ -14779,6 +15211,50 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* PrincipalPicker-7NNZTGUP.css */
+/*
+ * The suggestions under the field, grouped by kind. A row is the badge and the
+ * name with its second line, the shape every list of principals in the
+ * product draws.
+ */
+
+.crewlet-principal-picker {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.crewlet-principal-picker__group + .crewlet-principal-picker__group {
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-principal-picker__heading {
+  padding: var(--spacing-1) var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-principal-picker__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-principal-picker__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-principal-picker__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
 /* Prose-BTXNFT2Q.css */
 /*
  * Natural language: the proportional face, real leading, a bounded measure.
@@ -15113,6 +15589,59 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* SandboxedFrame-L6HBQZCD.css */
+/*
+ * The frame fills the box it is given. The page around it does not scroll
+ * round the artifact: the artifact scrolls inside its own document, which is
+ * what a viewer body that holds one wants.
+ *
+ * The region takes focus when the frame hands it back, and keeps the
+ * document's own focus treatment then: a reader who just left a page by
+ * keyboard needs to see where they landed.
+ */
+
+.crewlet-sandboxed-frame {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+}
+
+.crewlet-sandboxed-frame__frame {
+  flex: 1 1 auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+}
+
+/* Kept out of sight while it starts, so a document that has not painted in
+   the reader's palette yet is never what they see. It still loads. */
+.crewlet-sandboxed-frame[data-state='loading'] .crewlet-sandboxed-frame__frame {
+  visibility: hidden;
+}
+
+.crewlet-sandboxed-frame__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  padding: var(--spacing-3);
+}
+
+.crewlet-sandboxed-frame__end {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: var(--spacing-4);
+}
+
+
 /* SearchTrigger-KIZLWBEH.css */
 /*
  * A button drawn as the field it stands in for.
@@ -15953,140 +16482,887 @@ svg.crewlet-select__chevron {
   cursor: not-allowed;
 }
 
-.crewlet-select__option-tick {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-top: 1px;
-  color: var(--color-brand-accent-ink);
+.crewlet-select__option-tick {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  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;
+  gap: 1px;
+  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
+ * cannot hold — and neither does anything to text that is simply allowed to
+ * wrap, which is what this rule did without `white-space`. A long option
+ * silently grew a second line instead of ellipsing, and with the row's own
+ * flex minimum gone (see Listbox.css) that second line was drawn over the
+ * option underneath.
+ *
+ * The trigger's `.crewlet-select__label` a hundred lines above has carried all
+ * three since it was written; this is the same register on the same text, and
+ * `.crewlet-listbox__hint` states the rule outright — "never wrapped: a hint
+ * that broke across two lines turned every row in the list a different
+ * height".
+ */
+.crewlet-select__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-select__option-desc {
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+}
+
+/* The second line stays the second line on the row the reader is on: it is
+   the same fact, and a description that changes colour with the highlight
+   reads as a different kind of thing under the pointer. */
+.crewlet-select__menu .crewlet-listbox__option.is-highlight .crewlet-select__option-desc {
+  color: var(--color-text-tertiary);
+}
+
+/* ── The search box ──────────────────────────────────────────────────── */
+
+/*
+ * THE RING IS DRAWN WHERE THE ELEMENT IS. The input below clears the user
+ * agent's outline, and the frame's `:focus-within` rule is the package's one
+ * replacement for it — but that rule's own premise is that everything
+ * focusable sits INSIDE `.crewlet-select`, and this box does not: the panel is
+ * portalled into the layer host, outside that subtree, so `:focus-within`
+ * could never match while focus was in the search field. And focus is moved
+ * here on every open, so the one control a searchable Select puts a reader in
+ * was the one with no focus indicator at all.
+ *
+ * On the band rather than the input, and INSET, because the panel clips: an
+ * outset ring on the input would be cut by the menu's own `overflow: hidden`.
+ */
+.crewlet-select__search:focus-within {
+  outline: 1px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+.crewlet-select__search {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-bottom: 1px solid var(--color-border-default);
+  color: var(--color-text-tertiary);
+  flex: none;
+}
+
+.crewlet-select__search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: var(--font-size-compact);
+  color: var(--color-text-primary);
+}
+
+.crewlet-select__search-input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-select {
+    transition: none;
+  }
+}
+
+
+/* ShareDialog-YZ4F37MW.css */
+/*
+ * Three blocks under the title: who to add and at what role, who has access,
+ * and what the whole company may do. Each row of the audience is the badge,
+ * the name over its second line, and the controls at the inline end; the note
+ * and a refusal run the full width under it, so a long sentence never pushes
+ * the controls out of line with the rows above and below.
+ */
+
+.crewlet-share-dialog__add {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__heading {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-share-dialog__audience {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-share-dialog__row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--spacing-3);
+  padding: var(--spacing-2) 0;
+}
+
+.crewlet-share-dialog__who {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-share-dialog__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-share-dialog__you,
+.crewlet-share-dialog__detail {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-share-dialog__detail {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-share-dialog__controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-share-dialog__role,
+.crewlet-share-dialog__saving {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-share-dialog__saving {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-share-dialog__note,
+.crewlet-share-dialog__refusal {
+  grid-column: 2 / -1;
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-share-dialog__note {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-share-dialog__refusal {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-share-dialog__refusal:empty {
+  display: none;
+}
+
+.crewlet-share-dialog__company {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__company-text {
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.crewlet-share-dialog__link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-share-dialog__link-note {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* Under the phone breakpoint the row's controls go under the name, so a
+   role select and a remove control never squeeze the name to an ellipsis. */
+@media (width < 640px) {
+  .crewlet-share-dialog__row {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .crewlet-share-dialog__controls {
+    grid-column: 2 / -1;
+    justify-content: flex-start;
+  }
+
+  .crewlet-share-dialog__add {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+
+/* SheetGrid-4HOXDVIB.css */
+/*
+ * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
+ *
+ * ONE EDGE PER CELL. Each cell draws its trailing and bottom hairline only, so
+ * two neighbours never draw two lines between them, and every mark laid over a
+ * cell (the active cell's ring, a collaborator's ring, a selection) is inset
+ * inside that edge rather than doubling it.
+ *
+ * The rows are positioned in a body as tall as every row together, and only
+ * the rows in view are in the document. Every row is a grid on the one column
+ * template the component writes, so a cell is exactly as wide as its header.
+ */
+
+.crewlet-sheet-grid {
+  --crewlet-sheet-row-height: var(--size-sheet-row);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+}
+
+/* Measured by the component: the resolved row height at the current density. */
+.crewlet-sheet-grid__probe {
+  position: absolute;
+  width: 0;
+  height: var(--size-sheet-row);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.crewlet-sheet-grid__scroller {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-width: 100%;
+  overflow: auto;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+}
+
+.crewlet-sheet-grid__grid {
+  position: relative;
+  min-width: 100%;
+}
+
+.crewlet-sheet-grid__row {
+  display: grid;
+  grid-template-columns: var(--crewlet-sheet-columns);
+  height: var(--crewlet-sheet-row-height);
+}
+
+.crewlet-sheet-grid__head {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-sticky);
+}
+
+.crewlet-sheet-grid__body {
+  position: relative;
+}
+
+.crewlet-sheet-grid__body > .crewlet-sheet-grid__row {
+  position: absolute;
+  right: 0;
+  left: 0;
+}
+
+.crewlet-sheet-grid__corner,
+.crewlet-sheet-grid__header,
+.crewlet-sheet-grid__rownum,
+.crewlet-sheet-grid__cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  border-right: 1px solid var(--color-border-default);
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+.crewlet-sheet-grid__corner,
+.crewlet-sheet-grid__header {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-sheet-grid__corner,
+.crewlet-sheet-grid__rownum {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: var(--z-index-raised);
+  justify-content: center;
+}
+
+.crewlet-sheet-grid__corner {
+  z-index: var(--z-index-sticky);
+}
+
+.crewlet-sheet-grid__header {
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-2);
+  cursor: default;
+  user-select: none;
+}
+
+.crewlet-sheet-grid__header-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-sheet-grid__sort {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-sheet-grid__header-presence {
+  display: inline-flex;
+  flex: none;
+  gap: var(--spacing-1);
+  margin-inline-start: auto;
+}
+
+.crewlet-sheet-grid .crewlet-sheet-grid__header-badge {
+  box-shadow: 0 0 0 2px var(--crewlet-presence-hue);
+}
+
+.crewlet-sheet-grid__rownum {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The bar at a row's leading edge while somebody has it selected. */
+.crewlet-sheet-grid__rownum--present::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  width: 3px;
+  background: var(--crewlet-presence-hue);
+  content: '';
+}
+
+.crewlet-sheet-grid__cell {
+  padding: 0 var(--spacing-2);
+  outline: none;
+}
+
+.crewlet-sheet-grid__cell--frozen,
+.crewlet-sheet-grid__header.crewlet-sheet-grid__cell--frozen {
+  position: sticky;
+  z-index: var(--z-index-raised);
+}
+
+.crewlet-sheet-grid__header.crewlet-sheet-grid__cell--frozen {
+  z-index: var(--z-index-sticky);
+}
+
+.crewlet-sheet-grid__cell--number,
+.crewlet-sheet-grid__cell--rating {
+  justify-content: flex-end;
+}
+
+.crewlet-sheet-grid__cell--checkbox {
+  justify-content: center;
+}
+
+.crewlet-sheet-grid__cell--selected {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-sheet-grid__cell:focus-visible,
+.crewlet-sheet-grid__header:focus-visible {
+  outline: 2px solid var(--color-focus);
+  /* Inside a box that scrolls, an outset ring is clipped by the scroller and
+     painted over by the next row. */
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-sheet-grid__cell--editing {
+  z-index: var(--z-index-presence);
+  overflow: visible;
+}
+
+.crewlet-sheet-grid__value {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.crewlet-sheet-grid__cell--editing > .crewlet-sheet-grid__value {
+  visibility: hidden;
+}
+
+/* PENDING (D23): the reader's value, drawn at once, underlined dashed until
+   the engine confirms it. The word is in the cell's description and the strip. */
+.crewlet-sheet-grid__cell--pending > .crewlet-sheet-grid__value {
+  text-decoration: underline dashed var(--color-text-tertiary);
+  text-underline-offset: 3px;
+}
+
+.crewlet-sheet-grid__cell--pending > .crewlet-sheet-grid__value::after {
+  position: absolute;
+  right: var(--spacing-1);
+  bottom: 2px;
+  left: var(--spacing-1);
+  border-bottom: 1px dashed var(--color-text-tertiary);
+  content: '';
+}
+
+.crewlet-sheet-grid__refused {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
+  padding-inline-start: var(--spacing-1);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-sheet-grid__message {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  z-index: var(--z-index-presence);
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 20rem;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-feedback-danger-line);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  white-space: normal;
+}
+
+.crewlet-sheet-grid__history {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: var(--spacing-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-1);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.crewlet-sheet-grid__history:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-sheet-grid__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-sheet-grid__sync {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+}
+
+.crewlet-sheet-grid__sync--failed {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* ── the cells, alone or in the grid ─────────────────────────────────────── */
+
+.crewlet-sheet-cell__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-sheet-cell__number {
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-sheet-cell__muted {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-sheet-cell__chips {
+  display: inline-flex;
+  gap: var(--spacing-1);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.crewlet-sheet-cell__person {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-cell__link {
+  overflow: hidden;
+  color: var(--color-text-link-quiet);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-sheet-cell__link:hover {
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-sheet-cell__checkbox {
+  display: inline-flex;
+  align-items: center;
+}
+
+.crewlet-sheet-cell__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-background);
+  color: var(--color-text-on-accent);
+}
+
+.crewlet-sheet-cell__check--on {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent);
+}
+
+.crewlet-sheet-cell__rating,
+.crewlet-sheet-cell__stars {
+  display: inline-flex;
+  align-items: center;
+}
+
+.crewlet-sheet-cell__star {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-sheet-cell__star--on {
+  color: var(--color-feedback-warning);
+}
+
+.crewlet-sheet-cell {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-sheet-cell__face {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--size-control-md);
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-sheet-cell__face[aria-disabled='true'] {
+  cursor: default;
+}
+
+.crewlet-sheet-cell__face:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-sheet-cell--pending .crewlet-sheet-cell__face {
+  border-style: dashed;
+}
+
+.crewlet-sheet-cell__refusal {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+}
+
+/* ── the editors ─────────────────────────────────────────────────────────── */
+
+.crewlet-sheet-editor {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-index-presence);
+}
+
+.crewlet-sheet-cell .crewlet-sheet-editor {
+  position: relative;
+  inset: auto;
+}
+
+.crewlet-sheet-editor__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: var(--size-control-md);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: 0;
+  background: var(--color-surface-elevated);
+  box-shadow: inset 0 0 0 2px var(--color-focus);
+  color: var(--color-text-primary);
+  font: inherit;
+}
+
+.crewlet-sheet-editor__input:focus-visible,
+.crewlet-sheet-editor__filter:focus-visible,
+.crewlet-sheet-editor__textarea:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-sheet-editor__panel {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  z-index: var(--z-index-presence);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  box-sizing: border-box;
+  min-width: 100%;
+  width: max-content;
+  max-width: min(24rem, 90vw);
+  padding: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-lg);
+}
+
+.crewlet-sheet-editor--above .crewlet-sheet-editor__panel {
+  top: auto;
+  bottom: 100%;
+}
+
+.crewlet-sheet-editor--list .crewlet-sheet-editor__panel,
+.crewlet-sheet-editor--long .crewlet-sheet-editor__panel {
+  top: 0;
+  min-width: max(100%, 14rem);
+}
+
+.crewlet-sheet-editor--list.crewlet-sheet-editor--above .crewlet-sheet-editor__panel,
+.crewlet-sheet-editor--long.crewlet-sheet-editor--above .crewlet-sheet-editor__panel {
+  top: auto;
+  bottom: 0;
+}
+
+.crewlet-sheet-editor__filter,
+.crewlet-sheet-editor__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-background);
+  color: var(--color-text-primary);
+  font: inherit;
 }
 
-/*
- * 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-sheet-editor__textarea {
+  min-width: 20rem;
+  max-width: 100%;
+  resize: vertical;
 }
 
-.crewlet-select__option-body {
+.crewlet-sheet-editor__list {
   display: flex;
   flex-direction: column;
-  gap: 1px;
-  min-width: 0;
+  max-height: 16rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
 }
 
-/*
- * 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;
+.crewlet-sheet-editor__option {
+  display: flex;
   align-items: center;
-  flex: none;
-}
-
-.crewlet-select__option-leading {
-  min-height: calc(var(--font-line-height-normal) * 1em);
+  gap: var(--spacing-2);
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
 }
 
-/* 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;
+.crewlet-sheet-editor__option--highlight {
+  background: var(--color-surface-hover);
 }
 
-/*
- * 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
- * cannot hold — and neither does anything to text that is simply allowed to
- * wrap, which is what this rule did without `white-space`. A long option
- * silently grew a second line instead of ellipsing, and with the row's own
- * flex minimum gone (see Listbox.css) that second line was drawn over the
- * option underneath.
- *
- * The trigger's `.crewlet-select__label` a hundred lines above has carried all
- * three since it was written; this is the same register on the same text, and
- * `.crewlet-listbox__hint` states the rule outright — "never wrapped: a hint
- * that broke across two lines turned every row in the list a different
- * height".
- */
-.crewlet-select__option-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.crewlet-sheet-editor__mark {
+  display: inline-flex;
+  flex: none;
+  width: var(--spacing-3);
+  color: var(--color-brand-accent-ink);
 }
 
-.crewlet-select__option-desc {
-  font-size: var(--font-size-2xs);
-  line-height: var(--font-line-height-normal);
+.crewlet-sheet-editor__empty {
+  padding: var(--spacing-2);
   color: var(--color-text-tertiary);
 }
 
-/* The second line stays the second line on the row the reader is on: it is
-   the same fact, and a description that changes colour with the highlight
-   reads as a different kind of thing under the pointer. */
-.crewlet-select__menu .crewlet-listbox__option.is-highlight .crewlet-select__option-desc {
-  color: var(--color-text-tertiary);
+.crewlet-sheet-editor__error {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin: 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
 }
 
-/* ── The search box ──────────────────────────────────────────────────── */
+.crewlet-sheet-editor__conflict {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-2);
+  border-top: 1px solid var(--color-border-default);
+}
 
-/*
- * THE RING IS DRAWN WHERE THE ELEMENT IS. The input below clears the user
- * agent's outline, and the frame's `:focus-within` rule is the package's one
- * replacement for it — but that rule's own premise is that everything
- * focusable sits INSIDE `.crewlet-select`, and this box does not: the panel is
- * portalled into the layer host, outside that subtree, so `:focus-within`
- * could never match while focus was in the search field. And focus is moved
- * here on every open, so the one control a searchable Select puts a reader in
- * was the one with no focus indicator at all.
- *
- * On the band rather than the input, and INSET, because the panel clips: an
- * outset ring on the input would be cut by the menu's own `overflow: hidden`.
- */
-.crewlet-select__search:focus-within {
-  outline: 1px solid var(--color-focus);
-  outline-offset: -1px;
+.crewlet-sheet-editor__conflict-text {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
 }
 
-.crewlet-select__search {
+.crewlet-sheet-editor__conflict-actions {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-3);
-  border-bottom: 1px solid var(--color-border-default);
-  color: var(--color-text-tertiary);
-  flex: none;
 }
 
-.crewlet-select__search-input {
-  flex: 1;
-  min-width: 0;
-  background: transparent;
-  border: none;
-  outline: none;
-  font: inherit;
-  font-size: var(--font-size-compact);
-  color: var(--color-text-primary);
-}
+/* A PHONE: the list and long text editors open as a sheet from the bottom of
+   the screen rather than from a cell a thumb has to keep in view. */
+@media (width < 640px) {
+  .crewlet-sheet-grid .crewlet-sheet-editor--list .crewlet-sheet-editor__panel,
+  .crewlet-sheet-grid .crewlet-sheet-editor--long .crewlet-sheet-editor__panel {
+    position: fixed;
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    max-width: none;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
 
-.crewlet-select__search-input::placeholder {
-  color: var(--color-text-tertiary);
-  opacity: 1;
+  .crewlet-sheet-editor__textarea {
+    min-width: 0;
+  }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-select {
-    transition: none;
+@media (forced-colors: active) {
+  .crewlet-sheet-grid__cell--selected {
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .crewlet-sheet-grid__rownum--present::before {
+    background: Highlight;
   }
 }
 
@@ -18704,7 +19980,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tag-4BRQS6GN.css */
+/* Tag-SRGTK5KI.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -18906,6 +20182,48 @@ b.crewlet-switcher__match {
   --crewlet-tag-line: var(--color-brand-accent-soft-strong);
 }
 
+/*
+ * A HUE AN AUTHOR CHOSE for a value (a select option's colour), drawn in the
+ * node steps: the hue's fill under its ink, the line as the outline. Like a
+ * tinted tone, the pill needs no edge of its own at rest: the hue separates
+ * it from any neutral ground.
+ */
+.crewlet-tag--hue-purple {
+  --crewlet-tag-fill: var(--color-node-purple-fill);
+  --crewlet-tag-ink: var(--color-node-purple-ink);
+  --crewlet-tag-line: var(--color-node-purple-line);
+}
+
+.crewlet-tag--hue-cyan {
+  --crewlet-tag-fill: var(--color-node-cyan-fill);
+  --crewlet-tag-ink: var(--color-node-cyan-ink);
+  --crewlet-tag-line: var(--color-node-cyan-line);
+}
+
+.crewlet-tag--hue-green {
+  --crewlet-tag-fill: var(--color-node-green-fill);
+  --crewlet-tag-ink: var(--color-node-green-ink);
+  --crewlet-tag-line: var(--color-node-green-line);
+}
+
+.crewlet-tag--hue-amber {
+  --crewlet-tag-fill: var(--color-node-amber-fill);
+  --crewlet-tag-ink: var(--color-node-amber-ink);
+  --crewlet-tag-line: var(--color-node-amber-line);
+}
+
+.crewlet-tag--hue-rose {
+  --crewlet-tag-fill: var(--color-node-rose-fill);
+  --crewlet-tag-ink: var(--color-node-rose-ink);
+  --crewlet-tag-line: var(--color-node-rose-line);
+}
+
+.crewlet-tag--hue-blue {
+  --crewlet-tag-fill: var(--color-node-blue-fill);
+  --crewlet-tag-ink: var(--color-node-blue-ink);
+  --crewlet-tag-line: var(--color-node-blue-line);
+}
+
 /* ── appearance ────────────────────────────────────────────────────────── */
 
 /*
@@ -22297,6 +23615,117 @@ svg.crewlet-time-window__tick {
 }
 
 
+/* VersionTimeline-EBJ6MIPJ.css */
+/*
+ * A version list beside the version on show. The row's main line is the
+ * button that shows it; the controls sit under the facts, so a reader scanning
+ * the list reads numbers and names rather than a column of buttons.
+ */
+
+.crewlet-version-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-timeline__select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-version-timeline__select:hover {
+  background: var(--color-surface-hover);
+}
+
+/* The version on show. The accent means "where the reader is", which is
+   exactly what this row is. */
+.crewlet-version-timeline__select[aria-current='true'] {
+  background: var(--color-brand-accent-soft);
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+.crewlet-version-timeline__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-2);
+}
+
+.crewlet-version-timeline__number {
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-version-timeline__latest,
+.crewlet-version-timeline__label {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__latest {
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-version-timeline__label {
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-timeline__summary {
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-version-timeline__meta,
+.crewlet-version-timeline__source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-1);
+}
+
+/* The version compared against carries the same edge in the strong neutral:
+   it is the other side of the comparison, not where the reader is, so it does
+   not take the accent. */
+.is-compared > .crewlet-timeline__body > .crewlet-version-timeline__select {
+  box-shadow: inset 2px 0 0 var(--color-border-strong);
+}
+
+.crewlet-version-timeline__gap {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+
 /* VisuallyHidden-L552H7OA.css */
 /*
  * Hidden from the eye, read by everything else.