/* ---------- Recapture: pinned scene, Lap 3 ---------- */
#recapture{height:330vh}
#recapture .rc-stage{background:radial-gradient(ellipse 70% 75% at 62% 52%,#18213a 0%,#141b31 40%,var(--ink) 76%)}
#recapture .rc-gl{z-index:0}
#recapture .rc-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,24,41,.92) 0%,rgba(18,24,41,.6) 25%,rgba(18,24,41,0) 44%)}
#recapture .rc-flash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,60%) var(--fy,50%),rgba(255,74,46,.42) 0%,rgba(255,74,46,.12) 22%,rgba(255,74,46,0) 48%)}

/* bleeds: paper above (laps) and below (ledger) */
#recapture .rc-bleed{position:absolute;left:0;right:0;height:46%;z-index:9;pointer-events:none;opacity:0}
#recapture .rc-bleed-top{top:0;background:linear-gradient(180deg,var(--paper) 0%,rgba(244,243,240,.7) 30%,rgba(244,243,240,0) 100%)}
#recapture .rc-bleed-bot{bottom:0;background:linear-gradient(0deg,var(--paper) 0%,rgba(244,243,240,.7) 30%,rgba(244,243,240,0) 100%)}

/* ---------- anchored labels ---------- */
#recapture .rc-anchors{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#recapture .rc-lead{position:absolute;inset:0;width:100%;height:100%;opacity:0;overflow:visible}
#recapture .rc-lead line{stroke:var(--orange);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
#recapture .rc-lead circle{fill:none;stroke:var(--orange-hi);stroke-width:1.2}
#recapture .rc-lead.cold line{stroke:var(--teal)}
#recapture .rc-lead.cold circle{stroke:var(--teal)}
#recapture .rc-axis{position:absolute;left:0;top:0;opacity:0;font:700 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute-d);white-space:nowrap;will-change:transform,opacity}
#recapture .rc-tag{position:absolute;left:0;top:0;opacity:0;display:flex;align-items:center;gap:8px;padding:7px 10px;white-space:nowrap;
  font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,74,46,.16);border:1px solid #ff5a3c;box-shadow:0 0 24px rgba(255,74,46,.35);will-change:transform,opacity}
#recapture .rc-tag i{width:6px;height:6px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 8px #ff5a3c}

/* ---------- copy ---------- */
#recapture .rc-copy{position:absolute;z-index:3;left:var(--gut);top:clamp(88px,13vh,128px);width:min(38vw,560px)}
#recapture .rc-h{font-size:clamp(32px,3.5vw,56px);line-height:.98;margin-top:20px;max-width:13ch;text-wrap:balance}
#recapture .rc-index{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:clamp(24px,4.4vh,44px) 0 clamp(20px,3.2vh,32px);max-width:440px}
#recapture .rc-index li{font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);opacity:.55;transition:opacity .4s,color .4s;white-space:nowrap}
#recapture .rc-index li i{display:block;height:2px;background:var(--line-d);margin-bottom:12px;position:relative;overflow:hidden}
#recapture .rc-index li i:after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--f,0));transform-origin:0 50%}
#recapture .rc-index li.on{opacity:1;color:var(--paper)}
#recapture .rc-index li.done{opacity:.85}
#recapture .rc-index li b{color:var(--orange-hi)}
#recapture .rc-steps{display:grid}
#recapture .rc-step{grid-area:1/1;align-self:start}
#recapture.rc-live .rc-step{opacity:0;will-change:opacity,transform}
#recapture .rc-k{font:700 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
#recapture .rc-t{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.75vw,28px);line-height:1.14;letter-spacing:-.022em;color:var(--paper);max-width:24ch}
#recapture .rc-t em{display:block;margin-top:10px;font:400 clamp(15px,1.12vw,17px)/1.5 var(--sans);letter-spacing:0;color:var(--mute-d);max-width:40ch}

#recapture .rc-fine{position:absolute;z-index:3;left:var(--gut);bottom:clamp(18px,3.4vh,32px);max-width:min(38vw,520px);color:var(--mute-d);opacity:.8;font-size:11px}

/* ---------- cards ---------- */
#recapture .rc-cards{position:absolute;inset:0;z-index:4;pointer-events:none}
#recapture .rc-card{position:absolute;right:calc(var(--gut) + 18px);width:clamp(272px,24vw,340px);padding:16px 18px 16px;background:rgba(14,19,34,.82);border:1px solid var(--line-d);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);font-family:var(--mono);color:var(--paper)}
#recapture.rc-live .rc-card{opacity:0;will-change:opacity,transform}
#recapture .rc-card header{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-d)}
#recapture .rc-id{color:var(--paper);font-weight:700}
#recapture .rc-who{color:var(--mute-d)}
#recapture .rc-ticket,#recapture .rc-brief{top:clamp(88px,13vh,128px)}
#recapture .rc-cell,#recapture .rc-lap{bottom:clamp(54px,9vh,92px)}

/* ticket */
#recapture .rc-state{margin-left:auto;padding:4px 7px;font-size:9.5px;letter-spacing:.16em;color:#fff;background:rgba(255,74,46,.18);border:1px solid #ff5a3c;transition:background .35s,border-color .35s,opacity .35s;opacity:0}
#recapture .rc-ticket.failed .rc-state{opacity:1}
#recapture .rc-ticket.rerun .rc-state{background:rgba(227,91,50,.2);border-color:var(--orange)}
#recapture .rc-ticket dl{display:grid;gap:9px}
#recapture .rc-ticket dl>div{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;font-size:11px;letter-spacing:.04em;transition:opacity .45s,transform .45s}
#recapture .rc-ticket dt{color:var(--mute-d);text-transform:uppercase;letter-spacing:.16em;font-size:9.5px}
#recapture .rc-ticket dd{display:flex;align-items:center;gap:10px;min-width:0}
#recapture .rc-row-fail dd{color:#ff8a70}
#recapture .rc-ticket .rc-row-fail{opacity:0;transform:translateY(4px)}
#recapture .rc-ticket .rc-row-ctl,#recapture .rc-ticket .rc-row-re,#recapture .rc-note{display:none}
#recapture .rc-ticket.rerun .rc-row-ctl,#recapture .rc-ticket.rerun .rc-row-re{display:grid}#recapture .rc-ticket.rerun .rc-note{display:block}
#recapture .rc-ticket.failed .rc-row-fail{opacity:1;transform:none}
#recapture .rc-ticket.rerun .rc-row-fail{opacity:.5}
#recapture .rc-pips{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;flex:1;min-width:0}
#recapture .rc-pips i{height:9px;background:rgba(255,255,255,.08)}
#recapture .rc-pips i.ok{background:var(--paper);opacity:.75}
#recapture .rc-pips i.x{background:rgba(255,90,60,.55)}
#recapture .rc-pips[data-kind="ctl"] i.ok{background:var(--teal);opacity:.85}
#recapture .rc-pips[data-kind="re"] i.ok{background:var(--orange);opacity:1;box-shadow:0 0 6px rgba(227,91,50,.6)}
#recapture .rc-score{font-weight:700;font-size:12px;min-width:38px;text-align:right}
#recapture .rc-hot{color:var(--orange-hi)}
#recapture .rc-note{margin-top:12px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-d);opacity:0;transition:opacity .45s}
#recapture .rc-ticket.rerun .rc-note{opacity:1}

/* cell */
#recapture .rc-path{font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--paper)}
#recapture .rc-path i{font-style:normal;color:var(--mute-d);padding:0 2px}
#recapture .rc-count{margin-top:10px;display:flex;align-items:baseline;gap:10px}
#recapture .rc-n{font-family:var(--display);font-weight:800;font-size:48px;letter-spacing:-.04em;line-height:.9;color:var(--teal);transition:color .4s}
#recapture .rc-unit{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
#recapture .rc-status{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);transition:color .4s}
#recapture .rc-dot{width:6px;height:6px;border:1px solid currentColor}
#recapture .rc-cell.full .rc-n,#recapture .rc-cell.full .rc-status{color:var(--orange-hi)}
#recapture .rc-cell.full .rc-dot{background:currentColor;transform:rotate(45deg)}

/* brief */
#recapture .rc-sites{list-style:none;display:grid;gap:10px}
#recapture .rc-sites li{display:grid;grid-template-columns:118px 1fr 70px;gap:10px;align-items:center;font-size:11px;letter-spacing:.04em}
#recapture .rc-track{position:relative;height:1px;background:var(--line-d)}
#recapture .rc-track:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--t,0%);background:linear-gradient(90deg,rgba(227,91,50,0),var(--orange))}
#recapture .rc-track i{position:absolute;top:50%;left:var(--t,0%);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--orange-hi);box-shadow:0 0 10px var(--orange),0 0 2px #fff}
#recapture .rc-ss{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);text-align:right;white-space:nowrap}
#recapture .rc-ss.rec{color:var(--paper)}
#recapture .rc-ss.ver{color:var(--orange-hi)}
#recapture .rc-cred{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d);opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s}
#recapture .rc-brief.cred .rc-cred{opacity:1;transform:none}
#recapture .rc-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid var(--orange);background:rgba(227,91,50,.14)}
#recapture .rc-chip i{width:5px;height:5px;background:var(--orange-hi);transform:rotate(45deg)}
#recapture .rc-ver{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}

/* lap */
#recapture .rc-lt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
#recapture .rc-from{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}
#recapture .rc-lt b{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:.9;color:var(--orange)}
#recapture .rc-sla{margin-top:10px;font:400 12.5px/1.45 var(--sans);color:var(--mute-d)}

#recapture .rc-site{white-space:nowrap}
/* the chapter rail shows labels above 1280px: keep cards clear of it */
@media (min-width:1281px){#recapture .rc-card{right:max(calc(var(--gut) + 18px),150px)}}

/* ---------- mid widths ---------- */
@media (max-width:1180px) and (min-width:900px){
  #recapture .rc-copy{width:min(40vw,480px)}
  #recapture .rc-t em{font-size:14.5px}
  #recapture .rc-card{width:300px;padding:14px 15px}
  #recapture .rc-sites li{grid-template-columns:122px 1fr 64px;font-size:10.5px}
}
@media (min-width:900px) and (max-height:820px){
  #recapture .rc-h{font-size:clamp(30px,3.2vw,44px)}
  #recapture .rc-t em{margin-top:8px}
  #recapture .rc-n{font-size:40px}
  #recapture .rc-lt b{font-size:38px}
}

/* ---------- phones & narrow tablets ---------- */
@media (max-width:899px){
  #recapture .rc-shade{background:linear-gradient(180deg,rgba(18,24,41,.95) 0%,rgba(18,24,41,.82) 40%,rgba(18,24,41,0) 56%),linear-gradient(0deg,rgba(18,24,41,.9) 0%,rgba(18,24,41,0) 30%)}
  #recapture .rc-stage{background:radial-gradient(ellipse 100% 46% at 50% 64%,#18213a 0%,var(--ink) 80%)}
  #recapture .rc-copy{left:var(--gut);right:var(--gut);width:auto;top:74px}
  #recapture .rc-copy .eyebrow{font-size:10.5px;letter-spacing:.24em}
  #recapture .rc-h{font-size:clamp(27px,7.4vw,46px);margin-top:12px;max-width:16ch}
  #recapture .rc-index{margin:16px 0 14px;gap:6px;max-width:none}
  #recapture .rc-index li{font-size:9px;letter-spacing:.12em}
  #recapture .rc-index li i{margin-bottom:8px}
  #recapture .rc-k{font-size:10px;margin-bottom:8px}
  #recapture .rc-t{font-size:clamp(17px,4.6vw,24px);max-width:30ch}
  #recapture .rc-t em{font-size:13.5px;line-height:1.45;margin-top:6px;max-width:52ch}
  #recapture .rc-card{right:var(--gut);left:auto;width:min(360px,calc(100% - 2 * var(--gut)));padding:12px 14px;bottom:calc(58px + env(safe-area-inset-bottom));top:auto}
  #recapture .rc-ticket,#recapture .rc-brief,#recapture .rc-cell,#recapture .rc-lap{top:auto}
  #recapture .rc-card header{padding-bottom:9px;margin-bottom:9px}
  #recapture .rc-ticket dl{gap:7px}
  #recapture .rc-ticket.rerun .rc-row-fail{display:none}
  #recapture .rc-note{margin-top:8px}
  #recapture .rc-ticket.rerun .rc-note{display:none}
  #recapture .rc-lap{padding:10px 14px}
  #recapture .rc-lap header{display:none}
  #recapture .rc-cred .rc-ver{display:none}
  #recapture .rc-chip{font-size:9px;padding:5px 6px}
  #recapture .rc-n{font-size:38px}
  #recapture .rc-sites{gap:8px}
  #recapture .rc-sites li{grid-template-columns:122px 1fr 66px;font-size:10.5px}
  #recapture .rc-cred{margin-top:10px;padding-top:10px}
  #recapture .rc-lt b{font-size:28px}
  #recapture .rc-sla{font-size:12px;margin-top:6px}
  #recapture .rc-fine{left:var(--gut);right:var(--gut);bottom:10px;max-width:none;font-size:9.5px;line-height:1.35}
  #recapture .rc-axis{font-size:8.5px;letter-spacing:.14em}
  #recapture .rc-tag{font-size:8.5px;letter-spacing:.1em;padding:5px 7px}
}
@media (max-width:420px){
  #recapture .rc-sites li{grid-template-columns:116px 1fr 62px;font-size:10px}
  #recapture .rc-ss{font-size:8.5px}
}

/* ---------- reduced motion: no pin, final state ---------- */
#recapture.rc-rm{height:auto}
#recapture.rc-rm .rc-stage{position:relative;height:auto;min-height:100svh;padding:clamp(96px,14vh,160px) 0 clamp(80px,12vh,140px)}
#recapture.rc-rm .rc-copy{position:relative;left:auto;top:auto;width:auto;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
#recapture.rc-rm .rc-index{display:none}
#recapture.rc-rm .rc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:40px}
#recapture.rc-rm .rc-step{grid-area:auto;opacity:1}
#recapture.rc-rm .rc-t{font-size:20px}
#recapture.rc-rm .rc-cards{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:20px;max-width:var(--max);margin:44px auto 0;padding:0 var(--gut)}
#recapture.rc-rm .rc-card{position:relative;inset:auto;right:auto;opacity:1}
#recapture.rc-rm .rc-cell,#recapture.rc-rm .rc-brief{display:none}
#recapture.rc-rm .rc-fine{position:relative;left:auto;bottom:auto;max-width:var(--max);margin:28px auto 0;padding:0 var(--gut)}
#recapture.rc-rm .rc-gl{opacity:.35}
#recapture.rc-rm .rc-shade{background:rgba(18,24,41,.5)}
#recapture.rc-rm .rc-anchors{display:none}
#recapture.rc-rm .rc-bleed-top{opacity:1;height:120px}
#recapture.rc-rm .rc-bleed-bot{opacity:1;height:120px}
@media (max-width:899px){#recapture.rc-rm .rc-steps{grid-template-columns:1fr;gap:22px}#recapture.rc-rm .rc-card{width:100%}}

/* no WebGL / boot failure: keep the story readable */
#recapture.no-js-scene .rc-step,#recapture.no-js-scene .rc-card{opacity:1}