/* ---------- fonts ---------- */
@font-face { font-family:"Frank Ruhl Libre"; src:url(fonts/frank-ruhl-libre-500.woff2) format("woff2");
             font-weight:500; font-display:swap; }
@font-face { font-family:"Frank Ruhl Libre"; src:url(fonts/frank-ruhl-libre-700.woff2) format("woff2");
             font-weight:700; font-display:swap; }
@font-face { font-family:"Noto Serif Hebrew"; src:url(fonts/noto-serif-hebrew-400.woff2) format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"Noto Serif Hebrew"; src:url(fonts/noto-serif-hebrew-700.woff2) format("woff2");
             font-weight:700; font-display:swap; }

/* ---------- themes ---------- */
:root {
  --bg:#faf8f4; --fg:#1d1a16; --muted:#6d675e; --rule:#d9d3c8;
  --chrome:#f1ede5; --accent:#7a5c2e; --card:#ffffff;
  --heb-size:28px; --eng-size:13px; --space:1.25; --heb-font:"Frank Ruhl Libre";
}
body[data-theme="sepia"] { --bg:#f5ecd9; --fg:#4a3826; --muted:#8a7457; --rule:#dcCfb4;
  --chrome:#eee2c8; --accent:#8a5a1e; --card:#faf3e3; }
body[data-theme="dark"]  { --bg:#20242b; --fg:#e7e4de; --muted:#9aa0a8; --rule:#3a4048;
  --chrome:#272c34; --accent:#d3b06c; --card:#272c34; }
body[data-theme="night"] { --bg:#000000; --fg:#c9c6c0; --muted:#7d7a74; --rule:#26262a;
  --chrome:#0d0d10; --accent:#b89858; --card:#0d0d10; }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  transition:background .25s,color .25s; }

/* ---------- chrome ---------- */
#topbar { position:fixed; top:0; left:0; right:0; height:52px; display:flex; align-items:center;
  background:var(--chrome); border-bottom:1px solid var(--rule); z-index:30;
  padding:0 6px; padding-top:env(safe-area-inset-top); }
#title-area { flex:1; text-align:center; overflow:hidden; cursor:pointer; }
#bar-group { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
#bar-title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn { background:none; border:none; color:var(--fg); font-size:18px; width:44px; height:44px;
  border-radius:10px; cursor:pointer; }
.iconbtn:hover { background:var(--rule); }

#navbar { position:fixed; bottom:0; left:0; right:0; height:48px; display:flex; align-items:center;
  justify-content:space-between; background:var(--chrome); border-top:1px solid var(--rule); z-index:30;
  padding:0 10px; padding-bottom:env(safe-area-inset-bottom); }
.navbtn { background:none; border:1px solid var(--rule); color:var(--fg); border-radius:10px;
  padding:7px 16px; font-size:14px; cursor:pointer; }
.navbtn:disabled { opacity:.35; }
#nav-pos { font-size:11px; color:var(--muted); }

/* ---------- drawers ---------- */
.drawer { position:fixed; top:0; bottom:0; left:0; width:min(340px,88vw); background:var(--card);
  border-right:1px solid var(--rule); z-index:50; transform:translateX(-102%);
  transition:transform .22s ease; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top); }
.drawer.right { left:auto; right:0; border-right:none; border-left:1px solid var(--rule);
  transform:translateX(102%); overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--rule); }
#toc-filter { flex:1; padding:8px 10px; border:1px solid var(--rule); border-radius:8px;
  background:var(--bg); color:var(--fg); font-size:14px; }
#toc-list { overflow-y:auto; flex:1; padding:6px 0 40px; }
.toc-group { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:14px 16px 4px; }
.toc-item { display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:none; border:none; color:var(--fg); padding:9px 16px; font-size:14.5px; cursor:pointer; }
.toc-item:hover { background:var(--rule); }
.toc-item.active { color:var(--accent); font-weight:600; }
.toc-item .heb { font-family:var(--heb-font); font-size:15px; color:var(--muted); }
#scrim { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40; opacity:0;
  pointer-events:none; transition:opacity .2s; }
#scrim.on { opacity:1; pointer-events:auto; }

/* ---------- settings ---------- */
.setting { padding:12px 16px; border-bottom:1px solid var(--rule); }
.setting > label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; }
.seg { display:flex; gap:6px; flex-wrap:wrap; }
.seg button { flex:1; min-width:64px; padding:8px 6px; border:1px solid var(--rule); background:var(--bg);
  color:var(--fg); border-radius:9px; font-size:13px; cursor:pointer; }
.seg button.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.slider input { width:100%; accent-color:var(--accent); }
.toggles .tog { display:flex; align-items:center; gap:10px; font-size:14px; padding:7px 0; }
.toggles input { width:18px; height:18px; accent-color:var(--accent); }
button.wide { width:100%; padding:10px; border:1px solid var(--rule); background:var(--bg);
  color:var(--fg); border-radius:9px; cursor:pointer; }

/* ---------- content ---------- */
#content { max-width:46rem; margin:0 auto; padding:68px 18px 80px; outline:none; }
h1.sec { text-align:center; font-size:19px; letter-spacing:.12em; margin:26px 0 6px;
  font-weight:600; }
h2.sub { text-align:center; font-size:13px; letter-spacing:.14em; color:var(--muted);
  font-weight:600; margin:22px 0 4px; text-transform:uppercase; }
.rule-orn { text-align:center; color:var(--muted); margin:4px 0 14px; letter-spacing:.4em; }
p.instr { font-size:calc(var(--eng-size) * 0.96); line-height:1.5; color:var(--muted);
  text-align:justify; margin:10px 0; }
p.instr .h { font-family:var(--heb-font); color:var(--fg); }

.prayer { margin:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:12px 2px 8px; }
.inter { direction:rtl; text-align:justify; }
.unit { display:inline-block; text-align:center; vertical-align:top; margin:0 5px 12px; }
.hw { display:block; font-family:var(--heb-font); font-weight:500;
  font-size:var(--heb-size); line-height:calc(var(--space) + 0.12); }
.hw b { font-weight:700; }
.gl { display:block; font-size:var(--eng-size); color:var(--muted); margin-top:2px;
  max-width:16em; line-height:1.25; direction:ltr; }
.gl .mk { color:var(--accent); }
body[data-marks="0"] .gl .mk { display:none; }

/* linear (book-style) layout */
.linear .row { display:flex; gap:14px; align-items:baseline; margin:0 0 calc(var(--space) * 6px); }
.linear .le { flex:1; text-align:right; font-size:calc(var(--eng-size) + 2px); line-height:1.45;
  font-family:Georgia,"Times New Roman",serif; }
.linear .lh { flex:1.05; direction:rtl; text-align:left; font-family:var(--heb-font);
  font-size:calc(var(--heb-size) * 0.82); line-height:calc(var(--space) + 0.15); }

/* hebrew-only / english-only */
.hebflow { direction:rtl; font-family:var(--heb-font); font-size:var(--heb-size);
  line-height:calc(var(--space) + 0.35); text-align:justify; }
.engflow { font-size:calc(var(--eng-size) + 3px); line-height:calc(var(--space) + 0.35);
  font-family:Georgia,"Times New Roman",serif; text-align:justify; }

.hebpar { direction:rtl; font-family:var(--heb-font); font-size:calc(var(--heb-size) * 0.92);
  line-height:calc(var(--space) + 0.45); text-align:justify; margin:12px 0; }

.fnwrap { margin:8px 0 14px; }
.fnwrap summary { font-size:11.5px; color:var(--muted); cursor:pointer; }
.fnote { font-size:12px; color:var(--muted); padding:6px 10px; border-left:2px solid var(--rule);
  margin:6px 0; line-height:1.45; }
sup { font-size:65%; color:var(--accent); }
.imgpage { text-align:center; margin:16px 0; }
.imgpage img { max-width:100%; border:1px solid var(--rule); border-radius:6px; }
body[data-theme="dark"] .imgpage img, body[data-theme="night"] .imgpage img { filter:invert(.92) hue-rotate(180deg); }

.secfoot { text-align:center; color:var(--muted); font-size:12px; margin:34px 0 10px; }
@media (max-width:560px){ .linear .row { flex-direction:column; gap:2px; }
  .linear .le { text-align:left; } }