/* Chapter navigation stays beside long reading on wide screens, above it on phones. */
.together-app:has(.together-reading) { max-width: 66rem; container-name: together-reading; container-type: inline-size; }
.together-app:has(.together-reading) > h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); text-align: center; margin-bottom: var(--space-4); }
.together-app:has(.together-reading) .result-pair { max-width: 13rem; }
.together-app:has(.together-reading) .result-pair .stage { margin-block: var(--space-3); }
.together-app:has(.together-reading) > .primary { max-width: 28rem; display: block; margin: var(--space-6) auto 0; }
.together-reading { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
.reading-intro { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: var(--text-small); line-height: 1.7; margin: var(--space-4) 0 var(--space-7); }
.together-reading .topic-choices { position: sticky; top: var(--space-5); display: grid; gap: var(--space-2); counter-reset: chapters; }
.together-reading .topic-choice { position: relative; min-width: 0; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--space-3); align-content: start; padding: var(--space-4); border: 1px solid transparent; border-radius: var(--control-radius); text-align: left; color: var(--muted); transition: background-color var(--control-duration), border-color var(--control-duration); }
.topic-choice::before { counter-increment: chapters; content: counter(chapters, decimal-leading-zero); grid-row: 1 / 3; font-size: .8125rem; font-weight: 700; padding-top: .125rem; font-variant-numeric: tabular-nums; }
.topic-choice strong { font-size: var(--text-body); line-height: 1.5; }
.topic-choice span { grid-column: 2; margin-top: var(--space-1); font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.together-reading .topic-choice[aria-pressed="true"] { color: var(--accent); background: var(--rose); border-color: var(--accent); }
.together-reading .topic-choice:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--white); border-color: var(--line); }
.topic-reading { min-width: 0; padding: 0; border: 0; }
.reading-chapter { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.reading-chapter-number { color: var(--accent); font-size: var(--text-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.reading-chapter h2 { margin: 0; font-size: 1.5rem; scroll-margin-top: var(--space-5); }
.reading-part { margin-bottom: var(--space-6); }
.topic-reading .reading-part h3 { margin: 0 0 var(--space-4); font-size: var(--text-body); }
.reading-part-summary { padding: var(--space-5); border: var(--comic-line) solid var(--comic-frame); border-radius: var(--panel-radius) var(--panel-radius) var(--panel-radius) var(--space-2); background: var(--white); box-shadow: var(--panel-shadow); }
.reading-part-summary .reading-paragraph { margin: 0; line-height: 1.9; }
.reading-part-summary h3 { color: var(--accent); }
.reading-part-suggestion { padding-top: var(--space-4); }
.reading-part .reading-dialogue { margin-bottom: 0; }
.reading-part .dialogue-line { border: 1.5px solid var(--comic-frame); }
.reading-part .dialogue-speaker { display: flex; align-items: center; gap: var(--space-2); }
.reading-part .dialogue-speaker::before { content: ""; width: .5rem; height: .5rem; background: var(--accent); border-radius: 50%; }
.reading-part .dialogue-b .dialogue-speaker { justify-content: flex-end; }
.reading-part .dialogue-b .dialogue-speaker::before { background: var(--muted); }
.reading-part-coordination { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.reading-part-coordination .reading-paragraph { margin: 0; }
.reading-pagination { display: flex; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-5); margin-top: var(--space-7); }
.reading-next, .reading-previous { min-width: 0; flex: 1 1 10rem; min-height: var(--control-height); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--control-radius); font-size: var(--text-small); font-weight: 700; }
.reading-next { color: var(--accent); background: var(--rose); border-color: var(--rose); }
.reading-next:hover { border-color: var(--accent); }
.reading-previous { color: var(--muted); }
.reading-to-index { display: block; margin: var(--space-3) auto var(--space-6); color: var(--muted); font-size: var(--text-small); }
.reading-extra, .reading-guidance, .original-reading { grid-column: 2; }
.reading-extra { margin-top: var(--space-4); }
.reading-extra > summary, .reading-guidance summary { min-height: var(--touch); padding-block: var(--space-3); cursor: pointer; font-size: var(--text-small); }
.reading-guidance { padding-block: var(--space-5); font-size: var(--text-small); line-height: 1.7; }
.original-reading { padding-block: var(--space-5); margin-bottom: 0; }
.topic-limitation { color: var(--muted); }
/* 13rem contents + 3rem gap + a reading column of at least 24rem. */
@container together-reading (width < 40rem) {
  .together-reading { display: block; }
  .reading-intro { margin-bottom: var(--space-5); text-align: left; }
  .together-reading .topic-choices { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-6); }
  .together-reading .topic-choice { padding: var(--space-3); column-gap: var(--space-2); border-color: var(--line); background: var(--white); }
  .topic-choice::before { grid-row: 1; }
  .topic-choice span { grid-column: 1 / -1; }
  .reading-part-summary { padding: var(--space-4); }
  .reading-extra, .reading-guidance, .original-reading { grid-column: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .reading-part-summary { animation: scene-arrive 220ms ease-out; }
}
@media (prefers-reduced-motion: reduce) { .together-reading .topic-choice { transition: none; } }