/* Qola — single stylesheet, no external fonts or assets.
   System font stacks only: web fonts are a network dependency and a
   fingerprinting surface, and they break entirely offline. */
:root{
  --bg:#111418; --fg:#e8e6e1; --muted:#9aa3ad; --line:#262c33;
  --panel:#171b21; --accent:#c8a24a; --danger:#c25b4b;
  --danger-fg:#e07a6a;
  --size:19px; --lh:1.75;
}
:root[data-theme=light]{ --bg:#fbfaf7; --fg:#1b1b1a; --muted:#5d6470;
  --line:#e2ded4; --panel:#fff; --accent:#8a6a1f; }
:root[data-theme=sepia]{ --bg:#f4ecd8; --fg:#3b2f20; --muted:#6f6558;
  --line:#e0d4b8; --panel:#fdf6e5; --accent:#8a6a1f; }
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]):not([data-theme=sepia]){
    --bg:#fbfaf7; --fg:#1b1b1a; --muted:#5d6470; --line:#e2ded4;
    --panel:#fff; --accent:#8a6a1f; }
}
*{box-sizing:border-box}
/* The hidden attribute must beat any author display rule below
   (.panel sets display:flex, which would otherwise win). */
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",
  "Noto Sans Arabic","Noto Sans SC","Noto Sans Devanagari",sans-serif;
  -webkit-text-size-adjust:100%}
#boot{display:grid;place-items:center;align-content:center;gap:.4rem;
  height:100vh;padding:2rem;text-align:center;color:var(--muted)}
#boot .wide-btn{max-width:20rem;color:var(--fg)}
.grow{flex:1}
.muted{color:var(--muted);font-size:.85rem;line-height:1.5}

/* top bar */
#bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.25rem;
  padding:.5rem .6rem;padding-top:calc(.5rem + env(safe-area-inset-top));
  background:var(--bg);border-bottom:1px solid var(--line)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  border-radius:.5rem}
.icon{min-width:2.5rem;height:2.5rem;font-size:1.15rem;line-height:1}
.icon:hover,.ref:hover{background:var(--panel)}
.icon.tr{font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:0 .5rem;color:var(--accent);min-width:auto}
.ref{padding:.4rem .6rem;font-size:1rem;font-weight:600}

/* reader */
#reader{max-width:38rem;margin:0 auto;padding:1rem 1.1rem 4rem}
#reader:focus{outline:none}
#chapter-title{font-size:1.5rem;font-weight:600;margin:.5rem 0 1.25rem;
  letter-spacing:-.01em}
#verses{font-size:var(--size);line-height:var(--lh)}
.v{display:block;margin:0 0 .55rem}
.vn{display:inline-block;min-width:1.5em;font-size:.68em;font-weight:700;
  color:var(--accent);vertical-align:baseline;user-select:none}
[dir=rtl] .vn{margin-left:.35em;margin-right:0}
.v mark{background:var(--accent);color:#111;border-radius:2px}
#pager{display:flex;gap:.6rem;margin:2.5rem 0 1rem}
.page{flex:1;padding:.85rem;border:1px solid var(--line);color:var(--muted)}
.page:hover{background:var(--panel);color:var(--fg)}
#colophon{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}

/* panels */
#scrim{position:fixed;inset:0;background:#0009;z-index:30}
.panel{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(21rem,86vw);
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.panel.wide{width:min(30rem,94vw)}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;padding-top:calc(.9rem + env(safe-area-inset-top));
  border-bottom:1px solid var(--line)}
.panel-body{overflow:auto;padding:.9rem 1rem 2rem;-webkit-overflow-scrolling:touch}
.panel-body input[type=search]{width:100%;padding:.7rem;margin-bottom:.75rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:.5rem}
.item{display:block;width:100%;text-align:left;padding:.6rem .5rem;
  border-radius:.4rem;font-size:.95rem}
[dir=rtl] .item{text-align:right}
.item:hover{background:var(--bg)}
.item.on{color:var(--accent);font-weight:600}
.item small{display:block;color:var(--muted);font-size:.75rem}
.grp{margin:1rem 0 .35rem;font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
#chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.7rem,1fr));
  gap:.4rem}
#chapter-grid button{padding:.65rem 0;border:1px solid var(--line);
  text-align:center;font-variant-numeric:tabular-nums}
#chapter-grid button:hover{background:var(--bg);color:var(--accent)}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0}
.row select,.row input[type=range]{background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:.4rem;padding:.35rem}
.wide-btn{display:block;width:100%;padding:.8rem;border:1px solid var(--line);
  margin:.35rem 0 .25rem;text-align:center;text-decoration:none;color:inherit}
.wide-btn:hover{background:var(--bg)}
.wide-btn.danger{color:var(--danger-fg);border-color:var(--danger-fg)}
hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0 .9rem}
h3{font-size:.95rem;margin:0 0 .4rem}
.hit{display:block;width:100%;text-align:left;padding:.65rem .5rem;
  border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.5}
.hit b{display:block;color:var(--accent);font-size:.75rem;font-weight:700;
  margin-bottom:.15rem}
.fallback{max-width:34rem;margin:15vh auto;padding:1.5rem;line-height:1.6}
@media (min-width:900px){ :root{--size:20px} }
@media print{ #bar,#pager,.panel,#scrim,#colophon{display:none!important}
  #reader{max-width:none} }
.notice{border:1px solid var(--danger-fg);color:var(--danger-fg);
  border-radius:.4rem;padding:.55rem .6rem;margin:0 0 .6rem}

/* read-aloud */
#audio{position:sticky;bottom:0;z-index:19;display:flex;align-items:center;gap:.25rem;
  padding:.4rem .6rem;padding-bottom:calc(.4rem + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line)}
#audio .big{font-size:1.5rem;min-width:3rem}
#au-status{font-size:.8rem;padding:0 .4rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.v.speaking{background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-radius:.4rem;margin-left:-.4rem;margin-right:-.4rem;padding:.1rem .4rem}
.v mark.w{background:var(--accent);color:#111;border-radius:2px}
.v .gap{color:var(--muted);font-style:italic}
#voice-list .item.on{font-weight:600}
#voice-list small{display:block;font-weight:400}
#btn-play.on{color:var(--accent)}
.item.off{opacity:.55;cursor:default}.item.off:hover{background:none}