/* AgentGuard terminal replay (terminal/agentguard-terminal.js).
   Every value follows the Claude Design prototype and its TOKENS.md (Sep 29 2026). The page loads
   the fonts (JetBrains Mono 400, 500 and 600); this file only names them. */
.agt{
  --agt-bg:#07101E;--agt-bar:#0C1828;--agt-line:rgba(255,255,255,0.06);--agt-dot:#3A4A62;
  --agt-text-hi:#F1F5F9;--agt-text:#E6EDF3;--agt-text-out:#D5DEE8;--agt-text-soft:#9AA8BA;--agt-text-mute:#7C8BA0;--agt-text-dim:#556479;
  --agt-teal:#2ABCB4;--agt-teal-hi:#5FE3DB;--agt-teal-hover:#5FD3CC;
  --agt-amber:#F5B731;--agt-red:#F87171;--agt-red-soft:#FCA5A5;--agt-red-badge:#E5484D;
  --agt-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  position:relative;display:block;box-sizing:border-box;width:100%;max-width:880px;margin:0 auto;overflow:hidden;
  font-family:var(--agt-mono);font-size:clamp(12.5px,3.3vw,14px);font-weight:400;line-height:1.7;text-align:left;
  background:var(--agt-bg);color:var(--agt-text);
  border:1px solid rgba(42,188,180,0.16);border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 30px 80px rgba(0,0,0,0.55),0 0 70px rgba(42,188,180,0.07);
}
.agt *,.agt *::before,.agt *::after{box-sizing:border-box}
.agt [hidden]{display:none !important}

/* Title bar */
.agt-bar{position:relative;display:flex;align-items:center;gap:16px;height:44px;padding:0 16px;background:var(--agt-bar);border-bottom:1px solid var(--agt-line)}
.agt-lights{display:flex;gap:8px;flex:none}
.agt-lights span{display:block;width:11px;height:11px;border-radius:50%;background:var(--agt-dot)}
.agt-title{min-width:0;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--agt-text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agt-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--agt-teal);box-shadow:0 0 10px rgba(42,188,180,0.8);opacity:0;transition:width 0.12s linear,opacity 0.4s}
.agt-progress.is-on{opacity:1}

/* Body */
.agt-body{padding:20px clamp(14px,3vw,22px) 24px;min-height:clamp(360px,58vw,440px)}
.agt-wrap{word-break:break-word}
.agt-word{white-space:nowrap}
.agt-in{animation:agt-in 0.18s ease-out}
.agt-teal{color:var(--agt-teal)}
.agt-hi{color:var(--agt-text-hi)}
.agt-out{color:var(--agt-text-out)}
.agt-soft{color:var(--agt-text-soft)}
.agt-dim{color:var(--agt-text-dim)}
.agt-note{color:var(--agt-text-mute)}
.agt-note-last{margin-bottom:18px}
.agt-near{margin-top:0.35em}
.agt-apart{margin-top:1em}
.agt-gap{margin-top:1.7em}
.agt-cursor{display:inline-block;width:0.6em;height:1.1em;margin-left:2px;vertical-align:-0.2em;background:var(--agt-teal);box-shadow:0 0 8px rgba(42,188,180,0.7);animation:agt-blink 1s steps(1) infinite}
@keyframes agt-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes agt-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Menu */
.agt-menu{display:flex;flex-direction:column;gap:6px}
.agt-item{
  display:grid;grid-template-columns:2ch minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;margin:0;padding:12px 14px;
  border-radius:8px;border:1px solid var(--agt-line);background:rgba(255,255,255,0.015);color:var(--agt-text);
  font:inherit;text-align:left;cursor:pointer;
  transition:transform 0.15s ease,background 0.15s ease,border-color 0.15s ease,box-shadow 0.15s ease;
}
.agt-item:hover{transform:translateY(-2px);background:rgba(42,188,180,0.07);border-color:rgba(42,188,180,0.35);box-shadow:0 8px 24px rgba(0,0,0,0.35),0 0 18px rgba(42,188,180,0.12)}
.agt-item:focus-visible{outline:2px solid var(--agt-teal);outline-offset:2px;transform:translateY(-2px);background:rgba(42,188,180,0.07);border-color:rgba(42,188,180,0.35)}
.agt-item:active{transform:translateY(0)}
.agt-item-n{color:var(--agt-teal);text-shadow:0 0 12px rgba(42,188,180,0.6)}
.agt-item-label{white-space:normal}
.agt-item-hint{color:var(--agt-text-dim);font-size:0.85em;letter-spacing:0.06em}

/* Scene 1: the why report. The table scrolls sideways inside the window, never the page. */
.agt-scroll{overflow-x:auto;margin:1.7em -4px 0;padding:0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(42,188,180,0.35) transparent}
.agt-scroll:focus-visible{outline:2px solid var(--agt-teal);outline-offset:2px;border-radius:4px}
.agt-table{display:grid;grid-template-columns:repeat(5,max-content);column-gap:clamp(16px,2.4vw,26px);width:max-content;min-width:100%}
.agt-tr{display:contents}
.agt-td{white-space:nowrap;color:var(--agt-text-out)}
.agt-tr.is-head .agt-td{color:var(--agt-text-mute)}
.agt-tr.is-mark .agt-td{color:var(--agt-teal);font-weight:500}
.agt-tr.is-mark .agt-td-share{font-weight:400}
.agt-pill{display:inline-block;margin:0 -6px;padding:0 6px;border-radius:4px}
.agt-tr.is-mark .agt-pill{background:rgba(42,188,180,0.16);box-shadow:0 0 18px rgba(42,188,180,0.35);font-weight:600;text-shadow:0 0 10px rgba(42,188,180,0.6)}
.agt-next{color:var(--agt-teal)}
.agt-figure{color:var(--agt-teal-hi);font-weight:600;text-shadow:0 0 14px rgba(42,188,180,0.75)}
.agt-link{color:var(--agt-teal);text-decoration:underline;text-decoration-color:rgba(42,188,180,0.5);text-underline-offset:3px}
.agt-link:hover{color:var(--agt-teal-hover)}
.agt-link:focus-visible{outline:2px solid var(--agt-teal);outline-offset:2px;border-radius:2px}
.agt-after{margin-top:1.2em}

/* Scenes 2 and 3: Claude Code */
.agt-cmd-claude{display:grid;grid-template-columns:1.2ch minmax(0,1fr);gap:10px}
.agt-spawns{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:0.35em;color:var(--agt-text-soft)}
.agt-dots{display:inline-flex;align-items:center;gap:5px}
.agt-dot{display:block;width:10px;height:10px;border-radius:50%;background:rgba(42,188,180,0.12);transition:background 0.2s,box-shadow 0.2s}
.agt-dot.is-on{background:var(--agt-teal);box-shadow:0 0 6px rgba(42,188,180,0.6)}
.agt-dot.agt-dot-held{background:transparent;border:2px solid var(--agt-amber);box-shadow:0 0 10px rgba(245,183,49,0.7)}
.agt-dot.agt-dot-refused{background:var(--agt-red);box-shadow:0 0 10px rgba(248,113,113,0.7)}
.agt-state{display:inline-flex;gap:14px}
.agt-waits{color:var(--agt-amber);font-weight:600;text-shadow:0 0 14px rgba(245,183,49,0.6)}
.agt-refused{color:var(--agt-red);font-weight:600}

/* The permission prompt */
.agt-ask{margin-top:0.9em;padding:14px 16px 12px;border:1px solid rgba(42,188,180,0.55);border-radius:8px;color:var(--agt-text);box-shadow:0 0 24px rgba(42,188,180,0.1),inset 0 0 40px rgba(42,188,180,0.03);animation:agt-in 0.22s ease-out}
.agt-choices{display:grid;grid-template-columns:1.5ch auto;gap:0 10px;margin-top:0.8em}
.agt-choice{color:var(--agt-text-soft);text-decoration:none;text-decoration-color:var(--agt-teal);text-underline-offset:4px}
.agt-choice.is-on{color:var(--agt-text-hi);text-decoration:underline;text-decoration-color:var(--agt-teal)}
.agt-idle{margin-top:0.2em}

/* The STOP box: Burn's lines, framed with CSS so they wrap on a phone. */
.agt-stop{margin-top:0.9em;border:1px solid rgba(248,113,113,0.35);border-radius:8px;overflow:hidden;color:var(--agt-text);box-shadow:0 0 28px rgba(248,113,113,0.08);animation:agt-in 0.22s ease-out}
.agt-stop-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px}
.agt-badge{display:inline-block;padding:2px 10px;border-radius:4px;background:var(--agt-red-badge);color:#FFFFFF;font-weight:600;letter-spacing:0.06em;box-shadow:0 0 22px rgba(248,113,113,0.55)}
.agt-stop-section{padding:10px 16px;border-top:1px solid rgba(255,255,255,0.12)}
.agt-stop-title{color:var(--agt-text-hi);font-weight:600;letter-spacing:0.04em}

/* The agent's own attempt, and the refusal */
.agt-tool{display:flex;align-items:baseline;gap:10px}
.agt-bullet{position:relative;top:-1px;flex:none;width:9px;height:9px;border-radius:50%;background:var(--agt-teal)}
.agt-tool-name{font-weight:600;color:var(--agt-text-hi)}
.agt-refusal{margin:0.5em 0 0 3px;padding:6px 0 6px 16px;border-left:2px solid var(--agt-red);color:var(--agt-red-soft)}

/* Footer bar */
.agt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:60px;padding:10px 16px;background:var(--agt-bar);border-top:1px solid var(--agt-line);color:var(--agt-text-mute);font-size:0.92em}
.agt-foot-group{display:contents}
.agt-foot-end{margin-left:auto}
.agt-btn{font:inherit;padding:8px 14px;border-radius:7px;border:1px solid rgba(255,255,255,0.18);background:transparent;color:var(--agt-text);cursor:pointer;transition:background 0.15s,border-color 0.15s}
.agt-btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.35)}
.agt-btn:focus-visible{outline:2px solid var(--agt-teal);outline-offset:2px}
.agt-btn-primary{padding:8px 16px;border-color:var(--agt-teal);background:rgba(42,188,180,0.08);color:var(--agt-teal);box-shadow:0 0 18px rgba(42,188,180,0.18);transition:background 0.15s,box-shadow 0.15s}
.agt-btn-primary:hover{background:rgba(42,188,180,0.16);border-color:var(--agt-teal);box-shadow:0 0 26px rgba(42,188,180,0.3)}

.agt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reduced motion: the final frame at once (the script skips to it), nothing moves or fades. */
@media (prefers-reduced-motion:reduce){
  .agt,.agt *,.agt *::before,.agt *::after{animation:none !important;transition:none !important}
}