/* A video-player bar for the screen tours: play/pause, a seekable chapter
   track, sound and full screen, pinned to the bottom of the window the way a
   video player is. The deck's own control cluster is folded into it. */

:root { --tp-h: 56px; }

/* The deck shipped its controls inside every slide footer. One bar for the
   whole tour replaces them, so hide the per-slide cluster on screen. */
body.tp-on .d-foot { visibility: hidden; }
@media print { body.tp-on .d-foot { visibility: visible; } }

/* The deck also draws a player of its own over the slide: a play circle in
   the middle, a seek bar along the bottom edge, and pills announcing pauses
   and the voice. The bar does all of that now, and two sets of controls for
   one tour is worse than either — so the deck's set goes with its footer.
   They are only visible at all because this file used to bail out before it
   ran; whoever sees this change sees them disappear for the first time. */
body.tp-on #dl-play,
body.tp-on #dl-seek,
body.tp-on #pause-pill,
body.tp-on #voice-tip { display: none !important; }

#tp {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Above the sound curtain. The curtain stops short of the bar, but the
     speed menu and the track label open upwards into the curtain's space, and
     a control you can see but cannot click is worse than no control. */
  z-index: 72;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px calc(env(safe-area-inset-bottom, 0px)) 12px;
  height: calc(var(--tp-h) + env(safe-area-inset-bottom, 0px));
  color: #fff;
  background: linear-gradient(to top, rgba(8, 14, 30, .96), rgba(8, 14, 30, .82));
  backdrop-filter: blur(6px);
  font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: opacity .25s ease, transform .25s ease;
}
/* Out of the way while the tour plays and nobody is pointing at it, back on
   any movement, tap or keystroke — the same bargain a video player makes. */
#tp.tp-idle { opacity: 0; transform: translateY(100%); pointer-events: none; }

#tp button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  font: inherit;
}
#tp button:hover { background: rgba(255, 255, 255, .14); }
#tp button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#tp svg { width: 22px; height: 22px; display: block; }

#tp-pos { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; opacity: .85; }
#tp-chap {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .85;
}

/* The track: one segment per slide, so the tour reads as chapters and a tap
   lands on a slide rather than an arbitrary point. */
#tp-track {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  align-items: center;
  height: 44px;
  cursor: pointer;
  min-width: 80px;
  touch-action: none;
}
#tp-track .seg {
  flex: 1 1 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .26);
  overflow: hidden;
}
#tp-track .seg i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 3px;
  transition: width .18s linear;
}
#tp-track.drag .seg i { transition: none; }

/* Sound is the one control a browser can refuse us, so it says what it wants. */
#tp-sound.needs-tap {
  background: #1B4079;
  padding: 0 12px;
}
#tp-sound .lbl { display: none; }
#tp-sound.needs-tap .lbl { display: inline; }

#tp-print { opacity: .8; }

/* On a phone the bar keeps the controls a thumb needs and drops the ones a
   mouse was holding. Prev, next and replay stay: finding one of a dozen
   chapters in a track a few millimetres wide is not navigation, and turning a
   page is the thing people do most. What goes is print, the chapter label and
   the slide readout, which the track already shows. Play is what everybody
   reaches for first, so it keeps the extra width while the rest give some up.
   The id-plus-element selectors match what #tp button already scored, or the
   buttons keep their size and nothing changes. */
@media (max-width: 760px) {
  #tp-chap, #tp-pos { display: none; }
  /* Speed goes too, now that zoom is here. On a phone, being able to read
     the screenshot at all beats being able to watch it at 1.5x, and the
     two together do not fit across 360px. */
  #tp #tp-print, #tp #tp-rate { display: none; }
  #tp { gap: 2px; padding-left: 6px; padding-right: 6px; }
  #tp button { min-width: 38px; padding: 0 3px; }
  #tp #tp-play { min-width: 52px; }
  #tp #tp-play svg { width: 26px; height: 26px; }
  /* Eight controls and a track do not fit across a 375px phone at the width
     the track asks for on a desktop. The track is the one thing here that
     can give: it reads as progress at any width, and seeking by chapter is
     what prev and next are now for. */
  #tp #tp-track { min-width: 56px; }
  #tp-sound.needs-tap { padding: 0 10px; font-size: 12px; }
}

/* ---- The lens ----------------------------------------------------------

   A screen tour is mostly screenshots of software, and a screenshot of
   software is the one thing on a slide that cannot be made smaller and still
   mean anything: at the quarter scale a phone gives it, a line of a grid is
   about two pixels tall. So the lens blows the slide up and lets it be pushed
   around underneath the window.

   It zooms the stage itself rather than a copy of it. The deck lays its
   slides out in its own 1600x900 coordinates and draws the highlight rings
   and badges over them in the same space, so scaling the stage takes all of
   that with it, still live, still following the narration -- where a cloned
   figure would have arrived detached from the CSS that styles it and frozen
   at the moment it was copied. The stage already clips what overflows it,
   which is what makes the window onto it work. */
body.tp-lens .stage {
  /* Centred while zoomed: the deliberate letterboxing the portrait rule asks
     for is for a whole slide sitting in an empty screen, not for a detail
     being read. */
  top: 50% !important;
  box-shadow: none;
  cursor: grab;
}
body.tp-lens.tp-grabbing .stage { cursor: grabbing; }
/* The gestures belong to the lens while it is open; without this the browser
   takes the drag as a page scroll and the pinch as a page zoom. */
body.tp-lens .viewport { touch-action: none; }
#tp-zoom[data-on="1"] { background: rgba(255, 255, 255, .22); }

/* Said once, over the slide, because a picture that can be moved does not
   look any different from one that cannot. */
#tp-lenshint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tp-h) + env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 71;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 14, 30, .92);
  color: #fff;
  font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
#tp-lenshint.show { opacity: 1; }

/* A bar that slides away while the tour plays is a video convention worth
   keeping wherever there is a pointer to call it back. On a touch screen
   there is none, and once it has gone the only way to pause is a tap on the
   tour itself — the overloaded gesture all of this is trying to get away
   from. So where nothing hovers, the bar stays put. */
@media (hover: none) {
  #tp.tp-idle { opacity: 1; transform: none; pointer-events: auto; }
}

/* "Tap for sound", said over the tour rather than in the corner of it, because
   a viewer who misses it watches the whole story in silence. */
#tp-unmute {
  position: fixed;
  /* Stop short of the bar: someone who would rather watch it muted still has
     to be able to reach pause and the track. */
  inset: 0 0 calc(var(--tp-h) + env(safe-area-inset-bottom, 0px)) 0;
  z-index: 70;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background: rgba(8, 14, 30, .62);
  backdrop-filter: blur(2px);
  font: 500 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
#tp-unmute[hidden] { display: none; }
#tp-unmute .ic {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #1B4079;
}
#tp-unmute .ic svg { width: 34px; height: 34px; }
#tp-unmute b { font-size: 21px; }
#tp-unmute small { max-width: 32ch; opacity: .82; font-size: 13px; }

/* Turning the tour on its side, for the phones that will not go full screen.
   The stage is scaled by script; everything here is placement. The bar rides
   down the right-hand edge, which is the bottom once the phone is sideways. */
body.tp-rot #tp {
  left: 100%;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100vh;
  height: var(--tp-h);
  padding: 0 12px;
  transform-origin: 0 0;
  transform: rotate(90deg);
}
body.tp-rot #tp.tp-idle { transform: rotate(90deg) translateY(-100%); }
body.tp-rot #tp #tp-prev, body.tp-rot #tp #tp-next { display: inline-flex; }
body.tp-rot #tp-chap { display: block; }
/* The sound curtain would read sideways once the tour is turned, so step back
   and let the bar's own amber button carry the message. A tap anywhere still
   releases the sound either way. */
body.tp-rot #tp-unmute { display: none; }

/* On a phone the deck is a 16:9 strip in a portrait window, so there is empty
   room above and below it whatever we do. Sit the strip a little above centre
   so the space reads as deliberate letterboxing and the bar along the bottom
   edge never crowds it. Turned sideways, or in landscape, it fills the screen. */
@media (max-width: 760px) and (orientation: portrait) {
  body.tp-on .stage { top: 42vh; }
  body.tp-on.tp-rot .stage { top: 50%; }
}

/* ---- Speed -------------------------------------------------------------
   The button wears the current rate, the way a player's does, and the menu
   opens above it. Script places it under its own button; the rest is here. */
#tp-rate { font-variant-numeric: tabular-nums; font-weight: 600; }
#tp-rate-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 2;
  min-width: 132px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(8, 14, 30, .97);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
}
#tp-rate-menu[hidden] { display: none; }
#tp #tp-rate-menu button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
/* The tick marks the rate in force, so the menu answers "what speed is this?"
   without anyone having to read the button behind it. */
#tp #tp-rate-menu button[aria-checked="true"]::after { content: "\2713"; }
#tp #tp-rate-menu button[aria-checked="true"] { background: rgba(255, 255, 255, .12); }

/* ---- What the pointer is over on the track ---------------------------- */
#tp-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 2;
  max-width: 30ch;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(8, 14, 30, .97);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
#tp-tip[hidden] { display: none; }
/* A thumb covers the track it is dragging, so the label would be hidden under
   the hand that asked for it. Touch gets the segment titles instead. */
@media (hover: none) { #tp-tip { display: none; } }

/* ---- Skip / speed confirmation over the tour -------------------------- */
#tp-flash {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 14px;
  color: #fff;
  background: rgba(8, 14, 30, .72);
  font: 600 20px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
#tp-flash.show { opacity: 1; }
#tp-flash svg { width: 26px; height: 26px; }

/* ---- The shortcut list ------------------------------------------------ */
#tp-help {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 14, 30, .66);
  backdrop-filter: blur(3px);
  color: #fff;
  font: 500 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
#tp-help[hidden] { display: none; }
/* Namespaced: the decks style a .card of their own, and an unprefixed one
   here inherited their layout and folded the list onto its heading. */
#tp-help .tp-card {
  min-width: 300px;
  padding: 22px 26px;
  border-radius: 14px;
  background: rgba(8, 14, 30, .97);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
/* The card is dropped into decks that style their own headings and lists --
   one of them takes h2 out of the flow, and the title landed on top of the
   first shortcut. Say what this card wants rather than inheriting it. */
#tp-help h2 {
  display: block;
  position: static;
  float: none;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font: 600 17px/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
#tp-help dl {
  display: grid;
  position: static;
  float: none;
  grid-template-columns: auto 1fr;
  gap: 9px 20px;
  margin: 0;
}
#tp-help dt { font-weight: 600; white-space: nowrap; opacity: .95; }
#tp-help dd { margin: 0; opacity: .8; }

/* The pointer leaves with the bar and comes back with it. */
body.tp-nocursor, body.tp-nocursor .stage { cursor: none; }

@media (max-width: 760px) {
  /* The speed menu is worth its width on a phone; the chapter label is not,
     and it is already hidden above. */
  #tp-rate-menu { min-width: 120px; }
}