/* The product gallery: every captured screen in one scrollable row on the
   product's own plate, the way the App Store shows screenshots. It needs no
   JavaScript; site.js only adds previous/next buttons and a counter. */

.stage {
  --slide: clamp(12.5rem, 20vw, 16.5rem);
  --inset: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--plate);
}

.stage[data-layout="desktop"] {
  --slide: min(86%, 58rem);
}

.stage-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--slide);
  gap: clamp(1rem, 2.4vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inset);
  padding: 0 var(--inset) 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: oklch(0% 0 0 / 0.22) transparent;
}

.stage-track:focus-visible {
  outline-offset: -2px;
}

.stage-chapter {
  scroll-snap-align: start;
  min-width: 0;
}

.stage-media {
  display: block;
}

.stage-chapter img,
.stage-chapter video {
  width: 100%;
  background: oklch(0% 0 0);
}

.stage[data-layout="portrait"] .stage-chapter img,
.stage[data-layout="portrait"] .stage-chapter video {
  border-radius: 13% / 6%;
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.08);
}

.stage[data-layout="desktop"] .stage-chapter img,
.stage[data-layout="desktop"] .stage-chapter video {
  border-radius: 8px;
  box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.07), 0 24px 50px -30px oklch(0% 0 0 / 0.5);
}

.chapter-caption {
  margin-top: 0.9rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-2);
}

.chapter-caption strong {
  color: var(--ink);
  font-weight: 500;
}

.chapter-transcript {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.chapter-transcript summary {
  cursor: pointer;
  color: var(--ink);
}

.chapter-transcript p {
  margin-top: 0.5rem;
}

.stage-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-inline: var(--inset);
}

.stage-controls[hidden] {
  display: none;
}

.stage-count {
  margin-right: auto;
}

.stage-controls button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(0% 0 0 / 0.18);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.stage-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Intertitle's plate is dark: flip the captions and controls. */
.stage.plate--intertitle {
  color: var(--on-dark);
}

.stage.plate--intertitle .chapter-caption,
.stage.plate--intertitle .chapter-transcript,
.stage.plate--intertitle .stage-count {
  color: var(--on-dark-2);
}

.stage.plate--intertitle .chapter-caption strong,
.stage.plate--intertitle .chapter-transcript summary {
  color: var(--on-dark);
}

.stage.plate--intertitle .stage-track {
  scrollbar-color: oklch(100% 0 0 / 0.25) transparent;
}

.stage.plate--intertitle .stage-controls button {
  border-color: oklch(100% 0 0 / 0.25);
}

.stage.plate--intertitle .stage-chapter img {
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.1);
}

.stage-scope {
  max-width: 46rem;
  margin-top: 1.25rem;
}

/* Engineering detail stays one click away instead of stacked around the proof. */
.stage-disclosure {
  max-width: 52rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stage-disclosure summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.stage-disclosure summary::-webkit-details-marker {
  display: none;
}

.stage-disclosure summary::after {
  content: "+";
  color: var(--ink-2);
}

.stage-disclosure[open] summary::after {
  content: "−";
}

.stage-disclosure > p {
  color: var(--ink-2);
}

.stage-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  padding-block: 1.5rem;
}

.stage-disclosure h2 {
  font: 500 var(--text-sm) / 1.4 var(--font-sans);
}

.stage-disclosure ul {
  margin-top: 0.5rem;
  padding-left: 1.1em;
  font-size: 0.95rem;
  color: var(--ink-2);
}

.stage-disclosure li + li {
  margin-top: 0.35em;
}

@media (max-width: 44rem) {
  .stage-disclosure-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}