/* Full-screen webview page. The native nav bar sits above the page. */
html, body, #root { height: 100%; }
#root > .app { height: 100%; }
.state-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-6); text-align: center; }
.state-screen h2 { font: var(--t-headline); margin: var(--sp-3) 0 0; }
.state-screen p { font: var(--t-footnote); color: var(--c-text-secondary); margin: 0 0 var(--sp-4); }
.state-screen.unsupported { gap: var(--sp-4); padding-bottom: 0; }
.unsupported__art { display: block; width: 120px; height: 120px; }
.unsupported__text { display: grid; gap: var(--sp-2); max-width: 320px; }
.state-screen .unsupported__text h2 { margin: 0; font: 700 22px/28px var(--font); letter-spacing: var(--ls-tight); }
.state-screen .unsupported__text p { margin: 0; font: var(--t-body); }
.unsupported__pill { height: 28px; padding: 0 var(--sp-3); border-radius: 14px; background: var(--c-fill-segment); font: 400 13px/28px var(--font); color: var(--c-text-secondary); }
.state-screen .unsupported__alerts { margin: var(--sp-2) 0 0; max-width: 300px; font: var(--t-footnote); }
.app__footer--plain { background: none; box-shadow: none; }
/* loading the user's data: the same spinner as the page loader */
.boot { flex: 1; display: grid; place-items: center; }
.boot::after { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c-fill-secondary); border-top-color: var(--c-text-secondary); animation: page-loader-spin .9s linear infinite; }
body > .toast { position: fixed; }

/* until the app passes its token only a neutral loader on the page background is shown */
.page-loader { position: fixed; inset: 0; display: grid; place-items: center; background: var(--c-bg); }
.page-loader::after { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c-fill-secondary); border-top-color: var(--c-text-secondary); animation: page-loader-spin .9s linear infinite; }
@keyframes page-loader-spin { to { transform: rotate(360deg); } }