@crewlethq/ui 0.13.0 → 0.15.0

package/dist/styles.css

@@ -535,7 +535,7 @@
 }
 
 
-/* AppShell-CEVLW4QG.css */
+/* AppShell-6QUD7NWM.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -753,7 +753,44 @@
     color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-.crewlet-app-shell__rail-row--action:hover {
+/*
+ * A CONTROL IN THE FOOT IS A ROW OF THE RAIL'S OWN GRAMMAR: the nav row's 30px
+ * step, its glyph-to-word gap, its word size and weight, and its secondary ink
+ * lifting to the primary under the pointer, as Settings above it is drawn. So
+ * the engine's row under Settings reads as one more row of the rail rather
+ * than as a caption, its words start on the line the nav's words start on, and
+ * it keeps one height in every state it says: one line of the compact step.
+ * A status line the rail only states keeps the quieter caption above, and the
+ * status block keeps its card.
+ *
+ * Its mark takes a nav glyph's width, `sm` (14px), whatever the mark is, so a
+ * 7px status dot is centred where the glyph above it is centred and the words
+ * beside it start where "Settings" starts.
+ */
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block),
+.crewlet-app-shell__rail-foot > .crewlet-btn {
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-height: var(--size-nav-row);
+  padding-block: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-snug);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-app-shell__rail-row--action:not(.crewlet-app-shell__rail-row--block) > .crewlet-app-shell__rail-row-icon {
+  min-width: 14px;
+}
+
+/*
+ * OPEN IS POINTED AT. The row a panel is open from keeps the hover's lift for
+ * as long as the panel is open, drawn from `aria-expanded` so the picture and
+ * what a screen reader is told cannot come apart, as the switcher's trigger
+ * draws it.
+ */
+.crewlet-app-shell__rail-row--action:hover,
+.crewlet-app-shell__rail-row--action[aria-expanded='true'] {
   background: var(--color-surface-hover);
   color: var(--color-text-primary);
 }
@@ -831,6 +868,42 @@
   flex: none;
 }
 
+/*
+ * THE COUNT: how many of something the row reports, after its words, drawn as
+ * a count in the nav is: the caption step, tabular figures so a count that
+ * ticks up does not move the words beside it, and a mark half a step off the
+ * figure. It is the tertiary step, as the nav's is, unless what it counts is
+ * wrong: a warning count is the warning ink, figure and mark together, which
+ * @crewlethq/tokens holds to 4.5:1 on the rail and under the hover overlay
+ * (RAIL_PAINTS), so on the row a panel is open from too.
+ */
+.crewlet-app-shell__rail-row-count {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: calc(var(--spacing-1) + 1px);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-app-shell__rail-row-count-mark {
+  display: inline-flex;
+}
+
+.crewlet-app-shell__rail-row-count--warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+/* The chevron that says the row opens a panel, in the quiet step: a mark, not
+   a word, and it stays quiet while the row lifts, as the panel's own name is
+   what a reader is told. */
+.crewlet-app-shell__rail-row-opens {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
 /*
  * THE STATUS BLOCK: a row given a `detail` is the approved design's engine
  * status, its words over a second line, on the card rung inside the plain
@@ -3297,7 +3370,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-JUERFLAR.css */
+/* Charts-JYW4X5ZL.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -3705,6 +3778,16 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   min-width: 0;
 }
 
+/*
+ * A FILL CHART GROWS INTO THE HEIGHT IT IS GIVEN (`height="fill"`). The figure
+ * flexes, so in a card a taller neighbour stretches it takes the spare height,
+ * and its rows (a style property) spend all of it on the plot's row. Nowhere to
+ * grow, it is as tall as its content, the plot at its least.
+ */
+.crewlet-stacked-columns--fill {
+  flex: 1 1 auto;
+}
+
 /*
  * EACH WORD IS A BOX OF NO HEIGHT, spread from the top of the plot to its
  * baseline, with the word centred on it: so every word stands exactly on the
@@ -3819,12 +3902,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  * legend at its END, top right, where the design's Spend card draws it; the
  * legend is flushed to the end of that row and wraps from there. Below, the
  * legend starts under the axis, a step clear of the dates.
+ *
+ * ON A CARD TOO NARROW FOR BOTH, THE LEGEND TAKES A ROW OF ITS OWN, under the
+ * heading and still flushed to the end. Held on one line, the two shrank
+ * together and the legend stood beside the title as a column of one series a
+ * line. The rows stand a step apart, closer than the head stands to the plot,
+ * so the legend still reads as the head's.
  */
 .crewlet-stacked-columns__head {
   grid-column: 1 / -1;
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
-  gap: var(--spacing-4);
+  gap: var(--spacing-2) var(--spacing-4);
   margin-bottom: var(--spacing-3);
   min-width: 0;
 }
@@ -7857,11 +7947,12 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DateTimePicker-4AZBTODT.css */
+/* DateTimePicker-NJ6XH2TE.css */
 /*
  * DateTimePicker: a Select-shaped trigger over a calendar dialog.
  *
- * The trigger borrows the Select's geometry so a date box and a picker line
+ * The trigger borrows the Select's geometry and its button boundary
+ * (--color-border-strong; see Select.css) so a date box and a picker line
  * up in the same toolbar; the panel holds the shared CalendarGrid, so the
  * month looks and behaves the same here as in every other picker.
  */
@@ -7877,7 +7968,7 @@ body.crewlet-data-table-resizing {
      height. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -7894,7 +7985,7 @@ body.crewlet-data-table-resizing {
 }
 
 .crewlet-datetime:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -8064,7 +8155,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-YYY3V3O6.css */
+/* DescriptionList-IXMRCSMK.css */
 /*
  * Metadata pairs on one grid.
  *
@@ -8125,6 +8216,30 @@ svg.crewlet-datetime__chevron {
   }
 }
 
+/*
+ * FIT: the term column is as wide as its longest term, and the pairs stay side
+ * by side at every width. It is for a panel of its own width, such as a
+ * popover, where the window's width says nothing about the room the list has:
+ * the narrow rule above is a question about the window, and a 260px panel is
+ * 260px on a phone and on a desktop alike. Its terms are a word each, so the
+ * column they take is a word wide and the details keep the rest.
+ *
+ * Written AFTER the narrow rule, which it overrides at the same weight, so
+ * nothing here has to outrank a media query.
+ */
+.crewlet-description-list--fit {
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--spacing-2) var(--spacing-4);
+}
+
+.crewlet-description-list--fit.crewlet-description-list--dense {
+  gap: var(--spacing-1) var(--spacing-3);
+}
+
+.crewlet-description-list--fit .crewlet-description-list__detail {
+  margin-bottom: 0;
+}
+
 
 /* DiffList-3EX64AAE.css */
 /* DiffList: one path per row, with its mark, its word and its tint.
@@ -10678,7 +10793,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layer-NAFSGCFA.css */
+/* Layer-J222IFNX.css */
 /*
  * The portal target a LayerHost provides.
  *
@@ -10690,13 +10805,23 @@ svg.crewlet-datetime__chevron {
  * Its container establishes the positioning context. A host whose parent is
  * static covers the nearest positioned ancestor instead, which is the
  * viewport in the common case and is still a usable bound.
+ *
+ * IT TAKES NO PLACE IN THE STACKING ORDER OF ITS OWN. Every surface drawn in
+ * it carries its own step in the layer band, its depth in the stack, and that
+ * is what decides what paints on top. A z-index here made the host a stacking
+ * context at the bottom of the band, which held everything inside it under
+ * whatever the page stacked above that step: the shell's open drawer takes
+ * the band's own steps beside the host rather than inside it, so a panel
+ * opened from the drawer was drawn under the drawer it came from. A surface
+ * at the same step as the drawer's rail, which is the next one opened above
+ * it, paints over the rail because the host follows the shell in the
+ * document.
  */
 
 .crewlet-layer-host {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  z-index: var(--z-index-layer-base);
 }
 
 .crewlet-layer-host > * {
@@ -10704,7 +10829,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Layout-2ZCV3IGF.css */
+/* Layout-ZBEGLXAE.css */
 /*
  * Stack, Inline, Spacer and AutoGrid.
  *
@@ -10732,6 +10857,24 @@ svg.crewlet-datetime__chevron {
   flex-direction: row;
 }
 
+/*
+ * DRAWN AS A LIST, IT IS STILL A RUN OF ITEMS. A Stack or an Inline spends no
+ * pixel of its own, and a `ul` or an `ol` arrives with the browser's: a margin
+ * above and below, a 40px indent and a marker on every item, so a list of five
+ * names laid out as a Stack was pushed in and bulleted. They are taken back,
+ * and the element stays a list to a screen reader. A list that wants its
+ * markers is `List variant="bulleted"`.
+ *
+ * Inside :where(), so the rule weighs one class like every other here and a
+ * caller's own class still decides what it sets.
+ */
+:where(ul, ol).crewlet-stack,
+:where(ul, ol).crewlet-inline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
  * has room for and leaves the empty ones empty; `auto-fit`, which this was,
@@ -12004,7 +12147,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Modal-3YJ2GG2T.css */
+/* Modal-RQAYGG4L.css */
 /*
  * The modal surface: the veil, the frame, and the three bands inside it.
  *
@@ -12296,7 +12439,7 @@ svg.crewlet-datetime__chevron {
  * padding is only the least it keeps when a title wraps. It was the 16px step
  * while the bar was 64px, which a full control step filled exactly; at 52px
  * the same padding stood the head 12px past the bar behind it. At the 4px step
- * the head is the bar's height with the control step at every density, 36.48px
+ * the head is the bar's height with the control step at every density, 37.12px
  * at comfortable included, and with a subtitle under the title.
  *
  * It used to be the tighter band, 49px with a close control alone, and the
@@ -15083,7 +15226,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Select-XMZ44RWY.css */
+/* Select-2P7AWUE4.css */
 /*
  * Select: one chrome over two controls, and the product's only dropdown.
  *
@@ -15093,9 +15236,12 @@ svg.crewlet-datetime__chevron {
  * into the nearest layer host and drawn with the shared listbox register, so
  * a list of options looks the same wherever it is offered from.
  *
- * The boundary is --color-border-control, like every other control: the
- * hairline measured 1.27:1 in light, which is a box a reader has to know is
- * there already.
+ * THE BOUNDARY IS A BUTTON'S, --color-border-strong, the secondary button's
+ * and the date and time-window pickers'. A picker shows its value and its
+ * chevron, and those are what a reader knows it by. --color-border-control,
+ * at 3:1, is for the controls whose outline IS the control (a text box, a
+ * checkbox, a switch; see Input.css): on a picker it drew the one bright box
+ * in a row of buttons and switchers, brighter at rest than under the pointer.
  */
 
 .crewlet-select {
@@ -15113,7 +15259,7 @@ svg.crewlet-datetime__chevron {
   width: 100%;
   min-height: var(--size-control-md);
   background-color: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   /* The boundary is the only thing that moves. The ring is an outline, which
@@ -15134,7 +15280,7 @@ svg.crewlet-datetime__chevron {
 }
 
 .crewlet-select:hover {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -15283,7 +15429,7 @@ svg.crewlet-select__chevron {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-height: var(--crewlet-select-menu-max-height);
+  max-height: min(var(--crewlet-select-menu-max-height), 60vh);
   /*
    * THE PANEL IS THE PRODUCT'S SURFACE, on the panel hairline, at the panel
    * corner. A list offered from a field is another panel over the one the
@@ -15310,11 +15456,25 @@ svg.crewlet-select__chevron {
   position: absolute;
 }
 
+/*
+ * THE PANEL'S HEIGHT IS THE LIST'S. The shared listbox register caps a list
+ * at min(360px, 60vh) on its own, which inside this panel made
+ * `--crewlet-select-menu-max-height` a promise it could not keep past 360px:
+ * a taller panel drew the same short list and scrolled it. Here the list
+ * fills what the panel allows, and the panel keeps the register's cap on the
+ * window (see `.crewlet-select__menu`).
+ */
 .crewlet-select__list {
   flex: 1;
   min-height: 0;
 }
 
+/* Scoped to the panel for the weight, as the option rules below are: the
+   register's cap is one class, and the bundle orders equal weights by hash. */
+.crewlet-select__menu .crewlet-select__list {
+  max-height: none;
+}
+
 .crewlet-select__group {
   display: flex;
   flex-direction: column;
@@ -15376,6 +15536,15 @@ svg.crewlet-select__chevron {
   color: var(--color-brand-accent-ink);
 }
 
+/*
+ * AT THE ROW'S END in a list whose rows lead with a mark (see `tickAtEnd`),
+ * so the mark starts at the panel's edge. After a hint it follows the hint,
+ * which already takes the free space; without one it takes it itself.
+ */
+.crewlet-select__option-body + .crewlet-select__option-tick--end {
+  margin-left: auto;
+}
+
 .crewlet-select__option-body {
   display: flex;
   flex-direction: column;
@@ -19305,12 +19474,13 @@ b.crewlet-switcher__match {
 }
 
 
-/* TimeWindowPicker-GBF4JDFI.css */
+/* TimeWindowPicker-BZ5HHATU.css */
 /*
  * TimeWindowPicker: one trigger over one panel.
  *
- * The trigger takes the same geometry as a Select and a DateTimePicker, so the
- * three line up in a filter bar. The panel is a RAIL of named windows beside
+ * The trigger takes the same geometry and button boundary as a Select and a
+ * DateTimePicker (--color-border-strong; see Select.css), so the three line
+ * up in a filter bar. The panel is a RAIL of named windows beside
  * the calendars, rather than two tabs with one of them hidden: the windows a
  * reader picks by name are the road, and the absolute range is the turning off
  * it, so both are on screen at once and each shows what the other chose.
@@ -19325,7 +19495,7 @@ b.crewlet-switcher__match {
   /* The side inset only: see DateTimePicker's own trigger. */
   padding: 0 var(--spacing-2) 0 var(--spacing-3);
   background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-control);
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
   font-family: inherit;
@@ -19342,7 +19512,7 @@ b.crewlet-switcher__match {
 }
 
 .crewlet-time-window:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
+  border-color: var(--color-border-strong-hover);
 }
 
 /*
@@ -19871,102 +20041,102 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* Toaster-KZ7YE2HA.css */
+/* Toaster-EOOOTSJT.css */
 /*
- * The toast stack.
+ * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
+ * on the page's deepest ground with the large shadow and the rim light, a
+ * 12px corner, the variant said by its mark alone, never a flood of its hue,
+ * and the countdown as a wash behind the words that drains from the right.
  *
- * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
- * black, which is a dark strip whatever palette is painting: on a light page
- * the toast's own text measured 1.56:1 against it.
+ * IN TOKENS RATHER THAN ITS LITERALS, so it follows every theme. The strip is
+ * --color-surface-background: the first release mixed the panel with black,
+ * which read as a dark bar on a light page, where its words measured 1.56:1.
+ * The marks are the feedback INK steps, the soft moss, amber and rose it drew,
+ * measured as text on every theme. The washes are the feedback SOFT steps.
  *
- * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
- * layer under the message is a composite nothing measured, and it moves while
- * the message is being read; a 2px bar at the edge says the same thing and
- * touches no text at all. It is decoration either way: the dismissal is a
- * timer now, so a reader who asks for reduced motion still gets the toast
- * taken away.
+ * The wash is decoration: the dismissal is a timer, so a reader who asks for
+ * reduced motion gets no wash and still gets the toast taken away.
  */
-
 .crewlet-toaster {
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
-  /* The engine's 420px, held under the viewport at the width a phone has.
-     The strip is one or two lines of 13px text and an action; at 380 the
-     commonest failure message wrapped onto a third. */
-  width: min(420px, calc(100vw - var(--spacing-9)));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-4);
-  right: var(--spacing-4);
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-4);
-  right: var(--spacing-4);
+  top: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-4);
-  left: var(--spacing-4);
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-4);
-  left: var(--spacing-4);
+  top: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toast {
+  /* The mark and the wash are the two places a variant spends its hue. */
   --crewlet-toast-mark: var(--color-text-secondary);
-  /*
-   * The boundary and the two inks are variables so a tone can spend them. Only
-   * one does: a failure, which is the engine's one toned strip.
-   */
-  --crewlet-toast-line: var(--color-border-default);
-  --crewlet-toast-ink: var(--color-text-primary);
-  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+  --crewlet-toast-wash: var(--color-surface-pressed);
+  /* 14px at the normal density, and the corner the dismiss sits in beside it. */
+  --crewlet-toast-inset: calc(var(--spacing-3) + var(--spacing-1) / 2);
 
   pointer-events: auto;
   position: relative;
   display: flex;
   align-items: flex-start;
-  /* The panel's own gap and padding, and the panel's own surface: the engine
-     draws a toast as a small panel that happens to float, so it sits on the
-     same ground, the same hairline and the same corner as everything the
-     screen behind it is made of. */
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--crewlet-toast-line);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  color: var(--crewlet-toast-ink);
+  gap: var(--spacing-3);
+  padding: var(--crewlet-toast-inset) calc(var(--spacing-7) + var(--spacing-1) * 1.5) var(--crewlet-toast-inset)
+    var(--crewlet-toast-inset);
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  /* The large shadow and the rim light, both from tokens that are a shadow in
+     every palette: --shadow-hairline is `none` in light, and a `none` inside a
+     list drops the whole declaration. */
+  box-shadow: var(--shadow-xl), var(--shadow-rim-lit);
+  color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   letter-spacing: var(--font-letter-spacing-snug);
   overflow: hidden;
-  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+  animation: crewlet-toast-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
 @keyframes crewlet-toast-in {
   from {
     opacity: 0;
-    transform: translateY(6px);
+    transform: translateX(var(--spacing-4));
   }
-
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
+/* The words sit over the wash: every child is raised, and the dismiss and the
+   wash below take their own places back. */
+.crewlet-toast > * {
+  position: relative;
+  z-index: var(--z-index-raised);
+}
+
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
@@ -19974,34 +20144,28 @@ svg.crewlet-time-window__tick {
   color: var(--crewlet-toast-mark);
 }
 
-/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
-   words beside it stay in the primary ink: a coloured sentence on a coloured
-   strip is the pair that has to be measured, and this one does not exist. */
+/*
+ * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
+ * and the edge stays the hairline, so a failure is a rose mark rather than a
+ * red strip: the outcome is said by the glyph and the title, and the sentence
+ * beside them is read in the ink every sentence is read in. The wash is the
+ * countdown, so only a toast that counts down draws one: a success is a moss
+ * mark on a faint moss wash, and a failure, sticky unless it is given a
+ * duration, draws none. Information is the neutral mark on the neutral wash.
+ */
 .crewlet-toast--success {
-  --crewlet-toast-mark: var(--color-feedback-success);
+  --crewlet-toast-mark: var(--color-feedback-success-ink);
+  --crewlet-toast-wash: var(--color-feedback-success-soft);
 }
 
 .crewlet-toast--warning {
-  --crewlet-toast-mark: var(--color-feedback-warning);
+  --crewlet-toast-mark: var(--color-feedback-warning-ink);
+  --crewlet-toast-wash: var(--color-feedback-warning-soft);
 }
 
-/*
- * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
- * confirmation and the one that does not take itself away, so the engine gives
- * it the hue twice: the fill step on the edge, where 3:1 is the floor a
- * boundary has to clear, and the INK step on every word, which is the measured
- * text pair on this surface. Never the fill behind a word: that is the swap
- * the whole soft-and-ink split exists to stop.
- */
 .crewlet-toast--danger {
-  --crewlet-toast-mark: var(--color-feedback-danger);
-  --crewlet-toast-line: var(--color-feedback-danger);
-  --crewlet-toast-ink: var(--color-feedback-danger-ink);
-  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
-}
-
-.crewlet-toast--info {
-  --crewlet-toast-mark: var(--color-feedback-info);
+  --crewlet-toast-mark: var(--color-feedback-danger-ink);
+  --crewlet-toast-wash: var(--color-feedback-danger-soft);
 }
 
 /* A usage limit notice is the application's own variant: it paints the glyph
@@ -20023,12 +20187,12 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-toast__message {
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
 }
 
 .crewlet-toast__actions {
-  margin-top: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
   display: flex;
   gap: var(--spacing-2);
 }
@@ -20060,6 +20224,7 @@ svg.crewlet-time-window__tick {
   border-color: var(--color-brand-accent-hover);
 }
 
+/* A failure's one filled thing is the way out of it. */
 .crewlet-toast--danger .crewlet-toast__action-btn,
 .crewlet-toast--danger .crewlet-toast__action-link {
   background: var(--color-feedback-danger);
@@ -20081,8 +20246,9 @@ svg.crewlet-time-window__tick {
 }
 
 /* The dismiss sits absolute in the corner so a multi-line message flows
-   under it rather than around it. 24px square: the smallest target
-   WCAG 2.2 accepts. */
+   under it rather than around it, and after the body in the document, so it
+   is drawn over the words at the same raised step. 24px square: the smallest
+   target WCAG 2.2 accepts. */
 .crewlet-toast__dismiss {
   position: absolute;
   top: var(--spacing-2);
@@ -20096,10 +20262,7 @@ svg.crewlet-time-window__tick {
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  /* The strip's own quiet ink rather than the neutral tertiary step, so the
-     close on a failure is part of the failure rather than the one grey thing
-     inside it. */
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-tertiary);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -20107,25 +20270,28 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-toast__dismiss:hover {
-  background: var(--color-surface-hover);
-  color: var(--crewlet-toast-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
 }
 
+/*
+ * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
+ * whole strip, draining from the right as the time runs out. It sits under
+ * every raised child, and it is the timer's picture, not the timer.
+ */
 .crewlet-toast__progress {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
+  inset: 0;
+  z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-mark);
+  background: var(--crewlet-toast-wash);
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-/* Paused by the class rather than by :hover, so the bar and the timer that
+/* Paused by the class rather than by :hover, so the wash and the timer that
    actually dismisses are stopped by the same event. */
 .crewlet-toast__progress.is-paused {
   animation-play-state: paused;
@@ -20135,7 +20301,6 @@ svg.crewlet-time-window__tick {
   from {
     transform: scaleX(1);
   }
-
   to {
     transform: scaleX(0);
   }
@@ -20161,8 +20326,8 @@ svg.crewlet-time-window__tick {
 
 /*
  * The strip still arrives and still goes; it just does not slide, and the
- * countdown bar holds still. The timer is untouched: a reader who asked for
- * less motion did not ask to be left with a toast that never leaves.
+ * wash is not drawn. The timer is untouched: a reader who asked for less
+ * motion did not ask to be left with a toast that never leaves.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-toast {