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

   Same player as the Sandia talk, re-toned to the Nextdoor deck: white ground,
   Inter, and the deck's green accent. A host page can still override any of
   these through the unprefixed tokens.

   Every rule is scoped to .sp.sp--mfp, not .sp, so this player can share a page
   with the Sandia player (Graystone /talks/) without restyling it. The extra
   class also outranks the Sandia sheet's .sp rules wherever the two differ,
   such as the 1600x900 deck viewport. */
.sp.sp--mfp {
  --sp-bg: var(--bg, #ffffff);
  --sp-deep: var(--bg-deep, #f5f7f6);
  --sp-text: var(--text, #101713);
  --sp-t2: var(--text-2, #2b332e);
  --sp-muted: var(--text-muted, #6b7671);
  --sp-accent: var(--accent, #1756c9);
  --sp-rule: var(--rule, #e3e8e4);
  --sp-rule-strong: var(--rule-strong, #c9d2cc);
  --sp-sans: var(--sans, "Inter", 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--mfp *, .sp.sp--mfp *::before, .sp.sp--mfp *::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--mfp .sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "deck" "controls" "now" "full";
}
.sp.sp--mfp .sp-stage { grid-area: deck; align-self: start; }
.sp.sp--mfp .sp-now { grid-area: now; margin-top: 26px; }
.sp.sp--mfp .sp-controls { grid-area: controls; }
.sp.sp--mfp .sp-full { grid-area: full; }
@container (min-width: 1040px) {
  .sp.sp--mfp .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;
    grid-template-areas: "deck now" "controls now" "full full";
  }
  .sp.sp--mfp .sp-now { margin-top: 0; padding-top: 6px; }
}

/* The deck always gets a true 1600x900 viewport, the stage its deck mode is laid
   out for, and the player scales the whole iframe to fit (--sp-s is set by
   player.js). */
.sp.sp--mfp .sp-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sp-deep); border: 1px solid var(--sp-rule);
}
.sp.sp--mfp .sp-stage iframe {
  position: absolute; left: 0; top: 0; width: 1600px; height: 900px; max-width: none;
  border: 0; margin: 0; display: block;
  transform: translate(var(--sp-x, 0px), var(--sp-y, 0px)) scale(var(--sp-s, 0.5)); transform-origin: 0 0;
}

/* ---- current passage ----------------------------------------------------- */
.sp.sp--mfp .sp-steps { display: inline-flex; align-items: center; gap: 2px; }
.sp.sp--mfp .sp-step {
  font: inherit; font-family: var(--sp-sans); font-size: 14px; line-height: 1; letter-spacing: 0;
  color: var(--sp-muted); background: transparent; border: 0; border-radius: 3px;
  /* 24px: the minimum comfortable touch target; negative margin keeps the label row height */
  width: 24px; height: 24px; margin: -6px 0; padding: 0; cursor: pointer;
}
.sp.sp--mfp .sp-step:hover:not(:disabled) { color: var(--sp-text); }
.sp.sp--mfp .sp-step:disabled { opacity: 0.3; cursor: default; }
.sp.sp--mfp .sp-step[hidden] { display: none; }
.sp.sp--mfp .sp-step:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp.sp--mfp .sp-kicker {
  /* just the passage counter, right-aligned; the row keeps its height on
     single-passage pages so the text never shifts between pages */
  display: flex; justify-content: flex-end; gap: 12px; min-height: 13px;
  max-width: none; margin: 0 0 14px; padding: 0;
  font-family: var(--sp-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-muted);
}
.sp.sp--mfp .sp-now__text p {
  max-width: none; margin: 0; padding: 0 0 0 16px;
  border-left: 2px solid var(--sp-accent);
  font-size: 16px; line-height: 1.6; color: var(--sp-text);
  animation: sp-fade 0.45s ease both;
}
.sp.sp--mfp .sp-now__text .sp-empty { border-left-color: transparent; color: var(--sp-muted); font-style: italic; padding-left: 0; }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- controls: one primary row, one quiet row ---------------------------- */
.sp.sp--mfp .sp-controls { margin-top: 12px; }
.sp.sp--mfp .sp-bar { display: flex; align-items: center; gap: 8px; margin: 0; }
.sp.sp--mfp .sp-btn, .sp.sp--mfp .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--mfp .sp-btn { font-size: 17px; line-height: 1; padding: 0 10px; }
.sp.sp--mfp .sp-btn.sp-play { min-width: 52px; border-color: var(--sp-accent); color: var(--sp-accent); }
.sp.sp--mfp .sp-btn:hover, .sp.sp--mfp .sp-select:hover { border-color: var(--sp-t2); }
.sp.sp--mfp .sp-select { padding: 0 8px; background: var(--sp-deep); max-width: 100%; }
.sp.sp--mfp .sp-speed { font-size: 14px; }

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

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

.sp.sp--mfp .sp-where { display: flex; align-items: center; gap: 18px; margin: 6px 0 0; min-width: 0; }
.sp.sp--mfp .sp-where select.sp-quiet { flex: 0 1 auto; min-width: 0; }
.sp.sp--mfp .sp-where button.sp-quiet { flex: none; }
.sp.sp--mfp .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.sp--mfp select.sp-quiet { margin-left: -6px; }
.sp.sp--mfp select.sp-quiet option { background: var(--sp-deep); color: var(--sp-text); }
.sp.sp--mfp .sp-quiet:hover { color: var(--sp-text); border-color: var(--sp-rule); }

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

/* ---- full text, collapsed by default ------------------------------------- */
.sp.sp--mfp .sp-full { margin-top: 28px; border-top: 1px solid var(--sp-rule); }
.sp.sp--mfp .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--mfp .sp-full summary::-webkit-details-marker { display: none; }
.sp.sp--mfp .sp-full summary::before { content: "▸"; font-family: var(--sp-sans); letter-spacing: 0; transition: transform 0.2s; }
.sp.sp--mfp .sp-full[open] summary::before { transform: rotate(90deg); }
.sp.sp--mfp .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--mfp .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--mfp .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--mfp .sp-transcript p:last-child { margin-bottom: 0; }
.sp.sp--mfp .sp-transcript p.sp-on { color: var(--sp-text); border-left-color: var(--sp-accent); }
.sp.sp--mfp .sp-transcript .sp-empty { font-style: italic; cursor: default; border: 0; padding: 0; }

.sp.sp--mfp .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--mfp .sp-bar { flex-wrap: wrap; }
  .sp.sp--mfp .sp-track { order: 10; flex-basis: 100%; height: 20px; }
  .sp.sp--mfp .sp-time { margin-left: auto; }
  .sp.sp--mfp .sp-transcript p { font-size: 16px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp.sp--mfp .sp-transcript p, .sp.sp--mfp .sp-full summary::before { transition: none; }
  .sp.sp--mfp .sp-now__text p { animation: none; }
}

/* ---- Expand: the whole player full screen ---------------------------------
   The deck fills the screen and letterboxes (fitDeck); the current passage sits
   over its lower part as a caption; controls stay along the bottom. Also the
   fallback where an element cannot go full screen: the player fills the window. */
.sp.sp--mfp.sp--max { position: fixed; inset: 0; z-index: 2147483000; background: var(--sp-deep); margin: 0 !important; padding: 0; overflow: hidden; }
html.sp-maxed, html.sp-maxed body { overflow: hidden; }
.sp.sp--mfp.sp--max .sp-grid { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "deck" "controls"; column-gap: 0; row-gap: 0; }
.sp.sp--mfp.sp--max .sp-stage { aspect-ratio: auto; height: 100%; min-height: 0; border: 0; }
.sp.sp--mfp.sp--max .sp-controls { margin: 0; padding: 6px 16px 10px; background: var(--sp-deep); }
.sp.sp--mfp.sp--max .sp-full { display: none; }
.sp.sp--mfp.sp--max .sp-now { position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; width: min(1080px, calc(100vw - 32px));
  max-height: 30vh; overflow-y: auto; margin: 0; padding: 14px 22px 16px; max-width: none; z-index: 2;
  background: color-mix(in srgb, var(--sp-deep) 94%, transparent); border: 1px solid var(--sp-rule-strong); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.sp.sp--mfp.sp--max .sp-now__text { min-height: 0 !important; }
.sp.sp--mfp:fullscreen { background: var(--sp-deep); }