/* A reversible visual layer. Content, charts and navigation remain in reader.css. */
:root {
  --paper: #f8f5ef;
  --surface: #fffdf9;
  --ink: #332c27;
  --muted: #766d62;
  --line: #e5dcd0;
  --accent: #935739;
  --sand: #f4ebdf;
  --rose: #f4e8e1;
  --sage: #eaf0e9;
  --answer: #3f665d;
  --grid-ink: #9b8870;
}

body { background: #f8f5ef; color: #332c27; }
::selection { background: #ead8bd; color: #332c27; }
button { border-radius: 8px; border-color: var(--line); transition: background-color .15s, color .15s; }
button:hover { background: #f0e5d7; }
button[aria-pressed="true"] { background: #895035; color: #fffdf9; border-color: #895035; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline-color: #895035; }

.topbar {
  background: rgba(255, 253, 249, .97);
  border-bottom-color: #e7dfd4;
  box-shadow: 0 3px 18px rgba(75, 54, 30, .035);
}
.book-brand { font-family: var(--ui); font-size: 16px; font-weight: 600; letter-spacing: .025em; }
.brand-mark { color: var(--accent); border-right-color: #dfd0be; }
.top-controls > button { background: #f5eee4; border-color: transparent; }
.top-controls > button:hover { background: #eee0cf; }
.mode-controls { padding: 3px; background: #f5efe6; border: 0; border-radius: 10px; }
.mode-controls button { border-radius: 7px; padding: 7px 11px; }
.font-controls button { color: #685a4c; }

.book-layout { gap: 28px; padding: 28px 24px 0; grid-template-columns: 260px minmax(0, 1fr); }
.desktop-toc {
  padding: 18px 14px 28px 4px;
  border-right: 0;
  scrollbar-width: thin;
  scrollbar-color: #d6c6b2 transparent;
}
.sidebar-title { color: #544235; letter-spacing: .09em; font-size: 13px; }
.sidebar-caption { color: var(--muted); margin-bottom: 24px; }
.preface-link { color: #6e5140; }
.desktop-toc .volume > summary,
.contents-dialog .volume > summary {
  background: #f0e7da;
  padding: 12px 13px;
  border-radius: 10px;
  border: 1px solid #e9dfd1;
  color: #624532;
  font: 600 16px/1.5 var(--ui);
}
.desktop-toc .volume[data-volume="2"] > summary,
.contents-dialog .volume[data-volume="2"] > summary { background: #f2e8e1; color: #714d3d; }
.volume-number { color: inherit; font-family: Georgia, serif; opacity: .85; }
.volume > summary::after, .toc-section > summary::after { color: #907456; }
.toc-section > summary { color: #5b5045; padding: 10px 4px; }
.toc-section > summary:hover { color: var(--accent); }
.section-number { color: #857461; font-variant-numeric: tabular-nums; }
.case-link { border-radius: 0 8px 8px 0; }
.case-link:hover { background: #f2e9dc; }
.case-link[aria-current] { background: #ebddca; border-left-color: #9b603e; color: #4e3526; }
.case-link small { color: #875638; }
.case-outline a { color: #70685e; }
.case-outline a:hover { color: #895035; }
.subsection-group { border-left-color: #ddcbb4; }
.subsection-group > summary { color: #7a593f; }
.full-toc-button { background: #f3eade; color: #6e503a; border-color: #e4d6c5; }
.keyboard-hint { color: #85796c; line-height: 1.8; }

.reading {
  padding: 44px 56px 76px;
  background: #fffdf9;
  color: #332c27;
  border: 1px solid #eee7dd;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(68, 48, 23, .035);
}
body[data-mode="bilingual"] .reading { padding: 44px 40px 76px; }
.case-header {
  margin: 0 -20px 32px;
  padding: 24px 20px 22px;
  background-color: #f6eee3;
  background-image: linear-gradient(115deg, #f4e8d8 0%, #f9f3e9 100%);
  border-radius: 12px;
  border-top: 3px solid #ceb28b;
}
.case-header h1 {
  font-family: var(--ui);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.025em;
  color: #4b3528;
  margin-top: 19px;
}
.case-header h1 > .en { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.015em; }
body[data-mode="bilingual"] .case-header h1 > .en { color: #75624f; font-size: 22px; line-height: 1.4; }
.eyebrow { color: #875638; font-weight: 500; letter-spacing: .07em; }
.eyebrow-rule { background: #d7bea0; width: 24px; }
.case-code { padding: 3px 9px; border-radius: 5px; background: rgba(255, 253, 249, .8); color: #7a4b30; }
.case-count { color: #786b5b; font-variant-numeric: tabular-nums; }
.case-meta { border: 0; padding-bottom: 0; color: #7a6a58; gap: 12px; }
.source-title { color: #796957; }
.in-case-nav { background: #faf5ec; border: 1px solid #ece0cf; border-radius: 9px; padding: 11px 14px; }
.in-case-nav > summary { font-weight: 500; color: #805332; }
.in-case-nav .case-outline { border-left-color: #dac4a9; }

.text-block { line-height: 1.95; margin-bottom: 1.25em; }
.text-block.heading { margin-top: 2.35em; margin-bottom: .9em; }
.text-block.heading h2 {
  font-family: var(--ui);
  font-size: 1.18em;
  font-weight: 600;
  line-height: 1.6;
  color: #784a30;
  padding: 7px 0 7px 13px;
  border-left: 3px solid #c4a176;
  background: linear-gradient(90deg, #f7eee1 0%, rgba(247, 238, 225, 0) 90%);
}
.text-block.heading h3 { font-family: var(--ui); color: #76513c; font-size: 1.03em; }
.text-block.speaker { margin-top: 1.8em; margin-bottom: .7em; }
.text-block.speaker h3 {
  width: fit-content;
  justify-self: start;
  padding: 5px 10px;
  border-radius: 6px;
  font: 600 14px/1.5 var(--ui);
  color: #8a4b2d;
  background: #f5e5d6;
}
.text-block.speaker[data-voice="master"] h3 { color: #3f665d; background: #eaf0e9; }
.text-block.speaker[data-voice="disciple"] h3 { color: #8a4b2d; background: #f5e5d6; }
/* Accents follow explicit speaker labels, never an inferred "important" claim. */
.text-block.speaker[data-voice="disciple"] + .text-block.paragraph,
.text-block.paragraph[data-voice="disciple"] {
  padding: 14px 16px;
  background: #fbf4e9;
  border-left: 2px solid #d4b58e;
  border-radius: 0 8px 8px 0;
}
body[data-mode="bilingual"] .text-block.paragraph .pair > .en { color: #655d53; border-left: 1px solid #e8dfd2; padding-left: 22px; }
body[data-mode="bilingual"] .text-block.heading .en { color: #784a30; }
body[data-mode="bilingual"] .text-block.speaker .en { font-family: var(--ui); }

.figure-block { margin-top: 32px; margin-bottom: 42px; }
.south-chart { background: #fffdf8; }
.south-chart td { border-color: #9b8870; background: #fffdf8; }
.south-chart caption, .direction-panel h3 { font-family: var(--ui); color: #79654e; font-weight: 500; }
.south-chart .chart-center { background: #f3eee4; color: #856246; }
.chart-center > span { font-family: Georgia, serif; }
.cell-sign { color: #756853; font-weight: 500; }
.cell-direction { color: #876044; }
.planet { color: #332c27; }
.planet.ascendant { color: #895035; }
body[data-mode="bilingual"] .planet .en { color: #766d62; }
.direction-chart { background: transparent; }
.direction-chart b { color: #875638; }
.direction-chart:not(.boxed) .direction-center::before,
.direction-chart:not(.boxed) .direction-center::after { background: #9b8870; }
.boxed [data-direction] { border-color: #9b8870; background: #fffdf8; }
.figure-actions { color: #817363; }
.figure-actions button { color: #7d553a; border-color: #e1d1bc; background: #f8f0e5; }
.source-details { color: #776b5b; }
.source-details > summary { border: 1px solid #e8dccb; border-radius: 6px; padding: 5px 10px; background: #fbf5ec; }
.editorial-note { color: #6e6254; }
.reading-notes { padding: 18px 20px; background: #f6f1e8; border: 1px solid #e9dfd0; border-radius: 10px; color: #6d6357; }
.reading-notes > summary { color: #805b3e; font-weight: 500; }

.page-turn { gap: 20px; border-top: 1px solid #e8ddce; padding-top: 25px; }
.page-turn > a { flex: 1; max-width: 49%; min-width: 0; padding: 18px; background: #f7f0e5; border: 1px solid #ecdfcd; border-radius: 10px; font-size: 18px; overflow-wrap: anywhere; }
.page-turn > a:hover { background: #f0e3d1; }
.page-turn small { color: #876f53; letter-spacing: .03em; }
.site-footer { margin-top: 32px; border-top-color: #e7ded1; color: #827567; }

.index-header {
  margin: 0 -20px 38px;
  padding: 32px 24px;
  border: 1px solid #ede0cf;
  border-top: 4px solid #c6a171;
  border-radius: 12px;
  background: linear-gradient(115deg, #f2e5d2, #fbf5eb);
}
.index-header h1 { font-family: var(--ui); font-size: 42px; font-weight: 600; color: #513929; letter-spacing: -.03em; line-height: 1.4; }
.book-english { color: #826a50; font-size: 20px; }
.intro { color: #796a57; font-size: 17px; margin-top: 22px; }
#continue-reading { background: #895035; color: #fffdf9; padding: 10px 15px; border-radius: 7px; }
#continue-reading:hover { background: #704029; }
.index-contents > h2 { color: #604a38; font: 600 23px/1.5 var(--ui); margin-bottom: 22px; }
.index-contents .volume { border: 1px solid #e8dccb; border-radius: 11px; background: #fffdf9; margin-bottom: 20px; }
.index-contents .volume > summary { padding: 18px 20px; border: 0; border-radius: 10px; background: #f0e5d4; color: #6f4c31; font: 600 23px/1.5 var(--ui); }
.index-contents .volume[data-volume="2"] > summary { background: #f3e8e0; color: #79513e; }
.index-contents .volume[open] > summary { border-radius: 10px 10px 0 0; }
.index-contents .volume-content { padding: 12px 20px 18px; }
.index-contents .toc-section > summary { color: #5e5143; font-size: 16px; }
.index-contents .subsection-group > summary { font-size: 15px; color: #866141; }
.index-contents .case-link { font-size: 16px; }

dialog { border-color: #e7d9c6; border-radius: 16px; background: #fffdf9; box-shadow: 0 24px 90px rgba(67, 45, 22, .14); }
dialog::backdrop { background: rgba(55, 45, 33, .36); }
.dialog-head h2 { font-family: var(--ui); color: #60432f; font-size: 22px; font-weight: 600; }
#search { background: #fffdf9; border-color: #c7b194; border-radius: 9px; }
.catalog-tabs button { border-radius: 7px; }
.original-contents li { border-bottom-color: #ece2d5; }
#search-results a { border-bottom-color: #eee3d5; padding-inline: 10px; border-radius: 6px; }
#search-results a:hover { background: #f8efe2; }
#search-results .snippet { color: #574c40; }
mark { background: #ecdbb7; color: #4b3826; border-radius: 2px; }

@media (min-width: 1400px) {
  .reading:has(.paired-charts), .reading:has(.with-direction) { padding-top: 44px; padding-bottom: 76px; }
}
@media (max-width: 1179px) {
  .book-layout { display: block; padding: 24px 20px 0; }
  .reading { max-width: 890px; }
}
@media (max-width: 800px) {
  .book-layout { padding: 18px 16px 0; }
  .reading, body[data-mode="bilingual"] .reading { padding: 32px 26px 58px; border-radius: 14px; }
  .case-header, .index-header { margin-inline: -12px; padding-inline: 12px; }
  .case-header h1 { font-size: 29px; }
  body[data-mode="bilingual"] .text-block.paragraph .pair > .en { padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid #e8dfd2; }
  .index-header h1 { font-size: 35px; }
}
@media (max-width: 520px) {
  .topbar { padding: 10px 14px; }
  .book-brand { font-size: 15px; }
  .top-controls { gap: 5px; }
  .mode-controls button { padding: 6px 8px; font-size: 13px; }
  .book-layout { padding: 14px 10px 0; }
  .reading, body[data-mode="bilingual"] .reading { padding: 24px 18px 44px; border-radius: 12px; }
  .case-header, .index-header { margin-inline: -8px; padding: 20px 10px; border-radius: 9px; }
  .case-header h1 { font-size: 26px; line-height: 1.5; }
  body[data-mode="bilingual"] .case-header h1 > .en { font-size: 19px; }
  .case-code { padding: 3px 6px; }
  .eyebrow { gap: 9px; }
  .text-block { line-height: 1.9; }
  .text-block.heading h2 { padding-left: 10px; font-size: 1.15em; }
  .text-block.speaker[data-voice="disciple"] + .text-block.paragraph,
  .text-block.paragraph[data-voice="disciple"] { padding: 12px; }
  .index-header h1 { font-size: 29px; }
  .book-english { font-size: 18px; }
  .index-contents .volume > summary { font-size: 21px; padding: 15px; }
  .index-contents .volume-content { padding: 8px 12px 14px; }
  .page-turn { gap: 10px; }
  .page-turn > a { padding: 12px 10px; font-size: 16px; }
  .reading-notes { padding: 14px; }
}
@media print {
  body, .reading, body[data-mode="bilingual"] .reading { background: white; color: black; box-shadow: none; border: 0; padding: 0; }
  .book-layout { padding: 0; }
  .case-header, .index-header { margin: 0 0 20px; padding: 0; background: none; border: 0; }
  .case-header h1, .text-block.heading h2, .text-block.heading h3 { color: black; background: none; }
  .reading-notes { background: none; border-color: #ccc; }
}