/* OBSCURA OS - Slides: Version History, and the show's laser pointer.
 *
 * Kept out of the page's own style block, which is held to its size
 * (design-lint.mjs), and loaded after it. */

/* Version History (slides-versions.js): the list, newest first, and a
   version's slides, read only. */
.sl-ver-save { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.sl-ver-save .pf { flex: 1 1 auto; margin: 0; }
.sl-ver-list { max-height: 46vh; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.sl-ver-list > .sl-note { margin: 10px 12px; }
.sl-ver-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.sl-ver-row:last-child { border-bottom: 0; }
.sl-ver-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-ver-when { font-weight: 600; }
.sl-ver-kind, .sl-ver-sum { font-size: var(--text-2xs); color: var(--ink-soft); }
.sl-ver-kind.named { color: var(--accent); font-weight: 600; }
.sl-ver-sum { font-variant-numeric: tabular-nums; }
.sl-ver-acts { display: flex; gap: 6px; flex: none; }
.sl-ver-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; max-height: 56vh; overflow: auto; padding: 2px; }
.sl-ver-slide { margin: 0; }
.sl-ver-slide .slide-frame { --k: 0.18; border: 1px solid var(--rule-strong); }
.sl-ver-slide.is-hidden .slide-frame { opacity: .45; }
.sl-ver-slide figcaption { font-size: var(--text-2xs); color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .sl-ver-row { flex-wrap: wrap; }
  .sl-ver-acts { width: 100%; }
  .sl-ver-acts .sl-btn { flex: 1 1 0; }
  .sl-ver-save { flex-direction: column; align-items: stretch; }
  .sl-ver-save .pf { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .sl-ver-acts .sl-btn, .sl-ver-save .sl-btn, .sl-ver-save input { min-height: 44px; }
}

/* The laser pointer (slides-show.js): a red dot where the pointer is on
   the slide, and no arrow beside it. Drawn in both windows from where it
   is on the slide, so it lands on the same word on the other screen. Its
   colour is the show's own (--laser, on .presenter-modal). */
.pres-laser { position: fixed; z-index: 5; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--laser); border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; }
.pres-laser[hidden] { display: none; }
.presenter-modal.laser .pres-stage, .presenter-modal.laser .presenter-slide { cursor: none; }
.presenter-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .22); }