/* ============================================================
   Archer Processor — Interactive Simulator
   "Without Archer / With Archer" live workflow demonstration
   © 2026 Pennyworth LLC. All rights reserved.
   ============================================================ */
.sim{border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,rgba(12,20,38,0.9),rgba(8,13,26,0.9));
  box-shadow:var(--shadow);overflow:hidden}
.sim-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.sim-title{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px}
.sim-title .scenario{color:var(--muted);font-weight:500;font-size:13.5px}

/* mode toggle */
.toggle{display:inline-flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:rgba(0,0,0,0.25)}
.toggle button{padding:9px 16px;font-size:13.5px;font-weight:650;background:none;border:none;color:var(--muted);cursor:pointer;transition:.2s var(--ease)}
.toggle button.on{color:#04140f;background:linear-gradient(135deg,var(--teal),var(--blue))}
.toggle button.on.bad{color:#fff;background:linear-gradient(135deg,#c4524f,#9a3c39)}

/* body */
.sim-body{display:grid;grid-template-columns:1.15fr 0.85fr;gap:0}
@media(max-width:920px){.sim-body{grid-template-columns:1fr}}
.sim-stage{padding:24px;border-right:1px solid var(--line);position:relative;min-height:360px}
@media(max-width:920px){.sim-stage{border-right:none;border-bottom:1px solid var(--line)}}
.sim-side{padding:22px;display:flex;flex-direction:column;gap:16px}

/* tool status */
.tool{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.tool .glyph{width:54px;height:54px;border-radius:14px;border:1px solid var(--line2);display:grid;place-items:center;
  background:rgba(255,255,255,0.04);transition:.4s var(--ease)}
.tool .glyph.green{border-color:rgba(86,201,138,0.6);box-shadow:0 0 26px rgba(86,201,138,0.25)}
.tool .glyph.amber{border-color:rgba(242,180,65,0.6);box-shadow:0 0 26px rgba(242,180,65,0.25)}
.tool .glyph.red{border-color:rgba(239,111,111,0.7);box-shadow:0 0 30px rgba(239,111,111,0.32);animation:shake .5s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.tool .meta b{font-size:15.5px;display:block}
.tool .meta span{font-size:12.5px;color:var(--muted)}
.statuschip{margin-left:auto;font-size:12px;font-weight:750;letter-spacing:0.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line2)}
.statuschip.green{color:var(--green);border-color:rgba(86,201,138,0.5);background:rgba(86,201,138,0.1)}
.statuschip.amber{color:var(--amber);border-color:rgba(242,180,65,0.5);background:rgba(242,180,65,0.1)}
.statuschip.red{color:var(--red);border-color:rgba(239,111,111,0.5);background:rgba(239,111,111,0.12)}

/* wear gauge */
.gauge-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.gauge{height:14px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden;border:1px solid var(--line);position:relative}
.gauge .fill{height:100%;width:0%;border-radius:999px;transition:width .35s linear,background .4s}
.gauge .reorder{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--blue);opacity:.8}
.gauge .reorder:after{content:"reorder point";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:9.5px;color:var(--blue);white-space:nowrap;letter-spacing:.03em}
.clock{margin-top:14px;font-size:12.5px;color:var(--muted)}
.clock b{color:var(--text);font-variant-numeric:tabular-nums}

/* event banner */
.event{margin-top:18px;border-radius:12px;border:1px solid var(--line);padding:13px 15px;font-size:13.5px;
  background:rgba(0,0,0,0.22);min-height:54px;transition:.3s var(--ease)}
.event.green{border-color:rgba(86,201,138,0.4);background:rgba(86,201,138,0.08)}
.event.amber{border-color:rgba(242,180,65,0.4);background:rgba(242,180,65,0.08)}
.event.red{border-color:rgba(239,111,111,0.45);background:rgba(239,111,111,0.10)}
.event .lab{font-weight:750;letter-spacing:.04em;text-transform:uppercase;font-size:11px;margin-bottom:3px}
.event.green .lab{color:var(--green)} .event.amber .lab{color:var(--amber)} .event.red .lab{color:var(--red)}

/* outcome strip */
.outcome{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:13px}
.outcome .o{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.outcome .o b{display:block;font-size:15px}
.outcome .o.good b{color:var(--green)} .outcome .o.bad b{color:var(--red)}
.outcome .o span{font-size:11px;color:var(--muted)}

/* lifecycle steps (clickable) */
.steps{display:flex;flex-direction:column;gap:8px}
.steps .shead{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;
  background:rgba(255,255,255,0.02);transition:.2s var(--ease);text-align:left;width:100%;font:inherit;color:inherit}
.step:hover{border-color:var(--line2);background:rgba(255,255,255,0.05)}
.step.active{border-color:rgba(45,212,191,0.55);background:rgba(45,212,191,0.09);box-shadow:0 0 0 1px rgba(45,212,191,0.2)}
.step.done .ix{background:var(--green);border-color:var(--green);color:#04140f}
.step .ix{flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--muted);transition:.3s}
.step.active .ix{border-color:var(--teal);color:var(--teal)}
.step .sx b{font-size:13.5px;display:block}
.step .sx span{font-size:12px;color:var(--muted)}

/* controls */
.sim-controls{display:flex;gap:10px;align-items:center;padding:16px 22px;border-top:1px solid var(--line);flex-wrap:wrap}
.sim-controls .spacer{flex:1}
.sim-controls .hint{font-size:12.5px;color:var(--faint)}
.iconbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;border:1px solid var(--line2);
  background:rgba(255,255,255,0.05);color:var(--text);cursor:pointer;font-weight:650;font-size:14px;transition:.2s var(--ease)}
.iconbtn:hover{background:rgba(255,255,255,0.09)}
.iconbtn.play{border-color:rgba(45,212,191,0.45);background:linear-gradient(135deg,rgba(45,212,191,0.22),rgba(91,156,246,0.16))}

/* ============================================================
   Architecture diagram
   ============================================================ */
.arch{margin-top:4px}
.arch-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:start}
@media(max-width:920px){.arch-grid{grid-template-columns:1fr}.arch-arrow{display:none}}
.arch-col{display:flex;flex-direction:column;gap:10px}
.arch-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;margin-bottom:4px}
.arch-node{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--text);cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:rgba(255,255,255,0.03);font-size:14px;font-weight:600;
  transition:.2s var(--ease)}
.arch-node:hover{border-color:var(--line2);background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.arch-node.sel{border-color:rgba(45,212,191,0.55);background:rgba(45,212,191,0.09);box-shadow:0 0 0 1px rgba(45,212,191,0.22)}
.adot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.arch-arrow{align-self:center;color:var(--faint);font-size:22px;padding-top:34px}
.arch-detail{margin-top:20px;border:1px solid var(--line2);border-radius:14px;padding:18px 20px;background:rgba(45,212,191,0.05)}
.arch-detail b{display:block;font-size:15.5px;margin-bottom:5px;color:var(--text)}
.arch-detail span{color:var(--muted);font-size:14.5px}

/* ============================================================
   Engineer sandbox — input sliders + live calc readout
   ============================================================ */
.sim-inputs{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:end;
  padding:16px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.015)}
@media(max-width:760px){.sim-inputs{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.sim-inputs{grid-template-columns:1fr}}
.sigrp{display:flex;flex-direction:column;gap:8px}
.sigrp label{font-size:12px;color:var(--muted)}
.sigrp label span{color:var(--teal);font-weight:700}
.sigrp input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;
  background:rgba(255,255,255,0.14);outline:none;cursor:pointer}
.sigrp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));border:2px solid #0b1020;box-shadow:0 2px 8px rgba(0,0,0,0.4);cursor:pointer}
.sigrp input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));border:2px solid #0b1020;cursor:pointer}
.sim-inputs .iconbtn{padding:9px 12px;align-self:end}

.sim-calc{padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(45,212,191,0.04);
  display:flex;flex-direction:column;gap:7px}
.calc-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13px}
.calc-row .ck{color:var(--muted);min-width:84px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.calc-row .cv{color:var(--text);font-weight:750;font-variant-numeric:tabular-nums}
.calc-row .cf{color:var(--faint);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.calc-row.note{font-size:12.5px;padding-top:2px}
.calc-row .ok{color:var(--green)} .calc-row .bad{color:var(--amber)}