/* =====================================================================
   Agent Operations Console, styling. Grounded in the Raidiam system
   (ink + mint, Satoshi, JetBrains Mono). Dark ink stage = the showpiece.
   ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono { font-family: var(--font-mono); }
.cap { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--fg3); }
button { font-family: var(--font-body); cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-mint); outline-offset: 2px; }

/* ---------------- HEADER ---------------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(247,249,249,0.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--brand-ink); display: grid; place-items: center;
}
.wordmark .mark svg { width: 18px; height: 18px; }
.wordmark .txt b { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--brand-ink); display: block; line-height: 1.1; }
.wordmark .txt span { font-size: 11px; color: var(--fg3); letter-spacing: .02em; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-pill.replay { background: var(--warning-soft); color: #8C5E1A; }
.status-pill.replay .dot { background: var(--warning); }
.status-pill.live { background: var(--success-soft); color: #1A7A4E; }
.status-pill.live .dot { background: var(--success); animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--fg2); user-select: none; cursor: pointer; }
.toggle .track { width: 36px; height: 20px; border-radius: 999px; background: var(--neutral-300); position: relative; transition: background var(--dur-2) var(--ease-standard); }
.toggle .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease-standard); }
.toggle.on .track { background: var(--brand-mint); }
.toggle.on .track::after { transform: translateX(16px); }

.ghost-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--fg2); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 7px 13px; }
.ghost-btn:hover { background: #fff; border-color: var(--brand-ink); color: var(--brand-ink); }
.ghost-btn svg { width: 14px; height: 14px; }

/* ---------------- PAGE SHELL ---------------- */
.wrap { max-width: 1340px; margin: 0 auto; padding: 26px 28px 80px; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.intro h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.025em; line-height: 1.05; color: var(--brand-ink); margin: 0 0 8px; max-width: 18ch; }
.intro p { margin: 0; color: var(--fg2); font-size: 15px; line-height: 1.5; max-width: 56ch; }
.intro .lead-em { color: var(--brand-mint-deep); font-weight: 600; }

/* ---------------- SCENARIO RAIL ---------------- */
.rail { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.scn {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 13px; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs);
  font-size: 13.5px; font-weight: 600; color: var(--brand-ink);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
}
.scn:hover:not(:disabled):not(.locked) { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.scn .num { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; background: var(--brand-mint-soft); color: var(--brand-mint-deep); }
.scn .scn-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.scn .scn-txt small { font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); }
.scn.locked, .scn:disabled { opacity: .5; cursor: not-allowed; }
.scn.locked .num { background: var(--neutral-100); color: var(--fg-mute); }
.scn.active { border-color: var(--brand-mint); box-shadow: var(--shadow-glow); }
.scn.done .num { background: var(--success-soft); color: #1A7A4E; }
.scn .lock { width: 13px; height: 13px; color: var(--fg-mute); margin-left: 2px; }

.rail-group { display: flex; gap: 10px; align-items: center; }
.rail-sep { width: 1px; align-self: stretch; background: var(--border-subtle); margin: 2px 4px; }
.modeseg { display: inline-flex; background: var(--neutral-100); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.modeseg button { border: none; background: transparent; font-size: 12px; font-weight: 700; color: var(--fg2); padding: 5px 12px; border-radius: var(--radius-pill); }
.modeseg button.on { background: #fff; color: var(--brand-ink); box-shadow: var(--shadow-xs); }

.guardbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 18px; }
.guardbar .gtitle { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--danger); display: inline-flex; align-items: center; gap: 6px; }
.gchip { font-size: 12px; font-weight: 600; color: #A82929; background: var(--danger-soft); border: 1px solid #F0C4C4; border-radius: var(--radius-pill); padding: 5px 11px; transition: transform var(--dur-2) var(--ease-standard); }
.gchip:hover:not(:disabled) { transform: translateY(-1px); }
.gchip:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- STAGE (dark ink showpiece) ---------------- */
.stage-card { background: var(--brand-ink); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; border: 1px solid #0A2024; }
.stage-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% -10%, rgba(52,200,182,0.10), transparent 60%); pointer-events: none; }

.hud { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--brand-ink-line); position: relative; z-index: 2; flex-wrap: wrap; }
.hud .hud-scn { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.hud .hud-scn b { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.hud .hud-scn small { color: var(--fg-on-ink-2); font-size: 11px; }
.hud-spacer { flex: 1; }

.envelope { display: flex; flex-direction: column; gap: 5px; min-width: 188px; }
.envelope .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.envelope .lab .k { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--fg-on-ink-2); white-space: nowrap; }
.envelope .lab .v { font-size: 13px; color: #fff; font-family: var(--font-mono); font-weight: 500; }
.env-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; position: relative; }
.env-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-mint-deep), var(--brand-mint)); width: 100%; transition: width var(--dur-4) var(--ease-emphasis); }
.env-type-row { font-family: var(--font-mono); font-size: 10px; color: var(--brand-mint-bright); letter-spacing: .01em; }
.budget .env-fill { background: linear-gradient(90deg, var(--brand-mint), var(--brand-mint-bright)); }
.budget.low .env-fill { background: linear-gradient(90deg, var(--warning), #F0B95A); }

.stage {
  position: relative; width: 100%;
  height: clamp(440px, 47vw, 600px);
  z-index: 1;
}
.edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }

/* identity / trust boundaries, translucent rounded groups BEHIND the nodes.
   The box tint matches the agent identity it encloses: mint = client_id ap-orchestrator-agent,
   violet = client_id payments-agent (a distinct agent's own wallet). */
.edges .boundary { fill: rgba(52,200,182,0.045); stroke-dasharray: 4 5; stroke-width: 1.4; transition: opacity var(--dur-4) var(--ease-emphasis); }
.edges .boundary-self { stroke: rgba(52,200,182,0.55); fill: rgba(52,200,182,0.05); }
.edges .boundary-ext  { stroke: rgba(139,108,230,0.62); fill: rgba(139,108,230,0.07); }
.edges .boundary-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .01em; }
.edges .boundary-label-self { fill: var(--brand-mint-bright); }
.edges .boundary-label-ext  { fill: var(--identity-ext-bright); }
@keyframes boundaryStand { from { opacity: 0; } to { opacity: 1; } }
.edges .boundary-ext, .edges .boundary-label-ext { animation: boundaryStand var(--dur-4) var(--ease-emphasis); }
.edges .rail-line { stroke: var(--brand-ink-line); stroke-width: 1.5; fill: none; opacity: .5; }
.edges .rail-line.warm { opacity: .9; stroke: rgba(52,200,182,0.45); }
.edges .rail-line.dead { stroke: var(--danger); stroke-dasharray: 5 6; opacity: .85; }
.edges .pulse-path { fill: none; stroke-width: 2.5; opacity: 0; }

/* actor nodes (HTML over SVG) */
.node {
  position: absolute; transform: translate(-50%, -50%);
  width: 138px; z-index: 2;
  background: var(--brand-ink-3); border: 1px solid var(--brand-ink-line);
  border-radius: var(--radius-md); padding: 10px 11px;
  color: var(--fg-on-ink); box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-standard), transform var(--dur-3) var(--ease-standard), border-color var(--dur-2), box-shadow var(--dur-2);
  cursor: pointer;
}
.node.small { width: 120px; padding: 8px 10px; }
.node.shown { opacity: 1; }
/* spawn-in: the card grows OUT of its parent. --spawn-dx/--spawn-dy (set per-node in diagram.js)
   bias the start offset toward the spawning parent so it reads "the orchestrator spawned this",
   not "a node appeared". transform-origin leans the same way for an origin-of-growth feel. */
.node.spawn-in { animation: spawnIn var(--dur-4) var(--ease-emphasis); transform-origin: calc(50% + var(--spawn-dx, 0px)) calc(50% + var(--spawn-dy, 0px)); }
@keyframes spawnIn {
  from { opacity: 0; transform: translate(calc(-50% + var(--spawn-dx, 0px)), calc(-50% + var(--spawn-dy, 8px))) scale(.82); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* the connector spark that travels parent → new slot as a sub-agent spawns */
.spawn-spark { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: radial-gradient(circle, var(--brand-mint-bright) 0%, rgba(52,200,182,0.55) 45%, rgba(52,200,182,0) 72%);
  box-shadow: 0 0 10px 2px rgba(52,200,182,0.55); opacity: 0; }
.node .nhead { display: flex; align-items: center; gap: 8px; }
.node .nico { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: rgba(52,200,182,0.16); color: var(--brand-mint); }
.node .nico svg { width: 15px; height: 15px; }
.node .nlabel { font-weight: 700; font-size: 12.5px; line-height: 1.1; color: #fff; font-family: var(--font-display); letter-spacing: -0.01em; }
.node .nsub { font-size: 9.5px; color: var(--fg-on-ink-2); margin-top: 3px; line-height: 1.25; }
.node.small .nsub { display: none; }
.node .ncid { margin-top: 7px; font-family: var(--font-mono); font-size: 9px; color: var(--brand-mint-bright); background: rgba(52,200,182,0.10); border-radius: 4px; padding: 2px 6px; display: none; }
.node.show-cid .ncid { display: inline-block; }

/* persistent identity tint, a standing property of the node, not a one-off pulse.
   .id-self = client_id ap-orchestrator-agent (the one shared agent identity); .id-ext = client_id payments-agent. */
.node.id-self .nico { background: rgba(52,200,182,0.16); color: var(--brand-mint); }
.node.id-ext  .nico { background: rgba(139,108,230,0.18); color: var(--identity-ext-bright); }
.node.id-ext  { border-color: rgba(139,108,230,0.45); }
.node.id-ext  .ncid { color: var(--identity-ext-bright); background: rgba(139,108,230,0.12); }
.node.id-ext.active { border-color: var(--identity-ext); box-shadow: 0 0 0 3px rgba(139,108,230,0.30), 0 8px 26px rgba(0,0,0,0.34); }
/* the identity CHANGE made persistent: ext agent flips its client_id pill */
.node .ncid.cid-flip { color: var(--identity-ext-bright); background: rgba(139,108,230,0.14); border: 1px solid rgba(139,108,230,0.4); }
.node .ncid.cid-flip s { color: var(--fg-on-ink-2); opacity: .7; }
/* in-house payment-agent retired in Model B (so two competing payment nodes never show) */
.node.retired { display: none; }

.node.active { border-color: var(--brand-mint); box-shadow: 0 0 0 3px rgba(52,200,182,0.28), 0 8px 26px rgba(0,0,0,0.34); }
.node.dim { opacity: .32; }
.node.dead { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220,64,64,0.4); }
.node.dead .nico { background: rgba(220,64,64,0.18); color: #FF8A8A; }
.node.flow-from .nico { animation: icoPing .5s var(--ease-standard); }
@keyframes icoPing { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

.node.gate {
  width: 132px; background: linear-gradient(180deg, #18454A, #123438);
  border-color: var(--brand-mint-deep);
}
.node.gate .nico { background: rgba(52,200,182,0.22); }
.node.holds-cred .credchip { display: flex; }
.credchip { display: none; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 7px; border-radius: 6px; background: rgba(52,200,182,0.12); border: 1px dashed rgba(52,200,182,0.5); }
.credchip svg { width: 12px; height: 12px; color: var(--brand-mint-bright); flex: none; }
.credchip span { font-size: 9px; font-weight: 700; letter-spacing: .03em; color: var(--brand-mint-bright); text-transform: uppercase; }
.credchip.gone { opacity: .25; border-style: solid; }

/* the gate stamp */
.stamp {
  position: absolute; transform: translate(-50%, -50%) scale(.6); z-index: 5;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .02em;
  padding: 7px 14px; border-radius: 8px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.stamp svg { width: 16px; height: 16px; }
.stamp.show { animation: stampIn 1.9s var(--ease-emphasis) forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-6deg); } 14% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(-3deg); } 26% { transform: translate(-50%,-50%) scale(1) rotate(-3deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(-3deg); } }
.stamp.granted { background: var(--success-soft); color: #136B43; border: 1.5px solid var(--success); }
.stamp.narrowed { background: var(--brand-mint-soft); color: var(--brand-mint-deep); border: 1.5px solid var(--brand-mint); }
.stamp.denied { background: var(--danger-soft); color: #A82929; border: 1.5px solid var(--danger); }
.stamp.hold { background: var(--warning-soft); color: #8C5E1A; border: 1.5px solid var(--warning); }

.gate-flash { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; border-radius: var(--radius-xl); }
.gate-flash.green { box-shadow: inset 0 0 80px rgba(43,182,115,0.22); animation: flashOnce 1.1s ease; }
.gate-flash.red { box-shadow: inset 0 0 90px rgba(220,64,64,0.30); animation: flashOnce 1.1s ease; }
.gate-flash.amber { box-shadow: inset 0 0 80px rgba(232,165,58,0.22); animation: flashOnce 1.1s ease; }
@keyframes flashOnce { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* travelling token particle */
.tok { position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; will-change: left, top; }
.tok .core { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; box-shadow: 0 0 14px 3px rgba(52,200,182,0.6); }
.tok.granted .core, .tok.narrowed .core { background: var(--brand-mint); }
.tok.denied .core, .tok.bounce .core { background: var(--danger); box-shadow: 0 0 14px 3px rgba(220,64,64,0.6); }
.tok.attest .core, .tok.info .core { background: var(--info); box-shadow: 0 0 14px 3px rgba(47,143,204,0.6); }
.tok.stepup .core, .tok.approve .core { background: var(--warning); box-shadow: 0 0 14px 3px rgba(232,165,58,0.6); }
.tok .core svg { width: 9px; height: 9px; color: var(--brand-ink); }
.tok .trail { position: absolute; inset: -3px; border-radius: 6px; opacity: .5; }

/* lower-third caption */
.lowerthird {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 6;
  background: rgba(10,30,33,0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--brand-ink-line); border-radius: var(--radius-md);
  padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px;
  opacity: 0; transform: translateY(8px); transition: transform var(--dur-3) var(--ease-standard);
}
.lowerthird.show { opacity: 1; transform: translateY(0); }
.lowerthird .lt-badge { flex: none; margin-top: 1px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; }
.lowerthird .lt-badge svg { width: 14px; height: 14px; }
.lt-badge.granted, .lt-badge.narrowed { background: rgba(43,182,115,0.2); color: #5FE0A6; }
.lt-badge.denied, .lt-badge.bounce, .lt-badge.revoke { background: rgba(220,64,64,0.22); color: #FF9A9A; }
.lt-badge.info, .lt-badge.attest, .lt-badge.issue { background: rgba(47,143,204,0.22); color: #7CC4F0; }
.lt-badge.stepup, .lt-badge.approve { background: rgba(232,165,58,0.22); color: #F2C572; }
.lowerthird .lt-body { min-width: 0; }
.lowerthird .lt-title { color: #fff; font-weight: 700; font-size: 13px; font-family: var(--font-display); }
.lowerthird .lt-cap { color: var(--fg-on-ink); font-size: 12.5px; line-height: 1.45; margin-top: 2px; text-wrap: pretty; }
.lowerthird .lt-cap .term { color: var(--brand-mint-bright); font-weight: 600; }

.idle-hint {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: end center; pointer-events: none;
  padding-bottom: 7%;
  transition: opacity var(--dur-3); 
}
.idle-hint .ih { text-align: center; color: var(--fg-on-ink-2); background: rgba(10,30,33,0.72); backdrop-filter: blur(6px); border: 1px solid var(--brand-ink-line); border-radius: var(--radius-md); padding: 16px 22px; }
.idle-hint .ih svg { width: 30px; height: 30px; color: var(--brand-mint); opacity: .8; }
.idle-hint .ih p { margin: 10px 0 0; font-size: 13px; }
.idle-hint .ih b { color: #fff; }
.idle-hint.gone { opacity: 0; visibility: hidden; }

/* legend */
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--brand-ink-line); position: relative; z-index: 2; }
.legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--fg-on-ink-2); font-weight: 600; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; }
.legend .sw.granted { background: var(--success); } .legend .sw.narrowed { background: var(--brand-mint); }
.legend .sw.denied { background: var(--danger); } .legend .sw.info { background: var(--info); } .legend .sw.stepup { background: var(--warning); }

/* the identity rule, the one-line statement of what tells the two models apart */
.id-rule { display: flex; align-items: center; gap: 9px; padding: 11px 22px; border-top: 1px solid var(--brand-ink-line); position: relative; z-index: 2; }
.id-rule svg { flex: none; color: var(--brand-mint-bright); }
.id-rule span { font-size: 11.5px; line-height: 1.45; color: var(--fg-on-ink); }
.id-rule b { color: #fff; font-weight: 700; }
.id-rule code { background: rgba(255,255,255,0.08); color: var(--brand-mint-bright); padding: 1px 5px; }

/* identity-tinted client_id pills (inspector) */
code.cid { font-weight: 600; }
code.cid-self { background: var(--identity-self-soft); color: var(--identity-self-deep); }
code.cid-ext  { background: var(--identity-ext-soft); color: var(--identity-ext-deep); }

/* ---------------- TRACE STRIP ---------------- */
.tracewrap { margin-top: 14px; }
.tracewrap .th { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.tracewrap .th .cap { margin: 0; }
.tracewrap .th .hint { font-size: 12px; color: var(--fg3); }
.trace { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-behavior: smooth; }
.hop {
  flex: none; min-width: 184px; max-width: 230px; text-align: left;
  background: #fff; border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--radius-sm);
  padding: 10px 12px; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2), border-color var(--dur-2);
  opacity: 1;
}
@keyframes hopIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.hop.in { opacity: 1; transform: translateY(0); }
.hop:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hop.current { box-shadow: var(--shadow-glow); }
.hop .hop-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.hop .hpill { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.hop .hidx { font-size: 10px; font-family: var(--font-mono); color: var(--fg-mute); margin-left: auto; }
.hop .hop-title { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); line-height: 1.2; }
.hop .hop-detail { font-size: 11.5px; color: var(--fg2); margin-top: 3px; line-height: 1.35; }
.hop.granted, .hop.narrowed { border-left-color: var(--brand-mint); }
.hop.granted .hpill { background: var(--success-soft); color: #136B43; } .hop.narrowed .hpill { background: var(--brand-mint-soft); color: var(--brand-mint-deep); }
.hop.denied, .hop.bounce, .hop.revoke { border-left-color: var(--danger); } .hop.denied .hpill, .hop.bounce .hpill, .hop.revoke .hpill { background: var(--danger-soft); color: #A82929; }
.hop.info, .hop.attest, .hop.issue { border-left-color: var(--info); } .hop.info .hpill, .hop.attest .hpill, .hop.issue .hpill { background: var(--info-soft); color: #1E6FA0; }
.hop.stepup, .hop.approve { border-left-color: var(--warning); } .hop.stepup .hpill, .hop.approve .hpill { background: var(--warning-soft); color: #8C5E1A; }
.hop.summary { border-left-color: var(--neutral-400); } .hop.summary .hpill { background: var(--neutral-100); color: var(--fg2); }
/* identity tint, a hop performed under client_id payments-agent (a distinct agent) carries
   the violet identity colour, so the change of identity is visible in the trace strip too. */
.hop.cid-ext { border-left-color: var(--identity-ext) !important; }
.hop.cid-ext::after { content: 'payments-agent'; display: inline-block; margin-top: 7px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--identity-ext-deep); background: var(--identity-ext-soft); border-radius: 4px; padding: 1px 6px; }
.hop .devline { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); font-family: var(--font-mono); font-size: 10px; color: var(--fg3); line-height: 1.5; word-break: break-all; }
body.dev .hop .devline { display: block; }

/* ---------------- INSPECTOR DRAWER ---------------- */
.scrim { position: fixed; inset: 0; background: rgba(15,42,46,0.55); z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--dur-3); }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(540px, 94vw); background: var(--bg-surface); box-shadow: var(--shadow-lg); z-index: 40; transform: translateX(100%); transition: transform var(--dur-3) var(--ease-emphasis); display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle); position: relative; }
.drawer-head .close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-subtle); background: #fff; display: grid; place-items: center; color: var(--fg2); }
.drawer-head .close:hover { background: var(--bg-canvas); }
.drawer-head .d-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.drawer-head .d-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--brand-ink); padding-right: 40px; line-height: 1.15; }
.drawer-head .d-detail { font-size: 12.5px; color: var(--fg2); margin-top: 4px; }
.drawer-body { flex: 1; overflow: auto; padding: 16px 22px 40px; }

.dpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dpill.granted, .dpill.narrowed { background: var(--brand-mint-soft); color: var(--brand-mint-deep); }
.dpill.denied, .dpill.bounce, .dpill.revoke { background: var(--danger-soft); color: #A82929; }
.dpill.info, .dpill.attest, .dpill.issue { background: var(--info-soft); color: #1E6FA0; }
.dpill.stepup, .dpill.approve { background: var(--warning-soft); color: #8C5E1A; }
.dpill.summary { background: var(--neutral-100); color: var(--fg2); }

.insp-section { margin-top: 20px; }
.insp-section > .sh { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 9px; }
.insp-section > .sh svg { width: 14px; height: 14px; color: var(--brand-mint-deep); }
.insp-section > .sh .sh-tag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--fg-mute); letter-spacing: .02em; text-transform: none; }

.reason-box { display: flex; gap: 10px; align-items: flex-start; background: var(--danger-soft); border: 1px solid #F0C4C4; border-radius: var(--radius-sm); padding: 11px 13px; }
.reason-box.amber { background: var(--warning-soft); border-color: #EBD3A0; }
.reason-box svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--danger); }
.reason-box.amber svg { color: var(--warning); }
.reason-box .rt { font-size: 12.5px; color: #8A2020; line-height: 1.45; }
.reason-box.amber .rt { color: #8C5E1A; }

.code { background: var(--brand-ink); border-radius: var(--radius-sm); padding: 13px 15px; overflow-x: auto; }
.code pre { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: #CFE6E2; white-space: pre; }
.code .jk { color: #7CC4F0; } .code .js { color: #9FE6CF; } .code .jn { color: #F2C572; } .code .jb { color: #F2A0A0; } .code .jp { color: #B8A6E8; }
.code-cap { font-size: 10.5px; color: var(--fg3); margin: 0 0 6px; font-family: var(--font-mono); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-size: 12.5px; }
.kv .k { color: var(--fg3); font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; align-self: center; }
.kv .v { color: var(--brand-ink); word-break: break-word; }
.kv .v code { font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; }

.actchain { display: flex; flex-direction: column; gap: 0; margin: 4px 0; }
.actchain .ac { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.actchain .ac .acn { width: 22px; height: 22px; border-radius: 6px; flex: none; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--brand-mint-soft); color: var(--brand-mint-deep); }
.actchain .ac .acl { font-size: 12.5px; font-weight: 600; color: var(--brand-ink); }
.actchain .ac .acl small { display: block; font-weight: 500; color: var(--fg3); font-size: 10.5px; }
.actchain .acbar { width: 1px; height: 12px; background: var(--border-strong); margin-left: 11px; }

.specref { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.specref:last-child { border-bottom: none; }
.specref .stag { flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.specref .stag.standard { background: var(--info-soft); color: #1E6FA0; }
.specref .stag.profile { background: var(--warning-soft); color: #8C5E1A; }
.specref .sbody .sname { font-size: 12.5px; font-weight: 700; color: var(--brand-ink); }
.specref .sbody .snote { font-size: 11.5px; color: var(--fg2); line-height: 1.45; margin-top: 2px; }
.specref .sbody .skind { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.specref .skind.standard { color: var(--info); } .specref .skind.profile { color: var(--warning); }

/* ---------------- STANDARDS SECTION ---------------- */
.section { margin-top: 44px; }
.section .s-head { max-width: 60ch; margin-bottom: 20px; }
.section .s-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--brand-ink); margin: 0 0 8px; }
.section .s-head p { margin: 0; color: var(--fg2); font-size: 14px; line-height: 1.55; }
.legendkey { display: inline-flex; gap: 14px; margin-top: 12px; }
.legendkey span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--fg2); }
.legendkey .tg { width: 10px; height: 10px; border-radius: 3px; }
.legendkey .tg.standard { background: var(--info); } .legendkey .tg.profile { background: var(--warning); }

.specgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.speccard { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 15px 16px; box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2); }
.speccard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.speccard .sc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.speccard .sc-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; }
.speccard .sc-tag.standard { background: var(--info-soft); color: #1E6FA0; } .speccard .sc-tag.profile { background: var(--warning-soft); color: #8C5E1A; }
.speccard .sc-kind { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.speccard .sc-kind.standard { color: var(--info); } .speccard .sc-kind.profile { color: var(--warning); }
.speccard .sc-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--brand-ink); letter-spacing: -0.01em; }
.speccard .sc-note { font-size: 12.5px; color: var(--fg2); line-height: 1.5; margin-top: 5px; }

.refrail { margin-top: 28px; }
.expander { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; margin-bottom: 10px; overflow: hidden; }
.expander > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--brand-ink); font-family: var(--font-display); }
.expander > summary::-webkit-details-marker { display: none; }
.expander > summary .chev { margin-left: auto; transition: transform var(--dur-2); width: 16px; height: 16px; color: var(--fg-mute); }
.expander[open] > summary .chev { transform: rotate(90deg); }
.expander .ex-body { padding: 4px 18px 18px; }

/* ---------------- RESPONSIVE: vertical stepped flow ---------------- */
@media (max-width: 860px) {
  .wrap { padding: 18px 16px 64px; }
  .stage { height: auto; min-height: 0; padding: 8px 0 12px; }
  .stage.vertical { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
  .edges { display: none; }
  .node { position: relative; transform: none; width: 100%; opacity: 1; left: auto !important; top: auto !important; }
  .node.spawn-in { animation: none; }
  .node:not(.shown) { display: none; }
  .stamp { position: fixed; left: 50% !important; top: 30% !important; }
  .lowerthird { position: relative; left: 0; right: 0; bottom: 0; margin-top: 10px; }
  .idle-hint { position: relative; padding: 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tok { display: none !important; }
  .node.spawn-in, .stamp.show, .status-pill.live .dot, .node.flow-from .nico { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .env-fill { transition: width .01ms; }
}

/* ===================== LIVE additions (live.js) ===================== */
.scn.unhappy .num { background: var(--danger-soft); color: #A82929; }
.scn.unhappy.active { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
#aoc-live-actions .gtitle { color: var(--brand-ink); }
#aoc-envelope-panel #aoc-envelope-body { display: grid; gap: 14px; grid-template-columns: minmax(220px, 320px) 1fr; align-items: start; }
.aoc-meter { background: var(--brand-ink); color: #fff; border-radius: var(--radius-md); padding: 14px 16px; }
.aoc-meter-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 13px; color: var(--fg-on-ink-2, #B9D2D2); }
.aoc-meter-row b { color: #fff; font-family: var(--font-mono); font-size: 14px; }
.aoc-meter-row.hi { border-top: 1px solid var(--brand-ink-line); margin-top: 4px; padding-top: 9px; }
.aoc-meter-row.hi b { color: var(--brand-mint); font-size: 17px; }
.aoc-ledger { background: var(--bg-canvas); border: 1px solid var(--neutral-100); border-radius: var(--radius-md); padding: 12px 14px; }
.aoc-led-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 12.5px; color: var(--fg2); border-bottom: 1px dashed var(--neutral-100); }
.aoc-led-row:last-child { border-bottom: none; }
.aoc-led-row b { font-family: var(--font-mono); color: var(--brand-ink); }
.aoc-explain { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.55; color: var(--fg3); background: var(--success-soft); border-radius: var(--radius-md); padding: 11px 14px; margin: 0; }
@media (max-width: 720px) { #aoc-envelope-panel #aoc-envelope-body { grid-template-columns: 1fr; } }

/* Credential card, the always-available affordance to open the issued VC in the inspector */
.aoc-cred-card { display: block; width: 100%; text-align: left; cursor: pointer; margin: 16px 0 0;
  background: linear-gradient(135deg, #fff, var(--brand-mint-soft)); border: 1px solid var(--brand-mint);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); }
.aoc-cred-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 6px 18px rgba(15,42,46,0.12)); border-color: var(--brand-mint-deep); }
.aoc-cred-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.aoc-cred-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-mint-deep); }
.aoc-cred-eyebrow svg { color: var(--brand-mint-deep); }
.aoc-cred-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #136B43; background: var(--success-soft); border-radius: var(--radius-pill); padding: 3px 9px; }
.aoc-cred-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--brand-ink); }
.aoc-cred-meta { display: flex; gap: 6px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--fg2); margin-top: 4px; }
.aoc-cred-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 12.5px; font-weight: 700; color: var(--brand-mint-deep); }
.aoc-cred-cta svg { color: var(--brand-mint-deep); }

/* sdjwt.org verify button (inspector) */
.sdjwt-verify { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--brand-ink); border-radius: var(--radius-pill); padding: 9px 16px; text-decoration: none;
  transition: background var(--dur-2) var(--ease-standard); }
.sdjwt-verify:hover { background: var(--brand-mint-deep); }
.sdjwt-verify svg { color: #fff; }
@media (prefers-reduced-motion: reduce) { .aoc-cred-card, .sdjwt-verify { transition: none; } .aoc-cred-card:hover { transform: none; } }

/* ---------------------------------------------------------------------------
   The three treatment convention. Every component that is not a Raidiam
   product is visibly labelled as a reference implementation standing in for
   the bank's own authorisation server, or as a CBA side illustration.
   Applied on actor cards in the inspector and in the stage legend.
   --------------------------------------------------------------------------- */
.treat { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; border-radius: var(--radius-pill); padding: 3px 9px; border: 1px solid transparent; }
.treat-raidiam { color: #06251a; background: var(--brand-mint); border-color: var(--brand-mint-deep); }
.treat-reference { color: #6B4A00; background: #FFF3D6; border-color: #E8C46A; }
.treat-cba { color: #123B6B; background: #E6EFFA; border-color: #A9C6E8; }
.treatkey { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px;
  border-top: 1px solid var(--brand-ink-line); font-size: 11.5px; color: var(--fg-on-ink-2); }
.treatkey b { color: var(--fg-on-ink, #fff); font-weight: 700; }