/* Agent loop UI: live run timeline, engine grid, change approval, proof panel.
   Inherits brand tokens from /citerank.css. */

/* ── live run timeline ─────────────────────────────────────────────────────── */
.al-run{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);margin:14px 0;overflow:hidden}
.al-run-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-light);background:var(--bg-hover)}
.al-run-head .al-t{font-size:13px;font-weight:700;color:var(--text)}
.al-bar{flex:1;height:5px;border-radius:4px;background:var(--bg-active);overflow:hidden;min-width:60px}
.al-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .45s cubic-bezier(.4,0,.2,1)}
.al-pct{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.al-steps{max-height:190px;overflow-y:auto;padding:8px 14px}
.al-step{display:flex;align-items:flex-start;gap:9px;padding:5px 0;font-size:12px;color:var(--text-2);animation:alIn .25s ease}
@keyframes alIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.al-step .al-dot{flex:none;width:14px;height:14px;border-radius:50%;margin-top:1px;display:grid;place-items:center;
  background:var(--green-bg);color:var(--green);font-size:9px;font-weight:700}
.al-step.running .al-dot{background:var(--accent-glow);color:var(--accent)}
.al-step.running .al-dot::after{content:"";width:7px;height:7px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:alSpin .7s linear infinite}
@keyframes alSpin{to{transform:rotate(360deg)}}
.al-step .al-time{margin-left:auto;font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}

/* ── engine grid ───────────────────────────────────────────────────────────── */
.al-engines{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:12px 0}
.al-eng{border:1px solid var(--border);border-radius:8px;padding:11px 12px;background:var(--bg-card);transition:border-color .2s,transform .2s}
.al-eng.pending{opacity:.5}
.al-eng.cited{border-color:var(--green-border);background:var(--green-bg)}
.al-eng.not-cited{border-color:var(--red-border);background:var(--red-bg)}
.al-eng.landed{animation:alPop .3s ease}
@keyframes alPop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
.al-eng .al-name{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.al-eng .al-verdict{font-size:11px;margin-top:4px;font-weight:600}
.al-eng.cited .al-verdict{color:var(--green)}
.al-eng.not-cited .al-verdict{color:var(--red)}
.al-eng.pending .al-verdict{color:var(--text-3)}
.al-eng .al-cites{margin-top:6px;font-size:10px;color:var(--text-3);line-height:1.5;word-break:break-all}

/* ── baseline banner ───────────────────────────────────────────────────────── */
.al-baseline{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;background:var(--bg-card);margin:12px 0}
.al-baseline .al-big{font-size:34px;font-weight:900;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.al-baseline .al-lbl{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.al-baseline .al-sub{font-size:12px;color:var(--text-2);margin-top:3px}

/* ── change cards ──────────────────────────────────────────────────────────── */
.al-changes{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.al-chg{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);overflow:hidden;transition:border-color .2s}
.al-chg.approved{border-color:var(--green-border);box-shadow:inset 3px 0 0 var(--green)}
.al-chg.skipped{opacity:.55}
.al-chg-h{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;flex-wrap:wrap}
.al-chg-body{flex:1 1 240px;min-width:0}
.al-chg-h .al-num{flex:none;width:22px;height:22px;border-radius:6px;background:var(--bg-hover);color:var(--text-3);
  font-size:11px;font-weight:700;display:grid;place-items:center}
.al-chg.approved .al-num{background:var(--green);color:#06210f}
.al-chg-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.35}
.al-chg-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.al-tag{font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  background:var(--bg-hover);color:var(--text-3);border:1px solid var(--border)}
.al-tag.schema{background:var(--accent-glow);color:var(--accent);border-color:var(--accent-border)}
.al-tag.meta{background:var(--yellow-bg);color:var(--yellow);border-color:var(--yellow-border)}
.al-tag.content{background:var(--bg-hover);color:var(--text-2)}
.al-chg-actions{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.al-btn{font-size:11px;padding:5px 11px;border-radius:6px;border:1px solid var(--border);background:var(--bg-hover);
  color:var(--text-2);cursor:pointer;font-family:inherit;white-space:nowrap}
.al-btn:hover{border-color:var(--accent);color:var(--accent)}
.al-btn.on{background:var(--green);border-color:var(--green);color:#06210f;font-weight:700}
.al-btn.ghost:hover{border-color:var(--red);color:var(--red)}
.al-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.al-code{margin:0;padding:11px 14px;background:#0d1117;border-top:1px solid var(--border-light);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;color:#c9d4e5;
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}
.al-chg-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border-light);background:var(--bg-hover)}

/* ── deploy + proof ────────────────────────────────────────────────────────── */
.al-deploy{border:1px solid var(--accent-border);border-radius:12px;background:var(--accent-glow);padding:14px 16px;margin:14px 0}
.al-deploy .al-dh{font-size:13px;font-weight:800;color:var(--text);margin-bottom:4px}
.al-deploy .al-ds{font-size:12px;color:var(--text-2);line-height:1.55}
.al-deploy-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:11px}
.al-select{font-size:12px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-family:inherit}
.al-proof{border:1px solid var(--green-border);background:var(--green-bg);border-radius:12px;padding:14px 16px;margin:14px 0}
.al-proof.declined{border-color:var(--red-border);background:var(--red-bg)}
.al-proof.unchanged{border-color:var(--border);background:var(--bg-card)}
.al-proof-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.al-proof .al-num2{font-size:26px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums}
.al-proof .al-arrow{color:var(--text-3);font-size:18px}
.al-proof .al-delta{font-size:14px;font-weight:800}
.al-proof.improved .al-delta{color:var(--green)}
.al-proof.declined .al-delta{color:var(--red)}
.al-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.al-chip{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--border);color:var(--text-2);background:var(--bg-card)}
.al-chip.gain{border-color:var(--green-border);color:var(--green)}
.al-chip.loss{border-color:var(--red-border);color:var(--red)}
.al-empty{font-size:12px;color:var(--text-3);padding:10px 0}
@media(max-width:600px){
  .al-chg-actions{margin-left:0;width:100%}
  .al-chg-actions .al-btn{width:100%;text-align:center}
  .al-chg-body{flex:1 1 100%}
  .al-baseline{flex-wrap:wrap;gap:10px}
  .al-run-head{flex-wrap:wrap}
}
.al-conf{margin-top:10px;padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.55;
  background:var(--yellow-bg);border:1px solid var(--yellow-border);color:var(--text-2)}
.al-conf strong{color:var(--yellow);display:block;margin-bottom:2px}
.al-conf.low{background:var(--red-bg);border-color:var(--red-border)}
.al-conf.low strong{color:var(--red)}

/* ── multi-agent renderers ─────────────────────────────────────────────────── */
.al-matchups{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:7px}
.al-mu{border:1px solid var(--border);border-radius:8px;padding:9px 11px;background:var(--bg-card);animation:alPop .25s ease}
.al-mu.win{border-color:var(--green-border);background:var(--green-bg)}
.al-mu.loss{border-color:var(--red-border);background:var(--red-bg)}
.al-mu.tie{border-color:var(--yellow-border);background:var(--yellow-bg)}
.al-mu-e{font-size:11px;font-weight:700;color:var(--text)}
.al-mu-k{font-size:11px;color:var(--text-3);margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-mu-v{font-size:11px;font-weight:700}
.al-mu.win .al-mu-v{color:var(--green)} .al-mu.loss .al-mu-v{color:var(--red)}
.al-mu.tie .al-mu-v{color:var(--yellow)} .al-mu.none .al-mu-v{color:var(--text-3)}
.al-passages{display:flex;flex-direction:column;gap:6px}
.al-passage{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;background:var(--bg-card);font-size:12px;color:var(--text-2);line-height:1.55}
.al-pscore{flex:none;min-width:26px;height:22px;line-height:22px;text-align:center;border-radius:6px;
  background:var(--red-bg);color:var(--red);font-size:11px;font-weight:700}
.al-facts{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.al-fact{font-size:12px;color:var(--text-2);background:var(--bg-hover);border:1px solid var(--border);
  border-radius:6px;padding:5px 10px}
.al-fact b{color:var(--text-3);font-weight:600;margin-right:5px}
.al-article{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.al-sec{border-left:2px solid var(--accent);padding:6px 0 6px 11px;animation:alIn .25s ease}
.al-sec-h{font-size:13px;font-weight:600;color:var(--text)}

/* ── recipe chain ──────────────────────────────────────────────────────────── */
.al-recipe{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:14px 16px;margin:12px 0}
.al-recipe-h{font-size:14px;font-weight:800;color:var(--text)}
.al-recipe-d{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.55}
.al-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.al-node{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;background:var(--bg-hover);flex-wrap:wrap;transition:border-color .2s,background .2s}
.al-node.running{border-color:var(--accent);background:var(--accent-glow)}
.al-node.done{border-color:var(--green-border);background:var(--green-bg)}
.al-node.skipped{opacity:.6;border-style:dashed}
.al-node.failed{border-color:var(--red-border);background:var(--red-bg)}
.al-node-n{flex:none;width:19px;height:19px;border-radius:4px;display:grid;place-items:center;
  background:var(--bg-active);color:var(--text-3);font-size:11px;font-weight:700}
.al-node.done .al-node-n{background:var(--green);color:#06210f}
.al-node.running .al-node-n{background:var(--accent);color:#fff}
.al-node.failed .al-node-n{background:var(--red);color:#fff}
.al-node-l{font-size:12px;font-weight:600;color:var(--text)}
.al-node-s{font-size:11px;color:var(--text-3)}
.al-node.done .al-node-s{color:var(--green)}
.al-node.running .al-node-s{color:var(--accent)}
.al-node.failed .al-node-s{color:var(--red)}
.al-node-why{flex-basis:100%;font-size:11px;color:var(--text-3);line-height:1.45}
.al-node-arrow{color:var(--text-3);font-size:13px}
@media(max-width:640px){.al-chain{flex-direction:column;align-items:stretch}.al-node-arrow{display:none}}
.al-eng.unavailable{border-color:var(--border);background:var(--bg-hover);opacity:.75}
.al-eng.unavailable .al-verdict{color:var(--text-3)}

/* ── depth panel: your passage vs the cited one, and the rewrite ───────────── */
.al-depth{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:14px 16px;margin:14px 0}
.al-depth-h{font-size:13px;font-weight:800;color:var(--text);margin-bottom:11px}
.al-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.al-side{border:1px solid var(--border);border-radius:8px;padding:11px 12px;background:var(--bg-hover);min-width:0}
.al-side.theirs{border-color:var(--red-border);background:var(--red-bg)}
.al-side.mine{border-color:var(--accent-border);background:var(--accent-glow)}
.al-side-h{font-size:11px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.05em}
.al-scorepill{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--bg-active);color:var(--text-2);letter-spacing:0}
.al-scorepill.win{background:var(--red);color:#fff}
.al-side-u{display:block;font-size:11px;color:var(--accent);text-decoration:none;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-side-u:hover{text-decoration:underline}
.al-side-hd{font-size:11px;color:var(--text-3);margin-top:3px}
.al-side-p{font-size:12px;color:var(--text-2);line-height:1.6;margin-top:8px;max-height:150px;overflow-y:auto}
.al-rewrite{margin-top:12px;border:1px solid var(--green-border);background:var(--green-bg);border-radius:8px;padding:12px 13px}
.al-rw-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.al-rw-h span:first-child{font-size:12px;font-weight:800;color:var(--text)}
.al-lift{font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.al-lift.up{color:var(--green)}
.al-why{font-size:12px;color:var(--text-2);margin-top:8px;line-height:1.55}
.al-why b{color:var(--text)}
.al-rw-body{font-size:13px;color:var(--text);line-height:1.65;margin-top:10px;padding:11px 12px;
  background:var(--bg-card);border-radius:8px;border:1px solid var(--border)}
.al-changed{margin:9px 0 0;padding-left:18px;font-size:12px;color:var(--text-2);line-height:1.6}
.al-changed li{margin:3px 0}
.al-rw-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.al-rw-note{font-size:11px;color:var(--text-3)}
@media(max-width:640px){.al-vs{grid-template-columns:1fr}}
.al-wpdeploy{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.al-rewrite.notrec{border-color:var(--border);background:var(--bg-hover)}
.al-lift.down{color:var(--red)}
.al-keep{font-size:12px;color:var(--text-2);margin-top:8px;line-height:1.55;padding:9px 11px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px}
.al-keep b{color:var(--green)}

/* ── one-click deploy panel ───────────────────────────────────────────────
   Rendered whenever an agent produces changes the plugin can write. */
.al-cd {
  border: 1px solid var(--accent-border);
  border-radius:8px;
  background: var(--bg-card);
  padding: 14px 16px 12px;
  margin: 16px 0;
}
.al-cd-head {
  font-size: 13px; font-weight: 750; color: var(--text);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.al-cd-target { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.al-cd-target .al-select { min-width: 0; flex: 1 1 160px; max-width: 260px; }

.al-cd-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.al-cd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-light);
  border-radius:6px;
  background: var(--bg-hover);
}
.al-cd-title {
  flex: 1; min-width: 0;
  font-size:13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.al-cd-type {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-3);
}
.al-cd-type.schema { color: var(--accent); border-color: var(--accent-border); }
.al-cd-type.meta   { color: var(--yellow); border-color: var(--yellow-border); }

.al-cd-status { flex: none; font-size:12px; color: var(--text-3); min-width: 0; }
.al-cd-status.ok   { color: var(--green); }
.al-cd-status.err  { color: var(--red); }
.al-cd-status.warn { color: var(--yellow); }
.al-cd-status a    { color: inherit; }

@media (max-width: 560px) {
  .al-cd-target .al-select { max-width: none; flex-basis: 100%; }
  .al-cd-row { flex-wrap: wrap; }
  .al-cd-title { flex-basis: 100%; white-space: normal; }
}

/* ── stop a run in progress ───────────────────────────────────────────────
   A run holds an open connection and bills a model at the other end. */
.al-cancel {
  margin-left: 10px;
  font: inherit; font-size: 11px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--text-3);
  cursor: pointer;
}
.al-cancel:hover { color: var(--red); border-color: var(--red-border); }
.al-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shown after a reload that interrupted a run, because the run itself did not
   stop, only this page's view of it did. */
.al-resume {
  border: 1px solid var(--accent-border);
  background: var(--accent-glow);
  border-radius:8px;
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size:13px; line-height: 1.55; color: var(--text-2);
}
.al-resume strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ── mid-run context cards ────────────────────────────────────────────────
   What the agent decided to target, shown while it works rather than only in
   the final artefact. */
.al-card {
  border: 1px solid var(--border);
  border-radius:8px;
  background: var(--bg-card);
  padding: 12px 14px;
  margin: 12px 0;
}
.al-card-h { font-size:13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.al-card-note { font-size:12px; color: var(--text-3); line-height: 1.5; margin-top: 6px; }
.al-card-note strong { color: var(--text-2); }
.al-card-note a { color: var(--accent); }

.al-qlist { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 3px; }
.al-qlist li { font-size: 12px; color: var(--text-2); line-height: 1.45; }

.al-quote {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--accent-border);
  background: var(--bg-hover);
  border-radius: 0 7px 7px 0;
  font-size: 12px; line-height: 1.6; color: var(--text-2);
}