@crewlethq/ui 0.24.0 → 0.26.0

package/dist/styles.css

@@ -2086,6 +2086,76 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactCover-D4MBEJ5H.css */
+/* The frame every native cover shares (DocCover, SheetCover, DashboardCover):
+   it fills a card's preview edge to edge and clips whatever runs past it. */
+.crewlet-artifact-cover {
+  box-sizing: border-box;
+  align-self: stretch;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* A doc's cover: a small page, inset from the card's edges, whose text runs
+   off the bottom under a fade rather than stopping mid-line at a hard edge. */
+.crewlet-doc-cover {
+  position: relative;
+  display: block;
+  padding: var(--spacing-3) var(--spacing-4) 0;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.crewlet-doc-cover::after {
+  content: '';
+  position: absolute;
+  inset: auto 0 0;
+  height: 40%;
+  background: linear-gradient(to bottom, transparent, var(--color-surface-elevated));
+  pointer-events: none;
+}
+
+.crewlet-doc-cover__page {
+  font-size: var(--font-size-2xs);
+  line-height: 1.45;
+}
+
+.crewlet-doc-cover__page > :first-child {
+  margin-top: 0;
+}
+
+.crewlet-doc-cover__page h1,
+.crewlet-doc-cover__page h2,
+.crewlet-doc-cover__page h3 {
+  font-size: var(--font-size-sm);
+}
+
+/* A sheet's cover: its first columns and rows as a hairline grid. */
+.crewlet-sheet-cover {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-sheet-cover-columns), minmax(0, 1fr));
+  grid-auto-rows: min-content;
+  background: var(--color-surface-elevated);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-sheet-cover__cell {
+  overflow: hidden;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.crewlet-sheet-cover__cell--head {
+  background: var(--color-surface-inset);
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-medium);
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -3879,6 +3949,284 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CanvasBoard-ZLPDINSM.css */
+/*
+ * A canvas of artboards and notes (CanvasBoard.tsx). Boards and notes are laid
+ * out in canvas pixels inside the canvas's world and scale with it; their
+ * chrome (titles, handles, tools) is counter-scaled by the zoom the component
+ * writes on the layer, so it stays one size on screen.
+ */
+
+.crewlet-canvas-board {
+  height: 100%;
+  min-height: 0;
+}
+
+.crewlet-canvas-board__layer {
+  --crewlet-canvas-board-zoom: 1;
+  --crewlet-canvas-board-unzoom: calc(1 / var(--crewlet-canvas-board-zoom));
+  position: relative;
+}
+
+/* ---- a board ------------------------------------------------------------ */
+
+.crewlet-canvas-board__board {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.crewlet-canvas-board__body {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-xs);
+}
+
+/* The page a live board runs fills its frame exactly. */
+.crewlet-canvas-board__body > :not(.crewlet-canvas-board__shield) {
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-canvas-board__board[data-active] .crewlet-canvas-board__body {
+  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-focus);
+  outline-offset: 0;
+}
+
+/*
+ * THE SHIELD over a live board that does not hold the pointer: a press on it
+ * pans the canvas as the field around it does, because a sandboxed page would
+ * otherwise swallow every press that began over it.
+ */
+.crewlet-canvas-board__shield {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.crewlet-canvas-board[data-editable] .crewlet-canvas-board__shield {
+  cursor: inherit;
+}
+
+/* A board that is not running draws its title and size at screen size. */
+.crewlet-canvas-board__placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--color-surface-subtle);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  text-align: center;
+}
+
+/* ONE BLOCK, SCALED ONCE: its lines keep their spacing at screen size rather
+   than each line shrinking back into the space the zoom left it. */
+.crewlet-canvas-board__placeholder-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__placeholder-title {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ---- chrome, at screen size --------------------------------------------- */
+
+.crewlet-canvas-board__chrome {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  box-sizing: border-box;
+  width: calc(100% * var(--crewlet-canvas-board-zoom));
+  padding-bottom: var(--spacing-1);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: bottom left;
+}
+
+.crewlet-canvas-board__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__handle {
+  appearance: none;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font: inherit;
+  cursor: move;
+  touch-action: none;
+}
+
+.crewlet-canvas-board__handle:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-default);
+}
+
+/* Both handles draw an edge of their own, so the ring sits over it. */
+.crewlet-canvas-board__handle:focus-visible,
+.crewlet-canvas-board__resize:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-canvas-board__resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--color-brand-accent);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  cursor: nwse-resize;
+  touch-action: none;
+  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__hint {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin: 0;
+  padding-top: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: top left;
+}
+
+/* ---- a note ------------------------------------------------------------- */
+
+.crewlet-canvas-board__note {
+  position: absolute;
+  box-sizing: border-box;
+}
+
+/*
+ * A TITLE IS SET IN ITS BOX'S OWN HEIGHT, so the author's frame is the type
+ * size: a heading over a group of boards is as large as the box drawn for it.
+ */
+.crewlet-canvas-board__note[data-kind='title'] {
+  container-type: size;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-primary);
+}
+
+.crewlet-canvas-board__note[data-kind='title'] .crewlet-canvas-board__note-text {
+  font-size: 60cqh;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__note-text {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.crewlet-canvas-board__note-field {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  resize: none;
+}
+
+.crewlet-canvas-board__note-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-canvas-board__note-tools {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: bottom left;
+}
+
+.crewlet-canvas-board__note-move {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  background-image: radial-gradient(var(--color-text-tertiary) 1px, transparent 1.5px);
+  background-size: var(--spacing-2) var(--spacing-2);
+}
+
+
+/* CanvasSchematic-PLB3N46J.css */
+/*
+ * A design's schematic (CanvasSchematic.tsx): rectangles drawn in the
+ * canvas's own coordinates, filling the box they are given.
+ */
+
+.crewlet-canvas-schematic {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.crewlet-canvas-schematic svg {
+  width: 100%;
+  height: 100%;
+}
+
+.crewlet-canvas-schematic__board {
+  fill: var(--color-surface-elevated);
+  stroke: var(--color-border-strong);
+  stroke-width: 1;
+}
+
+.crewlet-canvas-schematic__board[data-cover] {
+  fill: var(--color-brand-accent-soft);
+  stroke: var(--color-brand-accent);
+}
+
+.crewlet-canvas-schematic__note {
+  fill: var(--color-surface-inset);
+}
+
+.crewlet-canvas-schematic__title {
+  fill: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
+}
+
+
 /* Card-KJOYHDTJ.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
@@ -5260,7 +5608,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Checkbox-KT7RS6QQ.css */
+/* Checkbox-5UORUG3F.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -5362,6 +5710,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-radius: var(--radius-lg);
 }
 
+/*
+ * THE COMPACT STEP, for a box in a dense form row beside small inputs and
+ * selects. The label takes their step, so a row of controls reads as one line,
+ * and the box shrinks with it; the nudge above is in `em` against the row's own
+ * size, so it still sits the box on the label's first line.
+ */
+.crewlet-checkbox--sm {
+  --crewlet-checkbox-size: 14px;
+
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-checkbox--sm .crewlet-checkbox__label {
+  font-size: var(--font-size-compact);
+}
+
 .crewlet-checkbox.is-disabled,
 .crewlet-checkbox.is-disabled .crewlet-checkbox__control {
   cursor: not-allowed;
@@ -6713,6 +7077,152 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* DashboardCover-RMINBODB.css */
+/*
+ * DashboardCover: a dashboard's cover at a gallery card's preview size (16:9,
+ * about 280 by 158 pixels at its smallest). Up to three headline figures, or a
+ * schematic of the board's first widgets, or the kind's glyph. Its frame is
+ * the shared .crewlet-artifact-cover in ArtifactCover.css.
+ */
+
+.crewlet-dashboard-cover {
+  height: 100%;
+  padding: var(--spacing-3);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-dashboard-cover--stats {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-dashboard-cover__stat {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  height: 100%;
+  max-height: 100%;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-dashboard-cover__label,
+.crewlet-dashboard-cover__source {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__label {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-dashboard-cover__value {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-xl);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dashboard-cover__source {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-dashboard-cover--layout {
+  display: grid;
+  grid-auto-rows: minmax(0, 1fr);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--spacing-2);
+}
+
+.crewlet-dashboard-cover__block {
+  box-sizing: border-box;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-dashboard-cover__block--chart {
+  align-items: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-dashboard-cover__block--table,
+.crewlet-dashboard-cover__block--note {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-dashboard-cover__block--stat {
+  align-items: center;
+}
+
+.crewlet-dashboard-cover__bar {
+  flex: 1;
+  min-width: 0;
+  border-radius: var(--radius-xs);
+  background: var(--color-data-1);
+}
+
+.crewlet-dashboard-cover__bar:nth-child(1) {
+  height: 40%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(2) {
+  height: 70%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(3) {
+  height: 55%;
+}
+
+.crewlet-dashboard-cover__bar:nth-child(4) {
+  height: 90%;
+}
+
+.crewlet-dashboard-cover__line {
+  height: var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-border-strong);
+}
+
+.crewlet-dashboard-cover__line:last-child {
+  width: 60%;
+}
+
+.crewlet-dashboard-cover__figure {
+  width: 50%;
+  height: var(--spacing-3);
+  border-radius: var(--radius-xs);
+  background: var(--color-text-tertiary);
+  opacity: 0.5;
+}
+
+.crewlet-dashboard-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
 /* DataTable-WZK3V62B.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
@@ -9193,6 +9703,138 @@ body.crewlet-data-table-resizing {
 }
 
 
+/* DatasetSource-47LBDMPR.css */
+/*
+ * DatasetSource: one entry of a dashboard's Sources rail. The title and its
+ * source kind, the definition, then where the rows stand, how many there are
+ * and how they are kept current, with the host's rows preview under it when
+ * selected.
+ */
+
+.crewlet-dataset-source {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: var(--radius-md);
+}
+
+.crewlet-dataset-source__summary {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+}
+
+button.crewlet-dataset-source__summary {
+  cursor: pointer;
+}
+
+button.crewlet-dataset-source__summary:hover {
+  background: var(--color-surface-hover);
+}
+
+button.crewlet-dataset-source__summary:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The accent boundary, as a selected card takes it, and the soft accent fill. */
+.crewlet-dataset-source--selected .crewlet-dataset-source__summary {
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-dataset-source__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-dataset-source__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-dataset-source__kind {
+  flex: none;
+}
+
+.crewlet-dataset-source__definition {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-dataset-source__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-dataset-source__state--blocked {
+  color: var(--color-text-secondary);
+}
+
+/* The separators are drawn, not typed, so a screen reader hears the facts alone. */
+.crewlet-dataset-source__rows::before,
+.crewlet-dataset-source__refresh::before {
+  content: '\00b7' / '';
+  margin-inline-end: var(--spacing-2);
+}
+
+.crewlet-dataset-source__meta > :first-child::before {
+  content: none;
+}
+
+.crewlet-dataset-source__stale {
+  display: inline-flex;
+  vertical-align: middle;
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-dataset-source__preview {
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+}
+
+.crewlet-dataset-source-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-dataset-source-list__item {
+  min-width: 0;
+}
+
+
 /* DateTimePicker-HG2KQXQ6.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
@@ -9897,39 +10539,120 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Document-PQGXJHB7.css */
+/* DocTabsEditor-RCOWHX5J.css */
 /*
- * Rendered markdown, set as a document (Document.tsx).
- *
- * Every size here is a step on the type ramp and every gap a spacing step,
- * because a reading column set in sizes of its own (32, 20, 18, 15 and 14.5px
- * were measured on one) is a column that drifts from every other surface.
+ * DocTabsEditor: a document's tabs as rows an editor titles, opens, moves and
+ * removes, with the row whose text is open marked, and a field to add one.
+ * The rows are quiet inset bands, as ArrangeList's are.
  */
 
-.crewlet-document {
-  /* The two rhythms a size sets: between blocks, and above a section. */
-  --crewlet-document-gap: var(--spacing-4);
-  --crewlet-document-section-gap: var(--spacing-6);
-  margin: 0;
+.crewlet-doc-tabs-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
   min-width: 0;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
-  line-height: var(--font-line-height-relaxed);
-  color: var(--color-text-secondary);
-  /* The renderer decides what a break is, so the whitespace rule is normal. */
-  white-space: normal;
-  overflow-wrap: break-word;
 }
 
-.crewlet-document--sm {
-  --crewlet-document-gap: var(--spacing-3);
-  --crewlet-document-section-gap: var(--spacing-5);
-  font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+.crewlet-doc-tabs-editor__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.crewlet-document--measure {
-  max-width: var(--size-measure);
+.crewlet-doc-tabs-editor__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-doc-tabs-editor__item.is-open {
+  border-color: var(--color-border-strong);
+}
+
+.crewlet-doc-tabs-editor__item[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+  background: transparent;
+}
+.crewlet-doc-tabs-editor__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
+.crewlet-doc-tabs-editor__handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+.crewlet-doc-tabs-editor__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-doc-tabs-editor__field {
+  display: flex;
+  flex: 1 1 12rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-doc-tabs-editor__problem {
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-doc-tabs-editor__moves {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.crewlet-doc-tabs-editor__add {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+
+/* Document-PQGXJHB7.css */
+/*
+ * Rendered markdown, set as a document (Document.tsx).
+ *
+ * Every size here is a step on the type ramp and every gap a spacing step,
+ * because a reading column set in sizes of its own (32, 20, 18, 15 and 14.5px
+ * were measured on one) is a column that drifts from every other surface.
+ */
+
+.crewlet-document {
+  /* The two rhythms a size sets: between blocks, and above a section. */
+  --crewlet-document-gap: var(--spacing-4);
+  --crewlet-document-section-gap: var(--spacing-6);
+  margin: 0;
+  min-width: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-secondary);
+  /* The renderer decides what a break is, so the whitespace rule is normal. */
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+.crewlet-document--sm {
+  --crewlet-document-gap: var(--spacing-3);
+  --crewlet-document-section-gap: var(--spacing-5);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-document--measure {
+  max-width: var(--size-measure);
 }
 
 /*
@@ -13585,7 +14308,87 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Meter-5VCSFMZW.css */
+/* MergeConflicts-O44ESH4T.css */
+/* MergeConflicts: each clash as the other side's lines beside the draft's,
+   with the choice under them, in one framed block that replaces the editor
+   until it is settled. */
+.crewlet-merge-conflicts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+}
+
+.crewlet-merge-conflicts__title {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.crewlet-merge-conflicts__note {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-merge-conflicts__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-merge-conflicts__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-merge-conflicts__sides {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+  gap: var(--spacing-3);
+}
+
+.crewlet-merge-conflicts__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-merge-conflicts__side figcaption {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-merge-conflicts__side pre {
+  margin: 0;
+  padding: var(--spacing-2);
+  overflow-x: auto;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  white-space: pre-wrap;
+}
+
+.crewlet-merge-conflicts__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+
+/* Meter-ZZRFUEOH.css */
 /*
  * The meter.
  *
@@ -13610,6 +14413,7 @@ svg.crewlet-datetime__chevron {
  */
 .crewlet-meter__legend {
   display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   justify-content: space-between;
   gap: var(--spacing-2);
@@ -13618,7 +14422,11 @@ svg.crewlet-datetime__chevron {
   min-width: 0;
 }
 
+/* THE LABEL KEEPS ITS WORDS: where the row is too narrow for both, the figure
+   moves to its own line rather than cutting the name to one letter. */
 .crewlet-meter__label {
+  flex: 1 0 auto;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -13651,6 +14459,10 @@ svg.crewlet-datetime__chevron {
   height: 6px;
   border-radius: var(--radius-pill);
   background: var(--color-surface-elevated);
+  /* An inset hairline gives the track an edge on ANY ground, so on the page
+     sheet in the light theme, where the raised rung is nearly the ground's
+     own tone, the extent of the bar is still there. */
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
   overflow: hidden;
 }
 
@@ -13668,6 +14480,12 @@ svg.crewlet-datetime__chevron {
   transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/* A READING ABOVE ZERO IS NEVER AN EMPTY TRACK: a few bytes of a gigabyte
+   rounds to no width at all, which reads as nothing used. */
+.crewlet-meter__fill--some {
+  min-width: var(--spacing-1);
+}
+
 .crewlet-meter__fill[data-tone='success'] { background: var(--color-feedback-success); }
 .crewlet-meter__fill[data-tone='warning'] { background: var(--color-feedback-warning); }
 .crewlet-meter__fill[data-tone='danger'] { background: var(--color-feedback-danger); }
@@ -14395,7 +15213,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* ObjectHeader-UNVYM2KD.css */
+/* ObjectHeader-D7GU7QNI.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
  */
@@ -14468,6 +15286,21 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
+/* The author's own sentence about the object: under the title, quieter than
+   it, and never more than two lines however long the sentence is. */
+.crewlet-object-header__description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  max-width: var(--size-measure);
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-object-header--peek .crewlet-object-header__title {
   font-size: var(--font-size-lg);
 }
@@ -16268,6 +17101,112 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* PresenterView-T2C6ZZ3N.css */
+/*
+ * PresenterView: the presenter's own screen beside the room's.
+ *
+ * The notes take the space a glance needs: a large, readable size and their
+ * own scroll, so a long note never pushes the next slide or the timer away.
+ */
+
+.crewlet-presenter {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
+  gap: var(--spacing-4);
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-background);
+  color: var(--color-text-primary);
+}
+
+.crewlet-presenter__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-height: 0;
+}
+
+.crewlet-presenter__main .crewlet-slide-stage {
+  flex: 1;
+  min-height: 0;
+  border-radius: var(--radius-md);
+}
+
+.crewlet-presenter__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-3);
+}
+
+.crewlet-presenter__position {
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-presenter__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-height: 0;
+}
+
+.crewlet-presenter__next .crewlet-slide-stage {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+.crewlet-presenter__end {
+  margin: 0;
+  padding: var(--spacing-6) var(--spacing-3);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+
+.crewlet-presenter__timer {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-presenter__elapsed {
+  margin-right: auto;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xl);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-presenter__notes {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  font-size: var(--font-size-lg);
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.crewlet-presenter__notes p {
+  margin: 0;
+}
+
+.crewlet-presenter__empty {
+  color: var(--color-text-tertiary);
+}
+
+@media (max-width: 48rem) {
+  .crewlet-presenter {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+}
+
+
 /* PricingCard-HTAHG4ST.css */
 /*
  * PricingCard, the plan-tier card surface.
@@ -17101,7 +18040,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Section-QRUPRIQ2.css */
+/* Section-QR3ILQVK.css */
 /*
  * Section, the vertical rhythm band. One spacing scale keeps the cadence
  * between page sections consistent, and collapses on small viewports.
@@ -17165,7 +18104,10 @@ button.crewlet-presence-stack__member:focus-visible {
   line-height: var(--font-line-height-normal);
   letter-spacing: var(--font-letter-spacing-tight);
   color: var(--color-text-primary);
-  min-width: 0;
+  /* THE TITLE NEVER WRAPS to make room for its hint: the hint is the one that
+     gives way (truncated beside it, or under it on a narrow screen). */
+  flex: none;
+  white-space: nowrap;
 }
 
 /*
@@ -17231,7 +18173,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SegmentedControl-PKBLJVSA.css */
+/* SegmentedControl-FLI45IOW.css */
 /*
  * SegmentedControl: the pill row, drawn with the Tabs classes.
  *
@@ -17411,6 +18353,19 @@ button.crewlet-presence-stack__member:focus-visible {
   min-width: 0;
 }
 
+/*
+ * A PILL ROW WRAPS RATHER THAN OVERFLOWING ITS CONTAINER. Its options never
+ * shrink (a label cut mid-word is not a choice anybody can read), so on one
+ * unbroken row a group wider than its container ran past its edge: on a phone
+ * a chart's "Split by" row ended at "Worke", clipped by its card. Wrapped,
+ * every option stays visible and inside the focus ring's room.
+ */
+.crewlet-tabs--pill.crewlet-segmented {
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
+}
+
 
 /* SegmentedMeter-KQNML2TW.css */
 /*
@@ -18110,7 +19065,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-4HOXDVIB.css */
+/* SheetGrid-J3TKKXZL.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -18161,6 +19116,13 @@ svg.crewlet-select__chevron {
   min-width: 100%;
 }
 
+/* AS TALL AS ITS ROWS (fit="content"): the component writes the height, the
+   page may cap it, and the grid never grows past the height it was given. */
+.crewlet-sheet-grid--fit-content > .crewlet-sheet-grid__scroller {
+  flex: none;
+  max-height: var(--crewlet-sheet-max-height, 70vh);
+}
+
 .crewlet-sheet-grid__row {
   display: grid;
   grid-template-columns: var(--crewlet-sheet-columns);
@@ -18253,12 +19215,22 @@ svg.crewlet-select__chevron {
   font-variant-numeric: tabular-nums;
 }
 
-/* The bar at a row's leading edge while somebody has it selected. */
-.crewlet-sheet-grid__rownum--present::before {
+/* The row actions sit at the number's trailing edge, over the cell's own
+   background, so the number stays readable beside them. */
+.crewlet-sheet-grid__row-actions {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  inset-inline-start: 0;
+  top: 50%;
+  inset-inline-end: 0;
+  display: inline-flex;
+  transform: translateY(-50%);
+}
+
+/* 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: '';
@@ -18418,10 +19390,9 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-sheet-cell__chips {
-  display: inline-flex;
-  gap: var(--spacing-1);
+  flex: 1 1 auto;
+  flex-wrap: wrap;
   min-width: 0;
-  overflow: hidden;
 }
 
 .crewlet-sheet-cell__person {
@@ -18471,12 +19442,14 @@ svg.crewlet-select__chevron {
   align-items: center;
 }
 
+/* A RATING IS A QUANTITY, not a state, so its marks take the ink and the
+   control edge rather than the warning hue: amber here read as an alert. */
 .crewlet-sheet-cell__star {
-  color: var(--color-text-tertiary);
+  color: var(--color-border-strong);
 }
 
 .crewlet-sheet-cell__star--on {
-  color: var(--color-feedback-warning);
+  color: var(--color-text-primary);
 }
 
 .crewlet-sheet-cell {
@@ -18581,18 +19554,53 @@ svg.crewlet-select__chevron {
   bottom: 100%;
 }
 
-.crewlet-sheet-editor--list .crewlet-sheet-editor__panel,
-.crewlet-sheet-editor--long .crewlet-sheet-editor__panel {
+.crewlet-sheet-editor--list .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 {
+.crewlet-sheet-editor--list.crewlet-sheet-editor--above .crewlet-sheet-editor__panel {
   top: auto;
   bottom: 0;
 }
 
+/* THE TEXT EDITOR LIES OVER THE CELL: at least the column's width, the
+   popover's ground and shadow, and a field that wraps and grows to six lines,
+   so the start of a value is never scrolled out of view while it is edited. */
+.crewlet-sheet-editor__overlay {
+  position: absolute;
+  top: 0;
+  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(100%, 20rem);
+  max-width: min(32rem, 90vw);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-xl);
+}
+
+.crewlet-sheet-editor--above .crewlet-sheet-editor__overlay {
+  top: auto;
+  bottom: 0;
+}
+
+.crewlet-sheet-editor__overlay > .crewlet-sheet-editor__error,
+.crewlet-sheet-editor__overlay > .crewlet-sheet-editor__conflict {
+  margin: 0 var(--spacing-2) var(--spacing-2);
+}
+
+.crewlet-sheet-cell .crewlet-sheet-editor__overlay {
+  position: relative;
+  width: 100%;
+  max-width: none;
+}
+
 .crewlet-sheet-editor__filter,
 .crewlet-sheet-editor__textarea {
   box-sizing: border-box;
@@ -18605,10 +19613,19 @@ svg.crewlet-select__chevron {
   font: inherit;
 }
 
-.crewlet-sheet-editor__textarea {
-  min-width: 20rem;
-  max-width: 100%;
-  resize: vertical;
+.crewlet-sheet-editor__overlay .crewlet-sheet-editor__textarea {
+  display: block;
+  min-height: var(--crewlet-sheet-row-height, var(--size-sheet-row));
+  max-height: calc(var(--crewlet-sheet-editor-lines, 6) * var(--font-line-height-normal) * 1em + 2 * var(--spacing-2));
+  padding: var(--spacing-2);
+  overflow-y: auto;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  line-height: var(--font-line-height-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  resize: none;
 }
 
 .crewlet-sheet-editor__list {
@@ -18631,6 +19648,17 @@ svg.crewlet-select__chevron {
   cursor: pointer;
 }
 
+.crewlet-sheet-editor__option--clear {
+  margin-top: var(--spacing-1);
+  border-top: 1px solid var(--color-border-default);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+
+.crewlet-sheet-editor__list:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-sheet-editor__option--highlight {
   background: var(--color-surface-hover);
 }
@@ -18680,7 +19708,7 @@ svg.crewlet-select__chevron {
    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 {
+  .crewlet-sheet-grid .crewlet-sheet-editor--long .crewlet-sheet-editor__overlay {
     position: fixed;
     top: auto;
     right: 0;
@@ -18691,9 +19719,6 @@ svg.crewlet-select__chevron {
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }
 
-  .crewlet-sheet-editor__textarea {
-    min-width: 0;
-  }
 }
 
 @media (forced-colors: active) {
@@ -19425,121 +20450,435 @@ svg.crewlet-select__chevron {
   flex-direction: column;
 }
 
-.crewlet-skeleton__pricing-card-features {
+.crewlet-skeleton__pricing-card-features {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-skeleton__pricing-card-feature {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-skeleton__line--heading { width: 80px; height: 16px; margin: 0; }
+.crewlet-skeleton__line--wide { width: 90%; }
+.crewlet-skeleton__line--three-quarter { width: 75%; }
+.crewlet-skeleton__line--feature { width: 60px; height: 12px; margin: 0; }
+
+/* ── Box variant: the hero shimmer ──────────────────────────────── */
+.crewlet-skeleton--box {
+  width: 100%;
+  padding: 0;
+}
+
+.crewlet-skeleton__glow-box {
+  width: 100%;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-default);
+  position: relative;
+  overflow: hidden;
+}
+
+.crewlet-skeleton__glow-wave {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, var(--color-surface-hover), transparent);
+  animation: crewlet-skeleton-wave calc(var(--motion-duration-slow) * 5) var(--motion-easing-in-out) infinite;
+}
+
+@keyframes crewlet-skeleton-wave {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+/* ── responsive ─────────────────────────────────────────────────── */
+@media (max-width: 1200px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 2; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 2;
+    --crewlet-skeleton-row-gap: var(--spacing-6);
+    --crewlet-skeleton-col-gap: var(--spacing-7);
+  }
+
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item::before { display: none; }
+
+  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(2n + 1):nth-child(n + 3))::before {
+    display: block;
+  }
+}
+
+@media (max-width: 768px) {
+  .crewlet-skeleton--pricing-card { grid-template-columns: minmax(0, 1fr); }
+
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 1; }
+
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-2,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-3,
+  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
+    --crewlet-skeleton-cols: 1;
+    --crewlet-skeleton-row-gap: var(--spacing-5);
+  }
+
+  .crewlet-skeleton__info-item::before { display: none; }
+  .crewlet-skeleton__info-item:where(:nth-child(n + 2))::before { display: block; }
+
+  .crewlet-skeleton--card,
+  .crewlet-skeleton__card { padding: var(--spacing-4); }
+}
+
+/*
+ * A placeholder that cannot move is still a placeholder: it keeps its shape,
+ * its grey and its position, so the page still says how much is coming and
+ * still does not jump when it arrives.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-skeleton .crewlet-skeleton__line,
+  .crewlet-skeleton .crewlet-skeleton__avatar,
+  .crewlet-skeleton .crewlet-skeleton__circle,
+  .crewlet-skeleton .crewlet-skeleton__button,
+  .crewlet-skeleton__glow-wave {
+    animation: none;
+  }
+
+  /* Held still ON the inset step rather than wherever the sweep stopped: a
+     gradient frozen mid-travel is a block with a bright stripe down it. */
+  .crewlet-skeleton .crewlet-skeleton__line,
+  .crewlet-skeleton .crewlet-skeleton__avatar,
+  .crewlet-skeleton .crewlet-skeleton__circle,
+  .crewlet-skeleton .crewlet-skeleton__button {
+    background: var(--color-surface-inset);
+  }
+
+  .crewlet-skeleton__glow-wave {
+    display: none;
+  }
+}
+
+
+/* SlideCompare-MGM3U2ME.css */
+/*
+ * SlideCompare: two versions of a deck, slide by slide.
+ *
+ * A row that changed carries its change in words beside a glyph; the side a
+ * version lacks is a dashed, empty box of the slide's shape, so the pairing
+ * still reads at a glance.
+ */
+
+.crewlet-slide-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.crewlet-slide-compare__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-slide-compare__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-slide-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+  margin-bottom: var(--spacing-2);
+}
+
+.crewlet-slide-compare__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-compare__change {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-slide-compare__sides {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-3);
+}
+
+.crewlet-slide-compare__side .crewlet-slide-stage {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+.crewlet-slide-compare__missing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  margin: 0;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
+}
+
+@media (width < 640px) {
+  .crewlet-slide-compare__sides {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+
+/* SlideFilmstrip-BCLNAHFX.css */
+/*
+ * SlideFilmstrip: the column of slide thumbnails beside a deck's stage.
+ *
+ * The selected slide is ringed in the brand accent rather than filled, so its
+ * thumbnail still shows the slide's own colours.
+ */
+
+.crewlet-slide-filmstrip__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-slide-filmstrip__item {
+  display: grid;
+  grid-template-columns: var(--spacing-5) minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-1);
+}
+
+.crewlet-slide-filmstrip__number {
+  padding-top: var(--spacing-1);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.crewlet-slide-filmstrip__thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.crewlet-slide-filmstrip__thumb:hover {
+  outline-color: var(--color-border-hover);
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__thumb {
+  outline: 2px solid var(--color-brand-accent);
+}
+
+/* ONE RING, OVER THE THUMBNAIL'S OWN EDGE: the focus outline takes the place
+   of the edge rather than standing off it as a second one. */
+.crewlet-slide-filmstrip__thumb:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-slide-filmstrip__item[data-hidden='true'] .crewlet-slide-stage {
+  opacity: 0.45;
+}
+
+.crewlet-slide-filmstrip__hidden {
+  position: absolute;
+  right: var(--spacing-1);
+  bottom: var(--spacing-1);
+  display: inline-flex;
+  padding: var(--spacing-0);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-slide-filmstrip__handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: grab;
+}
+
+.crewlet-slide-filmstrip__handle:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-slide-filmstrip__handle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-slide-filmstrip__item[data-reorder='dragging'] {
+  opacity: 0.4;
+}
+
+.crewlet-slide-filmstrip__item[data-reorder-target='before'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: 0 calc(var(--spacing-1) * -1) 0 var(--color-brand-accent);
+}
+
+.crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: 0 var(--spacing-1) 0 var(--color-brand-accent);
+}
+
+
+/* SlideGrid-RT6QEQEE.css */
+/*
+ * SlideGrid: every slide of a deck at once, by its outline's sections.
+ */
+
+.crewlet-slide-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+.crewlet-slide-grid__heading {
+  margin: 0 0 var(--spacing-3);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-grid__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
+  gap: var(--spacing-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-slide-grid__card {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
-}
-
-.crewlet-skeleton__pricing-card-feature {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.crewlet-skeleton__line--heading { width: 80px; height: 16px; margin: 0; }
-.crewlet-skeleton__line--wide { width: 90%; }
-.crewlet-skeleton__line--three-quarter { width: 75%; }
-.crewlet-skeleton__line--feature { width: 60px; height: 12px; margin: 0; }
-
-/* ── Box variant: the hero shimmer ──────────────────────────────── */
-.crewlet-skeleton--box {
   width: 100%;
   padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
 
-.crewlet-skeleton__glow-box {
-  width: 100%;
-  background: var(--color-surface-inset);
-  border: 1px solid var(--color-border-default);
-  position: relative;
-  overflow: hidden;
+.crewlet-slide-grid__card .crewlet-slide-stage {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
 }
 
-.crewlet-skeleton__glow-wave {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, var(--color-surface-hover), transparent);
-  animation: crewlet-skeleton-wave calc(var(--motion-duration-slow) * 5) var(--motion-easing-in-out) infinite;
+.crewlet-slide-grid__card:hover .crewlet-slide-stage {
+  outline-color: var(--color-border-hover);
 }
 
-@keyframes crewlet-skeleton-wave {
-  0% {
-    left: -100%;
-  }
-
-  100% {
-    left: 100%;
-  }
+.crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-stage {
+  outline: 2px solid var(--color-brand-accent);
 }
 
-/* ── responsive ─────────────────────────────────────────────────── */
-@media (max-width: 1200px) {
-  .crewlet-skeleton--pricing-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 2; }
-
-  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
-    --crewlet-skeleton-cols: 2;
-    --crewlet-skeleton-row-gap: var(--spacing-6);
-    --crewlet-skeleton-col-gap: var(--spacing-7);
-  }
+/* ONE RING, round the whole card (its slide and its caption), on the inset
+   offset so it does not stand off the slide's own edge as a second line. */
+.crewlet-slide-grid__card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
 
-  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item::before { display: none; }
+.crewlet-slide-grid__card[data-hidden='true'] .crewlet-slide-stage {
+  opacity: 0.45;
+}
 
-  :where(.crewlet-skeleton--cols-4) > .crewlet-skeleton__info-item:where(:nth-child(2n + 1):nth-child(n + 3))::before {
-    display: block;
-  }
+.crewlet-slide-grid__caption {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
 }
 
-@media (max-width: 768px) {
-  .crewlet-skeleton--pricing-card { grid-template-columns: minmax(0, 1fr); }
+.crewlet-slide-grid__number {
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
 
-  .crewlet-skeleton--grid.crewlet-skeleton--cols-2,
-  .crewlet-skeleton--grid.crewlet-skeleton--cols-3,
-  .crewlet-skeleton--grid.crewlet-skeleton--cols-4 { --crewlet-skeleton-cols: 1; }
+.crewlet-slide-grid__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-2,
-  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-3,
-  .crewlet-skeleton--info-grid.crewlet-skeleton--cols-4 {
-    --crewlet-skeleton-cols: 1;
-    --crewlet-skeleton-row-gap: var(--spacing-5);
-  }
 
-  .crewlet-skeleton__info-item::before { display: none; }
-  .crewlet-skeleton__info-item:where(:nth-child(n + 2))::before { display: block; }
+/* SlideStage-XIOTMMRU.css */
+/*
+ * SlideStage: a slide laid out at its authored size and scaled to its box.
+ *
+ * The box clips: a pinned element authored past the stage's edge is cut there,
+ * as it is on a projector, rather than spilling over the next thumbnail.
+ */
 
-  .crewlet-skeleton--card,
-  .crewlet-skeleton__card { padding: var(--spacing-4); }
+.crewlet-slide-stage {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  background: var(--color-surface-inset);
 }
 
-/*
- * A placeholder that cannot move is still a placeholder: it keeps its shape,
- * its grey and its position, so the page still says how much is coming and
- * still does not jump when it arrives.
- */
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-skeleton .crewlet-skeleton__line,
-  .crewlet-skeleton .crewlet-skeleton__avatar,
-  .crewlet-skeleton .crewlet-skeleton__circle,
-  .crewlet-skeleton .crewlet-skeleton__button,
-  .crewlet-skeleton__glow-wave {
-    animation: none;
-  }
+.crewlet-slide-stage--contain {
+  height: 100%;
+}
 
-  /* Held still ON the inset step rather than wherever the sweep stopped: a
-     gradient frozen mid-travel is a block with a bright stripe down it. */
-  .crewlet-skeleton .crewlet-skeleton__line,
-  .crewlet-skeleton .crewlet-skeleton__avatar,
-  .crewlet-skeleton .crewlet-skeleton__circle,
-  .crewlet-skeleton .crewlet-skeleton__button {
-    background: var(--color-surface-inset);
-  }
+.crewlet-slide-stage__frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform-origin: 0 0;
+  overflow: hidden;
+}
 
-  .crewlet-skeleton__glow-wave {
-    display: none;
+@media print {
+  .crewlet-slide-stage {
+    break-inside: avoid;
+    background: transparent;
   }
 }
 
@@ -21924,7 +23263,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagGroup-BCQZD7ZD.css */
+/* TagGroup-NAXTJHDS.css */
 /*
  * A labelled list of tags with the tail behind a count.
  *
@@ -21952,6 +23291,28 @@ b.crewlet-switcher__match {
   outline-offset: 2px;
 }
 
+/* ONE LINE (overflow="fit"): what wraps is measured and left out, so the
+   line is clipped only for the instant before the count replaces it. */
+.crewlet-tag-group--fit {
+  flex-wrap: wrap;
+  overflow: hidden;
+  max-height: max(24px, calc(24px * var(--density, 1)));
+}
+
+.crewlet-tag-group__count {
+  display: inline-flex;
+  align-items: center;
+  height: max(20px, calc(20px * var(--density, 1)));
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
 .crewlet-tag-group__item {
   display: inline-flex;
   min-width: 0;
@@ -25166,7 +26527,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* VersionTimeline-EBJ6MIPJ.css */
+/* VersionTimeline-6KRXEEOO.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
@@ -25201,11 +26562,11 @@ svg.crewlet-time-window__tick {
   background: var(--color-surface-hover);
 }
 
-/* The version on show. The accent means "where the reader is", which is
-   exactly what this row is. */
+/* The version on show, as a FILL only: the timeline's rail is the row's one
+   vertical line, and an accent bar beside it drew two. 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 {
@@ -25260,11 +26621,11 @@ svg.crewlet-time-window__tick {
   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. */
+/* The version compared against is ringed in the strong neutral: it is the
+   other side of the comparison, not where the reader is, so it takes neither
+   the accent nor a second vertical bar beside the rail. */
 .is-compared > .crewlet-timeline__body > .crewlet-version-timeline__select {
-  box-shadow: inset 2px 0 0 var(--color-border-strong);
+  box-shadow: inset 0 0 0 1px var(--color-border-strong);
 }
 
 .crewlet-version-timeline__gap {
@@ -25299,3 +26660,133 @@ svg.crewlet-time-window__tick {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
+
+/* WidgetFrame-4EFJOJMW.css */
+/*
+ * WidgetFrame: one figure on a dashboard. A title row, the figure filling the
+ * height the host's frame gives it, and the citation line at the foot.
+ */
+
+.crewlet-widget-frame {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-widget-frame__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-widget-frame__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-widget-frame__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-widget-frame__body {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.crewlet-widget-frame__blocked {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-widget-frame__blocked-glyph {
+  display: inline-flex;
+  flex: none;
+  padding-top: 2px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-widget-frame__cite {
+  display: flex;
+  min-width: 0;
+}
+
+.crewlet-widget-frame__cite-text,
+.crewlet-widget-frame__cite-button {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 var(--spacing-1);
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-widget-frame__cite-button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  font: inherit;
+  font-size: var(--font-size-xs);
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-widget-frame__cite-button:hover .crewlet-widget-frame__source {
+  color: var(--color-text-primary);
+  text-decoration: underline;
+}
+
+.crewlet-widget-frame__cite-button:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-widget-frame__source {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
+.crewlet-widget-frame__when::before {
+  content: '\00b7' / '';
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-widget-frame__stale {
+  display: inline-flex;
+  color: var(--color-feedback-warning-ink);
+}