/* A single narrow column: full-bleed on mobile, centered on desktop. No
   phone-mockup framing (border/shadow) — real phones cover that job. A
   viewport-height flex column so the app bar can stay fixed while an inner
   region scrolls (crate/browse), rather than the whole body scrolling. */
.app {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The signed-out page scrolls on its own within the shell. */
.app > .signin {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* The authed shell: app bar (fixed) over the routed page (fills the rest). */
.shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.shell > *:not(.app-bar) {
  flex: 1;
  min-height: 0;
}

/* A list screen (crate/browse): a fixed hero + toolbar band over a single
   scrolling content region. */
.list-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.list-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Clear the fixed FAB so the last items / LOAD MORE aren't hidden by it. */
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* A sub-page (add/settings/record/scan/inbox/browse) scrolls as a whole. */
.page-scroll {
  overflow-y: auto;
}