:root { --bg: #14161a; --panel: #1e2127; --line: #2e333c; --text: #e8eaed; --muted: #99a0ab; --yes-solid: #2f9e5e; --no-solid: #d0483c; --maybe-solid: #8a6d3b; --accent: #6fa8ff; } * { box-sizing: border-box; } /* The whole app is viewport-bound: the PAGE never scrolls, only the two panels that can overflow (the field list and, on mobile, nothing else). 100dvh rather than 100vh so a mobile browser's collapsing toolbar cannot push the verdict buttons off-screen — the one thing that must always be reachable. */ html, body { height: 100%; } body { margin: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── top bar ───────────────────────────────────────────────── */ .bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; } .bar__title { font-weight: 600; } .bar__progress { color: var(--muted); } .bar__spacer { flex: 1; } .bar__sync { color: var(--muted); font-size: 12px; } .bar__sync[data-state="pending"] { color: #d8a657; } .bar__sync[data-state="error"] { color: var(--no-solid); } .bar__who { color: var(--muted); } /* ── page frame ────────────────────────────────────────────── */ main { flex: 1 1 auto; /* Both axes again. main is itself a flex item of body, so without min-width:0 the video's intrinsic width propagates all the way up here and body's overflow:hidden silently CLIPS the result — no scrollbar, just a missing third verdict button. Every flex/grid item on the path from to the