/* ============================================================
   shell-layout.css — App Shell Layout (index.html)
   ─────────────────────────────────────────
   PURPOSE : Page-level rules owned by the app shell (js/shell/):
             first-paint view selection, full-height frame views,
             and header controls that only belong to one view.
   ============================================================ */

/* First-paint view visibility is generated inline in shell-boot.html from
   routes.js, before external CSS or modules can load. */

/* ── Pre-paint navigation state ──
   The header's current group and sub-nav band are set by js/shell/shell-nav.js,
   which only runs after the shell's modules load. Mirror them from the boot
   route so the header doesn't jump (sub-nav band appearing, tab highlight
   moving) on a slow first visit. Groups mirror js/shell/routes.js. */
html:is([data-boot-group="learn"], [data-boot-group="practice"], [data-boot-group="test"], [data-boot-group="about"]) #shellSubnav {
  display: flex;
}

html[data-boot-group="practice"] .shell-subnav__list[data-nav-group="practice"],
html[data-boot-group="learn"] .shell-subnav__list[data-nav-group="learn"],
html[data-boot-group="test"] .shell-subnav__list[data-nav-group="test"],
html[data-boot-group="about"] .shell-subnav__list[data-nav-group="about"] {
  display: flex;
}

html[data-boot-group="practice"] .shell-nav__link[data-nav-group="practice"],
html[data-boot-group="learn"] .shell-nav__link[data-nav-group="learn"],
html[data-boot-group="test"] .shell-nav__link[data-nav-group="test"],
html[data-boot-group="about"] .shell-nav__link[data-nav-group="about"],
html[data-boot-group="home"] .shell-nav__link[data-nav-group="home"] {
  color: var(--accent-strong);
  background: var(--accent-tint);
}

html[data-boot-route="exam"] .shell-subnav__link[data-route="exam"],
html[data-boot-route="retinoscopy"] .shell-subnav__link[data-route="retinoscopy"],
html[data-boot-route="refraction"] .shell-subnav__link[data-route="refraction"] {
  color: var(--shell-band-text);
  font-weight: 600;
}

/* ── Exam boot gate: see css/shell/boot-skeleton.css ── */

/* ── Frame views fill the viewport below the header ──
   The header height changes with the sub-nav and screen width;
   --shell-header-h is published by js/shell/shell-nav.js. */
.app-external-workspace {
  --app-workspace-height: max(480px, calc(100dvh - var(--shell-header-h, 110px)));
}
/* OCT owns its internal scrolling. Its dialogs and player need the actual
   available height on short windows, rather than an offscreen 480px iframe. */
body[data-active-route="oct"] .app-external-workspace {
  --app-workspace-height: max(0px, calc(100dvh - var(--shell-header-h, 110px)));
  min-height: 0;
}

/* ── Nested-shell guard ──
   index.html is a top-level page and is never framed on purpose. If it turns
   up inside a module frame (a broken service worker answering that frame's
   navigation with the home document), nothing of it may paint: the parent
   shell removes the frame on load, and this keeps the page from flashing a
   second full app first. Flag set pre-paint in components/shell-boot.html;
   recovery in js/shell/frame-health.js. */
html[data-shell-embedded] body {
  display: none;
}

/* Message shown when a module frame could not be loaded at all. */
.app-module-frame-error {
  display: grid;
  place-content: center;
  height: 100%;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--text-soft, #535C57);
  font-size: 0.95rem;
}