/* Reader page — themes, fonts and layouts are switched by data-* attributes on <body>. */
body.reader-page{--r-bg:#F5EDDC;--r-page:#FFFCF4;--r-ink:#2A2015;--r-muted:#6B5A3F;--r-line:#E3D5B6;--r-soft:#F1E7D0;--r-num:#8A5A12;--r-hl:#F6E3B4;--r-accent:#14110D;--r-accent-ink:#E2C27A;--r-orn:#C9A24A;
  --size:3;--px:calc(20px + var(--size) * 2.7px);background:var(--r-bg);color:var(--r-ink)}
body[data-theme=sepia]{--r-bg:#E9DCC0;--r-page:#F3E7CC;--r-ink:#33281A;--r-muted:#665538;--r-line:#D6C39C;--r-soft:#E6D6B4;--r-num:#7A4E10;--r-hl:#E8CF98;--r-accent:#3A2A14;--r-accent-ink:#F3E7CC;--r-orn:#B08A45}
body[data-theme=night]{--r-bg:#0C0A08;--r-page:#16130F;--r-ink:#EAE0CC;--r-muted:#B3A68C;--r-line:#2E271D;--r-soft:#1F1A14;--r-num:#E2B65A;--r-hl:#3A2E1A;--r-accent:#C9A24A;--r-accent-ink:#14110D;--r-orn:#8C6E33}

.r-bar{position:sticky;top:0;z-index:10;background:var(--dark);border-bottom:1px solid #3A2F1E}
.r-bar-in{max-width:1360px;margin:0 auto;padding:14px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.r-left,.r-right{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.r-brand-text{font-family:'Noto Nastaliq Urdu',serif;font-size:21px;font-weight:700;line-height:1.9;color:#E2C27A}
.r-divider{width:1px;height:28px;background:#4A3D27}
.r-pill{height:44px;padding:0 14px;border-radius:10px;border:1px solid #6E5626;background:#1E1A15;color:#F0C766;font:inherit;font-size:16px;font-weight:600;cursor:pointer;max-width:220px}
.r-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid #4A3D27;background:#1E1A15;color:#E2C27A;cursor:pointer;list-style:none;font:inherit;font-weight:700;font-size:20px;text-decoration:none}
.r-icon small{font-size:13px}
.r-icon::-webkit-details-marker{display:none}
.r-settings-toggle{display:none}
.r-marks{position:relative}
.r-marks-list{position:absolute;top:52px;left:0;min-width:220px;max-height:60vh;overflow:auto;background:#1E1A15;border:1px solid #6E5626;border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;color:#CFC3A8;font-size:15px;z-index:20}
.r-marks-list a{color:#F0C766;text-decoration:none;padding:8px 10px;border-radius:8px}
.r-marks-list a:hover{background:#2A241C}
.r-progress{height:3px;background:#2E271D}
.r-progress div{height:100%;background:var(--r-num)}

.r-layout{max-width:1360px;margin:0 auto;padding:32px 28px 80px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}
.r-side{flex:1 1 232px;max-width:280px;display:flex;flex-direction:column;gap:14px}
.r-cover{display:block;text-decoration:none}
.r-cover .cover{border-color:var(--gold)}
.r-label{font-size:13px;font-weight:700;color:var(--r-muted)}
.r-chapters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.r-chapters a{height:44px;display:grid;place-items:center;border-radius:10px;font-size:15px;text-decoration:none;border:1px solid var(--r-line);color:var(--r-ink)}
.r-chapters a.has{background:var(--r-soft)}
.r-chapters a:hover{border-color:var(--r-num)}
.r-chapters a[aria-current=page]{border:0;background:var(--r-accent);color:var(--r-accent-ink);font-weight:700}

.r-main{flex:999 1 560px;min-width:0;display:flex;justify-content:center}
.r-page{width:100%;max-width:760px;background:var(--r-page);border:1px solid var(--r-line);border-radius:20px;overflow:hidden;padding:48px 56px 36px}
.r-band{height:22px;margin:-48px -56px 30px;opacity:.55;background:var(--dark)}
body[data-theme=night] .r-band{background:#0C0A08}
.r-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:28px;text-align:center;color:var(--r-orn)}
.r-head h1{margin:0;font-family:'Noto Nastaliq Urdu',serif;font-size:40px;font-weight:700;line-height:2;color:var(--r-ink)}
.r-intro{color:var(--r-muted);font-size:17px;line-height:2;text-align:center;margin:0 0 20px}

.r-actions{position:sticky;top:92px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:8px;padding-inline-start:16px;margin-bottom:18px;border-radius:12px;background:var(--r-accent);color:var(--r-accent-ink)}
.r-actions[hidden]{display:none}
.r-actions > span:first-child{font-weight:700;font-size:15px}
.r-act-btns{display:flex;gap:4px}
.r-act-btns button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:8px;border:0;background:transparent;color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.r-act-btns button:hover{background:rgba(255,255,255,.08)}
.r-act-btns .x{width:40px;padding:0;justify-content:center}

/* Verse text */
.r-text{font-family:'Noto Nastaliq Urdu',serif;font-size:var(--px);line-height:2.45;color:var(--r-ink)}
body[data-face=naskh] .r-text{font-family:'Noto Naskh Arabic',serif;font-size:calc(var(--px) * 1.08);line-height:2}
.r-text .v{cursor:pointer;border-radius:10px;outline-offset:2px}
.r-text .v:focus-visible{outline:2px solid var(--r-num)}
.r-text .v.on{background:var(--r-hl)}
.r-text sup{font-family:'Noto Naskh Arabic',serif;font-weight:700;color:var(--r-num)}
/* one verse per line */
body[data-layout=lines] .r-text{display:flex;flex-direction:column;gap:2px}
body[data-layout=lines] .r-text .v{display:flex;align-items:flex-start;gap:16px;padding:4px 12px;margin:0 -12px}
body[data-layout=lines] .r-text sup{flex:none;width:30px;text-align:center;font-size:14px;vertical-align:baseline;padding-top:calc(var(--px) * .95)}
body[data-layout=lines][data-face=naskh] .r-text sup{padding-top:calc(var(--px) * .55)}
/* paragraph */
body[data-layout=para] .r-text{text-align:justify}
body[data-layout=para] .r-text .v{padding:0 2px}
body[data-layout=para] .r-text .v.on{text-decoration:underline;text-decoration-color:var(--r-num);text-underline-offset:10px}
body[data-layout=para] .r-text sup{font-size:.5em;margin-inline-end:4px;line-height:0}

.r-empty{margin:16px 0;padding:14px 18px;border-radius:10px;border:1px dashed var(--r-line);color:var(--r-muted);font-size:15px;text-align:center}
.r-pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--r-line)}
.r-pg{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:6px 18px;border-radius:12px;border:1px solid var(--r-line);color:var(--r-ink);text-decoration:none;font-size:16px;font-weight:600}
.r-pg span{display:flex;flex-direction:column}
.r-pg small{font-size:13px;opacity:.75}
.r-pg.primary{border:0;background:var(--r-accent);color:var(--r-accent-ink);font-weight:700}
.r-pg:hover{color:var(--r-ink);border-color:var(--r-num)}
.r-pg.primary:hover{color:var(--r-accent-ink);opacity:.92}

/* Settings panel */
.r-panel{flex:1 1 260px;max-width:300px;display:flex;flex-direction:column;gap:24px;padding:24px;border-radius:16px;background:var(--r-page);border:1px solid var(--r-line);position:sticky;top:110px}
.r-opt{display:flex;flex-direction:column;gap:10px}
.r-opt > span{font-size:15px;font-weight:600}
.r-size{display:flex;align-items:center;gap:8px}
.r-size button{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:10px;border:1px solid var(--r-line);background:transparent;color:var(--r-ink);font-family:'Noto Naskh Arabic',serif;cursor:pointer}
.r-size .track{flex:1;height:6px;border-radius:999px;background:var(--r-soft);overflow:hidden;display:block}
.r-size .track i{display:block;height:100%;border-radius:999px;background:var(--r-num)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--r-soft)}
.seg button{min-height:44px;padding:4px 10px;border-radius:9px;border:0;font:inherit;font-size:15px;cursor:pointer;background:transparent;color:var(--r-muted)}
.seg button[aria-pressed=true]{background:var(--r-page);color:var(--r-ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.themes button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;font:inherit;color:var(--r-ink);cursor:pointer;background:transparent;border:1px solid var(--r-line)}
.themes button[aria-pressed=true]{border:2px solid var(--r-num)}
.themes small{font-size:13px}
.sw{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-family:'Noto Naskh Arabic',serif;font-size:18px}
.sw.light{background:#FFFCF4;color:#2A2015;border:1px solid #E3D5B6}
.sw.sepia{background:#F3E7CC;color:#33281A;border:1px solid #D6C39C}
.sw.night{background:#16130F;color:#EAE0CC;border:1px solid #2E271D}

@media (max-width:1100px){
  .r-settings-toggle{display:flex;align-items:baseline;justify-content:center;gap:1px}
  .r-panel{display:none;position:fixed;top:auto;bottom:0;left:0;right:0;max-width:none;z-index:30;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  body.settings-open .r-panel{display:flex}
}
@media (max-width:820px){
  .r-bar-in{padding:10px 12px}
  .r-brand-text,.r-divider{display:none}
  .r-pill{max-width:150px;font-size:15px}
  .r-layout{padding:16px 12px 60px;gap:16px}
  .r-side{max-width:none;order:2;flex-basis:100%}
  .r-cover{display:none}
  .r-chapters{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .r-page{padding:26px 22px 24px;border-radius:16px}
  .r-band{margin:-26px -22px 20px}
  .r-head h1{font-size:30px}
  .r-actions{top:70px}
}