/* Trajan Pro — Roman monumental inscription capitals, self-hosted so it
   renders on every machine regardless of installed fonts. */
@font-face {
  font-family: "Trajan Pro";
  font-style: normal;
  font-weight: 400 700; /* single weight; browser synthesizes bold */
  font-display: swap;
  src: url("/fonts/TrajanPro3-Semibold.otf") format("opentype");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Violet + tritium frost-blue scheme. (Prev: --bg#0e1116 --panel#161b22
     --line#262d38 --ink#dfe6ef --dim#8b96a5 --accent#4f8ef7 — revert here.) */
  --bg: #08060f; --panel: #130f1e; --line: #2b2440; --ink: #e8e2f7;
  --dim: #9990b3; --accent: #b14dff; --violet: #b14dff; --frost: #5fd7ee;
  --ok: #3fb96f; --bad: #e5604c; --warn: #d9a441;
  /* SET 42g — dark orange friction (between yellow work and red death). */
  --tone-friction: #c2410c;
  --friction: #c2410c;

  /* Experimental ARCHAIC LATIN face — ONE font for the whole app (engraved
     Roman capitals). Hierarchy comes from size / weight / italic, not from
     switching families. REVERT to the terminal look: set --font-body to
     "SF Mono", ui-monospace, Menlo, monospace. */
  --font-body: "Trajan Pro", "Trajan", "Copperplate", serif;
  --font-display: var(--font-body);
}
body { background: var(--bg); color: var(--ink); font: 14px/1.6 var(--font-body); }
/* one family, proper typographic hierarchy */
h1, h2, h3, .verdict, .sechead, .step .dot + *, .empty h2 { letter-spacing: 0.8px; font-weight: 700; }
h1 { font-weight: 700; }
b, strong, .primary, .btn, .verdict, .cardhead b, .statgrid b, .totalrow td { font-weight: 700; }
em, i, .tag, .stagenote, .sub, .note, .extnote { font-style: italic; }
code, pre, .term, .rewrite, .logbody, .authtable td, .jid { font-variant-numeric: tabular-nums; }
.shell { display: flex; min-height: 100vh; }

.side { width: 320px; padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brandmark { filter: drop-shadow(0 0 6px rgba(177,77,255,0.5)); flex-shrink: 0; }
.side h1 { font-size: 20px; letter-spacing: 1px; color: var(--ink); }
.side h1 span { color: var(--frost); }
.side h1 em.legacy { color: var(--warn); font-style: normal; font-weight: 700; margin-left: 2px; }
.tag { color: var(--dim); font-size: 12px; }
textarea { min-height: 110px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px; font: inherit; resize: vertical; }
button { font: inherit; cursor: pointer; }
.primary { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px 14px; font-weight: 600; }
.primary:disabled { opacity: 0.4; cursor: default; }
.primary.big { margin-top: 18px; padding: 12px 22px; font-size: 15px; }

.autochk { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 11.5px; cursor: pointer; user-select: none; }
/* Sidebar toggle group: smaller, one line each ("⚡ Unsupervised E2E — no approval gates" must not wrap). */
.side .autochk { font-size: 10px; gap: 6px; white-space: nowrap; }
.autochk input { accent-color: var(--accent); }
.autochk:hover { color: var(--ink); }
.notifydeny { margin: -4px 0 0; color: var(--warn); }
.autobadge { color: var(--frost); font-size: 11px; border: 1px solid var(--frost); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }

.mockbadge { background: rgba(217, 164, 65, 0.12); border: 1px solid #d9a441; color: #d9a441; border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; }
.mockbadge code { color: inherit; }
.livebadge { color: var(--ok); font-size: 11px; border: 1px solid var(--ok); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.localbadge { color: var(--ok); font-size: 11px; border: 1px solid var(--ok); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.dimbadge { color: var(--dim); font-size: 11px; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.rolebadges { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.supbadge { color: var(--frost); font-size: 11px; border: 1px solid var(--frost); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.opbadge { color: var(--ok); font-size: 11px; border: 1px solid var(--ok); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.orchbadge {
  font-size: 11px; border-radius: 999px; padding: 2px 10px; align-self: flex-start;
  color: #ff9ad4; border: 1px solid transparent;
  background: linear-gradient(var(--panel, #130f1e), var(--panel, #130f1e)) padding-box,
    linear-gradient(90deg, #ff3ea5, #34e0e0) border-box;
  border: 1px solid transparent;
}
.supbanner {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(95, 215, 238, 0.12); border: 1px solid var(--frost);
  color: var(--frost); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45;
}
.agentcard { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 10px 0; }
.agentcard.dimmed { opacity: 0.45; }
.agentcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.wikilink { font-size: 11px; color: var(--frost); text-decoration: none; margin-left: 6px; }
.wikilink:hover { text-decoration: underline; }
.brand-inert { cursor: default; }
.ctrlbtn { align-self: stretch; margin: 0; }
.ctrlmodal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ctrlpanel {
  background: var(--panel, #130f1e); border: 1px solid var(--line); border-radius: 10px;
  max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 20px 22px;
}
.ctrlhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ctrlhead h2 { font-size: 16px; margin: 0; }
.ctrlgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctrlfield { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--dim); }
.ctrlfield input, .ctrlfield select {
  background: var(--bg, #08060f); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font: inherit;
}
.role-sup { color: var(--frost); }
.role-op { color: var(--ok); }
.jobitem em.p-interrupted { color: var(--warn); }
.jobitem em.p-awaiting-ir-approval,
.jobitem em.p-awaiting-build-approval,
.jobitem em.p-insufficient-input {
  display: inline-block;
  background: rgba(217, 164, 65, 0.18);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-style: normal;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.01em;
}

/* extension mismatch / absent banner */
.extbanner {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(217, 164, 65, 0.12); border: 1px solid var(--warn);
  color: var(--warn); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45;
}
.extbanner a { color: var(--frost); }
.extbanner-x {
  flex: 0 0 auto; background: none; border: 0; color: var(--warn);
  font: inherit; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0.7;
}
.extbanner-x:hover { opacity: 1; }

/* SET 50 — web runtime stale bundle (friction / dim, not warn yellow) */
.stalebanner {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(194, 65, 12, 0.12); border: 1px solid var(--tone-friction);
  color: var(--tone-friction); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45;
}
.stalebanner-reload {
  background: none; border: 0; padding: 0; color: var(--frost); font: inherit;
  text-decoration: underline; cursor: pointer;
}
.stalebanner-x {
  flex: 0 0 auto; background: none; border: 0; color: var(--tone-friction);
  font: inherit; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0.7;
}
.stalebanner-x:hover { opacity: 1; }

/* extension setup guide */
.extguide { border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.extstatus { padding: 0 12px 6px; font-size: 11.5px; }
.extstatus.ok { color: var(--ok); }
.extstatus.bad { color: var(--bad); }
.extstatus.dim { color: var(--dim); }
.extguide > summary { padding: 8px 12px; cursor: pointer; color: var(--ink); user-select: none; }
.extguide > summary:hover { color: var(--accent); }
.extnote { color: var(--dim); padding: 0 12px 8px; }
.extsteps { margin: 0; padding: 0 12px 12px 28px; display: flex; flex-direction: column; gap: 7px; color: var(--dim); line-height: 1.5; }
.extsteps b, .extsteps a { color: var(--ink); }
.extsteps a { color: var(--accent); }
.extsteps code { color: var(--ink); font-size: 11px; }
.copychip { background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 5px; padding: 1px 8px; font: inherit; font-size: 11.5px; cursor: pointer; }
.copychip:hover { border-color: var(--accent); }

.listtools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clearall { background: none; border: 1px solid var(--line); color: var(--bad); border-radius: 5px; padding: 2px 9px; font: inherit; font-size: 11px; cursor: pointer; }
.clearall:hover { border-color: var(--bad); }

.listcontrols { display: flex; gap: 6px; }
.jobsearch {
  flex: 1; min-width: 0; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px;
}
.jobsearch:focus { outline: none; border-color: var(--accent); }
.jobsort {
  flex: 0 0 auto; max-width: 110px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 6px; font: inherit; font-size: 12px;
}

.joblist { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.jobitem { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.jobitem:active { cursor: grabbing; }
.renamebox { background: var(--bg); color: var(--ink); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 6px; font: inherit; font-size: 13px; width: 100%; }
.jobflag {
  background: none; border: none; cursor: pointer; opacity: 0.35; font-size: 12px; padding: 0 2px;
}
.jobflag.on { opacity: 1; }
.extstatus.warn { color: #e6b84d; }
.jobdel { background: none; border: 0; color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 6px; }
.jobdel:hover { color: var(--bad); }
.footlinks { color: var(--dim); font-size: 11px; text-align: center; padding-top: 4px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.footlinks a { color: var(--dim); }
.footlinks a:hover { color: var(--accent); }
.footver { color: var(--dim); font-variant-numeric: tabular-nums; }
.jobitem.active { border-color: var(--accent); }
.jobitem em { font-style: normal; font-size: 11px; color: var(--dim); }
.jobitem em.p-complete { color: var(--ok); }
.jobitem em.p-failed { color: var(--bad); }
.jobitem em.p-insufficient-input { color: #d9a441; }
.jobitem em.p-healing, .jobitem em.p-awaiting-ir-approval, .jobitem em.p-awaiting-build-approval { color: var(--accent); }

.main { flex: 1; padding: 28px 36px; max-width: 980px; }
.jobhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.jid { color: var(--dim); font-size: 12px; }

.stepper { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 12px; }
.step .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.step.now { border-color: var(--accent); color: var(--ink); }
.step.now .dot { background: var(--accent); color: #fff; }
.step.done { color: var(--ok); }
.step.done .dot { background: var(--ok); color: #fff; }
.step.fail { border-color: var(--bad); color: var(--bad); }

.stagenote { color: var(--dim); margin: 10px 0 18px; max-width: 72ch; }
.error { background: rgba(229, 96, 76, 0.12); border: 1px solid var(--bad); color: var(--bad); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; white-space: pre-wrap; }

/* SET 34 — claim-bound report evidence (seam dumps, spec hash, efficacy). */
.report-evidence {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 12px;
  line-height: 1.45;
}
.report-evidence .evidence-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 2px 0;
  color: var(--ink);
}
.report-evidence .evidence-seam {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--dim);
}
.report-evidence .evidence-block {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.cardhead { margin-bottom: 6px; }
.cardhead b { color: var(--accent); margin-right: 6px; }
.deps { float: right; color: var(--dim); font-size: 11px; }
.card p { color: var(--dim); font-size: 12.5px; margin-bottom: 8px; }
.meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--dim); }
.meta code { color: var(--ink); }
.card details { margin-top: 8px; font-size: 12px; }
.card summary { cursor: pointer; color: var(--accent); }
.card ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.k-edge { color: #d9a441; } .k-integration { color: #b07cd8; } .k-behavior { color: var(--dim); }
.card i { font-style: normal; font-size: 10px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 5px; }

.authtable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.authtable th { text-align: left; color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.authtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: #d9a441; } .dim { color: var(--dim); }
.spin { color: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.small { font-size: 11px; }

.healing { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 70px 0; }
.spinner { width: 42px; height: 42px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rot 0.9s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.45; } }

.tokenmeter { margin-left: auto; color: var(--dim); font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.sechead { margin: 22px 0 6px; font-size: 14px; letter-spacing: 0.4px; }
.totalrow td { color: var(--ink); font-weight: 700; border-top: 2px solid var(--line); }
.card.esc { margin-top: 10px; border-color: rgba(229, 96, 76, 0.55); }
.card.esc .skew { color: #d9a441; font-size: 12.5px; margin-bottom: 6px; }
.card.esc .rec { color: var(--ink); font-size: 12.5px; margin-bottom: 8px; }

.verdict { font-size: 17px; font-weight: 700; padding: 14px 16px; border-radius: 8px; margin-bottom: 16px; }
.verdict.ok { background: rgba(63, 185, 111, 0.1); border: 1px solid var(--ok); }
.verdict.bad { background: rgba(229, 96, 76, 0.1); border: 1px solid var(--bad); }
.verdict.gate { background: rgba(217, 164, 65, 0.1); border: 1px solid #d9a441; color: #d9a441; }

/* input-gate outcome */
.progressfill.gate { background: #d9a441; }
.gatelist { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; font-size: 13px; }
.ok-list li { color: var(--ok); }
.card.gap { margin-top: 10px; border-color: rgba(217, 164, 65, 0.55); }
.gatequestion { color: #d9a441 !important; font-weight: 600; }
.gatelevers { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.ghostbtn { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.ghostbtn:hover:not(:disabled) { border-color: #d9a441; color: #d9a441; }
.ghostbtn:disabled, .gatelevers .primary:disabled { opacity: 0.5; cursor: default; }
.stagenote.small b { color: var(--ink); }
.rewrite { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.iresc { border: 1px solid rgba(217,164,65,0.5); border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; background: rgba(217,164,65,0.05); }
.iresc .sechead { color: #d9a441; margin-top: 0; }
.queryhead { margin-top: 6px; }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.statgrid div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.statgrid b { display: block; font-size: 22px; }
.statgrid span { color: var(--dim); font-size: 11px; }

.empty { color: var(--dim); max-width: 62ch; padding-top: 60px; }
.empty h2 { color: var(--ink); margin-bottom: 14px; }
.empty ol { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.empty b { color: var(--ink); }
a { color: var(--accent); }

/* overall progress bar */
.progresswrap { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.progresstrack { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progressfill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.8s ease; }
.progressfill.done { background: var(--ok); }
.progressfill.fail { background: var(--bad); }
.progresspct { color: var(--dim); font-size: 11.5px; white-space: nowrap; min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.progresseta { color: var(--dim); }

/* per-feature mini bar (build table) */
.progcell { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.minibar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.minibar > div { height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.minipct { color: var(--dim); font-size: 10px; width: 28px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* per-feature bar at bottom of IR cards */
.featprog { height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; margin-top: 10px; }
.featprogfill { height: 100%; background: var(--accent); border-radius: 1px; transition: width 0.8s ease; }

/* job list footer row */
.jobitem-foot { display: flex; align-items: center; gap: 8px; }
.jobflag {
  background: none; border: none; cursor: pointer; opacity: 0.35; font-size: 12px; padding: 0 2px; line-height: 1;
}
.jobflag.on { opacity: 1; }
.extstatus.warn { color: #e6b84d; }
.jobts { color: var(--dim); font-size: 10px; margin-left: auto; }

/* header elapsed */
.elapsed { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* event log */
.eventlog { margin-top: 28px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.eventlog > summary { padding: 8px 14px; cursor: pointer; color: var(--dim); font-size: 12px; user-select: none; }
.eventlog > summary:hover { color: var(--ink); }
.logbody { max-height: 420px; overflow-y: auto; }

/* Artifact download cards — clear targets, not squint-links. */
.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.dlcard { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-decoration: none; color: var(--ink); transition: border-color .12s, transform .12s; min-width: 210px; }
.dlcard:hover { border-color: var(--frost); transform: translateY(-1px); }
.dlicon { font-size: 18px; color: var(--frost); }
.dltext { display: flex; flex-direction: column; line-height: 1.3; }
.dltext b { font-size: 13px; }
.dltext small { color: var(--dim); font-size: 11px; }

.sharebtn { width: 100%; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .12s, color .12s; }
.sharebtn:hover { border-color: var(--frost); color: var(--ink); }
.logrow { display: flex; gap: 14px; padding: 3px 14px; border-top: 1px solid var(--line); font-size: 11.5px; align-items: baseline; }
.logrow:first-child { border-top: none; }
.logts { color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; width: 46px; text-align: right; }
.loglabel { color: var(--dim); }
.tone-ok    .loglabel { color: var(--ok); }
.tone-bad   .loglabel { color: var(--bad); }
.tone-warn  .loglabel { color: #d9a441; }
.tone-friction .loglabel { color: var(--tone-friction); }
.tone-accent .loglabel { color: var(--accent); font-weight: 600; }
.tone-neutral .loglabel { color: var(--dim); }
/* SET 37i — dim is explicit (exclusions / evidence); alias of neutral. */
.tone-dim .loglabel { color: var(--dim); }
.evidence-line.tone-neutral { color: var(--dim); }
.evidence-line.tone-bad { color: var(--bad); }
.evidence-strata { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
/* SET 37i — dim = exclusions / evidence / honest substrate (eventTone). */
.tone-dim .loglabel { color: var(--dim); opacity: 0.85; }
/* SET 45a — orthogonal substrate mark (gear + left accent); keeps outcome tone. */
.logrow.substrate-mark {
  border-left: 3px solid var(--frost);
  padding-left: 11px;
}
.logrow.substrate-mark .loglabel::before {
  content: "⚙ ";
  color: var(--frost);
}
/* SET 56d — pipeline stage stepper + stage-break rows + visible phase tag. */
.stage-stepper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 10px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}
.stage-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  min-width: 4.5rem;
}
.stage-step .stage-label { font-weight: 600; }
.stage-step .stage-elapsed { font-variant-numeric: tabular-nums; opacity: 0.85; }
.stage-done { color: var(--ok); border-color: rgba(63, 185, 111, 0.35); }
.stage-active { color: var(--warn); border-color: rgba(217, 164, 65, 0.45); }
.stage-failed { color: var(--bad); border-color: rgba(229, 96, 76, 0.45); }
.stage-pending { color: var(--dim); }
.logrow.stage-break {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.logphase { opacity: 0.85; }
.evidence-strata { margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* SET 19 — Admin metrics grid */
.admin-view { max-width: 100%; }
.admin-section { margin-bottom: 16px; }
.admin-section > .cardhead > b { color: var(--frost); }
.admin-section-secondary { border-style: dashed; opacity: 0.92; }
.admin-provenance { margin-top: 8px; }
.admin-grid-wrap { overflow-x: auto; max-width: 100%; }
.admin-grid { font-variant-numeric: tabular-nums; font-size: 12px; table-layout: fixed; width: 100%; }
.admin-grid th, .admin-grid td { word-break: break-word; }
.admin-grid th:first-child, .admin-grid td:first-child { width: 28%; }
.admin-grid th:not(:first-child), .admin-grid td:not(:first-child) { width: 14.4%; text-align: right; }
.admin-cat td { background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); padding-top: 12px; }
.admin-cat b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); padding: 4px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }
.btn.ghost:hover { color: var(--ink); border-color: var(--frost); }

/* SET 33b.1 — card-style number tiles (engine admin's 555da66 USER_ADMIN_HTML look,
   re-idiomized onto the web design tokens: frost-blue headers, violet accents). */
.metricgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.metrictile { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 14px 8px; text-align: center; }
.metrictile b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--ink); }
.metrictile b.ok { color: var(--ok); }
.metrictile span { color: var(--dim); font-size: 10.5px; }
@media (max-width: 560px) { .metricgrid { grid-template-columns: repeat(2, 1fr); } }

/* SET 21 — inline SVG run charts */
.runcharts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.runchart-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.runchart-block { flex: 1 1 200px; min-width: 0; }
.runchart-block-wide { flex: 1 1 100%; }
.runchart-head { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.runchart { display: block; max-width: 100%; font-variant-numeric: tabular-nums; }
.runchart-label { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.runchart-empty { padding: 8px 0; }
.pause-banner {
  background: rgba(217, 164, 65, 0.12); border: 1px solid var(--warn);
  color: var(--warn); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.pause-banner b { color: var(--ink); }
.pause-banner .pause-actions { display: flex; gap: 8px; }

/* SET 57b — Run Report: scorecard tiles + category groups */
.scorecard { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.scoretile {
  flex: 1 1 140px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; text-align: center;
}
.scoretile-label { font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }
.scoretile-pct { font-size: 24px; font-weight: 700; margin: 2px 0; }
.scoretile-sub { font-size: 10.5px; line-height: 1.4; }
.score-ok { border-color: var(--ok); } .score-ok .scoretile-pct { color: var(--ok); }
.score-warn { border-color: var(--warn); } .score-warn .scoretile-pct { color: var(--warn); }
.score-friction { border-color: var(--tone-friction); }
.score-friction .scoretile-pct { color: var(--tone-friction); }
.score-bad { border-color: var(--bad); } .score-bad .scoretile-pct { color: var(--bad); }
.score-dim .scoretile-pct { color: var(--dim); }
.report-groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.report-group { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.report-group-title {
  font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px;
}
.report-row {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums;
}
.report-value.ok { color: var(--ok); }
.report-value.bad { color: var(--bad); }
