/* Additions to the design stylesheet for the real pages: one page for login and shell, the service frames. */
button.menu-item { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
[hidden] { display: none !important; }

.tv-step { display: flex; flex-direction: column; gap: var(--s-4); }

/* Login and shell are one page, so the orb is one element that travels; no cross-page transitions. */
@view-transition { navigation: none; }
.orb, .dock, .dock a[aria-current="page"], button.avatar { view-transition-name: none; }

.orb-slot { display: block; flex-shrink: 0; width: 32px; height: 32px; }
.orb--logo { transition: none; }
.orb--flying { position: fixed; z-index: 20; margin: 0; transform-origin: 0 0; transition: none; pointer-events: none; }

/* the shell fills the screen; the service runs to the bottom edge, the floating bar lies over it */
body.app { height: 100dvh; overflow: hidden; }
.shell { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: shell-in var(--d-text-in) var(--ease-out) backwards; }
@keyframes shell-in { from { opacity: 0; } }
.service { position: relative; flex: 1; min-height: 0; }
.service iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--c-ground); opacity: 0; visibility: hidden; transition: opacity var(--d-sheet) var(--ease-std), visibility 0s linear var(--d-sheet); }
.service iframe[data-active][data-ready] { opacity: 1; visibility: visible; transition: opacity var(--d-sheet) var(--ease-std), visibility 0s; }
.service-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6); padding: var(--s-4); }
.service-status .status-text { animation: rise var(--d-text-in) var(--ease-out) backwards; }

/* until the session check answers, show neither view (no flash of the login form on a reload) */
body.boot [data-view="login"] { visibility: hidden; }