/* In-browser draw verifier (inject/pages/verify-lib.js), shared by /raffles and /fairness.
   Renders on cream sections (dark in the dark inner-page palettes). Colours come from inject/theme.css variables only:
   text uses --color-ink (var(--ink) is the border colour, pink in the dark palettes), text on --good uses --bg. */
.vf { display: grid; gap: 12px; }
.vf-verdict { padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--cream); font: 500 13px/1.5 var(--sw-body); color: var(--ink-soft); }
.vf-verdict b { color: var(--color-ink); }
.vf-verdict--ok { background: color-mix(in srgb, var(--good) 38%, var(--cream)); color: var(--color-ink); }
.vf-verdict--ok .vf-sim { color: var(--color-ink); }
.vf-verdict--bad { border-color: var(--red); background: rgba(var(--red-rgb), 0.08); }
.vf-verdict--bad b { color: var(--red); }
.vf-verdict--wait { border-style: dashed; }

.vf-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--cream); }
.vf-steps:empty { display: none; }
.vf-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-top: 1px solid var(--paper-line); animation: vf-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.vf-step:first-child { border-top: 0; }
.vf-mark { display: flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 50%; font: 800 13px/1 var(--sw-mono); }
.vf-step--ok .vf-mark { background: var(--good); color: var(--bg); }
.vf-step--bad { background: rgba(var(--red-rgb), 0.06); }
.vf-step--bad .vf-mark { border-color: var(--red); background: var(--red); color: var(--cream); }
.vf-step--wait .vf-mark { border-style: dashed; border-color: var(--ink-faint); color: var(--ink-mute); }
.vf-body { min-width: 0; }
.vf-title { font: 400 15px/1.2 var(--sw-display); color: var(--color-ink); }
.vf-n { margin-right: 8px; font: 800 10px/1 var(--sw-mono); letter-spacing: 0.12em; color: var(--red); vertical-align: 2px; }
.vf-formula { margin-top: 3px; font: 600 10.5px/1.35 var(--sw-mono); letter-spacing: 0.02em; color: var(--ink-mute); overflow-wrap: anywhere; }
.vf-kv { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; margin-top: 5px; font: 600 11px/1.35 var(--sw-mono); }
.vf-kv span { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); padding-top: 1px; }
.vf-kv code { color: var(--color-ink); overflow-wrap: anywhere; } /* breaks at spaces first, hashes anywhere */
.vf-step--bad .vf-kv code { color: var(--red); }
.vf-note { margin: 6px 0 0; font: 500 12px/1.45 var(--sw-body); color: var(--ink-soft); }
.vf-sim { display: inline-block; padding: 1px 6px; border: 1px solid var(--gold); border-radius: 999px; background: rgba(var(--gold-rgb), 0.16); color: color-mix(in srgb, var(--gold) 45%, var(--color-ink)); font: 800 8.5px/1.4 var(--sw-mono); letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 2px; }

.vf-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1.5px dashed var(--ink-faint); border-radius: 4px; background: var(--cream); font: 500 12.5px/1.5 var(--sw-body); color: var(--ink-soft); }
.vf-chain__btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--cream); font: 800 10.5px/1.2 var(--sw-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.vf-chain__btn:hover { background: var(--red); border-color: var(--red); }
.vf-chain__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.vf-chain__btn:disabled { opacity: 0.55; cursor: progress; }
.vf-chain__out { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.vf-chain__out code { font: 600 11px/1.3 var(--sw-mono); overflow-wrap: anywhere; color: var(--color-ink); }
.vf-chain__out a { color: var(--red); font-weight: 700; }
.vf-good { color: var(--bg); background: var(--good); padding: 0 4px; border-radius: 2px; }
.vf-bad { color: var(--red); }

@keyframes vf-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .vf-step { animation: none; } }
@media (max-width: 480px) {
  .vf-step { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
  .vf-mark { width: 22px; height: 22px; font-size: 11px; }
  .vf-kv { grid-template-columns: 1fr; gap: 1px; }
}