@crewlethq/ui 0.35.0 → 0.36.0

package/dist/styles.css

@@ -548,6 +548,160 @@
 }
 
 
+/* AgentHandoffPanel-JWSW62GU.css */
+/*
+ * Handing work to an agent, at the side of what is being made. The panel is
+ * an ArtifactPanel; this is its inside: the brief, its starters, the agent,
+ * what goes with it and the steps after, on one rhythm, and the commit in the
+ * panel's foot.
+ *
+ * ONE STEP BETWEEN SECTIONS (spacing-6) and one inside them (spacing-2): the
+ * brief and its helper read as one block, the next question as the next.
+ */
+
+.crewlet-agent-handoff__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__intro {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__brief {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE BRIEF'S NAME is a section's name, at a section heading's size, since
+   it heads the panel's first question. */
+.crewlet-agent-handoff__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-agent-handoff__helper {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__starters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__section {
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__carried {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0 0 var(--spacing-2);
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-agent-handoff__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-agent-handoff__item-icon {
+  display: inline-flex;
+  flex: none;
+  /* On the first line's centre, whatever the glyph's own box. */
+  margin-top: 1px;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-agent-handoff__item-words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-agent-handoff__item-label {
+  overflow-wrap: anywhere;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-agent-handoff__item-detail {
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-agent-handoff__task {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__task-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* THE BODY AS SENT, wrapped rather than scrolled sideways: a reader checks it
+   line by line, and a panel's width is narrower than its longest line. */
+.crewlet-agent-handoff__task-body {
+  max-height: 16rem;
+  margin: 0;
+  overflow: auto;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-agent-handoff__foot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-agent-handoff__media {
+  display: inline-flex;
+}
+
+.crewlet-agent-handoff__reason {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+
 /* AppShell-JTSEOA57.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
@@ -1377,7 +1531,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArrangeFrame-3PLZAG22.css */
+/* ArrangeFrame-QXOQTFAH.css */
 /*
  * ArrangeFrame: a block of a page being arranged.
  *
@@ -1439,9 +1593,8 @@ button.crewlet-account-row__who:focus-visible {
 
 /*
  * THE ONE RING, over the block's own edge, on the innermost block the
- * pointer or the focus is in. A hairline drawn exactly over the block's own
- * 1px border, so the border turns to the accent rather than a second, heavier
- * line appearing around it.
+ * pointer or the focus is in. Drawn exactly over the block's own 1px border,
+ * so the border changes colour rather than a second line appearing around it.
  *
  * IT IS A LAYER OF ITS OWN, above the content. An outline is painted with the
  * block, under any content that is positioned or scrolls (a card with a fixed
@@ -1458,14 +1611,32 @@ button.crewlet-account-row__who:focus-visible {
   border-radius: inherit;
   pointer-events: none;
 }
-.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+/*
+ * THREE STRENGTHS ON THE ONE LAYER. The innermost block under the pointer, or
+ * holding the focus in one of its fields, takes the selected edge, the accent
+ * mixed toward the page: it says where the reader is working, and in the full
+ * accent a caret in a cell's field drew a frame in the focus ring's own hue
+ * round the whole block. The block ITSELF in keyboard focus takes the focus
+ * ring, two pixels in the focus colour, the area a keyboard indicator needs.
+ * A picked or resizing block takes one crisp pixel of the full accent, as a
+ * picked board on a canvas does, its handles saying the rest.
+ */
+.crewlet-arrange-frame.is-editing:is(:hover, :has(:focus-visible)):not(:focus-visible, .is-selected, .is-resizing):not(
     :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
-  )::after,
+  )::after {
+  border-color: var(--color-border-selected);
+}
+
 .crewlet-arrange-frame.is-selected::after,
 .crewlet-arrange-frame.is-resizing::after {
   border-color: var(--color-brand-accent);
 }
 
+.crewlet-arrange-frame.is-editing:focus-visible::after {
+  border-width: 2px;
+  border-color: var(--color-focus);
+}
+
 /* A block with no surface of its own takes its ring a step outside it. */
 .crewlet-arrange-frame.is-bare {
   --crewlet-arrange-frame-radius: var(--radius-md);
@@ -2041,7 +2212,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-HV5AT4RG.css */
+/* ArtifactBar-FWPBBKQ5.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
@@ -2242,11 +2413,19 @@ button.crewlet-account-row__who:focus-visible {
   margin-inline-start: var(--spacing-1);
 }
 
+/* THE STATUS IS QUIET by default, in the bar's small step and the secondary
+   ink that `EditingStatus` takes, so a host that hands it words ("Creating…",
+   "25 words") draws them as the open artifact draws its own, never at the
+   title's weight. Its figures are tabular, so a count does not jitter. */
 .crewlet-artifact-bar__status {
   display: inline-flex;
   align-items: center;
   min-width: 0;
   margin-inline-end: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 
 .crewlet-artifact-bar__presence {
@@ -2812,7 +2991,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactKindIllustration-5FPRJQ3P.css */
+/* ArtifactKindIllustration-5KTP43QS.css */
 /*
  * A kind's drawing, its tinted ground and the Make something new tile.
  *
@@ -3016,6 +3195,42 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A TILE THAT STARTS SOMETHING IN PLACE (a create page's starting layouts)
+ * DRAWS ONE EDGE. Its face is a picture of the layout, with boards of its
+ * own, so the ground's tinted inner line was a second outline a few pixels
+ * inside the frame's, and with the focus ring over the frame the tile read as
+ * three nested rings. The frame is the tile's one edge; the ground keeps its
+ * tint.
+ */
+.crewlet-kind-tile--button .crewlet-kind-tile__ground {
+  box-shadow: none;
+}
+
+/*
+ * CHOSEN, as every chosen option is drawn: the selected edge (the accent
+ * mixed toward the page) on the frame, over the selected fill, and a check
+ * beside the name, the mark that clears 3:1. Under the pointer it keeps its
+ * edge, and the focus ring is drawn over it for the keyboard alone.
+ */
+.crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame,
+.crewlet-kind-tile--button.is-selected:hover .crewlet-kind-tile__frame {
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+.crewlet-kind-tile__check {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-brand-accent-ink);
+}
+
+@media (forced-colors: active) {
+  .crewlet-kind-tile--button.is-selected .crewlet-kind-tile__frame {
+    border-color: Highlight;
+  }
+}
+
 .crewlet-kind-tile--disabled {
   cursor: not-allowed;
 }
@@ -3050,7 +3265,177 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 
-/* ArtifactPanel-HW3SU7CP.css */
+/* ArtifactMakeRow-RWUTS5MC.css */
+/*
+ * The Make something new tray.
+ *
+ * Every colour is a token: the tray's ground, its dots and its hairlines are
+ * the surface and border steps, and each kind's mark reads the kind's own
+ * Fill, Line and Ink (`ArtifactKinds.css`), so the tray repaints with the
+ * theme and holds no colour of its own.
+ *
+ * THE TRAY SIZES ITSELF BY ITS OWN WIDTH, never the window's: it sits in a
+ * page column a sidebar narrows, so three steps are container queries on the
+ * tray. Under 560px three across in two lines; from 560px the six in one
+ * line, each its mark over its name, so a long name is never cut; from 920px
+ * the mark beside the name and what the kind is for under it.
+ */
+
+.crewlet-make-row {
+  container-type: inline-size;
+  /* A WORKBENCH: the canvas's dotted field on the sheet itself, one step
+     quieter than a canvas that pans, inside a hairline ring. */
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-background);
+  background-image: radial-gradient(var(--color-border-default) 1px, transparent 1.2px);
+  background-size: var(--spacing-4) var(--spacing-4);
+  background-position: calc(var(--spacing-4) / 2) calc(var(--spacing-4) / 2);
+}
+
+.crewlet-make-row__list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: var(--spacing-1);
+  list-style: none;
+}
+
+.crewlet-make-row__cell {
+  display: flex;
+  min-width: 0;
+}
+
+.crewlet-make-row__item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  box-sizing: border-box;
+  padding: var(--spacing-3) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  outline: none;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-out),
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+/* THE GLYPH ON ITS KIND'S TINT, the one coloured thing in the item. */
+.crewlet-make-row__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-kind-fill);
+  box-shadow: inset 0 0 0 1px var(--crewlet-kind-line);
+  color: var(--crewlet-kind-ink);
+}
+
+.crewlet-make-row__words {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-make-row__name,
+.crewlet-make-row__detail {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-make-row__name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.3;
+}
+
+/* WHAT IT IS FOR is the widest step's: on a narrower tray the name alone
+   says it, and the details are kept as the item's description. */
+.crewlet-make-row__detail {
+  display: none;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: 1.35;
+}
+
+@container (width >= 560px) {
+  .crewlet-make-row__list {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .crewlet-make-row__item {
+    padding: var(--spacing-2) var(--spacing-1);
+  }
+}
+
+@container (width >= 920px) {
+  .crewlet-make-row__item {
+    flex-direction: row;
+    gap: var(--spacing-3);
+    padding: var(--spacing-2);
+  }
+
+  .crewlet-make-row__words {
+    align-items: flex-start;
+  }
+
+  .crewlet-make-row__detail {
+    display: block;
+  }
+}
+
+/* AN ITEM LIFTS OFF THE BENCH under the pointer as a card: the card's
+   ground, the hairline a card is found by and the lightest shadow, and
+   nothing inside it moves. */
+a.crewlet-make-row__item:hover {
+  border-color: var(--color-border-default);
+  background-color: var(--color-surface-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+a.crewlet-make-row__item:active {
+  background-color: var(--color-surface-pressed);
+  box-shadow: none;
+}
+
+/* ON ITS OWN EDGE: an item draws a hairline once lifted, so the ring sits on
+   it rather than standing off it with a gap between two edges. */
+.crewlet-make-row__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-make-row__item--disabled {
+  cursor: not-allowed;
+}
+
+.crewlet-make-row__item--disabled .crewlet-make-row__mark,
+.crewlet-make-row__item--disabled .crewlet-make-row__words {
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-make-row__item {
+    transition: none;
+  }
+}
+
+
+/* ArtifactPanel-KKUUIPEU.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
@@ -3170,6 +3555,15 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   overscroll-behavior: contain;
 }
 
+/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
+   stays in reach at every scroll. Its inset is the body's. */
+.crewlet-artifact-panel__foot {
+  flex: none;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
 /* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
    raised off it, rather than squeezing the artifact under a useful width. */
 @container crewlet-artifact-workspace (width < 960px) {
@@ -5095,7 +5489,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CanvasBoard-5NNSKY6A.css */
+/* CanvasBoard-TS4P356F.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
@@ -5180,19 +5574,26 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 /*
- * 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.
+ * HOVER, then SELECTION: one screen pixel each, over the hairline. Hover is
+ * the selected edge, the accent mixed toward the canvas, so pointing at a
+ * board previews the pick without claiming it; selection is the full accent,
+ * crisp, with its four corners drawn, which are what say "this one" on a
+ * canvas where a board's own content can be any colour. It was two pixels,
+ * the focus ring's weight in the focus ring's hue, so a picked board and the
+ * board the keyboard was on read alike; the 2px ring is the live board's now
+ * alone ([data-active], below), which takes the pointer like a focused frame.
+ * 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: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-border-selected);
   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: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
   outline-offset: 0;
 }
 
@@ -5300,7 +5701,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transform-origin: bottom left;
 }
 
-/* A board drawn too narrow to name goes unnamed (`boardRoom`). */
+/* A board drawn too narrow for even its number goes unnamed (`boardName`). */
 .crewlet-canvas-board__board[data-untitled] > .crewlet-canvas-board__chrome {
   display: none;
 }
@@ -5636,7 +6037,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Card-KJOYHDTJ.css */
+/* Card-QOVASQNU.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -5681,7 +6082,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * `box-shadow: <shadow>, none` is invalid at computed-value time, so the
  * declaration is dropped and the light card loses the elevation the list was
  * built around. Alone on a pseudo element the same token is valid in both
- * themes, and it composes with the selection ring rather than replacing
+ * themes, and it composes with a chosen card's edge rather than replacing
  * whichever was declared last, exactly as the rail does.
  */
 .crewlet-card--elevated::after {
@@ -5755,8 +6156,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 /*
  * THE FLUSH RECIPE. The slots reach the card's edges, and the clip is what
  * makes the header's hairline and a table's own corners follow the radius
- * instead of crossing it. The selection ring survives the clip because it is
- * an INSET shadow; an outset one would be cut off here.
+ * instead of crossing it. A chosen card's edge and fill survive the clip
+ * because they are its own border and background.
  */
 .crewlet-card--flush {
   overflow: hidden;
@@ -5839,29 +6240,34 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 
 /* One ring, over the card's own boundary rather than 2px off it, which is two
    edges with a gap between them: the rule every field keeps (see Input.css).
-   A chosen card keeps an accent line inside the ring, since the selection
-   ring below is two pixels deep and the focus ring covers one of them. */
+   On a chosen card it covers the selected edge, and the selected fill inside
+   it still says the card is chosen. */
 .crewlet-card.is-interactive:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*
- * Chosen. A ring rather than a tint, because a card carries its own surface
- * and a tint under it would change the ground every value on it was measured
- * against.
+ * Chosen, as every chosen option in the package is drawn: the selected edge
+ * (the accent mixed toward the card) over the selected fill. It was the full
+ * accent border under --shadow-selection, a second accent ring two pixels
+ * deep, which is the focus ring's weight in the focus ring's hue, so a grid
+ * of cards showed the pick and the keyboard's place alike. The fill is laid
+ * as an IMAGE over the card's own surface rather than in place of it, so the
+ * card keeps its ground and the tint composites over it, as it does over a
+ * row.
  */
 .crewlet-card.is-selected {
-  box-shadow: var(--shadow-selection);
-  border-color: var(--color-brand-accent);
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
 }
 
 /* ---- Rails ------------------------------------------------------------- */
 
 /*
  * A state down the leading edge. Drawn as a pseudo element rather than a
- * border or an inset shadow, so it composes with the elevated shadow and the
- * selection ring instead of replacing whichever one was declared last.
+ * border or an inset shadow, so it composes with the elevated shadow and a
+ * chosen card's edge instead of replacing whichever one was declared last.
  */
 .crewlet-card--rail-info::before,
 .crewlet-card--rail-warning::before,
@@ -7318,7 +7724,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* ChoiceButtons-DJ5EOGUA.css */
+/* ChoiceButtons-FLIFXFFS.css */
 /*
  * One answer, sent with one press: a column of buttons as tall as a touch
  * target, the recommended one first and filled with the accent.
@@ -7357,6 +7763,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
     border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/*
+ * AN OPTION WITH A DETAIL STARTS AT ITS TOP. Laid out as tiles (a host's grid
+ * of columns), the options in one row stretch to the tallest, and centred
+ * text put a one-line detail's label lower than its neighbour's two-line
+ * one. A column of options is unchanged: each is as tall as its own text.
+ */
+.crewlet-choice-buttons__option:has(.crewlet-choice-buttons__detail) {
+  align-items: flex-start;
+}
+
 .crewlet-choice-buttons__option:hover:not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
   border-color: var(--color-border-strong-hover);
@@ -7448,11 +7864,13 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* ChoiceList-RBL7FNQL.css */
+/* ChoiceList-EA2W6MOS.css */
 /*
  * A short list of answers in one bordered box: a radio, the label with a line
  * of detail under it, and a tag at the row's end. The selected row takes the
- * accent's soft fill, so the answer reads at a glance without the radio.
+ * selected fill (the accent's soft tint), so the answer reads at a glance; the
+ * radio is the mark that clears 3:1, and no row is ever ringed in the accent,
+ * which is the focus ring's colour.
  */
 .crewlet-choice-list {
   /* The platform's radio, sized here so a panel can line up with the text beside it. */
@@ -7517,21 +7935,47 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 .crewlet-choice-list__row.is-checked {
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list.is-disabled .crewlet-choice-list__row {
   cursor: not-allowed;
 }
 
+/*
+ * THE RADIO IS DRAWN, not the platform's. In a dark palette the platform's
+ * own radio fills an unchosen answer with a grey disc, which beside the one
+ * chosen read as a second, muted choice. Drawn here, an unchosen answer is an
+ * empty ring on the control boundary (3:1 on every ground) and the chosen one
+ * the accent ring round an accent dot. Forced colours hand it back to the
+ * platform, which draws it in the system's own colours.
+ */
 .crewlet-choice-list__radio {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  box-sizing: border-box;
   width: var(--crewlet-choice-list-radio-size);
   height: var(--crewlet-choice-list-radio-size);
   margin: 3px 0 0;
-  accent-color: var(--color-brand-accent);
+  border: 1px solid var(--color-border-control);
+  border-radius: 50%;
+  background: transparent;
   cursor: inherit;
 }
 
+.crewlet-choice-list__radio:checked {
+  border-color: var(--color-brand-accent);
+  background: radial-gradient(circle, var(--color-brand-accent) 0 3px, transparent 3.5px);
+}
+
+@media (forced-colors: active) {
+  .crewlet-choice-list__radio {
+    appearance: auto;
+  }
+}
+
 /* A radio draws its own edge, so the ring sits on it, as a checkbox's does. */
 .crewlet-choice-list__radio:focus-visible {
   outline: 2px solid var(--color-focus);
@@ -7556,13 +8000,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   overflow-wrap: anywhere;
 }
 
+/* A tag says something ABOUT an answer ("Suggested"), so it is set in the
+   tertiary ink: in the accent ink it was a second accent mark on the chosen
+   row, beside the radio and the fill that already say which one is chosen. */
 .crewlet-choice-list__tag {
   padding-top: 2px;
   font-size: var(--font-size-2xs);
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--color-brand-accent-ink);
+  color: var(--color-text-tertiary);
   white-space: nowrap;
 }
 
@@ -7582,7 +8029,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   padding: var(--spacing-1) var(--spacing-2) var(--spacing-3) calc(var(--spacing-2) + var(--crewlet-choice-list-radio-size) + var(--spacing-3));
   border-end-start-radius: var(--radius-sm);
   border-end-end-radius: var(--radius-sm);
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
 .crewlet-choice-list__footer {
@@ -8285,12 +8732,15 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Composer-ABGJIAIR.css */
+/* Composer-PXITWNEK.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
- * BOX takes the focus ring, an accent border and a 2px soft halo, so the
- * field inside draws no border or outline of its own and the footer reads as
- * part of what is being written.
+ * BOX takes the focus ring every field in the package draws (see Input.css):
+ * an outline over its boundary, 2px for the keyboard and the hairline for a
+ * pointer, so the field inside draws no border or outline of its own and the
+ * footer reads as part of what is being written. It used to recolour the
+ * border to the accent AND lay a 2px soft halo outside it: two highlights for
+ * one state, and the loudest edge on a page whose field was focused on load.
  */
 .crewlet-composer {
   display: grid;
@@ -8298,18 +8748,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   background: var(--color-surface-background);
-  transition:
-    border-color var(--motion-duration-fast) var(--motion-easing-default),
-    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
 .crewlet-composer:hover {
   border-color: var(--color-border-strong-hover);
 }
 
-.crewlet-composer:focus-within {
-  border-color: var(--color-brand-accent);
-  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+/* Keyed on the FIELD, not :focus-within: the footer holds the send action,
+   and a reader tabbing onto it is shown that button's ring, not the box's. */
+.crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-composer:has(.crewlet-composer__field:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
 }
 
 .crewlet-composer .crewlet-composer__field {
@@ -8322,11 +8777,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   resize: none;
 }
 
-/* The ring is the box's, above. A transparent outline stays, because forced
-   colors drops the box's shadow and paints an outline in its place. */
-.crewlet-composer .crewlet-composer__field:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
+/* The ring is the box's, above, so the field inside never draws one: left to
+   the textarea's own rule it would be a second ring inside the box's, and in
+   forced colours the box's outline is the one the system repaints. Stated on
+   the field at rest, at a weight the textarea's focus rule cannot outrank. */
+.crewlet-composer .crewlet-composer__field.crewlet-textarea {
+  outline: none;
 }
 
 /* Past its cap the field scrolls rather than pushing the page. */
@@ -8363,8 +8819,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   flex: 1;
 }
 
+/* On a phone the hint goes, and a footer that held only the hint goes with it. */
 @media (width < 640px) {
-  .crewlet-composer__hint {
+  .crewlet-composer__hint,
+  .crewlet-composer__footer[data-hint-only] {
     display: none;
   }
 }
@@ -11340,7 +11798,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DatasetSource-XFPZBRXL.css */
+/* DatasetSource-SMGX4PS5.css */
 /*
  * DatasetSource: one entry of a dashboard's Sources rail. The title and its
  * source kind, the definition, then where the rows stand, how many there are
@@ -11352,6 +11810,8 @@ body.crewlet-data-table-resizing {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  /* Held transparent at rest so nothing moves when an entry opens. */
+  border: 1px solid transparent;
   border-radius: var(--radius-md);
 }
 
@@ -11385,12 +11845,23 @@ button.crewlet-dataset-source__summary:focus-visible {
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
-/* The accent boundary, as a selected card takes it, and the soft accent fill. */
+/*
+ * The selected edge round the WHOLE ENTRY, over the selected fill on its
+ * summary, as every chosen option is drawn: a tint of the accent, never the
+ * full accent the focus ring is drawn in. The edge used to ring the summary
+ * alone, so the settings and figures an open source shows under it hung
+ * below the ring with nothing saying they belonged to it; inside one edge they
+ * read as the entry's own. The rows it opens are what say which entry is open.
+ */
+.crewlet-dataset-source--selected {
+  border-color: var(--color-border-selected);
+}
+
 .crewlet-dataset-source--selected .crewlet-dataset-source__summary {
-  border-color: var(--color-brand-accent);
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
 }
 
+
 .crewlet-dataset-source__head {
   display: flex;
   align-items: center;
@@ -11461,9 +11932,30 @@ button.crewlet-dataset-source__summary:focus-visible {
   color: var(--color-feedback-warning-ink);
 }
 
+/*
+ * AN OPEN ENTRY IS ONE CARD: the selected edge above frames the summary and
+ * the preview together, the summary its head on the selected fill and the
+ * preview a well under it, inset on the summary's padding, so the figures in
+ * it (cards of their own) stand on a ground that is plainly the source's
+ * rather than the rail's. One line separates head from well, in the same
+ * selected edge, and the head sits INSIDE the frame rather than over it: its
+ * fill laid over the frame's edge would paint that edge out.
+ */
+.crewlet-dataset-source--open {
+  background: var(--color-surface-inset);
+}
+
+.crewlet-dataset-source--open > .crewlet-dataset-source__summary {
+  border-block-end-color: var(--color-border-selected);
+  border-start-start-radius: calc(var(--radius-md) - 1px);
+  border-start-end-radius: calc(var(--radius-md) - 1px);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 .crewlet-dataset-source__preview {
   min-width: 0;
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-3);
+  padding: var(--spacing-3);
 }
 
 .crewlet-dataset-source-list {
@@ -11480,7 +11972,7 @@ button.crewlet-dataset-source__summary:focus-visible {
 }
 
 
-/* DateTimePicker-HG2KQXQ6.css */
+/* DateTimePicker-2IVTKFV2.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
@@ -11534,10 +12026,17 @@ button.crewlet-dataset-source__summary:focus-visible {
  */
 .crewlet-datetime:focus-visible,
 .crewlet-datetime.is-open {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-datetime:focus-visible,
+:root[data-crewlet-focus='pointer'] .crewlet-datetime.is-open {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-datetime.is-disabled,
 .crewlet-datetime:disabled {
   opacity: 0.55;
@@ -11660,10 +12159,16 @@ svg.crewlet-datetime__chevron {
 
 /* The same one ring the trigger draws, over the box's own boundary. */
 .crewlet-datetime__time-input:focus-visible {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-datetime__time-input:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-datetime__footer {
   display: flex;
   align-items: center;
@@ -12376,7 +12881,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Document-JUGCSQ4L.css */
+/* Document-YFWTWXJP.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
  *
@@ -12706,17 +13211,34 @@ svg.crewlet-datetime__chevron {
  * 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.
+ *
+ * ONE PIXEL, AND A TINT, WHERE A POINTER PUT THE CARET. The line is the
+ * hairline under the pointer and the selected edge (the accent mixed toward
+ * the page) once a click has put the caret in it: the reader is already
+ * looking at the title, and a page that focuses its title on load drew a 2px
+ * accent bar under it before anybody had touched anything.
+ *
+ * TWO PIXELS IN THE FOCUS COLOUR FOR THE KEYBOARD, the area WCAG 2.2's focus
+ * appearance asks of an indicator: the border takes the focus colour and a
+ * shadow lays the second pixel under it, with a transparent outline that
+ * forced colours paints in its place. The padding takes the pixel the border
+ * no longer reserves, so the title sits where it always did.
  */
 .crewlet-document-title-field {
   display: block;
   width: 100%;
   min-width: 0;
-  padding: 0 0 var(--spacing-1);
+  padding: 0 0 calc(var(--spacing-1) + 1px);
   border: 0;
-  border-block-end: 2px solid transparent;
+  border-block-end: 1px solid transparent;
   border-radius: 0;
   background: none;
   outline: none;
+  /* A textarea of one row that grows with the title (DocumentTitleField sets
+     its height): no handle, no scrollbar, and the title's own wrapping. */
+  resize: none;
+  overflow: hidden;
+  white-space: pre-wrap;
   transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
@@ -12731,12 +13253,27 @@ svg.crewlet-datetime__chevron {
 
 .crewlet-document-title-field:focus-visible {
   border-block-end-color: var(--color-focus);
+  box-shadow: 0 1px 0 var(--color-focus);
+  outline: 2px solid transparent;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-document-title-field:focus-visible {
+  border-block-end-color: var(--color-border-selected);
+  box-shadow: none;
 }
 
 .crewlet-document-title-field[aria-invalid='true'] {
   border-block-end-color: var(--color-feedback-danger);
 }
 
+.crewlet-document-title-field[aria-invalid='true']:focus-visible {
+  box-shadow: 0 1px 0 var(--color-feedback-danger);
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-document-title-field[aria-invalid='true']:focus-visible {
+  border-block-end-color: var(--color-feedback-danger);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-document-title-field {
     transition: none;
@@ -13313,7 +13850,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* FilterChip-EZ4QMW4E.css */
+/* FilterChip-VL33P3JL.css */
 /*
  * The filter chip: neutral until it is on, and then the accent.
  *
@@ -13397,9 +13934,13 @@ svg.crewlet-datetime__chevron {
   cursor: not-allowed;
 }
 
+/* The selected fill, and the accent's lighter line rather than the selected
+   edge: on a pill this small the 0.6 edge, the fill and the accent ink were
+   three accent marks on one word. The ink is the mark that clears 4.5:1, and
+   the keyboard's 2px focus ring stays the only full-weight line. */
 .crewlet-filter-chip[aria-pressed='true'],
 .crewlet-filter-chip[aria-checked='true'] {
-  background: var(--color-brand-accent-soft);
+  background: var(--color-surface-selected);
   border-color: var(--color-brand-accent-soft-strong);
   color: var(--color-brand-accent-ink);
 }
@@ -14317,7 +14858,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* Input-GBZSFXLU.css */
+/* Input-ABGOFENS.css */
 /*
  * The form row: Input, Textarea, Label, FormField, FormRow, FormSection and
  * ReadOnlyField.
@@ -14401,14 +14942,18 @@ button.crewlet-finding-list__row:focus-visible {
  * forced-colors mode drops every box-shadow and keeps outlines: a ring drawn
  * as a shadow disappears for exactly the readers who most need one.
  *
- * It is ONE PIXEL, LAID EXACTLY ON THE BOUNDARY: the field's own hairline,
- * drawn in the focus colour, which is how the console's fields say focus. At
- * two pixels it was a heavy band round every box a caret landed in, and on a
- * form of them the field being typed in read as the loudest thing on the page.
- * Drawn on the boundary rather than outside it, a scroller cannot clip it and
- * the field does not grow a halo the moment a caret lands in it, which is what
- * a filter box in a toolbar of them did to the row it sits in. Every boxed
- * field in the package rings this way (`Input.test.tsx` holds them to it).
+ * It is TWO PIXELS FOR THE KEYBOARD AND ONE FOR A POINTER, laid over the
+ * boundary. Two pixels is the area WCAG 2.2's focus appearance asks of an
+ * indicator, and one pixel (the field's own hairline in the focus colour) was
+ * half of it for every reader tabbing through a form. But at two pixels round
+ * every box a caret landed in, a click into a title or a filter box drew a
+ * heavy band round the one thing the reader was already looking at, so the
+ * rule after this one narrows the ring where the document says the last move
+ * was a pointer. Drawn over the boundary rather than outside it, a scroller
+ * cannot clip it and the field does not grow a halo the moment a caret lands
+ * in it, which is what a filter box in a toolbar of them did to the row it
+ * sits in. Every boxed field in the package rings this way (`Input.test.tsx`
+ * holds them to it).
  *
  * THE BORDER IS LEFT ALONE. Recolouring it under the ring says nothing the
  * ring has not already said, and it is what cost the error state its own
@@ -14424,10 +14969,28 @@ button.crewlet-finding-list__row:focus-visible {
  * on a pointer press as well as on a tab.
  */
 .crewlet-input:has(.crewlet-input__control:focus-visible) {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/*
+ * NARROWED FOR A POINTER. The ring above is the keyboard's: 2px, the area
+ * WCAG 2.2's focus appearance asks of an indicator, drawn over the boundary
+ * and one pixel into the box. A field matches :focus-visible on a click as
+ * well, and a reader who put the caret there with a pointer is already looking
+ * at it, so where the document says the last move was a pointer
+ * (`data-crewlet-focus`, kept by `trackFocusModality`, which every field
+ * starts) the ring is one pixel in the selected edge, the accent mixed toward
+ * the page: a page that focuses its first field on load drew the focus colour
+ * round it before anybody had touched a key. A refused field keeps its own
+ * colour under a pointer too (below). A document that tracks nothing keeps
+ * the keyboard's ring.
+ */
+:root[data-crewlet-focus='pointer'] .crewlet-input:has(.crewlet-input__control:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-input.is-error {
   border-color: var(--color-feedback-danger);
 }
@@ -14448,6 +15011,10 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-input.is-error:has(.crewlet-input__control:focus-visible) {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-input.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -14684,10 +15251,16 @@ button.crewlet-finding-list__row:focus-visible {
    on the control itself: a textarea is the field, with nothing wrapped round
    it and nothing focusable inside it. */
 .crewlet-textarea:focus-visible {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-textarea:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-textarea.is-error {
   border-color: var(--color-feedback-danger);
 }
@@ -14696,6 +15269,10 @@ button.crewlet-finding-list__row:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-textarea.is-error:focus-visible {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-textarea.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -15145,7 +15722,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* LayersList-NQZEIPZB.css */
+/* LayersList-TBNF4XGL.css */
 /*
  * A canvas's list of layers (LayersList.tsx): a heading that stays, over one
  * line per entry that scrolls on its own.
@@ -15216,13 +15793,26 @@ button.crewlet-finding-list__row:focus-visible {
   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. */
+/*
+ * THE PICKED ENTRY IS A SELECTION, drawn as the package draws a chosen
+ * option: the selected fill under the primary ink, as a canvas's layers panel
+ * marks the board picked on it. It used to take the accent rail a CURRENT row
+ * takes (the outline's heading, the page in the rail), which says "you are
+ * here" and beside a canvas read as a second selection ring. The rail's room
+ * is still held, so nothing moves, and forced colours draw it in the system's
+ * own selected colour, since they drop the fill.
+ */
 .crewlet-layers-list__item[aria-current='true'] {
-  border-inline-start-color: var(--color-brand-accent);
+  background: var(--color-surface-selected);
   color: var(--color-text-primary);
 }
 
+@media (forced-colors: active) {
+  .crewlet-layers-list__item[aria-current='true'] {
+    border-inline-start-color: Highlight;
+  }
+}
+
 /* 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);
@@ -16117,9 +16707,10 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* LivePreview-SRO7KHO4.css */
+/* LivePreview-BROGKR4N.css */
 /*
- * A live preview: the stand-in and the live layer stacked in one box. The box
+ * A live preview: the stand-in, the still copy of what the content drew and
+ * the live layer it is drawn in, stacked in that order in one box. The box
  * takes its size from its parent (a card's preview area), so it fills it and
  * clips whatever the content lays out past its edge.
  */
@@ -16137,9 +16728,43 @@ button.crewlet-finding-list__row:focus-visible {
   position: absolute;
   inset: 0;
   display: flex;
-  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
 }
 
+/* THE STILL COPY: static DOM over the stand-in, which it hides. A copy just
+   taken fades in; one the preview was given back from its store is simply
+   there, so a card scrolled or filtered back to is as it was. */
+.crewlet-live-preview__still {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+.crewlet-live-preview[data-fresh] > .crewlet-live-preview__still {
+  animation: crewlet-live-preview-arrive var(--motion-duration-base) var(--motion-easing-out);
+}
+
+@keyframes crewlet-live-preview-arrive {
+  from {
+    opacity: 0;
+  }
+}
+
+/* A COPY IS FROZEN: what it drew never moves, so nothing in it animates or
+   transitions, whatever the content's own styles ask of the elements it
+   copied (a skeleton's shimmer, a chart's entrance). */
+.crewlet-live-preview__still *,
+.crewlet-live-preview__still *::before,
+.crewlet-live-preview__still *::after {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* THE LIVE LAYER renders out of sight: content that is copied is never seen
+   live, only its copy is. A frame's page is kept rather than copied, so a
+   framed preview's live layer is what fades in once it has drawn. */
 .crewlet-live-preview__live {
   position: absolute;
   inset: 0;
@@ -16148,9 +16773,16 @@ button.crewlet-finding-list__row:focus-visible {
   opacity: 0;
   pointer-events: none;
   user-select: none;
+}
+
+.crewlet-live-preview[data-frame] > .crewlet-live-preview__live {
   transition: opacity var(--motion-duration-base) var(--motion-easing-out);
 }
 
+.crewlet-live-preview[data-frame][data-state='ready'] > .crewlet-live-preview__live {
+  opacity: 1;
+}
+
 /* LAID OUT AT ITS OWN SIZE from the top left corner, and scaled from there:
    to the box's width, its top left the box's, or whole and centred. */
 .crewlet-preview-scale {
@@ -16169,17 +16801,23 @@ button.crewlet-finding-list__row:focus-visible {
   transform-origin: 0 0;
 }
 
-.crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__live {
-  opacity: 1;
-}
-
+/* WHAT IS UNDER A DRAWING is hidden only once it has faded in. Fading the
+   stand-in out at the same time showed both at half strength halfway
+   through: a double exposure. */
 .crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
-  opacity: 0;
+  visibility: hidden;
+  /* Visibility is discrete and stays visible for the whole of a transition
+     to hidden, so this holds it exactly as long as the fade above. A copy
+     given back from the store is ready from its first style, which runs no
+     transition, so its stand-in is never shown at all. */
+  transition: visibility var(--motion-duration-base) linear;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-live-preview__fallback,
-  .crewlet-live-preview__live {
+  .crewlet-live-preview[data-fresh] > .crewlet-live-preview__still,
+  .crewlet-live-preview[data-frame] > .crewlet-live-preview__live,
+  .crewlet-live-preview[data-state='ready'] > .crewlet-live-preview__fallback {
+    animation: none;
     transition: none;
   }
 }
@@ -21359,7 +21997,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Select-A54YS5EP.css */
+/* Select-W3CHTZXP.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -21433,10 +22071,16 @@ button.crewlet-presence-stack__member:focus-visible {
  * leave the other bare.
  */
 .crewlet-select:focus-within {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-select:focus-within {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 /*
  * A FILTER THAT IS ON. The accent border says where the reader is and the
  * accent INK says what it is set to. It used to be the accent FILL with the
@@ -21495,6 +22139,10 @@ button.crewlet-presence-stack__member:focus-visible {
   outline-color: var(--color-feedback-danger);
 }
 
+:root[data-crewlet-focus='pointer'] .crewlet-select.is-error:focus-within {
+  outline-color: var(--color-feedback-danger);
+}
+
 .crewlet-select.is-disabled {
   opacity: 0.6;
   cursor: not-allowed;
@@ -21788,10 +22436,16 @@ svg.crewlet-select__chevron {
  * outset ring on the input would be cut by the menu's own `overflow: hidden`.
  */
 .crewlet-select__search:focus-within {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-select__search:focus-within {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-select__search {
   display: flex;
   align-items: center;
@@ -23870,13 +24524,18 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideFilmstrip-4ITZLMO4.css */
+/* SlideFilmstrip-PAT7P4OG.css */
 /*
  * 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 selected slide is ringed rather than filled, so its thumbnail still
+ * shows the slide's own colours: the selected edge (a tint of the accent) on
+ * the thumbnail's own line, the selected fill as a soft band outside it, and
+ * its number in the accent ink. It was a 2px ring in the full accent, the
+ * same weight and colour as the focus ring beside it, so the slide being
+ * edited and the slide the keyboard was on could not be told apart. The
+ * number is the mark that clears 3:1, so the state never rests on the tint.
  *
  * 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
@@ -23921,24 +24580,38 @@ svg.crewlet-select__chevron {
   border: 0;
   background: transparent;
   border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+  /* THE STRONG LINE AT REST: a deck's slides are mostly dark, and on the dark
+     page the plain hairline sat within a few steps of both the page and the
+     slide, so a strip of them had no edges at all. Under the pointer it takes
+     the strong line's own hover step, so pointing still moves the edge. */
+  outline: 1px solid var(--color-border-strong);
   cursor: pointer;
   overflow: hidden;
 }
 
 .crewlet-slide-filmstrip__thumb:hover {
-  outline-color: var(--color-border-hover);
+  outline-color: var(--color-border-strong-hover);
 }
 
 .crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__thumb {
-  outline: 2px solid var(--color-brand-accent);
+  outline-color: var(--color-border-selected);
+  box-shadow: 0 0 0 3px var(--color-surface-selected);
+}
+
+.crewlet-slide-filmstrip__item[data-selected='true'] .crewlet-slide-filmstrip__number {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ONE RING, OVER THE THUMBNAIL'S OWN EDGE: the focus outline takes the place
-   of the edge rather than standing off it as a second one. */
+   of the edge rather than standing off it as a second one, and grows OUTWARD
+   from it onto the strip's ground. It used to sit on the inset offset, inside
+   the thumbnail, where a dark slide (most of a deck's themes) swallowed it:
+   the focus colour measured close to the slide's own ground, and tabbing
+   through the strip showed nothing at all. The list's own padding holds it. */
 .crewlet-slide-filmstrip__thumb:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
+  outline-offset: 0;
 }
 
 .crewlet-slide-filmstrip__item[data-hidden='true'] .crewlet-slide-stage {
@@ -24091,7 +24764,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideGrid-S4LTJ4UU.css */
+/* SlideGrid-FJA33DV4.css */
 /*
  * SlideGrid: every slide of a deck at once, by its outline's sections.
  */
@@ -24136,8 +24809,18 @@ svg.crewlet-select__chevron {
   outline-color: var(--color-border-hover);
 }
 
+/* THE CURRENT SLIDE, drawn as the filmstrip draws it: the selected edge on
+   the slide's own line, the selected fill as a soft band outside it, and its
+   number in the accent ink, the mark that clears 3:1. Never the full accent
+   at 2px, which is the focus ring's weight and colour. */
 .crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-stage {
-  outline: 2px solid var(--color-brand-accent);
+  outline-color: var(--color-border-selected);
+  box-shadow: 0 0 0 3px var(--color-surface-selected);
+}
+
+.crewlet-slide-grid__card[aria-current='true'] .crewlet-slide-grid__number {
+  color: var(--color-brand-accent-ink);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* ONE RING, round the whole card (its slide and its caption), on the inset
@@ -24236,7 +24919,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SlideStage-S2FISF4C.css */
+/* SlideStage-ZTTEQSS2.css */
 /*
  * SlideStage: a slide laid out at its authored size and scaled to its box.
  *
@@ -24258,10 +24941,12 @@ svg.crewlet-select__chevron {
 /* 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. */
+   a second line. It takes the STRONG border, not the default one: most decks
+   are dark, and in the dark theme the default border is a step off the page,
+   so a dark slide on a dark page had no edge at all. */
 .crewlet-slide-stage--framed {
   border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
+  outline: 1px solid var(--color-border-strong);
 }
 
 :fullscreen .crewlet-slide-stage--framed,
@@ -24310,7 +24995,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SourceEditor-G2C3STPX.css */
+/* SourceEditor-QAYE2JS6.css */
 /*
  * Source text written in place: a gutter of line numbers beside a real
  * textarea, and the marks a checker placed drawn behind the text. The gutter,
@@ -24318,7 +25003,11 @@ svg.crewlet-select__chevron {
  * so a number and a mark always sit on the line they name; the layers follow
  * the field's scroll by a transform.
  *
- * The BOX takes the focus ring, as the Composer's does.
+ * The BOX takes the focus ring every field draws (see Input.css): 2px in the
+ * focus colour for the keyboard, one pixel of the selected edge where a
+ * pointer put the caret. It used to recolour its border to the accent and lay
+ * a 2px soft halo outside it, two highlights for one state, as the Composer's
+ * did.
  */
 .crewlet-source-editor {
   --crewlet-source-inset: var(--spacing-2);
@@ -24334,18 +25023,21 @@ svg.crewlet-select__chevron {
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
   line-height: var(--font-line-height-normal);
-  transition:
-    border-color var(--motion-duration-fast) var(--motion-easing-default),
-    box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
 .crewlet-source-editor:hover {
   border-color: var(--color-border-strong-hover);
 }
 
-.crewlet-source-editor:focus-within {
-  border-color: var(--color-brand-accent);
-  box-shadow: 0 0 0 2px var(--color-brand-accent-soft);
+.crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+:root[data-crewlet-focus='pointer'] .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
 }
 
 .crewlet-source-editor.is-fill {
@@ -24448,11 +25140,11 @@ svg.crewlet-select__chevron {
   color: var(--color-text-tertiary);
 }
 
-/* The ring is the box's, above. A transparent outline stays, because forced
-   colors drops the box's shadow and paints an outline in its place. */
-.crewlet-source-editor .crewlet-source-editor__field:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
+/* The ring is the box's, above, an outline that forced colours repaint, so
+   the field inside draws none of its own. Stated at rest, as the Composer's
+   field is. */
+.crewlet-source-editor .crewlet-source-editor__field {
+  outline: none;
 }
 
 .crewlet-source-editor .crewlet-source-editor__field[readonly] {
@@ -26984,7 +27676,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TagsInput-XMXTI5Q4.css */
+/* TagsInput-7EGBBXHS.css */
 /*
  * TagsInput: several values in one field.
  *
@@ -27059,10 +27751,16 @@ b.crewlet-switcher__match {
  * the whole reason they sit above the field instead of inside it.
  */
 .crewlet-tags-input__box:focus-visible {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-tags-input__box:focus-visible {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-tags-input.is-disabled {
   opacity: 0.6;
 }
@@ -27323,7 +28021,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThemeGallery-HSUKBDWY.css */
+/* ThemeGallery-X35Y25EX.css */
 /*
  * The gallery of themes: each group's heading over a grid of cards.
  *
@@ -27359,8 +28057,15 @@ b.crewlet-switcher__match {
 
 /*
  * A CARD IS ITS BORDER. Resting, the plain hairline; under the pointer, the
- * strong one; chosen, the accent. One line round the card in every state, so
- * the chosen card is never a card inside a frame.
+ * strong one; chosen, the selected edge (the accent mixed toward the card)
+ * over the selected fill, with a check beside the name. One line round the
+ * card in every state, so the chosen card is never a card inside a frame.
+ *
+ * THE CHOSEN CARD IS CALM ON PURPOSE. It was the full accent, which on a grid
+ * of six read as the loudest edge on the page and as a second focus ring. The
+ * tint and the fill say which card is on at a glance; the check says it at
+ * the 3:1 a state mark clears, so the state never rests on the tint alone;
+ * and the focus ring stays the one 2px accent line, for the keyboard only.
  */
 .crewlet-theme-gallery__card {
   display: flex;
@@ -27377,14 +28082,15 @@ b.crewlet-switcher__match {
   cursor: pointer;
 }
 
-/* Not on the chosen card: under the pointer it keeps the accent, or the one
-   card that says "this one" would stop saying it while it is being pointed at. */
+/* Not on the chosen card: under the pointer it keeps its selected edge, or the
+   one card that says "this one" would stop saying it while it is pointed at. */
 .crewlet-theme-gallery__card:hover:not(:disabled):not(.is-chosen) {
   border-color: var(--color-border-strong);
 }
 
 .crewlet-theme-gallery__card.is-chosen {
-  border-color: var(--color-brand-accent);
+  border-color: var(--color-border-selected);
+  background: var(--color-surface-selected);
 }
 
 /* The ring is drawn OVER the border, inset by its width, never a second line outside it. */
@@ -27398,6 +28104,19 @@ b.crewlet-switcher__match {
   opacity: 0.5;
 }
 
+.crewlet-theme-gallery__label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-theme-gallery__check {
+  flex: none;
+  margin-inline-start: auto;
+  color: var(--color-brand-accent-ink);
+}
+
 .crewlet-theme-gallery__name {
   overflow: hidden;
   font-size: var(--font-size-xs);
@@ -27687,7 +28406,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-T763GLXH.css */
+/* TimeWindowPicker-DEFDV77Z.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
@@ -27737,10 +28456,17 @@ b.crewlet-switcher__match {
  */
 .crewlet-time-window:focus-visible,
 .crewlet-time-window.is-open {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-time-window:focus-visible,
+:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window.is-disabled,
 .crewlet-time-window:disabled {
   opacity: 0.55;
@@ -28008,10 +28734,16 @@ svg.crewlet-time-window__tick {
  * own boundary (see Input.css), keyed on the box's own input.
  */
 .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window__masked-input {
   min-width: 0;
   /* The `size` attribute the component sets is what holds the width open in