@crewlethq/ui 0.48.3 → 0.49.0

package/dist/styles.css

@@ -2474,7 +2474,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactBar-6PGWGKN2.css */
+/* ArtifactBar-UMZCTARR.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
@@ -2581,6 +2581,15 @@ button.crewlet-account-row__who:focus-visible {
   overflow: visible;
 }
 
+/* A read-only title's words: the block that takes the ellipsis, which the
+   flex heading around it cannot. */
+.crewlet-artifact-bar__text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .crewlet-artifact-bar__rename {
   min-width: 0;
   max-width: 100%;
@@ -2904,7 +2913,7 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArtifactCard-OGTMO2KI.css */
+/* ArtifactCard-SOB63NV5.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
  * lines up whatever each preview is, the kind's badge over its foot, then the
@@ -3179,9 +3188,80 @@ button.crewlet-account-row__who:focus-visible {
   }
 }
 
+/*
+ * PICKED, as every chosen option in the package is drawn: the selected edge
+ * over the selected fill, laid as an image over the card's own ground so the
+ * card keeps it. Never the accent, which is the focus ring's hue.
+ */
+.crewlet-artifact-card--card.is-selected {
+  border-color: var(--color-border-selected);
+  background-image: linear-gradient(var(--color-surface-selected), var(--color-surface-selected));
+}
+
+/*
+ * THE SELECTION BOX STANDS ON THE PREVIEW'S FOOT, opposite the kind's badge
+ * and drawn as its twin: half over the picture and half over the card, on a
+ * raised square in the badge's own size, hairline and shadow. A cover's own
+ * title starts at its top corner, and a box over that corner hid its first
+ * words; the foot's far corner is where a cover has the least to say.
+ *
+ * Its anchor has the preview's shape (the card's width at 16:9) and takes no
+ * pointer, so the box is placed against the preview's foot at any width
+ * without being nested in the link the preview belongs to. Hidden until the
+ * card is hovered or holds focus, and always there once the card is picked,
+ * while the gallery is choosing, and on a screen with no hover.
+ */
+.crewlet-artifact-card__select-anchor {
+  position: absolute;
+  inset: 0 0 auto 0;
+  aspect-ratio: 16 / 9;
+  pointer-events: none;
+}
+
+.crewlet-artifact-card__select {
+  position: absolute;
+  right: var(--spacing-4);
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-background);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(50%);
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-artifact-card--card:hover .crewlet-artifact-card__select,
+.crewlet-artifact-card--card:focus-within .crewlet-artifact-card__select,
+.crewlet-artifact-card--card.is-selected .crewlet-artifact-card__select,
+.crewlet-artifact-card--selecting .crewlet-artifact-card__select {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-artifact-card__select {
+    opacity: 1;
+  }
+}
+
+/* WHILE CHOOSING, THE BODY PICKS: the pointer says so, and a Shift-press
+   for a range selects no text on the way. */
+.crewlet-artifact-card--selecting .crewlet-artifact-card__link {
+  cursor: pointer;
+  user-select: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-artifact-card--card,
-  .crewlet-artifact-card__actions {
+  .crewlet-artifact-card__actions,
+  .crewlet-artifact-card__select {
     transition: none;
   }
 }
@@ -3521,7 +3601,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 }
 
 
-/* ArtifactKinds-CVD3FCYO.css */
+/* ArtifactKinds-O3CALPVX.css */
 /*
  * A kind's colours, set once per kind on `--crewlet-kind-*` by its class
  * (`crewlet-kind--<kind>`): the hue, its Fill and Line steps and the ink a
@@ -3536,6 +3616,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-kind--design { --crewlet-kind-hue: var(--color-artifact-kind-design); --crewlet-kind-fill: var(--color-artifact-kind-design-fill); --crewlet-kind-line: var(--color-artifact-kind-design-line); --crewlet-kind-ink: var(--color-artifact-kind-design-ink); }
 .crewlet-kind--dashboard { --crewlet-kind-hue: var(--color-artifact-kind-dashboard); --crewlet-kind-fill: var(--color-artifact-kind-dashboard-fill); --crewlet-kind-line: var(--color-artifact-kind-dashboard-line); --crewlet-kind-ink: var(--color-artifact-kind-dashboard-ink); }
 .crewlet-kind--html { --crewlet-kind-hue: var(--color-artifact-kind-html); --crewlet-kind-fill: var(--color-artifact-kind-html-fill); --crewlet-kind-line: var(--color-artifact-kind-html-line); --crewlet-kind-ink: var(--color-artifact-kind-html-ink); }
+.crewlet-kind--brand { --crewlet-kind-hue: var(--color-artifact-kind-brand); --crewlet-kind-fill: var(--color-artifact-kind-brand-fill); --crewlet-kind-line: var(--color-artifact-kind-brand-line); --crewlet-kind-ink: var(--color-artifact-kind-brand-ink); }
 .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); }
 
 
@@ -3752,7 +3833,7 @@ a.crewlet-make-row__item:active {
 }
 
 
-/* ArtifactNameCell-RTVP4LO4.css */
+/* ArtifactNameCell-3AHLUSE5.css */
 /*
  * An artifact's name in a list: the kind's mark on its tint, the title over
  * one quiet line. Every colour is a token: the mark reads the kind's own Fill,
@@ -3792,6 +3873,18 @@ a.crewlet-make-row__item:active {
   box-shadow: inset 0 0 0 1px var(--crewlet-kind-hue);
 }
 
+/* A FOLDER'S MARK IS NEUTRAL: a folder is not a kind, so it takes the inset
+   ground and the plain hairline, and its hover takes the hover hairline. */
+.crewlet-artifact-name__mark--folder {
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+:is(tr, [role='row']):hover .crewlet-artifact-name__mark--folder {
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
 .crewlet-artifact-name--trashed .crewlet-artifact-name__mark {
   background: var(--color-surface-inset);
   box-shadow: inset 0 0 0 1px var(--color-border-default);
@@ -4617,6 +4710,90 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* BrandChip-SQWBC2WU.css */
+/*
+ * The company's brand as a small link: the mark, the name, a chevron. A quiet
+ * chip at a small control's height, inside the default hairline, that steps
+ * its hairline up under the pointer and moves nothing.
+ */
+.crewlet-brand-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  min-height: var(--size-control-sm);
+  box-sizing: border-box;
+  padding: 2px var(--spacing-2) 2px 2px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-out),
+    color var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-brand-chip:hover {
+  border-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+  text-decoration: none;
+}
+
+.crewlet-brand-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* THE MARK ON ITS OWN PLATE, so a mark drawn for a light ground still reads
+   on a dark theme: the brand's square logo at the chip's inner height. */
+.crewlet-brand-chip__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-control-sm) - 6px);
+  height: calc(var(--size-control-sm) - 6px);
+  overflow: hidden;
+  border-radius: var(--radius-circle);
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+}
+
+.crewlet-brand-chip__mark--glyph {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brand-chip__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.crewlet-brand-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-brand-chip__chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-brand-chip {
+    transition: none;
+  }
+}
+
+
 /* BrandLockup-JKGXFCZF.css */
 /*
  * The brand lockup at the head of the rail.
@@ -4734,6 +4911,226 @@ button.crewlet-avatar-picker:hover .crewlet-avatar-picker__pip {
 }
 
 
+/* BrandSample-G5V7GKR2.css */
+/*
+ * A company's brand, drawn: a doc's opening or a title slide, in a 16:9 frame
+ * that sets every length against its own width, so one drawing reads at a
+ * gallery cover's size and at a preview's.
+ *
+ * It paints with the public tokens, which the sample's BrandScope (pinned to
+ * the sample's mode) sets from the brand through the artifact kit's own
+ * mapping: the ground, the text, the accent, the highlight and the two faces,
+ * and the quiet line in the tertiary text of the sample's pinned mode.
+ */
+.crewlet-brand-sample {
+  /* The frame's corner. A host drawing the sample edge to edge in a cover
+     that clips its own corners sets it to its own. */
+  --crewlet-brand-sample-radius: var(--radius-lg);
+
+  /* THE SAMPLE IS ITS OWN CONTAINER, so `cqi` inside it is its own width. */
+  container-type: inline-size;
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--crewlet-brand-sample-radius);
+  background: var(--color-surface-background);
+  /* AN EDGE OF ITS OWN, inside the frame, so a ground that matches the page
+     is still a frame. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  line-height: var(--font-line-height-snug);
+  user-select: none;
+}
+
+.crewlet-brand-sample__page,
+.crewlet-brand-sample__slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* ---- the doc's opening ---- */
+
+.crewlet-brand-sample__page {
+  align-items: flex-start;
+  gap: 2.4cqi;
+  padding: 6cqi 7cqi;
+}
+
+.crewlet-brand-sample__brand {
+  display: flex;
+  align-items: center;
+  height: 6cqi;
+  max-width: 40%;
+  margin-bottom: 1.6cqi;
+}
+
+.crewlet-brand-sample__logo {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* WHERE THERE IS NO LOGO, the company's name in the heading face. */
+.crewlet-brand-sample__wordmark {
+  overflow: hidden;
+  font-family: var(--font-family-display);
+  font-size: 3.4cqi;
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-brand-sample__heading {
+  max-width: 100%;
+  overflow: hidden;
+  font-family: var(--font-family-display);
+  font-size: 6cqi;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* THE ACCENT RULE under the heading, in the brand's main colour for the mode. */
+.crewlet-brand-sample__rule {
+  display: block;
+  width: 12cqi;
+  height: 0.8cqi;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+.crewlet-brand-sample__body {
+  max-width: 82%;
+  font-size: 2.8cqi;
+  line-height: var(--font-line-height-normal);
+}
+
+/* A LINK, DRAWN: the accent ink and its underline, and nothing to follow. */
+.crewlet-brand-sample__link {
+  color: var(--color-brand-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 0.2cqi;
+  text-underline-offset: 0.5cqi;
+}
+
+.crewlet-brand-sample__byline {
+  margin-top: auto;
+  color: var(--color-text-tertiary);
+  font-size: 2.2cqi;
+}
+
+/* ---- the title slide ---- */
+
+.crewlet-brand-sample__slide {
+  justify-content: flex-end;
+  gap: 2.4cqi;
+  padding: 6.5cqi 7cqi;
+}
+
+/* The mark in the slide's top corner, square, at the slide's own scale. */
+.crewlet-brand-sample__slide .crewlet-brand-sample__brand {
+  position: absolute;
+  top: 6.5cqi;
+  left: 7cqi;
+  height: 7cqi;
+  max-width: 30%;
+  margin: 0;
+}
+
+.crewlet-brand-sample__logo--mark {
+  width: 7cqi;
+  height: 7cqi;
+}
+
+/* THE ACCENT BAR: the brand's main colour, then its second where it has one. */
+.crewlet-brand-sample__bar {
+  display: flex;
+  gap: 0.8cqi;
+  height: 1cqi;
+}
+
+.crewlet-brand-sample__bar-primary,
+.crewlet-brand-sample__bar-secondary {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+
+.crewlet-brand-sample__bar-primary {
+  width: 12cqi;
+  background: var(--color-brand-accent);
+}
+
+.crewlet-brand-sample__bar-secondary {
+  width: 4cqi;
+  background: var(--color-brand-highlight);
+}
+
+/* TWO LINES AT MOST, set large: a title slide's heading. */
+.crewlet-brand-sample__heading--slide {
+  display: -webkit-box;
+  max-width: 48%;
+  font-size: 7.5cqi;
+  line-height: 1.05;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.crewlet-brand-sample__footer {
+  margin-top: 3cqi;
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: 2cqi;
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+
+/* BrandScope-H2KZHGT7.css */
+/*
+ * A region in a company's brand. The mapping itself (the captured page values
+ * on `.crewlet-brand-scope`, the brand's steps and public tokens on
+ * `.crewlet-brand-scope__layer`) is @crewlethq/tokens' css/brand-scope,
+ * imported beside this file and built from the one source the artifact kit's
+ * brand layer is built from. This file is only the two elements' own shape.
+ */
+
+/* The outer element carries the inputs and the capture, and draws no box. */
+.crewlet-brand-scope {
+  display: contents;
+}
+
+/* THE BOX, with the body text and face of the brand, so plain text inside it
+   follows the brand without a rule of its own. It paints no ground. */
+.crewlet-brand-scope__layer {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+}
+
+/* A PINNED MODE is that mode for the platform's own drawing too: a native
+   control or a scrollbar inside a light preview on a dark page is light. */
+.crewlet-brand-scope[data-mode='light'] > .crewlet-brand-scope__layer {
+  color-scheme: light;
+}
+
+.crewlet-brand-scope[data-mode='dark'] > .crewlet-brand-scope__layer {
+  color-scheme: dark;
+}
+
+
 /* Breadcrumb-YMWVM3SV.css */
 /*
  * The trail in a top bar.
@@ -8445,7 +8842,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Checkbox-ALWG3WV2.css */
+/* Checkbox-MB22OW6P.css */
 /*
  * Checkbox: a box, its label and its consequence as one target.
  *
@@ -8574,6 +8971,24 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   font-size: var(--font-size-compact);
 }
 
+/*
+ * THE BARE BOX (`hideLabel`): no words beside it, so the row's floor and its
+ * gap go, and the box is centred on a square the pointer floor allows. The
+ * label is still its name, said rather than printed.
+ */
+.crewlet-checkbox--bare {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+}
+
+.crewlet-checkbox--bare .crewlet-checkbox__control {
+  margin: 0;
+}
+
 .crewlet-checkbox.is-disabled,
 .crewlet-checkbox.is-disabled .crewlet-checkbox__control {
   cursor: not-allowed;
@@ -9158,7 +9573,164 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* Combobox-YDONYDTM.css */
+/* ColorField-2OIOWT3Z.css */
+/*
+ * A colour a person chooses: the swatch that opens the platform's picker,
+ * beside the hex field. The swatch's fill is the one value that is not a
+ * token, and it arrives through `--crewlet-color-field-value` only after it
+ * has passed `#rrggbb`.
+ */
+.crewlet-color-field__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * THE SWATCH IS THE PICKER: the platform's colour input lies over the chip,
+ * transparent, so a press anywhere on the chip opens it and the chip is what
+ * the reader sees, the same in every browser. Its edge is its own, so a
+ * colour that matches the page is still a chip.
+ */
+.crewlet-color-field__swatch {
+  /* The hatch of no colour, as a colour swatch draws it. */
+  --crewlet-color-field-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-field-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-field);
+}
+
+.crewlet-color-field__swatch.is-empty {
+  background: var(--crewlet-color-field-hatch);
+}
+
+.crewlet-color-field__swatch.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-color-field__picker {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.crewlet-color-field__picker:disabled {
+  cursor: not-allowed;
+}
+
+/* THE RING IS THE CHIP'S: the input under it is transparent, so the ring a
+   keyboard needs is drawn on what the reader sees. */
+.crewlet-color-field__swatch:has(.crewlet-color-field__picker:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+
+/* ColorSwatch-DNMUFHNS.css */
+/*
+ * One colour of a brand: a chip of it over its role and its value. The chip's
+ * fill is the one value that is not a token, and it arrives through
+ * `--crewlet-color-swatch-value` only after it has passed `#rrggbb`. Every
+ * other colour here is a token.
+ */
+.crewlet-color-swatch {
+  /* The hatch of no colour, as one value: the same lines an arranged page's
+     ground draws, so "nothing here" reads one way across the package. */
+  --crewlet-color-swatch-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/* THE CHIP HAS AN EDGE OF ITS OWN, so a colour that matches the page is
+   still a chip rather than a gap. */
+.crewlet-color-swatch__chip {
+  display: block;
+  width: 100%;
+  height: var(--size-row-lg);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-swatch-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+}
+
+.crewlet-color-swatch__chip.is-empty {
+  background: var(--crewlet-color-swatch-hatch);
+}
+
+.crewlet-color-swatch__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-color-swatch__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-color-swatch__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__value--plain {
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-color-swatch__empty {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* ---- sm: a chip beside the words, for a dense list ---- */
+
+.crewlet-color-swatch--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-color-swatch--sm .crewlet-color-swatch__chip {
+  flex: none;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  border-radius: var(--radius-sm);
+}
+
+
+/* Combobox-GBCWXWEB.css */
 /*
  * Combobox: a field that offers completions.
  *
@@ -9241,6 +9813,88 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   cursor: not-allowed;
 }
 
+/* ---- inline (`inline`): the list is the surface's body ------------------
+   Always on screen, in the flow under the field, at ONE HEIGHT: the box is
+   `rows` one-line rows tall (`--crewlet-combobox-rows`, set by the component)
+   whatever the filter leaves in it, so nothing under it moves as somebody
+   types, and it scrolls past that. It sits on the surface's own ground inside
+   a hairline, because it is part of the surface rather than a panel over it. */
+.crewlet-combobox--inline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-combobox__list {
+  /* ONE ROW IS ONE ROW STEP, exactly: a row's own height is held to it
+     below, so a label that draws a glyph beside its words is no taller than
+     one that does not, and `rows` rows fill the box to the pixel. */
+  --crewlet-combobox-row: var(--size-row-md);
+  --crewlet-listbox-gap: 1px;
+
+  height: calc(
+    var(--crewlet-combobox-rows) * var(--crewlet-combobox-row) + (var(--crewlet-combobox-rows) - 1) * var(--crewlet-listbox-gap) +
+      var(--spacing-1) * 2 + 2px
+  );
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-combobox__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--crewlet-listbox-gap);
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.crewlet-combobox__list.is-mono .crewlet-combobox__label {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option {
+  height: var(--crewlet-combobox-row);
+  min-height: 0;
+  padding-block: 0;
+  border-radius: var(--radius-xs);
+}
+
+/* The row the arrows or the pointer are on, in the hover tint, as the popup
+   draws it. Scoped to the list for the same reason as the panel's. */
+.crewlet-combobox__options .crewlet-listbox__option.is-highlight,
+.crewlet-combobox__options .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/*
+ * THE CHOSEN ROW (`chosen`), as every chosen option in the package is drawn:
+ * the selected fill, never the accent, with a tick in the accent's ink so the
+ * choice never rests on the tint. It keeps its fill under the arrows too.
+ */
+.crewlet-combobox__options .crewlet-listbox__option[aria-selected='true'] {
+  background: var(--color-surface-selected);
+  color: var(--color-text-primary);
+}
+
+.crewlet-combobox__check {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-combobox__options .crewlet-listbox__option.is-disabled {
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
 
 /* CommandPalette-TOZYLWLE.css */
 /*
@@ -9820,30 +10474,80 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
   max-width: 1440px;
 }
 
-/*
- * The console width. It reads the content-max token rather than restating the
- * number, because the shell and this container have to agree about where a
- * pane stops or a screen's own header sits at a different width from the
- * screen under it.
- */
-.crewlet-container--2xl {
-  max-width: var(--size-content-max);
+/*
+ * The console width. It reads the content-max token rather than restating the
+ * number, because the shell and this container have to agree about where a
+ * pane stops or a screen's own header sits at a different width from the
+ * screen under it.
+ */
+.crewlet-container--2xl {
+  max-width: var(--size-content-max);
+}
+
+/*
+ * No measure, and the gutter kept. A canvas, a wide grid or a table that
+ * genuinely wants the viewport still needs its content off the window edge.
+ */
+.crewlet-container--full {
+  max-width: none;
+}
+
+/* A PHONE'S GUTTER IS THE SHELL'S, 16px, the top bar's own inset: a narrower
+   one stood a page's content left of the title over it. */
+@media (max-width: 480px) {
+  .crewlet-container {
+    padding-inline: var(--spacing-4);
+  }
+}
+
+
+/* ContrastBadge-CBZPGG3G.css */
+/*
+ * Whether one colour reads on another: a sample of the pair, the ratio and
+ * the level. The sample's two colours are the only values here that are not
+ * tokens, and they arrive through `--crewlet-contrast-badge-ink` and
+ * `--crewlet-contrast-badge-ground` only once both have passed `#rrggbb`.
+ */
+.crewlet-contrast-badge {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+}
+
+/* THE SAMPLE HAS AN EDGE OF ITS OWN, so a ground that matches the page is
+   still a sample. */
+.crewlet-contrast-badge__sample {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  background: var(--crewlet-contrast-badge-ground, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  color: var(--crewlet-contrast-badge-ink, var(--color-text-tertiary));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.crewlet-contrast-badge__label {
+  color: var(--color-text-secondary);
 }
 
-/*
- * No measure, and the gutter kept. A canvas, a wide grid or a table that
- * genuinely wants the viewport still needs its content off the window edge.
- */
-.crewlet-container--full {
-  max-width: none;
+.crewlet-contrast-badge__ratio {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
 }
 
-/* A PHONE'S GUTTER IS THE SHELL'S, 16px, the top bar's own inset: a narrower
-   one stood a page's content left of the title over it. */
-@media (max-width: 480px) {
-  .crewlet-container {
-    padding-inline: var(--spacing-4);
-  }
+.crewlet-contrast-badge__unmeasured {
+  color: var(--color-text-tertiary);
 }
 
 
@@ -10241,7 +10945,7 @@ button.crewlet-histogram__bar[data-empty]:focus-visible > .crewlet-histogram__fi
 }
 
 
-/* DataGrid-AQKPJD7W.css */
+/* DataGrid-VNGQESJA.css */
 /*
  * DataGrid: a list as columns, one track list on the grid.
  *
@@ -10439,6 +11143,21 @@ button.crewlet-data-grid__row-link {
   background: var(--color-brand-accent-soft);
 }
 
+/*
+ * PICKED FOR A BULK ACTION (`selection`), as every chosen option is drawn:
+ * the selected fill, never the accent. One fill, so the hover overlay does not
+ * stack on it, and its box says it as well.
+ */
+.crewlet-data-grid__row--picked,
+.crewlet-data-grid__row--picked:hover {
+  background: var(--color-surface-selected);
+}
+
+/* The selection box, centred in its track and standing above the row's link. */
+.crewlet-data-grid__select {
+  display: inline-flex;
+}
+
 .crewlet-data-grid__row--cursor {
   box-shadow: inset 2px 0 0 var(--color-brand-accent);
 }
@@ -15686,6 +16405,240 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
+/* FolderTile-FDT5Y63Z.css */
+/*
+ * A folder in a gallery: a short tile on Card (no preview), the folder glyph
+ * on a neutral tint over the name and one quiet line, and a More menu in the
+ * top corner outside the link. `row` is the full width, 44px row a phone
+ * takes, and a tile becomes one under the phone breakpoint.
+ *
+ * ON TOP OF CARD, so every rule that changes Card's own layout carries Card's
+ * class too: the two sheets meet at equal weight and the bundle orders them by
+ * file name, which puts Card's after this one.
+ */
+
+/*
+ * THE ARTIFACT CARD'S CORNER, so a folder tile and the cards below it read as
+ * one gallery, and Card's own hover step (the hairline darkens, nothing
+ * lifts). The chosen state is Card's (`selected`): the selected edge over the
+ * selected fill.
+ */
+.crewlet-card.crewlet-folder-tile {
+  /*
+   * THE TWO SHAPES ARE ONE LAYOUT AT TWO SIZES, so the row (and a tile under
+   * the phone breakpoint) restates these and nothing else.
+   */
+  --crewlet-folder-tile-radius: var(--radius-xl);
+  --crewlet-folder-tile-gap: var(--spacing-3);
+  --crewlet-folder-tile-pad-block: var(--spacing-4);
+  --crewlet-folder-tile-pad-inline: var(--spacing-4);
+  --crewlet-folder-tile-floor: auto;
+  --crewlet-folder-tile-glyph: 40px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-md);
+  --crewlet-folder-tile-name: var(--font-size-md);
+  --crewlet-folder-tile-facts: var(--font-size-sm);
+  --crewlet-folder-tile-actions-inset: var(--spacing-3);
+  /*
+   * A TILE STACKS: the glyph on top with the More menu level with it in the
+   * other corner, then the name and the facts the full width of the tile,
+   * where a gallery four across has room for "Everyone · 12 artifacts · 2
+   * folders". A row is one line of glyph and words with the menu centred on
+   * it, and only the row gives the menu room.
+   */
+  --crewlet-folder-tile-direction: column;
+  --crewlet-folder-tile-align: flex-start;
+  --crewlet-folder-tile-actions-top: calc(
+    var(--crewlet-folder-tile-pad-block) + (var(--crewlet-folder-tile-glyph) - var(--size-control-sm)) / 2
+  );
+  --crewlet-folder-tile-actions-shift: 0;
+  --crewlet-folder-tile-reserve-link: 0px;
+
+  flex-direction: row;
+  align-items: stretch;
+  min-width: 0;
+  border-radius: var(--crewlet-folder-tile-radius);
+}
+
+/* ---- the row: a phone's, full width at 44px ---- */
+
+.crewlet-card.crewlet-folder-tile--row {
+  --crewlet-folder-tile-radius: var(--radius-lg);
+  --crewlet-folder-tile-gap: var(--spacing-2);
+  --crewlet-folder-tile-pad-block: var(--spacing-1);
+  --crewlet-folder-tile-pad-inline: var(--spacing-3);
+  --crewlet-folder-tile-floor: var(--size-control-lg);
+  --crewlet-folder-tile-glyph: 28px;
+  --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+  --crewlet-folder-tile-name: var(--font-size-sm);
+  --crewlet-folder-tile-facts: var(--font-size-xs);
+  --crewlet-folder-tile-actions-inset: var(--spacing-2);
+  --crewlet-folder-tile-direction: row;
+  --crewlet-folder-tile-align: center;
+  --crewlet-folder-tile-actions-top: 50%;
+  --crewlet-folder-tile-actions-shift: -50%;
+  --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+}
+
+/* UNDER THE PHONE BREAKPOINT A TILE IS THE ROW, strictly under, as the
+   package switches there everywhere else. */
+@media (width < 640px) {
+  .crewlet-card.crewlet-folder-tile--tile {
+    --crewlet-folder-tile-radius: var(--radius-lg);
+    --crewlet-folder-tile-gap: var(--spacing-2);
+    --crewlet-folder-tile-pad-block: var(--spacing-1);
+    --crewlet-folder-tile-pad-inline: var(--spacing-3);
+    --crewlet-folder-tile-floor: var(--size-control-lg);
+    --crewlet-folder-tile-glyph: 28px;
+    --crewlet-folder-tile-glyph-radius: var(--radius-sm);
+    --crewlet-folder-tile-name: var(--font-size-sm);
+    --crewlet-folder-tile-facts: var(--font-size-xs);
+    --crewlet-folder-tile-actions-inset: var(--spacing-2);
+    --crewlet-folder-tile-direction: row;
+    --crewlet-folder-tile-align: center;
+    --crewlet-folder-tile-actions-top: 50%;
+    --crewlet-folder-tile-actions-shift: -50%;
+    --crewlet-folder-tile-reserve-link: calc(var(--size-control-sm) + var(--spacing-1));
+  }
+}
+
+/*
+ * SOMETHING HELD OVER IT WOULD LAND IN IT: the accent edge over the accent's
+ * soft fill, the same pair a file drop target takes while files are over it,
+ * so "let go here" reads one way across the package.
+ */
+.crewlet-card.crewlet-folder-tile.is-drop-target {
+  border-color: var(--color-brand-accent);
+  background-color: var(--color-brand-accent-soft);
+}
+
+.crewlet-card.crewlet-folder-tile:has(.crewlet-folder-tile__link:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* THE LINK IS THE TILE: it fills it, and the ring is drawn on the tile. */
+.crewlet-folder-tile__link,
+.crewlet-folder-tile__link:hover {
+  text-decoration: none;
+}
+
+.crewlet-folder-tile__link {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: var(--crewlet-folder-tile-direction);
+  align-items: var(--crewlet-folder-tile-align);
+  gap: var(--crewlet-folder-tile-gap);
+  min-width: 0;
+  min-height: var(--crewlet-folder-tile-floor);
+  padding: var(--crewlet-folder-tile-pad-block) var(--crewlet-folder-tile-pad-inline);
+  border-radius: inherit;
+  color: inherit;
+  outline: none;
+}
+
+/* Room for the More menu on a row, where it sits beside the words. */
+.crewlet-folder-tile--with-actions .crewlet-folder-tile__link {
+  padding-inline-end: calc(var(--crewlet-folder-tile-pad-inline) + var(--crewlet-folder-tile-reserve-link));
+}
+
+/* A NEUTRAL TINT, never a kind's: a folder is not a kind. */
+.crewlet-folder-tile__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--crewlet-folder-tile-glyph);
+  height: var(--crewlet-folder-tile-glyph);
+  box-sizing: border-box;
+  border-radius: var(--crewlet-folder-tile-glyph-radius);
+  background: var(--color-surface-inset);
+  box-shadow: inset 0 0 0 1px var(--color-border-default);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-folder-tile__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-folder-tile__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--crewlet-folder-tile-name);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * THE FACTS WRAP, NEVER CUT. "Everyone" and "Nothing you can open yet" are
+ * both things a reader has to read, and four tiles across a laptop's page do
+ * not have room for them on one line: the count moves under who can see the
+ * folder rather than losing its end to an ellipsis. The two are told apart by
+ * the visibility glyph and the gap between them, not by a separator, so a
+ * line that breaks never opens on a stray dot.
+ */
+.crewlet-folder-tile__facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px var(--spacing-3);
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-folder-tile-facts);
+  line-height: 1.35;
+}
+
+.crewlet-folder-tile__visibility {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-folder-tile__contents {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * THE TILE'S OWN CONTROLS, at its trailing edge and outside the link: hidden
+ * until the tile is hovered or holds focus, so a gallery rests as names, and
+ * always there on a screen with no hover or while their menu is open.
+ */
+.crewlet-folder-tile__actions {
+  position: absolute;
+  top: var(--crewlet-folder-tile-actions-top);
+  right: var(--crewlet-folder-tile-actions-inset);
+  display: inline-flex;
+  gap: var(--spacing-1);
+  transform: translateY(var(--crewlet-folder-tile-actions-shift));
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-out);
+}
+
+.crewlet-folder-tile:hover .crewlet-folder-tile__actions,
+.crewlet-folder-tile:focus-within .crewlet-folder-tile__actions,
+.crewlet-folder-tile__actions:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .crewlet-folder-tile__actions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-folder-tile__actions {
+    transition: none;
+  }
+}
+
+
 /* Highlight-DXLV2R6L.css */
 /*
  * Words a search matched (Highlight.tsx).
@@ -18855,87 +19808,249 @@ a.crewlet-icon-btn {
   scrollbar-width: none !important;
 }
 
-:is(.crewlet-live-preview__live, .crewlet-live-preview__still) *::-webkit-scrollbar {
-  display: none;
+:is(.crewlet-live-preview__live, .crewlet-live-preview__still) *::-webkit-scrollbar {
+  display: none;
+}
+
+/* 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;
+  display: block;
+  overflow: hidden;
+  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 {
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.crewlet-preview-scale__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: hidden;
+  transform-origin: 0 0;
+}
+
+/* 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 {
+  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[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;
+  }
+}
+
+
+/* LockedLabel-VQEGEB7G.css */
+/*
+ * LockedLabel: a place's words with the key after them. The words keep their
+ * own ink and size; the key takes the quiet step, a step closer to the words
+ * than the words are to anything else.
+ */
+.crewlet-locked-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-locked-label__key {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+
+/* LogoSlot-T2UFOJXU.css */
+/*
+ * One of a brand's logos on the ground it is made for. The ground and the ink
+ * of its guide are the only values here that are not tokens: they arrive
+ * through `--crewlet-logo-slot-ground` (the brand's own `#rrggbb`, or a
+ * palette's sheet read from the tokens package) and `--crewlet-logo-slot-ink`
+ * (whichever palette's text reads better on that ground).
+ */
+.crewlet-logo-slot {
+  /* Every stage is one height, so three slots side by side line up whatever
+     their logos' shapes. */
+  --crewlet-logo-slot-height: calc(var(--size-row-lg) * 3);
+  --crewlet-logo-slot-padding: var(--spacing-5);
+  --crewlet-logo-slot-clear: var(--spacing-3);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-logo-slot__words {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-logo-slot__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-logo-slot__description {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-logo-slot__download {
+  display: inline-flex;
+  flex: none;
 }
 
-/* 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;
-  display: block;
+/*
+ * THE STAGE: the logo's own ground, at one height, inside the page's hairline
+ * so a ground that matches the page is still a stage. An empty one draws its
+ * edge dashed, a place waiting to be filled.
+ */
+.crewlet-logo-slot__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--crewlet-logo-slot-height);
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-padding);
   overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-  user-select: none;
+  border: 1px solid var(--color-border-hover);
+  border-radius: var(--radius-lg);
+  background: var(--crewlet-logo-slot-ground);
+  color: var(--crewlet-logo-slot-ink);
 }
 
-.crewlet-live-preview[data-frame] > .crewlet-live-preview__live {
-  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+.crewlet-logo-slot__stage.is-empty {
+  border-style: dashed;
+  border-color: var(--color-border-strong);
 }
 
-.crewlet-live-preview[data-frame][data-state='ready'] > .crewlet-live-preview__live {
-  opacity: 1;
+/*
+ * THE SPACE THE LOGO KEEPS: padding round it at the clear space, and with the
+ * guide on, a dashed line at that edge in the ground's ink, half strength so
+ * it reads as a guide and never as part of the logo.
+ */
+.crewlet-logo-slot__space {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: var(--crewlet-logo-slot-clear);
 }
 
-/* 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 {
+.crewlet-logo-slot__space.has-guide::after {
+  content: '';
   position: absolute;
   inset: 0;
-  display: block;
-  overflow: hidden;
+  border: 1px dashed var(--crewlet-logo-slot-ink);
+  border-radius: var(--radius-xs);
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.crewlet-preview-scale__layer {
-  position: absolute;
-  top: 0;
-  left: 0;
+.crewlet-logo-slot__image {
   display: block;
-  overflow: hidden;
-  transform-origin: 0 0;
+  max-width: 100%;
+  max-height: calc(var(--crewlet-logo-slot-height) - 2 * var(--crewlet-logo-slot-padding) - 2 * var(--crewlet-logo-slot-clear));
+  object-fit: contain;
 }
 
-/* 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 {
-  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;
+/* WHERE A LOGO WOULD GO, at the shape it would take: a wordmark's band or a
+   mark's square, with the image glyph in the ground's ink. */
+.crewlet-logo-slot__placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-row-lg) * 3);
+  height: var(--size-row-lg);
+  opacity: 0.7;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .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;
-  }
+.crewlet-logo-slot__stage--square .crewlet-logo-slot__placeholder {
+  width: var(--size-row-lg);
 }
 
+.crewlet-logo-slot__stage.is-uploading .crewlet-logo-slot__space {
+  opacity: 0.5;
+}
 
-/* LockedLabel-VQEGEB7G.css */
-/*
- * LockedLabel: a place's words with the key after them. The words keep their
- * own ink and size; the key takes the quiet step, a step closer to the words
- * than the words are to anything else.
- */
-.crewlet-locked-label {
-  display: inline-flex;
-  align-items: center;
+.crewlet-logo-slot__empty {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* A REFUSAL, in the danger ink with its glyph, so it never rests on the hue. */
+.crewlet-logo-slot__error {
+  display: flex;
+  align-items: flex-start;
   gap: var(--spacing-1);
-  min-width: 0;
+  margin: 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
 }
 
-.crewlet-locked-label__key {
+.crewlet-logo-slot__error > svg {
   flex: none;
+  margin-top: 1px;
+}
+
+.crewlet-logo-slot__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-logo-slot__hint {
   color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
 }
 
 
@@ -19586,7 +20701,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* Modal-TOEWHDCQ.css */
+/* Modal-3HMP7WAZ.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -19701,6 +20816,32 @@ a.crewlet-icon-btn {
   animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
 }
 
+/*
+ * THE PHONE SHEET (`phoneSheet`), strictly under the phone breakpoint as the
+ * package switches there everywhere else: the dialog takes the whole window,
+ * with no inset and no corners, so a long list in its body has the screen's
+ * height to scroll in between a head and a foot that stay put. It rises from
+ * the bottom edge as the bottom sheet does, and its foot stays clear of the
+ * home indicator. Above the breakpoint nothing here applies, and the dialog
+ * keeps its placement.
+ */
+@media (width < 640px) {
+  .crewlet-modal-overlay--dialog.crewlet-modal-overlay--phone-sheet {
+    align-items: stretch;
+    padding: 0;
+  }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border: none;
+    border-radius: 0;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    animation: crewlet-modal-lift var(--motion-duration-moderate) var(--motion-easing-emphasized);
+  }
+}
+
 /*
  * The sheet's veil fades over the same span the sheet itself travels, so the
  * two are one movement rather than a ground that lands and a panel that
@@ -20173,6 +21314,10 @@ a.crewlet-icon-btn {
   .crewlet-modal-overlay--bottom > .crewlet-modal--dialog {
     animation: none;
   }
+
+  .crewlet-modal-overlay--phone-sheet > .crewlet-modal--dialog {
+    animation: none;
+  }
 }
 
 
@@ -24977,6 +26122,70 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SelectionBar-XPWKUOSC.css */
+/*
+ * What is picked and what can be done to it: the count, the bulk actions and
+ * Clear, on the raised rung inside the strong hairline so it reads as a bar
+ * laid over the list rather than a row of it.
+ *
+ * ON TOP OF TOOLBAR, so the rules that change Toolbar's own layout carry
+ * Toolbar's class too: the bundle orders the two sheets by file name.
+ */
+.crewlet-toolbar.crewlet-selection-bar {
+  position: sticky;
+  top: var(--crewlet-selection-bar-top, var(--spacing-0));
+  z-index: var(--z-index-sticky);
+  flex-wrap: nowrap;
+  gap: var(--spacing-3);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-sm);
+}
+
+.crewlet-selection-bar__count {
+  flex: none;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-selection-bar__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-selection-bar__spacer {
+  flex: 1 1 auto;
+}
+
+/*
+ * DOCKED TO THE FOOT ON A PHONE, strictly under the phone breakpoint: over the
+ * list at the bottom edge, inside the safe area, where a thumb reaches it and
+ * the picks it acts on stay in view above it.
+ */
+@media (width < 640px) {
+  .crewlet-toolbar.crewlet-selection-bar {
+    position: fixed;
+    top: auto;
+    right: var(--spacing-3);
+    bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
+    left: var(--spacing-3);
+    z-index: var(--z-index-overlay);
+    gap: var(--spacing-2);
+    padding-inline-start: var(--spacing-3);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+
 /* SettingsTable-6DUFAFXG.css */
 /*
  * SettingsTable: a read-only table of settings, one row each, on one grid.
@@ -30999,7 +32208,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThemeGallery-X35Y25EX.css */
+/* ThemeGallery-UEFZRT6W.css */
 /*
  * The gallery of themes: each group's heading over a grid of cards.
  *
@@ -31104,6 +32313,27 @@ b.crewlet-switcher__match {
   white-space: nowrap;
 }
 
+/*
+ * THE TAG, DRAWN WHERE A THEME ASKS (`tagTone`), under the name: `quiet` on
+ * the tertiary step and a step smaller, cut to one line with the whole of it
+ * on hover, and `brand` as the accent's pill, so a reader picking a deck's
+ * theme finds their brand among the product's at a glance. A theme that sets
+ * no tone has its tag said with its name and nothing drawn.
+ */
+.crewlet-theme-gallery__tag {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-theme-gallery__tag--brand {
+  display: flex;
+  min-width: 0;
+}
+
 /*
  * FORCED COLORS keeps the border and drops the accent, so the chosen card
  * would look like every other; the system's own selected colour says it.
@@ -33905,6 +35135,105 @@ svg.crewlet-time-window__tick {
 }
 
 
+/* TypeSpecimen-WK6YNHL7.css */
+/*
+ * A face, shown: its role and name in the interface's own type, then "Aa" and
+ * a line set in the face itself (`--crewlet-type-specimen-family`, which
+ * always ends in the package's sans).
+ */
+.crewlet-type-specimen {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    'glyphs caption'
+    'sample sample';
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-4);
+  min-width: 0;
+  margin: 0;
+}
+
+.crewlet-type-specimen__caption {
+  grid-area: caption;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.crewlet-type-specimen__label {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.crewlet-type-specimen__family {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-type-specimen__detail {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-type-specimen__glyphs {
+  grid-area: glyphs;
+  color: var(--color-text-primary);
+  font-family: var(--crewlet-type-specimen-family);
+  font-size: var(--font-size-4xl);
+  line-height: 1;
+}
+
+.crewlet-type-specimen__sample {
+  grid-area: sample;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-family: var(--crewlet-type-specimen-family);
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-type-specimen--regular :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-type-specimen--medium :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-type-specimen--semibold :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-type-specimen--bold :is(.crewlet-type-specimen__glyphs, .crewlet-type-specimen__sample) {
+  font-weight: var(--font-weight-bold);
+}
+
+/* ---- sm: a select option's lead, the letters smaller and the line gone ---- */
+
+.crewlet-type-specimen--sm {
+  grid-template-areas: 'glyphs caption';
+  gap: var(--spacing-3);
+}
+
+.crewlet-type-specimen--sm .crewlet-type-specimen__glyphs {
+  font-size: var(--font-size-2xl);
+}
+
+.crewlet-type-specimen--sm .crewlet-type-specimen__sample {
+  display: none;
+}
+
+
 /* VersionCompare-UUZOPTQO.css */
 /* VersionCompare: a head naming the two versions with the lens switch at its
    end, then the changes or the two versions. */