/* ============================================================
   primae-diff.css — "the number microscope": execution-based
   differential testing as a big interactive set piece
   (Proof · verification, section #how).

   Scoped under .pm-diff-*. Canvas draws the scene (node cards,
   rails, comparator lens, log-precision scale); JS builds the
   DOM extras inside #pm-diff: controls (pause / 0.5×), landed
   verdict chips (real buttons — click to replay the digit diff
   in the lens) and the odometer tally. Theme-aware via site
   tokens, warm-light fallbacks baked in. Verdict colors come
   from eval.css (--id/--cl/--dv/--na on :root) so the piece
   agrees with the radar charts below it. Accent orange is only
   for interactive affordances (hover, focus, replay flash).
   ============================================================ */
.pm-diff-stage {
    position: relative;
    margin: var(--space-xl, 48px) auto 0;
    max-width: none;
    width: 100%;
    padding-top: clamp(20px, 2.4vw, 32px);
    border-top: 1px solid var(--bb-line, rgba(26, 26, 23, 0.14));
}

.pm-diff-stage canvas {
    display: block;
    width: 100%;
    height: clamp(380px, 38vw, 520px);
}

.pm-diff-caption {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--color-muted, #6c6b61);
}

/* ---- JS-built overlay (sized to the canvas box) ------------- */
.pm-diff-ui {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

/* ---- controls · top-right (pause / half speed) -------------- */
.pm-diff-controls {
    position: absolute;
    top: 6px;
    right: 0;
    display: flex;
    gap: 6px;
    pointer-events: auto;
}

.pm-diff-btn {
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--color-muted, #6c6b61);
    background: var(--color-bg, #f5f4ef);
    border: 1px solid var(--bb-line, rgba(26, 26, 23, 0.14));
    border-radius: 999px;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.pm-diff-btn:hover {
    color: var(--accent, #d9542b);
    border-color: var(--accent, #d9542b);
}

.pm-diff-btn:focus-visible {
    outline: 2px solid var(--accent, #d9542b);
    outline-offset: 2px;
}

.pm-diff-btn[aria-pressed="true"] {
    color: var(--accent, #d9542b);
    border-color: var(--accent, #d9542b);
}

/* ---- landed verdict chips · real buttons on the scale ------- */
.pm-diff-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--color-bg, #f5f4ef);
    border: 1px solid currentColor;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.pm-diff-chip.pm-diff-on {
    opacity: 1;
    pointer-events: auto;
}

.pm-diff-chip.pm-diff-fade {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.pm-diff-chip:hover {
    transform: translate(-50%, -50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 26, 23, 0.18);
}

.pm-diff-chip:focus-visible {
    outline: 2px solid var(--accent, #d9542b);
    outline-offset: 2px;
}

.pm-diff-chip--id { color: var(--id, #157a3c); }
.pm-diff-chip--cl { color: var(--cl, #b06a09); }
.pm-diff-chip--dv { color: var(--dv, #b5261f); }
.pm-diff-chip--na { color: var(--na, #a8a89e); border-style: dashed; }

/* brief accent flash while a chip's comparison replays in the lens */
.pm-diff-chip.pm-diff-replay {
    border-color: var(--accent, #d9542b);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(217, 84, 43, 0.18));
}

/* ---- odometer tally · bottom-left --------------------------- */
.pm-diff-tally {
    position: absolute;
    left: 2px;
    bottom: 2px;
    margin: 0;
    font-family: var(--font-mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--color-muted, #6c6b61);
    white-space: nowrap;
    transition: opacity 0.5s ease;
}

.pm-diff-tally.pm-diff-fade { opacity: 0; }

.pm-diff-t--id { color: var(--id, #157a3c); }
.pm-diff-t--cl { color: var(--cl, #b06a09); }
.pm-diff-t--dv { color: var(--dv, #b5261f); }
.pm-diff-t--na { color: var(--na, #a8a89e); font-weight: 500; }

.pm-diff-t-sep {
    color: var(--color-muted, #6c6b61);
    font-weight: 500;
    opacity: 0.7;
}

.pm-diff-t-n { display: inline-block; }

.pm-diff-t-pop { animation: pm-diff-pop 0.32s ease; }

@keyframes pm-diff-pop {
    40% { transform: translateY(-3px) scale(1.22); }
}

/* ---- density / motion --------------------------------------- */
@media (max-width: 560px) {
    .pm-diff-tally { font-size: 12px; bottom: 0; }
    .pm-diff-btn { padding: 4px 8px; }
    .pm-diff-chip { font-size: 12px; padding: 4px 8px; }
}

@media (max-width: 480px) {
    .pm-diff-caption { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-diff-controls { display: none; }
    .pm-diff-chip,
    .pm-diff-tally { transition: none; }
    .pm-diff-t-pop { animation: none; }
    .pm-diff-chip:hover { transform: translate(-50%, -50%); }
}