/* Base + layout — full-viewport mobile app view */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lo); }

::-webkit-scrollbar { width: 0; height: 0; }
[class*="scroll"] { scrollbar-width: none; }

/* App fills the full viewport — no phone frame, no notch */
.app {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}

/* Safe-area aware insets */
:root {
  --top-inset: env(safe-area-inset-top, 0px);
  --bottom-inset: env(safe-area-inset-bottom, 0px);
}

/* Screens root */
.screens-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}
.boot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--accent);
}
.boot-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.screen {
  position: absolute;
  inset: 0;
  background: var(--surface);
  display: none;
  flex-direction: column;
  padding-top: var(--top-inset);
}
.screen.active { display: flex; }

/* Transitions */
@keyframes slideInR {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes slideInL {
  from { transform: translateX(-24%); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.screen.enter-r { animation: slideInR 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.screen.enter-l { animation: slideInL 0.26s cubic-bezier(0.32, 0.72, 0, 1); }
.screen.enter-fade { animation: fadeIn 0.16s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .screen.enter-r, .screen.enter-l, .screen.enter-fade { animation: none; }
}

/* Utilities */
.hstack { display: flex; align-items: center; gap: 8px; }
.vstack { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-num { font-variant-numeric: tabular-nums; }
.text-sub { color: var(--text-sub); }
.text-caption { color: var(--text-caption); }
.text-accent { color: var(--accent); }
.center { display: grid; place-items: center; }