/* Installed, touch-screen D only. Do not transform the body or freeze dialogs.
   A fixed bottom is measured against the LIVE viewport, so compensate its delta
   while measuring percentage anchors against the SAME retained video height. */
/* A retained-height html AND auto-scrolling body created an extra outer scroll
   range when the OS viewport shrank. Root never scrolls; home BODY is the one
   scrollport. No transform/contain changes fixed-position containing blocks. */
html[data-d-viewport-shell="true"] {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
html[data-d-viewport-shell="true"] body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: var(--d-viewport-height, 100%) !important;
  overscroll-behavior: none;
}
html[data-d-viewport-shell="true"] body:not(.lesson-intro-body) {
  overflow-y: auto; /* Inline modal overflow:hidden MUST still win. */
  overflow-x: hidden;
}
/* Lesson body keeps its existing overflow:hidden; its intro has its own scroller. */
html[data-d-stable-viewport="true"] .lesson-container {
  height: var(--d-viewport-height) !important;
}
html[data-d-stable-viewport="true"] #player-container,
html[data-d-stable-viewport="true"] .video-window-test {
  top: 0;
  bottom: auto;
  height: var(--d-viewport-height) !important;
}
html[data-d-stable-viewport="true"] main {
  min-height: calc(var(--d-viewport-height) - 160px);
}
html[data-d-stable-viewport="true"] .bottom-navigation {
  bottom: calc(0px - var(--d-viewport-delta));
}
html[data-d-stable-viewport="true"] #version-badge {
  bottom: calc(70px - var(--d-viewport-delta)) !important;
}
html[data-d-stable-viewport="true"] #vr-text-overlay {
  bottom: calc(var(--d-viewport-height) * .20 - var(--d-viewport-delta));
}
html[data-d-stable-viewport="true"] #vr-mic-overlay,
html[data-d-stable-viewport="true"] #lesson-sentence-navigation {
  bottom: calc(var(--d-viewport-height) * .08 - var(--d-viewport-delta));
}
html[data-d-stable-viewport="true"] #video-end-overlay {
  bottom: calc(var(--d-viewport-height) * .10 - var(--d-viewport-delta));
  max-height: calc(var(--d-viewport-height) * .75);
}
@media (max-width: 768px) {
  html[data-d-stable-viewport="true"] #vr-text-overlay {
    bottom: calc(var(--d-viewport-height) * .18 - var(--d-viewport-delta));
  }
  html[data-d-stable-viewport="true"] #vr-mic-overlay,
  html[data-d-stable-viewport="true"] #lesson-sentence-navigation {
    bottom: calc(var(--d-viewport-height) * .07 - var(--d-viewport-delta));
  }
}
@media (max-width: 480px) {
  html[data-d-stable-viewport="true"] #vr-text-overlay {
    bottom: calc(var(--d-viewport-height) * .15 - var(--d-viewport-delta));
  }
  html[data-d-stable-viewport="true"] #vr-mic-overlay,
  html[data-d-stable-viewport="true"] #lesson-sentence-navigation {
    bottom: calc(var(--d-viewport-height) * .05 - var(--d-viewport-delta));
  }
}
/* Height-based typography must use the retained height too, not 5/6dvh. Use
   stable breakpoints so revealing a bar cannot switch the controls' size. */
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] {
  --lesson-english-size: clamp(18px, calc(var(--d-viewport-height) * .06), 24px);
  --lesson-translation-size: clamp(16px, calc(var(--d-viewport-height) * .05), 20px);
}
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] #vr-mic {
  width: 40px;
  height: 40px;
}
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] #vr-mic svg {
  width: 100%;
  height: 100%;
}
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] #vr-mic-overlay {
  bottom: calc(var(--d-viewport-height) * .05 - var(--d-viewport-delta));
  padding: 6px;
}
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] #lesson-sentence-navigation {
  bottom: calc(var(--d-viewport-height) * .05 - var(--d-viewport-delta));
  height: 72px;
}
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] #vr-english { margin-bottom: 6px; }
html[data-d-stable-viewport="true"][data-d-short-landscape="true"] .lesson-intro-body .subtitle-option {
  font-size: calc(14px * var(--app-text-scale));
}
html[data-d-stable-viewport="true"][data-d-compact-landscape="true"] #video-end-overlay {
  bottom: calc(max(8px, var(--d-safe-area-bottom, env(safe-area-inset-bottom, 0px))) - var(--d-viewport-delta));
  max-height: calc(var(--d-viewport-height) - 32px - var(--d-safe-area-top, env(safe-area-inset-top, 0px)) - var(--d-safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  gap: 8px;
  padding: 8px 12px;
}
html[data-d-stable-viewport="true"][data-d-compact-landscape="true"] #completion-save-status {
  font-size: calc(14px * var(--app-text-scale, 1));
}
html[data-d-stable-viewport="true"][data-d-compact-landscape="true"] #video-end-overlay button { padding: 9px 18px; }