/*
  Layout — App-level containers
  ──────────────────────────────
  Structural shells only. Components slot inside.
*/

/* ── App header ─────────────────────────────────── */
.app-header {
  background: transparent;
  height: 0;
  flex-shrink: 0;
}

/* ── Scrollable main content ─────────────────────── */
.app-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Reserve space so content doesn't hide under the fixed nav */
  padding-top: calc(var(--top-nav-height) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}
.app-main::-webkit-scrollbar { display: none; }

/* ── Page switching ─────────────────────────────── */
.page { display: none; }
.page.is-active { display: block; }

/* ── Bottom navigation shell ─────────────────────── */
.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;

  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-top);
}