@crewlethq/ui 0.18.0 → 0.20.0

package/dist/styles.css

@@ -1267,6 +1267,691 @@ a.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArrangeBoard-MQE35P6Z.css */
+/*
+ * ArrangeBoard: the ground under a page being arranged. Two layers, both
+ * under every block (the board is its own stacking context, so they sit above
+ * its background and below its content): the hatch on `::after`, and the
+ * column lanes on `::before`, shown only while a block is carried or resized.
+ */
+
+.crewlet-arrange-board {
+  --crewlet-arrange-board-gap: var(--spacing-4);
+  /* The hatch, as one value: the ground below and the notes standing on it
+     draw the same lines. */
+  --crewlet-arrange-board-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  min-width: 0;
+}
+
+.crewlet-arrange-board.is-editing {
+  position: relative;
+  isolation: isolate;
+  margin-inline: calc(var(--spacing-3) * -1);
+  padding: var(--spacing-5) var(--spacing-3);
+  border-radius: var(--radius-xl);
+}
+
+/* Room to land below the last block while one is carried out of a group:
+   a page made only of groups otherwise has no bare stretch of its own. */
+.crewlet-arrange-board.is-editing:has(.crewlet-arrange-group__body [data-reorder='dragging']) {
+  padding-bottom: var(--spacing-11);
+}
+
+/* The hatch: its own ink, the strong hairline's held back to 60%, one
+   diagonal every half step, so the cards standing on it stay the loudest
+   thing on the page. */
+.crewlet-arrange-board.is-editing::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--crewlet-arrange-board-hatch);
+  pointer-events: none;
+}
+
+/* A note is an annotation on the ground, not a card on it: while the page is
+   arranged its paper shows the hatch through, inside a group as well, where
+   the group's own surface hides the ground. */
+.crewlet-arrange-board.is-editing .crewlet-note {
+  background: var(--crewlet-arrange-board-hatch), var(--crewlet-note-paper);
+}
+
+/* The lanes: one tile per column and its gap, as wide as the grid, so the
+   twelfth tile's gap falls outside the board and is not drawn. */
+.crewlet-arrange-board.is-editing::before {
+  content: '';
+  position: absolute;
+  inset: 0 var(--spacing-3);
+  background: linear-gradient(
+      to right,
+      var(--color-brand-accent-soft) 0 calc(100% - var(--crewlet-arrange-board-gap)),
+      transparent 0
+    )
+    0 0 / calc((100% + var(--crewlet-arrange-board-gap)) / var(--crewlet-arrange-board-columns)) 100%
+    repeat-x;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-default);
+}
+.crewlet-arrange-board.is-editing:has([data-reorder='dragging'], .crewlet-arrange-frame.is-resizing)::before {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-board.is-editing::before {
+    transition: none;
+  }
+}
+
+
+/* ArrangeFrame-3PLZAG22.css */
+/*
+ * ArrangeFrame: a block of a page being arranged.
+ *
+ * Off, the frame is layout only. Editing, the block keeps its own look at
+ * rest; hovered or focused, one accent ring is drawn over its own edge and
+ * its toolbar and resize handle appear. Every piece of chrome floats, so a
+ * block is the same size while arranging as afterwards.
+ */
+
+.crewlet-arrange-frame {
+  /* The corner every ring and bracket follows: a card's own. */
+  --crewlet-arrange-frame-radius: var(--radius-lg);
+  /* How far outside the block its ring is drawn; the chrome sits on the ring. */
+  --crewlet-arrange-frame-outset: 0px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: var(--crewlet-arrange-frame-radius);
+}
+
+.crewlet-arrange-frame__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.crewlet-arrange-frame__content > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A height of the reader's: the content scrolls inside it. */
+.crewlet-arrange-frame.is-fixed-height .crewlet-arrange-frame__content > * {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- Editing ---------------------------------------------------------- */
+
+/* The block itself is what moves: focused, its ring is its focus mark. The
+   transparent outline is the one forced-colors mode paints in its place. */
+.crewlet-arrange-frame.is-editing:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* The surface is what a pointer moves a block by. */
+.crewlet-arrange-frame.is-editing:not(.is-container) {
+  cursor: grab;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container):active {
+  cursor: grabbing;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container) > .crewlet-arrange-frame__content {
+  user-select: none;
+}
+
+/*
+ * THE ONE RING, over the block's own edge, on the innermost block the
+ * pointer or the focus is in. A hairline drawn exactly over the block's own
+ * 1px border, so the border turns to the accent rather than a second, heavier
+ * line appearing around it.
+ *
+ * IT IS A LAYER OF ITS OWN, above the content. An outline is painted with the
+ * block, under any content that is positioned or scrolls (a card with a fixed
+ * height scrolls its list), and that content covered it. Positioned after the
+ * content with no depth of its own, it paints over the content and under the
+ * toolbar and the handle, which are raised.
+ */
+.crewlet-arrange-frame.is-editing::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--crewlet-arrange-frame-outset) * -1);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )::after,
+.crewlet-arrange-frame.is-selected::after,
+.crewlet-arrange-frame.is-resizing::after {
+  border-color: var(--color-brand-accent);
+}
+
+/* A block with no surface of its own takes its ring a step outside it. */
+.crewlet-arrange-frame.is-bare {
+  --crewlet-arrange-frame-radius: var(--radius-md);
+  --crewlet-arrange-frame-outset: var(--spacing-1);
+}
+
+/* Carried, the block is the hole it leaves. */
+.crewlet-arrange-frame.is-editing[data-reorder='dragging']::after {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame[data-reorder='dragging'] > .crewlet-arrange-frame__content {
+  opacity: 0.3;
+}
+
+/* Where a block from another list will land: a bar of the accent in the gap
+   before the block it will precede. */
+.crewlet-arrange-frame[data-reorder-target='before']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--spacing-2) * -1 - 2px);
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* ...or after the last block, when it will land at the end. */
+.crewlet-arrange-frame[data-reorder-target='after']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: calc(var(--spacing-2) * -1 - 2px);
+  bottom: 0;
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* Beside a block that spans its row, the bar runs along the gap above it,
+   or below it when it is the last. */
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target]::before {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 3px;
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='before']::before {
+  top: calc(var(--spacing-2) * -1 - 2px);
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='after']::before {
+  bottom: calc(var(--spacing-2) * -1 - 2px);
+}
+
+/* Just added: one pulse of the accent around it. */
+.crewlet-arrange-frame.is-fresh {
+  animation: crewlet-arrange-frame-fresh calc(var(--motion-duration-slow) * 4) var(--motion-easing-out) 1;
+}
+@keyframes crewlet-arrange-frame-fresh {
+  0%,
+  40% {
+    box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+/* ---- The toolbar -------------------------------------------------------- */
+
+/* On the block's top edge, half outside it: clear of a card's own header
+   links, and of the block above, which is a row gap away. */
+.crewlet-arrange-frame__bar {
+  position: absolute;
+  top: calc(var(--crewlet-arrange-frame-outset) * -1);
+  right: var(--spacing-3);
+  z-index: var(--z-index-raised);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-50%);
+}
+
+.crewlet-arrange-frame__sep:first-child {
+  display: none;
+}
+.crewlet-arrange-frame__sep {
+  align-self: stretch;
+  width: 1px;
+  margin: 3px 2px;
+  background: var(--color-border-default);
+}
+
+/* ---- Resize handles ------------------------------------------------------- */
+
+.crewlet-arrange-frame__resize {
+  position: absolute;
+  z-index: var(--z-index-raised);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-text-tertiary);
+  touch-action: none;
+}
+.crewlet-arrange-frame__grip {
+  position: absolute;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame__resize:hover,
+.crewlet-arrange-frame__resize:focus-visible,
+.crewlet-arrange-frame.is-resizing .crewlet-arrange-frame__resize {
+  color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame__resize:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+  border-radius: var(--radius-sm);
+}
+
+/* BOTH WAYS: a bracket in the corner, following the card's own radius. */
+.crewlet-arrange-frame__resize.is-corner {
+  right: calc(var(--crewlet-arrange-frame-outset) * -1);
+  bottom: calc(var(--crewlet-arrange-frame-outset) * -1);
+  width: 22px;
+  height: 22px;
+  cursor: nwse-resize;
+}
+.crewlet-arrange-frame__resize.is-corner > .crewlet-arrange-frame__grip {
+  right: 4px;
+  bottom: 4px;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  border-bottom-right-radius: calc(var(--crewlet-arrange-frame-radius) - 4px);
+}
+
+/* WIDTH ONLY: a grip on the right edge, the handle of a column splitter,
+   in the corner bracket's colour and ringed in the page's ground so it reads
+   over the card's border. */
+.crewlet-arrange-frame__resize.is-edge {
+  top: 50%;
+  right: calc(-7px - var(--crewlet-arrange-frame-outset));
+  width: 14px;
+  height: 36px;
+  cursor: ew-resize;
+  transform: translateY(-50%);
+}
+.crewlet-arrange-frame__resize.is-edge > .crewlet-arrange-frame__grip {
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  width: 6px;
+  border-radius: var(--radius-pill);
+  background: currentColor;
+  box-shadow: 0 0 0 2px var(--color-surface-background);
+}
+
+/* ---- What shows when ---------------------------------------------------- */
+
+/* The toolbar and the handle belong to the innermost block hovered or
+   focused, and stay while its menu is open or it is being resized. */
+.crewlet-arrange-frame__bar,
+.crewlet-arrange-frame__resize {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )
+  > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize),
+.crewlet-arrange-frame.is-editing > .crewlet-arrange-frame__bar:has([aria-expanded='true']),
+.crewlet-arrange-frame.is-editing:has(> .crewlet-arrange-frame__bar [aria-expanded='true'])
+  > .crewlet-arrange-frame__resize,
+.crewlet-arrange-frame.is-resizing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* A touch screen has no hover to reveal them with. */
+@media (hover: none) {
+  .crewlet-arrange-frame.is-editing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* ---- While resizing ------------------------------------------------------- */
+
+/* The columns of the grid the block sits on, across its row. */
+.crewlet-arrange-frame__guides {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: var(--z-index-raised);
+  display: grid;
+  pointer-events: none;
+}
+.crewlet-arrange-frame__guides > span {
+  border-inline: 1px dashed var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  opacity: 0.3;
+}
+
+/* The size it will land at, over the middle of the block. */
+.crewlet-arrange-frame__size {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: calc(var(--z-index-raised) + 1);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inverse);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-frame__bar,
+  .crewlet-arrange-frame__resize,
+  .crewlet-arrange-frame__grip {
+    transition: none;
+  }
+  .crewlet-arrange-frame.is-fresh {
+    animation: none;
+  }
+}
+
+
+/* ArrangeGroup-SHFHA7BE.css */
+/*
+ * ArrangeGroup: a titled band of blocks. The hue is the header's; the body
+ * stays the page's ground, so the cards inside keep their own contrast.
+ */
+
+.crewlet-arrange-group {
+  --crewlet-arrange-group-band: var(--color-surface-subtle);
+  --crewlet-arrange-group-line: var(--color-border-default);
+  --crewlet-arrange-group-ink: var(--color-text-primary);
+  --crewlet-arrange-group-mark: var(--color-border-strong);
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--crewlet-arrange-group-line);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-background);
+  overflow: clip;
+}
+
+.crewlet-arrange-group--purple { --crewlet-arrange-group-band: var(--color-node-purple-fill); --crewlet-arrange-group-line: var(--color-node-purple-line); --crewlet-arrange-group-ink: var(--color-node-purple-ink); --crewlet-arrange-group-mark: var(--color-node-purple); }
+.crewlet-arrange-group--cyan { --crewlet-arrange-group-band: var(--color-node-cyan-fill); --crewlet-arrange-group-line: var(--color-node-cyan-line); --crewlet-arrange-group-ink: var(--color-node-cyan-ink); --crewlet-arrange-group-mark: var(--color-node-cyan); }
+.crewlet-arrange-group--green { --crewlet-arrange-group-band: var(--color-node-green-fill); --crewlet-arrange-group-line: var(--color-node-green-line); --crewlet-arrange-group-ink: var(--color-node-green-ink); --crewlet-arrange-group-mark: var(--color-node-green); }
+.crewlet-arrange-group--amber { --crewlet-arrange-group-band: var(--color-node-amber-fill); --crewlet-arrange-group-line: var(--color-node-amber-line); --crewlet-arrange-group-ink: var(--color-node-amber-ink); --crewlet-arrange-group-mark: var(--color-node-amber); }
+.crewlet-arrange-group--rose { --crewlet-arrange-group-band: var(--color-node-rose-fill); --crewlet-arrange-group-line: var(--color-node-rose-line); --crewlet-arrange-group-ink: var(--color-node-rose-ink); --crewlet-arrange-group-mark: var(--color-node-rose); }
+.crewlet-arrange-group--blue { --crewlet-arrange-group-band: var(--color-node-blue-fill); --crewlet-arrange-group-line: var(--color-node-blue-line); --crewlet-arrange-group-ink: var(--color-node-blue-ink); --crewlet-arrange-group-mark: var(--color-node-blue); }
+
+.crewlet-arrange-group__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2);
+  border-bottom: 1px solid var(--crewlet-arrange-group-line);
+  background: var(--crewlet-arrange-group-band);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__head {
+  border-bottom-color: transparent;
+}
+
+.crewlet-arrange-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--crewlet-arrange-group-ink);
+  font: inherit;
+  cursor: pointer;
+}
+/* Editing, the toggle is the chevron alone, a square of its own, so its
+   hover never runs into the name field beside it. */
+.crewlet-arrange-group__toggle.is-icon {
+  flex: 0 0 auto;
+  justify-content: center;
+  width: var(--size-row-sm);
+  padding: 0;
+}
+.crewlet-arrange-group__toggle:hover {
+  background: var(--color-surface-hover);
+}
+.crewlet-arrange-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-arrange-group__chevron {
+  flex-shrink: 0;
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__chevron {
+  transform: rotate(-90deg);
+}
+
+.crewlet-arrange-group__title,
+.crewlet-arrange-group__title-field {
+  overflow: hidden;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--crewlet-arrange-group-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Editing, the name is typed where it is read: the title itself, which
+   shows it is a field on hover and takes a ring when focused. */
+.crewlet-arrange-group__title-field {
+  /* As wide as the name, so the count sits just after it. */
+  field-sizing: content;
+  min-width: 3ch;
+  max-width: 100%;
+  height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 1px dashed transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-family: inherit;
+  cursor: text;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group__title-field:hover {
+  border-color: var(--crewlet-arrange-group-mark);
+}
+/* The ring is drawn over the field's own edge, never beside it. */
+.crewlet-arrange-group__title-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+  border-style: solid;
+  border-color: var(--color-focus);
+  background: var(--color-surface-background);
+}
+.crewlet-arrange-group__title-field::placeholder {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-arrange-group__count {
+  flex-shrink: 0;
+}
+
+.crewlet-arrange-group__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-inline-start: auto;
+}
+
+.crewlet-arrange-group__body {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--spacing-4);
+  align-items: stretch;
+  padding: var(--spacing-4);
+  min-height: 5rem;
+}
+.crewlet-arrange-group__body[data-reorder-over='true'] {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-arrange-group__empty {
+  display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-group__chevron,
+  .crewlet-arrange-group__title-field {
+    transition: none;
+  }
+}
+
+/* Arranging, the header is what a pointer moves the group by. */
+.crewlet-arrange-frame[draggable='true'] > .crewlet-arrange-frame__content > .crewlet-arrange-group > .crewlet-arrange-group__head {
+  cursor: grab;
+}
+
+
+/* ArrangeList-NNRTDFI5.css */
+/*
+ * ArrangeList: rows a reader puts in order and switches on and off.
+ *
+ * The row is a quiet inset band rather than a card: a panel holding eight of
+ * them is a list, and eight bordered boxes read as eight separate objects.
+ */
+
+.crewlet-arrange-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-arrange-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-arrange-list__item:hover {
+  border-color: var(--color-border-default);
+}
+
+/* The row being carried is a gap in the list, outlined where it will land. */
+.crewlet-arrange-list__item[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+  background: transparent;
+}
+.crewlet-arrange-list__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
+.crewlet-arrange-list__handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+.crewlet-arrange-list__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-arrange-list__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-arrange-list__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+/* The toggle takes the row's width, so its label is the row's target. */
+.crewlet-arrange-list__toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Off, the words step back; the switch itself already says off. */
+.crewlet-arrange-list__item.is-off .crewlet-arrange-list__icon,
+.crewlet-arrange-list__item.is-off .crewlet-switch__label,
+.crewlet-arrange-list__item.is-off .crewlet-checkbox__label {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-arrange-list__trailing {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.crewlet-arrange-list__moves {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-list__item {
+    transition: none;
+  }
+}
+
+
 /* ArtifactCard-EXVAEBV6.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
@@ -5522,6 +6207,99 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CommentThread-7VXOFTZO.css */
+/* CommentThread: a document's remarks, one per row with a hairline between,
+   then the field to add one. */
+.crewlet-comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-comment-thread__empty,
+.crewlet-comment-thread__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-comment-thread__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-comment-thread__comment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--spacing-3) 0;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-comment-thread__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__author {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-comment-thread__meta {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* Reply sits at the row's far end, wherever the head wraps. */
+.crewlet-comment-thread__reply {
+  margin-inline-start: auto;
+}
+
+.crewlet-comment-thread__compose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-comment-thread__replying {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+
 /* Composer-ABGJIAIR.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
@@ -5613,6 +6391,36 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* ConflictNote-DH77PYF7.css */
+/* ConflictNote: a refused write's sentence in the danger ink, with its glyph
+   so the colour is never the only carrier, and its controls beside it. */
+.crewlet-conflict-note {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  max-width: 40rem;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-conflict-note__glyph {
+  flex: none;
+}
+
+.crewlet-conflict-note__text {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+
+.crewlet-conflict-note__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+
 /* Container-3TSKMGNI.css */
 /*
  * Container, the centred content measure. One max-width scale shared by every
@@ -8754,6 +9562,100 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DiffView-RVLIHTKG.css */
+/* DiffView: a line diff, monospace and line-numbered on both sides.
+
+   A changed line is marked three ways, a tint, a drawn mark and a word read
+   in its place, because colour alone is not a signal and a printed or
+   forced-colours render loses the tint entirely. The tint is the soft step of
+   the state and the mark the matching ink step, the pairing the palette suite
+   measures. */
+.crewlet-diff-view {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-diff-view__section + .crewlet-diff-view__section,
+.crewlet-diff-view__skip + .crewlet-diff-view__line {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A GAP SAYS WHAT IT STANDS FOR. Silently closed, a document edited at both
+   ends looks like one rewritten in the middle. */
+.crewlet-diff-view__skip {
+  padding: var(--spacing-1) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-diff-view__line {
+  display: grid;
+  grid-template-columns: 3.5ch 3.5ch 2ch minmax(0, 1fr);
+  gap: var(--spacing-2);
+  padding: calc(var(--spacing-1) / 4) var(--spacing-3) calc(var(--spacing-1) / 4) var(--spacing-2);
+}
+
+.crewlet-diff-view__number {
+  color: var(--color-text-tertiary);
+  text-align: right;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-view__mark {
+  text-align: center;
+  user-select: none;
+}
+
+.crewlet-diff-view__text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-view__line--add {
+  background: var(--color-feedback-success-soft);
+}
+
+.crewlet-diff-view__line--add .crewlet-diff-view__mark {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-view__line--remove {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-diff-view__line--remove .crewlet-diff-view__mark {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* DiffSummary: the size of the change, in the same inks as its lines. */
+.crewlet-diff-summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-diff-summary__added,
+.crewlet-diff-summary__removed {
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-summary__added {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-summary__removed {
+  color: var(--color-feedback-danger-ink);
+}
+
+
 /* Disclosure-VKBJJIZ7.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
@@ -8933,6 +9835,46 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Divider-3Z77ZAJH.css */
+/* Divider: a rule across its space, with its name at its start or in its middle. */
+
+.crewlet-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-sm);
+  min-width: 0;
+}
+.crewlet-divider::before,
+.crewlet-divider::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--color-border-strong);
+}
+/* One rule unless the words sit in the middle of it. */
+.crewlet-divider:not(.crewlet-divider--center)::before {
+  display: none;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::before {
+  display: block;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::after {
+  display: none;
+}
+
+.crewlet-divider__label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
 /* Document-PQGXJHB7.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
@@ -9698,7 +10640,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* HuePicker-5QIUR6L7.css */
+/* HuePicker-PAIGH6LR.css */
 /*
  * A hue's swatch: the hue itself, as a dot beside its name. The name carries
  * the choice; the dot is there so the row can be scanned for a colour.
@@ -9718,6 +10660,12 @@ svg.crewlet-datetime__chevron {
 .crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
 .crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
 
+/* No hue: a ring in the hairline, so the row still reads as swatches. */
+.crewlet-hue-picker__swatch--none {
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+}
+
 
 /* IconButton-VYWP6SGW.css */
 /*
@@ -9895,6 +10843,39 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* IconTile-4GNWTLAW.css */
+/*
+ * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
+ * from one measured family (`--color-node-*`); left out, the brand accent's
+ * soft fill and ink. No edge: the tile sits inside a card that has one.
+ */
+.crewlet-icon-tile {
+  --crewlet-icon-tile-fill: var(--color-brand-accent-soft);
+  --crewlet-icon-tile-ink: var(--color-brand-accent-ink);
+  --crewlet-icon-tile-size: var(--size-row-md);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-icon-tile-size);
+  height: var(--crewlet-icon-tile-size);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-icon-tile-fill);
+  color: var(--crewlet-icon-tile-ink);
+}
+
+.crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
+.crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
+
+.crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
+.crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
+.crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
+.crewlet-icon-tile--amber { --crewlet-icon-tile-fill: var(--color-node-amber-fill); --crewlet-icon-tile-ink: var(--color-node-amber-ink); }
+.crewlet-icon-tile--rose { --crewlet-icon-tile-fill: var(--color-node-rose-fill); --crewlet-icon-tile-ink: var(--color-node-rose-ink); }
+.crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }
+
+
 /* ImageUpload-NVGMN7DP.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
@@ -12670,7 +13651,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-RQAYGG4L.css */
+/* Modal-XOSV6FAH.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -12730,6 +13711,12 @@ svg.crewlet-datetime__chevron {
 }
 
 /* Inside a LayerHost the overlay covers the host, not the window. */
+/* The page behind stays as it is: see `backdrop` in Modal.tsx. */
+.crewlet-modal-overlay--clear {
+  background: transparent;
+  backdrop-filter: none;
+}
+
 .crewlet-modal-overlay--in-host {
   position: absolute;
 }
@@ -13049,6 +14036,14 @@ svg.crewlet-datetime__chevron {
   margin: calc(var(--spacing-1) * -1);
 }
 
+/* The step back leads the head, its glyph on the title's inline start, as
+   the close control's sits on the head's end. */
+.crewlet-modal__back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
 .crewlet-modal__body {
   flex: 1 1 auto;
   min-height: 0;
@@ -13276,6 +14271,67 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Note-RT4L6VUT.css */
+/*
+ * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
+ */
+
+.crewlet-note {
+  --crewlet-note-paper: var(--color-surface-subtle);
+  --crewlet-note-edge: var(--color-border-default);
+  --crewlet-note-ink: var(--color-text-primary);
+
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  border: 1px solid var(--crewlet-note-edge);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-note-paper);
+  color: var(--crewlet-note-ink);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-note--purple { --crewlet-note-paper: var(--color-node-purple-fill); --crewlet-note-edge: var(--color-node-purple-line); --crewlet-note-ink: var(--color-node-purple-ink); }
+.crewlet-note--cyan { --crewlet-note-paper: var(--color-node-cyan-fill); --crewlet-note-edge: var(--color-node-cyan-line); --crewlet-note-ink: var(--color-node-cyan-ink); }
+.crewlet-note--green { --crewlet-note-paper: var(--color-node-green-fill); --crewlet-note-edge: var(--color-node-green-line); --crewlet-note-ink: var(--color-node-green-ink); }
+.crewlet-note--amber { --crewlet-note-paper: var(--color-node-amber-fill); --crewlet-note-edge: var(--color-node-amber-line); --crewlet-note-ink: var(--color-node-amber-ink); }
+.crewlet-note--rose { --crewlet-note-paper: var(--color-node-rose-fill); --crewlet-note-edge: var(--color-node-rose-line); --crewlet-note-ink: var(--color-node-rose-ink); }
+.crewlet-note--blue { --crewlet-note-paper: var(--color-node-blue-fill); --crewlet-note-edge: var(--color-node-blue-line); --crewlet-note-ink: var(--color-node-blue-ink); }
+
+.crewlet-note--center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.crewlet-note--lg {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-tight);
+}
+
+/* Prose inside takes the note's ink, links included. */
+.crewlet-note :is(p, li, h2, h3, h4, strong, em) {
+  color: inherit;
+}
+.crewlet-note a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.crewlet-note > :first-child {
+  margin-top: 0;
+}
+.crewlet-note > :last-child {
+  margin-bottom: 0;
+}
+
+
 /* ObjectHeader-UNVYM2KD.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
@@ -14512,94 +15568,316 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PageHeader-6EYWQXRE.css */
-/*
- * The head of a screen.
- *
- * THE OPERATOR'S TITLE, NOT THE MARKETING ONE. It was the 32px display step
- * over a 16px sentence, which is the type a landing page opens with: on a
- * screen whose job is to show a table it took a third of the first fold and
- * pushed the rows a reader came for below it, and it said the screen's name
- * twice as loudly as the shell's own bar says it. The 20px step over the
- * compact sentence is the head every screen on the dashboard wears, and it
- * leaves the content the largest thing on the page.
- */
-
-.crewlet-page-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--spacing-3);
-  flex-wrap: wrap;
-  min-width: 0;
+/* PageHeader-6EYWQXRE.css */
+/*
+ * The head of a screen.
+ *
+ * THE OPERATOR'S TITLE, NOT THE MARKETING ONE. It was the 32px display step
+ * over a 16px sentence, which is the type a landing page opens with: on a
+ * screen whose job is to show a table it took a third of the first fold and
+ * pushed the rows a reader came for below it, and it said the screen's name
+ * twice as loudly as the shell's own bar says it. The 20px step over the
+ * compact sentence is the head every screen on the dashboard wears, and it
+ * leaves the content the largest thing on the page.
+ */
+
+.crewlet-page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.crewlet-page-header__lead {
+  display: flex;
+  flex-direction: column;
+  /* One step. The title and the sentence under it are ONE block: at the
+     8px step they read as a heading with a caption parked below it. */
+  gap: var(--spacing-1);
+  min-width: 0;
+  /* Takes the row, so the actions wrap under the title rather than squeezing
+     a long screen name into two words and an ellipsis. */
+  flex: 1 1 auto;
+}
+
+.crewlet-page-header__titles {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+/*
+ * THE TITLE KEEPS THE PAGE'S OWN LEADING. It is a heading element, and the
+ * document baseline sets every heading at the tight step, which is the right
+ * answer for a stack of headings in prose and the wrong one here: this is one
+ * line above one sentence, and at 1.2 the two sit closer than the gap between
+ * them, so the head reads as three lines of something rather than a title with
+ * a caption. Declared here rather than left to the baseline because a screen
+ * that renders the title in a `div` would otherwise draw a different head from
+ * the one that renders it in an `h1`.
+ */
+.crewlet-page-header__title {
+  margin: 0;
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-normal);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--color-text-primary);
+  min-width: 0;
+}
+
+.crewlet-page-header__badges {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+
+.crewlet-page-header__description {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-family: var(--font-family-sans);
+  /* A sentence that answers "what is this screen for", read once. It is not
+     body copy, and at the body step it competed with the table under it. */
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-tertiary);
+}
+
+/* One step between actions, which is what keeps a run of buttons reading as
+   one cluster at the end of the row rather than as three separate controls. */
+.crewlet-page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex-wrap: wrap;
+}
+
+
+/* PeopleRail-R64WVOSH.css */
+/* PeopleRail: a raised column of everybody present, one row a person, the
+   name over what they are doing and the controls at the row's end. */
+.crewlet-people-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-people-rail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.crewlet-people-rail__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-people-rail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-people-rail__person {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-people-rail__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-people-rail__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-people-rail__where {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-people-rail__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-people-rail__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+
+/* PinTile-IIA25MNZ.css */
+/*
+ * PinTile: one pinned thing, a link with its facts.
+ *
+ * A raised row rather than a card with a header: a shelf holds six of them,
+ * and six headed cards are six sections where the reader wanted six links.
+ */
+
+.crewlet-pin-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: 56px;
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-surface-hover);
+}
+.crewlet-pin-tile:has(.crewlet-pin-tile__handle) {
+  padding-inline-start: var(--spacing-1);
+}
+
+.crewlet-pin-tile[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+.crewlet-pin-tile[data-reorder='dragging'] > * {
+  opacity: 0.35;
+}
+
+.crewlet-pin-tile__handle {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-pin-tile__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
 }
 
-.crewlet-page-header__lead {
+.crewlet-pin-tile__body {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  /* One step. The title and the sentence under it are ONE block: at the
-     8px step they read as a heading with a caption parked below it. */
-  gap: var(--spacing-1);
+  gap: 2px;
   min-width: 0;
-  /* Takes the row, so the actions wrap under the title rather than squeezing
-     a long screen name into two words and an ellipsis. */
-  flex: 1 1 auto;
 }
 
-.crewlet-page-header__titles {
+.crewlet-pin-tile__head {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  flex-wrap: wrap;
   min-width: 0;
 }
 
-/*
- * THE TITLE KEEPS THE PAGE'S OWN LEADING. It is a heading element, and the
- * document baseline sets every heading at the tight step, which is the right
- * answer for a stack of headings in prose and the wrong one here: this is one
- * line above one sentence, and at 1.2 the two sit closer than the gap between
- * them, so the head reads as three lines of something rather than a title with
- * a caption. Declared here rather than left to the baseline because a screen
- * that renders the title in a `div` would otherwise draw a different head from
- * the one that renders it in an `h1`.
- */
-.crewlet-page-header__title {
-  margin: 0;
-  font-family: var(--font-family-display);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-line-height-normal);
-  letter-spacing: var(--font-letter-spacing-tight);
+.crewlet-pin-tile__link {
+  overflow: hidden;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
-  min-width: 0;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The tile's whole area, as the link's. */
+.crewlet-pin-tile__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.crewlet-pin-tile__link:focus-visible {
+  outline: 2px solid transparent;
+}
+/* The tile's ring, over its own edge, for the link that is its target. */
+.crewlet-pin-tile:has(.crewlet-pin-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
 }
 
-.crewlet-page-header__badges {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex-wrap: wrap;
+.crewlet-pin-tile__status {
+  display: inline-flex;
+  flex-shrink: 0;
 }
 
-.crewlet-page-header__description {
-  margin: 0;
-  max-width: var(--size-measure);
-  font-family: var(--font-family-sans);
-  /* A sentence that answers "what is this screen for", read once. It is not
-     body copy, and at the body step it competed with the table under it. */
-  font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+.crewlet-pin-tile__meta {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.crewlet-pin-tile__kind {
   color: var(--color-text-tertiary);
 }
 
-/* One step between actions, which is what keeps a run of buttons reading as
-   one cluster at the end of the row rather than as three separate controls. */
-.crewlet-page-header__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  flex-wrap: wrap;
+.crewlet-pin-tile__figure {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+/* Above the stretched link, so it takes its own press. */
+.crewlet-pin-tile__unpin {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  color: var(--color-brand-accent-ink);
+  opacity: 0.55;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover .crewlet-pin-tile__unpin,
+.crewlet-pin-tile:focus-within .crewlet-pin-tile__unpin {
+  opacity: 1;
+}
+@media (hover: none) {
+  .crewlet-pin-tile__unpin {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-pin-tile,
+  .crewlet-pin-tile__unpin {
+    transition: none;
+  }
 }
 
 
@@ -18410,7 +19688,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-HVG6O62W.css */
+/* StatGroup-PADTJCUQ.css */
 /*
  * A row of stat tiles.
  *
@@ -18433,6 +19711,13 @@ svg.crewlet-select__chevron {
   overflow: hidden;
 }
 
+/* Inside another card: the card's surface and edge are the row's. */
+.crewlet-stat-group--flush {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
 /*
  * A tile inside the row brings no surface of its own, whether or not its
  * caller remembered `flush`. The group draws one card and the hairlines
@@ -19556,6 +20841,113 @@ b.crewlet-switcher__match {
 }
 
 
+/* TableCells-3VN5N2M3.css */
+/* The read-only table cells. Each one holds a single line and shrinks inside
+   its column (`min-width: 0`), so a long value is cut with an ellipsis and
+   its whole text on the title rather than standing the row two lines tall. */
+
+.crewlet-table-cell__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* AN IDENTIFIER IS ONE LINE, cut with its value on the title rather than
+   broken at whichever character the column ran out on. Named with the link's
+   class as well, so a linked identifier keeps the block box whatever order
+   the two stylesheets load in. */
+.crewlet-table-cell__key,
+.crewlet-link.crewlet-table-cell__key {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+}
+
+.crewlet-table-cell__number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__date {
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__entity,
+.crewlet-link.crewlet-table-cell__entity,
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  gap: calc(var(--spacing-1) * 1.5);
+}
+
+.crewlet-table-cell__badge,
+.crewlet-table-cell__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-table-cell__icon {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__glyph {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  /* The quiet state is still a mark, so it takes the tertiary step: the
+     decoration step does not clear 3:1 on every ground. */
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__status--info .crewlet-table-cell__glyph {
+  color: var(--color-feedback-info);
+}
+
+.crewlet-table-cell__status--success .crewlet-table-cell__glyph {
+  color: var(--color-feedback-success);
+}
+
+.crewlet-table-cell__status--warning .crewlet-table-cell__glyph {
+  color: var(--color-feedback-warning);
+}
+
+.crewlet-table-cell__status--danger .crewlet-table-cell__glyph {
+  color: var(--color-feedback-danger);
+}
+
+.crewlet-table-cell__status--brand .crewlet-table-cell__glyph {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-table-cell__tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-table-cell__more {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+
 /* Tabs-ITJYJFMU.css */
 /*
  * The pill register: Tabs and SegmentedControl.
@@ -23615,6 +25007,77 @@ svg.crewlet-time-window__tick {
 }
 
 
+/* VersionCompare-UUZOPTQO.css */
+/* VersionCompare: a head naming the two versions with the lens switch at its
+   end, then the changes or the two versions. */
+.crewlet-version-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-version-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-version-compare__titles {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-version-compare__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-version-compare__description,
+.crewlet-version-compare__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-version-compare__changes,
+.crewlet-version-compare__versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/* SIDE BY SIDE where there is room for two readable columns, and one above
+   the other where there is not, decided by the width the panes are given
+   rather than by the viewport, so a comparison in a side pane stacks too. */
+.crewlet-version-compare__panes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-4);
+}
+
+.crewlet-version-compare__pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-compare__pane-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+
 /* VersionTimeline-EBJ6MIPJ.css */
 /*
  * A version list beside the version on show. The row's main line is the