/* 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 { 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-right) 0 env(safe-area-inset-left); min-height: var(--shell-frame-height); }
  .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); }
}
/* These are intentional inner scrollers. The root and chrome never scroll. */
#app-stage, .drawer-content, .right-drawer-tabs, .pwa-install-card { overscroll-behavior: contain; }
@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; } }