/* v3.1.2 — Reader UI follow-up
 * Reader-only layout overrides live here so the main public stylesheet does not
 * accumulate another temporary stabilization patch.
 */

.unit-reading[id] {
  scroll-margin-top: calc(var(--site-header-height, 72px) + 68px);
}

html.reader-focus-mode .unit-reading[id] {
  scroll-margin-top: 76px;
}

/* Keep the independent Contents scrollbar visible but visually subordinate. */
.reader-shell .toc > nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--line-dark) 72%, var(--wine)) transparent;
}

.reader-shell .toc > nav::-webkit-scrollbar {
  width: 8px;
}

.reader-shell .toc > nav::-webkit-scrollbar-track {
  background: transparent;
}

.reader-shell .toc > nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line-dark) 72%, var(--wine));
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.reader-shell .toc > nav::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--wine) 65%, var(--line-dark));
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Focus-mode Contents is always an overlay; opening it must not reflow text. */
html.reader-focus-mode .edition-menu {
  display: block !important;
}

html.reader-focus-mode .reader-shell.toc-open {
  grid-template-columns: 1fr !important;
}

html.reader-focus-mode .reader-shell.toc-open .toc {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 1350;
  width: min(88vw, 360px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden;
  background: var(--paper);
  border-right: 1px solid var(--line-dark);
  box-shadow: var(--shadow);
}

html.reader-focus-mode .reader-shell.toc-open .toc .toc-header {
  padding-top: max(20px, env(safe-area-inset-top));
}

html.reader-focus-mode .reader-shell.toc-open .toc .toc-close {
  display: inline-grid;
}

html.reader-focus-mode .reader-toc-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1340;
  display: block;
  padding: 0;
  background: rgba(27, 16, 18, .34);
  border: 0;
}

html.reader-focus-mode.reader-contents-overlay-open .reader-page {
  overflow: hidden;
}

.edition-summary-mobile,
.font-menu {
  display: none;
}

.edition-menu > summary,
.edition-option span {
  overflow-wrap: anywhere;
}

/* Canonical passage rows align every selected edition to the same row height. */
.dynamic-parallel.aligned-parallel {
  display: block;
  max-width: 1320px;
  padding: 38px 30px 54px;
  background: var(--reader-paper);
}

.parallel-edition-heads {
  position: sticky;
  top: 126px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(var(--edition-columns, 2), minmax(0, 1fr));
  column-gap: 14px;
}

.parallel-edition-heads .parallel-column-head {
  min-width: 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--paper-deep) 72%, var(--reader-paper));
  border: 1px solid var(--line);
}

.parallel-passages {
  display: grid;
}

.parallel-passage-row {
  display: grid;
  grid-template-columns: repeat(var(--edition-columns, 2), minmax(0, 1fr));
  column-gap: 14px;
  margin: 0;
}

.parallel-passage-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  gap: 11px;
  padding: 22px 18px 24px;
  background: var(--reader-paper);
  border: 1px solid var(--line);
  border-top: 0;
  font: var(--reader-size, 1.02rem)/1.74 var(--serif);
}

.parallel-passage-cell .unit-ref {
  justify-items: end;
  text-align: right;
}

.parallel-passage-row .unit-copy {
  max-width: none;
}

.parallel-passage-row .unit-copy::first-letter {
  float: none !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.parallel-missing {
  color: var(--muted);
  font-style: italic;
}

html.reader-focus-mode .parallel-edition-heads {
  top: 61px;
}

@media (min-width: 641px) {
  .reader-tools .font-control,
  html.reader-focus-mode .reader-tools .font-control {
    display: inline-flex !important;
  }
}

@media (max-width: 900px) {
  .dynamic-parallel.aligned-parallel {
    padding-inline: 18px;
  }

  .parallel-edition-heads {
    display: none;
  }

  .parallel-passage-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    margin-bottom: 18px;
  }

  .parallel-passage-cell {
    border-top: 1px solid var(--line);
  }

  .parallel-passage-cell + .parallel-passage-cell {
    border-top: 0;
  }

  .parallel-passage-cell::before {
    content: attr(data-edition-label);
    grid-column: 1 / -1;
    margin: -22px -18px 6px;
    padding: 10px 18px;
    color: var(--ink);
    background: color-mix(in srgb, var(--paper-deep) 72%, var(--reader-paper));
    border-bottom: 1px solid var(--line);
    font: 700 .73rem/1.35 var(--sans);
  }
}

@media (max-width: 640px) {
  .reader-head {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .reader-head h1,
  html.reader-focus-mode .reader-head h1 {
    font-size: clamp(2rem, 9.5vw, 2.85rem);
    line-height: 1.04;
  }

  .reader-main {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .reader-toolbar,
  html.reader-focus-mode .reader-toolbar {
    position: fixed !important;
    top: auto !important;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: 1300;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    border: 1px solid var(--line-dark);
    box-shadow: 0 12px 34px rgba(40, 25, 22, .22);
    backdrop-filter: blur(14px);
  }

  .reader-toolbar-left,
  .reader-toolbar-right {
    display: contents;
  }

  #contentsButton {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }

  #contentsButton span {
    display: none;
  }

  .edition-menu {
    min-width: 0;
  }

  .edition-menu > summary {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    overflow: hidden;
    white-space: nowrap;
  }

  .edition-summary-desktop {
    display: none;
  }

  .edition-summary-mobile {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .edition-menu-panel {
    z-index: 1420;
    right: 12px;
    bottom: calc(74px + max(8px, env(safe-area-inset-bottom)));
    left: 12px;
    width: auto;
    max-width: none;
    max-height: min(62dvh, 520px);
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }

  .edition-apply {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 44px;
    background: var(--wine);
    box-shadow: 0 -8px 16px color-mix(in srgb, var(--paper) 88%, transparent);
  }

  .reader-tools .font-control,
  html.reader-focus-mode .reader-tools .font-control {
    display: none !important;
  }

  .font-menu {
    position: relative;
    display: block;
  }

  .font-menu > summary {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    list-style: none;
  }

  .font-menu > summary::-webkit-details-marker {
    display: none;
  }

  .font-menu-panel {
    position: fixed;
    right: calc(58px + max(8px, env(safe-area-inset-right)));
    bottom: calc(74px + max(8px, env(safe-area-inset-bottom)));
    z-index: 1420;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px;
    background: var(--paper);
    border: 1px solid var(--line-dark);
    box-shadow: var(--shadow);
  }

  .font-menu-panel .toolbar-button {
    min-width: 52px;
    min-height: 44px;
  }

  #fullscreenButton {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
  }

  #fullscreenButton .fullscreen-label {
    display: none;
  }

  .reader-scroll-progress {
    bottom: -3px;
  }
}