.parallel-reader-page {
  --parallel-rule: #d9d3c6;
  --parallel-mt-tint: #f4f6f3;
  --parallel-tj-tint: #f1f5fb;
  --parallel-gap: #f4f1e9;
}

.parallel-shell {
  width: min(1480px, calc(100% - 36px));
  margin: 0 auto;
  padding: 30px 0 76px;
}

.parallel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--compare-line);
}

.parallel-header h1 {
  margin: 0;
  font: 500 clamp(2rem, 4.4vw, 3.75rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
}

.parallel-header h1 span { color: var(--compare-gold); }
.parallel-deck { max-width: 800px; margin: 12px 0 0; color: var(--compare-muted); font: 1rem/1.55 Georgia, "Times New Roman", serif; }

.parallel-reader-controls {
  position: sticky;
  z-index: 8;
  top: calc(var(--global-nav-height, 64px) + 8px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  margin: 18px 0;
  padding: 16px 18px 18px;
  background: rgb(255 253 248 / 96%);
  border: 1px solid var(--parallel-rule);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(35 46 42 / 10%);
  backdrop-filter: blur(12px);
}

.reader-control-group { min-width: 0; }
.reader-control-group > span {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 9px;
  color: var(--compare-blue);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.reader-control-group > span b {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: white;
  background: var(--compare-blue);
  border-radius: 50%;
  font-size: .64rem;
}
.reader-control-group > span small {
  margin-left: 2px;
  color: var(--compare-muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.segmented-control-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented-control a,
.segmented-control button {
  min-height: 42px;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  color: var(--compare-blue);
  background: #fffdfa;
  border: 1px solid #9cb0c2;
  border-radius: 999px;
  cursor: pointer;
  font: 850 .76rem/1.2 Arial, Helvetica, sans-serif;
  text-align: center;
  text-decoration: none;
}
.segmented-control i { color: #84918c; font-style: normal; }
.segmented-control :is(a, button):hover,
.segmented-control :is(a, button):focus-visible { color: #08243f; background: #edf4fa; border-color: #4d769a; outline: 2px solid #90abc2; outline-offset: 2px; }
.segmented-control :is(a, button).is-active {
  color: white;
  background: var(--compare-blue);
  border-color: var(--compare-blue);
  box-shadow: 0 3px 10px rgb(8 36 63 / 18%);
}
.segmented-control :is(a, button).is-active::before {
  content: "✓";
  font-size: .9rem;
  font-weight: 900;
}
.segmented-control :is(a, button).is-active i { color: #cddbeb; }

.coverage-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  margin: 20px 0;
  padding: 15px 17px;
  color: #4d514e;
  background: #ebe7dc;
  border-left: 4px solid var(--compare-gold);
  border-radius: 3px 8px 8px 3px;
}
.coverage-notice strong { color: var(--compare-blue); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.coverage-notice p { margin: 0; font-size: .86rem; line-height: 1.55; }

.parallel-chapter-nav {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  gap: 12px;
  align-items: center;
  margin: 18px 0;
}
.parallel-chapter-nav > :last-child { justify-self: end; }
.parallel-chapter-nav > :nth-child(2) { justify-self: center; }
.parallel-chapter-nav a,
.parallel-chapter-nav label,
.parallel-chapter-nav .chapter-step-disabled { color: var(--compare-blue); font-size: .78rem; font-weight: 800; text-decoration: none; }
.parallel-chapter-nav a:hover,
.parallel-chapter-nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.chapter-step-disabled { opacity: .45; }
.parallel-chapter-nav select { margin-left: 7px; padding: 8px 28px 8px 10px; color: var(--compare-ink); background: var(--compare-surface); border: 1px solid var(--compare-line); border-radius: 6px; font: 700 .82rem/1 Arial, Helvetica, sans-serif; }
.parallel-status { margin: 13px 0; color: var(--compare-muted); font-size: .82rem; }

.parallel-board { background: var(--compare-surface); border: 1px solid var(--parallel-rule); border-radius: 10px; box-shadow: 0 12px 34px rgb(35 46 42 / 7%); overflow: clip; }
.parallel-column-heads { position: sticky; z-index: 4; top: calc(var(--global-nav-height, 64px) + 106px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: rgb(255 254 251 / 96%); border-bottom: 1px solid var(--parallel-rule); backdrop-filter: blur(10px); }
.parallel-column-heads > div { min-height: 54px; display: flex; gap: 9px; align-items: center; padding: 10px 18px; color: #31413b; font-size: .78rem; }
.parallel-column-heads > div + div { border-left: 1px solid var(--parallel-rule); }

/* The complete-chapter alignment should feel like two open texts, not a stack of cards. */
.parallel-board-flow {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.parallel-board-flow .parallel-column-heads {
  background: rgb(246 243 235 / 96%);
  border-top: 1px solid var(--parallel-rule);
}
.parallel-board-flow .parallel-column-heads > div {
  min-height: 48px;
  padding-inline: clamp(16px, 3vw, 44px);
}
.parallel-flow-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  scroll-margin-top: calc(var(--global-nav-height, 64px) + 180px);
}
.parallel-flow-passage {
  min-width: 0;
  padding: .8rem clamp(16px, 3vw, 44px) 1rem;
}
.parallel-flow-secondary { border-left: 1px solid var(--parallel-rule); }
.parallel-flow-copy { text-wrap: pretty; }
.parallel-flow-copy .reader-verse {
  display: inline;
  margin: 0;
}
.parallel-flow-copy .reader-verse::after { content: " "; }
.parallel-flow-copy .reader-verse:target {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.parallel-flow-mt .parallel-flow-copy {
  color: var(--mt-font-color);
  font-family: var(--mt-font-family);
  font-size: var(--mt-font-size);
  font-weight: var(--mt-font-weight);
  line-height: 1.72;
}
.parallel-flow-tj .parallel-flow-copy {
  color: var(--tj-font-color);
  font-family: var(--tj-font-family);
  font-size: var(--tj-font-size);
  font-weight: var(--tj-font-weight);
  line-height: 1.72;
}
.parallel-flow-copy .reader-verse { color: inherit; font: inherit; }
.flow-inline-chapter {
  display: block;
  margin: 1.1rem 0 .45rem;
  color: var(--compare-muted);
  font: 750 .65rem/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.parallel-flow-gap {
  min-height: 3.5rem;
  display: grid;
  place-items: center;
}
.parallel-flow-gap-mark {
  color: #c9c4b9;
  font: 400 1rem/1 Georgia, "Times New Roman", serif;
}

.parallel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); scroll-margin-top: calc(var(--global-nav-height, 64px) + 180px); border-bottom: 1px solid var(--parallel-rule); }
.parallel-row:last-child { border-bottom: 0; }
.parallel-row:target { outline: 3px solid color-mix(in srgb, var(--compare-gold) 70%, transparent); outline-offset: -3px; }
.parallel-row-meta { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; min-height: 38px; padding: 7px 12px; background: #f8f6f0; border-bottom: 1px solid var(--parallel-rule); }
.parallel-unit { color: var(--compare-blue); font-size: .76rem; font-weight: 900; }
.alignment-badge,
.provenance-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid #cbd6ce; border-radius: 5px; font-size: .66rem; font-weight: 850; letter-spacing: .02em; }
.alignment-badge { color: #31526c; background: #e8eff5; border-color: #bfd0df; }
.alignment-badge-gap { color: #805b2f; background: #f4eadc; border-color: #dec7a8; }
.provenance-badge { color: #626763; background: #f0f0ed; border-color: #d9d9d3; }
.parallel-row-links { display: flex; flex-wrap: wrap; gap: 11px; margin-left: auto; }
.parallel-row-links a { color: var(--compare-blue); font-size: .7rem; font-weight: 850; text-decoration: none; }
.parallel-row-links a:hover,
.parallel-row-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.source-panel { min-width: 0; padding: clamp(20px, 3vw, 42px) clamp(20px, 3.2vw, 48px); }
.source-panel-secondary { border-left: 1px solid var(--parallel-rule); }
.source-panel-mt { background: var(--parallel-mt-tint); }
.source-panel-tj { background: var(--parallel-tj-tint); }
.source-panel-label { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; }
.source-panel-label .citation-badge { flex: 0 0 auto; margin: 0; }
.source-panel-label div { display: grid; gap: 3px; }
.source-panel-label strong { color: var(--compare-ink); font: 650 .94rem/1.2 Georgia, "Times New Roman", serif; }
.source-panel-label small { color: var(--compare-muted); font: 700 .68rem/1.3 Arial, Helvetica, sans-serif; }
.reader-verse { margin: 0 0 .72em; text-wrap: pretty; }
.reader-verse-mt { color: var(--mt-font-color); font-family: var(--mt-font-family); font-size: var(--mt-font-size); font-weight: var(--mt-font-weight); line-height: 1.68; }
.reader-verse-tj { color: var(--tj-font-color); font-family: var(--tj-font-family); font-size: var(--tj-font-size); font-weight: var(--tj-font-weight); line-height: 1.68; }
.reader-verse .verse-number,
.source-copy .verse-number,
.german-excerpt .verse-number { margin: 0 .2em 0 .04em; color: #08243f; font: 400 .62em/1 Arial, Helvetica, sans-serif; line-height: 0; vertical-align: super; }
.reader-verse:target { margin-inline: -.65rem; padding: .45rem .65rem; border-radius: 7px; background: #fff0c9; scroll-margin-top: calc(var(--global-nav-height, 64px) + 180px); }
.reader-verse-omitted { color: var(--compare-muted); font-style: italic; }
.inline-chapter-heading { margin: 1.35rem 0 .8rem; padding-top: 1rem; border-top: 1px solid var(--parallel-rule); color: var(--compare-blue); font: 700 .78rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; }

.source-copy { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: oldstyle-nums; }
.source-panel-mt .source-copy { color: var(--mt-font-color); font-family: var(--mt-font-family); font-size: var(--mt-font-size); font-weight: var(--mt-font-weight); line-height: 1.68; }
.source-panel-tj .source-copy { color: var(--tj-font-color); font-family: var(--tj-font-family); font-size: var(--tj-font-size); font-weight: var(--tj-font-weight); line-height: 1.68; }
.german-excerpt { margin-top: 18px; padding-top: 13px; border-top: 1px solid #dce2e8; }
.german-excerpt summary { color: var(--compare-muted); cursor: pointer; font: 800 .7rem/1.3 Arial, Helvetica, sans-serif; }
.german-excerpt p { margin: 12px 0 0; color: var(--german-font-color); font-family: var(--german-font-family); font-size: var(--german-font-size); font-weight: var(--german-font-weight); line-height: 1.58; }

.source-panel-gap { min-height: 150px; display: grid; align-content: center; background: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(184 131 67 / 5%) 12px 24px), var(--parallel-gap); }
.gap-message { max-width: 470px; margin: 0; color: #775d3d; font: 700 .84rem/1.55 Arial, Helvetica, sans-serif; }
.gap-message strong { display: block; margin-bottom: 5px; font: 600 1.12rem/1.3 Georgia, "Times New Roman", serif; }

.parallel-board-reading { max-width: 940px; margin-inline: auto; overflow: visible; }
.parallel-board-reading .parallel-column-heads { grid-template-columns: 1fr; }
.primary-reading { padding: clamp(28px, 6vw, 70px) clamp(24px, 8vw, 90px); background: #fffefb; }
.primary-reading-copy { text-align: left; }
.primary-reading .reader-verse { display: inline; margin: 0; }
.primary-reading .reader-verse::after { content: " "; }
.primary-reading .reader-verse:target { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.primary-reading .source-panel-label { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--parallel-rule); }
.primary-reading-mt .primary-reading-copy { color: var(--mt-font-color); font-family: var(--mt-font-family); font-size: calc(var(--mt-font-size) * 1.04); font-weight: var(--mt-font-weight); line-height: 1.78; }
.primary-reading-tj .primary-reading-copy { color: var(--tj-font-color); font-family: var(--tj-font-family); font-size: calc(var(--tj-font-size) * 1.04); font-weight: var(--tj-font-weight); line-height: 1.78; }
.primary-reading .reader-verse { color: inherit; font: inherit; }
.parallel-empty-state { padding: clamp(35px, 8vw, 90px); text-align: center; }
.parallel-empty-state h2 { margin: 0 0 10px; font-weight: 500; }
.parallel-empty-state p { max-width: 650px; margin: 0 auto; color: var(--compare-muted); line-height: 1.65; }
.parallel-chapter-nav-bottom { margin-top: 22px; }

.parallel-index-shell { max-width: 1180px; }
.parallel-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 22px; }
.parallel-start-card { min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 4vw, 42px); color: inherit; border: 1px solid var(--parallel-rule); border-radius: 12px; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.parallel-start-card:hover,
.parallel-start-card:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(20 40 55 / 13%); outline: 2px solid var(--compare-blue); outline-offset: 2px; }
.parallel-start-card span { color: #8b5a22; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.parallel-start-card h2 { margin: .55rem 0 .7rem; font: 500 clamp(1.8rem, 4vw, 3rem)/1.05 Georgia, "Times New Roman", serif; }
.parallel-start-card p { max-width: 440px; margin: 0; color: var(--compare-muted); line-height: 1.6; }
.parallel-start-card strong { margin-top: auto; padding-top: 1.5rem; color: var(--compare-blue); font-size: .78rem; }
.parallel-start-tj { background: #eef4fb; }
.parallel-start-mt { background: #f6f5ef; }
.parallel-book-indexes { display: grid; gap: 12px; margin-top: 24px; }
.parallel-book-indexes details { background: var(--compare-surface); border: 1px solid var(--parallel-rule); border-radius: 9px; }
.parallel-book-indexes summary { padding: 16px 18px; color: var(--compare-blue); cursor: pointer; font: 800 .82rem/1.3 Arial, Helvetica, sans-serif; }
.parallel-index-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 1px solid var(--parallel-rule); }
.parallel-index-grid a { min-height: 70px; display: grid; place-content: center; gap: 4px; color: var(--compare-blue); border-right: 1px solid var(--parallel-rule); border-bottom: 1px solid var(--parallel-rule); text-align: center; text-decoration: none; }
.parallel-index-grid a:hover,
.parallel-index-grid a:focus-visible { background: #eaf1f7; outline: none; }
.parallel-index-grid span { color: var(--compare-muted); font-size: .58rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.parallel-index-grid strong { font: 600 1.35rem/1 Georgia, "Times New Roman", serif; }

@media (max-width: 1080px) {
  .parallel-column-heads { top: calc(var(--global-nav-height, 64px) + 106px); }
  .reader-verse:target,
  .parallel-row { scroll-margin-top: calc(var(--global-nav-height, 64px) + 180px); }
  .parallel-index-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .parallel-header { grid-template-columns: 1fr; align-items: start; }
  .parallel-header .comparison-actions { justify-content: flex-start; }
  .parallel-board:not(.parallel-board-flow) .parallel-column-heads { display: none; }
  .parallel-row { grid-template-columns: 1fr; }
  .source-panel-secondary { border-top: 1px solid var(--parallel-rule); border-left: 0; }
  .parallel-row-meta { position: static; flex-wrap: wrap; }
  .parallel-row-links { width: 100%; margin-left: 0; }
  .parallel-start-grid { grid-template-columns: 1fr; }
  .parallel-start-card { min-height: 220px; }
}

@media (max-width: 700px) {
  .parallel-shell { width: min(100% - 20px, 1480px); padding-top: 20px; }
  .parallel-reader-controls { position: static; grid-template-columns: 1fr; }
  .reader-control-group > span { flex-wrap: wrap; }
  .reader-control-group > span small { width: 100%; margin: -3px 0 0 28px; }
  .coverage-notice { grid-template-columns: 1fr; gap: 6px; }
  .parallel-chapter-nav { grid-template-columns: 1fr 1fr; }
  .parallel-chapter-nav label { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .parallel-chapter-nav > :nth-child(2) { justify-self: center; }
  .source-panel { padding: 24px 20px; }
  .parallel-board-flow .parallel-column-heads { display: none; }
  .parallel-flow-row { grid-template-columns: 1fr; padding-block: .5rem; }
  .parallel-flow-passage { padding: .55rem 14px .7rem; }
  .parallel-flow-secondary { margin-top: .35rem; padding-top: .9rem; border-top: 1px solid var(--parallel-rule); border-left: 0; }
  .parallel-flow-gap { display: none; }
  .primary-reading { padding: 30px 22px; }
  .parallel-index-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .segmented-control,
  .segmented-control-three { grid-template-columns: 1fr; }
  .segmented-control :is(a, button) { padding-inline: 10px; font-size: .72rem; }
  .parallel-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print {
  .parallel-header .comparison-actions,
  .parallel-reader-controls,
  .parallel-chapter-nav,
  .parallel-status,
  .parallel-row-links { display: none; }
  .parallel-shell { width: 100%; padding: 0; }
  .parallel-board { border: 0; box-shadow: none; }
  .parallel-column-heads { position: static; }
  .parallel-row { break-inside: avoid; }
}