.narration-captions {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin-block: 0.55rem;
  padding: 0.4rem 0.65rem 0.6rem;
  border: 1px solid var(--es-line, currentColor);
  border-radius: 0.85rem;
  background: var(--es-paper, var(--es-bg, transparent));
  color: var(--es-ink, inherit);
}

.narration-captions[hidden],
.narration-captions [hidden] {
  display: none !important;
}

.narration-captions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.65rem;
  min-inline-size: 0;
}

.narration-captions__label {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

.narration-captions__toggle {
  flex: 0 1 auto;
  min-inline-size: 44px;
  min-block-size: 44px;
  max-inline-size: 100%;
  margin: 0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.narration-captions__toggle:focus-visible,
.narration-captions__line:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.narration-captions__line {
  min-inline-size: 0;
  max-inline-size: 60ch;
  min-block-size: 1.5em;
  max-block-size: 4.65em;
  margin: 0.1rem 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.55;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
}

.narration-captions__current {
  font-weight: 650;
}

/* Main speech replaces the concise summary in its existing reading row.
   Failure text keeps its label; actual spoken words need no duplicate label. */
#narrative:has(#main-narration-captions:not([hidden])) > #narrative-summary {
  display: none;
}
#narrative #main-narration-captions:not([hidden]) {
  margin-block: 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;
}
#narrative #main-narration-captions .narration-captions__line {
  max-block-size: 3.1em;
}
#narrative
  #main-narration-captions[data-mode="words"]
  .narration-captions__header {
  display: none;
}

/* Mount inside the existing overview/narrative card, never as a new main grid row.
   No animation or smooth scroll is used, including under reduced motion. */
@media (max-width: 700px) {
  .narration-captions {
    margin-block: 0.35rem;
    padding: 0.25rem 0.5rem 0.45rem;
    border-radius: 0.7rem;
  }
  .narration-captions__line {
    max-block-size: 4.65em;
    font-size: 0.875rem;
  }
}

/* During recorded speech the compact chapter leads with its heading and the
   spoken words. Details and the connection controls retain their native scroll
   flow. The larger 9rem lane is still within the mobile card's 6–9rem range and
   reserves room for wrapped French headings and enlarged text. Only the inner caption
   line scrolls at word boundaries; the card resets once when a chapter changes. */
@media (max-width: 700px) {
  body.scene-focused:not(.text-only):not(.newsletter-open):not(
      .research-open
    ):not(.is-guided-intro)
    main:has(
      > #narrative #main-narration-captions[data-mode="words"]:not([hidden])
    ) {
    --es-mobile-reading-height: 9rem;
  }
  body.scene-focused:not(.text-only):not(.newsletter-open):not(
      .research-open
    ):not(.is-guided-intro)
    #narrative:has(#main-narration-captions[data-mode="words"]:not([hidden]))
    > :is(#narrative-kicker, #narrative-summary) {
    display: none;
  }
}

/* The room reuses its existing fixed reading surface above the player. */
#room-caption {
  pointer-events: auto;
  min-inline-size: 0;
  width: min(40rem, calc(100vw - 2rem));
  max-block-size: min(40svh, 22rem);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: start;
}
#room-caption .narration-captions {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
#room-transcript summary {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  cursor: pointer;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
#room-caption-line,
#room-caption-attribution {
  margin-block: 0.35rem;
  overflow-wrap: anywhere;
}
#room-transcript summary:focus-visible,
#investor-transcript:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
#investor-narration-captions {
  max-inline-size: 52ch;
}
#investor-word-captions {
  flex: 0 0 auto;
  min-inline-size: 44px;
}
@media (max-width: 700px) {
  #room-caption {
    left: 1rem;
    right: 1rem;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
    transform: none;
    max-width: none;
    width: auto;
    max-block-size: min(34svh, 14rem);
  }
  body:has(#player-camera[aria-expanded="true"]) #room-caption {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 9.75rem);
  }
  .investor-player:has(#investor-word-captions) {
    flex-wrap: wrap;
  }
}