/* The reading page. Everything is served from this server: fonts in fonts/, icons in icons.css (generated),
   the hills wallpaper in hills.css (four moods, adopted from Biblion).
   Typography, sizes and spacing follow Biblion's stylesheet (Bootstrap 5 metrics plus its own reader rules):
   the dark navbar, the dark dropdowns with gold hover and a gold tick, the flat reading sheet (.cv-sheet), verse rows,
   verse numbers, Strong's numbers, group heads and the dark footer.
   Fonts: Monarcha (licensed, Slovak subset) for the Bible text only; Prompt for everything else; Gentium Plus for Greek,
   Shlomo for Hebrew, Charis for transliteration.
   UX: one job, reading a chapter. Book and chapter come first in the bar and everything else sits behind two menus
   (Hick's law); on touch screens every target grows to 44px (Fitts's law); the chapter's end offers the next one. */

@font-face{font-family:"Prompt";src:url("fonts/prompt-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Prompt 500 from Google Fonts (self-hosted), in its latin and latin-ext subsets */
@font-face{font-family:"Prompt";src:url("fonts/prompt-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Prompt";src:url("fonts/prompt-500-latin-ext.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Prompt";src:url("fonts/prompt-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Prompt";src:url("fonts/prompt-600-latin-ext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Prompt";src:url("fonts/prompt-700.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
/* Monarcha draws U+00A0 at zero width, so that one character is left to the next font */
/* Monarcha, two files per style (the same family name, split by unicode-range; the LATER rule wins where both cover a
   character): Biblion's original files, with the foundry's own TrueType hinting, draw every character they have, so
   the text looks exactly as on Biblion; the Slovak kit (re-hinted by the kit generator, which Windows renders visibly
   differently) only fills in what the originals lack: č ď ľ ĺ ň ŕ š ť ž and the rest of Latin Extended. */
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-sk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0-9F,U+A1-10FFFF}
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A1-FF,U+152-153,U+178,U+2C6,U+2DC,U+2000-200A,U+2010-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+2039-203A,U+205F,U+20AC,U+2122,U+FB01-FB04}
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+20-7E,U+A1-FF,U+152-153,U+178,U+2C6,U+2DC,U+2000-200A,U+2010-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+2039-203A,U+205F,U+20AC,U+2122,U+25FC,U+FB01-FB04}
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-bold-v2.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+20-7E,U+A1-FF,U+152-153,U+178,U+2C6,U+2DC,U+2000-200A,U+2010-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+202F,U+2039-203A,U+205F,U+20AC,U+2122,U+25FC,U+FB01-FB04}
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-sk-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0-9F,U+A1-10FFFF}
@font-face{font-family:"Monarcha";src:url("fonts/monarcha-sk-700.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0-9F,U+A1-10FFFF}
@font-face{font-family:"SDP Greek";src:url("fonts/gentium-plus-700.woff2") format("woff2");font-weight:100 900;font-display:swap;size-adjust:122%;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"SDP Hebrew";src:url("fonts/shlomo-semi-stam.woff2") format("woff2");font-weight:100 900;font-display:swap;size-adjust:122%;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"SDP Translit";src:url("fonts/charis-600-v2.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---- tokens ---- */
:root{
  --ui:"Prompt","SDP Greek","SDP Hebrew",sans-serif;
  --bible:"SDP Greek","SDP Hebrew","Monarcha",Georgia,serif;
  --radius:.375rem;
  --gold:#c9a227; --gold-lift:#D9A93F; --gold-wash:rgba(201,162,39,.28);
  /* Biblion's gold as ink: #c9a227 is too pale on the light sheet, #8a6d1f is Biblion's own dark gold; night lifts it */
  --gold-ink:#8a6d1f;
  /* the bar, its menus and the footer are dark in every mood, as in Biblion */
  --bar:#212529; --bar-ink:rgba(255,255,255,.55); --bar-ink-hover:rgba(255,255,255,.75); --bar-field:#2b3035; --bar-line:#495057;
  --menu:#212529; --menu-ink:#dee2e6; --menu-line:rgba(255,255,255,.15); --group-head:#b9a3e0;
  /* the sheet (.cv-sheet) */
  --sheet:#f7f5f1; --sheet-line:rgba(0,0,0,.07); --sheet-hover:#ede7da; --ink:#212529; --muted:#6c757d;
  --cv-violet:#7a5ea8; --cv-rule:#e4e0ea; --cv-mark-line:#d8d4de; --cv-mark:#c8c3d0; --cv-muted:#6b6b76; --cv-num:#8a72b8;
  --hit:rgba(201,162,39,.30); --select:rgba(39,147,201,.16);
  /* the word / Strong's / notes panel: washed violet */
  --panel:#f8f6fb; --panel-ink:#241c33; --panel-muted:#6b6b76; --panel-line:#e4e0ea; --panel-link:#7a5ea8; --panel-hover:#efebf6;
  --shadow:0 .5rem 1rem rgba(0,0,0,.15);
  color-scheme:light;
}
:root.night{
  --gold-ink:#D9A93F;
  --sheet:#1B212A; --sheet-line:#2B333E; --sheet-hover:#232B36; --ink:#E6E2D9; --muted:#AAB2BD;
  --cv-violet:#b9a3e0; --cv-rule:#2B333E; --cv-mark-line:#2B333E; --cv-mark:#4a5361; --cv-muted:#AAB2BD; --cv-num:#cbb8f0;
  --hit:rgba(217,169,63,.26); --select:#253349;
  --panel:#231f33; --panel-ink:#f1ecfa; --panel-muted:#bdb2d4; --panel-line:#3a3352; --panel-link:#cdb8f5; --panel-hover:#2c2640;
  --shadow:0 .5rem 1rem rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background-color:var(--hills-sky,#c9d2e6);-webkit-text-size-adjust:100%}
/* the page does not scroll: the bar stays on top, the footer at the bottom, and the reading area between them scrolls */
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);font:400 1rem/1.5 var(--ui);font-synthesis:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;background-position:center;background-size:cover;background-repeat:no-repeat}
button,select,textarea{font:inherit;color:inherit;margin:0}
:focus-visible{outline:2px solid var(--gold-lift);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:.75rem;top:-4rem;z-index:1050;background:var(--bar);color:#fff;padding:.5rem 1rem;border-radius:var(--radius)}
.skip:focus{top:.5rem}
.meta{color:var(--muted)}

/* ---- the navbar (Bootstrap .navbar.bg-dark, padding-y .5rem) ---- */
.nav{flex:none;position:relative;z-index:1030;background:var(--bar);padding-top:env(safe-area-inset-top)}
/* three columns: the name in the far left corner, the pickers and menus centred in the middle (as wide as before,
   1140px at most), and an empty column on the right that keeps the middle centred */
.nav-in{width:100%;margin:0;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,1140px) minmax(0,1fr);align-items:center;column-gap:1rem;
  padding:.5rem max(.75rem,env(safe-area-inset-right)) .5rem max(.75rem,env(safe-area-inset-left))}
.nav-center{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0}
.place,.tools{display:flex;align-items:center;gap:.5rem;min-width:0}
.place{flex:1 1 auto}
.tools{flex:none}
.icon-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:2.25rem;height:2.25rem;
  padding:0 .5rem;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--bar-ink);
  font-size:1rem;cursor:pointer;transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{color:var(--bar-ink-hover)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn.round{width:2.25rem;padding:0;border-radius:50%;color:#fff;background-color:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
.icon-btn.round i{font-size:1.05rem}
.icon-btn.round:hover,.icon-btn.round:focus-visible,.icon-btn.round[aria-expanded="true"]{background-color:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.btn-label{white-space:nowrap}
/* Bootstrap .form-select in the dark theme */
.sel{position:relative;display:flex;align-items:center;min-width:0}
.sel select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:2.375rem;
  padding:.375rem 2.25rem .375rem .75rem;border:1px solid var(--bar-line);border-radius:var(--radius);background-color:var(--bar-field);
  color:#dee2e6;font-size:1rem;font-weight:400;line-height:1.5;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.sel select:focus{outline:0;border-color:var(--gold-lift);box-shadow:0 0 0 .25rem rgba(217,169,63,.25)}
.sel select option{background:#2b3035;color:#dee2e6}
.sel>.fa-book{position:absolute;left:.75rem;color:var(--gold-lift);pointer-events:none;font-size:.9rem}
.sel-book select{padding-left:2.25rem}
.sel .caret{position:absolute;right:.75rem;font-size:.7rem;color:#adb5bd;pointer-events:none}
.sel-book{flex:0 1 auto;max-width:20rem}
.sel-ch{flex:none;width:4.75rem}

/* ---- dropdown menus (Bootstrap .dropdown-menu, dark; Biblion's gold hover and gold tick) ---- */
.dd{position:relative}
.menu{position:absolute;right:0;top:calc(100% + .125rem);z-index:1000;min-width:12rem;max-width:min(22rem,calc(100vw - 1.5rem));
  max-height:calc(100vh - 5rem);overflow-y:auto;overscroll-behavior:contain;padding:.5rem 0;background:var(--menu);color:var(--menu-ink);
  border:1px solid var(--menu-line);border-radius:var(--radius);box-shadow:var(--shadow);font-size:1rem}
.menu[hidden],.menu button[hidden],.menu a[hidden]{display:none}
.menu button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem 1rem;border:0;background:transparent;color:var(--menu-ink);
  font-weight:400;text-align:left;white-space:nowrap;cursor:pointer}
.menu button:hover,.menu button:focus-visible,.menu button:active{background-color:var(--gold-wash);color:#fff;outline:none}
.menu button>i:first-child{width:1.25em;color:#adb5bd}
.menu button>span:not(.badge){flex:1;overflow:hidden;text-overflow:ellipsis}
.menu .tick{margin-left:auto;font-size:.72em;color:var(--gold-lift);visibility:hidden}
.menu [aria-checked="true"] .tick{visibility:visible}
.menu-head{display:block;padding:.55rem 1rem .15rem;font:500 .68rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--group-head)}
.menu>.menu-head:first-child{padding-top:.15rem}
.menu hr{height:0;margin:.5rem 0;border:0;border-top:1px solid var(--menu-line);opacity:1}
.badge{display:inline-block;padding:.35em .65em;border-radius:50rem;background:rgba(255,255,255,.12);font-size:.75em;font-weight:500;line-height:1}
.badge:empty{display:none}

/* ---- the sheet (Biblion .cv-sheet) ---- */
.scroller{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
main{width:100%;max-width:50rem;margin:0 auto;padding:1.5rem .75rem 2rem;transition:margin .2s ease}
main:focus{outline:none}
.sheet{background-color:var(--sheet);border:1px solid var(--sheet-line);border-radius:var(--radius);padding:2rem 2.25rem 2.5rem}
/* the masthead (Biblion .cv-head, .cv-eyebrow, .cv-ref, .sec-mark): eyebrow, heading, and a rule whose left end is the
   section mark */
.cv-head{position:relative;padding-bottom:.9rem;margin-bottom:3.5rem}
.cv-head::after{content:"";position:absolute;left:17px;right:0;bottom:0;border-top:1px solid var(--cv-mark-line)}
.cv-eyebrow{margin:0 0 .15rem;font:500 .7rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--cv-violet)}
.cv-ref{margin:0;font:700 1.75rem/1.15 "Monarcha",Georgia,serif;font-synthesis:none;color:var(--ink)}
.sec-mark{display:block;position:absolute;left:0;bottom:-7.4px;height:14px;width:auto;color:var(--cv-mark)}
.text{font-size:1.06rem;font-synthesis:none;overflow-wrap:break-word}
.vt{font-family:var(--bible);font-size:1.028em}
/* one verse per row (Biblion's study rows: padding .5rem, the number in the left gutter) */
.lines .text{padding-left:.85rem;line-height:1.5}
.lines .verse{display:block;position:relative;padding:.5rem;border-radius:.25rem;scroll-margin-top:1rem;transition:background-color .15s ease}
.lines .vn{position:absolute;left:-1.35rem;top:.5rem;min-width:1.7rem;padding:.1rem .2rem;font-size:.875em;line-height:1.5;text-align:center}
/* the flowing text (Biblion's reader view) */
body:not(.lines) .text{line-height:1.62;text-align:justify;hyphens:auto}
body:not(.lines) .vn{vertical-align:super;font-size:.62em;margin-right:.1em;padding:.15em .25em;line-height:1}
.vn{border:0;background:transparent;border-radius:.25rem;font-family:var(--ui);color:var(--muted);font-weight:400;transition:background-color .15s ease,color .15s ease}
.verse.has-notes .vn{color:var(--cv-violet);font-weight:500}
.verse.has-notes .vn::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.15em;border-radius:50%;background:currentColor;vertical-align:.35em}
.verse.has-notes.notes-done .vn{color:var(--muted)}
.w{cursor:pointer;border-radius:.15rem}
.w:hover{background-color:var(--sheet-hover)}
.w.hit{background-color:var(--hit)}
.w.add,.w.addg,.w.addr{font-style:italic}      /* translator's additions: {+} meaning, {g} grammar, {r} readability */
/* Strong's numbers (Biblion .strongnum: Prompt, upright, margin-left 2px, padding 0 1px) in its violet number colour */
.sn{display:none;font-family:var(--ui);font-style:normal;font-size:.62em;line-height:0;vertical-align:super;margin-left:2px;padding:0 1px;
  color:var(--cv-num);cursor:pointer}
body.strongs .sn{display:inline}
.sn:hover{color:var(--cv-violet);text-decoration:underline}
.tnv{display:none}
body.tnotes .tnv{display:block;margin:.35rem 0 .25rem;padding:.5rem .75rem;border-left:3px solid var(--cv-rule);border-radius:0 var(--radius) var(--radius) 0;
  background:color-mix(in srgb,var(--sheet-hover) 55%,transparent);font:400 .875rem/1.5 var(--ui);color:var(--ink);text-align:left}
body:not(.lines).tnotes .tnv{margin:.5rem 0}
.tnh{display:block;font:500 .68rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--cv-violet);margin-bottom:.15rem}
.tni{display:block;margin:.15rem 0}
.tni .meta{color:var(--cv-muted)}
.pt{border:0;background:transparent;cursor:pointer;vertical-align:super;line-height:0;font-size:.62em;padding:0 .2em}
.pt{display:none;color:var(--gold)}
body.points .pt{display:inline}
.verse.flash{background-color:var(--select);border-radius:var(--radius)}
.loading{font:1rem var(--ui)}

/* the end of the chapter: Bootstrap .btn-outline-secondary */
.ch-end{display:flex;gap:.75rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--cv-mark-line)}
.pager{flex:1;display:inline-flex;align-items:center;gap:.5rem;min-height:2.375rem;padding:.375rem .75rem;border:1px solid var(--cv-mark-line);
  border-radius:var(--radius);background:transparent;color:var(--ink);font:500 .78rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.08em;text-align:left;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease}
.pager:hover{background-color:var(--sheet-hover)}
.pager.next{justify-content:flex-end;text-align:right}
.pager>i{color:var(--gold)}
.pager[hidden]{display:inline-flex;visibility:hidden}

/* the footer (Biblion .site-footer / .site-footer-note) */
.foot{flex:none;width:100%;background:var(--bar);color:#9aa0ab;font-size:.75rem;line-height:1.5;
  padding:.5rem max(1rem,env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));text-align:center}

/* ---- the panel: a bottom sheet on phones, a card on tablets, a side column on wide screens ---- */
.panel{position:fixed;z-index:1040;display:flex;flex-direction:column;background:var(--panel);color:var(--panel-ink);
  border:1px solid var(--panel-line);box-shadow:var(--shadow);font-size:1rem;line-height:1.5;
  left:0;right:0;bottom:0;max-height:78vh;border-radius:var(--radius) var(--radius) 0 0;padding-bottom:env(safe-area-inset-bottom)}
.panel[hidden]{display:none}
.panel-head{position:relative;display:flex;align-items:center;gap:.5rem;padding:.75rem .5rem .5rem 1.25rem;border-bottom:1px solid var(--panel-line)}
.grip{position:absolute;left:50%;top:.35rem;width:2.5rem;height:.25rem;margin-left:-1.25rem;border-radius:.125rem;background:var(--panel-line)}
.panel-head h2{flex:1;margin:0;font:500 1.15rem/1.25 var(--ui)}
.panel .icon-btn{color:var(--panel-muted)}
.panel .icon-btn:hover{color:var(--panel-ink);background:var(--panel-hover)}
.panel-body{overflow:auto;padding:1rem 1.25rem 1.25rem;overscroll-behavior:contain}
.panel p{margin:0 0 .5rem}
.panel .meta{color:var(--panel-muted)}
.panel a{color:var(--panel-link)}
.panel ul{margin:.25rem 0 0;padding-left:1.25rem}
.panel li{margin:.15rem 0}
.panel .gk{font:1.35rem/1.3 var(--bible)}
.tr{font-family:"SDP Translit",var(--ui)}
.panel-body p{margin:0 0 .75rem}
.panel .dict{margin:.5rem 0;padding:.5rem .75rem;border-left:3px solid var(--panel-line);background:var(--panel-hover);border-radius:0 var(--radius) var(--radius) 0;font-size:.875rem}
.panel .sub{margin:.9rem 0 .15rem;font:500 .68rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--panel-link)}
.panel details{margin-top:.75rem}
.panel summary{cursor:pointer;color:var(--panel-link)}
/* the occurrences: two left-aligned columns, the verse and the words, no bullets */
.panel ul.occ{display:grid;grid-template-columns:max-content 1fr;column-gap:1rem;row-gap:.15rem;margin:.25rem 0 0;padding:0;list-style:none;font-size:.875rem}
.occ li{display:contents}
.occ li>*{margin:0;text-align:left}
.panel a.all-occ{text-decoration:none}
.notes{list-style:none;padding:0 !important;margin:.5rem 0}
.note{border-top:1px solid var(--panel-line);padding:.5rem 0}
.note.processed .nt{color:var(--panel-muted)}
.reply{margin-top:.35rem;padding:.25rem .75rem;border-left:3px solid var(--panel-link);font-size:.875rem}
.acts{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.acts button{padding:.25rem .5rem;border:1px solid var(--panel-line);border-radius:var(--radius);background:transparent;color:var(--panel-ink);
  font-size:.875rem;line-height:1.5;cursor:pointer}
.acts button:hover{background:var(--panel-hover)}
.acts button.primary{background:var(--cv-violet);color:#fff;border-color:var(--cv-violet)}
:root.night .acts button.primary{color:#1B212A}
#ntext{display:block;width:100%;min-height:6rem;margin-top:.5rem;padding:.375rem .75rem;font:400 1rem/1.5 var(--ui);background:var(--sheet);color:var(--ink);
  border:1px solid var(--panel-line);border-radius:var(--radius);resize:vertical}

@media (min-width:768px){
  .panel{left:50%;right:auto;bottom:3.5rem;width:min(36rem,calc(100% - 2rem));transform:translateX(-50%);max-height:70vh;border-radius:var(--radius);padding-bottom:0}
  .grip{display:none}
}
@media (min-width:1200px){
  .panel{left:auto;right:1rem;top:4.5rem;bottom:3.5rem;transform:none;width:25rem;max-height:none}
  body.panel-open main{margin-right:27rem;margin-left:max(1rem,calc((100% - 27rem - 50rem) / 2))}
}
@media (max-width:991.98px){.btn-label{display:none}}
@media (max-width:48rem){
  .sheet{padding:1.25rem 1rem 1.75rem}
  main{padding:.75rem .5rem 1.25rem}
}
@media (max-width:575.98px){
  .nav-in{gap:.5rem}
  #prevCh,#nextCh{display:none}
  .sel-book{flex:1 1 auto;max-width:none}
  .menu{position:fixed;left:.75rem;right:.75rem;top:calc(env(safe-area-inset-top) + 3.9rem);max-width:none}
}
/* touch screens: Biblion's sizes, but every target at least 44px (Fitts's law) */
@media (pointer:coarse){
  .icon-btn,.icon-btn.round{min-width:44px;height:44px}
  .icon-btn.round{width:44px}
  .sel select{height:44px}
  .menu button{min-height:44px}
  .pager{min-height:48px}
  .acts button{min-height:40px;padding:.25rem .75rem}
  .pt{padding:0 .45em}
  .lines .vn{min-width:2.2rem;min-height:2.2rem;left:-1.6rem;top:.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}
/* in rows, the open-point mark sits in the left gutter under the number (Biblion's .verse-marks),
   so every line of a verse starts at the same edge */
.lines .pt{position:absolute;left:-1.15rem;top:2rem;width:1.3rem;text-align:center;vertical-align:baseline;line-height:1;padding:0}

/* ---- the Bible commentary beside the text (toggle "Biblický komentár") ---- */
.sec-comm{display:none}
body.comm .sec-comm{display:block;margin:.75rem 0 1.25rem;padding:1rem 1.25rem;background:var(--panel);color:var(--panel-ink);
  border:1px solid var(--panel-line);border-radius:var(--radius);font:400 .9375rem/1.6 var(--ui);text-align:left;hyphens:manual}
.sec-comm h3{margin:0 0 .5rem;font:700 1.15rem/1.3 "Monarcha",Georgia,serif;font-synthesis:none}
.sec-comm p{margin:0 0 .6rem}
.sec-comm p:last-child{margin-bottom:0}
.sec-range{font:500 .68rem/1.5 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--panel-link);margin-bottom:.25rem}
body.comm.comm-avail .sec+.sec{margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--cv-mark-line)}
@media (min-width:992px){
  body.comm.comm-avail main{max-width:78rem}
  body.comm.comm-avail .sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);column-gap:2.5rem;align-items:start}
  body.comm.comm-avail .sec-comm{position:sticky;top:1rem;margin:0;max-height:calc(100dvh - 9rem);overflow:auto;
    background:transparent;border:0;border-left:3px solid var(--cv-rule);border-radius:0;padding:.35rem 0 .35rem 1.25rem;color:var(--ink)}
  body.comm.comm-avail .sec-range{color:var(--cv-violet)}
}
@media (min-width:1200px){
  body.comm.comm-avail.panel-open main{margin-right:27rem;margin-left:1rem}
}

/* ---- the interlinear view (Biblion's .interlinear / .ilx-*): word stacks above each verse's Slovak text ---- */
.ilx-words{display:none}
body.ilx .text{line-height:1.5;text-align:left;hyphens:manual}
body.ilx .verse{display:block;position:relative;margin:0 0 1.25rem;padding:.5rem}
body.ilx .vn{position:absolute;left:-1.35rem;top:.95rem;font-size:.875em;line-height:1.5;vertical-align:baseline}
body.ilx .ilx-words{display:flex;flex-wrap:wrap;gap:.1rem .3rem;font-family:var(--ui);font-size:1.08rem}
.ilx-w{display:flex;flex-direction:column;padding:.25rem .45rem;border-radius:.35rem;cursor:pointer}
.ilx-w:hover{background:rgba(0,0,0,.05)}
:root.night .ilx-w:hover{background:rgba(255,255,255,.06)}
.ilx-gr{font:400 1.25em/1.5 var(--bible)}
.ilx-tl{font-family:"SDP Translit",var(--ui);font-style:normal;font-weight:600;font-size:.8em;color:var(--muted)}
.ilx-gl{font-size:.85em;color:var(--ink)}
.ilx-gl.ilx-none{color:#adb5bd}
:root.night .ilx-gl.ilx-none{color:#6c7480}
.ilx-mo{font:700 .68em/1.5 ui-monospace,Consolas,"Roboto Mono",monospace;color:#8a6d3b;cursor:help}
:root.night .ilx-mo{color:#d6b77a}
.ilx-st{font-size:.8em;line-height:1;margin-top:.25rem}
body.ilx .ilx-st .sn{display:inline;font-size:1em;vertical-align:baseline;line-height:1;margin-left:0;padding:0}
/* the Slovak text under the stacks (Biblion's .ilx-en) */
body.ilx .vt{display:block;margin:.35rem 0 0 .45rem;color:var(--muted)}
body.ilx .vt .sn{display:none}
body.ilx .vt .w.hit{color:var(--ink)}
body.ilx .tnv{margin-left:.45rem}
@media (max-width:48rem){body.ilx .ilx-words{font-size:1rem}}
/* the interlinear needs room for its word stacks: the page is as wide as with the commentary beside it */
body.ilx main{max-width:78rem}
@media (min-width:1200px){body.ilx.panel-open main{margin-right:27rem;margin-left:1rem}}

/* ---- signed in or not: notes and the verse menu only for signed-in users ---- */
body:not(.signed-in) .only-in,body.signed-in .only-out{display:none !important}
.form{display:flex;flex-direction:column;gap:.75rem;max-width:22rem}
.form label{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem}
.form input{font:400 1rem/1.5 var(--ui);padding:.375rem .75rem;border:1px solid var(--panel-line);border-radius:var(--radius);
  background:var(--sheet);color:var(--ink)}
.form input:focus{outline:0;border-color:var(--panel-link);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--panel-link) 25%,transparent)}
.form-error{margin:0;color:#b02a37}
:root.night .form-error{color:#f1aeb5}
@media (pointer:coarse){.form input{min-height:44px}}

/* ---- the name in the navbar (Biblion's .navbar-brand: Monarcha Bold, whitesmoke) ---- */
/* "Biblia" in Monarcha Bold, and under it the translation's name in small capitals in Prompt */
.brand{grid-column:1;justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;color:whitesmoke;
  text-decoration:none;white-space:nowrap;padding:.15rem 0}
.brand-name{font:700 1.35rem/1 "Monarcha",Georgia,serif;font-synthesis:none}
.brand-sub{font:500 .6rem/1 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:#adb5bd}
.brand:hover,.brand:hover .brand-sub{color:#fff}
@media (max-width:767.98px){.brand-sub{display:none}}
@media (max-width:420px){.brand{display:none}.nav-in{grid-template-columns:0 minmax(0,1fr) 0;column-gap:0}}

/* ---- feedback banners: under the navbar, centred; dark like the bar, a coloured mark for the kind ---- */
.toasts{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 4rem);transform:translateX(-50%);z-index:1060;display:flex;
  flex-direction:column;align-items:center;gap:.5rem;width:min(28rem,calc(100vw - 1.5rem));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .5rem .55rem .9rem;border-radius:var(--radius);
  background:#212529;color:#f1f3f5;border:1px solid rgba(255,255,255,.12);border-left:4px solid #3fb07a;box-shadow:var(--shadow);
  font:400 .95rem/1.4 var(--ui);animation:toast-in .2s ease-out}
.toast>i{font-size:1rem;color:#3fb07a}
.toast>span{flex:1}
.toast-info{border-left-color:var(--gold-lift)}
.toast-info>i{color:var(--gold-lift)}
.toast-error{border-left-color:#e35d6a}
.toast-error>i{color:#e35d6a}
.toast-close{flex:none;border:0;background:transparent;color:#adb5bd;width:2rem;height:2rem;border-radius:var(--radius);cursor:pointer}
.toast-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.toast.leaving{opacity:0;transform:translateY(-.25rem);transition:opacity .2s ease,transform .2s ease}
@keyframes toast-in{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}
@media (pointer:coarse){.toast-close{width:44px;height:44px}}

/* ---- the "S poznámkami" reading mode: "Pridať poznámku" and everyone's notes under each verse ---- */
.vnotes{margin:.4rem 0 .6rem;font:400 .9rem/1.5 var(--ui);text-align:left;hyphens:manual}
/* "+" alone; on hover or keyboard focus it opens into "+ PRIDAŤ POZNÁMKU" */
.vnotes-add{display:inline-flex;align-items:center;height:1.75rem;min-width:1.75rem;padding:0 .5rem;border:1px solid var(--cv-rule);border-radius:999px;
  background:transparent;color:var(--cv-violet);font:500 .72rem/1 var(--ui);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.vnotes-add>i{width:.7rem;font-size:.7rem}
.vnotes-add-label{max-width:0;margin-left:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .22s ease,margin-left .22s ease,opacity .15s ease}
.vnotes-add:hover,.vnotes-add:focus-visible{background:var(--cv-violet);border-color:var(--cv-violet);color:#fff}
:root.night .vnotes-add:hover,:root.night .vnotes-add:focus-visible{color:#1B212A}
.vnotes-add:hover .vnotes-add-label,.vnotes-add:focus-visible .vnotes-add-label{max-width:12rem;margin-left:.4rem;opacity:1}
.vnote-list{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.vnote{padding:.45rem .75rem;border-left:3px solid var(--cv-violet);border-radius:0 var(--radius) var(--radius) 0;background:var(--panel);color:var(--panel-ink)}
.vnote.processed{border-left-color:var(--cv-rule)}
.vnote.processed .vnote-text{color:var(--panel-muted)}
.vnote-meta{font-size:.75rem;color:var(--panel-muted)}
.vnote-meta b{font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.95em;color:var(--panel-ink)}
.done-mark{color:#3fb07a}
.vnote .reply{margin-top:.3rem}
.vnote-acts{display:flex;gap:.5rem;align-items:center;margin-top:.3rem;flex-wrap:wrap}
.vnote-acts button{padding:.1rem .5rem;border:1px solid var(--panel-line);border-radius:var(--radius);background:transparent;color:var(--panel-ink);
  font:400 .8rem/1.5 var(--ui);cursor:pointer}
.vnote-acts button:hover{background:var(--panel-hover)}
.vnote-acts button.primary{background:var(--cv-violet);border-color:var(--cv-violet);color:#fff}
:root.night .vnote-acts button.primary{color:#1B212A}
.vnote-edit textarea{display:block;width:100%;min-height:5rem;padding:.375rem .75rem;font:400 .95rem/1.5 var(--ui);background:var(--sheet);color:var(--ink);
  border:1px solid var(--cv-rule);border-radius:var(--radius);resize:vertical}
.vnote-edit textarea:focus{outline:0;border-color:var(--cv-violet)}
@media (pointer:coarse){.vnotes-add{height:40px;min-width:40px;justify-content:center}.vnote-acts button{min-height:40px;padding-left:.75rem;padding-right:.75rem}}

/* ---- the rails (Biblion's .verse-rail): chapters left of the sheet, verses right of it ---- */
.rail{position:fixed;z-index:1025;width:30px;transform:translateY(-50%);height:min(var(--rail-max,70vh),calc(var(--rail-n,40) * .75rem));
  display:flex;flex-direction:column;justify-content:space-between;touch-action:none;cursor:pointer}
.rail[hidden]{display:none}
.rail-chapters{align-items:flex-start}
.rail-verses{align-items:flex-end}
.rail-tick{flex:0 0 auto;width:10px;height:2px;border-radius:1px;background-color:rgba(74,66,52,.55);pointer-events:none;transition:width .12s ease}
.rail-tick.is-here{width:16px;height:3px;background-color:var(--gold)}
.rail-tick.is-over-2{width:16px}
.rail-tick.is-over-1{width:22px}
.rail-tick.is-over{width:30px}
:root.night .rail-tick:not(.is-here){background-color:rgba(230,226,217,.38)}
:root.night .rail-tick.is-here{background-color:var(--gold-lift)}
.rail-label{position:absolute;transform:translateY(-50%);padding:.15rem .5rem;font:400 .8rem/1.4 var(--ui);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:#2c2926;background-color:#fdfcf9;border:1px solid rgba(138,131,120,.4);border-radius:var(--radius);
  box-shadow:0 .15rem .4rem rgba(0,0,0,.18);pointer-events:none}
.rail-verses .rail-label{right:36px}
.rail-chapters .rail-label{left:36px}
:root.night .rail-label{color:#e6e2d9;background-color:#1f2630;border-color:#2b333e}
@media (prefers-reduced-motion:reduce){.rail-tick{transition:none}}
/* the rails only where there is room beside the text: hidden on screens narrower than 900px */
@media (max-width:899.98px){.rail{display:none !important}}

/* ---- the drop cap (Biblion .dropcap): Monarcha Bold, violet (night: muted gold), an opening quote before it, smaller ---- */
.dropcap{float:left;display:flex;align-items:flex-start;padding:0 .5rem 0 0;font-size:4em;line-height:3.4rem;color:#5b4382}
:root.night .dropcap{color:#A4956A}
.dropcap-letter,.dropcap-quote{font-family:"Monarcha",Georgia,serif;font-weight:800;font-style:normal;font-synthesis:none;margin-top:.1rem}
.dropcap .dropcap-quote{font-size:.4em;margin-right:.1rem}
/* only in the Text reading mode */
body.ilx .dropcap,body.notesmode .dropcap{display:inline;float:none;padding:0;font-size:inherit;line-height:inherit;color:inherit}
body.ilx .dropcap-letter,body.ilx .dropcap-quote,body.notesmode .dropcap-letter,body.notesmode .dropcap-quote{font:inherit;margin:0}

/* bold text stops at 600 (a real Prompt 600 face; the browser's "bolder" would reach 700) */
b,strong{font-weight:600}

/* the brand mark: Biblion's scroll in its gold cut (the same drawing as the favicon), beside the name */
.brand{flex-direction:row;align-items:center;gap:.55rem}
.brand-mark{flex:none;display:block}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}

/* a link in a menu looks and behaves like its buttons */
.menu a[role="menuitem"]{display:flex;align-items:center;gap:.5rem;width:100%;padding:.25rem 1rem;color:var(--menu-ink);text-decoration:none;white-space:nowrap}
.menu a[role="menuitem"]:hover,.menu a[role="menuitem"]:focus-visible{background-color:var(--gold-wash);color:#fff;outline:none}
.menu a[role="menuitem"]>i:first-child{width:1.25em;color:#adb5bd}
.menu a[role="menuitem"]>span{flex:1}
@media (pointer:coarse){.menu a[role="menuitem"]{min-height:44px}}
body:not(.signed-in) .menu a.only-in{display:none}

/* ---- Systémový záznam (Biblion systemlog.php, simplified): tiles, then tables of counts per window ---- */
.sl-main{max-width:62rem}
.sl-back{color:#dee2e6;text-decoration:none}
.syslog .nav-center{justify-content:center}
.sl-tiles{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:0 0 .75rem}
.sl-num{font:600 1.5rem/1 var(--ui);font-variant-numeric:tabular-nums}
.sl-label{margin-top:.3rem;font:500 .7rem/1.3 var(--ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#6c757d)}
.sl-muted{padding-top:.75rem;border-top:1px solid var(--sheet-line);opacity:.75}
.sl-muted .sl-num{font-size:1rem}
.sl-details{margin:0 0 1rem}
.sl-details summary{cursor:pointer;color:var(--cv-violet)}
.sl-h{margin:2.25rem 0 .5rem;font:500 .75rem/1.4 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--cv-violet)}
.sl-scroll{overflow-x:auto}
.sl-table{width:100%;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.sl-table th,.sl-table td{padding:.35rem .5rem;border-bottom:1px solid var(--sheet-line);text-align:right;white-space:nowrap}
.sl-table th[scope="row"]{text-align:left;font-weight:400;white-space:normal}
.sl-table thead th{font:500 .68rem/1.3 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6c757d)}
.sl-sep th,.sl-sep td{border-top:2px solid var(--sheet-line)}
.sl-pct{font-size:.75rem;opacity:.7}
.sl-empty{opacity:.75}
.sl-cols{display:grid;grid-template-columns:1fr;column-gap:2rem}
@media (min-width:992px){.sl-cols{grid-template-columns:1fr 1fr}}

/* ---- the pages beside the chapter (includes/pages.php): home, a book, a verse; links that look like the pagers ---- */
a.pager{color:inherit;text-decoration:none}
.ch-end[hidden]{display:none}
body:not(.page-chapter) .text{padding-left:0;text-align:left;hyphens:manual;font-family:var(--ui);font-size:1rem;line-height:1.6}
.text a{color:var(--cv-violet)}
.lead{font-size:1.08rem;margin:0 0 1rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 1.25rem;padding:0;list-style:none;font:500 .72rem/1.4 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:.5rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--cv-violet);text-decoration:underline}
.home-points{margin:0 0 1rem;padding-left:1.1rem}
.home-points li{margin:.25rem 0}
.home-h,.vp-h{margin:2rem 0 .6rem;font:500 .75rem/1.4 var(--ui);text-transform:uppercase;letter-spacing:.09em;color:var(--cv-violet)}
.home-book h3,.hub-ch h2{margin:1rem 0 .5rem;font:700 1.15rem/1.3 "Monarcha",Georgia,serif;font-synthesis:none}
.home-book h3 a,.hub-ch h2 a{color:var(--ink);text-decoration:none}
.home-book h3 a:hover,.hub-ch h2 a:hover{color:var(--cv-violet)}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.75rem,1fr));gap:.4rem;margin:0;padding:0;list-style:none}
.ch-grid a{display:flex;align-items:center;justify-content:center;min-height:2.75rem;border:1px solid var(--cv-mark-line);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
.ch-grid a:hover,.ch-grid a:focus-visible{background:var(--sheet-hover);border-color:var(--gold)}
.famous,.vp-ctx,.vp-notes{margin:0;padding:0;list-style:none}
.famous li,.vp-ctx li{margin:0 0 .6rem}
.famous a{color:var(--ink);text-decoration:none}
.famous a b{color:var(--cv-violet);font-weight:600;margin-right:.35rem}
.famous a:hover{text-decoration:underline}
.hub-ch{padding-bottom:.75rem;border-bottom:1px solid var(--sheet-line)}
.hub-ch p{margin:0 0 .5rem;font-family:"Monarcha",Georgia,serif}
.hub-sec{margin:0;padding-left:1.1rem;font-size:.92rem}
.vp-quote{margin:0 0 1rem;padding:1rem 1.25rem;border-left:3px solid var(--gold);background:var(--sheet-hover);border-radius:0 var(--radius) var(--radius) 0}
.vp-quote blockquote{margin:0}
.vp-quote p{margin:0;font:400 1.3rem/1.55 "Monarcha",Georgia,serif;font-synthesis:none}
.vp-quote figcaption{margin-top:.5rem;font:500 .72rem/1.4 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vp-actions{margin:0 0 .5rem}
.vp-actions .pager{flex:none}
.vp-words{width:100%;border-collapse:collapse;font-size:.92rem}
.vp-words th,.vp-words td{padding:.35rem .5rem;border-bottom:1px solid var(--sheet-line);text-align:left;vertical-align:top}
.vp-words thead th{font:500 .68rem/1.3 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vp-words .gk,.vp-lex .gk{font-family:var(--bible);font-size:1.1em}
.vp-words .tr{font-family:"SDP Translit",var(--ui);font-weight:600;font-size:.9em;color:var(--muted)}
.vp-lex{margin:.75rem 0 0}
.vp-lex summary{cursor:pointer;color:var(--cv-violet)}
.vp-lex ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.92rem}
.vp-notes li{margin:0 0 .5rem;padding-left:.75rem;border-left:2px solid var(--cv-mark-line);font-size:.95rem}
.vp-comm h3{margin:0 0 .5rem;font:700 1.1rem/1.3 "Monarcha",Georgia,serif;font-synthesis:none}
.vp-comm p{margin:0 0 .75rem}
.vp-ctx li{font-family:"Monarcha",Georgia,serif}
.vp-ctx b{font-family:var(--ui);font-weight:600}
.vp-pager .pager{flex:1}
.foot-links{display:block;margin-bottom:.15rem}
.foot-links a{color:#c9ced6;text-decoration:none}
.foot-links a:hover{color:#fff;text-decoration:underline}

/* the transliteration on its own row under a Greek (or Hebrew) word in the panel, in Charis */
.gk-tl{display:block;margin-top:.1rem;font:600 .95rem/1.35 "SDP Translit",var(--ui);color:var(--panel-muted)}