/* Player chrome only. Every rule is scoped under .sp.sp--nd 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--nd, 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--nd {
  --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, #0a7a45);
  --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--nd *, .sp.sp--nd *::before, .sp.sp--nd *::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--nd .sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "deck" "controls" "now" "full";
}
.sp.sp--nd .sp-stage { grid-area: deck; align-self: start; }
.sp.sp--nd .sp-now { grid-area: now; margin-top: 26px; }
.sp.sp--nd .sp-controls { grid-area: controls; }
.sp.sp--nd .sp-full { grid-area: full; }
@container (min-width: 1040px) {
  .sp.sp--nd .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--nd .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--nd .sp-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--sp-deep); border: 1px solid var(--sp-rule);
}
.sp.sp--nd .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--nd .sp-steps { display: inline-flex; align-items: center; gap: 2px; }
.sp.sp--nd .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--nd .sp-step:hover:not(:disabled) { color: var(--sp-text); }
.sp.sp--nd .sp-step:disabled { opacity: 0.3; cursor: default; }
.sp.sp--nd .sp-step[hidden] { display: none; }
.sp.sp--nd .sp-step:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
.sp.sp--nd .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--nd .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--nd .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--nd .sp-controls { margin-top: 12px; }
.sp.sp--nd .sp-bar { display: flex; align-items: center; gap: 8px; margin: 0; }
.sp.sp--nd .sp-btn, .sp.sp--nd .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--nd .sp-btn { font-size: 17px; line-height: 1; padding: 0 10px; }
.sp.sp--nd .sp-btn.sp-play { min-width: 52px; border-color: var(--sp-accent); color: var(--sp-accent); }
.sp.sp--nd .sp-btn:hover, .sp.sp--nd .sp-select:hover { border-color: var(--sp-t2); }
.sp.sp--nd .sp-select { padding: 0 8px; background: var(--sp-deep); max-width: 100%; }
.sp.sp--nd .sp-speed { font-size: 14px; }

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

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

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

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

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

.sp.sp--nd .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--nd .sp-bar { flex-wrap: wrap; }
  .sp.sp--nd .sp-track { order: 10; flex-basis: 100%; height: 20px; }
  .sp.sp--nd .sp-time { margin-left: auto; }
  .sp.sp--nd .sp-transcript p { font-size: 16px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp.sp--nd .sp-transcript p, .sp.sp--nd .sp-full summary::before { transition: none; }
  .sp.sp--nd .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--nd.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--nd.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--nd.sp--max .sp-stage { aspect-ratio: auto; height: 100%; min-height: 0; border: 0; }
.sp.sp--nd.sp--max .sp-controls { margin: 0; padding: 6px 16px 10px; background: var(--sp-deep); }
.sp.sp--nd.sp--max .sp-full { display: none; }
.sp.sp--nd.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--nd.sp--max .sp-now__text { min-height: 0 !important; }
.sp.sp--nd:fullscreen { background: var(--sp-deep); }