@crewlethq/ui 0.31.1 → 0.33.0

package/dist/styles.css

@@ -1,6 +1,6 @@
-/* AccessDeniedCard-WXM5DBDZ.css */
-/* The card holds one empty state and nothing else, at a reading width, so a
-   refusal in a wide viewer body reads as one sentence rather than a banner. */
+/* AccessDeniedCard-QVNDMT46.css */
+/* One empty state and nothing else, at a reading width, so a refusal in a
+   wide viewer body reads as one sentence rather than a banner. */
 
 .crewlet-access-denied-card {
   width: 100%;
@@ -548,7 +548,7 @@
 }
 
 
-/* AppShell-GCM4TDVY.css */
+/* AppShell-JTSEOA57.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1161,8 +1161,10 @@
     display: inline-flex;
   }
 
+  /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
+     line 4px left of the title and the controls over it. */
   .crewlet-app-shell__content {
-    padding: var(--spacing-4) var(--spacing-3) var(--spacing-9);
+    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
   }
 }
 
@@ -1727,7 +1729,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArrangeGroup-GY5YMP6E.css */
+/* ArrangeGroup-KRWWOJKR.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.
@@ -1886,6 +1888,49 @@ button.crewlet-account-row__who:focus-visible {
   pointer-events: none;
 }
 
+/*
+ * THE SECTION VARIANT: a quiet header on the page's ground, over a hairline
+ * in the group's hue (the default border with none), and the blocks
+ * on the page's grid with no inset of their own. The name is a card title's
+ * step and ink, the chevron the quiet ink, and the count its chip.
+ */
+.crewlet-arrange-group--section {
+  border: 0;
+  border-radius: 0;
+  background: none;
+  overflow: visible;
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__head {
+  min-height: 0;
+  padding: 0 0 var(--spacing-2);
+  border-bottom: 1px solid var(--crewlet-arrange-group-line);
+  background: none;
+}
+
+.crewlet-arrange-group--section.is-collapsed .crewlet-arrange-group__head {
+  border-bottom-color: var(--crewlet-arrange-group-line);
+}
+
+/* The chevron stands on the page's edge, its hover reaching past it. */
+.crewlet-arrange-group--section .crewlet-arrange-group__toggle {
+  min-height: var(--size-control-sm);
+  margin-inline-start: calc(var(--spacing-1) * -1);
+  padding: 0 var(--spacing-1);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__title {
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-arrange-group--section .crewlet-arrange-group__body {
+  min-height: 0;
+  padding: var(--spacing-3) 0 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-arrange-group__chevron,
   .crewlet-arrange-group__title-field {
@@ -1996,7 +2041,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-MLMJHWY6.css */
+/* ArtifactBar-C462VD4C.css */
 /*
  * One row, one hairline under it, the height of a large row. The lead (the
  * way back, the glyph, the title, the version) takes what the end leaves it
@@ -2024,7 +2069,10 @@ button.crewlet-account-row__who:focus-visible {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
-  height: var(--size-row-lg);
+  /* THE SHELL'S TOP BAR'S HEIGHT, its hairline included: the bar stands in
+     its place, and at a row's height of its own the line under it jumped by
+     three pixels between the gallery and the artifact opened from it. */
+  height: calc(var(--size-shell-topbar) - 1px);
   padding: 0 var(--spacing-3);
   min-width: 0;
 }
@@ -2288,9 +2336,10 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 @container crewlet-artifact-bar (width < 640px) {
+  /* THE ROW KEEPS THE SHELL'S PHONE INSET, so the first glyph stands over
+     the page's own gutter rather than eight pixels from the edge. */
   .crewlet-artifact-bar__row {
     gap: var(--spacing-1);
-    padding: 0 var(--spacing-2);
   }
 
   /* The title has the row's room before the kind's glyph does: the glyph
@@ -2324,7 +2373,8 @@ button.crewlet-account-row__who:focus-visible {
   height: var(--size-target-min);
   padding: 0 var(--spacing-2);
   border: 0;
-  border-radius: var(--radius-pill);
+  /* A CONTROL'S CORNER, the one every bar control of its height takes. */
+  border-radius: var(--radius-md);
   background: var(--color-surface-subtle);
   color: var(--color-text-secondary);
   font-family: var(--font-family-sans);
@@ -2364,14 +2414,21 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-EXVAEBV6.css */
+/* ArtifactCard-AS5Z4CVI.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
  * lines up whatever each preview is, then the title and up to three lines of
  * facts. `compact` is a row with the kind's glyph in place of the preview.
  */
 
-.crewlet-artifact-card {
+/*
+ * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
+ * class too. The two sheets meet at equal weight and the bundle orders them
+ * by file name, which puts this one first: `.crewlet-card` and
+ * `.crewlet-card--p-none` then won, and the compact row was drawn as a
+ * padless column with its glyph on a line of its own.
+ */
+.crewlet-card.crewlet-artifact-card {
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -2380,7 +2437,7 @@ button.crewlet-account-row__who:focus-visible {
   text-decoration: none;
 }
 
-.crewlet-artifact-card--compact {
+.crewlet-card.crewlet-artifact-card--compact {
   flex-direction: row;
   align-items: flex-start;
   gap: var(--spacing-3);
@@ -2462,6 +2519,14 @@ button.crewlet-account-row__who:focus-visible {
   min-width: 0;
 }
 
+/* THE FACTS OF ONE LINE ARE A RUN, "Sheet · OPS · v12", each after the first
+   opened by a quiet dot, so two short words never read as one phrase. */
+.crewlet-artifact-card__line > * + *::before {
+  content: '·';
+  margin-inline-end: var(--spacing-2);
+  color: var(--color-text-tertiary);
+}
+
 .crewlet-artifact-card__owner,
 .crewlet-artifact-card__presence {
   display: inline-flex;
@@ -2546,7 +2611,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactPanel-YFXT5O77.css */
+/* ArtifactPanel-HW3SU7CP.css */
 /*
  * The workspace is a row: the artifact's body, then at most one panel. The
  * body scrolls itself, so a panel beside it stays in view however far the
@@ -2577,7 +2642,9 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 .crewlet-artifact-panel {
-  --crewlet-artifact-panel-width: 25rem;
+  /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
+     those moved the artifact's edge 80px between Details and History. */
+  --crewlet-artifact-panel-width: 22.5rem;
   display: flex;
   flex: none;
   flex-direction: column;
@@ -2587,10 +2654,6 @@ button.crewlet-account-row__who:focus-visible {
   background: var(--color-surface-background);
 }
 
-.crewlet-artifact-panel--sm {
-  --crewlet-artifact-panel-width: 20rem;
-}
-
 .crewlet-artifact-panel--lg {
   --crewlet-artifact-panel-width: 36rem;
 }
@@ -2643,10 +2706,27 @@ button.crewlet-account-row__who:focus-visible {
   gap: var(--spacing-1);
 }
 
+/* THE BODY'S INSET IS PUBLISHED (--crewlet-artifact-panel-inset) for content
+   that sticks to its scrollport: a sticky edge stops at the padding, so a
+   foot with `bottom: 0` left a band under it that the content scrolled
+   through; such a foot offsets itself by the inset to sit on the edge. */
 .crewlet-artifact-panel__body {
+  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
+     rather than the window's; and its sections head at the panel title's
+     step, a level under it and never louder than it. */
+  container: crewlet-artifact-panel / inline-size;
+  --crewlet-section-title-size: var(--font-size-sm);
+  --crewlet-artifact-panel-inset: var(--spacing-4);
+
+  /* A COLUMN, so content that should fit the panel rather than scroll it
+     can: a child that sets `min-height: 0` shrinks to the room the body has
+     (a sheet's rows, whose grid then scrolls itself), and every other child
+     keeps its content's height and scrolls the body as before. */
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
-  padding: var(--spacing-4);
+  padding: var(--crewlet-artifact-panel-inset);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -2660,7 +2740,10 @@ button.crewlet-account-row__who:focus-visible {
     inset-inline-end: 0;
     z-index: var(--z-index-overlay);
     width: min(var(--crewlet-artifact-panel-width), 100%);
-    box-shadow: var(--shadow-lg);
+    /* THE DRAWER'S LIFT, the shell's own rail drawer's: the large step falls
+       below a box and left the panel's start edge reading as a cut through
+       the artifact rather than a sheet over it. */
+    box-shadow: var(--shadow-xl);
   }
 
   .crewlet-artifact-panel[data-expanded] {
@@ -4027,7 +4110,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Callout-SXXK4B5R.css */
+/* Callout-ZAVG3P66.css */
 /*
  * The callout: a status that stays in the content flow.
  *
@@ -4052,8 +4135,15 @@ a.crewlet-breadcrumb__crumb:focus-visible {
    */
   --crewlet-callout-line: transparent;
 
-  display: flex;
-  align-items: flex-start;
+  /* THE GLYPH, THE TEXT, AND AN ACTION'S COLUMN only where there is one: the
+     third track is implicit, so a callout without an action keeps no gap
+     for it at its end. A grid rather than a row, so a narrow callout can put
+     its action under the text, in the text's own column, whatever the glyph
+     is. */
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-columns: auto;
+  align-items: start;
   gap: var(--spacing-2);
   /* The engine's own: a tight strip rather than a padded card. This sits
      above a screen or between two sections and takes a line or two of text,
@@ -4068,17 +4158,29 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   line-height: var(--font-line-height-normal);
 }
 
+/*
+ * WITH AN ACTION, ONE LINE OF TEXT CENTRES ON THE BUTTON. The row is the
+ * button's height and the text sat at its top, three pixels above the
+ * button's label. The content is padded by half of what the control is
+ * taller than a line, and the icon moved down with it, so a one-line callout
+ * reads as one line and a longer one keeps its icon on its first line.
+ */
+.crewlet-callout:has(> .crewlet-callout__action) {
+  --crewlet-callout-lead: max(0px, calc((var(--size-control-sm) - 1lh) / 2));
+  /* Measured by its own width, so the action can move under the text. */
+  container: crewlet-callout / inline-size;
+}
+
 .crewlet-callout__icon {
   display: inline-flex;
-  flex: none;
   /* On the first line's optical centre rather than its box top, which a 16px
      glyph beside a 13px line sits two pixels above. */
-  margin-top: 2px;
+  margin-top: calc(2px + var(--crewlet-callout-lead, 0px));
 }
 
 .crewlet-callout__content {
   min-width: 0;
-  flex: 1;
+  padding-block: var(--crewlet-callout-lead, 0px);
 }
 
 .crewlet-callout__title {
@@ -4089,10 +4191,31 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-callout__action {
-  flex: none;
+  grid-column: 3;
+  grid-row: 1;
   align-self: center;
 }
 
+/*
+ * A NARROW CALLOUT PUTS ITS ACTION UNDER THE TEXT, at the start of the text's
+ * column, so the sentence keeps the callout's whole measure. Beside it, a
+ * phone's width left the message a column of a word or two a line. The text
+ * no longer centres on a button beside it, so it sits at its own top.
+ */
+@container crewlet-callout (width < 28rem) {
+  .crewlet-callout__icon,
+  .crewlet-callout__content {
+    --crewlet-callout-lead: 0px;
+  }
+
+  .crewlet-callout__action {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    align-self: start;
+  }
+}
+
 /*
  * Inline code inside a callout takes the callout's ink. A mono chip that kept
  * its own neutral ink inside a danger banner read as the one part of the
@@ -4143,7 +4266,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Canvas-YVXHMWLN.css */
+/* Canvas-VUG2HLZK.css */
 /*
  * A bounded viewport (Canvas.tsx). It fills the box it is given and clips; the
  * page's own scroller is never involved.
@@ -4179,11 +4302,24 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background-size: var(--spacing-5) var(--spacing-5);
 }
 
+/*
+ * A GRID ON THE CONTENT'S PLANE (`ground="grid"`): the same dots, but pitched
+ * and placed by the view (`gridOf`), so they pan and zoom with the content.
+ * The dots themselves stay one screen pixel, as a design tool's do.
+ */
+.crewlet-canvas[data-ground='grid'] {
+  background-image: radial-gradient(var(--color-border-strong) 1px, transparent 1.2px);
+  background-size:
+    calc(var(--spacing-5) * var(--crewlet-canvas-grid-scale, 1))
+    calc(var(--spacing-5) * var(--crewlet-canvas-grid-scale, 1));
+  background-position: var(--crewlet-canvas-grid-x, 0) var(--crewlet-canvas-grid-y, 0);
+}
+
 .crewlet-canvas__viewport {
   position: absolute;
   inset: 0;
   overflow: hidden;
-  cursor: grab;
+  cursor: var(--crewlet-canvas-cursor-hand, grab);
   /* Until it is tapped, one finger belongs to the page's vertical scroll. */
   touch-action: pan-y;
 }
@@ -4201,8 +4337,28 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   touch-action: none;
 }
 
-.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport {
-  cursor: grabbing;
+/*
+ * THE POINTER SAYS WHAT A PRESS WILL DO. The drawings are the component's
+ * (`CURSORS`, written on the root), each falling back to its keyword. A pan in
+ * progress shows the closed hand whatever the tool, and it is set on the whole
+ * canvas rather than the field, so a drag that crosses a board or a note keeps
+ * the hand it started with.
+ */
+.crewlet-canvas[data-cursor='pointer'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+.crewlet-canvas[data-cursor='crosshair'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-crosshair, crosshair);
+}
+
+.crewlet-canvas[data-cursor='text'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-text, text);
+}
+
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport,
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport * {
+  cursor: var(--crewlet-canvas-cursor-grabbing, grabbing);
   user-select: none;
 }
 
@@ -4365,6 +4521,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   display: none;
 }
 
+/*
+ * THE NOTE GROWS AWAY FROM THE CORNER. It comes and goes as the canvas's state
+ * does, and drawn on the corner's side of the zoom bar it would push the bar
+ * out from under a pointer on its way to it; so in a bottom corner it is drawn
+ * above the bar, and the bar never moves.
+ */
+.crewlet-canvas__controls:not([data-placement='top-right']) .crewlet-canvas__hint {
+  order: -1;
+}
+
 /*
  * THE ZOOM READOUT, between the two steppers. It says where the view stands,
  * which two chevrons never do, and it is the way to a number without pressing a
@@ -4407,6 +4573,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-radius: var(--radius-chip);
 }
 
+/* Actual size, as a ratio: the readout's own control, at the button step. */
+.crewlet-canvas__actual {
+  width: var(--size-control-sm);
+}
+
+/*
+ * A control's tip with its shortcut (ShortcutTip.tsx): the words, then the
+ * keycaps, on one line.
+ */
+.crewlet-shortcut-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  white-space: nowrap;
+}
+
 .crewlet-canvas__zoom:hover:not(:disabled) {
   color: var(--color-text-primary);
   background: var(--color-surface-hover);
@@ -4474,7 +4656,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CanvasBoard-ZLPDINSM.css */
+/* CanvasBoard-5NNSKY6A.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
@@ -4482,7 +4664,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * writes on the layer, so it stays one size on screen.
  */
 
+/*
+ * A SIZE CONTAINER BY ITS WIDTH, so the palette can tell a canvas too narrow
+ * to hold it beside the zoom bar on one line (see below).
+ */
 .crewlet-canvas-board {
+  container: crewlet-canvas-board / inline-size;
   height: 100%;
   min-height: 0;
 }
@@ -4493,6 +4680,43 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   position: relative;
 }
 
+/*
+ * UNDER HAND, TEXT AND STICKY NOTHING ON THE CANVAS TAKES A PRESS: every press
+ * reaches the field, which pans it (Hand) or places a note on it (Text and
+ * Sticky), and nothing is outlined under a pointer that cannot select it.
+ */
+.crewlet-canvas-board:not([data-tool='move']) .crewlet-canvas-board__layer {
+  pointer-events: none;
+}
+
+/* ---- the tool palette, floating at the foot of the field ----------------- */
+
+/*
+ * CENTRED AT THE FOOT, on the zoom bar's line: the two bars are one control
+ * step tall and stand the same inset from the field's edge.
+ */
+.crewlet-canvas-board__tools {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: 50%;
+  z-index: var(--z-index-raised);
+  transform: translateX(-50%);
+}
+
+/*
+ * A NARROW CANVAS (a phone, a split pane) has no room at its foot for the
+ * palette between the zoom bar and the edge, so the palette moves to the top
+ * left corner, which the zoom bar never takes.
+ */
+@container crewlet-canvas-board (width < 36rem) {
+  .crewlet-canvas-board__tools {
+    top: var(--spacing-3);
+    bottom: auto;
+    left: var(--spacing-3);
+    transform: none;
+  }
+}
+
 /* ---- a board ------------------------------------------------------------ */
 
 .crewlet-canvas-board__board {
@@ -4500,13 +4724,37 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   box-sizing: border-box;
 }
 
+/*
+ * A BOARD'S EDGE IS A HAIRLINE, one screen pixel at every zoom, drawn as a
+ * ring outside the box rather than a border inside it: a border would take
+ * its width out of the page the board runs, and counter-scaled to stay one
+ * pixel it would take more the further out the canvas is zoomed. The strong
+ * hairline's ink, so a white page still has an edge on a light field and a
+ * dark one on a dark field.
+ */
 .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);
+  box-shadow: 0 0 0 calc(1px * var(--crewlet-canvas-board-unzoom)) var(--color-border-strong);
+}
+
+/*
+ * HOVER, then SELECTION, in the accent: one screen pixel and then two, over
+ * the hairline. Hovering a board's name is hovering its board, which is how a
+ * reader finds the board a name belongs to on a crowded canvas.
+ */
+.crewlet-canvas-board__board:hover .crewlet-canvas-board__body,
+.crewlet-canvas-board__note:hover {
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline-offset: 0;
+}
+
+.crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__body,
+.crewlet-canvas-board__note[data-selected] {
+  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline-offset: 0;
 }
 
 /* The page a live board runs fills its frame exactly. */
@@ -4528,14 +4776,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-canvas-board__shield {
   position: absolute;
   inset: 0;
-  cursor: pointer;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
 }
 
-.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. */
+/* A board that is not running draws its size, and why, at screen size. */
 .crewlet-canvas-board__placeholder {
   position: absolute;
   inset: 0;
@@ -4549,25 +4793,59 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   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. */
+/*
+ * 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. It is held to
+ * the board's width ON SCREEN (the board's own width times the zoom, less a
+ * margin each side), so a line the component judged to fit never runs past
+ * the board's edges into the boards beside it.
+ */
 .crewlet-canvas-board__placeholder-text {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-1);
   flex: none;
+  box-sizing: border-box;
+  max-width: calc(100% * var(--crewlet-canvas-board-zoom));
+  padding-inline: var(--spacing-2);
   transform: scale(var(--crewlet-canvas-board-unzoom));
 }
 
-.crewlet-canvas-board__placeholder-title {
+.crewlet-canvas-board__placeholder-text > * {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__placeholder-size {
   color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
 }
 
 /* ---- chrome, at screen size --------------------------------------------- */
 
+/*
+ * THE CHROME IS DRAWN OVER THE CONTENT, every board's and note's over every
+ * board and note, as a design tool draws its frame names. It is counter-scaled
+ * to one size on screen while the content shrinks with the zoom, so far out a
+ * name reaches over the note or board above it; drawn in document order it
+ * went under a note laid out after its board, and that note took every press
+ * meant for the name and the open control.
+ */
+.crewlet-canvas-board__chrome,
+.crewlet-canvas-board__note-tools,
+.crewlet-canvas-board__resize {
+  z-index: 1;
+}
+
+/*
+ * ONE LINE OF TYPE TALL, whatever sits in it: the open control is centred on
+ * the line and allowed past it, so a row of boards zoomed far out loses only
+ * a title's height to the names above it rather than a button's.
+ */
 .crewlet-canvas-board__chrome {
   position: absolute;
   bottom: 100%;
@@ -4577,19 +4855,58 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   gap: var(--spacing-1);
   box-sizing: border-box;
   width: calc(100% * var(--crewlet-canvas-board-zoom));
+  height: calc(var(--font-size-xs) * var(--font-line-height-normal) + var(--spacing-1));
   padding-bottom: var(--spacing-1);
   transform: scale(var(--crewlet-canvas-board-unzoom));
   transform-origin: bottom left;
 }
 
+/* A board drawn too narrow to name goes unnamed (`boardRoom`). */
+.crewlet-canvas-board__board[data-untitled] > .crewlet-canvas-board__chrome {
+  display: none;
+}
+
+.crewlet-canvas-board__open {
+  flex: none;
+}
+
+/*
+ * THE OPEN CONTROL IS THE BOARD'S, NOT THE CANVAS'S: where a pointer can
+ * hover, it is drawn on the board under it, the selected board and the
+ * control that has focus, so a canvas at rest shows its names and nothing
+ * else. A touch screen has no hover to find it by, so it is always drawn
+ * there.
+ */
+@media (hover: hover) {
+  /*
+   * HIDDEN, IT TAKES NO ROOM: out of the row rather than only transparent, so
+   * a narrow board's name has the whole width to itself at rest instead of
+   * being cut to its first letter beside an empty slot. It still takes focus,
+   * and is put back in the row when it has it.
+   */
+  .crewlet-canvas-board__board:not(:hover, [data-selected]) .crewlet-canvas-board__open:not(:focus-visible) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+/* The board's name: small, quiet, and the accent once its board is picked out. */
 .crewlet-canvas-board__title {
   min-width: 0;
   overflow: hidden;
-  color: var(--color-text-secondary);
+  color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+.crewlet-canvas-board__board:hover .crewlet-canvas-board__title,
+.crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__title {
+  color: var(--color-brand-accent-ink);
 }
 
 .crewlet-canvas-board__handle {
@@ -4597,10 +4914,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   margin: 0;
   padding: var(--spacing-1) var(--spacing-2);
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: transparent;
   font: inherit;
-  cursor: move;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
   touch-action: none;
 }
 
@@ -4609,6 +4926,21 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-color: var(--color-border-default);
 }
 
+/*
+ * A NAME THAT IS ALSO A MOVE HANDLE keeps the name's type and its place: the
+ * handle's padding and edge are taken back by a margin the same size, so the
+ * letters stay on the board's left edge and the title's line, and only the
+ * hover's box reaches past them.
+ */
+.crewlet-canvas-board__title.crewlet-canvas-board__handle {
+  flex: 0 1 auto;
+  margin-block: calc(-1 * (var(--spacing-1) + 1px));
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+}
+
 /* 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 {
@@ -4616,55 +4948,114 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A RESIZE CORNER: a full pointer target, drawn as the small square a design
+ * tool draws, centred on its corner and counter-scaled so it is one size on
+ * screen. Drawn on a selected item, and on the keyboard's corner while it has
+ * focus; otherwise it is neither seen nor pressed.
+ */
 .crewlet-canvas-board__resize {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: var(--spacing-4);
-  height: var(--spacing-4);
+  display: grid;
+  place-items: center;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
   margin: 0;
   padding: 0;
-  border: 2px solid var(--color-brand-accent);
+  border: none;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+}
+
+.crewlet-canvas-board__resize::before {
+  content: '';
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  box-sizing: border-box;
+  border: 1px solid var(--color-brand-accent);
   border-radius: var(--radius-xs);
   background: var(--color-surface-elevated);
+}
+
+.crewlet-canvas-board__board[data-selected] > .crewlet-canvas-board__resize,
+.crewlet-canvas-board__note[data-selected] .crewlet-canvas-board__resize,
+.crewlet-canvas-board__resize:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.crewlet-canvas-board__resize[data-corner='resize-nw'] {
+  top: 0;
+  left: 0;
   cursor: nwse-resize;
-  touch-action: none;
-  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+  transform: translate(-50%, -50%) scale(var(--crewlet-canvas-board-unzoom));
 }
 
-.crewlet-canvas-board__hint {
-  position: absolute;
-  top: 100%;
+.crewlet-canvas-board__resize[data-corner='resize-ne'] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate(50%, -50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__resize[data-corner='resize-sw'] {
+  bottom: 0;
   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;
+  cursor: nesw-resize;
+  transform: translate(-50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__resize[data-corner='resize-se'] {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
 }
 
+
 /* ---- a note ------------------------------------------------------------- */
 
 .crewlet-canvas-board__note {
   position: absolute;
   box-sizing: border-box;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+/*
+ * A sticky's tools and corners sit outside its paper, so the paper does not
+ * clip; its words are held to the paper instead.
+ */
+.crewlet-canvas-board__note[data-kind='sticky'] {
+  overflow: visible;
+}
+
+.crewlet-canvas-board__note[data-kind='sticky'] .crewlet-canvas-board__note-text {
+  max-height: 100%;
+  overflow: hidden;
 }
 
 /*
- * 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.
+ * A TITLE IS SET TO FILL ITS BOX, 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, and a
+ * long one is set smaller rather than run over the boards beside it.
  */
 .crewlet-canvas-board__note[data-kind='title'] {
-  container-type: size;
   display: flex;
   align-items: center;
   color: var(--color-text-primary);
 }
 
+/*
+ * The size is the component's (`titleSize`), fitted to the box both ways. The
+ * TEXT clips at the box, not the box itself: the box's tools and corners sit
+ * outside it, and a box that clipped would cut them away.
+ */
 .crewlet-canvas-board__note[data-kind='title'] .crewlet-canvas-board__note-text {
-  font-size: 60cqh;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
   line-height: var(--font-line-height-tight);
@@ -4705,6 +5096,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transform-origin: bottom left;
 }
 
+/*
+ * A NOTE'S TOOLS ARE THE NOTE'S, as a board's open control is the board's:
+ * where a pointer can hover they are drawn on the note under it, the selected
+ * note and the note holding focus, rather than over every note at once.
+ */
+@media (hover: hover) {
+  .crewlet-canvas-board__note-tools {
+    opacity: 0;
+  }
+
+  .crewlet-canvas-board__note:hover .crewlet-canvas-board__note-tools,
+  .crewlet-canvas-board__note[data-selected] .crewlet-canvas-board__note-tools,
+  .crewlet-canvas-board__note:focus-within .crewlet-canvas-board__note-tools {
+    opacity: 1;
+  }
+}
+
 .crewlet-canvas-board__note-move {
   width: var(--spacing-6);
   height: var(--spacing-6);
@@ -4752,6 +5160,43 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CanvasToolbar-EM5EVZED.css */
+/*
+ * A canvas's tool palette (CanvasToolbar.tsx): the zoom bar's glass surface
+ * and its control step (the small one, which every toolbar and panel control
+ * takes), so the two bars stand the same height on the field's foot,
+ * with the tool in hand drawn SOLID in the accent rather than the soft tint a
+ * toggle takes elsewhere, because it is the one fact about the palette a
+ * reader checks from across the field before every press.
+ */
+
+.crewlet-canvas-toolbar.crewlet-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-xs);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn {
+  border-radius: var(--radius-chip);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn[aria-pressed='true'] {
+  color: var(--color-text-on-accent);
+  background: var(--color-brand-accent);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn[aria-pressed='true']:hover:not(:disabled) {
+  color: var(--color-text-on-accent);
+  background: var(--color-brand-accent-hover);
+}
+
+
 /* Card-KJOYHDTJ.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
@@ -5286,7 +5731,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-RY4JN5FC.css */
+/* Charts-MBJG72BS.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -5328,6 +5773,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background: var(--crewlet-legend-swatch-color, var(--color-data-other));
 }
 
+.crewlet-legend__swatch--line {
+  width: 12px;
+  height: 2px;
+  border-radius: calc(var(--radius-xs) / 4);
+}
+
 .crewlet-legend__label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5446,7 +5897,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  */
 .crewlet-bar-list__sub,
 .crewlet-bar-list__more,
-.crewlet-bar-list__empty {
+.crewlet-chart-empty {
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
@@ -5463,9 +5914,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * A card draws its own content in a body now, so a padding here is the panel's
  * inset a second time.
  */
-.crewlet-bar-list__empty {
+.crewlet-chart-empty {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
   margin: 0;
   padding: 0;
+  line-height: var(--font-line-height-normal);
+  text-align: center;
+}
+
+.crewlet-chart-empty--start {
+  display: block;
+  height: auto;
+  text-align: start;
 }
 
 .crewlet-bar-list__sub {
@@ -5692,6 +6156,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   row-gap: var(--spacing-1);
   margin: 0;
   min-width: 0;
+  /* Measured by its own width, for the dates under the plot. */
+  container: crewlet-stacked-columns / inline-size;
 }
 
 /*
@@ -5716,12 +6182,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   align-items: flex-end;
 }
 
+/*
+ * The scale's words are set as the dates under the plot are, the sans at the
+ * caption step with tabular figures, so the two axes of one chart read as one
+ * scale. They were the mono at the step below, beside dates in the sans.
+ */
 .crewlet-stacked-columns__tick {
   display: flex;
   align-items: center;
   height: 0;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-xs);
   line-height: var(--font-line-height-tight);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
@@ -5736,7 +6206,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * keeps that half line above the plot itself.
  */
 .crewlet-stacked-columns--headless {
-  padding-block-start: calc(var(--font-size-2xs) * var(--font-line-height-tight) / 2);
+  padding-block-start: calc(var(--font-size-xs) * var(--font-line-height-tight) / 2);
 }
 
 .crewlet-stacked-columns__plot {
@@ -5786,14 +6256,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 /*
  * THE COLUMN IS ITS TOTAL'S HEIGHT (a style property), and its parts share it
  * by value, first series at the baseline. They stand 2px apart for the reason
- * a stacked bar's do, and the gap comes out of the parts.
+ * a stacked bar's do, and the gap comes out of the parts. It stands on the
+ * zero line (a style property), centred in its slot; the column of a
+ * bucket's negative parts hangs from the same line, first series nearest it.
  */
 .crewlet-stacked-columns__column {
+  position: absolute;
+  inset-inline-start: 50%;
   display: flex;
   flex-direction: column-reverse;
   gap: 2px;
   width: 63%;
-  max-width: var(--spacing-7);
+  max-width: var(--spacing-6);
+  transform: translateX(-50%);
+}
+
+.crewlet-stacked-columns__column--below {
+  flex-direction: column;
 }
 
 .crewlet-stacked-columns__segment {
@@ -5805,13 +6284,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background: var(--crewlet-stacked-columns-segment-color, var(--color-data-other));
 }
 
-/* The VALUE END: the top of the topmost part, rounded at the smallest step.
-   The foot stays square on the baseline every column shares. */
-.crewlet-stacked-columns__segment:last-child {
+/* The VALUE END: the top of the topmost part, rounded at the smallest step
+   (the foot of the lowest one, below zero). The end on the zero line stays
+   square, where every column starts. */
+.crewlet-stacked-columns__column:not(.crewlet-stacked-columns__column--below) > .crewlet-stacked-columns__segment:last-child {
   border-top-left-radius: var(--radius-xs);
   border-top-right-radius: var(--radius-xs);
 }
 
+.crewlet-stacked-columns__column--below > .crewlet-stacked-columns__segment:last-child {
+  border-bottom-left-radius: var(--radius-xs);
+  border-bottom-right-radius: var(--radius-xs);
+}
+
 .crewlet-stacked-columns__scale {
   position: relative;
   grid-column: 2;
@@ -5863,7 +6348,9 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   margin-top: var(--spacing-2);
 }
 
-/* The middle label stands on the column it names (a style property). */
+/* The middle label stands on the column it names (a style property). On a
+   chart too narrow for three dates it leaves the line to the two ends, which
+   it ran into; the tooltip reads every column's date. */
 .crewlet-stacked-columns__middle {
   position: absolute;
   top: 0;
@@ -5871,6 +6358,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   white-space: nowrap;
 }
 
+.crewlet-stacked-columns__scale > span {
+  white-space: nowrap;
+}
+
+@container crewlet-stacked-columns (width < 22rem) {
+  .crewlet-stacked-columns__middle {
+    display: none;
+  }
+}
+
 /* ─── The reading layer: a focusable plot and its tooltip ─────── */
 
 /*
@@ -5970,13 +6467,18 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background: var(--crewlet-chart-tooltip-swatch-color, var(--color-data-other));
 }
 
+/* A name too long for the box ends in an ellipsis before its value: it ran
+   under the number ("lifec1,397 USD"). The value is never cut. */
 .crewlet-chart-tooltip__name {
   flex: 1;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--color-text-secondary);
 }
 
 .crewlet-chart-tooltip__value {
+  flex: none;
   color: var(--color-text-primary);
   font-variant-numeric: tabular-nums;
 }
@@ -5999,9 +6501,14 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   width: 100%;
 }
 
+/*
+ * A cell shares the strip's width with the others, up to a column's width,
+ * so a strip of one day is one mark rather than a slab across the figure.
+ */
 .crewlet-activity-strip__cell {
   flex: 1;
   min-width: var(--crewlet-activity-strip-cell-min-width, 2px);
+  max-width: var(--crewlet-activity-strip-cell-max-width, var(--spacing-6));
   height: var(--crewlet-activity-strip-fill, 10%);
   /*
    * A quarter of the smallest step. A cell is two pixels wide, so at the step
@@ -6019,6 +6526,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background: var(--color-data-1);
 }
 
+/* The cell being read lifts, as a column being read does, by the hover step
+   behind it rather than by a second colour. */
+.crewlet-activity-strip__cell.is-read {
+  box-shadow: 0 0 0 2px var(--color-surface-hover);
+}
+
 /* ─── Time series, and the sparkline beside a number ──────────── */
 
 /*
@@ -6045,14 +6558,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 /*
- * The grid is DASHED, which is what keeps three horizontal lines from reading
- * as three series. They carry no values of their own: the peak under the plot
- * is the scale, and a chart this size cannot label four gridlines legibly.
+ * The grid is a SOLID HAIRLINE in the default border, the ink the column
+ * chart's grid is drawn in. It was dashed, so that three lines would
+ * not read as three series, but a one pixel rule in a border ink beside a two
+ * pixel line in a data hue reads as neither, and a dash is how a chart says
+ * "projection" or "threshold". The lines carry no values of their own: the
+ * peak under the plot is the scale.
  */
 .crewlet-chart__grid-line {
   stroke: var(--color-border-default);
   stroke-width: 1;
-  stroke-dasharray: 2 4;
 }
 
 /*
@@ -6077,7 +6592,34 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   pointer-events: none;
 }
 
-/* The window's two ends and its peak, under the plot: the scale, as words. */
+/*
+ * A POINT: a disc 8px across in its series' hue, cut out of the ground by a
+ * 2px ring of the card (`--crewlet-spark-ground`, as a sparkline's point is),
+ * centred on its value. It stands over the plot rather than in it, so it stays
+ * round at every width, and is drawn for a series of one point and for every
+ * series at the instant being read.
+ */
+.crewlet-time-series__dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--crewlet-time-series-dot-color, var(--color-data-other));
+  box-shadow: 0 0 0 2px var(--crewlet-spark-ground, var(--color-surface-subtle));
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+/*
+ * The window's two ends and its peak, under the plot: the scale, as words.
+ * The ends hold their words whole and the range between them gives way, so a
+ * narrow chart never runs one into another; under 18rem the range leaves the
+ * line to the tooltip and the summary, which carry it too.
+ */
+.crewlet-time-series {
+  container: crewlet-time-series / inline-size;
+}
+
 .crewlet-time-series__scale {
   display: flex;
   justify-content: space-between;
@@ -6088,6 +6630,33 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 
+.crewlet-time-series__scale > span {
+  flex: none;
+  white-space: nowrap;
+}
+
+/* A window of one instant is drawn at the plot's middle, and so is its date. */
+.crewlet-time-series__scale--instant {
+  justify-content: center;
+}
+
+.crewlet-time-series__scale > .crewlet-time-series__range {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@container crewlet-time-series (width < 18rem) {
+  .crewlet-time-series__range {
+    display: none;
+  }
+}
+
+.crewlet-time-series__legend {
+  margin-top: var(--spacing-2);
+}
+
 /*
  * THE SPARKLINE: the plot stretched to the box, and, with `current`, one
  * accent point on the last value.
@@ -6145,7 +6714,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Checkbox-5UORUG3F.css */
+/* Checkbox-ALWG3WV2.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -6256,6 +6825,17 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-checkbox--sm {
   --crewlet-checkbox-size: 14px;
 
+  /*
+   * ITS LINE IS CENTRED IN THE ROW. The row's floor was a minimum height with
+   * the label at its top, so in a form row of small inputs (whose text sits
+   * on their middle) the box and its label stood 5px above the line every
+   * other control's text was on. The floor is made of equal padding round
+   * the first line instead: one line comes out exactly the row's height with
+   * the text on its middle, and a longer label grows the row downwards with
+   * the box still on its first line.
+   */
+  min-height: 0;
+  padding-block: calc((var(--size-row-sm) - var(--font-line-height-snug) * 1em) / 2);
   font-size: var(--font-size-compact);
 }
 
@@ -6815,7 +7395,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CommandPalette-HBTNKHZQ.css */
+/* CommandPalette-7CFGVBND.css */
 /*
  * The command palette: a field, an optional row of scopes, one scroller
  * holding the lead and the list, and a key legend.
@@ -6965,7 +7545,11 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   background: var(--color-surface-background);
 }
 
+/* THE LEGEND SPANS THE BAND: a palette's foot has no actions, so its start
+   slot takes the whole width, and a consumer that ends the legend with what
+   the search is doing can push that to the band's end. */
 .crewlet-palette .crewlet-modal__footer-start {
+  flex: 1 1 auto;
   gap: var(--spacing-4);
   font-size: var(--font-size-xs);
 }
@@ -7344,7 +7928,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Container-3TSKMGNI.css */
+/* Container-34BAKG7B.css */
 /*
  * Container, the centred content measure. One max-width scale shared by every
  * surface, so pages line up regardless of who composed them.
@@ -7392,9 +7976,11 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   max-width: none;
 }
 
+/* A PHONE'S GUTTER IS THE SHELL'S, 16px, the top bar's own inset: a narrower
+   one stood a page's content left of the title over it. */
 @media (max-width: 480px) {
   .crewlet-container {
-    padding-inline: var(--spacing-3);
+    padding-inline: var(--spacing-4);
   }
 }
 
@@ -7614,7 +8200,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* DashboardCover-RMINBODB.css */
+/* DashboardCover-KYGYMRKW.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
@@ -7628,23 +8214,27 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   color: var(--color-text-tertiary);
 }
 
+/*
+ * THE FIGURES ARE ROWS, the label at the start and the figure (or the dataset
+ * it cites) at the end. Three tiles side by side gave each label a third of a
+ * card's width, so every one was cut to its first word ("Open w…" over "Open
+ * w…"); a row gives the label the card's width, which is what says what the
+ * board measures.
+ */
 .crewlet-dashboard-cover--stats {
   display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  align-items: center;
+  grid-auto-rows: minmax(0, 1fr);
   gap: var(--spacing-2);
 }
 
 .crewlet-dashboard-cover__stat {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--spacing-1);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
   min-width: 0;
-  height: 100%;
-  max-height: 100%;
-  padding: var(--spacing-2) var(--spacing-3);
+  min-height: 0;
+  padding: 0 var(--spacing-3);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
@@ -7659,6 +8249,33 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   white-space: nowrap;
 }
 
+.crewlet-dashboard-cover__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-dashboard-cover__value {
+  flex: none;
+  max-width: 50%;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  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 {
+  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);
 }
@@ -7675,6 +8292,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-dashboard-cover__source {
+  flex: 0 1 auto;
+  max-width: 50%;
   color: var(--color-text-tertiary);
 }
 
@@ -7760,7 +8379,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* DataTable-WZK3V62B.css */
+/* DataTable-NL2YWAIA.css */
 /* ─────────────────────────────────────────────────────────────────
  * Default variant.
  *
@@ -8310,6 +8929,9 @@ body.crewlet-data-table-resizing {
    */
   --crewlet-data-table-cell-pad-y: calc((var(--spacing-2) + var(--spacing-3)) / 2);
   --crewlet-data-table-cell-pad-x: var(--spacing-3);
+  /* The row's height, the list row token unless a host's list keeps another
+     rhythm (and rebinds the cell's vertical inset to fit inside it). */
+  --crewlet-data-table-row-height: var(--size-row-md);
   /* The header's own vertical inset. It equals the cell's at this density and
      parts from it at comfortable, which is where 0.2.0 drew the two apart. */
   --crewlet-data-table-head-pad-y: var(--crewlet-data-table-cell-pad-y);
@@ -8727,7 +9349,7 @@ body.crewlet-data-table-resizing {
 .crewlet-data-table--compact .crewlet-data-table__table td {
   /* The row token, so a compact table lines up with every other list in a
      product and a cell holding one word is as tall as a cell holding a chip. */
-  height: var(--size-row-md);
+  height: var(--crewlet-data-table-row-height);
 }
 
 /*
@@ -11084,88 +11706,199 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DocTabsEditor-RCOWHX5J.css */
+/* DocTabsEditor-4M452LNS.css */
 /*
- * 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.
+ * DocTabsEditor: a document's tabs as the rows of a list, set in the register
+ * of the outline a reader sees in the same column. A row is its title, the
+ * open one filled as an inbox's open row is; its handle and its menu wait at
+ * its edges and show under the pointer or the keyboard, so six tabs read as
+ * six titles.
  */
 
 .crewlet-doc-tabs-editor {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-1);
   min-width: 0;
 }
 
+/* The list's name in the outline's register, with Add at its end. */
+.crewlet-doc-tabs-editor__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-sm);
+}
+
+.crewlet-doc-tabs-editor__heading {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-tight);
+  color: var(--color-text-tertiary);
+}
+
 .crewlet-doc-tabs-editor__list {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: calc(var(--spacing-1) / 2);
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.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);
+/*
+ * A ROW IS THREE TRACKS that every row shares: the handle, the title and the
+ * menu. The title's column starts at one edge all the way down, and a title
+ * wraps rather than being cut, since a tab cut to fit is one an editor
+ * cannot tell from its neighbour.
+ */
+.crewlet-doc-tabs-editor__item {
+  display: grid;
+  grid-template-columns: var(--size-control-sm) minmax(0, 1fr) var(--size-control-sm);
+  align-items: start;
+  gap: calc(var(--spacing-1) / 2);
+  padding: calc(var(--spacing-1) / 2);
+  border-radius: var(--radius-md);
+  transition: background var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-doc-tabs-editor__item:hover {
+  background: var(--color-surface-hover);
 }
 
-.crewlet-doc-tabs-editor__item.is-open {
-  border-color: var(--color-border-strong);
+.crewlet-doc-tabs-editor__item.is-open,
+.crewlet-doc-tabs-editor__item.is-open:hover {
+  background: var(--color-surface-pressed);
+}
+
+/* A row being renamed is its field: the fill would sit around a second box. */
+.crewlet-doc-tabs-editor__item.is-renaming,
+.crewlet-doc-tabs-editor__item.is-renaming:hover {
+  background: none;
+}
+
+/* The new tab's field stands where its title will, in the title's track. */
+.crewlet-doc-tabs-editor__item--new > .crewlet-doc-tabs-editor__field {
+  grid-column: 2;
 }
 
 .crewlet-doc-tabs-editor__item[data-reorder='dragging'] {
-  border-style: dashed;
-  border-color: var(--color-border-strong);
+  outline: 1px dashed var(--color-border-strong);
+  outline-offset: -1px;
   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);
+  gap: calc(var(--spacing-1) / 2);
   min-width: 0;
 }
 
+/*
+ * The title, which opens the tab: the row's own words, never a second box.
+ * Its words start where the small field's do (its side padding and its 1px
+ * border), so a title does not jump sideways when Rename turns it into one.
+ */
+.crewlet-doc-tabs-editor__open {
+  display: block;
+  width: 100%;
+  min-height: var(--size-control-sm);
+  margin: 0;
+  padding: calc((var(--size-control-sm) - var(--font-size-compact) * var(--font-line-height-snug)) / 2)
+    calc(var(--spacing-2) + 1px);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-snug);
+  text-align: start;
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.crewlet-doc-tabs-editor__item:hover .crewlet-doc-tabs-editor__open,
+.crewlet-doc-tabs-editor__open[aria-current='true'] {
+  color: var(--color-text-primary);
+}
+
+.crewlet-doc-tabs-editor__open:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-doc-tabs-editor__open:disabled {
+  cursor: not-allowed;
+}
+
 .crewlet-doc-tabs-editor__problem {
+  padding-inline: calc(var(--spacing-2) + 1px);
   color: var(--color-feedback-danger-ink);
   font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE EDGES WAIT FOR THE POINTER. The handle and the menu are drawn on the
+ * row under the pointer, on the open row, on a row the keyboard is inside and
+ * on a row whose menu is open; elsewhere they keep their place unseen, so
+ * nothing moves when they appear. A device with no hover shows them always,
+ * since there is no pointer to wait for.
+ */
+@media (hover: hover) {
+  .crewlet-doc-tabs-editor__handle,
+  .crewlet-doc-tabs-editor__actions {
+    opacity: 0;
+    transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+  }
+
+  .crewlet-doc-tabs-editor__item:is(:hover, :focus-within, .is-open, :has([aria-expanded='true']))
+    :is(.crewlet-doc-tabs-editor__handle, .crewlet-doc-tabs-editor__actions) {
+    opacity: 1;
+  }
 }
 
-.crewlet-doc-tabs-editor__moves {
+.crewlet-doc-tabs-editor__actions {
   display: inline-flex;
-  flex-shrink: 0;
 }
 
-.crewlet-doc-tabs-editor__add {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-2);
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-doc-tabs-editor__item,
+  .crewlet-doc-tabs-editor__handle,
+  .crewlet-doc-tabs-editor__actions {
+    transition: none;
+  }
+}
+
+/* FORCED COLORS drop the open row's fill, so it is outlined instead. */
+@media (forced-colors: active) {
+  .crewlet-doc-tabs-editor__item.is-open {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
 }
 
 
-/* Document-G3YTZIUL.css */
+/* Document-JUGCSQ4L.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
  *
@@ -11240,10 +11973,25 @@ svg.crewlet-datetime__chevron {
   font-size: var(--font-size-lg);
 }
 
-.crewlet-document :where(h4, h5, h6) {
+/*
+ * EVERY LEVEL A STEP OF ITS OWN. A renderer draws a body from `h2` down, so a
+ * page's fourth and fifth levels land on `h5` and `h6`; set at one size with
+ * `h4`, three levels of a document read as one. The two deepest take the
+ * body's own step, and the last is told apart by its ink, as a run-in
+ * heading is in print.
+ */
+.crewlet-document h4 {
   font-size: var(--font-size-md);
 }
 
+.crewlet-document :where(h5, h6) {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-document h6 {
+  color: var(--color-text-secondary);
+}
+
 .crewlet-document--sm h1 {
   font-size: var(--font-size-lg);
 }
@@ -11286,6 +12034,26 @@ svg.crewlet-datetime__chevron {
   margin-block-start: var(--spacing-1);
 }
 
+/*
+ * THE RHYTHM HOLDS INSIDE A BLOCK THAT HOLDS BLOCKS. The sibling rule above
+ * reaches only the body's own children, so a quote's second paragraph and a
+ * list item's second paragraph ran into the first with no gap at all. A quote
+ * is prose and takes the body's gap; a list item is one point and takes the
+ * smaller step, so its paragraphs still read as one item. A task item's
+ * blocks sit in the column beside its box, which is the same item.
+ */
+.crewlet-document :where(blockquote, [data-callout-body]) > * + * {
+  margin-block-start: var(--crewlet-document-gap);
+}
+
+.crewlet-document :where(li, li > input[type='checkbox'] + *) > :not(input, ul, ol) + :not(ul, ol) {
+  margin-block-start: var(--spacing-2);
+}
+
+.crewlet-document li > input[type='checkbox'] + * > :where(ul, ol) {
+  margin-block-start: var(--spacing-1);
+}
+
 .crewlet-document li::marker {
   color: var(--color-text-tertiary);
 }
@@ -11455,6 +12223,48 @@ svg.crewlet-datetime__chevron {
   overflow-wrap: anywhere;
 }
 
+/*
+ * The title while it is written (`DocumentTitleField`): the title's own type
+ * on no surface of its own, with a line along its foot that answers the
+ * pointer, the focus and a refusal. The line is a border rather than a
+ * shadow, because forced colours keep a border and drop a shadow.
+ */
+.crewlet-document-title-field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 0 0 var(--spacing-1);
+  border: 0;
+  border-block-end: 2px solid transparent;
+  border-radius: 0;
+  background: none;
+  outline: none;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-document-title-field::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+.crewlet-document-title-field:hover {
+  border-block-end-color: var(--color-border-default);
+}
+
+.crewlet-document-title-field:focus-visible {
+  border-block-end-color: var(--color-focus);
+}
+
+.crewlet-document-title-field[aria-invalid='true'] {
+  border-block-end-color: var(--color-feedback-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-document-title-field {
+    transition: none;
+  }
+}
+
 /*
  * A TABLE CELL'S ALIGNMENT, read off `data-align` as well as off a style: an
  * editor that may not write a style attribute under a strict policy marks a
@@ -11522,12 +12332,8 @@ svg.crewlet-datetime__chevron {
   color: var(--color-text-primary);
 }
 
-.crewlet-document [data-callout-body] > * + * {
-  margin-block-start: var(--crewlet-document-gap);
-}
-
 
-/* EditingStatus-L6THUAN7.css */
+/* EditingStatus-NNA2CKIL.css */
 /*
  * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
  * small step, quiet until something is unsaved.
@@ -11575,10 +12381,12 @@ svg.crewlet-datetime__chevron {
 /*
  * THE WORDS FOLD AND THE DOT STAYS where room is short, hidden from the eye
  * and still read by a screen reader, so the status says the same thing to
- * everyone. On a phone the state folds. On an artifact bar's narrow
- * arrangement (below 640px, as ArtifactBar.css draws it) "Editing" folds too:
- * the title has the row's room first, and Cancel and Save beside the dot
- * already say an edit is open.
+ * everyone. On a phone the state folds. On an artifact bar the title has the
+ * row's room first: below 900px (a small laptop's bar beside the rail) the
+ * state folds, since the dot already turns the accent once anything is
+ * unsaved, so a title is not cut to two words to make room for the sentence;
+ * on the narrow arrangement (below 640px, as ArtifactBar.css draws it)
+ * "Editing" folds too, and Cancel and Save beside the dot say an edit is open.
  */
 @media (width < 480px) {
   .crewlet-editing-status__state {
@@ -11591,6 +12399,17 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+@container crewlet-artifact-bar (width < 900px) {
+  .crewlet-editing-status__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
 @container crewlet-artifact-bar (width < 640px) {
   .crewlet-editing-status__label,
   .crewlet-editing-status__state {
@@ -13691,6 +14510,91 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* LayersList-NQZEIPZB.css */
+/*
+ * A canvas's list of layers (LayersList.tsx): a heading that stays, over one
+ * line per entry that scrolls on its own.
+ */
+
+.crewlet-layers-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-layers-list__heading {
+  flex: none;
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+}
+
+/*
+ * THE ENTRIES HANG INTO THE GUTTER by their own padding and edge, so their
+ * letters stand on the list's edge, in line with the heading above them.
+ */
+.crewlet-layers-list__items {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0;
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 2px));
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+/*
+ * The current entry's mark is held on every entry in the resting ink, as the
+ * document outline's is, so nothing moves when the pick does. The radius is
+ * the control step's on the end the mark does not take.
+ */
+.crewlet-layers-list__item {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: none;
+  border-inline-start: 2px solid transparent;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--font-line-height-normal);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.crewlet-layers-list__item:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The accent edge every current row in the system takes, in the primary ink.
+   A border, so forced colours keep it. */
+.crewlet-layers-list__item[aria-current='true'] {
+  border-inline-start-color: var(--color-brand-accent);
+  color: var(--color-text-primary);
+}
+
+/* The ring lies inside the entry, where the scroller beside it cannot cut it. */
+.crewlet-layers-list__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+
 /* Layout-ZBEGLXAE.css */
 /*
  * Stack, Inline, Spacer and AutoGrid.
@@ -15225,7 +16129,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-XOSV6FAH.css */
+/* Modal-7MWRCWAI.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -15512,6 +16416,36 @@ svg.crewlet-datetime__chevron {
   border-bottom: 1px solid var(--color-border-default);
 }
 
+/*
+ * WITH A SUBTITLE, THE HEAD'S CONTROLS SIT ON THE TITLE'S LINE. Centred on
+ * the whole head, the mark, the actions and the close control floated beside
+ * the description, belonging to neither line; top-aligned, they hung from the
+ * head's top edge, a few pixels above the title they belong to. So the row
+ * aligns to the top and each control is centred on the title's first line:
+ * the mark and the actions in a box one title line tall (what is taller
+ * overflows it evenly, into the head's padding), and a lone control by the
+ * margin that puts its centre there. A dialog with no subtitle keeps the
+ * centring above, where the two are the same thing.
+ *
+ * DIALOGS ONLY. A sheet's head is a bar at the shell's top-bar height and
+ * centres what it holds on the bar, as the bar behind it does.
+ */
+.crewlet-modal__header--subtitled {
+  --crewlet-modal-title-line: calc(var(--font-size-sm) * var(--font-line-height-tight));
+  align-items: flex-start;
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__icon,
+.crewlet-modal__header--subtitled > .crewlet-modal__actions {
+  align-items: center;
+  height: var(--crewlet-modal-title-line);
+}
+
+.crewlet-modal__header--subtitled > .crewlet-modal__close,
+.crewlet-modal__header--subtitled > .crewlet-modal__back {
+  margin-block: calc((var(--crewlet-modal-title-line) - var(--size-control-md)) / 2);
+}
+
 /*
  * A SHEET IS COMMITTED FROM ITS HEAD, so its head is the taller band, not the
  * tighter one. It stands at the shell's own top-bar height, which is what puts
@@ -15845,7 +16779,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Note-ONSKKTOA.css */
+/* Note-WI5MLZOO.css */
 /*
  * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
  */
@@ -15908,6 +16842,19 @@ svg.crewlet-datetime__chevron {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+/*
+ * PARAGRAPHS STAND APART, by the step a note's heading stands from its words.
+ * A host that resets a paragraph's margins (as an application's base sheet
+ * does) ran two paragraphs into what read as one that wrapped early.
+ */
+.crewlet-note :is(p, ul, ol) {
+  margin-block: 0;
+}
+
+.crewlet-note :is(p, ul, ol) + :is(p, ul, ol) {
+  margin-block-start: var(--spacing-2);
+}
+
 .crewlet-note > :first-child {
   margin-top: 0;
 }
@@ -17750,13 +18697,21 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PresenceStack-QSXQJND5.css */
+/* PresenceStack-FJJQVH74.css */
 /*
  * Who is here (PresenceStack.tsx), on the avatar stack's own geometry: the
  * overlap and the counted chip are the stack's. What this adds is the ring in
  * each present collaborator's hue, outside the cut-out, and the idle fade.
  */
 
+/* HOW FAR THE RING REACHES past each badge: the cut-out, then the hue. The
+   ring is drawn outside the stack's own box, so a container that places the
+   stack flush to an edge (or clips) keeps this much clear round it. */
+.crewlet-presence-stack {
+  --crewlet-presence-stack-cutout: 2px;
+  --crewlet-presence-stack-reach: calc(var(--crewlet-presence-stack-cutout) * 2);
+}
+
 /* The wrapper (a span, or a button when badges select) carries no edge of its
    own: the cut-out and the hue ring are drawn on the badge inside it, which
    has the badge's own outline to follow. */
@@ -17789,15 +18744,15 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 .crewlet-presence-stack .crewlet-presence-stack__badge {
-  box-shadow: 0 0 0 2px var(--crewlet-avatar-stack-ground);
+  box-shadow: 0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground);
 }
 
 /* The hue ring sits outside the cut-out, so it reads as a ring round the
    badge rather than a stroke on it. */
 .crewlet-presence-stack .crewlet-presence-stack__badge--present {
   box-shadow:
-    0 0 0 2px var(--crewlet-avatar-stack-ground),
-    0 0 0 4px var(--crewlet-presence-hue);
+    0 0 0 var(--crewlet-presence-stack-cutout) var(--crewlet-avatar-stack-ground),
+    0 0 0 var(--crewlet-presence-stack-reach) var(--crewlet-presence-hue);
 }
 
 .crewlet-presence-stack .crewlet-presence-stack__badge--idle {
@@ -17812,48 +18767,58 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* PresenterView-T2C6ZZ3N.css */
+/* PresenterView-T3EXIQ5S.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.
+ * The room's slide is as large as fits the column with its controls right
+ * under it, drawn as the slide itself rather than letterboxed in a well. 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);
+  gap: var(--spacing-5);
   height: 100%;
   min-height: 0;
   padding: var(--spacing-4);
+  box-sizing: border-box;
   background: var(--color-surface-background);
   color: var(--color-text-primary);
 }
 
+/* THE SLIDE AS LARGE AS FITS, measured against the room under its caption
+   (a size container), less the controls under it: the largest box of the
+   slide's shape that fits both ways, so nothing is letterboxed and the
+   controls sit on the slide's foot wherever that is. */
 .crewlet-presenter__main {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-3);
+  gap: var(--spacing-2);
+  min-width: 0;
   min-height: 0;
+  margin: 0;
 }
 
-.crewlet-presenter__main .crewlet-slide-stage {
+.crewlet-presenter__screen {
+  container-type: size;
   flex: 1;
-  min-height: 0;
-  border-radius: var(--radius-md);
-}
-
-.crewlet-presenter__controls {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: var(--spacing-3);
+  min-height: 0;
 }
 
-.crewlet-presenter__position {
-  color: var(--color-text-secondary);
-  font-variant-numeric: tabular-nums;
+.crewlet-presenter__screen > .crewlet-slide-stage {
+  flex: none;
+  width: min(
+    100cqw,
+    (100cqh - var(--size-control-sm) - var(--spacing-3)) * var(--crewlet-presenter-ratio, 1.7778)
+  );
+  border-radius: var(--radius-md);
 }
 
 .crewlet-presenter__side {
@@ -17863,17 +18828,31 @@ button.crewlet-presence-stack__member:focus-visible {
   min-height: 0;
 }
 
-.crewlet-presenter__next .crewlet-slide-stage {
-  border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+.crewlet-presenter__next,
+.crewlet-presenter__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-height: 0;
+  margin: 0;
+}
+
+.crewlet-presenter__caption {
+  margin: 0;
 }
 
+/* THE END HOLDS THE NEXT SLIDE'S PLACE at its shape, so the timer and the
+   notes under it stay where they were on the last slide. */
 .crewlet-presenter__end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: var(--crewlet-presenter-ratio, 1.7778);
   margin: 0;
-  padding: var(--spacing-6) var(--spacing-3);
-  border: 1px dashed var(--color-border-default);
+  border: 1px dashed var(--color-border-strong);
   border-radius: var(--radius-sm);
   color: var(--color-text-tertiary);
+  font-size: var(--font-size-sm);
   text-align: center;
 }
 
@@ -17892,9 +18871,13 @@ button.crewlet-presence-stack__member:focus-visible {
 
 .crewlet-presenter__notes {
   flex: 1;
+}
+
+.crewlet-presenter__notes-body {
+  flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
   border-radius: var(--radius-md);
   background: var(--color-surface-subtle);
   font-size: var(--font-size-lg);
@@ -17902,7 +18885,7 @@ button.crewlet-presence-stack__member:focus-visible {
   white-space: pre-wrap;
 }
 
-.crewlet-presenter__notes p {
+.crewlet-presenter__notes-body p {
   margin: 0;
 }
 
@@ -17910,11 +18893,27 @@ button.crewlet-presence-stack__member:focus-visible {
   color: var(--color-text-tertiary);
 }
 
+/* ONE COLUMN on a narrow screen: the page scrolls, so the slide is as wide as
+   the column and the notes as tall as they are. */
 @media (max-width: 48rem) {
   .crewlet-presenter {
     grid-template-columns: minmax(0, 1fr);
     height: auto;
   }
+
+  .crewlet-presenter__screen {
+    container-type: normal;
+    flex: none;
+  }
+
+  .crewlet-presenter__screen > .crewlet-slide-stage {
+    width: 100%;
+  }
+
+  .crewlet-presenter__notes-body {
+    flex: none;
+    overflow: visible;
+  }
 }
 
 
@@ -19002,15 +20001,11 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* SandboxedFrame-L6HBQZCD.css */
+/* SandboxedFrame-P5NASXB7.css */
 /*
  * The frame fills the box it is given. The page around it does not scroll
  * round the artifact: the artifact scrolls inside its own document, which is
  * what a viewer body that holds one wants.
- *
- * The region takes focus when the frame hands it back, and keeps the
- * document's own focus treatment then: a reader who just left a page by
- * keyboard needs to see where they landed.
  */
 
 .crewlet-sandboxed-frame {
@@ -19034,6 +20029,10 @@ button.crewlet-presence-stack__member:focus-visible {
   background: transparent;
 }
 
+/* THE PLACEHOLDER AND THE END STATES SIT AT ONE INSET, the frame's margin,
+   so a reader who watches a page load and then fail sees the callout take
+   the placeholder's place rather than jump beside it. */
+
 /* Kept out of sight while it starts, so a document that has not painted in
    the reader's palette yet is never what they see. It still loads. */
 .crewlet-sandboxed-frame[data-state='loading'] .crewlet-sandboxed-frame__frame {
@@ -19044,7 +20043,7 @@ button.crewlet-presence-stack__member:focus-visible {
   position: absolute;
   inset: 0;
   display: flex;
-  padding: var(--spacing-3);
+  padding: var(--spacing-4);
 }
 
 .crewlet-sandboxed-frame__end {
@@ -19054,6 +20053,28 @@ button.crewlet-presence-stack__member:focus-visible {
   padding: var(--spacing-4);
 }
 
+/* THE REGION TAKES FOCUS WHEN THE FRAME HANDS IT BACK, and a reader who just
+   left a page by keyboard needs to see where they landed. The document's own
+   ring sits outside the box, where a frame filling a clipping card loses it,
+   so the region draws its ring inside its edge, on a layer above the frame. */
+.crewlet-sandboxed-frame:focus-visible {
+  /* Transparent rather than none: forced-colors mode paints a transparent
+     outline in the system ink, so the region's edge is never left bare. */
+  outline: 2px solid transparent;
+}
+
+.crewlet-sandboxed-frame:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  /* An outline, never a shadow: forced-colors mode keeps only outlines. */
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  pointer-events: none;
+}
+
 
 /* SearchTrigger-KIZLWBEH.css */
 /*
@@ -19173,7 +20194,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Section-QR3ILQVK.css */
+/* Section-O5AHGSOG.css */
 /*
  * Section, the vertical rhythm band. One spacing scale keeps the cadence
  * between page sections consistent, and collapses on small viewports.
@@ -19232,7 +20253,11 @@ button.crewlet-presence-stack__member:focus-visible {
 .crewlet-section__title {
   margin: 0;
   font-family: var(--font-family-display);
-  font-size: var(--font-size-lg);
+  /* THE REGISTER IS THE CONTAINER'S TO SET. A screen's band heads at the large
+     step; a side panel, whose own title is the small step, sets
+     `--crewlet-section-title-size` so the sections inside it never outrank the
+     heading they sit under. */
+  font-size: var(--crewlet-section-title-size, var(--font-size-lg));
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-normal);
   letter-spacing: var(--font-letter-spacing-tight);
@@ -19291,15 +20316,34 @@ button.crewlet-presence-stack__member:focus-visible {
     padding-block: var(--spacing-10);
   }
 
-  /*
-   * Narrow: the sentence moves under the heading rather than competing with it
-   * for a line that has room for neither.
-   */
   .crewlet-section__header {
     flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-section__description {
+    order: 1;
+    white-space: normal;
+    flex-basis: 100%;
+  }
+}
+
+/*
+ * NARROW: the sentence moves under the heading rather than competing with it
+ * for a line that has room for neither, and the actions stay on the heading's
+ * line. Measured on the column the section sits in where it sits in a size
+ * container (a side panel, a screen's content column), since a panel beside a
+ * wide window is as narrow as a phone; the window's width above is the answer
+ * where there is no container to ask.
+ */
+@container (width < 36rem) {
+  .crewlet-section__header {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
   }
 
   .crewlet-section__description {
+    order: 1;
     white-space: normal;
     flex-basis: 100%;
   }
@@ -20049,7 +21093,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* ShareDialog-YZ4F37MW.css */
+/* ShareDialog-4QDCBWMH.css */
 /*
  * Three blocks under the title: who to add and at what role, who has access,
  * and what the whole company may do. Each row of the audience is the badge,
@@ -20068,6 +21112,10 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
+  /* A BLOCK'S WORTH OF ROOM ABOVE EACH HEADING, over the body's own gap: at
+     the gap alone "Who has access" sat as close under the add field as the
+     role select beside it, and read as that field's label. */
+  padding-block-start: var(--spacing-2);
 }
 
 .crewlet-share-dialog__heading {
@@ -20139,11 +21187,19 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-share-dialog__note,
+.crewlet-share-dialog__invalid,
 .crewlet-share-dialog__refusal {
   grid-column: 2 / -1;
   font-size: var(--font-size-xs);
 }
 
+/* A SHARE THAT REACHES NOBODY says why in the warning ink, the state a person
+   is asked to act on, and its "No access" stands in the quiet ink a role
+   would. */
+.crewlet-share-dialog__invalid {
+  color: var(--color-feedback-warning-ink);
+}
+
 .crewlet-share-dialog__note {
   color: var(--color-text-tertiary);
 }
@@ -20198,7 +21254,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SheetGrid-J3TKKXZL.css */
+/* SheetGrid-AKPUCK67.css */
 /*
  * The editable sheet (SheetGrid.tsx) and its cells (cells.tsx).
  *
@@ -20214,6 +21270,8 @@ svg.crewlet-select__chevron {
 
 .crewlet-sheet-grid {
   --crewlet-sheet-row-height: var(--size-sheet-row);
+  /* The history control: a target-sized button, which its room in the cell is sized from. */
+  --crewlet-sheet-history-size: var(--size-target-min);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -20221,7 +21279,33 @@ svg.crewlet-select__chevron {
   min-height: 0;
   color: var(--color-text-primary);
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-sm);
+  /* Values at the compact step, a grid's own register: the headers stay a
+     step under them, in sentence case. */
+  font-size: var(--font-size-compact);
+}
+
+/* THE MEASURING ROW: each sized column's header and sampled values, drawn by
+   the real header and cell rules at their natural width, out of sight and out
+   of reach. The grid reads each one's widest part as the column's width. */
+.crewlet-sheet-grid__measure {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.crewlet-sheet-grid__measure > div {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+}
+
+.crewlet-sheet-grid__measure :is(.crewlet-sheet-grid__header, .crewlet-sheet-grid__cell) {
+  width: max-content;
 }
 
 /* Measured by the component: the resolved row height at the current density. */
@@ -20250,9 +21334,16 @@ svg.crewlet-select__chevron {
 }
 
 /* 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. */
+   page may cap it, and the grid never grows past the height it was given.
+   IN A BOUNDED COLUMN IT GIVES WAY: the scroller shrinks to the room its
+   container has left under whatever stands above it (a bar that wraps on a
+   phone included), so the foot lands on the container's edge rather than
+   on a guess of how tall the rest is. It never shrinks below the floor the
+   page sets (--crewlet-sheet-min-height), and never below its own rows'
+   height, so a short sheet is not stretched into an empty slab. */
 .crewlet-sheet-grid--fit-content > .crewlet-sheet-grid__scroller {
-  flex: none;
+  flex: 0 1 auto;
+  min-height: min(var(--crewlet-sheet-min-height, 0px), var(--crewlet-sheet-content-height, 0px));
   max-height: var(--crewlet-sheet-max-height, 70vh);
 }
 
@@ -20338,6 +21429,24 @@ svg.crewlet-select__chevron {
   margin-inline-start: auto;
 }
 
+/* A HEADER SITS ON ITS COLUMN'S EDGE: a number's and a rating's name end
+   where their values end, the sort mark on the inner side, and a checkbox's
+   name is centred over its boxes. A name on the leading edge over values on
+   the trailing one read as belonging to the column before. */
+.crewlet-sheet-grid__header--number,
+.crewlet-sheet-grid__header--rating {
+  flex-direction: row-reverse;
+}
+
+.crewlet-sheet-grid__header--number > .crewlet-sheet-grid__header-presence,
+.crewlet-sheet-grid__header--rating > .crewlet-sheet-grid__header-presence {
+  margin-inline: 0 auto;
+}
+
+.crewlet-sheet-grid__header--checkbox {
+  justify-content: center;
+}
+
 .crewlet-sheet-grid .crewlet-sheet-grid__header-badge {
   box-shadow: 0 0 0 2px var(--crewlet-presence-hue);
 }
@@ -20358,6 +21467,13 @@ svg.crewlet-select__chevron {
   transform: translateY(-50%);
 }
 
+/* The active row's actions and the active cell's history are the reader's
+   tools while they are in the grid, not marks on a sheet nobody has entered. */
+.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__row-actions--active-row,
+.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__cell--history:not(:hover) > .crewlet-sheet-grid__history {
+  visibility: hidden;
+}
+
 /* The bar at a row's leading edge while somebody has it selected. */
 .crewlet-sheet-grid__rownum--present::before {
   position: absolute;
@@ -20393,10 +21509,21 @@ svg.crewlet-select__chevron {
   justify-content: center;
 }
 
-.crewlet-sheet-grid__cell--selected {
+/* THE SELECTION IS TINTED WHILE THE READER IS IN THE GRID, or while it
+   spans more than one cell. A grid nobody has entered still holds its first
+   cell as the active one (the keys start there), and tinting it drew a stray
+   highlight on every sheet as it opened. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
   background: var(--color-brand-accent-soft);
 }
 
+/* THE FROZEN EDGE once the grid is scrolled sideways: the columns that stay
+   (or the row numbers, where none do) end on the strong hairline, so the
+   values passing under them read as scrolled rather than cut. */
+.crewlet-sheet-grid__scroller--across .crewlet-sheet-grid__frozen-edge {
+  border-inline-end-color: var(--color-border-strong);
+}
+
 .crewlet-sheet-grid__cell:focus-visible,
 .crewlet-sheet-grid__header:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -20464,6 +21591,31 @@ svg.crewlet-select__chevron {
   white-space: normal;
 }
 
+/* THE HISTORY CONTROL HAS ITS OWN ROOM while it shows, so a value ends, or
+   ellipsises, before it rather than running under it. It sits at the edge
+   the value does not start from: the trailing edge of a value drawn from the
+   leading one, the leading edge of a number or a rating (drawn on the
+   trailing one), so neither moves when its cell becomes active. A checkbox,
+   centred in a column wider than it, needs no room made. */
+.crewlet-sheet-grid__grid:focus-within .crewlet-sheet-grid__cell--history,
+.crewlet-sheet-grid__cell--history:hover {
+  padding-inline-end: calc(var(--spacing-1) * 2 + var(--crewlet-sheet-history-size));
+}
+
+.crewlet-sheet-grid__grid:focus-within :is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating).crewlet-sheet-grid__cell--history,
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating).crewlet-sheet-grid__cell--history:hover {
+  padding-inline: calc(var(--spacing-1) * 2 + var(--crewlet-sheet-history-size)) var(--spacing-2);
+}
+
+.crewlet-sheet-grid__grid:focus-within .crewlet-sheet-grid__cell--checkbox.crewlet-sheet-grid__cell--history,
+.crewlet-sheet-grid__cell--checkbox.crewlet-sheet-grid__cell--history:hover {
+  padding-inline-end: var(--spacing-2);
+}
+
+:is(.crewlet-sheet-grid__cell--number, .crewlet-sheet-grid__cell--rating) > .crewlet-sheet-grid__history {
+  inset-inline: var(--spacing-1) auto;
+}
+
 .crewlet-sheet-grid__history {
   position: absolute;
   top: 50%;
@@ -20471,9 +21623,11 @@ svg.crewlet-select__chevron {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-1);
+  width: var(--crewlet-sheet-history-size);
+  height: var(--crewlet-sheet-history-size);
+  padding: 0;
   border: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: var(--color-surface-elevated);
   color: var(--color-text-secondary);
   transform: translateY(-50%);
@@ -20481,6 +21635,7 @@ svg.crewlet-select__chevron {
 }
 
 .crewlet-sheet-grid__history:hover {
+  background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
 
@@ -20855,7 +22010,7 @@ svg.crewlet-select__chevron {
 }
 
 @media (forced-colors: active) {
-  .crewlet-sheet-grid__cell--selected {
+  .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
     background: Highlight;
     color: HighlightText;
   }
@@ -21702,7 +22857,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideCompare-MGM3U2ME.css */
+/* SlideCompare-HTCMPQFY.css */
 /*
  * SlideCompare: two versions of a deck, slide by slide.
  *
@@ -21761,9 +22916,34 @@ svg.crewlet-select__chevron {
   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__side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* THE VERSIONS' NAMES over the two columns; over each side instead once the
+   sides stack. */
+.crewlet-slide-compare__columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-3);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-slide-compare__side-label {
+  display: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-slide-compare__toggle {
+  align-self: flex-start;
 }
 
 .crewlet-slide-compare__missing {
@@ -21782,17 +22962,36 @@ svg.crewlet-select__chevron {
   .crewlet-slide-compare__sides {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .crewlet-slide-compare__columns {
+    display: none;
+  }
+
+  .crewlet-slide-compare__side-label {
+    display: block;
+  }
 }
 
 
-/* SlideFilmstrip-BCLNAHFX.css */
+/* SlideFilmstrip-5U6Z55GS.css */
 /*
- * SlideFilmstrip: the column of slide thumbnails beside a deck's stage.
+ * SlideFilmstrip: the column of slide thumbnails beside a deck's stage, or
+ * the row under it on a phone.
  *
  * The selected slide is ringed in the brand accent rather than filled, so its
  * thumbnail still shows the slide's own colours.
+ *
+ * THE STRIP IS ITS OWN SCROLLER: a host bounds it (a column's max-height, a
+ * row's width) and the strip scrolls inside that, keeping the selected slide
+ * in view, with its scroll chained to nothing so a flick at its end does not
+ * scroll the page under the reader's thumb.
  */
 
+.crewlet-slide-filmstrip {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
 .crewlet-slide-filmstrip__list {
   display: flex;
   flex-direction: column;
@@ -21860,6 +23059,9 @@ svg.crewlet-select__chevron {
   color: var(--color-text-secondary);
 }
 
+/* A CONTROL'S CORNER: the handle is a 24px control like any toolbar button,
+   so it takes --radius-md; the thumbnail beside it is a slide, and keeps the
+   slide's own smaller corner. */
 .crewlet-slide-filmstrip__handle {
   display: inline-flex;
   align-items: center;
@@ -21868,7 +23070,7 @@ svg.crewlet-select__chevron {
   min-height: var(--size-target-min);
   padding: 0;
   border: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--color-text-tertiary);
   cursor: grab;
@@ -21895,8 +23097,55 @@ svg.crewlet-select__chevron {
   box-shadow: 0 var(--spacing-1) 0 var(--color-brand-accent);
 }
 
+/* A ROW UNDER THE STAGE: fixed-width thumbnails that scroll sideways, each
+   with its number and its handle under it rather than beside it. */
+/* NO SCROLL SNAP: a snap point would pull the strip back to the start of an
+   earlier thumbnail just after it scrolled the selected one into view. */
+.crewlet-slide-filmstrip--horizontal {
+  overflow-y: hidden;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__list {
+  flex-direction: row;
+  gap: var(--spacing-3);
+  width: max-content;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'thumb thumb'
+    'number handle';
+  align-items: center;
+  width: 7.5rem;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__thumb {
+  grid-area: thumb;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__number {
+  grid-area: number;
+  padding-top: 0;
+  text-align: left;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__handle {
+  grid-area: handle;
+  min-height: var(--size-control-sm);
+  cursor: grab;
+}
+
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item[data-reorder-target='before'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: calc(var(--spacing-1) * -1) 0 0 var(--color-brand-accent);
+}
 
-/* SlideGrid-RT6QEQEE.css */
+.crewlet-slide-filmstrip--horizontal .crewlet-slide-filmstrip__item[data-reorder-target='after'] .crewlet-slide-filmstrip__thumb {
+  box-shadow: var(--spacing-1) 0 0 var(--color-brand-accent);
+}
+
+
+/* SlideGrid-S4LTJ4UU.css */
 /*
  * SlideGrid: every slide of a deck at once, by its outline's sections.
  */
@@ -21937,11 +23186,6 @@ svg.crewlet-select__chevron {
   cursor: pointer;
 }
 
-.crewlet-slide-grid__card .crewlet-slide-stage {
-  border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
-}
-
 .crewlet-slide-grid__card:hover .crewlet-slide-stage {
   outline-color: var(--color-border-hover);
 }
@@ -21980,8 +23224,73 @@ svg.crewlet-select__chevron {
   white-space: nowrap;
 }
 
+/* TWO TO A ROW ON A PHONE: a grid of one is the filmstrip at full size, and
+   the grid is for seeing the deck's run at a glance. */
+@media (width < 640px) {
+  .crewlet-slide-grid__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-3);
+  }
+}
+
+
+/* SlideNav-BLFJF6AH.css */
+/*
+ * SlideNav: Previous, the position and Next, and whatever follows them.
+ */
+
+.crewlet-slide-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-slide-nav__position {
+  min-width: 5em;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.crewlet-slide-nav__more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: var(--spacing-2);
+  padding-left: var(--spacing-3);
+  border-left: 1px solid var(--color-border-default);
+}
+
+/* OVER A PROJECTED SLIDE: a pill in the projection's own fixed colours, so it
+   reads over black bars and over a slide of any colour, in every theme. */
+.crewlet-slide-nav--projection {
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-pill);
+  background: var(--color-projection-ground);
+  color: var(--color-projection-ink);
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__position {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-slide-nav__more {
+  border-left-color: var(--color-projection-rule);
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost {
+  color: inherit;
+}
+
+.crewlet-slide-nav--projection .crewlet-icon-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--color-projection-hover);
+  color: inherit;
+}
 
-/* SlideStage-KGRRALXR.css */
+
+/* SlideStage-S2FISF4C.css */
 /*
  * SlideStage: a slide laid out at its authored size and scaled to its box.
  *
@@ -22000,6 +23309,29 @@ svg.crewlet-select__chevron {
   height: 100%;
 }
 
+/* THE SLIDE'S OWN EDGE: the box is the slide (or, for a show in the page,
+   the room it was measured into), so its outline is the slide's edge, drawn over the slide's corners rather than outside them. A host that
+   marks a stage (selected, current) recolours this outline rather than adding
+   a second line. */
+.crewlet-slide-stage--framed {
+  border-radius: var(--radius-sm);
+  outline: 1px solid var(--color-border-default);
+}
+
+:fullscreen .crewlet-slide-stage--framed,
+.crewlet-slide-stage--framed:fullscreen {
+  border-radius: 0;
+  outline: 0;
+}
+
+/* FULL SCREEN IS A PROJECTOR: the bars round a slide whose shape is not the
+   screen's are black, whatever the theme, so the room sees the slide alone. */
+:fullscreen .crewlet-slide-stage--contain,
+:fullscreen .crewlet-slide-stage--view,
+.crewlet-slide-stage:fullscreen {
+  background: var(--color-projection-letterbox);
+}
+
 /* Until it is measured, and wherever it is not (no layout), a view stage is
    its slide's shape at its width. In full screen it fills the box, sharing a
    flex column with the show's controls. */
@@ -22032,7 +23364,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* StatCard-KPAFD4E2.css */
+/* StatCard-4T7TMWMN.css */
 /*
  * The stat tile.
  *
@@ -22107,12 +23439,18 @@ svg.crewlet-select__chevron {
  * The value's line: the number at its start, the figure at its end, both on
  * the line's FOOT, so a 28px number and a 28px sparkline share a baseline
  * rather than centring on each other.
+ *
+ * THE FIGURE GIVES WAY BEFORE THE NUMBER. Where a tile is too narrow for
+ * both (a row of tiles on a phone, two to a line), the figure moves under the
+ * number rather than the number being cut to its first digit: "2…" beside a
+ * meter said nothing, and the meter alone says less than the number.
  */
 .crewlet-statcard__reading {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
-  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  gap: var(--spacing-2) calc(var(--spacing-2) + var(--spacing-1) / 2);
   min-width: 0;
 }
 
@@ -22121,40 +23459,51 @@ svg.crewlet-select__chevron {
  * track, with tabular figures so a number that ticks up moves nothing beside
  * it.
  *
- * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The value is one line
+ * ITS LINE IS THE GLYPH'S OWN HEIGHT (a leading of 1). The number is one line
  * that never wraps, and any leading over it is air under the digits that
  * opens between the number and the line below it and stands the number
  * higher than the figure it shares a foot with.
  *
- * A BLOCK, NOT A FLEX ROW, because it is one line of text that has to END
- * rather than stop: `text-overflow` acts on a block container only, and as a
- * flex row the number and its unit were anonymous flex items no rule could
- * reach, so a value too long for its tile was cut mid-digit with nothing to
- * say a digit was lost. The unit sits on the same line as inline text, on
- * the number's baseline.
+ * THE NUMBER ENDS, THE UNIT MOVES. The number and its unit are a wrapping
+ * row on one baseline: where the tile is too narrow for both, the unit moves
+ * under the number whole ("of 10 GB"), rather than being cut to "of 1…"; and
+ * the number, alone on its line and still too long, ends in an ellipsis
+ * rather than stopping mid-digit with nothing to say a digit was lost. The
+ * ellipsis is the number's own box's, since `text-overflow` acts on a block
+ * container only.
  */
 .crewlet-statcard__value {
-  display: block;
-  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  /* Never narrower than the number, so the figure wraps first; never wider
+     than the tile, so a number too long for the tile alone still ends. */
+  flex: 1 0 auto;
   min-width: 0;
+  max-width: 100%;
   font-size: var(--font-size-display);
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
   line-height: 1;
   font-variant-numeric: tabular-nums;
+}
+
+.crewlet-statcard__number {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The unit, "/ 7" after the 4: the quiet ink at a text step, medium, so it
-   reads as part of the figure rather than as a second one. */
+/* The unit, on the number's baseline at a quieter weight, kept whole. */
 .crewlet-statcard__unit {
-  margin-inline-start: var(--spacing-1);
+  flex: none;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--font-letter-spacing-normal);
   color: var(--color-text-tertiary);
+  white-space: nowrap;
 }
 
 /*
@@ -22172,6 +23521,16 @@ svg.crewlet-select__chevron {
   min-width: 0;
 }
 
+/* BELOW: the figure under the number, as wide as the tile. */
+.crewlet-statcard__reading--below {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.crewlet-statcard__reading--below > .crewlet-statcard__trend {
+  width: auto;
+}
+
 .crewlet-statcard__trend > :where(button, a) {
   align-self: flex-end;
 }
@@ -23505,7 +24864,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tabs-CJGO35BH.css */
+/* Tabs-MMZXV5EF.css */
 /*
  * The pill register: Tabs and SegmentedControl.
  *
@@ -23603,13 +24962,14 @@ b.crewlet-switcher__match {
  * chips floated; the raised rung is held a visible step above the card by the
  * palette suite, and the hairline finds it on any other ground.
  *
- * The inset is 2px, which is smaller than the scale's first step on purpose:
- * it is the gap a chip needs to read as sitting IN the well. With the 1px
- * boundary it is three pixels a side, and a 24px chip makes a 30px row: the
- * medium control step, the height of the button beside it.
+ * The inset is 1px, a hairline of the well's own ground round each chip:
+ * with the 1px boundary it is two pixels a side, and a 24px chip makes a 28px
+ * row, the tab step. Tabs sit between the 26px controls of a toolbar or a
+ * panel and the 32px actions of a page, so a row of them reads as the place's
+ * navigation rather than as one more button beside them.
  */
 .crewlet-tabs--pill {
-  --crewlet-tabs-pill-inset: 2px;
+  --crewlet-tabs-pill-inset: 1px;
 
   gap: var(--crewlet-tabs-pill-inset);
   padding: var(--crewlet-tabs-pill-inset);
@@ -23713,8 +25073,8 @@ b.crewlet-switcher__match {
  * can hit. max() against --size-target-min holds every density at 24px or
  * more, and at density 1 the two agree.
  *
- * The corner is the small radius, the design's: the well's 8px less its 1px
- * boundary and 2px inset is 5px, and a chip a pixel rounder than that
+ * The corner is the chip radius (--radius-chip): the well's 8px less its 1px
+ * boundary and 1px inset is 6px, and a chip a pixel rounder than that
  * concentric curve is what reads as a chip sitting IN the well rather than a
  * second well inside it. The side pad is the design's 10px, two steps and a
  * half.
@@ -23732,7 +25092,7 @@ b.crewlet-switcher__match {
 .crewlet-tabs--pill .crewlet-tabs__tab {
   min-height: max(var(--size-target-min), calc(var(--size-control-md) - 6px));
   padding: 0 calc(var(--spacing-2) + var(--spacing-1) / 2);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-chip);
   color: var(--color-text-secondary);
   font-size: var(--font-size-xs);
 }
@@ -25776,7 +27136,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-EOOOTSJT.css */
+/* Toaster-C6BQ7L6I.css */
 /*
  * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
  * on the page's deepest ground with the large shadow and the rim light, a
@@ -26013,13 +27373,22 @@ svg.crewlet-time-window__tick {
  * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
  * whole strip, draining from the right as the time runs out. It sits under
  * every raised child, and it is the timer's picture, not the timer.
+ *
+ * ITS LEADING EDGE FADES OUT rather than stopping. Cut square, the wash read
+ * as a strip painted in two tones whenever it stood still: in a still frame,
+ * and under the pointer, which pauses it, which is when a reader is looking.
+ * Feathered, a stopped wash still reads as a tint running out.
  */
 .crewlet-toast__progress {
   position: absolute;
   inset: 0;
   z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-wash);
+  background: linear-gradient(
+    to right,
+    var(--crewlet-toast-wash) calc(100% - var(--spacing-7)),
+    transparent
+  );
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
@@ -27811,7 +29180,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* WidgetFrame-LRZIL62O.css */
+/* WidgetFrame-BTFW3CRK.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.
@@ -27874,6 +29243,11 @@ svg.crewlet-time-window__tick {
   line-clamp: 2;
 }
 
+/* A held title keeps its two lines empty or not (see `holdTitle`). */
+.crewlet-widget-frame--hold-title .crewlet-widget-frame__title {
+  min-height: calc(2 * 1em * var(--font-line-height-snug));
+}
+
 /* The controls stand on the title's first line: the box is one line of the
    title tall and the control is centred in it, whatever its own height. */
 .crewlet-widget-frame__actions {
@@ -27891,15 +29265,27 @@ svg.crewlet-time-window__tick {
   overflow: auto;
 }
 
-/* A flush figure reaches the frame's sides, and a table's cells take the
-   frame's inset, so its first column starts under the title and its row
-   rules meet the border. */
+/*
+ * A flush figure reaches the frame's sides, and a table's OUTER cells take the
+ * frame's inset, so its first column starts under the title, its last ends
+ * where the title row's controls do, and its row rules meet the border.
+ *
+ * ONLY THE OUTER ONES. Every cell took the frame's 16px a side, so two columns
+ * stood 32px apart and a table of eight columns ran past a widget the full
+ * width of a board; between columns a cell keeps the compact table's own
+ * inset. The last column is the last before the table's trailing spacer,
+ * which is not a column of the data.
+ */
 .crewlet-widget-frame--flush .crewlet-widget-frame__body {
   padding-inline: 0;
 }
 
-.crewlet-widget-frame--flush .crewlet-data-table--compact {
-  --crewlet-data-table-cell-pad-x: var(--spacing-4);
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):first-child {
+  padding-inline-start: var(--spacing-4);
+}
+
+.crewlet-widget-frame--flush .crewlet-data-table--compact :is(th, td):nth-last-child(1 of :not(.crewlet-data-table__th--spacer, .crewlet-data-table__td--spacer)) {
+  padding-inline-end: var(--spacing-4);
 }
 
 /* A stat tile drawn flush as the figure stands on the frame's inset; its own
@@ -27909,6 +29295,23 @@ svg.crewlet-time-window__tick {
   padding: 0;
 }
 
+/* A FRAME TOO NARROW FOR THE DISPLAY NUMBER sets it a step down rather than
+   cutting it: two columns of a board are about 120px, and a number at the
+   display step lost its last digits there ("123.…"). */
+@container crewlet-widget-frame (width < 11rem) {
+  .crewlet-widget-frame__body .crewlet-statcard__value {
+    font-size: var(--font-size-xl);
+  }
+}
+
+/* NOR DOES IT RESERVE A SECOND LINE IT HAS NOTHING FOR. The reserve keeps a
+   StatGroup's tiles at one height; a frame takes its height from the board,
+   and the empty line stood as a band of air between the number and the
+   citation that no other figure has. */
+.crewlet-widget-frame__body .crewlet-statcard__sub:empty {
+  display: none;
+}
+
 .crewlet-widget-frame__blocked {
   display: flex;
   align-items: flex-start;
@@ -28004,8 +29407,18 @@ svg.crewlet-time-window__tick {
     align-items: flex-start;
   }
 
+  /* STACKED, THE TITLE TAKES A SECOND LINE BEFORE IT ENDS: a frame three
+     columns wide cut "Deploys for the chosen service" to "Deploys for the
+     chosen se…". Past two lines it ends in an ellipsis, and the whole title
+     is the citation's tooltip. */
   .crewlet-widget-frame__source {
+    display: -webkit-box;
     max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
   }
 
   .crewlet-widget-frame__when::before {