/* ============================================================
   primae-vs.css — "plausible vs correct" · Problem-section
   vignette for primae.html. Two mini windows tell one ~10s
   looping story: LEFT, a plausible solver passes its own unit
   tests ("ship it") — then a diff vs the reference lands
   divergent, "passing tests ≠ correct". RIGHT, Primae makes the
   diff the test: every number identical, then "verified ·
   signed". Every class, including state classes, is prefixed
   pm-vs-. Warm-light site tokens with literal fallbacks.
   ============================================================ */
.pm-vs-wrap { margin: var(--space-lg, 36px) auto 0; max-width: 1000px; --pm-vs-bad: #a83a32; --pm-vs-bad-ink: #8f2f27; --pm-vs-good: #2f9e44; }
.pm-vs-cap { margin-top: 15px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; line-height: 1.6; color: var(--color-muted, #6c6b61); }
.pm-vs-cap strong { color: var(--color-text, #1a1a17); font-weight: 600; }

.pm-vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.pm-vs-win { border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); overflow: hidden; background: var(--color-bg, #f5f4ef); font-family: var(--font-sans, sans-serif); color: var(--color-text, #1a1a17); }

/* ---- titlebar ---------------------------------------------- */
.pm-vs-tb { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); min-width: 0; }
.pm-vs-dots { display: flex; gap: 5px; flex: none; }
.pm-vs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.pm-vs-tag { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--font-mono, monospace); letter-spacing: .04em; color: var(--color-muted, #6c6b61); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-vs-tag--pr { color: var(--color-text, #1a1a17); }
.pm-vs-tag--pr::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent, #d9542b); }

/* ---- stage ------------------------------------------------- */
.pm-vs-stage { position: relative; height: 322px; box-sizing: border-box; padding: 11px; background: var(--color-bg, #f5f4ef); overflow: hidden; }
/* reset veil (cream wash while the loop rewinds) */
.pm-vs-stage::after { content: ""; position: absolute; inset: 0; z-index: 9; background: var(--color-bg, #f5f4ef); opacity: 0; transition: opacity .35s; pointer-events: none; }
.pm-vs-stage.pm-vs-veil::after { opacity: .92; }
/* instant rewind under the veil (director toggles this during reset) */
.pm-vs-stage.pm-vs-snap * { transition: none !important; }

/* ---- the little editor card -------------------------------- */
.pm-vs-ed { border: 1px solid var(--color-border, #e0ddd1); border-radius: 8px; background: #fffdf8; overflow: hidden; }
.pm-vs-ed-tb { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-bottom: 1px solid var(--color-border, #e0ddd1); background: #faf8f1; min-width: 0; }
.pm-vs-file { font: 500 12px/1.4 var(--font-mono, monospace); color: var(--color-text, #1a1a17); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-vs-badge { flex: none; font: 500 12px/1 var(--font-mono, monospace); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(26, 26, 23, .22); color: var(--color-muted, #6c6b61); background: transparent; opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s, color .3s, border-color .3s, background-color .3s; }
.pm-vs-badge.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-badge--ok { color: var(--pm-vs-good, #2f9e44); border-color: color-mix(in srgb, var(--color-success, #22c55e) 55%, transparent); background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent); font-weight: 700; }
.pm-vs-chip { flex: none; font: 700 12px/1 var(--font-mono, monospace); padding: 4px 9px; border-radius: 999px; color: var(--pm-vs-good, #2f9e44); border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 55%, transparent); background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; }
.pm-vs-chip.pm-vs-on { opacity: 1; transform: none; }
/* the self-graded glow fades once the diff lands */
.pm-vs-badge.pm-vs-on.pm-vs-dim, .pm-vs-chip.pm-vs-on.pm-vs-dim { opacity: .35; }

.pm-vs-code { padding: 6px 12px 8px; font-family: var(--font-mono, monospace); font-size: 13px; }
.pm-vs-ln { display: flex; align-items: center; gap: 10px; height: 19px; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
.pm-vs-ln.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-ln-no { flex: none; width: 12px; text-align: right; font-size: 12px; line-height: 1; color: var(--color-muted, #6c6b61); opacity: .6; }
.pm-vs-bar { height: 7px; border-radius: 4px; background: rgba(26, 26, 23, .12); }
.pm-vs-bar--a { width: 56%; }
.pm-vs-bar--b { width: 40%; margin-left: 14px; }
.pm-vs-bar--c { width: 63%; margin-left: 14px; }
.pm-vs-bar--d { width: 31%; margin-left: 14px; }
.pm-vs-ret { margin-left: 14px; font-size: 13px; line-height: 1; color: var(--color-text, #1a1a17); white-space: nowrap; }
.pm-vs-kw { color: #c2185b; }

/* ---- "diff vs reference" strip ----------------------------- */
.pm-vs-diff { margin-top: 9px; box-sizing: border-box; border: 1px dashed rgba(26, 26, 23, .30); border-radius: 8px; background: var(--color-surface, #eae7dd); padding: 8px 11px 9px; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.pm-vs-diff.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-diff-h { display: block; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted, #6c6b61); }

.pm-vs-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; height: 21px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.pm-vs-row.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-name { flex: none; font: 500 12.5px/1 var(--font-mono, monospace); color: var(--color-text, #1a1a17); }
.pm-vs-num { flex: 1; min-width: 0; font: 400 12px/1 var(--font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--color-muted, #6c6b61); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-vs-num.pm-vs-stream { opacity: .7; }
.pm-vs-verd { flex: none; font: 500 12px/1 var(--font-mono, monospace); padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; opacity: 0; transform: scale(.92); transition: opacity .25s, transform .25s; }
.pm-vs-verd.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-verd--bad { color: var(--pm-vs-bad-ink, #8f2f27); border-color: rgba(168, 58, 50, .5); background: rgba(168, 58, 50, .08); }
.pm-vs-verd--ok { color: var(--accent, #d9542b); border-color: color-mix(in srgb, var(--accent, #d9542b) 55%, transparent); background: var(--accent-soft, rgba(217, 84, 43, .1)); font-weight: 700; }
.pm-vs-verd--nt { color: var(--color-muted, #6c6b61); border-color: rgba(26, 26, 23, .22); }

/* foot slot: LEFT toast · RIGHT seal */
.pm-vs-foot { margin-top: 9px; display: flex; align-items: center; min-height: 28px; }
.pm-vs-toast { font: 500 12px/1.3 var(--font-mono, monospace); padding: 5px 11px; border-radius: 999px; color: var(--pm-vs-bad-ink, #8f2f27); border: 1px solid rgba(168, 58, 50, .55); background: #faf0ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .35s; }
.pm-vs-toast b { font-weight: 700; }
.pm-vs-toast.pm-vs-on { opacity: 1; transform: none; }
.pm-vs-seal { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-mono, monospace); color: var(--accent, #d9542b); opacity: 0; transition: opacity .5s; }
.pm-vs-seal.pm-vs-on { opacity: 1; }
.pm-vs-ring { flex: none; width: 15px; height: 15px; border: 1.6px dashed var(--accent, #d9542b); border-radius: 50%; animation: pm-vs-spin 3s linear infinite; }
@keyframes pm-vs-spin { to { transform: rotate(360deg); } }

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pm-vs-badge, .pm-vs-chip, .pm-vs-ln, .pm-vs-diff, .pm-vs-row, .pm-vs-verd,
  .pm-vs-toast, .pm-vs-seal, .pm-vs-stage::after { transition: none; }
  .pm-vs-ring { animation: none; }
}

/* ---- responsive -------------------------------------------- */
@media (max-width: 720px) {
  .pm-vs-grid { grid-template-columns: 1fr; }
}