/* apv-named · /ai-agents/approvals hero · "the name on the wire". Every selector is scoped under .apv-named.
   Final frame by default (no JS, reduced motion, print). .is-live rewinds to t0; the cumulative phase classes .apv-p0….apv-p7
   (set by asset.js from one clock) restore it in order, so every later phase rule sits below the earlier one. .is-sim kills transitions. */
.apv-named{
  --apv-nm-y:54px;                       /* wire top: the x-height centre of line 2 (baseline 59; measured at 4x with Geist loaded) */
  --apv-nm-hb:#92ADCD;                   /* HELD at rest: 45% blue-lt + 55% w-60, ≈7.4:1 on --dk */
  --apv-nm-ok:#97BFA0;                   /* ALLOWED at rest: 60% ok-d + 40% w-60, ≈9:1 */
  --apv-nm-tb:var(--apv-nm-hb);          /* held token at rest = its word (a .6 alpha dash vanished at 1x on a 1.5px stroke) */
  --apv-nm-tg:var(--apv-nm-ok);          /* parked allowed token = its word */
  --apv-nm-bg:var(--dk,#1c1c1c);         /* the mask colour = the band */
  position:relative;margin:0;width:100%;min-width:0;text-align:left;color:#fff;
}
.apv-named .apv-nm-stage{position:relative;height:110px}
.apv-named .apv-nm-call{position:absolute;left:0;top:0;margin:0;font:400 14px/22px var(--mono);color:var(--w-85,rgba(255,255,255,.85));white-space:nowrap}
.apv-named .apv-nm-dot{color:var(--w-45,rgba(255,255,255,.45))}

/* the wire, the call, the gap (mask is the vertical composition's gap; hidden here) */
.apv-named .apv-nm-line{position:absolute;left:0;right:0;top:var(--apv-nm-y);height:1px;background:rgba(255,255,255,.2);z-index:0}
.apv-named .apv-nm-mask{display:none}
.apv-named .apv-nm-tok{position:absolute;right:0;top:calc(var(--apv-nm-y) - .25px);width:40px;height:1.5px;background:var(--apv-nm-tg);z-index:1}

/* line 2: HELD · verb name, printed in the wire. No whitespace between the boxes; each masks the wire with the band colour. */
/* the gap starts at the lead (≈18% of W) so the arrival stub is short and the run-on after the name is the long, visible stretch */
.apv-named .apv-nm-row{position:absolute;left:0;right:0;top:42px;height:22px;display:flex;align-items:baseline;justify-content:flex-start;padding-left:clamp(96px,18%,144px);white-space:nowrap;z-index:2}
.apv-named .apv-nm-hold,.apv-named .apv-nm-verb,.apv-named .apv-nm-name{background:var(--apv-nm-bg);line-height:22px}
.apv-named .apv-nm-hold{display:flex;align-items:baseline;padding-left:12px}
.apv-named .apv-nm-held{font:500 11px/22px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--apv-nm-hb)}
.apv-named .apv-nm-sep{font:400 13px/22px var(--mono);color:var(--w-45,rgba(255,255,255,.45));margin:0 8px}
.apv-named .apv-nm-who{display:flex;align-items:baseline}
.apv-named .apv-nm-verb{display:inline-grid;margin-left:-1px;font:400 13px/22px var(--mono);color:var(--w-60,rgba(255,255,255,.6))}
.apv-named .apv-nm-v1,.apv-named .apv-nm-v2{grid-area:1/1}
.apv-named .apv-nm-v1{opacity:0}
.apv-named .apv-nm-name{margin-left:-1px;padding:0 12px 0 10px;font:450 17px/22px var(--sans);letter-spacing:-.005em;color:#fff}

/* line 3 and the caption */
.apv-named .apv-nm-out{position:absolute;right:0;top:78px;margin:0;font:500 11px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--apv-nm-ok)}
.apv-named .apv-nm-cap{margin:24px 0 0;font:400 11px/16px var(--mono);color:var(--w-60,rgba(255,255,255,.6))}

/* ---- live: rewind to t0, then the phases restore the final frame in order ---- */
.apv-named.is-live .apv-nm-tok{left:0;right:auto;opacity:0;background:var(--w-85,rgba(255,255,255,.85));
  transition:opacity var(--t2,200ms) var(--ease),background-color var(--t2,200ms) var(--ease)}
.apv-named.is-live .apv-nm-hold,.apv-named.is-live .apv-nm-verb{opacity:0;transition:opacity var(--t2,200ms) var(--ease)}
.apv-named.is-live .apv-nm-held{color:var(--blue-lt,#7DB9FF);transition:color var(--t2,200ms) var(--ease)}
.apv-named.is-live .apv-nm-v1{opacity:1;transition:opacity var(--t2,200ms) var(--ease)}
.apv-named.is-live .apv-nm-v2{opacity:0;transition:opacity var(--t2,200ms) var(--ease)}
.apv-named.is-live .apv-nm-name{color:var(--w-60,rgba(255,255,255,.6));transition:color var(--t3,320ms) var(--ease)}
.apv-named.is-live .apv-nm-out{opacity:0;color:var(--ok-d,#8FD19E);transition:opacity var(--t2,200ms) var(--ease),color var(--t2,200ms) var(--ease)}
/* p0 · 0 ms: the call appears at the wire's start */
.apv-named.is-live.apv-p0 .apv-nm-tok{opacity:1}
/* p1 · 900 ms: held where it stopped; HELD and the call at full blue-lt (≤600 ms) */
.apv-named.is-live.apv-p1 .apv-nm-hold,.apv-named.is-live.apv-p1 .apv-nm-verb{opacity:1}
.apv-named.is-live.apv-p1 .apv-nm-tok{background:var(--blue-lt,#7DB9FF)}
/* p2 · 1500 ms: relax to rest */
.apv-named.is-live.apv-p2 .apv-nm-held{color:var(--apv-nm-hb);transition-duration:var(--t4,560ms)}
.apv-named.is-live.apv-p2 .apv-nm-tok{background:var(--apv-nm-tb);transition-duration:var(--t2,200ms),var(--t4,560ms)}
/* p3 · 4460 ms: the decision. "waiting for" goes; the name sets in white */
.apv-named.is-live.apv-p3 .apv-nm-v1{opacity:0}
.apv-named.is-live.apv-p3 .apv-nm-name{color:#fff}
/* p4 · 4560 ms: "approved by" sets in the same place */
.apv-named.is-live.apv-p4 .apv-nm-v2{opacity:1}
/* p5 · 5380 ms: released, the call runs on */
.apv-named.is-live.apv-p5 .apv-nm-tok{background:var(--w-85,rgba(255,255,255,.85));transition-duration:var(--t2,200ms)}
/* p6 · arrival: ALLOWED, full ok-d (≤600 ms) */
.apv-named.is-live.apv-p6 .apv-nm-out{opacity:1}
.apv-named.is-live.apv-p6 .apv-nm-tok{background:var(--ok-d,#8FD19E)}
/* p7 · +600 ms: relax; this equals the markup's final frame */
.apv-named.is-live.apv-p7 .apv-nm-out{color:var(--apv-nm-ok);transition-duration:var(--t2,200ms),var(--t4,560ms)}
.apv-named.is-live.apv-p7 .apv-nm-tok{background:var(--apv-nm-tg);transition-duration:var(--t2,200ms),var(--t4,560ms)}
.apv-named.is-sim *,.apv-named.is-sim *::before,.apv-named.is-sim *::after{transition:none!important}

/* ≤1100: the hero row stacks at ≤1199 (page CSS); the figure caps itself so the wire keeps its proportion */
@media (max-width:1100px){
  .apv-named{max-width:720px}
}

/* ≤760: recomposed vertical (not shrunk). The wire runs down the figure's left edge, flush with the hero's text column; its one gap
   sits beside line 2, so the name is still the stop. The wire ends on the ALLOWED line: the call parks at its terminus. */
@media (max-width:760px){
  .apv-named{--apv-nm-y:0px}
  .apv-named .apv-nm-stage{height:134px;padding-left:20px}
  .apv-named .apv-nm-call{left:20px;font-size:12px;line-height:18px}
  .apv-named .apv-nm-line{left:0;right:auto;top:0;width:1px;height:134px}
  .apv-named .apv-nm-mask{display:block;position:absolute;left:-4px;top:50px;width:9px;height:32px;background:var(--apv-nm-bg);z-index:2}
  .apv-named .apv-nm-tok{left:-.25px;right:auto;top:110px;width:1.5px;height:24px}
  .apv-named.is-live .apv-nm-tok{left:-.25px;top:0}
  .apv-named .apv-nm-row{left:20px;right:0;top:56px;height:20px;padding-left:0}
  .apv-named .apv-nm-hold,.apv-named .apv-nm-verb,.apv-named .apv-nm-name{line-height:20px}
  .apv-named .apv-nm-hold{padding-left:0}
  .apv-named .apv-nm-held{line-height:20px}
  .apv-named .apv-nm-sep{margin:0 7px;line-height:20px}
  .apv-named .apv-nm-verb{font-size:11px}
  .apv-named .apv-nm-name{padding:0 0 0 8px;font-size:15px}
  .apv-named .apv-nm-out{left:20px;right:auto;top:118px}
  .apv-named .apv-nm-cap{margin-top:24px}
  /* the name is beside the wire here, not in it, so line 2 and its gap set together at the hold (p1); before that the wire is unbroken */
  .apv-named.is-live .apv-nm-name,.apv-named.is-live .apv-nm-mask{opacity:0;transition:opacity var(--t2,200ms) var(--ease),color var(--t3,320ms) var(--ease)}
  .apv-named.is-live.apv-p1 .apv-nm-name,.apv-named.is-live.apv-p1 .apv-nm-mask{opacity:1}
}
/* ≤359 (the 320 reflow check): a 16px indent and a 14px name keep line 2 on one line with room to spare */
@media (max-width:359px){
  .apv-named .apv-nm-stage{padding-left:16px}
  .apv-named .apv-nm-call,.apv-named .apv-nm-row,.apv-named .apv-nm-out{left:16px}
  .apv-named .apv-nm-sep{margin:0 6px}
  .apv-named .apv-nm-name{padding-left:7px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .apv-named *,.apv-named *::before,.apv-named *::after{transition:none!important}
}
@media (forced-colors:active){
  .apv-named .apv-nm-line,.apv-named .apv-nm-tok{background:CanvasText!important}
  .apv-named .apv-nm-hold,.apv-named .apv-nm-verb,.apv-named .apv-nm-name,.apv-named .apv-nm-mask{background:Canvas}
}
@media print{
  .apv-named *{transition:none!important}
}