/* Reading preferences for every width, and the compact (≤900px) reading
   shell: a slim title strip, one visible edition, a bottom navigation bar,
   and drawers for the menu and contents. Above 900px the same markup is laid
   out as the desktop top bar with facing pages and a contents rail. */

/* ---------- every width ---------- */
.skip-reader { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px; background: var(--paper); }
.skip-reader:focus { top: 10px; }
.pane-body { font-size: var(--reader-size, 16px); }
.btn:disabled { opacity: .4; cursor: default; }
.edition-tabs { display: none; }
#drawerBackdrop[hidden], #readerMenu[hidden], #readerSettings[hidden] { display: none; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; font: 16px var(--ui); }
#readerSettings { font: 13px var(--ui); }
#readerSettings label { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#readerSettings p { color: var(--dim); font-size: 12px; }
#readerSettings .reader-version { margin-top: 8px; font-variant-numeric: tabular-nums; }
.contents-search { position: sticky; top: 0; z-index: 1; padding: 10px 14px; background: var(--paper-deep); }
.contents-search .drawer-heading { display: none; }
.contents-search input { width: 100%; padding: 6px 8px; font: 13px var(--ui); border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); color: var(--ink); }
#toc a[hidden], #toc .book[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

body.night { --paper: #1e2421; --paper-deep: #252e28; --ink: #eee9dc; --dim: #b6b6a6; --rule: #465047; --leaf: #a6c7ac; --leaf-soft: #35483b; --rubric: #e4a398; --rubric-soft: #523c39; }
body.night select, body.night .btn, body.night #popover { background: var(--paper-deep); color: var(--ink); }
body.night .endnotes li, body.night .chapter > .commentary, body.night .note-block { color: var(--ink); }

/* ---------- desktop: one top bar, facing pages, contents rail ---------- */
@media (min-width: 901px) {
  body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  .topbar, #readerMenu, .reader-toolbar { grid-row: 1; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .topbar { grid-column: 1; flex-wrap: nowrap; gap: 14px; }
  #readerMenu, #readerMenu[hidden] {
    grid-column: 2; position: relative; display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px 18px; padding: 8px 16px; min-width: 0;
  }
  #readerMenu .drawer-heading { display: none; }
  #readerMenu .tools { margin-left: auto; }
  #readerSettings {
    position: absolute; top: calc(100% + 1px); right: 16px; z-index: 45; width: 300px;
    padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule);
    box-shadow: 0 6px 24px rgba(50, 40, 15, 0.18);
  }
  .reader-toolbar { grid-column: 3; display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
  .reader-view-tools { display: none; }
  .chnav .where { color: var(--ink); background: none; border-color: transparent; font-variant-numeric: tabular-nums; }
  .frame { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 901px) and (max-width: 1500px) {
  .topbar .brand .sub { display: none; }
}

/* ---------- compact reading shell ---------- */
@media (max-width: 900px) {
  :root { --reader-header-height: 36px; --reader-toolbar-offset: calc(61px + env(safe-area-inset-bottom)); }
  html, body { height: 100%; height: 100dvh; touch-action: manipulation; }
  .pane-body { font-size: var(--reader-size, 21px); }
  select, .btn { min-height: 44px; font-size: 13px; padding: 9px 12px; border-radius: 8px; }

  /* Title strip; the contents button lives in the bottom bar (chapter label). */
  .topbar {
    position: relative; justify-content: center; flex-wrap: nowrap; flex-shrink: 0; gap: 10px;
    height: var(--reader-header-height); min-height: var(--reader-header-height); padding: 2px 12px;
  }
  .topbar .brand { width: auto; margin: 0; font-size: 15px; line-height: 1.25; letter-spacing: .08em; text-align: center; }
  .topbar .brand .sub { display: inline; margin-left: 8px; font-size: 11px; font-variant: normal; }
  .topbar #toggleToc { display: none; }

  /* Menu drawer: editions, tools and settings, above the bottom bar. */
  #drawerBackdrop { position: fixed; inset: var(--reader-header-height) 0 var(--reader-toolbar-offset); border: 0; background: #0005; z-index: 39; cursor: pointer; }
  #readerMenu {
    position: fixed; inset: 0 0 var(--reader-toolbar-offset); z-index: 40; overflow-y: auto;
    padding: 16px 20px 24px; background: var(--paper); font: 14px/1.5 var(--ui);
  }
  .drawer-heading .btn { min-height: 44px; min-width: 44px; font-size: 22px; }
  #readerMenu .pickers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  #readerMenu .pickers .vs { display: none; }
  #readerMenu select { width: 100%; max-width: none; }
  #readerMenu .tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
  #readerMenu .tool-link { display: inline-flex; align-items: center; }
  #readerSettings { padding-top: 16px; font-size: 14px; }
  #readerMenu .edition-tabs { display: flex; gap: 8px; padding: 12px 0; }
  .edition-tabs .btn { flex: 1; max-width: none; }
  .edition-tabs .btn.active { background: var(--leaf-soft); color: var(--ink); border-color: var(--leaf); }

  /* One edition at a time; the comparison toggle swaps it. */
  .frame { position: relative; min-height: 0; }
  .panes { flex-direction: row; }
  body:not(.mobile-comparison) #paneR { display: none; }
  body.mobile-comparison #paneL { display: none; }
  .pane { padding: 22px 22px calc(60px + env(safe-area-inset-bottom)) 32px; overscroll-behavior: contain; }
  .pane + .pane { border: 0; }
  .pane-head { font-size: 10px; letter-spacing: .05em; }
  .pane-body { line-height: 1.75; overflow-wrap: anywhere; }
  .pane-body p { text-align: start; }
  .section::before { left: -1.8em; }

  /* Contents drawer. */
  #toc {
    position: fixed; top: var(--reader-header-height); bottom: var(--reader-toolbar-offset); left: 50%;
    transform: translateX(-50%); width: min(94vw, 480px); min-width: 0; height: auto; z-index: 40;
    border: 1px solid var(--rule); box-shadow: 0 12px 36px #0003;
  }
  #toc .book > summary { min-height: 44px; padding: 14px 20px; }
  #toc a { min-height: 44px; padding: 10px 20px; font-size: 15px; }
  .contents-search { padding: 14px; }
  .contents-search .drawer-heading { display: flex; }
  .contents-search input { min-height: 44px; padding: 10px; font-size: 16px; border-radius: 8px; }

  /* Facsimile covers the text; the arrows then turn its pages. */
  #facs { position: absolute; inset: 0; width: 100%; min-width: 0; z-index: 25; border: 0; background: var(--paper-deep); }
  #osd { flex: 1; min-height: 0; }
  #osd, #osd .openseadragon-canvas { touch-action: none; }
  .facs-caption { min-height: 36px; padding: 6px 12px; background: var(--paper); color: var(--dim); font: 11px/1.5 var(--ui); }
  .facs-caption a { color: var(--leaf); }

  /* Notes and apparatus open as a sheet above the bottom bar. */
  #popover {
    position: fixed; inset: auto 0 var(--reader-toolbar-height, var(--reader-toolbar-offset)) !important;
    width: 100%; max-width: none; max-height: min(38dvh, 340px); overflow-y: auto; overscroll-behavior: contain;
    padding: 24px 24px 20px; border-radius: 16px 16px 0 0; background: var(--paper);
    box-shadow: 0 -8px 32px #0003; z-index: 25; font-size: 18px; animation: drawer-in .16s ease-out;
  }
  #popover::before { content: ''; position: absolute; top: 9px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: var(--rule); }
  #popover .pop-close { position: sticky; top: 0; float: right; min-width: 44px; min-height: 44px; font-size: 22px; background: var(--paper); }

  /* Bottom bar: menu and edition toggle, chapter navigation, facsimile. */
  .reader-toolbar {
    display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; gap: 12px;
    flex-shrink: 0; z-index: 26; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule); background: var(--paper-deep); font: 13px var(--ui);
  }
  .reader-toolbar .btn { min-height: 44px; background: transparent; }
  .reader-view-tools { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 2px; }
  .reader-view-tools .btn { min-width: 32px; padding-inline: 6px; }
  #toggleMenu { min-width: 44px; font-size: 22px; }
  #toggleComparison { color: var(--leaf); font-variant-numeric: tabular-nums; }
  .reader-toolbar .chnav { grid-column: 2; justify-self: center; gap: 0; border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); overflow: hidden; }
  .reader-toolbar .square { width: 44px; font-size: 20px; border: 0; border-radius: 0; }
  .reader-toolbar .square:first-child { border-right: 1px solid var(--rule); }
  .reader-toolbar .square:last-child { border-left: 1px solid var(--rule); }
  .reader-toolbar .where { min-width: 80px; border: 0; border-radius: 0; color: var(--leaf); background: var(--leaf-soft); font-size: 15px; font-variant-numeric: tabular-nums; }
  .reader-toolbar #toggleFacs { grid-column: 3; justify-self: end; padding-inline: 8px; font-size: 12px; }
  .reader-toolbar #toggleFacs[aria-pressed="true"] { background: var(--leaf); color: var(--paper); border-color: var(--leaf); }

  /* Image gestures and navigation never create Safari text-selection handles. */
  #facs, #facs *, .reader-toolbar, .reader-toolbar * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
@media (max-width: 480px) {
  .reader-toolbar { gap: 6px; padding-inline: 8px; }
  .reader-toolbar .square { width: 40px; }
}
@media (max-width: 400px) {
  .reader-toolbar .where { min-width: 64px; }
  .reader-toolbar #toggleFacs { padding-inline: 6px; font-size: 11px; }
}
@media (max-width: 360px) {
  .topbar .brand { font-size: 14px; }
  .topbar .brand .sub { margin-left: 5px; font-size: 10px; }
  .reader-toolbar { gap: 3px; padding-inline: 4px; }
  #toggleMenu { min-width: 32px; }
  .reader-toolbar .square { width: 32px; padding-inline: 5px; }
  .reader-toolbar .where { min-width: 55px; padding-inline: 5px; }
}
@keyframes drawer-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #popover { animation: none; } }