/* Slideshow (public/slideshow.js). One overlay, above the viewer (44) and below dialogs (46),
   so the music picker opens on top of a running show.

   The stage is black under every theme on purpose — it is a screen for pictures, and a tinted
   one changes how they look. Everything you touch (the bar, the settings) wears the theme's
   own tokens, so Paper's bar is paper and Kirameki's is Kirameki's. */

.ss {
  position: fixed; inset: 0; z-index: 45; background: #000; color: var(--text);
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
  animation: fade .18s var(--ease) reverse;
}
.ss.closing { animation: fade .18s var(--ease) forwards; pointer-events: none; }

.ss-stage { position: absolute; inset: 0; }
.ss-layer {
  position: absolute; inset: 0; display: grid; place-items: center;
  /* A definite cell, so the picture's max-height:100% resolves against the screen and a tall
     photo is fitted, not drawn at full width and cropped. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  opacity: 0; transition: opacity .65s ease;
}
.ss-layer.on { opacity: 1; }
.ss-layer img, .ss-layer video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
}
.ss-layer video { width: 100%; height: 100%; }

.ss-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(90vw, 420px); margin: 0; padding: 10px 16px; text-align: center;
  font-size: var(--fs-lg); color: var(--text);
  background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r);
}
.ss.loading .ss-stage::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 2px solid color-mix(in srgb, #fff 25%, transparent); border-top-color: #fff; border-radius: 50%;
  animation: ss-spin .8s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* The date the picture was taken, day-first, in the corner. Stays when the bar hides: it is
   part of what is being shown, not a control. */
.ss-date {
  position: absolute; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  margin: 0; font: var(--fw-medium) var(--fs-lg)/1 var(--font-meta, inherit); letter-spacing: .02em;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); opacity: .82; transition: bottom .2s var(--ease);
}
.ss:not(.idle) .ss-date { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* How long until the next picture. */
.ss-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.ss-line i { display: block; height: 100%; width: 100%; background: var(--accent); opacity: .7; transform-origin: left; transform: scaleX(0); }
@keyframes ss-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ss.paused .ss-line i { opacity: .35; }

/* The bar. */
.ss-bar {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 5px;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  background: color-mix(in srgb, var(--panel-solid) 90%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, .7);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.ss-b {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text2); cursor: pointer;
}
.ss-b svg { width: 20px; height: 20px; }
.ss-b:hover { background: var(--glass2); color: var(--text); }
.ss-b:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.ss-b:disabled { opacity: .35; cursor: default; background: transparent; }
.ss-b.on { color: var(--accent-text); }
.ss-play { color: var(--accent-ink); background: var(--accent); }
.ss-play:hover { color: var(--accent-ink); background: var(--accent); filter: brightness(1.08); }
.ss-count {
  flex: none; min-width: 64px; padding: 0 8px; text-align: center;
  font: var(--fw-medium) var(--fs-md)/1 var(--font-meta, inherit); color: var(--mut); font-variant-numeric: tabular-nums;
}

/* Settings, above the bar. */
.ss-pop {
  position: absolute; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 14px;
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .75);
}
.ss-pop-h { margin: 0 0 8px; font-size: var(--fs-md); color: var(--mut); }
.ss-speeds { display: flex; gap: 4px; margin-bottom: 10px; }
.ss-speed {
  flex: 1; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--input); color: var(--text2); font: inherit; font-size: var(--fs-base); cursor: pointer;
}
.ss-speed:hover { border-color: var(--line2); color: var(--text); }
.ss-speed.on { background: var(--accent-tint); border-color: var(--accent-ring); color: var(--accent-text); font-weight: var(--fw-semi); }
.ss-chk { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-base); cursor: pointer; }
.ss-chk input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

/* Out of the way after a moment of nothing — the pointer too. */
.ss.idle { cursor: none; }
.ss.idle .ss-bar { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.ss.idle .ss-pop { display: none; }

.ss .hidden { display: none !important; }

/* The music picker (a modal() over the show). */
.ssm-list {
  display: flex; flex-direction: column; gap: 2px; max-height: min(46vh, 340px); overflow: auto;
  margin: 8px 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; background: var(--input);
}
.ssm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; text-align: left;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.ssm-row:hover { background: var(--glass2); }
.ssm-row.on { background: var(--accent-tint); }
.ssm-n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-pill);
  border: 1px solid var(--line2); font-size: var(--fs-sm); color: var(--accent-ink);
}
.ssm-row.on .ssm-n { background: var(--accent); border-color: var(--accent); }
.ssm-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ssm-t b { font-weight: var(--fw-medium); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssm-t i { font-style: normal; font-size: var(--fs-sm); color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssm-none { padding: 10px 8px; margin: 0; }
.ssm-sum { margin: 0; }

@media (max-width: 480px) {
  .ss-count { display: none; }
  .ss-bar { gap: 0; padding: 4px; }
  .ss-b { width: 36px; height: 36px; flex: 0 1 36px; min-width: 30px; }
  .ss-date { font-size: var(--fs-base); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-layer { transition: none; }
  .ss-bar { transition: none; }
}