/* ========================================================================== Lab — the small layer site.css cannot carry. Loaded after css/site.css, tokens only, no new colours. Four jobs, nothing else: 1. keep the page still behind the gate, and make the gate's own dark surface (it lives outside a .dark token scope) legible; 2. let .lab-nav collapse into the same mobile drawer .nav uses — the two class blocks collide in site.css and .lab-nav wins on display; 3. dress the DOM lab-player.js emits that has no twin anywhere else on the site: the audio deck, the document viewer, .btn-lab, .doc-text; 4. two grid/typography corrections for markup the frozen player builds (3 children in a 2-column .cue, bare

/

in the transcript). ========================================================================== */ /* ---------- 1 · Gate ---------- */ /* The gate paints #101114 itself, so .dark's tokens never reach these. */ /* ---------- 2 · Lab nav in the header ---------- */ /* Desktop: the 10 links scroll inside the header row instead of pushing it. The right edge fades so the overflow reads as scrollable; the fade lifts while anything inside is focused so a focus ring is never clipped. */ .nav.lab-nav { min-width: 0; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } .nav.lab-nav:focus-within { -webkit-mask-image: none; mask-image: none; } /* The lab header carries buttons the home page does not, and site.css only lightens .btn--secondary over a dark hero. */ @media (max-width: 1080px) { .nav.lab-nav { -webkit-mask-image: none; mask-image: none; } /* touch targets: .btn--sm is 36px, which is fine with a mouse, not a thumb */ .header__end .btn--sm { min-height: 44px; } /* .lab-nav sits after the .nav drawer rules in site.css, so without this it forces display:flex (drawer permanently open) and align-items:center (rows centred and shrunk to their text). */ .nav.lab-nav { display: none; flex: none; margin: 0; overflow-x: visible; align-items: stretch; } .nav-open .nav.lab-nav { display: flex; } .nav.lab-nav a { display: flex; align-items: center; min-height: 44px; padding: 12px 14px; font-size: var(--fs-2); color: var(--ink); white-space: normal; } } /* ---------- 3 · Player: audio deck ---------- */ .mpl-audio-deck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 3vw, 28px); align-items: center; width: 100%; height: 100%; padding: clamp(14px, 3vw, 26px); } .mpl-audio-cover { position: relative; height: 100%; aspect-ratio: 1; max-width: 220px; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .12); } .mpl-audio-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .75; } .mpl-audio-cover-fallback { width: 100%; height: 100%; background: var(--gradient); opacity: .55; } /* size only — site.css [data-bigplay] already draws the button */ .mpl-audio-cover .mpl-audio-bigplay { width: clamp(48px, 42%, 72px); height: clamp(48px, 42%, 72px); } .mpl-audio-meta { min-width: 0; } .mpl-audio-kicker { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .mpl-audio-title { margin: 10px 0 6px; font-size: var(--fs-4); color: #fff; } .mpl-audio-sub { font-size: var(--fs-1); color: rgba(255, 255, 255, .72); } .mpl-audio-el { display: none; } /* EQ bars: idle until the media plays */ .mpl-audio-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: 18px; opacity: .4; transition: opacity .25s var(--ease); } .mpl-audio-bars.is-playing { opacity: 1; } .mpl-audio-bars i { display: block; width: 4px; height: 20%; border-radius: 2px; background: var(--gradient); } .mpl-audio-bars.is-playing i { animation: mpl-eq 1.1s var(--ease) infinite alternate; } .mpl-audio-bars.is-playing i:nth-child(2n) { animation-duration: .78s; } .mpl-audio-bars.is-playing i:nth-child(3n) { animation-duration: 1.4s; } .mpl-audio-bars.is-playing i:nth-child(5n) { animation-duration: .95s; } @keyframes mpl-eq { from { height: 15%; } to { height: 100%; } } @media (max-width: 620px) { .mpl-audio-bars { display: none; } .mpl-audio-title { font-size: var(--fs-2); } .mpl-controls-row .mpl-volume { width: 56px; } } @media (prefers-reduced-motion: reduce) { .mpl-audio-bars.is-playing i { animation: none; height: 55%; } } /* ---------- 3 · Player: document viewer ---------- */ .mpl-player[data-kind="document"] { background: var(--bg); border-color: var(--line); color: var(--text); } .mpl-doc-frame { display: block; width: 100%; height: min(70vh, 720px); border: 0; background: var(--bg-3); } .mpl-player[data-kind="document"] .mpl-controls { background: var(--bg-2); border-top: 1px solid var(--line); } .btn-lab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--accent); color: #fff; font-size: var(--fs-1); font-weight: 600; line-height: 1; cursor: pointer; } .btn-lab:hover { background: var(--accent-ink); color: #fff; text-decoration: none; } .btn-lab--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-lab--ghost:hover { background: var(--bg-2); color: var(--ink); border-color: var(--ink); } .mpl-btn.is-active { background: rgba(255, 255, 255, .16); } /* ---------- 4 · Transcript corrections ---------- */ /* The player prints

/

straight into the panel; keep them at label size. */ .transcript-head h2 { font-size: var(--fs-2); letter-spacing: -0.01em; } .transcript-intro h3 { margin-bottom: 8px; font-family: var(--mono); font-size: var(--fs-0); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .transcript-intro .topic-chips { margin-top: 12px; } /* .cue is a