/* ============================================================================ LUSKI ARCADE — Bay screens (v2 Phase 3) Fifth arcade component, paired with bay.js. See that file's header for the full contract. Short version: everything below only takes effect once carries a data-view attribute, which only bay.js ever sets. No JS running (a crawler, a no-JS visitor, this stylesheet loading on its own) means every .arc-bay-panel is in normal flow and visible -- the exact old scrolling-document behaviour, kept as the honest fallback rather than an approximation of it. ============================================================================ */ .arc-bay-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 40px) 0; flex: none; } .arc-bay-tab { font: 600 12px/1 var(--arc-font-hud); letter-spacing: .06em; text-transform: uppercase; padding: 12px 18px; border: 1px solid var(--arc-border-chrome-strong); border-bottom: 2px solid transparent; background: transparent; color: var(--arc-ink-dim); cursor: pointer; white-space: nowrap; } .arc-bay-tab:hover { color: var(--arc-ink); } .arc-bay-tab--active { color: var(--arc-ink); border-bottom-color: var(--arc-accent); } /* The no-JS/crawler default: no positioning, no clipping, just the panels in source order. Everything past this point is additive once data-view exists. */ .arc-bay-panel { } /* Once JS has picked a screen, the whole page becomes one fixed viewport: body turns into a flex column, every direct child (nav, a page's own pre-frame heading block, the frame, the footer) claims its natural height, and .arc-bay-frame is the one item that stretches to soak up whatever's left. This is deliberately generic (body > *) rather than hardcoding "nav height" -- it needs no measurement and survives a heading block or footer changing height at any breakpoint. */ html[data-view] body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } html[data-view] body > * { flex: none; } html[data-view] body > .arc-bay-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } html[data-view] .arc-bay-tabs { flex: none; overflow-x: auto; } html[data-view] .arc-bay-panel { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Per-page show-rules (html[data-view="x"] .arc-bay-panel[data-bay-screen="x"] {display:block}) live in that page's own