/* The Cambridge face is local and preloaded because its metrics determine
   multicolumn pagination and centre-reference orientation. A late remote-font
   swap otherwise makes the already-visible reference columns change sides. */
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/SourceSerif4-Latin-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/SourceSerif4-Latin-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "KJV1611";
  src: url("assets/fonts/KJV1611.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond Local";
  src: url("assets/fonts/EBGaramond-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --chrome: #f4f3ef;
  --chrome-strong: #e9e7e0;
  --paper: #ffffff;
  --paper-edge: #e4e0d6;
  --paper-texture: none;
  --paper-texture-size: auto;
  --ink: #23211d;
  --muted: #706d65;
  --faint: #9a968c;
  --line: #d9d6cd;
  --accent: #806324;
  --accent-soft: #f3ecd9;
  --panel: #ffffff;
  --panel-soft: #efede7;
  --green: #1e6b50;
  --gold: #a36b14;
  --tool-bronze: #806324;
  --tool-bronze-border: #d6b85f;
  --tool-bronze-ink: #fff9e9;
  --tool-gold: #f0d982;
  --tool-gold-border: #806324;
  --tool-gold-ink: #241c0d;
  --header-height: 68px;
  --mobile-nav-height: 0px;
  --reader-font: "Source Serif 4", Georgia, serif;
  --reader-size: 19px;
  --reader-leading: 1.78;
  --reader-ink: #23211d;
  --reader-muted: #706d65;
  --reader-accent: #806324;
  --reader-rule: rgba(112, 109, 101, .25);
  --reader-hover: rgba(128, 99, 36, .055);
  --reader-highlight: #e6c76f;
  --reader-highlight-ink: #211b0e;
  --reader-highlight-ring: #b98b22;
  --reader-playback-underline: #b88712;
  --reader-control-bg: rgba(255, 255, 255, .68);
  --shadow: 0 14px 40px rgba(37, 32, 24, 0.08);
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--chrome); }
body {
  margin: 0;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  background: var(--chrome);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  letter-spacing: 0;
}
button, input, select { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(128, 99, 36, 0.24);
  outline-offset: 2px;
}
button:disabled { cursor: not-allowed; opacity: 0.45; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -50px;
  padding: 10px 14px;
  color: white;
  background: var(--accent);
  border-radius: 4px;
}
.skip-link:focus { top: 10px; }
.mobile-only, .mobile-nav { display: none !important; }

body[data-chrome-mode="dark"] {
  color-scheme: dark;
  --chrome: #11110f;
  --chrome-strong: #1c1b18;
  --ink: #f2eee5;
  --muted: #bab2a3;
  --faint: #8e8577;
  --line: #37322b;
  --accent: #d4b568;
  --accent-soft: rgba(212, 181, 104, .16);
  --panel: #1d1b18;
  --panel-soft: #24211d;
  --green: #7fc9aa;
  --gold: #d5ad64;
  --tool-bronze: #74571a;
  --tool-bronze-border: #b9943c;
  --tool-bronze-ink: #fff7df;
  --tool-gold: #e2c66f;
  --tool-gold-border: #f0d982;
  --tool-gold-ink: #211b0e;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.app-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 260px minmax(320px, 700px) 1fr;
  align-items: center;
  gap: 22px;
  height: var(--header-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 247, 243, 0.96);
  backdrop-filter: blur(16px);
}
body[data-chrome-mode="dark"] .app-header { background: rgba(18, 17, 15, .96); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  color: var(--ink);
  text-decoration: none;
}
.wordmark-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: white;
  background: var(--accent);
  border-radius: 4px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
}
.wordmark-copy { display: grid; line-height: 1.08; }
.wordmark-copy strong { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; }
.wordmark-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; }

.global-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 44px;
  padding-left: 14px;
  border: 1px solid #cbc8bf;
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 8px rgba(35, 33, 29, 0.04);
}
body[data-chrome-mode="dark"] .global-search,
body[data-chrome-mode="dark"] .type-choice,
body[data-chrome-mode="dark"] .paper-swatch,
body[data-chrome-mode="dark"] .size-control button,
body[data-chrome-mode="dark"] .layout-control button,
body[data-chrome-mode="dark"] .spread-control button,
body[data-chrome-mode="dark"] .concordance-breakdown,
body[data-chrome-mode="dark"] .source-details,
body[data-chrome-mode="dark"] .about-text-link {
  border-color: var(--line);
  background: #181714;
}
.global-search svg { width: 18px; color: var(--muted); }
.global-search input {
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}
.global-search kbd {
  padding: 2px 7px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--chrome);
  font-size: 12px;
}
body[data-chrome-mode="dark"] .global-search kbd { background: #24211d; }
.search-submit {
  align-self: stretch;
  min-width: 64px;
  margin: -1px -1px -1px 10px;
  color: white;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--accent);
  font-weight: 700;
}
.header-actions { display: flex; justify-content: flex-end; gap: 6px; }
.header-action-tabs {
  --tool-offset: 0px;
  --tool-width: 40px;
  position: relative;
  display: flex;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  isolation: isolate;
}
body[data-chrome-mode="dark"] .header-action-tabs { background: rgba(31, 29, 25, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
body[data-chrome-mode="dark"] .header-action-tabs[data-active-tool="audio"] .header-action-indicator {
  background: #74571a;
  box-shadow: 0 5px 15px rgba(68, 50, 16, .38), inset 0 0 0 1px #e8cf82;
}
.header-action-indicator {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: var(--tool-width);
  height: 40px;
  border-radius: 5px;
  background: var(--accent);
  box-shadow: 0 5px 15px rgba(71, 53, 17, .24);
  opacity: 0;
  transform: translate3d(var(--tool-offset), 0, 0);
  transition: transform .28s cubic-bezier(.22, .8, .24, 1), width .22s ease, opacity .16s ease, box-shadow .2s ease;
  pointer-events: none;
}
.header-action-tabs[data-active-tool] .header-action-indicator { opacity: 1; }
.header-action-tabs .icon-button {
  position: relative;
  z-index: 1;
  color: var(--muted);
  transition: color .18s ease, transform .18s ease, background-color .18s ease;
}
.header-action-tabs .icon-button:hover { color: var(--accent); border-color: transparent; background: var(--accent-soft); transform: translateY(-1px); }
.header-action-tabs .icon-button.active, .header-action-tabs .icon-button.active:hover { color: white; border-color: transparent; background: transparent; transform: translateY(0); }
.header-action-tabs .theatre-toggle[aria-pressed="true"],
.header-action-tabs .theatre-toggle[aria-pressed="true"]:hover {
  color: var(--tool-gold-ink);
  border-color: var(--tool-gold-border);
  background: var(--tool-gold);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transform: translateY(0);
}
body[data-chrome-mode="dark"] .header-action-tabs .theatre-toggle[aria-pressed="true"] {
  color: #211b0e;
  border-color: #f0d982;
  background: #e2c66f;
}
.header-action-tabs .icon-button.active svg { animation: header-tool-settle .3s cubic-bezier(.2, .85, .25, 1); }
.header-action-tabs .icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audio-header-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px 23px;
  width: 63px;
  height: 40px;
  border-radius: 5px;
}
.audio-header-split .icon-button { width: 40px; height: 40px; }
.audio-settings-toggle {
  display: grid;
  place-items: center;
  width: 23px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 5px 5px 0;
  background: transparent;
}
.audio-settings-toggle svg { width: 13px; height: 13px; }
.audio-header-split:hover { background: var(--accent-soft); }
.audio-header-split:hover .icon-button, .audio-header-split:hover .audio-settings-toggle { color: var(--accent); }
.audio-settings-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.header-action-tabs[data-active-tool="audio"] .audio-header-split .icon-button,
.header-action-tabs[data-active-tool="audio"] .audio-settings-toggle { color: white; background: transparent; }
.header-action-tabs[data-active-tool="audio"] .audio-header-split:hover .icon-button,
.header-action-tabs[data-active-tool="audio"] .audio-header-split:hover .audio-settings-toggle,
body.audio-playing .audio-header-split:hover #audio-quick-toggle { color: white; background: transparent; }
.header-action-tabs[data-active-tool="audio"] .audio-settings-toggle { border-left-color: rgba(255, 255, 255, .28); }
@keyframes header-tool-settle {
  0% { transform: translateY(2px) scale(.9); }
  65% { transform: translateY(-1px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
}
.icon-button:hover { border-color: var(--line); background: white; }
body[data-chrome-mode="dark"] .icon-button:hover { background: #201e1a; }
.icon-button svg { width: 19px; height: 19px; }

.app-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: calc(100dvh - var(--header-height) - var(--mobile-nav-height));
}
.app-layout.utility-open { grid-template-columns: 260px minmax(0, 1fr) 390px; }
.app-layout.utility-open.tools-expanded[data-utility-view="search"],
.app-layout.utility-open.tools-expanded[data-utility-view="study"] { grid-template-columns: 260px minmax(380px, .78fr) minmax(560px, 1.22fr); }
.library-panel, .utility-panel {
  min-width: 0;
  overflow: hidden;
  background: #f8f7f3;
}
body[data-chrome-mode="dark"] .library-panel,
body[data-chrome-mode="dark"] .utility-panel { background: #151411; }
.library-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-right: 1px solid var(--line);
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 16px 10px;
}
.panel-heading h2 { margin: 2px 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 22px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.testament-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 14px 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--chrome-strong);
}
.testament-tabs button {
  height: 32px;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}
.testament-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(35,33,29,.1); }
body[data-chrome-mode="dark"] .testament-tabs button.active { background: #34302a; box-shadow: none; }
.book-list {
  overflow-y: auto;
  padding: 4px 10px 18px;
  scrollbar-width: thin;
}
.book-link {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 4px 8px;
  color: var(--ink);
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-decoration: none;
  text-align: left;
  font-size: 14px;
}
.book-link:hover { background: var(--chrome-strong); }
.book-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.book-number { color: var(--faint); font-size: 11px; }
.book-chapters { color: var(--faint); font-size: 11px; }
.reader-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background: #dedbd3;
  container-type: inline-size;
}
.reader-toolbar { grid-row: 1; }
.reference-trail { grid-row: 2; }
.reader-scroll { grid-row: 3; min-height: 0; }
body[data-chrome-mode="dark"] .reader-shell { background: #090908; }
.reader-toolbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 58px;
  padding: 8px 16px;
  border-bottom: 1px solid #cbc7bd;
  background: #efede7;
}
body[data-chrome-mode="dark"] .reader-toolbar {
  border-color: var(--line);
  background: #161511;
}
.reference-trail {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 12px;
  color: #4d473c;
  border-bottom: 1px solid #d1cab9;
  background: rgba(255, 254, 250, .97);
  box-shadow: 0 3px 10px rgba(35, 31, 24, .05);
}
.reference-trail button { font: inherit; }
.reference-trail-name,
.reference-trail-back,
.reference-trail-menu-button,
.reference-trail-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reference-trail-name {
  gap: 6px;
  color: #786a4b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.reference-trail-name svg { width: 14px; height: 14px; color: #a27d2d; }
.reference-trail-back,
.reference-trail-menu-button,
.reference-trail-clear,
.reference-trail-list button {
  min-height: 30px;
  color: #5f5544;
  border: 1px solid #d7cfbc;
  border-radius: 4px;
  background: #faf8f1;
}
.reference-trail-back {
  gap: 5px;
  max-width: 178px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 750;
}
.reference-trail-back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reference-trail-back svg,
.reference-trail-menu-button svg,
.reference-trail-clear svg { width: 15px; height: 15px; flex: 0 0 auto; }
.reference-trail-back:hover:not(:disabled),
.reference-trail-menu-button:hover,
.reference-trail-clear:hover,
.reference-trail-list button:hover { color: #2e281d; border-color: #c2a85f; background: #f3ecd9; }
.reference-trail-back:disabled { opacity: .48; cursor: default; }
.reference-trail-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.reference-trail-list li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.reference-trail-list li + li::before {
  content: "›";
  margin-right: 5px;
  color: #a29a8c;
  font-weight: 700;
}
.reference-trail-list button,
.reference-trail-list .current span {
  display: block;
  max-width: 118px;
  min-height: 28px;
  padding: 6px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  line-height: 14px;
}
.reference-trail-list .current span {
  color: #251f12;
  border: 1px solid #d0ac4f;
  border-radius: 4px;
  background: linear-gradient(180deg, #f3dc8b, #dfbe5d);
  box-shadow: inset 0 1px rgba(255,255,255,.48);
}
.reference-trail-list .reference-trail-overflow button {
  color: #7b6228;
  border-color: transparent;
  background: transparent;
}
.reference-trail-menu-button {
  display: none;
  gap: 5px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}
.reference-trail.has-overflow .reference-trail-menu-button { display: inline-flex; }
.reference-trail-clear { width: 30px; padding: 0; }
.reference-trail-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 12px;
  width: min(410px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 130px));
  overflow: auto;
  color: #383228;
  border: 1px solid #cfc5ad;
  border-radius: 6px;
  background: #fffefa;
  box-shadow: 0 18px 44px rgba(37, 31, 20, .2);
}
.reference-trail-menu-heading {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e1dacb;
  background: #fffefa;
}
.reference-trail-menu-heading strong { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; }
.reference-trail-menu-heading small { color: #817663; }
.reference-trail-menu ol { margin: 0; padding: 6px; list-style: none; }
.reference-trail-menu li + li { border-top: 1px solid #ebe6da; }
.reference-trail-menu li button {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 10px 9px;
  color: #4c4436;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
}
.reference-trail-menu li button:hover { background: #f5f0e3; }
.reference-trail-menu li button.current { color: #251f12; background: #efe1aa; }
.reference-trail-menu li button span:first-child { display: grid; gap: 3px; }
.reference-trail-menu li button strong { font-size: 13px; }
.reference-trail-menu li button small { color: #8a7650; font-size: 10px; text-transform: uppercase; }
.reference-trail-menu-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: #6c6457;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-chrome-mode="dark"] .reference-trail {
  color: #d7cfbf;
  border-color: #3b362d;
  background: rgba(24, 22, 18, .98);
  box-shadow: 0 3px 12px rgba(0,0,0,.24);
}
body[data-chrome-mode="dark"] .reference-trail-name { color: #c9b47d; }
body[data-chrome-mode="dark"] .reference-trail-back,
body[data-chrome-mode="dark"] .reference-trail-menu-button,
body[data-chrome-mode="dark"] .reference-trail-clear,
body[data-chrome-mode="dark"] .reference-trail-list button {
  color: #ded5c3;
  border-color: #4a4336;
  background: #201e1a;
}
body[data-chrome-mode="dark"] .reference-trail-back:hover:not(:disabled),
body[data-chrome-mode="dark"] .reference-trail-menu-button:hover,
body[data-chrome-mode="dark"] .reference-trail-clear:hover,
body[data-chrome-mode="dark"] .reference-trail-list button:hover { color: #f1db91; border-color: #9f7d35; background: #2b271f; }
body[data-chrome-mode="dark"] .reference-trail-list .current span { color: #211b0e; }
body[data-chrome-mode="dark"] .reference-trail-menu {
  color: #e4ddcf;
  border-color: #4a4336;
  background: #1c1a17;
  box-shadow: 0 18px 44px rgba(0,0,0,.46);
}
body[data-chrome-mode="dark"] .reference-trail-menu-heading { border-color: #3a352c; background: #1c1a17; }
body[data-chrome-mode="dark"] .reference-trail-menu li + li { border-color: #373229; }
body[data-chrome-mode="dark"] .reference-trail-menu li button { color: #e5ddce; }
body[data-chrome-mode="dark"] .reference-trail-menu li button:hover { background: #2a261f; }
body[data-chrome-mode="dark"] .reference-trail-menu li button.current { color: #241d0f; background: #d5b45e; }
body[data-chrome-mode="dark"] .reference-trail-menu-excerpt { color: #bcb3a3; }
@container (max-width: 700px) {
  .reference-trail {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    padding-inline: 7px;
  }
  .reference-trail-name,
  .reference-trail-list { display: none; }
  .reference-trail-back { justify-content: flex-start; width: 100%; max-width: none; }
  .reference-trail-menu-button,
  .reference-trail.has-overflow .reference-trail-menu-button { display: inline-flex; }
}
.passage-selectors, .passage-actions { display: flex; align-items: center; gap: 6px; }
.passage-actions { justify-content: flex-end; }
.select-control { position: relative; display: inline-flex; min-width: 150px; }
.select-control select {
  width: 100%;
  height: 40px;
  padding: 0 36px 0 12px;
  color: var(--ink);
  border: 1px solid #c9c5bb;
  border-radius: 5px;
  appearance: none;
  background: #faf9f6;
  font-weight: 700;
}
body[data-chrome-mode="dark"] .select-control select {
  color: var(--ink);
  border-color: var(--line);
  background: #201e1a;
}
.select-control svg { position: absolute; right: 10px; top: 11px; width: 17px; pointer-events: none; }
.chapter-control { min-width: 112px; }
.mode-control {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 3px;
  border: 1px solid #c9c5bb;
  border-radius: 6px;
  background: #e4e1d9;
}
body[data-chrome-mode="dark"] .mode-control {
  border-color: var(--line);
  background: #201e1a;
}
.mode-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 80px;
  height: 32px;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}
.mode-control button.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(35,33,29,.12); }
body[data-chrome-mode="dark"] .mode-control button.active { background: #34302a; box-shadow: none; }
.mode-control svg { width: 16px; }
.reader-scroll {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 34px clamp(18px, 5vw, 72px) 80px;
  background-color: #dedbd3;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 24px 24px;
}
body[data-chrome-mode="dark"] .reader-scroll {
  background-color: #0d0c0b;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
}
.page-turn, .page-progress { display: none; }
.paper {
  width: min(100%, 820px);
  min-height: calc(100% - 10px);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 86px) clamp(30px, 8vw, 92px) 86px;
  color: var(--reader-ink);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-position: center top;
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
  box-shadow: var(--shadow);
}

body[data-reading-mode="book"] .reader-scroll {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28px;
  gap: 8px;
  overflow: hidden;
  padding: clamp(10px, 1.8vw, 22px) clamp(48px, 5vw, 76px) 8px;
  touch-action: pan-y;
}
body[data-reading-mode="book"] .paper {
  position: relative;
  grid-row: 1;
  width: min(100%, 860px);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: clamp(28px, 4vh, 50px) clamp(30px, 5vw, 64px);
}
body[data-reading-mode="book"][data-effective-spread="one"][data-reader-width="contained"] .paper {
  width: min(100%, 820px);
}
body[data-reading-mode="book"][data-effective-spread="two"] .paper { width: min(100%, 1180px); }
body[data-reading-mode="book"][data-effective-spread="two"] .paper::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 32px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(67, 57, 39, .07) 46%, rgba(255,255,255,.18) 50%, rgba(67, 57, 39, .07) 54%, transparent);
  content: "";
  pointer-events: none;
}
body[data-paper="black"][data-reading-mode="book"][data-effective-spread="two"] .paper::after {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.32) 47%, rgba(255,255,255,.05) 50%, rgba(0,0,0,.32) 53%, transparent);
}
body[data-reading-mode="book"] .chapter-section {
  height: 100%;
  column-count: 1;
  /* Keep paired reading columns close; the spread seam supplies the book-fold cue. */
  column-gap: 32px;
  column-fill: auto;
  overflow: visible;
  will-change: transform;
}
body[data-reading-mode="book"] .chapter-section.page-animate { transition: transform .24s ease; }
body[data-reading-mode="book"][data-effective-spread="two"] .chapter-section { column-count: 2; }
body[data-reading-mode="book"] .chapter-kicker,
body[data-reading-mode="book"] .chapter-title,
body[data-reading-mode="book"] .chapter-heading { break-after: avoid-column; }
body[data-reading-mode="book"] .chapter-title { font-size: clamp(28px, 3.4vw, 42px); }
body[data-reading-mode="book"] .page-turn {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 108px;
  padding: 0;
  transform: translateY(-42%);
  color: #5e5a52;
  border: 1px solid rgba(112,109,101,.22);
  border-radius: 6px;
  background: rgba(250,249,246,.78);
  box-shadow: 0 5px 18px rgba(35,33,29,.08);
  backdrop-filter: blur(8px);
}
body[data-reading-mode="book"] .page-turn:hover { color: var(--accent); border-color: rgba(128,99,36,.28); background: rgba(255,255,255,.94); }
body[data-reading-mode="book"] .page-turn svg { width: 25px; height: 25px; }
body[data-reading-mode="book"] .page-turn-previous { left: clamp(5px, 1.2vw, 18px); }
body[data-reading-mode="book"] .page-turn-next { right: clamp(5px, 1.2vw, 18px); }
body[data-reading-mode="book"] .page-progress {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  color: #625e56;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.page-gesture-hint { color: #8a867e; font-weight: 400; }
body:not([data-reading-mode="book"]) .page-turn,
body:not([data-reading-mode="book"]) .page-progress { display: none !important; }
body[data-paper="cream"] { --paper: #fbf5e7; --paper-edge: #ded2bb; }
body[data-paper="ivory"] { --paper: #f4f0df; --paper-edge: #d5cfb9; }
body[data-paper="beige"] { --paper: #e8dbc1; --paper-edge: #cbbd9f; }
body[data-paper="black"] {
  --paper: #111111;
  --paper-edge: #353535;
  --reader-ink: #f5f3ed;
  --reader-muted: #bbb7ad;
  --reader-accent: #e6c76f;
  --reader-rule: rgba(255, 255, 255, .18);
  --reader-hover: rgba(230, 199, 111, .12);
  --reader-control-bg: rgba(255, 255, 255, .08);
  --shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
body[data-paper="antique"] {
  --paper: #f6e6bd;
  --paper-edge: #c7ab75;
  --paper-texture: url("assets/antique-paper.jpg");
  --paper-texture-size: 620px 620px;
  --reader-muted: #665b48;
  --reader-accent: #806324;
}
body[data-typeface="clear"] { --reader-font: "Atkinson Hyperlegible Next", Arial, sans-serif; --reader-leading: 1.68; }
body[data-typeface="cambridge"] { --reader-font: "Source Serif 4", Georgia, serif; --reader-leading: 1.78; }
body[data-typeface="classical"] { --reader-font: "Alegreya", Georgia, serif; --reader-leading: 1.55; }
body[data-typeface="av1611"] { --reader-font: "KJV1611", "Old English Text MT", serif; --reader-leading: 1.64; }
body[data-text-size="small"] { --reader-size: 17px; }
body[data-text-size="medium"],
body[data-text-size="regular"] { --reader-size: 21px; }
body[data-text-size="large"] { --reader-size: 25px; }
body[data-text-size="xlarge"] { --reader-size: 32px; }
body[data-text-size="xxlarge"] { --reader-size: 42px; }
.chapter-section { scroll-margin-top: 24px; }
.chapter-section + .chapter-section { margin-top: 100px; padding-top: 72px; border-top: 1px solid var(--reader-rule); }
.chapter-kicker { display: block; margin-bottom: 8px; color: var(--reader-accent); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; }
.chapter-title {
  margin: 0 0 30px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.chapter-heading {
  margin: 28px auto 16px;
  color: var(--reader-muted);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}
body[data-edition="he1611"] .chapter-kicker,
body[data-edition="he1611"] .chapter-title,
body[data-edition="he1611"] .chapter-heading,
body[data-edition="he1611"] .colophon {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  letter-spacing: 0;
}
body[data-edition="he1611"] .chapter-kicker { font-weight: 600; }
body[data-edition="he1611"] .chapter-title { font-weight: 500; }
body[data-edition="he1611"] .chapter-heading {
  max-width: 46em;
  font-size: clamp(15px, calc(var(--reader-size) * .7), 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}
body[data-edition="he1611"] .colophon { font-weight: 400; }
.verse-flow {
  margin: 0;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  text-wrap: pretty;
}
.verse {
  display: inline;
  border-radius: 3px;
  transition: background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
.verse:hover { background: var(--reader-hover); box-shadow: 0 0 0 3px var(--reader-hover); }
.verse.selected { color: var(--reader-highlight-ink); background: var(--reader-highlight); box-shadow: 0 0 0 3px var(--reader-highlight-ring); }
.verse.selected .verse-number { color: #62480c; }
.verse.narrating .verse-text {
  text-decoration-line: underline;
  text-decoration-color: var(--reader-playback-underline);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: auto;
}
.verse.search-hit { color: var(--reader-highlight-ink); background: var(--reader-highlight); }
.verse-number {
  position: relative;
  top: -.38em;
  display: inline;
  margin: 0 .34em 0 .3em;
  padding: 0;
  color: var(--reader-accent);
  border: 0;
  background: transparent;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: .56em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.verse:first-of-type .verse-number { margin-left: 0; }
body.hide-verse-numbers .verse-number { display: none; }
.word-help-term { display: inline; margin: 0; padding: 0 1px; color: inherit; border: 0; border-bottom: 1px dotted currentColor; background: transparent; font: inherit; line-height: inherit; text-decoration: none; cursor: help; }
.word-help-term:hover, .word-help-term:focus-visible { color: var(--accent); border-bottom-style: solid; outline: 0; background: var(--accent-soft); }
body.hide-word-help .word-help-term { border-bottom-color: transparent; pointer-events: none; }
body[data-paper="black"] .word-help-term:hover, body[data-paper="black"] .word-help-term:focus-visible { color: #f7e9b4; background: rgba(255,255,255,.1); }
.paragraph-mark { color: var(--reader-accent); font-family: "Source Serif 4", Georgia, serif; font-size: .88em; font-style: normal; font-weight: 700; }
body.hide-paragraph-marks .paragraph-mark { display: none; }
.verse em { font-style: italic; }
body[data-edition="he1611"] .verse .supplied-word {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: .86em;
  font-style: normal;
  font-weight: 500;
}
body[data-edition="he1611"][data-typeface="av1611"] .verse .supplied-word {
  /* The 1611 small Roman type sits optically within the blackletter body. */
  vertical-align: .08em;
}
.verse .divine-name { font-variant: small-caps; }
body[data-typeface="av1611"] .verse em {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: .86em;
  font-style: normal;
  font-weight: 500;
}
.verse .smallcaps { font-variant: small-caps; letter-spacing: .025em; }

.verse-margin-actions {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 3px;
  width: 104px;
}
.verse-margin-actions > button,
.verse-listen-split button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 104px;
  height: 36px;
  padding: 0 9px;
  color: var(--tool-bronze-ink);
  border: 1px solid var(--tool-bronze-border);
  border-radius: 5px;
  background: var(--tool-bronze);
  box-shadow: 0 4px 14px rgba(44, 34, 14, .2), inset 0 1px 0 rgba(255, 241, 176, .2);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.verse-margin-actions button:hover,
.verse-margin-actions button:focus-visible { color: var(--tool-gold-ink); border-color: var(--tool-gold-border); background: var(--tool-gold); }
.verse-margin-actions > button.active,
.verse-listen-split #verse-action-hear.active {
  color: var(--tool-gold-ink);
  border-color: var(--tool-gold-border);
  background: var(--tool-gold);
  box-shadow: inset 0 0 0 2px #fff4c8, 0 4px 14px rgba(44, 34, 14, .2);
}
.verse-margin-actions svg { width: 15px; height: 15px; flex: 0 0 auto; }
.verse-listen-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  width: 104px;
  overflow: hidden;
  border: 1px solid var(--tool-bronze-border);
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(44, 34, 14, .2);
}
.verse-listen-split button {
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.verse-listen-split #verse-action-hear { padding: 0 7px; }
.verse-listen-split #verse-action-play {
  padding: 0;
  color: #241c0d;
  border-left: 1px solid #fff0b5;
  background: #e6c76f;
}
.verse-listen-split #verse-action-play:hover,
.verse-listen-split #verse-action-play:focus-visible { color: #fff4c8; background: #4a3a18; }
.verse-listen-split #verse-action-play.active {
  color: #f3d778;
  background: #27241e;
  box-shadow: inset 0 0 0 2px #f3d778;
}

body.audio-playing #audio-quick-toggle { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
body.audio-playing .header-action-tabs[data-active-tool="audio"] #audio-quick-toggle {
  color: white;
  background: transparent;
  box-shadow: none;
}
body.audio-playing [data-mobile-action="audio"] { color: var(--accent); background: var(--accent-soft); }
body.audio-playing #audio-quick-toggle svg,
body.audio-playing [data-mobile-action="audio"] svg { animation: hear-speaking 1.8s ease-in-out infinite; transform-origin: center; }
body.audio-playing.audio-paused #audio-quick-toggle svg,
body.audio-playing.audio-paused [data-mobile-action="audio"] svg { animation-play-state: paused; opacity: .62; }
@keyframes hear-speaking {
  0%, 100% { opacity: .68; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.audio-playing #audio-quick-toggle svg,
  body.audio-playing [data-mobile-action="audio"] svg { animation: none; }
}

/* The three text-layout controls are deliberately different:
   Block is continuous prose, Paragraph starts and indents real paragraphs,
   and Line starts every verse on its own line. */
body:is([data-text-layout="block"], [data-text-layout="line"]) .paragraph-group {
  display: contents;
}
body[data-text-layout="block"] .verse {
  display: inline;
  margin: 0;
  text-indent: 0;
}
body[data-text-layout="paragraph"] .paragraph-group {
  display: block;
  margin-top: .9em;
  text-indent: 1.2em;
}
body[data-text-layout="paragraph"] .verse-flow > .paragraph-group:first-child {
  margin-top: 0;
}
body[data-text-layout="paragraph"] .paragraph-group > .verse {
  display: inline;
  margin: 0;
  text-indent: 0;
}
body[data-text-layout="paragraph"] .verse.paragraph-start .verse-number { margin-left: 0; }
body[data-text-layout="line"] .verse {
  display: block;
  min-height: 1.72em;
  margin-bottom: .34em;
  break-inside: avoid-column;
}
body[data-text-layout="line"] .verse-number { margin-left: 0; }

body[data-reading-mode="reference"] .reader-scroll {
  padding: 24px clamp(10px, 2.8vw, 46px) 72px;
}
body[data-reading-mode="reference"] .paper {
  width: min(100%, 1240px);
  padding: clamp(38px, 5vw, 68px) clamp(22px, 3.8vw, 54px) 76px;
}
.reference-chapter .chapter-title { margin-bottom: 34px; }
.concord-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  border-top: 1px solid var(--reader-rule);
  border-bottom: 1px solid var(--reader-rule);
}
.concord-side { min-width: 0; padding: 14px 0; }
.concord-side-left { border-right: 1px solid var(--reader-rule); }
.concord-row {
  display: grid;
  align-items: start;
  min-width: 0;
}
.concord-side-left .concord-row {
  grid-template-columns: minmax(0, 1fr) clamp(94px, 10vw, 126px);
  grid-template-areas: "scripture references";
}
.concord-side-right .concord-row {
  grid-template-columns: clamp(94px, 10vw, 126px) minmax(0, 1fr);
  grid-template-areas: "references scripture";
}
.concord-scripture-cell {
  grid-area: scripture;
  min-width: 0;
  padding: 0 15px 13px;
}
.concord-side-left .concord-scripture-cell { padding-left: 0; }
.concord-side-right .concord-scripture-cell { padding-right: 0; }
.concord-verse {
  display: block;
  font-family: var(--reader-font);
  font-size: var(--reader-size);
  line-height: 1.57;
  text-wrap: pretty;
}
.concord-verse .verse-number {
  top: -.24em;
  margin-left: 0;
}
.concord-heading {
  margin: 6px 0 10px;
  padding: 0;
  font-size: 12px;
  text-align: left;
}
.concord-references {
  grid-area: references;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px 5px;
  min-width: 0;
  min-height: 1.7em;
  padding: 2px 8px 12px;
  color: var(--reader-muted);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.25;
}
.concord-side-left .concord-references { border-left: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent); }
.concord-side-right .concord-references { border-right: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent); }
.concord-reference-verse {
  min-width: 1.45em;
  color: var(--reader-ink);
  font-size: 11px;
  font-weight: 900;
}
.concord-references a {
  display: inline;
  color: var(--reader-muted);
  text-decoration: none;
  white-space: nowrap;
}
.concord-references a::after { color: var(--reader-rule); content: ";"; }
.concord-references a:last-child::after { content: ""; }
.concord-references a:hover,
.concord-references a:focus-visible {
  color: var(--reader-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.concord-reference-unavailable { color: var(--reader-muted); font-size: 9px; font-style: italic; }
body[data-paper="black"] .concord-references a:hover,
body[data-paper="black"] .concord-references a:focus-visible { color: #f0d486; }
.colophon { margin: 34px auto 0; color: var(--reader-muted); font-family: var(--reader-font); font-size: calc(var(--reader-size) * .78); font-style: italic; line-height: 1.55; text-align: center; }
.chapter-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 52px; }
.chapter-footer button, .chapter-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; color: var(--reader-ink); border: 1px solid var(--reader-rule); border-radius: 5px; background: var(--reader-control-bg); font-weight: 700; text-decoration: none; }
.chapter-footer svg { width: 17px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 18px; color: var(--reader-muted); font-family: "Atkinson Hyperlegible Next", Arial, sans-serif; font-size: 12px; }
.seo-breadcrumbs a { color: inherit; text-decoration: none; }
.seo-breadcrumbs a:hover { color: var(--reader-accent); text-decoration: underline; }
.seo-context-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 48px; font-family: "Atkinson Hyperlegible Next", Arial, sans-serif; font-size: 13px; }
.seo-context-links a { min-height: 36px; padding: 8px 12px; color: var(--reader-ink); border: 1px solid var(--reader-rule); border-radius: 4px; background: var(--reader-control-bg); text-decoration: none; }
.seo-context-links a:hover { color: var(--reader-accent); border-color: var(--reader-accent); }
.loading-state, .empty-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50vh; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.utility-panel { display: none; border-left: 1px solid var(--line); }
.app-layout.utility-open .utility-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.utility-heading { border-bottom: 1px solid var(--line); }
.utility-header-actions { display: flex; align-items: center; gap: 6px; }
#tools-expand { transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .18s ease; }
#tools-expand[aria-pressed="true"] { color: #fff; border-color: var(--accent); background: var(--accent); transform: translateX(-8px); }
#utility-close {
  color: var(--ink);
  border-color: var(--line);
  background: var(--chrome-strong);
}
#utility-close:hover,
#utility-close:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
#utility-close svg { width: 21px; height: 21px; stroke-width: 2.25; }
.utility-content { min-height: 0; overflow-y: auto; padding: 18px; }
.app-layout.tools-expanded[data-utility-view="search"] .utility-content,
.app-layout.tools-expanded[data-utility-view="study"] .utility-content { padding: 22px 24px; }
.tool-view { min-width: 0; }
.tool-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tool-tabs button { height: 38px; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 12px; font-weight: 700; }
.tool-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.advanced-search > label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.search-field { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; min-height: 44px; padding-left: 12px; border: 1px solid #bbb7ad; border-radius: 5px; background: white; }
.search-field svg { width: 17px; color: var(--muted); }
.search-field input { min-width: 0; height: 42px; padding: 0 8px; border: 0; outline: 0; }
.search-field button { align-self: stretch; min-width: 68px; margin: -1px; color: white; border: 0; border-radius: 0 5px 5px 0; background: var(--accent); font-weight: 700; }
body[data-chrome-mode="dark"] .search-field {
  border-color: var(--line);
  background: #201e1a;
}
body[data-chrome-mode="dark"] .search-field input {
  color: var(--ink);
  background: transparent;
}
body[data-chrome-mode="dark"] .search-field input::placeholder { color: var(--faint); opacity: 1; }
.search-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.search-options label { color: var(--muted); font-size: 11px; font-weight: 700; }
.search-options select { width: 100%; height: 38px; margin-top: 5px; padding: 0 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; background: white; font-size: 12px; }
.search-mode-help { min-height: 38px; margin: 9px 0 0; padding-left: 9px; color: var(--muted); border-left: 2px solid var(--line); font-size: 11px; line-height: 1.45; }
.search-summary { margin: 18px 0 12px; padding: 11px 12px; color: var(--muted); border-left: 3px solid var(--gold); background: #f7f1e5; font-size: 12px; line-height: 1.45; }
body[data-chrome-mode="dark"] .search-options select {
  color: var(--ink);
  border-color: var(--line);
  background: #201e1a;
}
body[data-chrome-mode="dark"] .search-options select option,
body[data-chrome-mode="dark"] .voice-control select option {
  color: var(--ink);
  background: #201e1a;
}
body[data-chrome-mode="dark"] .search-summary {
  color: #c9c1b4;
  background: #242019;
}
.search-expansion { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 14px; }
.search-expansion > span { flex-basis: 100%; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.search-expansion button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 8px; color: #5d4722; border: 1px solid #dbc89f; border-radius: 4px; background: #fff9ea; font-size: 11px; }
.search-expansion button:hover { border-color: var(--gold); background: #fff3cf; }
.search-expansion button small { min-width: 18px; padding: 1px 5px; color: #6b5229; border-radius: 999px; background: #f0dfb8; font-size: 10px; text-align: center; }
.search-expansion button[data-suggestion-type="related"] { color: #465a44; border-color: #bfd1bc; background: #f4fbf0; }
.search-expansion button[data-suggestion-type="related"] small { color: #3f563d; background: #dcebd8; }
body[data-chrome-mode="dark"] .search-expansion button {
  color: #e2c98f;
  border-color: #665534;
  background: #292319;
}
body[data-chrome-mode="dark"] .search-expansion button:hover { border-color: var(--gold); background: #332919; }
body[data-chrome-mode="dark"] .search-expansion button small { color: #f0d9a3; background: #4b3d25; }
body[data-chrome-mode="dark"] .search-expansion button[data-suggestion-type="related"] {
  color: #afd5ae;
  border-color: #405b41;
  background: #1b281d;
}
body[data-chrome-mode="dark"] .search-expansion button[data-suggestion-type="related"] small { color: #cae5c8; background: #304833; }
.search-results { display: grid; gap: 0; }
.app-layout.tools-expanded[data-utility-view="search"] .search-results { gap: 0 18px; }
.concordance-breakdown { margin: 0 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: white; }
.concordance-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.concordance-total strong { font-family: "Source Serif 4", Georgia, serif; font-size: 28px; }
.concordance-total span { color: var(--muted); font-size: 11px; }
.concordance-books { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.concordance-book { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) 32px; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.concordance-bar { height: 5px; overflow: hidden; border-radius: 3px; background: var(--chrome-strong); }
.concordance-bar span { display: block; height: 100%; background: var(--gold); }
.concordance-book strong { color: var(--ink); text-align: right; }
.search-result-item { position: relative; border-bottom: 1px solid var(--line); }
.search-result { display: block; width: 100%; padding: 15px 2px 10px; color: var(--ink); border: 0; background: transparent; text-align: left; text-decoration: none; }
.search-result:hover { background: rgba(255,255,255,.7); }
body[data-chrome-mode="dark"] .search-result:hover { background: rgba(255, 255, 255, .045); }
.search-result-item.current { padding-left: 10px; border-left: 3px solid var(--accent); background: rgba(160, 125, 45, .07); }
body[data-chrome-mode="dark"] .search-result-item.current { background: rgba(216, 139, 155, .09); }
.result-reference { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--accent); font-size: 13px; font-weight: 700; }
.result-reference small { color: var(--faint); font-weight: 400; }
.result-text { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 15px; line-height: 1.5; }
body[data-tool-text-size="regular"] .result-text { font-size: 15px; }
body[data-tool-text-size="large"] .result-text { font-size: 17px; }
body[data-tool-text-size="xlarge"] .result-text { font-size: 19px; line-height: 1.55; }
.result-text mark { color: inherit; background: #ffeb8d; }
body[data-chrome-mode="dark"] .result-text mark { color: #17140f; background: #d8b85b; }
.result-reason { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.search-result-actions { display: flex; justify-content: flex-end; gap: 3px; padding: 0 2px 9px; }
.search-result-actions button { display: inline-grid; place-items: center; width: 32px; height: 30px; padding: 0; color: var(--muted); border: 1px solid transparent; border-radius: 4px; background: transparent; }
.search-result-actions button:hover { color: var(--accent); border-color: var(--line); background: var(--accent-soft); }
.search-result-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-result-actions svg { width: 15px; height: 15px; }
.result-loading { display: flex; align-items: center; gap: 9px; padding: 20px 0; color: var(--muted); font-size: 13px; }

.setting-group { padding: 6px 0 22px; }
.display-mode-setting { display: block; }
.setting-group + .setting-group { padding-top: 20px; border-top: 1px solid var(--line); }
.setting-group h3, .source-details h3 { margin: 0 0 12px; font-size: 13px; }
.edition-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.edition-control button { display: grid; gap: 3px; min-width: 0; min-height: 58px; padding: 10px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 5px; background: white; }
.edition-control button strong { font-size: 12px; }
.edition-control button small, .edition-note { color: var(--muted); font-size: 10px; line-height: 1.35; }
.edition-control button.active { color: white; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.edition-control button.active small { color: rgba(255,255,255,.82); }
.edition-note { margin: 9px 0 0; }
body[data-chrome-mode="dark"] .edition-control button { background: #181714; }
body[data-chrome-mode="dark"] .edition-control button.active { background: var(--accent); }
.edition-source { display: none; }
body[data-edition="pce"] [data-source-edition="pce"], body[data-edition="he1611"] [data-source-edition="he1611"] { display: block; }
.source-caveat { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.edition-apparatus { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-soft); }
.edition-apparatus > strong { display: block; margin-bottom: 8px; font-size: 12px; }
.edition-apparatus p { margin: 7px 0 0; font-size: var(--tool-verse-size); line-height: 1.55; }
.edition-apparatus small { color: var(--muted); }
.paper-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paper-swatch { position: relative; display: grid; gap: 7px; padding: 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: transparent; font-size: 11px; font-weight: 700; }
.paper-swatch span { height: 46px; border: 1px solid #d4d0c5; border-radius: 2px; background: #fff; }
.paper-swatch[data-paper-choice="cream"] span { background: #fbf5e7; }
.paper-swatch[data-paper-choice="ivory"] span { background: #f4f0df; }
.paper-swatch[data-paper-choice="beige"] span { background: #e8dbc1; }
.paper-swatch[data-paper-choice="black"] span { border-color: #444; background: #111; }
.paper-swatch[data-paper-choice="antique"] span { background: #f6e6bd url("assets/antique-paper.jpg") center / cover; }
.paper-swatch.active { color: var(--accent); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.paper-swatch.active::after { content: "\2713"; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 18px; height: 18px; color: #fff; border-radius: 50%; background: var(--accent); font-size: 12px; line-height: 1; }
body[data-chrome-mode="dark"] .paper-swatch.active { color: #f7e9b4; border-color: #e8cf82; outline-color: #e8cf82; background: rgba(212, 181, 104, .13); }
body[data-chrome-mode="dark"] .paper-swatch.active::after { color: #241f13; background: #e8cf82; }
.theme-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.theme-control button { display: grid; place-items: center; gap: 6px; min-width: 0; min-height: 58px; padding: 7px 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 11px; font-weight: 700; }
.theme-control button svg { width: 19px; height: 19px; }
.theme-control button.active { color: white; border-color: var(--accent); background: var(--accent); }
body[data-chrome-mode="dark"] .theme-control button { background: #181714; }
body[data-chrome-mode="dark"] .theme-control button.active {
  color: #fff;
  border-color: #e8cf82;
  background: #74571a;
  box-shadow: 0 0 0 1px #e8cf82;
}
.choice-stack { display: grid; gap: 7px; }
.type-choice { display: grid; grid-template-columns: 48px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 62px; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; background: white; text-align: left; }
.type-choice > span:nth-child(2) { display: grid; gap: 3px; }
.type-choice small { color: var(--muted); font-size: 11px; }
.type-choice svg { display: none; width: 17px; color: var(--accent); }
.type-choice.active { border-color: var(--accent); background: var(--accent-soft); }
.type-choice.active svg { display: block; }
.type-sample { display: grid; place-items: center; height: 42px; color: var(--reader-ink); border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 20px; }
.type-clear { font-family: "Atkinson Hyperlegible Next", Arial, sans-serif; }
.type-cambridge { font-family: "Source Serif 4", Georgia, serif; }
.type-classical { font-family: "Alegreya", Georgia, serif; font-weight: 500; }
.type-av1611 { font-family: "KJV1611", "Old English Text MT", serif; }
.size-control { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.size-control button { height: 46px; color: var(--muted); border: 0; border-right: 1px solid var(--line); background: white; }
.size-control button:nth-child(1) { font-size: 14px; }
.size-control button:nth-child(2) { font-size: 19px; }
.size-control button:nth-child(3) { border-right: 0; font-size: 24px; }
.size-control button.active { color: white; background: var(--accent); }
.layout-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.layout-control button { display: grid; place-items: center; gap: 6px; min-width: 0; min-height: 58px; padding: 7px 4px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 11px; font-weight: 700; }
.layout-control button svg { width: 19px; height: 19px; }
.layout-control button.active { color: white; border-color: var(--accent); background: var(--accent); }
.spread-control { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.spread-control button { display: grid; place-items: center; gap: 6px; min-height: 58px; padding: 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: white; font-size: 11px; font-weight: 700; }
.spread-control button svg { width: 19px; height: 19px; }
.spread-control button.active { color: white; border-color: var(--accent); background: var(--accent); }
.page-spread-setting > p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.toggles label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--line); }
.toggles label > span { display: grid; gap: 3px; }
.toggles small { color: var(--muted); font-size: 11px; }
.toggles input { width: 38px; height: 22px; accent-color: var(--accent); }
.about-text-link { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; margin-top: 18px; padding: 11px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; background: transparent; text-align: left; }
.about-text-link span { display: grid; gap: 2px; }
.about-text-link strong { font-size: 12px; }
.about-text-link small { color: var(--muted); font-size: 10px; }
.about-text-link svg { width: 16px; color: var(--faint); }
.about-text-link:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Compact Display dashboard */
#display-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  align-content: start;
}
#display-view:not([hidden]) { display: grid; }
#display-view > .setting-group {
  min-width: 0;
  padding: 8px 0 12px;
}
#display-view > .setting-group + .setting-group { padding-top: 12px; border-top: 0; }
#display-view .setting-group h3 { margin-bottom: 8px; font-size: 11px; text-transform: uppercase; }
.display-surface-group,
.display-edition-group,
.display-type-group,
.display-size-group,
.display-page-features,
.display-mode-setting,
.display-more { grid-column: 1 / -1; }
.display-surface-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.display-surface-option { min-width: 0; }
.display-edition-group,
.display-type-group { border-top: 1px solid var(--line); }
.display-size-group {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.display-layout-group,
.display-page-group { border-top: 1px solid var(--line); }
.display-setting-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.display-setting-heading output {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
}
#display-view .theme-control { gap: 5px; }
#display-view .theme-control button {
  grid-template-columns: 16px auto;
  min-height: 38px;
  gap: 5px;
  padding: 5px;
}
#display-view .theme-control button svg { width: 15px; height: 15px; }
#display-view .paper-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#display-view .paper-swatch { gap: 3px; padding: 4px; font-size: 9px; }
#display-view .paper-swatch span { height: 24px; }
#display-view .paper-swatch.active::after { top: 2px; right: 2px; width: 14px; height: 14px; font-size: 9px; }
#display-view .edition-control { gap: 5px; }
#display-view .edition-control button {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  min-height: 42px;
  padding: 7px 9px;
  text-align: center;
}
#display-view .edition-note { display: none; }
#display-view .choice-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
#display-view .type-choice {
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  gap: 7px;
  min-height: 50px;
  padding: 6px 7px;
}
#display-view .type-choice strong { font-size: 11px; }
#display-view .type-choice small { font-size: 9px; line-height: 1.2; }
#display-view .type-choice svg { width: 14px; }
#display-view .type-sample { height: 34px; font-size: 16px; }
#display-view .size-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 0 5px;
  overflow: visible;
  border: 0;
  border-radius: 0;
}
#text-size-range {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.size-step-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
#display-view .size-step-labels button,
#display-view .size-step-labels button:nth-child(n) {
  height: 24px;
  padding: 0 2px;
  color: var(--muted);
  border: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 700;
}
#display-view .size-step-labels button:first-child { text-align: left; }
#display-view .size-step-labels button:last-child { text-align: right; }
#display-view .size-step-labels button.active { color: var(--accent); }
#display-view .layout-control { gap: 4px; }
#display-view .layout-control button,
#display-view .column-control button {
  min-height: 46px;
  gap: 4px;
  padding: 5px 2px;
  font-size: 9px;
}
#display-view .layout-control button svg,
#display-view .column-control button svg { width: 16px; height: 16px; }
#display-view .layout-feature-toggle {
  min-height: 42px;
  margin-top: 5px;
  padding-top: 5px;
}
#display-view .layout-feature-toggle strong { font-size: 10px; }
#display-view .layout-feature-toggle small { display: none; }
#display-view .layout-feature-toggle input { width: 34px; height: 20px; }
.page-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.display-page-features {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.display-mode-setting {
  padding-top: 0 !important;
  border-top: 0 !important;
}
#display-view .display-mode-setting .mode-control { display: grid; }
#display-view .display-mode-setting .mode-control button {
  min-width: 0;
  height: 36px;
  font-size: 10px;
}
.compact-spread-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.compact-spread-setting > span { display: grid; gap: 2px; }
.compact-spread-setting strong { font-size: 10px; }
.compact-spread-setting small { color: var(--muted); font-size: 8px; }
#display-view .compact-spread-setting .spread-control { gap: 3px; }
#display-view .compact-spread-setting .spread-control button {
  grid-template-columns: 13px auto;
  min-width: 40px;
  min-height: 30px;
  gap: 3px;
  padding: 3px;
  font-size: 8px;
}
#display-view .compact-spread-setting .spread-control button svg { width: 13px; height: 13px; }
#display-view .page-feature-grid .layout-feature-toggle {
  min-height: 42px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
#display-view .page-feature-grid .layout-feature-toggle small { display: block; font-size: 8px; }
body[data-chrome-mode="dark"] .compact-spread-setting,
body[data-chrome-mode="dark"] #display-view .page-feature-grid .layout-feature-toggle { background: #191815; }
.display-more {
  margin-top: 3px;
  border-top: 1px solid var(--line);
}
.display-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.display-more > summary::-webkit-details-marker { display: none; }
.display-more > summary > span { display: grid; gap: 2px; }
.display-more > summary strong { font-size: 12px; }
.display-more > summary small { color: var(--muted); font-size: 9px; }
.display-more > summary svg { width: 16px; color: var(--accent); transition: transform .18s ease; }
.display-more[open] > summary svg { transform: rotate(180deg); }
.display-more-content { padding: 0 4px 8px; border-top: 1px solid var(--line); }
.display-more-content .setting-group { padding: 13px 0; }
.display-more-content .setting-group + .setting-group { padding-top: 13px; }
.display-more-content .spread-control button { min-height: 46px; }
.display-more-content .toggles label { min-height: 46px; }
.display-more-content .about-text-link { margin-top: 8px; }
body[data-chrome-mode="dark"] #text-size-range { accent-color: #e2c66f; }
body[data-chrome-mode="dark"] .display-more > summary { color: #f2ecdf; }

@media (max-width: 520px) {
  .utility-heading {
    min-height: 62px;
    padding: 8px 12px 6px;
  }
  .utility-heading h2 { font-size: 20px; }
  .utility-content { padding: 9px 12px; }
  #display-view {
    column-gap: 8px;
  }
  .display-surface-group { gap: 8px; }
  #display-view > .setting-group {
    padding: 5px 0 8px;
  }
  #display-view > .setting-group + .setting-group { padding-top: 8px; }
  #display-view .setting-group h3 { margin-bottom: 5px; font-size: 10px; }
  #display-view .theme-control button { min-height: 34px; }
  #display-view .paper-swatch { padding: 3px; }
  #display-view .paper-swatch span { height: 20px; }
  #display-view .edition-control button {
    min-height: 38px;
    padding: 5px 7px;
  }
  #display-view .type-choice {
    min-height: 44px;
    padding: 4px 6px;
  }
  #display-view .type-sample { height: 30px; }
  #text-size-range { height: 20px; }
  #display-view .size-step-labels button,
  #display-view .size-step-labels button:nth-child(n) { height: 20px; }
  #display-view .layout-control button,
  #display-view .column-control button { min-height: 41px; }
  #display-view .layout-feature-toggle {
    min-height: 36px;
    margin-top: 3px;
    padding-top: 3px;
  }
  .display-more > summary { min-height: 42px; }
}

@media (max-width: 760px) {
  .page-feature-grid { grid-template-columns: 1fr; }
  .compact-spread-setting { display: none; }
}

.word-help-usage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: 11px;
  padding: 5px 8px;
  color: #6f5420;
  border: 1px solid #c9aa5b;
  border-radius: 4px;
  background: #fff9e8;
  font-size: 10px;
  font-weight: 800;
}
.word-help-usage svg { width: 14px; height: 14px; }
.word-help-usage:hover { color: #2d2412; border-color: #8e6b20; background: #f2dfaa; }
body[data-chrome-mode="dark"] .word-help-usage { color: #f2d77f; border-color: #8f7130; background: #282318; }
body[data-chrome-mode="dark"] .word-help-usage:hover { color: #211b0e; background: #e2c66f; }

.word-study-meaning-status {
  display: block;
  width: fit-content;
  margin: 0 0 7px;
  padding: 3px 6px;
  color: #6f5420;
  border: 1px solid rgba(142, 107, 32, .34);
  border-radius: 999px;
  background: rgba(255, 249, 232, .72);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .02em;
}
.word-study-sections { display: grid; gap: 0; padding: 0 8px 7px; }
.word-study-detail { border-bottom: 1px solid var(--line); }
.word-study-detail > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 7px 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.word-study-detail > summary::-webkit-details-marker { display: none; }
.word-study-detail > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.word-study-detail > summary svg { width: 15px; height: 15px; }
.word-study-detail > summary > svg:last-child { transition: transform .18s ease; }
.word-study-detail[open] > summary > svg:last-child { transform: rotate(180deg); }
.word-study-detail > summary > strong { color: var(--muted); font-size: 10px; }
.word-study-detail-body { display: grid; gap: 9px; padding: 3px 5px 12px; }
.word-study-detail-body p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.word-study-detail-body p strong { color: var(--ink); }
.word-family-members, .related-concept-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.word-family-members button, .related-concept-members button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  text-align: left;
}
.word-family-members button:hover, .related-concept-members button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.word-family-members button[aria-current="true"] { color: white; border-color: var(--accent); background: var(--accent); }
.word-family-members span, .related-concept-members strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.word-family-members small, .related-concept-members small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.word-family-members button[aria-current="true"] small { color: rgba(255,255,255,.78); }
.word-study-usage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 5px 7px; }
.word-study-usage > div { display: grid; gap: 2px; min-width: 0; }
.word-study-usage > div > span { color: var(--accent); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.word-study-usage > div > strong { font-size: 11px; line-height: 1.35; }
.word-study-usage > div > small { color: var(--muted); font-size: 9px; }
.word-study-usage .word-help-usage { margin-top: 0; }
.word-help-source { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.word-help-source-locator { color: var(--muted); font-size: 9px; }
.word-help-source-link { color: var(--accent); font-size: 9px; font-weight: 800; text-decoration: none; }
.word-help-source-link:hover { text-decoration: underline; }
.word-study-back { display: inline-flex; align-items: center; gap: 7px; width: fit-content; min-height: 34px; margin: 0 0 9px; padding: 6px 9px; color: var(--accent); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font-size: 10px; font-weight: 800; }
.word-study-back:hover { color: white; border-color: var(--accent); background: var(--accent); }
.word-study-back svg { width: 14px; height: 14px; }
body[data-chrome-mode="dark"] .word-study-meaning-status { color: #ead081; border-color: #806324; background: #282318; }
body[data-chrome-mode="dark"] .word-family-members button,
body[data-chrome-mode="dark"] .related-concept-members button,
body[data-chrome-mode="dark"] .word-study-back { background: #201e1a; }
body[data-chrome-mode="dark"] .word-family-members button[aria-current="true"] { color: #211b0e; background: #e2c66f; }

@media (max-width: 430px) {
  .word-family-members, .related-concept-members { grid-template-columns: 1fr; }
  .word-study-usage { grid-template-columns: 1fr; }
  .word-study-usage .word-help-usage { width: fit-content; }
}

.source-intro { text-align: center; }
.verified-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 8px auto 12px; color: var(--green); border-radius: 50%; background: #dcece5; }
.verified-mark svg { width: 28px; }
.source-intro h3 { margin: 0 0 8px; font-family: "Source Serif 4", Georgia, serif; font-size: 22px; }
.source-intro p, .source-details p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.source-details { padding: 18px 0; border-top: 1px solid var(--line); }
.source-details ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.75; }

.audio-intro .verified-mark { color: var(--accent); background: var(--accent-soft); }
.audio-fallback { margin-top: 14px; }
.audio-fallback-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; color: var(--tool-gold-ink); background: var(--tool-gold); border: 1px solid var(--tool-gold-border); border-radius: 5px; }
.audio-fallback-notice > svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.audio-fallback-notice strong { display: block; font-size: 12px; line-height: 1.35; }
.audio-fallback-notice p { margin: 4px 0 0; font-size: 11px; line-height: 1.45; }
.audio-fallback #audio-device-settings { margin-top: 10px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.audio-fallback #audio-device-settings .setting-group:first-child { border-top: 0; }
.audio-source-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; margin: 18px 0 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.audio-source-control button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; padding: 7px 9px; color: #806324; border: 0; border-right: 1px solid var(--line); background: var(--panel); font-size: 11px; font-weight: 800; }
.audio-source-control button:last-child { border-right: 0; }
.audio-source-control button.active { color: white; background: var(--accent); }
body[data-chrome-mode="dark"] .audio-source-control button.active { color: white; background: #74571a; box-shadow: inset 0 0 0 1px #e8cf82; }
.audio-source-control button:hover:not(:disabled):not(.active) { color: #5f4817; background: #fbf7ea; }
body[data-chrome-mode="dark"] .audio-source-control button:not(.active):not(:disabled) { color: #e2c66f; }
.audio-source-control button:disabled { color: #8d877b; background: var(--panel-soft); }
.audio-source-control svg { width: 16px; height: 16px; flex: 0 0 auto; }
.audio-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin: 18px 0 20px; }
.audio-controls button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 56px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: white;
  font-size: 11px;
  font-weight: 700;
}
.audio-controls button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
body[data-chrome-mode="dark"] .audio-controls button {
  color: var(--ink);
  border-color: var(--line);
  background: #201e1a;
}
body[data-chrome-mode="dark"] .audio-controls button:hover:not(:disabled) {
  color: #ead081;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.audio-controls svg { width: 18px; }
.audio-primary-controls { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
.audio-primary-controls .audio-primary-play { display: flex; flex-direction: row; justify-content: center; min-width: 0; padding: 9px 14px; color: white; border-color: var(--accent); background: var(--accent); font-size: 12px; }
.audio-primary-controls .audio-primary-play:hover:not(:disabled) { color: white; border-color: #5d4722; background: #5d4722; }
body[data-chrome-mode="dark"] .audio-primary-controls .audio-primary-play { color: white; border-color: #e8cf82; background: #74571a; box-shadow: inset 0 0 0 1px #e8cf82; }
.audio-scope-setting { padding-top: 18px; }
.audio-setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.audio-setting-heading > div { display: grid; gap: 2px; }
.audio-setting-heading > div > span { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.audio-setting-heading h3 { margin: 0; font-size: 14px; }
.audio-repeat-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 56px; padding: 8px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font-size: 11px; font-weight: 800; }
.audio-repeat-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.audio-repeat-toggle.active { color: white; border-color: var(--accent); background: var(--accent); }
.audio-repeat-toggle svg { width: 14px; height: 14px; }
.audio-scope-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0 0 10px; }
.audio-scope-actions button { display: grid; place-items: center; gap: 5px; min-width: 0; min-height: 58px; padding: 7px 3px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); font-size: 9px; font-weight: 700; line-height: 1.15; }
.audio-scope-actions button:hover:not(:disabled), .audio-scope-actions button.active { color: white; border-color: var(--accent); background: var(--accent); }
.audio-scope-actions button:disabled { opacity: .45; }
.audio-scope-actions svg { width: 15px; height: 15px; flex: 0 0 auto; }
body[data-chrome-mode="dark"] .audio-scope-actions button { color: var(--ink); background: #201e1a; }
body[data-chrome-mode="dark"] .audio-scope-actions button:hover:not(:disabled) { color: #ead081; border-color: var(--accent); background: var(--accent-soft); }
body[data-chrome-mode="dark"] .audio-scope-actions button.active { color: white; border-color: #e8cf82; background: #74571a; box-shadow: inset 0 0 0 1px #e8cf82; }
.audio-custom-summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) 15px; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); text-align: left; font-size: 11px; font-weight: 700; }
.audio-custom-summary:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.audio-custom-summary svg { width: 15px; height: 15px; }
.audio-custom-summary svg:last-child { color: var(--faint); }
.audio-custom-summary[hidden] { display: none; }
.voice-control { display: flex; width: 100%; }
.voice-control select { height: 42px; }
.audio-sliders label { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--line); }
.audio-sliders label > span { display: grid; gap: 3px; }
.audio-sliders small { color: var(--muted); font-size: 11px; }
.audio-sliders input { width: 100%; accent-color: var(--accent); }
.audio-speed-setting label:last-child { border-bottom: 0; }
.audio-disclosure { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: center; }
.audio-custom-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(84vh, 760px); padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: 0 24px 70px rgba(30, 24, 20, .28); }
.audio-custom-dialog::backdrop { background: rgba(27, 23, 20, .48); backdrop-filter: blur(2px); }
.audio-custom-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(84vh, 760px); }
.audio-custom-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.audio-custom-header h2 { margin: 2px 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 24px; }
.audio-custom-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.audio-custom-actions button { min-height: 34px; padding: 6px 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 10px; font-weight: 800; }
.audio-custom-actions button:hover { color: var(--accent); border-color: var(--accent); }
.audio-custom-books { overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px 20px 22px; }
.audio-custom-books section h3 { margin: 0 0 10px; font-size: 13px; }
.audio-custom-books section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.audio-custom-books label { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); font-size: 11px; cursor: pointer; }
.audio-custom-books input { width: 16px; height: 16px; accent-color: var(--accent); }
.audio-custom-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; border-top: 1px solid var(--line); background: var(--panel-soft); }
.audio-custom-footer > span { color: var(--muted); font-size: 11px; }
.audio-custom-footer > div { display: flex; gap: 7px; }
.audio-custom-footer button { min-height: 38px; padding: 7px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 11px; font-weight: 700; }
.audio-custom-footer button.primary { color: white; border-color: var(--accent); background: var(--accent); }
.audio-custom-footer button:disabled { opacity: .45; cursor: not-allowed; }
body[data-chrome-mode="dark"] .audio-custom-dialog,
body[data-chrome-mode="dark"] .audio-custom-actions button,
body[data-chrome-mode="dark"] .audio-custom-footer button { background: #201e1a; }
body[data-chrome-mode="dark"] .audio-custom-footer button.primary { background: #74571a; }

.study-view { padding-bottom: 12px; }
.study-passage-bar { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 9px; margin: -2px 0 16px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
.study-passage-bar > div { display: grid; gap: 2px; text-align: center; }
.study-passage-bar span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.study-passage-bar strong { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; }
.study-passage-bar .icon-button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--panel); }
.study-passage-bar .icon-button:disabled { opacity: .35; }
.study-return { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 38px; margin: -8px 0 14px; padding: 8px 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; background: var(--accent-soft); font-size: 11px; }
.study-return:hover { color: white; background: var(--accent); }
.study-return svg { width: 15px; height: 15px; }
.study-return strong { font-family: "Source Serif 4", Georgia, serif; font-size: 12px; }
.study-tabs { gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
.study-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 42px; color: var(--tool-bronze-ink); border: 1px solid var(--tool-bronze-border); border-radius: 4px; background: var(--tool-bronze); }
.study-tabs button svg { width: 16px; height: 16px; }
.study-tabs button:hover { color: var(--tool-gold-ink); border-color: var(--tool-gold-border); background: var(--tool-gold); }
.study-tabs button.active { color: var(--tool-gold-ink); border-color: var(--tool-gold-border); background: var(--tool-gold); box-shadow: inset 0 0 0 2px rgba(255, 249, 218, .72), 0 1px 2px rgba(42, 35, 30, .14); }
body[data-chrome-mode="dark"] .study-tabs button:not(.active) { color: #e2c66f; border-color: #74571a; background: #1d1b18; }
.study-entry-size { display: grid; gap: 5px; margin: -10px 0 18px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
.study-entry-size-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.study-entry-size-heading > span { display: grid; gap: 2px; }
.study-entry-size-heading strong { color: var(--ink); font-size: 11px; }
.study-entry-size-heading small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.study-entry-size-heading output { color: var(--accent); font-size: 10px; font-weight: 800; white-space: nowrap; }
.study-entry-size-control { display: grid; gap: 2px; min-width: 0; padding: 0 2px; }
#study-entry-size-range { appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; accent-color: var(--selector-thumb-edge); cursor: pointer; }
#study-entry-size-range::-webkit-slider-runnable-track { height: 5px; border: 1px solid color-mix(in srgb, var(--selector-thumb-edge) 70%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--chrome-strong) 78%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); }
#study-entry-size-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 1px solid var(--selector-thumb-edge); border-radius: 50%; background: var(--selector-thumb); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.3); }
#study-entry-size-range::-moz-range-track { height: 5px; border: 1px solid color-mix(in srgb, var(--selector-thumb-edge) 70%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--chrome-strong) 78%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); }
#study-entry-size-range::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid var(--selector-thumb-edge); border-radius: 50%; background: var(--selector-thumb); box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.3); }
#study-entry-size-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.study-entry-size-labels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; color: var(--muted); font-size: 8px; font-weight: 700; line-height: 1.15; text-align: center; }
.study-entry-size-labels span:first-child { text-align: left; }
.study-entry-size-labels span:last-child { text-align: right; }
.study-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.study-section-heading > div { display: grid; gap: 3px; }
.study-section-heading > div span { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.study-section-heading h3 { margin: 0; font-size: 16px; }
.study-section-heading > svg { width: 22px; color: var(--faint); }
.word-help-toggle-all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 9px; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.word-help-toggle-all:hover, .word-help-toggle-all:focus-visible { color: white; border-color: var(--accent); background: var(--accent); }
.word-help-toggle-all[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.word-help-toggle-all svg { width: 14px; height: 14px; }
.word-help-toggle-all[hidden], .word-help-expand[hidden] { display: none; }
.word-help-results { display: grid; gap: 9px; }
.word-study-edition-note {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  color: var(--muted);
  border: 1px solid rgba(128, 99, 36, .22);
  border-radius: 5px;
  background: rgba(184, 147, 56, .07);
  font-size: 10px;
  line-height: 1.4;
}
.word-study-edition-note strong { color: var(--ink); font-size: 11px; }
.word-help-group { display: grid; gap: 0; }
.word-help-unified {
  padding: 15px;
  border: 1px solid #b89338;
  border-radius: 6px;
  background: linear-gradient(145deg, #fffdf7, #fbf3dc);
  box-shadow: inset 3px 0 0 #b89338;
}
.word-help-group.active .word-help-unified { border-color: #806324; box-shadow: inset 4px 0 0 #806324, 0 0 0 2px rgba(184,147,56,.12); }
.word-help-unified-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.word-help-unified-top span { color: #806324; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.word-help-unified-top svg { width: 17px; height: 17px; color: #b89338; }
.word-help-unified h4 { margin: 6px 0; font-family: "Source Serif 4", Georgia, serif; font-size: 21px; }
.word-help-unified p { margin: 0 0 10px; color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 16px; line-height: 1.55; }
.word-help-unified small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.word-help-history { padding: 0 8px; }
.word-help-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 7px 5px;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.word-help-history summary::-webkit-details-marker { display: none; }
.word-help-history summary:hover,
.word-help-history summary:focus-visible { color: #5d4722; }
.word-help-history summary svg { width: 16px; height: 16px; transition: transform .18s ease; }
.word-help-history[open] summary { border-bottom-color: var(--line); }
.word-help-history[open] summary svg { transform: rotate(180deg); }
.word-help-history-cards { display: grid; gap: 9px; padding: 10px 0 5px; }
.word-help-card { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.word-help-card.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.word-help-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.word-help-type { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.word-help-card h4 { margin: 5px 0 6px; font-family: "Source Serif 4", Georgia, serif; font-size: 20px; }
.word-help-card p { margin: 0 0 9px; font-size: 13px; line-height: 1.55; }
.word-help-card.expandable:not(.expanded) p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.word-help-card.expandable { cursor: zoom-in; }
.word-help-card.expandable.expanded { cursor: zoom-out; }
.word-help-expand { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); cursor: pointer; }
.word-help-expand:hover, .word-help-expand:focus-visible { color: white; border-color: var(--accent); background: var(--accent); }
.word-help-expand svg { width: 15px; height: 15px; }
.word-help-card.definition-loading .word-help-expand svg { animation: spin .8s linear infinite; }
.word-help-card small { color: var(--muted); font-size: 10px; }
.translator-notes { display: grid; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #c8a84f; border-radius: 6px; background: #fffaf0; }
.translator-notes-heading, .translator-note-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.translator-notes-heading > div { display: grid; gap: 2px; }
.translator-notes-heading span { color: #806324; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.translator-notes-heading strong { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; }
.translator-notes-heading small, .translator-note-top small { color: var(--muted); font-size: 9px; }
.translator-note { padding-top: 9px; border-top: 1px solid rgba(128, 99, 36, .24); }
.translator-note p { display: grid; gap: 4px; margin: 7px 0 0; color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: var(--tool-verse-size); line-height: 1.55; }
.translator-note p small { color: var(--muted); font-family: Inter, Arial, sans-serif; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.translator-note p strong { font-weight: 600; }
.margin-note-caller {
  display: inline-grid;
  place-items: center;
  min-width: 1.15em;
  min-height: 1.15em;
  margin: 0 .08em;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: #8f6c14;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .62em;
  font-weight: 800;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;
}
.margin-note-caller:hover,
.margin-note-caller:focus-visible {
  background: #fff4c9;
  color: #4c3909;
  outline: 2px solid #c7a33b;
  outline-offset: 2px;
}
.margin-note-kind { display: flex; align-items: center; gap: 6px; min-width: 0; }
.margin-note-siglum {
  display: inline-grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 1px solid #b38a22;
  border-radius: 3px;
  background: #fff8df;
  color: #72540c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.margin-note-caller[data-margin-note-symbol="\2016"],
.margin-note-siglum[data-margin-note-symbol="\2016"] {
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
}
.margin-note-caller[data-margin-note-symbol="\2016"]::before,
.margin-note-siglum[data-margin-note-symbol="\2016"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .55em;
  height: .78em;
  border-left: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-50%, -50%);
}
.translator-note.is-targeted,
.edition-apparatus .margin-note.is-targeted {
  border-color: #b38a22;
  box-shadow: 0 0 0 2px rgba(179, 138, 34, .2);
}
.margin-note-popover {
  position: fixed;
  z-index: 1200;
  display: grid;
  gap: 10px;
  width: min(330px, calc(100vw - 24px));
  padding: 13px;
  border: 1px solid #b38a22;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(31, 26, 15, .22);
  background: #fffdf7;
  color: #24221d;
  font-family: Inter, Arial, sans-serif;
}
.margin-note-popover-heading { display: flex; align-items: center; gap: 9px; }
.margin-note-popover-heading > div { display: grid; flex: 1; gap: 1px; }
.margin-note-popover-heading small { color: #806324; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.margin-note-popover-heading strong { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; }
.margin-note-popover-heading button { width: 30px; height: 30px; padding: 0; border: 1px solid #d5ccb3; background: #f5f1e7; color: #423c2e; }
.margin-note-popover p { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 17px; line-height: 1.5; }
.margin-note-popover > small { color: #746b59; font-size: 9px; font-weight: 700; }
body[data-chrome-mode="dark"] .translator-notes { border-color: #806b38; background: #201d16; }
body[data-chrome-mode="dark"] .margin-note-caller { color: #e1c266; }
body[data-chrome-mode="dark"] .margin-note-caller:hover,
body[data-chrome-mode="dark"] .margin-note-caller:focus-visible { background: #493d1d; color: #fff3bd; }
body[data-chrome-mode="dark"] .margin-note-siglum { border-color: #a98b3b; background: #2d2719; color: #ecd27e; }
body[data-chrome-mode="dark"] .margin-note-popover { border-color: #9b8037; background: #1d1b17; color: #f4efe4; }
body[data-chrome-mode="dark"] .margin-note-popover-heading button { border-color: #5e5541; background: #2d2921; color: #f4efe4; }
body[data-chrome-mode="dark"] .margin-note-popover > small { color: #bdb29d; }
.study-empty { display: grid; place-items: center; gap: 7px; padding: 28px 18px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.study-empty svg { width: 25px; color: var(--faint); }
.study-empty strong { color: var(--ink); font-size: 13px; }
.study-empty span { max-width: 260px; font-size: 11px; line-height: 1.45; }
.study-empty button { margin-top: 4px; padding: 8px 13px; color: white; border: 0; border-radius: 4px; background: var(--accent); font-weight: 700; }
.chapter-word-help { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chapter-word-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.chapter-word-heading strong { font-size: 12px; }
.chapter-word-heading span { color: var(--muted); font-size: 10px; }
.chapter-word-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chapter-word-chips button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.chapter-word-chips button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chapter-word-chips strong { font-size: 11px; }
.chapter-word-chips span { color: var(--muted); font-size: 9px; }
.study-source-note { margin: 22px 0 0; padding-top: 14px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; line-height: 1.55; }
.study-source-note a { color: var(--accent); }
.reference-sources { display: grid; gap: 7px; margin-bottom: 16px; }
.reference-sources label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); cursor: pointer; }
.reference-sources input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.reference-sources span { display: grid; gap: 3px; }
.reference-sources strong { font-size: 11px; }
.reference-sources small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.study-reference-depth-heading { display: grid; gap: 2px; margin: 2px 0 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.study-reference-depth-heading strong { color: var(--ink); font-size: 11px; }
.study-reference-depth-heading small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.reference-depth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.reference-depth button { display: grid; gap: 4px; min-width: 0; min-height: 57px; padding: 9px 5px; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); text-align: center; }
.reference-depth button strong { font-size: 11px; }
.reference-depth button small { color: var(--muted); font-size: 8px; }
.reference-depth button.active { color: white; border-color: var(--accent); background: var(--accent); }
.reference-depth button.active small { color: rgba(255,255,255,.78); }
.reference-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.reference-summary { color: var(--muted); font-size: 11px; line-height: 1.45; }
.reference-toggle-all { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 30px; padding: 5px 9px; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.reference-toggle-all:hover, .reference-toggle-all:focus-visible { color: white; border-color: var(--accent); background: var(--accent); }
.reference-toggle-all[aria-expanded="true"] { color: white; border-color: var(--accent); background: var(--accent); }
.reference-toggle-all svg { width: 14px; height: 14px; }
.reference-toggle-all[hidden], .reference-expand[hidden] { display: none; }
.reference-results { display: grid; gap: 7px; }
.reference-card { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; }
.reference-card-body { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 12px; }
.reference-copy { display: grid; gap: 5px; min-width: 0; }
.reference-card-actions { display: flex; gap: 5px; }
.reference-card-actions button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); }
.reference-card-actions button:hover, .reference-card-actions button:focus-visible { color: white; border-color: var(--accent); background: var(--accent); }
.reference-open { color: var(--accent) !important; }
.reference-open:hover, .reference-open:focus-visible { color: white !important; }
.reference-source-badge { width: fit-content; padding: 2px 5px; color: var(--accent); border: 1px solid currentColor; border-radius: 3px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.edition-apparatus { display: grid; gap: 10px; padding: 13px; background: var(--panel); }
.apparatus-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.apparatus-heading > div { display: grid; gap: 2px; }
.apparatus-heading > div > span { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.apparatus-heading > div > strong { color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 17px; }
.apparatus-heading > small { color: var(--muted); font-size: 9px; }
.edition-apparatus .margin-note { padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-soft); }
.margin-note-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.margin-note-heading > small { color: var(--muted); font-size: 8px; }
.margin-note-category { width: fit-content; padding: 3px 6px; color: var(--accent); border: 1px solid currentColor; border-radius: 3px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.margin-reference-pair { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 10px; }
.margin-reference-pair > svg { width: 16px; height: 16px; color: var(--accent); }
.margin-note-original, .margin-reference-normalized { display: grid; gap: 5px; min-width: 0; }
.margin-note-original small, .margin-reference-normalized small { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.margin-note-original strong { overflow-wrap: anywhere; color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 14px; font-weight: 600; }

@media (max-width: 640px) {
  .margin-note-popover { left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; }
}
.margin-reference-links { display: flex; flex-wrap: wrap; gap: 5px; }
.margin-reference-links a { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 8px; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; background: var(--panel); font-family: "Source Serif 4", Georgia, serif; font-size: 12px; font-weight: 700; text-decoration: none; }
.margin-reference-links a:hover, .margin-reference-links a:focus-visible { color: white; border-color: var(--accent); background: var(--accent); }
.margin-reference-unavailable { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; font-style: italic; line-height: 1.45; }
.reference-card strong { color: var(--accent); font-family: "Source Serif 4", Georgia, serif; font-size: 14px; }
.reference-rank { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); border-radius: 50%; background: var(--panel-soft); font-size: 9px; font-weight: 800; }
.reference-excerpt { display: -webkit-box; overflow: hidden; color: var(--muted); font-family: "Source Serif 4", Georgia, serif; font-size: 11px; font-weight: 400; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.reference-card.expanded .reference-excerpt { display: block; overflow: visible; -webkit-line-clamp: unset; }
body[data-study-entry-size="small"] .study-view :is(.word-help-unified > p, .word-help-card > p, .word-study-detail-body > p, .reference-excerpt) { font-size: 14px; line-height: 1.5; }
body[data-study-entry-size="medium"] .study-view :is(.word-help-unified > p, .word-help-card > p, .word-study-detail-body > p, .reference-excerpt) { font-size: 15.5px; line-height: 1.52; }
body[data-study-entry-size="large"] .study-view :is(.word-help-unified > p, .word-help-card > p, .word-study-detail-body > p, .reference-excerpt) { font-size: 17px; line-height: 1.55; }
body[data-study-entry-size="xlarge"] .study-view :is(.word-help-unified > p, .word-help-card > p, .word-study-detail-body > p, .reference-excerpt) { font-size: 19px; line-height: 1.58; }
body[data-study-entry-size="xxlarge"] .study-view :is(.word-help-unified > p, .word-help-card > p, .word-study-detail-body > p, .reference-excerpt) { font-size: 22px; line-height: 1.62; }
.reference-card svg { width: 15px; color: var(--faint); }
.reference-card-actions button svg { color: currentColor; }
.load-more-references { width: 100%; margin-top: 10px; padding: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; background: transparent; font-size: 11px; font-weight: 800; }
.load-more-references:hover { color: white; background: var(--accent); }
body[data-chrome-mode="dark"] .study-passage-bar,
body[data-chrome-mode="dark"] .study-passage-bar .icon-button,
body[data-chrome-mode="dark"] .word-help-card,
body[data-chrome-mode="dark"] .chapter-word-chips button,
body[data-chrome-mode="dark"] .reference-sources label,
body[data-chrome-mode="dark"] .reference-depth button,
body[data-chrome-mode="dark"] .reference-card { background: #1d1b18; }
body[data-chrome-mode="dark"] .word-help-unified { border-color: #b48d37; background: linear-gradient(145deg, #252117, #1d1b18); box-shadow: inset 3px 0 0 #d2ae51; }
body[data-chrome-mode="dark"] .word-study-edition-note { color: #c9c1ae; border-color: rgba(232, 207, 130, .28); background: rgba(232, 207, 130, .08); }
body[data-chrome-mode="dark"] .word-study-edition-note strong { color: #f3efe5; }
body[data-chrome-mode="dark"] .word-help-group.active .word-help-unified { border-color: #e8cf82; box-shadow: inset 4px 0 0 #e8cf82, 0 0 0 2px rgba(232,207,130,.12); }
body[data-chrome-mode="dark"] .word-help-unified-top span,
body[data-chrome-mode="dark"] .word-help-unified-top svg,
body[data-chrome-mode="dark"] .word-help-history summary { color: #e2c66f; }
body[data-chrome-mode="dark"] .word-help-unified p { color: #f3efe5; }
body[data-chrome-mode="dark"] .word-help-history summary:hover,
body[data-chrome-mode="dark"] .word-help-history summary:focus-visible { color: #fff0b5; }
body[data-chrome-mode="dark"] .study-return { color: #ead081; border-color: #b48d37; background: rgba(180,141,55,.12); }
body[data-chrome-mode="dark"] .study-return:hover { color: #fff; background: #74571a; }
body[data-chrome-mode="dark"] .reference-depth button.active { background: #74571a; border-color: #e8cf82; box-shadow: 0 0 0 1px #e8cf82; }
body[data-chrome-mode="dark"] .reference-toggle-all { color: #ead081; border-color: #5d494d; background: #1d1b18; }
body[data-chrome-mode="dark"] .reference-toggle-all:hover,
body[data-chrome-mode="dark"] .reference-toggle-all:focus-visible,
body[data-chrome-mode="dark"] .reference-toggle-all[aria-expanded="true"] { color: #fff; border-color: #e8cf82; background: #74571a; }
body[data-chrome-mode="dark"] .word-help-toggle-all { color: #ead081; border-color: #5d494d; background: #1d1b18; }
body[data-chrome-mode="dark"] .word-help-toggle-all:hover,
body[data-chrome-mode="dark"] .word-help-toggle-all:focus-visible { color: #fff; border-color: #e8cf82; background: #74571a; }
body[data-chrome-mode="dark"] .word-help-toggle-all[aria-expanded="true"] { color: #fff; border-color: #e8cf82; background: #74571a; }
body[data-chrome-mode="dark"] .reference-card-actions button:hover,
body[data-chrome-mode="dark"] .chapter-word-chips button:hover { background: var(--accent-soft); }

.scrim { position: fixed; z-index: 39; inset: var(--header-height) 0 0; background: rgba(28, 26, 22, .42); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 10px 14px; color: white; border-radius: 5px; background: #26231e; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 13px; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.noscript { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; margin: 0; background: white; }

.theatre-edge-controls { display: none; }
.theatre-edge-control {
  position: fixed;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 38px;
  height: 42px;
  padding: 0;
  color: #f5e5ab;
  border: 1px solid rgba(229, 202, 112, .56);
  background: rgba(22, 20, 16, .88);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition:
    opacity .18s ease,
    transform .2s ease,
    top .24s ease,
    left .24s cubic-bezier(.22,.8,.24,1),
    right .24s cubic-bezier(.22,.8,.24,1),
    background-color .18s ease;
}
.theatre-edge-control svg { width: 18px; height: 18px; }
.theatre-edge-control:hover,
.theatre-edge-control:focus-visible,
.theatre-edge-control[aria-expanded="true"] { color: #211b0e; background: #e2c66f; opacity: 1; }
.theatre-edge-left { left: 0; top: 50%; border-left: 0; border-radius: 0 6px 6px 0; transform: translate(-42%, -50%); }
.theatre-edge-left:hover,
.theatre-edge-left:focus-visible,
.theatre-edge-left[aria-expanded="true"] { transform: translate(0, -50%); }
.theatre-edge-top { left: 50%; top: 0; width: 46px; height: 34px; border-top: 0; border-radius: 0 0 6px 6px; transform: translate(-50%, -42%); }
.theatre-edge-top:hover,
.theatre-edge-top:focus-visible,
.theatre-edge-top[aria-expanded="true"] { transform: translate(-50%, 0); }
.theatre-edge-all { left: calc(50% + 50px); top: 0; width: 46px; height: 34px; border-top: 0; border-radius: 0 0 6px 6px; transform: translate(-50%, -42%); }
.theatre-edge-all:hover,
.theatre-edge-all:focus-visible,
.theatre-edge-all[aria-expanded="true"] { transform: translate(-50%, 0); }
.theatre-edge-right { right: 0; top: 50%; border-right: 0; border-radius: 6px 0 0 6px; transform: translate(42%, -50%); }
.theatre-edge-right:hover,
.theatre-edge-right:focus-visible,
.theatre-edge-right[aria-expanded="true"] { transform: translate(0, -50%); }

body[data-chrome-mode="theatre"] {
  --mobile-nav-height: 0px;
  --theatre-toolbar-height: 58px;
  --theatre-trail-height: 0px;
  --theatre-top-height: calc(var(--header-height) + var(--theatre-toolbar-height) + var(--theatre-trail-height));
  --theatre-library-width: min(92vw, 420px);
  --theatre-utility-width: min(92vw, 420px);
  background: #050505;
}
body[data-chrome-mode="theatre"][data-reference-trail="visible"] { --theatre-trail-height: 42px; }
body[data-chrome-mode="theatre"] .mobile-nav,
body[data-chrome-mode="theatre"] .toast {
  display: none !important;
}
body[data-chrome-mode="theatre"] .app-header {
  position: fixed;
  z-index: 114;
  top: 0;
  left: 0;
  right: 0;
  display: grid !important;
  transform: translateY(calc(-100% - 2px));
  transition: transform .24s cubic-bezier(.22,.8,.24,1);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
body[data-chrome-mode="theatre"] .reader-toolbar {
  position: fixed;
  z-index: 113;
  top: var(--header-height);
  left: 0;
  right: 0;
  display: grid !important;
  min-height: var(--theatre-toolbar-height);
  transform: translateY(calc(-100% - var(--header-height) - 2px));
  transition: transform .24s cubic-bezier(.22,.8,.24,1);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
body[data-chrome-mode="theatre"] .reference-trail {
  position: fixed;
  z-index: 112;
  top: calc(var(--header-height) + var(--theatre-toolbar-height));
  left: 0;
  right: 0;
  width: 100%;
  min-height: var(--theatre-trail-height);
  transform: translateY(calc(-100% - var(--header-height) - var(--theatre-toolbar-height) - 2px));
  transition: transform .24s cubic-bezier(.22,.8,.24,1);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}
body[data-chrome-mode="theatre"].theatre-top-open .app-header,
body[data-chrome-mode="theatre"].theatre-top-open .reader-toolbar,
body[data-chrome-mode="theatre"].theatre-top-open .reference-trail { transform: translateY(0); }
body[data-chrome-mode="theatre"].theatre-top-open :is(.theatre-edge-top, .theatre-edge-all) { top: calc(var(--theatre-top-height) + 6px); }
body[data-chrome-mode="theatre"] .library-panel,
body[data-chrome-mode="theatre"] .utility-panel {
  position: fixed;
  z-index: 115;
  top: 0;
  bottom: 0;
  display: grid;
  width: min(92vw, 420px);
  height: 100dvh;
  border-color: var(--line);
  box-shadow: 0 0 42px rgba(0,0,0,.34);
  transition: transform .24s cubic-bezier(.22,.8,.24,1);
}
body[data-chrome-mode="theatre"] .utility-panel { grid-template-rows: auto minmax(0, 1fr); }
body[data-chrome-mode="theatre"] .library-panel { left: 0; transform: translateX(-105%); }
body[data-chrome-mode="theatre"] .library-panel.open { transform: translateX(0); }
body[data-chrome-mode="theatre"] .utility-panel { right: 0; transform: translateX(105%); }
body[data-chrome-mode="theatre"] .utility-panel.open { transform: translateX(0); }
body[data-chrome-mode="theatre"] .app-layout.tools-expanded[data-utility-view="search"] .utility-panel,
body[data-chrome-mode="theatre"] .app-layout.tools-expanded[data-utility-view="study"] .utility-panel { width: min(94vw, 720px); }
body[data-chrome-mode="theatre"] #library-close { display: inline-grid !important; }
body[data-chrome-mode="theatre"] .scrim { z-index: 110; inset: 0; background: rgba(10,9,7,.48); backdrop-filter: blur(2px); }
body[data-chrome-mode="theatre"] .app-layout,
body[data-chrome-mode="theatre"] .app-layout.utility-open {
  display: block;
  height: 100dvh;
}
body[data-chrome-mode="theatre"] .reader-shell {
  display: block;
  width: 100%;
  height: 100dvh;
  background: #050505;
  transition: width .24s cubic-bezier(.22,.8,.24,1);
}
body[data-chrome-mode="theatre"] .reader-scroll {
  height: 100dvh;
  padding: clamp(14px, 3vw, 32px);
  background: radial-gradient(circle at center, #17130f 0, #050505 72%);
}
body[data-chrome-mode="theatre"] .paper {
  width: min(100%, 1000px);
  min-height: calc(100dvh - clamp(28px, 6vw, 64px));
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
}
body[data-chrome-mode="theatre"][data-reading-mode="book"] .reader-scroll { padding: clamp(8px, 2vw, 22px) clamp(40px, 6vw, 78px); }
body[data-chrome-mode="theatre"][data-reading-mode="book"] .paper { height: 100%; min-height: 0; }
body[data-chrome-mode="theatre"][data-reading-mode="book"] .theatre-edge-left,
body[data-chrome-mode="theatre"][data-reading-mode="book"] .theatre-edge-right { top: clamp(112px, 22vh, 190px); }
body[data-chrome-mode="theatre"] .theatre-edge-controls { display: block; }
body[data-chrome-mode="theatre"].theatre-controls-visible .theatre-edge-control { opacity: .72; }
body[data-chrome-mode="theatre"].theatre-controls-visible .theatre-edge-left { transform: translate(0, -50%); }
body[data-chrome-mode="theatre"].theatre-controls-visible :is(.theatre-edge-top, .theatre-edge-all) { transform: translate(-50%, 0); }
body[data-chrome-mode="theatre"].theatre-controls-visible .theatre-edge-right { transform: translate(0, -50%); }
body[data-chrome-mode="theatre"] .theatre-edge-left[aria-expanded="true"] {
  left: var(--theatre-library-width);
  opacity: 1;
  pointer-events: auto;
}
body[data-chrome-mode="theatre"] .theatre-edge-right[aria-expanded="true"] {
  right: var(--theatre-utility-width);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 901px) {
  body[data-chrome-mode="theatre"] {
    --theatre-utility-width: min(34vw, 420px);
  }
  body[data-chrome-mode="theatre"]:has(
    .app-layout.tools-expanded[data-utility-view="search"],
    .app-layout.tools-expanded[data-utility-view="study"]
  ) {
    --theatre-utility-width: min(50vw, 720px);
  }
  body[data-chrome-mode="theatre"] .app-layout.utility-open .reader-shell { width: calc(100% - var(--theatre-utility-width)); }
  body[data-chrome-mode="theatre"] .app-layout.utility-open .utility-panel { width: var(--theatre-utility-width); }
}

@media (hover: none), (pointer: coarse) {
  body[data-chrome-mode="theatre"] .theatre-edge-control { opacity: .58; }
  body[data-chrome-mode="theatre"] .theatre-edge-left { transform: translate(-28%, -50%); }
  body[data-chrome-mode="theatre"] :is(.theatre-edge-top, .theatre-edge-all) { transform: translate(-50%, -28%); }
  body[data-chrome-mode="theatre"] .theatre-edge-right { transform: translate(28%, -50%); }
}

@media (max-width: 760px) {
  body[data-chrome-mode="theatre"] .theatre-edge-control { opacity: .58; }
  body[data-chrome-mode="theatre"] .theatre-edge-left { transform: translate(-28%, -50%); }
  body[data-chrome-mode="theatre"] :is(.theatre-edge-top, .theatre-edge-all) { transform: translate(-50%, -28%); }
  body[data-chrome-mode="theatre"] .theatre-edge-right { transform: translate(28%, -50%); }
  body[data-reading-mode="reference"] .reader-scroll { padding: 10px 0 42px; }
  body[data-reading-mode="reference"] .paper { padding: 38px clamp(20px, 6vw, 38px) 58px; }
  .reference-chapter .chapter-title { margin-bottom: 26px; }
  .concord-layout { display: block; }
  .concord-side { padding: 8px 0 0; }
  .concord-side-left { border-right: 0; }
  .concord-side-left .concord-row,
  .concord-side-right .concord-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scripture" "references";
  }
  .concord-scripture-cell { padding: 0 0 5px; }
  .concord-side-left .concord-scripture-cell,
  .concord-side-right .concord-scripture-cell { padding-inline: 0; }
  .concord-references,
  .concord-side-left .concord-references,
  .concord-side-right .concord-references {
    margin-bottom: 13px;
    padding: 3px 0 10px 22px;
    border: 0;
    border-bottom: 1px solid var(--reader-rule);
  }
}

/* Keep keyboard focus visible inside the clipped Listen/Play split without
   leaving a single detached outline edge at the internal divider. */
html body .verse-listen-split button:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 2px rgba(128, 99, 36, .42) !important;
}

/* Contextual verse tools stay complete and fixed-size. Playback changes the
   Play/Pause icon but never hides controls or moves hit targets on hover. */
.header-action-tabs .audio-header-split > .icon-button {
  border-radius: 5px 0 0 5px;
}
.audio-settings-toggle.active {
  color: var(--accent);
}
.verse-margin-actions {
  transform-origin: center;
  transition:
    top .22s cubic-bezier(.22, .8, .24, 1),
    left .22s cubic-bezier(.22, .8, .24, 1),
    opacity .2s ease,
    transform .2s ease;
  will-change: top, left, opacity, transform;
}
.verse-margin-actions.is-anchor-reflow {
  transition: none !important;
}
.verse-margin-actions.is-playback-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.verse-listen-split button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(128, 99, 36, .42);
}
.verse-margin-actions.mode-pages {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: 3px;
  flex-wrap: nowrap;
}
.verse-margin-actions.mode-pages > button,
.verse-margin-actions.mode-pages .verse-listen-split {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .verse-margin-actions {
    transition: none;
  }
}

/* 2026-07-22 final visual-audit overrides. Keep this block last: the file
   contains older theme experiments whose later rules must not restore the
   retired Scroll frame or the former button-row controls. */

/* Mutually exclusive choices share one tray and one moving selection thumb. */
body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) {
  --segments: 2;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(var(--segments), minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-width: 0;
  min-height: 40px;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid var(--button-tray-border) !important;
  border-radius: 6px !important;
  background: var(--button-tray-bg) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2) !important;
}

body[data-visual-style][data-chrome-mode] :is(
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .scroll-scope-control
) { --segments: 3; }

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) / var(--segments));
  border: 1px solid var(--selector-thumb-edge);
  border-radius: 4px;
  background: var(--selector-thumb);
  box-shadow: inset 0 1px rgba(255,255,255,.52), 0 1px 3px rgba(0,0,0,.28);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
):has(> button:nth-child(2):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(100%);
}

body[data-visual-style][data-chrome-mode] :is(
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .scroll-scope-control
):has(> button:nth-child(3):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(200%);
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 7px !important;
  overflow: hidden;
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1 !important;
  text-shadow: none !important;
  white-space: nowrap;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button:hover:not(:disabled) {
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > :is(button.active,button[aria-pressed="true"],button[aria-selected="true"]) {
  color: var(--selector-active-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 800;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto;
}

body[data-visual-style="jacobean"] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: 14px !important;
  font-weight: 700;
}

body[data-visual-style="jerusalem"] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .reader-width-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button {
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 10px !important;
  font-weight: 600;
}

/* The compact dashboard stays readable: one full-width three-way layout
   choice and one full-width three-way width choice, followed by two short
   binary sliders. */
#display-view .display-layout-group,
#display-view .display-width-group { grid-column: 1 / -1 !important; }
#display-view .display-page-group { grid-column: 1 / 2 !important; }
#display-view .display-page-features { grid-column: 2 / 3 !important; }
#display-view .display-layout-group,
#display-view .display-width-group,
#display-view .display-page-group,
#display-view .display-page-features { border-top: 1px solid var(--line) !important; }
#display-view .display-page-features { padding-top: 12px !important; }
#display-view .page-feature-grid { display: block !important; }
#display-view .compact-spread-setting {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#display-view :is(.layout-control,.reader-width-control) > button { padding-inline: 9px !important; }
#display-view :is(.column-control,.spread-control) > button {
  gap: 3px !important;
  padding-inline: 4px !important;
  font-size: 11px !important;
}
body[data-visual-style="jacobean"] #display-view :is(.column-control,.spread-control) > button {
  font-size: 13px !important;
}
body[data-visual-style="jerusalem"] #display-view :is(.column-control,.spread-control) > button {
  font-size: 9px !important;
}

/* One size range, with passive labels only. */
#display-view .size-control {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 2px !important;
  padding: 0 2px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
#display-view .size-step-labels button { display: none !important; }
#display-view .size-step-labels {
  display: grid !important;
  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  gap: 4px !important;
}

/* Binary settings are switches, never square action buttons. */
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"] {
  appearance: none !important;
  position: relative;
  flex: 0 0 auto;
  width: 40px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 1px solid var(--button-neutral-border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--chrome-strong) 88%, transparent) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28) !important;
  cursor: pointer;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow);
  transition: transform .18s ease, background .18s ease;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked {
  border-color: var(--selector-thumb-edge) !important;
  background: color-mix(in srgb, var(--selector-thumb-edge) 58%, var(--chrome-strong)) !important;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked::before {
  background: var(--selector-thumb);
  transform: translateX(18px);
}

/* Scroll is an unframed roll over a decorated background. The fixed top and
   bottom work sits behind the paper; the side work travels with the document
   in the open space beside it. */
body[data-reading-mode="scroll"] :is(.reader-ornament-guard,.reader-ornament-corner) {
  display: none !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-scroll {
  position: relative !important;
  z-index: 1 !important;
  padding-top: 56px !important;
  padding-bottom: 76px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper {
  position: relative !important;
  z-index: 3 !important;
  border-width: var(--paper-border-width,2px) !important;
  outline: 0 !important;
  box-shadow: var(--paper-shadow) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper > :is(.scroll-range,.bible-scroll-flow) {
  padding-top: 0 !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-shell::after {
  display: block !important;
  z-index: 0 !important;
  top: calc(var(--reader-toolbar-height,58px) + 8px) !important;
  right: 28px !important;
  left: 28px !important;
  width: auto !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-bottom {
  display: block !important;
  z-index: 0 !important;
  right: 28px !important;
  bottom: 8px !important;
  left: 28px !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: var(--ornament-scroll-paper-top,0px) !important;
  width: 22px !important;
  height: var(--ornament-paper-height,100%) !important;
  pointer-events: none;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left,18px) - 29px) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-right {
  right: calc(100% - var(--ornament-scroll-paper-left,18px) - var(--ornament-paper-width,calc(100% - 36px)) - 29px) !important;
}

/* Paged corners retain their correct top/bottom ownership. */
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: var(--ornament-frame-top,68px) !important;
  bottom: auto !important;
}
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--ornament-frame-bottom,8px) !important;
}

/* Previous/next Scroll commands use the current theme's ordinary command
   material instead of oversized gold banners. */
.scroll-range-footer {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding-block: 20px 6px !important;
  border-top: 1px solid var(--reader-rule) !important;
}
.scroll-range-footer a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content !important;
  min-width: 150px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  padding: 7px 14px !important;
  color: var(--button-neutral-ink) !important;
  border: 1px solid var(--button-neutral-border) !important;
  border-radius: var(--button-radius) !important;
  background: var(--button-neutral-bg) !important;
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow) !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.scroll-range-footer a:first-child { justify-self: start !important; }
.scroll-range-footer a:last-child { grid-column: 2 !important; justify-self: end !important; }
.scroll-range-footer a:hover {
  color: var(--button-neutral-ink) !important;
  border-color: color-mix(in srgb, var(--button-neutral-border) 72%, var(--button-focus)) !important;
  background: var(--button-neutral-hover-bg) !important;
}
body[data-visual-style="jacobean"] .scroll-range-footer a {
  font-family: "EB Garamond Local", Garamond, Georgia, serif !important;
  font-size: 14px !important;
}
body[data-visual-style="jerusalem"] .scroll-range-footer a {
  font-family: Cinzel, "Times New Roman", serif !important;
  font-size: 10px !important;
}

body[data-chrome-mode="theatre"] :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) { display: none !important; }
body[data-chrome-mode="theatre"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-shell::after {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
    display: none !important;
  }
}

/* Keep page count and text-column count as two distinct vertical settings. */
html body #display-view .display-page-group,
html body #display-view .display-page-features {
  grid-column: 1 / -1 !important;
}
html body #display-view .display-page-features {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  #display-view .display-page-group,
  #display-view .display-page-features { grid-column: 1 / -1 !important; }
  .scroll-range-footer { gap: 8px !important; }
  .scroll-range-footer a { width: 100% !important; min-width: 0 !important; padding-inline: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-visual-style][data-chrome-mode] :is(
    .library-panel .testament-tabs,
    .reader-toolbar .mode-control,
    #display-view .theme-control,
    #display-view .edition-control,
    #display-view .layout-control,
    #display-view .column-control,
    #display-view .spread-control,
    #display-view .scroll-scope-control
  )::before { transition: none !important; }
}

/* 2026-07-22 interaction and Scroll repair. These rules intentionally
   separate paged ornament from Scroll ornament and replace adjacent option
   buttons with one sliding selection surface. */

/* The second title spacer is a new column, not another block in the first. */
body[data-reading-mode="book"] .book-title-column-spacer-next-following {
  break-before: column;
}

/* One compact moving thumb for every mutually exclusive inline selector. */
body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) {
  --segments: 2;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(var(--segments), minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-height: 38px;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid var(--button-tray-border) !important;
  border-radius: 6px !important;
  background: var(--button-tray-bg) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2) !important;
}

body[data-visual-style][data-chrome-mode] :is(
  #display-view .layout-control,
  #display-view .scroll-scope-control
) { --segments: 3; }

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) / var(--segments));
  border: 1px solid var(--selector-thumb-edge);
  border-radius: 4px;
  background: var(--selector-thumb);
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.28);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
):has(> button:nth-child(2):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(100%);
}

body[data-visual-style][data-chrome-mode] :is(
  #display-view .layout-control,
  #display-view .scroll-scope-control
):has(> button:nth-child(3):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(200%);
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button,
body[data-visual-style][data-chrome-mode] #display-view :is(
  .theme-control,
  .edition-control,
  .layout-control,
  .column-control,
  .spread-control,
  .scroll-scope-control
) > button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 7px !important;
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  text-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button:hover:not(:disabled) {
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > :is(button.active,button[aria-pressed="true"],button[aria-selected="true"]) {
  color: var(--selector-active-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 800;
}

body[data-visual-style][data-chrome-mode] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

body[data-visual-style="jacobean"] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: 13px !important;
  font-weight: 700;
}

body[data-visual-style="jerusalem"] :is(
  .library-panel .testament-tabs,
  .reader-toolbar .mode-control,
  #display-view .theme-control,
  #display-view .edition-control,
  #display-view .layout-control,
  #display-view .column-control,
  #display-view .spread-control,
  #display-view .scroll-scope-control
) > button {
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 10px !important;
  font-weight: 500;
}

/* Text size has one control. Labels are ticks, not a second row of buttons. */
#display-view .size-control {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 2px;
  padding: 0 2px;
}

#display-view #text-size-range {
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  accent-color: var(--selector-thumb-edge);
}

#display-view #text-size-range::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--selector-thumb-edge) 70%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--chrome-strong) 78%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}

#display-view #text-size-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid var(--selector-thumb-edge);
  border-radius: 50%;
  background: var(--selector-thumb);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.3);
}

#display-view .size-step-labels {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 4px;
  color: var(--muted);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
#display-view .size-step-labels span:first-child { text-align: left; }
#display-view .size-step-labels span:last-child { text-align: right; }

/* Binary display settings use switches rather than visible square checkboxes. */
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px !important;
  height: 22px !important;
  margin: 0;
  border: 1px solid var(--button-neutral-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--chrome-strong) 88%, transparent);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow);
  transition: transform .18s ease, background .18s ease;
}

#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked {
  border-color: var(--selector-thumb-edge);
  background: color-mix(in srgb, var(--selector-thumb-edge) 58%, var(--chrome-strong));
}

#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked::before {
  background: var(--selector-thumb);
  transform: translateX(18px);
}

/* Scroll range navigation is a themed command pair, not two gold banners. */
.scroll-range-footer {
  align-items: center;
  gap: 18px;
}
.scroll-range-footer a {
  width: max-content;
  min-width: 150px;
  max-width: 100%;
  min-height: 40px;
  padding: 7px 14px;
  color: var(--button-neutral-ink);
  border: 1px solid var(--button-neutral-border);
  border-radius: var(--button-radius);
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.scroll-range-footer a:first-child { justify-self: start; }
.scroll-range-footer a:last-child { justify-self: end; }
.scroll-range-footer a:hover {
  color: var(--button-neutral-ink);
  border-color: color-mix(in srgb, var(--button-neutral-border) 72%, var(--button-focus));
  background: var(--button-neutral-hover-bg);
  box-shadow: var(--button-neutral-shadow), 0 0 0 1px color-mix(in srgb, var(--button-focus) 22%, transparent);
}
body[data-visual-style="jacobean"] .scroll-range-footer a {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: 14px;
}
body[data-visual-style="jerusalem"] .scroll-range-footer a {
  font-family: Cinzel, "Times New Roman", serif;
  font-size: 10px;
}

/* Scroll ornament belongs to the material behind the roll. The paper has no
   frame, no guards, and no corner pieces. Side work is outside the paper and
   shares its document height so it travels with the text. */
body[data-reading-mode="scroll"] .reader-ornament-guard,
body[data-reading-mode="scroll"] .reader-ornament-corner {
  display: none !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-scroll {
  position: relative;
  z-index: 1;
  padding-top: 34px !important;
  padding-bottom: 80px !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper {
  position: relative;
  z-index: 3;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper > :is(.scroll-range,.bible-scroll-flow) {
  padding-top: 0 !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-shell::after {
  z-index: 0 !important;
  top: var(--ornament-frame-top, 68px) !important;
  right: 24px !important;
  left: 24px !important;
  width: auto !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-bottom {
  z-index: 0 !important;
  right: 24px !important;
  bottom: var(--ornament-frame-bottom, 8px) !important;
  left: 24px !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
  display: block !important;
  position: absolute;
  z-index: 2;
  top: var(--ornament-scroll-paper-top, 0px) !important;
  width: 24px !important;
  height: var(--ornament-paper-height,100%) !important;
  pointer-events: none;
}

body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) - 34px) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-right {
  right: calc(100% - var(--ornament-scroll-paper-left,18px) - var(--ornament-paper-width,calc(100% - 36px)) - 34px) !important;
}

/* Paged ornaments keep distinct top and bottom corner geometry. */
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: var(--ornament-frame-top,68px) !important;
  bottom: auto !important;
}
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--ornament-frame-bottom,8px) !important;
}

@media (max-width: 900px) {
  body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
    display: none !important;
  }
  .scroll-range-footer a {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-visual-style][data-chrome-mode] :is(
    .library-panel .testament-tabs,
    .reader-toolbar .mode-control,
    #display-view .theme-control,
    #display-view .edition-control,
    #display-view .layout-control,
    #display-view .column-control,
    #display-view .spread-control,
    #display-view .scroll-scope-control
  )::before { transition: none; }
}

/* Visual identity themes v1 */
.visual-style-label {
  display: block;
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.visual-style-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.visual-style-control button {
  display: grid;
  grid-template-rows: 20px auto;
  place-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 42px;
  padding: 4px 2px;
  overflow: hidden;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-style-control button > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visual-style-swatch {
  position: relative;
  display: block;
  width: 24px;
  height: 17px;
  overflow: hidden;
  border: 1px solid rgba(51, 46, 35, .42);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(35,31,23,.15);
}
.visual-style-swatch-cambridge {
  background: linear-gradient(135deg, #161613 0 43%, #d7d5ce 43% 68%, #c49a38 68% 100%);
}
.visual-style-swatch-cambridge::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,228,142,.74);
}
.visual-style-swatch-jacobean {
  background: linear-gradient(135deg, #241211 0 23%, #6d1e27 23% 74%, #b8892d 74% 100%);
}
.visual-style-swatch-jacobean::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 9px;
  width: 7px;
  height: 7px;
  border: 1px solid #f1d77f;
  transform: rotate(45deg);
}
.visual-style-swatch-jerusalem {
  width: 19px;
  height: 19px;
  border-color: #b8943d;
  border-radius: 0;
  background: conic-gradient(from 45deg, #315f91, #4f805d, #9d6c27, #76578b, #9e3f4d, #315f91);
  clip-path: polygon(50% 0, 90% 18%, 100% 58%, 69% 100%, 27% 92%, 0 54%, 12% 16%);
}
.visual-style-swatch-jerusalem::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,244,196,.74);
  clip-path: inherit;
}

body[data-visual-style] {
  --style-gold-deep: #755315;
  --style-gold-mid: #b8892d;
  --style-gold-bright: #ecd477;
  --style-gold-glint: #fff4bd;
  --style-silver-deep: #777973;
  --style-silver-mid: #b6b8b3;
  --style-silver-bright: #f0f1ee;
  --style-enamel: #24231f;
  --style-neutral-bg: linear-gradient(180deg, #fffefa 0%, #efeee8 100%);
  --style-neutral-border: #c9c6bd;
  --style-neutral-ink: #4d4b45;
  --style-active-bg: linear-gradient(180deg, #fff0a1 0%, #e1bf60 33%, #a7771e 64%, #d8b652 100%);
  --style-active-border: #8b661b;
  --style-active-ink: #211c10;
  --style-active-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(83,56,8,.24), 0 1px 3px rgba(63,46,15,.2);
  --style-soft: #f3eddd;
  --style-panel-tint: #fffefa;
  --style-rule: #c9c5ba;
}
body[data-visual-style][data-chrome-mode="dark"],
body[data-visual-style][data-chrome-mode="theatre"] {
  --style-neutral-bg: linear-gradient(180deg, #282721 0%, #1b1a17 100%);
  --style-neutral-border: #615e53;
  --style-neutral-ink: #e4d8b4;
  --style-soft: rgba(213,181,104,.13);
  --style-panel-tint: #171612;
  --style-rule: #4d4a40;
}

body[data-visual-style] #display-view :is(
  .theme-control button,
  .visual-style-control button,
  .edition-control button,
  .type-choice,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
) {
  color: var(--style-neutral-ink);
  border-color: var(--style-neutral-border);
  background: var(--style-neutral-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}
body[data-visual-style] :is(
  #display-view .theme-control button.active,
  #display-view .visual-style-control button.active,
  #display-view .edition-control button.active,
  #display-view .type-choice.active,
  #display-view .layout-control button.active,
  #display-view .column-control button.active,
  #display-view .spread-control button.active,
  #display-view .mode-control button.active,
  .reference-depth button.active,
  .audio-scope-actions button.active,
  .audio-repeat-toggle.active,
  .study-tabs button.active
) {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}
body[data-visual-style] #display-view :is(
  .theme-control button,
  .visual-style-control button,
  .edition-control button,
  .type-choice,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
):hover:not(.active) {
  color: var(--style-gold-deep);
  border-color: var(--style-gold-mid);
  background: var(--style-soft);
}
body[data-visual-style][data-chrome-mode="dark"] #display-view :is(
  .theme-control button,
  .visual-style-control button,
  .edition-control button,
  .type-choice,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
):hover:not(.active) {
  color: var(--style-gold-bright);
}
body[data-visual-style] :is(.search-submit, .search-field button) {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}
body[data-visual-style] :is(.search-submit, .search-field button):hover {
  color: #18140b;
  border-color: #684706;
  background: linear-gradient(180deg, #fff4b4 0%, #e7c96f 41%, #b48322 100%);
}
body[data-visual-style] .header-action-indicator {
  background: var(--style-enamel);
  box-shadow: 0 5px 15px rgba(39,37,31,.22), inset 0 0 0 1px rgba(236,212,119,.54), inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-visual-style] .header-action-tabs .icon-button.active,
body[data-visual-style] .header-action-tabs .icon-button.active:hover {
  color: var(--style-gold-bright);
}
body[data-visual-style] .book-link.active {
  color: var(--style-gold-deep);
  background: var(--style-soft);
  box-shadow: inset 3px 0 0 var(--style-gold-mid);
}
body[data-visual-style][data-theme-tone="dark"] .book-link.active { color: var(--style-gold-bright); }
body[data-visual-style] :is(.library-panel, .utility-panel) { border-color: var(--style-rule); }
body[data-visual-style] .setting-group + .setting-group { border-color: var(--style-rule); }

/* Illuminated Cambridge: polished gold, silver, ivory, and black leather. */
body[data-visual-style="illuminated"] {
  --accent: #89671f;
  --accent-soft: #f3eddd;
  --style-soft: #f3eddd;
  --style-panel-tint: #fffefa;
  --style-enamel: #24231f;
}
body[data-visual-style="illuminated"] .app-header {
  border-bottom-color: #c8c5bc;
  background: linear-gradient(180deg, rgba(255,255,252,.98), rgba(240,239,234,.98));
  box-shadow: inset 0 -1px 0 rgba(132,128,117,.14);
}
body[data-visual-style="illuminated"] .header-action-tabs {
  border-color: #cac8c1;
  background: linear-gradient(180deg, rgba(255,255,252,.94), rgba(231,231,227,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(50,48,43,.12);
}
body[data-visual-style="illuminated"] .wordmark-mark {
  border-color: #c39a3a;
  box-shadow: inset 3px 0 0 #070706, inset 4px 0 0 rgba(229,197,108,.32), inset 0 0 0 2px #151511, inset 0 0 0 3px rgba(229,197,108,.64), 0 0 0 1px #bab9b3, 0 2px 7px rgba(25,24,20,.22);
}
body[data-visual-style="illuminated"][data-chrome-mode="dark"],
body[data-visual-style="illuminated"][data-chrome-mode="theatre"] {
  --accent: #d7bc68;
  --accent-soft: rgba(215,188,104,.14);
}
body[data-visual-style="illuminated"][data-chrome-mode="dark"] .app-header,
body[data-visual-style="illuminated"][data-chrome-mode="theatre"] .app-header {
  border-bottom-color: #514e45;
  background: linear-gradient(180deg, #23221e, #171612);
}

/* Royal Jacobean: crimson binding cloth, antique gold, and darker leather. */
body[data-visual-style="jacobean"] {
  --accent: #865f18;
  --accent-soft: #f3e7df;
  --style-gold-deep: #76500f;
  --style-gold-mid: #ad7d25;
  --style-gold-bright: #e7cb70;
  --style-enamel: #42171b;
  --style-soft: #f3e7df;
  --style-rule: #cdbfb3;
}
body[data-visual-style="jacobean"] .app-header {
  border-bottom-color: #a67b2e;
  background-color: #1a1211;
  background-image: repeating-linear-gradient(105deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px), linear-gradient(180deg, #37191b, #1a1211);
  box-shadow: inset 0 -2px 0 rgba(196,146,51,.54);
}
body[data-visual-style="jacobean"] .wordmark-copy strong { color: #f3ead5; }
body[data-visual-style="jacobean"] .wordmark-copy small { color: #cfbd9b; }
body[data-visual-style="jacobean"] .header-action-tabs {
  border-color: #8a6124;
  background: linear-gradient(180deg, rgba(104,31,39,.92), rgba(48,19,21,.96));
  box-shadow: inset 0 1px 0 rgba(255,230,163,.12), 0 2px 5px rgba(0,0,0,.24);
}
body[data-visual-style="jacobean"] .header-action-tabs .icon-button:not(.active) { color: #e4d7bc; }
body[data-visual-style="jacobean"] .header-action-tabs .icon-button:hover:not(.active) {
  color: #f3d984;
  background: rgba(239,205,111,.12);
}
body[data-visual-style="jacobean"] .wordmark-mark {
  border-color: #bd8d31;
  background-color: #250f12;
  box-shadow: inset 3px 0 0 #090706, inset 4px 0 0 rgba(224,189,91,.28), inset 0 0 0 2px #250f12, inset 0 0 0 3px rgba(224,189,91,.62), 0 2px 8px rgba(0,0,0,.32);
}
body[data-visual-style="jacobean"] .book-link.active {
  color: #6c2027;
  background: #f2e4e2;
  box-shadow: inset 3px 0 0 #9b2934;
}
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --accent: #dfc16b;
  --accent-soft: rgba(121,34,43,.3);
  --style-soft: rgba(121,34,43,.3);
  --style-rule: #5b403d;
}
body[data-visual-style="jacobean"][data-theme-tone="dark"] .book-link.active {
  color: #f0d77e;
  background: rgba(121,34,43,.32);
  box-shadow: inset 3px 0 0 #bb8b31;
}

/* New Jerusalem Jewels: a sober field with faceted gemstone wayfinding. */
body[data-visual-style="jerusalem"] {
  --accent: #80621d;
  --accent-soft: #edf1ec;
  --style-gold-deep: #735313;
  --style-gold-mid: #b08a2e;
  --style-gold-bright: #ebd378;
  --style-enamel: #25251f;
  --style-soft: #edf1ec;
  --style-rule: #c5c9c3;
}
body[data-visual-style="jerusalem"] .app-header {
  position: relative;
  border-bottom-color: #a98839;
  background: linear-gradient(180deg, rgba(255,255,252,.98), rgba(237,238,234,.98));
  box-shadow: inset 0 -2px 0 rgba(185,146,53,.38);
}
body[data-visual-style="jerusalem"] .app-header::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: var(--accent);
}
body[data-visual-style="jerusalem"] .header-action-tabs {
  border-color: #c4c6c0;
  background: linear-gradient(180deg, rgba(255,255,252,.94), rgba(229,231,226,.94));
}
body[data-visual-style="jerusalem"] .header-action-tabs .icon-button { position: relative; }
body[data-visual-style="jerusalem"] .header-action-tabs .icon-button::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  background: #315f91;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: .72;
}
body[data-visual-style="jerusalem"] .header-action-tabs #study-toggle::after { background: #3d7757; }
body[data-visual-style="jerusalem"] .header-action-tabs #audio-toggle::after { background: #aa6d24; }
body[data-visual-style="jerusalem"] .header-action-tabs #display-toggle::after { background: #70538b; }
body[data-visual-style="jerusalem"] .header-action-tabs #theatre-toggle::after { background: #9a3c4b; }
body[data-visual-style="jerusalem"] .wordmark-mark::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 4px;
  left: 11px;
  height: 2px;
  background: linear-gradient(90deg, #8f2f3d, #bf7423, #b7a640, #3b7452, #3f7897, #315894, #63508a, #964369);
}
body[data-visual-style="jerusalem"] .book-link.active {
  color: #315f65;
  background: #edf1ec;
  box-shadow: inset 3px 0 0 #b08a2e;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --accent: #dfc66f;
  --accent-soft: rgba(70,111,93,.18);
  --style-soft: rgba(70,111,93,.18);
  --style-rule: #4b514c;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .app-header {
  background: linear-gradient(180deg, #252520, #171713);
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .book-link.active { color: #e6d382; }

@media (max-width: 900px) {
  .visual-style-control button { min-height: 40px; font-size: 7.5px; }
  body[data-visual-style="jerusalem"] .wordmark-mark::before { right: 4px; left: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .visual-style-control button.active .visual-style-swatch { animation: visual-style-settle .28s ease-out; }
}
@keyframes visual-style-settle {
  from { transform: translateY(1px) scale(.94); }
  to { transform: translateY(0) scale(1); }
}

@media (max-width: 1120px) {
  .app-layout.utility-open { grid-template-columns: 230px minmax(0, 1fr) 360px; }
  .app-layout.utility-open.tools-expanded[data-utility-view="search"],
  .app-layout.utility-open.tools-expanded[data-utility-view="study"] { grid-template-columns: 230px minmax(340px, .75fr) minmax(480px, 1.25fr); }
  .app-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .app-header { grid-template-columns: 230px minmax(280px, 1fr) auto; gap: 14px; }
  .wordmark-copy small { display: none; }
  .paper { padding-inline: clamp(28px, 7vw, 70px); }
  .verse-margin-actions { gap: 3px; width: 72px; }
  .verse-margin-actions > button { width: 72px; height: 34px; padding: 0; }
  .verse-margin-actions button span { display: none; }
  .verse-margin-actions svg { width: 15px; height: 15px; }
  .verse-listen-split { grid-template-columns: 36px 36px; width: 72px; }
  .verse-listen-split button { width: 36px; height: 34px; padding: 0; }
}

@media (min-width: 1180px) {
  .app-layout.tools-expanded[data-utility-view="search"] .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-layout.tools-expanded[data-utility-view="study"] .reference-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-layout.tools-expanded[data-utility-view="search"] .concordance-books { max-height: 300px; overflow-y: auto; }
}

@media (max-width: 900px) {
  :root { --header-height: 58px; --mobile-nav-height: 62px; }
  .desktop-only { display: none !important; }
  .mobile-only, .mobile-nav { display: flex !important; }
  .app-header { grid-template-columns: 40px auto minmax(0,1fr) auto; gap: 8px; height: var(--header-height); padding: 0 10px; }
  .wordmark-mark { width: 34px; height: 34px; font-size: 12px; }
  .wordmark-copy { display: none; }
  .global-search { min-height: 40px; padding-left: 10px; }
  .global-search input { height: 38px; font-size: 14px; }
  .search-submit { display: none; }
  .header-actions #search-toggle { display: none; }
  .header-action-tabs { padding: 0; border: 0; background: transparent; box-shadow: none; }
  body[data-chrome-mode="dark"] .header-action-tabs { background: transparent; box-shadow: none; }
  .header-action-indicator { display: none; }
  .header-action-tabs .icon-button.active, .header-action-tabs .icon-button.active:hover { color: var(--accent); background: var(--accent-soft); }
  .header-action-tabs[data-active-tool="audio"] .audio-header-split,
  body.audio-playing .header-action-tabs[data-active-tool="audio"] .audio-header-split {
    color: white;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .header-action-tabs[data-active-tool="audio"] .audio-header-split .icon-button,
  .header-action-tabs[data-active-tool="audio"] .audio-settings-toggle { color: white; }
  body[data-chrome-mode="dark"] .header-action-tabs[data-active-tool="audio"] #audio-toggle { color: white; background: #74571a; box-shadow: inset 0 0 0 1px #e8cf82; }
  .app-layout, .app-layout.utility-open { display: block; height: calc(100dvh - var(--header-height) - var(--mobile-nav-height)); }
  #tools-expand { display: none; }
  .library-panel, .utility-panel {
    position: fixed;
    z-index: 50;
    top: var(--header-height);
    bottom: var(--mobile-nav-height);
    width: min(92vw, 390px);
    box-shadow: 14px 0 34px rgba(28, 26, 22, .18);
    transition: transform .22s ease;
  }
  .library-panel { left: 0; transform: translateX(-105%); }
  .library-panel.open { transform: translateX(0); }
  .utility-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); right: 0; transform: translateX(105%); border-left: 1px solid var(--line); box-shadow: -14px 0 34px rgba(28, 26, 22, .18); }
  .utility-panel.open { transform: translateX(0); }
  .reader-shell { height: 100%; }
  .reader-toolbar { grid-template-columns: minmax(0,1fr) auto; min-height: 54px; padding: 6px 10px; }
  .reference-trail {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 5px;
    min-height: 42px;
    padding: 5px 7px;
  }
  .reference-trail-name,
  .reference-trail-list { display: none; }
  .reference-trail-back {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
  }
  .reference-trail-menu-button,
  .reference-trail.has-overflow .reference-trail-menu-button { display: inline-flex; }
  .reference-trail-menu { right: 6px; width: min(410px, calc(100vw - 12px)); }
  .reference-trail-menu li button { grid-template-columns: 102px minmax(0, 1fr); gap: 9px; }
  .passage-selectors { min-width: 0; }
  .select-control { min-width: 0; width: min(48vw, 190px); }
  .chapter-control { width: 100px; }
  .reader-toolbar .mode-control { display: none; }
  .display-mode-setting { display: block; }
  .display-mode-setting .mode-control { display: grid; }
  .display-mode-setting .mode-control button { min-width: 0; padding-inline: 2px; font-size: 10px; }
  .reader-scroll { padding: 16px 10px 42px; }
  body[data-reading-mode="book"] .reader-scroll { padding: 8px 40px 6px; }
  body[data-reading-mode="book"] .paper { padding: clamp(24px, 4vh, 38px) clamp(24px, 4vw, 40px); }
  body[data-reading-mode="book"] .page-turn { width: 38px; height: 96px; border-color: transparent; background: rgba(250,249,246,.68); box-shadow: none; }
  body[data-reading-mode="book"] .page-turn-previous { left: 1px; }
  body[data-reading-mode="book"] .page-turn-next { right: 1px; }
  .paper { width: 100%; min-height: 100%; padding: 42px clamp(22px, 6vw, 52px) 64px; }
  .chapter-title { font-size: 32px; }
  .mobile-nav {
    position: fixed;
    z-index: 60;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: stretch;
    height: var(--mobile-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(250, 249, 246, .98);
    backdrop-filter: blur(14px);
  }
  .mobile-nav button { display: grid; place-items: center; align-content: center; gap: 4px; width: 100%; min-width: 0; min-height: 48px; padding-inline: 1px; color: var(--muted); border: 0; background: transparent; font-size: 10px; font-weight: 700; }
  .mobile-nav button.active { color: var(--accent); }
  .mobile-nav svg { width: 20px; height: 20px; }
  .scrim { bottom: var(--mobile-nav-height); }
  .toast { bottom: calc(var(--mobile-nav-height) + 14px); }
  body[data-chrome-mode="theatre"] { --theatre-toolbar-height: 54px; }
  body[data-chrome-mode="theatre"] .mobile-nav { display: none !important; }
  body[data-chrome-mode="theatre"] .app-header { display: grid !important; }
  body[data-chrome-mode="theatre"] .app-header .mobile-only { display: flex !important; }
  body[data-chrome-mode="theatre"] .reader-toolbar { display: grid !important; }
  body[data-chrome-mode="theatre"] .reader-scroll { padding: 10px; }
  body[data-chrome-mode="theatre"] .library-panel,
  body[data-chrome-mode="theatre"] .utility-panel { top: 0; bottom: 0; }
}

@media (max-width: 520px) {
  :root { --reader-size: 18px; }
  .app-header { grid-template-columns: 38px 34px minmax(0, 1fr) 40px; }
  .header-actions #study-toggle,
  .header-actions #audio-toggle,
  .header-actions #display-toggle { display: none; }
  .global-search input::placeholder { color: transparent; }
  .reader-toolbar { gap: 6px; }
  .select-control select { padding-left: 9px; font-size: 13px; }
  .select-control { width: min(43vw, 170px); }
  .chapter-control { width: 88px; }
  .passage-actions .icon-button { width: 34px; }
  .paper { padding: 42px 34px 64px 21px; border-left: 0; border-right: 0; }
  body[data-reading-mode="book"] .reader-scroll { padding: 0 28px 4px; }
  body[data-reading-mode="book"] .paper { width: 100%; padding: 24px 34px 20px 19px; border-top: 0; border-bottom: 0; }
  body[data-reading-mode="book"] .chapter-section { column-gap: 38px; }
  body[data-reading-mode="book"] .page-turn { width: 31px; height: 112px; border: 0; border-radius: 0; background: transparent; }
  body[data-reading-mode="book"] .page-turn svg { width: 22px; height: 22px; }
  body[data-reading-mode="book"] .page-turn-previous { left: 0; }
  body[data-reading-mode="book"] .page-turn-next { right: 0; }
  body[data-reading-mode="book"] .page-progress { font-size: 10px; }
  .page-gesture-hint { display: none; }
  .chapter-section + .chapter-section { margin-top: 72px; padding-top: 54px; }
  .verse-flow { text-align: left; }
  .search-options { grid-template-columns: 1fr; }
  .reference-depth button { padding-inline: 3px; }
}

@media (max-width: 620px) {
  .audio-custom-dialog { width: calc(100vw - 18px); max-height: 90vh; }
  .audio-custom-shell { max-height: 90vh; }
  .audio-custom-books { grid-template-columns: 1fr; gap: 20px; }
  .audio-custom-footer { align-items: stretch; flex-direction: column; }
  .audio-custom-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

@media print {
  body { overflow: visible; background: white; }
  .app-header, .library-panel, .reader-toolbar, .reference-trail, .utility-panel, .mobile-nav, .chapter-footer, .page-turn, .page-progress, .verse-margin-actions { display: none !important; }
  .app-layout, .reader-shell, .reader-scroll { display: block; height: auto; overflow: visible; padding: 0; background: white; }
  .paper { width: 100%; min-height: 0; padding: 0; border: 0; box-shadow: none; }
  body[data-reading-mode="book"] .reader-scroll { display: block; height: auto; overflow: visible; padding: 0; }
  body[data-reading-mode="book"] .paper { width: 100%; height: auto; min-height: 0; overflow: visible; padding: 0; }
  body[data-reading-mode="book"] .paper::after { display: none; }
  body[data-reading-mode="book"] .chapter-section { height: auto; column-count: auto; }
  .verse:hover, .verse.selected { background: transparent; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Wedding palette and Cambridge-style wordmark */
:root {
  --chrome: #f5f3ed;
  --chrome-strong: #e8e5dc;
  --paper: #fffefa;
  --paper-edge: #dedad0;
  --ink: #282722;
  --muted: #6f6c64;
  --faint: #99958b;
  --line: #d5d1c7;
  --accent: #806324;
  --accent-soft: #f3ecd9;
  --panel: #fffefa;
  --panel-soft: #efede6;
  --gold: #a27d2d;
  --silver: #aaa8a1;
  --charcoal: #292824;
}
body[data-chrome-mode="dark"] {
  --accent: #d4b568;
  --accent-soft: rgba(212, 181, 104, .15);
  --charcoal: #272621;
}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline-color: rgba(128, 99, 36, .28);
}
.app-header { background: rgba(250, 249, 245, .97); }
.wordmark { gap: 11px; }
.wordmark-mark {
  position: relative;
  display: grid;
  align-content: center;
  width: 78px;
  height: 46px;
  padding: 5px 7px 5px 11px;
  overflow: hidden;
  color: #d7b55a;
  border: 1px solid #b28b32;
  border-radius: 3px;
  background-color: #171713;
  background-image:
    repeating-linear-gradient(112deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(24deg, rgba(0,0,0,.22) 0 1px, transparent 1px 5px);
  box-shadow: inset 3px 0 0 #080807, inset 4px 0 0 rgba(215,181,90,.28), inset 0 0 0 2px #171713, inset 0 0 0 3px rgba(215,181,90,.48), 0 2px 5px rgba(25,24,20,.18);
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.wordmark-bible-title { font-size: 12px; line-height: 1; }
.wordmark-bible-version { margin-top: 4px; font-size: 5.5px; line-height: 1; letter-spacing: .55px; white-space: nowrap; }
.wordmark-bible-mobile { display: none; }
.header-action-tabs { background: rgba(255, 254, 250, .76); }
.header-action-indicator,
body[data-chrome-mode="dark"] .header-action-tabs[data-active-tool="audio"] .header-action-indicator {
  background: var(--charcoal);
  box-shadow: 0 5px 15px rgba(39,37,31,.2), inset 0 0 0 1px rgba(212,181,104,.32);
}
.header-action-tabs .icon-button.active,
.header-action-tabs .icon-button.active:hover { color: #e0bf69; }
.audio-header-split:hover { background: var(--accent-soft); }
.audio-header-split:hover .icon-button,
.audio-header-split:hover .audio-settings-toggle { color: var(--charcoal); }
.header-action-tabs[data-active-tool="audio"] .audio-header-split,
.header-action-tabs[data-active-tool="audio"] .audio-header-split:hover { background: transparent; }
.header-action-tabs[data-active-tool="audio"] .audio-header-split .icon-button,
.header-action-tabs[data-active-tool="audio"] .audio-settings-toggle,
.header-action-tabs[data-active-tool="audio"] .audio-header-split:hover .icon-button,
.header-action-tabs[data-active-tool="audio"] .audio-header-split:hover .audio-settings-toggle,
body.audio-playing .audio-header-split:hover #audio-quick-toggle {
  color: #f0d486;
  background: transparent;
}
.header-action-tabs[data-active-tool="audio"] .audio-settings-toggle { border-left-color: rgba(224,191,105,.38); }

@media (max-width: 900px) {
  .wordmark-mark { width: 36px; height: 36px; padding: 0; }
  .wordmark-bible-title, .wordmark-bible-version { display: none; }
  .wordmark-bible-mobile { display: block; font-size: 10px; letter-spacing: 0; }
  .header-action-tabs[data-active-tool="audio"] .audio-header-split,
  body.audio-playing .header-action-tabs[data-active-tool="audio"] .audio-header-split {
    color: #e0bf69;
    background: var(--charcoal);
    box-shadow: inset 0 0 0 1px rgba(224,191,105,.45);
  }
  .header-action-tabs[data-active-tool="audio"] .audio-header-split:hover { background: var(--charcoal); }
  .header-action-tabs[data-active-tool="audio"] .audio-header-split .icon-button,
  .header-action-tabs[data-active-tool="audio"] .audio-settings-toggle,
  body[data-chrome-mode="dark"] .header-action-tabs[data-active-tool="audio"] #audio-toggle {
    color: #e0bf69;
    background: transparent;
    box-shadow: none;
  }
}

/* Gold palette v2 */
:root { --reader-accent: #806324; --reader-hover: rgba(128,99,36,.065); }
body[data-chrome-mode="dark"] { --reader-accent: #d4b568; --reader-hover: rgba(212,181,104,.09); }
.wordmark-mark {
  width: 100px;
  height: 48px;
  padding: 6px 9px 6px 13px;
  border-color: #b9943c;
  background-color: #151511;
  background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,.06) 0 1px, transparent 1.5px), repeating-linear-gradient(112deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px), repeating-linear-gradient(24deg, rgba(0,0,0,.24) 0 1px, transparent 1px 5px);
  background-size: 9px 9px, auto, auto;
  box-shadow: inset 3px 0 0 #070706, inset 4px 0 0 rgba(229,197,108,.3), inset 0 0 0 2px #151511, inset 0 0 0 3px rgba(218,181,82,.58), 0 2px 6px rgba(25,24,20,.2);
}
.wordmark-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -18px;
  right: 9px;
  width: 24px;
  height: 84px;
  pointer-events: none;
  background: linear-gradient(106deg, transparent 0 32%, rgba(255,247,199,.2) 47%, rgba(255,255,255,.34) 51%, rgba(255,232,147,.12) 57%, transparent 72%);
  transform: rotate(8deg);
}
.wordmark-bible-title, .wordmark-bible-version {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(180deg, #fff2ad 0%, #e4bf5a 29%, #906817 51%, #f0d47b 72%, #ad8124 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 1px 0 rgba(0,0,0,.36);
  white-space: nowrap;
}
.wordmark-bible-title { font-size: 14px; line-height: 1; letter-spacing: .25px; }
.wordmark-bible-version { margin-top: 5px; font-size: 6.5px; line-height: 1; letter-spacing: .65px; }
@media (max-width: 900px) {
  .wordmark-mark { width: 36px; height: 36px; padding: 0; }
  .wordmark-mark::after { right: 3px; }
  .wordmark-bible-title, .wordmark-bible-version { display: none; }
  .wordmark-bible-mobile { position: relative; z-index: 1; color: #e6c76f; text-shadow: 0 1px 0 #000; }
}
/* Listen controls v4 */
.header-action-tabs #audio-toggle:hover {
  color: #5d4722;
  border-color: transparent;
  background: #f3ecd9;
}
.header-action-tabs #audio-toggle.active,
.header-action-tabs #audio-toggle.active:hover {
  color: #f0d486;
  background: transparent;
}
body.audio-playing #audio-toggle.listening-active:not(.active) {
  color: #806324;
  background: #f3ecd9;
  box-shadow: inset 0 0 0 1px rgba(128,99,36,.42);
}
body.audio-playing #audio-toggle.listening-active,
body.audio-playing [data-mobile-action="audio"].listening-active {
  color: #1d1609;
  background: linear-gradient(180deg, #f7df81 0%, #c39428 48%, #8a641a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(66,42,8,.46), 0 0 0 1px rgba(250,221,132,.34), 0 0 14px rgba(225,177,67,.38);
}
body.audio-playing #audio-toggle.listening-active svg,
body.audio-playing [data-mobile-action="audio"].listening-active svg {
  animation: listen-pulse 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 7px rgba(255, 222, 116, .72));
}
body.audio-paused #audio-toggle.listening-paused svg,
body.audio-paused [data-mobile-action="audio"].listening-paused svg {
  animation: none;
  opacity: .84;
}
@keyframes listen-pulse { 0%, 100% { opacity: .82; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } }
.audio-primary-controls .audio-primary-play {
  display: grid;
  grid-template-columns: auto minmax(44px, auto);
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 10px;
  color: var(--ink);
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 2px 4px rgba(40,35,27,.12);
  font-size: 12px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.audio-primary-controls .audio-primary-play:hover:not(:disabled) {
  color: var(--ink);
  border-color: #b9943c;
  background: #fffaf0;
}
.playback-toggle-icons {
  display: grid;
  grid-template-columns: 30px 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid #b9943c;
  border-radius: 4px;
  background: #f3ecd9;
}
.playback-toggle-half { display: grid; place-items: center; color: #806324; transition: color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.playback-toggle-half + .playback-toggle-half { border-left: 1px solid rgba(128,99,36,.28); }
.playback-toggle-half svg { width: 15px; height: 15px; }
.audio-primary-play[data-playback-state="idle"] .playback-toggle-play,
.audio-primary-play[data-playback-state="paused"] .playback-toggle-play,
.audio-primary-play[data-playback-state="playing"] .playback-toggle-pause {
  color: #fffaf0;
  background: #806324;
  box-shadow: inset 0 0 0 1px rgba(255,242,173,.28);
}
.audio-primary-play[data-playback-state="playing"] {
  transform: translateY(1px);
  background: #ebe4d4;
  box-shadow: inset 0 2px 5px rgba(54,42,17,.22);
}
body[data-chrome-mode="dark"] .audio-primary-controls .audio-primary-play {
  color: var(--ink);
  border-color: #806324;
  background: #1d1b18;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
body[data-chrome-mode="dark"] .audio-primary-play[data-playback-state="playing"] { background: #292319; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.audio-setting-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
@media (max-width: 900px) {
  .header-action-tabs #audio-toggle.active, .header-action-tabs #audio-toggle.active:hover { color: #e6c76f; background: var(--charcoal); }
}
body.audio-playing .header-action-tabs #audio-toggle.listening-active,
body.audio-playing .header-action-tabs #audio-toggle.listening-active.active,
body.audio-playing .header-action-tabs #audio-toggle.listening-active:hover,
body.audio-playing [data-mobile-action="audio"].listening-active {
  color: #1d1609;
  background: linear-gradient(180deg, #f7df81 0%, #c39428 48%, #8a641a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), inset 0 -1px 0 rgba(66,42,8,.46), 0 0 0 1px rgba(250,221,132,.34), 0 0 14px rgba(225,177,67,.38);
}

/* Independent reading flow and page composition */
.mode-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.column-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.column-control button {
  display: grid;
  place-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 64px;
  padding: 7px 4px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.column-control button svg { width: 20px; height: 20px; }
.column-control button.active { color: #fffaf0; border-color: var(--accent); background: var(--accent); }
body[data-chrome-mode="dark"] .column-control button:not(.active) { color: #d4b568; background: #1d1b18; }
.layout-feature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.layout-feature-toggle > span { display: grid; gap: 3px; }
.layout-feature-toggle small { color: var(--muted); font-size: 11px; }
.layout-feature-toggle input { width: 38px; height: 22px; accent-color: var(--accent); }

body[data-text-columns="two"][data-center-references="false"]:not([data-reading-mode="book"]) .paper { width: min(100%, 1120px); }
body[data-text-columns="two"][data-center-references="false"]:not([data-reading-mode="book"]) .chapter-body {
  column-count: 2;
  column-gap: clamp(42px, 5vw, 72px);
  column-rule: 1px solid color-mix(in srgb, var(--reader-rule) 68%, transparent);
}
body[data-text-columns="two"][data-center-references="false"]:not([data-reading-mode="book"]) .chapter-heading,
body[data-text-columns="two"][data-center-references="false"]:not([data-reading-mode="book"]) .verse { break-inside: avoid-column; }

body[data-center-references="true"]:not([data-reading-mode="book"]) .reader-scroll { padding: 24px clamp(10px, 2.8vw, 46px) 72px; }
body[data-center-references="true"]:not([data-reading-mode="book"]) .paper {
  width: min(100%, 1240px);
  padding: clamp(38px, 5vw, 68px) clamp(22px, 3.8vw, 54px) 76px;
}
body[data-reading-mode="scroll"][data-center-references="true"] .reference-chapter { margin-bottom: 72px; }
.single-reference-layout {
  border-top: 1px solid var(--reader-rule);
  border-bottom: 1px solid var(--reader-rule);
  padding: 14px 0;
}
.single-reference-layout .concord-row-left {
  grid-template-columns: minmax(0, 1fr) clamp(112px, 14vw, 154px);
  grid-template-areas: "scripture references";
}
.single-reference-layout .concord-scripture-cell { padding: 0 18px 13px 0; }
.single-reference-layout .concord-references {
  border-left: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent);
}

body[data-reading-mode="book"][data-center-references="true"] .paper { width: min(100%, 1380px); }
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row {
  break-inside: avoid-column;
  min-height: 0;
  padding-bottom: 11px;
}
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-left {
  grid-template-columns: minmax(0, 1fr) clamp(88px, 8vw, 116px);
  grid-template-areas: "scripture references";
}
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right {
  grid-template-columns: clamp(88px, 8vw, 116px) minmax(0, 1fr);
  grid-template-areas: "references scripture";
}
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-scripture-cell { padding: 0 12px 0 0; }
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right .concord-scripture-cell { padding: 0 0 0 12px; }
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-references {
  padding: 2px 7px 8px;
  border-left: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent);
}
body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right .concord-references {
  border-right: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent);
  border-left: 0;
}

body[data-reader-width="full"] .reader-scroll { padding-inline: clamp(8px, 1.4vw, 24px); }
body[data-reader-width="full"] .paper,
body[data-reader-width="full"][data-chrome-mode="theatre"] .paper,
body[data-reader-width="full"][data-reading-mode="book"] .paper,
body[data-reader-width="full"][data-text-columns="two"] .paper,
body[data-reader-width="full"][data-center-references="true"] .paper {
  width: 100%;
  max-width: none;
}
body[data-reader-width="full"][data-chrome-mode="theatre"] .reader-scroll { padding-inline: clamp(6px, 1vw, 16px); }

@media (max-width: 760px) {
  body[data-text-columns="two"][data-center-references="false"]:not([data-reading-mode="book"]) .chapter-body { column-count: 1; column-rule: 0; }
  body[data-center-references="true"]:not([data-reading-mode="book"]) .reader-scroll { padding: 10px 0 42px; }
  body[data-center-references="true"]:not([data-reading-mode="book"]) .paper { padding: 38px clamp(20px, 6vw, 38px) 58px; }
  .single-reference-layout .concord-row-left,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-left,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scripture" "references";
  }
  .single-reference-layout .concord-scripture-cell,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-scripture-cell { padding: 0 0 5px; }
  .single-reference-layout .concord-references,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-references {
    margin-bottom: 10px;
    padding: 3px 0 9px 22px;
    border: 0;
    border-bottom: 1px solid var(--reader-rule);
  }
}

/* Final dark-material corrections for visual identities. */
body[data-visual-style="illuminated"][data-theme-tone="dark"] .header-action-tabs,
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .header-action-tabs {
  border-color: #5e594d;
  background: linear-gradient(180deg, rgba(43,42,36,.98), rgba(24,23,19,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.28);
}
body[data-visual-style="illuminated"][data-theme-tone="dark"] .header-action-tabs .icon-button:not(.active),
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .header-action-tabs .icon-button:not(.active) { color: #d9d4c4; }
body[data-visual-style="illuminated"][data-theme-tone="dark"] .header-action-tabs .icon-button:hover:not(.active),
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .header-action-tabs .icon-button:hover:not(.active) {
  color: var(--style-gold-bright);
  background: rgba(228,202,118,.1);
}
body[data-visual-style="illuminated"][data-theme-tone="dark"] .book-link.active,
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .book-link.active {
  color: #ead889;
  background: rgba(187,151,55,.14);
  box-shadow: inset 3px 0 0 #c39b3a;
}

/* Material styles and tactile papers v2 */
.visual-style-control {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
.visual-style-control button {
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto;
  justify-items: start;
  gap: 7px;
  min-height: 42px;
  padding: 5px 7px;
  text-align: left;
  white-space: normal;
}
.visual-style-control button > span:last-child { overflow: visible; }
.visual-style-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.visual-style-copy strong,
.visual-style-copy small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-style-copy strong { color: inherit; font-size: 9px; line-height: 1.15; }
.visual-style-copy small { color: var(--muted); font-size: 7.5px; font-weight: 600; line-height: 1.15; }
.visual-style-control button.active .visual-style-copy small { color: color-mix(in srgb, var(--style-active-ink) 72%, transparent); }
.style-name-dark { display: none !important; }
body[data-chrome-mode="dark"] .style-name-light,
body[data-chrome-mode="theatre"] .style-name-light { display: none !important; }
body[data-chrome-mode="dark"] .style-name-dark,
body[data-chrome-mode="theatre"] .style-name-dark { display: inline !important; }

/* Every light paper uses fine fibre grain; black intentionally stays solid. */
body[data-paper="white"] {
  --paper: #fffefa;
  --paper-edge: #dedbd2;
  --paper-texture:
    repeating-linear-gradient(2deg, rgba(74,65,49,.018) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(91deg, rgba(74,65,49,.012) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(232,229,220,.08));
  --paper-texture-size: auto, auto, auto;
}
body[data-paper="cream"] {
  --paper: #fbf4e2;
  --paper-edge: #dacfb8;
  --paper-texture:
    repeating-linear-gradient(3deg, rgba(111,80,34,.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(92deg, rgba(255,255,255,.18) 0 1px, transparent 1px 8px),
    linear-gradient(140deg, rgba(255,252,235,.4), rgba(213,191,145,.1));
  --paper-texture-size: auto, auto, auto;
}
body[data-paper="ivory"] {
  --paper: #f3efdc;
  --paper-edge: #d2cbb1;
  --paper-texture:
    repeating-linear-gradient(1deg, rgba(105,94,58,.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(89deg, rgba(255,255,255,.14) 0 1px, transparent 1px 9px),
    linear-gradient(150deg, rgba(255,254,235,.32), rgba(190,180,139,.08));
  --paper-texture-size: auto, auto, auto;
}
body[data-paper="beige"] {
  --paper: #dfcda9;
  --paper-edge: #bca987;
  --paper-texture:
    repeating-linear-gradient(4deg, rgba(103,72,34,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(94deg, rgba(255,244,214,.11) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(37deg, rgba(92,68,39,.025) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, rgba(244,224,183,.28), rgba(139,105,64,.08));
  --paper-texture-size: auto, auto, auto, auto;
  --reader-muted: #675b48;
}
body[data-paper="black"] {
  --paper: #0f0f0e;
  --paper-edge: #343330;
  --paper-texture: none;
  --paper-texture-size: auto;
}
body[data-paper="antique"] {
  --paper: #d9bd84;
  --paper-edge: #a9844e;
  --paper-texture:
    repeating-linear-gradient(3deg, rgba(90,58,24,.055) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(91deg, rgba(255,232,177,.07) 0 1px, transparent 1px 10px),
    linear-gradient(120deg, rgba(255,232,169,.08), rgba(91,55,20,.13)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: auto, auto, auto, cover;
  --reader-ink: #2c2114;
  --reader-muted: #65533c;
}
.paper-swatch[data-paper-choice="white"] span {
  background-color: #fffefa;
  background-image: repeating-linear-gradient(2deg, rgba(74,65,49,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(91deg, rgba(74,65,49,.025) 0 1px, transparent 1px 6px);
}
.paper-swatch[data-paper-choice="cream"] span {
  background-color: #fbf4e2;
  background-image: repeating-linear-gradient(3deg, rgba(111,80,34,.06) 0 1px, transparent 1px 4px), repeating-linear-gradient(92deg, rgba(255,255,255,.2) 0 1px, transparent 1px 7px);
}
.paper-swatch[data-paper-choice="ivory"] span {
  background-color: #f3efdc;
  background-image: repeating-linear-gradient(1deg, rgba(105,94,58,.055) 0 1px, transparent 1px 5px), repeating-linear-gradient(89deg, rgba(255,255,255,.16) 0 1px, transparent 1px 8px);
}
.paper-swatch[data-paper-choice="beige"] span {
  background-color: #dfcda9;
  background-image: repeating-linear-gradient(4deg, rgba(103,72,34,.13) 0 1px, transparent 1px 3px), repeating-linear-gradient(94deg, rgba(255,244,214,.14) 0 1px, transparent 1px 5px), repeating-linear-gradient(37deg, rgba(92,68,39,.05) 0 1px, transparent 1px 11px);
}
.paper-swatch[data-paper-choice="black"] span { border-color: #44423e; background: #0f0f0e; }
.paper-swatch[data-paper-choice="antique"] span {
  background-color: #d9bd84;
  background-image: repeating-linear-gradient(3deg, rgba(90,58,24,.09) 0 1px, transparent 1px 5px), linear-gradient(120deg, rgba(255,232,169,.04), rgba(91,55,20,.16)), url("assets/antique-paper.jpg");
  background-position: center;
  background-size: auto, auto, cover;
}

/* Cambridge Ink: white paper, black ink, silver controls, polished gold. */
body[data-visual-style="illuminated"][data-theme-tone="light"] {
  --chrome: #f5f5f1;
  --chrome-strong: #e8e8e3;
  --panel: #fbfbf7;
  --panel-soft: #eeeee9;
  --line: #c9c9c2;
  --style-neutral-bg: linear-gradient(112deg, rgba(255,255,255,.72) 0 17%, transparent 30% 63%, rgba(255,255,255,.38) 74% 82%, transparent 91%), linear-gradient(180deg, #ffffff 0%, #eef0f1 18%, #b5b9bc 48%, #f5f6f6 72%, #a4a8aa 100%);
  --style-neutral-border: #858a8d;
  --style-neutral-ink: #202224;
  --style-active-bg: linear-gradient(180deg, #fff7bd 0%, #f2d777 25%, #a9791d 55%, #e7c75d 76%, #fff0a4 100%);
  --style-active-border: #7b5813;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(body, .app-header, .library-panel, .utility-panel, .reader-toolbar) {
  background-color: #f7f7f3;
  background-image: repeating-linear-gradient(2deg, rgba(46,46,42,.025) 0 1px, transparent 1px 5px), repeating-linear-gradient(91deg, rgba(46,46,42,.018) 0 1px, transparent 1px 8px), linear-gradient(145deg, rgba(255,255,255,.62), rgba(224,224,217,.22));
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .reader-shell {
  background-color: #dfded8;
  background-image: repeating-linear-gradient(2deg, rgba(58,56,50,.03) 0 1px, transparent 1px 6px), repeating-linear-gradient(91deg, rgba(255,255,255,.12) 0 1px, transparent 1px 8px);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-tabs {
  background: linear-gradient(180deg, #fff 0%, #efefec 45%, #d4d5d2 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(80,81,77,.12), 0 2px 5px rgba(45,45,40,.14);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .visual-style-swatch-cambridge {
  background: linear-gradient(135deg, #fffefa 0 52%, #11110f 52% 73%, #d7b653 73% 100%);
}

/* Cambridge Leather: visible black grain with glittering gold ink. */
body[data-visual-style="illuminated"][data-theme-tone="dark"] {
  --chrome: #0d0d0c;
  --chrome-strong: #20201d;
  --panel: #141412;
  --panel-soft: #1d1d1a;
  --line: #45443d;
  --style-neutral-bg: linear-gradient(180deg, #30312e 0%, #151614 100%);
  --style-neutral-border: #696961;
  --style-neutral-ink: #d8d9d5;
  --style-active-bg: linear-gradient(180deg, #fff1a7 0%, #d5ac43 27%, #79530e 54%, #c99e30 73%, #f6da76 100%);
  --style-active-border: #e1c46c;
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(body, .app-header, .library-panel, .utility-panel, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #11110f;
  background-image: repeating-linear-gradient(117deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px), repeating-linear-gradient(27deg, rgba(0,0,0,.36) 0 1px, transparent 1px 6px), repeating-conic-gradient(from 28deg at 50% 50%, rgba(255,255,255,.018) 0 5deg, transparent 5deg 19deg);
  background-size: auto, auto, 10px 8px;
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  border-bottom-color: #937323;
  box-shadow: inset 0 -1px 0 rgba(239,211,116,.42), 0 2px 8px rgba(0,0,0,.34);
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  border-color: #847036;
  background-color: #12120f;
  background-image: repeating-linear-gradient(117deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px), linear-gradient(180deg, #282822, #11110e);
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-cambridge {
  background: repeating-linear-gradient(117deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), linear-gradient(135deg, #090908 0 66%, #d9b34d 66% 100%);
}

/* Jacobean Plaster: lime plaster, brown wood, faded floral print, old gold. */
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --chrome: #e9e0d0;
  --chrome-strong: #d8cab4;
  --panel: #f1eadf;
  --panel-soft: #e3d8c8;
  --line: #b9a88f;
  --accent: #775622;
  --accent-soft: rgba(111,73,36,.11);
  --style-neutral-bg: linear-gradient(180deg, #f7f0e4 0%, #ddd0bd 100%);
  --style-neutral-border: #a39178;
  --style-neutral-ink: #33291e;
  --style-active-bg: repeating-linear-gradient(106deg, rgba(62,43,18,.09) 0 1px, transparent 1px 6px), linear-gradient(180deg, #d9bd74 0%, #9b762f 52%, #c09a4b 100%);
  --style-active-border: #6e5121;
  --style-active-ink: #251b0f;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.library-panel, .utility-panel) {
  background-color: #eee6d9;
  background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 0 11deg, rgba(102,70,40,.025) 11deg 13deg, transparent 13deg 24deg), repeating-linear-gradient(4deg, rgba(116,92,66,.035) 0 1px, transparent 1px 9px), linear-gradient(135deg, rgba(255,255,255,.24), rgba(164,138,104,.06));
  background-size: 34px 34px, auto, auto;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.app-header, .reader-toolbar) {
  background-color: #4e2b18;
  background-image: repeating-linear-gradient(92deg, rgba(255,225,172,.06) 0 1px, transparent 1px 7px), repeating-linear-gradient(87deg, rgba(28,11,5,.18) 0 2px, transparent 2px 19px), linear-gradient(180deg, #6d4327, #3a2114);
  box-shadow: inset 0 -2px 0 rgba(173,128,48,.56);
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-toolbar { color: #f3eadc; border-color: #8e672f; }
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell {
  background-color: #b49b78;
  background-image: repeating-linear-gradient(92deg, rgba(255,239,201,.05) 0 1px, transparent 1px 8px), repeating-linear-gradient(88deg, rgba(65,39,19,.08) 0 2px, transparent 2px 22px), linear-gradient(135deg, #bea685, #8f7657);
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .visual-style-swatch-jacobean {
  background: linear-gradient(135deg, #ede5d8 0 54%, #5a311b 54% 78%, #a77d36 78% 100%);
}

/* Jacobean Velvet: crimson textile, dark wood, and softly tarnished gold. */
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --chrome: #21120f;
  --chrome-strong: #4b201f;
  --panel: #43191f;
  --panel-soft: #552128;
  --line: #765044;
  --ink: #f0e4ce;
  --muted: #cdbca0;
  --style-neutral-bg: repeating-linear-gradient(105deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px), linear-gradient(180deg, #5b292d, #32171a);
  --style-neutral-border: #8d6c4f;
  --style-neutral-ink: #eadbbf;
  --style-active-bg: repeating-linear-gradient(106deg, rgba(51,32,10,.13) 0 1px, transparent 1px 5px), linear-gradient(180deg, #cfb06a 0%, #8d692b 55%, #b58d40 100%);
  --style-active-border: #d0ad5b;
  --style-active-ink: #24180c;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.library-panel, .utility-panel) {
  background-color: #48181f;
  background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 0 11deg, rgba(239,200,133,.035) 11deg 13deg, transparent 13deg 24deg), repeating-linear-gradient(105deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px), linear-gradient(145deg, #591f29, #2f1115);
  background-size: 34px 34px, auto, auto;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #2a160f;
  background-image: repeating-linear-gradient(92deg, rgba(255,220,158,.045) 0 1px, transparent 1px 7px), repeating-linear-gradient(87deg, rgba(16,6,3,.28) 0 2px, transparent 2px 19px), linear-gradient(180deg, #4d2b1b, #1e100b);
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  background-color: #4c1b22;
  background-image: repeating-linear-gradient(105deg, rgba(255,255,255,.04) 0 1px, transparent 1px 5px), linear-gradient(180deg, #63232d, #321217);
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jacobean {
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px), linear-gradient(135deg, #6c202b 0 66%, #5a311b 66% 82%, #b48b3f 82% 100%);
}

/* Temple Marble: white stone, Jerusalem limestone, gold, and historic mineral colors. */
body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --chrome: #ece9e0;
  --chrome-strong: #d8d2c5;
  --panel: #f5f3ed;
  --panel-soft: #e5e1d6;
  --line: #bdb9ae;
  --accent: #8c631a;
  --accent-soft: rgba(39,91,107,.1);
  --style-neutral-bg: linear-gradient(180deg, #fffefa 0%, #dddcd7 100%);
  --style-neutral-border: #a9aaa5;
  --style-neutral-ink: #252826;
  --style-active-bg: linear-gradient(180deg, #f1d98a 0%, #aa7c25 58%, #d0aa4e 100%);
  --style-active-border: #735017;
  --style-active-ink: #20170c;
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(body, .app-header, .library-panel, .utility-panel, .reader-toolbar) {
  background-color: #efede6;
  background-image: linear-gradient(113deg, transparent 0 37%, rgba(92,106,108,.075) 38%, transparent 39% 64%, rgba(155,132,95,.06) 65%, transparent 66%), linear-gradient(23deg, transparent 0 52%, rgba(102,112,111,.05) 53%, transparent 54%), linear-gradient(145deg, rgba(255,255,255,.72), rgba(214,210,200,.2));
  background-size: 190px 150px, 260px 210px, auto;
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .reader-shell {
  background-color: #c8b28c;
  background-image: repeating-linear-gradient(2deg, rgba(109,78,38,.045) 0 1px, transparent 1px 9px), repeating-linear-gradient(91deg, rgba(255,247,224,.07) 0 1px, transparent 1px 12px), linear-gradient(135deg, #d5c4a5, #ad936e);
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .panel-heading .eyebrow { color: #315f91; }
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .utility-heading .eyebrow { color: #8d3342; }
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .chapter-kicker { color: #9c4a2d; }
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .book-link.active {
  color: #285d6a;
  background: rgba(59,116,82,.1);
  box-shadow: inset 3px 0 0 #b18a31;
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .visual-style-swatch-jerusalem {
  background: conic-gradient(from 45deg, #f5f3ed, #315f91, #3f7958, #b0802b, #8d3342, #f5f3ed);
}

/* Temple Bronze: dark Corinthian metal, ancient gold, and restrained gemstone color. */
body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --chrome: #151716;
  --chrome-strong: #242725;
  --panel: #1d201e;
  --panel-soft: #282c29;
  --line: #4a504c;
  --ink: #ece7dc;
  --muted: #bbb4a6;
  --style-neutral-bg: repeating-linear-gradient(96deg, rgba(255,255,255,.025) 0 1px, transparent 1px 6px), linear-gradient(180deg, #373b38, #1d201e);
  --style-neutral-border: #626964;
  --style-neutral-ink: #e2dccd;
  --style-active-bg: linear-gradient(180deg, #e4cb77 0%, #947024 56%, #c39b43 100%);
  --style-active-border: #d9bd68;
  --style-active-ink: #1f180d;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(body, .app-header, .library-panel, .utility-panel, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #191b1a;
  background-image: repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px), repeating-linear-gradient(7deg, rgba(0,0,0,.28) 0 1px, transparent 1px 11px), linear-gradient(135deg, #2d302e, #111312);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  border-bottom-color: #9a782d;
  box-shadow: inset 0 -1px 0 rgba(224,196,104,.42), 0 2px 8px rgba(0,0,0,.3);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  border-color: #746834;
  background-color: #202321;
  background-image: repeating-linear-gradient(96deg, rgba(255,255,255,.035) 0 1px, transparent 1px 6px), linear-gradient(180deg, #363a37, #191b1a);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jerusalem {
  background: conic-gradient(from 45deg, #171918, #315f91, #3f7958, #b0802b, #8d3342, #171918);
}

@media (max-width: 900px) {
  .visual-style-control button { min-height: 40px; }
  .visual-style-copy small { font-size: 7px; }
}

/* Photographic material textures v3 */
.paper {
  background-blend-mode: normal;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--paper-texture-size, cover);
}

/* One real paper scan carries the subtle grain for the three clean papers. */
body[data-paper="white"] {
  --paper: #fffefa;
  --paper-edge: #dedbd2;
  --paper-texture:
    linear-gradient(rgba(255,255,252,.86), rgba(250,250,246,.86)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: cover, cover;
}
body[data-paper="cream"] {
  --paper: #fbf4e2;
  --paper-edge: #dacfb8;
  --paper-texture:
    linear-gradient(rgba(251,244,226,.74), rgba(247,238,216,.74)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: cover, cover;
}
body[data-paper="ivory"] {
  --paper: #f3efdc;
  --paper-edge: #d2cbb1;
  --paper-texture:
    linear-gradient(rgba(243,239,220,.72), rgba(237,232,210,.72)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: cover, cover;
}
body[data-paper="beige"] {
  --paper: #eee3ca;
  --paper-edge: #c9b995;
  --paper-texture:
    radial-gradient(ellipse at 24% 16%, rgba(255,252,239,.13), transparent 48%),
    linear-gradient(rgba(239,227,201,.04), rgba(221,202,166,.06)),
    url("assets/materials/paper-1611-rag-v1.jpg");
  --paper-texture-size: cover, cover, cover;
  --reader-muted: #655b49;
}
body[data-paper="black"] {
  --paper: #0f0f0e;
  --paper-edge: #343330;
  --paper-texture: none;
  --paper-texture-size: auto;
}
body[data-paper="antique"] {
  --paper: #d9bd84;
  --paper-edge: #a9844e;
  --paper-texture:
    radial-gradient(ellipse at 34% 20%, rgba(255,241,200,.18), transparent 52%),
    linear-gradient(rgba(213,177,109,.34), rgba(174,126,65,.28)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: cover, cover, cover;
  --reader-ink: #2c2114;
  --reader-muted: #65533c;
}

.paper-swatch span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.paper-swatch[data-paper-choice="white"] span {
  background-color: #fffefa;
  background-image: linear-gradient(rgba(255,255,252,.83), rgba(250,250,246,.83)), url("assets/antique-paper.jpg");
}
.paper-swatch[data-paper-choice="cream"] span {
  background-color: #fbf4e2;
  background-image: linear-gradient(rgba(251,244,226,.68), rgba(247,238,216,.68)), url("assets/antique-paper.jpg");
}
.paper-swatch[data-paper-choice="ivory"] span {
  background-color: #f3efdc;
  background-image: linear-gradient(rgba(243,239,220,.66), rgba(237,232,210,.66)), url("assets/antique-paper.jpg");
}
.paper-swatch[data-paper-choice="beige"] span {
  background-color: #eee3ca;
  background-image: linear-gradient(rgba(239,227,201,.04), rgba(221,202,166,.06)), url("assets/materials/paper-1611-rag-v1.jpg");
}
.paper-swatch[data-paper-choice="black"] span {
  border-color: #44423e;
  background: #0f0f0e;
}
.paper-swatch[data-paper-choice="antique"] span {
  background-color: #d9bd84;
  background-image: linear-gradient(rgba(213,177,109,.25), rgba(174,126,65,.22)), url("assets/antique-paper.jpg");
}

/* Real materials fill each surface once. No visible CSS pattern or tile grid. */
body[data-visual-style] :is(.app-header, .library-panel, .utility-panel, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Cambridge Ink: softly grained white stock and restrained silver. */
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.app-header, .library-panel, .utility-panel, .reader-toolbar) {
  background-color: #f7f7f3;
  background-image: linear-gradient(rgba(247,247,243,.88), rgba(239,239,234,.88)), url("assets/antique-paper.jpg");
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.reader-shell, .reader-scroll) {
  background-color: #deddd7;
  background-image: linear-gradient(rgba(226,225,219,.84), rgba(207,205,198,.84)), url("assets/antique-paper.jpg");
}

/* Cambridge Leather: true black Bible calfskin with a visible fine grain. */
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .library-panel, .utility-panel, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #080909;
  background-image: linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.2)), url("assets/materials/cambridge-black-leather-v2.webp");
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  background-color: #0a0b0b;
  background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.14)), url("assets/materials/cambridge-black-leather-v2.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Jacobean Plaster: real lime-like plaster with mahogany framing. */
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.library-panel, .utility-panel) {
  background-color: #eee6d9;
  background-image: linear-gradient(rgba(246,241,232,.86), rgba(232,222,207,.86)), url("assets/materials/jacobean-plaster.jpg");
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.app-header, .reader-toolbar) {
  background-color: #4e2b18;
  background-image: linear-gradient(rgba(49,23,10,.24), rgba(24,10,5,.48)), url("assets/materials/jacobean-wood.jpg");
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.reader-shell, .reader-scroll) {
  background-color: #9d7b58;
  background-image: linear-gradient(rgba(93,57,31,.25), rgba(61,34,17,.34)), url("assets/materials/jacobean-wood.jpg");
}

/* Jacobean Velvet: photographed crimson nap and the same natural mahogany. */
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.library-panel, .utility-panel) {
  background-color: #43151d;
  background-image: linear-gradient(rgba(45,3,12,.76), rgba(23,2,8,.82)), url("assets/materials/jacobean-velvet.jpg");
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #26130c;
  background-image: linear-gradient(rgba(28,10,4,.49), rgba(12,5,2,.64)), url("assets/materials/jacobean-wood.jpg");
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  background-color: #43151d;
  background-image: linear-gradient(rgba(45,3,12,.74), rgba(23,2,8,.8)), url("assets/materials/jacobean-velvet.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Temple Marble: natural pale stone, warmed around the reading surface. */
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(.app-header, .library-panel, .utility-panel, .reader-toolbar) {
  background-color: #efede6;
  background-image: linear-gradient(rgba(249,248,244,.58), rgba(233,230,221,.58)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(.reader-shell, .reader-scroll) {
  background-color: #c8b28c;
  background-image: linear-gradient(rgba(200,178,140,.22), rgba(174,147,103,.26)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}

/* Temple Bronze: quiet dark metal behind the richer final material treatment below. */
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .library-panel, .utility-panel, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #1b1518;
  background-image: linear-gradient(rgba(13,8,12,.22), rgba(20,12,16,.32)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  background-blend-mode: normal, normal;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .header-action-tabs {
  background-color: #12111a;
  background-image: linear-gradient(rgba(10,9,17,.42), rgba(13,10,19,.54)), url("assets/materials/temple-veil.webp");
  background-blend-mode: normal, normal;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Style swatches use the same source materials as the full interface. */
body[data-chrome-mode="light"] .visual-style-swatch-cambridge {
  background-image: linear-gradient(rgba(255,255,252,.7), rgba(244,244,239,.7)), url("assets/antique-paper.jpg");
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-cambridge {
  background-image: linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.18)), url("assets/materials/cambridge-black-leather-v2.webp");
}
body[data-chrome-mode="light"] .visual-style-swatch-jacobean {
  background-image: linear-gradient(rgba(246,241,232,.72), rgba(232,222,207,.72)), url("assets/materials/jacobean-plaster.jpg");
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jacobean {
  background-image: linear-gradient(rgba(45,3,12,.66), rgba(23,2,8,.74)), url("assets/materials/jacobean-velvet.jpg");
}
body[data-chrome-mode="light"] .visual-style-swatch-jerusalem {
  background-image: linear-gradient(rgba(249,248,244,.38), rgba(233,230,221,.38)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jerusalem {
  background-color: #1b1418;
  background-image: linear-gradient(rgba(18,10,15,.16), rgba(19,11,17,.26)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  background-blend-mode: normal, normal;
}
.visual-style-control [class*="visual-style-swatch-"] {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Reading presets and material identities v4 */
.visual-style-control { gap: 7px; }
.visual-style-control button {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  min-height: 56px;
  padding: 7px 9px;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 1px 2px rgba(38,31,19,.08);
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.visual-style-control button:hover:not(.active) { transform: translateY(-1px); }
.visual-style-control button.active {
  box-shadow: inset 0 1px 0 rgba(255,250,213,.8), inset 0 -1px 0 rgba(74,48,5,.28), 0 0 0 1px rgba(112,78,17,.18), 0 3px 8px rgba(62,44,11,.15);
}
.visual-style-control button > .visual-style-swatch {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(65,53,32,.3);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 1px 2px rgba(22,18,12,.15);
}
.visual-style-copy { gap: 3px; }
.visual-style-copy strong { font-family: "Source Serif 4", Georgia, serif; font-size: 12px; line-height: 1.1; }
.visual-style-copy small { font-size: 9px; line-height: 1.25; }
.preset-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  margin-top: 7px;
  padding: 4px 5px 4px 8px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel-soft) 66%, transparent);
}
.preset-status > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.preset-status svg { width: 13px; height: 13px; color: var(--style-gold-mid); }
.preset-status small { overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.preset-status.customized { border-color: color-mix(in srgb, var(--style-gold-mid) 38%, var(--line)); }
.preset-status button {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 3px 8px;
  color: var(--style-gold-deep);
  border: 1px solid color-mix(in srgb, var(--style-gold-mid) 58%, var(--line));
  border-radius: 3px;
  background: color-mix(in srgb, var(--panel) 82%, var(--style-gold-bright));
  font-size: 8px;
  font-weight: 800;
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .preset-status button { color: var(--style-gold-bright); background: rgba(0,0,0,.18); }

body[data-visual-style] #display-view :is(
  .theme-control button,
  .edition-control button,
  .type-choice,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
) {
  border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, white), color-mix(in srgb, var(--panel-soft) 86%, var(--panel)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 1px 2px rgba(37,31,21,.07);
}
body[data-visual-style] :is(
  #display-view .theme-control button.active,
  #display-view .visual-style-control button.active,
  #display-view .edition-control button.active,
  #display-view .type-choice.active,
  #display-view .layout-control button.active,
  #display-view .column-control button.active,
  #display-view .spread-control button.active,
  #display-view .mode-control button.active
) {
  background: linear-gradient(180deg, #f6e39a 0%, #d7b95d 44%, #9b7021 100%);
  border-color: #80601e;
  color: #21190b;
  box-shadow: inset 0 1px 0 rgba(255,252,218,.88), inset 0 -1px 0 rgba(74,48,5,.3), 0 2px 5px rgba(62,44,11,.16);
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"])[data-visual-style] #display-view :is(
  .theme-control button,
  .edition-control button,
  .type-choice,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
) {
  color: #e6d6aa;
  border-color: #5f5748;
  background: linear-gradient(180deg, #292720, #1c1a16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.22);
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"])[data-visual-style] #display-view :is(
  .theme-control button.active,
  .visual-style-control button.active,
  .edition-control button.active,
  .type-choice.active,
  .layout-control button.active,
  .column-control button.active,
  .spread-control button.active,
  .mode-control button.active
) { color: #21190b; border-color: #dfc56f; background: linear-gradient(180deg, #f1d984, #b88d31 58%, #765115); }

/* Cambridge mark: a restrained black leather Bible with stamped gold type. */
body[data-visual-style="illuminated"] .wordmark-mark {
  width: 108px;
  height: 48px;
  padding: 6px 10px 6px 14px;
  border: 1px solid #c5a24e;
  border-radius: 3px;
  background-color: #11110f;
  background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.14)), url("assets/materials/cambridge-black-leather-v2.webp");
  background-position: center;
  background-size: cover;
  box-shadow: inset 3px 0 0 #050504, inset 4px 0 0 rgba(233,204,119,.42), inset 0 0 0 2px #11110f, inset 0 0 0 3px rgba(222,188,89,.68), 0 2px 6px rgba(25,24,20,.2);
}
body[data-visual-style="illuminated"] .wordmark-mark::before { content: none; }
body[data-visual-style="illuminated"] .wordmark-mark::after { opacity: .74; }
body[data-visual-style="illuminated"] .wordmark-bible-title,
body[data-visual-style="illuminated"] .wordmark-bible-version { font-family: "Source Serif 4", Georgia, serif; }

/* Jacobean mark: a crimson 1611 binding with aged gilt rules. */
body[data-visual-style="jacobean"] .wordmark-mark {
  width: 108px;
  height: 48px;
  padding: 6px 10px 6px 14px;
  color: #d9bd68;
  border: 1px solid #9f772b;
  border-radius: 2px;
  background-color: #3a1018;
  background-image: linear-gradient(rgba(70,7,19,.5), rgba(28,3,9,.64)), url("assets/materials/jacobean-velvet.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: inset 3px 0 0 #170508, inset 4px 0 0 rgba(220,184,89,.4), inset 0 0 0 2px #3a1018, inset 0 0 0 3px rgba(194,145,48,.74), 0 2px 7px rgba(31,8,11,.3);
}
body[data-visual-style="jacobean"] .wordmark-mark::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 6px 8px 6px 12px;
  height: auto;
  border: 1px solid rgba(219,183,91,.34);
  background: none;
}
body[data-visual-style="jacobean"] .wordmark-mark::after { opacity: .32; }
body[data-visual-style="jacobean"] .wordmark-bible-title,
body[data-visual-style="jacobean"] .wordmark-bible-version { font-family: "EB Garamond Local", Georgia, serif; }

/* Temple mark: a limestone tablet with a restrained gemstone foundation line. */
body[data-visual-style="jerusalem"] .wordmark-mark {
  width: 108px;
  height: 48px;
  padding: 6px 10px 8px 12px;
  color: #664716;
  border: 1px solid #9f7b31;
  border-radius: 2px 2px 4px 4px;
  background-color: #e9e1cf;
  background-image: linear-gradient(rgba(250,247,237,.28), rgba(221,207,180,.22)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 2px rgba(255,252,238,.62), inset 0 0 0 3px rgba(150,112,40,.44), 0 2px 6px rgba(56,44,25,.2);
}
body[data-visual-style="jerusalem"] .wordmark-mark::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 5px;
  left: 10px;
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, #8f2f3d 0 12.5%, #b96d23 12.5% 25%, #a99a32 25% 37.5%, #3d7151 37.5% 50%, #3d7392 50% 62.5%, #59518b 62.5% 75%, #844268 75% 87.5%, #9b6f37 87.5% 100%);
}
body[data-visual-style="jerusalem"] .wordmark-mark::after { content: none; }
body[data-visual-style="jerusalem"] .wordmark-bible-title,
body[data-visual-style="jerusalem"] .wordmark-bible-version {
  color: #5c4217;
  background: none;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  text-shadow: 0 1px rgba(255,255,255,.52);
  -webkit-text-fill-color: currentColor;
}

/* Pale oak in the light Jacobean preset; near-ebony wood in its dark counterpart. */
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.app-header, .reader-toolbar, .reader-shell, .reader-scroll) {
  color: #2f2417;
  background-color: #c9a978;
  background-image: linear-gradient(rgba(244,220,174,.67), rgba(208,171,115,.58)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: screen, normal;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .wordmark-copy strong { color: #312416; }
body[data-visual-style="jacobean"][data-chrome-mode="light"] .wordmark-copy small { color: #715d42; }
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-toolbar { color: #332718; border-color: #a57b3b; }
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #130906;
  background-image: linear-gradient(rgba(7,2,1,.72), rgba(13,5,2,.82)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: multiply, normal;
}

/* Temple Limestone replaces the tiled floor image with one continuous honed slab. */
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(.app-header, .library-panel, .utility-panel, .reader-toolbar) {
  background-color: #eee9de;
  background-image: linear-gradient(rgba(248,246,239,.52), rgba(232,226,213,.54)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(.reader-shell, .reader-scroll) {
  background-color: #d5c4a4;
  background-image: linear-gradient(rgba(210,192,157,.2), rgba(177,151,107,.24)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}
body[data-chrome-mode="light"] .visual-style-swatch-jerusalem {
  background-image: linear-gradient(rgba(249,247,239,.28), rgba(221,211,190,.28)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}

body[data-reading-mode="scroll"] #display-view .compact-spread-setting { display: none; }
body[data-reading-mode="scroll"] #display-view .page-feature-grid { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .wordmark-mark,
  body[data-visual-style="illuminated"] .wordmark-mark,
  body[data-visual-style="jacobean"] .wordmark-mark,
  body[data-visual-style="jerusalem"] .wordmark-mark { width: 36px; height: 36px; padding: 0; }
  body[data-visual-style="jacobean"] .wordmark-mark::before { inset: 4px; }
  body[data-visual-style="jerusalem"] .wordmark-mark::before { right: 4px; bottom: 4px; left: 4px; }
  .visual-style-control button { min-height: 52px; }
}

/* Manuscript type profile: Alegreya body with its dedicated small-cap family. */
body[data-typeface="classical"] :is(.chapter-kicker, .chapter-title) {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
body[data-typeface="classical"] .chapter-heading {
  font-family: "Alegreya", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}
body[data-typeface="classical"] .verse-number {
  font-family: "Alegreya", Georgia, serif;
  font-weight: 500;
}
body[data-typeface="classical"] .verse em,
body[data-typeface="classical"] .verse .supplied-word {
  font-family: "Alegreya", Georgia, serif;
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
  vertical-align: baseline;
}

/* A milled Jacobean frame separates binding wood, toolbar material, and reading field. */
body[data-visual-style="jacobean"][data-chrome-mode="light"] .app-header {
  background-color: #c9a978;
  background-image: linear-gradient(rgba(246,224,181,.7), rgba(211,174,117,.6)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: screen, normal;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-toolbar {
  color: #342819;
  border-color: #9e7945;
  background-color: #eee5d7;
  background-image: linear-gradient(rgba(250,246,238,.84), rgba(224,211,191,.84)), url("assets/materials/jacobean-plaster.jpg");
  background-blend-mode: normal, normal;
  box-shadow: inset 0 1px rgba(255,255,255,.72), inset 0 -2px rgba(99,57,25,.22);
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell {
  background-color: #4c2a17;
  background-image: linear-gradient(rgba(82,47,25,.16), rgba(47,24,12,.28)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: multiply, normal;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-scroll {
  border: 8px solid transparent;
  background-color: #e8dece;
  background-image: linear-gradient(rgba(247,241,231,.78), rgba(223,211,193,.78)), url("assets/materials/jacobean-plaster.jpg"), radial-gradient(ellipse at 50% 50%, rgba(248,221,155,.56) 0 10%, transparent 11% 36%, rgba(80,42,18,.34) 37% 42%, transparent 43%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(177,124,43,.44) 0 9deg, transparent 9deg 36deg), linear-gradient(135deg, rgba(218,176,91,.72), rgba(67,34,16,.58) 24%, rgba(174,125,57,.7) 52%, rgba(47,23,11,.72)), url("assets/materials/jacobean-wood.jpg");
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: cover, cover, 30px 30px, 30px 30px, cover, cover;
  background-origin: padding-box, padding-box, border-box, border-box, border-box, border-box;
  background-clip: padding-box, padding-box, border-box, border-box, border-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(78,46,23,.32), inset 0 0 0 4px rgba(255,245,218,.2), 0 0 0 1px #2e170c;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  background-color: #120806;
  background-image: linear-gradient(rgba(5,2,1,.72), rgba(12,4,2,.84)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: multiply, normal;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-toolbar {
  color: #eddfc4;
  border-color: #8b5c45;
  background-color: #48131e;
  background-image: linear-gradient(rgba(70,8,22,.7), rgba(35,3,10,.78)), url("assets/materials/jacobean-velvet.jpg");
  background-blend-mode: normal, normal;
  box-shadow: inset 0 1px rgba(255,238,203,.08), inset 0 -2px rgba(7,1,2,.46);
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-shell {
  background-color: #0d0503;
  background-image: linear-gradient(rgba(3,1,0,.78), rgba(9,3,1,.88)), url("assets/materials/jacobean-wood.jpg");
  background-blend-mode: multiply, normal;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll {
  border: 8px solid transparent;
  background-color: #321017;
  background-image: linear-gradient(rgba(57,7,18,.78), rgba(27,2,8,.84)), url("assets/materials/jacobean-velvet.jpg"), radial-gradient(ellipse at 50% 50%, rgba(212,169,78,.38) 0 10%, transparent 11% 36%, rgba(8,2,1,.58) 37% 42%, transparent 43%), repeating-conic-gradient(from 0deg at 50% 50%, rgba(177,127,48,.34) 0 9deg, transparent 9deg 36deg), linear-gradient(135deg, rgba(130,87,32,.62), rgba(16,6,2,.8) 24%, rgba(104,65,25,.62) 52%, rgba(7,2,1,.9)), url("assets/materials/jacobean-wood.jpg");
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: cover, cover, 30px 30px, 30px 30px, cover, cover;
  background-origin: padding-box, padding-box, border-box, border-box, border-box, border-box;
  background-clip: padding-box, padding-box, border-box, border-box, border-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(224,188,102,.18), inset 0 0 0 4px rgba(0,0,0,.36), 0 0 0 1px #070201;
}

/* Deep velvet ink remains legible on the Jacobean natural-paper reading surface. */
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.paragraph-mark, .margin-note-caller) {
  color: #861a35;
  text-shadow: 0 1px rgba(255,244,221,.44);
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .margin-note-caller:hover,
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .margin-note-caller:focus-visible {
  color: #5e0e22;
  background: rgba(134,26,53,.11);
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-scroll,
  body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll { border-width: 5px; }
}

/* Preset emblems use recognizable architecture instead of abstract material marks. */
.visual-style-control button > .visual-style-swatch {
  display: grid;
  place-items: center;
}
.visual-style-swatch svg {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  fill: none;
  stroke-width: 1.55;
}
.visual-style-swatch-cambridge::after,
.visual-style-swatch-jacobean::after { content: none; }
.visual-style-swatch-cambridge {
  color: #e0c56f;
  background-color: #121210;
  background-image: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.16)), url("assets/materials/cambridge-black-leather-v2.webp");
}
body[data-chrome-mode="light"] .visual-style-swatch-jacobean { color: #742037; }
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jacobean { color: #e0c06b; }
.visual-style-swatch-jerusalem {
  width: 38px;
  height: 38px;
  color: #6c4b19;
  border-radius: 3px;
  clip-path: none;
}
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jerusalem { color: #e1c56d; }

/* Jacobean dark uses crimson and walnut ink on the natural-paper leaf. */
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --reader-accent: #861a35;
  --reader-muted: #5f4939;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .chapter-title { color: #2b1a12; }
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.chapter-kicker, .verse-number, .paragraph-mark, .margin-note-caller) {
  color: #861a35;
}

/* Temple Limestone keeps inscriptional headings distinct from the warm scroll. */
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .chapter-title { color: #382813; }
body[data-visual-style="jerusalem"][data-chrome-mode="light"] :is(.chapter-kicker, .chapter-heading) { color: #6b4a1b; }

/* Temple Bronze: a Corinthian-bronze shell with restrained veil-textile panels. */
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --chrome: #1c1719;
  --chrome-strong: #292126;
  --panel: #15131d;
  --panel-soft: #211d29;
  --line: #756a59;
  --ink: #f0eadc;
  --muted: #c0b5a5;
  --accent: #d0ad51;
  --accent-soft: rgba(203, 169, 78, .15);
  --style-neutral-bg: linear-gradient(180deg, #30272a 0%, #18141b 100%);
  --style-neutral-border: #81745e;
  --style-neutral-ink: #e7dece;
  --style-active-bg: linear-gradient(180deg, #f0d982 0%, #9a7226 56%, #d0a94b 100%);
  --style-active-border: #ead17a;
  --style-active-ink: #20160c;
  background-color: #181316;
  background-image: linear-gradient(rgba(15, 10, 14, .16), rgba(18, 12, 16, .24)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  background-position: center;
  background-size: cover;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .reader-toolbar, .reader-shell, .reader-scroll) {
  background-color: #1d1719;
  background-image: linear-gradient(rgba(18, 11, 15, .18), rgba(24, 15, 19, .28)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  background-blend-mode: normal, normal;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-toolbar {
  background-color: #12111a;
  background-image:
    linear-gradient(90deg, rgba(55, 15, 24, .18), rgba(9, 8, 16, .18) 36%, rgba(22, 13, 32, .3) 68%, rgba(55, 15, 24, .16)),
    url("assets/materials/temple-veil.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-color: #9a7a38;
  box-shadow:
    inset 0 1px 0 rgba(226, 211, 174, .12),
    inset 0 -1px 0 rgba(208, 165, 67, .32),
    0 2px 8px rgba(0, 0, 0, .24);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.library-panel, .utility-panel, .header-action-tabs) {
  background-color: #12111a;
  background-image: linear-gradient(rgba(10, 9, 17, .42), rgba(13, 10, 19, .54)), url("assets/materials/temple-veil.webp");
  background-blend-mode: normal, normal;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #8a795d;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  border-bottom-color: #d8c9a3;
  box-shadow: inset 0 -1px 0 rgba(207, 169, 75, .72), 0 2px 10px rgba(0, 0, 0, .34);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.library-panel, .utility-panel) {
  box-shadow: inset -1px 0 rgba(213, 201, 171, .16), inset 0 0 0 1px rgba(188, 151, 69, .12);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll {
  border-color: #8c6f35;
  box-shadow: inset 0 0 0 1px rgba(224, 213, 188, .34), inset 0 0 0 3px rgba(92, 62, 25, .48), 0 0 0 1px #0b0709;
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .visual-style-swatch-jerusalem {
  color: #ead078;
  background-color: #1b1418;
  background-image: linear-gradient(rgba(18, 10, 15, .16), rgba(19, 11, 17, .26)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  background-blend-mode: normal, normal;
  border-color: #b5974f;
  box-shadow: inset 0 0 0 1px rgba(225, 215, 188, .22), 0 1px 3px rgba(0, 0, 0, .36);
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .wordmark-mark {
  color: #ead078;
  border-color: #c6a85e;
  background-color: #1d1619;
  background-image: linear-gradient(rgba(13, 7, 11, .18), rgba(24, 14, 19, .28)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  box-shadow: inset 0 0 0 1px rgba(235, 224, 196, .28), inset 0 0 0 3px rgba(91, 61, 27, .58), 0 2px 7px rgba(0, 0, 0, .38);
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] :is(.wordmark-bible-title, .wordmark-bible-version) {
  color: #e7cc76;
  text-shadow: 0 1px 0 #090608, 0 0 8px rgba(208, 173, 82, .18);
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .wordmark-copy strong { color: #f2ead7; }
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .wordmark-copy small { color: #c8bda8; }
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .book-link.active {
  color: #f0d77e;
  background: rgba(76, 55, 91, .28);
  box-shadow: inset 3px 0 0 #d0ad51;
}

/* One fixed material canvas keeps textured headers crisp and continuous. */
body[data-visual-style] {
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] {
  background-color: #f4f3ee;
  background-image: linear-gradient(rgba(249, 249, 246, .76), rgba(232, 231, 225, .78)), url("assets/antique-paper.jpg");
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  background-color: #070808;
  background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)), url("assets/materials/cambridge-black-leather-v2.webp");
}
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  background-color: #b99463;
  background-image: linear-gradient(rgba(242, 214, 166, .5), rgba(178, 128, 73, .46)), url("assets/materials/jacobean-wood.jpg");
}
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  background-color: #110705;
  background-image: linear-gradient(rgba(5, 2, 1, .69), rgba(13, 5, 2, .8)), url("assets/materials/jacobean-wood.jpg");
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] {
  background-color: #e9e4d9;
  background-image: linear-gradient(rgba(248, 246, 239, .28), rgba(222, 214, 197, .34)), url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  background-color: #181316;
  background-image: linear-gradient(rgba(15, 10, 14, .16), rgba(18, 12, 16, .24)), url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .app-header {
  background-color: rgba(247, 247, 243, .68);
  background-image: linear-gradient(rgba(255, 255, 252, .24), rgba(224, 224, 218, .28));
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  background-color: rgba(8, 8, 7, .58);
  background-image: linear-gradient(rgba(0, 0, 0, .18), rgba(10, 10, 9, .26));
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .app-header {
  background-color: rgba(190, 147, 91, .42);
  background-image: linear-gradient(rgba(249, 225, 184, .24), rgba(117, 71, 32, .2));
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  background-color: rgba(12, 5, 3, .58);
  background-image: linear-gradient(rgba(1, 0, 0, .18), rgba(12, 4, 2, .3));
}
body[data-visual-style="jerusalem"][data-chrome-mode="light"] .app-header {
  background-color: rgba(239, 235, 225, .64);
  background-image: linear-gradient(rgba(255, 254, 249, .24), rgba(213, 203, 183, .25));
}
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .app-header {
  background-color: rgba(24, 18, 20, .56);
  background-image: linear-gradient(rgba(12, 8, 11, .18), rgba(30, 20, 23, .28));
}
body[data-visual-style] .header-action-tabs {
  background-image: linear-gradient(rgba(255, 255, 255, .04), rgba(0, 0, 0, .12));
  backdrop-filter: saturate(.9);
}

@media (max-width: 900px) {
  body[data-visual-style] {
    background-attachment: scroll;
    background-size: auto max(100%, 900px);
  }
}

/* Brightness and paper stay immediate; the three presets share one balanced row. */
#display-view .display-style-option {
  grid-column: 1 / -1;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}
#display-view .display-appearance-option,
#display-view .display-paper-option { grid-column: 1 / -1; }
#display-view .display-paper-option .paper-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#display-view .display-style-option .visual-style-label { margin: 0 0 7px; }
#display-view .display-style-option .visual-style-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
#display-view .display-style-option .visual-style-control button {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 32px auto;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-height: 76px;
  padding: 6px 4px;
  text-align: center;
}
#display-view .display-style-option .visual-style-control button > .visual-style-swatch {
  width: 32px;
  height: 32px;
}
#display-view .display-style-option .visual-style-swatch svg {
  width: 22px;
  height: 22px;
}
#display-view .display-style-option .visual-style-copy {
  width: 100%;
  gap: 2px;
}
#display-view .display-style-option .visual-style-copy strong { font-size: 10px; }
#display-view .display-style-option .visual-style-copy small {
  display: -webkit-box;
  min-height: 20px;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#display-view .display-style-option .preset-status { margin-top: 5px; }

@media (max-width: 900px) {
  #display-view .display-style-option .visual-style-control button { min-height: 72px; }
}

/* Temple foundation stones: tiny accents, never decoration on the Scripture leaf. */
body[data-visual-style="jerusalem"] :is(.panel-heading, .utility-heading) { position: relative; }
body[data-visual-style="jerusalem"] :is(.panel-heading, .utility-heading)::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 1px;
  left: 12px;
  height: 7px;
  pointer-events: none;
  opacity: .66;
  background:
    radial-gradient(circle at 4% 50%, #f5dda2 0 .6px, #9c3c4d .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 12% 50%, #f5dda2 0 .6px, #b46d28 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 20% 50%, #f5dda2 0 .6px, #a79735 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 28% 50%, #f5dda2 0 .6px, #3e7452 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 36% 50%, #f5dda2 0 .6px, #397294 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 44% 50%, #f5dda2 0 .6px, #59518b .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 56% 50%, #f5dda2 0 .6px, #814466 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 64% 50%, #f5dda2 0 .6px, #8a6038 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 72% 50%, #f5dda2 0 .6px, #a34738 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 80% 50%, #f5dda2 0 .6px, #497b72 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 88% 50%, #f5dda2 0 .6px, #596b9b .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px),
    radial-gradient(circle at 96% 50%, #f5dda2 0 .6px, #9a6d39 .8px 2px, rgba(18,9,10,.6) 2.1px 2.5px, transparent 2.7px);
}
body[data-visual-style="jerusalem"] .panel-heading h2 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 500;
}
body[data-visual-style="jerusalem"] .book-link { --book-gem: #9c3c4d; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 2) { --book-gem: #b46d28; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 3) { --book-gem: #a79735; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 4) { --book-gem: #3e7452; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 5) { --book-gem: #397294; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 6) { --book-gem: #59518b; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 7) { --book-gem: #814466; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 8) { --book-gem: #8a6038; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 9) { --book-gem: #a34738; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 10) { --book-gem: #497b72; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 11) { --book-gem: #596b9b; }
body[data-visual-style="jerusalem"] .book-link:nth-child(12n + 12) { --book-gem: #9a6d39; }
body[data-visual-style="jerusalem"] .book-link > span:nth-child(2) {
  font-family: "Gentium Book Plus", "Gentium Book", Georgia, serif;
  font-size: 14px;
  font-weight: 600;
}
body[data-visual-style="jerusalem"] .book-number {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
body[data-visual-style="jerusalem"] .book-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--book-gem) 72%, #f4dfaa);
  border-radius: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--book-gem) 58%, white), var(--book-gem) 52%, color-mix(in srgb, var(--book-gem) 66%, black));
  box-shadow: inset 1px 1px rgba(255,255,255,.3), 0 0 3px color-mix(in srgb, var(--book-gem) 46%, transparent);
  transform: rotate(45deg);
}
body[data-visual-style="jerusalem"] .book-chapters {
  min-width: 22px;
  padding: 1px 3px;
  color: color-mix(in srgb, var(--muted) 78%, var(--book-gem));
  border: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--panel-soft) 46%, transparent);
  font-family: "Cinzel", Georgia, serif;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body[data-visual-style="jerusalem"] .book-link.active .book-number::before {
  box-shadow: inset 1px 1px rgba(255,255,255,.42), 0 0 0 1px rgba(231,204,118,.32), 0 0 6px var(--book-gem);
}
body[data-visual-style="jerusalem"] .testament-tabs button {
  font-family: "Cinzel", Georgia, serif;
  font-size: 10px;
  font-weight: 600;
}
body[data-visual-style="jerusalem"] #display-view :is(.display-appearance-option h3, .display-paper-option h3, .display-style-option .visual-style-label) {
  display: flex;
  align-items: center;
  gap: 7px;
}
body[data-visual-style="jerusalem"] #display-view :is(.display-appearance-option h3, .display-paper-option h3, .display-style-option .visual-style-label)::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: 1px solid rgba(239,216,154,.7);
  border-radius: 1px;
  background: linear-gradient(135deg, #df8c98, #8f2f3d 58%, #3d1118);
  box-shadow: inset 1px 1px rgba(255,255,255,.3), 0 0 3px rgba(143,47,61,.35);
  transform: rotate(45deg);
}
body[data-visual-style="jerusalem"] #display-view .display-paper-option h3::before {
  background: linear-gradient(135deg, #81b69a, #3d7151 58%, #173727);
}
body[data-visual-style="jerusalem"] #display-view .display-style-option .visual-style-label::before {
  background: linear-gradient(135deg, #84b5d0, #3d7392 58%, #18384d);
}

/* Canonical tool controls: the same states across Search, Study, Listen, and Display. */
body[data-visual-style] .utility-panel :is(.tool-tabs, .audio-source-control) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--style-neutral-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--panel-soft) 76%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  overflow: visible;
}
body[data-visual-style] .utility-panel .tool-tabs { margin-bottom: 18px; }
body[data-visual-style] .utility-panel :is(.tool-tabs, .audio-source-control) button {
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 6px 9px;
  color: var(--style-neutral-ink);
  border: 1px solid var(--style-neutral-border);
  border-radius: 3px;
  background: var(--style-neutral-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 1px 2px rgba(28,24,17,.08);
  font-size: 11px;
  font-weight: 800;
}
body[data-visual-style] .utility-panel :is(.tool-tabs, .audio-source-control) button:hover:not(:disabled):not(.active) {
  color: var(--style-gold-deep);
  border-color: var(--style-gold-mid);
  background: var(--style-soft);
}
body[data-visual-style]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .utility-panel :is(.tool-tabs, .audio-source-control) button:hover:not(:disabled):not(.active) {
  color: var(--style-gold-bright);
}
body[data-visual-style] .utility-panel :is(.tool-tabs, .audio-source-control) button.active {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}

body[data-visual-style] .utility-panel :is(
  .reference-depth button,
  .audio-scope-actions button,
  .audio-repeat-toggle,
  .audio-custom-summary,
  .audio-custom-actions button,
  .audio-custom-footer button:not(.primary),
  .word-help-toggle-all,
  .reference-toggle-all,
  .load-more-references,
  .study-return,
  .word-help-expand,
  .reference-expand,
  .reference-open
) {
  color: var(--style-neutral-ink);
  border-color: var(--style-neutral-border);
  background: var(--style-neutral-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 1px 2px rgba(28,24,17,.08);
}
body[data-visual-style] .utility-panel :is(
  .reference-depth button,
  .audio-scope-actions button,
  .audio-repeat-toggle,
  .audio-custom-summary,
  .audio-custom-actions button,
  .audio-custom-footer button:not(.primary),
  .word-help-toggle-all,
  .reference-toggle-all,
  .load-more-references,
  .study-return,
  .word-help-expand,
  .reference-expand,
  .reference-open
):hover:not(:disabled) {
  color: var(--style-gold-deep);
  border-color: var(--style-gold-mid);
  background: var(--style-soft);
}
body[data-visual-style]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .utility-panel :is(
  .reference-depth button,
  .audio-scope-actions button,
  .audio-repeat-toggle,
  .audio-custom-summary,
  .audio-custom-actions button,
  .audio-custom-footer button:not(.primary),
  .word-help-toggle-all,
  .reference-toggle-all,
  .load-more-references,
  .study-return,
  .word-help-expand,
  .reference-expand,
  .reference-open
):hover:not(:disabled) {
  color: var(--style-gold-bright);
}
body[data-visual-style] .utility-panel :is(
  .reference-depth button.active,
  .audio-scope-actions button.active,
  .audio-repeat-toggle.active,
  .audio-repeat-toggle[aria-pressed="true"],
  .word-help-toggle-all[aria-expanded="true"],
  .reference-toggle-all[aria-expanded="true"]
) {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}

body[data-visual-style] .utility-panel :is(
  .search-submit,
  .search-field button,
  .audio-primary-play,
  .audio-custom-footer button.primary
) {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}
body[data-visual-style] .utility-panel :is(
  .search-submit,
  .search-field button,
  .audio-primary-play,
  .audio-custom-footer button.primary
):hover:not(:disabled) {
  color: var(--style-active-ink);
  border-color: var(--style-gold-deep);
  background: var(--style-active-bg);
  filter: brightness(1.04);
}
body[data-visual-style] .utility-panel .audio-primary-play[data-playback-state="playing"] {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: inset 0 2px 7px rgba(46,31,7,.46), inset 0 -1px 0 rgba(255,246,190,.28);
  filter: saturate(.88) brightness(.88);
}

body[data-visual-style] .utility-heading .icon-button {
  color: var(--style-neutral-ink);
  border: 1px solid var(--style-neutral-border);
  background: var(--style-neutral-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 1px 2px rgba(28,24,17,.1);
}
body[data-visual-style] .utility-heading .icon-button:hover {
  color: var(--style-gold-deep);
  border-color: var(--style-gold-mid);
  background: var(--style-soft);
}
body[data-visual-style]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .utility-heading .icon-button:hover {
  color: var(--style-gold-bright);
}

body[data-visual-style] .utility-panel :is(button, [role="button"]):focus-visible {
  outline: 2px solid var(--style-gold-bright);
  outline-offset: 2px;
}

/* Cambridge Ink makes its silver as intentional as its gold. */
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(
  .header-action-tabs,
  .select-control,
  .reader-toolbar .mode-control button:not(.active),
  .reader-toolbar .passage-actions .icon-button,
  .testament-tabs button:not(.active),
  .utility-heading .icon-button,
  #display-view .theme-control button:not(.active),
  #display-view .visual-style-control button:not(.active),
  #display-view .edition-control button:not(.active),
  #display-view .type-choice:not(.active),
  #display-view .layout-control button:not(.active),
  #display-view .column-control button:not(.active),
  #display-view .spread-control button:not(.active),
  #display-view .mode-control button:not(.active)
) {
  color: var(--style-neutral-ink);
  border-color: var(--style-neutral-border);
  background: var(--style-neutral-bg);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(57,62,65,.36), 0 1px 2px rgba(38,41,42,.2), 0 0 0 1px rgba(255,255,255,.2);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(
  .reader-toolbar .mode-control button.active,
  .testament-tabs button.active
) {
  color: var(--style-active-ink);
  border-color: var(--style-active-border);
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .utility-panel :is(
  .tool-tabs button:not(.active),
  .audio-source-control button:not(.active),
  .reference-depth button:not(.active),
  .audio-scope-actions button:not(.active),
  .audio-repeat-toggle:not(.active),
  .audio-custom-summary,
  .audio-custom-actions button,
  .audio-custom-footer button:not(.primary),
  .word-help-toggle-all:not([aria-expanded="true"]),
  .reference-toggle-all:not([aria-expanded="true"]),
  .load-more-references,
  .study-return,
  .word-help-expand,
  .reference-expand,
  .reference-open
) {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(57,62,65,.38), 0 1px 3px rgba(38,41,42,.22), 0 0 0 1px rgba(255,255,255,.22);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(
  .header-action-tabs .icon-button,
  .reader-toolbar .mode-control button:not(.active),
  .reader-toolbar .passage-actions .icon-button,
  .testament-tabs button:not(.active),
  .utility-panel .tool-tabs button:not(.active),
  .utility-panel .audio-source-control button:not(.active),
  .utility-heading .icon-button
):hover:not(:disabled) {
  color: #17191a;
  border-color: #6d7376;
  background: linear-gradient(112deg, rgba(255,255,255,.92) 0 23%, transparent 34% 60%, rgba(255,255,255,.7) 72% 85%, transparent 94%), linear-gradient(180deg, #fff 0%, #f7f8f8 17%, #c4c8ca 46%, #fff 70%, #b2b6b8 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(48,53,56,.38), 0 2px 5px rgba(38,41,42,.28);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-tabs .icon-button:not(.active):not([aria-pressed="true"]) {
  color: #34383a;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(176,180,182,.28) 52%, rgba(255,255,255,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(70,75,78,.18);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-indicator {
  background: var(--style-active-bg);
  box-shadow: var(--style-active-shadow);
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-tabs .icon-button.active,
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-tabs .icon-button.active:hover,
body[data-visual-style="illuminated"][data-chrome-mode="light"] .header-action-tabs .theatre-toggle[aria-pressed="true"] {
  color: var(--style-active-ink);
  background: transparent;
  box-shadow: none;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.book-list, .reader-scroll, .utility-panel) {
  scrollbar-color: #aeb2b4 #ecece8;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.book-list, .reader-scroll, .utility-panel)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.book-list, .reader-scroll, .utility-panel)::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #d8d9d6, #f7f7f4 52%, #cccecb);
  border-left: 1px solid #b8bbb9;
}
body[data-visual-style="illuminated"][data-chrome-mode="light"] :is(.book-list, .reader-scroll, .utility-panel)::-webkit-scrollbar-thumb {
  border: 2px solid #e7e8e5;
  border-radius: 5px;
  background: linear-gradient(90deg, #858a8d 0%, #f9faf9 38%, #c1c5c7 62%, #747a7d 100%);
  box-shadow: inset 0 0 0 1px rgba(61,66,69,.24);
}

/* Six complete button materials. Components consume these tokens without inventing their own finish. */
body[data-visual-style][data-chrome-mode] {
  --button-radius: 4px;
  --button-focus: #d0ab47;
  --button-water-shadow: inset 0 0 0 1px transparent;
  --style-neutral-bg: var(--button-neutral-bg);
  --style-neutral-border: var(--button-neutral-border);
  --style-neutral-ink: var(--button-neutral-ink);
  --style-active-bg: var(--button-active-bg);
  --style-active-border: var(--button-active-border);
  --style-active-ink: var(--button-active-ink);
  --style-active-shadow: var(--button-active-shadow);
  --style-soft: var(--button-neutral-hover-bg);
}

/* Cambridge Ink: contemporary polished silver and fresh gold. */
body[data-visual-style="illuminated"][data-theme-tone="light"] {
  --button-neutral-bg: linear-gradient(112deg, rgba(255,255,255,.74) 0 17%, transparent 30% 63%, rgba(255,255,255,.4) 74% 82%, transparent 91%), linear-gradient(180deg, #fff 0%, #eef0f1 18%, #b5b9bc 48%, #f5f6f6 72%, #a4a8aa 100%);
  --button-neutral-hover-bg: linear-gradient(112deg, rgba(255,255,255,.94) 0 22%, transparent 34% 59%, rgba(255,255,255,.74) 72% 85%, transparent 94%), linear-gradient(180deg, #fff 0%, #f8f9f9 17%, #c5c9cb 46%, #fff 70%, #b2b6b8 100%);
  --button-neutral-border: #858a8d;
  --button-neutral-ink: #202326;
  --button-neutral-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(57,62,65,.36), 0 1px 3px rgba(38,41,42,.2);
  --button-active-bg: linear-gradient(108deg, rgba(255,255,255,.64) 0 15%, transparent 29% 61%, rgba(255,249,201,.46) 73% 83%, transparent 92%), linear-gradient(180deg, #fff5b6 0%, #e8c95f 28%, #a57619 56%, #d8b345 76%, #f5df86 100%);
  --button-active-hover-bg: linear-gradient(108deg, rgba(255,255,255,.82) 0 19%, transparent 32% 58%, rgba(255,250,210,.62) 70% 86%, transparent 95%), linear-gradient(180deg, #fff9c8 0%, #f0d66f 28%, #b2811e 56%, #e4c453 76%, #ffec99 100%);
  --button-active-border: #7c5a15;
  --button-active-ink: #211b0d;
  --button-active-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(77,50,5,.42), 0 2px 5px rgba(79,58,15,.28);
  --button-pressed-bg: linear-gradient(180deg, #a57419 0%, #d2ac3c 46%, #eed474 100%);
  --button-tray-bg: linear-gradient(180deg, #fafbfb 0%, #c2c5c7 52%, #eef0f0 100%);
  --button-tray-border: #858a8d;
}

/* Cambridge Leather: black cover leather and crisp polished gold. */
body[data-visual-style="illuminated"][data-theme-tone="dark"] {
  --button-neutral-bg: linear-gradient(110deg, rgba(255,255,255,.09) 0 13%, transparent 27% 67%, rgba(255,255,255,.045) 78% 86%, transparent 94%), linear-gradient(180deg, #343634 0%, #171817 56%, #272826 100%);
  --button-neutral-hover-bg: linear-gradient(110deg, rgba(255,255,255,.14) 0 17%, transparent 30% 63%, rgba(255,255,255,.07) 75% 88%, transparent 95%), linear-gradient(180deg, #41433f 0%, #20211f 56%, #30322f 100%);
  --button-neutral-border: #686b67;
  --button-neutral-ink: #e2e1d9;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.42);
  --button-active-bg: linear-gradient(108deg, rgba(255,255,255,.5) 0 14%, transparent 28% 62%, rgba(255,245,182,.34) 73% 84%, transparent 93%), linear-gradient(180deg, #f4dc83 0%, #c59a2d 30%, #75500c 57%, #ba8d22 77%, #e7c760 100%);
  --button-active-hover-bg: linear-gradient(108deg, rgba(255,255,255,.68) 0 18%, transparent 31% 59%, rgba(255,248,196,.46) 71% 86%, transparent 95%), linear-gradient(180deg, #ffe996 0%, #d4aa38 30%, #865d10 57%, #c99b2b 77%, #f1d66e 100%);
  --button-active-border: #dfc267;
  --button-active-ink: #1f190c;
  --button-active-shadow: inset 0 1px 0 rgba(255,251,213,.65), inset 0 -1px 0 rgba(45,28,2,.72), 0 2px 6px rgba(0,0,0,.52);
  --button-pressed-bg: linear-gradient(180deg, #75500c 0%, #ac8120 48%, #d4b34d 100%);
  --button-tray-bg: linear-gradient(180deg, rgba(49,51,48,.94), rgba(14,15,14,.96));
  --button-tray-border: #756b4d;
}

/* Jacobean Plaster: warm oak recesses and worn old-gold plates. */
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --button-radius: 3px;
  --button-focus: #9e6d25;
  --button-neutral-bg: radial-gradient(circle at 16% 28%, rgba(239,196,117,.12) 0 1px, transparent 3px), radial-gradient(circle at 82% 72%, rgba(22,9,4,.18) 0 1px, transparent 4px), linear-gradient(180deg, #795035 0%, #3d2519 57%, #613b25 100%);
  --button-neutral-hover-bg: radial-gradient(circle at 18% 26%, rgba(255,214,132,.18) 0 1px, transparent 3px), radial-gradient(circle at 78% 70%, rgba(22,9,4,.14) 0 1px, transparent 4px), linear-gradient(180deg, #8b5c39 0%, #4a2c1c 57%, #70442a 100%);
  --button-neutral-border: #7a5638;
  --button-neutral-ink: #f3e2bd;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,224,164,.18), inset 0 0 0 1px rgba(37,17,8,.42), inset 0 -2px 0 rgba(28,12,5,.38), 0 1px 3px rgba(52,31,16,.28);
  --button-active-bg: radial-gradient(circle at 17% 29%, rgba(68,84,43,.2) 0 1px, transparent 4px), radial-gradient(circle at 79% 68%, rgba(91,48,16,.18) 0 2px, transparent 5px), linear-gradient(180deg, #e1c47b 0%, #967130 48%, #c29a4d 76%, #b1873f 100%);
  --button-active-hover-bg: radial-gradient(circle at 17% 29%, rgba(68,84,43,.17) 0 1px, transparent 4px), radial-gradient(circle at 79% 68%, rgba(91,48,16,.14) 0 2px, transparent 5px), linear-gradient(180deg, #ead187 0%, #a27c37 48%, #cca759 76%, #bc9348 100%);
  --button-active-border: #6d4e1e;
  --button-active-ink: #281b0e;
  --button-active-shadow: inset 0 1px 0 rgba(255,239,183,.5), inset 0 0 0 1px rgba(80,51,16,.46), inset 0 -2px 0 rgba(80,48,13,.36), 0 2px 4px rgba(59,39,18,.3);
  --button-pressed-bg: radial-gradient(circle at 23% 62%, rgba(62,78,39,.18) 0 2px, transparent 5px), linear-gradient(180deg, #8b6629 0%, #b98e43 58%, #d4b56b 100%);
  --button-tray-bg: linear-gradient(180deg, #6f482e 0%, #3a2418 56%, #5c3925 100%);
  --button-tray-border: #765239;
}

/* Jacobean Velvet: blackened oak and crimson recesses with the same worn gold. */
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --button-radius: 3px;
  --button-focus: #d2ad62;
  --button-neutral-bg: radial-gradient(circle at 18% 26%, rgba(214,155,95,.07) 0 1px, transparent 4px), radial-gradient(circle at 78% 70%, rgba(104,22,34,.13) 0 2px, transparent 5px), linear-gradient(180deg, #4b2b24 0%, #21130f 55%, #391d19 100%);
  --button-neutral-hover-bg: radial-gradient(circle at 18% 26%, rgba(233,177,108,.11) 0 1px, transparent 4px), radial-gradient(circle at 78% 70%, rgba(126,28,42,.17) 0 2px, transparent 5px), linear-gradient(180deg, #5c342b 0%, #2b1713 55%, #48231f 100%);
  --button-neutral-border: #795448;
  --button-neutral-ink: #ead8b4;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,220,158,.11), inset 0 0 0 1px rgba(20,8,5,.64), inset 0 -2px 0 rgba(12,4,3,.55), 0 1px 4px rgba(0,0,0,.42);
  --button-active-bg: radial-gradient(circle at 17% 29%, rgba(65,84,41,.22) 0 1px, transparent 4px), radial-gradient(circle at 79% 68%, rgba(91,45,14,.22) 0 2px, transparent 5px), linear-gradient(180deg, #d8bc72 0%, #876326 49%, #b78e42 76%, #a77d35 100%);
  --button-active-hover-bg: radial-gradient(circle at 17% 29%, rgba(65,84,41,.18) 0 1px, transparent 4px), radial-gradient(circle at 79% 68%, rgba(91,45,14,.18) 0 2px, transparent 5px), linear-gradient(180deg, #e6cc80 0%, #98702d 49%, #c49b4d 76%, #b58a40 100%);
  --button-active-border: #d0ab5a;
  --button-active-ink: #24170b;
  --button-active-shadow: inset 0 1px 0 rgba(255,238,177,.44), inset 0 0 0 1px rgba(67,42,11,.58), inset 0 -2px 0 rgba(55,31,8,.5), 0 2px 5px rgba(0,0,0,.48);
  --button-pressed-bg: radial-gradient(circle at 23% 62%, rgba(58,78,38,.2) 0 2px, transparent 5px), linear-gradient(180deg, #79571f 0%, #a87c34 58%, #c5a257 100%);
  --button-tray-bg: linear-gradient(180deg, #3d201c 0%, #180d0b 57%, #2b1513 100%);
  --button-tray-border: #7e5849;
}

/* Temple Limestone: pale stone and ancient struck gold with a water-patina glint. */
body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --button-radius: 2px;
  --button-focus: #477f87;
  --button-neutral-bg: radial-gradient(circle at 18% 24%, rgba(92,79,62,.1) 0 1px, transparent 3px), radial-gradient(circle at 80% 72%, rgba(255,255,255,.42) 0 1px, transparent 4px), linear-gradient(180deg, #f4efe4 0%, #c9bda8 57%, #e1d8c6 100%);
  --button-neutral-hover-bg: radial-gradient(circle at 18% 24%, rgba(92,79,62,.08) 0 1px, transparent 3px), radial-gradient(circle at 80% 72%, rgba(255,255,255,.56) 0 1px, transparent 4px), linear-gradient(180deg, #fffaf0 0%, #d5c9b4 57%, #ebe2cf 100%);
  --button-neutral-border: #9b8e78;
  --button-neutral-ink: #30291f;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(92,76,55,.18), inset 0 -2px 0 rgba(96,79,56,.16), 0 1px 3px rgba(61,52,40,.2);
  --button-active-bg: radial-gradient(ellipse at 35% 18%, rgba(255,239,170,.72) 0%, transparent 33%), radial-gradient(circle at 81% 73%, rgba(57,123,126,.2) 0 1px, transparent 5px), radial-gradient(circle at 18% 66%, rgba(79,55,18,.16) 0 2px, transparent 5px), linear-gradient(180deg, #d8ba63 0%, #805c1e 57%, #b98f38 100%);
  --button-active-hover-bg: radial-gradient(ellipse at 35% 18%, rgba(255,246,187,.82) 0%, transparent 35%), radial-gradient(circle at 81% 73%, rgba(57,123,126,.18) 0 1px, transparent 5px), radial-gradient(circle at 18% 66%, rgba(79,55,18,.13) 0 2px, transparent 5px), linear-gradient(180deg, #e2c870 0%, #916a25 57%, #c59d45 100%);
  --button-active-border: #654718;
  --button-active-ink: #24180b;
  --button-active-shadow: inset 0 1px 0 rgba(255,241,174,.54), inset 0 0 0 1px rgba(72,47,13,.5), inset 0 -2px 0 rgba(71,46,13,.4), 0 2px 4px rgba(63,45,18,.3), inset 0 0 0 2px rgba(73,139,144,.12);
  --button-pressed-bg: radial-gradient(circle at 72% 30%, rgba(56,119,122,.18) 0 2px, transparent 5px), linear-gradient(180deg, #79551a 0%, #a97e31 55%, #ceb05b 100%);
  --button-tray-bg: linear-gradient(180deg, #e7dfcf 0%, #b9ac96 57%, #d5cbb9 100%);
  --button-tray-border: #91826b;
  --button-water-shadow: inset 0 -1px 0 rgba(64,131,139,.32);
}

/* Temple Bronze: blackened bronze and the same ancient struck gold. */
body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --button-radius: 2px;
  --button-focus: #78a8ad;
  --button-neutral-bg: radial-gradient(circle at 18% 24%, rgba(188,143,77,.08) 0 1px, transparent 4px), radial-gradient(circle at 80% 72%, rgba(61,120,118,.11) 0 1px, transparent 5px), linear-gradient(180deg, #42372f 0%, #191613 57%, #2e2823 100%);
  --button-neutral-hover-bg: radial-gradient(circle at 18% 24%, rgba(206,158,86,.12) 0 1px, transparent 4px), radial-gradient(circle at 80% 72%, rgba(69,139,136,.14) 0 1px, transparent 5px), linear-gradient(180deg, #504238 0%, #211c18 57%, #383029 100%);
  --button-neutral-border: #766654;
  --button-neutral-ink: #e6dcc8;
  --button-neutral-shadow: inset 0 1px 0 rgba(232,198,139,.11), inset 0 0 0 1px rgba(11,9,7,.68), inset 0 -2px 0 rgba(8,7,6,.62), 0 1px 4px rgba(0,0,0,.48);
  --button-active-bg: radial-gradient(ellipse at 35% 18%, rgba(255,233,152,.58) 0%, transparent 33%), radial-gradient(circle at 81% 73%, rgba(64,143,144,.24) 0 1px, transparent 5px), radial-gradient(circle at 18% 66%, rgba(72,43,12,.22) 0 2px, transparent 5px), linear-gradient(180deg, #d4b257 0%, #765118 57%, #ad8130 100%);
  --button-active-hover-bg: radial-gradient(ellipse at 35% 18%, rgba(255,242,171,.68) 0%, transparent 35%), radial-gradient(circle at 81% 73%, rgba(64,143,144,.21) 0 1px, transparent 5px), radial-gradient(circle at 18% 66%, rgba(72,43,12,.18) 0 2px, transparent 5px), linear-gradient(180deg, #e1c367 0%, #865e20 57%, #bd903b 100%);
  --button-active-border: #d6b661;
  --button-active-ink: #211609;
  --button-active-shadow: inset 0 1px 0 rgba(255,238,166,.46), inset 0 0 0 1px rgba(54,34,9,.64), inset 0 -2px 0 rgba(44,27,7,.56), 0 2px 5px rgba(0,0,0,.52), inset 0 0 0 2px rgba(71,151,151,.15);
  --button-pressed-bg: radial-gradient(circle at 72% 30%, rgba(62,143,143,.2) 0 2px, transparent 5px), linear-gradient(180deg, #6a4714 0%, #956b27 55%, #bd9849 100%);
  --button-tray-bg: linear-gradient(180deg, #352d27 0%, #14110f 57%, #28221e 100%);
  --button-tray-border: #796952;
  --button-water-shadow: inset 0 -1px 0 rgba(77,155,157,.38);
}

/* One interaction model across every reader control surface. */
body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs,
  .testament-tabs,
  .reader-toolbar .mode-control,
  .utility-panel .tool-tabs,
  .utility-panel .audio-source-control
) {
  border-color: var(--button-tray-border);
  background: var(--button-tray-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.24), 0 1px 3px rgba(0,0,0,.16);
}

body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs button,
  .library-panel .testament-tabs button,
  .reader-toolbar button,
  .utility-panel button,
  .verse-margin-actions button,
  .reference-trail button,
  .theatre-edge-controls button,
  .audio-custom-dialog button,
  .page-turn,
  .global-search .search-submit
) {
  color: var(--button-neutral-ink);
  border-color: var(--button-neutral-border);
  border-radius: var(--button-radius);
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow);
  filter: none;
  transform: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}

body[data-visual-style][data-chrome-mode] :is(
  .select-control,
  .audio-custom-summary
) {
  color: var(--button-neutral-ink);
  border-color: var(--button-neutral-border);
  border-radius: var(--button-radius);
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow);
}
body[data-visual-style][data-chrome-mode] .select-control select { color: inherit; background: transparent; }

body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs button,
  .library-panel .testament-tabs button,
  .reader-toolbar button,
  .utility-panel button,
  .verse-margin-actions button,
  .reference-trail button,
  .theatre-edge-controls button,
  .audio-custom-dialog button,
  .page-turn
):hover:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]),
body[data-visual-style][data-chrome-mode] :is(.select-control, .audio-custom-summary):hover {
  color: var(--button-neutral-ink);
  border-color: color-mix(in srgb, var(--button-neutral-border) 72%, var(--button-focus));
  background: var(--button-neutral-hover-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow), 0 0 0 1px color-mix(in srgb, var(--button-focus) 24%, transparent);
  filter: brightness(1.025);
  transform: none;
}

body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs button.active,
  .header-action-tabs button[aria-pressed="true"],
  .library-panel .testament-tabs button.active,
  .library-panel .testament-tabs button[aria-selected="true"],
  .reader-toolbar button.active,
  .reader-toolbar button[aria-pressed="true"],
  .utility-panel button.active,
  .utility-panel button[aria-pressed="true"],
  .utility-panel button[aria-selected="true"],
  .utility-panel button[aria-expanded="true"],
  .verse-margin-actions button.active,
  .verse-margin-actions button[aria-pressed="true"],
  .reference-trail button.active,
  .theatre-edge-controls button.active
) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
  filter: none;
}
body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs button.active,
  .header-action-tabs button[aria-pressed="true"],
  .library-panel .testament-tabs button.active,
  .reader-toolbar button.active,
  .reader-toolbar button[aria-pressed="true"],
  .utility-panel button.active,
  .utility-panel button[aria-pressed="true"],
  .utility-panel button[aria-selected="true"],
  .verse-margin-actions button.active,
  .verse-margin-actions button[aria-pressed="true"]
):hover:not(:disabled) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-active-hover-bg);
  box-shadow: var(--button-active-shadow);
  filter: brightness(1.02);
  transform: none;
}

body[data-visual-style][data-chrome-mode] :is(
  .global-search .search-submit,
  .utility-panel .search-field button,
  .utility-panel .audio-primary-play,
  .utility-panel .audio-custom-footer button.primary,
  #verse-action-play
) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}
body[data-visual-style][data-chrome-mode] :is(
  .global-search .search-submit,
  .utility-panel .search-field button,
  .utility-panel .audio-primary-play,
  .utility-panel .audio-custom-footer button.primary,
  #verse-action-play
):hover:not(:disabled) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-active-hover-bg);
  box-shadow: var(--button-active-shadow);
  filter: brightness(1.02);
}
body[data-visual-style][data-chrome-mode] :is(
  .utility-panel .audio-primary-play[data-playback-state="playing"],
  #verse-action-play[aria-pressed="true"]
) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-pressed-bg);
  box-shadow: inset 0 3px 7px rgba(31,20,4,.46), inset 0 0 0 1px rgba(255,242,174,.2);
  filter: saturate(.92) brightness(.9);
}

body[data-visual-style][data-chrome-mode] .header-action-indicator {
  border: 1px solid var(--button-active-border);
  border-radius: var(--button-radius);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}
body[data-visual-style][data-chrome-mode] .header-action-tabs .icon-button.active,
body[data-visual-style][data-chrome-mode] .header-action-tabs .icon-button.active:hover,
body[data-visual-style][data-chrome-mode] .header-action-tabs .theatre-toggle[aria-pressed="true"] {
  color: var(--button-active-ink);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-visual-style][data-chrome-mode] :is(
  .header-action-tabs button,
  .library-panel .testament-tabs button,
  .reader-toolbar button,
  .utility-panel button,
  .verse-margin-actions button,
  .reference-trail button,
  .theatre-edge-controls button,
  .audio-custom-dialog button,
  .page-turn,
  .global-search .search-submit,
  .select-control
):focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 2px;
}
body[data-visual-style][data-chrome-mode] button:disabled {
  opacity: .48;
  filter: saturate(.5);
  box-shadow: none;
}

/* Theme cards retain their identifying artwork while obeying the same button material. */
body[data-visual-style][data-chrome-mode] #display-view .visual-style-control button > .visual-style-swatch {
  border-color: color-mix(in srgb, var(--button-neutral-border) 76%, var(--button-focus));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 1px 2px rgba(0,0,0,.28);
}
body[data-visual-style][data-chrome-mode] #display-view .visual-style-control button.active > .visual-style-swatch {
  border-color: var(--button-active-border);
  box-shadow: inset 0 1px 0 rgba(255,247,195,.34), 0 1px 3px rgba(0,0,0,.34);
}

/* Configure is the densest control surface, so keep its state hierarchy explicit. */
body[data-visual-style][data-chrome-mode] #display-view :is(
  .theme-control button,
  .visual-style-control button,
  .edition-control button,
  .type-choice,
  .paper-swatch,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
) {
  color: var(--button-neutral-ink);
  border-color: var(--button-neutral-border);
  border-radius: var(--button-radius);
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow);
  filter: none;
}
body[data-visual-style][data-chrome-mode] #display-view :is(
  .theme-control button,
  .visual-style-control button,
  .edition-control button,
  .type-choice,
  .paper-swatch,
  .layout-control button,
  .column-control button,
  .spread-control button,
  .mode-control button
):hover:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  color: var(--button-neutral-ink);
  border-color: color-mix(in srgb, var(--button-neutral-border) 72%, var(--button-focus));
  background: var(--button-neutral-hover-bg);
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow), 0 0 0 1px color-mix(in srgb, var(--button-focus) 24%, transparent);
}
body[data-visual-style][data-chrome-mode] #display-view :is(
  .theme-control button.active,
  .visual-style-control button.active,
  .edition-control button.active,
  .type-choice.active,
  .paper-swatch.active,
  .layout-control button.active,
  .column-control button.active,
  .spread-control button.active,
  .mode-control button.active,
  button[aria-pressed="true"],
  button[aria-selected="true"]
) {
  color: var(--button-active-ink);
  border-color: var(--button-active-border);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
  filter: none;
}
body[data-visual-style][data-chrome-mode] #display-view :is(
  .edition-control button.active small,
  .type-choice.active small,
  .visual-style-control button.active small
) {
  color: color-mix(in srgb, var(--button-active-ink) 76%, transparent);
}

/* One continuous material canvas. Textures scale from viewport height instead of
   viewport width, preserving natural grain on ultrawide monitors. */
body[data-visual-style][data-chrome-mode] {
  --window-material-color: var(--chrome);
  --window-material-image: none;
  --window-material-glow: linear-gradient(transparent, transparent);
  --window-material-overlay: linear-gradient(transparent, transparent);
  --window-panel-tint: rgba(255, 255, 255, .62);
  --window-header-tint: rgba(255, 255, 255, .48);
  --window-toolbar-tint: rgba(255, 255, 255, .42);
  --window-reader-tint: rgba(255, 255, 255, .08);
  background-color: var(--window-material-color);
  background-image: var(--window-material-glow), var(--window-material-overlay), var(--window-material-image);
  background-position: center, center, center top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto clamp(960px, 100dvh, 1536px);
  background-attachment: fixed, fixed, fixed;
}

body[data-visual-style][data-chrome-mode] .app-header,
body[data-visual-style][data-chrome-mode] .library-panel,
body[data-visual-style][data-chrome-mode] .utility-panel,
body[data-visual-style][data-chrome-mode] .reader-toolbar,
body[data-visual-style][data-chrome-mode] .reader-shell,
body[data-visual-style][data-chrome-mode] .reader-scroll {
  background-image: none !important;
  background-position: initial !important;
  background-repeat: initial !important;
  background-size: initial !important;
}
body[data-visual-style][data-chrome-mode] :is(.library-panel, .utility-panel) {
  background-color: var(--window-panel-tint) !important;
  backdrop-filter: saturate(1.02) blur(1.5px);
}
body[data-visual-style][data-chrome-mode] .app-header {
  background-color: var(--window-header-tint) !important;
  backdrop-filter: saturate(1.04) blur(2px);
}
body[data-visual-style][data-chrome-mode] .reader-toolbar {
  background-color: var(--window-toolbar-tint) !important;
  backdrop-filter: saturate(1.03) blur(1.5px);
}
body[data-visual-style][data-chrome-mode] :is(.reader-shell, .reader-scroll) {
  background-color: var(--window-reader-tint) !important;
}

/* Cambridge Ink: a continuous fine white stock behind translucent silver chrome. */
body[data-visual-style="illuminated"][data-chrome-mode="light"] {
  --window-material-color: #e6e5df;
  --window-material-image: url("assets/antique-paper.jpg");
  --window-material-overlay: linear-gradient(rgba(244,244,239,.78), rgba(215,214,207,.78));
  --window-panel-tint: rgba(250,250,247,.74);
  --window-header-tint: rgba(252,252,249,.7);
  --window-toolbar-tint: rgba(244,244,240,.68);
  --window-reader-tint: rgba(198,197,190,.18);
}

/* Cambridge Leather: one uninterrupted black calfskin cover behind every surface. */
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-color: #070808;
  --window-material-image: url("assets/materials/cambridge-black-leather-v2.webp");
  --window-material-glow: radial-gradient(ellipse at 50% 14%, rgba(255,255,255,.025), transparent 44%);
  --window-material-overlay: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.28));
  --window-panel-tint: rgba(5,6,6,.56);
  --window-header-tint: rgba(4,5,5,.52);
  --window-toolbar-tint: rgba(5,6,6,.48);
  --window-reader-tint: rgba(0,0,0,.12);
}

/* Jacobean Plaster: pale oak carried continuously under warm translucent plaster. */
body[data-visual-style="jacobean"][data-chrome-mode="light"] {
  --window-material-color: #8f6e4d;
  --window-material-image: url("assets/materials/jacobean-wood.jpg");
  --window-material-overlay: linear-gradient(rgba(222,201,171,.42), rgba(132,93,58,.24));
  --window-panel-tint: rgba(246,239,226,.76);
  --window-header-tint: rgba(67,36,18,.62);
  --window-toolbar-tint: rgba(67,36,18,.58);
  --window-reader-tint: rgba(81,48,25,.12);
}

/* Jacobean Velvet: dark oak remains continuous; panels carry only a velvet tint. */
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-color: #1c0d08;
  --window-material-image: url("assets/materials/jacobean-wood.jpg");
  --window-material-overlay: linear-gradient(rgba(25,7,4,.56), rgba(9,3,2,.72));
  --window-panel-tint: rgba(61,10,20,.68);
  --window-header-tint: rgba(29,9,7,.58);
  --window-toolbar-tint: rgba(29,9,7,.54);
  --window-reader-tint: rgba(12,4,2,.18);
}

/* Temple Limestone: a single pale stone field with softly glazed working panels. */
body[data-visual-style="jerusalem"][data-chrome-mode="light"] {
  --window-material-color: #d9d4c8;
  --window-material-image: url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
  --window-material-overlay: linear-gradient(rgba(246,244,237,.16), rgba(194,178,150,.12));
  --window-panel-tint: rgba(250,248,241,.72);
  --window-header-tint: rgba(246,244,238,.62);
  --window-toolbar-tint: rgba(238,234,224,.58);
  --window-reader-tint: rgba(157,128,83,.12);
}

/* Temple Bronze: continuous Corinthian bronze with restrained translucent glazing. */
body[data-visual-style="jerusalem"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-color: #171116;
  --window-material-image: url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  --window-material-glow: radial-gradient(ellipse at 50% 4%, rgba(79,128,122,.08), transparent 42%);
  --window-material-overlay: linear-gradient(rgba(12,7,11,.14), rgba(18,9,14,.24));
  --window-panel-tint: rgba(17,17,16,.58);
  --window-header-tint: rgba(14,13,14,.54);
  --window-toolbar-tint: rgba(15,14,14,.5);
  --window-reader-tint: rgba(6,5,6,.15);
}

/* Warm, slightly muted India paper is the Cambridge Leather default. */
body[data-paper="ivory"] {
  --paper: #eee4cf;
  --paper-edge: #c8bda4;
  --paper-texture:
    linear-gradient(rgba(238,228,207,.7), rgba(229,218,195,.7)),
    url("assets/antique-paper.jpg");
  --paper-texture-size: cover, cover;
}
.paper-swatch[data-paper-choice="ivory"] span {
  background-color: #eee4cf;
  background-image: linear-gradient(rgba(238,228,207,.64), rgba(229,218,195,.64)), url("assets/antique-paper.jpg");
}

@media (max-width: 900px) {
  body[data-visual-style][data-chrome-mode] {
    background-attachment: scroll, scroll, scroll;
    background-size: 100% 100%, 100% 100%, auto 960px;
  }
}

/* Continuous book flow: chapters share the remaining page while books start cleanly. */
body[data-reading-mode="book"] .book-flow-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body[data-reading-mode="book"] .book-flow {
  position: relative;
  height: 100%;
  column-count: 1;
  column-gap: 32px;
  column-fill: auto;
  overflow: visible;
  will-change: transform;
}
body[data-reading-mode="book"] .book-opening {
  display: block;
  column-span: all;
  margin: 0 0 1.35em;
  break-after: avoid;
}
body[data-reading-mode="book"] .book-opening-primary {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: var(--book-page-width, 100%);
  margin: 0;
  column-span: none;
}
body[data-reading-mode="book"] .book-opening-primary .book-opening-page {
  width: 100%;
}
body[data-reading-mode="book"] .book-opening-next {
  position: absolute;
  z-index: 2;
  margin: 0;
  column-span: none;
}
body[data-reading-mode="book"] .book-opening-next .book-opening-page {
  width: 100%;
}
body[data-reading-mode="book"] .book-title-column-spacer {
  display: block;
  width: 100%;
  min-height: var(--book-opening-reserve, 0px);
  overflow: hidden;
  visibility: hidden;
  break-inside: avoid-column;
  pointer-events: none;
}
body[data-reading-mode="book"] .book-title-column-spacer-following {
  break-before: column;
}
body[data-reading-mode="book"] .book-opening-page {
  width: min(100%, var(--book-page-width, 100%));
  padding: .25em clamp(12px, 2vw, 28px) 1.05em;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-rule) 82%, transparent);
  text-align: center;
}
body[data-reading-mode="book"] .book-opening-edition {
  display: block;
  margin-bottom: .8em;
  color: var(--reader-accent);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
body[data-reading-mode="book"] .book-title {
  margin: 0;
  color: var(--reader-ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(20px, calc(var(--reader-size) * 1.32), 31px);
  font-weight: 650;
  line-height: 1.12;
  text-align: center;
}
body[data-reading-mode="book"] .book-title-line { display: block; }
body[data-edition="pce"][data-reading-mode="book"] .book-title {
  font-size: clamp(23px, calc(var(--reader-size) * 1.38), 33px);
  font-weight: 500;
  line-height: 1;
}
body[data-edition="pce"][data-reading-mode="book"] .book-title-line:not(.book-title-line-last) {
  color: var(--reader-accent);
  font-size: .58em;
  font-weight: 650;
}
body[data-edition="pce"][data-reading-mode="book"] .book-title-line-last {
  margin-top: .22em;
  font-size: 1.48em;
  font-weight: 500;
}
body[data-edition="pce"][data-reading-mode="book"] .book-title-lines-1 .book-title-line-last {
  margin-top: 0;
  font-size: 1.08em;
}
body[data-edition="pce"][data-reading-mode="book"] .book-title-lines-3 .book-title-line-last,
body[data-edition="pce"][data-reading-mode="book"] .book-title-lines-4 .book-title-line-last {
  font-size: 1.05em;
}
body[data-reading-mode="book"] .printed-chapter-title {
  margin: 0 0 .78em;
  color: var(--reader-ink);
  font-size: clamp(16px, calc(var(--reader-size) * .9), 21px);
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
  break-after: avoid-column;
}
body[data-edition="he1611"][data-reading-mode="book"] :is(.book-title, .printed-chapter-title) {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title {
  font-size: clamp(22px, calc(var(--reader-size) * 1.26), 29px);
  line-height: .98;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-lines-4 .book-title-line-1 {
  font-size: .62em;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-lines-4 .book-title-line-2 {
  margin-top: .2em;
  font-size: 1.34em;
  font-weight: 600;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-lines-4 .book-title-line-3 {
  margin-top: .06em;
  font-size: 1.12em;
  font-weight: 600;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-lines-4 .book-title-line-4 {
  margin-top: .22em;
  font-size: .62em;
  font-weight: 500;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-called {
  font-size: .82em;
  text-transform: lowercase;
}
body[data-edition="he1611"][data-reading-mode="book"] .book-title-called-name {
  font-size: 1.12em;
  text-transform: uppercase;
}
body[data-edition="pce"][data-reading-mode="book"] .printed-chapter-title {
  font-size: clamp(14px, calc(var(--reader-size) * .72), 17px);
  font-weight: 650;
}
body[data-edition="he1611"][data-reading-mode="book"] .printed-chapter-title {
  font-size: clamp(14px, calc(var(--reader-size) * .76), 18px);
}
body[data-reading-mode="book"] .book-flow > .chapter-section,
body[data-reading-mode="book"] .book-flow > .book-boundary > .chapter-section {
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  column-count: auto !important;
  column-gap: normal;
  break-inside: auto;
  border-top: 0;
  transform: none !important;
  will-change: auto;
}
body[data-reading-mode="book"] .book-flow > .chapter-section + .chapter-section {
  margin-top: 1.2em;
  padding-top: .8em;
  border-top: 0;
}
body[data-reading-mode="book"] .book-flow > .flow-chapter-preview,
body[data-reading-mode="book"] .book-flow > .book-boundary > .flow-chapter-preview {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.book-boundary { display: contents; }
body[data-reading-mode="book"] .flow-column-break {
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  break-before: column;
}
body[data-reading-mode="book"] .flow-column-break[hidden] { display: none; }

@keyframes book-page-settle {
  from { opacity: .84; }
  to { opacity: 1; }
}
body[data-reading-mode="book"] :is(.book-flow, .chapter-section).page-animate {
  transition: none;
  animation: book-page-settle .14s ease-out;
}

@media (max-width: 520px) {
  body[data-reading-mode="book"] .book-flow { column-gap: 32px; }
  body[data-reading-mode="book"] .book-flow > .chapter-section + .chapter-section {
    margin-top: 1.8em;
    padding-top: 1.2em;
  }
}

@media print {
  body[data-reading-mode="book"] .book-flow {
    height: auto;
    overflow: visible;
    column-count: auto !important;
    transform: none !important;
  }
  body[data-reading-mode="book"] .flow-column-break { display: none !important; }
}

/* Cambridge Leather mirrors a goatskin Concord Reference binding: one
   uninterrupted exterior skin around opaque, smooth black edge-lining. */
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-color: #030404;
  --window-material-image: url("assets/materials/cambridge-black-leather-v2.webp");
  --window-material-glow:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.035), transparent 36%);
  --window-material-overlay: linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.2));
  --window-panel-tint: transparent;
  --window-header-tint: transparent;
  --window-toolbar-tint: transparent;
  --window-reader-tint: transparent;
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(
  .app-header,
  .library-panel,
  .utility-panel,
  .reader-toolbar,
  .reader-shell
) {
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none;
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll {
  background-color: #050606 !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.018), transparent 4%, transparent 96%, rgba(255,255,255,.018)),
    linear-gradient(180deg, rgba(16,17,17,.08), rgba(0,0,0,.14)),
    url("assets/materials/cambridge-smooth-edge-lining-v1.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    inset 0 0 46px rgba(0,0,0,.42);
}

/* Refined material pass: fine-grain bindings, responsive paper, and Jacobean inlay. */
body[data-visual-style][data-chrome-mode] {
  --cambridge-goatskin-source: url("assets/materials/cambridge-black-goatskin-hd-v10-mobile.webp");
  --cambridge-lining-source: url("assets/materials/cambridge-smooth-lining-v2-1x.jpg");
  --paper-rag-source: url("assets/materials/paper-1611-laid-wide-v4-1x.jpg");
  --paper-roll-source: url("assets/materials/paper-1611-laid-roll-v2-1x.jpg");
  --ancient-scroll-source: url("assets/materials/ancient-scroll-paper-v3-clean-mobile.jpg");
  --ancient-scroll-roll-source: url("assets/materials/ancient-scroll-roll-v3-seamless-mobile.jpg");
  --jacobean-plaster-source: url("assets/materials/jacobean-plaster-wide-v2-1x.jpg");
  --jacobean-velvet-source: url("assets/materials/jacobean-velvet-wide-v2-1x.jpg");
  --continuous-paper-height: clamp(1100px, 140vh, 1500px);
}

@media (min-width: 700px) {
  body[data-visual-style][data-chrome-mode] {
    --cambridge-goatskin-source: url("assets/materials/cambridge-black-goatskin-hd-v10-1x.webp");
    --ancient-scroll-source: url("assets/materials/ancient-scroll-paper-v3-clean-1x.jpg");
    --ancient-scroll-roll-source: url("assets/materials/ancient-scroll-roll-v3-seamless-1x.jpg");
  }
}

@media (min-width: 1600px), (min-width: 700px) and (min-resolution: 1.5dppx) {
  body[data-visual-style][data-chrome-mode] {
    --cambridge-goatskin-source: url("assets/materials/cambridge-black-goatskin-hd-v10-2x.webp");
    --cambridge-lining-source: url("assets/materials/cambridge-smooth-lining-v2-2x.jpg");
    --paper-rag-source: url("assets/materials/paper-1611-laid-wide-v4-2x.jpg");
    --paper-roll-source: url("assets/materials/paper-1611-laid-roll-v2-2x.jpg");
    --ancient-scroll-source: url("assets/materials/ancient-scroll-paper-v3-clean-2x.jpg");
    --ancient-scroll-roll-source: url("assets/materials/ancient-scroll-roll-v3-seamless-2x.jpg");
    --jacobean-plaster-source: url("assets/materials/jacobean-plaster-wide-v2-2x.jpg");
    --jacobean-velvet-source: url("assets/materials/jacobean-velvet-wide-v2-2x.jpg");
  }
}

/* Clean paper choices share one detailed rag-paper scan; color comes from quiet glazing. */
body[data-paper="white"] {
  --paper: #fffefa;
  --paper-edge: #dedbd2;
  --paper-texture:
    linear-gradient(rgba(255,255,252,.82), rgba(249,249,245,.82)),
    var(--paper-rag-source);
  --paper-texture-size: 100% 100%, cover;
}
body[data-paper="cream"] {
  --paper: #fbf4e2;
  --paper-edge: #dacfb8;
  --paper-texture:
    linear-gradient(rgba(251,244,226,.56), rgba(246,236,213,.56)),
    var(--paper-rag-source);
  --paper-texture-size: 100% 100%, cover;
}
body[data-paper="ivory"] {
  --paper: #eee4cf;
  --paper-edge: #c8bda4;
  --paper-texture:
    linear-gradient(rgba(238,228,207,.48), rgba(229,218,195,.48)),
    var(--paper-rag-source);
  --paper-texture-size: 100% 100%, cover;
}
body[data-paper="beige"] {
  --paper: #eee3ca;
  --paper-edge: #c9b995;
  --paper-texture: var(--paper-rag-source);
  --paper-texture-size: cover;
  --reader-muted: #655b49;
}
body[data-paper="antique"] {
  --paper: #e2c783;
  --paper-edge: #a98243;
  --paper-texture: var(--ancient-scroll-source);
  --paper-texture-size: cover;
}

/* Ancient uses a real torn-fibre frame. The transparent center leaves the
   shared Ancient paper texture untouched. */
body[data-paper="antique"] .paper {
  border: 14px solid transparent;
  border-image-source: url("assets/materials/ancient-torn-fiber-frame-v3.png");
  border-image-slice: 72;
  border-image-width: 14px;
  /* Keep the torn fibres outside the paper instead of covering its face. */
  border-image-outset: 14px;
  border-image-repeat: stretch;
  background-origin: border-box !important;
  background-clip: border-box;
  box-shadow:
    var(--shadow),
    inset 0 0 18px rgba(92, 57, 20, .09),
    0 2px 4px rgba(49, 31, 12, .18);
}

/* The six paper surfaces are shared by every theme. Clean papers receive a
   restrained two-pixel gilded edge; Black stays unframed and Ancient keeps its
   fibrous scroll edge above. */
body:not([data-paper="black"]):not([data-paper="antique"]) .paper {
  border: 2px solid transparent;
  border-image: linear-gradient(
    90deg,
    #d9b862 0%,
    #f5e39c 24%,
    #d1ad52 50%,
    #f1d887 76%,
    #d9b862 100%
  ) 1;
}

body[data-paper="black"] .paper {
  border-color: transparent;
  border-image: none;
}
.paper-swatch[data-paper-choice="white"] span {
  background-image: linear-gradient(rgba(255,255,252,.82), rgba(249,249,245,.82)), var(--paper-rag-source);
}
.paper-swatch[data-paper-choice="cream"] span {
  background-image: linear-gradient(rgba(251,244,226,.56), rgba(246,236,213,.56)), var(--paper-rag-source);
}
.paper-swatch[data-paper-choice="ivory"] span {
  background-image: linear-gradient(rgba(238,228,207,.48), rgba(229,218,195,.48)), var(--paper-rag-source);
}
.paper-swatch[data-paper-choice="beige"] span {
  background-image: var(--paper-rag-source);
}
.paper-swatch[data-paper-choice="antique"] span {
  background-image: var(--ancient-scroll-source);
}
.paper-swatch[data-paper-choice="white"] span,
.paper-swatch[data-paper-choice="cream"] span,
.paper-swatch[data-paper-choice="ivory"] span,
.paper-swatch[data-paper-choice="beige"] span,
.paper-swatch[data-paper-choice="antique"] span {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Paper is a content choice, never a theme material. This guard keeps
   Cambridge, Jacobean, and Temple on the same six surfaces and swatches. */
body[data-visual-style][data-paper] .paper {
  background-color: var(--paper) !important;
  background-image: var(--paper-texture) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: var(--paper-texture-size, cover) !important;
  background-blend-mode: normal !important;
  filter: none;
}

/* Chapter and Scroll are continuous rolls rather than a single sheet. The
   mirrored texture joins repeat vertically at a stable scale and move with the
   text, so long chapters and whole books never stretch the paper grain. */
body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="white"] .paper {
  background-image:
    linear-gradient(to bottom, rgba(255,255,252,.82) 0%, rgba(249,249,245,.82) 50%, rgba(255,255,252,.82) 100%),
    var(--paper-roll-source) !important;
  background-size: 100% var(--continuous-paper-height), auto var(--continuous-paper-height) !important;
}

body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="cream"] .paper {
  background-image:
    linear-gradient(to bottom, rgba(251,244,226,.56) 0%, rgba(246,236,213,.56) 50%, rgba(251,244,226,.56) 100%),
    var(--paper-roll-source) !important;
  background-size: 100% var(--continuous-paper-height), auto var(--continuous-paper-height) !important;
}

body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="ivory"] .paper {
  background-image:
    linear-gradient(to bottom, rgba(238,228,207,.48) 0%, rgba(229,218,195,.48) 50%, rgba(238,228,207,.48) 100%),
    var(--paper-roll-source) !important;
  background-size: 100% var(--continuous-paper-height), auto var(--continuous-paper-height) !important;
}

body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="beige"] .paper {
  background-image: var(--paper-roll-source) !important;
  background-size: auto var(--continuous-paper-height) !important;
}

body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"] .paper {
  background-image: var(--ancient-scroll-roll-source) !important;
  background-size: auto var(--continuous-paper-height) !important;
  border-image-repeat: round;
}

body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"]):not([data-paper="black"]) .paper {
  background-attachment: scroll !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
}

@media (max-width: 900px) {
  body[data-paper="antique"] .paper {
    border-width: 8px;
    border-image-width: 8px;
    border-image-outset: 8px;
  }
}

/* Cambridge Leather uses two visibly different scales: fine goatskin and near-smooth lining. */
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-image: var(--cambridge-goatskin-source);
  --window-material-glow: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.016), transparent 38%);
  --window-material-overlay: linear-gradient(rgba(0,0,0,.045), rgba(0,0,0,.15));
}
body[data-visual-style="illuminated"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll {
  background-color: #050606 !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.014), transparent 4%, transparent 96%, rgba(255,255,255,.014)),
    linear-gradient(180deg, rgba(16,17,17,.035), rgba(0,0,0,.09)),
    var(--cambridge-lining-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}

/* Jacobean is plaster or velvet first; walnut is restricted to structural accents. */
body[data-visual-style="jacobean"][data-chrome-mode="light"] {
  --window-material-color: #d8c9b1;
  --window-material-image: var(--jacobean-plaster-source);
  --window-material-glow: radial-gradient(ellipse at 50% 10%, rgba(255,250,235,.22), transparent 48%);
  --window-material-overlay: linear-gradient(rgba(239,225,204,.2), rgba(157,119,78,.12));
  --window-panel-tint: rgba(246,239,226,.72);
  --window-header-tint: rgba(74,42,23,.62);
  --window-toolbar-tint: rgba(74,42,23,.58);
  --window-reader-tint: rgba(86,53,29,.08);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) {
  --window-material-color: #360817;
  --window-material-image: var(--jacobean-velvet-source);
  --window-material-glow: radial-gradient(ellipse at 50% 4%, rgba(166,79,93,.1), transparent 42%);
  --window-material-overlay: linear-gradient(rgba(44,5,15,.34), rgba(16,2,7,.5));
  --window-panel-tint: rgba(51,7,17,.7);
  --window-header-tint: rgba(27,9,6,.64);
  --window-toolbar-tint: rgba(29,10,7,.6);
  --window-reader-tint: rgba(18,5,4,.12);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.app-header, .reader-toolbar) {
  background-color: #6b4329 !important;
  background-image: linear-gradient(rgba(147,100,60,.34), rgba(67,35,19,.3)), url("assets/materials/jacobean-wood.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) :is(.app-header, .reader-toolbar) {
  background-color: #24120d !important;
  background-image: linear-gradient(rgba(17,5,3,.58), rgba(36,13,8,.54)), url("assets/materials/jacobean-wood.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
}
body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-scroll {
  background-color: #6a4328 !important;
  background-image: linear-gradient(rgba(116,72,40,.2), rgba(47,24,12,.24)), url("assets/materials/jacobean-wood.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  border-color: #8c642d;
  box-shadow: inset 0 0 0 1px rgba(232,196,117,.2), inset 0 0 28px rgba(43,20,9,.3);
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-scroll {
  background-color: #1c0b08 !important;
  background-image: linear-gradient(rgba(5,1,1,.58), rgba(25,7,5,.52)), url("assets/materials/jacobean-wood.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  border-color: #92703b;
  box-shadow: inset 0 0 0 1px rgba(210,169,86,.18), inset 0 0 32px rgba(0,0,0,.54);
}

/* Jacobean border work keeps each engraving at its native aspect ratio. */
body[data-visual-style="jacobean"] .reader-shell { position: relative; }
body[data-visual-style="jacobean"] .reader-scroll {
  padding-top: clamp(36px, 3vw, 46px);
}
body[data-visual-style="jacobean"] .reader-shell::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 54px;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image:
    url("assets/materials/jacobean-vine-side-v1.png"),
    url("assets/materials/jacobean-vine-side-mirror-v1.png");
  background-position: left 7px center, right 7px center;
  background-repeat: no-repeat;
  background-size: clamp(20px, 2vw, 32px) auto, clamp(20px, 2vw, 32px) auto;
  opacity: .18;
}
body[data-visual-style="jacobean"] .reader-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 58px;
  left: 50%;
  width: min(660px, 56vw);
  height: clamp(24px, 2.6vw, 38px);
  transform: translateX(-50%);
  pointer-events: none;
  background: url("assets/materials/jacobean-floral-border-wide-v2.png") center / contain no-repeat;
  opacity: .38;
}
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-shell::before { opacity: .24; }
body[data-visual-style="jacobean"]:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .reader-shell::after { opacity: .48; }

/* Jacobean controls use simple walnut and aged-gold plates without repeated fake wear marks. */
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --button-radius: 3px;
  --button-focus: #a7792d;
  --button-neutral-bg: linear-gradient(180deg, #805a40 0%, #503323 58%, #68432d 100%);
  --button-neutral-hover-bg: linear-gradient(180deg, #93684a 0%, #5c3927 58%, #775038 100%);
  --button-neutral-border: #765037;
  --button-neutral-ink: #f3e6ca;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,229,181,.16), inset 0 -1px 0 rgba(27,11,5,.42), 0 1px 2px rgba(48,27,13,.24);
  --button-active-bg: linear-gradient(180deg, #ddc57f 0%, #9b7433 54%, #c09a4c 100%);
  --button-active-hover-bg: linear-gradient(180deg, #ead38c 0%, #aa813a 54%, #cba85a 100%);
  --button-active-border: #72521e;
  --button-active-ink: #281b0e;
  --button-active-shadow: inset 0 1px 0 rgba(255,242,190,.48), inset 0 -1px 0 rgba(75,45,11,.36), 0 1px 3px rgba(55,35,16,.28);
  --button-pressed-bg: linear-gradient(180deg, #8f6829 0%, #b68b42 58%, #d0b369 100%);
  --button-tray-bg: linear-gradient(180deg, #704b35 0%, #41291d 100%);
  --button-tray-border: #75523a;
}
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --button-radius: 3px;
  --button-focus: #d0ad61;
  --button-neutral-bg: linear-gradient(180deg, #4c2d27 0%, #241511 58%, #381e1a 100%);
  --button-neutral-hover-bg: linear-gradient(180deg, #5e3930 0%, #2d1915 58%, #472720 100%);
  --button-neutral-border: #765047;
  --button-neutral-ink: #eadbbc;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,222,166,.1), inset 0 -1px 0 rgba(8,2,2,.62), 0 1px 3px rgba(0,0,0,.38);
  --button-active-bg: linear-gradient(180deg, #d8bf78 0%, #8d6829 54%, #b58c41 100%);
  --button-active-hover-bg: linear-gradient(180deg, #e6ce87 0%, #9c7531 54%, #c29a4d 100%);
  --button-active-border: #c9a95b;
  --button-active-ink: #24170b;
  --button-active-shadow: inset 0 1px 0 rgba(255,239,181,.42), inset 0 -1px 0 rgba(52,29,7,.48), 0 1px 4px rgba(0,0,0,.44);
  --button-pressed-bg: linear-gradient(180deg, #77551f 0%, #a47a34 58%, #c19f55 100%);
  --button-tray-bg: linear-gradient(180deg, #3c221d 0%, #170d0b 100%);
  --button-tray-border: #795249;
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"] .reader-shell::before { display: none; }
  body[data-visual-style="jacobean"] .reader-scroll { padding-top: 34px; }
  body[data-visual-style="jacobean"] .reader-shell::after {
    top: 50px;
    width: min(300px, 72vw);
    height: 22px;
    opacity: .24;
  }
}

/* Jacobean Plaster correction: plaster is the primary light material. Pale oak
   is reserved for narrow structural trim, and the floral work reads as a faded
   relief in the plaster rather than a separate gilded banner. */
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --window-material-color: #ded3c1;
  --window-material-image: var(--jacobean-plaster-source);
  --window-material-glow:
    radial-gradient(ellipse at 50% 0%, rgba(255,252,240,.38), transparent 46%);
  --window-material-overlay:
    linear-gradient(180deg, rgba(249,242,228,.2), rgba(175,145,108,.08));
  --window-panel-tint: rgba(246,241,231,.76);
  --window-header-tint: rgba(243,236,223,.82);
  --window-toolbar-tint: rgba(238,229,213,.84);
  --window-reader-tint: rgba(220,207,186,.2);
  --button-focus: #8c6429;
  --button-neutral-bg: linear-gradient(180deg, rgba(255,252,244,.96), rgba(226,214,194,.96));
  --button-neutral-hover-bg: linear-gradient(180deg, #fffdf7, #eadcc3);
  --button-neutral-border: #9d805b;
  --button-neutral-ink: #3d3021;
  --button-neutral-shadow: inset 0 1px rgba(255,255,255,.72), 0 1px 2px rgba(72,48,25,.15);
  --button-active-bg: linear-gradient(180deg, #e7d39a 0%, #b78b3d 58%, #d2b46e 100%);
  --button-active-hover-bg: linear-gradient(180deg, #f0dda4 0%, #c19645 58%, #ddc17a 100%);
  --button-active-border: #79571f;
  --button-active-ink: #2f210f;
  --button-active-shadow: inset 0 1px rgba(255,247,207,.7), inset 0 -1px rgba(91,57,15,.3), 0 1px 3px rgba(64,43,20,.22);
  --button-pressed-bg: linear-gradient(180deg, #a87b31, #c6a052 58%, #dfc37d);
  --button-tray-bg: rgba(236,226,208,.84);
  --button-tray-border: #a98b61;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.app-header, .reader-toolbar) {
  color: #36291c;
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(117,82,43,.5);
  box-shadow:
    inset 0 -1px rgba(255,255,255,.42),
    0 2px 0 rgba(151,112,63,.22);
  backdrop-filter: saturate(.94) blur(2px);
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .app-header {
  background-color: var(--window-header-tint) !important;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-toolbar {
  background-color: var(--window-toolbar-tint) !important;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] :is(.library-panel, .utility-panel) {
  color: #33281c;
  background-color: var(--window-panel-tint) !important;
  background-image: none !important;
  border-color: rgba(120,87,50,.34);
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell {
  background-color: transparent !important;
  background-image: none !important;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-scroll {
  padding-top: clamp(38px, 3.2vw, 48px);
  background-color: #d8c9b2 !important;
  background-image:
    linear-gradient(180deg, rgba(248,240,223,.62), rgba(208,190,164,.48)),
    var(--jacobean-plaster-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  border: 5px solid #b59364;
  outline: 1px solid rgba(83,55,29,.72);
  outline-offset: -3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,248,225,.56),
    inset 0 0 24px rgba(99,68,36,.12),
    0 2px 8px rgba(65,43,22,.18);
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell::before {
  display: block;
  top: 75px;
  right: 10%;
  bottom: auto;
  left: 10%;
  height: 1px;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(112,77,43,.32) 12%,
    rgba(112,77,43,.32) 39%,
    transparent 46%,
    transparent 54%,
    rgba(112,77,43,.32) 61%,
    rgba(112,77,43,.32) 88%,
    transparent 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  opacity: 1;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell::after {
  content: "\2766";
  top: 59px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 32px;
  background: transparent;
  -webkit-mask: none;
  mask: none;
  color: rgba(100,65,36,.58);
  font-family: "EB Garamond Local", Georgia, serif;
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 1px rgba(255,248,229,.58);
  opacity: 1;
  filter: none;
  mix-blend-mode: multiply;
}

body[data-visual-style="jacobean"][data-chrome-mode="light"] .wordmark-copy strong { color: #322519; }
body[data-visual-style="jacobean"][data-chrome-mode="light"] .wordmark-copy small { color: #756146; }
body[data-visual-style="jacobean"][data-theme-tone="light"] .header-action-tabs {
  background: rgba(232,220,199,.74);
  border-color: #a58760;
  box-shadow: inset 0 1px rgba(255,255,255,.54), 0 1px 2px rgba(70,45,21,.12);
}
body[data-visual-style="jacobean"][data-theme-tone="light"] .header-action-tabs .icon-button:not(.active) {
  color: #5f472b;
}
body[data-visual-style="jacobean"][data-theme-tone="light"] .book-link.active {
  color: #522339;
  background: rgba(116,32,55,.09);
  border-color: rgba(116,32,55,.22);
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-scroll {
    padding-top: 30px;
    border-width: 3px;
  }
  body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell::after {
    top: 50px;
    width: 36px;
    height: 24px;
    font-size: 22px;
  }
  body[data-visual-style="jacobean"][data-chrome-mode="light"] .reader-shell::before {
    top: 62px;
    right: 7%;
    left: 7%;
  }
}

/* Jacobean Light is plaster and aged gilt, including when Theatre was entered
   from Light mode. No wood texture is used in this material system. */
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --window-material-color: #ded3c1;
  --window-material-image: var(--jacobean-plaster-source);
  --window-material-glow: radial-gradient(ellipse at 50% 0%, rgba(255,252,240,.38), transparent 46%);
  --window-material-overlay: linear-gradient(180deg, rgba(249,242,228,.2), rgba(175,145,108,.08));
  --window-panel-tint: rgba(246,241,231,.76);
  --window-header-tint: rgba(243,236,223,.84);
  --window-toolbar-tint: rgba(238,229,213,.86);
  --window-reader-tint: rgba(220,207,186,.16);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel,
  .reader-shell
) {
  background-image: none !important;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .app-header {
  color: #36291c;
  background-color: var(--window-header-tint) !important;
  border-color: rgba(139,108,58,.42);
  box-shadow: inset 0 -1px rgba(255,255,255,.48), 0 2px 0 rgba(183,151,85,.3);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-toolbar {
  color: #36291c;
  background-color: var(--window-toolbar-tint) !important;
  border-color: rgba(139,108,58,.42);
  box-shadow: inset 0 -1px rgba(255,255,255,.42), 0 1px 0 rgba(183,151,85,.26);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] :is(.library-panel, .utility-panel) {
  color: #33281c;
  background-color: var(--window-panel-tint) !important;
  border-color: rgba(139,108,58,.3);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell {
  background-color: transparent !important;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before,
body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::after {
  display: none;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll {
  position: relative;
  padding-top: 36px;
  background-color: #d8cdbb !important;
  background-image:
    linear-gradient(180deg, rgba(247,240,226,.7), rgba(218,204,183,.54)),
    var(--jacobean-plaster-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, cover !important;
  border: 3px double #b49a60;
  outline: 1px solid rgba(235,221,177,.76);
  outline-offset: -5px;
  box-shadow:
    inset 0 0 0 1px rgba(96,75,42,.28),
    inset 0 0 22px rgba(95,72,39,.1),
    0 2px 8px rgba(64,45,25,.14);
}

/* The floral scroll belongs to its own narrow border band above the paper. */
body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 33px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,252,239,.44), rgba(209,192,164,.2)),
    var(--jacobean-plaster-source);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  border-bottom: 1px solid rgba(154,122,67,.5);
  box-shadow: inset 0 -1px rgba(255,248,218,.38);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 8px;
  right: clamp(34px, 7vw, 150px);
  left: clamp(34px, 7vw, 150px);
  height: 16px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(104,71,38,.48) 0 1.4px, transparent 1.7px) 0 0 / 32px 16px repeat-x,
    radial-gradient(ellipse 17px 8px at 50% 100%, transparent 58%, rgba(112,77,41,.38) 61% 67%, transparent 70%) 0 0 / 32px 8px repeat-x,
    radial-gradient(ellipse 17px 8px at 50% 0%, transparent 58%, rgba(112,77,41,.38) 61% 67%, transparent 70%) 16px 8px / 32px 8px repeat-x;
  border-top: 1px solid rgba(183,150,84,.34);
  border-bottom: 1px solid rgba(183,150,84,.34);
  opacity: .8;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .wordmark-copy strong { color: #322519; }
body[data-visual-style="jacobean"][data-theme-tone="light"] .wordmark-copy small { color: #756146; }
body[data-visual-style="jacobean"][data-theme-tone="light"] .header-action-tabs {
  background: rgba(232,220,199,.76);
  border-color: #aa8c59;
}
body[data-visual-style="jacobean"][data-theme-tone="light"] .header-action-tabs .icon-button:not(.active) { color: #5f472b; }

@media (max-width: 900px) {
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll {
    padding-top: 30px;
    border-width: 2px;
  }
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll::before { height: 28px; }
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll::after {
    top: 7px;
    right: 20px;
    left: 20px;
    height: 14px;
    background-size: 28px 14px, 28px 7px, 28px 7px;
    background-position: 0 0, 0 0, 14px 7px;
  }
}

/* 2026-07 display polish: edition headings, responsive Temple materials, and
   deliberate segmented controls for mutually exclusive choices. */
body[data-visual-style][data-chrome-mode] {
  --temple-limestone-source: url("assets/materials/temple-limestone-gold-leaf-v2-mobile.jpg");
  --temple-bronze-source: url("assets/materials/temple-bronze-gold-leaf-v2-mobile.jpg");
}

@media (min-width: 700px) {
  body[data-visual-style][data-chrome-mode] {
    --temple-limestone-source: url("assets/materials/temple-limestone-gold-leaf-v2-1x.jpg");
    --temple-bronze-source: url("assets/materials/temple-bronze-gold-leaf-v2-1x.jpg");
  }
}

@media (min-width: 1600px), (min-width: 700px) and (min-resolution: 1.5dppx) {
  body[data-visual-style][data-chrome-mode] {
    --temple-limestone-source: url("assets/materials/temple-limestone-gold-leaf-v2-2x.jpg");
    --temple-bronze-source: url("assets/materials/temple-bronze-gold-leaf-v2-2x.jpg");
  }
}

body[data-visual-style][data-chrome-mode] {
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
}

body[data-visual-style="illuminated"][data-chrome-mode="light"] {
  --window-material-image: var(--paper-rag-source);
}

body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --window-material-image: var(--temple-limestone-source);
  --window-material-overlay: linear-gradient(rgba(246,244,237,.16), rgba(194,178,150,.12));
}

body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --window-material-image: var(--temple-bronze-source);
  --window-material-overlay: linear-gradient(rgba(12,7,11,.14), rgba(18,9,14,.24));
}

@media (max-width: 900px) {
  body[data-visual-style][data-chrome-mode] {
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, cover;
  }
}

/* Temple Light uses clean dressed stone and struck gold. The earlier radial
   flecks looked like rendering artifacts at control size. */
body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --button-radius: 3px;
  --button-focus: #3e7378;
  --button-neutral-bg: linear-gradient(180deg, #fbf8f1 0%, #ddd4c5 54%, #eee8dc 100%);
  --button-neutral-hover-bg: linear-gradient(180deg, #fffdf7 0%, #e7ddcc 54%, #f4eee3 100%);
  --button-neutral-border: #98896f;
  --button-neutral-ink: #30291f;
  --button-neutral-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(91,75,52,.16), 0 1px 2px rgba(61,52,40,.16);
  --button-active-bg: linear-gradient(180deg, #f2df9a 0%, #b78a32 48%, #d2ad56 76%, #a97820 100%);
  --button-active-hover-bg: linear-gradient(180deg, #fae9a8 0%, #c3983d 48%, #dfbd66 76%, #b98627 100%);
  --button-active-border: #70501b;
  --button-active-ink: #25190a;
  --button-active-shadow: inset 0 1px 0 rgba(255,247,204,.7), inset 0 -1px 0 rgba(72,45,10,.34), 0 1px 3px rgba(62,43,15,.24);
  --button-pressed-bg: linear-gradient(180deg, #a87922 0%, #c59a43 58%, #e1c36f 100%);
  --button-tray-bg: linear-gradient(180deg, rgba(226,217,201,.96), rgba(193,182,163,.96));
  --button-tray-border: #91816a;
  --button-water-shadow: none;
}

/* A segmented control is one decision surface. Its options share a tray and
   only the selected segment receives the theme's metal treatment. */
body[data-visual-style][data-chrome-mode] .segmented-control {
  gap: 1px !important;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--button-tray-border);
  border-radius: calc(var(--button-radius) + 2px);
  background: var(--button-tray-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.16);
}

body[data-visual-style][data-chrome-mode] .segmented-control > button,
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > button {
  min-width: 0;
  color: var(--button-neutral-ink);
  border: 0 !important;
  border-radius: var(--button-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] .segmented-control > button:hover:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]),
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > button:hover:not(:disabled):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]) {
  color: var(--button-neutral-ink);
  background: color-mix(in srgb, var(--button-neutral-hover-bg) 72%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--button-neutral-border) 58%, transparent) !important;
}

body[data-visual-style][data-chrome-mode] .segmented-control > :is(button.active, button[aria-pressed="true"], button[aria-selected="true"]),
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > :is(button.active, button[aria-pressed="true"], button[aria-selected="true"]) {
  color: var(--button-active-ink);
  background: var(--button-active-bg) !important;
  box-shadow: var(--button-active-shadow) !important;
}

body[data-visual-style][data-chrome-mode] .reader-toolbar .mode-control.segmented-control {
  min-height: 38px;
}

body[data-visual-style][data-chrome-mode] .library-panel .testament-tabs.segmented-control {
  min-height: 36px;
}

body[data-visual-style][data-chrome-mode] #display-view :is(
  .theme-control.segmented-control,
  .edition-control.segmented-control,
  .layout-control.segmented-control,
  .column-control.segmented-control,
  .spread-control.segmented-control,
  .mode-control.segmented-control
) {
  gap: 1px !important;
}

body[data-visual-style][data-chrome-mode] #display-view .edition-control.segmented-control button {
  min-height: 38px;
  padding-inline: 8px;
}

body[data-visual-style][data-chrome-mode] #display-view .compact-spread-setting .spread-control.segmented-control {
  padding: 2px;
}

@media (max-width: 700px) {
  body[data-visual-style][data-chrome-mode] .segmented-control > button {
    min-height: 40px;
  }
}

/* The same source-backed printed headings now lead Chapter, Book, and Scroll.
   Scroll prints the book opening once, then a compact heading per chapter. */
.reading-opening {
  display: block;
  margin: 0 0 clamp(20px, 3vw, 38px);
  break-after: avoid;
  text-align: center;
}

.reading-opening .book-opening-page {
  width: 100%;
  padding: .2em clamp(10px, 2vw, 24px) .95em;
  border-bottom: 1px solid color-mix(in srgb, var(--reader-rule) 82%, transparent);
  text-align: center;
}

.reading-opening .book-opening-edition {
  display: block;
  margin-bottom: .72em;
  color: var(--reader-accent);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reading-opening .book-title {
  margin: 0;
  color: var(--reader-ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(22px, calc(var(--reader-size) * 1.34), 34px);
  font-weight: 650;
  line-height: 1.08;
  text-align: center;
}

.reading-opening .book-title-line { display: block; }

body[data-edition="pce"] .reading-opening .book-title {
  font-weight: 500;
  line-height: 1;
}

body[data-edition="pce"] .reading-opening .book-title-line:not(.book-title-line-last) {
  color: var(--reader-accent);
  font-size: .56em;
  font-weight: 650;
}

body[data-edition="pce"] .reading-opening .book-title-line-last {
  margin-top: .2em;
  font-size: 1.42em;
  font-weight: 500;
}

body[data-edition="pce"] .reading-opening .book-title-lines-1 .book-title-line-last {
  margin-top: 0;
  font-size: 1.05em;
}

body[data-edition="pce"] .reading-opening :is(.book-title-lines-3, .book-title-lines-4) .book-title-line-last {
  font-size: 1.04em;
}

body[data-edition="he1611"] .reading-opening :is(.book-title, .printed-chapter-title) {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-weight: 600;
  letter-spacing: 0;
}

body[data-edition="he1611"] .reading-opening .book-title {
  font-size: clamp(22px, calc(var(--reader-size) * 1.26), 30px);
  line-height: .99;
}

body[data-edition="he1611"] .reading-opening .book-title-lines-4 .book-title-line-1 { font-size: .62em; }
body[data-edition="he1611"] .reading-opening .book-title-lines-4 .book-title-line-2 {
  margin-top: .18em;
  font-size: 1.32em;
}
body[data-edition="he1611"] .reading-opening .book-title-lines-4 .book-title-line-3 {
  margin-top: .05em;
  font-size: 1.1em;
}
body[data-edition="he1611"] .reading-opening .book-title-lines-4 .book-title-line-4 {
  margin-top: .2em;
  font-size: .62em;
  font-weight: 500;
}
body[data-edition="he1611"] .reading-opening .book-title-called {
  font-size: .82em;
  text-transform: lowercase;
}
body[data-edition="he1611"] .reading-opening .book-title-called-name {
  font-size: 1.12em;
  text-transform: uppercase;
}

.reading-opening .printed-chapter-title {
  margin: .9em 0 0;
  color: var(--reader-ink);
  font-size: clamp(14px, calc(var(--reader-size) * .74), 18px);
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
}

.reading-opening-chapter-only {
  margin-top: clamp(28px, 5vw, 58px);
  padding-top: clamp(18px, 3vw, 30px);
  border-top: 1px solid color-mix(in srgb, var(--reader-rule) 72%, transparent);
}

.reading-opening-chapter-only .printed-chapter-title { margin-top: 0; }

body[data-reading-mode="chapter"] .reading-opening,
body[data-reading-mode="scroll"] .reading-opening-with-book {
  max-width: min(100%, 860px);
  margin-inline: auto;
}

body[data-reading-mode="scroll"] .chapter-section:first-child .reading-opening {
  margin-top: 0;
}

/* Scroll chapters already carry their own printed divider. Avoid stacking the
   legacy section gap with the new heading spacing. */
body[data-reading-mode="scroll"] .chapter-section + .chapter-section {
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 0;
  border-top: 0;
}

body[data-reading-mode="scroll"] .reading-opening-chapter-only {
  margin-top: 0;
  padding-top: clamp(16px, 2.2vw, 24px);
}

/* Side panels reduce the reader itself without changing the viewport width.
   Reflow a centre-reference spread according to usable page width. */
.reader-shell {
  container-type: inline-size;
}

@container (max-width: 820px) {
  .concord-layout {
    display: block;
  }

  .concord-side {
    padding: 8px 0 0;
  }

  .concord-side-left {
    border-right: 0;
  }

  .concord-side-left .concord-row,
  .concord-side-right .concord-row,
  .single-reference-layout .concord-row-left,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-left,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scripture" "references";
  }

  .concord-scripture-cell,
  .concord-side-left .concord-scripture-cell,
  .concord-side-right .concord-scripture-cell,
  .single-reference-layout .concord-scripture-cell,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-scripture-cell,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right .concord-scripture-cell {
    padding: 0 0 5px;
  }

  .concord-references,
  .concord-side-left .concord-references,
  .concord-side-right .concord-references,
  .single-reference-layout .concord-references,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-references,
  body[data-reading-mode="book"][data-center-references="true"] .reference-book-section .concord-row-right .concord-references {
    margin-bottom: 13px;
    padding: 3px 0 10px 22px;
    border: 0;
    border-bottom: 1px solid var(--reader-rule);
  }
}

@media (max-width: 600px) {
  .reading-opening {
    margin-bottom: 20px;
  }
  .reading-opening .book-opening-page {
    padding-inline: 2px;
  }
  .reading-opening .book-title {
    font-size: clamp(20px, calc(var(--reader-size) * 1.16), 27px);
  }
  .reading-opening-chapter-only {
    margin-top: 28px;
    padding-top: 18px;
  }
}

/* Desktop library rail: it can leave the layout completely, allowing the
   reading page to center on the physical screen rather than the remaining
   space beside a permanently reserved column. */
@media (min-width: 901px) {
  .app-layout {
    --library-track: 260px;
    grid-template-columns: var(--library-track) minmax(0, 1fr);
    transition: grid-template-columns .26s cubic-bezier(.22, .8, .24, 1);
  }

  .app-layout.utility-open {
    grid-template-columns: var(--library-track) minmax(0, 1fr) 390px;
  }

  .app-layout.utility-open.tools-expanded[data-utility-view="search"],
  .app-layout.utility-open.tools-expanded[data-utility-view="study"] {
    grid-template-columns: var(--library-track) minmax(380px, .78fr) minmax(560px, 1.22fr);
  }

  .app-layout.library-collapsed {
    --library-track: 0px;
  }

  .library-panel {
    transform: translateX(0);
    opacity: 1;
    transition: transform .26s cubic-bezier(.22, .8, .24, 1), opacity .16s ease;
  }

  .app-layout.library-collapsed .library-panel {
    border-right: 0;
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
  }

  .desktop-library-toggle {
    display: inline-grid;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .app-layout {
    --library-track: 230px;
  }
}

@media (max-width: 900px) {
  .desktop-library-toggle {
    display: none !important;
  }
}

/* Sliding selectors: mutually exclusive choices share one continuous track
   and one moving metal thumb. The controls remain real buttons for keyboard
   and screen-reader behavior. */
body[data-visual-style][data-chrome-mode] .segmented-control {
  position: relative;
  isolation: isolate;
}

body[data-visual-style][data-chrome-mode] .segmented-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 8px) / 3);
  border-radius: var(--button-radius);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.22, .8, .24, 1), background .2s ease, box-shadow .2s ease;
  pointer-events: none;
}

body[data-visual-style][data-chrome-mode] .segmented-control:has(> button:nth-child(2):last-child)::before {
  width: calc((100% - 7px) / 2);
}

body[data-visual-style][data-chrome-mode] .segmented-control:has(> button:nth-child(2):is(.active, [aria-pressed="true"], [aria-selected="true"]))::before {
  transform: translateX(calc(100% + 1px));
}

body[data-visual-style][data-chrome-mode] .segmented-control:has(> button:nth-child(3):is(.active, [aria-pressed="true"], [aria-selected="true"]))::before {
  transform: translateX(calc(200% + 2px));
}

body[data-visual-style][data-chrome-mode] .segmented-control > button,
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] .segmented-control > button:hover:not(:disabled),
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > button:hover:not(:disabled) {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-visual-style][data-chrome-mode] .segmented-control > :is(button.active, button[aria-pressed="true"], button[aria-selected="true"]),
body[data-visual-style][data-chrome-mode] #display-view .segmented-control > :is(button.active, button[aria-pressed="true"], button[aria-selected="true"]) {
  color: var(--button-active-ink);
  background: transparent !important;
  box-shadow: none !important;
}

/* Jacobean ornament lanes. Keep the engraving wholly inside the binding
   border, extend it for wide screens, and color every piece from one metal. */
body[data-visual-style="jacobean"] {
  --jacobean-ornament-metal: linear-gradient(
    90deg,
    #7b5720 0%,
    #c39a43 18%,
    #f0d47a 48%,
    #bb8d36 76%,
    #75501c 100%
  );
  --jacobean-side-metal: linear-gradient(180deg, #9a6c28 0%, #d4ad55 48%, #8a5d21 100%);
}

body[data-visual-style="jacobean"] .reader-shell::after {
  content: "" !important;
  position: absolute;
  z-index: 4;
  top: 66px;
  right: clamp(70px, 8vw, 190px);
  left: clamp(70px, 8vw, 190px);
  width: auto;
  height: 34px;
  transform: none;
  pointer-events: none;
  background: var(--jacobean-ornament-metal) !important;
  opacity: .82 !important;
  -webkit-mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: clamp(470px, 28vw, 620px) 100%;
  mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png");
  mask-position: center;
  mask-repeat: repeat-x;
  mask-size: clamp(470px, 28vw, 620px) 100%;
}

body[data-visual-style="jacobean"] .reader-scroll::before {
  content: none !important;
}

body[data-visual-style="jacobean"] .reader-scroll::after {
  content: none !important;
}

body[data-visual-style="jacobean"] .reader-shell::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 66px;
  right: 0;
  bottom: 18px;
  left: 0;
  pointer-events: none;
  background: var(--jacobean-side-metal) !important;
  opacity: .72 !important;
  -webkit-mask-image:
    url("assets/materials/jacobean-vine-side-v1.png"),
    url("assets/materials/jacobean-vine-side-mirror-v1.png");
  -webkit-mask-position: left 5px top, right 5px top;
  -webkit-mask-repeat: repeat-y, repeat-y;
  -webkit-mask-size: 24px auto, 24px auto;
  mask-image:
    url("assets/materials/jacobean-vine-side-v1.png"),
    url("assets/materials/jacobean-vine-side-mirror-v1.png");
  mask-position: left 5px top, right 5px top;
  mask-repeat: repeat-y, repeat-y;
  mask-size: 24px auto, 24px auto;
}

body[data-visual-style="jacobean"][data-reading-mode="scroll"] .reader-shell::after {
  content: none !important;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --jacobean-ornament-metal: linear-gradient(
    90deg,
    #765426 0%,
    #a77d37 20%,
    #d6b260 50%,
    #9d7130 80%,
    #67471f 100%
  );
  --jacobean-side-metal: linear-gradient(180deg, #795525 0%, #b58c43 48%, #6b481f 100%);
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::after {
  content: "" !important;
  display: block !important;
  top: 59px !important;
  right: clamp(70px, 8vw, 190px) !important;
  left: clamp(70px, 8vw, 190px) !important;
  width: auto !important;
  height: 32px !important;
  background: var(--jacobean-ornament-metal) !important;
  color: transparent !important;
  opacity: .72 !important;
  text-shadow: none !important;
  -webkit-mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: repeat-x !important;
  -webkit-mask-size: clamp(470px, 28vw, 620px) 100% !important;
  mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  mask-position: center !important;
  mask-repeat: repeat-x !important;
  mask-size: clamp(470px, 28vw, 620px) 100% !important;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before {
  content: "" !important;
  display: block !important;
  top: 66px !important;
  right: 0 !important;
  bottom: 18px !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  background: var(--jacobean-side-metal) !important;
  opacity: .62 !important;
  -webkit-mask-image:
    url("assets/materials/jacobean-vine-side-v1.png"),
    url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
  -webkit-mask-position: left 5px top, right 5px top !important;
  -webkit-mask-repeat: repeat-y, repeat-y !important;
  -webkit-mask-size: 24px auto, 24px auto !important;
  mask-image:
    url("assets/materials/jacobean-vine-side-v1.png"),
    url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
  mask-position: left 5px top, right 5px top !important;
  mask-repeat: repeat-y, repeat-y !important;
  mask-size: 24px auto, 24px auto !important;
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"] .reader-shell::after {
    top: 61px;
    right: 38px;
    left: 38px;
    height: 24px;
  }

  body[data-visual-style="jacobean"] .reader-shell::before {
    top: 59px;
    bottom: 12px;
    -webkit-mask-position: left 3px top, right 3px top;
    -webkit-mask-size: 17px auto, 17px auto;
    mask-position: left 3px top, right 3px top;
    mask-size: 17px auto, 17px auto;
  }
}

/* Library navigation: the full desktop library is the primary book picker.
   Its compact Book select appears only when the library is folded away. */
.library-dock-toggle {
  position: fixed;
  z-index: 42;
  top: calc(var(--header-height) + 14px);
  left: 12px;
  width: 44px;
  height: 44px;
  color: var(--button-neutral-ink, var(--ink));
  border-color: var(--button-neutral-border, var(--line));
  background: var(--button-neutral-bg, var(--panel));
  box-shadow: var(--button-neutral-shadow, 0 5px 16px rgba(0, 0, 0, .16));
  backdrop-filter: blur(8px);
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.library-dock-toggle:hover {
  color: var(--button-neutral-ink, var(--ink));
  border-color: var(--button-focus, var(--accent));
  background: var(--button-neutral-hover-bg, var(--panel-soft));
  box-shadow: var(--button-neutral-shadow, 0 5px 16px rgba(0, 0, 0, .16)), 0 0 0 1px color-mix(in srgb, var(--button-focus, var(--accent)) 24%, transparent);
}
.library-toggle-glyph {
  position: relative;
  display: block;
  width: 25px;
  height: 24px;
}
.library-toggle-books {
  position: absolute;
  top: 1px;
  left: 0;
  width: 21px !important;
  height: 21px !important;
}
.library-toggle-direction {
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 13px !important;
  height: 13px !important;
  padding: 1px;
  border-radius: 50%;
  background: var(--button-neutral-bg, var(--panel));
  box-shadow: 0 0 0 1px var(--button-neutral-border, var(--line));
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .22s ease;
}
.library-dock-toggle[data-expanded="false"] .library-toggle-direction { transform: rotate(180deg); }

/* Theme the native popup as well as the closed select surface. Chromium uses
   color-scheme for its menu chrome and these colors for the option rows. */
body {
  --native-menu-bg: #f8f5ed;
  --native-menu-ink: #272219;
  --native-menu-selected-bg: #b78b2d;
  --native-menu-selected-ink: #171109;
}
body[data-theme-tone="light"] { color-scheme: light; }
body[data-theme-tone="dark"] { color-scheme: dark; }
body[data-visual-style="illuminated"][data-theme-tone="light"] {
  --native-menu-bg: #f7f7f2;
  --native-menu-ink: #202224;
  --native-menu-selected-bg: #d3b44e;
  --native-menu-selected-ink: #17150e;
}
body[data-visual-style="illuminated"][data-theme-tone="dark"] {
  --native-menu-bg: #111211;
  --native-menu-ink: #ece9df;
  --native-menu-selected-bg: #b89638;
  --native-menu-selected-ink: #0d0d0b;
}
body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --native-menu-bg: #eee3d3;
  --native-menu-ink: #312315;
  --native-menu-selected-bg: #a47a32;
  --native-menu-selected-ink: #fff4db;
}
body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --native-menu-bg: #2a1115;
  --native-menu-ink: #f0debb;
  --native-menu-selected-bg: #9a7330;
  --native-menu-selected-ink: #fff4d6;
}
body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --native-menu-bg: #eee8da;
  --native-menu-ink: #28231a;
  --native-menu-selected-bg: #a77d2f;
  --native-menu-selected-ink: #fff7df;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --native-menu-bg: #191713;
  --native-menu-ink: #ead8a8;
  --native-menu-selected-bg: #9a752d;
  --native-menu-selected-ink: #fff6d9;
}
.select-control select { color-scheme: inherit; }
.select-control select option,
.select-control select optgroup {
  color: var(--native-menu-ink);
  background-color: var(--native-menu-bg);
}
.select-control select option:checked {
  color: var(--native-menu-selected-ink);
  background-color: var(--native-menu-selected-bg);
}

@media (min-width: 901px) {
  body:not([data-chrome-mode="theatre"]) .library-panel .panel-heading { padding-left: 68px; }
  body:not([data-chrome-mode="theatre"]) .library-close { display: none; }
  body[data-chrome-mode="theatre"] .library-dock-toggle { display: none; }

  .app-layout:not(.library-collapsed) .book-control { display: none; }
  body[data-chrome-mode="theatre"] .app-layout:not(.library-collapsed) .book-control { display: inline-flex; }
  .app-layout.library-collapsed .reader-toolbar { padding-left: 70px; }
}

@media (max-width: 900px) {
  .library-dock-toggle { display: none !important; }
  .book-control { display: inline-flex; }
}

/* Final Jacobean frame alignment. The side engravings retain their source
   proportions and repeat vertically inside each binding lane. */
body[data-visual-style="jacobean"] .reader-shell::after,
body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::after {
  top: 66px !important;
  right: 30px !important;
  left: 30px !important;
  height: 30px !important;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  -webkit-mask-position: center, center !important;
  -webkit-mask-repeat: no-repeat, repeat-x !important;
  -webkit-mask-size: 100% 100%, auto 100% !important;
  -webkit-mask-composite: source-in !important;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%),
    url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  mask-position: center, center !important;
  mask-repeat: no-repeat, repeat-x !important;
  mask-size: 100% 100%, auto 100% !important;
  mask-composite: intersect !important;
}

body[data-visual-style="jacobean"] .reader-shell::before,
body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before {
  top: 66px !important;
  right: 0 !important;
  bottom: 18px !important;
  left: 0 !important;
  -webkit-mask-position: left 12px top, right 12px top !important;
  -webkit-mask-repeat: repeat-y, repeat-y !important;
  -webkit-mask-size: 20px auto, 20px auto !important;
  mask-position: left 12px top, right 12px top !important;
  mask-repeat: repeat-y, repeat-y !important;
  mask-size: 20px auto, 20px auto !important;
}

body[data-visual-style="jacobean"][data-chrome-mode="theatre"] .reader-shell::after {
  content: none !important;
  display: none !important;
}

.jacobean-corner {
  display: none;
  position: absolute;
  z-index: 6;
  top: 58px;
  width: 46px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(135deg, #fff0a0 0%, #d7aa43 35%, #865516 70%, #ebcb72 100%);
  opacity: .98;
  -webkit-mask: url("assets/materials/jacobean-corner-v1.png") left top / contain no-repeat;
  mask: url("assets/materials/jacobean-corner-v1.png") left top / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(32, 13, 5, .72));
}
body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner { display: block; }
.jacobean-corner-left { left: 0; }
.jacobean-corner-right { right: 0; transform: scaleX(-1); }

/* The desktop menus are rendered by the reader so every hover, focus, and
   selected state belongs to the active material theme. Native selects remain
   on phones, where the operating-system picker is the expected interaction. */
.themed-select { display: none; }

@media (min-width: 901px) {
  .library-dock-toggle {
    top: calc(var(--header-height) + 8px);
    left: 14px;
    width: 40px;
    height: 40px;
  }
  body:not([data-chrome-mode="theatre"]) .library-panel .panel-heading { padding-left: 66px; }
  .app-layout.library-collapsed .reader-toolbar { padding-left: 70px; }

  .select-control > select,
  .select-control > .native-select-chevron { display: none; }
  .themed-select {
    position: relative;
    display: block;
    width: 100%;
  }
  .themed-select-trigger,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 38px;
    padding: 0 10px 0 12px;
    color: inherit;
    border: 0 !important;
    border-radius: calc(var(--button-radius) - 1px);
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
    text-align: left;
  }
  .themed-select-trigger:hover,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-trigger:hover {
    color: inherit;
    background: color-mix(in srgb, var(--native-menu-selected-bg) 14%, transparent) !important;
    box-shadow: none !important;
    transform: none;
  }
  .themed-select-trigger .themed-select-chevron {
    position: static;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    transition: transform .18s ease;
  }
  .select-control.menu-open { z-index: 125; border-color: var(--button-focus, var(--accent)); }
  .select-control.menu-open .themed-select-chevron { transform: rotate(180deg); }
  .themed-select-menu {
    position: absolute;
    z-index: 126;
    top: calc(100% + 5px);
    left: -1px;
    width: max(100%, 220px);
    max-height: min(68vh, 560px);
    padding: 5px;
    overflow-y: auto;
    color: var(--native-menu-ink);
    border: 1px solid var(--button-neutral-border, var(--line));
    border-radius: var(--button-radius);
    background: var(--native-menu-bg);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
    overscroll-behavior: contain;
    scrollbar-color: var(--native-menu-selected-bg) color-mix(in srgb, var(--native-menu-bg) 82%, #888);
    scrollbar-width: thin;
  }
  .themed-select-menu-chapters { width: max(100%, 150px); }
  .themed-select-menu button,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-menu button {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    color: var(--native-menu-ink);
    border: 0 !important;
    border-radius: calc(var(--button-radius) - 2px);
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500;
    text-align: left;
    transform: none;
  }
  .themed-select-menu button:hover,
  .themed-select-menu button:focus-visible,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-menu button:hover,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-menu button:focus-visible {
    color: var(--native-menu-selected-ink);
    outline: 1px solid color-mix(in srgb, var(--native-menu-selected-bg) 72%, transparent);
    outline-offset: -1px;
    background: color-mix(in srgb, var(--native-menu-selected-bg) 72%, var(--native-menu-bg)) !important;
    box-shadow: inset 3px 0 0 var(--native-menu-selected-bg) !important;
  }
  .themed-select-menu button.active,
  body[data-visual-style][data-chrome-mode] .reader-toolbar .themed-select-menu button.active {
    color: var(--native-menu-selected-ink);
    background: var(--native-menu-selected-bg) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--native-menu-selected-ink) 42%, transparent) !important;
    font-weight: 700;
  }
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"] .reader-shell::after,
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::after {
    top: 64px !important;
    right: 18px !important;
    left: 18px !important;
    height: 22px !important;
    -webkit-mask-size: 100% 100%, auto 100% !important;
    mask-size: 100% 100%, auto 100% !important;
  }
  body[data-visual-style="jacobean"] .reader-shell::before,
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before {
    top: 61px !important;
    bottom: 12px !important;
    -webkit-mask-position: left 5px top, right 5px top !important;
    -webkit-mask-repeat: repeat-y, repeat-y !important;
    -webkit-mask-size: 11px auto, 11px auto !important;
    mask-position: left 5px top, right 5px top !important;
    mask-repeat: repeat-y, repeat-y !important;
    mask-size: 11px auto, 11px auto !important;
  }
  .jacobean-corner {
    top: 57px;
    width: 31px;
    height: 31px;
  }
  .jacobean-corner-left { left: -1px; }
  .jacobean-corner-right { right: -1px; }
  .themed-select { display: none !important; }
  .select-control > select { display: block; }
  .select-control > .native-select-chevron { display: block; }
}

/* Final display refinements: five useful reading sizes, a single desktop mode
   switch, and source-backed ornament lanes for the Temple theme. */
#display-view .size-step-labels button,
#display-view .size-step-labels button:nth-child(n) {
  min-width: 0;
  height: 28px;
  font-size: 8px;
  line-height: 1.05;
  white-space: normal;
}

@media (min-width: 901px) {
  #display-view .display-mode-setting { display: none !important; }
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  content: "" !important;
  display: block !important;
}

body[data-visual-style="jerusalem"] {
  --temple-ornament-metal: linear-gradient(
    90deg,
    #694718 0%,
    #b98d35 20%,
    #edd887 48%,
    #a87927 78%,
    #624016 100%
  );
  --temple-side-metal: linear-gradient(180deg, #8d6323 0%, #d0ad58 48%, #74501d 100%);
  --temple-ornament-opacity: .72;
}

body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --temple-ornament-metal: linear-gradient(
    90deg,
    #5c3b19 0%,
    #a9792e 18%,
    #e2c56f 48%,
    #936625 78%,
    #4e3216 100%
  );
  --temple-side-metal: linear-gradient(180deg, #79501f 0%, #c69c47 48%, #624019 100%);
  --temple-ornament-opacity: .86;
}

body[data-visual-style="jerusalem"] .reader-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 66px;
  right: 30px;
  left: 30px;
  height: 30px;
  pointer-events: none;
  background: var(--temple-ornament-metal) !important;
  opacity: var(--temple-ornament-opacity);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    url("assets/materials/temple-botanical-frieze-v1.png");
  -webkit-mask-position: center, center;
  -webkit-mask-repeat: no-repeat, repeat-x;
  -webkit-mask-size: 100% 100%, auto 100%;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    url("assets/materials/temple-botanical-frieze-v1.png");
  mask-position: center, center;
  mask-repeat: no-repeat, repeat-x;
  mask-size: 100% 100%, auto 100%;
  mask-composite: intersect;
}

body[data-visual-style="jerusalem"] .reader-shell::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 66px;
  right: 0;
  bottom: 18px;
  left: 0;
  pointer-events: none;
  background: var(--temple-side-metal) !important;
  opacity: calc(var(--temple-ornament-opacity) - .08);
  -webkit-mask-image:
    url("assets/materials/temple-botanical-side-v1.png"),
    url("assets/materials/temple-botanical-side-v1.png");
  -webkit-mask-position: left 12px top, right 12px top;
  -webkit-mask-repeat: repeat-y, repeat-y;
  -webkit-mask-size: 16px auto, 16px auto;
  mask-image:
    url("assets/materials/temple-botanical-side-v1.png"),
    url("assets/materials/temple-botanical-side-v1.png");
  mask-position: left 12px top, right 12px top;
  mask-repeat: repeat-y, repeat-y;
  mask-size: 16px auto, 16px auto;
}

body[data-visual-style="jerusalem"][data-chrome-mode="theatre"] .reader-shell::after {
  content: none !important;
  display: none !important;
}

body[data-visual-style="jerusalem"][data-paper="antique"] .reading-opening .book-opening-edition,
body[data-visual-style="jerusalem"][data-paper="antique"][data-edition="pce"] .reading-opening .book-title-line:not(.book-title-line-last) {
  color: #76501e;
}

body[data-theme-tone="dark"]:not([data-paper="black"]) .reading-opening .book-opening-edition,
body[data-theme-tone="dark"]:not([data-paper="black"])[data-edition="pce"] .reading-opening .book-title-line:not(.book-title-line-last) {
  color: #76501e;
}

@media (max-width: 900px) {
  body[data-visual-style="illuminated"][data-theme-tone="dark"] .utility-panel {
    background-color: rgba(12, 13, 12, .97) !important;
  }
  body[data-visual-style="jacobean"][data-theme-tone="dark"] .utility-panel {
    background-color: rgba(42, 14, 21, .97) !important;
  }
  body[data-visual-style="jerusalem"][data-theme-tone="dark"] .utility-panel {
    background-color: rgba(22, 20, 17, .97) !important;
  }
  body[data-theme-tone="light"] .utility-panel {
    background-color: rgba(247, 244, 236, .97) !important;
  }
  body[data-visual-style="jerusalem"] .reader-shell::after {
    top: 64px;
    right: 18px;
    left: 18px;
    height: 22px;
  }
  body[data-visual-style="jerusalem"] .reader-shell::before {
    top: 61px;
    bottom: 12px;
    -webkit-mask-position: left 5px top, right 5px top;
    -webkit-mask-size: 10px auto, 10px auto;
    mask-position: left 5px top, right 5px top;
    mask-size: 10px auto, 10px auto;
  }
}

/* Jacobean binding geometry. These values follow the inner padding lane around
   the paper, so the ornament remains centered when the binding width changes. */
body[data-visual-style="jacobean"] {
  --jacobean-top-y: 69px;
  --jacobean-bottom-y: 11px;
  --jacobean-side-x: 8px;
  --jacobean-corner-y: calc(var(--jacobean-top-y) + 3px);
  --jacobean-bottom-corner-y: calc(var(--jacobean-bottom-y) + 3px);
  --jacobean-corner-x: calc(var(--jacobean-side-x) - 2px);
  --jacobean-corner-size: 48px;
  --jacobean-frieze-height: 30px;
  --jacobean-frame-padding: 40px;
  --jacobean-join-overlap: 5px;
  --jacobean-ornament-color: #b48735;
  --jacobean-ornament-opacity: .84;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --jacobean-ornament-color: #95815f;
  --jacobean-ornament-opacity: .8;
}

body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --jacobean-ornament-color: #b48735;
  --jacobean-ornament-opacity: .84;
}

body[data-visual-style="jacobean"] .reader-scroll {
  border-width: 3px !important;
  outline-width: 1px;
  outline-offset: -5px;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-visual-style="jacobean"][data-theme-tone="light"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  top: var(--jacobean-top-y) !important;
  right: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
  left: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
  height: var(--jacobean-frieze-height) !important;
  background: var(--jacobean-ornament-color) !important;
  opacity: var(--jacobean-ornament-opacity) !important;
  -webkit-mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: repeat-x !important;
  -webkit-mask-size: auto 100% !important;
  mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png") !important;
  mask-position: center !important;
  mask-repeat: repeat-x !important;
  mask-size: auto 100% !important;
}

body[data-visual-style="jacobean"] .reader-shell::before,
body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before {
  top: calc(var(--jacobean-corner-y) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
  right: 0 !important;
  bottom: calc(var(--jacobean-bottom-corner-y) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
  left: 0 !important;
  display: block !important;
  background: var(--jacobean-ornament-color) !important;
  opacity: var(--jacobean-ornament-opacity) !important;
  -webkit-mask-position:
    var(--jacobean-side-x) 0,
    calc(100% - var(--jacobean-side-x)) 0 !important;
  -webkit-mask-repeat: repeat-y, repeat-y !important;
  -webkit-mask-size: 20px auto, 20px auto !important;
  mask-position:
    var(--jacobean-side-x) 0,
    calc(100% - var(--jacobean-side-x)) 0 !important;
  mask-repeat: repeat-y, repeat-y !important;
  mask-size: 20px auto, 20px auto !important;
}

.jacobean-bottom-frieze {
  display: none;
  position: absolute;
  z-index: 6;
  right: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap));
  bottom: var(--jacobean-bottom-y);
  left: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap));
  height: var(--jacobean-frieze-height);
  pointer-events: none;
  background: var(--jacobean-ornament-color);
  opacity: var(--jacobean-ornament-opacity);
  transform: scaleY(-1);
  transform-origin: center;
  -webkit-mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png");
  -webkit-mask-position: center;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-image: url("assets/materials/jacobean-floral-border-wide-v2.png");
  mask-position: center;
  mask-repeat: repeat-x;
  mask-size: auto 100%;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-bottom-frieze {
  display: block;
}

.jacobean-corner {
  top: var(--jacobean-corner-y) !important;
  width: var(--jacobean-corner-size) !important;
  height: var(--jacobean-corner-size) !important;
  z-index: 7;
  background: var(--jacobean-ornament-color) !important;
  opacity: var(--jacobean-ornament-opacity) !important;
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner-left {
  left: var(--jacobean-corner-x) !important;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner-right {
  right: var(--jacobean-corner-x) !important;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner-bottom {
  top: auto !important;
  bottom: var(--jacobean-bottom-corner-y) !important;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner-bottom-left {
  left: var(--jacobean-corner-x) !important;
  transform: scaleY(-1) !important;
}

body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .jacobean-corner-bottom-right {
  right: var(--jacobean-corner-x) !important;
  transform: scale(-1, -1) !important;
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"] {
    --jacobean-top-y: 64px;
    --jacobean-bottom-y: 6px;
    --jacobean-side-x: 5px;
    --jacobean-bottom-corner-y: calc(var(--jacobean-bottom-y) + 3px);
    --jacobean-corner-x: calc(var(--jacobean-side-x) - 3px);
    --jacobean-corner-size: 34px;
    --jacobean-frieze-height: 22px;
    --jacobean-frame-padding: 30px;
  }

  body[data-visual-style="jacobean"] .reader-scroll {
    padding-top: var(--jacobean-frame-padding) !important;
    padding-bottom: var(--jacobean-frame-padding) !important;
  }

  body[data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
  body[data-visual-style="jacobean"][data-theme-tone="light"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
    right: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
    left: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
    height: 22px !important;
  }

  body[data-visual-style="jacobean"] .reader-shell::before,
  body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before {
    -webkit-mask-size: 11px auto, 11px auto !important;
    mask-size: 11px auto, 11px auto !important;
  }

  .jacobean-corner {
    -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
    mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  }
}

/* Page-turn controls remain available, but the redundant pagination caption
   no longer consumes a row beneath the book. */
.page-progress {
  display: none !important;
}

body[data-reading-mode="book"] .reader-scroll {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

/* Temple ornament belongs to the Bible page itself. The earlier shell-level
   frame drifted to the viewport edge whenever the paper used a contained width. */
body[data-visual-style="jerusalem"] .reader-shell::before,
body[data-visual-style="jerusalem"] .reader-shell::after {
  content: none !important;
  display: none !important;
}

/* Match the shaped Jacobean plaster edge in dark mode, recast in old gold. */
body[data-visual-style="jacobean"][data-theme-tone="dark"] .reader-scroll {
  border: 3px double #a37b31;
  outline: 1px solid rgba(239, 204, 112, .78);
  outline-offset: -5px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 139, .25),
    inset 0 0 22px rgba(0, 0, 0, .48),
    0 2px 8px rgba(0, 0, 0, .4);
}

/* Reading system v2: Pages and Scroll are formats; columns, spread, and
   scroll range remain independent choices. */
body {
  --selector-thumb: linear-gradient(180deg, #fff 0%, #e6e8e9 52%, #b8bdc0 100%);
  --selector-thumb-edge: #9da3a7;
  --selector-active-ink: #242321;
  --ornament-size: 48px;
  --ornament-band: 30px;
  --ornament-overlap: 5px;
  --ornament-inset: 3px;
  --ornament-fill: #a67c2e;
  --ornament-opacity: .86;
}

body[data-theme-tone="dark"] {
  --selector-thumb: linear-gradient(180deg, #f7dc82 0%, #c89c37 48%, #80601f 100%);
  --selector-thumb-edge: #ebcb6f;
  --selector-active-ink: #17130b;
}

body[data-visual-style="jacobean"] {
  --selector-thumb: linear-gradient(180deg, #d8bb70 0%, #a57a2d 48%, #70501f 100%);
  --selector-thumb-edge: #d6b866;
  --ornament-fill: #aa833d;
  --ornament-opacity: .88;
}

body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --selector-thumb: linear-gradient(180deg, #e2d2a5 0%, #b49a64 50%, #816e49 100%);
  --selector-thumb-edge: #ad9568;
  --ornament-fill: #95815f;
  --ornament-opacity: .82;
}

body[data-visual-style="jerusalem"] {
  --selector-thumb: linear-gradient(180deg, #e5cb77 0%, #b78b35 42%, #75501e 100%);
  --selector-thumb-edge: #dfc46f;
  --ornament-fill: #b18a3c;
  --ornament-opacity: .88;
}

.reader-toolbar .mode-control,
#display-view :is(.column-control, .spread-control, .scroll-scope-control) {
  --segments: 2;
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(var(--segments), minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden;
  padding: 3px !important;
  border: 1px solid color-mix(in srgb, var(--selector-thumb-edge) 70%, var(--line)) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--chrome-strong) 86%, transparent) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
}

#display-view .scroll-scope-control { --segments: 3; }

.reader-toolbar .mode-control::before,
#display-view :is(.column-control, .spread-control, .scroll-scope-control)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--segments));
  border: 1px solid var(--selector-thumb-edge);
  border-radius: 4px;
  background: var(--selector-thumb);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.3);
  transform: translateX(0);
  transition: transform .2s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}

body[data-reading-mode="scroll"] .reader-toolbar .mode-control::before,
body[data-text-columns="two"] #display-view .column-control::before,
body[data-page-spread="two"] #display-view .spread-control::before,
body[data-scroll-scope="book"] #display-view .scroll-scope-control::before { transform: translateX(100%); }
body[data-scroll-scope="bible"] #display-view .scroll-scope-control::before { transform: translateX(200%); }

.reader-toolbar .mode-control button,
#display-view :is(.column-control, .spread-control, .scroll-scope-control) button {
  position: relative;
  z-index: 1;
  min-width: 0 !important;
  color: var(--muted) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reader-toolbar .mode-control button.active,
#display-view :is(.column-control, .spread-control, .scroll-scope-control) button.active {
  color: var(--selector-active-ink) !important;
  text-shadow: 0 1px rgba(255,255,255,.22);
}

.reader-toolbar .mode-control { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.reader-toolbar { z-index: 40 !important; }
.reader-toolbar :is(.select-control, .themed-select, .themed-select-menu) { z-index: 70 !important; }

body[data-reading-mode="book"] .scroll-range-setting,
body[data-reading-mode="scroll"] .pages-format-setting { display: none !important; }
body[data-reading-mode="scroll"] .scroll-range-setting,
body[data-reading-mode="book"] .pages-format-setting { display: block !important; }

.theme-ornament-toggle,
.display-reference-group .layout-feature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--chrome-strong) 68%, transparent);
}
.theme-ornament-toggle[hidden] { display: none !important; }
.theme-ornament-toggle span,
.display-reference-group .layout-feature-toggle span { display: grid; gap: 2px; }
.theme-ornament-toggle small,
.display-reference-group .layout-feature-toggle small { color: var(--muted); }
.theme-ornament-toggle > span:first-child { min-width: 0; }
.theme-ornament-toggle .theme-ornament-switch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}
.theme-ornament-toggle .theme-ornament-state {
  min-width: 18px;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
}
.theme-ornament-toggle:has(input:checked) .theme-ornament-state { color: var(--style-gold-deep); }
body:is([data-chrome-mode="dark"], [data-chrome-mode="theatre"]) .theme-ornament-toggle:has(input:checked) .theme-ornament-state { color: var(--style-gold-bright); }

/* Scroll ranges and their direction-aware page-roll transition. */
.scroll-range,
.bible-scroll-flow,
.bible-scroll-book { display: block; min-width: 0; }
.bible-scroll-book + .bible-scroll-book {
  margin-top: clamp(50px, 8vh, 92px);
  padding-top: clamp(34px, 5vh, 62px);
  border-top: 1px solid var(--reader-rule);
}
.bible-scroll-sentinel { display: block; width: 100%; height: 1px; pointer-events: none; }
.bible-scroll-sentinel[hidden] { display: none; }

.scroll-range-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  margin: clamp(48px, 8vh, 86px) 0 8px;
  padding-top: 22px;
  border-top: 1px solid var(--reader-rule);
}
.scroll-range-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--selector-active-ink);
  border: 1px solid var(--selector-thumb-edge);
  border-radius: 5px;
  background: var(--selector-thumb);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.18);
  font-weight: 700;
  text-decoration: none;
}
.scroll-range-footer a:last-child { grid-column: 2; }
.scroll-range-footer svg { width: 17px; height: 17px; }

@keyframes scroll-roll-out-next { to { opacity: 0; transform: translate3d(-9%,0,0); } }
@keyframes scroll-roll-out-previous { to { opacity: 0; transform: translate3d(9%,0,0); } }
@keyframes scroll-roll-in-next { from { opacity: 0; transform: translate3d(9%,0,0); } }
@keyframes scroll-roll-in-previous { from { opacity: 0; transform: translate3d(-9%,0,0); } }
.paper.scroll-range-exit-next { animation: scroll-roll-out-next .165s ease-in both; }
.paper.scroll-range-exit-previous { animation: scroll-roll-out-previous .165s ease-in both; }
.paper.scroll-range-enter-next { animation: scroll-roll-in-next .25s ease-out both; }
.paper.scroll-range-enter-previous { animation: scroll-roll-in-previous .25s ease-out both; }
body[data-reading-mode="scroll"] .reader-scroll { overflow-x: hidden; }

/* A single ornament geometry for Jacobean and Temple. The fixed top, bottom,
   and corners are aligned to the measured paper; the repeating side work is
   attached to the paper and therefore travels naturally in Scroll format. */
body:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell {
  position: relative;
}
body:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell::before {
  content: none !important;
  display: none !important;
}
body:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell::after,
.reader-ornament-bottom,
.reader-ornament-corner { display: none !important; pointer-events: none; }

body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: 8;
  top: var(--ornament-frame-top, 68px) !important;
  left: calc(var(--ornament-paper-left, 18px) + var(--ornament-inset) + var(--ornament-size) - var(--ornament-overlap)) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--ornament-inset) + var(--ornament-size) - var(--ornament-overlap)) !important;
  width: auto !important;
  height: var(--ornament-band) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
  transform: none !important;
}
body[data-ornaments="true"][data-visual-style="jacobean"] .reader-shell::after {
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}
body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-shell::after {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-bottom {
  display: block !important;
  position: absolute;
  z-index: 8;
  top: auto !important;
  bottom: var(--ornament-frame-bottom, 8px) !important;
  left: calc(var(--ornament-paper-left, 18px) + var(--ornament-inset) + var(--ornament-size) - var(--ornament-overlap)) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--ornament-inset) + var(--ornament-size) - var(--ornament-overlap)) !important;
  height: var(--ornament-band) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
  transform: scaleY(-1) !important;
}
body[data-ornaments="true"][data-visual-style="jacobean"] .reader-ornament-bottom {
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}
body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-bottom {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-corner {
  display: block !important;
  position: absolute !important;
  z-index: 9 !important;
  top: var(--ornament-frame-top, 68px) !important;
  width: var(--ornament-size) !important;
  height: var(--ornament-size) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
}
.reader-ornament-corner-left,
.reader-ornament-corner-bottom-left { left: calc(var(--ornament-paper-left, 18px) - (var(--ornament-size) / 2)) !important; }
.reader-ornament-corner-right,
.reader-ornament-corner-bottom-right { right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) - (var(--ornament-size) / 2)) !important; }
body[data-ornaments="true"] .reader-ornament-corner-right { transform: scaleX(-1) !important; }
body[data-ornaments="true"] .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--ornament-frame-bottom, 8px) !important;
}
body[data-ornaments="true"] .reader-ornament-corner-bottom-left { transform: scaleY(-1) !important; }
body[data-ornaments="true"] .reader-ornament-corner-bottom-right { transform: scale(-1,-1) !important; }
body[data-ornaments="true"][data-visual-style="jacobean"] .reader-ornament-corner {
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}
body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-corner {
  -webkit-mask-image: url("assets/materials/temple-botanical-frieze-v1-alpha.png"), url("assets/materials/temple-botanical-side-v1-alpha.png") !important;
  -webkit-mask-position: left top, left top !important;
  -webkit-mask-size: auto 20px, 20px auto !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-image: url("assets/materials/temple-botanical-frieze-v1-alpha.png"), url("assets/materials/temple-botanical-side-v1-alpha.png") !important;
  mask-position: left top, left top !important;
  mask-size: auto 20px, 20px auto !important;
  mask-repeat: no-repeat !important;
}

body:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .paper::before { content: none !important; display: none !important; }
.reader-ornament-side { display: none; pointer-events: none; }
body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-side {
  display: block;
  position: absolute;
  z-index: 8;
  top: var(--ornament-scroll-paper-top, 0px);
  width: 22px;
  height: var(--ornament-paper-height, 100%);
  background: var(--ornament-fill);
  opacity: var(--ornament-opacity);
}
.reader-ornament-side-left { left: calc(var(--ornament-scroll-paper-left, 18px) - 25px); }
.reader-ornament-side-right { right: calc(100% - var(--ornament-scroll-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) - 25px); }
body[data-ornaments="true"][data-visual-style="jacobean"] .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / 20px auto repeat-y;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / 20px auto repeat-y;
}
body[data-ornaments="true"][data-visual-style="jacobean"] .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / 20px auto repeat-y;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / 20px auto repeat-y;
}
body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-side {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / 20px auto repeat-y;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / 20px auto repeat-y;
}

body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"])[data-reading-mode="scroll"] .reader-scroll {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

/* Theme typography belongs to the application chrome, not the Bible text. */
body[data-visual-style="illuminated"] :is(.app-header, .reader-toolbar, .library-panel, .utility-panel, .mobile-nav, .theatre-edge-controls) {
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
}
body[data-visual-style="jacobean"] :is(.app-header, .reader-toolbar, .library-panel, .utility-panel, .mobile-nav, .theatre-edge-controls) {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
}
body[data-visual-style="jacobean"] :is(.panel-heading h2, .tool-view h2, .tool-view h3, .eyebrow, .source-intro h3, .audio-custom-header h2) {
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
}
body[data-visual-style="jerusalem"] :is(.app-header, .reader-toolbar, .library-panel, .utility-panel, .mobile-nav, .theatre-edge-controls) {
  font-family: "Gentium Book Plus", Georgia, serif;
}
body[data-visual-style="jerusalem"] :is(.panel-heading h2, .tool-view h2, .tool-view h3, .eyebrow, .themed-select-trigger, .themed-select-menu, .testament-tabs) {
  font-family: Cinzel, "Times New Roman", serif;
}
body[data-visual-style] :is(.app-header, .reader-toolbar, .library-panel, .utility-panel, .mobile-nav, .theatre-edge-controls) :is(button, input, select, textarea) {
  font-family: inherit;
}
body[data-visual-style] :is(.book-number, .book-chapters, .themed-select-menu, .themed-select-trigger) {
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 900px) {
  :root {
    --mobile-nav-height: calc(62px + env(safe-area-inset-bottom));
  }

  body { --ornament-size: 34px; --ornament-band: 22px; }
  .reader-toolbar .mode-control {
    display: none !important;
    width: 92px;
  }
  .reader-toolbar .mode-control button { width: 42px; min-width: 42px !important; padding: 0 !important; }
  .reader-toolbar .mode-control button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"])[data-reading-mode="scroll"] .reader-scroll {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
  body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-side {
    width: 10px;
    -webkit-mask-size: 9px auto;
    mask-size: 9px auto;
  }
  body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-side-left {
    left: max(0px, calc(var(--ornament-scroll-paper-left, 10px) - 10px));
  }
  body[data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-side-right {
    right: max(0px, calc(100% - var(--ornament-scroll-paper-left, 10px) - var(--ornament-paper-width, calc(100% - 20px)) - 10px));
  }
  .scroll-range-footer { gap: 8px; }
  .scroll-range-footer a { min-height: 42px; padding-inline: 9px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper.scroll-range-exit-next,
  .paper.scroll-range-exit-previous,
  .paper.scroll-range-enter-next,
  .paper.scroll-range-enter-previous { animation: none !important; }
  .reader-toolbar .mode-control::before,
  #display-view :is(.column-control, .spread-control, .scroll-scope-control)::before { transition: none; }
}

@media (max-width: 900px) {
  body[data-visual-style="jacobean"][data-theme-tone="dark"] .reader-scroll {
    border-width: 2px;
    outline-offset: -4px;
  }
}

/* Visual audit repairs ----------------------------------------------------- */

/* Theatre drawers resize the reading surface. Nothing blurs or covers the
   Bible, and opening the top navigation creates real vertical room for it. */
body[data-chrome-mode="theatre"] .app-layout,
body[data-chrome-mode="theatre"] .app-layout.utility-open {
  position: fixed;
  inset: 0;
  height: auto !important;
  transition: top .24s cubic-bezier(.22,.8,.24,1);
}
body[data-chrome-mode="theatre"].theatre-top-open .app-layout {
  top: var(--theatre-top-height);
}
body[data-chrome-mode="theatre"].theatre-top-open :is(.library-panel, .utility-panel) {
  top: var(--theatre-top-height);
  height: auto;
}
body[data-chrome-mode="theatre"] .reader-shell {
  height: 100% !important;
  margin-left: 0;
  transition:
    width .24s cubic-bezier(.22,.8,.24,1),
    margin-left .24s cubic-bezier(.22,.8,.24,1);
}
body[data-chrome-mode="theatre"] .reader-scroll {
  height: 100% !important;
}
body[data-chrome-mode="theatre"] :is(.library-panel, .utility-panel) {
  transition:
    transform .24s cubic-bezier(.22,.8,.24,1),
    top .24s cubic-bezier(.22,.8,.24,1);
}

@media (min-width: 901px) {
  body[data-chrome-mode="theatre"] {
    --theatre-library-width: min(29vw, 360px);
  }
  body[data-chrome-mode="theatre"] .app-layout.library-open .library-panel {
    width: var(--theatre-library-width);
  }
  body[data-chrome-mode="theatre"] .app-layout.library-open .reader-shell {
    width: calc(100% - var(--theatre-library-width));
    margin-left: var(--theatre-library-width);
  }
  body[data-chrome-mode="theatre"] .app-layout.library-open.utility-open .reader-shell {
    width: calc(100% - var(--theatre-library-width) - var(--theatre-utility-width));
    margin-left: var(--theatre-library-width);
  }
}

/* Fixed ornament bands receive an opaque material lane beneath them. This
   preserves the decorative frame while preventing text from passing through
   either the top or bottom work during Scroll reading. */
.reader-ornament-guard {
  display: none;
  pointer-events: none;
}
body[data-ornaments="true"][data-reading-mode="scroll"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-guard {
  position: absolute;
  z-index: 7;
  display: block;
  left: var(--ornament-paper-left, 18px);
  width: var(--ornament-paper-width, calc(100% - 36px));
  height: calc(var(--ornament-band) + 14px);
  background-color: var(--window-material-color, #21170f);
  background-image:
    var(--window-material-glow, none),
    var(--window-material-overlay, none),
    var(--window-material-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ornament-fill) 38%, transparent);
}
body[data-ornaments="true"][data-reading-mode="scroll"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-guard-top {
  top: max(0px, calc(var(--ornament-frame-top, 68px) - 7px));
}
body[data-ornaments="true"][data-reading-mode="scroll"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-ornament-guard-bottom {
  bottom: max(0px, calc(var(--ornament-frame-bottom, 8px) - 7px));
}
body[data-ornaments="true"][data-reading-mode="scroll"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .paper > :is(.scroll-range, .bible-scroll-flow) {
  padding-top: calc(var(--ornament-band) + 18px);
}
body[data-chrome-mode="theatre"] :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
}
body[data-chrome-mode="theatre"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell::after {
  display: none !important;
}

/* Full-width paper remains full-width, but a single Scroll column keeps a
   readable measure on ultrawide displays. */
body[data-reading-mode="scroll"][data-text-columns="one"][data-center-references="false"] .paper > :is(.scroll-range, .bible-scroll-flow) {
  width: min(100%, 1040px);
  margin-inline: auto;
}

/* The same six paper surfaces remain shared by every theme. Ancient receives
   a quieter glaze so it reads as parchment rather than flat mustard. */
body[data-paper="antique"] {
  --paper: #e6cf96;
  --paper-edge: #b58c48;
  --paper-texture:
    linear-gradient(rgba(242,220,162,.18), rgba(202,159,79,.08)),
    var(--ancient-scroll-source);
  --paper-texture-size: 100% 100%, cover;
}
body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"] .paper {
  background-image:
    linear-gradient(to bottom, rgba(242,220,162,.12) 0%, rgba(202,159,79,.07) 50%, rgba(242,220,162,.12) 100%),
    var(--ancient-scroll-roll-source) !important;
  background-size: 100% var(--continuous-paper-height), auto var(--continuous-paper-height) !important;
}

/* Selection and active narration remain gold but have separate visual jobs:
   selection is a quiet fill with a ring, while playback is an unmistakable
   underline. Line-layout and concordance verses permanently reserve a small
   inline gutter for their inset ring. Flowing Block and Paragraph prose keep
   a one-pixel gutter on the flow container and paint the ring outside the
   selected fragments, so selection never changes line wrapping. */
:root {
  --reader-highlight: #ead47d;
  --reader-highlight-ring: #b88a24;
  --reader-highlight-gutter: max(6px, .18em);
}
body[data-text-layout="line"] .verse,
.concord-verse {
  box-sizing: border-box;
  padding-inline: var(--reader-highlight-gutter);
}
body:is([data-text-layout="block"], [data-text-layout="paragraph"]) .verse-flow {
  padding-inline: 1px;
}
body:is([data-text-layout="block"], [data-text-layout="paragraph"]) .verse.selected {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0;
}
.verse.selected {
  box-shadow: inset 0 0 0 2px var(--reader-highlight-ring);
}
body:is([data-text-layout="block"], [data-text-layout="paragraph"]) .verse.selected {
  box-shadow: 0 0 0 1px var(--reader-highlight-ring);
}
.verse.selected.narrating .verse-text {
  text-decoration-color: #9b6c05;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
body[data-paper="black"] .verse.selected.narrating .verse-text {
  text-decoration-color: #ffd867;
}

/* Temple controls keep their hierarchy in both brightness modes. */
body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --ornament-fill: #89631d;
  --ornament-opacity: .96;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .utility-panel {
  color: #eee5d5;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .utility-panel :is(
  h2, h3, label, legend, .setting-title, .setting-copy, .search-summary,
  .search-mode-help, .reference-summary, .study-source-note, small
) {
  color: #d8cbb7;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] #display-view button:not(.active):not([aria-pressed="true"]),
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .tool-tabs button:not(.active) {
  color: #d3b45e !important;
}
body[data-visual-style="jerusalem"][data-theme-tone="dark"] :is(.tool-tabs, .segmented-control) button.active,
body[data-visual-style="jerusalem"][data-theme-tone="dark"] :is(.tool-tabs, .segmented-control) button[aria-pressed="true"] {
  color: #1f190e !important;
}

/* Active mode remains obvious even where a theme's metallic thumb is subtle. */
.reader-toolbar .mode-control button.active,
.reader-toolbar .mode-control button[aria-pressed="true"] {
  font-weight: 800;
  text-shadow: 0 1px rgba(255,255,255,.34);
}
body[data-visual-style="jerusalem"][data-theme-tone="light"] .reader-toolbar .mode-control {
  border-color: #8f6b28;
  box-shadow: inset 0 0 0 1px rgba(255,246,204,.48), 0 1px 3px rgba(69,45,12,.18);
}

/* Tool prose should be readable without enlarging Scripture-result typography. */
.utility-content :is(
  .search-mode-help, .search-summary, .setting-copy, .study-source-note,
  .reference-summary, .source-intro p, .study-method-note, small
) {
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 520px) {
  body[data-reading-mode="book"] .reader-scroll {
    padding-inline: 34px;
  }
  body[data-reading-mode="book"] .paper {
    padding-inline: 30px;
  }
  body[data-reading-mode="book"] .page-turn {
    width: 28px;
    height: 92px;
    color: var(--reader-accent);
    border: 1px solid color-mix(in srgb, var(--reader-accent) 35%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
  }
  body[data-reading-mode="book"] .page-turn-previous { left: 2px; }
  body[data-reading-mode="book"] .page-turn-next { right: 2px; }
  body[data-edition="he1611"] .chapter-heading,
  body[data-edition="he1611"] .printed-chapter-title {
    color: var(--reader-ink);
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.48;
  }
}

/* Authoritative visual-audit layer. This deliberately follows every legacy
   theme rule so retired layouts cannot leak back into the live reader. */
.segmented-control {
  --segments: 2;
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: repeat(var(--segments), minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-width: 0;
  min-height: 40px !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid var(--button-tray-border) !important;
  border-radius: 6px !important;
  background: var(--button-tray-bg) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2) !important;
}
.segmented-control:is(.layout-control,.scroll-scope-control) { --segments: 3; }
.segmented-control::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  box-sizing: border-box !important;
  inset: 3px auto 3px 3px !important;
  display: block !important;
  width: calc((100% - 6px) / var(--segments)) !important;
  border: 1px solid var(--selector-thumb-edge) !important;
  border-radius: 4px !important;
  background: var(--selector-thumb) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.52), 0 1px 3px rgba(0,0,0,.28) !important;
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}
.segmented-control:has(> button:nth-child(2):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(100%);
}
.segmented-control:has(> button:nth-child(3):is(.active,[aria-pressed="true"],[aria-selected="true"]))::before {
  transform: translateX(200%);
}
.segmented-control > button,
#display-view .segmented-control > button {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
.segmented-control > button:hover:not(:disabled) {
  color: var(--button-neutral-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.segmented-control > :is(button.active,button[aria-pressed="true"],button[aria-selected="true"]) {
  color: var(--selector-active-ink) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
.segmented-control svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}
body[data-visual-style="jacobean"] .segmented-control > button {
  font-family: "EB Garamond Local", Garamond, Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
body[data-visual-style="jerusalem"] .segmented-control > button {
  font-family: Cinzel, "Times New Roman", serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

#display-view .display-layout-group { grid-column: 1 / -1 !important; }
#display-view .display-page-group { grid-column: 1 / 2 !important; }
#display-view .display-page-features { grid-column: 2 / 3 !important; }
#display-view .display-layout-group,
#display-view .display-page-group,
#display-view .display-page-features { border-top: 1px solid var(--line) !important; }
#display-view .display-page-features { padding-top: 12px !important; }
#display-view .page-feature-grid { display: block !important; }
#display-view .compact-spread-setting {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#display-view :is(.column-control,.spread-control) > button {
  gap: 3px !important;
  padding-inline: 4px !important;
  font-size: 11px !important;
}
body[data-visual-style="jacobean"] #display-view :is(.column-control,.spread-control) > button {
  font-size: 13px !important;
}
body[data-visual-style="jerusalem"] #display-view :is(.column-control,.spread-control) > button {
  font-size: 9px !important;
}

#display-view .size-control {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 2px !important;
  padding: 0 2px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
#display-view .size-step-labels button { display: none !important; }
#display-view .size-step-labels {
  display: grid !important;
  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  gap: 4px !important;
}

#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"] {
  appearance: none !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 22px !important;
  margin: 0 !important;
  border: 1px solid var(--button-neutral-border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--chrome-strong) 88%, transparent) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28) !important;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--button-neutral-bg) !important;
  box-shadow: var(--button-neutral-shadow) !important;
  transform: none;
  transition: transform .18s ease, background .18s ease;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked {
  border-color: var(--selector-thumb-edge) !important;
  background: color-mix(in srgb, var(--selector-thumb-edge) 58%, var(--chrome-strong)) !important;
}
#display-view :is(.theme-ornament-toggle,.layout-feature-toggle,.toggles label) input[type="checkbox"]:checked::before {
  background: var(--selector-thumb) !important;
  transform: translateX(18px) !important;
}

body[data-reading-mode="scroll"] :is(.reader-ornament-guard,.reader-ornament-corner) {
  display: none !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-scroll {
  position: relative !important;
  z-index: 1 !important;
  padding-top: 56px !important;
  padding-bottom: 76px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper {
  position: relative !important;
  z-index: 3 !important;
  outline: 0 !important;
  box-shadow: var(--paper-shadow) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .paper > :is(.scroll-range,.bible-scroll-flow) {
  padding-top: 0 !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-shell::after {
  display: block !important;
  z-index: 0 !important;
  top: calc(var(--reader-toolbar-height,58px) + 8px) !important;
  right: 28px !important;
  left: 28px !important;
  width: auto !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-bottom {
  display: block !important;
  z-index: 0 !important;
  right: 28px !important;
  bottom: 8px !important;
  left: 28px !important;
  opacity: calc(var(--ornament-opacity) * .72) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: var(--ornament-scroll-paper-top,0px) !important;
  width: 22px !important;
  height: var(--ornament-paper-height,100%) !important;
  pointer-events: none !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left,18px) - 29px) !important;
}
body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side-right {
  right: calc(100% - var(--ornament-scroll-paper-left,18px) - var(--ornament-paper-width,calc(100% - 36px)) - 29px) !important;
}
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: var(--ornament-frame-top,68px) !important;
  bottom: auto !important;
}
body[data-reading-mode="book"][data-ornaments="true"] .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--ornament-frame-bottom,8px) !important;
}

.scroll-range-footer {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  padding-block: 20px 6px !important;
  border-top: 1px solid var(--reader-rule) !important;
}
.scroll-range-footer a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: max-content !important;
  min-width: 150px !important;
  max-width: 100% !important;
  min-height: 40px !important;
  padding: 7px 14px !important;
  color: var(--button-neutral-ink) !important;
  border: 1px solid var(--button-neutral-border) !important;
  border-radius: var(--button-radius) !important;
  background: var(--button-neutral-bg) !important;
  box-shadow: var(--button-neutral-shadow), var(--button-water-shadow) !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.scroll-range-footer a:first-child { justify-self: start !important; }
.scroll-range-footer a:last-child { grid-column: 2 !important; justify-self: end !important; }
body[data-visual-style="jacobean"] .scroll-range-footer a {
  font-family: "EB Garamond Local", Garamond, Georgia, serif !important;
  font-size: 14px !important;
}
body[data-visual-style="jerusalem"] .scroll-range-footer a {
  font-family: Cinzel, "Times New Roman", serif !important;
  font-size: 10px !important;
}

body[data-chrome-mode="theatre"] :is(.reader-ornament-guard,.reader-ornament-bottom,.reader-ornament-corner) {
  display: none !important;
}
body[data-chrome-mode="theatre"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-shell::after {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-reading-mode="scroll"][data-ornaments="true"]:is([data-visual-style="jacobean"],[data-visual-style="jerusalem"]) .reader-ornament-side {
    display: none !important;
  }
}
@media (max-width: 760px) {
  #display-view .display-page-group,
  #display-view .display-page-features { grid-column: 1 / -1 !important; }
  .scroll-range-footer { gap: 8px !important; }
  .scroll-range-footer a { width: 100% !important; min-width: 0 !important; padding-inline: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .segmented-control::before { transition: none !important; }
}

#display-view .display-scroll-group {
  grid-column: 1 / -1 !important;
  border-top: 1px solid var(--line) !important;
}

body[data-ornaments="true"][data-reading-mode="scroll"][data-visual-style] .reader-shell > :is(
  .reader-ornament-guard,
  .reader-ornament-corner
) {
  display: none !important;
}

/* Solomon's Temple reliefs. These fixed, full-height columns use the biblical
   cherub-palm-open-flower program without presenting one speculative figure as
   an exact reconstruction of Solomon's carving. */
body[data-visual-style="jerusalem"] .reader-shell {
  --temple-column-width: min(380px, max(0px, calc(var(--ornament-scroll-paper-left, 220px) - 54px)));
}

body[data-visual-style="jerusalem"] .reader-shell::after,
body[data-visual-style="jerusalem"] :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-visual-style="jerusalem"] .reader-ornament-side {
  display: none !important;
  pointer-events: none !important;
}

body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-side {
  display: block !important;
  position: fixed !important;
  z-index: 1 !important;
  top: var(--temple-column-top, 126px) !important;
  width: var(--temple-column-width) !important;
  height: var(--temple-column-height, calc(100vh - 126px)) !important;
  opacity: .91 !important;
  background-color: transparent !important;
  background-image: url("assets/materials/temple-relief-column-v2.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  filter: drop-shadow(0 8px 11px rgba(28, 17, 3, .34))
          drop-shadow(0 0 1px rgba(255, 225, 128, .42));
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-side-left {
  left: var(--temple-column-left, 16px) !important;
  right: auto !important;
}

body[data-ornaments="true"][data-visual-style="jerusalem"] .reader-ornament-side-right {
  right: var(--temple-column-right, 16px) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body[data-visual-style="jerusalem"][data-theme-tone="light"] .reader-ornament-side {
  filter: drop-shadow(0 8px 12px rgba(63, 41, 8, .24))
          drop-shadow(0 0 1px rgba(103, 66, 7, .38));
}

@container (max-width: 1120px) {
  body[data-visual-style="jerusalem"] .reader-ornament-side {
    display: none !important;
  }
}

/* Win over the older Scroll-specific frame selectors without disturbing the
   Jacobean implementation. */
body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] .reader-shell::after,
body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: fixed !important;
  top: var(--temple-column-top, 126px) !important;
  width: var(--temple-column-width) !important;
  height: var(--temple-column-height, calc(100vh - 126px)) !important;
}

body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side-left {
  left: var(--temple-column-left, 16px) !important;
  right: auto !important;
}

body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side-right {
  right: var(--temple-column-right, 16px) !important;
  left: auto !important;
}

@container (max-width: 1120px) {
  body[data-reading-mode][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side {
    display: none !important;
  }
}

/* Authoritative button audit. Every command uses one material vocabulary per
   theme; adjacent alternatives use a sliding selector instead of tiled cards. */
body[data-visual-style="illuminated"] {
  --button-ui-font: "Atkinson Hyperlegible Next", Arial, sans-serif;
  --button-ui-size: 12px;
}
body[data-visual-style="jacobean"] {
  --button-ui-font: "EB Garamond Local", Garamond, Georgia, serif;
  --button-ui-size: 14px;
}
body[data-visual-style="jerusalem"] {
  --button-ui-font: Cinzel, "Times New Roman", serif;
  --button-ui-size: 11px;
}
body[data-visual-style][data-chrome-mode] {
  --selector-thumb: var(--button-active-bg);
  --selector-thumb-edge: var(--button-active-border);
  --selector-active-ink: var(--button-active-ink);
}

body[data-visual-style][data-chrome-mode] :is(
  .global-search button,
  .reader-toolbar button,
  .utility-panel button,
  .reference-trail button,
  .verse-margin-actions button,
  .scroll-range-footer a
) {
  font-family: var(--button-ui-font) !important;
}

body[data-visual-style][data-chrome-mode] .study-tabs.segmented-control {
  --segments: 2;
  min-height: 44px !important;
  margin-bottom: 16px;
}
body[data-visual-style][data-chrome-mode] .study-tabs.segmented-control > button {
  min-height: 36px !important;
  height: 36px !important;
  font-family: var(--button-ui-font) !important;
  font-size: var(--button-ui-size) !important;
}

body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control {
  --segments: 3;
  min-height: 64px !important;
  margin-bottom: 14px;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > button {
  flex-direction: column !important;
  gap: 4px !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 5px 3px !important;
  font-family: var(--button-ui-font) !important;
  font-size: var(--button-ui-size) !important;
  text-align: center;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > button strong {
  color: inherit !important;
  font-family: inherit !important;
  font-size: 1em !important;
  line-height: 1 !important;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > button small {
  color: color-mix(in srgb, var(--button-neutral-ink) 70%, transparent) !important;
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > :is(
  button.active,
  button[aria-checked="true"]
) {
  color: var(--selector-active-ink) !important;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > :is(
  button.active,
  button[aria-checked="true"]
) small {
  color: color-mix(in srgb, var(--selector-active-ink) 76%, transparent) !important;
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control:has(> button:nth-child(2)[aria-checked="true"])::before {
  transform: translateX(100%);
}
body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control:has(> button:nth-child(3)[aria-checked="true"])::before {
  transform: translateX(200%);
}

/* Reference sources are independent, so retain checkboxes while giving them
   the same metal, selected edge, keyboard focus, and disabled language. */
body[data-visual-style][data-chrome-mode] .reference-sources label {
  position: relative;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 56px;
  padding: 10px 11px;
  color: var(--button-neutral-ink);
  border: 1px solid var(--button-tray-border);
  border-radius: var(--button-radius);
  background: var(--button-tray-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.22);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
body[data-visual-style][data-chrome-mode] .reference-sources label:hover {
  border-color: color-mix(in srgb, var(--button-neutral-border) 68%, var(--button-focus));
  background: color-mix(in srgb, var(--button-tray-bg) 88%, var(--button-neutral-hover-bg));
}
body[data-visual-style][data-chrome-mode] .reference-sources label:has(input:checked) {
  border-color: color-mix(in srgb, var(--button-active-border) 78%, var(--button-tray-border));
  box-shadow: inset 3px 0 0 var(--selector-thumb-edge), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.22);
}
body[data-visual-style][data-chrome-mode] .reference-sources input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  color: var(--button-active-ink);
  border: 1px solid var(--button-neutral-border);
  border-radius: 3px;
  background: var(--button-neutral-bg);
  box-shadow: var(--button-neutral-shadow);
  cursor: pointer;
}
body[data-visual-style][data-chrome-mode] .reference-sources input::before {
  content: "\2713";
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .14s ease, transform .14s ease;
}
body[data-visual-style][data-chrome-mode] .reference-sources input:checked {
  border-color: var(--button-active-border);
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}
body[data-visual-style][data-chrome-mode] .reference-sources input:checked::before {
  opacity: 1;
  transform: scale(1);
}
body[data-visual-style][data-chrome-mode] .reference-sources input:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 2px;
}
body[data-visual-style][data-chrome-mode] .reference-sources strong {
  color: inherit;
  font-family: var(--button-ui-font);
  font-size: var(--button-ui-size);
  line-height: 1.15;
}
body[data-visual-style][data-chrome-mode] .reference-sources small {
  color: color-mix(in srgb, var(--button-neutral-ink) 72%, transparent);
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
  font-size: 10px;
}

/* Page turns are book hardware: compact, tactile, and consistently active
   gold instead of generic dark rectangles. */
body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn {
  width: clamp(36px, 2.6vw, 44px) !important;
  height: clamp(92px, 15vh, 124px) !important;
  padding: 0 !important;
  color: var(--button-active-ink) !important;
  border: 1px solid var(--button-active-border) !important;
  border-style: solid !important;
  border-radius: var(--button-radius) !important;
  background: var(--button-active-bg) !important;
  box-shadow: var(--button-active-shadow) !important;
}
body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn:hover:not(:disabled) {
  color: var(--button-active-ink) !important;
  border-color: var(--button-active-border) !important;
  background: var(--button-active-hover-bg) !important;
  box-shadow: var(--button-active-shadow), 0 0 0 1px color-mix(in srgb, var(--button-focus) 28%, transparent) !important;
}
body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn:active:not(:disabled) {
  background: var(--button-pressed-bg) !important;
  box-shadow: inset 0 3px 7px rgba(31,20,4,.4), inset 0 0 0 1px rgba(255,242,174,.16) !important;
  transform: translateY(1px) !important;
}
body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn svg {
  width: 23px !important;
  height: 23px !important;
  stroke-width: 1.8;
}

/* Previous and next chapter/book controls are primary reader navigation. */
body[data-visual-style][data-chrome-mode] .scroll-range-footer a {
  min-height: 44px !important;
  color: var(--button-active-ink) !important;
  border: 1px solid var(--button-active-border) !important;
  border-style: solid !important;
  background: var(--button-active-bg) !important;
  box-shadow: var(--button-active-shadow) !important;
  font-family: var(--button-ui-font) !important;
  font-size: var(--button-ui-size) !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
}
body[data-visual-style][data-chrome-mode] .scroll-range-footer a:hover {
  color: var(--button-active-ink) !important;
  border-color: var(--button-active-border) !important;
  background: var(--button-active-hover-bg) !important;
  box-shadow: var(--button-active-shadow), 0 0 0 1px color-mix(in srgb, var(--button-focus) 28%, transparent) !important;
}
body[data-visual-style][data-chrome-mode] .scroll-range-footer a:active {
  background: var(--button-pressed-bg) !important;
  box-shadow: inset 0 3px 7px rgba(31,20,4,.4), inset 0 0 0 1px rgba(255,242,174,.16) !important;
  transform: translateY(1px);
}
body[data-visual-style][data-chrome-mode] .scroll-range-footer a:focus-visible {
  outline: 2px solid var(--button-focus);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn {
    width: 30px !important;
    height: 88px !important;
  }
  body[data-visual-style][data-chrome-mode] .reference-depth.segmented-control > button small {
    font-size: 8px !important;
  }
}

/* Center-reference count belongs beside its on/off control. Display and
   Study use the same plain-language labels while retaining separate choices. */
#display-view .display-reference-group {
  display: grid;
  grid-template-columns: minmax(112px, .78fr) minmax(178px, 1.22fr);
  align-items: center;
  gap: 8px;
}
#display-view .display-reference-group .layout-feature-toggle {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 8px;
}
#display-view .display-reference-group .layout-feature-toggle > span {
  min-width: 0;
}
#display-view .display-reference-group .layout-feature-toggle strong {
  line-height: 1.15;
}
body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control {
  --segments: 3;
  min-width: 0;
  min-height: 44px !important;
  margin: 0;
  padding: 3px !important;
}
body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control > button {
  flex-direction: row !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 3px !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}
body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control > button strong {
  overflow: hidden;
  font-size: inherit !important;
  line-height: 1 !important;
  text-overflow: clip;
  white-space: nowrap;
}

.word-help-group.trail-return-target {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--button-active-border);
  outline-offset: 3px;
  animation: trail-return-pulse 1.8s ease-out;
}
@keyframes trail-return-pulse {
  0%, 35% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--button-focus) 60%, transparent)); }
  100% { filter: none; }
}

@media (max-width: 360px) {
  #display-view .display-reference-group {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-help-group.trail-return-target { animation: none; }
}

/* Keep the paged Jacobean friezes joined to their corner leaves by the same
   measured amount. Side ornaments intentionally retain their own geometry. */
body[data-visual-style="jacobean"] {
  --jacobean-join-overlap: 6px;
}
body[data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]):not([data-reading-mode="scroll"]) .reader-shell::after,
body[data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]):not([data-reading-mode="scroll"]) .reader-ornament-bottom {
  left: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
  right: calc(var(--jacobean-corner-x) + var(--jacobean-corner-size) - var(--jacobean-join-overlap)) !important;
}

/* Jacobean Scroll uses the same measured, fixed side-gallery treatment as
   Temple Scroll. The compact friezes, corners, and repeating paper-edge vines
   remain exclusive to paged reading. */
body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"] .reader-shell::after,
body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"] :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: fixed !important;
  z-index: 1 !important;
  top: var(--temple-column-top, 126px) !important;
  width: var(--temple-column-width) !important;
  height: var(--temple-column-height, calc(100vh - 126px)) !important;
  opacity: .88 !important;
  background-color: transparent !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  filter:
    drop-shadow(0 8px 12px rgba(37, 16, 5, .32))
    drop-shadow(0 0 1px rgba(236, 195, 105, .36));
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-left {
  right: auto !important;
  left: var(--temple-column-left, 16px) !important;
  background-image: url("assets/materials/jacobean-vine-side-v1.png") !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-right {
  right: var(--temple-column-right, 16px) !important;
  left: auto !important;
  background-image: url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
}

body[data-reading-mode="scroll"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="light"] .reader-scroll > .reader-ornament-side {
  display:none!important;
  filter:
    drop-shadow(0 8px 12px rgba(76, 48, 18, .2))
    drop-shadow(0 0 1px rgba(113, 76, 24, .3));
}

@container (max-width: 1120px) {
  body[data-reading-mode="scroll"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side {
    display: none !important;
  }
}

/* Authoritative Jacobean Pages frame. Light and dark share one measured
   geometry: bands and vines are centered in the actual paper margins, corner
   stems meet those centerlines, and only the six intended ornament elements
   render. */
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) {
  --jacobean-page-side-box: 22px;
  --jacobean-page-side-art: 20px;
  --jacobean-page-corner-stem: calc(var(--ornament-size) * .25);
  --jacobean-page-corner-join: 10px;
  --jacobean-page-side-join: 6px;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell {
  --jacobean-page-corner-left: calc(
    (var(--ornament-paper-left, 18px) / 2) - var(--jacobean-page-corner-stem)
  );
  --jacobean-page-corner-right: calc(
    ((100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px))) / 2) -
    var(--jacobean-page-corner-stem)
  );
  --jacobean-page-band-top: var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px));
  --jacobean-page-band-bottom: var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px));
  --jacobean-page-corner-top: calc(
    var(--jacobean-page-band-top) + (var(--ornament-band) / 2) - var(--jacobean-page-corner-stem)
  );
  --jacobean-page-corner-bottom: calc(
    var(--jacobean-page-band-bottom) + (var(--ornament-band) / 2) - var(--jacobean-page-corner-stem)
  );
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::before,
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::after,
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .paper::before {
  content: none !important;
  display: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  left: calc(
    var(--jacobean-page-corner-left) + var(--ornament-size) - var(--jacobean-page-corner-join)
  ) !important;
  right: calc(
    var(--jacobean-page-corner-right) + var(--ornament-size) - var(--jacobean-page-corner-join)
  ) !important;
  height: var(--ornament-band) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  content: "" !important;
  display: block !important;
  top: var(--jacobean-page-band-top) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  display: block !important;
  top: auto !important;
  bottom: var(--jacobean-page-band-bottom) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: block !important;
  top: var(--jacobean-page-corner-top) !important;
  width: var(--ornament-size) !important;
  height: var(--ornament-size) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-left {
  left: var(--jacobean-page-corner-left) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-right {
  right: var(--jacobean-page-corner-right) !important;
  transform: scaleX(-1) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--jacobean-page-corner-bottom) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-left {
  left: var(--jacobean-page-corner-left) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-right {
  right: var(--jacobean-page-corner-right) !important;
  transform: scale(-1, -1) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) - var(--jacobean-page-side-join)) !important;
  width: var(--jacobean-page-side-box) !important;
  height: calc(var(--ornament-paper-height, 100%) + (var(--jacobean-page-side-join) * 2)) !important;
  background: var(--ornament-fill) !important;
  opacity: var(--ornament-opacity) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(
    (var(--ornament-scroll-paper-left, 18px) - var(--jacobean-page-side-box)) / 2
  ) !important;
  right: auto !important;
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--jacobean-page-side-art) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--jacobean-page-side-art) auto repeat-y !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(
    (var(--ornament-scroll-paper-right, 18px) - var(--jacobean-page-side-box)) / 2
  ) !important;
  left: auto !important;
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--jacobean-page-side-art) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--jacobean-page-side-art) auto repeat-y !important;
}

@media (max-width: 900px) {
  body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) {
    --jacobean-page-side-box: 12px;
    --jacobean-page-side-art: 11px;
    --jacobean-page-corner-join: 7px;
    --jacobean-page-side-join: 4px;
  }
}

/* Pages and Scroll share one width system across themes. Jacobean keeps its
   ornament geometry, but the page surface uses the same single-page measure
   and outer spacing as Cambridge and Temple. */
body[data-reading-mode="book"][data-visual-style="jacobean"] .reader-scroll {
  padding: clamp(10px, 1.8vw, 22px) clamp(48px, 5vw, 76px) 8px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-visual-style="jacobean"] .reader-scroll {
  padding-inline: clamp(8px, 1.4vw, 24px) !important;
}

@media (max-width: 520px) {
  body[data-reading-mode="book"][data-visual-style="jacobean"] .reader-scroll {
    padding-inline: 34px !important;
  }
}

/* Format consistency audit:
   - Contained Pages should read like contained Scroll, only paginated.
   - Full-width Scroll should carry the selected paper texture across the whole
     paper surface, not leave flat pale side lanes around the text measure. */
body[data-reading-mode="scroll"][data-reader-width="full"]:not([data-paper="black"]) .paper {
  background-position: center top !important;
  background-repeat: repeat-y !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is([data-paper="white"], [data-paper="cream"], [data-paper="ivory"]) .paper {
  background-size: 100% var(--continuous-paper-height), 100% var(--continuous-paper-height) !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is([data-paper="beige"], [data-paper="antique"]) .paper {
  background-size: 100% var(--continuous-paper-height) !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: fixed !important;
  z-index: 1 !important;
  top: var(--temple-column-top, 126px) !important;
  width: var(--temple-column-width) !important;
  height: var(--temple-column-height, calc(100vh - 126px)) !important;
  background-color: transparent !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side {
  opacity: .88 !important;
  filter:
    drop-shadow(0 8px 12px rgba(37, 16, 5, .32))
    drop-shadow(0 0 1px rgba(236, 195, 105, .36));
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-left {
  right: auto !important;
  left: var(--temple-column-left, 16px) !important;
  background-image: url("assets/materials/jacobean-vine-side-v1.png") !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-right {
  right: var(--temple-column-right, 16px) !important;
  left: auto !important;
  background-image: url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side-left {
  left: var(--temple-column-left, 16px) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side-right {
  right: var(--temple-column-right, 16px) !important;
  left: auto !important;
}

@container (max-width: 1120px) {
  body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side {
    display: none !important;
  }
}

/* Final full-width ornament system:
   - Full-width Scroll keeps the paper wide, but reserves visible, fixed
     background ornament lanes for Jacobean and Temple.
   - Full-width Pages restores a formal frame line; Temple gets its own
     palm/open-flower style instead of borrowing Jacobean floral trim. */
body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-shell {
  --full-scroll-ornament-lane: clamp(96px, 8.4vw, 220px);
  --full-scroll-ornament-inset: clamp(10px, 1.2vw, 24px);
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll {
  padding-inline: calc(var(--full-scroll-ornament-lane) + var(--full-scroll-ornament-inset)) !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: fixed !important;
  z-index: 1 !important;
  top: var(--temple-column-top, 126px) !important;
  width: var(--full-scroll-ornament-lane) !important;
  height: var(--temple-column-height, calc(100vh - 126px)) !important;
  background-color: transparent !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side-left {
  left: var(--full-scroll-ornament-inset) !important;
  right: auto !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side-right {
  right: var(--full-scroll-ornament-inset) !important;
  left: auto !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-left {
  background-image: url("assets/materials/jacobean-vine-side-v1.png") !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"] .reader-scroll > .reader-ornament-side-right {
  background-image: url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side {
  background-image: url("assets/materials/temple-relief-column-v2.png") !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"] .reader-scroll > .reader-ornament-side-right {
  transform: scaleX(-1) !important;
}

@container (max-width: 1120px) {
  body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll {
    padding-inline: clamp(8px, 1.4vw, 24px) !important;
  }

  body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side {
    display: none !important;
  }
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  border: 2px solid color-mix(in srgb, var(--ornament-fill) 74%, transparent) !important;
  outline: 1px solid color-mix(in srgb, var(--ornament-fill) 42%, transparent) !important;
  outline-offset: -7px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 168, .16),
    inset 0 0 24px rgba(22, 10, 2, .18) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell {
  --temple-frame-side-box: 46px;
  --temple-frame-side-art: 42px;
  --temple-frame-overlap: 6px;
  --temple-frame-top: var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px));
  --temple-frame-bottom: var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px));
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  left: calc(var(--ornament-scroll-paper-left, 18px) + var(--temple-frame-overlap)) !important;
  right: calc(var(--ornament-scroll-paper-right, 18px) + var(--temple-frame-overlap)) !important;
  height: 18px !important;
  opacity: .92 !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 233, 149, .96) 0 11%, rgba(176, 129, 35, .94) 12% 18%, transparent 20%) center / 58px 100% repeat-x,
    radial-gradient(ellipse at 25% 50%, rgba(234, 191, 87, .75) 0 10%, transparent 12%) center / 29px 100% repeat-x,
    linear-gradient(180deg, transparent 0 28%, rgba(253, 226, 133, .92) 35% 43%, rgba(108, 70, 15, .72) 50% 57%, rgba(246, 205, 102, .86) 64% 72%, transparent 78% 100%) !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent) !important;
  mask: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent) !important;
  pointer-events: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  top: var(--temple-frame-top) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  top: auto !important;
  bottom: var(--temple-frame-bottom) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  opacity: .9 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 236, 158, .96) 0 18%, rgba(188, 134, 39, .9) 19% 31%, transparent 33%),
    conic-gradient(from 45deg, transparent 0 12%, rgba(246, 204, 94, .92) 13% 20%, transparent 21% 37%, rgba(141, 94, 22, .76) 38% 45%, transparent 46% 62%, rgba(255, 232, 143, .88) 63% 70%, transparent 71% 100%) !important;
  border: 1px solid rgba(237, 193, 84, .62) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 196, .2), 0 3px 8px rgba(34, 21, 4, .24) !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) - 27px) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) - 27px) !important;
  left: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: calc(var(--temple-frame-top) - 18px) !important;
  bottom: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: calc(var(--temple-frame-bottom) - 18px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 7 !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) - var(--temple-frame-overlap)) !important;
  width: var(--temple-frame-side-box) !important;
  height: calc(var(--ornament-paper-height, 100%) + (var(--temple-frame-overlap) * 2)) !important;
  opacity: .88 !important;
  background-color: transparent !important;
  background-image: url("assets/materials/temple-relief-column-v2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: auto 100% !important;
  filter: drop-shadow(0 5px 8px rgba(29, 17, 3, .2)) !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: max(6px, calc((var(--ornament-scroll-paper-left, 18px) - var(--temple-frame-side-box)) / 2)) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: max(6px, calc((var(--ornament-scroll-paper-right, 18px) - var(--temple-frame-side-box)) / 2)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

/* Correction: full-width Pages should not place large decorative assets around
   the paper while the toolbar and library are visible. Keep the formal border
   rule, but remove the oversized frame ornaments that collide with controls. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) :is(
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  border-color: color-mix(in srgb, var(--ornament-fill) 78%, #2f1708) !important;
  outline-color: color-mix(in srgb, var(--ornament-fill) 46%, transparent) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  border-color: color-mix(in srgb, #d7ad43 78%, #4d3811) !important;
  outline-color: color-mix(in srgb, #f1d88a 48%, transparent) !important;
}

/* Full-width Pages frame cleanup. The bottom margin now mirrors the top, and
   the decoration is attached to the frame border itself instead of floating in
   the toolbar/paper space. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding-block: clamp(12px, 1.6vw, 22px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(18px, 2.4vw, 44px) !important;
  right: clamp(18px, 2.4vw, 44px) !important;
  height: 7px !important;
  pointer-events: none !important;
  opacity: .82 !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before {
  top: 6px !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  bottom: 6px !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  background: var(--ornament-fill) !important;
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  height: 6px !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 236, 157, .95) 0 15%, rgba(184, 132, 33, .95) 17% 25%, transparent 27%) center / 50px 100% repeat-x,
    linear-gradient(180deg, transparent 0 24%, rgba(246, 210, 103, .92) 31% 42%, rgba(103, 69, 16, .64) 50% 58%, rgba(240, 198, 83, .86) 66% 76%, transparent 82% 100%) !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent) !important;
  mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent) !important;
}

/* Replace the fussy frame ornament with a cleaner border-attached treatment.
   Full-width Pages get a complete frame: subtle double rules top/bottom and
   narrow side details that stay inside the reader border. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  left: 14px !important;
  right: 14px !important;
  height: 5px !important;
  opacity: .78 !important;
  background:
    linear-gradient(90deg, transparent, var(--frame-gold-soft, rgba(245, 207, 106, .72)) 12%, var(--frame-gold, rgba(197, 143, 42, .86)) 50%, var(--frame-gold-soft, rgba(245, 207, 106, .72)) 88%, transparent),
    linear-gradient(180deg, transparent 0 18%, rgba(255, 238, 171, .86) 20% 34%, transparent 36% 58%, rgba(141, 92, 24, .58) 60% 72%, transparent 74% 100%) !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  --frame-gold: color-mix(in srgb, var(--ornament-fill) 82%, #6c3b10);
  --frame-gold-soft: color-mix(in srgb, var(--ornament-fill) 52%, transparent);
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  --frame-gold: #c79631;
  --frame-gold-soft: rgba(248, 218, 130, .7);
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 9px !important;
  height: auto !important;
  opacity: .72 !important;
  background-color: var(--frame-gold, rgba(197, 143, 42, .86)) !important;
  background-image: none !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-size: auto !important;
  filter: drop-shadow(0 0 1px rgba(255, 236, 166, .32)) !important;
  pointer-events: none !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: 7px !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: 7px !important;
  left: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / 8px auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / 8px auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / 8px auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / 8px auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1.png") center top / 9px auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1.png") center top / 9px auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1.png") center top / 9px auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1.png") center top / 9px auto repeat-y !important;
  transform: scaleX(-1) !important;
}

/* Stronger full-width page frame. Use readable rails with shared corner
   geometry instead of tiny masked artwork that disappears at normal size. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  --frame-rail-inset: 8px;
  --frame-rail-size: 16px;
  --frame-rail-dark: color-mix(in srgb, var(--frame-gold, #c79631) 54%, #2b1606);
  --frame-rail-light: color-mix(in srgb, var(--frame-gold-soft, rgba(248, 218, 130, .7)) 84%, white);
  border-width: 2px !important;
  outline-offset: -6px !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  left: var(--frame-rail-inset) !important;
  right: var(--frame-rail-inset) !important;
  height: var(--frame-rail-size) !important;
  opacity: .92 !important;
  background:
    linear-gradient(180deg, transparent 0 3px, var(--frame-rail-light) 4px 5px, transparent 6px 10px, var(--frame-rail-dark) 11px 12px, transparent 13px 100%),
    repeating-linear-gradient(90deg, transparent 0 28px, color-mix(in srgb, var(--frame-gold, #c79631) 78%, transparent) 29px 32px, transparent 33px 60px),
    linear-gradient(90deg, var(--frame-rail-dark), var(--frame-gold, #c79631) 18%, var(--frame-gold-soft, rgba(248,218,130,.7)) 50%, var(--frame-gold, #c79631) 82%, var(--frame-rail-dark)) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 190, .4),
    inset 0 -1px 0 rgba(58, 35, 8, .45),
    0 0 0 1px rgba(82, 52, 12, .18) !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before {
  top: var(--frame-rail-inset) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  bottom: var(--frame-rail-inset) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  top: var(--frame-rail-inset) !important;
  bottom: var(--frame-rail-inset) !important;
  width: var(--frame-rail-size) !important;
  opacity: .92 !important;
  background:
    linear-gradient(90deg, transparent 0 3px, var(--frame-rail-light) 4px 5px, transparent 6px 10px, var(--frame-rail-dark) 11px 12px, transparent 13px 100%),
    repeating-linear-gradient(180deg, transparent 0 28px, color-mix(in srgb, var(--frame-gold, #c79631) 78%, transparent) 29px 32px, transparent 33px 60px),
    linear-gradient(180deg, var(--frame-rail-dark), var(--frame-gold, #c79631) 18%, var(--frame-gold-soft, rgba(248,218,130,.7)) 50%, var(--frame-gold, #c79631) 82%, var(--frame-rail-dark)) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 246, 190, .36),
    inset -1px 0 0 rgba(58, 35, 8, .45),
    0 0 0 1px rgba(82, 52, 12, .18) !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: var(--frame-rail-inset) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: var(--frame-rail-inset) !important;
}

/* Hard reset after visual review:
   Full-width means the reading surface gets the width. Do not reserve lanes
   for large fixed ornaments, and do not draw the experimental rail frame. */
body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll {
  padding-inline: clamp(8px, 1.4vw, 24px) !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]) .reader-scroll > .reader-ornament-side {
  display: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: none !important;
  content: none !important;
}

/* Ornament frame v2. Pages get real top/bottom/side/corner details again.
   The corners cap the frame; bands stop underneath them so joins are hidden.
   Full-width Scroll remains clean because the moving roll should own the width. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  --page-frame-inset: clamp(10px, 1vw, 18px);
  --page-frame-corner: clamp(42px, 3vw, 58px);
  --page-frame-band: clamp(17px, 1.3vw, 24px);
  --page-frame-side: clamp(18px, 1.4vw, 28px);
  --page-frame-overlap: 7px;
  border: 2px solid color-mix(in srgb, var(--ornament-fill, #c79631) 68%, transparent) !important;
  outline: 1px solid color-mix(in srgb, var(--ornament-fill, #c79631) 32%, transparent) !important;
  outline-offset: -5px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 168, .1),
    inset 0 0 22px rgba(40, 22, 4, .13) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 5 !important;
  left: calc(var(--page-frame-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  right: calc(var(--page-frame-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  height: var(--page-frame-band) !important;
  opacity: .9 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c79631) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before {
  top: calc(var(--page-frame-inset) + ((var(--page-frame-corner) - var(--page-frame-band)) / 2)) !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  bottom: calc(var(--page-frame-inset) + ((var(--page-frame-corner) - var(--page-frame-band)) / 2)) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 5 !important;
  top: calc(var(--page-frame-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  bottom: calc(var(--page-frame-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  width: var(--page-frame-side) !important;
  height: auto !important;
  opacity: .9 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c79631) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--page-frame-inset) + ((var(--page-frame-corner) - var(--page-frame-side)) / 2)) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--page-frame-inset) + ((var(--page-frame-corner) - var(--page-frame-side)) / 2)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: block !important;
  position: absolute !important;
  z-index: 8 !important;
  width: var(--page-frame-corner) !important;
  height: var(--page-frame-corner) !important;
  opacity: .96 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c79631) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: var(--page-frame-inset) !important;
  bottom: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: var(--page-frame-inset) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-left,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-left {
  left: var(--page-frame-inset) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-right,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-right {
  right: var(--page-frame-inset) !important;
  left: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) {
  --ornament-fill: #d0a443;
  --ornament-opacity: .9;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 238, 157, .98) 0 14%, rgba(196, 143, 40, .94) 15% 25%, transparent 27%),
    conic-gradient(from 45deg, transparent 0 10%, #d0a443 11% 20%, transparent 21% 36%, #9a6f23 37% 45%, transparent 46% 61%, #e7c76f 62% 70%, transparent 71% 100%) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(238, 195, 89, .58) !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-right {
  transform: scaleX(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-left {
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-right {
  transform: scale(-1, -1) !important;
}

/* Ornament frame v3: place the artwork on the measured page margin, not on
   the outer scroll container. Larger parts make the design visible; corner
   caps cover all band joins. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  --page-frame-edge-inset: clamp(14px, 1.6vw, 28px);
  --page-frame-corner: clamp(82px, 5.8vw, 132px);
  --page-frame-band: clamp(34px, 2.4vw, 52px);
  --page-frame-side: clamp(34px, 2.4vw, 52px);
  --page-frame-overlap: 14px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 6 !important;
  left: calc(var(--ornament-scroll-paper-left, 18px) + var(--page-frame-edge-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  right: calc(var(--ornament-scroll-paper-right, 18px) + var(--page-frame-edge-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  height: var(--page-frame-band) !important;
  opacity: .96 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c99b39) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 2px 6px rgba(32, 18, 4, .22),
    inset 0 1px 0 rgba(255, 240, 170, .24) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before {
  top: calc(var(--ornament-scroll-paper-top, 0px) + var(--page-frame-edge-inset)) !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after {
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + var(--page-frame-edge-inset)) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 6 !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) + var(--page-frame-edge-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + var(--page-frame-edge-inset) + var(--page-frame-corner) - var(--page-frame-overlap)) !important;
  width: var(--page-frame-side) !important;
  height: auto !important;
  opacity: .96 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c99b39) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    2px 0 6px rgba(32, 18, 4, .18),
    inset 1px 0 0 rgba(255, 240, 170, .22) !important;
  filter: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) + var(--page-frame-edge-inset) + ((var(--page-frame-corner) - var(--page-frame-side)) / 2)) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) + var(--page-frame-edge-inset) + ((var(--page-frame-corner) - var(--page-frame-side)) / 2)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: block !important;
  position: absolute !important;
  z-index: 10 !important;
  width: var(--page-frame-corner) !important;
  height: var(--page-frame-corner) !important;
  opacity: .98 !important;
  pointer-events: none !important;
  background-color: var(--ornament-fill, #c99b39) !important;
  background-image: none !important;
  box-shadow:
    0 3px 8px rgba(32, 18, 4, .22),
    inset 0 1px 0 rgba(255, 240, 170, .2) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: calc(var(--ornament-scroll-paper-top, 0px) + var(--page-frame-edge-inset)) !important;
  bottom: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + var(--page-frame-edge-inset)) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-left,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) + var(--page-frame-edge-inset)) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-right,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) + var(--page-frame-edge-inset)) !important;
  left: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  --ornament-fill: color-mix(in srgb, #d7aa48 88%, #5a2a0b);
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll {
  --ornament-fill: #d6aa45;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll::after {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  background-color: #d6aa45 !important;
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") left top / auto 100% no-repeat !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") left top / auto 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Ornament frame v4: visible, paper-adjacent frame. This supersedes the
   earlier rail attempts by anchoring every decorative piece to the actual
   paper edge instead of the outside of the reader. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) {
  --page-frame-gap: clamp(6px, .65vw, 12px);
  --page-frame-corner-size: clamp(96px, 7vw, 150px);
  --page-frame-band-height: clamp(46px, 3.2vw, 68px);
  --page-frame-side-width: clamp(46px, 3.2vw, 68px);
  --page-frame-side-start: calc(var(--ornament-scroll-paper-top, 0px) - 2px);
  --page-frame-side-end: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) - 2px);
  --page-frame-corner-outset: calc(var(--page-frame-corner-size) - var(--page-frame-side-width) - var(--page-frame-gap));
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-shell::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::before,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .paper::before {
  content: none !important;
  display: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 7 !important;
  left: calc(var(--ornament-paper-left, 18px) + var(--page-frame-gap) + var(--page-frame-side-width) - 6px) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--page-frame-gap) + var(--page-frame-side-width) - 6px) !important;
  height: var(--page-frame-band-height) !important;
  opacity: .98 !important;
  pointer-events: none !important;
  background: var(--ornament-fill, #c99b39) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-shell::after {
  top: calc(var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px)) + 3px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  top: auto !important;
  bottom: calc(var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px)) + 3px) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  z-index: 7 !important;
  top: var(--page-frame-side-start) !important;
  bottom: var(--page-frame-side-end) !important;
  width: var(--page-frame-side-width) !important;
  height: auto !important;
  opacity: .98 !important;
  pointer-events: none !important;
  background: var(--ornament-fill, #c99b39) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) - var(--page-frame-side-width) - var(--page-frame-gap)) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) - var(--page-frame-side-width) - var(--page-frame-gap)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: block !important;
  position: absolute !important;
  z-index: 9 !important;
  width: var(--page-frame-corner-size) !important;
  height: var(--page-frame-corner-size) !important;
  opacity: .99 !important;
  pointer-events: none !important;
  background: var(--ornament-fill, #c99b39) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner:not(.reader-ornament-corner-bottom) {
  top: calc(var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px)) - ((var(--page-frame-corner-size) - var(--page-frame-band-height)) / 2) + 3px) !important;
  bottom: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom {
  top: auto !important;
  bottom: calc(var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px)) - ((var(--page-frame-corner-size) - var(--page-frame-band-height)) / 2) + 3px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-left,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-left {
  left: calc(var(--ornament-paper-left, 18px) - var(--page-frame-corner-outset)) !important;
  right: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-right,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is([data-visual-style="jacobean"], [data-visual-style="jerusalem"]):not([data-chrome-mode="theatre"]) .reader-ornament-corner-bottom-right {
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) - var(--page-frame-corner-outset)) !important;
  left: auto !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) {
  --ornament-fill: color-mix(in srgb, #d7aa48 92%, #4b250c);
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  -webkit-mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/jacobean-floral-border-wide-v2.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  -webkit-mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side-width) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-v1.png") center top / var(--page-frame-side-width) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  -webkit-mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side-width) auto repeat-y !important;
  mask: url("assets/materials/jacobean-vine-side-mirror-v1.png") center top / var(--page-frame-side-width) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  -webkit-mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
  mask: url("assets/materials/jacobean-leaf-corner-v3.png") center / contain no-repeat !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) {
  --ornament-fill: #d8ad49;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side-width) auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--page-frame-side-width) auto repeat-y !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") left top / auto 100% no-repeat !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") left top / auto 100% no-repeat !important;
}

/* Temple page frame v5: keep the ornament visible and inside the paper
   margin. The prior corner cap was too large for narrow margins and ran off
   the page, so Temple uses strong side columns plus top/bottom friezes here. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) {
  --temple-page-frame-inset: clamp(8px, .9vw, 16px);
  --temple-page-frame-band: clamp(34px, 2.4vw, 52px);
  --temple-page-frame-side: clamp(58px, 4.6vw, 86px);
  --temple-page-frame-gold: #d9ae4a;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  display: block !important;
  left: calc(var(--ornament-paper-left, 18px) + var(--temple-page-frame-inset)) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--temple-page-frame-inset)) !important;
  height: var(--temple-page-frame-band) !important;
  background: var(--temple-page-frame-gold) !important;
  opacity: .98 !important;
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  top: calc(var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px)) + 4px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  bottom: calc(var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px)) + 4px) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) + var(--temple-page-frame-inset)) !important;
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + var(--temple-page-frame-inset)) !important;
  width: var(--temple-page-frame-side) !important;
  background-color: transparent !important;
  background-image: url("assets/materials/temple-relief-left-v1.png") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-size: var(--temple-page-frame-side) auto !important;
  opacity: .94 !important;
  z-index: 28 !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: drop-shadow(0 1px 0 rgba(255, 240, 174, .25)) drop-shadow(0 2px 5px rgba(20, 12, 2, .28)) !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) + 4px) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) + 4px) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

/* Temple frame v6: ornaments belong in the outside frame margin, never on the
   Scripture paper. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) {
  --temple-page-frame-band: clamp(44px, 3.4vw, 62px);
  --temple-page-frame-side: clamp(14px, 1.25vw, 22px);
  --temple-page-frame-gap: 6px;
  --temple-page-frame-gold: #d9ae4a;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  left: calc(var(--ornament-paper-left, 18px) + var(--temple-page-frame-gap)) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--temple-page-frame-gap)) !important;
  height: var(--temple-page-frame-band) !important;
  background: var(--temple-page-frame-gold) !important;
  opacity: .96 !important;
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) + 2px) !important;
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + 2px) !important;
  width: var(--temple-page-frame-side) !important;
  background: var(--temple-page-frame-gold) !important;
  background-image: none !important;
  opacity: .98 !important;
  z-index: 8 !important;
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--temple-page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--temple-page-frame-side) auto repeat-y !important;
  filter: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) - var(--temple-page-frame-side) - var(--temple-page-frame-gap)) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) - var(--temple-page-frame-side) - var(--temple-page-frame-gap)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

/* Temple pages frame v7: all page widths use the same rule. Side ornaments
   stay in the outside border margin and never overlap the paper. */
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) {
  --temple-page-frame-band: clamp(44px, 3.4vw, 62px);
  --temple-page-frame-side: clamp(14px, 1.25vw, 22px);
  --temple-page-frame-gap: 8px;
  --temple-page-frame-gold: #d9ae4a;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-corner {
  display: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after,
body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: calc(var(--ornament-paper-left, 18px) + var(--temple-page-frame-gap)) !important;
  right: calc(100% - var(--ornament-paper-left, 18px) - var(--ornament-paper-width, calc(100% - 36px)) + var(--temple-page-frame-gap)) !important;
  height: var(--temple-page-frame-band) !important;
  background: var(--temple-page-frame-gold) !important;
  opacity: .96 !important;
  pointer-events: none !important;
  -webkit-mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
  mask: url("assets/materials/temple-botanical-frieze-v1-alpha.png") center / auto 100% repeat-x !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-shell::after {
  top: calc(var(--ornament-frame-top-centered, var(--ornament-frame-top, 68px)) + 4px) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-ornament-bottom {
  top: auto !important;
  bottom: calc(var(--ornament-frame-bottom-centered, var(--ornament-frame-bottom, 8px)) + 4px) !important;
  transform: scaleY(-1) !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  top: calc(var(--ornament-scroll-paper-top, 0px) + 2px) !important;
  bottom: calc(100% - var(--ornament-scroll-paper-top, 0px) - var(--ornament-paper-height, 100%) + 2px) !important;
  width: var(--temple-page-frame-side) !important;
  height: auto !important;
  background: var(--temple-page-frame-gold) !important;
  background-image: none !important;
  opacity: .98 !important;
  z-index: 8 !important;
  pointer-events: none !important;
  -webkit-mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--temple-page-frame-side) auto repeat-y !important;
  mask: url("assets/materials/temple-botanical-side-v1-alpha.png") center top / var(--temple-page-frame-side) auto repeat-y !important;
  filter: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-left {
  left: calc(var(--ornament-scroll-paper-left, 18px) - var(--temple-page-frame-side) - var(--temple-page-frame-gap)) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"]:not([data-chrome-mode="theatre"]) .reader-scroll > .reader-ornament-side-right {
  right: calc(var(--ornament-scroll-paper-right, 18px) - var(--temple-page-frame-side) - var(--temple-page-frame-gap)) !important;
  left: auto !important;
  transform: scaleX(-1) !important;
}

/* Approved page frames.
   Each theme uses one complete nine-slice frame around the measured paper
   rectangle. This preserves the accepted corners and prevents independent
   ornament pieces from drifting onto the Scripture page. Scroll mode keeps
   its separate fixed-background decoration system. */
body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) .reader-scroll {
  --approved-frame-x: clamp(
    10px,
    calc(var(--ornament-scroll-paper-left, 48px) - 4px),
    88px
  );
  --approved-frame-y: clamp(
    10px,
    calc(var(--ornament-scroll-paper-top, 40px) - 4px),
    74px
  );
}

body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) :is(
  .reader-shell::before,
  .reader-shell::after,
  .reader-scroll::after,
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-side,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  box-sizing: border-box !important;
  z-index: 4 !important;
  top: calc(var(--ornament-scroll-paper-top, 40px) - var(--approved-frame-y)) !important;
  right: calc(var(--ornament-scroll-paper-right, 48px) - var(--approved-frame-x)) !important;
  left: calc(var(--ornament-scroll-paper-left, 48px) - var(--approved-frame-x)) !important;
  width: auto !important;
  height: calc(
    var(--ornament-paper-height, 100%) +
    var(--approved-frame-y) +
    var(--approved-frame-y)
  ) !important;
  border-style: solid !important;
  border-width: var(--approved-frame-y) var(--approved-frame-x) !important;
  border-image-width: 1 !important;
  border-image-outset: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-velvet-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 191 193 193 192 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-plaster-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 189 204 185 200 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-burnished-bronze-v1.png") !important;
  border-image-slice: 176 !important;
  border-image-repeat: round !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-limestone-v3-closed-fruit.png") !important;
  border-image-slice: 186 !important;
  border-image-repeat: round !important;
}

@media (max-width: 900px) {
  body[data-reading-mode="book"][data-ornaments="true"]:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) .reader-scroll {
    --approved-frame-x: clamp(
      7px,
      calc(var(--ornament-scroll-paper-left, 28px) - 3px),
      40px
    );
    --approved-frame-y: clamp(
      7px,
      calc(var(--ornament-scroll-paper-top, 28px) - 3px),
      40px
    );
  }
}

/* Approved frame and width contract.
   Pages + full width: the selected complete frame reserves a real margin
   around the paper. Contained layouts use the large period ornaments instead.
   Scroll + full width always gives the reading surface the available width. */
body:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  --approved-frame-x: clamp(72px, 7vw, 108px);
  --approved-frame-y: clamp(68px, 6vw, 94px);
  --contained-ornament-width: clamp(56px, 6vw, 92px);
}

body[data-reading-mode="book"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
}

/* Reset every retired multi-piece frame before applying the chosen state. */
body:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) :is(
  .reader-shell::before,
  .reader-shell::after,
  .reader-scroll::after,
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  content: none !important;
}

/* Full-width Pages: one coherent nine-slice frame around, never on, the paper. */
body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  padding:
    var(--approved-frame-y)
    var(--approved-frame-x) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  position: relative;
  z-index: 5;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  border-style: solid !important;
  border-width: var(--approved-frame-y) var(--approved-frame-x) !important;
  border-color: transparent !important;
  border-image-width: 1 !important;
  border-image-outset: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  z-index: 4 !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-velvet-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 191 193 193 192 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-plaster-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 189 204 185 200 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-burnished-bronze-v1.png") !important;
  border-image-slice: 176 !important;
  border-image-repeat: round !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-limestone-v3-closed-fruit.png") !important;
  border-image-slice: 186 !important;
  border-image-repeat: round !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-ornament-side {
  display: none !important;
}

/* Contained Pages use the same restrained background-ornament treatment as
   contained Scroll. The complete frame is deliberately not squeezed here. */
body[data-reading-mode="book"][data-reader-width="contained"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll::before {
  display: none !important;
  content: none !important;
}

body[data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-ornament-side {
  display: block !important;
  position: absolute !important;
  top: calc(var(--ornament-scroll-paper-top, 18px) + 18px) !important;
  bottom: calc(
    100% -
    var(--ornament-scroll-paper-top, 18px) -
    var(--ornament-paper-height, calc(100% - 36px)) +
    18px
  ) !important;
  width: var(--contained-ornament-width) !important;
  height: auto !important;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: auto 100% !important;
  box-shadow: none !important;
  opacity: .82 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
}

body[data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-ornament-side-left {
  left: max(
    6px,
    calc(
      (
        var(--ornament-scroll-paper-left, 78px) -
        var(--contained-ornament-width)
      ) / 2
    )
  ) !important;
  right: auto !important;
  transform: none !important;
}

body[data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-ornament-side-right {
  right: max(
    6px,
    calc(
      (
        var(--ornament-scroll-paper-right, 78px) -
        var(--contained-ornament-width)
      ) / 2
    )
  ) !important;
  left: auto !important;
}

body[data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"] #reader-scroll > .reader-ornament-side-left {
  background-image: url("assets/materials/jacobean-vine-side-v1.png") !important;
}

body[data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"] #reader-scroll > .reader-ornament-side-right {
  background-image: url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
  transform: none !important;
}

body[data-reader-width="contained"][data-ornaments="true"][data-visual-style="jerusalem"] #reader-scroll > .reader-ornament-side {
  background-image: url("assets/materials/temple-relief-column-v2.png") !important;
}

body[data-reader-width="contained"][data-ornaments="true"][data-visual-style="jerusalem"] #reader-scroll > .reader-ornament-side-right {
  transform: scaleX(-1) !important;
}

/* Full-width Scroll has no decorative side lanes. Both historical themes
   follow the same geometry and the paper fills the usable reader pane. */
body[data-reading-mode="scroll"][data-reader-width="full"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  padding-inline: clamp(8px, 1.4vw, 24px) !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-ornament-side {
  display: none !important;
}

body[data-reading-mode="scroll"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll::before {
  display: none !important;
  content: none !important;
}

@container (max-width: 980px) {
  body:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) #reader-scroll {
    --approved-frame-x: clamp(40px, 8cqw, 64px);
    --approved-frame-y: clamp(36px, 7cqw, 58px);
  }
}

@container (max-width: 720px) {
  body:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) #reader-scroll {
    --approved-frame-x: clamp(22px, 7cqw, 42px);
    --approved-frame-y: clamp(22px, 6cqw, 38px);
  }

  body[data-reader-width="contained"][data-ornaments="true"]:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) #reader-scroll > .reader-ornament-side {
    display: none !important;
  }
}

/* Reader rendering state contract.
   Pages are fixed sheets and may receive one complete frame outside the paper.
   Scroll is continuous and may receive side details only in unused background
   lanes. Theatre changes chrome visibility, never the reader's decoration
   contract. */

/* Cambridge dark follows the selected tone. Theatre no longer forces leather
   over Cambridge light mode. */
body[data-visual-style="illuminated"][data-theme-tone="light"] {
  --window-material-color: #e6e5df;
  --window-material-image: var(--paper-rag-source);
  --window-material-glow: linear-gradient(transparent, transparent);
  --window-material-overlay: linear-gradient(rgba(244,244,239,.78), rgba(215,214,207,.78));
  --window-panel-tint: rgba(250,250,247,.74);
  --window-header-tint: rgba(252,252,249,.7);
  --window-toolbar-tint: rgba(244,244,240,.68);
  --window-reader-tint: rgba(198,197,190,.18);
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
  background-attachment: fixed, fixed, fixed;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .app-header {
  background-color: var(--window-header-tint) !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(.library-panel, .utility-panel) {
  background-color: var(--window-panel-tint) !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .reader-toolbar {
  background-color: var(--window-toolbar-tint) !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(.reader-shell, .reader-scroll) {
  background-color: var(--window-reader-tint) !important;
  background-image: none !important;
  box-shadow: none;
}

body[data-visual-style="illuminated"][data-theme-tone="dark"] {
  --cambridge-goatskin-source: url("assets/materials/cambridge-black-leather-user-v1.png");
  --window-material-color: #030303;
  --window-material-image: var(--cambridge-goatskin-source);
  --window-material-glow: linear-gradient(transparent, transparent);
  --window-material-overlay: linear-gradient(transparent, transparent);
  background-position: center, center, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover;
  background-attachment: fixed, fixed, fixed;
}

/* Retire every older multi-piece top, bottom, corner, and pseudo-element
   ornament. The two approved systems below are the only decoration sources. */
html body[data-visual-style] .reader-shell::before,
html body[data-visual-style] .reader-shell::after,
html body[data-visual-style] .reader-scroll::after,
html body[data-visual-style] .reader-ornament-guard,
html body[data-visual-style] .reader-ornament-bottom,
html body[data-visual-style] .reader-ornament-corner,
html body[data-visual-style] #reader-scroll > .reader-ornament-side {
  display: none !important;
  content: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.reader-side-detail {
  display: none !important;
}

/* PAGES: one complete nine-slice frame. Padding reserves real frame space, so
   the frame can sit above a torn Ancient edge without covering Scripture. */
body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  --reader-frame-x: clamp(42px, 5.5vw, 86px);
  --reader-frame-y: clamp(38px, 4.8vw, 72px);
  isolation: isolate;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: var(--reader-frame-y) var(--reader-frame-x) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  --reader-frame-x: clamp(36px, 4.8vw, 68px);
  --reader-frame-y: clamp(34px, 4vw, 58px);
  box-sizing: border-box;
  margin-inline: auto;
}

body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="one"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  width: min(100%, calc(820px + var(--reader-frame-x) + var(--reader-frame-x)));
}

body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="two"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  width: min(100%, calc(1180px + var(--reader-frame-x) + var(--reader-frame-x)));
}

body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  position: relative;
  z-index: 5 !important;
  max-width: 100%;
  margin: 0 auto !important;
}

/* The complete frame is the only Pages ornament. Older paper-edge friezes are
   suppressed without touching the two-page gutter, which uses ::after. */
body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper::before {
  display: none !important;
  content: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  border-style: solid !important;
  border-width: var(--reader-frame-y) var(--reader-frame-x) !important;
  border-color: transparent !important;
  border-image-width: 1 !important;
  border-image-outset: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-velvet-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 191 193 193 192 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jacobean"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/jacobean-frame-plaster-temple-geometry-v3-rimless.png") !important;
  border-image-slice: 189 204 185 200 !important;
  border-image-repeat: repeat !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="dark"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-burnished-bronze-v1.png") !important;
  border-image-slice: 176 !important;
  border-image-repeat: round !important;
}

body[data-reading-mode="book"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone="light"] #reader-scroll::before {
  border-image-source: url("assets/materials/temple-frame-limestone-v3-closed-fruit.png") !important;
  border-image-slice: 186 !important;
  border-image-repeat: round !important;
}

body[data-reading-mode="book"] .page-turn {
  z-index: 12;
}

/* SCROLL: no frame. Contained width may use a single coherent side asset in
   each empty lane. The scroll-offset transform keeps those details visually
   fixed while the Scripture moves. */
body[data-reading-mode="scroll"] #reader-scroll::before {
  display: none !important;
  content: none !important;
  border-image-source: none !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  padding-inline: clamp(8px, 1.4vw, 24px) !important;
}

body[data-reading-mode="scroll"][data-reader-width="full"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body[data-reading-mode="scroll"][data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-side-detail {
  --side-detail-max: clamp(86px, 10vw, 190px);
  display: block !important;
  position: absolute !important;
  top: max(14px, var(--ornament-scroll-paper-top, 18px)) !important;
  width: clamp(
    0px,
    calc(var(--ornament-scroll-paper-left, 220px) - 36px),
    var(--side-detail-max)
  ) !important;
  height: min(1700px, calc(100dvh - 170px)) !important;
  min-height: 520px;
  border: 0 !important;
  background-color: transparent !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none !important;
  opacity: .94 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body[data-reading-mode="scroll"][data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-side-detail-left {
  left: max(
    12px,
    calc(var(--ornament-scroll-paper-left, 220px) / 2 - var(--side-detail-max) / 2)
  ) !important;
  right: auto !important;
  transform: translateY(var(--reader-scroll-offset, 0px)) !important;
}

body[data-reading-mode="scroll"][data-reader-width="contained"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .reader-side-detail-right {
  right: max(
    12px,
    calc(var(--ornament-scroll-paper-right, 220px) / 2 - var(--side-detail-max) / 2)
  ) !important;
  left: auto !important;
  transform: translateY(var(--reader-scroll-offset, 0px)) !important;
}

body[data-reading-mode="scroll"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"]
  #reader-scroll > .reader-side-detail-left {
  background-image: url("assets/materials/jacobean-vine-side-v1.png") !important;
}

body[data-reading-mode="scroll"][data-reader-width="contained"][data-ornaments="true"][data-visual-style="jacobean"]
  #reader-scroll > .reader-side-detail-right {
  background-image: url("assets/materials/jacobean-vine-side-mirror-v1.png") !important;
}

/* Temple dark headings use the same legible ink family as the Scroll opening. */
body[data-visual-style="jerusalem"][data-theme-tone="dark"] .reading-opening :is(
  .chapter-kicker,
  .book-title-line:not(.book-title-line-last)
) {
  color: #6b4a1b !important;
  opacity: 1 !important;
}

/* Full-width Scroll intentionally has no side-detail lane. Cambridge never
   receives historical frame or side artwork. */
body[data-reading-mode="scroll"][data-reader-width="full"] #reader-scroll > .reader-side-detail,
body[data-visual-style="illuminated"] #reader-scroll > .reader-side-detail,
body[data-visual-style="jerusalem"] #reader-scroll > .reader-side-detail,
body[data-reading-mode="book"] #reader-scroll > .reader-side-detail,
body[data-ornaments="false"] #reader-scroll > .reader-side-detail {
  display: none !important;
}

@container (max-width: 980px) {
  body[data-reading-mode="book"][data-ornaments="true"]:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) #reader-scroll {
    --reader-frame-x: clamp(30px, 6cqw, 52px);
    --reader-frame-y: clamp(28px, 5cqw, 46px);
  }

  body[data-reading-mode="scroll"] #reader-scroll > .reader-side-detail {
    display: none !important;
  }
}

@container (max-width: 620px) {
  body[data-reading-mode="book"][data-ornaments="true"]:is(
    [data-visual-style="jacobean"],
    [data-visual-style="jerusalem"]
  ) #reader-scroll {
    --reader-frame-x: clamp(18px, 5cqw, 30px);
    --reader-frame-y: clamp(18px, 4.5cqw, 28px);
  }
}

/* Final decoration contract. Keep this last so legacy theme rules cannot put
   retired friezes over the approved Pages frames. */
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-shell::before,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-shell::after,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-scroll::after,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-ornament-guard,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-ornament-bottom,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] .reader-ornament-corner,
html body:not(#legacy-decoration)[data-reading-mode="book"][data-visual-style] #reader-scroll > .reader-ornament-side {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body:not(#legacy-decoration)[data-visual-style="jerusalem"] #reader-scroll > .reader-side-detail {
  display: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
}

/* Temple Scroll veil
   One continuous background asset frames the viewport behind the header,
   sidebars, and floating Scripture paper. Pages mode retains its own frames. */
html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"] {
  --window-material-color: #080707;
  --window-material-image: url("assets/materials/temple-scroll-ambiguous-veil-v2.png");
  --window-reader-tint: transparent;
  background-color: var(--window-material-color) !important;
  background-image:
    var(--window-material-glow),
    var(--window-material-overlay),
    var(--window-material-image) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, cover !important;
  background-attachment: fixed, fixed, fixed !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"][data-theme-tone="light"] {
  --window-material-image: url("assets/materials/temple-scroll-ambiguous-veil-light-v5-pullback.png");
  --window-material-glow:
    radial-gradient(
      ellipse at center,
      rgba(238, 226, 201, 0.18) 0%,
      rgba(103, 75, 77, 0.06) 48%,
      rgba(20, 13, 15, 0.08) 100%
    );
  --window-material-overlay:
    linear-gradient(
      180deg,
      rgba(241, 232, 213, 0.14) 0%,
      rgba(232, 222, 201, 0.08) 48%,
      rgba(22, 15, 17, 0.08) 100%
    );
  --window-header-tint: rgba(244, 237, 220, 0.78);
  --window-toolbar-tint: rgba(244, 237, 220, 0.74);
  --window-panel-tint: rgba(244, 237, 220, 0.76);
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"][data-theme-tone="dark"] {
  --window-material-image: url("assets/materials/temple-scroll-jerusalem-dark-v1-deep.png");
  --window-material-glow:
    radial-gradient(
      ellipse at center,
      rgba(174, 134, 67, 0.08) 0%,
      rgba(17, 12, 14, 0.04) 52%,
      rgba(0, 0, 0, 0.26) 100%
    );
  --window-material-overlay:
    linear-gradient(
      180deg,
      rgba(5, 4, 5, 0.02) 0%,
      rgba(5, 4, 5, 0.08) 58%,
      rgba(0, 0, 0, 0.2) 100%
    );
  --window-header-tint: rgba(13, 10, 12, 0.72);
  --window-toolbar-tint: rgba(13, 10, 12, 0.68);
  --window-panel-tint: rgba(13, 10, 12, 0.72);
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
  :is(.reader-shell, .reader-scroll) {
  background-color: transparent !important;
  background-image: none !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"][data-theme-tone="dark"]
  .reader-shell {
  background-image:
    radial-gradient(
      ellipse 48% 88% at 50% 45%,
      rgba(204, 171, 113, 0.19) 0%,
      rgba(143, 103, 69, 0.115) 42%,
      rgba(67, 45, 40, 0.038) 68%,
      rgba(0, 0, 0, 0) 82%
    ) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
  #reader-scroll > .paper {
  position: relative !important;
  z-index: 2 !important;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.52),
    0 4px 16px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 900px) {
  html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"] {
    background-size: 100% 100%, 100% 100%, cover !important;
  }
}

/* Jacobean background reset
   Keep the approved page frames untouched. This only retires the stray light
   side/top ornament layer and replaces the broad Jacobean materials. */
html body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::before,
html body[data-visual-style="jacobean"][data-theme-tone="light"] .reader-shell::after,
html body[data-visual-style="jacobean"][data-theme-tone="light"] #reader-scroll > .reader-side-detail {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --window-material-color: #e7dcc8;
  --window-material-image: url("assets/materials/jacobean-plaster-alt.jpg");
  --window-material-glow:
    radial-gradient(ellipse at 50% 0%, rgba(255, 249, 232, .32), transparent 46%),
    radial-gradient(ellipse at 12% 28%, rgba(119, 38, 28, .08), transparent 34%),
    radial-gradient(ellipse at 86% 24%, rgba(167, 119, 46, .10), transparent 38%);
  --window-material-overlay:
    repeating-linear-gradient(90deg, rgba(117, 76, 42, .035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, rgba(249, 240, 220, .62), rgba(206, 184, 151, .3));
  --window-panel-tint: rgba(246, 239, 226, .76);
  --window-header-tint: rgba(70, 35, 24, .7);
  --window-toolbar-tint: rgba(70, 35, 24, .64);
  --window-reader-tint: rgba(94, 48, 32, .04);
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --window-material-color: #2c0713;
  --window-material-image: url("assets/materials/jacobean-velvet-wide-v2-2x.jpg");
  --window-material-glow:
    radial-gradient(ellipse at 50% 0%, rgba(206, 128, 92, .10), transparent 44%),
    radial-gradient(ellipse at 18% 30%, rgba(120, 11, 30, .18), transparent 36%),
    radial-gradient(ellipse at 88% 20%, rgba(186, 133, 55, .10), transparent 32%);
  --window-material-overlay:
    repeating-linear-gradient(105deg, rgba(255, 214, 143, .035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(15deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 22px),
    linear-gradient(145deg, rgba(95, 14, 31, .42), rgba(24, 4, 10, .58));
  --window-panel-tint: rgba(48, 6, 17, .74);
  --window-header-tint: rgba(33, 11, 8, .7);
  --window-toolbar-tint: rgba(33, 11, 8, .66);
  --window-reader-tint: rgba(22, 3, 7, .08);
}

html body[data-visual-style="jacobean"][data-theme-tone="light"] :is(.app-header, .reader-toolbar) {
  background-color: #4c291d !important;
  background-image:
    linear-gradient(rgba(76, 35, 23, .72), rgba(42, 18, 12, .76)),
    radial-gradient(ellipse at 50% 0%, rgba(220, 173, 83, .16), transparent 48%),
    url("assets/materials/jacobean-plaster-alt.jpg") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"] :is(.app-header, .reader-toolbar) {
  background-color: #1e080b !important;
  background-image:
    linear-gradient(rgba(26, 7, 9, .78), rgba(13, 4, 5, .84)),
    radial-gradient(ellipse at 50% 0%, rgba(193, 133, 56, .14), transparent 48%),
    url("assets/materials/jacobean-velvet-wide-v2-2x.jpg") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="light"] :is(.library-panel, .utility-panel, .reader-shell, .reader-scroll) {
  background-color: #ded0bb !important;
  background-image:
    linear-gradient(rgba(239, 229, 211, .58), rgba(206, 184, 151, .34)),
    radial-gradient(ellipse at 50% 8%, rgba(255, 249, 231, .22), transparent 42%),
    url("assets/materials/jacobean-plaster-alt.jpg") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"] :is(.library-panel, .utility-panel, .reader-shell, .reader-scroll) {
  background-color: #360918 !important;
  background-image:
    linear-gradient(rgba(72, 8, 23, .62), rgba(21, 3, 9, .72)),
    radial-gradient(ellipse at 50% 8%, rgba(189, 116, 72, .12), transparent 42%),
    url("assets/materials/jacobean-velvet-wide-v2-2x.jpg") !important;
  background-size: 100% 100%, 100% 100%, cover !important;
}

/* Generated Jacobean material set
   These rules change only broad surfaces. The approved Pages frame contract
   above remains authoritative and its border-image assets are untouched. */
body[data-paper="beige"] {
  --paper: #f4ead2;
  --paper-edge: #cdbb96;
  --paper-texture: url("assets/materials/paper-1611-laid-generated-v1.png");
  --paper-texture-size: cover;
}
html body[data-reading-mode="book"][data-paper="beige"] .paper {
  background-image: url("assets/materials/paper-1611-laid-uniform-v2.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
html body[data-reading-mode="scroll"][data-paper="beige"] .paper {
  background-color: #f4ead2 !important;
  background-image: url("assets/materials/paper-1611-laid-uniform-v2.png") !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
}
.paper-swatch[data-paper-choice="beige"] span {
  background:
    #f4ead2
    url("assets/materials/paper-1611-laid-generated-v1.png")
    center / cover
    no-repeat !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="light"] {
  --window-material-color: #c9a977;
  --window-material-image: url("assets/materials/jacobean-generated-oak-light-v1.png");
}
html body[data-visual-style="jacobean"][data-theme-tone="light"] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel
) {
  background-color: #eee3d1 !important;
  background-image:
    linear-gradient(rgba(249, 244, 234, .42), rgba(218, 202, 178, .32)),
    url("assets/materials/jacobean-generated-plaster-light-v1.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}
html body[data-visual-style="jacobean"][data-theme-tone="light"] :is(
  .reader-shell,
  .reader-scroll
) {
  background-color: #caa974 !important;
  background-image:
    linear-gradient(rgba(243, 220, 181, .18), rgba(139, 91, 45, .18)),
    url("assets/materials/jacobean-generated-oak-light-v1.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

/* Theatre keeps the selected light Jacobean palette inside the library drawer.
   Older Theatre rules intentionally use dark chrome variables, which made the
   book list nearly white even though this panel retained its light plaster. */
html body[data-visual-style="jacobean"][data-theme-tone="light"][data-chrome-mode="theatre"] .library-panel {
  --ink: #282722;
  --muted: #6f6c64;
  --faint: #99958b;
  --line: #b9a88f;
  --accent: #775622;
  --accent-soft: rgba(111, 73, 36, .11);
  color: #33281c;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"] {
  --window-material-color: #100805;
  --window-material-image: url("assets/materials/jacobean-generated-oak-dark-v1.png");
}
html body[data-visual-style="jacobean"][data-theme-tone="dark"] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel
) {
  background-color: #31060e !important;
  background-image:
    linear-gradient(rgba(31, 3, 8, .28), rgba(11, 1, 4, .42)),
    url("assets/materials/jacobean-generated-velvet-dark-v1.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}
html body[data-visual-style="jacobean"][data-theme-tone="dark"] :is(
  .reader-shell,
  .reader-scroll
) {
  background-color: #100805 !important;
  background-image:
    linear-gradient(rgba(4, 1, 0, .34), rgba(10, 3, 1, .48)),
    url("assets/materials/jacobean-generated-oak-dark-v1.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

/* Photorealistic Jacobean millwork.
   Each module is a complete photographed oak panel with its own rails, stiles,
   joinery, recessed field, grain, and carved relief. No CSS-drawn panel parts
   or applique ornament are layered over the timber. */
.reader-millwork {
  display: none;
}

html body[data-visual-style="jacobean"][data-ornaments="true"] {
  --reader-millwork-source: url("assets/materials/jacobean-millwork-oak-light-v1.png");
  --reader-millwork-fallback: #6f4d31;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"] {
  --reader-millwork-source: url("assets/materials/jacobean-millwork-oak-dark-v1.png");
  --reader-millwork-fallback: #160e0a;
}

html body[data-visual-style="jacobean"][data-ornaments="true"]
  .reader-shell > .reader-millwork {
  display: grid;
  grid-row: 3;
  grid-column: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  z-index: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--reader-millwork-fallback);
  pointer-events: none;
}

html body[data-visual-style="jacobean"][data-ornaments="true"]
  .reader-shell > #reader-scroll {
  grid-row: 3;
  grid-column: 1;
}

html body[data-visual-style="jacobean"][data-ornaments="true"]
  .reader-shell > .reader-millwork > .reader-millwork-panel {
  min-width: 0;
  margin-left: -3px;
  background-color: var(--reader-millwork-fallback);
  background-image: var(--reader-millwork-source);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html body[data-visual-style="jacobean"][data-ornaments="true"]
  .reader-shell > .reader-millwork > .reader-millwork-panel:first-child {
  margin-left: 0;
}

html body[data-visual-style="jacobean"][data-theme-tone="light"][data-ornaments="true"]
  .reader-shell > .reader-millwork > .reader-millwork-panel {
  filter: brightness(1.24) contrast(.94) saturate(.86);
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  .reader-shell > .reader-millwork > .reader-millwork-panel {
  filter: brightness(.78) contrast(1.05) saturate(.94);
}

html body[data-visual-style="jacobean"][data-ornaments="true"]
  #reader-scroll > .paper {
  position: relative;
  z-index: 2;
}

html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-theme-tone="light"][data-ornaments="true"]
  #reader-scroll > .paper {
  box-shadow:
    0 0 7px rgba(50, 29, 15, .23),
    0 2px 5px rgba(50, 29, 15, .09) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  #reader-scroll > .paper {
  box-shadow:
    0 0 8px rgba(0, 0, 0, .52),
    0 2px 5px rgba(0, 0, 0, .2) !important;
}

/* The earlier floral strips read as surface applique beside real carving. */
html body[data-reading-mode][data-reader-width][data-visual-style="jacobean"][data-ornaments="true"]
  #reader-scroll > .reader-side-detail {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Three reader widths
   Moderate is intentionally elastic and capped in rems. A one-column page is
   held to 64rem; a true two-page spread may use 88rem so each leaf retains a
   comfortable long-form measure. Full and Contained keep their prior geometry. */
.reader-width-setting {
  display: grid;
  gap: 7px;
}

#display-view .reader-width-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}

#display-view .reader-width-control > button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 5px;
  font-size: 11px;
}

.reader-width-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

body[data-reader-width="moderate"] .reader-scroll {
  padding-inline: clamp(18px, 3vw, 48px);
}

body[data-reader-width="moderate"] .paper,
body[data-reader-width="moderate"][data-chrome-mode="theatre"] .paper {
  width: min(100%, 64rem);
  max-width: 64rem;
}

body[data-reader-width="moderate"][data-reading-mode="scroll"]:is(
  [data-text-columns="two"],
  [data-center-references="true"]
) .paper {
  width: min(100%, 88rem);
  max-width: 88rem;
}

body[data-reader-width="moderate"][data-reading-mode="book"][data-effective-spread="two"] .paper {
  width: min(100%, 88rem);
  max-width: 88rem;
}

body[data-reading-mode="book"][data-reader-width="moderate"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  box-sizing: border-box;
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(64rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
  margin-inline: auto;
}

body[data-reading-mode="book"][data-reader-width="moderate"][data-effective-spread="two"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll {
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(88rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
}

body[data-reading-mode="book"][data-reader-width="moderate"][data-ornaments="true"]:is(
  [data-visual-style="jacobean"],
  [data-visual-style="jerusalem"]
) #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

@container (max-width: 620px) {
  html body[data-visual-style="jacobean"][data-ornaments="true"]
    .reader-shell > .reader-millwork {
    display: none;
  }
}

/* Reversible Jacobean foreground-depth trial v2.
   Keep the millwork visually at floor level, lift the control housings with a
   downward cast, and let Scroll paper cast only sideways so its long surface
   cannot create horizontal viewport bands. In Pages, the frame's inner lip
   sits above the paper and casts a shallow shadow onto it. */
html body[data-visual-style="jacobean"][data-ornaments="true"] .reader-toolbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 0 -1px 0 rgba(73, 45, 20, .2),
    0 3px 5px rgba(57, 35, 18, .18),
    0 12px 18px -14px rgba(57, 35, 18, .42) !important;
}

html body[data-visual-style="jacobean"][data-ornaments="true"] .header-action-tabs {
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 203, .13),
    0 2px 4px rgba(48, 25, 16, .26),
    0 9px 15px -11px rgba(48, 25, 16, .5) !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"] .reader-toolbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 203, .08),
    inset 0 -1px 0 rgba(7, 1, 2, .54),
    0 3px 5px rgba(0, 0, 0, .34),
    0 12px 20px -14px rgba(0, 0, 0, .74) !important;
}

html body[data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"] .header-action-tabs {
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 163, .12),
    0 2px 4px rgba(0, 0, 0, .4),
    0 10px 16px -11px rgba(0, 0, 0, .78) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-theme-tone="light"][data-ornaments="true"]
  #reader-scroll > .paper {
  box-shadow:
    -4px 0 6px -4px rgba(65, 39, 20, .58),
     4px 0 6px -4px rgba(65, 39, 20, .58),
    -14px 0 19px -10px rgba(65, 39, 20, .4),
     14px 0 19px -10px rgba(65, 39, 20, .4),
    -28px 0 36px -28px rgba(65, 39, 20, .26),
     28px 0 36px -28px rgba(65, 39, 20, .26) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  #reader-scroll > .paper {
  box-shadow:
    -4px 0 6px -4px rgba(0, 0, 0, .92),
     4px 0 6px -4px rgba(0, 0, 0, .92),
    -14px 0 19px -10px rgba(0, 0, 0, .74),
     14px 0 19px -10px rgba(0, 0, 0, .74),
    -28px 0 36px -28px rgba(0, 0, 0, .68),
     28px 0 36px -28px rgba(0, 0, 0, .68) !important;
}

/* Fixed side shade makes the reader opening feel shallower than the controls.
   It is attached to the shell rather than the scroll contents, so it cannot
   repeat as the long paper moves. */
html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-ornaments="true"]
  .reader-shell::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: 58px 0 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(48, 27, 13, .86) 0,
      rgba(48, 27, 13, .58) 7px,
      rgba(48, 27, 13, .28) 19px,
      transparent 38px
    ) left / 38px 100% no-repeat !important;
  box-shadow: none !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  .reader-shell::before {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .94) 0,
      rgba(0, 0, 0, .68) 7px,
      rgba(0, 0, 0, .34) 19px,
      transparent 38px
    ) left / 38px 100% no-repeat !important;
}

/* The Pages paper fills the frame opening exactly. Put it below the frame so
   the frame can cast a real inner-lip shadow onto the paper surface. */
html body[data-reading-mode="book"][data-visual-style="jacobean"][data-ornaments="true"]
  #reader-scroll > .paper {
  z-index: 3 !important;
  box-shadow: 0 7px 18px rgba(65, 39, 20, .2) !important;
}

html body[data-reading-mode="book"][data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  #reader-scroll > .paper {
  box-shadow: 0 7px 18px rgba(0, 0, 0, .34) !important;
}

html body[data-reading-mode="book"][data-visual-style="jacobean"][data-theme-tone="light"][data-ornaments="true"]
  #reader-scroll::before {
  z-index: 4 !important;
  box-shadow:
    inset 0 0 15px rgba(73, 43, 22, .34),
    inset 0 3px 7px rgba(73, 43, 22, .22) !important;
}

html body[data-reading-mode="book"][data-visual-style="jacobean"][data-theme-tone="dark"][data-ornaments="true"]
  #reader-scroll::before {
  z-index: 4 !important;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, .56),
    inset 0 3px 8px rgba(0, 0, 0, .34) !important;
}

@media (max-width: 620px) {
  html body[data-reading-mode="scroll"][data-visual-style="jacobean"][data-ornaments="true"]
    .reader-shell::before {
    display: none !important;
  }
}

/* Temple Scroll depth
   Shadows originate from the toolbar and side rails themselves. This keeps
   the veil behind the controls without painting a false edge on the paper or
   attaching the effect to the scrolling surface. */
html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
  .reader-toolbar {
  z-index: 8 !important;
  box-shadow:
    inset 0 -1px 0 rgba(72, 46, 18, .22),
    0 3px 6px rgba(36, 24, 13, .2),
    0 16px 24px -18px rgba(36, 24, 13, .58) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
  .library-panel {
  position: relative;
  z-index: 9;
  box-shadow:
    7px 0 10px -8px rgba(36, 24, 13, .5),
    18px 0 30px -22px rgba(36, 24, 13, .62) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
  .app-layout.utility-open > .utility-panel {
  position: relative;
  z-index: 9;
  box-shadow:
    -7px 0 10px -8px rgba(36, 24, 13, .5),
    -18px 0 30px -22px rgba(36, 24, 13, .62) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-theme-tone="dark"][data-ornaments="true"]
  .reader-toolbar {
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, .62),
    0 3px 7px rgba(0, 0, 0, .46),
    0 17px 26px -18px rgba(0, 0, 0, .88) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-theme-tone="dark"][data-ornaments="true"]
  .library-panel {
  box-shadow:
    7px 0 11px -8px rgba(0, 0, 0, .76),
    19px 0 32px -22px rgba(0, 0, 0, .9) !important;
}

html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-theme-tone="dark"][data-ornaments="true"]
  .app-layout.utility-open > .utility-panel {
  box-shadow:
    -7px 0 11px -8px rgba(0, 0, 0, .76),
    -19px 0 32px -22px rgba(0, 0, 0, .9) !important;
}

/* Temple real materials
   The chrome uses a real Herodian-period worked-limestone photograph. Temple's
   Vellum paper uses the selected pale fibrous surface. Pages retain a quiet
   fibre frame; continuous reading uses alpha masks so the parchment itself,
   rather than an overlay painted on it, ends in a worn fibrous silhouette. */
html body[data-visual-style="jerusalem"][data-theme-tone="light"] {
  --temple-real-stone: url("assets/materials/temple-pale-sanctuary-stone-v7.webp");
  --temple-real-stone-size: 1254px 1254px;
  --temple-real-parchment:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-v1.png");
  --temple-real-parchment-wide:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp");
  --temple-real-parchment-roll:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-scroll-seamless-v3.png");
  --temple-real-parchment-size: 100% 100%, 1586px 992px;
  --temple-fibrous-frame: url("assets/materials/temple-vellum-fibrous-frame-light-v3.png");
  --temple-real-panel-tint: #ded9ce;
  --temple-real-header-tint: #e2ddd3;
  --temple-real-toolbar-tint: #d9d3c7;
  --temple-real-stone-overlay:
    linear-gradient(180deg, rgba(255, 252, 244, .14), rgba(231, 222, 205, .08));
}

html body[data-visual-style="jerusalem"][data-theme-tone="dark"] {
  --temple-real-stone: url("assets/materials/temple-pale-sanctuary-stone-dark-v7.webp");
  --temple-real-stone-size: 1254px 1254px;
  --temple-real-parchment:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-v1.png");
  --temple-real-parchment-wide:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp");
  --temple-real-parchment-roll:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-scroll-seamless-v3.png");
  --temple-real-parchment-size: 100% 100%, 1586px 992px;
  --temple-fibrous-frame: url("assets/materials/temple-vellum-fibrous-frame-dark-v3.png");
  --temple-real-panel-tint: #11100e;
  --temple-real-header-tint: #0f0e0d;
  --temple-real-toolbar-tint: #12110f;
  --temple-real-stone-overlay:
    linear-gradient(180deg, rgba(10, 9, 8, .08), rgba(0, 0, 0, .16));
}

html body[data-visual-style="jerusalem"][data-theme-tone] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel
) {
  background-image:
    var(--temple-real-stone-overlay),
    var(--temple-real-stone) !important;
  background-position: center, left top !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% 100%, var(--temple-real-stone-size) !important;
  background-attachment: scroll, fixed !important;
  background-blend-mode: normal, normal !important;
}

html body[data-visual-style="jerusalem"][data-theme-tone] :is(
  .library-panel,
  .utility-panel
) {
  background-color: var(--temple-real-panel-tint) !important;
}

html body[data-visual-style="jerusalem"][data-theme-tone] .app-header {
  background-color: var(--temple-real-header-tint) !important;
}

html body[data-visual-style="jerusalem"][data-theme-tone] .reader-toolbar {
  background-color: var(--temple-real-toolbar-tint) !important;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone="light"] {
  --paper: #f2eee5;
  --paper-edge: #c8bda9;
  /* Ellesmere Chaucer f. iiir iron-gall hue, darkened for textured vellum. */
  --reader-ink: #47301f;
  --reader-muted: #715d47;
  --reader-accent: #7f332b;
  --reader-rule: rgba(91, 72, 49, .24);
  --reader-hover: rgba(135, 59, 50, .06);
  --reader-control-bg: rgba(255, 252, 244, .62);
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone="dark"] {
  --paper: #f2eee5;
  --paper-edge: #c8bda9;
  /* Temple uses one physical vellum-and-ink treatment in both surroundings. */
  --reader-ink: #47301f;
  --reader-muted: #715d47;
  --reader-accent: #7f332b;
  --reader-rule: rgba(91, 72, 49, .24);
  --reader-hover: rgba(135, 59, 50, .06);
  --reader-control-bg: rgba(255, 252, 244, .62);
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper {
  color: var(--reader-ink) !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-image: none !important;
  background-color: var(--paper) !important;
  background-image: var(--temple-real-parchment) !important;
  background-position: center top !important;
  background-repeat: no-repeat, repeat-y !important;
  background-size: var(--temple-real-parchment-size) !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 .35px .25px rgba(65, 35, 16, .18);
  box-shadow:
    0 24px 56px rgba(37, 30, 20, .26),
    0 4px 14px rgba(37, 30, 20, .2),
    inset 0 0 16px rgba(83, 57, 30, .055) !important;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone="dark"]
  #reader-scroll > .paper {
  text-shadow: 0 .35px .25px rgba(65, 35, 16, .18);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, .68),
    0 5px 18px rgba(0, 0, 0, .54),
    inset 0 0 18px rgba(0, 0, 0, .14) !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper {
  background-image: var(--temple-real-parchment-roll) !important;
  background-position: center top !important;
  background-repeat: no-repeat, repeat-y !important;
  background-size: 100% 100%, 100% auto !important;
  background-attachment: scroll !important;
}

/* Pages already sit inside the decorative picture frame. Keep the bounded
   sheet clean; the added fibrous edge belongs only to continuous Scroll. */
html body[data-reading-mode="book"][data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper::before {
  content: none !important;
  display: none !important;
}

/* Pages can expand to the full theatre viewport. Use the dedicated panoramic
   vellum surface there so the paper remains continuous across the entire
   opening; the former fixed 1586px layer exposed flat side bands and its image
   boundary read as a seam. */
html body[data-reading-mode="book"][data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper {
  background-image: var(--temple-real-parchment-wide) !important;
  background-position: center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

/* Chapter and Scroll are continuous vellum rolls. These alpha tiles remove the
   straight CSS rectangle itself. The existing parchment texture therefore
   reaches the irregular edge naturally, and the veil is visible immediately
   beyond the last fibres. The long tile repeats vertically without stretching
   to the height of a chapter, book, or Bible. */
html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper {
  -webkit-mask-image:
    url("assets/materials/temple-vellum-edge-mask-left-v8.png"),
    linear-gradient(#000 0 0),
    url("assets/materials/temple-vellum-edge-mask-right-v8.png") !important;
  mask-image:
    url("assets/materials/temple-vellum-edge-mask-left-v8.png"),
    linear-gradient(#000 0 0),
    url("assets/materials/temple-vellum-edge-mask-right-v8.png") !important;
  -webkit-mask-position: left top, center top, right top !important;
  mask-position: left top, center top, right top !important;
  -webkit-mask-size: 144px auto, calc(100% - 208px) 100%, 144px auto !important;
  mask-size: 144px auto, calc(100% - 208px) 100%, 144px auto !important;
  -webkit-mask-repeat: repeat-y, no-repeat, repeat-y !important;
  mask-repeat: repeat-y, no-repeat, repeat-y !important;
  -webkit-mask-composite: source-over, source-over !important;
  mask-composite: add, add !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper::before {
  content: none !important;
  display: none !important;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper :is(
    .chapter-title,
    .printed-chapter-title,
    .book-title
  ) {
  color: var(--reader-ink) !important;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper :is(
    .chapter-kicker,
    .verse-number,
    .paragraph-mark,
    .margin-note-caller,
    .book-opening-edition
  ) {
  color: var(--reader-accent) !important;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper .chapter-heading {
  color: var(--reader-muted) !important;
}

/* Manuscript is the former Classical profile. This late layer keeps its four
   requested roles authoritative across Pages, Scroll, PCE, and 1611 layouts. */
html body[data-typeface="classical"] #reader-scroll > .paper .verse-flow {
  font-family: "Alegreya", Georgia, serif;
  font-weight: 500;
  line-height: 1.55;
}

html body[data-typeface="classical"] #reader-scroll > .paper .verse {
  font-family: "Alegreya", Georgia, serif;
  font-weight: 500;
  line-height: 1.55;
}

html body[data-typeface="classical"] #reader-scroll > .paper .book-title {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif;
  font-style: normal;
  font-weight: 500;
}

html body[data-typeface="classical"] #reader-scroll > .paper :is(
  .chapter-kicker,
  .chapter-title,
  .printed-chapter-title
) {
  font-family: "Alegreya SC", "Alegreya", Georgia, serif;
  font-style: normal;
  font-weight: 400;
}

html body[data-typeface="classical"] #reader-scroll > .paper .chapter-heading {
  font-family: "Alegreya", Georgia, serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}

html body[data-typeface="classical"] #reader-scroll > .paper .verse :is(
  em,
  .supplied-word
) {
  font-family: "Alegreya", Georgia, serif;
  font-size: inherit;
  font-style: italic;
  font-weight: 400;
  vertical-align: baseline;
}

html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  .paper-swatch[data-paper-choice="antique"] span {
  background-color: var(--paper) !important;
  background-image: var(--temple-real-parchment) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

@media (max-width: 900px) {
  html body[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
    #reader-scroll > .paper::before {
    inset: -8px !important;
    border-width: 18px !important;
    border-image-width: 18px !important;
  }

  html body[data-reading-mode="book"][data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
    #reader-scroll > .paper::before {
    inset: 0 !important;
  }
}

/* Vellum is a paper choice, not a Temple-only material. Cambridge and
   Jacobean use the same selected vellum surfaces instead of the retired
   Ancient paper scan and torn Ancient border. The final universal contract at
   the end of this file also shares Temple's ink and fibrous Scroll silhouette. */
html body:is(
  [data-visual-style="illuminated"],
  [data-visual-style="jacobean"]
)[data-paper="antique"] {
  --paper: #f2eee5;
  --paper-edge: #c8bda9;
}

html body:is(
  [data-visual-style="illuminated"],
  [data-visual-style="jacobean"]
)[data-paper="antique"] #reader-scroll > .paper {
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background-color: #f2eee5 !important;
  background-image:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-scroll-seamless-v3.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat, repeat-y !important;
  background-size: 100% 100%, 100% auto !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}

html body[data-reading-mode="book"]:is(
  [data-visual-style="illuminated"],
  [data-visual-style="jacobean"]
)[data-paper="antique"] #reader-scroll > .paper {
  background-image:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

html body:is(
  [data-visual-style="illuminated"],
  [data-visual-style="jacobean"]
)[data-paper="antique"] .paper-swatch[data-paper-choice="antique"] span {
  background-color: #f2eee5 !important;
  background-image: url("assets/materials/temple-vellum-user-selected-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Shared Theatre layer contract
   Theme-specific surface rules must not change drawer positioning or stacking.
   Keep every panel below the edge controls and above the reading surface. */
html body[data-chrome-mode="theatre"]
  :is(.library-panel, .utility-panel),
html body[data-chrome-mode="theatre"]
  .app-layout.utility-open > .utility-panel {
  position: fixed !important;
  z-index: 115 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100dvh !important;
}

/* If the top drawer remains open after either side drawer closes, both side
   panels must continue below the complete header/toolbar stack. The
   all-panel wide-screen rules below may still deliberately reclaim the upper
   corners while all three drawers are open. */
html body[data-chrome-mode="theatre"].theatre-top-open
  :is(.library-panel, .utility-panel),
html body[data-chrome-mode="theatre"].theatre-top-open
  .app-layout.utility-open > .utility-panel {
  top: var(--theatre-top-height) !important;
  bottom: 0 !important;
  height: auto !important;
}

html body[data-chrome-mode="theatre"]
  .app-header {
  position: fixed !important;
  z-index: 114 !important;
}

html body[data-chrome-mode="theatre"][data-theme-tone][data-visual-style][data-reading-mode]
  .reader-toolbar {
  position: fixed !important;
  z-index: 113 !important;
}

html body[data-chrome-mode="theatre"]
  .reference-trail {
  position: fixed !important;
  z-index: 112 !important;
}

html body[data-chrome-mode="theatre"][data-reading-mode="scroll"]
  .reader-shell {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}

html body[data-chrome-mode="theatre"][data-reading-mode="scroll"]
  #reader-scroll > .paper {
  position: relative !important;
  z-index: 2 !important;
}

html body[data-chrome-mode="theatre"]
  .theatre-edge-control {
  z-index: 120 !important;
}

/* Theatre inherits the selected light or dark appearance. Keep application
   text and controls on the same tone as the visible menus across all themes. */
html body[data-chrome-mode="theatre"][data-theme-tone="light"] {
  color-scheme: light;
  --ink: #282722;
  --muted: #6f6c64;
  --faint: #99958b;
  color: var(--ink);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] {
  color-scheme: dark;
  --ink: #f2eee5;
  --muted: #bab2a3;
  --faint: #8e8577;
  color: var(--ink);
}

/* Pages-mode turn trials. The illusion is an independent layer above the
   paper and below period frames/controls, so pagination and Scripture layout
   never depend on the selected motion treatment. */
.page-turn-illusion {
  display: none;
  position: absolute;
  z-index: 7;
  overflow: hidden;
  border-radius: 2px;
  perspective: 1600px;
  pointer-events: none;
  contain: layout paint;
}

body[data-reading-mode="book"] .page-turn-illusion.is-active {
  display: block;
}

.page-turn-illusion-sheet,
.page-turn-illusion-shade {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.page-turn-illusion-sheet {
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  background-image: var(--paper-texture);
  background-position: center top;
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
}

.page-turn-illusion-shade {
  opacity: 0;
}

/* Trial 1: the familiar, brisk horizontal movement used by many readers. */
body[data-page-turn-effect="slide"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  transform-origin: left center;
  animation: page-trial-slide-forward 420ms cubic-bezier(.2,.75,.25,1) both;
}
body[data-page-turn-effect="slide"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  transform-origin: right center;
  animation: page-trial-slide-backward 420ms cubic-bezier(.2,.75,.25,1) both;
}
body[data-page-turn-effect="slide"] .page-turn-illusion-shade {
  background: linear-gradient(90deg, transparent 0%, rgba(20,14,8,.18) 48%, rgba(255,255,255,.28) 55%, transparent 70%);
}
body[data-page-turn-effect="slide"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  animation: page-trial-sweep-forward 420ms ease-out both;
}
body[data-page-turn-effect="slide"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  animation: page-trial-sweep-backward 420ms ease-out both;
}

/* Trial 2: a dimensional curl without attempting a costly live page mesh. */
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  transform-origin: left center;
  animation: page-trial-curl-forward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  transform-origin: right center;
  animation: page-trial-curl-backward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion-shade {
  background:
    linear-gradient(90deg, transparent 30%, rgba(255,255,255,.24) 47%, rgba(35,24,12,.28) 51%, transparent 69%);
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  transform-origin: left center;
  animation: page-trial-curl-shade-forward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  transform-origin: right center;
  animation: page-trial-curl-shade-backward 560ms cubic-bezier(.22,.72,.24,1) both;
}

/* Trial 3: a physical sheet lift with a soft shadow beneath it. */
body[data-page-turn-effect="lift"] .page-turn-illusion .page-turn-illusion-sheet {
  transform-origin: center bottom;
  animation: page-trial-lift 520ms cubic-bezier(.18,.72,.28,1) both;
}
body[data-page-turn-effect="lift"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  animation-name: page-trial-lift-backward;
}
body[data-page-turn-effect="lift"] .page-turn-illusion-shade {
  background: radial-gradient(ellipse at 50% 96%, rgba(20,13,7,.3), transparent 58%);
  animation: page-trial-lift-shadow 520ms ease-out both;
}

/* Trial 4: a quiet light-and-shadow dissolve for readers who dislike motion. */
body[data-page-turn-effect="fade"] .page-turn-illusion .page-turn-illusion-sheet {
  animation: page-trial-fade 360ms ease-out both;
}
body[data-page-turn-effect="fade"] .page-turn-illusion-shade {
  background: linear-gradient(100deg, transparent 10%, rgba(28,18,9,.13) 44%, rgba(255,255,255,.23) 54%, transparent 88%);
}
body[data-page-turn-effect="fade"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  animation: page-trial-sweep-forward 360ms ease-out both;
}
body[data-page-turn-effect="fade"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  animation: page-trial-sweep-backward 360ms ease-out both;
}

@keyframes page-trial-slide-forward {
  0% { opacity: .88; transform: translateX(0) scaleX(1); box-shadow: 18px 0 32px rgba(20,13,7,.2); }
  100% { opacity: 0; transform: translateX(-13%) scaleX(.96); box-shadow: 4px 0 10px rgba(20,13,7,0); }
}
@keyframes page-trial-slide-backward {
  0% { opacity: .88; transform: translateX(0) scaleX(1); box-shadow: -18px 0 32px rgba(20,13,7,.2); }
  100% { opacity: 0; transform: translateX(13%) scaleX(.96); box-shadow: -4px 0 10px rgba(20,13,7,0); }
}
@keyframes page-trial-sweep-forward {
  0% { opacity: 0; transform: translateX(45%); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: translateX(-50%); }
}
@keyframes page-trial-sweep-backward {
  0% { opacity: 0; transform: translateX(-45%) scaleX(-1); }
  34% { opacity: .9; }
  100% { opacity: 0; transform: translateX(50%) scaleX(-1); }
}
@keyframes page-trial-curl-forward {
  0% { opacity: .9; transform: rotateY(0deg) translateX(0); box-shadow: 20px 0 34px rgba(20,13,7,.24); }
  65% { opacity: .78; }
  100% { opacity: 0; transform: rotateY(-74deg) translateX(-7%); box-shadow: 4px 0 8px rgba(20,13,7,0); }
}
@keyframes page-trial-curl-backward {
  0% { opacity: .9; transform: rotateY(0deg) translateX(0); box-shadow: -20px 0 34px rgba(20,13,7,.24); }
  65% { opacity: .78; }
  100% { opacity: 0; transform: rotateY(74deg) translateX(7%); box-shadow: -4px 0 8px rgba(20,13,7,0); }
}
@keyframes page-trial-curl-shade-forward {
  0% { opacity: 0; transform: translateX(40%) scaleX(.6); }
  42% { opacity: .9; }
  100% { opacity: 0; transform: translateX(-42%) scaleX(.22); }
}
@keyframes page-trial-curl-shade-backward {
  0% { opacity: 0; transform: translateX(-40%) scaleX(-.6); }
  42% { opacity: .9; }
  100% { opacity: 0; transform: translateX(42%) scaleX(-.22); }
}
@keyframes page-trial-lift {
  0% { opacity: .88; transform: translateY(0) scale(1) rotateZ(0); box-shadow: 0 8px 18px rgba(20,13,7,.13); }
  45% { opacity: .78; transform: translateY(-1.5%) scale(.992) rotateZ(-.2deg); box-shadow: 0 26px 48px rgba(20,13,7,.24); }
  100% { opacity: 0; transform: translateY(0) scale(.985) rotateZ(-.35deg); box-shadow: 0 5px 10px rgba(20,13,7,0); }
}
@keyframes page-trial-lift-backward {
  0% { opacity: .88; transform: translateY(0) scale(1) rotateZ(0); box-shadow: 0 8px 18px rgba(20,13,7,.13); }
  45% { opacity: .78; transform: translateY(-1.5%) scale(.992) rotateZ(.2deg); box-shadow: 0 26px 48px rgba(20,13,7,.24); }
  100% { opacity: 0; transform: translateY(0) scale(.985) rotateZ(.35deg); box-shadow: 0 5px 10px rgba(20,13,7,0); }
}
@keyframes page-trial-lift-shadow {
  0%, 100% { opacity: 0; transform: scale(.96); }
  48% { opacity: .92; transform: scale(1); }
}
@keyframes page-trial-fade {
  0% { opacity: .74; filter: blur(0); }
  100% { opacity: 0; filter: blur(1.2px); }
}

#display-view .page-turn-trials {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#display-view .page-turn-trials-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#display-view .page-turn-effect-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}
#display-view .page-turn-effect-control button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 3px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}
#display-view .page-turn-effect-control button svg {
  width: 14px;
  height: 14px;
}
#display-view .page-turn-effect-control button:hover:not(.active) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
#display-view .page-turn-effect-control button.active {
  color: var(--button-active-ink, #fff);
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}
#display-view .page-turn-trials > small {
  display: block;
  margin-top: 6px;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.3;
}

@media (max-width: 520px) {
  #display-view .page-turn-effect-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-turn-illusion {
    display: none !important;
  }
  body[data-reading-mode="book"] :is(.book-flow, .chapter-section).page-animate {
    animation: none !important;
  }
}

@media print {
  .page-turn-illusion {
    display: none !important;
  }
}

/* Cambridge Dark Pages bound-Bible interior.
   A smooth synthetic lining fills the broad inside cover. The natural leather
   turns over only at the outside perimeter, with a restrained stitch line
   joining the two materials, as on a premium flexible Bible binding. */
html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  --reader-frame-x: clamp(34px, 4.6vw, 70px);
  --reader-frame-y: clamp(30px, 4vw, 58px);
  --cambridge-turn-in: clamp(20px, 1.8vw, 28px);
  --cambridge-stitch-band: clamp(18px, 1.35vw, 24px);
  --cambridge-corner-size: min(var(--reader-frame-x), var(--reader-frame-y), 68px);
  isolation: isolate;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: var(--reader-frame-y) var(--reader-frame-x) !important;
  border: 0 !important;
  outline: 1px solid rgba(194, 151, 62, .24) !important;
  outline-offset: -1px;
  background-color: #030303 !important;
  background-image:
    radial-gradient(ellipse at 50% 7%, rgba(255,255,255,.045), transparent 45%),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 9%, transparent 91%, rgba(0,0,0,.3)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34)),
    var(--cambridge-lining-source) !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, cover !important;
  box-shadow:
    inset 0 0 0 5px rgba(0,0,0,.5),
    inset 0 0 34px rgba(0,0,0,.48),
    0 10px 30px rgba(0,0,0,.34) !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll > .paper {
  position: relative;
  z-index: 5 !important;
  max-width: 100%;
  margin: 0 auto !important;
  box-shadow:
    0 0 0 1px rgba(205, 165, 78, .24),
    0 0 0 5px rgba(0,0,0,.42),
    0 7px 22px rgba(0,0,0,.48) !important;
}

html body[data-reading-mode="book"][data-reader-width="full"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  --reader-frame-x: clamp(30px, 4vw, 58px);
  --reader-frame-y: clamp(28px, 3.6vw, 50px);
  box-sizing: border-box;
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="one"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  width: min(100%, calc(820px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="two"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  width: min(100%, calc(1180px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  box-sizing: border-box;
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(64rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-effective-spread="two"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(88rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 10 !important;
  inset: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image:
    url("assets/materials/cambridge-binding-corner-tl-v12.png"),
    url("assets/materials/cambridge-binding-corner-tr-v12.png"),
    url("assets/materials/cambridge-binding-corner-bl-v12.png"),
    url("assets/materials/cambridge-binding-corner-br-v12.png") !important;
  background-position:
    left top,
    right top,
    left bottom,
    right bottom !important;
  background-size:
    var(--cambridge-corner-size) var(--cambridge-corner-size),
    var(--cambridge-corner-size) var(--cambridge-corner-size),
    var(--cambridge-corner-size) var(--cambridge-corner-size),
    var(--cambridge-corner-size) var(--cambridge-corner-size) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 9 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  padding: var(--cambridge-turn-in) !important;
  pointer-events: none !important;
  background-image:
    url("assets/materials/cambridge-binding-stitch-h-v1.png"),
    url("assets/materials/cambridge-binding-stitch-h-v1.png"),
    url("assets/materials/cambridge-binding-stitch-v-v1.png"),
    url("assets/materials/cambridge-binding-stitch-v-v1.png"),
    linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.32)),
    var(--cambridge-goatskin-source) !important;
  background-position:
    left 0 top 2px,
    left 0 bottom 2px,
    left 2px top 0,
    right 2px top 0,
    center,
    center !important;
  background-size:
    auto var(--cambridge-stitch-band),
    auto var(--cambridge-stitch-band),
    var(--cambridge-stitch-band) auto,
    var(--cambridge-stitch-band) auto,
    100% 100%,
    cover !important;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y,
    no-repeat,
    no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.82),
    inset 0 0 12px rgba(0,0,0,.7),
    0 0 0 1px rgba(190,145,63,.18) !important;
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    var(--cambridge-turn-in) var(--cambridge-turn-in),
    var(--cambridge-turn-in) calc(100% - var(--cambridge-turn-in)),
    calc(100% - var(--cambridge-turn-in)) calc(100% - var(--cambridge-turn-in)),
    calc(100% - var(--cambridge-turn-in)) var(--cambridge-turn-in),
    var(--cambridge-turn-in) var(--cambridge-turn-in)
  ) !important;
}

@container (max-width: 620px) {
  html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
    #reader-scroll {
    --reader-frame-x: clamp(20px, 5cqw, 32px);
    --reader-frame-y: clamp(18px, 4.5cqw, 30px);
    --cambridge-turn-in: clamp(14px, 3.6cqw, 20px);
    --cambridge-stitch-band: clamp(13px, 3.3cqw, 18px);
  }
}

/* Cambridge bound-interior v17.
   One top-left master supplies the four fixed corner caps and both responsive
   rails. The caps overlap the rails by a few pixels, so the seven pleats,
   curved stitch, leather grain, and synthetic-liner transition all meet
   inside the same source image. Explicit elements avoid the prior even-odd
   clip-path, which could paint the leather ring over the Scripture paper. */
.cambridge-binding-frame {
  display: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll {
  --cambridge-corner-size: max(var(--reader-frame-x), var(--reader-frame-y));
  --cambridge-edge-overlap: 8px;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll::before,
html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll::after {
  content: none !important;
  display: none !important;
  background: none !important;
  clip-path: none !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  #reader-scroll > .cambridge-binding-frame {
  display: block;
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-frame > span {
  display: block;
  position: absolute;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-corner {
  z-index: 2;
  width: var(--cambridge-corner-size);
  height: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-corner-master-v23.png") 0 0 / 100% 100% no-repeat;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-corner-tl {
  top: 0;
  left: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-corner-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-corner-bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-corner-br {
  right: 0;
  bottom: 0;
  transform: scale(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  :is(.cambridge-binding-edge-top, .cambridge-binding-edge-bottom) {
  z-index: 1;
  right: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  left: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  height: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-edge-h-v26.png") var(--cambridge-edge-overlap) 0 /
    calc(var(--cambridge-corner-size) * 3) var(--cambridge-corner-size) repeat-x;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-edge-top {
  top: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-edge-bottom {
  bottom: 0;
  transform: scaleY(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  :is(.cambridge-binding-edge-left, .cambridge-binding-edge-right) {
  z-index: 1;
  top: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  bottom: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  width: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-edge-v-v26.png") 0 var(--cambridge-edge-overlap) /
    var(--cambridge-corner-size) calc(var(--cambridge-corner-size) * 3) repeat-y;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-edge-left {
  left: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-chrome-mode="dark"]
  .cambridge-binding-edge-right {
  right: 0;
  transform: scaleX(-1);
}

/* Cambridge bound interior v18.
   The reader shell is transparent outside the rounded binding. The fine-grain
   lambskin used by the Cambridge background forms the turned outer perimeter,
   while the smooth synthetic material is a separate inset lining. Applying
   the same book layer in dark Theatre mode keeps Theatre a page view instead
   of making it resemble Scroll. */
html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  --reader-frame-x: clamp(34px, 4.6vw, 70px);
  --reader-frame-y: clamp(30px, 4vw, 58px);
  --cambridge-corner-size: max(var(--reader-frame-x), var(--reader-frame-y));
  --cambridge-edge-overlap: 8px;
  isolation: isolate;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: var(--reader-frame-y) var(--reader-frame-x) !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28) !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll > .paper {
  position: relative;
  z-index: 5 !important;
  max-width: 100%;
  margin: 0 auto !important;
  box-shadow:
    0 0 0 1px rgba(205, 165, 78, .24),
    0 0 0 5px rgba(0, 0, 0, .38),
    0 7px 22px rgba(0, 0, 0, .46) !important;
}

html body[data-reading-mode="book"][data-reader-width="full"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll > .paper,
html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  --reader-frame-x: clamp(30px, 4vw, 58px);
  --reader-frame-y: clamp(28px, 3.6vw, 50px);
  box-sizing: border-box;
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="one"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  width: min(100%, calc(820px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="two"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  width: min(100%, calc(1180px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  box-sizing: border-box;
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(72rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-effective-spread="two"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(104rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll::before,
html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll::after {
  content: none !important;
  display: none !important;
  background: none !important;
  clip-path: none !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll > .cambridge-binding-frame {
  display: block;
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll > .cambridge-binding-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px;
  border-radius: calc(var(--cambridge-corner-size) * .56);
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255, 255, 255, .07), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(0, 0, 0, .18)),
    var(--cambridge-goatskin-source) center / cover no-repeat;
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    20px 20px,
    20px calc(100% - 20px),
    calc(100% - 20px) calc(100% - 20px),
    calc(100% - 20px) 20px,
    20px 20px
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 0 13px rgba(0, 0, 0, .68);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-frame > span {
  display: block;
  position: absolute;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-lining {
  z-index: 0;
  inset: 20px;
  border-radius: calc(var(--cambridge-corner-size) * .32);
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, .045), transparent 42%),
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 10%, transparent 90%, rgba(0, 0, 0, .28)),
    linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(0, 0, 0, .3)),
    var(--cambridge-lining-source) center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 0 28px rgba(0, 0, 0, .48);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-corner {
  z-index: 3;
  width: var(--cambridge-corner-size);
  height: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-corner-master-v23.png") 0 0 / 100% 100% no-repeat;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) :is(.cambridge-binding-edge-top, .cambridge-binding-edge-bottom) {
  z-index: 2;
  right: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  left: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  height: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-edge-h-v26.png") var(--cambridge-edge-overlap) 0 /
    calc(var(--cambridge-corner-size) * 3) var(--cambridge-corner-size) repeat-x;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) :is(.cambridge-binding-edge-left, .cambridge-binding-edge-right) {
  z-index: 2;
  top: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  bottom: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  width: var(--cambridge-corner-size);
  background: url("assets/materials/cambridge-binding-edge-v-v26.png") 0 var(--cambridge-edge-overlap) /
    var(--cambridge-corner-size) calc(var(--cambridge-corner-size) * 3) repeat-y;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-corner-tl {
  top: 0;
  left: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-corner-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-corner-bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-corner-br {
  right: 0;
  bottom: 0;
  transform: scale(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-edge-top {
  top: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-edge-bottom {
  bottom: 0;
  transform: scaleY(-1);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-edge-left {
  left: 0;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) .cambridge-binding-edge-right {
  right: 0;
  transform: scaleX(-1);
}

@container (max-width: 620px) {
  html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
    [data-chrome-mode="dark"],
    [data-chrome-mode="theatre"][data-theme-tone="dark"]
  ) #reader-scroll {
    --reader-frame-x: clamp(20px, 5cqw, 32px);
    --reader-frame-y: clamp(18px, 4.5cqw, 30px);
  }
}

/* Cambridge material completion v19.
   Dark Cambridge rests on a continuous photographic mahogany-like hardwood.
   Light Cambridge uses a real 4K fine-grain veneer beneath a restrained pale
   maple figure layer, then inverts the same bound-Bible construction to white
   lambskin, smooth white synthetic lining, and silver hardware. */
body[data-visual-style="illuminated"] {
  --cambridge-mahogany-source: url("assets/materials/cambridge-mahogany-real-v1-mobile.webp");
  --cambridge-maple-grain-source: url("assets/materials/cambridge-maple-grain-base-v1-mobile.webp");
  --cambridge-maple-figure-source: url("assets/materials/cambridge-pale-maple-figure-v1-mobile.webp");
}

@media (min-width: 760px) {
  body[data-visual-style="illuminated"] {
    --cambridge-mahogany-source: url("assets/materials/cambridge-mahogany-real-v1-1x.webp");
    --cambridge-maple-grain-source: url("assets/materials/cambridge-maple-grain-base-v1-1x.webp");
    --cambridge-maple-figure-source: url("assets/materials/cambridge-pale-maple-figure-v1-1x.webp");
  }
}

@media (min-width: 1700px), (min-resolution: 1.5dppx) {
  body[data-visual-style="illuminated"] {
    --cambridge-mahogany-source: url("assets/materials/cambridge-mahogany-real-v1-2x.webp");
    --cambridge-maple-grain-source: url("assets/materials/cambridge-maple-grain-base-v1-2x.webp");
    --cambridge-maple-figure-source: url("assets/materials/cambridge-pale-maple-figure-v1-2x.webp");
  }
}

html body[data-visual-style="illuminated"][data-theme-tone="dark"],
body[data-visual-style="illuminated"][data-theme-tone="dark"] :is(
  .app-header,
  .library-panel,
  .utility-panel,
  .reader-toolbar,
  .reader-shell
) {
  background-color: #210905 !important;
  background-image:
    linear-gradient(180deg, rgba(34, 4, 2, .36), rgba(8, 1, 1, .58)),
    var(--cambridge-mahogany-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Scroll sits directly on Cambridge's dark hardwood desk. The synthetic
   lining belongs to the bound interior in Pages and must not cover this
   continuous mahogany field. */
html body[data-reading-mode="scroll"][data-visual-style="illuminated"][data-theme-tone="dark"]
  .reader-scroll {
  background-color: #210905 !important;
  background-image:
    linear-gradient(180deg, rgba(34, 4, 2, .36), rgba(8, 1, 1, .58)),
    var(--cambridge-mahogany-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body[data-visual-style="illuminated"][data-theme-tone="dark"] :is(
  .library-panel,
  .utility-panel,
  .app-header,
  .reader-toolbar
) {
  background-image:
    linear-gradient(180deg, rgba(22, 2, 2, .58), rgba(5, 0, 0, .72)),
    var(--cambridge-mahogany-source) !important;
}

body[data-visual-style="illuminated"][data-theme-tone="dark"] .header-action-tabs {
  background-color: rgba(16, 4, 3, .88) !important;
  background-image:
    linear-gradient(180deg, rgba(42, 12, 8, .42), rgba(8, 1, 1, .72)),
    var(--cambridge-mahogany-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

html body[data-visual-style="illuminated"][data-theme-tone="light"],
body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .app-header,
  .library-panel,
  .utility-panel,
  .reader-toolbar,
  .reader-shell
) {
  background-color: #e8cf9d !important;
  background-image:
    linear-gradient(180deg, rgba(255, 251, 239, .28), rgba(224, 188, 119, .16)),
    var(--cambridge-maple-figure-source),
    var(--cambridge-maple-grain-source) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-blend-mode: normal, soft-light, normal !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .library-panel,
  .utility-panel,
  .app-header,
  .reader-toolbar
) {
  background-image:
    linear-gradient(180deg, rgba(255, 253, 247, .72), rgba(233, 218, 190, .6)),
    var(--cambridge-maple-figure-source),
    var(--cambridge-maple-grain-source) !important;
}

/* Cambridge panels v28: keep one continuous wood surface and render the top
   and side panels as faint transparent washes rather than separate wood
   photographs. */
body[data-visual-style="illuminated"][data-theme-tone="dark"] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel
) {
  background-color: rgba(12, 3, 2, .14) !important;
  background-image:
    linear-gradient(180deg, rgba(12, 3, 2, .11), rgba(3, 1, 1, .18)) !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .app-header,
  .reader-toolbar,
  .library-panel,
  .utility-panel
) {
  background-color: rgba(255, 250, 238, .16) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, .18), rgba(244, 232, 208, .11)) !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .header-action-tabs {
  background-color: rgba(246, 245, 241, .9) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(200, 204, 207, .88)) !important;
  background-attachment: scroll !important;
}

/* Silver replaces Cambridge Light's gold system at the token level so every
   active button, page turn, focus ring, selection, paper edge, and tool state
   inherits the same metal finish. */
body[data-visual-style="illuminated"][data-theme-tone="light"] {
  --gold: #737b80;
  --accent: #737b80;
  --reader-accent: #767e83;
  --reader-highlight: #d8dde0;
  --paper-edge: #aeb5b9;
  --style-gold-deep: #4e575c;
  --style-gold-mid: #8d969b;
  --style-gold-bright: #e8ecee;
  --style-gold-glint: #ffffff;
  --style-active-bg:
    linear-gradient(108deg, rgba(255,255,255,.88) 0 16%, transparent 30% 60%, rgba(255,255,255,.6) 72% 85%, transparent 94%),
    linear-gradient(180deg, #ffffff 0%, #dfe3e5 27%, #8e969b 55%, #cbd0d3 76%, #f6f8f8 100%);
  --style-active-border: #70787d;
  --style-active-ink: #202427;
  --button-focus: #8e989e;
  --button-active-bg:
    linear-gradient(108deg, rgba(255,255,255,.9) 0 16%, transparent 30% 60%, rgba(255,255,255,.62) 72% 85%, transparent 94%),
    linear-gradient(180deg, #ffffff 0%, #e2e6e8 27%, #90989d 55%, #ccd2d5 76%, #f7f9f9 100%);
  --button-active-hover-bg:
    linear-gradient(108deg, rgba(255,255,255,.98) 0 19%, transparent 32% 58%, rgba(255,255,255,.76) 70% 87%, transparent 95%),
    linear-gradient(180deg, #ffffff 0%, #edf0f2 27%, #a0a8ad 55%, #d8dde0 76%, #ffffff 100%);
  --button-active-border: #6f777c;
  --button-active-ink: #202427;
  --button-active-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(54,61,65,.46),
    0 2px 5px rgba(53,61,66,.26);
  --button-pressed-bg: linear-gradient(180deg, #848c91 0%, #b9c0c4 48%, #eef1f2 100%);
}

body[data-visual-style="illuminated"][data-theme-tone="light"] ::selection {
  color: #171a1c;
  background: rgba(176, 184, 189, .5);
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .reader-toolbar .mode-control button.active,
  .library-panel .testament-tabs button.active,
  .header-action-indicator,
  .page-turn,
  .global-search .search-submit
) {
  color: var(--button-active-ink) !important;
  border-color: var(--button-active-border) !important;
  background: var(--button-active-bg) !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .wordmark-mark {
  color: #596166;
  border-color: #8b9499;
  background-color: #f1f1ee;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(211,215,217,.9)),
    url("assets/materials/cambridge-black-leather-user-v1.png");
  background-blend-mode: screen;
  box-shadow:
    inset 3px 0 0 #b9bec1,
    inset 4px 0 0 rgba(255,255,255,.82),
    inset 0 0 0 2px #f2f2ef,
    inset 0 0 0 3px rgba(126,136,142,.7),
    0 2px 6px rgba(54,61,65,.18);
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .wordmark-bible-title,
  .wordmark-bible-version,
  .wordmark-bible-mobile
) {
  color: #5b6469 !important;
  text-shadow: 0 1px 0 #fff !important;
}

/* The bound-book geometry is shared by both Cambridge tones. */
html body[data-reading-mode="book"][data-visual-style="illuminated"] #reader-scroll {
  --reader-frame-x: clamp(34px, 4.6vw, 70px);
  --reader-frame-y: clamp(30px, 4vw, 58px);
  --cambridge-corner-size: max(var(--reader-frame-x), var(--reader-frame-y));
  --cambridge-edge-overlap: 8px;
  isolation: isolate;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: var(--reader-frame-y) var(--reader-frame-x) !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]
  #reader-scroll::before,
html body[data-reading-mode="book"][data-visual-style="illuminated"]
  #reader-scroll::after {
  content: none !important;
  display: none !important;
  background: none !important;
  clip-path: none !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"]
  #reader-scroll > .paper {
  position: relative;
  z-index: 5 !important;
  max-width: 100%;
  margin: 0 auto !important;
}

html body[data-reading-mode="book"][data-reader-width="full"][data-visual-style="illuminated"]
  #reader-scroll > .paper,
html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"]
  #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-visual-style="illuminated"]
  #reader-scroll {
  --reader-frame-x: clamp(30px, 4vw, 58px);
  --reader-frame-y: clamp(28px, 3.6vw, 50px);
  box-sizing: border-box;
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="one"][data-visual-style="illuminated"]
  #reader-scroll {
  width: min(100%, calc(820px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="contained"][data-effective-spread="two"][data-visual-style="illuminated"]
  #reader-scroll {
  width: min(100%, calc(1180px + var(--reader-frame-x) + var(--reader-frame-x)));
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-visual-style="illuminated"]
  #reader-scroll {
  box-sizing: border-box;
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(72rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
  margin-inline: auto;
}

html body[data-reading-mode="book"][data-reader-width="moderate"][data-effective-spread="two"][data-visual-style="illuminated"]
  #reader-scroll {
  width: min(
    calc(100% - clamp(16px, 2vw, 36px)),
    calc(104rem + var(--reader-frame-x) + var(--reader-frame-x))
  );
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] #reader-scroll > .cambridge-binding-frame {
  display: block;
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-frame > span {
  display: block;
  position: absolute;
  pointer-events: none;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-corner {
  z-index: 3;
  width: var(--cambridge-corner-size);
  height: var(--cambridge-corner-size);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] :is(
  .cambridge-binding-edge-top,
  .cambridge-binding-edge-bottom
) {
  z-index: 2;
  right: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  left: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  height: var(--cambridge-corner-size);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] :is(
  .cambridge-binding-edge-left,
  .cambridge-binding-edge-right
) {
  z-index: 2;
  top: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  bottom: calc(var(--cambridge-corner-size) - var(--cambridge-edge-overlap));
  width: var(--cambridge-corner-size);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-corner-tl { top: 0; left: 0; }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-corner-tr { top: 0; right: 0; transform: scaleX(-1); }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-corner-br { right: 0; bottom: 0; transform: scale(-1); }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-edge-top { top: 0; }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-edge-bottom { bottom: 0; transform: scaleY(-1); }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-edge-left { left: 0; }
html body[data-reading-mode="book"][data-visual-style="illuminated"] .cambridge-binding-edge-right { right: 0; transform: scaleX(-1); }

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  #reader-scroll > .cambridge-binding-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px;
  border-radius: calc(var(--cambridge-corner-size) * .56);
  background:
    radial-gradient(ellipse at 50% 3%, rgba(255,255,255,.68), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(183,189,192,.18)),
    url("assets/materials/cambridge-black-leather-user-v1.png") center / cover no-repeat;
  background-blend-mode: screen, screen, normal;
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    20px 20px,
    20px calc(100% - 20px),
    calc(100% - 20px) calc(100% - 20px),
    calc(100% - 20px) 20px,
    20px 20px
  );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 0 13px rgba(70,78,83,.24);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  .cambridge-binding-lining {
  z-index: 0;
  inset: 20px;
  border-radius: calc(var(--cambridge-corner-size) * .32);
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.88), transparent 43%),
    linear-gradient(90deg, rgba(107,115,120,.08), transparent 11%, transparent 89%, rgba(107,115,120,.1)),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(205,210,213,.74)),
    var(--cambridge-lining-source) center / cover no-repeat;
  background-blend-mode: screen, normal, screen, normal;
  box-shadow:
    inset 0 0 0 1px rgba(105,115,121,.18),
    inset 0 0 24px rgba(83,92,98,.18);
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  .cambridge-binding-corner {
  background: url("assets/materials/cambridge-white-binding-corner-master-v19.png") 0 0 / 100% 100% no-repeat;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  :is(.cambridge-binding-edge-top, .cambridge-binding-edge-bottom) {
  background: url("assets/materials/cambridge-white-binding-edge-h-v19.png") 0 0 /
    var(--cambridge-corner-size) var(--cambridge-corner-size) repeat-x;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  :is(.cambridge-binding-edge-left, .cambridge-binding-edge-right) {
  background: url("assets/materials/cambridge-white-binding-edge-v-v19.png") 0 0 /
    var(--cambridge-corner-size) var(--cambridge-corner-size) repeat-y;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  #reader-scroll > .paper {
  box-shadow:
    0 0 0 1px rgba(130,140,146,.56),
    0 0 0 5px rgba(92,101,107,.22),
    0 7px 22px rgba(65,72,77,.28) !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  #reader-scroll {
  box-shadow: 0 12px 34px rgba(82,67,43,.24) !important;
}

/* Cambridge binding v25: the current corner and rail assets already contain
   both the exterior leather and the inset synthetic lining. Do not leave the
   legacy full-frame goatskin or smooth-lining textures underneath them: their
   outer transparent pixels must reveal the selected wood background. */
html body[data-reading-mode="book"][data-visual-style="illuminated"]
  #reader-scroll > .cambridge-binding-frame::before,
html body[data-reading-mode="book"][data-visual-style="illuminated"]
  #reader-scroll > .cambridge-binding-frame > .cambridge-binding-lining {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

@container (max-width: 620px) {
  html body[data-reading-mode="book"][data-visual-style="illuminated"] #reader-scroll {
    --reader-frame-x: clamp(20px, 5cqw, 32px);
    --reader-frame-y: clamp(18px, 4.5cqw, 30px);
  }
}

/* Cambridge Light v20: remove the last literal-gold declarations which do
   not inherit from the Cambridge metal tokens above. */
body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  .margin-note-caller,
  .paragraph-mark,
  .verse-number
) {
  color: #697278 !important;
  border-color: #8f999e !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .margin-note-caller:is(
  :hover,
  :focus-visible
) {
  color: #22272a !important;
  background: #e1e5e7 !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"]
  #display-view .visual-style-swatch {
  color: #687177 !important;
  border-color: #9ba4a9 !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] :is(
  #continuous-chapter-toggle,
  #verse-number-toggle,
  #paragraph-mark-toggle,
  #word-help-toggle
) {
  accent-color: #747e84 !important;
  border-color: #909a9f !important;
}

html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  #reader-scroll > .paper {
  border-image:
    linear-gradient(
      90deg,
      #768086 0%,
      #f5f7f8 24%,
      #8e989d 50%,
      #e5e9eb 76%,
      #768086 100%
    ) 1 !important;
}

/* Universal Vellum contract.
   Choosing Vellum always means one physical sheet: Temple's accepted surface,
   iron-gall ink palette, and asymmetric fibrous edge masks in continuous
   reading. Themes may still supply the surrounding frame and their own paper
   drop-shadow strength, so this layer intentionally does not set box-shadow. */
html body[data-paper="antique"] {
  --paper: #f2eee5 !important;
  --paper-edge: #c8bda9 !important;
  --reader-ink: #47301f !important;
  --reader-muted: #715d47 !important;
  --reader-accent: #7f332b !important;
  --reader-rule: rgba(91, 72, 49, .24) !important;
  --reader-hover: rgba(135, 59, 50, .06) !important;
  --reader-control-bg: rgba(255, 252, 244, .62) !important;
}

html body[data-paper="antique"] #reader-scroll > .paper {
  position: relative !important;
  color: var(--reader-ink) !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 .35px .25px rgba(65, 35, 16, .18);
}

html body[data-reading-mode][data-visual-style][data-theme-tone][data-paper="antique"]
  #reader-scroll > .paper {
  border: 0 !important;
  border-image: none !important;
  border-image-source: none !important;
}

html body[data-reading-mode="book"][data-paper="antique"] #reader-scroll > .paper {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"]
  #reader-scroll > .paper {
  --vellum-surface-inset: 8px;
  z-index: 0;
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"][data-reader-width="full"]
  #reader-scroll > .paper {
  --vellum-surface-inset: clamp(4px, 2.5vw, 40px);
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"][data-center-references="true"]
  #reader-scroll > .paper {
  padding-inline: max(clamp(22px, 3.8vw, 54px), calc(var(--vellum-surface-inset) + 20px)) !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-paper="antique"]
  #reader-scroll > .paper::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 var(--vellum-surface-inset) !important;
  display: block !important;
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-scroll-seamless-v3.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat, repeat-y !important;
  background-size: 100% 100%, 100% auto !important;
  -webkit-mask-image:
    url("assets/materials/temple-vellum-edge-mask-left-v10.png"),
    linear-gradient(#000 0 0),
    url("assets/materials/temple-vellum-edge-mask-right-v10.png") !important;
  mask-image:
    url("assets/materials/temple-vellum-edge-mask-left-v10.png"),
    linear-gradient(#000 0 0),
    url("assets/materials/temple-vellum-edge-mask-right-v10.png") !important;
  -webkit-mask-position: left top, center top, right top !important;
  mask-position: left top, center top, right top !important;
  -webkit-mask-size: 20px 1782px, calc(100% - 24px) 100%, 20px 1484px !important;
  mask-size: 20px 1782px, calc(100% - 24px) 100%, 20px 1484px !important;
  -webkit-mask-repeat: repeat-y, no-repeat, repeat-y !important;
  mask-repeat: repeat-y, no-repeat, repeat-y !important;
  -webkit-mask-composite: source-over, source-over !important;
  mask-composite: add, add !important;
  content: "" !important;
  pointer-events: none;
}

/* Temple previously disabled the vellum pseudo-layer with a more-specific
   selector. Keep the content-safe surface architecture authoritative there. */
html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body:is([data-reading-mode="chapter"], [data-reading-mode="scroll"])[data-visual-style="jerusalem"][data-paper="antique"][data-theme-tone]
  #reader-scroll > .paper::before {
  display: block !important;
  content: "" !important;
}

html body[data-reading-mode="book"][data-paper="antique"]
  #reader-scroll > .paper::before {
  content: none !important;
  display: none !important;
}

html body[data-paper="antique"] #reader-scroll > .paper :is(
  .chapter-title,
  .printed-chapter-title,
  .book-title
) {
  color: var(--reader-ink) !important;
}

html body[data-paper="antique"] #reader-scroll > .paper
  .book-title-line:not(.book-title-line-last) {
  color: #6b4a1b !important;
}

html body[data-paper="antique"] #reader-scroll > .paper :is(
  .chapter-kicker,
  .verse-number,
  .paragraph-mark,
  .margin-note-caller,
  .book-opening-edition
) {
  color: var(--reader-accent) !important;
}

html body[data-paper="antique"] #reader-scroll > .paper .chapter-heading {
  color: var(--reader-muted) !important;
}

html body[data-paper="antique"] .paper-swatch[data-paper-choice="antique"] span {
  background-color: var(--paper) !important;
  background-image: url("assets/materials/temple-vellum-user-selected-v1.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Universal Background details contract.
   The control governs the material stage around the reading paper in every
   theme. Turning it off removes frames, period ornament, and every photographic
   or generated background while leaving the selected paper itself untouched. */
html body[data-visual-style][data-theme-tone="light"][data-ornaments="false"] {
  --plain-reader-canvas: #ffffff;
}

html body[data-visual-style][data-theme-tone="dark"][data-ornaments="false"] {
  --plain-reader-canvas: #000000;
}

html:has(> body[data-visual-style][data-theme-tone="light"][data-ornaments="false"]) {
  background: #ffffff !important;
}

html:has(> body[data-visual-style][data-theme-tone="dark"][data-ornaments="false"]) {
  background: #000000 !important;
}

html body[data-visual-style][data-theme-tone][data-ornaments="false"],
html body[data-visual-style][data-theme-tone][data-ornaments="false"] :is(
  .app-layout,
  .app-header,
  .library-panel,
  .utility-panel,
  .reader-toolbar,
  .reader-shell,
  .reader-scroll,
  .header-action-tabs,
  .book-list
) {
  background-color: var(--plain-reader-canvas) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  background-blend-mode: normal !important;
}

html body[data-reading-mode][data-visual-style][data-theme-tone][data-ornaments="false"]
  #reader-scroll {
  border: 0 !important;
  border-image: none !important;
  border-image-source: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body[data-visual-style][data-theme-tone][data-ornaments="false"] :is(
  .reader-shell,
  #reader-scroll
)::before,
html body[data-visual-style][data-theme-tone][data-ornaments="false"] :is(
  .reader-shell,
  #reader-scroll
)::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body[data-visual-style][data-theme-tone][data-ornaments="false"] :is(
  #reader-scroll > .cambridge-binding-frame,
  #reader-scroll > .reader-side-detail,
  #reader-scroll > .reader-ornament-side,
  .reader-ornament-guard,
  .reader-ornament-bottom,
  .reader-ornament-corner
) {
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Page-turn trials v2: the animation surface is one physical leaf, not the
   full paper/spread. The moving paper, fold highlight, and cast shadow stay
   localized so a turn reads as depth instead of a brightness flash. */
.page-turn-illusion {
  overflow: visible;
  perspective: 1800px;
  perspective-origin: center center;
  contain: layout style;
  isolation: isolate;
}

.page-turn-illusion-sheet,
.page-turn-illusion-shade {
  inset: auto;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, clip-path;
}

.page-turn-illusion-sheet {
  top: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--paper) 94%, #e6dac1 6%);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.3), transparent 18%, transparent 72%, rgba(54,37,18,.16)),
    var(--paper-texture);
  background-position: center top;
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
  border: 1px solid color-mix(in srgb, var(--paper-edge) 48%, transparent);
}

.page-turn-illusion-sheet::before,
.page-turn-illusion-sheet::after {
  content: "";
  position: absolute;
  inset-block: 0;
  pointer-events: none;
}

.page-turn-illusion-sheet::before {
  inset-inline: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.48) 30%,
    rgba(92,61,27,.18) 50%,
    rgba(255,255,255,.32) 70%,
    rgba(38,24,10,.2));
  mix-blend-mode: soft-light;
}

.page-turn-illusion-sheet::after {
  width: 3px;
  background: linear-gradient(90deg, rgba(38,23,8,.38), rgba(255,255,255,.72), transparent);
  filter: blur(.2px);
}

.page-turn-illusion.turn-forward .page-turn-illusion-sheet::after { right: -1px; }
.page-turn-illusion.turn-backward .page-turn-illusion-sheet::after {
  left: -1px;
  transform: scaleX(-1);
}

body[data-page-turn-effect] .page-turn-illusion-shade {
  top: 1.5%;
  bottom: 1.5%;
  width: 25%;
  border-radius: 50%;
  opacity: 0;
  background: rgba(20,12,5,.42);
  filter: blur(16px);
}

/* Curl: preserve the original approved page-turn treatment exactly. */
body[data-page-turn-effect="curl"] .page-turn-illusion-sheet {
  inset: 0;
  width: 100%;
  border: 0;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  background-image: var(--paper-texture);
  background-position: center top;
  background-repeat: repeat;
  background-size: var(--paper-texture-size);
  box-shadow: none;
}
body[data-page-turn-effect="curl"] .page-turn-illusion-sheet::before,
body[data-page-turn-effect="curl"] .page-turn-illusion-sheet::after {
  content: none;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  transform-origin: left center;
  animation: page-trial-curl-forward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  transform-origin: right center;
  animation: page-trial-curl-backward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion-shade {
  inset: 0;
  width: auto;
  border-radius: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.24) 47%, rgba(35,24,12,.28) 51%, transparent 69%);
  filter: none;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  transform-origin: left center;
  animation: page-trial-curl-shade-forward 560ms cubic-bezier(.22,.72,.24,1) both;
}
body[data-page-turn-effect="curl"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  transform-origin: right center;
  animation: page-trial-curl-shade-backward 560ms cubic-bezier(.22,.72,.24,1) both;
}

/* Corner: the upper outside corner catches first. */
body[data-page-turn-effect="corner"] .page-turn-illusion-sheet {
  top: 0;
  bottom: auto;
  width: 86%;
  height: 86%;
}
body[data-page-turn-effect="corner"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  left: auto;
  right: 0;
  transform-origin: right top;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  animation: page-turn-v2-corner-forward 820ms cubic-bezier(.18,.66,.2,1) both;
}
body[data-page-turn-effect="corner"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  left: 0;
  right: auto;
  transform-origin: left top;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  animation: page-turn-v2-corner-backward 820ms cubic-bezier(.18,.66,.2,1) both;
}
body[data-page-turn-effect="corner"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  left: auto;
  right: 1%;
  animation: page-turn-v2-corner-shadow-forward 820ms ease-out both;
}
body[data-page-turn-effect="corner"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  left: 1%;
  right: auto;
  animation: page-turn-v2-corner-shadow-backward 820ms ease-out both;
}

/* Hinge: a firmer Bible leaf rotating around the binding. */
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion-sheet {
  inset: 0;
  width: 100%;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="single"].turn-forward .page-turn-illusion-sheet {
  transform-origin: left center;
  animation: page-turn-v7-hinge-first-forward 140ms linear both;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="single"].turn-backward .page-turn-illusion-sheet {
  transform-origin: right center;
  animation: page-turn-v7-hinge-first-backward 140ms linear both;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion-shade {
  display: none;
  animation: none;
  background: none;
  filter: none;
}

/* In an open spread, Hinge is one continuous two-faced leaf. The front face
   closes to the binding, then the mirrored back face immediately opens across
   the receiving page. */
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet {
  inset: 0;
  width: 100%;
  border: 0;
  background: none;
  box-shadow: none;
  backface-visibility: visible;
  transform-style: preserve-3d;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::before,
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border: 1px solid color-mix(in srgb, var(--paper-edge) 48%, transparent);
  border-radius: 2px;
  backface-visibility: hidden;
  background-color: color-mix(in srgb, var(--paper) 94%, #e6dac1 6%);
  background-position: center top;
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--paper-texture-size);
  filter: none;
  mix-blend-mode: normal;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::before {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 22%, transparent 76%, rgba(54,37,18,.13)),
    var(--paper-texture);
  box-shadow: 14px 2px 24px rgba(24,14,5,.16);
  transform: rotateY(0deg);
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::after {
  left: 0;
  right: 0;
  background-image:
    linear-gradient(270deg, rgba(255,255,255,.16), transparent 22%, transparent 76%, rgba(54,37,18,.16)),
    var(--paper-texture);
  box-shadow: -14px 2px 24px rgba(24,14,5,.16);
  transform: rotateY(180deg);
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"].turn-forward .page-turn-illusion-sheet {
  transform-origin: left center;
  animation: page-turn-v7-hinge-complete-forward 280ms linear both;
}
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) .page-turn-illusion[data-turn-spread="open"].turn-backward .page-turn-illusion-sheet {
  transform-origin: right center;
  animation: page-turn-v7-hinge-complete-backward 280ms linear both;
}

/* Eight progressively lighter single-page Hinge trials. Open Bible keeps
   the approved two-faced 360ms Hinge above without any visual change. */
body[data-page-turn-effect="hinge-light-1"] {
  --hinge-light-peak: .64;
  --hinge-light-shadow: .16;
  --hinge-light-brightness: 1.02;
}
body[data-page-turn-effect="hinge-light-2"] {
  --hinge-light-peak: .52;
  --hinge-light-shadow: .12;
  --hinge-light-brightness: 1.035;
}
body[data-page-turn-effect="hinge-light-3"] {
  --hinge-light-peak: .40;
  --hinge-light-shadow: .08;
  --hinge-light-brightness: 1.05;
}
body[data-page-turn-effect="hinge-light-4"] {
  --hinge-light-peak: .28;
  --hinge-light-shadow: .04;
  --hinge-light-brightness: 1.07;
}
body[data-page-turn-effect="hinge-light-5"] {
  --hinge-light-peak: .22;
  --hinge-light-shadow: .03;
  --hinge-light-brightness: 1.08;
}
body[data-page-turn-effect="hinge-light-6"] {
  --hinge-light-peak: .16;
  --hinge-light-shadow: .02;
  --hinge-light-brightness: 1.09;
}
body[data-page-turn-effect="hinge-light-7"] {
  --hinge-light-peak: .10;
  --hinge-light-shadow: .012;
  --hinge-light-brightness: 1.10;
}
body[data-page-turn-effect="hinge-light-8"] {
  --hinge-light-peak: .05;
  --hinge-light-shadow: .006;
  --hinge-light-brightness: 1.11;
}
/* Leaf: a thinner sheet bowing into a broad, gentle moving arc. */
body[data-page-turn-effect="leaf"] .page-turn-illusion-sheet {
  width: 58%;
  border-radius: 45% 3px 3px 45% / 2.5% 2px 2px 2.5%;
}
body[data-page-turn-effect="leaf"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  left: auto;
  right: 0;
  transform-origin: right center;
  animation: page-turn-v2-leaf-forward 900ms cubic-bezier(.16,.68,.22,1) both;
}
body[data-page-turn-effect="leaf"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  left: 0;
  right: auto;
  transform-origin: left center;
  animation: page-turn-v2-leaf-backward 900ms cubic-bezier(.16,.68,.22,1) both;
}
body[data-page-turn-effect="leaf"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  left: auto;
  right: 1%;
  animation: page-turn-v2-leaf-shadow-forward 900ms ease-out both;
}
body[data-page-turn-effect="leaf"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  left: 1%;
  right: auto;
  animation: page-turn-v2-leaf-shadow-backward 900ms ease-out both;
}

/* Fold: the lower outside corner tucks under toward the binding. */
body[data-page-turn-effect="fold"] .page-turn-illusion-sheet {
  top: auto;
  bottom: 0;
  width: 84%;
  height: 82%;
}
body[data-page-turn-effect="fold"] .page-turn-illusion.turn-forward .page-turn-illusion-sheet {
  left: auto;
  right: 0;
  transform-origin: right bottom;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  animation: page-turn-v2-fold-forward 840ms cubic-bezier(.17,.65,.2,1) both;
}
body[data-page-turn-effect="fold"] .page-turn-illusion.turn-backward .page-turn-illusion-sheet {
  left: 0;
  right: auto;
  transform-origin: left bottom;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  animation: page-turn-v2-fold-backward 840ms cubic-bezier(.17,.65,.2,1) both;
}
body[data-page-turn-effect="fold"] .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  left: auto;
  right: 1%;
  animation: page-turn-v2-fold-shadow-forward 840ms ease-out both;
}
body[data-page-turn-effect="fold"] .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  left: 1%;
  right: auto;
  animation: page-turn-v2-fold-shadow-backward 840ms ease-out both;
}

@keyframes page-turn-v2-curl-forward {
  0% { opacity: 0; transform: translateX(16%) scaleX(.06) rotateY(8deg); }
  12% { opacity: .96; }
  52% { opacity: .97; transform: translateX(-72%) scaleX(.92) rotateY(-42deg) skewY(-.35deg); box-shadow: 18px 2px 34px rgba(25,15,6,.28); }
  100% { opacity: 0; transform: translateX(-235%) scaleX(.08) rotateY(-88deg); box-shadow: 2px 0 5px rgba(25,15,6,0); }
}
@keyframes page-turn-v2-curl-backward {
  0% { opacity: 0; transform: translateX(-16%) scaleX(.06) rotateY(-8deg); }
  12% { opacity: .96; }
  52% { opacity: .97; transform: translateX(72%) scaleX(.92) rotateY(42deg) skewY(.35deg); box-shadow: -18px 2px 34px rgba(25,15,6,.28); }
  100% { opacity: 0; transform: translateX(235%) scaleX(.08) rotateY(88deg); box-shadow: -2px 0 5px rgba(25,15,6,0); }
}
@keyframes page-turn-v2-shadow-forward {
  0%, 100% { opacity: 0; transform: translateX(15%) scaleX(.12); }
  46% { opacity: .7; transform: translateX(-265%) scaleX(.8); }
  70% { opacity: .4; transform: translateX(-345%) scaleX(.35); }
}
@keyframes page-turn-v2-shadow-backward {
  0%, 100% { opacity: 0; transform: translateX(-15%) scaleX(.12); }
  46% { opacity: .7; transform: translateX(265%) scaleX(.8); }
  70% { opacity: .4; transform: translateX(345%) scaleX(.35); }
}

@keyframes page-turn-v2-corner-forward {
  0% { opacity: 0; transform: translate3d(5%,-4%,0) scale(.04) rotateZ(1deg) rotateY(2deg); }
  18% { opacity: .94; }
  56% { opacity: .96; transform: translate3d(-23%,8%,24px) scale(.9) rotateZ(-7deg) rotateY(-44deg); box-shadow: 20px 24px 38px rgba(24,14,5,.27); }
  100% { opacity: 0; transform: translate3d(-108%,24%,0) scale(.38) rotateZ(-15deg) rotateY(-88deg); }
}
@keyframes page-turn-v2-corner-backward {
  0% { opacity: 0; transform: translate3d(-5%,-4%,0) scale(.04) rotateZ(-1deg) rotateY(-2deg); }
  18% { opacity: .94; }
  56% { opacity: .96; transform: translate3d(23%,8%,24px) scale(.9) rotateZ(7deg) rotateY(44deg); box-shadow: -20px 24px 38px rgba(24,14,5,.27); }
  100% { opacity: 0; transform: translate3d(108%,24%,0) scale(.38) rotateZ(15deg) rotateY(88deg); }
}
@keyframes page-turn-v2-corner-shadow-forward {
  0%, 100% { opacity: 0; transform: rotate(-4deg) scale(.08); }
  54% { opacity: .56; transform: translate(-135%,18%) rotate(-15deg) scale(.82); }
}
@keyframes page-turn-v2-corner-shadow-backward {
  0%, 100% { opacity: 0; transform: rotate(4deg) scale(.08); }
  54% { opacity: .56; transform: translate(135%,18%) rotate(15deg) scale(.82); }
}

@keyframes page-turn-v2-hinge-forward {
  0% { opacity: 0; transform: rotateY(-2deg); }
  16% { opacity: .72; transform: rotateY(-18deg); }
  70% { opacity: .86; transform: rotateY(-72deg) translateZ(8px); box-shadow: 28px 2px 46px rgba(24,14,5,.28); }
  100% { opacity: 0; transform: rotateY(-92deg); }
}
@keyframes page-turn-v2-hinge-backward {
  0% { opacity: 0; transform: rotateY(2deg); }
  16% { opacity: .72; transform: rotateY(18deg); }
  70% { opacity: .86; transform: rotateY(72deg) translateZ(8px); box-shadow: -28px 2px 46px rgba(24,14,5,.28); }
  100% { opacity: 0; transform: rotateY(92deg); }
}
@keyframes page-turn-v2-hinge-shadow-forward {
  0%, 100% { opacity: 0; transform: scaleX(.08); }
  62% { opacity: .62; transform: translateX(5%) scaleX(.78); }
}
@keyframes page-turn-v2-hinge-shadow-backward {
  0%, 100% { opacity: 0; transform: scaleX(.08); }
  62% { opacity: .62; transform: translateX(-5%) scaleX(.78); }
}

@keyframes page-turn-v4-hinge-complete-forward {
  0% {
    opacity: .98;
    transform: rotateY(0deg);
    filter: drop-shadow(0 1px 1px rgba(24,14,5,0));
  }
  44% {
    opacity: 1;
    transform: rotateY(-88deg);
    filter: drop-shadow(-18px 3px 18px rgba(24,14,5,.24));
  }
  50% {
    opacity: 1;
    transform: rotateY(-92deg);
    filter: drop-shadow(-18px 3px 18px rgba(24,14,5,.24));
  }
  94% {
    opacity: .98;
    transform: rotateY(-178deg);
    filter: drop-shadow(-2px 1px 3px rgba(24,14,5,.06));
  }
  100% {
    opacity: 0;
    transform: rotateY(-180deg);
    filter: drop-shadow(0 1px 1px rgba(24,14,5,0));
  }
}
@keyframes page-turn-v4-hinge-complete-backward {
  0% {
    opacity: .98;
    transform: rotateY(0deg);
    filter: drop-shadow(0 1px 1px rgba(24,14,5,0));
  }
  44% {
    opacity: 1;
    transform: rotateY(88deg);
    filter: drop-shadow(18px 3px 18px rgba(24,14,5,.24));
  }
  50% {
    opacity: 1;
    transform: rotateY(92deg);
    filter: drop-shadow(18px 3px 18px rgba(24,14,5,.24));
  }
  94% {
    opacity: .98;
    transform: rotateY(178deg);
    filter: drop-shadow(2px 1px 3px rgba(24,14,5,.06));
  }
  100% {
    opacity: 0;
    transform: rotateY(180deg);
    filter: drop-shadow(0 1px 1px rgba(24,14,5,0));
  }
}

@keyframes page-turn-v5-hinge-light-forward {
  0% {
    opacity: 0;
    transform: rotateY(-2deg);
    filter: brightness(var(--hinge-light-brightness));
  }
  16% {
    opacity: var(--hinge-light-peak);
    transform: rotateY(-18deg);
  }
  70% {
    opacity: var(--hinge-light-peak);
    transform: rotateY(-72deg) translateZ(6px);
    box-shadow: 22px 2px 36px rgba(24,14,5,var(--hinge-light-shadow));
  }
  100% {
    opacity: 0;
    transform: rotateY(-92deg);
    filter: brightness(var(--hinge-light-brightness));
  }
}
@keyframes page-turn-v5-hinge-light-backward {
  0% {
    opacity: 0;
    transform: rotateY(2deg);
    filter: brightness(var(--hinge-light-brightness));
  }
  16% {
    opacity: var(--hinge-light-peak);
    transform: rotateY(18deg);
  }
  70% {
    opacity: var(--hinge-light-peak);
    transform: rotateY(72deg) translateZ(6px);
    box-shadow: -22px 2px 36px rgba(24,14,5,var(--hinge-light-shadow));
  }
  100% {
    opacity: 0;
    transform: rotateY(92deg);
    filter: brightness(var(--hinge-light-brightness));
  }
}

@keyframes page-turn-v2-leaf-forward {
  0% { opacity: 0; transform: translateX(12%) scaleX(.04) rotateY(5deg); }
  14% { opacity: .88; }
  46% { opacity: .92; transform: translate3d(-46%,-.8%,28px) scaleX(.86) rotateY(-35deg) skewY(-.8deg); box-shadow: 16px 10px 42px rgba(25,15,6,.22); }
  72% { opacity: .8; transform: translate3d(-104%,.5%,16px) scaleX(.58) rotateY(-64deg) skewY(.45deg); }
  100% { opacity: 0; transform: translateX(-176%) scaleX(.05) rotateY(-89deg); }
}
@keyframes page-turn-v2-leaf-backward {
  0% { opacity: 0; transform: translateX(-12%) scaleX(.04) rotateY(-5deg); }
  14% { opacity: .88; }
  46% { opacity: .92; transform: translate3d(46%,-.8%,28px) scaleX(.86) rotateY(35deg) skewY(.8deg); box-shadow: -16px 10px 42px rgba(25,15,6,.22); }
  72% { opacity: .8; transform: translate3d(104%,.5%,16px) scaleX(.58) rotateY(64deg) skewY(-.45deg); }
  100% { opacity: 0; transform: translateX(176%) scaleX(.05) rotateY(89deg); }
}
@keyframes page-turn-v2-leaf-shadow-forward {
  0%, 100% { opacity: 0; transform: scaleX(.1); }
  48% { opacity: .5; transform: translateX(-190%) scaleX(.82); }
  76% { opacity: .26; transform: translateX(-310%) scaleX(.38); }
}
@keyframes page-turn-v2-leaf-shadow-backward {
  0%, 100% { opacity: 0; transform: scaleX(.1); }
  48% { opacity: .5; transform: translateX(190%) scaleX(.82); }
  76% { opacity: .26; transform: translateX(310%) scaleX(.38); }
}

@keyframes page-turn-v2-fold-forward {
  0% { opacity: 0; transform: translate3d(5%,5%,0) scale(.04) rotateZ(-1deg) rotateY(3deg); }
  18% { opacity: .94; }
  56% { opacity: .96; transform: translate3d(-23%,-8%,22px) scale(.92) rotateZ(7deg) rotateY(-45deg); box-shadow: 20px -22px 38px rgba(24,14,5,.25); }
  100% { opacity: 0; transform: translate3d(-110%,-25%,0) scale(.4) rotateZ(16deg) rotateY(-88deg); }
}
@keyframes page-turn-v2-fold-backward {
  0% { opacity: 0; transform: translate3d(-5%,5%,0) scale(.04) rotateZ(1deg) rotateY(-3deg); }
  18% { opacity: .94; }
  56% { opacity: .96; transform: translate3d(23%,-8%,22px) scale(.92) rotateZ(-7deg) rotateY(45deg); box-shadow: -20px -22px 38px rgba(24,14,5,.25); }
  100% { opacity: 0; transform: translate3d(110%,-25%,0) scale(.4) rotateZ(-16deg) rotateY(88deg); }
}
@keyframes page-turn-v2-fold-shadow-forward {
  0%, 100% { opacity: 0; transform: rotate(4deg) scale(.08); }
  54% { opacity: .54; transform: translate(-135%,-18%) rotate(15deg) scale(.82); }
}
@keyframes page-turn-v2-fold-shadow-backward {
  0%, 100% { opacity: 0; transform: rotate(-4deg) scale(.08); }
  54% { opacity: .54; transform: translate(135%,-18%) rotate(-15deg) scale(.82); }
}

#display-view .page-turn-effect-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* All-panel Theatre layout -------------------------------------------------
   Wide screens give the side drawers the corners and dock the top chrome
   between them. At narrower widths the top chrome owns the full top edge and
   both side drawers begin below it, so no two surfaces occupy the same space. */
body[data-chrome-mode="theatre"].theatre-all-open :is(
  .app-header,
  .reader-toolbar,
  .reference-trail,
  .library-panel,
  .utility-panel
) {
  transition:
    transform .24s cubic-bezier(.22,.8,.24,1),
    top .24s cubic-bezier(.22,.8,.24,1),
    left .24s cubic-bezier(.22,.8,.24,1),
    right .24s cubic-bezier(.22,.8,.24,1),
    width .24s cubic-bezier(.22,.8,.24,1);
}

@media (min-width: 1500px) {
  html body[data-chrome-mode="theatre"].theatre-all-open :is(
    .app-header,
    .reader-toolbar,
    .reference-trail
  ) {
    left: var(--theatre-library-width) !important;
    right: var(--theatre-utility-width) !important;
    width: auto !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open :is(
    .library-panel,
    .utility-panel
  ) {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open
    .app-layout.utility-open > #utility-panel {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-top {
    left: calc(
      var(--theatre-library-width) +
      (100vw - var(--theatre-library-width) - var(--theatre-utility-width)) / 2 -
      48px
    ) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-all {
    left: calc(
      var(--theatre-library-width) +
      (100vw - var(--theatre-library-width) - var(--theatre-utility-width)) / 2 +
      2px
    ) !important;
  }
}

@media (max-width: 1499px) {
  html body[data-chrome-mode="theatre"].theatre-all-open :is(
    .app-header,
    .reader-toolbar,
    .reference-trail
  ) {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open :is(
    .library-panel,
    .utility-panel
  ) {
    top: var(--theatre-top-height) !important;
    bottom: 0 !important;
    height: auto !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open
    .app-layout.utility-open > #utility-panel {
    top: var(--theatre-top-height) !important;
    bottom: 0 !important;
    height: auto !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-top {
    left: calc(50% - 48px) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-all {
    left: calc(50% + 2px) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open :is(
    .theatre-edge-left,
    .theatre-edge-right
  ) {
    top: calc(var(--theatre-top-height) + 76px) !important;
  }
}

@media (max-width: 900px) {
  html body[data-chrome-mode="theatre"].theatre-all-open {
    --theatre-library-width: 45vw;
    --theatre-utility-width: 55vw;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .library-panel {
    width: var(--theatre-library-width) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .utility-panel {
    width: var(--theatre-utility-width) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-left {
    left: calc(var(--theatre-library-width) - 42px) !important;
  }
  html body[data-chrome-mode="theatre"].theatre-all-open .theatre-edge-right {
    right: calc(var(--theatre-utility-width) - 42px) !important;
  }
}

/* Dock the Theatre reading surface directly between the fixed side drawers.
   Explicit edges avoid subtracting a drawer width from an already offset box,
   which exposed a second strip of the window material beside the reader. */
@media (min-width: 901px) {
  html body[data-chrome-mode="theatre"] .app-layout > .reader-shell {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    transition:
      left .24s cubic-bezier(.22,.8,.24,1),
      right .24s cubic-bezier(.22,.8,.24,1);
  }
  html body[data-chrome-mode="theatre"] .app-layout.library-open > .reader-shell {
    left: var(--theatre-library-width);
  }
  html body[data-chrome-mode="theatre"] .app-layout.utility-open > .reader-shell {
    right: var(--theatre-utility-width);
  }
}

/* Theatre Scroll is an immersive canvas. When a side drawer docks, the native
   reader scrollbar would otherwise move into the composition with the resized
   reading surface. Hide only its chrome; the element remains fully scrollable. */
body[data-chrome-mode="theatre"][data-reading-mode="scroll"] .reader-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body[data-chrome-mode="theatre"][data-reading-mode="scroll"] .reader-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Final Hinge contract. Both layouts use one opaque physical leaf with the
   selected paper and neutral shadow. One Page plays 0-90 degrees in 140ms;
   Two Pages plays that exact first half and its mirror in 280ms. */
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"]) {
  --hinge-turn-shadow: .10;
}
body[data-page-turn-effect="hinge-light-1"] { --hinge-turn-shadow: .09; }
body[data-page-turn-effect="hinge-light-2"] { --hinge-turn-shadow: .08; }
body[data-page-turn-effect="hinge-light-3"] { --hinge-turn-shadow: .07; }
body[data-page-turn-effect="hinge-light-4"] { --hinge-turn-shadow: .055; }
body[data-page-turn-effect="hinge-light-5"] { --hinge-turn-shadow: .04; }
body[data-page-turn-effect="hinge-light-6"] { --hinge-turn-shadow: .03; }
body[data-page-turn-effect="hinge-light-7"] { --hinge-turn-shadow: .02; }
body[data-page-turn-effect="hinge-light-8"] { --hinge-turn-shadow: .012; }

.page-turn-effect-control [data-page-turn-effect-choice^="hinge-light-"] {
  display: none !important;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion {
  perspective: 2200px;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion-sheet {
  will-change: transform, opacity;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::before,
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::after {
  box-shadow: none !important;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="single"] .page-turn-illusion-sheet::after {
  width: 1px !important;
  background: linear-gradient(90deg, rgba(28, 19, 10, .28), rgba(255, 255, 255, .58)) !important;
  filter: none !important;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion-shade {
  display: block !important;
  top: 1%;
  bottom: 1%;
  width: 18%;
  border-radius: 0;
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion.turn-forward .page-turn-illusion-shade {
  left: -1%;
  right: auto;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(18, 12, 6, var(--hinge-turn-shadow)), transparent);
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion.turn-backward .page-turn-illusion-shade {
  left: auto;
  right: -1%;
  transform-origin: right center;
  background: linear-gradient(270deg, rgba(18, 12, 6, var(--hinge-turn-shadow)), transparent);
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="single"].turn-forward .page-turn-illusion-shade,
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="single"].turn-backward .page-turn-illusion-shade {
  animation: page-turn-v7-hinge-shadow-first 140ms linear both;
}

body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="open"].turn-forward .page-turn-illusion-shade,
body:is([data-page-turn-effect="hinge"], [data-page-turn-effect^="hinge-light-"])
  .page-turn-illusion[data-turn-spread="open"].turn-backward .page-turn-illusion-shade {
  animation: page-turn-v7-hinge-shadow-complete 280ms linear both;
}

html body[data-reading-mode="book"][data-paper="antique"]:is(
  [data-page-turn-effect="hinge"],
  [data-page-turn-effect^="hinge-light-"]
) .page-turn-illusion[data-turn-spread="single"] .page-turn-illusion-sheet {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(rgba(255, 252, 242, 0), rgba(255, 252, 242, 0)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
}

html body[data-reading-mode="book"][data-paper="antique"]:is(
  [data-page-turn-effect="hinge"],
  [data-page-turn-effect^="hinge-light-"]
) .page-turn-illusion[data-turn-spread="single"] .page-turn-illusion-sheet::before,
html body[data-reading-mode="book"][data-paper="antique"]:is(
  [data-page-turn-effect="hinge"],
  [data-page-turn-effect^="hinge-light-"]
) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::before {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, .045),
      transparent 24%,
      transparent 76%,
      rgba(0, 0, 0, .065)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp") !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  mix-blend-mode: normal !important;
}

/* Cross-reference settings are one decision: whether to show the center
   column, followed by how many ranked references it contains. */
html body #display-view .display-reference-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 11px !important;
  border: 1px solid var(--line) !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--chrome-strong) 52%, transparent) !important;
  box-shadow: inset 0 1px color-mix(in srgb, white 13%, transparent);
}

html body #display-view .display-reference-group .layout-feature-toggle {
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body #display-view .display-reference-title {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}

html body #display-view .display-reference-group .layout-feature-toggle > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}

html body #display-view .display-reference-group .layout-feature-toggle strong {
  font-size: 12px;
  line-height: 1.2;
}

html body #display-view .display-reference-group .layout-feature-toggle small {
  font-size: 10px;
  line-height: 1.25;
}

html body #display-view .display-reference-depth-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

html body #display-view .reference-depth-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

html body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control {
  width: 100%;
  min-height: 38px !important;
}

html body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control > button {
  min-height: 32px !important;
  height: 32px !important;
  padding-inline: 7px !important;
  font-size: 10px !important;
}

html body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control > button strong {
  overflow: visible;
  text-overflow: unset;
}

html body[data-reading-mode="book"][data-paper="antique"]:is(
  [data-page-turn-effect="hinge"],
  [data-page-turn-effect^="hinge-light-"]
) .page-turn-illusion[data-turn-spread="open"] .page-turn-illusion-sheet::after {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(270deg,
      rgba(255, 255, 255, .04),
      transparent 24%,
      transparent 76%,
      rgba(0, 0, 0, .07)),
    url("assets/materials/temple-vellum-user-selected-wide-v2.webp") !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  mix-blend-mode: normal !important;
}

@keyframes page-turn-v7-hinge-complete-forward {
  0% { opacity: 1; transform: rotateY(0deg) translateZ(0) scaleX(1); }
  15% { opacity: 1; transform: rotateY(-12deg) translateZ(1px) scaleX(.999); }
  30% { opacity: 1; transform: rotateY(-48deg) translateZ(3px) scaleX(.995); }
  49.5% { opacity: 1; transform: rotateY(-89.8deg) translateZ(4px) scaleX(.99); }
  50% { opacity: 1; transform: rotateY(-90deg) translateZ(4px) scaleX(.99); }
  70% { opacity: 1; transform: rotateY(-132deg) translateZ(3px) scaleX(.995); }
  85% { opacity: 1; transform: rotateY(-168deg) translateZ(1px) scaleX(.999); }
  99% { opacity: 1; transform: rotateY(-179.8deg) translateZ(0) scaleX(1); }
  100% { opacity: 0; transform: rotateY(-180deg) translateZ(0) scaleX(1); }
}

@keyframes page-turn-v7-hinge-complete-backward {
  0% { opacity: 1; transform: rotateY(0deg) translateZ(0) scaleX(1); }
  15% { opacity: 1; transform: rotateY(12deg) translateZ(1px) scaleX(.999); }
  30% { opacity: 1; transform: rotateY(48deg) translateZ(3px) scaleX(.995); }
  49.5% { opacity: 1; transform: rotateY(89.8deg) translateZ(4px) scaleX(.99); }
  50% { opacity: 1; transform: rotateY(90deg) translateZ(4px) scaleX(.99); }
  70% { opacity: 1; transform: rotateY(132deg) translateZ(3px) scaleX(.995); }
  85% { opacity: 1; transform: rotateY(168deg) translateZ(1px) scaleX(.999); }
  99% { opacity: 1; transform: rotateY(179.8deg) translateZ(0) scaleX(1); }
  100% { opacity: 0; transform: rotateY(180deg) translateZ(0) scaleX(1); }
}

@keyframes page-turn-v7-hinge-first-forward {
  0% { opacity: 1; transform: rotateY(0deg) translateZ(0) scaleX(1); }
  30% { opacity: 1; transform: rotateY(-12deg) translateZ(1px) scaleX(.999); }
  60% { opacity: 1; transform: rotateY(-48deg) translateZ(3px) scaleX(.995); }
  99% { opacity: 1; transform: rotateY(-89.8deg) translateZ(4px) scaleX(.99); }
  100% { opacity: 0; transform: rotateY(-90deg) translateZ(4px) scaleX(.99); }
}

@keyframes page-turn-v7-hinge-first-backward {
  0% { opacity: 1; transform: rotateY(0deg) translateZ(0) scaleX(1); }
  30% { opacity: 1; transform: rotateY(12deg) translateZ(1px) scaleX(.999); }
  60% { opacity: 1; transform: rotateY(48deg) translateZ(3px) scaleX(.995); }
  99% { opacity: 1; transform: rotateY(89.8deg) translateZ(4px) scaleX(.99); }
  100% { opacity: 0; transform: rotateY(90deg) translateZ(4px) scaleX(.99); }
}

@keyframes page-turn-v7-hinge-shadow-first {
  0% { opacity: 0; transform: scaleX(.08); }
  30% { opacity: .18; transform: scaleX(.28); }
  60% { opacity: .55; transform: scaleX(.65); }
  92% { opacity: .85; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.05); }
}

@keyframes page-turn-v7-hinge-shadow-complete {
  0% { opacity: 0; transform: scaleX(.08); }
  15% { opacity: .18; transform: scaleX(.28); }
  30% { opacity: .55; transform: scaleX(.65); }
  48% { opacity: .85; transform: scaleX(1); }
  50% { opacity: .9; transform: scaleX(1.05); }
  52% { opacity: .85; transform: scaleX(1); }
  70% { opacity: .55; transform: scaleX(.65); }
  85% { opacity: .18; transform: scaleX(.28); }
  100% { opacity: 0; transform: scaleX(.08); }
}

/* Cross-reference controls use the same full-width hierarchy as the other
   display sections. Keep the switch independent from the depth choice. */
html body #display-view .display-reference-group {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #display-view .display-reference-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body #display-view .display-reference-group .layout-feature-toggle {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px !important;
  background: color-mix(in srgb, var(--chrome-strong) 68%, transparent) !important;
  box-shadow: none !important;
}

html body #display-view .display-reference-group .layout-feature-toggle > span {
  display: block !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body #display-view .display-reference-depth-group {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
}

html body #display-view .reference-depth-label {
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control {
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 3px !important;
}

html body[data-visual-style][data-chrome-mode] #display-view .display-reference-depth.reference-depth.segmented-control > button {
  min-height: 34px !important;
  height: 34px !important;
  padding-inline: 9px !important;
  font-size: 10px !important;
}

html body #display-view .display-reference-depth button:disabled {
  cursor: default !important;
  opacity: .42 !important;
  filter: saturate(.45) !important;
}

/* Cross-References is a peer display section, not part of Columns. */
html body #display-view .display-reference-group {
  position: relative !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding-top: 15px !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent) !important;
}

html body #display-view .display-reference-title {
  display: flex !important;
  align-items: center !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 0 0 9px !important;
  border-left: 3px solid var(--button-active-border) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* Final page-turn choices --------------------------------------------------
   Glide leaves every paper, frame, texture, and shadow surface stationary.
   Only the paginated text flow moves: 60ms out, then 100ms in. */
body:is([data-page-turn-effect="none"], [data-page-turn-effect="glide"]) .page-turn-illusion {
  display: none !important;
}

body:is([data-page-turn-effect="none"], [data-page-turn-effect="glide"])
  :is(.book-flow, .chapter-section).page-animate {
  animation: none !important;
}

body[data-page-turn-effect="glide"] :is(.book-flow, .chapter-section):is(
  .page-glide-out-forward,
  .page-glide-out-backward,
  .page-glide-in-forward,
  .page-glide-in-backward
) {
  will-change: opacity, translate;
}

body[data-page-turn-effect="glide"] :is(.book-flow, .chapter-section).page-glide-out-forward {
  animation: page-glide-out-forward 60ms cubic-bezier(.4,0,1,1) both;
}

body[data-page-turn-effect="glide"] :is(.book-flow, .chapter-section).page-glide-out-backward {
  animation: page-glide-out-backward 60ms cubic-bezier(.4,0,1,1) both;
}

body[data-page-turn-effect="glide"] :is(.book-flow, .chapter-section).page-glide-in-forward {
  animation: page-glide-in-forward 100ms cubic-bezier(0,0,.2,1) both;
}

body[data-page-turn-effect="glide"] :is(.book-flow, .chapter-section).page-glide-in-backward {
  animation: page-glide-in-backward 100ms cubic-bezier(0,0,.2,1) both;
}

@keyframes page-glide-out-forward {
  from { opacity: 1; translate: 0 0; }
  to { opacity: .22; translate: -12px 0; }
}

@keyframes page-glide-out-backward {
  from { opacity: 1; translate: 0 0; }
  to { opacity: .22; translate: 12px 0; }
}

@keyframes page-glide-in-forward {
  from { opacity: .22; translate: 12px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes page-glide-in-backward {
  from { opacity: .22; translate: -12px 0; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.book-flow, .chapter-section):is(
    .page-glide-out-forward,
    .page-glide-out-backward,
    .page-glide-in-forward,
    .page-glide-in-backward
  ) {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
  }
}
/* Display sidebar task flow: preserve each theme's existing material palette
   while giving the controls one clear, predictable reading order. */
html body #display-view:not([hidden]) {
  display: block !important;
}

html body #display-view .display-settings-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 12px;
  min-width: 0;
  padding: 15px 0 17px;
  border: 0;
}

html body #display-view .display-settings-section + .display-settings-section {
  border-top: 1px solid color-mix(in srgb, var(--style-gold-mid, var(--accent)) 64%, transparent);
}

html body #display-view .display-section-heading {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 1px;
  padding: 4px 6px 4px 0;
  border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--style-gold-mid, var(--accent)) 12%, transparent), transparent 82%);
}

html body #display-view .display-section-heading > span:nth-child(2) {
  display: grid;
  gap: 1px;
  min-width: 0;
}

html body #display-view .display-section-heading h3 {
  margin: 0 !important;
  color: var(--ink);
  font-family: "Cinzel", "Source Serif 4", Georgia, serif;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  text-transform: uppercase;
}

html body[data-theme-tone="light"] #display-view .display-section-heading h3 { color: var(--style-gold-deep, var(--accent)); }
html body[data-theme-tone="dark"] #display-view .display-section-heading h3 { color: var(--style-gold-bright, var(--accent)); }

html body #display-view .display-section-heading small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
}

html body #display-view .display-section-number {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--button-active-text, var(--ink));
  border: 1px solid color-mix(in srgb, var(--button-focus, var(--accent)) 78%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--button-active, var(--accent-soft)) 74%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, white 25%, transparent);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

html body #display-view .display-section-about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 25px;
  padding: 3px 7px;
  color: var(--style-gold-deep, var(--accent));
  border: 1px solid color-mix(in srgb, var(--style-gold-mid, var(--accent)) 54%, var(--line));
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel-soft) 62%, transparent);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

html body[data-theme-tone="dark"] #display-view .display-section-about { color: var(--style-gold-bright, var(--accent)); }
html body #display-view .display-section-about:is(:hover,:focus-visible) {
  border-color: var(--style-gold-mid, var(--accent));
  background: color-mix(in srgb, var(--style-gold-mid, var(--accent)) 14%, var(--panel));
}
html body #display-view .display-section-about svg { width: 12px; height: 12px; }

html body #display-view .display-settings-section > .setting-group,
html body #display-view .display-settings-section > .about-text-link {
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border-top: 0 !important;
}

html body #display-view .display-bible-text-section > :is(.display-edition-group, .display-type-group, .display-size-group, .about-text-link),
html body #display-view .display-reading-layout-section > :is(.display-mode-setting, .display-layout-group, .display-width-group, .display-page-group, .display-page-features, .display-continuous-group, .display-scroll-group),
html body #display-view .display-cross-reference-section > .display-reference-group,
html body #display-view .display-appearance-section > .display-surface-group {
  grid-column: 1 / -1 !important;
}

html body #display-view .display-settings-section > .setting-group + .setting-group {
  padding-top: 11px !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent) !important;
}

html body #display-view .display-bible-text-section > .about-text-link {
  min-height: 38px;
  grid-template-columns: 16px minmax(0, 1fr) 14px;
  gap: 7px;
  padding: 6px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px;
}

html body #display-view .display-bible-text-section > .about-text-link strong {
  font-size: 10px;
}

html body #display-view .display-bible-text-section > .about-text-link small {
  overflow: hidden;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #display-view .display-bible-text-section > .about-text-link svg {
  width: 14px;
  height: 14px;
}

html body #source-view .utility-view-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin: 0 0 16px;
  padding: 7px 11px;
  color: var(--button-ink, var(--ink));
  border: 1px solid var(--button-border, var(--line));
  border-radius: 5px;
  background: var(--button-bg, var(--panel-soft));
  box-shadow: var(--button-shadow, none);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

html body #source-view .utility-view-back:hover,
html body #source-view .utility-view-back:focus-visible {
  color: var(--button-active-ink, var(--ink));
  border-color: var(--button-active-border, var(--accent));
  background: var(--button-active-bg, var(--accent-soft));
}

html body #source-view .utility-view-back svg {
  width: 14px;
  height: 14px;
}

html body #display-view .display-reading-mode-control {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body #display-view .display-reading-layout-section > .display-mode-setting {
  display: block !important;
}

html body #display-view .display-reading-mode-control button {
  min-width: 0;
  min-height: 42px;
  gap: 7px;
  font-size: 10px;
}

html body #display-view .display-page-group .column-control button,
html body #display-view .display-page-features .spread-control button {
  font-size: 9px;
}

html body #display-view .display-page-features {
  margin-top: 0 !important;
}

html body #display-view .display-page-features .page-feature-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

html body #display-view .display-page-features .compact-spread-setting {
  display: flex !important;
  min-height: 42px !important;
  padding: 5px 7px !important;
}

html body #display-view .display-page-features .compact-spread-setting .spread-control {
  width: 100% !important;
}

html body #display-view .display-reading-layout-section > .display-section-heading { order: 0; }
html body #display-view .display-reading-layout-section > .display-mode-setting { order: 1; }
html body #display-view .display-reading-layout-section > .display-layout-group { order: 2; }
html body #display-view .display-reading-layout-section > .display-width-group { order: 3; }
html body #display-view .display-reading-layout-section > .display-page-group { order: 4; }
html body #display-view .display-reading-layout-section > .display-page-features,
html body #display-view .display-reading-layout-section > .display-scroll-group { order: 5; }
html body #display-view .display-reading-layout-section > .display-continuous-group { order: 6; }

html body #display-view .display-continuous-group.toggles label {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: color-mix(in srgb, var(--chrome-strong) 68%, transparent);
}

html body #display-view .display-continuous-group.toggles strong {
  font-size: 10px;
}

html body #display-view .display-continuous-group.toggles small {
  font-size: 9px;
}

html body #display-view .display-cross-reference-section .display-reference-group {
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #display-view .display-appearance-section .display-surface-group {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html body #display-view .display-appearance-section .display-style-option {
  grid-column: 1 / -1;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

html body #display-view > .display-more {
  display: block;
  margin: 0;
  padding: 0 0 6px;
  border-top: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
}

html body #display-view > .display-more .display-more-content {
  padding-inline: 0;
}

html body #display-view > .display-more .display-more-content .setting-group {
  padding: 3px 0 0 !important;
}

@media (max-width: 520px) {
  html body #display-view .display-settings-section {
    gap: 8px;
    padding: 12px 0 14px;
  }

  html body #display-view .display-page-features .page-feature-grid,
  html body #display-view .display-appearance-section .display-surface-group {
    grid-template-columns: 1fr !important;
  }

  html body #display-view .display-appearance-section .display-style-option {
    grid-column: 1;
  }
}

/* The Cambridge rails already provide the curved book edge. In either tone,
   a shadow on the rectangular scroll container shows through their transparent
   outer pixels as a straight fringe. Keep the complete leather assets and
   remove only that backing shadow. */
html body[data-reading-mode="book"][data-visual-style="illuminated"][data-theme-tone="light"]
  #reader-scroll,
html body[data-reading-mode="book"][data-visual-style="illuminated"]:is(
  [data-chrome-mode="dark"],
  [data-chrome-mode="theatre"][data-theme-tone="dark"]
) #reader-scroll {
  box-shadow: none !important;
}

/* Theatre preserves the selected appearance tone. Older utility views keyed
   their dark surfaces only to data-chrome-mode="dark", leaving cream cards
   beneath the light text inherited by dark-tone Theatre. Keep every right
   drawer view on the same dark material and button system as its panel. */
html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel :is(
  .search-field,
  .search-options select,
  .voice-control select,
  .concordance-breakdown,
  .source-details,
  .about-text-link,
  .search-summary,
  .study-passage-bar,
  .study-passage-bar .icon-button,
  .word-help-card,
  .chapter-word-chips button,
  .reference-sources label,
  .reference-depth button,
  .reference-card,
  .translator-notes,
  .audio-custom-dialog,
  .audio-custom-actions button,
  .audio-custom-footer button
) {
  color: var(--ink);
  border-color: var(--line);
  background-color: var(--panel);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel :is(
  .search-field input,
  .search-options select,
  .voice-control select
) {
  color: var(--ink);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel .search-field input {
  background: transparent;
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel :is(
  .search-options select option,
  .voice-control select option
) {
  color: var(--ink);
  background: var(--panel);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel .search-field input::placeholder {
  color: var(--faint);
  opacity: 1;
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel :is(
  .search-summary,
  #speech-status
) {
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-soft) 90%, black);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel :is(
  .edition-control button:not(.active),
  .theme-control button:not(.active),
  .type-choice:not(.active),
  .size-control button:not(.active),
  .layout-control button:not(.active),
  .spread-control button:not(.active),
  .study-tabs button:not(.active),
  .search-expansion button,
  .audio-custom-actions button,
  .audio-custom-footer button:not(.primary)
) {
  color: var(--button-neutral-ink);
  border-color: var(--button-neutral-border);
  background: var(--button-neutral-bg);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel .word-help-unified {
  color: var(--ink);
  border-color: var(--style-gold-mid);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-soft) 86%, #5a4317), var(--panel));
  box-shadow: inset 3px 0 0 var(--style-gold-mid);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel .word-help-unified p {
  color: var(--ink);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel mark {
  color: var(--button-active-ink);
  background: var(--button-active-bg);
}

html body[data-chrome-mode="theatre"][data-theme-tone="dark"] .utility-panel .search-field:focus-within {
  border-color: var(--style-gold-mid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--style-gold-mid) 22%, transparent);
}

/* A custom Book or Chapter menu extends below the Theatre toolbar. Raise the
   toolbar's stacking context only while that menu is open so an expanded side
   drawer cannot paint over the choices. Edge controls remain above both. */
@media (min-width: 901px) {
  html body[data-chrome-mode="theatre"][data-theme-tone][data-visual-style][data-reading-mode]
    .reader-toolbar:has(.select-control.menu-open) {
    z-index: 117 !important;
  }

  html body[data-chrome-mode="theatre"][data-theme-tone][data-visual-style][data-reading-mode]
    .reader-shell:has(.select-control.menu-open) {
    z-index: 116 !important;
    overflow: visible !important;
  }
}

/* Temple Pages frame geometry
   The source frames use square nine-slice corners. Keep the rendered border
   square as well, and preserve each rail motif's native scale instead of
   asking `round` to stretch the ornament to an exact tile count. */
html body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"]
  #reader-scroll {
  --temple-frame-thickness: clamp(72px, 6vw, 94px);
  --approved-frame-x: var(--temple-frame-thickness);
  --approved-frame-y: var(--temple-frame-thickness);
}

html body[data-reading-mode="book"][data-reader-width="full"][data-ornaments="true"][data-visual-style="jerusalem"][data-theme-tone]
  #reader-scroll::before {
  border-image-repeat: repeat !important;
}

/* Approved reader wordmarks, selected from the six theme/tone studies and
   rebuilt as independent vector artwork. No review-board raster crops are used.
   Only the plaque artwork changes; established header geometry and controls
   remain in their existing flow. */
html body[data-visual-style][data-theme-tone] .wordmark-mark {
  width: 100px;
  height: 46px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
}

html body[data-visual-style][data-theme-tone] .wordmark-mark::before,
html body[data-visual-style][data-theme-tone] .wordmark-mark::after {
  content: none;
  display: none;
}

.wordmark-mark > :is(
  .wordmark-bible-title,
  .wordmark-bible-version,
  .wordmark-bible-mobile
) {
  visibility: hidden !important;
}

body[data-visual-style="illuminated"][data-theme-tone="light"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-cambridge-light-cl20-v2.svg");
}

body[data-visual-style="illuminated"][data-theme-tone="dark"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-cambridge-dark-cd09-v2.svg");
}

body[data-visual-style="jacobean"][data-theme-tone="light"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-jacobean-light-jl06-v2.svg");
}

body[data-visual-style="jacobean"][data-theme-tone="dark"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-jacobean-dark-jd20-v2.svg");
}

body[data-visual-style="jerusalem"][data-theme-tone="light"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-temple-light-tl15-v2.svg");
}

body[data-visual-style="jerusalem"][data-theme-tone="dark"] .wordmark-mark {
  background-image: url("assets/branding/reader-logo-temple-dark-td06-v2.svg");
}

/* Personal display presets belong with the theme controls because they save
   the complete visual reading setup, never passage or audio position. */
html body #display-view .reading-presets { display:grid; gap:7px; margin-top:8px; padding-top:9px; border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent); }
html body #display-view .reading-presets-heading > span { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
html body #display-view .reading-presets-heading strong { color:var(--ink); font-size:10px; letter-spacing:.02em; }
html body #display-view .reading-presets-heading small { color:var(--muted); font-size:8px; }
html body #display-view .reading-preset-slots { display:grid; grid-template-columns:1fr; gap:5px; }
html body #display-view .reading-preset-slot { position:relative; display:grid; min-width:0; min-height:46px; border:1px dashed color-mix(in srgb,var(--line) 90%,var(--accent)); border-radius:5px; background:color-mix(in srgb,var(--panel-soft) 72%,transparent); box-shadow:inset 0 1px color-mix(in srgb,white 20%,transparent); }
html body #display-view .reading-preset-slot.saved { grid-template-columns:minmax(0,1fr) 25px; border-style:solid; background:color-mix(in srgb,var(--chrome-strong) 78%,transparent); }
html body #display-view .reading-preset-slot.active { border-color:var(--button-active-border,var(--accent)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--button-focus,var(--accent)) 34%,transparent),0 1px 3px color-mix(in srgb,black 15%,transparent); }
html body #display-view .reading-preset-main { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:center; gap:8px; min-width:0; min-height:44px; padding:6px 8px; color:var(--button-ink,var(--ink)); border:0; border-radius:4px; background:transparent; text-align:left; }
html body #display-view .reading-preset-main:is(:hover,:focus-visible) { color:var(--button-active-ink,var(--ink)); background:color-mix(in srgb,var(--button-active-bg,var(--accent-soft)) 60%,transparent); }
html body #display-view .reading-preset-main > svg { width:14px; height:14px; color:var(--style-gold-mid,var(--accent)); }
html body #display-view .reading-preset-main > span { display:grid; gap:2px; min-width:0; }
html body #display-view .reading-preset-main :is(strong,small) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body #display-view .reading-preset-main strong { font-size:10px; line-height:1.15; }
html body #display-view .reading-preset-main small { color:var(--muted); font-size:8px; line-height:1.2; }
html body #display-view .reading-preset-options { position:relative; z-index:4; align-self:stretch; }
html body #display-view .reading-preset-options[hidden] { display:none !important; }
html body #display-view .reading-preset-options > summary { display:grid; place-items:center; width:100%; height:100%; min-height:44px; color:var(--muted); cursor:pointer; list-style:none; }
html body #display-view .reading-preset-options > summary::-webkit-details-marker { display:none; }
html body #display-view .reading-preset-options > summary svg { width:13px; height:13px; }
html body #display-view .reading-preset-options > div { position:absolute; top:calc(100% + 3px); right:0; z-index:20; display:grid; width:92px; padding:3px; border:1px solid var(--line); border-radius:5px; background:var(--panel); box-shadow:0 7px 18px rgba(0,0,0,.25); }
html body #display-view .reading-preset-options > div button { min-height:26px; padding:4px 7px; color:var(--ink); border:0; border-radius:3px; background:transparent; font:inherit; font-size:8px; font-weight:700; text-align:left; }
html body #display-view .reading-preset-options > div button:is(:hover,:focus-visible) { background:var(--accent-soft); }
@media (max-width:390px) { html body #display-view .reading-preset-slots { grid-template-columns:1fr; } html body #display-view .reading-preset-slot { min-height:46px; } html body #display-view :is(.reading-preset-main,.reading-preset-options > summary) { min-height:44px; } }
.reading-preset-dialog { width:min(330px,calc(100vw - 24px)); padding:0; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:var(--panel); box-shadow:0 22px 64px rgba(0,0,0,.38); }
.reading-preset-dialog::backdrop { background:rgba(18,15,13,.54); backdrop-filter:blur(2px); }
.reading-preset-dialog-shell { display:grid; gap:13px; padding:15px; }
.reading-preset-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.reading-preset-dialog-header > div { display:grid; gap:2px; }
.reading-preset-dialog-header .eyebrow { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.reading-preset-dialog-header h2 { margin:0; color:var(--ink); font-size:17px; line-height:1.15; }
.reading-preset-dialog-shell > p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }
.reading-preset-name-field { display:grid; gap:5px; }
.reading-preset-name-field[hidden] { display:none; }
.reading-preset-name-field span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.reading-preset-name-field input { width:100%; min-height:36px; padding:7px 9px; border:1px solid; border-radius:4px; outline:none; font:inherit; font-size:13px; }
body[data-theme-tone="light"] .reading-preset-name-field input { color:#221f1a; caret-color:#221f1a; border-color:#9d9587; background:#fffdf8; }
body[data-theme-tone="dark"] .reading-preset-name-field input { color:#f4eee2; caret-color:#f4eee2; border-color:#6d6250; background:#171612; }
.reading-preset-name-field input::placeholder { color:currentColor; opacity:.56; }
.reading-preset-name-field input:focus { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent); }
.reading-preset-dialog-actions { display:flex; justify-content:flex-end; gap:7px; }
.reading-preset-dialog-actions button { min-height:32px; padding:6px 11px; color:var(--button-ink,var(--ink)); border:1px solid var(--line); border-radius:4px; background:var(--button-bg,var(--panel-soft)); font:inherit; font-size:10px; font-weight:800; }
.reading-preset-dialog-actions .primary { color:var(--button-active-ink,var(--ink)); border-color:var(--button-active-border,var(--accent)); background:var(--button-active-bg,var(--accent-soft)); }
.reading-preset-dialog-actions .danger { color:#fff; border-color:#7d2923; background:#8c3029; }

@media (max-width: 900px) {
  html body[data-visual-style][data-theme-tone] .wordmark-mark {
    width: 68px;
    height: 32px;
    padding: 0;
  }
}

/* Minimal, context-scoped editorial issue reporting. */
.word-help-unified-actions,
.word-help-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.issue-report-trigger {
  color: #a12b24;
  cursor: pointer;
}

.search-result-actions .issue-report-trigger {
  color: #a12b24;
}

.search-result-actions .issue-report-trigger:hover,
.search-result-actions .issue-report-trigger:focus-visible {
  color: #fff;
  border-color: #a12b24;
  background: #a12b24;
}

.word-help-unified-actions .issue-report-trigger,
.word-help-card-actions .issue-report-trigger {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #a12b24;
  border: 1px solid rgba(161, 43, 36, .28);
  border-radius: 4px;
  background: transparent;
}

.word-help-unified-actions .issue-report-trigger:hover,
.word-help-unified-actions .issue-report-trigger:focus-visible,
.word-help-card-actions .issue-report-trigger:hover,
.word-help-card-actions .issue-report-trigger:focus-visible {
  color: #fff;
  border-color: #a12b24;
  background: #a12b24;
}

.word-help-unified-top .issue-report-trigger svg,
.word-help-card-top .issue-report-trigger svg {
  width: 14px;
  height: 14px;
  color: currentColor;
}

.verse-margin-actions > .issue-report-trigger {
  color: #7f211b;
  border-color: rgba(142, 45, 36, .5);
  background: #f4ddd9;
}

.verse-margin-actions > .issue-report-trigger:hover,
.verse-margin-actions > .issue-report-trigger:focus-visible {
  color: #fff;
  border-color: #a12b24;
  background: #a12b24;
}


/* v1.3.7 explicit word-study source layers */
.word-help-base-note { display: block; margin: -2px 0 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
.word-help-original-language summary { color: #6f4e18; }
.word-help-original-card { border-left: 3px solid #a77622; }
.word-help-original-meta { margin: -2px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
body[data-chrome-mode="dark"] .word-help-original-language summary { color: #e2c66f; }
body[data-chrome-mode="dark"] .word-help-original-card { border-left-color: #d2ae51; }

/* Facsimile typography correction. Psalm superscriptions are blackletter text
   in the 1611 witness; chapter summaries above them remain Roman. */
html body[data-edition="he1611"] #reader-scroll > .paper .chapter-heading-superscription {
  font-family: var(--reader-font) !important;
  font-size: clamp(18px, calc(var(--reader-size) * .78), 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.34;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}

/* The printed verse figures are a small Roman serif, not blackletter and not
   the modern sans-serif used by the general reader interface. */
html body[data-edition="he1611"] #reader-scroll > .paper .verse-number {
  top: -.25em;
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: .62em;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.chapter-heading-apparatus {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  min-height: 1.35em;
  margin-inline: .16em .28em;
  padding: 0;
  color: var(--reader-accent);
  border: 0;
  border-bottom: 0;
  background: transparent;
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: .64em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: super;
  cursor: pointer;
}

.chapter-heading-apparatus:hover,
.chapter-heading-apparatus:focus-visible {
  color: var(--reader-ink);
  outline: 1px solid currentColor;
  outline-offset: 2px;
  background: color-mix(in srgb, var(--reader-accent) 10%, transparent);
}

.margin-note-popover-links {
  display: grid;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(179, 138, 34, .28);
}

.margin-note-popover-links > small {
  color: #806324;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

#text-size-value.auto-adjusted {
  color: var(--accent);
  font-weight: 800;
}

/* Five readable width stops. Standard and Wide are the neutral comfort band;
   moving outside that band can shift the selected text size by up to two stops. */
html body[data-visual-style][data-chrome-mode] #display-view .reader-width-control {
  --segments: 5;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html body[data-visual-style][data-chrome-mode] #display-view .reader-width-control > button {
  flex-direction: column !important;
  justify-content: center;
  gap: 2px !important;
  min-height: 50px;
  padding: 5px 2px !important;
  font-size: 9px !important;
  line-height: 1.05;
}

html body[data-visual-style][data-chrome-mode] #display-view .reader-width-control > button svg {
  width: 13px !important;
  height: 13px !important;
}

html body[data-visual-style][data-chrome-mode] #display-view .reader-width-control:has(
  > button:nth-child(4):is(.active,[aria-pressed="true"])
)::before {
  transform: translateX(300%);
}

html body[data-visual-style][data-chrome-mode] #display-view .reader-width-control:has(
  > button:nth-child(5):is(.active,[aria-pressed="true"])
)::before {
  transform: translateX(400%);
}

/* Book retains its accepted nine-point progression. Scroll needs a much more
   useful narrow measure, so its five stops advance in equal fifteen-point
   increments; the former 64% Narrow is now approximately the 70% Wide stop. */
html body[data-reader-width="contained"] { --reader-width-ratio: 64%; }
html body[data-reader-width="moderate"] { --reader-width-ratio: 73%; }
html body[data-reader-width="wide"] { --reader-width-ratio: 82%; }
html body[data-reader-width="expanded"] { --reader-width-ratio: 91%; }
html body[data-reader-width="full"] { --reader-width-ratio: 100%; }

html body[data-reading-mode="scroll"][data-reader-width="contained"] { --reader-width-ratio: 40%; }
html body[data-reading-mode="scroll"][data-reader-width="moderate"] { --reader-width-ratio: 55%; }
html body[data-reading-mode="scroll"][data-reader-width="wide"] { --reader-width-ratio: 70%; }
html body[data-reading-mode="scroll"][data-reader-width="expanded"] { --reader-width-ratio: 85%; }

html body[data-reader-width="wide"] .reader-scroll,
html body[data-reader-width="expanded"] .reader-scroll {
  padding-inline: clamp(12px, 2.1vw, 34px);
}

html body[data-reading-mode="book"][data-reader-width] #reader-scroll {
  box-sizing: border-box;
  width: var(--reader-width-ratio) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

html body[data-reading-mode="book"][data-reader-width] #reader-scroll > .paper {
  width: 100% !important;
  max-width: none !important;
}

html body:not([data-reading-mode="book"])[data-reader-width] #reader-scroll > .paper {
  width: var(--reader-width-ratio) !important;
  max-width: none !important;
}

/* On compact screens preserve usable line length. Book keeps its accepted
   values; Scroll uses a separate five-point progression from 80% to Full. */
@media (max-width: 760px) {
  html body[data-reading-mode="book"][data-reader-width="contained"] { --reader-width-ratio: 90%; }
  html body[data-reading-mode="book"][data-reader-width="moderate"] { --reader-width-ratio: 92.5%; }
  html body[data-reading-mode="book"][data-reader-width="wide"] { --reader-width-ratio: 95%; }
  html body[data-reading-mode="book"][data-reader-width="expanded"] { --reader-width-ratio: 97.5%; }
  html body[data-reading-mode="scroll"][data-reader-width="contained"] { --reader-width-ratio: 80%; }
  html body[data-reading-mode="scroll"][data-reader-width="moderate"] { --reader-width-ratio: 85%; }
  html body[data-reading-mode="scroll"][data-reader-width="wide"] { --reader-width-ratio: 90%; }
  html body[data-reading-mode="scroll"][data-reader-width="expanded"] { --reader-width-ratio: 95%; }
}

/* Continuous reading relies on native compositor scrolling. Programmatic
   passage and narration movement already provide their own bounded motion. */
html body[data-reading-mode="scroll"] #reader-scroll {
  scroll-behavior: auto;
}

/* 1611 verse-apparatus callers use the same compact superior typography as
   superscription apparatus. Render the actual parallel siglum instead of the
   taller synthetic bars and remove the generic reader underline. */
html body[data-edition="he1611"] #reader-scroll > .paper .margin-note-caller {
  min-width: 1.35em;
  min-height: 1.35em;
  margin-inline: .16em .28em;
  color: var(--reader-accent);
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent;
  font-family: "EB Garamond Local", Garamond, Georgia, serif;
  font-size: .5em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: super;
}

html body[data-edition="he1611"] #reader-scroll > .paper
  .margin-note-caller[data-margin-note-symbol="\2016"] {
  overflow: visible;
  text-indent: 0;
}

html body[data-edition="he1611"] #reader-scroll > .paper
  .margin-note-caller[data-margin-note-symbol="\2016"]::before {
  content: none;
  display: none;
}

html body[data-edition="he1611"] #reader-scroll > .paper .margin-note-caller:is(:hover, :focus-visible) {
  color: var(--reader-ink);
  outline: 1px solid currentColor;
  outline-offset: 2px;
  background: color-mix(in srgb, var(--reader-accent) 10%, transparent);
}

/* Smartphone reader stabilization -----------------------------------------
   Decorative desktop rules intentionally raise the Temple side panels in the
   layout. On a single-column phone those panels must remain viewport drawers;
   otherwise their full contents enter normal flow and push Scripture several
   screens below the header. Keep the essential mobile destinations, simplify
   duplicate top-bar actions, and reserve the entire middle viewport for text. */
@media (max-width: 900px) {
  html body[data-visual-style][data-chrome-mode] .reader-toolbar > .mode-control.segmented-control {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
    :is(.library-panel, .app-layout.utility-open > .utility-panel),
  html body[data-visual-style][data-theme-tone]
    :is(.library-panel, .utility-panel) {
    position: fixed !important;
    z-index: 50 !important;
    top: var(--header-height) !important;
    bottom: var(--mobile-nav-height) !important;
    height: auto !important;
  }

  html body:not([data-chrome-mode="theatre"]) .app-layout,
  html body:not([data-chrome-mode="theatre"]) .app-layout.utility-open {
    overflow: hidden;
  }

  html body:not([data-chrome-mode="theatre"]) .reader-shell {
    min-width: 0;
    min-height: 0;
  }

  html body[data-theme-tone] .mobile-nav {
    color: var(--ink);
    border-top-color: var(--style-rule, var(--line));
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow: 0 -8px 22px color-mix(in srgb, black 16%, transparent);
  }

  html body[data-theme-tone] .mobile-nav button {
    color: color-mix(in srgb, var(--ink) 66%, var(--muted));
  }

  html body[data-theme-tone] .mobile-nav button.active {
    color: var(--style-gold-bright, var(--accent));
    background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
  }
}

@media (max-width: 520px) {
  .app-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 6px;
    padding-inline: 8px;
  }

  .app-header > .global-search,
  .app-header .audio-header-split {
    display: none !important;
  }

  .app-header > .wordmark {
    justify-self: center;
    min-width: 0;
  }

  html body[data-visual-style][data-theme-tone] .wordmark-mark {
    width: 92px;
    height: 38px;
  }

  .app-header > .header-actions {
    justify-self: end;
    width: 44px;
  }

  .app-header .header-action-tabs {
    width: 44px;
    justify-content: flex-end;
  }

  .app-header .theatre-toggle,
  .app-header #library-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .reader-toolbar,
  .app-layout.library-collapsed .reader-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 56px;
    padding: 6px 7px !important;
  }

  .reader-toolbar .passage-selectors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 4px;
    min-width: 0;
  }

  .reader-toolbar :is(.select-control, .chapter-control) {
    width: auto !important;
    min-width: 0;
  }

  .reader-toolbar .themed-select-trigger {
    min-width: 0;
    height: 44px;
    padding-inline: 9px 7px;
  }

  .reader-toolbar .passage-actions {
    gap: 2px;
  }

  .reader-toolbar .passage-actions .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .reader-toolbar .select-control > select {
    height: 44px;
  }

  html body[data-reading-mode="book"][data-visual-style][data-theme-tone]
    #reader.reader-shell #reader-scroll.reader-scroll {
    padding: 24px 26px !important;
  }

  .library-panel,
  .utility-panel,
  html body[data-reading-mode="scroll"][data-visual-style="jerusalem"][data-ornaments="true"]
    :is(.library-panel, .app-layout.utility-open > .utility-panel) {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: none;
  }

  .library-panel {
    transform: translateX(-101%);
  }

  .utility-panel {
    transform: translateX(101%);
  }

  .mobile-nav {
    justify-content: stretch;
  }

  .mobile-nav button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding-inline: 1px;
  }

  .mobile-nav button span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utility-panel .utility-heading .icon-button,
  .library-panel .panel-heading .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .utility-panel :is(.segmented-control, .tool-tabs) > button,
  .utility-panel .search-field > button {
    min-height: 44px !important;
  }

  .library-panel .book-link {
    min-height: 46px;
  }
}

/* Short landscape phones cannot afford a duplicate top command bar. Every
   primary destination remains in the bottom navigation and passage controls
   remain in the toolbar, so the header can yield its height to Scripture. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-height: 0px;
    --mobile-nav-height: calc(56px + env(safe-area-inset-bottom));
  }

  html body:not([data-chrome-mode="theatre"]) .app-header {
    display: none !important;
  }
}

/* Mobile reader v22 -------------------------------------------------------
   Phone drawers are opaque modal surfaces, the selected destination has a
   high-contrast pressed state, and the fixed chrome yields more of a short
   viewport to Scripture without reducing any touch target below 40px. */
@media (max-width: 900px) {
  :root {
    --header-height: 54px;
    --mobile-nav-height: calc(58px + env(safe-area-inset-bottom));
  }

  html body[data-visual-style][data-theme-tone] :is(.library-panel, .utility-panel) {
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
    color: var(--ink) !important;
    background-color: var(--panel) !important;
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 94%, var(--style-gold-bright, var(--accent))),
      var(--panel) 22%
    ) !important;
    background-attachment: scroll !important;
    background-blend-mode: normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 0 0 1px var(--style-rule, var(--line)), 0 12px 38px rgba(0, 0, 0, .34) !important;
    transition: transform .2s cubic-bezier(.22, .75, .24, 1), visibility 0s linear .2s;
  }

  html body[data-visual-style][data-theme-tone] :is(.library-panel.open, .utility-panel.open) {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  html body[data-visual-style][data-theme-tone] :is(.library-panel .panel-heading, .utility-panel .utility-heading) {
    position: sticky;
    z-index: 4;
    top: 0;
    min-height: 62px;
    color: var(--ink);
    border-bottom: 1px solid var(--style-rule, var(--line));
    background: var(--panel);
    box-shadow: 0 5px 14px color-mix(in srgb, black 10%, transparent);
  }

  html body[data-visual-style][data-theme-tone] .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--panel) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body[data-visual-style][data-theme-tone] .mobile-nav button {
    position: relative;
    opacity: 1;
    color: var(--ink) !important;
    border-radius: 0;
    background: transparent !important;
  }

  html body[data-visual-style][data-theme-tone] .mobile-nav button + button {
    border-left: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  }

  html body[data-visual-style][data-theme-tone] .mobile-nav button.active,
  html body[data-visual-style][data-theme-tone] .mobile-nav button[aria-pressed="true"] {
    opacity: 1 !important;
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--accent) 28%, var(--panel)) !important;
    box-shadow: inset 0 3px 0 var(--accent) !important;
    text-shadow: none !important;
  }

  html body[data-visual-style][data-theme-tone] .mobile-nav button.active svg,
  html body[data-visual-style][data-theme-tone] .mobile-nav button[aria-pressed="true"] svg {
    color: currentColor !important;
    stroke: currentColor !important;
  }
}

@media (max-width: 520px) {
  :root {
    --header-height: 52px;
    --mobile-nav-height: calc(56px + env(safe-area-inset-bottom));
  }

  .app-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    padding-inline: 6px;
  }

  .app-header .theatre-toggle,
  .app-header #library-toggle,
  .app-header > .header-actions,
  .app-header .header-action-tabs {
    width: 44px;
    min-width: 44px;
  }

  .app-header .theatre-toggle,
  .app-header #library-toggle {
    height: 44px;
  }

  html body[data-visual-style][data-theme-tone] .wordmark-mark {
    width: 84px;
    height: 34px;
  }

  .reader-toolbar,
  .app-layout.library-collapsed .reader-toolbar {
    min-height: 52px;
    padding: 4px 6px !important;
  }

  .reader-toolbar .passage-selectors {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .reader-toolbar .chapter-control > select {
    padding-inline: 8px 30px;
  }

  .reader-toolbar .chapter-control > .native-select-chevron {
    right: 7px;
  }

  .reader-toolbar .chapter-control .themed-select-trigger {
    gap: 7px;
    padding-inline: 8px 6px;
  }

  .reader-toolbar .themed-select-trigger,
  .reader-toolbar .select-control > select,
  .reader-toolbar .passage-actions .icon-button {
    height: 44px;
    min-height: 44px;
  }

  .reader-toolbar .passage-actions .icon-button {
    width: 44px;
    min-width: 44px;
  }

  html body[data-reading-mode="book"][data-visual-style][data-theme-tone]
    #reader.reader-shell #reader-scroll.reader-scroll {
    --reader-frame-x: 18px;
    --reader-frame-y: 12px;
    padding: 12px 18px 8px !important;
  }

  html body[data-reading-mode="book"][data-visual-style][data-theme-tone]
    #reader-scroll > .paper {
    padding: 16px 18px 14px !important;
  }

  html body[data-reading-mode="book"] .book-opening-page {
    padding: 0 8px .65em;
  }

  html body[data-reading-mode="book"] .book-opening-edition {
    margin-bottom: .45em;
  }

  html body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn {
    width: 28px !important;
    height: 76px !important;
    border-radius: 4px !important;
  }

  html body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn svg {
    width: 19px !important;
    height: 19px !important;
  }

  html body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn-previous { left: 1px !important; }
  html body[data-visual-style][data-chrome-mode][data-reading-mode="book"] .page-turn-next { right: 1px !important; }

  .mobile-nav button {
    gap: 2px;
    min-height: 44px;
    font-size: 9px;
    line-height: 1;
  }

  .mobile-nav svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 350px) {
  .mobile-nav button {
    font-size: 8px;
    letter-spacing: -.02em;
  }

  .reader-toolbar .passage-selectors {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --header-height: 0px;
    --mobile-nav-height: calc(56px + env(safe-area-inset-bottom));
  }
}

/* Mobile display v26 ------------------------------------------------------
   The automatic phone/tablet reading profile starts at the same breakpoint as
   the fixed bottom navigation. Its confirmation belongs inside Display, where
   the effective values can be reviewed and changed without altering desktop. */
#display-view .mobile-display-profile[hidden] {
  display: none !important;
}

#display-view .mobile-display-profile {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0 0 4px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 6px;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--panel));
}

#display-view .mobile-display-profile > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

#display-view .mobile-display-profile > span:not(.mobile-display-profile-badge) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

#display-view .mobile-display-profile strong {
  font-size: 11px;
  line-height: 1.15;
}

#display-view .mobile-display-profile small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

#display-view .mobile-display-profile-badge {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 5px 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

#display-view button[data-mobile-auto="true"] {
  position: relative;
}

#display-view button[data-mobile-auto="true"]::after {
  content: "Auto";
  position: absolute;
  top: 3px;
  right: 4px;
  z-index: 2;
  padding: 2px 3px 1px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  font-family: Arial, sans-serif;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

@media (min-width: 901px) {
  #display-view .mobile-display-profile {
    display: none !important;
  }
}

@media (max-width: 520px) {
  #display-view .mobile-display-profile {
    padding-inline: 8px;
  }

  #display-view .mobile-display-profile small {
    white-space: normal;
  }
}