/* ── App Shell Runtime ──
 *
 * Layer hierarchy (bottom → top):
 *   #app
 *     #page-root     z: base     scrollable content
 *     #nav-root      z: base     bottom nav + mini banner
 *   #overlay-root    z: popup    popups, ads, carousels
 *   #modal-root      z: signin   signin, alerts
 *
 * Rules:
 *   - All modules mount() into one of these roots
 *   - No module may appendChild(document.body) directly
 *   - Pages go in #page-root as .rt-page
 *   - Overlays go in #overlay-root
 *   - Modals go in #modal-root
 */

#app{
  width:100%;max-width:100%;margin:0 auto;
  height:var(--app-height);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  background:var(--c-bg);
}

/* ── Page Root ── */
#page-root{
  flex:1;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:none;
  position:relative;z-index:var(--z-base);
}
#page-root::-webkit-scrollbar{display:none;}

/* Page container */
.rt-page{display:none;min-height:100%;}
.rt-page.active{display:block;}

/* ── Nav Root ── */
#nav-root{
  flex-shrink:0;box-sizing:content-box;
  padding-bottom:var(--safe-bottom);
  background:rgba(18,19,26,0.96);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  display:flex;flex-direction:column;
  z-index:var(--z-base);
}

/* ── Overlay Root ── */
#overlay-root{
  position:fixed;inset:0;
  z-index:var(--z-popup);
  pointer-events:none;
  height:var(--app-height);
}
#overlay-root > *{pointer-events:auto;}

/* ── Modal Root ── */
#modal-root{
  position:fixed;inset:0;
  z-index:var(--z-signin);
  pointer-events:none;
  height:var(--app-height);
}
#modal-root > *{pointer-events:auto;}