/* ============================================================
   native-shell.css — Pages Hosted by the Flutter App (Shared)
   ─────────────────────────────────────────────────
   PURPOSE : Everything a page must do differently when it runs inside
             the Pupilla mobile app's WebView instead of a browser tab.
   SIGNAL  : The Flutter host adds `class="embedded"` to <html> at
             document start (before any page script) and publishes
             `--native-bar-height` = native tab bar + bottom safe area,
             in CSS px. That is the whole contract — the host injects no
             layout CSS of its own, so this file must be self-sufficient.
             (Do NOT key anything here on `html[data-shell-embedded]`:
             that flag means "index.html was framed by mistake" and hides
             the whole body — see css/shell/shell-layout.css.)
   RULES   : 1. The native app owns navigation → the site header, nav
                rows and sub-nav never paint. On index.html the header
                shrinks to a status-bar spacer so every sticky offset
                that reads --shell-header-h stays correct.
             2. The tab bar floats OVER the bottom of the WebView. Every
                fixed/sticky bottom element and the end of every page is
                lifted by --app-bottom-inset.
             3. Outside the app these rules are inert: nothing matches
                without `html.embedded`.
   USAGE   : Linked from every page right after mobile-viewport.css.
             Selectors start with `html.embedded`, which out-specifies
             the module rules they adjust without !important (except
             where a module itself uses it).
   ============================================================ */

:root {
  --app-bottom-inset: env(safe-area-inset-bottom, 0px);
}
html.embedded {
  /* max(), not +: the host's value already includes the safe area, and
     WebViews that are not edge-to-edge report env() as 0 anyway. */
  --app-bottom-inset: max(var(--native-bar-height, 0px), env(safe-area-inset-bottom, 0px));
  --app-top-inset: env(safe-area-inset-top, 0px);
}

/* ── 1. Navigation belongs to the native shell ─────────────────── */
/* Simulator pages carry their own legacy .site-header (already hidden under
   ?embed=1 by each module); it never paints in the app either.
   On index.html the header element stays (as an empty sticky spacer the height of the
   status-bar inset, usually 0) because js/shell/shell-nav.js measures it
   into --shell-header-h, and pinned stages/sidebars offset by that. */
html.embedded .shell-header {
  height: auto;
  min-height: 0;
  padding: var(--app-top-inset) 0 0;
  border: 0;
  box-shadow: none;
  background: var(--surface, #fff);
}
html.embedded .site-header:not(.shell-header),
html.embedded .shell-header > *,
html.embedded #shellNav,
html.embedded #shellSubnav,
html.embedded .shell-navtoggle {
  display: none !important;
}
/* The spacer is exactly the top inset tall, so say so up front: !important
   beats the inline value shell-nav.js publishes (which lags a frame, and
   is stale until its ResizeObserver runs). */
html.embedded:has(.shell-header) {
  --shell-header-h: var(--app-top-inset) !important;
  --shell-topbar-h: 0px;
}

/* Pages without the shell header (simulators the app opens directly with
   ?embed=1) keep their own toolbars clear of a status bar. */
html.embedded:not(:has(.shell-header)) body {
  padding-top: var(--app-top-inset);
}

/* ── 2. Page end clears the floating tab bar ───────────────────── */
html.embedded body {
  box-sizing: border-box;
  padding-bottom: var(--app-bottom-inset);
}
/* Full-height frame views on index.html (a module opened from Home). */
html.embedded .app-external-workspace {
  --app-workspace-height: calc(100dvh - var(--shell-header-h, 0px) - var(--app-bottom-inset));
  min-height: 0;
}

/* ── 3. Fixed / sticky bottom chrome ───────────────────────────── */
/* Each of these is pinned to the viewport bottom by its own module and
   would otherwise sit underneath the tab bar. */

/* Retinoscopy Quick Tour toast (css/retinoscopy/tour-overlay.css) */
html.embedded .tour-bar {
  bottom: var(--app-bottom-inset);
  padding-bottom: 10px;
}
/* Trial-lens rack bottom sheet (css/retinoscopy/trial-rack.css) */
html.embedded .tf-rack-drawer {
  bottom: calc(var(--rack-hidden-bottom, 0px) + var(--app-bottom-inset));
}
/* Ranked-exam dialogs (css/retinoscopy/ranked-exam-mode.css) */
html.embedded .rx-overlay {
  padding-bottom: var(--app-bottom-inset);
}
/* Refraction beam-style sheet (css/refraction-sim/components/_beam-toolbar.css) */
html.embedded .ref-style-sheet {
  bottom: var(--app-bottom-inset);
}
/* OCT phone bottom sheet / landscape drawer (css/oct/components/_sheet.css).
   js/oct/ui/sheet.js sizes the sheet from innerHeight; the cap keeps its
   "full" snap on screen once it is lifted. */
html.embedded .oct-sheet.is-sheet {
  bottom: var(--app-bottom-inset);
  max-height: calc(100dvh - var(--app-bottom-inset) - 48px);
}
html.embedded .oct-sheet.is-drawer { bottom: var(--app-bottom-inset); }
/* Case-quiz phone answer bar (css/case-quiz/quiz/responsive.css) */
html.embedded .qz-phonebar {
  bottom: var(--app-bottom-inset);
  padding-bottom: var(--qz-s3, 12px);
}
/* Account save bar + leaderboard "you" row */
html.embedded .acct-savebar { bottom: calc(16px + var(--app-bottom-inset)); }
html.embedded .lb-me { bottom: calc(14px + var(--app-bottom-inset)); }
/* Hand-tracking camera preview */
html.embedded #ht-cam-widget { bottom: calc(16px + var(--app-bottom-inset)); }
/* Voice-lesson notices, content-page CTA, library jump-to-top, tutorial */
html.embedded .vl-notice { bottom: calc(20px + var(--app-bottom-inset)); }
html.embedded .cp-cta { bottom: calc(12px + var(--app-bottom-inset)); }
html.embedded .rep-jump-top { bottom: calc(2rem + var(--app-bottom-inset)); }
html.embedded #tut-panel { bottom: calc(30px + var(--app-bottom-inset)); }
/* Floating "next step" buttons in the exam workspaces */
html.embedded :is(#ht-console.ht-workspace .ht-next, #kr-console.kr-workspace .ctc-next, #rapd-lab .rpl-next):not([hidden]) {
  bottom: calc(12px + var(--app-bottom-inset));
}