/* ============================================================
   SHARED PANORAMA — single source of truth for the horizontal
   drag-scroll panorama viewer. Loaded only by pages that use it
   (atlas, seizures, neonatal). Consumes tokens.css + lightbox.css.

   Two skins, one engine (panorama.js):
     .panorama-viewer  → INLINE, minimal: track + drag + scrubber only.
                         Click expands to fullscreen.
     .lb-panorama      → FULLSCREEN (inside the lightbox): rounded,
                         controls row, clean/annotated + montage toggles,
                         scrubber. Title + caption reuse .lb-title/.lb-desc.
   ============================================================ */

/* ── Shared track (both skins) ── */
/* Native scrollbar hidden — the persistent scrubber is the only scroll UI now. */
.panorama-track-wrap { overflow-x: scroll; overflow-y: hidden; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; position: relative; border-radius: var(--radius-sm); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.panorama-track-wrap:active { cursor: grabbing; }
.panorama-track-wrap::-webkit-scrollbar { display: none; width: 0; height: 0; }
.panorama-track { display: flex; align-items: stretch; min-width: max-content; user-select: none; -webkit-user-select: none; }
.panorama-track img { display: block; height: 420px; width: auto; flex-shrink: 0; border-right: 2px solid rgba(59, 164, 224, 0.15); user-select: none; -webkit-user-drag: none; }
.panorama-track img:last-child { border-right: none; }

/* ── INLINE skin (minimal): flush in content, no controls row ── */
.panorama-viewer { margin: 0 -28px var(--space-lg); position: relative; }
.panorama-viewer.compact .panorama-track img { height: 360px; }
/* Inline is minimal: no in-viewer controls row (expand button, inline toggles,
   hint) — click the viewer to expand; the scrubber does the rest. The stray
   markup was stripped; this rule stays only as a guard so a viewer ever authored
   with an old controls row still renders minimal. */
.panorama-viewer .panorama-controls { display: none; }

/* Exception to "inline is minimal": a clean/annotated switch, built only when
   the viewer declares data-annotated-dir. Styled to match .comp-tab so the
   tabbed comparisons and the panoramas read as the same control. */
.panorama-viewer .panorama-inline-actions { display: flex; gap: 6px; justify-content: center; padding: 10px 8px 2px; }
.panorama-viewer .panorama-toggle { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 7px 16px; border: 1px solid #d0d8e0; border-radius: 6px; cursor: pointer; background: transparent; color: #6b7a8d; transition: all 0.2s; }
.panorama-viewer .panorama-toggle:not(.active):hover { color: #3a4a5a; border-color: #b0b8c0; background: #f5f7fa; }
.panorama-viewer .panorama-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(59, 164, 224, 0.2); }
.panorama-viewer .panorama-toggle:disabled { opacity: 0.4; cursor: default; }
.panorama-viewer .panorama-inline-divider { width: 1px; align-self: stretch; margin: 2px 4px; background: #d0d8e0; }

/* ── FULLSCREEN skin (rich, inside lightbox) ── */
.lb-panorama { width: 100%; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(135deg, #0d2a3f 0%, #122e44 50%, #0d2a3f 100%); }
.lb-panorama .panorama-track img { height: 72vh; }
.lb-panorama .panorama-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 16px; background: rgba(0,0,0,0.25); }
.lb-panorama .panorama-label { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; }
.lb-panorama .panorama-actions { display: flex; align-items: center; gap: 10px; justify-self: center; }
.lb-panorama .panorama-hint { font-size: 12px; color: rgba(255,255,255,0.4); justify-self: end; }
.lb-panorama .panorama-toggle,
.lb-panorama .montage-toggle { padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.6); font-size: 12px; font-family: 'Montserrat', sans-serif; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.lb-panorama .panorama-toggle:hover,
.lb-panorama .montage-toggle:hover { border-color: var(--accent); color: #fff; }
.lb-panorama .panorama-toggle.active,
.lb-panorama .montage-toggle.active { border-color: var(--accent); background: rgba(59, 164, 224, 0.15); color: var(--accent); }
.lb-panorama .toggle-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); display: inline-block; vertical-align: middle; }

/* ── Scrubber (both skins): a thin rail with a circular puck handle —
   mirrors Lucien's playhead (line + 12px circle). The puck marks scroll
   POSITION (not visible-window width); its left is set by panorama.js.
   Sits between the image track and (fullscreen) the controls row.        */
.panorama-scrubber { position: relative; height: 16px; margin: 6px 14px; cursor: pointer; }
.panorama-scrubber::before {   /* the rail line */
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-50%); border-radius: 999px;
}
.panorama-scrubber-thumb {     /* the circular puck */
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  border-radius: 50%; transform: translateY(-50%); cursor: grab;
  transition: box-shadow 0.15s;
}
.panorama-scrubber-thumb:active { cursor: grabbing; }
/* inline skin = light bg → faint rail, dark puck + soft shadow */
.panorama-viewer .panorama-scrubber::before { background: rgba(20, 40, 60, 0.14); }
.panorama-viewer .panorama-scrubber-thumb { background: #26323f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.panorama-viewer .panorama-scrubber-thumb:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }

/* ── INSIDE A TEST YOURSELF ──
   Two things differ from the learning card the inline skin is tuned for:
   1. Bleed. The card has 28px padding, but .test-yourself-body/-answer use a
      tighter inset and their images bleed -12px — so the -28px above made
      panoramas visibly wider than every other image in the block.
   2. Background. The panel is dark (rgba(10,26,40,0.5)), so the dark navy puck
      and near-black rail were almost invisible; use the light-on-dark treatment
      the fullscreen skin uses. */
.test-yourself .panorama-viewer { margin-left: -12px; margin-right: -12px; }

/* Quiz cards: the panorama is dropped straight into .flashcard-body / .list-item,
   which already carry their own padding, so the inline skin's -28px content bleed
   pushes it wider than the other practice images. Sit flush to the padded width. */
.flashcard-body .panorama-viewer,
.list-item .panorama-viewer { margin-left: 0; margin-right: 0; }
.test-yourself .panorama-scrubber::before { background: rgba(255, 255, 255, 0.22); }
.test-yourself .panorama-scrubber-thumb { background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.4); }
.test-yourself .panorama-scrubber-thumb:hover { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.5); }
.test-yourself .panorama-viewer .panorama-toggle { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.65); }
.test-yourself .panorama-viewer .panorama-toggle:not(.active):hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.08); }
/* fullscreen skin = dark bg → faint rail, white puck + ring + shadow */
.lb-panorama .panorama-scrubber::before { background: rgba(255, 255, 255, 0.22); }
.lb-panorama .panorama-scrubber-thumb { background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.4); }
.lb-panorama .panorama-scrubber-thumb:hover { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.5); }

@media (max-width: 768px) {
  .lb-panorama .panorama-track img { height: 50vh; }
  .panorama-track img { height: 300px; }
  .panorama-viewer.compact .panorama-track img { height: 260px; }
  .panorama-viewer { margin-left: -16px; margin-right: -16px; }
}