/* 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); }

/* ------------------------------------------------------------------------
   Motion inside the window (30 October 2026). A menu, a new slide's
   thumbnail, the slide brought to the stage and a button under the
   pointer each changed in one frame. Now a menu and its submenus fade in
   and come down the last few pixels over --dur-3 (os-menu-in, the site's
   menu arrival); a thumbnail that was not there before rises into the
   strip, and a deck's thumbnails deal in a --stagger apart as it opens
   (slides-editor.js marks them is-new and counts them in --deal); the
   slide fades onto the stage over --dur-2 when another is chosen, and
   stays still while it is edited; a control's colour eases over --dur-2
   and it presses to 96% over --dur-1; the status bar's figures are
   tabular; and the save state fades in when its words change rather than
   being redrawn in place. Every distance is one of theme.css's, nought
   with motion switched down, and everything that arrives asks for the
   fade it keeps then. */
/* The menus carry .os-arriving, which slides.html holds still (a pane that
   rises for --dur-4 is not there yet when the pointer arrives); a menu's
   own arrival is shorter and smaller, so it is named with the page's
   weight to take it. */
body.slides-app .sl-menu:not([hidden]) { --os-fade: var(--dur-fade); animation: os-menu-in var(--dur-3) var(--ease-standard) backwards; }
.slide-thumb.is-new { --os-fade: var(--dur-fade); animation: os-rise-soft var(--dur-3) var(--ease-standard) backwards; animation-delay: calc(var(--stagger) * var(--deal, 0)); }
#slideViewport.is-arriving { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }
.sl-ib, .rb, .sl-tab, .sl-qat button, .sl-menu > button, .slide-thumb .thumb-frame {
  transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.sl-ib:active:not(:disabled), .rb:active:not(:disabled), .sl-qat button:active:not(:disabled) { transform: scale(0.96); }
:root[data-motion="none"] .sl-app :active { transform: none; }
.sl-status { font-variant-numeric: tabular-nums; }
#saveStatusBadge.is-fresh { --os-fade: var(--dur-fade); animation: os-fade-in var(--dur-2) var(--ease-standard) backwards; }