/* MCP and authorization replay: "One door".
   Layout follows the replay's own width (container queries). The JS draws wires and packets from the
   measured boxes, so the desktop and stacked layouts share one routing rule. */
.io { position: relative; display: grid; gap: 12px; container: io / inline-size; }
.io-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.io-wires path { fill: none; stroke: rgba(var(--cream-rgb),.16); stroke-width: 1.5; transition: stroke .4s var(--rp-ease); }
.io-wires path.dash { stroke-dasharray: 5 5; stroke: rgba(227,154,134,.32); }
.io-wires path.app { stroke: var(--brass, #e9b46c); }
.io-wires path.mcp { stroke: var(--sky, #8fb3d9); }
.io-wires path.ok { stroke: var(--rp-ok); }
.io-wires path.warn { stroke: var(--rp-warn); }
.io-wires path.bad { stroke: var(--rp-bad); }

.io-node { position: relative; display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; padding: 10px 12px; }
.io-node > .rp-label { margin: 0; }
.io-title { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--cream, #f1ebe0); overflow-wrap: anywhere; }
.io-sub { font-size: 12px; line-height: 1.45; color: var(--muted, #a9b1c2); }
.io-node > .io-swap, .io-node > .rp-tag { margin-top: 6px; }
.rp-tag.io-brass, .io-v.io-brass { color: var(--brass, #e9b46c); }
.rp-tag.io-sky, .io-v.io-sky { color: var(--sky, #8fb3d9); }
.io-v { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.io-v.ok { color: var(--rp-ok); }
.io-v.warn { color: var(--rp-warn); }
.io-v.bad { color: var(--rp-bad); }
.io-v.muted { color: var(--muted, #a9b1c2); opacity: .75; }

/* Swaps: every variant shares one grid cell, so a changing value never resizes its box. */
.io-swap { display: inline-grid; justify-items: start; align-items: center; max-width: 100%; }
.io-swap > * { grid-area: 1 / 1; visibility: hidden; min-width: 0; }
.io-swap > .is-on { visibility: visible; }
.io-late.is-late > .is-on { animation: io-late 1.2s both; }
@keyframes io-late { 0%, 65% { opacity: 0; } 100% { opacity: 1; } }
/* A blocked shortcut, a failing row or a ruled-out path shakes once, as its result lands. */
.io-node:has(> .io-swap.is-late > .rp-tag.bad.is-on) { animation: rp-shake .45s ease-in-out .8s; }

/* Packets ride on top of the cards; their position is a transform set by the JS. */
.io-pkt { --c: var(--sky, #8fb3d9); position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent), 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.io-pkt.is-on { opacity: 1; }
.io-pkt.app { --c: var(--brass, #e9b46c); }
.io-pkt.ok { --c: var(--rp-ok); }
.io-pkt.warn { --c: var(--rp-warn); }
.io-pkt.bad { --c: var(--rp-bad); }

/* ---------- Scenario 1: shared execution ---------- */
.io-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr); grid-template-areas: "app run gate sync" "ext bri gate jobs" ". . short short"; gap: 12px 26px; align-items: center; }
.io-grid > [data-n="app"] { grid-area: app; }
.io-grid > [data-n="runtime"] { grid-area: run; }
.io-grid > [data-n="ext"] { grid-area: ext; }
.io-grid > [data-n="bridge"] { grid-area: bri; }
.io-grid > [data-n="gate"] { grid-area: gate; align-self: stretch; }
.io-grid > [data-n="sync"] { grid-area: sync; }
.io-grid > [data-n="jobs"] { grid-area: jobs; }
.io-grid > [data-n="short"] { grid-area: short; }
.io-gate { align-content: center; border-color: rgba(var(--brass-rgb),.42); background: rgba(var(--brass-rgb),.06); }
.io-gate .io-title { font-size: 12px; color: #f8c882; line-height: 1.5; }
.io-short { border-style: dashed; }
.io-short:has(.muted.is-on) { opacity: .38; }
.io-short.is-active { border-color: var(--rp-bad); background: rgba(227,154,134,.07); }
.io-kvs { display: grid; gap: 2px; width: 100%; margin-top: 6px; }
.io-kv { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 10px; font-size: 12px; line-height: 1.5; color: var(--muted, #a9b1c2); }
.io-kv > .io-swap { justify-items: end; margin-left: auto; }

.io-strip { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.io-ledger, .io-catalog { justify-items: stretch; }
.io-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.io-head .rp-label { margin: 0; }
.io-pool { font-size: 20px; line-height: 1.2; justify-items: end; }
.io-pool > * { transform-origin: right center; }
.io-pool.is-late > .is-on { animation: io-tick 1.3s both; }
@keyframes io-tick { 0%, 55% { opacity: .35; transform: none; } 78% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
.io-same { margin-top: 6px; transition: color .4s; }
.io-ledger.is-active .io-same { color: var(--brass, #e9b46c); }
.io-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.io-chip { padding: 1px 7px; border: 1px solid rgba(var(--sky-rgb),.35); border-radius: 4px; color: var(--sky, #8fb3d9); line-height: 1.6; overflow-wrap: anywhere; }
.io-newtool { margin-top: 8px; }
.io-new { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.io-new .io-chip { color: var(--muted, #a9b1c2); border-style: dashed; border-color: rgba(var(--muted-rgb),.45); }
.io-foot { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted, #a9b1c2); }

/* ---------- Scenario 2: the provider spike ---------- */
.io-body { position: relative; display: grid; gap: 12px; }
.io-rule.is-active { border-color: var(--rp-warn); }
.io-rule-text { margin: 2px 0 8px; font-size: 13px; line-height: 1.5; color: var(--cream, #f1ebe0); }
.io-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.io-reqs li { font-size: 12px; line-height: 1.45; color: var(--muted, #a9b1c2); padding: 1px 7px; border: 1px solid rgba(var(--cream-rgb),.12); border-radius: 4px; }
.io-lab { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.io-lab > .io-node { flex: 0 1 auto; min-width: 0; }
.io-table { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.io-trow { grid-template-columns: minmax(0,1fr) minmax(0,2fr) auto; align-items: center; justify-items: stretch; gap: 3px 14px; padding: 8px 12px; }
.io-tname { font-size: 13px; color: var(--cream, #f1ebe0); }
.io-tev .io-v { white-space: normal; overflow-wrap: anywhere; line-height: 1.45; color: var(--muted, #a9b1c2); }
.io-trow:has(.bad.is-on) .io-tev .io-v { color: var(--rp-bad); }
.io-tres { justify-items: end; }
.io-trow.is-active:has(.bad.is-on) { border-color: var(--rp-bad); }
.io-out { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-areas: "track track ." "pv ih mcp"; gap: 6px 10px; }
.io-out > [data-n="pv"] { grid-area: pv; }
.io-out > [data-n="ih"] { grid-area: ih; }
.io-out > [data-n="mcp"] { grid-area: mcp; }
.io-track { grid-area: track; position: relative; height: 24px; }
.io-track::before { content: ""; position: absolute; left: 25%; right: 25%; top: 11px; height: 2px; border-radius: 1px; background: rgba(var(--cream-rgb),.16); }
/* The slide spans the two path cards' centres (25%..75%): the knob waits between them, and moving the slide
   by half its width lands the knob on the in-house card once that card is chosen. */
.io-slide { position: absolute; top: 0; bottom: 0; left: 25%; right: 25%; transition: transform .9s var(--rp-ease); }
.io-out:has(.io-ih .ok.is-on) .io-slide { transform: translateX(50%); }
.io-knob { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 0 9px; font-size: 12px; line-height: 22px; border-radius: 999px; color: var(--brass, #e9b46c); background: var(--rp-sunk, #0b0f1a); border: 1px solid var(--brass, #e9b46c); }
.io-pv:has(.bad.is-on) { opacity: .5; }
.io-pv:has(.bad.is-on) .io-title { text-decoration: line-through; text-decoration-color: var(--rp-bad); }
.io-ih.is-active { border-color: var(--rp-ok); }

/* ---------- Narrow replays: stack ---------- */
@container io (max-width: 639px) {
  .io-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-areas: "app ext" "run bri" "gate gate" "sync jobs" "short short"; gap: 18px 12px; padding-right: 12px; align-items: stretch; }
  .io-gate { justify-items: center; text-align: center; }
  .io-strip { grid-template-columns: minmax(0,1fr); }
}
/* Phones: the narration carries most kickers and side notes; the map keeps what moves. */
@container io (max-width: 479px) {
  .io-node { padding: 9px 10px; }
  .io-body { gap: 10px; }
  .io-title { font-size: 13px; }
  .io-grid > :not(.io-gate) > .rp-label, .io-grid > [data-n="ext"] > .io-sub, .io-gate > .io-sub, .io-catalog > .io-sub { display: none; }
  .io-grid > .io-short { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .io-grid > .io-short > .io-swap { margin-top: 0; }
  .io-strip > * { grid-area: 1 / 1; transition: opacity .4s var(--rp-ease), visibility .4s; }
  .io-strip > .io-catalog, .io-strip:has(.io-catalog.is-active) > .io-ledger { opacity: 0; visibility: hidden; }
  .io-strip:has(.io-catalog.is-active) > .io-catalog { opacity: 1; visibility: visible; }
  .io-reqs, .io-out .io-sub { display: none; }
  .io-lab { gap: 36px; }
  .io-lab > [data-n="prov"] > .rp-label, .io-lab > [data-n="spike"] > .io-sub { display: none; }
  .io-trow { grid-template-columns: minmax(0,1fr) auto; padding: 7px 10px; }
  .io-tev { grid-row: 2; grid-column: 1 / -1; }
  .io-out { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-areas: "track track" "pv ih" "mcp mcp"; }
  .io-out > .io-mcp { grid-template-columns: minmax(0,1fr) auto; column-gap: 8px; align-items: center; }
  .io-mcp > .rp-label { grid-column: 1 / -1; }
  .io-mcp > .rp-tag { grid-row: 2; grid-column: 2; margin-top: 0; }
}