/* good. BETA shell styles. Each screen's own look comes from the design canvas (screens.js). */
html, body { margin: 0; height: 100%; }
/* iOS 26 home screen bug (WebKit 301108): with the translucent status bar, the app is laid out
   one status bar short (793 of 852pt) for as long as the page is no taller than that. Making the
   page screen-tall in home screen mode makes iOS use the full height. lvh caps it so it can't scroll. */
@media (display-mode: standalone) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))); }
}
body {
  background: #F6EDE1;
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
* { -webkit-tap-highlight-color: transparent; }

/* every screen fills exactly the visible area (the keyboard shrinks it, see fitScreen in app.js) */
.screen { position: fixed; top: var(--app-top, 0px); left: 0; right: 0; height: var(--app-h, 100dvh); overflow: hidden; }
.screen > * { box-sizing: border-box; }
html.kb nav[aria-label="Main"] { display: none !important; }

.boot { display: flex; align-items: center; justify-content: center; background: #F6EDE1; }
.boot .spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(180, 83, 47, .25); border-top-color: #B4532F; animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }

.demo-flag { position: fixed; top: calc(env(safe-area-inset-top) + 2px); left: 50%; transform: translateX(-50%); background: #22140F; color: #F6EDE1; font: 700 11px/1 'DM Sans', sans-serif; padding: 4px 10px; border-radius: 10px; z-index: 50; letter-spacing: .04em; pointer-events: none; }
#dbg { position: fixed; top: calc(env(safe-area-inset-top) + 44px); left: 8px; right: 8px; z-index: 99; background: rgba(0,0,0,.78); color: #fff; font: 11px/1.4 ui-monospace, Menlo, monospace; padding: 6px 8px; border-radius: 8px; pointer-events: none; }