/* Essays and fieldnotes: one reading column at the Guide's text edge.
   Sections are Player steps, not visual dividers. */
.cm-reading { max-width: var(--cm-reading-width); }
.cm-reading .pmx-document { max-width: var(--cm-reading-width); margin-inline: 0; }
html:not([data-pmx-play-mode="presentation"]) .cm-reading .pmx-document > [data-pmx-block] { border-block-end: 0; padding-block-end: 0; }
.cm-reading h1 { margin: var(--cm-space-3) 0 var(--cm-space-4); font-size: var(--cm-text-essay-title); line-height: var(--cm-leading-display); letter-spacing: var(--cm-tracking-display); text-wrap: balance; }
.cm-reading h2 { font-size: var(--cm-text-statement); }
.cm-reading h3 { font-size: var(--cm-text-term); }
.cm-reading h4 { font-size: var(--cm-text-definition); }
.cm-reading :is(h2, h3, h4) {
  font-weight: var(--cm-weight-heading);
  line-height: var(--cm-leading-heading);
  letter-spacing: var(--cm-tracking-heading);
  text-wrap: pretty;
  margin-block: var(--cm-space-6) var(--cm-space-3);
}
.cm-reading h2:not([data-cm-ui] h2) { margin-block-start: var(--cm-space-7); }
.cm-reading p { margin-block: var(--cm-space-4); }
.cm-reading img { max-height: 48rem; object-fit: contain; }


/* the shared reading measure, centered independently of the Guide. */
.cm-reading.cm-reader { position: relative; margin-inline: auto; padding-top: var(--cm-space-5); }
.cm-reader-series { display: flex; flex-wrap: wrap; gap: var(--cm-space-2) var(--cm-space-4); align-items: baseline; color: var(--pmx-color-muted); font: var(--cm-text-label)/var(--cm-leading-label) var(--cm-font-label); letter-spacing: var(--cm-tracking-label); text-transform: uppercase; }
.cm-reader-series a { color: inherit; text-decoration: none; }
.cm-reader-series a:hover { color: var(--pmx-color-fg); }
.cm-reader-series > span { white-space: nowrap; }
.cm-reader h1 { margin-top: var(--cm-space-3); }
.cm-reader-contents { --pmx-toc-layout: inline; margin-block: var(--cm-space-3); }
.cm-reader-contents .pmx-toc { font-family: var(--cm-font-label); font-size: var(--cm-text-label); border: 0; }
.cm-reader-contents .pmx-toc__title { font: inherit; }
.cm-reader-contents .pmx-toc-current { display: none; }
.cm-reader-continuation { margin-top: var(--cm-space-8); padding-top: var(--cm-space-5); border-top: 1px solid var(--pmx-color-border); }
.cm-reader-next { display: grid; gap: var(--cm-space-2); text-decoration: none; }
.cm-reader-next > span { font: var(--cm-text-label)/1.4 var(--cm-font-label); text-transform: uppercase; letter-spacing: var(--cm-tracking-label); color: var(--pmx-color-muted); }
.cm-reader-next > strong { font: var(--cm-weight-heading) var(--cm-text-term)/var(--cm-leading-heading) var(--pmx-font-heading); }
.cm-reader-continuation > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cm-space-3); margin-top: var(--cm-space-5); font-size: var(--cm-text-small); }
@container reading (min-width: 70rem) {
  .cm-reader .pmx-document figure { width: calc(100% + 6rem); max-width: none; margin-inline: -3rem; }
  .cm-reader-contents { --pmx-toc-layout: sidebar; position: fixed; top: 30vh; right: var(--cm-page-start); width: 3rem; margin: 0; z-index: 10; transition: width 180ms ease-out; }
  .cm-reader-contents .pmx-toc { overflow: visible; }
  .cm-reader-contents .pmx-toc__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cm-reader-contents .pmx-toc-path-frame { padding: var(--cm-space-2); border-radius: var(--cm-button-radius); }
  .cm-reader-contents .pmx-toc-route { display: none; }
  .cm-reader-contents .pmx-toc-list .pmx-toc-list { margin-inline-start: .5rem; }
  .cm-reader-contents .pmx-toc-link { font-size: var(--cm-text-label); min-height: 32px; padding: .5rem 0; color: transparent; white-space: nowrap; overflow: hidden; transition: color 160ms ease-out, padding 180ms ease-out; }
  .cm-reader-contents .pmx-toc-link::before { width: 1.5rem; height: 1px; border-radius: 0; left: 0; top: 50%; }
  .cm-reader-contents:is(:hover,:focus-within) { width: 15rem; }
  .cm-reader-contents:is(:hover,:focus-within) .pmx-toc-path-frame { background: var(--pmx-color-bg); box-shadow: 0 0 2rem var(--pmx-color-bg); }
  .cm-reader-contents:is(:hover,:focus-within) .pmx-toc-link { color: var(--pmx-toc-link-color); padding-inline-start: 2rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) { .cm-reader-contents, .cm-reader-contents .pmx-toc-link { transition: none; } }