/* Compare: the feed as received next to one delayed output. Uses the shared .dialog look (L3, cyan
   top edge) but is opened with show() so the confirm popover, tooltips and toasts stack above it;
   .cmp-scrim stands in for ::backdrop. Panes are sized so both 16:9 pictures fit the screen. */

.compare { position: fixed; inset: 0; z-index: 50; margin: auto; height: fit-content; width: min(calc(100vw - 3rem), calc((100vh - 16rem) * 32 / 9 + 3.25rem)); max-height: calc(100vh - 2rem); }
.cmp-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(4, 5, 8, .82); animation: fadeIn var(--t-in) linear both; }

/* ---------- head: P4 ZACK // COMPARE   [Out 1 | Replay]   [state]   ✕ ---------- */
.cmp-head { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) 1.25rem var(--s3); }
.cmp-title { display: flex; align-items: baseline; gap: .5rem; min-width: 0; margin: 0; font: italic 800 1.625rem/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.cmp-slot { color: var(--accent); }
.cmp-name { overflow: hidden; text-overflow: ellipsis; }
.cmp-slash { color: var(--accent); }
.cmp-word { color: var(--text-2); }
.cmp-head .chip { flex-shrink: 0; }

/* ---------- panes ---------- */
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: 0 1.25rem; }
.cmp-pane { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--well); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.cmp-pane.delayed { border-color: rgba(54, 214, 255, .5); }
.cmp-pane::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); pointer-events: none; transition: opacity 200ms linear; }
.cmp-pane.pic::before { opacity: 0; }
.cmp-pane video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Plates with a slanted right end, like the multiview labels. */
.cmp-tag, .cmp-clock { position: absolute; left: 0; z-index: 1; display: inline-flex; align-items: center; gap: var(--s2); padding: 0 1.25rem 0 var(--s3); background: rgba(7, 9, 12, .82); clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.cmp-tag { top: var(--s3); height: 1.875rem; }
.cmp-tag b { font: italic 800 1rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.cmp-tag b::after { content: ' ·'; color: var(--muted); font-style: normal; }
.cmp-tag span { font: 600 .8125rem/1 var(--mono); color: var(--text-2); }
.delayed .cmp-tag b { color: var(--accent); }
.delayed .cmp-tag span { text-transform: uppercase; letter-spacing: .04em; }
.cmp-clock { bottom: var(--s3); height: 2rem; }
.cmp-clock-k { font: 600 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmp-clock > span:last-child { font: 700 1.0625rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.cmp-load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--s2); font: .8125rem var(--mono); color: var(--muted); }
.cmp-load .spin { color: var(--accent); }
.cmp-pane.pic .cmp-load { display: none; }

/* ---------- foot: readout · nudges · audio ····· standby test ---------- */
.cmp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s4) 1.25rem 1.25rem; }
.cmp-readout { display: grid; gap: var(--s1); min-width: 24rem; }
.cmp-big { display: flex; align-items: baseline; gap: var(--s3); }
.cmp-v { font: 700 2.75rem/1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cmp-v.warn { color: var(--amber); }
.cmp-unit { font: 600 .8125rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.cmp-big .chip { align-self: center; }
.cmp-line { font: .8125rem var(--mono); color: var(--muted); white-space: nowrap; }
.cmp-meas.ok { color: var(--live); }
.cmp-meas.off { color: var(--amber); }
.cmp-nudges { flex: 0 1 22rem; min-width: 16rem; }
.cmp-nudges .nudge-group { width: 100%; }
.cmp-test { gap: var(--s2); }
.cmp-test-n { font: 700 .8125rem var(--mono); text-transform: none; letter-spacing: 0; transform: skewX(10deg); }

/* ---------- standby timers (one plate per player, top right) ---------- */
.cmp-sb { position: absolute; right: 0; top: var(--s3); z-index: 1; display: inline-flex; align-items: center; height: 1.875rem; padding: 0 var(--s3) 0 1.25rem; background: rgba(7, 9, 12, .86); clip-path: polygon(.5rem 0, 100% 0, 100% 100%, 0 100%); font: 700 .8125rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; animation: fadeIn var(--t-in) linear both; }
.cmp-sb.sb-wait { color: var(--amber); }
.cmp-sb.sb-standby { background: var(--amber); color: var(--on-amber); }
.cmp-sb.sb-frozen { color: #FF8A92; }
.cmp-sb.sb-back { color: var(--live); }