/* ==========================================================================
   Use case motion graphics and the shared .uv-* motion vocabulary
   Owner: motion. Loaded on every page. Markup: tools/ucviz.mjs. Motion: assets/js/ucviz.js.
   The static markup is the final frame; JS only adds start states when it animates.
   Page hooks (set on any ancestor):
     --uv-shadow   focal shadow, e.g. var(--sh-float-d) on ink or var(--sh-float-l) on light
     --uv-bg       stage background        --uv-radius  stage corner radius
     --uv-ico      platform icon circle    --uv-glyph   platform glyph size
     --uv-ico-bg / --uv-ico-fg / --uv-ico-line / --uv-ico-gap   platform icon colors and spacing
   Full page-owner guide: scratchpad API-motion.md (placeholders, classes, aomMotion, data attributes).
   ========================================================================== */

/* ---------- Figure and stage ---------- */
.ucviz {
  --uv-ink: #1a1614;
  --uv-line: var(--line-d, rgba(245, 239, 230, .10));
  container-type: inline-size;
  position: relative; display: block; width: 100%; min-width: 0; margin: 0;
}
.uv-stage {
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream, #f5efe6);
  background: var(--uv-bg, radial-gradient(120% 90% at 85% 0%, rgba(184, 41, 31, .30), transparent 60%), #1a1614);
  border: 1px solid var(--uv-line, rgba(245, 239, 230, .10));
  border-radius: var(--uv-radius, var(--r-md, 20px));
  box-shadow: var(--sh-raise, inset 0 1px 0 rgba(245, 239, 230, .05)), var(--uv-shadow, 0 0 #0000);
}
.uv-stage--hero { border-radius: var(--uv-radius, var(--r-lg, 28px)); }
/* the top hairline glow when site.css .edge-glow is not around yet */
.uv-stage--hero::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(239, 90, 76, .75), transparent);
}
.ucviz--hero .uv-stage { --uv-pad: calc(18 / 620 * 100cqi); }
@container (max-width: 559px) { .ucviz--hero .uv-stage { --uv-pad: calc(16 / 360 * 100cqi); } }
.ucviz--card .uv-stage { --uv-pad: max(14px, calc(16 / 360 * 100cqi)); }

.uv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  padding: 16px var(--uv-pad) 14px; border-bottom: 1px solid var(--uv-line);
}
.uv-head__name {
  font: 500 11px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-light, #cfc6bc);
}
.uv-canvas { position: relative; padding: 10px 0 6px; }
.uv-stage--card .uv { padding: 0; }

/* the two hero compositions: landscape from a 560px container, portrait below */
.uv { display: block; width: 100%; height: auto; overflow: visible; margin-inline: auto; }
/* safety caps: in a wider stage the drawing centers instead of ballooning (labels stay near their design size) */
.uv--land { max-width: 860px; }
.uv--port { max-width: 420px; }
.uv--card { max-width: 480px; }
.uv--port { display: none; }
@container (max-width: 559px) {
  .uv--land { display: none; }
  .uv--port { display: block; }
}

/* ---------- Caption rail: the main clarity device ---------- */
.uv-cap { position: relative; padding: 14px var(--uv-pad) 16px; border-top: 1px solid var(--uv-line); }
.uv-stage--card .uv-cap { padding: 12px var(--uv-pad) 14px; }
.uv-cap__phase {
  display: none; margin: 0 0 6px;
  font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-bright, #ef5a4c);
}
.uv-cap__text {
  display: grid; margin: 0; min-height: 1.45em;
  font: 400 13px/1.45 Geist, system-ui, sans-serif; letter-spacing: -.005em; color: var(--cream, #f5efe6);
  text-wrap: balance;
}
.uv-stage--card .uv-cap__text { min-height: 1.45em; }
.uv-stage--card .uv-cap__foot { min-height: 31px; align-items: flex-start; align-content: flex-start; }
/* the swap runs in sequence, so two sentences never stack: the old line fades in place (.15s, then drops back
   below, unseen), the new line rises in after it (.14s delay) */
.uv-cap__line { grid-area: 1 / 1; opacity: 0; transform: translateY(5px); transition: opacity .15s var(--ease, ease), transform 0s linear .16s; }
.uv-cap__line.is-on { opacity: 1; transform: none; transition: opacity .3s var(--ease, ease) .14s, transform .45s var(--ease-out, ease) .14s; }
.uv-cap--instant .uv-cap__line { transition: none; }
.uv-cap__foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; }
.uv-cap__note {
  font: 500 10px/1.3 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(168, 159, 150, .85); white-space: nowrap;
}

/* progress dots, one per phase; hero shows the phase name over each dot */
.uv-steps { display: flex; flex: 1 1 auto; min-width: min(100%, 260px); max-width: 520px; margin: 0; padding: 0; list-style: none; }
.uv-steps li { position: relative; flex: 1 1 0; min-width: 0; padding-top: 0; height: 8px; }
.uv-steps li:last-child { flex: 0 0 auto; width: 8px; }
.uv-cap--hero .uv-steps li { height: auto; padding-top: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.uv-steps li::before {
  content: ''; position: relative; z-index: 1; display: block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(245, 239, 230, .3); background: var(--uv-ink); transition: background-color .3s var(--ease, ease), border-color .3s, box-shadow .3s;
}
.uv-steps li::after {
  content: ''; position: absolute; left: 12px; right: 4px; bottom: 3.5px; height: 1px; background: rgba(245, 239, 230, .14);
  transform-origin: left; transition: background-color .3s var(--ease, ease);
}
.uv-steps li:last-child::after { display: none; }
.uv-steps li.is-done::before { background: rgba(245, 239, 230, .6); border-color: transparent; }
.uv-steps li.is-done::after { background: rgba(245, 239, 230, .38); }
.uv-steps li.is-on::before { background: var(--red-bright, #ef5a4c); border-color: transparent; box-shadow: 0 0 0 4px rgba(239, 90, 76, .18), 0 0 12px rgba(239, 90, 76, .6); }
.uv-steps__n {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px;
  font: 400 11.5px/1.2 Geist, system-ui, sans-serif; color: var(--muted, #a89f96); transition: color .3s var(--ease, ease);
}
.uv-cap--hero .uv-steps { max-width: none; }
.uv-cap--hero .uv-steps li:last-child { flex: 1 1 0; width: auto; }
.uv-cap--hero .uv-steps li:last-child .uv-steps__n { padding-right: 0; }
.uv-steps li.is-done .uv-steps__n { color: var(--muted-light, #cfc6bc); }
.uv-steps li.is-on .uv-steps__n { color: var(--cream, #f5efe6); }
@container (max-width: 559px) {
  .uv-cap__phase { display: block; }
  .uv-cap--hero .uv-cap__text { min-height: calc(1.45em * 2); }
  .uv-cap--hero .uv-steps li { height: 8px; display: block; }
  .uv-cap--hero .uv-steps li:last-child { flex: 0 0 auto; width: 8px; }
  .uv-steps__n { display: none; }
  .uv-cap__text { font-size: 12.5px; }
}
@container (max-width: 380px) { .uv-stage--card .uv-cap__text { font-size: 12.5px; min-height: calc(1.45em * 2); } }
/* landscape heroes below 760px: the footnote takes its own line so every phase name reads in full */
@container (min-width: 560px) and (max-width: 759px) {
  .uv-cap--hero .uv-cap__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .uv-cap--hero .uv-steps { max-width: none; }
}

/* ==========================================================================
   SVG vocabulary (inside .uv)
   ========================================================================== */
.uv text { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: .08em; fill: rgba(245, 239, 230, .9); }
.uv .uv-t--m { fill: var(--muted, #a89f96); }
.uv .uv-t--red { fill: var(--red-bright, #ef5a4c); }
.uv .uv-t--deep { fill: var(--red-deep, #b8291f); }
.uv .uv-s { font-family: Geist, system-ui, sans-serif; font-weight: 400; letter-spacing: 0; }
.uv .uv-s--5 { font-weight: 500; letter-spacing: -.005em; }
.uv .uv-s--m { fill: var(--muted, #a89f96); }
.uv .uv-s--c { fill: var(--cream, #f5efe6); }
.uv .uv-serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; fill: #ffb3aa; }
.uv-mp { fill: none; stroke: none; }

/* Rendered label floors (ART 3.1) where the drawing gets small. Sizes are viewBox units, chosen so nothing collides. */
/* landscape at 560 to 639px (tablets, small laptops): mono labels 11 -> 11.6 (10.4px at 560) */
@container (max-width: 639px) {
  .uv--land text.uv-t[font-size="11"], .uv--land .uv-token__tag { font-size: 11.6px; }
}
/* portrait under 300px (320px phones): labels 12 -> 13 (10px at 278px); pills sized for 12 keep it */
@container (max-width: 339px) {
  .uv--port text[font-size="12"], .uv--port text[font-size="12.5"], .uv--port text[font-size="11.5"] { font-size: 13px; }
  .uv--port .uv-src text, .uv--port .uv-stamp text { font-size: 12.3px; }
  .uv--port .uv-fit text { font-size: 12.4px; }
}
/* cards: 9.5px or more from a 290px container; under 300px the labels grow and tighten */
@container (max-width: 329px) {
  .uv--card text { font-size: 12px; }
}
@container (max-width: 299px) {
  .uv--card text { font-size: 13.4px; letter-spacing: .02em; }
  .uv--card .uv-plate--card text, .uv--card .uv-ghostlab { font-size: 12.8px; letter-spacing: 0 !important; }
}

/* wires */
.uv-wire { fill: none; stroke: rgba(245, 239, 230, .14); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.uv-wire--dash { stroke-dasharray: 3 5; }
.uv-wire--on { stroke-width: 2; opacity: .85; stroke-linecap: butt; }
.uv-wire--learn { stroke: var(--red-bright, #ef5a4c); stroke-dasharray: 3 5; stroke-width: 1.7; }
.uv-mask { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: butt; stroke-linejoin: round; }

/* agent node */
.uv-box { fill: #1f1a18; stroke: rgba(245, 239, 230, .16); stroke-width: 1; }
.uv-hot { fill: none; stroke: var(--red-bright, #ef5a4c); stroke-width: 1.6; opacity: 0; }
.uv-hot--fill { fill: var(--red, #d7372b); }
.uv-glyph { color: rgba(245, 239, 230, .88); }
.uv-glyph--on { color: #fff; opacity: 0; }
.uv-orbit { fill: none; stroke: var(--red-bright, #ef5a4c); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.uv-tickb circle { fill: var(--green, #78dc96); stroke: #1a1614; stroke-width: 2; }
.uv-tickb path { fill: none; stroke: #0f2418; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* lead agent */
.uv-lead__box { fill: var(--red, #d7372b); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; }
.uv-lead__glyph { color: #fff; }
.uv-lead__ping { fill: none; stroke: var(--red-bright, #ef5a4c); stroke-width: 1.5; opacity: 0; }

/* gate (signature component), static = approved */
.uv-gate__base { fill: rgba(245, 239, 230, .03); stroke: rgba(245, 239, 230, .2); stroke-width: 1; }
.uv-gate__wait { fill: none; stroke: rgba(245, 239, 230, .4); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; }
.uv-gate__ok { fill: rgba(120, 220, 150, .12); stroke: var(--green, #78dc96); stroke-width: 1.2; }
.uv-gate__icbg { fill: rgba(245, 239, 230, .08); stroke: rgba(245, 239, 230, .28); stroke-width: 1; }
.uv-gate__ic { color: var(--cream, #f5efe6); }
.uv-gate__pulse { fill: none; stroke: rgba(245, 239, 230, .55); stroke-width: 1.2; opacity: 0; }
.uv-gate__tap { fill: none; stroke: var(--green, #78dc96); stroke-width: 1.5; opacity: 0; }
.uv .uv-gate__t--idle { fill: var(--muted, #a89f96); opacity: 0; }
.uv .uv-gate__t--wait { fill: var(--cream, #f5efe6); opacity: 0; }
.uv .uv-gate__t--ok { fill: #9fe8b5; }
.uv-gate__tick { fill: none; stroke: var(--green, #78dc96); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uv-gate--dot .uv-gate__face { opacity: 0; }
.uv-gate--dot .uv-gate__okic { color: var(--green, #78dc96); }

/* tokens, runner, chips */
.uv-token rect { fill: var(--red-bright, #ef5a4c); }
.uv .uv-token__tag { fill: #ffb3aa; letter-spacing: .08em; }
.uv-runner__dot { fill: var(--red-bright, #ef5a4c); }
.uv-chip-g rect { fill: #1f1a18; stroke: rgba(245, 239, 230, .24); stroke-width: 1; }
.uv-chip-g--red rect { fill: #3a1512; stroke: var(--red-bright, #ef5a4c); }
.uv .uv-chip-g--red text { fill: #ffc2ba; }
.uv-post .uv-chip-g { opacity: 0; }

/* 01: brief, build loop, services, stack, handover */
.uv-paper { fill: var(--cream, #f5efe6); }
.uv .uv-doc__title { fill: var(--label-on-light, #6b625a); }
.uv .uv-doc__row { fill: var(--body-on-light, #4f4740); }
.uv .uv-doc__ink { fill: var(--ink, #141110); }
.uv .uv-doc__muted { fill: var(--label-on-light, #6b625a); }
.uv-doc__rule { fill: none; stroke: rgba(20, 17, 16, .12); stroke-width: 1; }
.uv-doc__line { fill: none; stroke: rgba(20, 17, 16, .4); stroke-width: 3; stroke-linecap: round; }
.uv-slot { fill: none; stroke: rgba(20, 17, 16, .28); stroke-width: 1.1; }
.uv-slot__on rect { fill: var(--red, #d7372b); }
.uv-slot__on path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uv-ring { fill: none; stroke: rgba(245, 239, 230, .16); stroke-width: 1.2; stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.uv-ring__on { fill: none; stroke: rgba(239, 90, 76, .55); stroke-width: 1.5; opacity: .5; }
.uv-stn { fill: rgba(245, 239, 230, .7); stroke: #1a1614; stroke-width: 1.5; }
.uv-pill__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .18); stroke-width: 1; }
.uv-pill__on { fill: rgba(215, 55, 43, .22); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; opacity: 0; }
.uv-flag circle { fill: #1a1614; stroke-width: 1.2; }
.uv-flag--x { color: var(--red-bright, #ef5a4c); opacity: 0; }
.uv-flag--x circle { stroke: var(--red-bright, #ef5a4c); }
.uv-flag--ok { color: var(--green, #78dc96); }
.uv-flag--ok circle { stroke: var(--green, #78dc96); }
.uv-svc__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-svc__on { fill: rgba(215, 55, 43, .1); stroke: rgba(239, 90, 76, .7); stroke-width: 1; opacity: 0; }
.uv-svc__g { color: rgba(245, 239, 230, .9); }
.uv-plate__edge { fill: #0d0a09; }
.uv-plate__face { fill: #26201c; stroke: rgba(245, 239, 230, .15); stroke-width: 1; }
.uv-plate__acc { fill: none; stroke: rgba(120, 220, 150, .6); stroke-width: 1.2; }
.uv-plate__dot { fill: rgba(245, 239, 230, .28); }
.uv-plate__live { fill: var(--green, #78dc96); }
.uv-ghostplate { fill: none; stroke: rgba(245, 239, 230, .14); stroke-width: 1; stroke-dasharray: 3 4; }
/* the empty slots say what they will hold, so a still frame already reads as three layers */
.uv .uv-ghostlab { fill: rgba(245, 239, 230, .34); }
.uv-ghostchip { fill: none; stroke: rgba(245, 239, 230, .12); stroke-width: 1; stroke-dasharray: 3 4; }
.uv-found { fill: #100d0c; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-hand__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .16); stroke-width: 1; }
.uv-hand__key { color: var(--red-bright, #ef5a4c); }
.uv-hand__arr { color: var(--muted, #a89f96); }

/* 02: week, post card, tiles, minis */
.uv-slot2 { fill: #1f1a18; stroke: rgba(245, 239, 230, .13); stroke-width: 1; }
.uv-slot2__hot { fill: rgba(215, 55, 43, .16); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; opacity: 0; }
.uv-slot2__hot[data-k="day-hot-1"] { opacity: 1; }
.uv-slot2__fill { fill: rgba(245, 239, 230, .38); }
.uv-week__flash { fill: none; stroke: var(--red-bright, #ef5a4c); stroke-width: 1.2; opacity: 0; }
.uv-avatar { fill: #d9cfc2; }
.uv-avatar--lg { fill: var(--sand, #ebe2d5); stroke: rgba(20, 17, 16, .1); }
.uv-avatar__g { color: var(--label-on-light, #6b625a); }
.uv-bar { fill: rgba(20, 17, 16, .58); }
/* draft skeleton: faint bars and an image slot from the moment the card appears; the agents fill them */
.uv-bar--ghost { fill: rgba(20, 17, 16, .13); }
.uv-img--ghost { fill: rgba(20, 17, 16, .04); stroke: rgba(20, 17, 16, .2); stroke-width: 1; stroke-dasharray: 3 3; }
.uv-bar--name { fill: rgba(20, 17, 16, .28); }
.uv-flagline { fill: none; stroke: var(--red, #d7372b); stroke-width: 1.8; stroke-linecap: round; opacity: 0; }
.uv-img__sun { fill: rgba(255, 255, 255, .85); }
.uv-img__hill { fill: rgba(20, 17, 16, .32); }
.uv-img__play { fill: #fff; }
.uv-seal rect { fill: rgba(245, 239, 230, .94); stroke: var(--red-deep, #b8291f); stroke-width: 1.4; }
.uv .uv-seal text { fill: var(--red-deep, #b8291f); letter-spacing: .12em; }
.uv-seal--dot circle { fill: var(--red-deep, #b8291f); stroke: var(--cream, #f5efe6); stroke-width: 1.5; }
.uv-seal--dot path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uv-tile__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-tile__on { fill: var(--red, #d7372b); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; }
.uv-tile__g { color: rgba(245, 239, 230, .92); }
.uv-mini rect { fill: var(--cream, #f5efe6); }
.uv-mini .uv-mini__bar { fill: var(--red, #d7372b); }

/* 03: signals, dossier, reply, handed, ledger */
.uv-sig__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-sig__on { fill: rgba(215, 55, 43, .14); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; opacity: 0; }
.uv-sig__dot { fill: var(--red-bright, #ef5a4c); }
.uv-sig[data-k="sg-0"] .uv-sig__on, .uv-sigdot[data-k="sg-0"] .uv-dot__on { opacity: 1; }
.uv--land .uv-sig[data-k="sg-3"], .uv--port .uv-sigdot[data-k="sg-1"], .uv--card .uv-sigdot[data-k="sg-1"] { opacity: 0; }
.uv-sig[data-k="sg-4"], .uv-sigdot[data-k="sg-4"] { opacity: .3; }
.uv--port [data-k="sg-label"] { opacity: 0; }
.uv-ghost { fill: none; stroke: rgba(245, 239, 230, .24); stroke-width: 1; stroke-dasharray: 3 3; }
.uv-dot__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .32); stroke-width: 1.2; }
.uv-dot__on { fill: var(--red-bright, #ef5a4c); opacity: 0; }
.uv-mtrack { fill: none; stroke: rgba(20, 17, 16, .16); stroke-width: 1; stroke-dasharray: 2 3; }
.uv-mark__b { fill: rgba(20, 17, 16, .06); stroke: rgba(20, 17, 16, .2); stroke-width: 1; }
.uv-mark__g { color: rgba(20, 17, 16, .5); }
.uv-mark__on rect { fill: var(--red, #d7372b); }
.uv-mark__g2 { color: #fff; }
.uv-chk__b { fill: none; stroke: rgba(20, 17, 16, .26); stroke-width: 1; }
.uv-chk circle { fill: var(--ink, #141110); }
.uv-chk path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.uv-fit rect { fill: rgba(215, 55, 43, .1); stroke: rgba(184, 41, 31, .25); stroke-width: 1; }
.uv .uv-fit text { fill: var(--red-deep, #b8291f); }
.uv .uv-note .uv-serif { fill: var(--red-deep, #b8291f); }
.uv-dbar { fill: rgba(20, 17, 16, .3); }
.uv-dbar--subj { fill: rgba(20, 17, 16, .62); }
.uv-src rect { fill: none; stroke: rgba(20, 17, 16, .2); stroke-width: 1; }
.uv .uv-src text { fill: var(--label-on-light, #6b625a); }
.uv-env__g { color: var(--cream, #f5efe6); }
.uv-bin__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-bin__on { fill: rgba(215, 55, 43, .16); stroke: var(--red-bright, #ef5a4c); stroke-width: 1; opacity: 0; }
.uv-bin[data-k="bin-0"] .uv-bin__on { opacity: 1; }
.uv-bin[data-k="bin-1"], .uv-bin[data-k="bin-2"] { opacity: .42; }
.uv-hand2__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .14); stroke-width: 1; }
.uv-hand2__on { fill: rgba(215, 55, 43, .06); stroke: rgba(239, 90, 76, .6); stroke-width: 1; }
.uv-you__c { fill: var(--cream, #f5efe6); }
.uv-you__g { color: var(--ink, #141110); }
.uv-calslot { fill: rgba(245, 239, 230, .1); }
.uv-calslot--hot { fill: var(--red-bright, #ef5a4c); }
.uv-you2__b { fill: #1f1a18; stroke: rgba(245, 239, 230, .16); stroke-width: 1; }
.uv-you2__on { fill: rgba(120, 220, 150, .1); stroke: var(--green, #78dc96); stroke-width: 1.2; }
.uv-you2__cal { color: var(--muted, #a89f96); }
.uv-ledger__on { fill: none; stroke: var(--red-bright, #ef5a4c); stroke-width: 1.5; opacity: .75; }
.uv-stamp rect { fill: #1a1614; stroke: rgba(245, 239, 230, .24); stroke-width: 1; }
.uv .uv-stamp text { fill: rgba(245, 239, 230, .78); }
.uv-stamp--final rect { fill: #3a1512; stroke: var(--red-bright, #ef5a4c); }
.uv .uv-stamp--final text { fill: #ffc2ba; }

/* ==========================================================================
   Platform icons: <!--@ucviz:02:icons-->
   ========================================================================== */
/* --uv-ico is never declared here, only read with a fallback, so a value set on any wrapper reaches the icons */
.uv-platforms { display: flex; flex-wrap: wrap; gap: var(--uv-ico-gap, calc(var(--uv-ico, 40px) * .25)); margin: 0; padding: 0; list-style: none; }
.uv-platforms__i {
  position: relative; display: grid; place-items: center; flex: none; width: var(--uv-ico, 40px); height: var(--uv-ico, 40px); border-radius: 50%;
  background: var(--uv-ico-bg, var(--ink-raised, #1f1a18)); border: 1px solid var(--uv-ico-line, var(--line-d2, rgba(245, 239, 230, .16)));
  color: var(--uv-ico-fg, var(--cream, #f5efe6)); box-shadow: var(--sh-raise, inset 0 1px 0 rgba(245, 239, 230, .05));
  transition: border-color var(--dur-1, .16s) var(--ease, ease), transform .35s var(--ease, ease);
}
.uv-platforms__i svg { display: block; width: var(--uv-glyph, calc(var(--uv-ico, 40px) * .44)); height: var(--uv-glyph, calc(var(--uv-ico, 40px) * .44)); opacity: .9; }
.uv-platforms__i::after {
  content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 5; pointer-events: none;
  padding: 5px 9px; border-radius: 999px; background: var(--ink, #141110); border: 1px solid rgba(245, 239, 230, .14); color: var(--cream, #f5efe6);
  font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--dur-1, .16s) var(--ease, ease), transform var(--dur-2, .28s) var(--ease, ease);
}
@media (hover: hover) {
  .uv-platforms__i:hover { border-color: rgba(215, 55, 43, .55); }
  .uv-platforms__i:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
.uv-platforms__i:focus-visible { outline: 2px solid var(--red-bright, #ef5a4c); outline-offset: 2px; }
.uv-platforms__i:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* aomMotion.ping(ul): each icon lifts once with a red ring (transform and opacity only) */
.uv-platforms__i::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--red-bright, #ef5a4c); opacity: 0; pointer-events: none; }
.uv-platforms__i.is-ping { animation: uvIcoLift .6s var(--ease-out, ease) both; }
.uv-platforms__i.is-ping::before { animation: uvIcoRing .7s var(--ease-out, ease) both; }
@keyframes uvIcoLift { 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes uvIcoRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.uv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   HTML vocabulary for page diagrams (fan-out, handoff strip, flows, 404)
   ========================================================================== */
/* .uv-gate  <span class="uv-gate" data-state="idle|waiting|approved">Your approval</span> */
span.uv-gate, a.uv-gate, div.uv-gate {
  --g-line: rgba(245, 239, 230, .22); --g-fg: var(--muted-light, #cfc6bc); --g-ic: rgba(245, 239, 230, .1); --g-icl: rgba(245, 239, 230, .28); --g-glyph: var(--cream, #f5efe6);
  --g-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  --g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  position: relative; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 4px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--g-line); background: transparent; color: var(--g-fg);
  font: 500 12.5px/1 Geist, system-ui, sans-serif; letter-spacing: -.005em; white-space: nowrap; vertical-align: middle;
  transition: border-color .45s var(--ease, ease), background-color .45s var(--ease, ease), color .3s var(--ease, ease);
}
.uv-gate::before {
  content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  background: var(--g-ic); border: 1px solid var(--g-icl); transition: background-color .45s var(--ease, ease), border-color .45s var(--ease, ease);
}
span.uv-gate::after, a.uv-gate::after, div.uv-gate::after {
  content: ''; position: absolute; left: 9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--g-glyph);
  -webkit-mask: var(--g-person) center / contain no-repeat; mask: var(--g-person) center / contain no-repeat;
}
.uv-gate[data-state="waiting"] { --g-line: rgba(245, 239, 230, .42); --g-fg: var(--cream, #f5efe6); border-style: dashed; }
.uv-gate[data-state="approved"] { --g-line: var(--green, #78dc96); --g-fg: #9fe8b5; --g-ic: rgba(120, 220, 150, .16); --g-icl: rgba(120, 220, 150, .5); --g-glyph: var(--green, #78dc96); background: rgba(120, 220, 150, .1); }
span.uv-gate[data-state="approved"]::after, a.uv-gate[data-state="approved"]::after, div.uv-gate[data-state="approved"]::after { -webkit-mask-image: var(--g-check); mask-image: var(--g-check); }
.uv-gate__l { display: inline-block; transition: opacity .15s var(--ease, ease); }
.uv-gate__l.is-swap { opacity: 0; }
.uv-gate__ring, .uv-gate__tap { position: absolute; left: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; pointer-events: none; box-sizing: border-box; opacity: 0; }
.uv-gate__ring { border: 1px solid var(--g-line); }
.uv-gate[data-state="waiting"] .uv-gate__ring { animation: uvRing 1s var(--ease-out, ease) infinite; }
.uv-gate__tap { left: auto; right: 10px; width: 22px; height: 22px; margin-top: -11px; border: 1.5px solid var(--green, #78dc96); animation: uvTap .45s var(--ease-out, ease) forwards; }
@keyframes uvRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes uvTap { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
/* on light sections */
.uv-gate--light, .uv-flow--light .uv-gate, [data-uv-light] .uv-gate {
  --g-line: rgba(20, 17, 16, .2); --g-fg: var(--label-on-light, #6b625a); --g-ic: rgba(20, 17, 16, .05); --g-icl: rgba(20, 17, 16, .2); --g-glyph: var(--ink, #141110);
}
.uv-gate--light[data-state="waiting"], .uv-flow--light .uv-gate[data-state="waiting"], [data-uv-light] .uv-gate[data-state="waiting"] { --g-line: rgba(20, 17, 16, .42); --g-fg: var(--ink, #141110); }
.uv-gate--light[data-state="approved"], .uv-flow--light .uv-gate[data-state="approved"], [data-uv-light] .uv-gate[data-state="approved"] {
  --g-line: var(--green-ink, #276e43); --g-fg: var(--green-ink, #276e43); --g-ic: rgba(39, 110, 67, .12); --g-icl: rgba(39, 110, 67, .45); --g-glyph: var(--green-ink, #276e43); background: rgba(39, 110, 67, .08);
}
/* on red (flow__step--red, Book) */
.uv-gate--onred, .flow__step--red .uv-gate { --g-line: rgba(255, 255, 255, .45); --g-fg: #fff; --g-ic: rgba(255, 255, 255, .14); --g-icl: rgba(255, 255, 255, .45); --g-glyph: #fff; }
/* on red the text stays #fff while it waits (the light-flow waiting rule would otherwise turn it ink) */
.uv-gate--onred[data-state="waiting"], .flow__step--red .uv-gate[data-state="waiting"] { --g-line: rgba(255, 255, 255, .75); --g-fg: #fff; --g-ic: rgba(255, 255, 255, .14); --g-icl: rgba(255, 255, 255, .45); --g-glyph: #fff; }
.uv-gate--onred[data-state="approved"], .flow__step--red .uv-gate[data-state="approved"] { --g-line: #fff; --g-fg: var(--ink, #141110); --g-ic: rgba(39, 110, 67, .14); --g-icl: rgba(39, 110, 67, .5); --g-glyph: var(--green-ink, #276e43); background: #fff; }
/* modifiers carry two classes so they beat the span.uv-gate base (0,1,1); page rules with two classes still win by order */
.uv-gate.uv-gate--sm { height: 30px; font-size: 12px; gap: 8px; padding-right: 12px; }
.uv-gate--sm::before { width: 22px; height: 22px; }
span.uv-gate--sm::after { left: 8px; width: 13px; height: 13px; margin-top: -6.5px; }
.uv-gate--sm .uv-gate__ring { width: 22px; height: 22px; margin-top: -11px; }
.uv-gate.uv-gate--dot { width: 26px; height: 26px; padding: 0; gap: 0; justify-content: center; }
.uv-gate--dot .uv-gate__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.uv-gate--dot::before { position: absolute; inset: 0; width: auto; height: auto; border: 0; background: transparent; }
span.uv-gate--dot::after { left: 50%; margin-left: -7px; }

/* .uv-token  <span class="uv-token" data-tag="BRIEF"></span> */
span.uv-token, i.uv-token {
  position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--red-bright, #ef5a4c);
  box-shadow: 0 0 0 3px rgba(239, 90, 76, .16), 0 0 16px 2px rgba(239, 90, 76, .55); will-change: transform; pointer-events: none;
}
span.uv-token[data-tag]::after {
  content: attr(data-tag); position: absolute; left: 16px; top: -11px; white-space: nowrap;
  font: 500 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; color: #ffb3aa;
}

/* .uv-chip  <span class="uv-chip">Drafting</span>  (+ --red, --green, --light) */
.uv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(245, 239, 230, .22);
  color: var(--cream, #f5efe6); font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .45s var(--ease, ease), background-color .45s var(--ease, ease), color .3s var(--ease, ease), opacity .3s;
}
.uv-chip--red { border-color: var(--red-bright, #ef5a4c); background: rgba(215, 55, 43, .14); color: #ffc2ba; }
.uv-chip--green { border-color: rgba(120, 220, 150, .5); background: rgba(120, 220, 150, .1); color: #9fe8b5; }
.uv-chip--light { border-color: rgba(20, 17, 16, .18); color: var(--label-on-light, #6b625a); }
.uv-chip--light.uv-chip--red { border-color: rgba(184, 41, 31, .4); background: rgba(215, 55, 43, .08); color: var(--red-deep, #b8291f); }
.uv-chip--light.uv-chip--green { border-color: rgba(39, 110, 67, .35); background: rgba(39, 110, 67, .08); color: var(--green-ink, #276e43); }

/* .uv-agent / .uv-lead / .uv-you as HTML nodes  <span class="uv-agent" data-state="idle|working|done"></span> */
span.uv-agent, div.uv-agent, span.uv-lead, div.uv-lead, span.uv-you, div.uv-you {
  --uv-size: 40px; --a-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E");
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--uv-size); height: var(--uv-size);
  border-radius: calc(var(--uv-size) * .3); background: #1f1a18; border: 1px solid rgba(245, 239, 230, .16); box-sizing: border-box;
  transition: opacity .45s var(--ease, ease), border-color .45s var(--ease, ease), background-color .45s var(--ease, ease);
}
span.uv-agent::before, div.uv-agent::before, span.uv-lead::before, div.uv-lead::before, span.uv-you::before, div.uv-you::before {
  content: ''; width: 46%; height: 46%; background: rgba(245, 239, 230, .88);
  -webkit-mask: var(--a-glyph) center / contain no-repeat; mask: var(--a-glyph) center / contain no-repeat;
}
.uv-agent[data-state="idle"] { opacity: .55; }
.uv-agent[data-state="working"] { border-color: var(--red-bright, #ef5a4c); }
span.uv-agent[data-state="working"]::after, div.uv-agent[data-state="working"]::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.6px solid transparent; border-top-color: var(--red-bright, #ef5a4c);
  animation: uvSpin 1.2s linear infinite;
}
span.uv-agent[data-state="done"]::after, div.uv-agent[data-state="done"]::after {
  content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--green, #78dc96) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2418' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 0 2px #1a1614; animation: uvPop .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
span.uv-lead, div.uv-lead { --uv-size: 72px; background: var(--red, #d7372b); border-color: var(--red-bright, #ef5a4c); box-shadow: 0 0 40px rgba(215, 55, 43, .5); }
span.uv-lead::before, div.uv-lead::before { background: #fff; }
/* working: a thin orbit arc turns around the node (fan-out core's micro build ring) */
span.uv-lead[data-state="working"]::after, div.uv-lead[data-state="working"]::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1.6px solid transparent; border-top-color: var(--red-bright, #ef5a4c);
  animation: uvSpin 1.2s linear infinite;
}
.uv-lead.is-ping::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--red-bright, #ef5a4c); animation: ping 1s var(--ease-out, ease) both; }

span.uv-you, div.uv-you {
  --a-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  border-radius: 50%; background: var(--cream, #f5efe6); border-color: rgba(20, 17, 16, .14);
}
span.uv-you::before, div.uv-you::before { background: var(--ink, #141110); }
/* agent nodes on cream / sand / paper: .uv-agent--light, or any ancestor with data-uv-light */
span.uv-agent.uv-agent--light, div.uv-agent.uv-agent--light, [data-uv-light] span.uv-agent, [data-uv-light] div.uv-agent {
  background: var(--paper, #fbf8f3); border-color: rgba(20, 17, 16, .14); box-shadow: var(--sh-card-l, 0 18px 40px -24px rgba(20, 17, 16, .28));
}
span.uv-agent.uv-agent--light::before, div.uv-agent.uv-agent--light::before, [data-uv-light] span.uv-agent::before, [data-uv-light] div.uv-agent::before { background: rgba(20, 17, 16, .78); }
.uv-agent--light[data-state="working"], [data-uv-light] .uv-agent[data-state="working"] { border-color: var(--red, #d7372b); }
.uv-agent--light[data-state="done"]::after, [data-uv-light] .uv-agent[data-state="done"]::after { box-shadow: 0 0 0 2px var(--paper, #fbf8f3); }
[data-uv-light] span.uv-you, [data-uv-light] div.uv-you { background: var(--ink, #141110); border-color: transparent; }
[data-uv-light] span.uv-you::before, [data-uv-light] div.uv-you::before { background: var(--cream, #f5efe6); }
@keyframes uvSpin { to { transform: rotate(360deg); } }
@keyframes uvPop { from { transform: scale(0); } to { transform: scale(1); } }

/* .uv-ledger as HTML (UC03 architecture): stamps land on a rail */
div.uv-ledger { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 0; }
.uv-ledger__label { margin-right: 6px; font: 500 11px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a89f96); }
span.uv-stamp {
  display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(245, 239, 230, .24); background: #1a1614;
  font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 239, 230, .8);
  transition: opacity .45s var(--ease, ease), transform .6s var(--ease-out, ease);
}
/* stamps hide only once a page script arms the ledger (.is-armed), then land one by one with .is-on */
div.uv-ledger.is-armed span.uv-stamp:not(.is-on) { opacity: 0; transform: translateY(-6px); }
span.uv-stamp--final { border-color: var(--red-bright, #ef5a4c); background: #3a1512; color: #ffc2ba; }

/* ==========================================================================
   Auto flow token: .flow[data-token], step [data-gate]
   ========================================================================== */
.flow.uv-flow { position: relative; }
.flow.uv-flow > .flow__step::after { display: none; }
.flow.uv-flow[data-token-mode="row"] { grid-template-columns: repeat(var(--uv-n, 4), minmax(0, 1fr)); padding-top: 40px; }
/* wrap: a balanced grid (3 + 2, 2 + 2) from 600px; each row gets its own rail in the row gap above it */
.flow.uv-flow[data-token-mode="wrap"] { grid-template-columns: repeat(var(--uv-cols, 2), minmax(0, 1fr)); padding-top: 40px; row-gap: 58px; }
.flow.uv-flow[data-token-mode="col"] { grid-template-columns: minmax(0, 1fr); padding-left: 38px; }
.uv-flow__rail, .uv-flow__lines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.uv-flow__lines { z-index: 0; }
.uv-flow__base, .uv-flow__on { position: absolute; left: 0; top: 0; background: var(--fl-line, rgba(245, 239, 230, .16)); }
.uv-flow__on { background: linear-gradient(var(--uv-flow-dir, 90deg), var(--red-deep, #b8291f), var(--red-bright, #ef5a4c)); transform-origin: 0 0; will-change: transform; }
.uv-flow__token { position: absolute; left: 0; top: 0; z-index: 3; }
.uv-flow__node {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--fl-line, rgba(245, 239, 230, .16)); box-shadow: 0 0 0 3px transparent;
  transition: background-color .45s var(--ease, ease), box-shadow .45s var(--ease, ease);
}
.uv-flow__node::after { content: ''; position: absolute; background: var(--fl-line, rgba(245, 239, 230, .16)); transition: background-color .45s var(--ease, ease); }
[data-token-mode="row"] .uv-flow__node::after, [data-token-mode="wrap"] .uv-flow__node::after { left: 4px; top: 9px; width: 1px; height: 22px; }
[data-token-mode="col"] .uv-flow__node::after { left: 9px; top: 4px; width: 20px; height: 1px; }
.uv-flow__node.is-on { background: var(--red-bright, #ef5a4c); box-shadow: 0 0 0 3px rgba(239, 90, 76, .18), 0 0 14px rgba(239, 90, 76, .55); }
.uv-flow__node.is-on::after { background: rgba(239, 90, 76, .6); }
.uv-flow__node--gate {
  width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--fl-card, #1f1a18); box-shadow: inset 0 0 0 1px var(--fl-line, rgba(245, 239, 230, .16));
}
.uv-flow__node--gate::before {
  content: ''; position: absolute; inset: 4px; background: var(--fl-t, #f5efe6); opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-token-mode="row"] .uv-flow__node--gate::after, [data-token-mode="wrap"] .uv-flow__node--gate::after { left: 10.5px; top: 22px; height: 15px; }
[data-token-mode="col"] .uv-flow__node--gate::after { left: 22px; top: 10.5px; width: 14px; }
.uv-flow__node--gate.is-wait { box-shadow: inset 0 0 0 1px var(--fl-t, #f5efe6), 0 0 0 4px rgba(245, 239, 230, .08); }
.uv-flow__node--gate.is-on { background: rgba(120, 220, 150, .16); box-shadow: inset 0 0 0 1.2px var(--green, #78dc96), 0 0 14px rgba(120, 220, 150, .35); }
.uv-flow__node--gate.is-on::before { background: var(--green, #78dc96); opacity: 1; }
.uv-flow--light .uv-flow__node--gate.is-on { background: rgba(39, 110, 67, .12); box-shadow: inset 0 0 0 1.2px var(--green-ink, #276e43); }
.uv-flow--light .uv-flow__node--gate.is-on::before { background: var(--green-ink, #276e43); }
.uv-flow .flow__step { transition: border-color .45s var(--ease, ease), box-shadow .45s var(--ease, ease); }
.uv-flow .flow__n { transition: background-color .45s var(--ease, ease), color .45s var(--ease, ease), box-shadow .45s var(--ease, ease); }
.uv-flow > .flow__step:not(.flow__step--red):not(.is-lit) .flow__n { background: transparent; color: var(--fl-t, #f5efe6); box-shadow: inset 0 0 0 1px var(--fl-line, rgba(245, 239, 230, .2)); }
.uv-flow > .flow__step.is-lit:not(.flow__step--red) { border-color: rgba(215, 55, 43, .55); }
.uv-flow > .flow__step--red.is-lit { box-shadow: 0 24px 50px -28px rgba(215, 55, 43, .9); }
.uv-flow .uv-gate--flow { margin-top: auto; align-self: flex-start; }

/* ---------- Reduced motion: final frame, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .uv-cap__line, .uv-steps li::before, .uv-steps li::after, .uv-steps__n { transition: none; }
  .uv-gate__ring, .uv-gate__tap, .uv-agent::after, .uv-lead::after, .uv-platforms__i.is-ping, .uv-platforms__i.is-ping::before { animation: none !important; }
  .uv-flow .flow__step, .uv-flow .flow__n, .uv-flow__node { transition: none; }
  div.uv-ledger.is-armed span.uv-stamp { opacity: 1; transform: none; transition: none; }
}

/* 320px phones: the graphics take 10px more on each side of the page gutter, so every label renders at 10px or more */
@media (max-width: 359px) {
  .ucviz { margin-inline: -10px; width: calc(100% + 20px); max-width: none; }
}
@container (max-width: 299px) {
  .uv--card .uv-plate--card text, .uv--card .uv-ghostlab { font-size: 13.2px; }
}