/* Scrolling one-page version of the deck.
   It loads styles.css first for the palette and the shared components
   (timeline, pipeline, cards, callouts, the matching schematic), then undoes
   the parts of .slide that only make sense for a full-screen presentation. */

html,
body.report {
  height: auto;
  overflow: visible;
  background: var(--paper);
  scroll-behavior: smooth;
}

/* .slide is reused so the timeline and pipeline animations still apply,
   but it must flow down the page instead of stacking absolutely */
.report .slide {
  position: static;
  inset: auto;
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  background: none;
}

.report .slide::before,
.report .slide::after {
  content: none;
}

/* ---------- page furniture ---------- */

.rp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3rem) 5rem;
}

.rp-hero {
  position: relative;
  margin-bottom: clamp(2rem, 4vh, 3.4rem);
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid var(--line);
}

.rp-hero h1 {
  margin-bottom: 0.8rem;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.rp-meta {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rp-section {
  padding: clamp(2.2rem, 5vh, 3.6rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 4.5rem;
}

.rp-section:first-of-type {
  border-top: 0;
}

.rp-section > h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
}

.rp-lede {
  max-width: 72ch;
  margin-bottom: 1.6rem;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  line-height: 1.6;
}

/* two columns that collapse on narrow screens */
.rp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.8rem);
  align-items: start;
}

/* ---------- figures ---------- */

.rp-figure {
  margin: 1.6rem 0 0;
}

.rp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.rp-figure figcaption {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: clamp(0.78rem, 0.98vw, 0.92rem);
  line-height: 1.5;
}

/* the case animation is tall and heavy; keep it from dominating the page */
.rp-figure--anim img {
  max-width: 620px;
  margin: 0 auto;
  cursor: default;
}

.rp-note {
  margin-top: 1.4rem;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(var(--gold-rgb), 0.10);
  font-size: clamp(0.9rem, 1.12vw, 1.05rem);
  line-height: 1.55;
}

/* ---------- sticky contents rail ---------- */

.rp-toc {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-bottom: 0.6rem;
  padding: 0.7rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(253, 249, 245, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(0.68rem, 0.88vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rp-toc a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.rp-toc a:hover {
  color: var(--blue);
}

.rp-takeaways {
  margin: 0;
  padding-left: 1.3rem;
  max-width: 78ch;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.6;
}

.rp-takeaways li {
  margin-bottom: 0.8rem;
}

.rp-foot {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.rp-foot a {
  color: var(--blue);
}

/* the deck's own chrome has no place here */
.report .controls,
.report .counter,
.report .progress,
.report .notes-panel {
  display: none !important;
}

@media (max-width: 720px) {
  .rp-toc {
    gap: 0.25rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body.report {
    scroll-behavior: auto;
  }
}

/* ---------- content must not depend on JavaScript ----------
   In the deck these start hidden and are revealed by .replay. On a page you
   scroll, anything gated behind an observer risks staying invisible, so the
   finished state is the default here and .replay only re-runs the motion. */

.report .lt-bar { transform: scaleX(1); }
.report .lt-dot { transform: scale(1); }
.report .lt-tip,
.report .lt-overlap,
.report .lt-converge,
.report .pl-node::after,
.report .pl-node--match::before {
  opacity: 1;
}

/* ---------- live charts inside the read-through ---------- */

.rp-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: 1.6rem 0 0.9rem;
}

/* the deck sizes these from the slide height; here they need their own box */
.report .chart-box {
  height: min(46vh, 380px);
  flex: none;
}

.report .fig-link {
  margin-left: 0.5rem;
  vertical-align: middle;
}