/* demo.css, VerifAIer product demonstrations. Loaded after site.css. Reuses tokens.
 *
 * Everything here shows real captured output from demo/site/proof/. Nothing animates for
 * decoration: motion is used only where something is genuinely flowing between stages, and all of
 * it stops under prefers-reduced-motion.
 */

/* ── recurring identifiers ──────────────────────────────────────────────────
   The point of the whole demonstration: the SAME id reappears at every stage. Hovering or
   focusing one lights up every other occurrence on the page. */
.st-id{font-family:var(--mono);font-size:.78rem;padding:1px 6px;border-radius:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
  white-space:nowrap;transition:background var(--t),border-color var(--t),color var(--t)}
.st-id.is-lit{border-color:var(--brand);color:var(--brand);background:var(--brand-bg)}
button.st-id{cursor:pointer}

/* ── trace: the staged walk through one real operation ───────────────────── */
.st-trace{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  overflow:hidden}
.st-trace__rail{display:flex;overflow-x:auto;margin:0;padding:0;list-style:none;
  border-bottom:1px solid var(--line);scrollbar-width:thin}
.st-trace__rail li{flex:1 1 auto;min-width:118px}
.st-trace__tab{width:100%;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;
  padding:.75rem .9rem;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--muted);text-align:left;cursor:pointer;font:inherit}
.st-trace__tab:hover{background:rgba(255,255,255,.03);color:var(--text)}
.st-trace__tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--brand);
  background:var(--brand-bg)}
.st-trace__tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.st-trace__idx{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--faint)}
.st-trace__tab[aria-selected="true"] .st-trace__idx{color:var(--brand)}
.st-trace__name{font-size:.86rem;font-weight:600;line-height:1.2}
.st-trace__panel{padding:1.25rem 1.4rem;border-top:1px solid var(--line-soft)}
.st-trace__panel:first-child{border-top:0}
.st-trace__what{font-size:.94rem;color:var(--muted);margin-bottom:.9rem;max-width:62ch}
.st-trace__fields{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.4rem 1.1rem;
  margin:0;font-size:.86rem;align-items:baseline}
.st-trace__fields dt{font-family:var(--mono);font-size:.74rem;color:var(--faint);
  text-transform:none;letter-spacing:.02em}
.st-trace__fields dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.st-trace__src{margin-top:1rem;font-size:.74rem;color:var(--faint);font-family:var(--mono)}
.st-trace__src a{color:var(--muted);text-decoration:underline}
.st-trace__src a:hover{color:var(--brand)}
/* Without JavaScript every panel is visible, so the demonstration still reads as a document.
   The script adds is-enhanced and only then does one-panel-at-a-time apply. */
.st-trace.is-enhanced .st-trace__panel{display:none;border-top:0}
.st-trace.is-enhanced .st-trace__panel.is-shown{display:block}

/* ── pipe: a compact stage flow, used where a full trace would be too heavy ── */
.st-pipe{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin:0;padding:0;list-style:none}
.st-pipe li{flex:1 1 132px;position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:.7rem .85rem}
.st-pipe li strong{display:block;font-size:.84rem;line-height:1.25}
.st-pipe li span{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.68rem;
  color:var(--faint);overflow-wrap:anywhere}
.st-pipe li.is-skipped{opacity:.45;border-style:dashed}
.st-pipe li.is-skipped strong{color:var(--muted)}
/* The accent creeps along the row: infrastructure operating, not decoration. */
.st-pipe li::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  transform:scaleX(0);transform-origin:left;animation:st-pipe-run 5.5s linear infinite}
.st-pipe li:nth-child(1)::after{animation-delay:0s}
.st-pipe li:nth-child(2)::after{animation-delay:.35s}
.st-pipe li:nth-child(3)::after{animation-delay:.7s}
.st-pipe li:nth-child(4)::after{animation-delay:1.05s}
.st-pipe li:nth-child(5)::after{animation-delay:1.4s}
.st-pipe li:nth-child(6)::after{animation-delay:1.75s}
.st-pipe li:nth-child(7)::after{animation-delay:2.1s}
.st-pipe li.is-skipped::after{animation:none}
@keyframes st-pipe-run{
  0%{transform:scaleX(0);opacity:0}
  6%{opacity:1}
  18%{transform:scaleX(1);opacity:1}
  30%{transform:scaleX(1);opacity:0}
  100%{transform:scaleX(1);opacity:0}
}

/* ── scope: what a mode covers and what it deliberately leaves out ────────── */
.st-scope{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}
.st-scope__cap{font-family:var(--mono);font-size:.7rem;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.st-scope__cap.is-in{border-color:rgba(0,229,160,.35);color:var(--brand);background:var(--brand-bg)}
.st-scope__cap.is-out{opacity:.5;border-style:dashed}
.st-scope__legend{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.78rem;color:var(--faint);
  margin-top:.9rem}

/* ── ledger: a compact set of measured values ────────────────────────────── */
.st-ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.6rem}
.st-ledger div{border:1px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;
  background:var(--surface)}
.st-ledger dt{font-size:.7rem;font-family:var(--mono);color:var(--faint);letter-spacing:.04em}
.st-ledger dd{margin:.25rem 0 0;font-size:1.05rem;font-weight:700;color:var(--text)}
.st-ledger dd small{display:block;font-size:.72rem;font-weight:500;color:var(--muted);
  margin-top:.15rem;font-family:var(--mono)}
@media (max-width:640px){
  .st-trace__fields{grid-template-columns:1fr;gap:.15rem .5rem}
  .st-trace__fields dd{margin-bottom:.5rem}
  .st-trace__rail li{min-width:104px}
}

@media (prefers-reduced-motion:reduce){
  .st-pipe li::after{animation:none;transform:scaleX(1);opacity:.55}
  .st-id{transition:none}
}