/* =====================================================================
   Shipping it — page-specific styles.
   The cost-lever strip and the injection sandbox.
   ===================================================================== */

.levers{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 4px}
.levers span{
  flex:1 1 165px; padding:9px 11px; border-radius:9px; font-size:11.5px; line-height:1.4;
  background:rgba(46,208,192,.09); border:1px solid rgba(94,236,208,.26); color:var(--muted);
}
.levers b{
  display:inline-block; width:17px; height:17px; line-height:17px; text-align:center;
  border-radius:50%; background:var(--b); color:#04131a; font-family:var(--mono);
  font-size:10px; margin-right:6px;
}

/* ---------- sandbox ---------- */
.injLab{display:grid; grid-template-columns:250px minmax(0,1fr) 250px; gap:14px; align-items:start}
@media (max-width:1080px){ .injLab{grid-template-columns:1fr} }
.injLab > *{min-width:0}

.injSide{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:14px}
.injMain{min-width:0}

.attacks{display:flex; flex-direction:column; gap:5px}
.atk{
  text-align:left; border:1px solid var(--line); background:rgba(6,14,22,.72); color:var(--muted);
  border-radius:8px; padding:8px 10px; font-size:11.5px; cursor:pointer; line-height:1.4;
  transition:all .16s var(--ease);
}
.atk:hover{border-color:rgba(248,113,113,.5); color:var(--text)}
.atk.is-on{background:rgba(248,113,113,.14); color:#fff; border-color:rgba(248,113,113,.5)}
.atk b{display:block; font-size:12px; margin-bottom:2px}

.defs{display:flex; flex-direction:column; gap:3px}
.def{display:flex; align-items:flex-start; gap:8px; padding:5px 0; font-size:12px; cursor:pointer; line-height:1.4}
.def input{accent-color:var(--b); width:15px; height:15px; cursor:pointer; flex:0 0 auto; margin-top:1px}
.def small{display:block; color:var(--muted2); font-size:10.5px; margin-top:1px}
.def.cap input{accent-color:#6EE7B7}

/* the ticket */
.injDoc{
  border:1px solid var(--line); border-radius:10px; background:rgba(3,7,12,.65); padding:12px 14px;
  font-size:12px; line-height:1.65; color:var(--muted); white-space:pre-wrap;
}
.injDoc .payload{
  background:rgba(248,113,113,.16); color:#FCA5A5; border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.3); padding:0 2px;
}
.injDoc .fence{color:var(--b); font-family:var(--mono); font-size:11px}

/* the trace */
.trace{list-style:none; margin:0; padding:0; counter-reset:t}
.trace li{
  counter-increment:t; position:relative; padding:9px 12px 9px 38px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:9px; background:rgba(3,7,12,.55);
  font-size:12px; line-height:1.55; color:var(--muted); animation:fade .25s var(--ease);
}
.trace li::before{
  content:counter(t); position:absolute; left:12px; top:9px;
  width:17px; height:17px; line-height:17px; text-align:center; border-radius:50%;
  background:rgba(255,255,255,.09); color:var(--muted2); font-family:var(--mono); font-size:9.5px;
}
.trace li b{color:#fff}
.trace li code{font-size:11px}
.trace li.bad{border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.09); color:#FCA5A5}
.trace li.bad::before{background:rgba(248,113,113,.3); color:#fff}
.trace li.good{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.09); color:#A7F3D0}
.trace li.good::before{background:rgba(52,211,153,.35); color:#04131a}
.trace li.stop{border-color:rgba(94,236,208,.5); background:rgba(46,208,192,.11); color:#CFFAFE}
.trace li.stop::before{content:'✋'; background:rgba(46,208,192,.3); font-size:9px}

/* outcome */
.outcome{
  border:1px solid var(--line); border-radius:10px; padding:12px 13px;
  font-size:12.5px; line-height:1.55; background:rgba(3,7,12,.6); color:var(--muted);
}
.outcome b{color:#fff}
.outcome.breach{border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.12); color:#FCA5A5}
.outcome.blocked{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.11); color:#A7F3D0}
.outcome.risky{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.1); color:#FDE68A}
.outcomeHead{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:6px; opacity:.85;
}

.whyList{list-style:none; margin:0; padding:0; font-size:11.5px}
.whyList li{
  position:relative; padding:5px 0 5px 16px; color:var(--muted2); line-height:1.5;
}
.whyList li::before{content:'○'; position:absolute; left:2px; font-size:9px; top:7px}
.whyList li.held{color:#A7F3D0}
.whyList li.held::before{content:'✓'; color:#6EE7B7}
.whyList li.leaky{color:#FDE68A}
.whyList li.leaky::before{content:'~'; color:#FDE68A}
.whyList li b{color:var(--text)}