@crewlethq/ui 0.83.0 → 0.84.0

package/dist/styles.css

@@ -109,13 +109,15 @@
 }
 
 
-/* ActionCard-47WSZ2O5.css */
+/* ActionCard-YZKL3CKR.css */
 /*
- * ActionCard: a first step offered as a picture, on an artifact kind's
- * colour ground. The ground is the kind's own Ground steps (ArtifactKinds.css)
- * laid over the card rung, which the palette suite holds to 4.5:1 for the
- * primary text in every palette and both modes, with the kind's glow behind
- * the drawing.
+ * ActionCard: a first step offered as a picture, on a CALM TINT of an
+ * artifact kind's hue. The ground is the kind's own Ground steps
+ * (ArtifactKinds.css): the card rung tinted by a share of the hue's chroma,
+ * never a slab of it, which the palette suite holds to 4.5:1 for the primary
+ * text in every palette and both modes and to a chroma ceiling. The edge is
+ * the kind's hue stepped toward the ink until it clears 3:1, a step further
+ * under the pointer, and a soft halo of the hue stands behind the drawing.
  */
 
 /*
@@ -143,6 +145,7 @@
 
 .crewlet-action-card {
   --crewlet-action-card-ground: var(--crewlet-kind-ground);
+  --crewlet-action-card-edge: var(--crewlet-kind-edge);
   position: relative;
   display: flex;
   flex: none;
@@ -153,30 +156,41 @@
   box-sizing: border-box;
   overflow: hidden;
   padding: var(--spacing-3) var(--spacing-3) 0;
-  /* The kind's hue itself is the edge: 3:1 or more on the sheet in every
-     palette and mode, where the kind's Line step measured 2.5:1. */
-  border: 1px solid var(--crewlet-kind-hue);
-  border-radius: var(--radius-lg);
+  /* THE KIND'S OWN EDGE: its hue stepped toward the ink until it clears 3:1
+     on the sheet and on the card's tint (`--color-artifact-kind-<kind>-edge`,
+     derived by the tokens build and held by its suite). The Line step, the
+     hue at 0.38, did not clear it, and a neutral grey outline read as a card
+     from another family. */
+  border: 1px solid var(--crewlet-action-card-edge);
+  /* The edge scale: the extra-large corner a tall card of its own takes, and
+     the smallest shadow, so the card sits on the page rather than in it. */
+  border-radius: var(--radius-xl);
   background-color: var(--color-surface-subtle);
   background-image:
-    radial-gradient(110% 64% at 50% 100%, var(--crewlet-kind-glow) 0%, transparent 72%),
+    radial-gradient(90% 56% at 50% 100%, var(--crewlet-kind-glow) 0%, transparent 72%),
     linear-gradient(180deg, var(--crewlet-action-card-ground) 0%, var(--crewlet-kind-ground-end) 100%);
+  box-shadow: var(--shadow-xs);
   color: var(--color-text-primary);
   font: inherit;
   text-align: left;
   cursor: pointer;
   scroll-snap-align: start;
-  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  transition:
+    box-shadow var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/* A QUIET HOVER: the ground deepens a step and a small shadow lifts the
-   card off the page. Nothing moves. */
+/* A QUIET HOVER: the tint deepens a step, the edge takes a stronger step of
+   the hue, and a small shadow lifts the card off the page. Nothing moves, so
+   a row of cards stays still under a pointer passing over it. */
 .crewlet-action-card:hover {
   --crewlet-action-card-ground: var(--crewlet-kind-ground-strong);
+  --crewlet-action-card-edge: var(--crewlet-kind-edge-strong);
   box-shadow: var(--shadow-sm);
 }
 
-/* The card draws its own edge, so the ring is drawn over it. */
+/* The card draws its own edge, so the ring is drawn over it, on the same
+   corner. */
 .crewlet-action-card:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
@@ -192,23 +206,29 @@
   text-wrap: balance;
 }
 
-/* The drawing stands on the card's foot, still. */
+/*
+ * THE DRAWING STANDS ON THE CARD'S FOOT, still, the card's own width less its
+ * inset. Every kind's drawing is one canvas (160 by 120), so each takes the
+ * same box whatever its shape, a tall page and a wide slide alike, where a
+ * fixed width and a height cap drew a page half the size of a slide. It is
+ * set a step into the foot, so it stands on the edge rather than floating
+ * above it, on a soft shadow of the kind's Fill.
+ */
 .crewlet-action-card__art {
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  height: 100px;
-  margin: 0 calc(var(--spacing-3) * -1);
+  margin-bottom: calc(var(--spacing-2) * -1);
 }
 
 .crewlet-action-card__art .crewlet-kind-illustration {
-  width: 112px;
-  max-height: 96px;
-  margin-bottom: calc(var(--spacing-2) * -1);
-  filter: drop-shadow(0 6px 12px var(--crewlet-kind-line));
+  width: 100%;
+  height: auto;
+  filter: drop-shadow(0 4px 10px var(--crewlet-kind-fill));
 }
 
-/* FORCED COLORS drops the ground; the hue's border stays as the card's edge. */
+/* FORCED COLORS drops the ground and the hue; the edge is drawn in the
+   system's text colour, so the card keeps its outline. */
 @media (forced-colors: active) {
   .crewlet-action-card {
     border-color: CanvasText;
@@ -944,7 +964,7 @@
 }
 
 
-/* AppShell-U7D2MUUF.css */
+/* AppShell-NX5HCD4O.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -973,6 +993,11 @@
 .crewlet-app-shell {
   --crewlet-app-shell-rail: var(--size-shell-rail);
   --crewlet-app-shell-topbar: var(--size-shell-topbar);
+  /* THE SHEET'S SIDE INSET, ONE LENGTH: the bar's, the content column's, and
+     the inset a box that reaches past the column to the sheet's edge keeps
+     inside itself (a `ListDetail` on a fill screen), one step narrower on a
+     narrow window. */
+  --crewlet-app-shell-inset: var(--spacing-5);
   /* What stands on the frame to the sheet's left: the rail's column, or
      nothing where there is no rail or the rail is a drawer. */
   --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
@@ -1575,7 +1600,8 @@
   gap: var(--spacing-3);
   flex: none;
   height: var(--crewlet-app-shell-topbar);
-  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
+  padding: 0 calc(var(--crewlet-app-shell-inset) + var(--crewlet-app-shell-gutter, 0px)) 0
+    var(--crewlet-app-shell-inset);
   border-bottom: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
 }
@@ -1665,46 +1691,76 @@
   gap: var(--spacing-5);
   max-width: var(--size-content-max);
   margin: 0 auto;
-  padding: var(--spacing-5) var(--spacing-5);
+  padding: var(--crewlet-app-shell-inset);
   padding-bottom: var(--crewlet-app-shell-content-end);
   min-width: 0;
 }
 
-/* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left.
-
-   IT KEEPS THE GUTTER RESERVED, like every other screen. The top bar's end
-   inset counts the scroller's gutter (`--crewlet-app-shell-gutter`, measured
-   by the shell), so a fill screen that reserved none put the bar's controls
-   one gutter further out than on the screen beside it: with classic
-   scrollbars, Add seat moved 11px between an org chart and its roster, two
-   tabs of one page. A strip at the end edge of a full-screen canvas is the
-   smaller cost than a bar that moves under the pointer. */
+/*
+ * A screen that draws to the bottom of the window: the scroller stops
+ * scrolling and the content column takes the height that is left, and the
+ * whole width, since a screen that fills the window is a frame for panes
+ * rather than a page of prose (prose inside it keeps its own measure).
+ *
+ * THE SCROLLER RESERVES NO GUTTER; THE COLUMN PADS BY IT INSTEAD. Nothing
+ * scrolls here, so the strip a scrolling screen keeps for its scrollbar is
+ * only there to hold the content where the bar's controls expect it (the
+ * bar's end inset counts the gutter). A reserved strip did that, and also
+ * stood between the sheet's edge and every pane that scrolls on its own: a
+ * list's detail drew its scrollbar 31px inside the sheet, beside an empty
+ * strip, and nothing in the screen could paint over a reserved gutter. The
+ * same length as padding holds the content exactly where it stood, and a box
+ * standing in the column can reach past padding: the column publishes it as
+ * `--crewlet-app-shell-bleed-end`, and a `ListDetail` takes it back so its
+ * scrollbar is the sheet's last pixel. The scrollbar's width is read off the
+ * shell's gauge here (AppShell.tsx), so the bar keeps its place between a
+ * fill screen and a scrolling one.
+ */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
   --crewlet-app-shell-content-end: var(--spacing-5);
+  --crewlet-app-shell-bleed-end: calc(var(--crewlet-app-shell-inset) + var(--crewlet-app-shell-gutter, 0px));
 
   height: 100%;
+  max-width: none;
+  padding-right: var(--crewlet-app-shell-bleed-end);
 }
 
 /*
- * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
- * its pad, its measure and its gap, and the scroller reserves no gutter, since
- * nothing in it scrolls and a strip at its end would cut the screen's own
- * edge. The column is the containing block for a `LayerHost` the screen
- * keeps, so its layers fill the screen rather than the window.
+ * THE GAUGE: an empty scroller, never seen, that always draws its scrollbar,
+ * so the shell can read the scrollbar's width on a fill screen, where the
+ * screen's own scroller reserves none. It is a row of no height in the
+ * sheet's column, clipped, so it takes no room and moves nothing; the ruler
+ * inside it has a height of its own, because a scroller of no height draws
+ * no scrollbar in Firefox and measured 0 there.
  */
-.crewlet-app-shell--fill-flush .crewlet-app-shell__main {
-  scrollbar-gutter: auto;
+.crewlet-app-shell__gauge {
+  flex: none;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
 }
 
+.crewlet-app-shell__gauge-ruler {
+  height: var(--size-target-min);
+  overflow-y: scroll;
+}
+
+/*
+ * A FLUSH SCREEN draws its own frame to the sheet's edges: the column gives up
+ * its pad and its gap as well, so there is nothing for a box in it to reach
+ * past. The column is the containing block for a `LayerHost` the screen
+ * keeps, so its layers fill the screen rather than the window.
+ */
 .crewlet-app-shell--fill-flush .crewlet-app-shell__content {
+  --crewlet-app-shell-bleed-end: 0px;
+
   position: relative;
   gap: 0;
-  max-width: none;
   padding: 0;
 }
 
@@ -1869,22 +1925,26 @@
 }
 
 /*
- * THE FOLD CONTROL stands in the rail's top left corner, in both shapes, so
- * it never moves under the pointer that pressed it: a minus while the rail is
- * full and a plus while it is compact. The corner is the square the head
- * leaves empty up and to the left of the brand's mark, and the control is the
- * target floor (`--size-target-min`), so it ends short of the mark on the
- * compact column's centre at every density.
+ * THE FOLD CONTROL stands on the head's row, before the brand's mark, in both
+ * shapes, so it never moves under the pointer that pressed it: chevrons
+ * pointing left to fold the rail and right to unfold it.
+ *
+ * THE CONTROL AND THE MARK ARE ONE PAIR: the control at the target floor
+ * (`--size-target-min`, at every density), a step (`--spacing-1`), then the
+ * mark, which is a target's size too, the pair centred in the compact column
+ * so the 76px column holds both (12 + 24 + 4 + 24 + 12). The control is
+ * centred on the bar's line as the mark is: the inset, then half of what the
+ * bar leaves round it. The mark's inset below is the same arithmetic from the
+ * other side.
  *
  * Quiet until the rail is pointed at: the tertiary ink, which holds 3:1 on
  * the frame, then the secondary, and the ghost's own primary under the
- * pointer. Its ring is drawn inside its own box, because the corner it
- * stands in is the window's, and a ring outside it would be cut there.
+ * pointer. Its ring is drawn inside its own box, clear of the mark beside it.
  */
 .crewlet-app-shell__fold {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: calc(var(--size-shell-inset) + (var(--crewlet-app-shell-topbar) - var(--size-target-min)) / 2);
+  left: calc((var(--size-shell-rail-compact) - 2 * var(--size-target-min) - var(--spacing-1)) / 2);
   z-index: 1;
   display: inline-flex;
 }
@@ -1904,13 +1964,20 @@
 }
 
 /*
- * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes: centred over
- * the compact column, in the head. Full, the name follows it; compact, the
- * name is not drawn (the link keeps it as its name and title).
+ * THE MARK STANDS WHERE THE COMPACT RAIL'S DOES, in both shapes. With no fold
+ * control it is centred over the compact column; beside the fold control it
+ * is the second of the pair (above), a step after the control, which is half
+ * the column and half the step in. Full, the name follows it; compact, the
+ * name is not drawn (the link keeps it as its name and title), and the
+ * lockup's end inset is given up, so the mark is all the column holds.
  */
-.crewlet-app-shell--foldable .crewlet-app-shell__rail-head > .crewlet-brand,
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-head > .crewlet-brand {
   padding-left: calc((var(--size-shell-rail-compact) - var(--crewlet-brand-mark)) / 2);
+  padding-right: 0;
+}
+
+.crewlet-app-shell--foldable[data-rail] .crewlet-app-shell__rail-head > .crewlet-brand {
+  padding-left: calc((var(--size-shell-rail-compact) + var(--spacing-1)) / 2);
 }
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-brand__name,
@@ -2034,6 +2101,9 @@
 @media (width < 1024px) {
   .crewlet-app-shell {
     --crewlet-app-shell-beside: 0px;
+    /* 16px: the content's 12px stood every page's first line 4px left of
+       the bar's title and the controls over it. */
+    --crewlet-app-shell-inset: var(--spacing-4);
     grid-template-columns: minmax(0, 1fr);
   }
 
@@ -2116,18 +2186,8 @@
     display: inline-flex;
   }
 
-  /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
-     line 4px left of the title and the controls over it. The bar and the
-     content take it together. */
-  .crewlet-app-shell__topbar {
-    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
-  }
-
   .crewlet-app-shell__content {
     --crewlet-app-shell-content-end: var(--spacing-9);
-
-    padding: var(--spacing-4) var(--spacing-4);
-    padding-bottom: var(--crewlet-app-shell-content-end);
   }
 }
 
@@ -4465,7 +4525,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 }
 
 
-/* ArtifactKinds-3EH4KR3F.css */
+/* ArtifactKinds-27TE3KJL.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, the ink a
@@ -4477,13 +4537,13 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
  * its own, imported by each surface that tints, because the glyph's module
  * carries no stylesheet (a frame that draws one glyph takes nothing else).
  */
-.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); }
-.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); }
-.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-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); }
-.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-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); }
-.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-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); }
-.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-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); }
-.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); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); }
+.crewlet-kind--doc { --crewlet-kind-hue: var(--color-artifact-kind-doc); --crewlet-kind-fill: var(--color-artifact-kind-doc-fill); --crewlet-kind-line: var(--color-artifact-kind-doc-line); --crewlet-kind-ink: var(--color-artifact-kind-doc-ink); --crewlet-kind-ground: var(--color-artifact-kind-doc-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-doc-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-doc-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-doc-glow); --crewlet-kind-edge: var(--color-artifact-kind-doc-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-doc-edge-strong); }
+.crewlet-kind--slides { --crewlet-kind-hue: var(--color-artifact-kind-slides); --crewlet-kind-fill: var(--color-artifact-kind-slides-fill); --crewlet-kind-line: var(--color-artifact-kind-slides-line); --crewlet-kind-ink: var(--color-artifact-kind-slides-ink); --crewlet-kind-ground: var(--color-artifact-kind-slides-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-slides-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-slides-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-slides-glow); --crewlet-kind-edge: var(--color-artifact-kind-slides-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-slides-edge-strong); }
+.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-ground: var(--color-artifact-kind-design-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-design-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-design-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-design-glow); --crewlet-kind-edge: var(--color-artifact-kind-design-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-design-edge-strong); }
+.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-ground: var(--color-artifact-kind-dashboard-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-dashboard-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-dashboard-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-dashboard-glow); --crewlet-kind-edge: var(--color-artifact-kind-dashboard-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-dashboard-edge-strong); }
+.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-ground: var(--color-artifact-kind-html-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-html-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-html-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-html-glow); --crewlet-kind-edge: var(--color-artifact-kind-html-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-html-edge-strong); }
+.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-ground: var(--color-artifact-kind-brand-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-brand-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-brand-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-brand-glow); --crewlet-kind-edge: var(--color-artifact-kind-brand-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-brand-edge-strong); }
+.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); --crewlet-kind-ground: var(--color-artifact-kind-sheet-ground); --crewlet-kind-ground-strong: var(--color-artifact-kind-sheet-ground-strong); --crewlet-kind-ground-end: var(--color-artifact-kind-sheet-ground-end); --crewlet-kind-glow: var(--color-artifact-kind-sheet-glow); --crewlet-kind-edge: var(--color-artifact-kind-sheet-edge); --crewlet-kind-edge-strong: var(--color-artifact-kind-sheet-edge-strong); }
 
 
 /* ArtifactMakeRow-6UX2LTF7.css */
@@ -8678,7 +8738,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CatalogTile-6VF36JWA.css */
+/* CatalogTile-TMOSGSV3.css */
 /*
  * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
  * fact and one action.
@@ -8760,9 +8820,10 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   overflow-wrap: anywhere;
 }
 
-/* A state in words (a StatusDot's label) at a Tag's caption step, so a row
-   reads the same whichever one a tile carries. It inherited the page's size,
-   and on a 16px page "Connected" stood taller than the name before it. */
+/* THE STATE, the tone's dot and its word, at the caption step the fact
+   beside it takes, so a compact tile's line reads name, state, fact at one
+   height. It inherited the page's size, and on a 16px page "Connected" stood
+   taller than the name before it. */
 .crewlet-catalog-tile__status {
   display: inline-flex;
   font-size: var(--font-size-xs);
@@ -19032,7 +19093,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DirectoryList-XZOWYOA3.css */
+/* DirectoryList-IXQIMNFS.css */
 /*
  * DirectoryList: named groups of links, each line a mark, a label and a state,
  * and one foot that holds the bottom (DirectoryList.tsx).
@@ -19052,7 +19113,12 @@ svg.crewlet-datetime__chevron {
   font-family: var(--font-family-sans);
 }
 
-/* The groups take the room and scroll on their own, so the foot stays put. */
+/* The groups take the room and scroll on their own, so the foot stays put.
+
+   THEIR INSET IS INSIDE THE SCROLLER. The gutter is reserved whether or not
+   they scroll, and the lines end a step before it: a line's state pill stood
+   against the scrollbar, and moved by its width when the list grew long
+   enough to scroll. */
 .crewlet-directory__groups {
   display: flex;
   flex: 1 1 auto;
@@ -19061,7 +19127,9 @@ svg.crewlet-datetime__chevron {
      under it rather than a band between two runs of them. */
   gap: var(--spacing-3);
   min-height: 0;
+  padding-right: var(--spacing-2);
   overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .crewlet-directory__group {
@@ -22296,7 +22364,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* InboxList-OFGSX5IH.css */
+/* InboxList-X5Q5WWAI.css */
 /*
  * The inbox's column: groups of rows, each row a control with the task it is
  * about under it, and the quiet toggles at the end.
@@ -22325,6 +22393,9 @@ a.crewlet-icon-btn {
 
 /* The heading's own line box is the label's, so the label sits where it is drawn. */
 .crewlet-inbox-list__label {
+  /* The arrival's wash stands behind the label's words, inside it. */
+  position: relative;
+  isolation: isolate;
   margin: 0;
   padding: var(--spacing-3) var(--spacing-2) var(--spacing-1);
   font: inherit;
@@ -22332,6 +22403,32 @@ a.crewlet-icon-btn {
   line-height: var(--font-line-height-snug);
 }
 
+/*
+ * A ROW ARRIVED: a wash of the accent that fades back to the ground, over the
+ * row itself, or over a group's label and count where the row landed in a
+ * closed group. The row's keyframes name no last step, so the wash returns
+ * to whatever the row draws of its own (hover, selected).
+ */
+.crewlet-inbox-list__arrival {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: var(--radius-xs);
+  pointer-events: none;
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out) both;
+}
+
+.crewlet-inbox-row--arrived {
+  animation: crewlet-inbox-arrive calc(var(--motion-duration-moderate) * 8) var(--motion-easing-out);
+}
+
+@keyframes crewlet-inbox-arrive {
+  0%,
+  40% {
+    background: var(--color-brand-accent-soft-strong);
+  }
+}
+
 /* The count after a label, in the quiet ink and the label's own register. */
 .crewlet-inbox-list__count {
   margin-inline-start: var(--spacing-1);
@@ -22406,12 +22503,38 @@ a.crewlet-icon-btn {
  * a selected row takes no hover on top of it: both are a background on the
  * same element, and a composite of the two is a colour nothing has measured.
  */
+/* ONE TRACK, so a leaving row can close its height (below). */
 .crewlet-inbox-row {
+  display: grid;
+  grid-template-rows: 1fr;
   min-width: 0;
   border-radius: var(--radius-md);
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+.crewlet-inbox-row__body {
+  min-width: 0;
+  min-height: 0;
+}
+
+/*
+ * A ROW LEAVING closes its one track to nothing and fades, on the slow step
+ * with the emphasized curve, the motion a column opens and shuts by, so the
+ * rows under it slide up into its place. The shell's presence waits on the
+ * track's transition (`INBOX_ROW_LEAVE`), and the row is inert all the while.
+ */
+.crewlet-inbox-row--leaving {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-easing-emphasized),
+    opacity var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+.crewlet-inbox-row--leaving .crewlet-inbox-row__body {
+  overflow: hidden;
+}
+
 .crewlet-inbox-row:hover {
   background: var(--color-surface-hover);
 }
@@ -22648,7 +22771,7 @@ a.crewlet-icon-btn {
 }
 
 /* A row with no leading slot: the words start at the control's own pad, and so does the task. */
-.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) > .crewlet-inbox-row__aside {
+.crewlet-inbox-row:not(:has(.crewlet-inbox-row__leading)) .crewlet-inbox-row__aside {
   padding-inline-start: var(--spacing-2);
 }
 
@@ -22684,10 +22807,16 @@ a.crewlet-icon-btn {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .crewlet-inbox-row {
+  .crewlet-inbox-row,
+  .crewlet-inbox-row--leaving {
     transition: none;
   }
 
+  .crewlet-inbox-row--arrived,
+  .crewlet-inbox-list__arrival {
+    animation: none;
+  }
+
   .crewlet-inbox-list__toggle,
   .crewlet-inbox-list__chevron {
     transition: none;
@@ -24910,7 +25039,7 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
 }
 
 
-/* ListDetail-N3L7PB46.css */
+/* ListDetail-JGESKTR7.css */
 /*
  * ListDetail: a list beside the detail of what is chosen in it, each scrolling
  * on its own in the height it is given, one pane where it is narrow
@@ -24923,6 +25052,17 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
  * drew the detail 130px wide beside a 17rem list. The phone rule below is the
  * one decision that stays the window's: on a phone the page scrolls as a
  * whole rather than each pane on its own.
+ *
+ * ON A SCREEN THAT FILLS THE WINDOW, THE PANE THAT SCROLLS IS ITS OUTERMOST
+ * BOX, and its inset is padding inside it. Standing directly in the fill
+ * column, the ListDetail reaches past the column's end pad to the sheet's
+ * edge (below), so the scrollbar is the sheet's last pixel; the detail then
+ * reserves its scrollbar's gutter whether or not it scrolls, and keeps the
+ * screen's side inset between its content and that gutter, so a trailing
+ * control (a header's Disconnect, a tile's Open) never touches the scrollbar,
+ * does not move when the detail grows long enough to scroll, and ends under
+ * the bar's last control. Anywhere else (a scrolling or a flush screen, or
+ * outside a shell) it is as wide as its box, with nothing reserved.
  */
 
 /* THE HAIRLINE STANDS MIDWAY between the two panes: the list's inset before it
@@ -24930,6 +25070,9 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
    the list than to the detail it divides it from; the two still add to 64. */
 .crewlet-list-detail {
   --crewlet-list-detail-gutter: var(--spacing-7);
+  /* The inset at a scrolling pane's end: the screen's own side inset in a
+     shell, so the page's two edges match. */
+  --crewlet-list-detail-end: var(--crewlet-app-shell-inset, var(--spacing-5));
 
   container: crewlet-list-detail / inline-size;
   display: flex;
@@ -24940,6 +25083,21 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   min-height: 0;
 }
 
+/* STANDING IN A FILL SCREEN'S COLUMN, IT TAKES THE COLUMN'S END PAD BACK: the
+   inset and the scrollbar's width, which the shell publishes for exactly
+   this (`--crewlet-app-shell-bleed-end`, AppShell.css). The detail keeps the
+   same inset inside itself, and reserves its gutter, there and only there. */
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content) > .crewlet-list-detail {
+  margin-right: calc(var(--crewlet-app-shell-bleed-end, 0px) * -1);
+}
+
+:where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+  > .crewlet-list-detail
+  .crewlet-list-detail__detail {
+  padding-right: var(--crewlet-list-detail-end);
+  scrollbar-gutter: stable;
+}
+
 .crewlet-list-detail__panes {
   display: grid;
   flex: 1 1 auto;
@@ -24981,6 +25139,15 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
     overflow-y: auto;
   }
 
+  /* The list is the pane that scrolls now, and takes the detail's end where
+     the ListDetail reaches the sheet. */
+  :where(.crewlet-app-shell--fill:not(.crewlet-app-shell--fill-flush) .crewlet-app-shell__content)
+    > .crewlet-list-detail
+    .crewlet-list-detail__list {
+    padding-right: var(--crewlet-list-detail-end);
+    scrollbar-gutter: stable;
+  }
+
   .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
   .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
     display: none;
@@ -31110,7 +31277,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* ReadingPane-VLYOWMCM.css */
+/* ReadingPane-VFTRDPC5.css */
 /*
  * One item read in full, in one column.
  *
@@ -31145,6 +31312,25 @@ button.crewlet-presence-stack__member:focus-visible {
   }
 }
 
+/* A NEW ITEM PLAYS IN (`contentKey`): a short fade and rise, so the reader
+   sees the pane move on rather than its words change under them. */
+.crewlet-reading-pane__column--entering {
+  animation: crewlet-reading-pane-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@keyframes crewlet-reading-pane-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-reading-pane__column--entering {
+    animation: none;
+  }
+}
+
 /* ---- The byline -------------------------------------------------------- */
 
 .crewlet-reading-pane__byline {
@@ -36174,7 +36360,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-E7PZGGA6.css */
+/* SidebarNav-IKBKGXW4.css */
 /*
  * The rail's navigation.
  *
@@ -36592,6 +36778,26 @@ svg.crewlet-select__chevron {
   line-height: 1;
 }
 
+/*
+ * A QUIET BADGE keeps the pill, its size and its place at the row's end, and
+ * takes the quiet count's grey: a neutral wash (`--color-fill-soft`, the
+ * ground of a quiet label at rest) carrying the secondary ink, for work that
+ * is the reader's own and waiting, but not calling. The secondary ink rather
+ * than the count's tertiary, because on a wash over a hovered row the
+ * tertiary measured 4.41:1 in light; it is the ink the compact rail's quiet
+ * figure takes, so the two shapes draw the same grey. On the reader's own row
+ * its ink lifts to the row's, as the count's does; the suite measures the
+ * pair on every ground a row can have.
+ */
+.crewlet-nav-item__badge--quiet {
+  background: var(--color-fill-soft);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-nav-item__row[aria-current='page'] .crewlet-nav-item__badge--quiet {
+  color: inherit;
+}
+
 /* Beside a count the badge is the second figure, not a second push to the
    end: two auto margins would split the room between them and float the
    count into the middle of the row. */