/* =====================================================================
   30 · SHELL  —  the app frame, the top bar and the screen transitions
   ===================================================================== */

.app { position: fixed; inset: 0; overflow: hidden; background: var(--black); }

/* Top bar: name left, navigation right. Solid black so scrolling content never shows through. Transparent on the cover, hidden in the viewer. */
.top { position: absolute; inset: 0 0 auto 0; z-index: 30; height: var(--top); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); pointer-events: none; color: #fff; background: #000; }
.top > * { pointer-events: auto; }
.top__name { font-family: var(--display); font-weight: 700; font-size: var(--brand-fs); text-transform: uppercase; text-align: left; line-height: 1.1; letter-spacing: -0.01em; white-space: var(--brand-ws, nowrap); max-width: var(--brand-max, none); }
.top__name small { display: var(--brand-sub); font-family: var(--text); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; color: #cfcfcf; }
.top__nav { display: flex; gap: 8px; }
.top .pill { border-color: #fff; color: #fff; }
.top .pill.is-current { background: #fff; color: #000; }
@media (hover: hover) and (pointer: fine) { .top .pill:hover { background: #fff; color: #000; } }
.app[data-screen="cover"] .top__nav, .app[data-screen="cover"] .top__name { visibility: hidden; }
.app[data-screen="cover"] .top { background: transparent; }
.app[data-screen="viewer"] .top { display: none; }

/* Screens stack on top of each other and fade */
.screen { position: absolute; inset: 0; background: var(--black); overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(6%); transition: opacity var(--t-sheet) var(--ease-out), transform var(--t-sheet) var(--ease-out), visibility 0s linear var(--t-sheet); }
.screen.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; z-index: 2; }
.screen.is-leaving { visibility: visible; opacity: 0; transform: translateY(-3%); z-index: 1; }
.screen__scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #444 transparent; }

/* Static fallback (reduced motion or no physics): navigation stays in the top bar */
.app.is-static .top__nav, .app.is-static .top__name { visibility: visible; }
.app.is-static #pillOrigin { visibility: visible !important; }
.app.is-static .cover__hint { display: none; }
.app.is-static .world { pointer-events: none; }
.app.is-static #pillOrigin .pill { pointer-events: auto; }