@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/effects-chrome.css

@@ -0,0 +1,888 @@
+/* ==========================================================================
+   @digithings-ai/ui — effects/chrome family structural CSS
+   (components/effects-chrome/*: <Pipeline/>, <RotatingPrompts/>,
+   <StackingPanels/>, <AnnouncementBar/>, <TabStrip/>, <ToastStack/>).
+
+   Import AFTER the token bridge, in the app's globals.css:
+     @import "tailwindcss";
+     @import "@digithings-ai/design/tokens.css";
+     @import "@digithings-ai/ui/styles/web-theme.css";
+     @import "@digithings-ai/ui/styles/effects-chrome.css";
+     @source "<path-to>/packages/ui/src/components/effects-chrome";
+   The @source line is load-bearing (path relative to the app's globals.css):
+   the components carry token-backed utilities, and Tailwind does not scan
+   package sources on its own. Import this sheet PLAINLY (no layer(...)) —
+   it manages its own layering:
+
+   - single-class DEFAULT rules sit in `@layer components`, where the app's
+     `utilities` layer wins — call-site utilities (rounded-none, p-0 …) can
+     retune a default;
+   - STATE / STRUCTURAL rules (pseudo-classes, [aria-*], variant combinators,
+     descendant selectors, @keyframes hooks, media queries) stay UNLAYERED on
+     purpose so they keep beating plain call-site utilities — the cascade
+     contract from MIGRATION.md. Wrapping this import in layer(…) demotes the
+     state rules and breaks the rendered look.
+
+   Consumer-supplied custom props (fallbacks baked in):
+     --nav-h   sticky-pin offset for <StackingPanels/> (falls back to 3.4rem)
+   ========================================================================== */
+
+/* ── Pipeline — workflow viz (ported from the dashboard) ──────────
+   The components carry the outer boxes (summary strip, flow row, columns) as
+   token utilities; the classes stay on the elements for the combinator /
+   modifier rules here: node states, the running pulse, the detail grids. */
+
+@layer components {
+  .pl-sum-k {
+    --pl-sum-k-font: 0.54rem;
+
+    font-family: var(--font-mono);
+    font-size: var(--pl-sum-k-font);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ink-mute);
+  }
+
+  .pl-sum-v {
+    --pl-sum-v-font: 0.95rem;
+
+    font-family: var(--font-mono);
+    font-size: var(--pl-sum-v-font);
+    color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pl-col-tag {
+    --pl-col-tag-top: 0.4rem;
+    --pl-col-tag-inline: 0.7rem;
+    --pl-col-tag-font: 0.52rem;
+
+    position: absolute;
+    top: var(--pl-col-tag-top);
+    inset-inline-start: var(--pl-col-tag-inline);
+    font-family: var(--font-mono);
+    font-size: var(--pl-col-tag-font);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ink-mute);
+  }
+
+  .pl-node {
+    --pl-node-w: 9.5rem;
+    --pl-node-gap: 0.35rem;
+    --pl-node-pad-block: 0.6rem;
+    --pl-node-pad-inline: 0.7rem;
+    --pl-node-head-gap: 0.45rem;
+    --pl-node-font: 0.8rem;
+    --pl-node-diag-font: 0.6rem;
+
+    width: var(--pl-node-w);
+    display: flex;
+    flex-direction: column;
+    gap: var(--pl-node-gap);
+    padding: var(--pl-node-pad-block) var(--pl-node-pad-inline);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    text-align: start;
+    cursor: pointer;
+    transition: border-color 0.18s var(--ease), transform 0.15s var(--ease);
+    /* Containing block for the node's own `.pl-sr` status text. `.pl-sr` is
+       absolutely positioned; without a positioned ancestor its containing
+       block is the initial containing block, so it escaped `.pl-flow`'s
+       `overflow-x: auto` scroller (an abspos box is only clipped by a scroll
+       ancestor that is in its containing-block chain) and folded its static
+       position — far right inside the row's min-content width — into the
+       ROOT scroller. That was the reference audit's /effects @390 critical:
+       documentElement.scrollWidth 785 against a 390 viewport. Anchoring it
+       to the node keeps the sr-only text inside the flow's own scroller. */
+    position: relative;
+  }
+
+  .pl-node-head {
+    display: flex;
+    align-items: center;
+    gap: var(--pl-node-head-gap, 0.45rem);
+  }
+
+  .pl-pip {
+    --pl-pip: 7px;
+
+    width: var(--pl-pip);
+    height: var(--pl-pip);
+    border-radius: 0;
+    background: var(--ink-soft);
+    flex-shrink: 0;
+  }
+
+  .pl-node-label {
+    font-family: var(--font-mono);
+    font-size: var(--pl-node-font, 0.8rem);
+    color: var(--ink);
+  }
+
+  .pl-node-diag {
+    display: flex;
+    justify-content: space-between;
+    font-family: var(--font-mono);
+    font-size: var(--pl-node-diag-font, 0.6rem);
+    color: var(--ink-mute);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Each node's screen-reader-only run-status text. Deliberately NOT
+     Tailwind's `.sr-only`: that utility is only emitted into an app whose
+     own source uses the class, so a shared component leaning on it renders
+     a plain visible span in any app that does not (see .tl-sr/.tm-sr for
+     the same fix, and the bug it fixed once already). */
+  .pl-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .pl-conn {
+    --pl-conn-pad: 0.4rem;
+
+    flex-shrink: 0;
+    padding: 0 var(--pl-conn-pad);
+    color: color-mix(in srgb, var(--ink-mute) 80%, transparent);
+    display: inline-flex;
+  }
+
+  .pl-detail {
+    --pl-detail-top: 1rem;
+    --pl-detail-gap: 0.6rem;
+    --pl-detail-pad-block: 0.85rem;
+    --pl-detail-pad-inline: 1.1rem;
+    --pl-detail-model-font: 0.62rem;
+    --pl-diag-k-font: 0.52rem;
+    --pl-diag-v-font: 0.86rem;
+    --pl-sum-k-font: 0.54rem;
+
+    margin-top: var(--pl-detail-top);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    overflow: hidden;
+  }
+
+  .pl-detail-head {
+    --pl-detail-name-font: 0.9rem;
+
+    display: flex;
+    align-items: center;
+    gap: var(--pl-detail-gap);
+    padding: var(--pl-detail-pad-block) var(--pl-detail-pad-inline);
+    border-bottom: 1px solid var(--hair);
+  }
+
+  .pl-detail-name {
+    font-family: var(--font-mono);
+    font-size: var(--pl-detail-name-font, 0.9rem);
+    color: var(--ink);
+  }
+
+  .pl-detail-model {
+    --pl-detail-model-pad-block: 0.1rem;
+
+    font-family: var(--font-mono);
+    font-size: var(--pl-detail-model-font, 0.62rem);
+    color: var(--ink-mute);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    padding: var(--pl-detail-model-pad-block) var(--space-2);
+  }
+
+  .pl-detail-status {
+    margin-inline-start: auto;
+    font-family: var(--font-mono);
+    font-size: var(--pl-node-diag-font, 0.6rem);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-mute);
+  }
+
+  .pl-io {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    margin: 0;
+    background: var(--hair);
+  }
+
+  /* What the selected stage does, in one line. Sits between the head and the
+     inputs/outputs because it is the sentence that makes the pair readable —
+     the run diagnostics below it are optional and often absent. */
+  .pl-note {
+    --pl-note-pad-block: 0.8rem;
+    --pl-note-pad-inline: 1.1rem;
+    --pl-note-font: 0.78rem;
+
+    margin: 0;
+    padding: var(--pl-note-pad-block) var(--pl-note-pad-inline) 0;
+    font-family: var(--font-mono);
+    font-size: var(--pl-note-font);
+    line-height: 1.6;
+    color: var(--ink-soft);
+  }
+
+  /* `auto-fit` rather than a fixed four, because a node may carry any subset of
+     the four diagnostics: a two-wide grid left two empty tracks when only two
+     were present, which reads as missing data. */
+  .pl-diag-grid {
+    /* 7rem is a content-measured track floor (one diagnostic label+value pair) */
+    --pl-diag-min: 7rem;
+    --pl-diag-top: 0.8rem;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--pl-diag-min), 1fr));
+    border-top: 1px solid var(--hair);
+    margin-top: var(--pl-diag-top);
+  }
+
+  .pl-diag-k {
+    font-family: var(--font-mono);
+    font-size: var(--pl-diag-k-font, 0.52rem);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-mute);
+  }
+
+  .pl-diag-v {
+    font-family: var(--font-mono);
+    font-size: var(--pl-diag-v-font, 0.86rem);
+    color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* state / structural — unlayered on purpose (cascade contract) */
+
+.pl-summary > span {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.pl-running {
+  color: var(--accent);
+}
+
+.pl-col--par {
+  position: relative;
+  padding: 1.3rem var(--pl-node-pad-inline, 0.7rem) var(--pl-node-pad-inline, 0.7rem);
+  border: 1px dashed color-mix(in srgb, var(--ink) 26%, var(--hair));
+  border-radius: 0;
+}
+
+.pl-node:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ink) 30%, var(--hair));
+}
+
+/* .pl-flow (the horizontally-scrolling node row) computes overflow-x AND
+   overflow-y as auto once either axis is non-visible (CSS Overflow spec),
+   with only ~1.6px of horizontal padding — not enough clearance for the
+   global :focus-visible rule's positive outline-offset (3px) + width (2px)
+   on the first/last node in the row. Same fix as .ts-seg-btn
+   (finance-tearsheet.css): an inset ring draws entirely inside the node's
+   own border box, so it can never be clipped regardless of available
+   external clearance. */
+.pl-node:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 0;
+}
+
+.pl-node.is-sel {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.pl-node--queued {
+  opacity: 0.55;
+}
+
+.pl-node--running .pl-pip,
+.pl-pip--running {
+  background: var(--accent);
+  animation: pl-pulse 1.6s var(--ease) infinite;
+}
+
+.pl-node--queued .pl-pip,
+.pl-pip--queued {
+  background: transparent;
+  border: 1px solid var(--ink-mute);
+}
+
+.pl-pip--done {
+  background: var(--ink-soft);
+}
+
+@keyframes pl-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 5px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.pl-detail-status--running {
+  color: var(--accent);
+}
+
+.pl-io > div {
+  background: var(--surface);
+  padding: var(--pl-detail-pad-block, 0.85rem) var(--pl-detail-pad-inline, 1.1rem);
+}
+
+.pl-io dt {
+  font-family: var(--font-mono);
+  font-size: var(--pl-sum-k-font, 0.54rem);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--ink-mute);
+  margin-bottom: 0.3rem;
+}
+
+.pl-io dd {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--pl-node-font, 0.8rem);
+  color: var(--ink-soft);
+}
+
+.pl-diag-grid > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--pl-note-pad-block, 0.8rem) var(--pl-detail-pad-inline, 1.1rem);
+  border-inline-start: 1px solid var(--hair);
+}
+
+.pl-diag-grid > div:first-child {
+  border-inline-start: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pl-node--running .pl-pip,
+  .pl-pip--running {
+    animation: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .pl-io {
+    grid-template-columns: 1fr;
+  }
+  .pl-diag-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .pl-diag-grid > div:nth-child(3) {
+    border-inline-start: none;
+  }
+}
+
+/* ── RotatingPrompts — blinking caret ─────────────────────────────────────
+   The component carries the prompt shell as token utilities. Only the caret
+   stays CSS — it owns an @keyframes animation (migrate-vs-leave). */
+
+@layer components {
+  .prompt-caret {
+    --prompt-caret-w: 7px;
+    --prompt-caret-h: 15px;
+
+    width: var(--prompt-caret-w);
+    height: var(--prompt-caret-h);
+    background: var(--accent);
+    align-self: center;
+    animation: prompt-blink 1.1s steps(1) infinite;
+  }
+
+  /* WCAG 2.2.2 pause control — borderless icon button, same resting/hover
+     tone as the house's other chrome icon buttons (theme toggle, nav
+     burger). */
+  .prompt-pause {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    /* WCAG 2.5.8: 24x24 CSS px minimum touch target. The 13px icon + 0.2rem
+       padding alone only reach ~19.4px; this pads the hit area out to the
+       floor without changing the icon's own visual size. */
+    min-width: var(--space-4);
+    min-height: var(--space-4);
+    padding: var(--space-1);
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    cursor: pointer;
+    transition: color 0.18s var(--ease);
+  }
+}
+
+.prompt-pause:hover {
+  color: var(--ink);
+}
+
+@keyframes prompt-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .prompt-caret {
+    animation: none;
+  }
+}
+
+/* ── StackingPanels — pinned layered panels ───────────────────────────────
+   Content type is token utilities in the component. The panel mechanics stay
+   CSS: sticky pin off the consumer's --nav-h, the layered seam shadow, and
+   transform-origin for the JS-driven scale-back. .stk-dim stays a class —
+   the scroll handler grabs it via querySelector and writes its opacity. */
+
+@layer components {
+  .stk-panel {
+    /* component tokens — sticky panel offset / height / padding */
+    --stk-top-gap: 1.2rem;
+    --stk-min-h: 52vh;
+    --stk-pad: clamp(1.6rem, 5vw, 3.2rem);
+
+    position: sticky;
+    top: calc(var(--nav-h, 3.4rem) + var(--stk-top-gap));
+    min-height: var(--stk-min-h);
+    display: flex;
+    align-items: center;
+    padding: var(--stk-pad);
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+    /* concrete black: cast-shadow ink, deliberately theme-invariant (no
+       shadow token) — same read as the reference specimen */
+    box-shadow: 0 -22px 46px -26px rgba(0, 0, 0, 0.6);
+    transform-origin: center top;
+    will-change: transform;
+    overflow: hidden;
+  }
+
+  /* darkening overlay as a panel is covered — JS drives opacity */
+  .stk-dim {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: var(--bg);
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+/* ── AnnouncementBar — whole-bar link chrome ──────────────────────────────
+   The frame is a components-layer default (production overrides the demo
+   radius/border with call-site utilities); the link keeps its class for the
+   parent-hover-descendant CTA rule, which has no single-element utility. */
+
+@layer components {
+  .annc-bar {
+    --annc-bar-h: 48px;
+
+    display: flex;
+    min-height: var(--annc-bar-h);
+    align-items: center;
+    border: 1px solid var(--hair);
+    border-radius: 0;
+    background: var(--surface);
+  }
+
+  .annc-link {
+    --annc-link-font: 0.8rem;
+
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1) var(--space-2);
+    padding: 0.55rem var(--space-3);
+    font-size: var(--annc-link-font);
+    color: var(--ink);
+    text-decoration: none;
+  }
+}
+
+/* state / structural — unlayered on purpose (cascade contract) */
+
+.annc-link:hover b {
+  text-decoration: underline;
+}
+
+.annc-link b {
+  font-weight: 400;
+  color: var(--accent);
+}
+
+/* ── TabStrip — sliding active indicator, three dresses ───────────────────
+   Base strip/button/ink defaults are components-layer; the variant
+   combinators, aria/hover/focus states, and the ink (whose transform +
+   width — and height for the box dresses — are written from a ref and
+   animated by this transition) stay unlayered — they must keep beating
+   call-site utilities. Box-dress inks (pill/chip) anchor top + inline-start
+   and take translate(x, y) + measured height from the component, so a `chip`
+   strip may flex-wrap and the ink still lands on the active row. The
+   component measures from that same inline-start edge and negates x under
+   dir=rtl, since `transform` has no logical form. */
+
+@layer components {
+  .tab-strip {
+    --tab-strip-gap: 0.2rem;
+    --tab-btn-font: 0.76rem;
+    --tab-btn-pad-block: 0.55rem;
+    --tab-btn-pad-inline: 0.7rem;
+    --tab-btn-pad-bottom: 0.7rem;
+    --tab-btn-pill-pad-block: 0.4rem;
+    --tab-btn-pill-pad-inline: 0.95rem;
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--tab-strip-gap);
+  }
+
+  .tab-btn {
+    position: relative;
+    z-index: 1;
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    font-family: var(--font-mono);
+    font-size: var(--tab-btn-font);
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: color 0.2s var(--ease);
+  }
+
+  .tab-ink {
+    position: absolute;
+    transition:
+      transform 0.28s var(--ease),
+      width 0.28s var(--ease);
+    pointer-events: none;
+  }
+}
+
+/* state / structural — unlayered on purpose (cascade contract) */
+
+.tab-strip.underline {
+  --tab-strip-gap-underline: 0.4rem;
+
+  display: flex;
+  gap: var(--tab-strip-gap-underline);
+  border-bottom: 1px solid var(--hair);
+  /* The strip must never force the page wider than the viewport: tabs
+     scroll inside the strip (the ink is absolutely positioned, so it
+     scrolls with them) instead of pushing the document to 545px on phones. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.tab-strip.pill {
+  --tab-strip-pad: 0.25rem;
+
+  padding: var(--tab-strip-pad);
+  border: 1px solid var(--hair);
+  border-radius: 0;
+  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
+}
+
+.tab-strip.underline .tab-btn {
+  padding: var(--tab-btn-pad-block, 0.55rem) var(--tab-btn-pad-inline, 0.7rem) var(--tab-btn-pad-bottom, 0.7rem);
+}
+
+.tab-strip.pill .tab-btn {
+  padding: var(--tab-btn-pill-pad-block, 0.4rem) var(--tab-btn-pill-pad-inline, 0.95rem);
+}
+
+.tab-btn:hover {
+  color: var(--ink-soft);
+}
+
+.tab-btn[aria-selected="true"] {
+  color: var(--ink);
+}
+
+.tab-btn:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
+  outline-offset: 2px;
+  border-radius: 0;
+}
+
+.tab-ink.underline {
+  inset-inline-start: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+}
+
+/* pill/chip inks: top/left origin — transform + height come from the ref */
+.tab-ink.pill {
+  z-index: 0;
+  top: 0;
+  inset-inline-start: 0;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
+}
+
+/* chip — the dashboard sub-nav dress: wrapping row of bordered
+   chips, sans face, accent-tinted active chip (parity with the app's
+   `subpageTabButtonClass` active/inactive reads). */
+.tab-strip.chip {
+  --tab-strip-gap-chip: 0.5rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--tab-strip-gap-chip);
+}
+
+.tab-strip.chip .tab-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--tab-strip-gap-chip, 0.5rem);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid transparent;
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--ink-soft);
+  transition:
+    color 0.2s var(--ease),
+    background-color 0.2s var(--ease);
+}
+
+.tab-strip.chip .tab-btn:hover:not([aria-selected="true"]) {
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+  color: var(--ink);
+}
+
+.tab-strip.chip .tab-btn[aria-selected="true"] {
+  color: var(--accent);
+}
+
+.tab-ink.chip {
+  z-index: 0;
+  top: 0;
+  inset-inline-start: 0;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-ink {
+    transition: none;
+  }
+}
+
+/* ── ToastStack — corner stack, per-tone reads, drain timer ───────────────
+   Base card/part defaults are components-layer; the per-tone border/icon/
+   progress states, the spin/drain keyframes, and the reduced-motion guard
+   stay unlayered. Success/error ride --up/--down (money-read semantics),
+   info rides the accent — never a livery. */
+
+@layer components {
+  .toast-stack {
+    --toast-stack-inset: 1.25rem;
+    --toast-stack-gap: 0.6rem;
+    --toast-stack-w: 22rem;
+
+    position: fixed;
+    inset: auto var(--toast-stack-inset) var(--toast-stack-inset) auto;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-stack-gap);
+    width: min(var(--toast-stack-w), calc(100vw - (2 * var(--toast-stack-inset))));
+    pointer-events: none;
+  }
+
+  .toast {
+    --toast-gap: 0.7rem;
+    --toast-pad-block: 0.8rem;
+    --toast-pad-inline: 0.85rem;
+    --toast-title-font: 0.8rem;
+    --toast-msg-font: 0.76rem;
+    --toast-action-font: 0.74rem;
+    --toast-close-pad: 0.15rem;
+
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: var(--toast-gap);
+    align-items: start;
+    padding: var(--toast-pad-block) var(--toast-pad-inline);
+    border: 1px solid var(--hair);
+    border-inline-start-width: 2px;
+    border-radius: 0;
+    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
+    /* concrete black: cast-shadow ink, deliberately theme-invariant (no
+       shadow token) — same read as the reference specimen */
+    box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.6);
+    overflow: hidden;
+    pointer-events: auto;
+  }
+
+  .toast-icon {
+    display: inline-flex;
+    margin-top: 0.05rem;
+  }
+
+  .toast-body {
+    min-width: 0;
+  }
+
+  .toast-title {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: var(--toast-title-font);
+    color: var(--ink);
+  }
+
+  .toast-msg {
+    margin: 0.15rem 0 0;
+    font-size: var(--toast-msg-font);
+    line-height: 1.45;
+    color: var(--ink-mute);
+  }
+
+  /* the optional one-click recovery control (ToastItem.action) — a plain
+     text button, not tone-colored (unlike the border/icon, which do ride
+     --up/--down per this file's own money-read convention above): the
+     action is "the thing you can click", independent of the toast's
+     success/error semantics. */
+  .toast-action {
+    display: inline-block;
+    margin: 0.35rem 0 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    font-family: var(--font-mono);
+    font-size: var(--toast-action-font);
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+    transition: color 0.2s var(--ease);
+  }
+
+  .toast-action:hover {
+    color: var(--ink);
+  }
+
+  .toast-close {
+    display: inline-flex;
+    padding: var(--toast-close-pad, 0.15rem);
+    border: none;
+    background: transparent;
+    color: var(--ink-mute);
+    cursor: pointer;
+    transition: color 0.2s var(--ease);
+  }
+
+  .toast-progress {
+    position: absolute;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    transform-origin: left;
+    background: color-mix(in srgb, currentColor 55%, var(--hair));
+    animation: toast-drain linear forwards;
+  }
+
+  /* transform-origin has no logical keyword: the drain scales from the bar's
+     inline-start, which is the right edge under dir=rtl. */
+  [dir="rtl"] .toast-progress {
+    transform-origin: right;
+  }
+}
+
+/* state / structural — unlayered on purpose (cascade contract) */
+
+.toast-success {
+  border-inline-start-color: var(--up);
+}
+.toast-error {
+  border-inline-start-color: var(--down);
+}
+.toast-info {
+  border-inline-start-color: var(--accent);
+}
+.toast-loading {
+  border-inline-start-color: var(--ink-mute);
+}
+
+.toast-success .toast-icon {
+  color: var(--up);
+}
+.toast-error .toast-icon {
+  color: var(--down);
+}
+.toast-info .toast-icon {
+  color: var(--accent);
+}
+.toast-loading .toast-icon {
+  color: var(--ink-mute);
+}
+
+.toast-spin {
+  animation: toast-spin 0.8s linear infinite;
+}
+
+@keyframes toast-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.toast-close:hover {
+  color: var(--ink);
+}
+
+.toast-success .toast-progress {
+  color: var(--up);
+}
+.toast-error .toast-progress {
+  color: var(--down);
+}
+.toast-info .toast-progress {
+  color: var(--accent);
+}
+
+@keyframes toast-drain {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast-spin {
+    animation: none;
+  }
+}