/* Shared home-screen containment for the CIC and Mainframe shells. */
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #05070b; }
/* iOS treats an overflowing document as the pull-to-refresh scroller even
 * when the visible child is fixed. Make the document a fixed, clipping frame;
 * named panels below are the only places allowed to scroll. */
html, body { block-size: 100%; inline-size: 100%; block-size: 100dvh; min-block-size: 0; max-block-size: 100dvh; margin: 0; overflow: hidden; overscroll-behavior: none; }
html { position: fixed; inset: 0; }
body { position: fixed; inset: 0; }
html { touch-action: manipulation; }
body { overscroll-behavior-y: none; background: var(--of-paper); }
button, [role="button"], input, select, textarea { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1rem); }
.drawer-content, .track-list, .help-popover, .welcome-dialog, .resume-dialog, .alpha-warning-dialog { overscroll-behavior: contain; }
@supports (padding: env(safe-area-inset-top)) {
  .shell-bar { padding: var(--shell-safe-top, env(safe-area-inset-top, 0px)) env(safe-area-inset-right) 0 env(safe-area-inset-left); min-height: var(--shell-frame-height, calc(44px + env(safe-area-inset-top, 0px))); }
  .drawer-left { padding-left: env(safe-area-inset-left); }
  .drawer-right, .right-drawer-tabs { padding-right: env(safe-area-inset-right); }
  .mainframe-request-drawer, .drawer { padding-bottom: env(safe-area-inset-bottom); }
}
/* Chrome is not content (PWA_FORMAT §6, lane pw97): the rails and their tabs take no
 * long-press callout, no selection and no grey tap flash; a pressed fill replaces the flash
 * (pwa-install.js adds the passive touchstart listener iOS needs to apply :active). The bar
 * carries the same rule in shell-bar-skin.css. Reading text, links in content and every
 * field stay selectable. Gestures and touch-action belong to docs/design/GESTURES.md. */
.right-drawer-tabs, .drawer-tab, .right-drawer-tabs button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.drawer-tab:active, .right-drawer-tabs button:active { background: var(--bar-control-bg-active, var(--accent-subtle)); }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Opaque drawers on phones (per DESIGN_SYSTEM Surfaces, lane pw96). On phones / narrow screens,
 * drawers and sheets are solid paper, not translucent overlays. */
@media (max-width: 50rem) {
  .drawer,
  .drawer > header {
    background: var(--of-paper, var(--bg));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* These are intentional inner scrollers. The root and chrome never scroll. */
#app-stage, .drawer-content, .right-drawer-tabs, .pwa-install-card { overscroll-behavior: contain; }
/* Page-to-page navigations inside the app (/ -> /mainframe/ -> /privacy/) crossfade with the same
 * root animation as the in-document swaps below, instead of flashing the next page in (Safari 18.2+
 * cross-document View Transitions; ignored elsewhere). Both documents load this file, which is the
 * opt-in the spec requires; reduced motion keeps the 120ms fade (PWA_FORMAT §5). Lane pw97. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) { @supports (view-transition-name: none) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--motion-base); animation-timing-function: var(--ease-out); } ::view-transition-old(root) { animation-name: pwa-fade-out; } ::view-transition-new(root) { animation-name: pwa-fade-in; } } }
@keyframes pwa-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes pwa-fade-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; } ::view-transition-old(root), ::view-transition-new(root) { animation-name: pwa-reduced-fade; } }
@keyframes pwa-reduced-fade { from { opacity: 0; } to { opacity: 1; } }
.view-enter { animation: pwa-view-enter var(--motion-base) var(--ease-out); }
@keyframes pwa-view-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pwa-install-hint, .pwa-arrival-overlay { position: fixed; z-index: 10000; color: var(--of-ink); font: 16px/1.35 system-ui, sans-serif; }
.pwa-install-hint { right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: calc(env(safe-area-inset-left, 0px) + 12px); max-width: 28rem; animation: pwa-install-enter var(--motion-fast, 140ms) var(--ease-out, ease-out); }
.pwa-arrival-overlay { inset: 0; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 12px); background: rgba(0, 0, 0, .35); animation: pwa-install-enter var(--motion-fast, 140ms) var(--ease-out, ease-out); }
.pwa-install-card { position: relative; width: min(100%, 28rem); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); overflow: auto; box-sizing: border-box; padding: 16px 56px 16px 16px; border: 1px solid color-mix(in srgb, var(--of-ink) 14%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--of-paper) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pwa-install-card strong { display: block; }
.pwa-install-card ol { padding-left: 1.25rem; }
.pwa-install-card small { display: block; margin-top: 12px; }
.pwa-install-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; }
.pwa-install-trigger { min-height: 44px; padding: 8px 12px; }
.pwa-install-preference { display: block; }
@supports not (backdrop-filter: blur(1px)) { .pwa-install-card { background: color-mix(in srgb, var(--of-paper) 94%, transparent); } }
@keyframes pwa-install-enter { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pwa-install-hint, .pwa-arrival-overlay { animation: pwa-install-opacity 120ms linear; } }
@keyframes pwa-install-opacity { from { opacity: 0; } to { opacity: 1; } }

/* Hidden is a state. Display rules must not reveal the mobile install row in
 * desktop, framed, or installed contexts. */
.pwa-install-preference[hidden] { display: none; }
.pwa-install-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; white-space: nowrap; color: inherit; font: inherit; }
.pwa-install-trigger svg { flex: 0 0 16px; }
.pwa-install-preference .pwa-install-trigger { width: 100%; box-sizing: border-box; }
.pwa-install-label { white-space: nowrap; }
.pwa-install-measure { position: absolute; visibility: hidden; pointer-events: none; white-space: nowrap; }
.pwa-install-glyph-only .pwa-install-label { display: none; }
.pwa-install-card strong { display: inline; }
.pwa-install-card > strong { display: block; }
.pwa-install-card { touch-action: pan-y pinch-zoom; }
.pwa-install-trigger:active, .pwa-install-close:active { background: var(--bar-control-bg-active, var(--accent-subtle)); }
.pwa-install-trigger:focus-visible, .pwa-install-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }