@crewlethq/ui 0.82.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-F7RID4P4.css */
+/* AppShell-NX5HCD4O.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -973,31 +993,46 @@
 .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. The aside's cap
-     below subtracts it, so it is one name for both. */
+     nothing where there is no rail or the rail is a drawer. */
   --crewlet-app-shell-beside: var(--crewlet-app-shell-rail);
-  /* THE ASIDE'S TRACK, while it is a column: the panel's width and the inset
-     it is held off the window's edge by, capped so the sheet keeps the
-     host's floor (`--crewlet-app-shell-aside-reserve`, the page's sheet with
-     its own inset and hairlines). The host publishes both widths on this
-     element; with no reserve the panel takes the width it was given. */
-  --crewlet-app-shell-aside-track: calc(
-    min(
-      var(--crewlet-app-shell-aside),
-      max(
-        0px,
-        100% - var(--crewlet-app-shell-beside) - var(--crewlet-app-shell-aside-reserve, 0px) - var(--size-shell-inset)
-      )
-    ) +
-      var(--size-shell-inset)
+  /*
+   * THE ASIDE'S TRACK, while it is a column: the inset it is held off the
+   * window's edge by at least, and the panel's width and that inset at most.
+   * THE CAP IS THE GRID'S. The page's sheet takes the host's floor as its
+   * own track's minimum (`--crewlet-app-shell-aside-reserve`, the page's sheet
+   * with its own inset and hairlines), and the grid hands the aside what is
+   * left once the rail and that floor have theirs, up to its width. The rail's
+   * track is the rail's live width, so while the rail eases between its
+   * shapes the cap eases with it: a cap computed from the rail's VARIABLE
+   * named the shape drawn, and jumped at both ends of a fold. With no reserve
+   * the panel takes the width it was given, as far as the window holds it.
+   */
+  --crewlet-app-shell-aside-track: minmax(
+    var(--size-shell-inset),
+    calc(var(--crewlet-app-shell-aside) + var(--size-shell-inset))
+  );
+  /* The page's floor beside an aside column, never more than the window
+     leaves it: on a window too narrow for the floor, the page gives way rather
+     than the shell growing past the window's edge. */
+  --crewlet-app-shell-sheet-floor: min(
+    var(--crewlet-app-shell-aside-reserve, 0px),
+    max(0px, 100% - var(--crewlet-app-shell-beside) - var(--size-shell-inset))
   );
   /* Where the drawer's veil sits while it is open. The shell replaces it with
      the surface's own place in the layer band; this default only has to clear
      the page chrome for the moment before that lands. */
   --crewlet-app-shell-drawer-z: var(--z-index-overlay);
   display: grid;
-  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr);
+  /* The rail's track is the rail's own width (`auto`), and the rail takes
+     `--crewlet-app-shell-rail` itself, so the track follows it while it eases
+     between its two shapes (see the rail's motion, below). */
+  grid-template-columns: auto minmax(0, 1fr);
   /* One row, the viewport's height less nothing: the sheet's own margin is
      what holds it off the frame's edges, and a row sized by its content would
      let a tall screen push the sheet's bottom edge off the window. */
@@ -1036,11 +1071,11 @@
    keeps its column and is only narrower, so nothing under the bar moves but
    its end edge. */
 .crewlet-app-shell[data-aside='column'] {
-  grid-template-columns: var(--crewlet-app-shell-rail) minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  grid-template-columns: auto minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
 }
 
 .crewlet-app-shell--no-rail[data-aside='column'] {
-  grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+  grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
 }
 
 /* The skip link, drawn only while it holds focus, over everything. */
@@ -1086,14 +1121,25 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   min-width: 0;
+  /* THE MOVING EDGE CUTS WHAT IT PASSES. While the rail eases between its
+     shapes its content keeps the width of the shape drawn (below), and the
+     edge clips it rather than squeezing it. Across only: a ring or a badge
+     at a row's top or bottom is never cut. */
+  overflow-x: clip;
   background: var(--color-surface-frame);
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
+/* THE CONTENT IS LAID OUT AT ITS SHAPE'S WIDTH, never at a width between the
+   two, so no word in the rail rewraps while it moves and nothing drifts with
+   the edge: the column stands still and the edge travels over it. */
 .crewlet-app-shell__rail-inner {
   display: flex;
   flex-direction: column;
+  width: var(--crewlet-app-shell-rail);
   min-height: 0;
   height: 100%;
 }
@@ -1554,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);
 }
@@ -1644,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;
 }
 
@@ -1837,7 +1914,7 @@
 }
 
 /*
- * THE COMPACT RAIL: the same track, narrowed to the compact column. One
+ * THE COMPACT RAIL: the same rail, narrowed to the compact column. One
  * variable is the rail's width for the grid, the aside's cap and the drawer
  * alike, so folding the rail is this one declaration. The shell writes the
  * attribute only where the layout is wide: the drawer under the step is
@@ -1848,21 +1925,33 @@
 }
 
 /*
- * THE FOLD CONTROL stands over the compact column's centre, in the row under
- * the head, in both shapes, so it never moves under the pointer that pressed
- * it. 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.
+ * 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, clear of the mark beside it.
  */
 .crewlet-app-shell__fold {
   position: absolute;
-  top: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
-  left: calc((var(--size-shell-rail-compact) - var(--size-control-sm)) / 2);
+  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;
 }
 
 .crewlet-app-shell__fold > .crewlet-icon-btn {
+  width: var(--size-target-min);
+  height: var(--size-target-min);
   color: var(--color-text-tertiary);
 }
 
@@ -1870,14 +1959,25 @@
   color: var(--color-text-secondary);
 }
 
+.crewlet-app-shell__fold > .crewlet-icon-btn:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 /*
- * 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,
@@ -1886,30 +1986,16 @@
 }
 
 /*
- * FULL, THE FIELD STARTS AFTER THE FOLD CONTROL, a step off it, on the row
- * the control stands in. The field holds its place at the top of the rail's
- * middle while the rows scroll under it, on the frame's own ground, so the
- * control beside it is always beside it.
+ * COMPACT, THE STATUS HAS A ROW OF ITS OWN under the mark, a small control
+ * step tall, its dot and its count centred in the column: the first thing
+ * under the head, before the places, where the fold control stood before it
+ * moved to the corner.
  */
-/* The middle is a stacking context of its own, so the field pinned in it
-   stands over the rows scrolling under it and the whole middle stands under
-   the fold control, which is painted a step above the rail. */
-.crewlet-app-shell--foldable .crewlet-app-shell__rail-body {
-  isolation: isolate;
-}
-
-.crewlet-app-shell--foldable[data-rail='full'] .crewlet-app-shell__rail-search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  padding-left: calc((var(--size-shell-rail-compact) + var(--size-control-sm)) / 2 + var(--spacing-2));
-  background: var(--color-surface-frame);
-}
-
-/* COMPACT, THE FOLD CONTROL HAS A ROW OF ITS OWN under the mark, which the
-   head leaves room for, and the column of tiles starts under it. */
-.crewlet-app-shell--foldable[data-rail='compact'] .crewlet-app-shell__rail-head {
-  margin-bottom: var(--size-control-sm);
+.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-inner > .crewlet-app-shell__rail-status {
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--size-control-sm);
+  margin: 0;
 }
 
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-body {
@@ -1919,7 +2005,7 @@
 
 /*
  * The compact foot: what the full foot holds, centred in the column, a step
- * apart: the status's dot, a Settings tile, the reader's face.
+ * apart: a Settings tile, the reader's face.
  */
 .crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot {
   align-items: center;
@@ -1931,15 +2017,93 @@
   align-self: stretch;
 }
 
-.crewlet-app-shell[data-rail='compact'] .crewlet-app-shell__rail-foot > .crewlet-app-shell__rail-status {
-  justify-content: center;
-  min-width: 0;
-  margin: 0;
+/*
+ * THE COMPACT FACE IS CENTRED ON THE TILES' LINE. It gives up the full row's
+ * badge column and the step after it (above): kept, the step stood the face
+ * 4px left of the column's centre, in a box 8px wider than the face, so the
+ * face sat off the line every tile above it is centred on.
+ */
+.crewlet-app-shell__rail-foot .crewlet-account-row--compact .crewlet-account-row__avatar {
+  width: auto;
+  margin-inline-end: 0;
+}
+
+/*
+ * THE RAIL'S MOTION (railMotion.ts). The rail's width eases between the two
+ * shapes on the slow step with the emphasized curve, the motion a
+ * `DockColumn` opens and closes by, so a column of the frame and a column of
+ * a screen move as one. What the rail holds keeps the width of the shape
+ * drawn, so the moving edge clips the words rather than squeezing them.
+ *
+ * FOLDING, the full rail stays drawn, inert, while the edge narrows to the
+ * compact column, and its words fade out on the base step; the compact column
+ * is drawn when the rail's motion has ended, and fades in on the fast step.
+ * UNFOLDING, the full rail is drawn at once and fades in while the edge
+ * uncovers it. The brand's mark and the fold control are in the same place in
+ * both shapes, so neither fades.
+ *
+ * THE WORDS LEAVE BY A TRANSITION and arrive by keyframes. A fold takes their
+ * opacity to nothing; a fold pressed again mid way (`reverse`) declares
+ * nothing of its own, so the same transition takes the opacity back from
+ * wherever it had reached. Faded out by keyframes instead, a reversal could
+ * only start an entrance from nothing, and the words blinked out and back.
+ * The transition is declared only while the rail moves, so nothing else that
+ * sets these parts' opacity is eased.
+ */
+.crewlet-app-shell[data-rail-motion='fold'] > .crewlet-app-shell__rail {
+  width: var(--size-shell-rail-compact);
+}
+
+/* Two names for one entrance, so an unfold pressed while the compact column
+   is still arriving starts the full rail's entrance afresh. */
+@keyframes crewlet-app-shell-rail-unfold {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes crewlet-app-shell-rail-settle {
+  from {
+    opacity: 0;
+  }
+}
+
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='fold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  opacity: 0;
+}
+
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+.crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context {
+  animation: crewlet-app-shell-rail-unfold var(--motion-duration-slow) var(--motion-easing-out);
+}
+
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+.crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+  animation: crewlet-app-shell-rail-settle var(--motion-duration-fast) var(--motion-easing-out);
 }
 
 @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);
   }
 
@@ -1947,7 +2111,7 @@
      step is still a column; the rail is a drawer here and takes no track. */
   .crewlet-app-shell[data-aside='column'],
   .crewlet-app-shell--no-rail[data-aside='column'] {
-    grid-template-columns: minmax(0, 1fr) var(--crewlet-app-shell-aside-track);
+    grid-template-columns: minmax(var(--crewlet-app-shell-sheet-floor), 1fr) var(--crewlet-app-shell-aside-track);
   }
 
   .crewlet-app-shell--no-rail {
@@ -2012,22 +2176,18 @@
     transition: transform var(--motion-duration-slow) var(--motion-easing-emphasized);
   }
 
-  .crewlet-app-shell__toggle {
-    display: inline-flex;
+  /* The drawer never changes shape, and on a window narrower than the rail
+     it is the window's width: its content fills it rather than being cut. */
+  .crewlet-app-shell__rail-inner {
+    width: auto;
   }
 
-  /* 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__toggle {
+    display: inline-flex;
   }
 
   .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);
   }
 }
 
@@ -2046,6 +2206,27 @@
   .crewlet-app-shell__aside[data-shape='sheet'] {
     animation: none;
   }
+
+  /* Under reduced motion the shell draws the new shape at once
+     (`usePresence`), so no phase starts; these hold even if one did. */
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion] .crewlet-app-shell__rail-head .crewlet-brand__context {
+    transition: none;
+  }
+
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-status,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__name,
+  .crewlet-app-shell[data-rail-motion='unfold'] .crewlet-app-shell__rail-head .crewlet-brand__context,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-body,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-foot,
+  .crewlet-app-shell[data-rail-motion='folded'] .crewlet-app-shell__rail-status {
+    animation: none;
+  }
 }
 
 /* ── the account row ───────────────────────────────────────────────────── */
@@ -4344,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
@@ -4356,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 */
@@ -8557,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.
@@ -8639,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);
@@ -18911,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).
@@ -18931,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;
@@ -18940,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 {
@@ -19563,6 +19752,70 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DockColumn-SMJCXHS4.css */
+/*
+ * A column docked beside the content (DockColumn.tsx).
+ *
+ * THE COLUMN EASES ITS WIDTH between none and its panel's, on the slow step
+ * with the emphasized curve: the motion the application rail folds by,
+ * so a column of the frame and a column of a screen open and close as one
+ * movement. The host gives it an `auto` track, so its width is the track.
+ * Clipped rather than hidden, so it is never a scroll container a focus or a
+ * scrollIntoView could scroll.
+ *
+ * THE PANEL KEEPS ITS WIDTH and is held to the column's edge that faces the
+ * content: before the content (`start`) it is held to the column's end, so
+ * the moving edge uncovers it from the start edge, and after the content
+ * (`end`) the other way round.
+ *
+ * Tokens only. The width is the component's own variable, set from the
+ * `width` prop, so the column and the panel read one value.
+ */
+
+.crewlet-dock-column {
+  display: flex;
+  justify-content: flex-end;
+  width: 0;
+  min-width: 0;
+  min-height: 0;
+  overflow: clip;
+  transition: width var(--motion-duration-slow) var(--motion-easing-emphasized);
+}
+
+.crewlet-dock-column[data-side='end'] {
+  justify-content: flex-start;
+}
+
+.crewlet-dock-column[data-open] {
+  width: var(--crewlet-dock-column-width);
+}
+
+.crewlet-dock-column__panel {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--crewlet-dock-column-width);
+  min-height: 0;
+  background: var(--crewlet-dock-column-ground, transparent);
+}
+
+/* The hairline on the panel's edge that faces the content. */
+.crewlet-dock-column--divider[data-side='start'] > .crewlet-dock-column__panel {
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+.crewlet-dock-column--divider[data-side='end'] > .crewlet-dock-column__panel {
+  border-inline-start: 1px solid var(--color-border-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-dock-column {
+    transition: none;
+  }
+}
+
+
 /* Document-M6JYGLWV.css */
 /*
  * Rendered markdown, set as a document (Document.tsx).
@@ -22111,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.
@@ -22140,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;
@@ -22147,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);
@@ -22221,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);
 }
@@ -22463,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);
 }
 
@@ -22499,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;
@@ -24725,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
@@ -24738,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
@@ -24745,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;
@@ -24755,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;
@@ -24796,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;
@@ -30925,7 +31277,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* ReadingPane-VLYOWMCM.css */
+/* ReadingPane-VFTRDPC5.css */
 /*
  * One item read in full, in one column.
  *
@@ -30960,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 {
@@ -35989,7 +36360,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SidebarNav-E7PZGGA6.css */
+/* SidebarNav-IKBKGXW4.css */
 /*
  * The rail's navigation.
  *
@@ -36407,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. */