/* Jurisdiction in Relief — Gate 2 signature slice. Civic palette per docs/DESIGN-TOKENS.md §4 + Gate A visual constitution. All factual text is live DOM; plates are illustrative environmental texture. */ :root{ --js-paper:#f7f5f1; --js-ground:#e8e4dd; --js-ink:#1b2a3a; --js-ink-muted:#5a6a7a; --js-accent:#b8763a; --js-break:#8a4b2e; --js-focus:#1f4e79; --js-route-available:#3d566e; --js-water:#a8bfca; } *{margin:0;box-sizing:border-box} html,body{height:100%} body{background:#d9d4c9;font-family:system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; color:var(--js-ink);overflow:hidden} .serif{font-family:Georgia,'Iowan Old Style','Times New Roman',ui-serif,serif} /* ---------- stage scaffold: fixed design space, letterbox-scaled ---------- */ #viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#cfc9bc} #viewport[hidden]{display:none!important} /* the readiness gate is real: attribute wins over display:flex */ .boot #canonical{display:none} /* JS boots: canonical never paints; no-JS keeps it forever */ #stage{position:relative;width:1440px;height:900px;overflow:hidden;background:#dfe3e3; transform-origin:center center} body[data-mode="mobile"] #stage{width:390px;height:844px} .space{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform} #space-o,#space-os{display:none} /* JS reveals exactly one sky plate per mode */ .plate{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;pointer-events:none} .sprite{position:absolute;transform-origin:50% 100%;will-change:transform;pointer-events:none} #vec{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} #fx{position:absolute;inset:0;pointer-events:none} /* haze veils used by the transformation + final recede */ .veil{position:absolute;inset:-5%;pointer-events:none;opacity:0; background:radial-gradient(ellipse at 30% 80%, rgba(247,245,241,0) 30%, rgba(247,245,241,.9) 78%)} /* ---------- type layers ---------- */ .truth{position:absolute;top:14px;left:14px;z-index:40;background:rgba(247,245,241,.92); border:1px solid rgba(27,42,58,.18);border-radius:6px;padding:7px 12px;font-size:12px; letter-spacing:.14em;display:flex;gap:8px;align-items:center} .truth::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--js-accent)} body[data-mode="mobile"] .truth{font-size:11px;padding:6px 10px;max-width:75%} .eyebrow{letter-spacing:.24em;font-size:12px;text-transform:uppercase;color:var(--js-ink-muted)} .big-name{position:absolute;z-index:20;font-size:44px;letter-spacing:.42em;color:rgba(255,255,255,.94); text-shadow:0 1px 14px rgba(27,42,58,.35);white-space:nowrap} .light-note{color:rgba(255,255,255,.95);text-shadow:0 1px 3px rgba(27,42,58,.8),0 2px 18px rgba(27,42,58,.6)} .lbl{position:absolute;z-index:25;max-width:330px;opacity:0} .lbl .name{font-size:17px;line-height:1.25} .lbl .sub{font-size:13px;letter-spacing:.08em;color:var(--js-ink-muted);margin-top:3px} .lbl.light .name{color:rgba(255,255,255,.97);text-shadow:0 1px 3px rgba(27,42,58,.8),0 2px 14px rgba(27,42,58,.6)} .lbl.light .sub{color:rgba(255,255,255,.9);text-shadow:0 1px 3px rgba(27,42,58,.85),0 2px 12px rgba(27,42,58,.65)} .lbl.backed{background:rgba(247,245,241,.88);border-radius:7px;padding:9px 12px; box-shadow:0 2px 14px rgba(27,42,58,.08)} .chip{display:inline-block;background:rgba(247,245,241,.9);border:1px solid rgba(27,42,58,.16); border-radius:5px;padding:5px 10px;font-size:12px;letter-spacing:.12em;color:var(--js-ink)} .chip.warn{border-color:rgba(138,75,46,.5);color:var(--js-break)} #identity{position:absolute;left:96px;bottom:64px;z-index:25;opacity:0} #identity .serif{font-size:26px} #identity .prov{font-size:13px;letter-spacing:.06em;margin-top:6px} /* ---------- final action (environment-delivered, no card) ---------- */ #action{position:absolute;z-index:30;opacity:0;visibility:hidden;max-width:400px} #action .title{font-size:21px;line-height:1.25;margin-top:8px} #action .detail{font-size:16px;color:var(--js-ink-muted);margin-top:10px;max-width:52ch} #action .row{margin-top:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .pill{display:inline-block;background:rgba(247,245,241,.9);border:1.5px solid var(--js-accent); color:var(--js-ink);border-radius:9px;padding:12px 16px;font-size:15px;font-weight:600; text-decoration:none;white-space:nowrap;min-height:48px} body[data-mode="mobile"] .pill{background:var(--js-accent);color:#fff;font-size:16px} .pill:focus-visible{outline:3px solid var(--js-focus);outline-offset:2px} a.quiet{font-size:16px;color:var(--js-focus)} a.quiet:focus-visible{outline:3px solid var(--js-focus);outline-offset:2px} #action .prov{font-size:13px;letter-spacing:.06em;color:var(--js-ink-muted);margin-top:16px} #action .status-line{font-size:13px;color:var(--js-ink-muted);margin-top:6px} body[data-mode="mobile"] #action{left:16px;right:16px;bottom:20px;max-width:none} body[data-mode="mobile"] #action .title{font-size:22px} body[data-mode="mobile"] #action .row{flex-direction:column;align-items:stretch} body[data-mode="mobile"] #action .pill{text-align:center} body[data-mode="mobile"] #action a.quiet{display:block;text-align:center;background:rgba(247,245,241,.94); border:1px solid rgba(27,42,58,.32);border-radius:9px;padding:13px 18px;min-height:48px;color:var(--js-ink)} /* localized atmospheric focus — two soft offset pools, no readable rectangular edge (R2/T6) */ #action::before{content:'';position:absolute;inset:-70px -90px -56px -110px;z-index:-1; background: radial-gradient(ellipse 78% 70% at 38% 42%, rgba(247,245,241,.62), transparent 72%), radial-gradient(ellipse 62% 84% at 70% 68%, rgba(247,245,241,.5), transparent 70%)} #action .detail{font-size:14px;max-width:38ch} #action .prov{font-size:12px} /* ---------- Gate 3: opening + location (world-first, choices subordinate) ---------- */ #opening{position:absolute;z-index:28;left:0;right:0;top:0;pointer-events:none;text-align:center} .q-kicker{margin-top:11vh;letter-spacing:.26em;color:var(--js-ink);opacity:.78} .q-title{font-size:clamp(30px,4.2vw,54px);line-height:1.1;margin-top:14px;color:var(--js-ink)} .q-sub{font-size:16px;color:rgb(72,88,105);margin-top:10px} /* A1: ≥4.5:1 over the bright dawn plate */ #opt-arrest{pointer-events:auto;margin-top:26px;font-size:17px;padding:13px 22px;min-height:48px; background:rgba(247,245,241,.88);border:1.5px solid rgba(27,42,58,.4);border-radius:10px; color:var(--js-ink);cursor:pointer;box-shadow:0 2px 18px rgba(27,42,58,.10)} #opt-arrest:hover{background:rgba(247,245,241,.97)} #opt-arrest:focus-visible,#loc-go:focus-visible,#loc-input:focus-visible, #prov-btn:focus-visible,#prov-close:focus-visible{outline:3px solid var(--js-focus);outline-offset:2px} #opt-arrest.affirm{border-color:var(--js-accent);box-shadow:0 0 0 3px rgba(184,118,58,.28)} #loc-form{pointer-events:auto;margin-top:24px} #loc-input{font-size:18px;padding:12px 16px;min-height:48px;width:min(340px,72vw); background:rgba(247,245,241,.92);border:1.5px solid rgba(27,42,58,.45);border-radius:10px; color:var(--js-ink);text-align:center} #loc-input::placeholder{color:var(--js-ink-muted)} #loc-go{display:block;margin:14px auto 0;font-size:16px;padding:12px 20px;min-height:48px; background:rgba(247,245,241,.9);border:1.5px solid var(--js-accent);border-radius:10px; color:var(--js-ink);cursor:pointer;font-weight:600} .loc-hint{margin-top:12px;font-size:14px;color:rgb(72,88,105)} /* A1: ≥4.5:1 over the bright dawn plate */ body[data-mode="mobile"] #opening{top:auto;bottom:5vh} /* MOBILE-COMPOSITION: interactions in the lower reach zone */ body[data-mode="mobile"] .q-kicker{margin-top:0;font-size:11px} body[data-mode="mobile"] .q-title{font-size:34px} body[data-mode="mobile"] #opt-arrest,body[data-mode="mobile"] #loc-go{width:min(340px,84vw)} /* ---------- Gate 3: restrained provenance surface ---------- */ #prov-btn{position:absolute;right:16px;bottom:14px;z-index:46;font-size:13px;padding:10px 14px; min-height:48px;min-width:48px;background:rgba(247,245,241,.85);border:1px solid rgba(27,42,58,.28); border-radius:8px;color:var(--js-ink-muted);cursor:pointer;opacity:0;pointer-events:none;visibility:hidden} #prov-btn.on{opacity:1;pointer-events:auto;visibility:visible} #prov-panel{position:absolute;right:16px;bottom:74px;z-index:47;width:min(380px,92vw);max-height:62vh; overflow:auto;background:rgba(247,245,241,.96);border:1px solid rgba(27,42,58,.22); border-radius:10px;box-shadow:0 10px 40px rgba(27,42,58,.18);padding:16px 18px;text-align:left} .pp-title{font-size:19px} .pp-body{margin-top:8px;font-size:13px;line-height:1.55;color:var(--js-ink)} .pp-body .src{margin-top:8px} .pp-body .src b{font-weight:600} .pp-note{margin-top:10px;font-size:12px;line-height:1.5;color:var(--js-ink-muted)} #prov-close{margin-top:12px;font-size:14px;padding:10px 16px;min-height:48px; background:none;border:1px solid rgba(27,42,58,.35);border-radius:8px;color:var(--js-ink);cursor:pointer} body[data-mode="mobile"] #prov-panel{left:12px;right:12px;width:auto;bottom:84px} /* ---------- reduced-motion stepper ---------- */ #rm-controls{position:absolute;bottom:76px;right:14px;z-index:45;display:none;gap:8px} /* clears #prov-btn */ #rm-controls button{font-size:14px;padding:10px 16px;min-width:48px;min-height:48px; background:rgba(247,245,241,.94);border:1px solid rgba(27,42,58,.32);border-radius:8px;color:var(--js-ink)} #rm-controls button:focus-visible{outline:3px solid var(--js-focus);outline-offset:2px} body[data-mode="mobile"] #rm-controls{bottom:auto;top:118px;right:14px} /* clears the action sheet */ /* shown by beginRun() once the reduced-motion journey reaches the cinematic states */ /* replay affordance (post-run) */ #replay{position:absolute;bottom:14px;left:14px;z-index:45;opacity:0;pointer-events:none; font-size:13px;padding:9px 14px;background:rgba(247,245,241,.9);border:1px solid rgba(27,42,58,.25); border-radius:8px;color:var(--js-ink)} #replay:focus-visible{outline:3px solid var(--js-focus);outline-offset:2px} #replay.on{opacity:1;pointer-events:auto} body[data-mode="mobile"] #replay{left:auto;right:14px;top:64px;bottom:auto} /* clear of the action sheet */ body[data-mode="mobile"] .big-name{text-shadow:0 1px 2px rgba(27,42,58,.85),0 2px 10px rgba(27,42,58,.6),0 3px 22px rgba(27,42,58,.55)} /* P2-2 bounded revision: modest ink gain over haze; typography unchanged */ /* ---------- diagnostic state (T8; evidence only, ?diagnostic=1) ---------- */ #diag-note{position:absolute;top:14px;right:14px;z-index:50;display:none;max-width:430px; background:rgba(27,42,58,.92);color:#fff;font-size:12px;letter-spacing:.04em;line-height:1.6; padding:10px 14px;border-radius:6px} body[data-diagnostic="true"] #diag-note{display:block} /* ---------- no-JS canonical content ---------- */ #canonical{max-width:720px;margin:0 auto;padding:48px 24px;background:var(--js-paper);min-height:100%; overflow:auto} #canonical h1{font-size:30px;margin-bottom:8px} #canonical h2{font-size:20px;margin:22px 0 6px} #canonical p,#canonical li{font-size:16px;line-height:1.6} #canonical .prov{font-size:13px;color:var(--js-ink-muted)} body.js #canonical{display:none} noscript .note{display:block;font-size:14px;color:var(--js-ink-muted);margin-top:12px} /* aria-live visually-hidden announcer */ .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ========================================================================== PRODUCTION ADDITIONS — appended after the byte-frozen imported styles.css at bundle time (see src/navigator/bundle.mjs). The imported rules are the approved visual system and are not modified; everything below adapts the composition to living inside the production site layout (header/footer), to the no-JS canonical page, and to the input-free opening interaction. Later rules win at equal specificity; nothing here restyles an accepted scene element. ========================================================================== */ /* The page must scroll normally for the no-JS canonical content; the scene's overflow lock applies only once JS has actually booted the scene. */ body.navigator-page { overflow: visible; } html.boot body.navigator-page { overflow: hidden; } /* The scene covers the site chrome when (and only when) it is running. */ #viewport { z-index: 70; } html.boot .site-head, html.boot .site-foot { display: none; } /* The canonical no-JS content is ordinary site content (the imported rules styled it as a standalone app fallback; here it composes with site.css). */ #canonical { max-width: none; margin: 0; padding: 0; background: transparent; min-height: 0; overflow: visible; } /* D-INPUT: the opening's second beat — a one-press Wayne County confirmation plus the static honest fallback link. Same control language as #opt-arrest (≥48px targets, visible focus). */ #where { pointer-events: auto; margin-top: 24px; } #opt-wayne { display: block; margin: 0 auto; font-size: 17px; padding: 13px 22px; min-height: calc(48px * var(--uik, 1)); background: rgba(247,245,241,.88); border: 1.5px solid var(--js-accent); border-radius: 10px; color: var(--js-ink); cursor: pointer; font-weight: 600; box-shadow: 0 2px 18px rgba(27,42,58,.10); } #opt-wayne:hover { background: rgba(247,245,241,.97); } #opt-wayne:focus-visible, #opt-elsewhere:focus-visible { outline: 3px solid var(--js-focus); outline-offset: 2px; } #opt-elsewhere { display: inline-flex; align-items: center; margin-top: 16px; min-height: calc(48px * var(--uik, 1)); padding: 8px 14px; font-size: 15px; color: var(--js-focus); } body[data-mode="mobile"] #opt-wayne { width: min(340px, 84vw); } body[data-mode="mobile"] #opt-elsewhere { font-size: 16px; } /* Degraded boot (record/geometry failed validation or load): the scene never reveals; the canonical content is the whole page. The flag is inspectable. */ body[data-navigator="degraded"] #viewport { display: none !important; } /* ========================================================================== R-UI (Lane E) — A3 closure at every viewport. The scene letterbox-scales the fixed design space (390x844 / 1440x900); at sub-design viewports the scale s<1 would shrink interactive targets below the 48 CSS px floor (the lab's mobile-sm and tablet FAILs). fit() exposes --uik = max(1, 1/s); the rules below grow ONLY target metrics (min-height/min-width, gaps, and the stepper's clearance above the Sources button). Scene, labels, chips and typography keep the approved scale. At the design viewports --uik is 1 and every calc() resolves to the approved value byte-for-byte. ========================================================================== */ /* #viewport is a flex row (imported): a flex item's default shrink collapsed the 1440px design stage to the viewport width at every sub-design viewport, which dragged every right-anchored control (Sources, action block) ~370 design px left and shrank label containing blocks (root cause of the tablet matrix FAILs). Pin the stage to its approved design size; the letterbox scale handles the rest. overflow:clip keeps the centered layout box out of the document's scrollable overflow at sub-design widths. */ #viewport { overflow: hidden; } #stage { flex: none; } #opt-arrest, #loc-go, #prov-btn, #prov-close, #replay, #rm-controls button, #action .pill, #action a.quiet { min-height: calc(48px * var(--uik, 1)); } /* specificity tie with the imported body[data-mode="mobile"] #action a.quiet (1,2,2) — later in the bundle, so this floor wins on mobile */ body[data-mode] #action a.quiet { min-height: calc(48px * var(--uik, 1)); } #prov-btn, #prov-close, #rm-controls button { min-width: calc(48px * var(--uik, 1)); } /* mobile: keep the sheet's provenance / status text clear of the Sources button parked at the sheet's bottom-right corner (~62 design px wide) */ body[data-mode="mobile"] #action .prov, body[data-mode="mobile"] #action .status-line { padding-right: 96px; } /* vertically centered labels inside the compensated (taller) boxes */ #action .pill, #replay { display: inline-flex; align-items: center; } body[data-mode="mobile"] #action a.quiet { display: flex; align-items: center; justify-content: center; } /* control separation keeps >= 8 CSS px at any scale */ #rm-controls { gap: calc(8px * var(--uik, 1)); bottom: calc(76px + 56px * (var(--uik, 1) - 1)); } #action .row { gap: calc(14px * var(--uik, 1)); } /* ========================================================================== A5 hardening — the runtime consults matchMedia('(prefers-reduced-motion: reduce)') and halts all rAF motion; this block kills the remaining JS-set CSS transitions (opening fades), so the media query alone — no query param — yields a fully composed, motion-free journey. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #opening, .q-title, .q-sub { transition: none !important; } } /* ========================================================================== EVIDENCE (A4/A11) — the ?evidence=1 state-control rail. Non-public: built at runtime only when the undocumented param is present (never in shipped markup). Collapses via visibility (NOT display) after each selection: the floor harness's in-page DOM clicks keep working while evidence frames stay the pure approved composition; the handle re-opens the rail for human review. ========================================================================== */ #evidence-controls { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 200; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; box-sizing: border-box; max-width: 96vw; padding: 10px 12px; background: rgba(247,245,241,.97); border: 1px solid rgba(27,42,58,.3); border-radius: 10px; box-shadow: 0 8px 30px rgba(27,42,58,.25); } #evidence-controls.collapsed { visibility: hidden; } #evidence-controls button { min-width: 48px; min-height: 48px; padding: 12px 16px; font-size: 13px; letter-spacing: .06em; background: #ffffff; color: var(--js-ink); border: 1.5px solid rgba(27,42,58,.4); border-radius: 8px; cursor: pointer; } #evidence-controls button[aria-pressed="true"] { background: var(--js-accent); color: #fff; border-color: var(--js-accent); } #evidence-controls button:focus-visible, #evidence-handle:focus-visible { outline: 3px solid var(--js-focus); outline-offset: 2px; } #evidence-handle { position: fixed; top: 10px; right: 10px; z-index: 200; width: 48px; height: 48px; padding: 0; background: rgba(247,245,241,.95); border: 1px solid rgba(27,42,58,.35); border-radius: 8px; cursor: pointer; } #evidence-handle::before { content: ''; position: absolute; left: 12px; right: 12px; top: 13px; bottom: 13px; background: linear-gradient(var(--js-ink), var(--js-ink)) left 0 top 0 / 100% 3px no-repeat, linear-gradient(var(--js-ink), var(--js-ink)) left 0 top 50% / 100% 3px no-repeat, linear-gradient(var(--js-ink), var(--js-ink)) left 0 top 100% / 100% 3px no-repeat; } /* ========================================================================== P1-2/R4 — TABLET-PORTRAIT MODE (portrait-aspect viewports 641+ CSS px wide — no upper bound since R4 P1-A: the design space IS the live viewport at scale 1, so larger portraits stay readable). The runtime detects body[data-mode="tablet-portrait"] and renders the ACCEPTED MOBILE grammar (portrait plates, mobile beat map, bottom action sheet) over a design space that IS the live viewport — the stage is sized to the viewport in JS and fit() reports scale 1, so one design px below is one real CSS px (never the scaled desktop strip: at 768×1024 that strip rendered body copy at ~7–9 effective px inside a 480px-tall band). These rules are the tablet-specific text and control placement the mode directive requires. Type keeps fixed px at scale 1 (the R-UI philosophy: typography never scales); target metrics keep the calc(… * var(--uik,1)) compensation so a post-boot resize below the design size still holds the 48 CSS px floor. The mobile and desktop rules above are untouched and never match this mode. ========================================================================== */ /* opening + Wayne confirmation: the mobile grammar's lower reach zone, tablet type */ body[data-mode="tablet-portrait"] #opening { top: auto; bottom: 7vh; } body[data-mode="tablet-portrait"] .q-kicker { margin-top: 0; font-size: 13px; } body[data-mode="tablet-portrait"] .q-title { font-size: 44px; } body[data-mode="tablet-portrait"] .q-sub { font-size: 17px; max-width: 34em; margin-left: auto; margin-right: auto; } body[data-mode="tablet-portrait"] #opt-arrest, body[data-mode="tablet-portrait"] #opt-wayne { width: min(440px, 82vw); font-size: 18px; min-height: calc(56px * var(--uik, 1)); padding: 15px 26px; } body[data-mode="tablet-portrait"] #opt-elsewhere { font-size: 16px; min-height: calc(52px * var(--uik, 1)); } body[data-mode="tablet-portrait"] .loc-hint { font-size: 15px; max-width: 34em; margin-left: auto; margin-right: auto; } /* truth chip + callouts: comfortably readable at scale 1; callouts stay compact so the accepted below-the-ring / beside-the-branch placements clear the ring corridor */ body[data-mode="tablet-portrait"] .truth { font-size: 13px; padding: 8px 14px; max-width: 88%; } body[data-mode="tablet-portrait"] .lbl { max-width: 300px; } body[data-mode="tablet-portrait"] .lbl .name { font-size: 19px; } body[data-mode="tablet-portrait"] .lbl .sub { font-size: 14px; } body[data-mode="tablet-portrait"] .chip { font-size: 13px; } body[data-mode="tablet-portrait"] .big-name { text-shadow: 0 1px 2px rgba(27,42,58,.85), 0 2px 10px rgba(27,42,58,.6), 0 3px 22px rgba(27,42,58,.55); } body[data-mode="tablet-portrait"] #identity .serif { font-size: 28px; } body[data-mode="tablet-portrait"] #identity .prov { font-size: 14px; } /* final action: the mobile bottom-sheet grammar, tablet-composed — the doorway keeps the upper frame; the call stays the full-width primary, Michigan VINE secondary */ body[data-mode="tablet-portrait"] #action { left: 36px; right: 36px; bottom: 30px; max-width: 600px; } body[data-mode="tablet-portrait"] #action .title { font-size: 27px; } body[data-mode="tablet-portrait"] #action .detail { font-size: 15px; max-width: 52ch; margin-top: 12px; } body[data-mode="tablet-portrait"] #action .row { flex-direction: column; align-items: stretch; gap: calc(16px * var(--uik, 1)); margin-top: 24px; } body[data-mode="tablet-portrait"] #action .pill { display: flex; align-items: center; justify-content: center; background: var(--js-accent); color: #fff; font-size: 17px; text-align: center; min-height: calc(56px * var(--uik, 1)); padding: 14px 20px; } body[data-mode="tablet-portrait"] #action a.quiet { display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(247,245,241,.94); border: 1px solid rgba(27,42,58,.32); border-radius: 9px; padding: 13px 18px; min-height: calc(52px * var(--uik, 1)); color: var(--js-ink); font-size: 15px; } /* keep the sheet's provenance / status text clear of the Sources button at the sheet's bottom-right corner (same rule as the accepted mobile sheet) */ body[data-mode="tablet-portrait"] #action .prov, body[data-mode="tablet-portrait"] #action .status-line { font-size: 13.5px; padding-right: 104px; } body[data-mode="tablet-portrait"] #action .prov { margin-top: 18px; } /* chrome: replay + stepper ride top-right (clear of the bottom sheet), Sources stays bottom-right — the accepted portrait-mode placement at tablet metrics */ body[data-mode="tablet-portrait"] #replay { left: auto; right: 18px; top: 72px; bottom: auto; font-size: 14px; min-height: calc(52px * var(--uik, 1)); } body[data-mode="tablet-portrait"] #rm-controls { bottom: auto; top: 140px; right: 18px; gap: calc(10px * var(--uik, 1)); } body[data-mode="tablet-portrait"] #rm-controls button { font-size: 15px; min-width: calc(52px * var(--uik, 1)); min-height: calc(52px * var(--uik, 1)); } body[data-mode="tablet-portrait"] #prov-btn { right: 18px; bottom: 16px; font-size: 14px; min-width: calc(52px * var(--uik, 1)); min-height: calc(52px * var(--uik, 1)); } body[data-mode="tablet-portrait"] #prov-panel { left: auto; right: 24px; bottom: 88px; width: min(440px, 92vw); } body[data-mode="tablet-portrait"] .pp-title { font-size: 21px; } body[data-mode="tablet-portrait"] .pp-body { font-size: 14px; } body[data-mode="tablet-portrait"] .pp-note { font-size: 13px; } body[data-mode="tablet-portrait"] #prov-close { font-size: 15px; min-height: calc(52px * var(--uik, 1)); } /* ========================================================================== §6/P2-A — SMALL-MOBILE FULL-BLEED BACKDROP. At sub-design phone widths (320×568, 375×667, …) the protected 390×844 stage letterbox-scales and centers, which used to leave the outer canvas — #viewport's flat #cfc9bc fill — reading as dull pillarbox bands beside the dawn-sky opening. The runtime (mobile mode only) now inserts #backdrop as #stage's preceding sibling: the mode's OWN dawn-sky plate (the byte-frozen mobile-sky-plate asset, URL from the shipped manifest), object-fit:cover over the FULL viewport. Cover-fitting that plate through the letterbox scale is the same crop the opening composes inside the stage, so the band area continues the backdrop texture seamlessly. NEVER touched: the stage's protected aspect ratio, the source-grounded map/route/architecture/label geometry, and every interactive metric — the stage box and the fit() scale are unchanged. At the design viewport 390×844 the opaque stage covers the backdrop exactly, so the accepted composition is pixel-identical; tablet-portrait (s = 1, stage == viewport) and desktop keep their accepted canvases (no rule below matches them). ========================================================================== */ #backdrop { display: none; } body[data-mode="mobile"] #backdrop { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #backdrop-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; pointer-events: none; } /* ========================================================================== §6/P2-B — JAVASCRIPT BOOT COVER (no first-paint canonical flash). The page ships with #boot-cover as the first child of
, so the FIRST paint — before the deferred module can possibly run — is an intentional paper/dawn cover in the accepted palette: never the canonical page flashing in ahead of the scene, never a black frame, never a spinner. The canonical page stays complete underneath. Lifecycle (src/navigator/runtime/app.mjs): the runtime retires the cover (node removal + the nav-boot class) only at FULL readiness — mode and body[data-mode] set, fit() applied, the opening sky asset decoded, the first frame composed — and ALWAYS on degrade(), which exposes the canonical fallback. With scripting disabled the