@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/styles/diagrams.css

@@ -0,0 +1,1860 @@
+/*
+ * diagrams.css — the architecture-diagram family.
+ *
+ * The mermaid SVG brings its own inline stylesheet, so this file does two jobs
+ * only:
+ *   1. FRAME the figure (border, surface, caption, source fallback) in the same
+ *      hairline grammar as every other figure on the site.
+ *   2. RE-ASSERT the tokens mermaid cannot know about. Its architecture
+ *      stylesheet hardcodes `#fff` for service label text, which is correct on
+ *      the dark canon palette by luck and wrong on the light one, and it draws
+ *      group borders dashed by default — the boundary is a solid box in this
+ *      system.
+ *
+ * Import once in an app's globals.css, after web-theme.css:
+ *   @import "@digithings-ai/ui/styles/diagrams.css";
+ * and add the source path so Tailwind sees the family:
+ *   @source "<path-to>/packages/ui/src/components/diagrams";
+ */
+
+.arch-figure {
+  /* Component sizing tokens. The figure is retunable from here; hairlines and
+     the pending floor stay literal (a fractional hairline rounds away, and the
+     floor is measured against the tallest placeholder, not a fluid ramp). */
+  --figure-gap: 0.6rem;
+  --figure-pad: 1.1rem;
+  --figure-pending-min-h: 14rem;
+  --figure-source-pad-block: var(--space-3);
+  --figure-source-pad-inline: 1.1rem;
+  --figure-source-size: 0.72rem;
+  --figure-source-leading: 1.6;
+  --figure-caption-size: 0.68rem;
+  --figure-caption-leading: var(--leading, 1.55);
+  --figure-svg-text-size: var(--text-xs, 11px);
+  --figure-svg-tracking: 0.02em;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--figure-gap);
+  min-width: 0;
+}
+
+.arch-figure__body {
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid var(--hair);
+  background: var(--surface);
+  padding: var(--figure-pad);
+}
+
+.arch-figure[data-state="pending"] .arch-figure__body {
+  min-height: var(--figure-pending-min-h);
+}
+
+.arch-figure__body > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+}
+
+.arch-figure__source {
+  margin: 0;
+  padding: var(--figure-source-pad-block) var(--figure-source-pad-inline);
+  border: 1px solid var(--hair);
+  background: var(--surface);
+  font-family: var(--font-mono);
+  font-size: var(--figure-source-size);
+  line-height: var(--figure-source-leading);
+  color: var(--ink-soft);
+  overflow-x: auto;
+}
+
+.arch-figure__caption {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: var(--figure-caption-size);
+  line-height: var(--figure-caption-leading);
+  color: var(--ink-mute);
+}
+
+/* mermaid's own chrome, brought back onto the palette. */
+.arch-figure__body svg text,
+.arch-figure__body svg .node-icon-text > div {
+  font-family: var(--font-mono);
+  color: var(--ink);
+}
+
+.arch-figure__body svg .node-icon-text > div {
+  fill: var(--ink);
+}
+
+.arch-figure__body svg .node-bkg {
+  stroke-dasharray: none;
+}
+
+/*
+ * mermaid's architecture chrome, forced back onto the palette.
+ *
+ * These need `!important` and that is not sloppiness: mermaid injects its own
+ * stylesheet from inside the rendered SVG, so it lands later in the document
+ * than this file and out-ranks it in source order. The icon plates are worse —
+ * they are drawn by mermaid's bundled icon set as an inline `style="fill:#087ebf"`
+ * on the plate rect, which nothing short of `!important` can reach.
+ *
+ * The icon plate is the only place a vendor-blue can appear, and it appears on
+ * every service, so leaving it is the difference between a canon diagram and a
+ * screenshot of one. If mermaid ever changes the built-in icon palette these
+ * overrides stop matching and the diagram reverts to mermaid's own colour —
+ * degraded, never broken.
+ */
+.arch-figure__body svg svg rect[width="80"],
+.arch-figure__body svg svg rect[width="60"] {
+  fill: color-mix(in srgb, var(--ink) 9%, var(--surface)) !important;
+}
+
+.arch-figure__body svg svg circle,
+.arch-figure__body svg svg path,
+.arch-figure__body svg svg line,
+.arch-figure__body svg svg polyline,
+.arch-figure__body svg svg polygon {
+  stroke: var(--ink) !important;
+}
+
+/* the boundary is a rule in this system, not a dashed sketch. */
+.arch-figure__body svg .node-bkg {
+  stroke-dasharray: none !important;
+}
+
+/*
+ * Terminal polish. The owner: "make it more still terminal look simplicity but
+ * still modern polish". mermaid's default chrome is a soft floating glyph on an
+ * unfilled plate; the house grammar is a stamped chip on a hairline, square, in
+ * the mono ramp — so the plate gets a border, and the type goes on the ramp
+ * rather than mermaid's own family.
+ */
+.arch-figure__body svg svg rect[width="80"],
+.arch-figure__body svg svg rect[width="60"] {
+  stroke: var(--hair) !important;
+  stroke-width: 1 !important;
+}
+
+/*
+ * The icon is a fixed 80px plate in an 80px cell and mermaid draws the label on
+ * its bottom edge, so at full size each node reads as a wall of squares with the
+ * text sitting on top of the glyph. Scaling the plate back to half its cell
+ * gives the label clear air beneath it and turns the icon into what it should be
+ * here — a small monogram beside the words, not the whole node.
+ */
+.arch-figure__body svg [viewBox="0 0 80 80"] {
+  transform: scale(0.5);
+  transform-origin: 50% 50%;
+}
+
+.arch-figure__body svg .architecture-service text {
+  font-size: var(--figure-svg-text-size);
+  letter-spacing: var(--figure-svg-tracking);
+  fill: var(--ink) !important;
+}
+
+/*
+ * mermaid leaves the edge labels at the browser default — nearly half again the
+ * size of a node label — which pulls the eye off the boxes and reads as clutter.
+ * Everything in the drawing sits on the same mono step.
+ */
+.arch-figure__body svg text {
+  font-size: var(--figure-svg-text-size);
+  letter-spacing: var(--figure-svg-tracking);
+}
+
+/*
+ * mermaid sizes an edge label's box to the raw string and lets it wrap, which
+ * splits a word when the box is narrow ("heartbea / t"). The label is one line
+ * of mono here, so it is allowed to be wider than the box mermaid guessed.
+ */
+.arch-figure__body svg foreignObject {
+  overflow: visible !important;
+}
+
+.arch-figure__body svg foreignObject > div {
+  white-space: nowrap !important;
+  overflow: visible !important;
+}
+
+/*
+ * ── the tour ────────────────────────────────────────────────────────────────
+ * Three treatments of one diagram. Static is the frame plus the steps; the two
+ * pinned treatments park the frame and let scroll drive it. The camera element
+ * gets its transform inline from JS (measured against the rendered SVG), so the
+ * only thing CSS owns here is the frame, the rail and the easing.
+ */
+
+.arch-tour {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tour-gap);
+  min-width: 0;
+
+  /* Component sizing tokens. Breakpoints and 1px hairlines stay literal:
+     var() cannot appear in a media condition, and a fractional hairline
+     rounds away at small sizes. Everything else is named once here and
+     consumed by the rules below, so a consumer can retune the tour without
+     editing its geometry. */
+  --tour-nav-h: var(--dq-nav-h, 4.5rem);
+  --tour-pin-gap: 1rem;
+  --tour-pin-gap-narrow: 0.5rem;
+  --tour-pin-max: 46rem;
+  --tour-head-gap: 0.5rem;
+  --tour-head-gap-narrow: 0.35rem;
+  --tour-grid-gap: 1.8rem;
+  --tour-frame-gap: 0.4rem;
+  --tour-frame-pad: 1.1rem;
+  --tour-frame-pad-top: 1.85rem;
+  --tour-frame-pad-inline: 0.85rem;
+  --tour-frame-pad-bottom: 0.85rem;
+  --tour-rail-gap: 0.9rem;
+  --tour-rail-min: 13.25rem;
+  --tour-rail-min-short: 4.5rem;
+  --tour-step-gap: 0.15rem;
+  --tour-caption-size: 0.82rem;
+  --tour-caption-leading: 1.6;
+  --tour-label-size: 0.9rem;
+  --tour-tag-inset-block: 0.42rem;
+  --tour-tag-inset-inline: 0.72rem;
+  /* Wave-1 additions: the tour rules that were still carrying raw values.
+     Nothing above is renamed or re-valued. */
+  --tour-gap: 1.6rem;
+  --tour-side-gap: 1.8rem;
+  --tour-side-row-gap: 0.6rem;
+  --tour-side-col-gap: 2.4rem;
+  --tour-static-gap: 1.2rem;
+  --tour-tag-size: 0.62rem;
+  --tour-tag-tracking: 0.1em;
+  --tour-tag-pad-block: 0.1rem;
+  --tour-tag-pad-inline: 0.45rem;
+  --tour-side-tag-gap: 0.15rem;
+  --tour-step-pad: 0.9rem;
+}
+
+/* Morph carries its own five values: they only apply when the variant class is
+   present, so they do not belong on every tour. */
+.arch-tour.arch-tour-morph {
+  --tour-morph-pin-offset: 0.35rem;
+  --tour-morph-frame-pad-block: 0.55rem;
+  --tour-morph-frame-pad-inline: 0.7rem;
+  --tour-morph-svg-max: 26rem;
+  --tour-morph-svg-reserve: 19rem;
+}
+
+.arch-tour__frame {
+  border: 1px solid var(--hair);
+  background: var(--surface);
+  padding: var(--tour-frame-pad);
+  min-width: 0;
+}
+
+/*
+ * One diagram per side. The stage clips, which is what lets a leaving group
+ * travel past the frame edge and disappear instead of widening the page.
+ */
+.arch-tour__stage {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+}
+
+.arch-tour__pane {
+  grid-area: 1 / 1;
+  min-width: 0;
+}
+
+/*
+ * The swap. Each side is one group — its diagram and its own step list — so the
+ * rented group leaves to the left as a unit (list travelling with its diagram)
+ * and the owned group arrives from the right. No opacity anywhere: the two never
+ * share the frame, so nothing has to be faded in. `--arch-out` runs over the
+ * first half of the window and `--arch-in` over the second, so they pass each
+ * other off-screen rather than crossing in view.
+ */
+.arch-tour__side {
+  display: grid;
+  /* Two tracks: the side tag on its own row at the top, then the diagram + its
+   * step list below. Without the explicit row the tag auto-placed into the
+   * diagram's cell and landed bottom-left. */
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: var(--tour-side-gap);
+  min-width: 0;
+  transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Each rail's progress bar reads that side's own walk, not the whole walk. */
+.arch-tour__side:nth-child(1) .arch-tour__rail {
+  --arch-rail-p: var(--arch-r0, 0);
+}
+
+.arch-tour__side:nth-child(2) .arch-tour__rail {
+  --arch-rail-p: var(--arch-r1, 0);
+}
+
+.arch-tour__side--leaving {
+  transform: translateX(calc(var(--arch-out, 0) * -112%));
+}
+
+.arch-tour__side--entering {
+  transform: translateX(calc((1 - var(--arch-in, 1)) * 112%));
+}
+
+.arch-tour__camera {
+  position: relative;
+  transform-origin: 0 0;
+  /* Short follow, not a 1.6s tween: the scroll pose writes the target every
+     frame, and a long transition would lag the narration. */
+  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+/* Until the tour has painted its first pose (`data-settled`, set by the
+   scroll binding), sides and camera jump straight to it rather than tweening
+   in from the CSS defaults. */
+.arch-tour:not([data-settled]) .arch-tour__side,
+.arch-tour:not([data-settled]) .arch-tour__camera {
+  transition: none;
+}
+
+/* Skip-through: while the page is moving, or the camera is settling onto the
+   narrated boxes, the scroll pose is the motion. A time-based follow here
+   lags a flick and reads as the section fighting the page. */
+.arch-tour[data-skipping] .arch-tour__camera,
+.arch-tour[data-skipping] .arch-tour__side,
+.arch-tour[data-skipping] .arch-tour__rail::before {
+  transition: none;
+}
+
+/* the frame already draws the box; the diagram inside must not draw a second. */
+.arch-tour__camera .arch-figure__body {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.arch-tour__camera .arch-figure__caption {
+  display: none;
+}
+
+/* The selected box glows and everything outside it drops back a step. The huge
+ * flat shadow is the spotlight: it dims the whole pane except the rectangle it
+ * is cast from, and the stage's own overflow clips it, so there is no second
+ * layer to keep in step with the camera. There is exactly ONE such rectangle per
+ * step (the union of the lit boxes) — with one per box the dim stacked once per
+ * lit box and the last rented steps, which light most of the diagram, went to
+ * near-black. The dim stays light for the same reason: the architecture outside
+ * the glow has to remain readable. */
+.arch-tour__spot {
+  position: absolute;
+  inset-block-start: 0;
+  left: 0; /* physical: the spot's translate is the camera frame's physical x */
+  pointer-events: none;
+  opacity: 0;
+  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 22%, transparent);
+  /* Geometry is written from the scroll pose, placed by translate so a frame
+     of travel is not a layout shift. Opacity is the only fade, so a
+     whole-graph beat can drop the spotlight without sliding a box. */
+  transition: opacity 0.35s var(--ease);
+}
+
+/* The glow itself breathes on its own layer so only opacity is animated — an
+ * animated 9999px spread would repaint the whole frame every tick. */
+.arch-tour__spot::after {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  box-shadow:
+    0 0 18px 2px color-mix(in srgb, var(--accent) 30%, transparent),
+    inset 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent);
+  animation: arch-glow 2.6s ease-in-out infinite;
+}
+
+@keyframes arch-glow {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* The no-motion treatment renders both sides stacked, so it owns its own gap. */
+.arch-tour__static {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tour-static-gap);
+  min-width: 0;
+}
+
+.arch-tour__tag,
+.arch-tour__side-tag {
+  font-family: var(--font-mono);
+  font-size: var(--tour-tag-size);
+  letter-spacing: var(--tour-tag-tracking);
+  text-transform: uppercase;
+  color: var(--ink-mute);
+}
+
+.arch-tour__side-tag {
+  display: block;
+  margin-bottom: var(--tour-side-tag-gap);
+  color: var(--accent);
+}
+
+/* Side emphasis is brightness, not hue (#4429 v16): the side being walked
+   reads bright white, the other subdued gray. The hooks are data attributes
+   the tour sets from its scroll state (`data-active` per side,
+   `data-active-side` on the root); the static fallback sets neither, so both
+   sides read full bright there. */
+.arch-tour__tag[data-tag="their stack"],
+.arch-tour__side-tag[data-tag="their stack"],
+.arch-tour__tag[data-tag="digithings stack"],
+.arch-tour__side-tag[data-tag="digithings stack"] {
+  color: var(--ink-mute);
+  border: 1px solid var(--hair);
+  padding: var(--tour-tag-pad-block) var(--tour-tag-pad-inline);
+  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
+}
+.arch-tour__side[data-active="true"] .arch-tour__tag,
+.arch-tour__side[data-active="true"] > .arch-tour__side-tag,
+.arch-tour[data-variant="static"] .arch-tour__tag {
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
+}
+/* The walked rail fills bright; the other rests on the hairline. The step
+   being walked keys off the same hook, both rail orientations. */
+.arch-tour__side[data-active="true"] .arch-tour__rail::before {
+  background: var(--ink);
+}
+.arch-tour__side[data-active="true"] .arch-tour__step.on {
+  border-inline-start-color: var(--ink);
+}
+.arch-tour__side[data-active="true"][data-rail="end"] .arch-tour__step.on {
+  border-inline-end-color: var(--ink);
+}
+/* The why headline follows the walk: the side being walked reads bright
+   white, the other subdued gray, cross-fading on the swap. No attribute
+   (static fallback) leaves both halves bright. Kit-level hooks — the canon
+   guard refuses color literals in app files. */
+.why-rent,
+.why-own {
+  color: var(--ink);
+  transition: color 0.35s var(--ease);
+}
+.arch-tour[data-active-side="0"] .why-own,
+.arch-tour[data-active-side="1"] .why-rent {
+  color: var(--ink-mute);
+}
+
+/* App-first dimming: configured boxes rest dimmed unless the walk lights
+   them. One rule per dimmable box — the walk's `on` always wins, so a step
+   about a dimmed box still spotlights it. */
+.arch-tour-dim-vault #arch-service-vault:not(.is-on) {
+  opacity: 0.32;
+}
+.arch-tour-dim-memory #arch-service-memory:not(.is-on) {
+  opacity: 0.32;
+}
+
+/* The side tag prints ONCE per side, on its own row at the TOP, right-aligned
+ * above the step column — never on every step and never bottom-left. */
+.arch-tour__side > .arch-tour__side-tag {
+  grid-row: 1;
+  grid-column: -2 / -1;
+  justify-self: end;
+  align-self: start;
+  margin-bottom: 0;
+  text-align: end;
+}
+
+.arch-tour__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--tour-grid-gap);
+  align-items: start;
+}
+
+.arch-tour__pin {
+  position: sticky;
+  top: calc(var(--tour-nav-h) + var(--space-3, 1rem));
+  /* Fill the space left under the nav, then centre the held block inside it.
+   * `justify-content: center` needs free space to distribute: without a
+   * min-height the pin is only as tall as its content and the block sits at
+   * the top of the viewport, which is what read as top-aligned. The min-height
+   * makes the pin symmetric about the viewport centre (it fills the box it is
+   * stuck into), and the cap keeps it shorter than the viewport so the sticky
+   * can still hold. */
+  min-height: min(
+    calc(100svh - var(--tour-nav-h) - var(--space-5, 2rem)),
+    var(--tour-pin-max)
+  );
+  display: flex;
+  flex-direction: column;
+  gap: var(--tour-pin-gap);
+  justify-content: center;
+}
+
+.arch-tour__head {
+  max-width: var(--frame-w, 1180px);
+  margin-inline: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tour-head-gap);
+}
+
+.arch-tour__head p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+.arch-tour__rail {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--tour-rail-gap);
+  min-width: 0;
+  /* The rail owns the side it draws its rule on: the step column is text-start
+   * by default, and a right-side rail flips both the rule and the alignment
+   * (see [data-rail="end"]). */
+  --rail-rule: start;
+}
+
+.arch-tour__rail::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  /* Neutral at rest — only the walked side's rail lights (ink), so no color
+     lingers on the subdued side after the swap. */
+  background: var(--hair-2);
+  transform-origin: 0 0;
+  /* The side-local walk progress, not the whole-walk value: on the rented rail
+   * the global value filled only its share and on the owned rail it was already
+   * full before that side began. Each side sets --arch-r<si> for its own rail. */
+  transform: scaleY(var(--arch-rail-p, 0));
+  transition: transform 0.35s linear;
+}
+
+.arch-tour__step {
+  display: grid;
+  gap: var(--tour-step-gap);
+  border-inline-start: 1px solid var(--hair);
+  padding-inline-start: var(--tour-step-pad);
+  opacity: 0.42;
+  transition:
+    opacity 0.6s var(--ease),
+    border-color 0.6s var(--ease);
+}
+
+.arch-tour__step.on {
+  opacity: 1;
+  border-inline-start-color: var(--accent);
+}
+
+/* Right-side rail: the vertical progress rule moves to the rail's right edge
+ * and the step text aligns to it. Set per side through `rail="end"`, so the
+ * rented column can sit right while the owned one keeps the left. */
+.arch-tour__side[data-rail="end"] .arch-tour__rail {
+  --rail-rule: end;
+}
+
+.arch-tour__side[data-rail="end"] .arch-tour__rail::before {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+  transform-origin: 100% 0;
+}
+
+.arch-tour__side[data-rail="end"] .arch-tour__step {
+  border-inline-start: 0;
+  border-inline-end: 1px solid var(--hair);
+  padding-inline-start: 0;
+  padding-inline-end: var(--tour-step-pad);
+  text-align: end;
+}
+
+.arch-tour__side[data-rail="end"] .arch-tour__step.on {
+  border-inline-end-color: var(--accent);
+}
+
+.arch-tour__side[data-rail="end"] > .arch-tour__side-tag {
+  text-align: end;
+}
+
+.arch-tour__index {
+  font-family: var(--font-mono);
+  font-size: var(--tour-tag-size);
+  letter-spacing: var(--tour-tag-tracking);
+  color: var(--ink-mute);
+}
+
+.arch-tour__label {
+  font-family: var(--font-mono);
+  font-size: var(--tour-label-size);
+  color: var(--ink);
+}
+
+.arch-tour__line {
+  font-size: var(--tour-caption-size);
+  line-height: var(--tour-caption-leading);
+  color: var(--ink-soft);
+}
+
+/*
+ * The rail is an index, not a transcript: only the step being walked prints its
+ * line. Eleven full entries made the rail 1423px tall — taller than the viewport
+ * — and a sticky element taller than the viewport cannot hold, so the whole
+ * pinned treatment slid away instead of parking.
+ */
+.arch-tour__line {
+  display: none;
+}
+
+.arch-tour__step.on .arch-tour__line {
+  display: block;
+}
+
+/*
+ * The two-column row, and with it the swap. Each side lays out as one row —
+ * diagram wide, its own step list narrow beside it — and the two sides are
+ * stacked in the same grid cell so each can slide as a unit. The owned side
+ * mirrors its tracks so its list lands in the bottom-left corner and its diagram
+ * to the right. The grid clips, which is what keeps a group parked off-screen
+ * from widening the page.
+ */
+/* ── Narrow pinned tour: ONE pane ───────────────────────────────────────────
+ * Under the two-column breakpoint both stacks share a single graph box and the
+ * walk crossfades their-stack → digithings-stack inside it, with exactly one
+ * caption under the graph.
+ *
+ * READ THIS BEFORE CHANGING A ROW HERE. The pane's height must be owned by the
+ * pane, never by a drawing. The first cut of this layout left `align-items:
+ * start` on the grid and a content-sized row, so every side was exactly as tall
+ * as its own SVG — and because both sides sat in the same cell, the *hidden*
+ * one sized the row for both. The digithings drawing is taller (400px vs 315px
+ * at 390 wide), so the visible frame hung above a pane sized by a drawing nobody
+ * could see, the drawing spilled over the caption, and resizing re-measured into
+ * a different (equally wrong) answer. `align-items: stretch` + a definite
+ * `minmax(0, 1fr)` row + `height: 100%` down the frame → stage → pane chain is
+ * what makes the frame fill the space it is given, let the drawing shrink into
+ * it (`fitFrame` re-lays its gutters to the measured box), and keep the caption
+ * below the graph at every width and after any resize.
+ */
+@media (max-width: 1023.98px) {
+  .arch-tour:not([data-variant="static"]) .arch-tour__pin {
+    /* The graph gets every pixel the header does not take: no 40rem cap (which
+       left a band under the pane) and no centring slack. `svh` keeps the pane
+       clear of the mobile URL bar; the app's max-height is the same sum. */
+    min-height: calc(100svh - var(--tour-nav-h) - var(--space-5, 2rem));
+    gap: var(--tour-pin-gap-narrow);
+    justify-content: flex-start;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    align-items: stretch;
+    gap: 0;
+    min-height: 0;
+    overflow: hidden;
+    flex: 1 1 0;
+  }
+
+  /* Both sides occupy the same cell as identical boxes, so the swap is a pure
+     crossfade: same frame, same caption baseline, no group sliding past a page
+     that is only one column wide. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side {
+    grid-area: 1 / 1;
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+    gap: var(--tour-frame-gap);
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  /* The stack tag is a label on the pane's own top edge, not a row between the
+     tabs and the graph: it sits in the frame's reserved top band, so the graph
+     starts a half-rem under the header instead of 44.6px below it. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side > .arch-tour__side-tag {
+    position: absolute;
+    inset-block-start: var(--tour-tag-inset-block);
+    inset-inline-start: var(--tour-tag-inset-inline);
+    z-index: 2;
+    margin: 0;
+    /* A zoomed box can pass under the label; the chip stays legible on it. */
+    background: var(--surface);
+    text-align: start;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__frame {
+    grid-row: 1;
+    grid-column: 1;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    /* top band = the tag; the rest is the graph */
+    padding: var(--tour-frame-pad-top) var(--tour-frame-pad-inline)
+      var(--tour-frame-pad-bottom);
+    min-height: 0;
+  }
+
+  /* Definite heights all the way down, so the SVG is sized by the pane instead
+     of the pane being sized by the SVG. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__stage,
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__pane,
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__camera {
+    min-height: 0;
+  }
+
+  /* One caption at a time, under the graph, never on top of it. The floor is
+     the tallest full caption across all eleven steps at 390 (13.25rem = the
+     six-line mobile step plus its two-line label), measured rather than
+     guessed. Keeping the floor means the frame does not resize as the walk
+     moves between a short and a long caption; the caption itself is no longer
+     clamped, so a reader never loses the end of the explanation. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__rail {
+    grid-row: 2;
+    grid-column: 1;
+    display: block;
+    min-height: var(--tour-rail-min);
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__step {
+    display: none;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__step.on {
+    display: grid;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    padding-inline: 0;
+    text-align: start;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__rail::before {
+    display: none;
+  }
+
+  /* The step line is deliberately not clamped: on a phone the caption is the
+     explanation, so it takes as many lines as it needs and the frame gives up
+     the height (the rail floor below keeps that height stable step to step).
+     Short viewports hide the line entirely and keep the label only. */
+
+  /* The price aside folds itself away whenever the rail sits under the frame
+     (there is no room to the right of it in one column); removing it here also
+     keeps it from adding an empty grid row under the caption. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side > .arch-tour__aside {
+    display: none;
+  }
+
+  /* On a phone the graph is the pane; the copy that would otherwise sit
+     between the tabs and the graph is the step caption below it. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__head p {
+    display: none;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__head {
+    gap: var(--tour-head-gap-narrow);
+  }
+
+  /* One pane: swap by crossfade instead of two groups sliding past each other,
+     so the frame is never empty mid-scroll. The fade is scroll-driven (the
+     `--arch-out` / `--arch-in` custom properties move with every frame), so the
+     sides themselves carry no transition — a leftover 1.7s transform tween was
+     what made a 1440→390 resize slide the whole pane across the phone. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--leaving {
+    transform: none;
+    transition: none;
+    opacity: calc(1 - var(--arch-out, 0));
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering {
+    transform: none;
+    transition: none;
+    opacity: var(--arch-in, 1);
+  }
+}
+
+/* A short phone cannot hold the full explanation and a readable graph at the
+   same time. Show the step label only — never a mid-sentence ellipsis — and
+   give the frame the freed height. */
+@media (max-width: 1023.98px) and (max-height: 700px) {
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__step.on .arch-tour__line {
+    display: none;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__rail {
+    min-height: var(--tour-rail-min-short);
+  }
+}
+
+@media (min-width: 1024px) {
+  .arch-tour:not([data-variant="static"]) .arch-tour__grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+    overflow: hidden;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side {
+    grid-area: 1 / 1;
+    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: var(--tour-side-row-gap) var(--tour-side-col-gap);
+    align-items: start;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering {
+    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
+  }
+
+  /* The tag sits above the RAIL column, so it must follow the rail as the
+   * tracks mirror: right column on the leaving side, left column on the
+   * entering side. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side > .arch-tour__side-tag {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering > .arch-tour__side-tag {
+    grid-column: 1;
+    /* The owned column sits left, so its tag sits top-LEFT with it. */
+    justify-self: start;
+    text-align: start;
+  }
+
+  /* Both runtime children are pinned to row 2: the tag owns row 1, and the
+   * owned side lists its columns in the opposite order, so grid auto-placement
+   * would otherwise drop the rail onto a third row below the diagram (which also
+   * made the pin taller than the viewport, so it could not hold). */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__frame,
+  .arch-tour:not([data-variant="static"]) .arch-tour__side .arch-tour__rail {
+    grid-row: 2;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering .arch-tour__frame {
+    grid-column: 2;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering .arch-tour__rail {
+    grid-column: 1;
+  }
+
+  /* An aside takes a third row under the rail and sinks to the frame's
+   * bottom edge; the frame spans all three rows so the pin height holds. */
+  .arch-tour:not([data-variant="static"]) .arch-tour__side:has(> .arch-tour__aside) {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side:where(:has(> .arch-tour__aside)) .arch-tour__frame {
+    grid-row: 2 / 4;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side > .arch-tour__aside {
+    grid-row: 3;
+    grid-column: 2;
+    align-self: end;
+    min-width: 0;
+  }
+
+  .arch-tour:not([data-variant="static"]) .arch-tour__side--entering > .arch-tour__aside {
+    grid-column: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .arch-tour__camera,
+  .arch-tour__frame,
+  .arch-tour__rail,
+  .arch-tour__side,
+  .arch-tour__pane,
+  .arch-tour__spot,
+  .arch-tour__step,
+  .arch-tour__rail::before {
+    transition: none;
+  }
+
+  .arch-tour__spot::after {
+    animation: none;
+    opacity: 1;
+  }
+
+  /* The component renders the static treatment under reduced motion, so the
+   * animated markup is not on the page — this is belt-and-braces for the case
+   * where the media query flips after mount. */
+  .arch-tour__pane,
+  .arch-tour__frame,
+  .arch-tour__rail,
+  .arch-tour__side {
+    transform: none;
+  }
+
+  .arch-tour__rail::before {
+    transform: none;
+    display: none;
+  }
+}
+
+/*
+ * mermaid parks a boundary's title on the boundary's own top edge, so it lands
+ * on top of whatever the force layout put nearest. A surface-coloured halo
+ * behind the glyphs (paint-order: stroke) makes it legible without moving it.
+ */
+.arch-figure__body svg .architecture-groups text {
+  paint-order: stroke;
+  stroke: var(--surface);
+  stroke-width: 4px;
+  stroke-linejoin: round;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * The kit's own architecture SVG (architecture-svg.tsx)
+ *
+ * Drawn, not solved: a box with the label inside it, a 22px kind glyph on the
+ * left, orthogonal hairline connectors, and the boundary title ABOVE its rule
+ * instead of painted onto it. Mono, squared, one accent — the terminal look.
+ * The tour's glow rides the same .is-on hook the mermaid path used, so nothing
+ * in the tour changed when the renderer did.
+ * ════════════════════════════════════════════════════════════════════════════ */
+
+.arch-svg {
+  /* Component sizing tokens for the drawn diagram. SVG user units, so px is
+     the honest unit for label steps; hairlines and the paint-order halos stay
+     literal. */
+  --svg-text-size: var(--text-xs, 11px);
+  --svg-tracking: 0.02em;
+  --svg-group-label-size: 10px;
+  --svg-group-label-tracking: 0.08em;
+  --svg-edge-label-size: 10px;
+  --svg-node-label-size: 11.5px;
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  overflow: visible;
+  font-family: var(--font-mono);
+}
+
+.arch-svg text {
+  font-family: var(--font-mono);
+  font-size: var(--svg-text-size);
+  letter-spacing: var(--svg-tracking);
+}
+
+/* ── boundaries ─────────────────────────────────────────────────────────── */
+
+.arch-svg .arch-group__box {
+  fill: color-mix(in srgb, var(--ink) 3%, transparent);
+  stroke: var(--hair-2);
+  stroke-width: 1;
+  stroke-dasharray: 4 3;
+  transition: stroke 0.25s var(--ease), fill 0.25s var(--ease);
+}
+
+.arch-svg .arch-group.is-on .arch-group__box {
+  stroke: color-mix(in srgb, var(--accent) 55%, var(--hair-2));
+  fill: color-mix(in srgb, var(--accent) 5%, transparent);
+}
+
+.arch-svg .arch-group__label {
+  fill: var(--ink-mute);
+  font-size: var(--svg-group-label-size);
+  letter-spacing: var(--svg-group-label-tracking);
+  text-transform: uppercase;
+}
+
+.arch-svg .arch-group.is-on .arch-group__label {
+  fill: var(--ink-soft);
+}
+
+/* ── connectors ─────────────────────────────────────────────────────────── */
+
+.arch-svg .arch-edge__line {
+  fill: none;
+  stroke: var(--hair-2);
+  stroke-width: 1;
+  opacity: 0.5;
+  transition: stroke 0.25s var(--ease), opacity 0.25s var(--ease);
+}
+
+.arch-svg .arch-edge.is-on .arch-edge__line {
+  stroke: color-mix(in srgb, var(--accent) 60%, var(--hair-2));
+  opacity: 1;
+}
+
+.arch-svg .arch-arrow {
+  fill: var(--hair-2);
+  stroke: none;
+}
+
+.arch-svg .arch-edge.is-on .arch-arrow {
+  fill: color-mix(in srgb, var(--accent) 60%, var(--hair-2));
+}
+
+.arch-svg .arch-edge__label {
+  fill: var(--ink-soft);
+  font-size: var(--svg-edge-label-size);
+  text-anchor: middle;
+  paint-order: stroke;
+  stroke: var(--surface);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+/* ── services ───────────────────────────────────────────────────────────── */
+
+.arch-svg .arch-node__box {
+  fill: var(--surface);
+  stroke: var(--hair);
+  stroke-width: 1;
+  transition: stroke 0.25s var(--ease), fill 0.25s var(--ease);
+}
+
+.arch-svg .arch-node.is-on .arch-node__box {
+  fill: color-mix(in srgb, var(--accent) 6%, var(--surface));
+  stroke: color-mix(in srgb, var(--accent) 55%, var(--hair));
+}
+
+.arch-svg .arch-node__glyph {
+  color: var(--ink-mute);
+  transition: color 0.25s var(--ease);
+}
+
+.arch-svg .arch-node.is-on .arch-node__glyph {
+  color: var(--accent);
+}
+
+.arch-svg .arch-node__label {
+  fill: var(--ink-soft);
+  font-size: var(--svg-node-label-size);
+  transition: fill 0.25s var(--ease);
+}
+
+.arch-svg .arch-node.is-on .arch-node__label {
+  fill: var(--ink);
+}
+
+.arch-svg .arch-node__glyph svg {
+  overflow: visible;
+}
+
+/* ── morph variant (app-first why band) ────────────────────────────────────
+ * Two diagrams share the frame: the provider stack rests full-lit on one
+ * side while the other redraws box by box. No swipe — both transforms are
+ * neutralised and the grid runs two columns. Boxes that have not swapped
+ * yet rest dimmed (the walk's `on` always wins); boxes that never swap
+ * (your product, sources, review) stay bright.
+ */
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__grid {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0 var(--tour-side-col-gap);
+  overflow: visible;
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side {
+  grid-area: auto;
+  grid-template-columns: minmax(0, 1fr);
+  transform: none;
+}
+.arch-tour.arch-tour-morph .arch-tour__side--leaving,
+.arch-tour.arch-tour-morph .arch-tour__side--entering {
+  transform: none;
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side--entering {
+  grid-template-columns: minmax(0, 1fr);
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side > .arch-tour__side-tag {
+  grid-column: 1;
+  justify-self: start;
+  text-align: start;
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side .arch-tour__frame,
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side .arch-tour__rail {
+  grid-row: auto;
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side--entering .arch-tour__frame,
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__side--entering .arch-tour__rail {
+  grid-column: auto;
+}
+.arch-tour.arch-tour-morph .arch-tour__side--entering [id^="arch-service-"]:not(.is-on):not(#arch-service-app):not(#arch-service-review):not(#arch-service-feeds):not(#arch-service-filings):not(#arch-service-sources) {
+  opacity: 0.32;
+}
+@media (max-width: 1023px) {
+  .arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* The why band narrates from its own column, so the tour's step lists would
+   be a second copy and would push the pin taller than the viewport. The
+   diagrams sit under the nav and above the sticky invoice. */
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__pin {
+  min-height: 0;
+  justify-content: flex-start;
+  top: calc(var(--dq-nav-h, 4.5rem) + var(--tour-morph-pin-offset));
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__rail {
+  display: none;
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-tour__frame {
+  padding: var(--tour-morph-frame-pad-block) var(--tour-morph-frame-pad-inline);
+}
+.arch-tour.arch-tour-morph:not([data-variant="static"]) .arch-svg {
+  width: 100%;
+  height: auto;
+  max-height: min(
+    var(--tour-morph-svg-max),
+    calc(100svh - var(--dq-nav-h, 4.5rem) - var(--tour-morph-svg-reserve))
+  );
+}
+
+/* Walk-through text rail (AppFirstSection): remounts per step (key), so a
+ * short rise-and-fade marks each beat of the scroll journey. */
+@keyframes why-rail-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.why-rail-step {
+  animation: why-rail-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ── build entrance ─────────────────────────────────────────────────────────
+ * An ancestor carrying `.arch-build` makes every `.arch-svg` inside draw
+ * itself: boundaries fade up, each box traces its outline in reading order and
+ * then fills, and each connector draws once both of its ends exist
+ * (`--arch-i`, set per element by the renderer). `.arch-build-pending` holds
+ * the drawing blank until the caller starts the build. The end state is the
+ * resting style, so the caller drops the class when the build is done and
+ * nothing moves. */
+.arch-build-pending .arch-svg .arch-group,
+.arch-build-pending .arch-svg .arch-node,
+.arch-build-pending .arch-svg .arch-edge {
+  opacity: 0;
+}
+
+.arch-build .arch-svg .arch-group {
+  animation: arch-build-fade 0.6s var(--ease) both;
+  animation-delay: calc(var(--arch-i, 0) * 110ms);
+}
+
+/* Opacity only on the box group: the tour measures box rects for its camera,
+   and a scale here would read a few pixels short mid-build. */
+.arch-build .arch-svg .arch-node {
+  animation: arch-build-fade 0.4s var(--ease) both;
+  animation-delay: calc(180ms + var(--arch-i, 0) * 75ms);
+}
+
+.arch-build .arch-svg .arch-node__box {
+  stroke-dasharray: 1;
+  animation:
+    arch-build-draw 0.55s var(--ease) both,
+    arch-build-fill 0.35s var(--ease) both;
+  animation-delay:
+    calc(180ms + var(--arch-i, 0) * 75ms),
+    calc(480ms + var(--arch-i, 0) * 75ms);
+}
+
+.arch-build .arch-svg .arch-node__glyph,
+.arch-build .arch-svg .arch-node__label {
+  animation: arch-build-fade 0.35s var(--ease) both;
+  animation-delay: calc(420ms + var(--arch-i, 0) * 75ms);
+}
+
+.arch-build .arch-svg .arch-edge {
+  animation: arch-build-fade 0.2s linear both;
+  animation-delay: calc(560ms + var(--arch-i, 0) * 75ms);
+}
+
+.arch-build .arch-svg .arch-edge__line {
+  stroke-dasharray: 1;
+  animation: arch-build-draw 0.5s var(--ease) both;
+  animation-delay: calc(560ms + var(--arch-i, 0) * 75ms);
+}
+
+.arch-build .arch-svg .arch-edge__label {
+  animation: arch-build-fade 0.3s var(--ease) both;
+  animation-delay: calc(900ms + var(--arch-i, 0) * 75ms);
+}
+
+@keyframes arch-build-fade {
+  from { opacity: 0; }
+}
+
+@keyframes arch-build-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes arch-build-fill {
+  from { fill-opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .arch-svg .arch-group__box,
+  .arch-svg .arch-edge__line,
+  .arch-svg .arch-node__box,
+  .arch-svg .arch-node__glyph,
+  .arch-svg .arch-node__label {
+    transition: none;
+  }
+  .why-rail-step {
+    animation: none;
+  }
+  .arch-build-pending .arch-svg .arch-group,
+  .arch-build-pending .arch-svg .arch-node,
+  .arch-build-pending .arch-svg .arch-edge {
+    opacity: 1;
+  }
+  .arch-build .arch-svg * {
+    animation: none !important;
+  }
+}
+
+/* Terminal schematic — fully drawn flow. The window is a dark terminal even
+   when the page is light: light theme flips --term-* and --surface to paper,
+   so the schematic pins the dark ground and the dark semantic hues locally.
+   Structure stays light gray; color is only for live data. */
+.tschem {
+  --term-bg: #08090b;
+  --term-ink: #e7eaec;
+  --term-mute: #7e858b;
+  --term-hair: rgba(255, 255, 255, 0.09);
+  --warn: #e0b341;
+  --up: #3dd6c4;
+  --down: #e5533e;
+  --accent-digisearch: #5aa3c4;
+  --accent-digitrace: #6fa3a3;
+  /* Component sizing tokens (wave 1). A terminal cell has its own type steps and
+     gutters, so they are named here instead of borrowed from the page scale.
+     Hairlines, the dotted rules and the keyframe end-points stay literal. */
+  --tschem-size: var(--type-meta, 0.75rem);
+  --tschem-leading: 1.45;
+  --tschem-pad-block: 0.4rem;
+  --tschem-pad-inline: 0.7rem;
+  --tschem-title-tracking: 0.04em;
+  --tschem-body-pad-top: 0.75rem;
+  --tschem-body-pad-bottom: 0.55rem;
+  --tschem-body-gap: 0.85rem;
+  --tschem-legend-col-min: 7.5rem;
+  --tschem-legend-col-max: 9.5rem;
+  --tschem-notes-col-min: 10rem;
+  --tschem-notes-col-max: 16rem;
+  --tschem-legend-gap: 0.35rem;
+  --tschem-legend-item-gap: 0.4rem;
+  --tschem-notes-gap: 0.4rem;
+  --tschem-note-item-gap: 0.45rem;
+  --tschem-swatch: 0.55rem;
+  --tschem-stack-pad: 0.95rem;
+  --tschem-stack-rule-inset: 0.28rem;
+  --tschem-stack-rule-top: 0.2rem;
+  --tschem-stack-rule-bottom: 1.6rem;
+  --tschem-small-size: 0.68rem;
+  --tschem-drop-size: 0.7rem;
+  --tschem-join-h: 0.85rem;
+  --tschem-join-inset: 0.65rem;
+  --tschem-join-arrow-x: -0.32rem;
+  --tschem-join-arrow-y: -0.45rem;
+  --tschem-bus-h: 1rem;
+  --tschem-bus-gap: 0.3rem;
+  --tschem-cluster-top: -0.2rem;
+  --tschem-cluster-tracking: 0.14em;
+  --tschem-node-min: 8.5rem;
+  --tschem-node-gap: 0.4rem;
+  --tschem-box-gap: 0.15rem;
+  --tschem-box-pad-block: 0.35rem;
+  --tschem-box-pad-inline: 0.45rem;
+  --tschem-state-leading: 1.2;
+  --tschem-loop-gap: 0.55rem;
+  --tschem-loop-pad: 0.35rem;
+  --tschem-receipt-h: 4.8rem;
+  --tschem-receipt-pad-top: 0.45rem;
+  --tschem-receipt-track-gap: 0.12rem;
+  --tschem-foot-gap-block: 0.7rem;
+  --tschem-foot-gap-inline: 0.9rem;
+  --tschem-meter-w: 4.5rem;
+  --tschem-meter-h: 0.35rem;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  min-width: 0;
+  background: var(--term-bg);
+  color: var(--term-ink);
+  border: 1px solid var(--term-hair);
+  border-radius: 0;
+  font-family: var(--font-mono);
+  font-size: var(--tschem-size);
+  line-height: var(--tschem-leading);
+  font-variant-numeric: tabular-nums;
+}
+
+.tschem__title {
+  margin: 0;
+  padding: var(--tschem-pad-block) var(--tschem-pad-inline);
+  border-bottom: 1px solid var(--term-hair);
+  color: var(--term-mute);
+  letter-spacing: var(--tschem-title-tracking);
+}
+
+.tschem__body {
+  display: grid;
+  grid-template-columns:
+    minmax(var(--tschem-legend-col-min), var(--tschem-legend-col-max))
+    minmax(0, 1fr)
+    minmax(var(--tschem-notes-col-min), var(--tschem-notes-col-max));
+  gap: var(--tschem-body-gap);
+  padding: var(--tschem-body-pad-top) var(--tschem-pad-inline)
+    var(--tschem-body-pad-bottom);
+}
+
+.tschem__legend,
+.tschem__notes,
+.tschem__rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tschem__legend {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tschem-legend-gap);
+  color: var(--term-mute);
+}
+
+.tschem__legend li {
+  display: flex;
+  align-items: center;
+  gap: var(--tschem-legend-item-gap);
+}
+
+.tschem__swatch {
+  width: var(--tschem-swatch);
+  height: var(--tschem-swatch);
+  border: 1px solid currentColor;
+  flex: none;
+}
+
+.tschem__swatch[data-tone="main"] { color: var(--warn); }
+.tschem__swatch[data-tone="model"] { color: var(--accent-digisearch); }
+.tschem__swatch[data-tone="side"] { color: var(--accent-digitrace); }
+.tschem__swatch[data-tone="ok"] { color: var(--up); }
+.tschem__swatch[data-tone="fallback"] { color: var(--down); }
+.tschem__swatch[data-tone="pending"] { color: var(--term-mute); }
+
+.tschem__stack {
+  position: relative;
+  min-width: 0;
+  padding-inline-start: var(--tschem-stack-pad);
+}
+
+.tschem__stack::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: var(--tschem-stack-rule-inset);
+  top: var(--tschem-stack-rule-top);
+  bottom: var(--tschem-stack-rule-bottom);
+  border-inline-start: 1px dotted var(--term-mute);
+}
+
+.tschem__drop {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  color: var(--warn);
+  font-size: var(--tschem-drop-size);
+  line-height: 1;
+}
+
+.tschem[data-motion="on"] .tschem__drop {
+  animation: tschem-drop 2.6s linear infinite;
+}
+
+.tschem__step {
+  display: flex;
+  flex-direction: column;
+}
+
+.tschem__join {
+  display: block;
+  height: var(--tschem-join-h);
+  margin-inline-start: var(--tschem-join-inset);
+  border-inline-start: 1px dotted var(--term-mute);
+  position: relative;
+}
+
+.tschem__join::after {
+  content: "↓";
+  position: absolute;
+  left: var(--tschem-join-arrow-x);
+  bottom: var(--tschem-join-arrow-y);
+  color: var(--term-mute);
+  font-size: var(--tschem-small-size);
+  line-height: 1;
+}
+
+.tschem__bus {
+  position: relative;
+  height: var(--tschem-bus-h);
+  margin: 0 0 var(--tschem-bus-gap);
+  border-bottom: 1px dotted var(--term-mute);
+}
+
+.tschem__par {
+  color: var(--term-mute);
+  font-size: var(--tschem-small-size);
+}
+
+.tschem__cluster {
+  position: absolute;
+  left: 0;
+  top: var(--tschem-cluster-top);
+  color: var(--accent-digitrace);
+  letter-spacing: var(--tschem-cluster-tracking);
+  font-size: var(--tschem-small-size);
+  visibility: hidden;
+}
+
+.tschem__row[data-live="true"] .tschem__cluster {
+  visibility: visible;
+}
+
+.tschem[data-motion="on"] .tschem__row[data-live="true"] .tschem__cluster {
+  animation: tschem-bus 1.8s linear infinite;
+}
+
+.tschem__nodes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--tschem-node-min), 1fr));
+  gap: var(--tschem-node-gap);
+}
+
+.tschem__box {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--tschem-box-gap);
+  border: 1px solid var(--term-hair);
+  background: transparent;
+  color: var(--term-ink);
+  padding: var(--tschem-box-pad-block) var(--tschem-box-pad-inline);
+}
+
+.tschem__name {
+  min-width: 0;
+  color: var(--term-ink);
+  overflow-wrap: break-word;
+}
+
+.tschem__state {
+  align-self: flex-end;
+  white-space: nowrap;
+  line-height: var(--tschem-state-leading);
+  color: var(--term-mute);
+}
+
+.tschem__box[data-status="running"][data-tone="main"] {
+  border-color: var(--warn);
+}
+.tschem__box[data-status="running"][data-tone="main"] .tschem__state {
+  color: var(--warn);
+}
+.tschem__box[data-status="running"][data-tone="model"] {
+  border-color: var(--accent-digisearch);
+}
+.tschem__box[data-status="running"][data-tone="model"] .tschem__state {
+  color: var(--accent-digisearch);
+}
+.tschem__box[data-status="running"][data-tone="side"] {
+  border-color: var(--accent-digitrace);
+}
+.tschem__box[data-status="running"][data-tone="side"] .tschem__state {
+  color: var(--accent-digitrace);
+}
+.tschem__box[data-status="running"][data-tone="fallback"] {
+  border-color: var(--down);
+}
+.tschem__box[data-status="running"][data-tone="fallback"] .tschem__state {
+  color: var(--down);
+}
+.tschem__box[data-status="ok"] {
+  border-color: var(--up);
+}
+.tschem__box[data-status="ok"] .tschem__state {
+  color: var(--up);
+}
+.tschem__box[data-status="pending"] {
+  border-style: dashed;
+}
+.tschem__box[data-status="pending"] .tschem__name,
+.tschem__box[data-status="pending"] .tschem__state {
+  color: var(--term-mute);
+}
+.tschem__box[data-status="hold"] {
+  border-color: var(--down);
+}
+.tschem__box[data-status="hold"] .tschem__state {
+  color: var(--down);
+}
+
+.tschem__loop {
+  margin: var(--tschem-loop-gap) 0 0;
+  padding-top: var(--tschem-loop-pad);
+  border-top: 1px dotted var(--term-mute);
+  color: var(--term-mute);
+}
+
+.tschem__notes {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tschem-notes-gap);
+  color: var(--term-mute);
+}
+
+.tschem__notes li {
+  display: flex;
+  gap: var(--tschem-note-item-gap);
+}
+
+.tschem__num {
+  flex: none;
+  color: var(--term-ink);
+}
+
+.tschem__receipt {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  height: var(--tschem-receipt-h);
+  overflow: hidden;
+  border-top: 1px solid var(--term-hair);
+  background: var(--term-bg);
+  color: var(--term-mute);
+  padding: var(--tschem-receipt-pad-top) var(--tschem-pad-inline)
+    var(--tschem-pad-block);
+}
+
+.tschem__receipt-track {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tschem-receipt-track-gap);
+}
+
+.tschem[data-motion="on"] .tschem__receipt-track {
+  animation: tschem-log 10s linear infinite;
+}
+
+.tschem__foot {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--tschem-foot-gap-block) var(--tschem-foot-gap-inline);
+  margin: 0;
+  border-top: 1px solid var(--term-hair);
+  background: var(--term-bg);
+  padding: var(--tschem-pad-block) var(--tschem-pad-inline);
+  color: var(--term-mute);
+}
+
+.tschem__foot b {
+  font-weight: 500;
+  color: var(--up);
+}
+
+.tschem__phrase {
+  color: var(--warn);
+}
+
+.tschem__meter {
+  width: var(--tschem-meter-w);
+  height: var(--tschem-meter-h);
+  border: 1px solid var(--term-hair);
+}
+
+.tschem__meter > span {
+  display: block;
+  height: 100%;
+  background: var(--up);
+  transition: none;
+}
+
+@keyframes tschem-drop {
+  from { top: 0; }
+  to { top: calc(100% - 1.7rem); }
+}
+
+@keyframes tschem-bus {
+  from { transform: translateX(0); }
+  to { transform: translateX(65%); }
+}
+
+@keyframes tschem-log {
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+}
+
+@media (max-width: 800px) {
+  .tschem__body {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tschem[data-motion="on"] .tschem__drop,
+  .tschem[data-motion="on"] .tschem__row[data-live="true"] .tschem__cluster,
+  .tschem[data-motion="on"] .tschem__receipt-track {
+    animation: none;
+  }
+  .tschem__meter > span {
+    transition: none;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * Pipeline flow — DIG-3312.
+ *
+ * Replaces the terminal schematic inside the agent-orchestration cards. No
+ * legend, no notes column, no receipt: the shape of the chain (how many
+ * stages, which ones fan out) already tells the story, and the only job left
+ * for motion is to make it look alive. A pulse rides every conduit on an
+ * infinite loop, staggered by `--pflow-i` (the stage's own depth), so a
+ * four-stage chain and a six-stage chain read as two different rhythms
+ * without any per-card wiring — the data shapes the motion, not the other
+ * way round.
+ * ════════════════════════════════════════════════════════════════════════════ */
+
+.pflow {
+  --flow-bg: #08090b;
+  --flow-ink: #e7eaec;
+  --flow-mute: #7e858b;
+  --flow-hair: rgba(255, 255, 255, 0.1);
+  --flow-main: #e0b341;
+  --flow-model: #5aa3c4;
+  --flow-side: #6fa3a3;
+  --flow-fallback: #e5533e;
+  /* Component sizing tokens (wave 1). `--flow-*` is the colour set above, so
+     these take the `--pflow-` prefix to stay out of its way. */
+  --pflow-gap: 0.6rem;
+  --pflow-size: 0.78rem;
+  --pflow-leading: 1.4;
+  --pflow-pad-block-start: 1.1rem;
+  --pflow-pad-inline: 1rem;
+  --pflow-pad-block-end: 0.9rem;
+  --pflow-conduit-h: 1.5rem;
+  --pflow-pulse-size: 5px;
+  --pflow-pulse-inset-x: -2px;
+  --pflow-pulse-inset-y: -3px;
+  --pflow-nodes-gap: var(--space-2);
+  --pflow-parallel-pad-top: 1.3rem;
+  --pflow-bus-size: 0.62rem;
+  --pflow-bus-tracking: 0.08em;
+  --pflow-node-pad-block: 0.4rem;
+  --pflow-node-pad-inline: 0.75rem;
+  --pflow-loop-margin: 0.35rem;
+  --pflow-loop-pad: 0.6rem;
+  --pflow-loop-size: 0.7rem;
+  --pflow-loop-gap: var(--space-2);
+  --pflow-arc-size: 0.7rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pflow-gap);
+  min-width: 0;
+  background: var(--flow-bg);
+  color: var(--flow-ink);
+  border: 1px solid var(--flow-hair);
+  padding: var(--pflow-pad-block-start) var(--pflow-pad-inline)
+    var(--pflow-pad-block-end);
+  font-family: var(--font-mono);
+  font-size: var(--pflow-size);
+  line-height: var(--pflow-leading);
+}
+
+.pflow__chain {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.pflow__stage {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* The conduit is the whole story's motion: a hairline trunk with a bright
+   dot travelling its length forever, delayed per stage so the eye reads a
+   single signal falling through the chain rather than four things blinking
+   independently. */
+.pflow__conduit {
+  position: relative;
+  align-self: center;
+  width: 1px;
+  height: var(--pflow-conduit-h);
+  background: var(--flow-hair);
+}
+
+.pflow__conduit[data-pending="true"] {
+  background-image: linear-gradient(var(--flow-mute) 0 2px, transparent 2px 5px);
+  background-repeat: repeat-y;
+  background-size: 1px 5px;
+  background-color: transparent;
+}
+
+.pflow__pulse {
+  position: absolute;
+  inset-inline-start: var(--pflow-pulse-inset-x);
+  top: var(--pflow-pulse-inset-y);
+  width: var(--pflow-pulse-size);
+  height: var(--pflow-pulse-size);
+  border-radius: 50%;
+  background: var(--flow-side);
+  box-shadow: 0 0 6px 1px var(--flow-side);
+  opacity: 0;
+}
+
+.pflow[data-motion="on"] .pflow__conduit:not([data-pending="true"]) .pflow__pulse {
+  animation: pflow-fall 2.6s linear infinite;
+  animation-delay: calc(var(--pflow-i, 1) * -0.45s);
+}
+
+.pflow__nodes {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: var(--pflow-nodes-gap);
+  position: relative;
+  min-width: 0;
+}
+
+.pflow__nodes[data-parallel="true"] {
+  padding-top: var(--pflow-parallel-pad-top);
+}
+
+.pflow__bus {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--pflow-bus-size);
+  letter-spacing: var(--pflow-bus-tracking);
+  text-transform: uppercase;
+  color: var(--flow-mute);
+  white-space: nowrap;
+}
+
+.pflow__node {
+  min-width: 0;
+  border: 1px solid var(--flow-hair);
+  padding: var(--pflow-node-pad-block) var(--pflow-node-pad-inline);
+  color: var(--flow-ink);
+  text-align: center;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.pflow__node[data-tone="main"] { border-color: color-mix(in srgb, var(--flow-main) 55%, var(--flow-hair)); }
+.pflow__node[data-tone="model"] { border-color: color-mix(in srgb, var(--flow-model) 55%, var(--flow-hair)); }
+.pflow__node[data-tone="side"] { border-color: color-mix(in srgb, var(--flow-side) 45%, var(--flow-hair)); }
+.pflow__node[data-tone="fallback"] { border-color: color-mix(in srgb, var(--flow-fallback) 55%, var(--flow-hair)); }
+.pflow__node[data-tone="pending"] {
+  border-style: dashed;
+  color: var(--flow-mute);
+}
+
+.pflow[data-motion="on"] .pflow__node[data-tone="main"] { animation: pflow-glow 3.2s ease-in-out infinite; }
+.pflow[data-motion="on"] .pflow__node[data-tone="model"] { animation: pflow-glow 3.2s ease-in-out infinite; animation-delay: 0.6s; }
+.pflow[data-motion="on"] .pflow__node[data-tone="side"] { animation: pflow-glow 3.2s ease-in-out infinite; animation-delay: 1.2s; }
+
+.pflow__node[data-tone="main"] { --flow-glow: var(--flow-main); }
+.pflow__node[data-tone="model"] { --flow-glow: var(--flow-model); }
+.pflow__node[data-tone="side"] { --flow-glow: var(--flow-side); }
+
+.pflow__loop {
+  margin: var(--pflow-loop-margin) 0 0;
+  padding-top: var(--pflow-loop-pad);
+  border-top: 1px dotted var(--flow-hair);
+  color: var(--flow-mute);
+  font-size: var(--pflow-loop-size);
+  display: flex;
+  align-items: center;
+  gap: var(--pflow-loop-gap);
+}
+
+.pflow__loop-arc {
+  display: inline-block;
+  width: var(--pflow-arc-size);
+  height: var(--pflow-arc-size);
+  flex: none;
+  border: 1px dotted var(--flow-mute);
+  border-radius: 50%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.pflow[data-motion="on"] .pflow__loop-arc {
+  animation: pflow-spin 3s linear infinite;
+}
+
+@keyframes pflow-fall {
+  0% { top: -3px; opacity: 0; }
+  8% { opacity: 1; }
+  92% { opacity: 1; }
+  100% { top: calc(100% - 2px); opacity: 0; }
+}
+
+@keyframes pflow-glow {
+  0%, 100% { box-shadow: none; }
+  50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--flow-glow) 55%, transparent); }
+}
+
+@keyframes pflow-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (max-width: 480px) {
+  .pflow__nodes {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .pflow__node {
+    text-align: start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pflow[data-motion="on"] .pflow__conduit:not([data-pending="true"]) .pflow__pulse,
+  .pflow[data-motion="on"] .pflow__node[data-tone="main"],
+  .pflow[data-motion="on"] .pflow__node[data-tone="model"],
+  .pflow[data-motion="on"] .pflow__node[data-tone="side"],
+  .pflow[data-motion="on"] .pflow__loop-arc {
+    animation: none;
+  }
+}