/*
 * Slideshow player styles. Independent of the rest of the site: nothing here uses the site's CSS or variables,
 * and every class and custom property starts with kps- so the player can be embedded in any page.
 *
 * The player fills the element it is mounted on (give that element a size). Customize with:
 *   --kps-background   the colour around/behind pictures (set from the slideshow's config)
 *   --kps-font         the overlay font
 *   --kps-text         overlay text colour (dark theme)
 */
.kps-root {
  --kps-background: #000;
  --kps-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kps-text: #fff;

  position: relative;
  overflow: hidden;
  background: var(--kps-background);
  color: var(--kps-text);
  font-family: var(--kps-font);
  isolation: isolate;
  outline: none;
}

.kps-root *,
.kps-root *::before,
.kps-root *::after {
  box-sizing: border-box;
}

.kps-stage,
.kps-layer {
  position: absolute;
  inset: 0;
}

.kps-stage {
  z-index: 0; /* a stacking context of its own: the layers' z-indexes stay below interruptions */
}

.kps-layer[hidden],
.kps-overlay[hidden],
.kps-message[hidden],
.kps-hud[hidden],
.kps-interrupt[hidden],
.kps-interrupt .kps-picture[hidden] {
  display: none;
}

/* An interruption in front of the slideshow (interruption-view.js): a picture covering it, or text over it. It comes
   and goes with its own transition (interruption-transitions.js), so there is no opacity or transition set here. */
.kps-interrupt {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.kps-interrupt--cover {
  background: var(--kps-background);
}

.kps-interrupt--overlay {
  background: rgb(0 0 0 / 35%);
}

/* The picture on a layer: a canvas or an <img>, see surfaces.js. The canvas is sized by the player from the fit mode. */
.kps-picture {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  max-height: none;
  display: block;
}

/* Overlay text */
.kps-overlay {
  position: absolute;
  max-width: min(90%, 60rem);
  padding: 0.6em 1em;
  border-radius: 0.4em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* A slide with a link (its article): the box is clickable. */
.kps-overlay.kps-linked {
  pointer-events: auto;
  cursor: pointer;
}

.kps-overlay.kps-linked:hover,
.kps-overlay.kps-linked:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.kps-overlay p,
.kps-overlay h1,
.kps-overlay h2,
.kps-overlay h3,
.kps-overlay ul,
.kps-overlay ol {
  margin: 0.2em 0;
}

.kps-overlay ul,
.kps-overlay ol {
  padding-left: 1.2em;
}

/* A slide's QR code (overlay.js), in the same box as the text, above, below, left or right of it (qr_position). White
   with its own quiet zone, so it scans over any picture and in either theme. Its size is a share of the screen's short
   side (qr_size), not of the text's, so that a code stays scannable whatever the text size. */
.kps-overlay.kps-has-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
}
.kps-qr-at-bottom {
  flex-direction: column;
}
.kps-qr-at-top {
  flex-direction: column-reverse;
}
.kps-qr-at-right {
  flex-direction: row;
}
.kps-qr-at-left {
  flex-direction: row-reverse;
}
.kps-overlay > .kps-text {
  min-width: 0;
}
.kps-qr {
  display: block;
  flex: none;
  width: var(--kps-qr-size, 20vmin);
  height: var(--kps-qr-size, 20vmin);
  margin: 0;
  border-radius: 0.2em;
  background: #fff;
}
.kps-qr-small {
  --kps-qr-size: 12vmin;
}
.kps-qr-medium {
  --kps-qr-size: 20vmin;
}
.kps-qr-large {
  --kps-qr-size: 32vmin;
}
.kps-size-small {
  font-size: clamp(0.8rem, 1.6vmin, 1.4rem);
}
.kps-size-medium {
  font-size: clamp(1rem, 2.8vmin, 2.4rem);
}
.kps-size-large {
  font-size: clamp(1.4rem, 5vmin, 4.4rem);
}

.kps-theme-dark {
  color: #fff;
  background: rgb(0 0 0 / 55%);
}
.kps-theme-light {
  color: #111;
  background: rgb(255 255 255 / 70%);
}
.kps-theme-none {
  color: #fff;
  background: none;
  text-shadow:
    0 0 0.3em rgb(0 0 0 / 80%),
    0 0 0.1em rgb(0 0 0 / 80%);
}

.kps-pos-top-left {
  top: 3%;
  left: 3%;
}
.kps-pos-top-center {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.kps-pos-top-right {
  top: 3%;
  right: 3%;
  text-align: right;
}
.kps-pos-middle-left {
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
}
.kps-pos-middle-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.kps-pos-middle-right {
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  text-align: right;
}
.kps-pos-bottom-left {
  bottom: 3%;
  left: 3%;
}
.kps-pos-bottom-center {
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.kps-pos-bottom-right {
  bottom: 3%;
  right: 3%;
  text-align: right;
}

.ov-title {
  font-size: 1.6em;
  font-weight: 700;
}
.ov-subtitle {
  font-size: 1.2em;
}
.ov-small {
  font-size: 0.8em;
}
.ov-accent {
  color: #ffd54a;
}
.ov-muted {
  opacity: 0.7;
}

/* Messages and statistics */
.kps-message {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2em;
  text-align: center;
  font-size: clamp(1rem, 3vmin, 2rem);
  opacity: 0.75;
  pointer-events: none;
}

.kps-hud {
  position: absolute;
  z-index: 7;
  left: 0.5em;
  top: 0.5em;
  margin: 0;
  padding: 0.4em 0.6em;
  font:
    12px/1.4 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  color: #bfffbf;
  background: rgb(0 0 0 / 70%);
  pointer-events: none;
}

/* Kiosk and full screen */
.kps-kiosk.kps-idle,
.kps-kiosk.kps-idle * {
  cursor: none;
}

/* Previous / next arrows (nav-controls.js): under interruptions, over the slides. The strip itself lets the pointer
   through; only the arrows catch it, and only while shown. */
.kps-nav {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.kps-nav-button {
  position: absolute;
  top: 50%;
  width: 3.5rem;
  height: 5rem;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0.5rem;
  color: #fff;
  background: rgb(0 0 0 / 40%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  touch-action: manipulation; /* a second tap is another step, not a zoom */
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 250ms,
    visibility 0s 250ms;
}

.kps-nav-previous {
  left: 0.75rem;
}

.kps-nav-next {
  right: 0.75rem;
}

.kps-nav--shown .kps-nav-button {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 250ms;
}

.kps-nav-button:hover,
.kps-nav-button:focus-visible {
  background: rgb(0 0 0 / 65%);
}

.kps-nav-button svg {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kps-hint {
  position: absolute;
  z-index: 8;
  right: 1em;
  bottom: 1em;
  padding: 0.5em 0.9em;
  border-radius: 2em;
  font-size: 0.9rem;
  color: #fff;
  background: rgb(0 0 0 / 60%);
  cursor: pointer;
}

.kps-root:fullscreen {
  width: 100%;
  height: 100%;
}

/* The standalone page /show/<token>/ */
.kps-page {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  overscroll-behavior: none;
}

.kps-page .kps-root {
  position: fixed;
  inset: 0;
}

/* A way to report a slideshow that shouldn't be public. Invisible until the pointer is on the page (so a kiosk,
   which has none, never shows it), and left out altogether in kiosk mode. */
.kps-report {
  position: fixed;
  right: 0.75rem;
  bottom: 0.5rem;
  z-index: 10;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font:
    0.75rem system-ui,
    sans-serif;
  text-decoration: none;
  opacity: 0;
  transition: opacity 200ms;
}

.kps-page:hover .kps-report,
.kps-report:focus {
  opacity: 0.7;
}

.kps-report[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .kps-layer,
  .kps-nav-button {
    transition: none;
  }
}