/* Elyoxe — the Quran pages. Studio identity (paper, ink, saffron, 1px rules, no radius or
   shadow) with a warmer page for the text itself, and a night theme the reader switches. */
@font-face{font-family:"Amiri Quran";src:url("/quran/assets/AmiriQuran.woff2") format("woff2");font-display:block}
:root{--qs:1.75rem;--page:#FBF7EE;--qink:#141A17;--frame:#8F5400}
:root[data-theme="dark"]{--paper:#141A17;--paper-2:#1C2420;--ink:#EDE6D6;--stone:#A7A597;--stone-lit:#5F5E57;--rule:#2E3833;--page:#101512;--qink:#EDE6D6;--frame:#C9A15A;--saffron:#F0BC5A;--saffron-deep:#F0BC5A;color-scheme:dark}
:root[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
:root[data-theme="dark"] .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:root[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink)}
:root[data-theme="dark"] label.f input{background:var(--paper-2);color:var(--ink);border-color:var(--rule)}

/* index */
.jump{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin-block:1.75rem 1rem}
.jump label.f{flex:1 1 18rem}
.jump .err{flex-basis:100%}
.cont{margin-block:0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--frame);font-size:1.0625rem}
.cont a{color:var(--saffron);font-weight:600}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-block-start:1px solid var(--rule);border-inline-start:1px solid var(--rule);margin-block-start:1.5rem}
.tabs > *{border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule)}
.slist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(17rem,100%),1fr));border-inline-start:1px solid var(--rule)}
.sr{display:grid;grid-template-columns:2.5rem 1fr auto;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;padding:.75rem 1rem;border-block-end:1px solid var(--rule);border-inline-end:1px solid var(--rule);text-decoration:none}
.sr:hover{background:var(--paper-2)}
.sr .sn{grid-row:span 2;color:var(--saffron);font-size:.9375rem}
.sr b{font-weight:600}
.sr .meta{color:var(--stone);font-size:.8125rem}
.sr .pg{grid-row:1;grid-column:3}
.slist .hint{padding:1rem}

/* sura header and toolbar */
.shead h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem)}
.shead .meta{color:var(--stone);margin:.25rem 0 0}
.qbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-block:1.5rem 0;align-items:center}
.qbar .mode{display:grid;grid-template-columns:auto auto;border:1px solid var(--rule);border-inline-end:0;border-block-end:0}
.qbar .mode .opt{padding:.55rem 1rem;text-decoration:none;border-inline-end:1px solid var(--rule);border-block-end:1px solid var(--rule)}
.qtools{display:flex;gap:.35rem}
.qtools .icon{min-inline-size:2.75rem;font-size:.9375rem}
.qbar + .jump{margin-block:1rem 0}

/* the text */
.mushaf{background:var(--page);color:var(--qink);border:1px solid var(--frame);outline:1px solid var(--frame);outline-offset:4px;margin-block:1.75rem;padding:clamp(1rem,.5rem + 3vw,2.5rem)}
.qt{font-family:"Amiri Quran",serif;font-size:var(--qs);line-height:2.25;text-align:justify;text-align-last:center;margin:0;word-spacing:.05em}
.stitle{font-family:"Amiri Quran",serif;text-align:center;border:1px solid var(--frame);padding:.2rem 1rem;margin-block:.5rem 1rem;font-size:calc(var(--qs) * .8);color:var(--frame)}
.bas{font-family:"Amiri Quran",serif;text-align:center;font-size:var(--qs);margin-block-end:.5rem}
.an{font-family:"Amiri Quran",serif;color:var(--frame);white-space:nowrap;font-size:.9em;unicode-bidi:isolate}
.ay{cursor:pointer;transition:background .2s var(--ease)}
@media (hover:hover){.ay:hover{background:color-mix(in srgb,var(--frame) 8%,transparent)}}
.ay.on{background:color-mix(in srgb,var(--frame) 18%,transparent)}
.ay.hit{background:color-mix(in srgb,var(--frame) 28%,transparent)}
.snav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-block:1rem 0}
.snav a{text-decoration:none;color:var(--stone)}
.snav a:hover{color:var(--ink)}

/* the reader: one mushaf page at a time */
.reader{display:grid;grid-template-columns:auto minmax(0,44rem) auto;justify-content:center;align-items:center;gap:.5rem;touch-action:pan-y}
.reader .mushaf{margin-block:1.25rem;min-block-size:70vh;display:flex;flex-direction:column}
.phead{display:flex;justify-content:space-between;font-family:var(--font);font-size:.8125rem;color:var(--frame);border-block-end:1px solid var(--frame);padding-block-end:.35rem;margin-block-end:.75rem}
.pfoot{margin-block-start:auto;text-align:center;font-size:.875rem;color:var(--frame);padding-block-start:.75rem}
.turn{inline-size:2.75rem;block-size:5rem;border:1px solid var(--rule);background:transparent;color:var(--ink);font-size:1.75rem;cursor:pointer}
.turn:hover{background:var(--paper-2)}
.turn:disabled{opacity:.3;cursor:default}
.swipe{text-align:center}
@media (max-width:640px){
  .reader{grid-template-columns:minmax(0,1fr)}
  .reader .turn{display:none}
  .reader .mushaf{min-block-size:auto;padding:1rem .9rem;outline-offset:3px}
  .qt{line-height:2.1}
}

/* the ayah action bar */
.dock{position:fixed;inset-inline:0;inset-block-end:0;z-index:5}
.qact{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:.75rem 1rem;background:var(--paper);border-block-start:1px solid var(--ink)}
.dock > :last-child:not([hidden]){padding-block-end:calc(.75rem + env(safe-area-inset-bottom))}
.qact[hidden]{display:none}
.qact .btn{min-block-size:2.5rem}
.credit a{color:inherit}

/* the recitation player */
.player{background:var(--paper);border-block-start:1px solid var(--ink);padding:.6rem 1rem}
.player[hidden]{display:none}
.pl-row{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:center;justify-content:center;max-inline-size:var(--wide);margin-inline:auto}
.pl-range{padding-block-start:.6rem;margin-block-start:.6rem;border-block-start:1px solid var(--rule)}
.pl-range[hidden]{display:none}
.pl-main{min-inline-size:3rem;min-block-size:3rem;font-size:1.1rem;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pl-now{min-inline-size:8rem;font-weight:600}
.pl-f{display:flex;gap:.4rem;align-items:center;font-size:.8125rem;color:var(--stone)}
.pl-f select,.pl-range input{min-block-size:2.25rem;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);padding-inline:.4rem;font:inherit;font-size:.875rem}
.pl-range input{inline-size:4.5rem}
.ay.play{background:color-mix(in srgb,var(--verdigris,#1B6F5A) 16%,transparent)}
#listen{min-inline-size:auto;padding-inline:.75rem}
body.has-player main{padding-block-end:9rem}

/* the tafsir panel */
.tafsir{background:var(--paper);border-block-start:1px solid var(--ink);padding:.75rem 1rem;max-block-size:42vh;overflow:auto}
.tafsir[hidden]{display:none}
.tf-head{display:flex;gap:.75rem;align-items:center;max-inline-size:var(--measure);margin-inline:auto}
.tf-head .icon{margin-inline-start:auto}
.tafsir p{max-inline-size:var(--measure);margin:.5rem auto 0;font-size:1.0625rem;line-height:2}

/* search */
.results{display:grid;margin-block-start:1rem;border-block-start:1px solid var(--rule)}
.res{display:grid;gap:.25rem;padding:1rem 0;border-block-end:1px solid var(--rule);text-decoration:none}
.res .rref{color:var(--saffron);font-size:.875rem;font-weight:600}
.res .qt{font-size:calc(var(--qs) * .8);text-align:start;text-align-last:auto;line-height:2}
.res:hover .rref{text-decoration:underline}
.bar nav a{white-space:nowrap}

/* khatma */
.kh{margin-block-start:1.5rem}
.khead{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-block-start:1.75rem}
.khead h2{margin:.15rem 0 0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.kpct{font-size:2rem;color:var(--saffron)}
.kbar{block-size:.5rem;background:var(--paper-2);border:1px solid var(--rule);margin-block:.75rem}
.kbar i{display:block;block-size:100%;background:var(--saffron)}
.kstat{margin:.25rem 0 1rem}
.kstat.late{color:var(--danger)}
.kstat.ahead,.kstat.done{color:var(--verdigris)}
.ktoday{display:grid;border:1px solid var(--ink)}
.kslot{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.75rem;align-items:center;padding:.85rem 1.25rem;border-block-end:1px solid var(--rule);text-decoration:none}
.kslot:last-child{border-block-end:0}
.kslot:hover{background:var(--paper-2)}
.kslot b{font-weight:600}
.kslot .meta{color:var(--stone);font-size:.875rem}
.kslot.read{opacity:.5}
.kslot.read b::after{content:" ✓";color:var(--verdigris)}
.kupto{display:flex;gap:.5rem;align-items:center;color:var(--stone);font-size:.875rem}
.kupto input{inline-size:5rem;min-block-size:2.75rem;border:1px solid var(--rule);background:var(--paper-2);color:var(--ink);padding-inline:.5rem;font:inherit}
.kall summary{cursor:pointer;color:var(--stone);margin-block:1rem}
.ktable{display:grid;grid-template-columns:auto auto 1fr;gap:.35rem 1.25rem;font-size:.9375rem}
.ktable .today{color:var(--saffron);font-weight:600}
@media (max-width:640px){.kslot{grid-template-columns:1fr auto;padding-inline:1rem}.kslot .pt{grid-column:1 / -1}}

/* install */
.install{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 1.25rem;border:1px solid var(--rule);margin-block:0 1.5rem}
.install b{display:block}

/* one ayah */
.mushaf.one .qt{text-align:center;text-align-last:center;font-size:calc(var(--qs) * 1.2)}
.ayact{margin-block:0 1.5rem}
.tfs{max-inline-size:var(--measure)}
.tfs h2{font-size:1.25rem;margin-block:1.5rem .5rem}
.tfs p{font-size:1.125rem;line-height:2.1;margin:0}

/* notes: a quiet mark, a card on demand */
.qn{font-family:var(--font);font-size:.62em;line-height:1;vertical-align:super;border:0;background:none;color:var(--frame);cursor:pointer;padding:0 .15em;opacity:.85}
.qn:hover,.qn:focus-visible{opacity:1;outline:1px solid var(--frame)}
.shead h1 .qn{font-size:.5em;vertical-align:middle;margin-inline-start:.35em}
.stitle .qn{font-size:.7em;vertical-align:middle}
#qn-body .note + .note{border-block-start:1px solid var(--rule);margin-block-start:.75rem;padding-block-start:.75rem}
.note h3{font-size:1.0625rem;margin:0 0 .35rem;font-weight:600}
.ntag{font-size:.75rem;font-weight:400;border:1px solid var(--frame);color:var(--frame);padding:0 .35rem;margin-inline-end:.35rem}
.n-fact .ntag{border-color:var(--stone);color:var(--stone)}
.note blockquote{margin:0;padding-inline-start:.85rem;border-inline-start:3px solid var(--frame);line-height:2}
.note p{margin:.25rem 0 0;line-height:1.9}
.note .nsrc{color:var(--frame);font-size:.875rem}
.notes{max-inline-size:var(--measure);margin-block:0 1rem}
.notes h2{font-size:1.25rem;margin-block:1.5rem .5rem}
.notes .note{border:1px solid var(--rule);padding:1rem;margin-block-end:.75rem}

/* adhkar */
.adlist{display:grid;gap:.75rem;margin-block-start:1rem}
.adcard{border:1px solid var(--rule);background:var(--page);padding:1rem 1.25rem;display:grid;gap:.6rem}
.adcard.done{opacity:.5}
.adcard .adt{font-family:"Amiri Quran","Amiri",serif;font-size:calc(var(--qs) * .82);line-height:2.1}
.adcard .adq{font-family:"Amiri Quran",serif;font-size:calc(var(--qs) * .8);line-height:2.1}
.adcard .adq b{display:block;font-family:var(--font);font-size:.875rem;color:var(--frame);font-weight:600}
.adcard .adn{font-size:.9rem;color:var(--stone)}
.adrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.adsrc{font-size:.8125rem;color:var(--frame)}
.adcount{min-inline-size:6.5rem;min-block-size:3rem;font-size:1.1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;font-family:var(--mono)}
.adcard.done .adcount{background:transparent;color:var(--ink)}
.adcard details summary{cursor:pointer;color:var(--stone);font-size:.875rem}