/* ══════════════════════════════════════════════════════════════════════════════
   [CSS-F] PAGE SYSTEM
   Shared application routing/layout shell.
   This file owns generic .page visibility and mobile-width behavior so
   standalone screens do not depend on legacy Prayer/Azkar presentation CSS.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Hidden by default. Navigation activates exactly one application page. */
.page {
  display: none !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: 0 12px;
  gap: 12px;
  animation: fadeIn .25s ease;
}

/* Historical application contract: active pages are visible as blocks unless
   a screen explicitly requires a flex host. Keeping this contract here avoids
   leaking routing rules from screen-specific stylesheets. */
.page.active {
  display: block !important;
}

/* HOME RETURN PAINT
   Home is already fully present in index.html. Do not replay the shared fade-in
   animation when GT('home') re-activates it, because the opacity-0 first frame
   exposes the application background as a brief dark/purple flash. This changes
   presentation only; navigation, DOM, calculations and other pages are untouched. */
#page-home.active {
  animation: none !important;
}

.page.active#page-azkar {
  display: flex !important;
}
.page.active#page-quran {
  display: flex !important;
}
.page.active#page-serenity {
  display: block !important;
}

/* COMPASS PRESENTATION READINESS GATE
   pages/compass.html contains the canonical legacy DOM that the modern digital
   and astronomical presentations reuse. Never show that raw intermediate DOM.
   The host already marks data-compass-mounted="true" after preserving/moving
   #cvs and #dev-slider, and the dashboard already adds exactly one ready mode
   class. This gate only controls paint visibility; it does not alter DOM,
   events, canvas identity, sensor state, navigation, calculations or engines. */
#page-compass.active:not([data-compass-mounted="true"]),
#page-compass.active[data-compass-mounted="true"]:not(.qa-digital-dashboard-active):not(.qa-astro-dashboard-active) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: #020811 !important;
}

#page-compass.active[data-compass-mounted="true"].qa-digital-dashboard-active,
#page-compass.active[data-compass-mounted="true"].qa-astro-dashboard-active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* HOME VIEWPORT CONTRACT
   The approved Home presentation is a full-bleed mobile screen. The generic
   420px page cap is intentionally bypassed only for Home; other internal pages
   keep their existing sizing contract. This also prevents the parent shell
   background from becoming visible as side gutters or as a strip below Home. */
body.tab-home {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: stretch;
  background: #01040b !important;
  overflow-x: hidden;
}

body.tab-home #page-home {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-self: stretch;
  background: #01040b !important;
  overflow-x: hidden !important;
}

body.tab-home #page-home > .qa-home {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #01040b;
}

/* Ensure no page-shell color can leak beneath the last Home row. */
html:has(body.tab-home),
body.tab-home,
body.tab-home #page-home,
body.tab-home #page-home > .qa-home {
  background-color: #01040b !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}