/* ============================================================================= * app.css - TriviaWorks Capture - car-first show capture player. * * Form: night-drive media controls with show-led album art, big glance targets, * restrained dark surfaces, and TriviaWorks stage-gold as the main accent. * * Landscape (horizontal) is a first-class layout - for an in-car phone mount: * - the player becomes a two-column "now playing" (art left, controls right); * - the bottom tab bar becomes a slim left rail to reclaim vertical space. * * Every class/id the JS touches is preserved (the play-ring SVG is kept in the * DOM and simply hidden; #progressFill carries the playhead knob). * ========================================================================== */ :root { /* ── METRO, ADOPTED ──────────────────────────────────────────────────────── Every name below is KEPT so the ~900 lines of selectors underneath keep working untouched; only what each name RESOLVES TO changes. That is the decompose-not-rewrite route: the design language moves, the layout and the capabilities do not. The app stamps data-theme="dark" on , so the Metro dark palette applies directly and this surface needs no theme logic of its own. ⚠ NOTHING here may be a colour literal. If a value below is ever a hex again, the Studio has two palettes and this file is one of them. */ --bg: var(--m-ground); --bg-grad: var(--m-tile); /* retained name; the gradients are gone */ --elev: var(--m-tile); --elev-2: var(--m-tile-2); --elev-3: var(--m-tile-open); --gold: var(--m-accent); --gold-hi: var(--m-accent-2); --gold-dim: var(--m-accent); /* ★ AN ACCENT HAS THREE VALUES, NOT ONE. --gold is the FILL; --gold-text is the accent used as TYPE. They resolve identically on this dark-only surface today, which is exactly why the distinction has to be made HERE rather than discovered later: the moment any car surface renders on a light ground, a fill value used as text fails contrast outright. */ --gold-text: var(--m-accent-text); --ink: var(--m-ink); --ink-soft: var(--m-ink-2); --ink-faint: var(--m-ink-3); --line: var(--m-edge); --line-2: var(--m-edge); --ok: var(--m-ok); --warn: var(--m-warn); --error: var(--m-err); --blue: var(--m-knowledge); --red: var(--m-err); --amber: var(--m-warn); /* Metro has NO rounded corners. Kept as names rather than deleted so a future edit that reaches for --r gets zero instead of reintroducing one. */ --r-sm: 0; --r: 0; --r-lg: 0; --pad: var(--m-pad); /* ★ CAR GLANCE TARGET. 56px, comfortably past the 44px floor, because this is read and hit at arm's length in motion. Metro has no touch-target token at all - that is a GAP in the language, logged as such, not a deviation: a minimum size is not a colour or a shape rule and nothing in Metro forbids it. */ --tap: 56px; --font: var(--m-sans); --show-art-url: none; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; background-color: var(--bg); color: var(--ink); font-family: var(--font); overscroll-behavior: none; user-select: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top); /* room for the fixed bottom tab bar (portrait) */ padding-bottom: calc(68px + env(safe-area-inset-bottom)); /* subtle top tint over the solid near-black base (no background-attachment: fixed - it is buggy on iOS Safari and can leave white bleed) */ background-image: var(--m-tile); background-repeat: no-repeat; } body::before { content: none; } /* Metro: the ground is flat and unlit. */ body::after { content: none; } /* Metro: no scrim over a flat ground. */ /* ---- topbar (slim, flat) ---- */ .topbar { /* ★ A long status chip ("WAKE-LOCK DENIED") overran the wordmark and clipped "Capture" mid-word. The bar is brand-then-status with the brand winning: the status may shrink and ellipsise, the identity may not. */ /* At 375px a long status ("WAKE-LOCK DENIED" + "STREAMING") cannot share a line with the wordmark - ellipsising it hides WHICH state is wrong, which is the only thing a status chip is for. So the bar WRAPS: identity keeps the first line, status takes the second and stays fully readable. */ /* ★ ONE LINE (Andrew, 2026-08-28). An earlier fix let this bar WRAP so a long status ("WAKE-LOCK DENIED") could not clip the wordmark. Wrapping solved the clipping and cost a whole line of vertical space on every screen, for a state that is usually two short chips. The bar now holds one line and the STATUS shrinks instead: smaller type and tighter padding at phone width, so even the longest status fits beside the mark. */ display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; padding: 12px var(--pad) 10px; position: sticky; top: 0; z-index: 10; /* ★ HARMONISED WITH THE HOST HEADER (2026-09-14). Andrew: "make sure that the Capture Tool is wholly harmonised design-wise with the Host and Player surfaces". The host's .host-header is a TILE bar ruled off the ground by a 1px edge; this bar was transparent, so scrolled show art slid visibly under the wordmark and the two surfaces opened on different chrome. Same two tokens as the host, not copied values. */ background: var(--m-tile); border-bottom: 1px solid var(--m-edge); } .brand { /* Reads brand-then-product, with the product name subordinate: smaller, muted, and divided by a hairline rather than a gap. ★ WHEN THE BAR IS TIGHT, SOMETHING HAS TO YIELD, AND IT IS NOT THE IDENTITY. Forcing one line without saying what gives clipped "Capture" mid-word behind a long status. So the wordmark never shrinks, and the PRODUCT NAME ellipsises and then disappears - a truncated product label is survivable, a truncated identity is not, and a wrapped bar costs a line on every screen for a state that is usually two short chips. */ display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; } .brand-mark { flex: 0 0 auto; } /* ★ ONE COLOUR, ALL WHITE (Andrew, 2026-09-14: "White on capture AND host AND player"). The mark wears tw-brand--stage, as host.html's header does, and the shared tw-brand.js module draws that modifier as ONE white tone. The gold-WORKS venue lockup adopted earlier the same day is REVERTED, and so is the older local ink override: the colour is ruled in exactly one home (tw-brand.js), so nothing here restates it. */ .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 400px) { .brand-name { display: none; } } .brand-mark { /* ★ Was a filled accent tile reading "TW" - a local invention, and the last accent slab left in the header once the show tiles were fixed. Capture was the only surface not using the ONE canonical wordmark (tw-brand.js, Track A 2026-06-10): thin TRIVIA + bold WORKS, which under data-theme="dark" - set on this page - renders ink TRIVIA and accent WORKS. The accent is spent on half a wordmark instead of a block, which is the same correction applied to the show tiles. Size only here; the module owns weight and colour, so the mark stays identical across surfaces. */ font-size: 12px; letter-spacing: .2px; line-height: 1; background: none; padding: 0; border-radius: 0; white-space: nowrap; } .brand-name { /* Micro, uppercase, tracked: the host labels its chrome this way (.quiz-name, the login labels). Was an off-ladder 600 13px mixed case. */ font: var(--m-micro); letter-spacing: var(--m-track); text-transform: uppercase; color: var(--ink-soft); padding-left: 8px; border-left: 1px solid var(--line); white-space: nowrap; } .status { display: flex; gap: 6px; min-width: 0; flex: 0 1 auto; justify-content: flex-end; flex-wrap: nowrap; } .status .m-chip { white-space: nowrap; /* ★ AS THE HOST'S STATUS BADGE (2026-09-14): a tile with a 1px edge, micro type. They were borderless ground chips that vanished on the new tile bar. */ background: var(--m-tile-2); border: 1px solid var(--m-edge); } @media (max-width: 460px) { /* the only place the two must compete for room */ /* Micro stays 11px, as on the host at 390px: the phone yields PADDING and tracking, never drops below the micro step (it was 10px, off the ladder). */ .status .m-chip { padding: 3px 6px; letter-spacing: .06em; } .brand-mark { font-size: 11px; } .brand-name { padding-left: 6px; } } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--ink-faint); flex: 0 0 auto; } .pill.ok { color: var(--ok); background: var(--m-ok-bg); } .pill.ok::before { background: var(--ok); } .pill.warn::before { background: var(--warn); } /* ---- views ---- */ .view { display: none; flex: 1; flex-direction: column; padding: 4px var(--pad) var(--pad); gap: 16px; overflow-y: auto; } .view.active { display: flex; animation: viewIn .28s cubic-bezier(.22,.61,.36,1); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .view.active { animation: none; } * { scroll-behavior: auto; } } /* ============================================================================= * EPISODES - flat Spotify-style list rows * ========================================================================== */ /* ---- Shows browse view ---- */ .shows-head { padding: 6px 0 4px; } .shows-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .shows-sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; } /* Continue-watching / resume banner */ .resume-card { /* ★ PAINTED BY THE KIT (.m-tile.m-tile--fill). This rule states only what is true of THIS card - its internal arrangement. Background, border, radius and the on-fill ink all come from the house, which is why the ink cannot be wrong here: nobody chooses it. */ /* Direction comes from .m-tile--row in the kit. */ gap: 14px; width: 100%; text-align: left; margin: 12px 0 4px; cursor: pointer; font-family: inherit; /* ★ NO LONGER .m-tile--fill (Andrew, 2026-08-28, from a device photo). It was a full-bleed accent slab 116px tall - on a 328px landscape screen, a third of the view painted solid gold before any content. Same objection he raised about TAP: "it's also very bright yellow". The accent now marks the card rather than filling it - an accent EDGE and an accent kicker, which is the treatment he approved for TAP. The accent means ACT; it is not a background. */ border-color: var(--gold); } .resume-kicker { color: var(--gold-text); } .resume-card:active { transform: scale(.99); } .resume-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 0; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--m-accent-ink); } .resume-icon svg { width: 22px; height: 22px; margin-left: 2px; } .resume-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .resume-kicker { /* colour comes from .m-tile--fill .m-micro in the kit */ } .resume-ep { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resume-meta { display: flex; gap: 8px; } .resume-show { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .72; } .resume-at { flex: 0 0 auto; } /* ★ THE BAR HAD TO FLIP WITH THE GROUND. It was accent-INK on a dimmed accent-ink track, which is correct on a gold fill and INVISIBLE on a dark tile - dark ink on a dark ground. Now the accent is the fill and the tile's own edge is the track, which is the same pair the transport scrubber uses. */ .resume-bar { margin-top: 6px; height: 3px; border-radius: 0; background: var(--m-edge); overflow: hidden; } .resume-fill { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 0; } .resume-chev { flex: 0 0 auto; font-size: 26px; line-height: 1; opacity: .8; } .show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; padding-bottom: 24px; } .show-card { /* .m-tile paints it. This is the card's own arrangement only. */ display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font-family: inherit; /* The monogram sizes to the tile, so the TILE is the query container. Declaring container-type on .sc-art itself would resolve its own cqw against an ancestor container instead - a silent no-op here. */ container-type: inline-size; } .show-card { /* ★ FLAT, AS EVERY HOST TILE (2026-09-14). A