/*****************************************************
SCROLLSTORY SOURCE DEMO

A large scrolling story, with its editable text file available on request.
The static version shows every image and the complete source. Opening the
editor places the story beside its text on desktop, or above it on mobile.

Loads:    every page
Used by:  scrollstory/source-demo.html
Needs:    base.css tokens and container grid; home.css --home-measure
Not here: full-page scrolling backgrounds (backgrounds.css), or the homepage's
          three editorial examples (editorial-demo.css)
*****************************************************/

.container > .story-demo {
  grid-column: full;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--text-section-warm);
  background: var(--bg-section-warm);
}

.story-demo-inner {
  max-width: var(--home-measure);
  margin-inline: auto;
}

.story-demo-heading {
  margin: 0 0 var(--spacing-sm);
  color: inherit;
}

.story-demo-intro { margin-bottom: var(--spacing-lg); }
.story-demo-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}

.story-demo--editing .story-demo-pair {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.story-demo-toggle {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* Keep the story in view while a desktop reader edits the longer source. */
.story-demo-pair > :first-child {
  position: sticky;
  top: calc(var(--spacing-xl) + var(--spacing-sm));
}

.story-demo-label {
  display: block;
  margin: 0 0 var(--spacing-xs);
  font-size: 0.9rem;
  font-weight: 700;
}

.story-demo-instruction,
.story-demo-hint,
.story-demo-error {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.85rem;
}

.story-demo-hint { margin-top: var(--spacing-xs); }
.story-demo-error:empty { display: none; }
.story-demo-error {
  padding: var(--spacing-sm);
  color: var(--text-body);
  background: var(--bg-card);
  border-left: 4px solid var(--error);
}

.story-demo-viewport {
  position: relative;
  color: var(--text-body);
  background: var(--bg-card);
  border: 1px solid var(--text-muted);
}

.story-demo-still { display: block; width: 100%; }
.story-demo-card {
  max-width: 28rem;
  padding: var(--spacing-md);
  color: var(--text-body);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.story-demo-card :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-serif);
  color: var(--text-body);
  text-transform: none;
}
.story-demo-card p { margin: 0 0 var(--spacing-sm); font-size: 1rem; }
.story-demo-card > :last-child { margin-bottom: 0; }

.story-demo--ready .story-demo-viewport {
  height: var(--story-demo-height);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.story-demo--ready .story-demo-still { display: none; }
.story-demo-background {
  position: sticky;
  top: 0;
  height: var(--story-demo-height);
  margin-bottom: calc(-1 * var(--story-demo-height));
  pointer-events: none;
}
.story-demo-background img { width: 100%; height: 100%; object-fit: cover; }
.story-demo--ready .story-demo-scenes {
  position: relative;
}
.story-demo--ready .story-demo-step {
  display: flex;
  align-items: center;
  min-height: var(--story-demo-height);
  padding: var(--spacing-md);
}
.story-demo--ready .story-demo-card { width: 82%; }
.story-demo--ready .story-demo-viewport--right .story-demo-card { margin-left: auto; }
.story-demo--ready .story-demo-viewport--center .story-demo-card { margin-inline: auto; }

.story-demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: 0.85rem;
}
.story-demo-controls > div { display: grid; gap: var(--spacing-xs); font-size: 0.85rem; }
.story-demo-controls label { margin: 0; }
.story-demo-controls :is(select, button) {
  padding: var(--spacing-xs);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  background: var(--bg-card);
  font: inherit;
  cursor: pointer;
}
.story-demo-editor,
.story-demo-static {
  display: block;
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  background: var(--bg-editorial-note);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  overflow: hidden;
  resize: none;
}
.story-demo-static { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-demo-static code { padding: 0; border: 0; font: inherit; color: inherit; background: transparent; }
.story-demo [hidden] { display: none; }
.story-demo :is(button, select, textarea, .story-demo-viewport):focus-visible {
  outline: 2px solid var(--text-section-warm);
  outline-offset: var(--spacing-xs);
}

@media (max-width: 850px) {
  .story-demo--editing .story-demo-pair { grid-template-columns: minmax(0, 1fr); }
  .story-demo-pair > :first-child { position: static; }
}
@media (max-width: 600px) {
  .container > .story-demo { padding-inline: var(--spacing-sm); }
  .story-demo-editor, .story-demo-static { font-size: 1rem; }
  .story-demo--ready .story-demo-card { width: 92%; }
  .story-demo-controls :is(select, button) { font-size: 1rem; }
}