/* Multiview: every output as it goes out. The picture is sacred: a slim label plate top left, a
   small delay chip bottom left, state chips only when something is wrong. The nudge bar shows on
   hover or keyboard focus, or always (Controls: Always). Column count and tile width come from
   multiview.js (--mv-cols, --mv-tile). */

/* ---------- sticky band: band, rule and slim strip stay under the top bar ---------- */
.mv-sticky { position: sticky; top: var(--sticky-top); z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s3); background: var(--ink); }
.mv-sticky .band-actions { gap: var(--s3); }
/* Once tiles scroll under it, a hairline and a soft shadow separate the band from the pictures
   (scroll-driven, so it costs nothing per frame; absent where unsupported or with motion off). */
.mv-sticky::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; border-top: 1px solid var(--line); background: linear-gradient(rgba(10, 12, 16, .7), rgba(10, 12, 16, 0)); opacity: 0; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .mv-sticky::after { animation: fadeIn linear both; animation-timeline: scroll(root); animation-range: 0 2rem; }
}
.mv-sticky .strip-slot > .strip { margin-bottom: 0; }

/* Eyebrow: "Every output as it goes out", or "Audio: P4 Zack ✕" while a tile has audio. */
.mv-aud { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text-2); }
.mv-aud b { color: var(--accent); font-weight: 600; }
.mv-aud-x { position: relative; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin: -.125rem 0 -.125rem var(--s1); padding: 0; background: var(--line); border: 1px solid var(--line-2); border-radius: 3px; color: var(--text-2); cursor: pointer; }
.mv-aud-x::before { content: ''; position: absolute; inset: -.375rem; }
.mv-aud-x:hover { border-color: var(--accent); color: var(--text); }

/* Play all: "▶ PLAY ALL ~5.7 Mb/s" (mono, not uppercased: Mb/s is not MB/s). */
.mv-playall { min-width: 12.5rem; }
.mv-playall .mv-mbps { font: 600 .75rem var(--mono); letter-spacing: 0; text-transform: none; opacity: .75; }

/* ---------- grid ---------- */
.mv { display: grid; grid-template-columns: repeat(var(--mv-cols, 3), var(--mv-tile, 26rem)); justify-content: center; gap: .625rem; }

/* ---------- tile ---------- */
.mv-tile { position: relative; aspect-ratio: 16 / 9; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; contain: layout paint; content-visibility: auto; scroll-margin-top: calc(var(--sticky-top) + var(--mv-sticky-h, 12rem) + var(--s2)); scroll-margin-bottom: var(--s4); }
.mv-tile.s-warn { border-color: rgba(255, 176, 32, .55); }
.mv-tile.s-bad { border-color: rgba(255, 77, 90, .55); }
.mv-tile.s-off .mv-well { opacity: .6; }
/* Audio: a cyan frame inside the edge. Selected: a cyan ring outside it (in the grid gap). */
.mv-tile::after { content: ''; position: absolute; inset: 0; z-index: 4; border: 2px solid transparent; border-radius: inherit; pointer-events: none; }
.mv-tile.audio::after { border-color: var(--accent); }
.mv-tile.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The selected tile's label plate fills cyan: the operator's cursor, readable at a glance. */
.mv-tile.selected .mv-label { background: var(--accent); }
.mv-tile.selected .mv-slot, .mv-tile.selected .mv-name { color: var(--on-accent); }
.mv-tile.selected .mv-out { color: rgba(3, 20, 26, .72); }

.mv-well { position: absolute; inset: 0; background: var(--well); }
.mv-well video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mv-ghost { position: absolute; right: var(--s3); bottom: -.375rem; font: italic 800 6rem/1 var(--display); color: #141922; pointer-events: none; user-select: none; }
.mv-scan { 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; }
.mv-tile.pic .mv-scan { opacity: 0; }

/* Top: label plate (slot, name, output) and chips; bottom-right-slanted plates like the brand. */
.mv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) 0 0; pointer-events: none; }
.mv-label { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 72%; height: 1.75rem; padding: 0 1.125rem 0 var(--s3); background: rgba(7, 9, 12, .8); clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.mv-slot { font: italic 800 1.1875rem/1 var(--display); letter-spacing: .02em; color: var(--accent); flex-shrink: 0; }
.mv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .875rem/1 var(--body); color: var(--text); }
.mv-out { flex-shrink: 0; font: .75rem/1 var(--mono); color: var(--muted); }
.mv-grow { flex: 1; }
.mv-top .chip { height: 1.375rem; padding: 0 .4375rem; font-size: .75rem; flex-shrink: 0; }
.mv-state[data-tip] { pointer-events: auto; cursor: default; }
.mv-busy { background: rgba(7, 9, 12, .85); border-color: var(--line-2); color: var(--text-2); gap: .375rem; }
.mv-busy .spin { width: .6875rem; height: .6875rem; border-width: 2px; color: var(--accent); }
.mv-spk { margin-right: var(--s1); background: var(--accent); color: var(--on-accent); pointer-events: auto; }
/* Preview quality while a tile plays: "480p", "Source", or "Source only" in amber. */
.mv-q { background: rgba(7, 9, 12, .85); border-color: var(--line-2); color: var(--text-2); pointer-events: auto; cursor: default; }
.mv-q.fb { color: var(--amber); border-color: rgba(255, 176, 32, .5); }
.mv-tile:not(.playing) .mv-q { display: none; }

/* Centred play for a stopped tile, like the card's preview button. */
.mv-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: var(--s2); height: 2.25rem; padding: 0 var(--s4); transform: translate(-50%, -50%) skewX(-10deg); background: rgba(21, 25, 32, .92); border: 1px solid var(--line-2); color: var(--text); font: 700 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--t-press), border-color var(--t-press); }
.mv-play > * { transform: skewX(10deg); }
.mv-play:hover { background: #12262D; border-color: var(--accent); }
.mv-play:focus-visible { outline-offset: 2px; }
.mv-play-mb { font: 600 .75rem var(--mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.mv-play-mb:empty { display: none; }
.mv-play[aria-disabled="true"] { opacity: .45; cursor: default; }
.mv-play[aria-disabled="true"]:hover { background: rgba(21, 25, 32, .92); border-color: var(--line-2); }
.mv-tile.playing .mv-play { display: none; }

/* Bottom: the delay chip (always) and the nudge bar on a scrim (hover, keyboard focus or Always). */
.mv-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2) var(--s2) 0; pointer-events: none; }
.mv-bottom::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% + 1.5rem); z-index: -1; background: linear-gradient(rgba(7, 9, 12, 0), rgba(7, 9, 12, .9) 60%); opacity: 0; transition: opacity var(--t-in) var(--e-out); }
.mv-dly-chip { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .3125rem; flex-shrink: 0; height: 1.625rem; padding: 0 1.125rem 0 var(--s3); background: none; border: 0; color: var(--text); font: 700 .875rem/1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; pointer-events: auto; }
.mv-dly-chip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(7, 9, 12, .82); clip-path: polygon(0 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.mv-dly-chip:hover::before { background: rgba(21, 25, 32, .95); }
.mv-dly-chip .icon { color: var(--muted); }
.mv-dly-chip.m-locked .icon { color: var(--accent); }
.mv-dly-chip.m-late, .mv-dly-chip.m-late .icon { color: var(--amber); }
.mv-dly-chip.m-late::before { background: rgba(42, 29, 5, .9); }
.mv-dly-chip.m-waiting { color: var(--text-2); }
.mv-dly { display: inline-block; }
body:not(.can-delay) .mv-dly-chip { cursor: default; }

.mv-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s2); opacity: 0; transform: translateY(.375rem); pointer-events: none; transition: opacity var(--t-in) var(--e-out), transform var(--t-in) var(--e-out); }
.mv-bar .nudge-group { flex: 0 1 15rem; min-width: 10rem; }
.mv-bar .nudge { --sf: rgba(21, 25, 32, .92); }
.mv-ib { background: rgba(21, 25, 32, .92); flex-shrink: 0; }
.mv-ib[aria-pressed="true"] { color: var(--accent); border-color: rgba(54, 214, 255, .6); }
/* Hover mode: the bar shows while the mouse is over the tile, or when it's reached with the keyboard.
   Not for selection or a clicked button keeping focus, which left it stuck up as if on Always. */
.mv-tile:hover .mv-bar, .mv-tile:has(:focus-visible) .mv-bar, .mv.ctrl-always .mv-bar { opacity: 1; transform: none; pointer-events: auto; }
.mv-tile:hover .mv-bottom::before, .mv-tile:has(:focus-visible) .mv-bottom::before, .mv.ctrl-always .mv-bottom::before { opacity: 1; }

/* ---------- delay entry popover (E) ---------- */
.mv-pop { width: min(19rem, calc(100vw - 1rem)); }
.mv-pop .pop-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-pop-field { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 var(--s3); font: .8125rem var(--mono); color: var(--muted); }
.mv-pop-sign { font: 700 1.375rem/1 var(--mono); color: var(--text-2); }
.mv-pop-field input { width: 5.5rem; height: 2.5rem; font: 700 1.25rem var(--mono); text-align: right; }
.mv-pop .err { margin: calc(-1 * var(--s2)) 0 var(--s3); }
/* Which ear this tile plays in, while two tiles have sound (sound.js). */
.mv-spk-side { margin-left: .1875rem; font: 700 .6875rem/1 var(--mono); }