/* 原生连续图文章节：与地点无关的阅读、事实栏和章节导航。 */
.chapter-reader { --chapter-ink: var(--color-surface-deep); --chapter-line: var(--color-border); --chapter-closed-bg: color-mix(in srgb, var(--color-bg) 80%, var(--color-bg-alt)); --chapter-open-bg: color-mix(in srgb, var(--color-border) 65%, var(--color-bg-alt)); }
.chapter-reader-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.chapter-reader-tools p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-small); line-height: 1.8; }
.chapter-reader-tools .btn { flex-shrink: 0; }
.chapter-reader-tools, .reader-chapter__footer { --color-primary: var(--chapter-ink); }
.chapter-reader-tools .btn[hidden] { display: none; }
.chapter-reader-list { border-top: 1px solid var(--chapter-ink); }
.reader-chapter { border-bottom: 1px solid var(--chapter-line); scroll-margin-top: calc(var(--navbar-height) + 24px); }
.reader-chapter__summary { display: flex; align-items: center; gap: var(--spacing-lg); padding: var(--spacing-lg) var(--spacing-md); list-style: none; cursor: pointer; background: var(--chapter-closed-bg); scroll-margin-top: calc(var(--navbar-height) + 24px); }
.reader-chapter__summary::-webkit-details-marker { display: none; }
.reader-chapter__summary:hover { background: color-mix(in srgb, var(--chapter-closed-bg) 90%, var(--color-border)); }
.reader-chapter[open] > .reader-chapter__summary { background: var(--chapter-open-bg); box-shadow: inset 3px 0 var(--color-accent), inset 0 -1px var(--chapter-line); }
.reader-chapter[open] > .reader-chapter__summary:hover { background: color-mix(in srgb, var(--chapter-open-bg) 90%, var(--color-accent)); }
.reader-chapter__summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.reader-chapter__number { flex: 0 0 64px; color: var(--color-accent); font: 400 var(--fs-h1)/1 var(--font-heading); }
.reader-chapter__heading { flex: 1; min-width: 0; }
.reader-chapter__name { display: flex; align-items: center; gap: var(--spacing-md); color: var(--chapter-ink); font: 600 var(--fs-h2)/1.4 var(--font-heading); }
.reader-chapter__direction { color: var(--color-text-secondary); font: 400 var(--fs-small)/1.5 var(--font-body); border-left: 1px solid var(--chapter-line); padding-left: var(--spacing-md); }
.reader-chapter__question { display: block; margin-top: var(--spacing-sm); color: var(--color-text-secondary); line-height: 1.7; font-size: var(--fs-body); }
.reader-chapter__toggle { display: flex; align-items: center; gap: var(--spacing-md); color: var(--chapter-ink); font-size: var(--fs-small); }
.reader-chapter__sign { position: relative; display: block; width: 24px; height: 24px; }
.reader-chapter__sign::before, .reader-chapter__sign::after { content: ''; position: absolute; background: currentColor; }
.reader-chapter__sign::before { width: 16px; height: 1px; left: 4px; top: 12px; }
.reader-chapter__sign::after { height: 16px; width: 1px; left: 12px; top: 4px; }
.reader-chapter__collapse, .reader-chapter[open] .reader-chapter__expand, .reader-chapter[open] .reader-chapter__sign::after { display: none; }
.reader-chapter[open] .reader-chapter__collapse { display: inline; }
.reader-chapter__body { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-xl); }
.chapter-position { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--spacing-md); margin: var(--spacing-xl) 0; padding: var(--spacing-md) var(--spacing-lg); background: color-mix(in srgb, var(--color-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent); color: var(--color-text); font-size: var(--fs-small); line-height: 1.9; }
.chapter-position__label { color: var(--chapter-ink); font-weight: 600; white-space: nowrap; }
.chapter-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr); gap: var(--spacing-2xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--chapter-line); }
.chapter-reading__facts { min-width: 0; padding-right: var(--spacing-xl); border-right: 1px solid var(--chapter-line); }
.chapter-facts { display: grid; gap: var(--spacing-lg); }
.chapter-facts dt { margin-bottom: var(--spacing-xs); color: var(--color-text-secondary); font-size: var(--fs-small); }
.chapter-facts dd { margin: 0; color: var(--chapter-ink); line-height: 1.8; font-size: var(--fs-body); }
.chapter-explanation { display: grid; gap: var(--spacing-lg); }
.chapter-explanation dt, .chapter-story h4 { margin: 0 0 var(--spacing-sm); color: var(--chapter-ink); font: 600 var(--fs-body)/1.7 var(--font-body); }
.chapter-explanation dd, .chapter-story p { margin: 0; color: var(--color-text); line-height: 1.95; font-size: var(--fs-body); }
.chapter-story > div { margin-top: var(--spacing-lg); }
.reader-chapter__footer { display: flex; justify-content: space-between; gap: var(--spacing-md); padding-top: var(--spacing-xl); margin-top: var(--spacing-xl); border-top: 1px solid var(--chapter-line); }
.reader-chapter__footer .btn { white-space: normal; text-align: left; }
@media (max-width: 1000px) {
  .chapter-reading { gap: var(--spacing-xl); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 767px) {
  .chapter-reader-tools { align-items: flex-start; gap: var(--spacing-md); }
  .chapter-reader-tools .btn { padding-inline: var(--spacing-md); }
  .reader-chapter__summary { gap: var(--spacing-md); align-items: flex-start; padding-inline: var(--spacing-sm); }
  .reader-chapter__number { flex-basis: 32px; font-size: var(--fs-h2-mobile); padding-top: var(--spacing-xs); }
  .reader-chapter__name { font-size: var(--fs-h2-mobile); gap: var(--spacing-sm); }
  .reader-chapter__direction { padding-left: var(--spacing-sm); }
  .reader-chapter__question { font-size: var(--fs-small); }
  .reader-chapter__toggle { padding-top: var(--spacing-xs); }
  .reader-chapter__expand, .reader-chapter[open] .reader-chapter__collapse { display: none; }
  .chapter-position { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); padding: var(--spacing-md); }
  .chapter-reading { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
  .chapter-reading__facts { padding: 0 0 var(--spacing-lg); border-right: 0; border-bottom: 1px solid var(--chapter-line); }
  .chapter-facts > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--spacing-md); }
  .chapter-facts dt { margin: 0; line-height: 1.8; }
  .reader-chapter__footer { flex-wrap: wrap; }
  .reader-chapter__footer .btn { flex: 1 1 auto; padding-inline: var(--spacing-md); }
}