/* ============================================================
   ezpztrader.com — public showcase pieces (ECOSYSTEM_REDESIGN.md §9.2)
   .sr  Signal Router hero and simulator   marketing/showcase/signal_router.html
   .xl  sample execution log               marketing/showcase/exec_log.html
   Layout follows the component's own width (container queries), so either
   piece works in a full-width band or in a hero column.
   ============================================================ */

@layer page {

/* ---------- shared ---------- */

.sr-vh, .xl-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr [hidden], .xl [hidden] { display: none; }

/* ---------- Signal Router: shell ---------- */

.sr {
  --sr-rail: var(--space-8);
  --sr-radius: var(--radius-lg);
  container: sr / inline-size;
  position: relative; isolation: isolate;
  padding: clamp(var(--space-3), 2.2vw, var(--space-6));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-inset); color: var(--ink-2);
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed);
}
.sr p { margin: 0; max-width: none; }
.sr ol { margin: 0; padding: 0; list-style: none; }
.sr :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr svg { max-width: none; }

.sr-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: clamp(var(--space-3), 2vw, var(--space-5)); }
.sr-bar__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sr-title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semi); line-height: var(--leading-heading); letter-spacing: -0.01em; color: var(--ink); }
.sr-slow {
  font: var(--weight-medium) var(--text-2xs) / 1 var(--font-mono); color: var(--action-ink);
  padding: 5px var(--space-2); border-radius: var(--radius-pill); background: var(--action-soft);
  opacity: 0; transition: opacity var(--dur-quick) var(--ease-out);
}
.sr.is-playing .sr-slow { opacity: 1; }

/* ---------- controls ---------- */

.sr-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
html:not(.js) .sr-ctrls { display: none; }
.sr-btn, .sr-seg button {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-lg); padding: 0 var(--space-4); margin: 0;
  font: var(--weight-medium) var(--text-base) / 1 var(--font-body);
  border-radius: var(--radius-pill); border: 1px solid transparent; text-decoration: none;
  transition: background-color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}
.sr-btn--primary { background: var(--action); color: var(--on-action); border-color: var(--action-border); }
.sr-btn--primary:hover { background: var(--action-hover); }
.sr-btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.sr-btn--ghost:hover { background: var(--surface-hover); }
.sr-btn--ghost[aria-pressed="true"] { background: var(--action-soft); color: var(--action-ink); border-color: var(--border-brand); }
.sr-btn--toggle { background: transparent; color: var(--ink-2); border-color: var(--border-strong); }
.sr-btn--toggle:hover { background: var(--surface-hover); }
.sr-btn--toggle[aria-pressed="true"] { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--ink); }
.sr-btn--toggle::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: 50%; border: 1.5px solid currentColor; }
.sr-btn--toggle[aria-pressed="true"]::before { background: var(--warn); border-color: var(--warn); }
.sr-fire::before { content: ""; width: 0; height: 0; border-left: var(--space-2) solid currentColor; border-block: 5px solid transparent; }

.sr-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); }
/* 36px + 3px padding + 1px border on each side keeps the hit area at 44px */
.sr-seg button { position: relative; min-height: var(--control-md); padding: 0 var(--space-3); background: transparent; color: var(--ink-3); }
.sr-seg button::after { content: ""; position: absolute; inset: -4px -1px; }
.sr-seg button:hover { color: var(--ink); }
.sr-seg button[aria-pressed="true"] { background: var(--action-soft); color: var(--action-ink); border-color: var(--border-brand); }

.sr-rules {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2);
  margin: 0; padding: var(--space-2) var(--space-3); min-width: 0;
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--radius-lg);
}
.sr-rules legend { float: left; padding: 0; margin: 0 6px 0 0; font: var(--weight-medium) var(--text-xs) / var(--control-lg) var(--font-mono); color: var(--warn); }
.sr-rules label {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-lg); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong); color: var(--ink-2); font-size: var(--text-base); cursor: pointer;
}
.sr-rules label:has(:checked) { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.sr-rules label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-rules input { accent-color: var(--warn); width: var(--space-4); height: var(--space-4); margin: 0; }

/* ---------- stage: stacked by default ---------- */

.sr-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); }
.sr-stage svg { display: block; overflow: visible; }
.sr-stage > :not(.sr-depth) { position: relative; z-index: 1; }
/* Mount point for the optional three.js layer (router-scene.js): behind every
   path, card and line of text, never catching the pointer. */
.sr-depth { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.sr-wire { width: var(--sr-rail); height: var(--space-9); }
.sr-out { display: grid; grid-template-columns: var(--sr-rail) minmax(0, 1fr); }
.sr-fan { width: var(--sr-rail); height: 100%; }
.sr-fan__wide, .sr-wire__wide { display: none; }

.sr-track { fill: none; stroke: var(--border-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sr-trail {
  fill: none; stroke: var(--brand); stroke-width: 1.75; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100 100; stroke-dashoffset: 0; stroke-linecap: round;
}
.sr-pk {
  fill: none; stroke: color-mix(in srgb, var(--brand) 35%, var(--knob)); stroke-width: 3; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 8 200; stroke-dashoffset: 8; opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-out);
}
.sr-pk--glow { stroke: var(--brand); stroke-width: 10; stroke-opacity: .28; }
.sr-path[data-s="held"] .sr-trail, .sr-path[data-s="queued"] .sr-trail { stroke: var(--warn); }
.sr-path[data-s="skipped"] .sr-trail { stroke: var(--neutral); stroke-dashoffset: 58; }
.sr-path[data-s="blocked"] .sr-trail, .sr-path[data-s="queued"] .sr-trail,
.sr-path[data-s="duplicate"] .sr-trail, .sr-path[data-s="idle"] .sr-trail { stroke-dashoffset: 100; }

/* ---------- chart panel ---------- */

.sr-chart { min-width: 0; background: var(--raised); border: 1px solid var(--border); border-radius: var(--sr-radius); overflow: hidden; }
.sr-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3) 6px; }
.sr-chart__sym { display: flex; align-items: baseline; gap: var(--space-2); font: var(--weight-medium) var(--text-xs) / 1.2 var(--font-mono); color: var(--ink-3); }
.sr-chart__sym b { color: var(--ink); font: var(--weight-semi) var(--text-base) / 1.2 var(--font-body); }
.sr-chart__px { font-variant-numeric: tabular-nums; font-weight: var(--weight-semi); }
.sr-up { color: var(--buy); }
.sr-down { color: var(--sell); }
.sr-chart__strat { font: var(--weight-medium) var(--text-2xs) / 1.2 var(--font-mono); color: var(--action-ink); }
.sr-chart__plot { position: relative; aspect-ratio: 8 / 5; margin: 0 var(--space-1); }
.sr-chart__plot canvas, .sr-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-chart__plot canvas { display: none; }
.sr-chart__plot.has-canvas canvas { display: block; }
.sr-chart__plot.has-canvas .sr-poster { display: none; }

.sr-poster text { font-family: var(--font-mono); font-weight: var(--weight-medium); fill: var(--ink-3); }
.sr-poster .g { fill: var(--border); }
.sr-poster .u { fill: var(--buy); }
.sr-poster .d { fill: var(--sell); }
.sr-poster .vu { fill: var(--buy); opacity: .28; }
.sr-poster .vd { fill: var(--sell); opacity: .28; }
.sr-poster .rb { fill: var(--brand-soft); }
.sr-poster .rl { stroke: var(--brand); stroke-dasharray: 3 3; fill: none; }
.sr-poster .rt { fill: var(--brand); }
.sr-poster .tpz { fill: var(--buy-soft); }
.sr-poster .slz { fill: var(--sell-soft); }
.sr-poster .tpt { fill: var(--buy); }
.sr-poster .slt { fill: var(--sell); }
.sr-poster .pl { stroke-dasharray: 2 2; fill: none; }
.sr-poster .pl.u { stroke: var(--buy); }
.sr-poster .pl.d { stroke: var(--sell); }
.sr-poster .tag-t { fill: var(--on-buy); }
.sr-poster .tag-t.dn { fill: var(--on-sell); }

/* alert marker, placed from data so it matches the canvas and the poster */
.sr-marker {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc((100% - 54px) * var(--mx)); top: calc((100% - 18px) * var(--my));
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-panel) var(--ease-out);
}
.sr-chart__plot:not(.has-canvas) .sr-marker { left: var(--pmx); top: var(--pmy); }
.sr-marker span {
  position: absolute; right: calc(-1 * var(--space-3)); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: var(--weight-semi) var(--text-2xs) / 1 var(--font-mono); padding: 6px var(--space-2); border-radius: var(--radius-sm);
}
.sr-marker--long span { bottom: var(--space-2); background: var(--buy); color: var(--on-buy); }
.sr-marker--short span { top: var(--space-2); background: var(--sell); color: var(--on-sell); }
.sr-marker--long span::before { content: "▲"; content: "▲" / ""; font-size: .8em; }
.sr-marker--short span::before { content: "▼"; content: "▼" / ""; font-size: .8em; }
.sr-marker span::after { content: ""; position: absolute; right: var(--space-2); border: 5px solid transparent; }
.sr-marker--long span::after { top: 100%; border-top-color: var(--buy); }
.sr-marker--short span::after { bottom: 100%; border-bottom-color: var(--sell); }
.sr-marker--long { transform-origin: 0 100%; }
.sr[data-stage="0"] .sr-marker { opacity: 0; transform: translateY(6px) scale(.9); }

/* webhook payload: the site's code panel is dark in both themes, so syntax
   colours are mixed toward --code-ink to keep their contrast */
.sr-alert {
  margin: var(--space-2); border: 1px solid var(--border-brand); border-radius: var(--radius-md); overflow: hidden;
  background: var(--code-bg); transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out);
}
.sr-alert__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--raised); border-bottom: 1px solid var(--border); font: var(--weight-medium) var(--text-2xs) / 1.2 var(--font-mono); color: var(--ink-3); }
.sr-alert__head b { color: var(--ink); font-weight: var(--weight-semi); }
.sr-alert__head span:last-child { margin-left: auto; }
.sr-alert__bell { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sr-code {
  margin: 0; padding: var(--space-2) var(--space-3); max-width: none; overflow: visible;
  background: none; border: 0; border-radius: 0; color: var(--code-ink);
  font: var(--weight-normal) var(--text-2xs) / var(--leading-normal) var(--font-mono);
  white-space: pre-wrap; word-break: break-word; tab-size: 2;
}
.sr-code .k { color: color-mix(in srgb, var(--brand) 60%, var(--code-ink)); }
.sr-code .s { color: color-mix(in srgb, var(--buy) 60%, var(--code-ink)); }
.sr-code .n { color: color-mix(in srgb, var(--warn) 60%, var(--code-ink)); }
.sr[data-stage="0"] .sr-alert { opacity: .35; transform: translateY(4px); }

/* ---------- hub ---------- */

.sr-hub {
  --ring: 0; --ring-c: var(--brand);
  min-width: 0; padding: var(--space-3); border-radius: var(--sr-radius);
  background: var(--raised); border: 1px solid var(--border-brand); box-shadow: var(--shadow-inset);
}
.sr-hub[data-s="fail"] { --ring-c: var(--sell); }
.sr-hub[data-s="warn"] { --ring-c: var(--warn); }
.sr-hub__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.sr-hub__core { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.sr-hub__core svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring-bg { fill: none; stroke: var(--border-strong); stroke-width: 3; }
.sr-ring {
  fill: none; stroke: var(--ring-c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: var(--ring);
  transition: stroke-dashoffset var(--dur-quick) var(--ease-out), stroke var(--dur-quick) var(--ease-out);
}
.sr-hub__mark { font: var(--weight-bold) var(--text-sm) / 1 var(--font-body); color: var(--ink); letter-spacing: -0.02em; }
.sr-hub__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: var(--leading-heading); letter-spacing: -0.01em; color: var(--ink); }
.sr-hub__sub { font: var(--weight-medium) var(--text-xs) / 1.3 var(--font-mono); color: var(--action-ink); }

.sr-gates { display: grid; gap: 2px; }
.sr-gate {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  padding: 6px var(--space-2); border-radius: var(--radius-md);
  transition: background-color var(--dur-quick) var(--ease-out), opacity var(--dur-quick) var(--ease-out);
}
.sr-gate__txt { display: grid; min-width: 0; }
.sr-gate__txt b { color: var(--ink); font-weight: var(--weight-medium); font-size: var(--text-sm); line-height: 1.3; }
.sr-gate__txt small { color: var(--ink-3); font-size: var(--text-2xs); line-height: 1.3; overflow-wrap: anywhere; }
.sr-gate__ms { font: var(--weight-medium) var(--text-2xs) / 1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--dur-quick) var(--ease-out); }
.sr-gate__icon {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: var(--weight-bold) var(--text-2xs) / 1 var(--font-body); border: 1.5px solid var(--border-strong); color: transparent;
  transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.sr-gate__icon::before { content: ""; }
.sr-gate[data-s="pass"] .sr-gate__icon { background: var(--buy-soft); border-color: transparent; color: var(--buy); }
.sr-gate[data-s="pass"] .sr-gate__icon::before { content: "✓"; }
.sr-gate[data-s="fail"] { background: var(--sell-soft); }
.sr-gate[data-s="fail"] .sr-gate__icon { background: var(--sell); border-color: transparent; color: var(--on-sell); }
.sr-gate[data-s="fail"] .sr-gate__icon::before { content: "✕"; }
.sr-gate[data-s="warn"] { background: var(--warn-soft); }
.sr-gate[data-s="warn"] .sr-gate__icon { background: var(--warn); border-color: transparent; color: var(--bg); }
.sr-gate[data-s="warn"] .sr-gate__icon::before { content: "!"; }
.sr-gate[data-s="run"] { background: var(--brand-soft); }
.sr-gate[data-s="run"] .sr-gate__icon { border-color: var(--brand); transform: scale(1.12); }
.sr-gate[data-s="idle"] .sr-gate__txt b { color: var(--ink-3); font-weight: var(--weight-normal); }
.sr-gate[data-s="idle"] .sr-gate__icon { border-style: dashed; }
.sr-gate[data-s="idle"] .sr-gate__ms, .sr-gate[data-s="run"] .sr-gate__ms { opacity: 0; }

/* ---------- broker accounts ---------- */

.sr-accts { display: grid; grid-auto-rows: 1fr; min-width: 0; }
.sr-acct {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3);
  margin-block: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
  background: var(--raised); border: 1px solid var(--border);
  transition: opacity var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.sr-acct__node {
  position: absolute; left: -5px; top: calc(50% - 4.5px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
}
.sr-acct__node::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--buy); opacity: 0; transform: scale(.4); }
.sr-acct__id { display: grid; min-width: 0; }
.sr-acct__id b { color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: 1.3; }
.sr-acct__id small { color: var(--ink-3); font-size: var(--text-2xs); line-height: 1.3; }
.sr-acct__st { display: inline-flex; align-items: center; gap: 6px; justify-self: end; }
.sr-acct__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font: var(--weight-medium) var(--text-2xs) / var(--leading-snug) var(--font-mono); color: var(--ink-3); }
.sr-acct__ord { color: var(--ink-2); }
.sr-side { font-weight: var(--weight-semi); padding: 1px 5px; border-radius: var(--radius-xs); }
.sr-side--buy { color: var(--buy); background: var(--buy-soft); }
.sr-side--sell { color: var(--sell); background: var(--sell-soft); }
.sr-lat { font: var(--weight-medium) var(--text-2xs) / 1 var(--font-mono); color: var(--ink-2); padding: var(--space-1) 6px; border-radius: var(--radius-sm); background: var(--neutral-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-lat span { display: inline-block; min-width: 3ch; text-align: right; }
.sr-pill { font: var(--weight-semi) var(--text-2xs) / 1 var(--font-body); padding: 5px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; transition: opacity var(--dur-quick) var(--ease-out); }
.sr-acct[data-s="filled"] { border-color: color-mix(in srgb, var(--buy) 35%, var(--border)); }
.sr-acct[data-s="filled"] .sr-acct__node { background: var(--buy); border-color: var(--buy); }
.sr-acct[data-s="filled"] .sr-pill { background: var(--buy-soft); color: var(--buy); }
.sr-acct[data-s="held"] .sr-acct__node, .sr-acct[data-s="queued"] .sr-acct__node { background: var(--warn); border-color: var(--warn); }
.sr-acct[data-s="held"] .sr-pill, .sr-acct[data-s="queued"] .sr-pill, .sr-acct[data-s="duplicate"] .sr-pill { background: var(--warn-soft); color: var(--warn); }
.sr-acct[data-s="skipped"] .sr-pill { background: var(--neutral-soft); color: var(--ink-3); }
.sr-acct[data-s="blocked"] .sr-acct__node { background: var(--sell); border-color: var(--sell); }
.sr-acct[data-s="blocked"] .sr-pill { background: var(--sell-soft); color: var(--sell); }
.sr-acct__why { color: var(--ink-3); }
.sr-acct[data-s="held"] .sr-acct__why, .sr-acct[data-s="queued"] .sr-acct__why { color: var(--warn); }
.sr-acct[data-s="blocked"] .sr-acct__why { color: var(--sell); }
.sr-acct__br { color: var(--ink-3); }
.sr-acct[data-s="idle"] { opacity: .6; }
.sr-acct[data-s="idle"] .sr-acct__st, .sr-acct[data-s="idle"] .sr-acct__meta > :last-child,
.sr-acct[data-s="sent"] .sr-pill, .sr-acct[data-s="sent"] .sr-acct__meta > :last-child { opacity: 0; }
.sr-acct[data-s="sent"] { border-color: var(--border-brand); }
.sr-acct[data-s="sent"] .sr-acct__node { border-color: var(--brand); }
.sr-acct[data-s="filled"].is-fresh .sr-acct__node::after { animation: sr-ping 700ms var(--ease-out) both; }
@keyframes sr-ping { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- result, steps and log ---------- */

.sr-result {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: center;
  margin-top: clamp(var(--space-3), 2vw, var(--space-5)); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--raised);
}
.sr-result > * { transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out); }
.sr-result__head { color: var(--ink); font-weight: var(--weight-semi); font-size: var(--text-lg); }
.sr-result__sub { color: var(--ink-3); font-size: var(--text-sm); }
.sr-result__jr { font: var(--weight-medium) var(--text-xs) / 1.3 var(--font-mono); color: var(--buy); }
.sr-result[data-s="pass"] { border-color: color-mix(in srgb, var(--buy) 30%, var(--border)); }
.sr-result[data-s="fail"] { border-color: color-mix(in srgb, var(--sell) 40%, var(--border)); background: var(--sell-soft); }
.sr-result[data-s="warn"] { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: var(--warn-soft); }
.sr-result[data-s="warn"] .sr-result__sub, .sr-result[data-s="fail"] .sr-result__sub { color: var(--ink-2); }
.sr:not([data-stage="5"]) .sr-result > * { opacity: 0; transform: translateY(4px); }

.sr-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.sr-steps { counter-reset: sr-step; display: grid; gap: var(--space-1); }
.sr-steps li {
  counter-increment: sr-step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: background-color var(--dur-quick) var(--ease-out);
}
.sr-steps li::before {
  content: counter(sr-step); grid-row: span 2; width: var(--space-6); height: var(--space-6); border-radius: 50%; display: grid; place-items: center;
  font: var(--weight-semi) var(--text-xs) / 1 var(--font-mono); color: var(--ink-3); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out);
}
.sr-steps b { color: var(--ink); font-weight: var(--weight-semi); font-size: var(--text-base); }
.sr-steps span { color: var(--ink-3); font-size: var(--text-sm); }
.sr-steps li[data-done]::before { background: var(--action-soft); color: var(--action-ink); border-color: var(--border-brand); }
.sr-steps li[aria-current="step"] { background: var(--brand-soft); }
.sr-steps li[aria-current="step"]::before { background: var(--action); color: var(--on-action); border-color: var(--action); }

.sr-log {
  --sr-log-muted: color-mix(in srgb, var(--code-ink) 65%, var(--code-bg));
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--code-bg);
}
.sr-log__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--raised); border-bottom: 1px solid var(--border); font: var(--weight-semi) var(--text-xs) / 1.2 var(--font-mono); color: var(--ink-2); }
.sr-log__scroll { display: flex; flex-direction: column-reverse; block-size: 17.5rem; overflow: auto; overscroll-behavior: contain; }
.sr-log ol { padding: var(--space-2) var(--space-3); font: var(--weight-normal) var(--text-2xs) / var(--leading-relaxed) var(--font-mono); color: var(--code-ink); }
.sr-log li { display: grid; grid-template-columns: 9.5ch minmax(0, 1fr); gap: var(--space-2); padding-block: 1px; animation: sr-in var(--dur-quick) var(--ease-out); }
.sr-log li > :last-child::before { margin-right: 6px; color: color-mix(in srgb, var(--brand) 60%, var(--code-ink)); content: "•"; content: "•" / ""; }
.sr-log li[data-t="pass"] > :last-child::before { color: color-mix(in srgb, var(--buy) 60%, var(--code-ink)); content: "✓"; content: "✓" / ""; }
.sr-log li[data-t="fail"] > :last-child::before { color: color-mix(in srgb, var(--sell) 60%, var(--code-ink)); content: "✕"; content: "✕" / ""; }
.sr-log li[data-t="warn"] > :last-child::before { color: color-mix(in srgb, var(--warn) 60%, var(--code-ink)); content: "!"; content: "!" / ""; }
.sr-log li[data-t="skip"] > :last-child::before { color: var(--sr-log-muted); content: "–"; content: "–" / ""; }
.sr-log__ms { color: var(--sr-log-muted); white-space: pre; font-variant-numeric: tabular-nums; }
@keyframes sr-in { from { opacity: 0; transform: translateY(4px); } }
.sr:not(.is-live) .sr-log li { animation: none; }

.sr-fine { margin-top: var(--space-4); font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--ink-3); max-width: 75ch; }
.sr .sr-fine + .sr-fine { margin-top: 6px; }

/* ---------- medium: lower panels side by side ---------- */
@container sr (min-width: 680px) {
  .sr-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .sr-result { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-result__sub { grid-row: 2; }
  .sr-result__jr { grid-row: 1 / span 2; grid-column: 2; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--buy-soft); }
}

/* ---------- wide: chart, hub and brokers on one row (signal-router.js WIDE) ---------- */
@container sr (min-width: 960px) {
  .sr-stage { grid-template-columns: minmax(0, 1.3fr) var(--space-14) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
  .sr-wire { width: 100%; height: 100%; align-self: stretch; }
  .sr-out { grid-template-columns: var(--space-16) minmax(0, 1fr); }
  .sr-fan { width: var(--space-16); }
  .sr-fan__wide, .sr-wire__wide { display: inline; }
  .sr-fan__stack, .sr-wire__stack { display: none; }
}

/* ---------- roomy ({% signal_router roomy=True %}, home): larger type, fewer labels at once.
   Every label stays in the HTML; the gate notes and timings, per-account size,
   latency and bracket lines are hidden, and the step list (told by the story
   above it) is kept for screen readers only. Stopped paths and reasons stay. ---------- */
.sr--roomy { font-size: var(--text-md); }
.sr--roomy .sr-title { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
.sr--roomy .sr-gate { padding: var(--space-2) var(--space-3); }
.sr--roomy .sr-gate__txt b { font-size: var(--text-md); }
.sr--roomy .sr-gate__txt small, .sr--roomy .sr-gate__ms,
.sr--roomy .sr-acct__id small, .sr--roomy .sr-lat, .sr--roomy .sr-acct__br { display: none; }
.sr--roomy .sr-hub__title { font-size: var(--text-2xl); }
.sr--roomy .sr-acct { padding: var(--space-3); }
.sr--roomy .sr-acct__id b { font-size: var(--text-md); }
.sr--roomy .sr-pill { font-size: var(--text-xs); }
.sr--roomy .sr-acct__meta { font-size: var(--text-xs); }
.sr--roomy .sr-code { font-size: var(--text-xs); }
.sr--roomy .sr-chart__strat { font-size: var(--text-xs); }
.sr--roomy .sr-result__head { font-size: var(--text-2xl); }
.sr--roomy .sr-result__sub { font-size: var(--text-base); }
.sr--roomy .sr-lower { grid-template-columns: minmax(0, 1fr); }
.sr--roomy .sr-steps {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr--roomy .sr-log ol { font-size: var(--text-xs); }
.sr--roomy .sr-log__scroll { block-size: 13rem; }

@media (prefers-reduced-motion: reduce) {
  .sr *, .sr *::before, .sr *::after { transition: none; animation: none; }
}

} /* @layer page */