@layer layout {
/* ── App shell ─────────────────────────────────────────── */
.app-shell {
  display: flex;
  width: 100vw;
  height: 100vh;
  /* iOS Safari reports 100vh as the *large* viewport (ignoring the dynamic
     bottom toolbar), which pushes the fixed bottom nav, and the row of
     "+" add buttons just above it, below the visible area. dvh tracks the
     currently-visible height so the nav and content stay on-screen. */
  height: 100dvh;
  overflow: hidden;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  position: relative;
}
}