/* Toolbox: the seven-stage verification loop and the tool cards. */
.eyebrow.tbe{font-weight:600;letter-spacing:.2em;gap:16px;margin-bottom:18px;font-size:var(--t-section)}
.eyebrow.tbe::before{display:none}
.tbx{width:64px;height:30px;flex:none;overflow:visible}
.tbx .win{fill:#232c35;stroke:#1d252d}
.tbx .sig{fill:none;stroke:#c4cfd9;stroke-width:1.2}
.tbx .bad{fill:rgba(255,140,122,.2);stroke:#ff8c7a;stroke-width:1.2;animation:tbbad 3.2s linear infinite}
.tbx .cur path{stroke:#e08a58;stroke-width:1.4}
.tbx .cur{animation:tbcur 3.2s linear infinite}
@keyframes tbcur{0%{transform:translateX(6px)}70%,100%{transform:translateX(50px)}}
@keyframes tbbad{0%,52%{opacity:.25}60%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .tbx .cur,.tbx .bad{animation:none}
  .tbx .cur{transform:translateX(50px)}
}
.spec{padding:96px 0 40px}
.loop{position:relative;margin-top:36px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;padding-bottom:58px}
.stg{position:relative;text-align:left;cursor:pointer;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:12px 12px;font-family:var(--sans);color:var(--ink);transition:background .3s,border-color .3s,transform .3s,box-shadow .3s;width:100%;font-size:inherit;line-height:inherit}
.stg i{display:block;font:500 var(--t-label) var(--mono);font-style:normal;letter-spacing:.14em;color:var(--cu)}
.stg b{display:block;font:600 18px var(--sans);margin:4px 0 2px}
.stg span{font-size:var(--t-small);color:var(--muted)}
.stg:not(:nth-of-type(7))::after{content:"";position:absolute;top:50%;right:-13px;width:14px;height:2px;background:repeating-linear-gradient(90deg,var(--cu) 0 4px,transparent 4px 7px);background-size:7px 2px;animation:dash .6s linear infinite}
@keyframes dash{to{background-position:7px 0}}
.stg.on{background:var(--si-2);border-color:var(--si-2);color:#f4ecd8;transform:translateY(-3px);box-shadow:0 14px 24px -14px rgba(30,20,8,.6)}
.stg.on span{color:#a9b4be}
.stg.on i{color:var(--cu-hi)}
.loop .back{position:absolute;left:0;right:0;bottom:22px;width:100%;height:30px;overflow:visible}
.loop .back path{fill:none;stroke:var(--cu);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke;animation:back 1.4s linear infinite}
@keyframes back{to{stroke-dashoffset:-20}}
.backlbl{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font:400 var(--t-meta) var(--mono);color:var(--cu);background:var(--sand);padding:0 10px;white-space:nowrap}
.tools{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:16px}
.tool{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px;transition:opacity .35s,transform .35s,border-color .35s,box-shadow .35s;box-shadow:0 12px 24px -22px rgba(70,48,20,.55)}
.tool header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tool header b{font:600 var(--t-sec) var(--sans)}
.tool header em{font:400 var(--t-label) var(--mono);font-style:normal;color:var(--muted);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.tool p{font-size:var(--t-small);line-height:1.55;color:var(--muted);margin:0}
.term{margin:0;background:#161d24;color:#c4cfd9;border-radius:9px;padding:24px 14px 12px;font:400 12px/1.6 var(--mono);overflow-x:auto;white-space:pre;position:relative;min-height:72px}
.term::before{content:"";position:absolute;right:10px;top:9px;width:28px;height:6px;background:radial-gradient(circle,#ff8c7a 2.5px,transparent 3px) 0 0/10px 6px,radial-gradient(circle,#e0c26a 2.5px,transparent 3px) 10px 0/10px 6px no-repeat,radial-gradient(circle,#7fd1a0 2.5px,transparent 3px) 20px 0/10px 6px no-repeat;opacity:.55}
.term .k{color:#e08a58}
.term .s{color:#9fd4b0}
.term .c{color:#6f8191}
.term .p{color:#7fd1a0}
.term .o{color:#ff8c7a}
.term code::after{content:"▍";color:#e08a58;animation:caret 1s steps(1) infinite;margin-left:2px}
@keyframes caret{50%{opacity:0}}
.cov{display:flex;align-items:center;gap:16px;background:#161d24;border-radius:9px;padding:10px 14px;min-height:72px;color:#c4cfd9}
.cov svg{width:64px;height:64px;transform:rotate(-90deg)}
.cov b{display:block;font:600 22px var(--sans);color:#f1ebdc}
.cov span{font:400 var(--t-label) var(--mono);color:#8fa0af;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1000px){
  .loop{grid-template-columns:repeat(4,1fr);padding-bottom:0}
}
@media (max-width:900px){
  .loop{grid-template-columns:1fr 1fr;padding-bottom:0}
  .loop .back,.backlbl,.stg::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stg::after,.loop .back path,.term code::after{animation:none}
}
.race{background:#161d24;border-radius:9px;padding:16px 14px;min-height:72px;display:grid;gap:12px}
.race div{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px}
.race span{font:400 var(--t-label) var(--mono);color:#8fa0af;letter-spacing:.06em}
.race i{display:block;height:8px;border-radius:99px;background:linear-gradient(90deg,#e08a58,#ffd9b8);transform-origin:left}
.race .r1{animation:race1 4s linear infinite}
.race .r2{animation:race2 4s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes race1{0%{transform:scaleX(0)}100%{transform:scaleX(.12)}}
@keyframes race2{0%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .race i{animation:none}
  .race .r1{transform:scaleX(.12)}
}
.pts{list-style:none;margin:0;padding:24px 14px 12px;border-radius:9px;background:#161d24;display:grid;gap:7px;min-height:72px;position:relative}
.pts::before{content:"";position:absolute;right:10px;top:9px;width:28px;height:6px;background:radial-gradient(circle,#ff8c7a 2.5px,transparent 3px) 0 0/10px 6px,radial-gradient(circle,#e0c26a 2.5px,transparent 3px) 10px 0/10px 6px no-repeat,radial-gradient(circle,#7fd1a0 2.5px,transparent 3px) 20px 0/10px 6px no-repeat;opacity:.55}
.pts li{position:relative;padding-left:30px;font:400 12px/1.5 var(--mono);color:#c4cfd9}
.pts li::before{content:"[✓]";position:absolute;left:0;top:0;color:#e08a58}
.cov.bars{display:grid;gap:10px;padding:14px}
.cov.bars div{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:10px}
.cov.bars i{display:block;height:8px;border-radius:99px;background:#2c3843;overflow:hidden}
.cov.bars u{display:block;height:100%;width:100%;background:#7fd1a0;transform:scaleX(0);transform-origin:left;transition:transform 2s ease}
.cov.bars div:nth-child(2) u{transition-delay:.3s}
.cov.bars div:nth-child(3) u{transition-delay:.6s}
.cov.bars.go u{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .cov.bars u{transition:none;transform:scaleX(1)}
}
.stg:hover,.stg.on:hover{transform:translateY(4px);box-shadow:0 4px 10px -8px rgba(30,20,8,.6)}
/* Only the selected stage's tools are shown; the grid keeps the tallest stage's height so the page doesn't jump. */
.tools .tool{display:none}
.tools .tool.on{display:flex;animation:toolin .35s ease}
@keyframes toolin{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .tools .tool.on{animation:none}
}
@media (max-width:1000px){
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phones: stages become compact chips so the tools appear right below the one tapped. */
@media (max-width:640px){
  .loop{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:26px}
  .stg{padding:9px 8px;border-radius:10px}
  .stg b{font-size:14px;margin:2px 0 0}
  .stg span{display:none}
  .stg.on,.stg:hover,.stg.on:hover{transform:none}
  .tools{grid-template-columns:1fr;margin-top:18px}
}