/* ─────────────────────────────────────────────────────────────────────────────
   Stage layout — loads after every eye-3d stylesheet.

   1. One-row mode bar: every view and study (01–09) in a single strip.
   2. Fit-to-screen workspace (desktop): the stage is exactly the visible height
      and side panels scroll inside it, so the eye stays fully on screen while
      any control changes it.
   3. Fixed chrome zones on the stage, so overlays stack instead of colliding:
        top-start   status → motion caption → interior navigation
        top-end     detail · rotate · snapshot · full screen → orientation
        end-middle  zoom in · zoom out · fit
        bottom      camera presets (hint above it fades after first use)
   ───────────────────────────────────────────────────────────────────────────── */

:root { --stage-chrome: 172px; }          /* sticky header + mode bar + gaps */
html.app-embedded { --stage-chrome: 104px; } /* mode bar + gaps only */

/* 1 ── Mode bar ─────────────────────────────────────────────────────────── */
.study-navigation { display: flex; align-items: center; gap: 14px; margin: 0 auto 12px; padding: 7px; padding-inline-start: 16px; border-radius: 14px; box-shadow: var(--shadow-sm); }
.study-navigation-heading { flex: 0 0 auto; display: block; margin: 0; }
.study-navigation-heading > span { display: none; }
.study-mode-list { flex: 1 1 auto; min-width: 0; display: flex; gap: 3px; padding: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.study-mode-list::-webkit-scrollbar { display: none; }
.study-mode-list button { position: relative; flex: 1 0 auto; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px; border-color: transparent; background: transparent; font-size: .76rem; white-space: nowrap; scroll-snap-align: start; transition: color .15s ease-out, background-color .15s ease-out, transform .12s ease-out; }
.study-mode-list button:hover:not([aria-pressed="true"]) { border-color: transparent; background: var(--sunken); }
.study-mode-list button:active { transform: scale(.97); }
/* Studies (07–09) are separate presentations: a hairline splits them from views. */
.study-mode-list #corneaStudyOpen { margin-inline-start: 9px; }
.study-mode-list #corneaStudyOpen::before { content: ""; position: absolute; inset-inline-start: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); }
@media (max-width: 1440px) { .study-navigation-heading { display: none; } .study-navigation { padding-inline-start: 7px; } }

/* 2 ── Fit-to-screen workspace (desktop) ──────────────────────────────────── */
@media (min-width: 981px) {
  .eye3d-workspace:not(.is-cornea-study):not(.is-orbit-study) {
    height: clamp(540px, calc(100dvh - var(--stage-chrome)), 980px);
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr);
  }
  .eye3d-workspace > .viewport-card { min-height: 0; }
  .eye3d-workspace > .lab-panel { overflow-y: auto; padding-block: 18px; scrollbar-width: thin; scrollbar-color: rgba(31, 75, 76, .28) transparent; }
  .structures-panel { max-height: none; }
  .structures-panel .structure-groups { flex: 1 1 160px; min-height: 160px; max-height: none; }
  /* Motion panel fits a laptop-height stage without its own scrollbar. */
  .motion-panel .panel-heading { margin-bottom: 12px; }
  .motion-panel .control-section { padding: 13px 0; }
  .motion-panel .control-title { margin-bottom: 9px; }
  .gaze-grid button { min-height: 56px; }
  .segmented-controls button { min-height: 62px; }
  .wide-control { min-height: 48px; }
  .dual-controls button { min-height: 42px; }
  .timeline-section { padding-top: 13px; }
}
@media (min-width: 1100px) {
  .eye3d-workspace.is-cornea-study, .eye3d-workspace.is-orbit-study {
    height: clamp(560px, calc(100dvh - var(--stage-chrome)), 980px);
    grid-template-rows: minmax(0, 1fr);
  }
  .cornea-information { max-height: none; }
}

/* Press feedback on every stage and panel control. */
.gaze-grid button:active, .segmented-controls button:active, .dual-controls button:active,
.wide-control:active, .view-button:active, .layer-chip:active, .neutral-button:active { transform: scale(.97); }

/* 3 ── Stage chrome zones ───────────────────────────────────────────────── */
.viewport-topbar { inset: 16px 16px auto; align-items: flex-start; }
.render-status span { text-transform: uppercase; }
html[dir="rtl"] .render-status span, html[dir="rtl"] .render-status small { font-family: var(--font-ar); letter-spacing: 0; }
.render-status small:empty { display: none; }
.viewport-actions { align-items: center; }
.viewport-actions .atlas-quality { position: static; display: flex; align-items: center; gap: 2px; height: 35px; padding-inline: 10px 4px; border: 1px solid var(--glass-line); border-radius: 10px; color: var(--muted); background: var(--glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px) saturate(1.3); }
.viewport-actions .atlas-quality select { margin: 0; padding: 4px 2px; border: 0; background: transparent; cursor: pointer; }
.orientation-widget { top: 62px; inset-inline-end: 16px; }

.stage-start { position: absolute; z-index: 5; top: 62px; inset-inline-start: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(340px, calc(100% - 110px)); pointer-events: none; }
.stage-start .interior-navigation { position: static; max-width: 100%; }
.stage-caption { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 8px 12px 8px 10px; border: 1px solid var(--glass-line); border-inline-start: 3px solid var(--amber); border-radius: 10px; background: var(--glass); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px) saturate(1.3); animation: stage-caption-in .2s ease-out; }
.stage-caption small { grid-row: 1 / 3; color: var(--amber-ink); font: 500 .8rem/1 var(--font-mono); }
.stage-caption strong { color: var(--ink); font-size: .76rem; line-height: 1.25; }
.stage-caption span { color: var(--muted); font-size: .64rem; line-height: 1.3; }
@keyframes stage-caption-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.is-tissue-study .stage-caption, .is-cornea-study .stage-caption, .is-orbit-study .stage-caption, .is-biometry .stage-caption { display: none; }
.is-biometry .interior-navigation { display: none !important; }
/* The dimension label is the subject in Biometry; structure tags would cover it. */
.is-biometry .atlas-labels { display: none; }

.stage-zoom { position: absolute; z-index: 4; top: 50%; inset-inline-end: 16px; display: grid; gap: 2px; padding: 4px; transform: translateY(-50%); border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass); box-shadow: 0 1px 2px rgba(20, 24, 26, .05), 0 10px 26px -8px rgba(20, 24, 26, .18); backdrop-filter: blur(15px) saturate(1.3); }
.stage-zoom .icon-button { position: relative; width: 34px; height: 34px; border-color: transparent; border-radius: 8px; background: transparent; box-shadow: none; transition: color .15s ease-out, background-color .15s ease-out, transform .12s ease-out; }
.stage-zoom .icon-button:hover { color: var(--teal); border-color: transparent; background: var(--teal-soft); }
.stage-zoom .icon-button:active { transform: scale(.94); }
.stage-zoom .icon-button:disabled { opacity: .35; cursor: default; background: transparent; }
.stage-zoom [data-stage-fit] { margin-top: 5px; }
.stage-zoom [data-stage-fit]::before { content: ""; position: absolute; top: -4px; inset-inline: 7px; height: 1px; background: var(--line-strong); }

.view-presets { bottom: 16px; }
.gesture-hint { bottom: 72px; transition: opacity .4s ease-out, transform .4s ease-out; }
.gesture-hint.is-dismissed { opacity: 0; transform: translateY(4px); }
.is-tissue-study .gesture-hint, .is-biometry .gesture-hint { display: none; }

@media (pointer: coarse) {
  .stage-zoom .icon-button { width: 44px; height: 44px; }
}
@media (max-width: 640px), (max-width: 980px) and (max-height: 500px) and (pointer: coarse) {
  .study-navigation { padding: 6px; margin-bottom: 10px; }
  .study-mode-list button { flex: 0 0 auto; min-height: 44px; padding-inline: 13px; }
  .viewport-topbar { inset: 12px 12px auto; }
  .viewport-actions { gap: 5px; }
  .viewport-actions .atlas-quality > span { display: none; }
  .viewport-actions .atlas-quality { padding-inline: 6px 2px; }
  .stage-start { top: 56px; inset-inline-start: 12px; max-width: calc(100% - 90px); }
  .stage-zoom { inset-inline-end: 10px; }
}
/* Phones and tablets stack the panels under the stage. The stage stays pinned
   at the top while they scroll beneath it, so every change remains visible. */
@media (max-width: 980px) and (min-height: 560px) {
  .eye3d-workspace > #eye3dViewport { position: sticky; top: 0; z-index: 8; }
  .eye3d-workspace:not(.is-cornea-study):not(.is-orbit-study) > #eye3dViewport { height: min(56vh, 600px); min-height: 360px; }
}
@media (max-width: 640px) and (min-height: 560px) {
  .eye3d-workspace > #eye3dViewport,
  .eye3d-workspace.is-orbit-study > #eye3dViewport,
  .eye3d-workspace.is-cornea-study > #eye3dViewport { height: 50dvh; min-height: 300px; max-height: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-caption { animation: none; }
  .gesture-hint, .stage-zoom .icon-button, .study-mode-list button { transition: none; }
}