/* ============================================================
   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.
   ============================================================ */

/* ── Route bootstrap ──
   Until js/shell/router.js runs, show only the view the URL asks for.
   html[data-boot-route] is set by an inline script in components/head.html. */
html[data-boot-route]:not([data-boot-route="home"]) #tabContentHome,
html[data-boot-route]:not([data-boot-route="exam"]) #tabContentExam {
  display: none !important;
}

/* ── 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-route="exam"], [data-boot-route="retinoscopy"], [data-boot-route="refraction"],
        [data-boot-route="lessons"], [data-boot-route="guide"], [data-boot-route="anatomy"],
        [data-boot-route="pathways"]) #shellSubnav {
  display: flex;
}

html:is([data-boot-route="exam"], [data-boot-route="retinoscopy"], [data-boot-route="refraction"]) .shell-subnav__list[data-nav-group="practice"],
html:is([data-boot-route="lessons"], [data-boot-route="guide"], [data-boot-route="anatomy"], [data-boot-route="pathways"]) .shell-subnav__list[data-nav-group="learn"] {
  display: flex;
}

html:is([data-boot-route="exam"], [data-boot-route="retinoscopy"], [data-boot-route="refraction"]) .shell-nav__link[data-nav-group="practice"],
html:is([data-boot-route="lessons"], [data-boot-route="guide"], [data-boot-route="anatomy"], [data-boot-route="pathways"]) .shell-nav__link[data-nav-group="learn"],
html[data-boot-route="quiz"] .shell-nav__link[data-nav-group="test"],
html[data-boot-route="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)));
}