@crewlethq/ui 0.18.0 → 0.19.0

package/dist/styles.css

@@ -1267,6 +1267,691 @@ a.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArrangeBoard-MQE35P6Z.css */
+/*
+ * ArrangeBoard: the ground under a page being arranged. Two layers, both
+ * under every block (the board is its own stacking context, so they sit above
+ * its background and below its content): the hatch on `::after`, and the
+ * column lanes on `::before`, shown only while a block is carried or resized.
+ */
+
+.crewlet-arrange-board {
+  --crewlet-arrange-board-gap: var(--spacing-4);
+  /* The hatch, as one value: the ground below and the notes standing on it
+     draw the same lines. */
+  --crewlet-arrange-board-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  min-width: 0;
+}
+
+.crewlet-arrange-board.is-editing {
+  position: relative;
+  isolation: isolate;
+  margin-inline: calc(var(--spacing-3) * -1);
+  padding: var(--spacing-5) var(--spacing-3);
+  border-radius: var(--radius-xl);
+}
+
+/* Room to land below the last block while one is carried out of a group:
+   a page made only of groups otherwise has no bare stretch of its own. */
+.crewlet-arrange-board.is-editing:has(.crewlet-arrange-group__body [data-reorder='dragging']) {
+  padding-bottom: var(--spacing-11);
+}
+
+/* The hatch: its own ink, the strong hairline's held back to 60%, one
+   diagonal every half step, so the cards standing on it stay the loudest
+   thing on the page. */
+.crewlet-arrange-board.is-editing::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--crewlet-arrange-board-hatch);
+  pointer-events: none;
+}
+
+/* A note is an annotation on the ground, not a card on it: while the page is
+   arranged its paper shows the hatch through, inside a group as well, where
+   the group's own surface hides the ground. */
+.crewlet-arrange-board.is-editing .crewlet-note {
+  background: var(--crewlet-arrange-board-hatch), var(--crewlet-note-paper);
+}
+
+/* The lanes: one tile per column and its gap, as wide as the grid, so the
+   twelfth tile's gap falls outside the board and is not drawn. */
+.crewlet-arrange-board.is-editing::before {
+  content: '';
+  position: absolute;
+  inset: 0 var(--spacing-3);
+  background: linear-gradient(
+      to right,
+      var(--color-brand-accent-soft) 0 calc(100% - var(--crewlet-arrange-board-gap)),
+      transparent 0
+    )
+    0 0 / calc((100% + var(--crewlet-arrange-board-gap)) / var(--crewlet-arrange-board-columns)) 100%
+    repeat-x;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-base) var(--motion-easing-default);
+}
+.crewlet-arrange-board.is-editing:has([data-reorder='dragging'], .crewlet-arrange-frame.is-resizing)::before {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-board.is-editing::before {
+    transition: none;
+  }
+}
+
+
+/* ArrangeFrame-3PLZAG22.css */
+/*
+ * ArrangeFrame: a block of a page being arranged.
+ *
+ * Off, the frame is layout only. Editing, the block keeps its own look at
+ * rest; hovered or focused, one accent ring is drawn over its own edge and
+ * its toolbar and resize handle appear. Every piece of chrome floats, so a
+ * block is the same size while arranging as afterwards.
+ */
+
+.crewlet-arrange-frame {
+  /* The corner every ring and bracket follows: a card's own. */
+  --crewlet-arrange-frame-radius: var(--radius-lg);
+  /* How far outside the block its ring is drawn; the chrome sits on the ring. */
+  --crewlet-arrange-frame-outset: 0px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: var(--crewlet-arrange-frame-radius);
+}
+
+.crewlet-arrange-frame__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.crewlet-arrange-frame__content > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A height of the reader's: the content scrolls inside it. */
+.crewlet-arrange-frame.is-fixed-height .crewlet-arrange-frame__content > * {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- Editing ---------------------------------------------------------- */
+
+/* The block itself is what moves: focused, its ring is its focus mark. The
+   transparent outline is the one forced-colors mode paints in its place. */
+.crewlet-arrange-frame.is-editing:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* The surface is what a pointer moves a block by. */
+.crewlet-arrange-frame.is-editing:not(.is-container) {
+  cursor: grab;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container):active {
+  cursor: grabbing;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container) > .crewlet-arrange-frame__content {
+  user-select: none;
+}
+
+/*
+ * THE ONE RING, over the block's own edge, on the innermost block the
+ * pointer or the focus is in. A hairline drawn exactly over the block's own
+ * 1px border, so the border turns to the accent rather than a second, heavier
+ * line appearing around it.
+ *
+ * IT IS A LAYER OF ITS OWN, above the content. An outline is painted with the
+ * block, under any content that is positioned or scrolls (a card with a fixed
+ * height scrolls its list), and that content covered it. Positioned after the
+ * content with no depth of its own, it paints over the content and under the
+ * toolbar and the handle, which are raised.
+ */
+.crewlet-arrange-frame.is-editing::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--crewlet-arrange-frame-outset) * -1);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )::after,
+.crewlet-arrange-frame.is-selected::after,
+.crewlet-arrange-frame.is-resizing::after {
+  border-color: var(--color-brand-accent);
+}
+
+/* A block with no surface of its own takes its ring a step outside it. */
+.crewlet-arrange-frame.is-bare {
+  --crewlet-arrange-frame-radius: var(--radius-md);
+  --crewlet-arrange-frame-outset: var(--spacing-1);
+}
+
+/* Carried, the block is the hole it leaves. */
+.crewlet-arrange-frame.is-editing[data-reorder='dragging']::after {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame[data-reorder='dragging'] > .crewlet-arrange-frame__content {
+  opacity: 0.3;
+}
+
+/* Where a block from another list will land: a bar of the accent in the gap
+   before the block it will precede. */
+.crewlet-arrange-frame[data-reorder-target='before']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--spacing-2) * -1 - 2px);
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* ...or after the last block, when it will land at the end. */
+.crewlet-arrange-frame[data-reorder-target='after']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: calc(var(--spacing-2) * -1 - 2px);
+  bottom: 0;
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* Beside a block that spans its row, the bar runs along the gap above it,
+   or below it when it is the last. */
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target]::before {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 3px;
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='before']::before {
+  top: calc(var(--spacing-2) * -1 - 2px);
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='after']::before {
+  bottom: calc(var(--spacing-2) * -1 - 2px);
+}
+
+/* Just added: one pulse of the accent around it. */
+.crewlet-arrange-frame.is-fresh {
+  animation: crewlet-arrange-frame-fresh calc(var(--motion-duration-slow) * 4) var(--motion-easing-out) 1;
+}
+@keyframes crewlet-arrange-frame-fresh {
+  0%,
+  40% {
+    box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+/* ---- The toolbar -------------------------------------------------------- */
+
+/* On the block's top edge, half outside it: clear of a card's own header
+   links, and of the block above, which is a row gap away. */
+.crewlet-arrange-frame__bar {
+  position: absolute;
+  top: calc(var(--crewlet-arrange-frame-outset) * -1);
+  right: var(--spacing-3);
+  z-index: var(--z-index-raised);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-50%);
+}
+
+.crewlet-arrange-frame__sep:first-child {
+  display: none;
+}
+.crewlet-arrange-frame__sep {
+  align-self: stretch;
+  width: 1px;
+  margin: 3px 2px;
+  background: var(--color-border-default);
+}
+
+/* ---- Resize handles ------------------------------------------------------- */
+
+.crewlet-arrange-frame__resize {
+  position: absolute;
+  z-index: var(--z-index-raised);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-text-tertiary);
+  touch-action: none;
+}
+.crewlet-arrange-frame__grip {
+  position: absolute;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame__resize:hover,
+.crewlet-arrange-frame__resize:focus-visible,
+.crewlet-arrange-frame.is-resizing .crewlet-arrange-frame__resize {
+  color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame__resize:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+  border-radius: var(--radius-sm);
+}
+
+/* BOTH WAYS: a bracket in the corner, following the card's own radius. */
+.crewlet-arrange-frame__resize.is-corner {
+  right: calc(var(--crewlet-arrange-frame-outset) * -1);
+  bottom: calc(var(--crewlet-arrange-frame-outset) * -1);
+  width: 22px;
+  height: 22px;
+  cursor: nwse-resize;
+}
+.crewlet-arrange-frame__resize.is-corner > .crewlet-arrange-frame__grip {
+  right: 4px;
+  bottom: 4px;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  border-bottom-right-radius: calc(var(--crewlet-arrange-frame-radius) - 4px);
+}
+
+/* WIDTH ONLY: a grip on the right edge, the handle of a column splitter,
+   in the corner bracket's colour and ringed in the page's ground so it reads
+   over the card's border. */
+.crewlet-arrange-frame__resize.is-edge {
+  top: 50%;
+  right: calc(-7px - var(--crewlet-arrange-frame-outset));
+  width: 14px;
+  height: 36px;
+  cursor: ew-resize;
+  transform: translateY(-50%);
+}
+.crewlet-arrange-frame__resize.is-edge > .crewlet-arrange-frame__grip {
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  width: 6px;
+  border-radius: var(--radius-pill);
+  background: currentColor;
+  box-shadow: 0 0 0 2px var(--color-surface-background);
+}
+
+/* ---- What shows when ---------------------------------------------------- */
+
+/* The toolbar and the handle belong to the innermost block hovered or
+   focused, and stay while its menu is open or it is being resized. */
+.crewlet-arrange-frame__bar,
+.crewlet-arrange-frame__resize {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )
+  > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize),
+.crewlet-arrange-frame.is-editing > .crewlet-arrange-frame__bar:has([aria-expanded='true']),
+.crewlet-arrange-frame.is-editing:has(> .crewlet-arrange-frame__bar [aria-expanded='true'])
+  > .crewlet-arrange-frame__resize,
+.crewlet-arrange-frame.is-resizing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* A touch screen has no hover to reveal them with. */
+@media (hover: none) {
+  .crewlet-arrange-frame.is-editing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* ---- While resizing ------------------------------------------------------- */
+
+/* The columns of the grid the block sits on, across its row. */
+.crewlet-arrange-frame__guides {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: var(--z-index-raised);
+  display: grid;
+  pointer-events: none;
+}
+.crewlet-arrange-frame__guides > span {
+  border-inline: 1px dashed var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  opacity: 0.3;
+}
+
+/* The size it will land at, over the middle of the block. */
+.crewlet-arrange-frame__size {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: calc(var(--z-index-raised) + 1);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inverse);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-frame__bar,
+  .crewlet-arrange-frame__resize,
+  .crewlet-arrange-frame__grip {
+    transition: none;
+  }
+  .crewlet-arrange-frame.is-fresh {
+    animation: none;
+  }
+}
+
+
+/* ArrangeGroup-SHFHA7BE.css */
+/*
+ * ArrangeGroup: a titled band of blocks. The hue is the header's; the body
+ * stays the page's ground, so the cards inside keep their own contrast.
+ */
+
+.crewlet-arrange-group {
+  --crewlet-arrange-group-band: var(--color-surface-subtle);
+  --crewlet-arrange-group-line: var(--color-border-default);
+  --crewlet-arrange-group-ink: var(--color-text-primary);
+  --crewlet-arrange-group-mark: var(--color-border-strong);
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--crewlet-arrange-group-line);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-background);
+  overflow: clip;
+}
+
+.crewlet-arrange-group--purple { --crewlet-arrange-group-band: var(--color-node-purple-fill); --crewlet-arrange-group-line: var(--color-node-purple-line); --crewlet-arrange-group-ink: var(--color-node-purple-ink); --crewlet-arrange-group-mark: var(--color-node-purple); }
+.crewlet-arrange-group--cyan { --crewlet-arrange-group-band: var(--color-node-cyan-fill); --crewlet-arrange-group-line: var(--color-node-cyan-line); --crewlet-arrange-group-ink: var(--color-node-cyan-ink); --crewlet-arrange-group-mark: var(--color-node-cyan); }
+.crewlet-arrange-group--green { --crewlet-arrange-group-band: var(--color-node-green-fill); --crewlet-arrange-group-line: var(--color-node-green-line); --crewlet-arrange-group-ink: var(--color-node-green-ink); --crewlet-arrange-group-mark: var(--color-node-green); }
+.crewlet-arrange-group--amber { --crewlet-arrange-group-band: var(--color-node-amber-fill); --crewlet-arrange-group-line: var(--color-node-amber-line); --crewlet-arrange-group-ink: var(--color-node-amber-ink); --crewlet-arrange-group-mark: var(--color-node-amber); }
+.crewlet-arrange-group--rose { --crewlet-arrange-group-band: var(--color-node-rose-fill); --crewlet-arrange-group-line: var(--color-node-rose-line); --crewlet-arrange-group-ink: var(--color-node-rose-ink); --crewlet-arrange-group-mark: var(--color-node-rose); }
+.crewlet-arrange-group--blue { --crewlet-arrange-group-band: var(--color-node-blue-fill); --crewlet-arrange-group-line: var(--color-node-blue-line); --crewlet-arrange-group-ink: var(--color-node-blue-ink); --crewlet-arrange-group-mark: var(--color-node-blue); }
+
+.crewlet-arrange-group__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2);
+  border-bottom: 1px solid var(--crewlet-arrange-group-line);
+  background: var(--crewlet-arrange-group-band);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__head {
+  border-bottom-color: transparent;
+}
+
+.crewlet-arrange-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--crewlet-arrange-group-ink);
+  font: inherit;
+  cursor: pointer;
+}
+/* Editing, the toggle is the chevron alone, a square of its own, so its
+   hover never runs into the name field beside it. */
+.crewlet-arrange-group__toggle.is-icon {
+  flex: 0 0 auto;
+  justify-content: center;
+  width: var(--size-row-sm);
+  padding: 0;
+}
+.crewlet-arrange-group__toggle:hover {
+  background: var(--color-surface-hover);
+}
+.crewlet-arrange-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-arrange-group__chevron {
+  flex-shrink: 0;
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__chevron {
+  transform: rotate(-90deg);
+}
+
+.crewlet-arrange-group__title,
+.crewlet-arrange-group__title-field {
+  overflow: hidden;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--crewlet-arrange-group-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Editing, the name is typed where it is read: the title itself, which
+   shows it is a field on hover and takes a ring when focused. */
+.crewlet-arrange-group__title-field {
+  /* As wide as the name, so the count sits just after it. */
+  field-sizing: content;
+  min-width: 3ch;
+  max-width: 100%;
+  height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 1px dashed transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-family: inherit;
+  cursor: text;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group__title-field:hover {
+  border-color: var(--crewlet-arrange-group-mark);
+}
+/* The ring is drawn over the field's own edge, never beside it. */
+.crewlet-arrange-group__title-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+  border-style: solid;
+  border-color: var(--color-focus);
+  background: var(--color-surface-background);
+}
+.crewlet-arrange-group__title-field::placeholder {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-arrange-group__count {
+  flex-shrink: 0;
+}
+
+.crewlet-arrange-group__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-inline-start: auto;
+}
+
+.crewlet-arrange-group__body {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--spacing-4);
+  align-items: stretch;
+  padding: var(--spacing-4);
+  min-height: 5rem;
+}
+.crewlet-arrange-group__body[data-reorder-over='true'] {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-arrange-group__empty {
+  display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-group__chevron,
+  .crewlet-arrange-group__title-field {
+    transition: none;
+  }
+}
+
+/* Arranging, the header is what a pointer moves the group by. */
+.crewlet-arrange-frame[draggable='true'] > .crewlet-arrange-frame__content > .crewlet-arrange-group > .crewlet-arrange-group__head {
+  cursor: grab;
+}
+
+
+/* ArrangeList-NNRTDFI5.css */
+/*
+ * ArrangeList: rows a reader puts in order and switches on and off.
+ *
+ * The row is a quiet inset band rather than a card: a panel holding eight of
+ * them is a list, and eight bordered boxes read as eight separate objects.
+ */
+
+.crewlet-arrange-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-arrange-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-subtle);
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-arrange-list__item:hover {
+  border-color: var(--color-border-default);
+}
+
+/* The row being carried is a gap in the list, outlined where it will land. */
+.crewlet-arrange-list__item[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
+  background: transparent;
+}
+.crewlet-arrange-list__item[data-reorder='dragging'] > * {
+  opacity: 0.4;
+}
+
+.crewlet-arrange-list__handle {
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+.crewlet-arrange-list__handle:active {
+  cursor: grabbing;
+}
+
+.crewlet-arrange-list__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-arrange-list__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+/* The toggle takes the row's width, so its label is the row's target. */
+.crewlet-arrange-list__toggle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Off, the words step back; the switch itself already says off. */
+.crewlet-arrange-list__item.is-off .crewlet-arrange-list__icon,
+.crewlet-arrange-list__item.is-off .crewlet-switch__label,
+.crewlet-arrange-list__item.is-off .crewlet-checkbox__label {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-arrange-list__trailing {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.crewlet-arrange-list__moves {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-list__item {
+    transition: none;
+  }
+}
+
+
 /* ArtifactCard-EXVAEBV6.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
@@ -8933,6 +9618,46 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Divider-3Z77ZAJH.css */
+/* Divider: a rule across its space, with its name at its start or in its middle. */
+
+.crewlet-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-sm);
+  min-width: 0;
+}
+.crewlet-divider::before,
+.crewlet-divider::after {
+  content: '';
+  flex: 1 1 auto;
+  border-top: 1px solid var(--color-border-strong);
+}
+/* One rule unless the words sit in the middle of it. */
+.crewlet-divider:not(.crewlet-divider--center)::before {
+  display: none;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::before {
+  display: block;
+}
+.crewlet-divider:not(.crewlet-divider--labelled)::after {
+  display: none;
+}
+
+.crewlet-divider__label {
+  flex: 0 1 auto;
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
 /* Document-PQGXJHB7.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
@@ -9698,7 +10423,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* HuePicker-5QIUR6L7.css */
+/* HuePicker-PAIGH6LR.css */
 /*
  * A hue's swatch: the hue itself, as a dot beside its name. The name carries
  * the choice; the dot is there so the row can be scanned for a colour.
@@ -9718,6 +10443,12 @@ svg.crewlet-datetime__chevron {
 .crewlet-hue-picker__swatch--rose { background: var(--color-node-rose); }
 .crewlet-hue-picker__swatch--blue { background: var(--color-node-blue); }
 
+/* No hue: a ring in the hairline, so the row still reads as swatches. */
+.crewlet-hue-picker__swatch--none {
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-strong);
+}
+
 
 /* IconButton-VYWP6SGW.css */
 /*
@@ -9895,6 +10626,39 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* IconTile-4GNWTLAW.css */
+/*
+ * IconTile: a glyph on a tinted square. Each hue pairs its fill and its ink
+ * from one measured family (`--color-node-*`); left out, the brand accent's
+ * soft fill and ink. No edge: the tile sits inside a card that has one.
+ */
+.crewlet-icon-tile {
+  --crewlet-icon-tile-fill: var(--color-brand-accent-soft);
+  --crewlet-icon-tile-ink: var(--color-brand-accent-ink);
+  --crewlet-icon-tile-size: var(--size-row-md);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-icon-tile-size);
+  height: var(--crewlet-icon-tile-size);
+  border-radius: var(--radius-md);
+  background: var(--crewlet-icon-tile-fill);
+  color: var(--crewlet-icon-tile-ink);
+}
+
+.crewlet-icon-tile--sm { --crewlet-icon-tile-size: var(--size-row-sm); }
+.crewlet-icon-tile--lg { --crewlet-icon-tile-size: var(--size-row-lg); border-radius: var(--radius-lg); }
+
+.crewlet-icon-tile--purple { --crewlet-icon-tile-fill: var(--color-node-purple-fill); --crewlet-icon-tile-ink: var(--color-node-purple-ink); }
+.crewlet-icon-tile--cyan { --crewlet-icon-tile-fill: var(--color-node-cyan-fill); --crewlet-icon-tile-ink: var(--color-node-cyan-ink); }
+.crewlet-icon-tile--green { --crewlet-icon-tile-fill: var(--color-node-green-fill); --crewlet-icon-tile-ink: var(--color-node-green-ink); }
+.crewlet-icon-tile--amber { --crewlet-icon-tile-fill: var(--color-node-amber-fill); --crewlet-icon-tile-ink: var(--color-node-amber-ink); }
+.crewlet-icon-tile--rose { --crewlet-icon-tile-fill: var(--color-node-rose-fill); --crewlet-icon-tile-ink: var(--color-node-rose-ink); }
+.crewlet-icon-tile--blue { --crewlet-icon-tile-fill: var(--color-node-blue-fill); --crewlet-icon-tile-ink: var(--color-node-blue-ink); }
+
+
 /* ImageUpload-NVGMN7DP.css */
 /*
  * ImageUpload, the click-to-upload affordance built on Avatar.
@@ -12670,7 +13434,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-RQAYGG4L.css */
+/* Modal-XOSV6FAH.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -12730,6 +13494,12 @@ svg.crewlet-datetime__chevron {
 }
 
 /* Inside a LayerHost the overlay covers the host, not the window. */
+/* The page behind stays as it is: see `backdrop` in Modal.tsx. */
+.crewlet-modal-overlay--clear {
+  background: transparent;
+  backdrop-filter: none;
+}
+
 .crewlet-modal-overlay--in-host {
   position: absolute;
 }
@@ -13049,6 +13819,14 @@ svg.crewlet-datetime__chevron {
   margin: calc(var(--spacing-1) * -1);
 }
 
+/* The step back leads the head, its glyph on the title's inline start, as
+   the close control's sits on the head's end. */
+.crewlet-modal__back {
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-2) * -1);
+  margin-block: calc(var(--spacing-1) * -1);
+}
+
 .crewlet-modal__body {
   flex: 1 1 auto;
   min-height: 0;
@@ -13276,6 +14054,67 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* Note-RT4L6VUT.css */
+/*
+ * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
+ */
+
+.crewlet-note {
+  --crewlet-note-paper: var(--color-surface-subtle);
+  --crewlet-note-edge: var(--color-border-default);
+  --crewlet-note-ink: var(--color-text-primary);
+
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  border: 1px solid var(--crewlet-note-edge);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-note-paper);
+  color: var(--crewlet-note-ink);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-note--purple { --crewlet-note-paper: var(--color-node-purple-fill); --crewlet-note-edge: var(--color-node-purple-line); --crewlet-note-ink: var(--color-node-purple-ink); }
+.crewlet-note--cyan { --crewlet-note-paper: var(--color-node-cyan-fill); --crewlet-note-edge: var(--color-node-cyan-line); --crewlet-note-ink: var(--color-node-cyan-ink); }
+.crewlet-note--green { --crewlet-note-paper: var(--color-node-green-fill); --crewlet-note-edge: var(--color-node-green-line); --crewlet-note-ink: var(--color-node-green-ink); }
+.crewlet-note--amber { --crewlet-note-paper: var(--color-node-amber-fill); --crewlet-note-edge: var(--color-node-amber-line); --crewlet-note-ink: var(--color-node-amber-ink); }
+.crewlet-note--rose { --crewlet-note-paper: var(--color-node-rose-fill); --crewlet-note-edge: var(--color-node-rose-line); --crewlet-note-ink: var(--color-node-rose-ink); }
+.crewlet-note--blue { --crewlet-note-paper: var(--color-node-blue-fill); --crewlet-note-edge: var(--color-node-blue-line); --crewlet-note-ink: var(--color-node-blue-ink); }
+
+.crewlet-note--center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.crewlet-note--lg {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-tight);
+}
+
+/* Prose inside takes the note's ink, links included. */
+.crewlet-note :is(p, li, h2, h3, h4, strong, em) {
+  color: inherit;
+}
+.crewlet-note a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.crewlet-note > :first-child {
+  margin-top: 0;
+}
+.crewlet-note > :last-child {
+  margin-bottom: 0;
+}
+
+
 /* ObjectHeader-UNVYM2KD.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
@@ -14603,6 +15442,150 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* PinTile-IIA25MNZ.css */
+/*
+ * PinTile: one pinned thing, a link with its facts.
+ *
+ * A raised row rather than a card with a header: a shelf holds six of them,
+ * and six headed cards are six sections where the reader wanted six links.
+ */
+
+.crewlet-pin-tile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+  min-height: 56px;
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-surface-hover);
+}
+.crewlet-pin-tile:has(.crewlet-pin-tile__handle) {
+  padding-inline-start: var(--spacing-1);
+}
+
+.crewlet-pin-tile[data-reorder='dragging'] {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+}
+.crewlet-pin-tile[data-reorder='dragging'] > * {
+  opacity: 0.35;
+}
+
+.crewlet-pin-tile__handle {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-pin-tile__leading {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-pin-tile__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-pin-tile__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-pin-tile__link {
+  overflow: hidden;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* The tile's whole area, as the link's. */
+.crewlet-pin-tile__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.crewlet-pin-tile__link:focus-visible {
+  outline: 2px solid transparent;
+}
+/* The tile's ring, over its own edge, for the link that is its target. */
+.crewlet-pin-tile:has(.crewlet-pin-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+}
+
+.crewlet-pin-tile__status {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.crewlet-pin-tile__meta {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.crewlet-pin-tile__kind {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-pin-tile__figure {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+/* Above the stretched link, so it takes its own press. */
+.crewlet-pin-tile__unpin {
+  position: relative;
+  z-index: var(--z-index-raised);
+  flex-shrink: 0;
+  color: var(--color-brand-accent-ink);
+  opacity: 0.55;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-pin-tile:hover .crewlet-pin-tile__unpin,
+.crewlet-pin-tile:focus-within .crewlet-pin-tile__unpin {
+  opacity: 1;
+}
+@media (hover: none) {
+  .crewlet-pin-tile__unpin {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-pin-tile,
+  .crewlet-pin-tile__unpin {
+    transition: none;
+  }
+}
+
+
 /* Popover-QCINR7WG.css */
 /*
  * The anchored panel.
@@ -18410,7 +19393,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-HVG6O62W.css */
+/* StatGroup-PADTJCUQ.css */
 /*
  * A row of stat tiles.
  *
@@ -18433,6 +19416,13 @@ svg.crewlet-select__chevron {
   overflow: hidden;
 }
 
+/* Inside another card: the card's surface and edge are the row's. */
+.crewlet-stat-group--flush {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
 /*
  * A tile inside the row brings no surface of its own, whether or not its
  * caller remembered `flush`. The group draws one card and the hairlines