/* Compact chapters retain the connection actions; complete qualified facts
   and prose are available in the integrated reading view. */
#narrative {
  left: auto;
  right: 4.5%;
  top: clamp(5.75rem, 12vh, 9rem);
  width: clamp(20rem, 32vw, 29rem);
  max-width: calc(100vw - 2rem);
  max-height: calc(100svh - clamp(5.75rem, 12vh, 9rem) - 6rem);
  padding: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--es-line) transparent;
  scroll-padding-block: 0.5rem;
  container: narrative / inline-size;
  border-radius: var(--es-reading-softness);
  background: color-mix(
    in srgb,
    var(--es-ground) var(--es-reading-tint),
    transparent
  );
  box-shadow: 0 0 var(--es-reading-softness) var(--es-reading-softness)
    color-mix(in srgb, var(--es-ground) var(--es-reading-tint), transparent);
}
#narrative-kicker {
  margin: 0 0 0.3rem;
  color: var(--es-pore);
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
  letter-spacing: 0.02em;
  text-transform: none;
}
#narrative-title {
  margin: 0;
  max-width: none;
  font: var(--es-display-weight) clamp(1.35rem, 2vw, 1.9rem) / 1.15
    var(--es-font-display);
  letter-spacing: var(--es-display-tracking);
}
#narrative-title:focus {
  outline: none;
}
#narrative .editorial-rule {
  width: 2rem;
  margin: 0.6rem 0 0.75rem;
}
#narrative-keywords {
  display: grid;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  border: 0;
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--es-ink);
}
#narrative-keywords > span {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}
.spec-label {
  color: var(--es-ink);
  font-family: var(--es-font-data);
  font-size: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spec-value {
  min-width: 0;
  overflow-wrap: break-word;
}
#narrative-status {
  margin: 0.65rem 0 0;
  color: var(--es-ink);
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
  letter-spacing: 0;
  text-transform: none;
}
#narrative .protocol {
  margin-top: 0.65rem;
}
/* Each chapter's live monitor beside the body: its picture on the left and
   its numbers, in the sense's colour, on the right; the caption beneath.
   Sight's picture is the eye in depth, the iris and pupil beside the retina. */
.sense-monitor {
  --es-monitor-accent: var(--es-ink);
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
}
.sense-monitor[hidden],
.sense-monitor [hidden] {
  display: none;
}
.sense-monitor[data-sense="hear"] {
  --es-monitor-accent: var(--es-hear);
}
.sense-monitor[data-sense="move"] {
  --es-monitor-accent: var(--es-move);
}
.sense-monitor[data-sense="smell"] {
  --es-monitor-accent: var(--es-smell);
}
.sense-monitor[data-sense="taste"] {
  --es-monitor-accent: var(--es-taste);
}
.sense-monitor[data-sense="view"] {
  --es-monitor-accent: var(--es-view);
}
.sense-monitor[data-sense="touch"] {
  --es-monitor-accent: var(--es-touch);
}
.sense-monitor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--es-fundus-gap);
}
.sense-monitor-canvas {
  width: 100%;
  height: var(--es-monitor-height);
}
.sight-eye-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--es-fundus-size)));
  gap: var(--es-fundus-gap);
}
.sight-eye-view {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}
.sight-eye-view canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--es-line);
  border-radius: 50%;
}
.sight-eye-label {
  color: var(--es-ink);
  font: 500 var(--es-text-small) / 1.3 var(--es-font-body);
}
.sense-monitor-readings {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}
.sense-monitor-reading dt {
  color: var(--es-ink);
  font: 500 var(--es-text-small) / 1.25 var(--es-font-body);
}
.sense-monitor-reading dd {
  margin: 0;
  color: var(--es-monitor-accent);
  white-space: nowrap;
}
.sense-monitor-value {
  font: 500 var(--es-monitor-value-size) / 1.1 var(--es-font-data);
  font-variant-numeric: tabular-nums;
}
.sense-monitor-unit {
  margin-left: 0.25rem;
  font: 400 var(--es-text-small) / 1 var(--es-font-data);
}
.sense-monitor figcaption {
  color: var(--es-ink);
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
}
/* The panel is a bottom sheet on small or short screens: no room for it. */
@media (max-width: 899px), (max-height: 699px) {
  .sense-monitor {
    display: none;
  }
}
#narrative .protocol-orbits {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  align-items: stretch;
  gap: 0.25rem;
}
#narrative .protocol-orbits button {
  min-width: 44px;
  min-height: 44px;
  gap: 0.25rem;
  padding: 0.25rem 0;
  font: 400 var(--es-text-small) / 1.2 var(--es-font-body);
  text-align: center;
  overflow-wrap: normal;
}
#narrative .protocol-orbits button::before {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
}
#protocol-stage {
  margin: 0.4rem 0 0.25rem;
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
  letter-spacing: 0;
}
#protocol-description {
  margin: 0;
  font: 400 var(--es-text-small) / 1.35 var(--es-font-body);
}
#protocol-replay {
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0;
  font: 400 var(--es-text-small) / 1.3 var(--es-font-body);
}
.narrative-nav {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.25fr;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--es-glass-line);
}
.narrative-nav button {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--es-ink);
  font: 400 var(--es-text-small) / 1.2 var(--es-font-body);
  text-align: left;
  overflow-wrap: break-word;
  cursor: pointer;
  pointer-events: auto;
}
.narrative-nav button[hidden] {
  display: none;
}
.narrative-nav button:last-child {
  text-align: right;
}
.narrative-nav button:hover,
.narrative-nav button:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--es-pore);
  text-underline-offset: 0.3em;
}
#narrative-details {
  color: var(--es-ink);
}
#narrative:has(#narrative-details[open]) > :not(#narrative-details) {
  display: none;
}
#narrative-details > .chapter-detail-summary {
  display: none;
}
#narrative-details:not([open]) {
  display: none;
}
#narrative-detail-title {
  margin: 0;
  font: var(--es-dialog-title-weight) 1.5rem / 1.2 var(--es-font-display);
}
#narrative-body {
  max-width: none;
  margin: 1rem 0;
  color: var(--es-ink);
  font: 400 var(--es-text-body) / var(--es-line-body) var(--es-font-body);
}
#narrative-body[hidden] {
  display: none;
}
#narrative-detail-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--es-dialog-edge);
  border-radius: var(--es-radius-s);
  background: var(--es-dialog-control-surface);
  color: var(--es-ink);
  font: 400 var(--es-text-body) / 1.3 var(--es-font-body);
}
#narrative-details :focus-visible {
  outline: 2px solid var(--es-pore);
  outline-offset: 3px;
}
@media (min-width: 701px) {
  body.scene-focused .scene-caption,
  body.scene-focused .sequence-status {
    display: none;
  }
  body.scene-focused .ai-indicator {
    visibility: hidden;
  }
}
@media (max-width: 700px) {
  body.scene-focused {
    --es-chapter-clearance: max(
      5rem,
      calc(env(safe-area-inset-bottom) + 4.5rem)
    );
  }
  body.scene-focused:not(.text-only):not(.research-open) main:has(#narrative) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    height: 100svh;
    min-height: 0;
    padding: 5rem 0 var(--es-chapter-clearance);
    overflow: hidden;
  }
  body.scene-focused:not(.text-only):not(.research-open) #scene {
    position: relative;
    grid-row: 1;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
  }
  body.scene-focused:not(.text-only):not(.research-open) main #narrative {
    position: relative;
    grid-row: 2;
    inset: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    max-height: calc(100svh - 5rem - var(--es-chapter-clearance));
    padding: 0.5rem;
    margin: 0 1rem;
    overflow-y: auto;
  }
  #narrative-title {
    font-size: 1.2rem;
  }
  #narrative .editorial-rule {
    margin: 0.2rem 0 0.3rem;
  }
  #narrative-keywords {
    gap: 0.3rem;
  }
  #narrative-status,
  #narrative .protocol {
    margin-top: 0.4rem;
  }
  body.scene-focused .sequence-status {
    display: none;
  }
  body.scene-focused:not(.text-only):not(.research-open)
    main
    .tour-controls:not([hidden]) {
    position: static;
    grid-row: 3;
    inset: auto;
    margin: 0.5rem 1rem 0;
    justify-content: center;
  }
}
/* A short landscape screen uses the available width for two reading columns. */
@media (min-width: 701px) and (max-height: 540px) {
  #narrative {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "kicker protocol" "title protocol" "summary protocol" "status protocol" "nav nav";
    gap: 0.125rem 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    top: 4.5rem;
    width: auto;
    max-width: none;
    max-height: calc(100svh - 4.5rem - 4.5rem);
  }
  #narrative-kicker {
    grid-area: kicker;
    margin: 0;
  }
  #narrative-title {
    grid-area: title;
    font-size: 1.2rem;
  }
  #narrative .editorial-rule {
    display: none;
  }
  #narrative-status {
    grid-area: status;
    margin: 0;
  }
  #narrative .protocol {
    grid-area: protocol;
    margin: 0;
    display: block;
  }
  #narrative .protocol-orbits {
    grid-area: steps;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  #narrative .protocol-orbits button,
  #narrative .protocol-orbits button:nth-child(n + 4) {
    grid-column: auto;
  }
  #protocol-stage {
    grid-area: stage;
    margin: 0;
  }
  #protocol-description {
    grid-area: description;
  }
  #protocol-replay {
    grid-area: replay;
  }
  .narrative-nav {
    grid-area: nav;
    margin-top: 0;
  }
}
/* Contrast belongs to the full room, never to a rectangular text surface.
   Exclude the entry foreground, text fallback and native voice backdrop. */
body:not(.text-only):not(.entry-open) #scene {
  isolation: isolate;
}
body:not(.text-only):not(.entry-open):not(:has(#voice-choice-dialog[open]))
  #scene::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(
      in srgb,
      var(--es-ground) var(--es-platform-edge-tint),
      transparent
    ),
    color-mix(in srgb, var(--es-ground) var(--es-platform-tint), transparent)
      50%,
    color-mix(
      in srgb,
      var(--es-ground) var(--es-platform-edge-tint),
      transparent
    )
  );
  pointer-events: none;
}

/* Keywords first; the full explanation and provenance live in Details. */
#narrative-summary {
  margin: 0.8rem 0 0;
  color: var(--es-ink);
  font: 400 var(--es-text-small) / 1.4 var(--es-font-body);
}
#narrative-status {
  color: var(--es-muted);
  margin-top: 0.35rem;
}
#narrative .editorial-rule {
  display: none;
}
#narrative .protocol-orbits {
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 0.25rem;
}
#narrative .protocol-orbits button,
#narrative .protocol-orbits button:nth-child(n + 4) {
  grid-column: auto;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid var(--es-line);
}
#narrative .protocol-orbits button[data-active="true"] {
  border-bottom-color: var(--es-pore);
}
#protocol-stage {
  margin-top: 0.65rem;
}
#protocol-replay {
  color: var(--es-muted);
}
.narrative-nav {
  grid-template-columns: 1fr auto;
  grid-template-areas: "next next" "back details";
  gap: 0.25rem 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
#narrative-next {
  grid-area: next;
  text-align: center;
  padding: 0.6rem 1rem;
  border: 1px solid var(--es-pore);
  border-radius: var(--es-radius-s);
  background: var(--es-dialog-control-surface);
}
#narrative-back {
  grid-area: back;
}
#narrative-read-more {
  grid-area: details;
  text-align: right;
}
#narrative-details #narrative-keywords {
  margin-top: 1rem;
}
#narrative-details #protocol-description {
  margin-bottom: 1rem;
}
@media (min-width: 701px) and (max-height: 540px) {
  #narrative-summary {
    grid-area: summary;
    margin: 0.2rem 0;
  }
  .narrative-nav {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "back details next";
  }
}
@container narrative (max-width: 15rem) {
  #narrative .protocol-orbits {
    gap: 0;
  }
}

#narrative-detail-title:focus {
  outline: none;
}
#narrative-transcript {
  margin: 1rem 0;
}
#narrative-transcript summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font: 400 var(--es-text-body) / 1.4 var(--es-font-body);
  color: var(--es-ink);
}
#narrative-transcript summary::before {
  content: "+";
  margin-right: 0.75rem;
}
#narrative-transcript[open] summary::before {
  content: "−";
}

#narrative:has(#narrative-details[open]) {
  display: block;
}

@container narrative (max-width: 20rem) {
  #narrative-keywords > span {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}