/* Player chrome only. Every rule is scoped under .sp so the player can sit inside
   another site's page without styling it, and the deck inside the iframe keeps
   its own styles untouched.

   Colours and type read the host page's tokens where they exist (the Graystone
   site and the deck share the same palette and Geist), with the deck's values
   as fallbacks for the standalone page. */
.sp {
  --sp-bg: var(--bg, #071A2B);
  --sp-deep: var(--bg-deep, #051521);
  --sp-text: var(--text, #F6FAFD);
  --sp-t2: var(--text-2, #C6D3DE);
  --sp-muted: var(--text-muted, #9FB2C1);
  --sp-accent: var(--accent, #6FD8BE);
  --sp-rule: var(--rule, rgba(255, 255, 255, 0.14));
  --sp-rule-strong: var(--rule-strong, rgba(255, 255, 255, 0.26));
  --sp-sans: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --sp-mono: var(--mono, ui-monospace, Menlo, monospace);
  font-family: var(--sp-sans);
  color: var(--sp-text);
  /* the layout responds to the player's own width, not the window's, so it
     behaves the same standalone and inside a host page's column */
  container-type: inline-size;
  /* no margin or padding here: a host page may position the root (Graystone's
     .deckfig breakout sets margin-left on it) */
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }

/* ---- composition ---------------------------------------------------------
   Narrow: deck, controls, current passage, full text, stacked.
   From 1040px of player width: deck and current passage side by side, ~71/29. */
.sp .sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "deck" "controls" "now" "full" "sources";
}
.sp .sp-stage { grid-area: deck; align-self: start; }
.sp .sp-now { grid-area: now; margin-top: 26px; }
.sp .sp-controls { grid-area: controls; }
.sp .sp-full { grid-area: full; }
.sp .sp-full.sp-sources { grid-area: sources; margin-top: 0; }
@container (min-width: 1040px) {
  .sp .sp-grid {
    grid-template-columns: minmax(0, 71fr) minmax(0, 29fr);
    column-gap: 32px;
    /* controls stay with the deck, so a long passage beside them never pushes
       the controls away from the deck */
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "deck now" "controls now" "full full" "sources sources";
  }
  .sp .sp-now { margin-top: 0; padding-top: 6px; }
}

/* The deck always gets a true 1920x1080 viewport, the size it was presented at.
   Below that size its own fit logic mis-centres the stage, so the player scales
   the whole iframe instead (--sp-s is set by player.js). */
.sp .sp-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sp-deep); border: 1px solid var(--sp-rule);
}
.sp .sp-stage iframe {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; max-width: none;
  border: 0; margin: 0; display: block;
  transform: scale(var(--sp-s, 0.5)); transform-origin: 0 0;
}

/* ---- reading panel ------------------------------------------------------
   All of a page's text, scrollable. The beat matching the stage is marked;
   the rest stays readable. Beside the stage its height is the stage's plus the
   controls' (contain:size keeps long text from stretching the grid row). */
.sp .sp-now { display: flex; flex-direction: column; min-height: 0; }
.sp .sp-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px;
  margin: 0 0 10px; padding: 0;
  font-family: var(--sp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-muted);
}
.sp .sp-hold {
  font: inherit; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-muted); background: transparent; border: 1px solid var(--sp-rule-strong); border-radius: 3px;
  height: 28px; padding: 0 10px; cursor: pointer; margin-left: auto;
}
.sp .sp-hold:hover { color: var(--sp-text); border-color: var(--sp-t2); }
.sp .sp-hold--on { color: var(--sp-accent); border-color: var(--sp-accent); }
.sp .sp-held:focus-visible, .sp .sp-read:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp .sp-held { display: block; width: 100%; text-align: left; background: none; font: inherit; cursor: pointer; margin: 0 0 10px; padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--sp-t2); border: 1px dashed var(--sp-rule-strong); border-radius: 3px; }
.sp .sp-held[hidden] { display: none; }
.sp .sp-read {
  position: relative; flex: 1 1 auto; min-height: 0; max-height: 70vh;
  overflow-y: auto; overscroll-behavior: contain; padding: 22px 10px 40px 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 28px), transparent 100%);
  scrollbar-width: thin; scrollbar-color: var(--sp-rule-strong) transparent;
}
.sp .sp-beat { margin: 0 0 22px; padding: 0 0 0 16px; border-left: 2px solid transparent; cursor: pointer; transition: border-color 0.3s; }
.sp .sp-beat p { max-width: none; margin: 0 0 0.8em; font-size: 16px; line-height: 1.62; color: var(--sp-t2); transition: color 0.3s; }
.sp .sp-beat p:last-child { margin-bottom: 0; }
.sp .sp-beat.sp-on { border-left-color: var(--sp-accent); }
.sp .sp-beat.sp-on p { color: var(--sp-text); }
.sp .sp-beat.sp-on p.sp-more { color: #E3EBF1; }
.sp .sp-read .sp-empty { color: var(--sp-muted); font-style: italic; }
@container (min-width: 1040px) {
  .sp .sp-now { contain: size; align-self: stretch; }
  .sp .sp-read { max-height: none; }
}

/* ---- controls: one primary row, one quiet row ---------------------------- */
.sp .sp-controls { margin-top: 12px; }
.sp .sp-bar { display: flex; align-items: center; gap: 8px; margin: 0; }
.sp .sp-btn, .sp .sp-select {
  font: inherit; font-size: 15px; color: var(--sp-text); background: transparent;
  border: 1px solid var(--sp-rule-strong); border-radius: 3px;
  height: 36px; min-width: 36px; margin: 0; cursor: pointer;
}
.sp .sp-btn { font-size: 17px; line-height: 1; padding: 0 10px; }
.sp .sp-btn.sp-play { min-width: 52px; border-color: var(--sp-accent); color: var(--sp-accent); }
.sp .sp-btn:hover, .sp .sp-select:hover { border-color: var(--sp-t2); }
.sp .sp-select { padding: 0 8px; background: var(--sp-deep); max-width: 100%; }
.sp .sp-speed { font-size: 14px; }

.sp .sp-track { flex: 1; display: flex; gap: 2px; height: 36px; align-items: center; min-width: 0; }
.sp .sp-track i { position: relative; height: 5px; background: var(--sp-rule-strong); cursor: pointer; overflow: hidden; }
.sp .sp-track i b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sp-accent); }
.sp .sp-track i.sp-done b { width: 100%; opacity: 0.55; }

.sp .sp-time { font-family: var(--sp-mono); font-variant-numeric: tabular-nums; color: var(--sp-muted); font-size: 13px; white-space: nowrap; }

.sp .sp-where { display: flex; align-items: center; gap: 18px; margin: 6px 0 0; min-width: 0; }
.sp .sp-where select.sp-quiet { flex: 0 1 auto; min-width: 0; }
.sp .sp-where button.sp-quiet { flex: none; }
.sp .sp-hint { font-size: 13px; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp .sp-stage:fullscreen { border: 0; background: #051521; aspect-ratio: auto; width: 100vw; height: 100vh; }
.sp .sp-quiet {
  font: inherit; font-size: 13px; color: var(--sp-muted); background: transparent;
  border: 1px solid transparent; border-radius: 3px; height: 30px; margin: 0; padding: 0 6px; cursor: pointer;
  max-width: 100%;
}
.sp select.sp-quiet { margin-left: -6px; }
.sp select.sp-quiet option { background: var(--sp-deep); color: var(--sp-text); }
.sp .sp-quiet:hover { color: var(--sp-text); border-color: var(--sp-rule); }

.sp .sp-btn:focus-visible, .sp .sp-select:focus-visible, .sp .sp-quiet:focus-visible, .sp .sp-full summary:focus-visible {
  outline: 2px solid var(--sp-accent); outline-offset: 2px;
}

/* ---- full text, collapsed by default ------------------------------------- */
.sp .sp-full { margin-top: 28px; border-top: 1px solid var(--sp-rule); }
.sp .sp-full summary {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 0 0; cursor: pointer; list-style: none;
  font-family: var(--sp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-muted);
}
.sp .sp-full summary::-webkit-details-marker { display: none; }
.sp .sp-full summary::before { content: "▸"; font-family: var(--sp-sans); letter-spacing: 0; transition: transform 0.2s; }
.sp .sp-full[open] summary::before { transform: rotate(90deg); }
.sp .sp-full summary:hover { color: var(--sp-text); }

/* the reading surface is centred under the player, on the same axis as the deck */
.sp .sp-transcript {
  position: relative; /* offsetTop of paragraphs is measured against the panel */
  width: min(720px, 100%); margin: 24px auto 0; padding: 20px 6px 20px 0;
  border-top: 1px solid var(--sp-rule); border-bottom: 1px solid var(--sp-rule);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--sp-rule-strong) transparent;
}
.sp .sp-transcript .sp-fullhd { margin: 1.6em 0 0.7em; padding-left: 14px; font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp .sp-transcript .sp-fullhd:first-child { margin-top: 0; }
.sp .sp-transcript p {
  max-width: none; margin: 0 0 1.1em; padding: 0 0 0 14px;
  font-size: 17px; line-height: 1.62; color: var(--sp-t2);
  border-left: 2px solid transparent; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.sp .sp-transcript p:last-child { margin-bottom: 0; }
.sp .sp-transcript p.sp-on { color: var(--sp-text); border-left-color: var(--sp-accent); }
.sp .sp-transcript .sp-fullhd.sp-on { color: var(--sp-accent); }
.sp .sp-transcript .sp-empty { font-style: italic; cursor: default; border: 0; padding: 0; }

.sp .sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }

@container (max-width: 640px) {
  .sp .sp-bar { flex-wrap: wrap; }
  .sp .sp-track { order: 10; flex-basis: 100%; height: 20px; }
  .sp .sp-time { margin-left: auto; }
  .sp .sp-transcript p { font-size: 16px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp .sp-transcript p, .sp .sp-full summary::before { transition: none; }
  .sp .sp-beat, .sp .sp-beat p { transition: none; }
}
/* phone: keep the row to the scene menu and Restart, as in the Sandia player */
@media (max-width: 640px) {
  .sp-hint, [data-sp="expand"] { display: none; }
  #sp-jump { flex: 1 1 auto; min-width: 0; max-width: 70%; }
}