/* Reader styles: open book spread with paper tones, page turn leaf, notes panels, red letters, and personalization. */

/* Reader tokens */
.readerpage {
  --paper: #fbf6e8;
  --paper-edge: #efe5cc;
  --ink: #23201b;
  --ink-muted: #5d5546;
  --binding: #4a2c1d;
  --wj: #a3191f;
  --gold: #d9b45a;
  --leather: #3a2418;
  --ribbon: #8b1e2d;
  --drop: #7a1b16;
  --notecol: #1a4f8b;
  --gilt: linear-gradient(180deg, #f6e3a1, #c9962f 30%, #f1d57e 55%, #b8862a 80%, #efd27a);
  --turn-ms: 700ms;
  max-width: none;
  padding: var(--space-4) clamp(var(--space-3), 2vw, var(--space-5));
}

/* Toolbar: avatar, version, book, chapter selectors, live chapter label */
.readerbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.field { display: grid; min-width: 0; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.field.inline { display: flex; align-items: center; gap: var(--space-2); }
.field select, .field input[type="text"] { font: inherit; font-weight: 400; color: var(--text); min-height: 44px; padding: var(--space-2); border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--surface); max-width: 100%; }
.chapterlabel { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; flex: 1 1 12rem; }

/* Layout: notes panels on both sides on wide screens, stacked below the book otherwise */
.readergrid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; grid-template-areas: "book" "left" "right"; }
.bookwrap { grid-area: book; min-width: 0; }
#notesleft { grid-area: left; }
#notesright { grid-area: right; }
@media (min-width: 40rem) { .readergrid { grid-template-columns: 1fr 1fr; grid-template-areas: "book book" "left right"; } }
@media (min-width: 75rem) { .readergrid { grid-template-columns: 12rem minmax(0, 1fr) 12rem; grid-template-areas: "left book right"; } }

/* The open book: binding around one or two paper pages */
.book {
  position: relative; display: flex; gap: 0;
  height: clamp(24rem, calc(100vh - 13rem), 46rem);
  padding: 6px; border-radius: 6px; background: var(--binding);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  perspective: 1800px; user-select: text; touch-action: pan-y;
}
.page {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  padding: var(--space-3) var(--space-5) var(--space-2);
  font-family: var(--font-serif); cursor: pointer;
}
.page.left { border-radius: 3px 0 0 3px; background: linear-gradient(to left, var(--paper-edge), var(--paper) 2.2rem); }
.page.right { border-radius: 0 3px 3px 0; background: linear-gradient(to right, var(--paper-edge), var(--paper) 2.2rem); }
.book.single .page.right { display: none; }
.book.single .page.left { border-radius: 3px; background: var(--paper); }
.pagehead, .pagefoot { flex: none; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); text-align: center; min-height: 1.2rem; }
.pagehead { border-bottom: 1px solid var(--paper-edge); margin-bottom: var(--space-2); padding-bottom: var(--space-1); }
.pagefoot { margin-top: var(--space-1); }
.pagebody { flex: 1 1 auto; overflow: hidden; font-size: 1rem; line-height: 1.55; text-align: justify; text-align-last: start; hyphens: auto; overflow-wrap: break-word; }
.pagebody:lang(zh) { text-align: left; line-height: 1.8; font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif; }
.pagebody:lang(hbo), .pagebody:lang(he) { font-size: 1.2rem; line-height: 1.7; text-align: right; font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Times New Roman", serif; }
.pagebody:lang(ar) { font-size: 1.15rem; line-height: 1.9; text-align: right; font-family: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif; }
.pagebody p { margin: 0 0 var(--space-2); text-indent: 0; }
.pagebody .booktitle { font-size: 1.5rem; text-align: center; margin: var(--space-2) 0 var(--space-3); letter-spacing: .04em; }
.pagebody .chap { font-size: 1.05rem; text-align: center; margin: var(--space-3) 0 var(--space-2); font-variant: small-caps; letter-spacing: .08em; }
.pagebody .chap:first-child { margin-top: 0; }
.vnum {
  font: inherit; font-size: .62em; font-weight: 700; vertical-align: baseline; position: relative; top: -.5em; line-height: 1;
  color: var(--ink-muted); background: none; border: 0; padding: .1em .2em; margin: 0; cursor: pointer;
}
.vnum:hover { color: var(--notecol); text-decoration: underline; }
.vnum.hasnote { color: var(--notecol); }
.vnum.hasnote::after { content: "•"; }
.wj { color: var(--wj); }
.vnum.wjpart { color: var(--wj); }
.wjsample { color: var(--wj-ui); font-weight: 600; }
.pagemsg { font-style: italic; color: var(--ink-muted); }

/* Ribbon bookmark hanging from the top of the spread near the spine */
.ribbon { position: absolute; top: -4px; left: calc(50% - 7px); width: 14px; height: 5rem; background: var(--ribbon); z-index: 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); pointer-events: none; box-shadow: 1px 0 2px rgba(0,0,0,.3); }
.book.single .ribbon { left: auto; inset-inline-end: 9px; width: 10px; height: 3.5rem; }

/* Page turn: a leaf with front and back faces rotates around the spine */
.leaf { position: absolute; top: 6px; bottom: 6px; z-index: 4; transform-style: preserve-3d; transition: transform var(--turn-ms) cubic-bezier(.45,.05,.35,1); pointer-events: none; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 12px rgba(0,0,0,.18); }
.leaf .face.back { transform: rotateY(180deg); }
/* Fold shadow: each face darkens toward the spine while the leaf is upright, and the page underneath gets a cast shadow */
.leaf .face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: foldshade var(--turn-ms) ease-in-out; }
.leaf[data-spine="left"] .front::after, .leaf[data-spine="right"] .back::after { background: linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,.08) 40%, rgba(255,255,255,.08) 75%, rgba(0,0,0,.15)); }
.leaf[data-spine="right"] .front::after, .leaf[data-spine="left"] .back::after { background: linear-gradient(to left, rgba(0,0,0,.45), rgba(0,0,0,.08) 40%, rgba(255,255,255,.08) 75%, rgba(0,0,0,.15)); }
.castshadow { position: absolute; top: 6px; bottom: 6px; z-index: 3; pointer-events: none; opacity: 0; animation: foldshade var(--turn-ms) ease-in-out; }
.castshadow[data-spine="left"] { background: linear-gradient(to right, rgba(0,0,0,.35), transparent 60%); }
.castshadow[data-spine="right"] { background: linear-gradient(to left, rgba(0,0,0,.35), transparent 60%); }
@keyframes foldshade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.book.fading .page { transition: opacity 160ms ease; opacity: 0; }

/* Page buttons and hints under the book */
.pagenav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.turnbtn, .notesbtn, .backupbtns button, .filebtn, .interpslot button {
  font: inherit; min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--btn-text); background: var(--surface); color: var(--btn-text); cursor: pointer;
}
.turnbtn:hover, .notesbtn:hover, .backupbtns button:hover, .filebtn:hover, .interpslot button:hover { background: var(--hover); }
.pagecount { font-size: var(--text-sm); color: var(--muted); text-align: center; }
.hint { font-size: var(--text-sm); color: var(--muted); margin: var(--space-3) 0 0; }

/* Notes panels: list of notes for the page beside them, quick add, inline edit, delete with undo */
.notespanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); align-self: start; font-size: var(--text-sm); }
.notespanel h2 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.notesbody > p { margin: 0 0 var(--space-2); color: var(--muted); }
.note { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
.note h3 { font-size: var(--text-sm); margin: 0 0 var(--space-1); font-family: var(--font-sans); }
.note p { margin: 0 0 var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.noteactions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.noteactions button, .noteeditor button { font: inherit; font-size: var(--text-sm); min-height: 36px; padding: var(--space-1) var(--space-3); border-radius: var(--radius); border: 1px solid var(--input-border); background: var(--surface); cursor: pointer; }
.noteeditor { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.noteeditor select, .noteeditor textarea { font: inherit; padding: var(--space-2); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius); width: 100%; }
.noteeditor .primary, .notesbtn.primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
.notesbtn { width: 100%; margin-bottom: var(--space-2); }

/* Backup and personalization sections */
.notesbackup, .personalize { max-width: 46rem; margin-top: var(--space-6); }
.backupbtns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filebtn { display: inline-flex; align-items: center; }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn:focus-within { outline: 3px solid var(--focus-dark); outline-offset: 2px; }
.personalgrid { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.personalfields { flex: 1 1 16rem; display: grid; gap: var(--space-3); }
.ribbonpick { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); margin: 0; }
.ribbonpick legend { font-weight: 600; font-size: var(--text-sm); color: var(--muted); padding: 0 var(--space-1); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--input-border); cursor: pointer; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--btn-text); }

/* Bible avatar: leather cover with gold engraving and a ribbon tail */
.avatar, .bigcover { position: relative; display: inline-block; text-decoration: none; }
.cover {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 2.6rem; height: 3.4rem; border-radius: 2px 5px 5px 2px; padding: 2px;
  background: linear-gradient(90deg, #22140d 0 12%, var(--leather) 12%); box-shadow: inset 0 0 0 1px rgba(217,180,90,.5), 0 2px 4px rgba(0,0,0,.3);
}
.engraving { color: var(--gold); font-family: var(--font-serif); font-size: .42rem; line-height: 1.1; font-weight: 700; letter-spacing: .04em; overflow: hidden; max-height: 100%; overflow-wrap: anywhere; }
.avatarribbon { position: absolute; bottom: -.6rem; inset-inline-end: .7rem; width: 6px; height: 1rem; background: var(--ribbon); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.bigcover .cover { width: 9rem; height: 12rem; border-radius: 3px 10px 10px 3px; padding: var(--space-3); padding-inline-start: 1.6rem; }
.bigcover .engraving { font-size: .8rem; text-transform: uppercase; overflow-wrap: break-word; }
.bigcover .avatarribbon { width: 14px; height: 2.2rem; bottom: -1.6rem; inset-inline-end: 2rem; }

/* Media area: the user's videos with notes, and Pastors' Interpretations */
.mediagrid { display: grid; gap: var(--space-4); margin-top: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .mediagrid { grid-template-columns: 1fr 1fr; } }
.mediapanel, .interppanel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); min-width: 0; }
.mediapanel h2, .interppanel h2 { margin-top: 0; }
.mediaform { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.mediaform input[type="file"] { font: inherit; font-weight: 400; }
.mediaitem, .interp { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.mediaitem h3, .interp h3 { font-size: var(--text-base); margin: 0 0 var(--space-1); font-family: var(--font-sans); overflow-wrap: anywhere; }
.mediameta { font-size: var(--text-sm); color: var(--muted); margin: 0 0 var(--space-2); }
.mediaitem video, .interpslot iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border: 0; border-radius: var(--radius); margin-bottom: var(--space-2); }
.medianotes { margin-top: var(--space-3); font-size: var(--text-sm); }
.medianotes h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.medianote { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-2); align-items: start; padding: var(--space-2) 0; border-top: 1px dashed var(--border); }
.medianote > p, .medianote > textarea { grid-column: 2; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.medianote > p:first-child, .medianote > textarea:first-child { grid-column: 1 / -1; }
.medianote > .noteactions { grid-column: 1 / -1; }
.medianote > button { font: inherit; font-variant-numeric: tabular-nums; color: var(--link); background: var(--hover); border: 1px solid var(--input-border); border-radius: var(--radius); min-height: 32px; padding: 0 var(--space-2); cursor: pointer; }
.checkline { display: flex; gap: var(--space-2); align-items: center; }
.empty { color: var(--muted); font-style: italic; }
.interptitle { font-weight: 600; margin: 0 0 var(--space-1); }

/* Undo toast */
.toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 50; display: flex; gap: var(--space-3); align-items: center; background: var(--nav-bg); color: var(--nav-text); border: 1px solid var(--nav-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.toast[hidden] { display: none; }
.toast button { font: inherit; background: transparent; color: var(--focus); border: 1px solid var(--focus); border-radius: var(--radius); min-height: 36px; padding: 0 var(--space-3); cursor: pointer; }

/* Right to left interface (Arabic): the spread mirrors, so the first page sits on the right and the spine shading flips */
[dir="rtl"] .page.left { border-radius: 0 3px 3px 0; background: linear-gradient(to right, var(--paper-edge), var(--paper) 2.2rem); }
[dir="rtl"] .page.right { border-radius: 3px 0 0 3px; background: linear-gradient(to left, var(--paper-edge), var(--paper) 2.2rem); }
[dir="rtl"] .book.single .page.left { background: var(--paper); }
[dir="rtl"] .cover { background: linear-gradient(-90deg, #22140d 0 12%, var(--leather) 12%); }

/* ---------- Bible styles (html data-style, saved as tss.style), each with a dark variant ---------- */
/* 1. Classic Leather Family Bible (default): leather binding, gold gilded fore-edges, drop caps */
html[data-style="classic"] .page.left, html[data-style="classic"] .page.right { border: 0 solid; border-image: var(--gilt) 1; border-block-width: 2px; }
html[data-style="classic"] .page.left { border-inline-start-width: 4px; }
html[data-style="classic"] .page.right, html[data-style="classic"] .book.single .page.left { border-inline-end-width: 4px; }
html[data-style="classic"] .book { background: linear-gradient(180deg, #5a3523, var(--binding) 40%, #3b2216); }
.dropcap { float: inline-start; font-size: 3.2em; line-height: .82; margin: .06em .08em 0 0; padding-inline-end: .04em; color: var(--drop); font-weight: 700; }
[dir="rtl"] .dropcap { margin: .06em 0 0 .08em; }
html[data-theme="dark"] .readerpage { --paper: #26211a; --paper-edge: #1b1712; --ink: #eee4cf; --ink-muted: #c2b59a; --wj: #ff8f87; --binding: #120c08; --leather: #2a1a10; --drop: #e6b65c; --notecol: #8cc4ff; }
html[data-theme="dark"][data-style="classic"] .book { background: linear-gradient(180deg, #24160e, #120c08 40%, #0c0805); }

/* 2. Modern: flat white pages, thin grey binding, no gilt, sans serif headings */
html[data-style="modern"] .readerpage { --paper: #ffffff; --paper-edge: #ffffff; --ink: #1d1f24; --ink-muted: #555b66; --wj: #b3261e; --binding: #c9ced6; --leather: #2f3640; }
html[data-theme="dark"][data-style="modern"] .readerpage { --paper: #1b1e23; --paper-edge: #1b1e23; --ink: #e6e8eb; --ink-muted: #a9b0bb; --wj: #ff8a80; --binding: #2c3139; --leather: #3a414c; --notecol: #8cc4ff; }
html[data-style="modern"] .book { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
html[data-style="modern"] .pagebody .chap, html[data-style="modern"] .pagebody .booktitle { font-family: var(--font-sans); font-variant: normal; text-transform: uppercase; font-size: .9rem; letter-spacing: .12em; }
html[data-style="modern"] .pagebody .booktitle { font-size: 1.2rem; }
html[data-style="modern"] .pagehead { border-bottom-color: var(--ink-muted); }

/* 3. Study Bible with Tabs: navy binding, bright pages, colored section tabs on the fore-edge */
html[data-style="study"] .readerpage { --paper: #fdfcf8; --paper-edge: #eceae2; --ink: #1f2328; --ink-muted: #565c66; --wj: #a3191f; --binding: #1f3354; --leather: #1f3354; }
html[data-theme="dark"][data-style="study"] .readerpage { --paper: #1e222a; --paper-edge: #171a20; --ink: #e7e9ee; --ink-muted: #aab1bd; --wj: #ff8f87; --binding: #0d1626; --leather: #1a2b47; --notecol: #8cc4ff; }
.bookwrap { position: relative; }
.sectiontabs { display: none; }
html[data-style="study"] .bookwrap { padding-inline-end: 2.3rem; }
html[data-style="study"] .sectiontabs { display: flex; flex-direction: column; gap: 3px; position: absolute; top: 1.2rem; inset-inline-end: 0; z-index: 5; }
.sectiontab {
  writing-mode: vertical-rl; min-width: 2.3rem; min-height: 44px; padding: var(--space-2) 0; font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: var(--tab); border: 0; border-radius: 0 6px 6px 0; cursor: pointer; box-shadow: 1px 1px 3px rgba(0,0,0,.25);
}
[dir="rtl"] .sectiontab { border-radius: 6px 0 0 6px; writing-mode: vertical-lr; }
.sectiontab[aria-current="true"] { outline: 3px solid var(--ink); outline-offset: -3px; text-decoration: underline; }
.sectiontab:disabled { opacity: .45; cursor: not-allowed; }
.sectiontab:hover:not(:disabled) { filter: brightness(1.12); }
.tab-law { --tab: #8b1e2d; } .tab-history { --tab: #8a4f00; } .tab-poetry { --tab: #1e6b3a; } .tab-prophets { --tab: #5b2a86; }
.tab-gospels { --tab: #a3191f; } .tab-epistles { --tab: #1f4e8c; } .tab-revelation { --tab: #3d3d3d; }
html[data-theme="dark"] .tab-law { --tab: #a3283a; } html[data-theme="dark"] .tab-revelation { --tab: #555; }

/* 4. Antique Parchment: aged, mottled pages with darkened edges and brown ink */
html[data-style="parchment"] .readerpage { --paper: #f1e2bf; --paper-edge: #d9c08e; --ink: #3a2a17; --ink-muted: #5e472a; --wj: #94170f; --binding: #5a3a1e; --leather: #4a2f17; --drop: #6e3b12; --notecol: #1a4a80; }
html[data-theme="dark"][data-style="parchment"] .readerpage { --paper: #2e2618; --paper-edge: #221c11; --ink: #efdfbd; --ink-muted: #c8b38a; --wj: #ff9a8a; --binding: #150f07; --leather: #2e1f10; --drop: #e0b56a; --notecol: #93c5f5; }
html[data-style="parchment"] .page { box-shadow: inset 0 0 34px rgba(90,58,20,.28); }
html[data-style="parchment"] .page, html[data-style="parchment"] .page.left, html[data-style="parchment"] .page.right {
  background-image: radial-gradient(ellipse at 22% 18%, rgba(255,250,235,.22), transparent 55%), radial-gradient(ellipse at 78% 82%, rgba(120,80,30,.14), transparent 50%), radial-gradient(circle at 60% 40%, rgba(140,95,40,.07), transparent 30%);
  background-color: var(--paper);
}
html[data-theme="dark"][data-style="parchment"] .page { box-shadow: inset 0 0 34px rgba(0,0,0,.45); }

/* Phones: a taller single page and slightly larger text */
@media (max-width: 48rem) {
  .book { height: clamp(22rem, calc(100svh - 15rem), 40rem); }
  .page { padding: var(--space-3) var(--space-4) var(--space-2); }
  .readerbar { gap: var(--space-2) var(--space-3); }
  .readerbar .field { flex: 1 1 7rem; }
  .readerbar .avatar { display: none; }
  .chapterlabel { order: -1; flex-basis: 100%; margin: 0; }
  html[data-style="study"] .bookwrap { padding-inline-end: 0; }
  html[data-style="study"] .sectiontabs { position: static; flex-direction: row; overflow-x: auto; margin-bottom: 2px; }
  .sectiontab, [dir="rtl"] .sectiontab { writing-mode: horizontal-tb; min-width: auto; padding: 0 var(--space-2); border-radius: 6px 6px 0 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .leaf { transition: none; } }
@media print { .readerbar, .pagenav, .hint, .notesbackup, .personalize, .ribbon, .sectiontabs { display: none !important; } .book { height: auto; box-shadow: none; } }

/* ---------- Highlighter ---------- */
.hlbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.hltoggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .3rem .7rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); cursor: pointer; }
.hltoggle[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
.hlpen { width: .9rem; height: 1.1rem; border-radius: .15rem .15rem .4rem .4rem; background: var(--hl, #ffd43b); border: 1px solid rgba(0, 0, 0, .45); }
.hlchip { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .35); background: var(--hl); cursor: pointer; padding: 0; }
.hlchip[aria-pressed="true"] { outline: 3px solid var(--text); outline-offset: 2px; }
.hleraser { background: var(--surface) linear-gradient(135deg, transparent 45%, #c92a2a 45%, #c92a2a 55%, transparent 55%); }
.hlcustom { width: 2.4rem; height: 2.1rem; padding: 0 .1rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); cursor: pointer; }
.vs.hl { background: var(--hlfill, color-mix(in srgb, var(--hl) 42%, transparent)); box-shadow: inset 0 -.14em 0 var(--hl); border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.book.highlighting .pagebody .vs { cursor: crosshair; }
.book.highlighting .pagebody .vs:hover { outline: 1px dashed var(--muted); }
.hlhead { font-size: 1rem; margin: 1rem 0 .4rem; }
.hlswatch { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; margin-inline-end: .4rem; vertical-align: -.1rem; background: var(--hl); border: 1px solid rgba(0, 0, 0, .4); }
.hlitem { border-inline-start: 4px solid var(--hl); }
.hlpick { border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .6rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .5rem 0; }
.hlradio { display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; }
.signin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0; padding: .6rem .9rem; border: 1px solid var(--border); border-inline-start: 4px solid var(--link); border-radius: .4rem; background: var(--surface); }
.signin[hidden] { display: none; }
.signin p { margin: 0; flex: 1 1 18rem; }
.signin button { min-height: 2.5rem; padding: .3rem .8rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); cursor: pointer; }
.signin button:disabled { opacity: .7; cursor: not-allowed; }
@media print { .hlbar, .signin { display: none; } .vs.hl { background: none; text-decoration: underline; } }

/* ---------- Read aloud ---------- */
.ttsbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ttsbar[hidden] { display: none; }
.ttsbtn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .7rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); cursor: pointer; font: inherit; }
.ttsbtn[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
.ttsbtn:disabled, .ttsbtn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ttsicon { font-size: .8em; min-width: 1.1em; text-align: center; }
.ttsrate { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-sm); }
.ttsrate select { min-height: 2.5rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); padding: 0 .3rem; font: inherit; }
.ttsnote { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0; padding: .5rem .8rem; border: 1px solid var(--border); border-inline-start: 4px solid var(--link); border-radius: .4rem; background: var(--surface); }
.ttsnote[hidden] { display: none; }
.ttsnote button { min-height: 2.25rem; padding: .2rem .7rem; border: 1px solid var(--input-border); border-radius: .4rem; background: var(--surface); cursor: pointer; font: inherit; }
.ttsnote .ttsx { margin-inline-start: auto; min-width: 2.25rem; }
.vs.speaking { outline: 2px solid var(--notecol); outline-offset: 1px; border-radius: .2em; }
@media print { .ttsbar, .ttsnote { display: none; } }