/* quran.rehanify.com reader
   The palette and the shapes are the Android app's own design tokens, so the
   phone and the laptop are recognisably the same product. */

:root{
  --paper:#F4F1EA; --card:#FEFDFB; --ink:#1C1A16; --muted:#5F5A50;
  --faint:#8B857A; --accent:#0E7C66; --accentSoft:#D7E8E2; --deep:#0A5647;
  --line:rgba(28,26,22,.09); --sunk:rgba(28,26,22,.045);
  --shadow:0 12px 26px -20px rgba(28,26,22,.22);
  --shadowUp:0 -10px 30px -18px rgba(28,26,22,.28);
  --arabic:30px; --trans:17px;
  --bar:60px; --side:290px;
}
:root[data-theme="dark"]{
  --paper:#15130F; --card:#1E1B16; --ink:#F2EDE3; --muted:#A9A296;
  --faint:#7E786D; --accent:#3DBB9E; --accentSoft:#1B3A33; --deep:#0E2C26;
  --line:rgba(242,237,227,.10); --sunk:rgba(242,237,227,.05);
  --shadow:0 12px 26px -20px rgba(0,0,0,.7);
  --shadowUp:0 -10px 30px -18px rgba(0,0,0,.75);
}

@font-face{font-family:'Inter';src:url('/assets/Inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/Inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/Inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/Inter-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'QuranIndoPak';src:url('/assets/Quran.woff2') format('woff2');font-weight:400;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── top bar ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;
  align-items:center;gap:10px;padding:0 14px;background:var(--paper);
  border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:9px;font-weight:700;
  letter-spacing:-.4px;font-size:1.02rem;color:var(--ink);flex:none}
.top .brand img{width:30px;height:30px;border-radius:9px}
.top .sp{flex:1}
.iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--muted);flex:none}
.iconbtn:hover{background:var(--sunk);color:var(--ink)}
.iconbtn.on{background:var(--accentSoft);color:var(--accent)}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.getapp{display:inline-flex;align-items:center;gap:8px;background:var(--accent);
  color:#FEFDFB;border-radius:999px;padding:9px 16px;font-weight:600;font-size:.88rem;
  flex:none}
.getapp:hover{filter:brightness(1.07)}
.getapp svg{width:16px;height:16px;fill:currentColor}
@media (max-width:820px){.getapp span{display:none}.getapp{padding:9px 12px}}
#menuBtn{display:none}
@media (max-width:1000px){#menuBtn{display:grid}}

/* ── shell ───────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);
  align-items:start}
@media (max-width:1000px){.shell{grid-template-columns:minmax(0,1fr)}}

/* ── surah rail ──────────────────────────────────────────────────────── */
.rail{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  background:var(--paper)}
.rail .find{padding:12px 12px 8px}
.rail .find input{width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;font:inherit;font-size:.92rem;color:var(--ink)}
.rail .find input::placeholder{color:var(--faint)}
.rail .list{overflow-y:auto;padding:0 8px 16px;scrollbar-width:thin}
.slink{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;
  color:var(--ink)}
.slink:hover{background:var(--sunk)}
.slink[aria-current="page"]{background:var(--accentSoft)}
.slink .n{width:30px;height:30px;flex:none;border-radius:10px;background:var(--sunk);
  display:grid;place-items:center;font-size:.78rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.slink[aria-current="page"] .n{background:var(--accent);color:#FEFDFB}
.slink .nm{flex:1;min-width:0}
.slink .nm b{display:block;font-size:.93rem;font-weight:600;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slink .nm small{display:block;font-size:.76rem;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slink .ar{font-family:QuranIndoPak,serif;font-size:1.05rem;color:var(--muted);
  flex:none;line-height:1.8}

/* Fixed at every width so it never becomes a grid item and steals the reading
   column's track. */
.scrim{position:fixed;inset:var(--bar) 0 0;background:rgba(10,20,17,.4);z-index:44;
  opacity:0;pointer-events:none;transition:opacity .2s;display:none}
@media (max-width:1000px){
  .rail{position:fixed;inset:var(--bar) auto 0 0;width:min(320px,86vw);z-index:45;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:var(--shadow)}
  .rail.open{transform:none}
  .scrim{display:block}
  .scrim.on{opacity:1;pointer-events:auto}
}

/* ── reading column ──────────────────────────────────────────────────── */
.read{padding:20px 26px 130px;max-width:1140px;margin:0 auto;width:100%}
@media (max-width:600px){.read{padding:14px 14px 140px}}

.shead{background:var(--card);border-radius:24px;padding:22px 26px;
  box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}
.shead .over{font-size:.72rem;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent)}
.shead h1{font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-1.2px;font-weight:700;
  margin:6px 0 2px;line-height:1.1}
.shead .mean{color:var(--muted);font-size:1rem}
.shead .arname{font-family:QuranIndoPak,serif;font-size:2.4rem;line-height:1.9;
  color:var(--ink);position:absolute;right:26px;top:18px;opacity:.9}
@media (max-width:560px){.shead .arname{position:static;font-size:2rem;
  display:block;margin-top:6px}}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fact{background:var(--sunk);border-radius:999px;padding:5px 13px;font-size:.8rem;
  color:var(--muted);font-weight:500}

.bism{text-align:center;font-family:QuranIndoPak,serif;
  font-size:calc(var(--arabic) * .92);line-height:1.9;color:var(--ink);
  padding:6px 0 12px;direction:rtl}

.ayah{background:var(--card);border-radius:22px;padding:14px 22px 16px;
  box-shadow:var(--shadow);margin-bottom:10px;scroll-margin-top:calc(var(--bar) + 14px)}
.ayah.playing{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.ayah .row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ayah .no{min-width:34px;height:28px;padding:0 10px;border-radius:9px;
  background:var(--accentSoft);color:var(--accent);display:grid;place-items:center;
  font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.ayah .tools{margin-left:auto;display:flex;gap:2px}
.ayah .tools .iconbtn{width:34px;height:34px;border-radius:10px}
.ayah .tools .iconbtn svg{width:17px;height:17px}
.ar{font-family:QuranIndoPak,serif;direction:rtl;text-align:right;
  font-size:var(--arabic);line-height:2.0;color:var(--ink)}
.tr{font-size:var(--trans);color:var(--muted);margin-top:10px;line-height:1.7}
.tr[dir="rtl"]{text-align:right;font-size:calc(var(--trans) * 1.06);line-height:2}
.tlit{font-size:calc(var(--trans) * .92);color:var(--faint);margin-top:8px;
  font-style:italic}
/* The font's own ayah-number glyphs are blank, so the page draws the medallion.
   Its digits are Latin because the Arabic face has no digit outlines. */
.ar .end{display:inline-grid;place-items:center;width:1.5em;height:1.5em;
  border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);
  font-family:Inter,sans-serif;font-size:.36em;font-weight:600;line-height:1;
  vertical-align:.55em;margin-inline-start:.5em;font-variant-numeric:tabular-nums}
.ar w{cursor:pointer;border-radius:8px;padding:0 2px;transition:background .12s}
.ar w:hover{background:var(--accentSoft)}
.ar w.on{background:var(--accentSoft);color:var(--accent)}
.wbw{display:flex;flex-wrap:wrap;gap:8px;direction:rtl;justify-content:flex-end;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.wbw span{background:var(--sunk);border-radius:12px;padding:7px 11px;text-align:center;
  cursor:pointer}
.wbw span:hover{background:var(--accentSoft)}
.wbw b{display:block;font-family:QuranIndoPak,serif;font-size:1.3rem;line-height:1.85;
  font-weight:400}
.wbw i{display:block;font-size:.72rem;color:var(--faint);font-style:normal;
  direction:ltr;letter-spacing:.2px}

/* On a wide screen the Arabic sits right and the translation sits left, which
   left a hole down the middle of every card. Above this width the pair runs
   side by side instead and the card is full. */
@media (min-width:1400px){
  .read{max-width:1400px}
  .ayah{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;
    grid-template-areas:"row row" "tr ar" "tlit ar" "wbw wbw"}
  .ayah .row{grid-area:row}
  .ayah .ar{grid-area:ar;align-self:start}
  .ayah .tr{grid-area:tr;margin-top:0;align-self:start}
  .ayah .tlit{grid-area:tlit}
  .ayah .wbw{grid-area:wbw}
}

.jump{display:flex;gap:12px;margin-top:18px}
.jump a{flex:1;background:var(--card);border-radius:18px;padding:16px 18px;
  box-shadow:var(--shadow);color:var(--ink)}
.jump a small{display:block;font-size:.72rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--faint);font-weight:600}
.jump a b{font-size:1.02rem;font-weight:600;letter-spacing:-.3px}
.jump a.next{text-align:right}

/* ── player ──────────────────────────────────────────────────────────── */
.player{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
  border-top:1px solid var(--line);box-shadow:var(--shadowUp);
  padding:10px 16px;display:none;align-items:center;gap:14px}
.player.on{display:flex}
.player .what{min-width:0;flex:1}
.player .what b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .what small{color:var(--faint);font-size:.78rem}
.player .ctrl{display:flex;align-items:center;gap:4px}
.player .big{width:46px;height:46px;border-radius:999px;background:var(--accent);
  color:#FEFDFB}
.player .big:hover{filter:brightness(1.07)}
.player .big svg{width:22px;height:22px}
.player progress{flex:1;height:4px;border:0;border-radius:999px;
  background:var(--sunk);max-width:340px}
.player progress::-webkit-progress-bar{background:var(--sunk);border-radius:999px}
.player progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
.player progress::-moz-progress-bar{background:var(--accent);border-radius:999px}
@media (max-width:700px){.player progress{display:none}}

/* ── panels (settings, search, jump) ─────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.on{display:block}
.sheet .veil{position:absolute;inset:0;background:rgba(10,20,17,.45)}
.sheet .box{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);
  background:var(--paper);box-shadow:var(--shadow);display:flex;flex-direction:column}
.sheet.mid .box{inset:auto 50% auto 50%;top:8vh;transform:translateX(50%);
  bottom:auto;max-height:84vh;border-radius:22px;width:min(680px,94vw)}
.sheet .hd{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.sheet .hd b{font-size:1.05rem;font-weight:700;letter-spacing:-.3px;flex:1}
.sheet .bd{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:20px}
.field label{display:block;font-size:.75rem;font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.field select,.field input[type=search],.field input[type=text]{width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:.95rem;color:var(--ink)}
.field input[type=range]{width:100%;accent-color:var(--accent)}
.seg{display:flex;background:var(--sunk);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border-radius:999px;padding:8px 6px;font-size:.86rem;
  font-weight:600;color:var(--muted)}
.seg button.on{background:var(--accent);color:#FEFDFB}
.toggle{display:flex;align-items:center;gap:12px;justify-content:space-between}
.toggle span{font-size:.95rem}
.sw{width:46px;height:27px;border-radius:999px;background:var(--sunk);
  position:relative;flex:none;transition:background .16s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:999px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .16s}
.sw.on{background:var(--accent)}
.sw.on:after{transform:translateX(19px)}
.hits{display:flex;flex-direction:column;gap:10px}
.hit{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);
  color:var(--ink);display:block}
.hit .ref{font-size:.74rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--accent)}
.hit .ar{font-size:1.35rem;line-height:2.2;margin-top:4px}
.hit .tx{font-size:.92rem;color:var(--muted);margin-top:6px}
.hit mark{background:var(--accentSoft);color:var(--accent);border-radius:4px;padding:0 2px}
.note{font-size:.85rem;color:var(--faint)}

/* ── toast ───────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);
  background:var(--ink);color:var(--paper);border-radius:999px;padding:11px 20px;
  font-size:.9rem;font-weight:500;z-index:70;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ── plain pages (prayer times, qibla) ───────────────────────────────── */
.page{max-width:1140px;margin:0 auto;padding:26px 26px 70px}
.page h1{font-size:clamp(1.9rem,4.4vw,2.7rem);letter-spacing:-1.4px;font-weight:700;
  line-height:1.08}
.page .lede{color:var(--muted);font-size:1.05rem;margin-top:12px;max-width:44em}
.panel{background:var(--card);border-radius:24px;padding:22px 26px;
  box-shadow:var(--shadow);margin-top:16px}
.times{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.time{background:var(--sunk);border-radius:18px;padding:16px 18px}
.time.now{background:var(--accent);color:#FEFDFB}
.time.now small{color:rgba(254,253,251,.82)}
.time small{display:block;font-size:.74rem;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--faint)}
.time b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.8px;
  font-variant-numeric:tabular-nums;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);
  color:#FEFDFB;border-radius:999px;padding:12px 22px;font-weight:600;font-size:.95rem}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:var(--sunk);color:var(--ink)}
.dialwrap{display:grid;place-items:center;padding:10px 0}
.dial{width:min(340px,80vw);aspect-ratio:1}
.page h2{font-size:1.35rem;letter-spacing:-.6px;font-weight:700}
.page .panel .field{margin:0}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq details:last-of-type{border-bottom:0;padding-bottom:0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--accent);font-weight:700}
.faq details[open] summary:after{content:"\2212"}
.faq p{color:var(--muted);margin-top:10px;font-size:.95rem}
.faq h2{margin-bottom:6px}
footer.foot{border-top:1px solid var(--line);padding:26px 22px 40px;color:var(--faint);
  font-size:.86rem}
footer.foot .in{max-width:920px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;
  align-items:center}
footer.foot a{color:var(--muted)}
footer.foot .sp{flex:1}