/* Kindle-style reader for Islamic Internet Archives. Loaded on demand by /reader/reader.js. */
.rdr { --bg: #ffffff; --fg: #1b1b1b; --muted: #6a6a6a; --ui: #f3f2ee; --ui-fg: #222; --line: #dedbd2; --acc: #1e5a4c; --hl-y: #fbe8a6; --hl-b: #cfe3f7; --hl-p: #f7d4e2; --hl-o: #f9d6b0;
  position: fixed; inset: 0; z-index: 2000; background: var(--bg); color: var(--fg); display: flex; flex-direction: column;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.rdr[data-theme="sepia"] { --bg: #f4ecd8; --fg: #4a3a28; --muted: #8a7558; --ui: #eadfc4; --ui-fg: #3d2f1f; --line: #d9c9a6; --acc: #8a5a12; --hl-y: #f1d98a; --hl-b: #c9dbe8; --hl-p: #edc9cf; --hl-o: #efc69a; }
.rdr[data-theme="green"] { --bg: #e5efe6; --fg: #1f2e24; --muted: #5b6e60; --ui: #d5e5d7; --ui-fg: #1f2e24; --line: #bdd1c0; --acc: #1e5a4c; --hl-y: #f3e3a0; --hl-b: #c7ddee; --hl-p: #eccfdb; --hl-o: #f1cfa6; }
.rdr[data-theme="dark"] { --bg: #111111; --fg: #d6d3cc; --muted: #8f8b83; --ui: #1d1d1d; --ui-fg: #e8e5de; --line: #333; --acc: #7fc4ad; --hl-y: #5c5020; --hl-b: #23405c; --hl-p: #5a2a3c; --hl-o: #5e3c1a; color-scheme: dark; }
.rdr *, .rdr *::before, .rdr *::after { box-sizing: border-box; }
.rdr button { font: inherit; color: inherit; }
.rdr-bar { display: flex; align-items: center; gap: 4px; padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)); background: var(--ui); color: var(--ui-fg); border-bottom: 1px solid var(--line); transition: transform .2s, opacity .2s; z-index: 5; }
.rdr-top { padding-top: max(6px, env(safe-area-inset-top, 0px)); }
.rdr-hide .rdr-top { transform: translateY(-100%); opacity: 0; pointer-events: none; position: absolute; left: 0; right: 0; top: 0; }
.rdr-ib { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 40px; justify-content: center; padding: 0 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; }
.rdr-ib:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rdr-ib:focus-visible, .rdr button:focus-visible, .rdr input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rdr-ib svg { width: 20px; height: 20px; flex: none; }
.rdr-ib[aria-pressed="true"] { color: var(--acc); }
.rdr-title { flex: 1; min-width: 0; text-align: center; font-size: 13px; line-height: 1.25; overflow: hidden; }
.rdr-title b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdr-title span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
@media (max-width: 640px) { .rdr-ib .lbl { display: none; } .rdr-ib { padding: 0 7px; } }

.rdr-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.rdr-view { position: absolute; inset: 0; overflow: hidden; }
.rdr-flow { position: absolute; top: 0; left: 0; column-fill: auto; will-change: transform; }
.rdr-flow.anim { transition: transform .22s ease; }
@media (prefers-reduced-motion: reduce) { .rdr-flow.anim { transition: none; } }
.rdr-ribbon { position: absolute; top: 0; right: 28px; width: 22px; height: 34px; background: var(--acc); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); display: none; z-index: 3; }
.rdr-ribbon.on { display: block; }
.rdr-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 15px; background: var(--bg); z-index: 4; }
.rdr-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 6; }

.rdr-foot { display: flex; align-items: center; gap: 12px; padding: 4px max(14px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); font-size: 12px; color: var(--muted); min-height: 34px; }
.rdr-foot .f-left { border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.rdr-foot .f-left:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.rdr-foot .f-right { margin-left: auto; white-space: nowrap; }
.rdr-scrub { flex: 1; display: none; accent-color: var(--acc); }
.rdr:not(.rdr-hide) .rdr-scrub { display: block; }
.rdr-pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.rdr-pbar i { display: block; height: 100%; background: var(--acc); width: 0; }

/* the text */
.rdr-flow { font-family: var(--rf, 'Literata', 'Source Serif 4', Georgia, serif); font-size: var(--rs, 19px); line-height: var(--rl, 1.6); color: var(--fg); text-align: var(--ra, left); hyphens: var(--rh, manual); -webkit-hyphens: var(--rh, manual); overflow-wrap: break-word; }
.rdr-flow h1, .rdr-flow h2, .rdr-flow h3, .rdr-flow h4 { font-family: inherit; line-height: 1.25; break-after: avoid; break-inside: avoid; text-align: left; color: var(--fg); }
.rdr-flow[dir="rtl"] h1, .rdr-flow[dir="rtl"] h2, .rdr-flow[dir="rtl"] h3, .rdr-flow[dir="rtl"] h4 { text-align: right; }
.rdr-flow .rdr-chtitle { font-size: 1.55em; margin: 1.2em 0 1em; font-weight: 700; break-before: column; }
.rdr-flow .rdr-chtitle:first-child { break-before: auto; }
.rdr-flow h2 { font-size: 1.3em; margin: 1.3em 0 .6em; }
.rdr-flow h3 { font-size: 1.12em; margin: 1.1em 0 .5em; }
.rdr-flow p { margin: 0 0 .85em; orphans: 2; widows: 2; }
.rdr-flow blockquote, .rdr-flow .quote { margin: 1em 0; padding: 0 0 0 1em; border-left: 3px solid var(--line); font-size: .95em; }
.rdr-flow[dir="rtl"] blockquote { padding: 0 1em 0 0; border-left: 0; border-right: 3px solid var(--line); }
.rdr-flow img, .rdr-flow svg, .rdr-flow video { max-width: 100%; max-height: calc(var(--rph, 600px) - 2em); height: auto; break-inside: avoid; display: block; margin: .6em auto; }
.rdr-flow figure { break-inside: avoid; margin: 1em 0; }
.rdr-flow table { border-collapse: collapse; font-size: .85em; max-width: 100%; break-inside: avoid; }
.rdr-flow td, .rdr-flow th { border: 1px solid var(--line); padding: 3px 6px; }
.rdr-flow pre { white-space: pre-wrap; font-size: .82em; }
.rdr-flow ul, .rdr-flow ol { padding-inline-start: 1.4em; }
.rdr-flow a { color: var(--acc); }
.rdr-flow a.pg { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .58em; vertical-align: super; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 0 .3em; margin: 0 .2em; line-height: 1; }
.rdr-flow hr { border: 0; border-top: 1px solid var(--line); width: 30%; margin: 1.5em auto; }
.rdr-flow .bismillah, .rdr-flow .epi-sep { text-align: center; }
.rdr-flow mark.rdr-hl { color: inherit; border-radius: 2px; padding: 0; cursor: pointer; }
.rdr-flow mark.rdr-hl.y { background: var(--hl-y); } .rdr-flow mark.rdr-hl.b { background: var(--hl-b); } .rdr-flow mark.rdr-hl.p { background: var(--hl-p); } .rdr-flow mark.rdr-hl.o { background: var(--hl-o); }
.rdr-flow mark.rdr-hl.has-note { border-bottom: 2px dotted var(--acc); }
.rdr-flow mark.rdr-find { background: var(--acc); color: var(--bg); border-radius: 2px; }
.rdr-flow ::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); }

/* panels */
.rdr-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(420px, 92vw); background: var(--ui); color: var(--ui-fg); border-right: 1px solid var(--line); z-index: 20; display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .2s, visibility .2s; visibility: hidden; padding-top: env(safe-area-inset-top, 0px); }
.rdr-panel.open { transform: none; visibility: visible; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
.rdr-tabs { display: flex; border-bottom: 1px solid var(--line); }
.rdr-tabs button { flex: 1; border: 0; background: none; padding: 12px 6px; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; }
.rdr-tabs button[aria-selected="true"] { border-color: var(--acc); color: var(--acc); font-weight: 600; }
.rdr-pbody { flex: 1; overflow: auto; padding: 8px 0 20px; }
.rdr-pclose { position: absolute; top: max(6px, env(safe-area-inset-top, 0px)); right: 6px; }
.rdr-list { list-style: none; margin: 0; padding: 0; }
.rdr-list button[data-go] { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 18px; cursor: pointer; font-size: 14.5px; line-height: 1.4; }
.rdr-list button[data-go]:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.rdr-list li.cur button[data-go] { color: var(--acc); font-weight: 600; }
.rdr-list li.sub button[data-go] { padding-left: 34px; font-size: 13.5px; }
.rdr-list small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rdr-list .q { display: block; border-left: 3px solid var(--line); padding-left: 8px; margin-top: 4px; }
.rdr-list .q.y { border-color: #e2c24e; } .rdr-list .q.b { border-color: #6aa6d8; } .rdr-list .q.p { border-color: #d77fa1; } .rdr-list .q.o { border-color: #e39b55; }
.rdr-list .note { display: block; margin-top: 4px; font-style: italic; }
.rdr-nbrow { display: flex; align-items: flex-start; }
.rdr-nbrow > button:first-child { flex: 1; }
.rdr-del { border: 0; border-radius: 0; background: none; color: var(--muted); padding: 10px 14px; cursor: pointer; }
.rdr-empty { padding: 16px 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rdr-ptools { display: flex; gap: 8px; padding: 10px 18px; flex-wrap: wrap; }
.rdr-ptools button, .rdr-btn { border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.rdr-search { padding: 12px 18px 4px; }
.rdr-search input { width: 100%; font: 16px 'IBM Plex Sans', system-ui, sans-serif; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.rdr-search p { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.rdr-list mark { background: var(--hl-y); color: inherit; }

/* settings sheet */
.rdr-sheet { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); top: 56px; width: min(380px, calc(100vw - 16px)); max-height: calc(100% - 70px); overflow: auto; background: var(--ui); color: var(--ui-fg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); z-index: 21; padding: 14px 16px 16px; display: none; }
.rdr-sheet.open { display: block; }
.rdr-sheet h4 { margin: 12px 0 6px; font: 600 12px 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rdr-sheet h4:first-child { margin-top: 0; }
.rdr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rdr-seg button { flex: 1 1 auto; min-height: 40px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); border-radius: 8px; cursor: pointer; padding: 6px 10px; font-size: 14px; }
.rdr-seg button[aria-pressed="true"] { border: 2px solid var(--acc); font-weight: 600; }
.rdr-seg .sw { width: 46px; height: 40px; flex: 0 0 auto; }
.rdr-row { display: flex; align-items: center; gap: 10px; }
.rdr-row input[type=range] { flex: 1; accent-color: var(--acc); }
.rdr-row .big { font-size: 22px; } .rdr-row .sm { font-size: 14px; }

/* selection popup, note editor, footnote */
.rdr-pop { position: fixed; z-index: 30; background: #2b2b2b; color: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.3); padding: 6px; display: none; flex-wrap: wrap; gap: 4px; align-items: center; max-width: calc(100vw - 16px); }
.rdr-pop.open { display: flex; }
.rdr-pop button { border: 0; background: none; color: #fff; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.rdr-pop button:hover { background: rgba(255,255,255,.12); }
.rdr-pop .dot { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 2px solid rgba(255,255,255,.5); }
.rdr-pop .dot.y { background: #f3d55b; } .rdr-pop .dot.b { background: #7fb5e6; } .rdr-pop .dot.p { background: #e693b4; } .rdr-pop .dot.o { background: #f0a868; }
.rdr-pop .sep { width: 1px; height: 22px; background: rgba(255,255,255,.25); margin: 0 2px; }
.rdr-modal { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.35); display: none; align-items: center; justify-content: center; padding: 16px; }
.rdr-modal.open { display: flex; }
.rdr-card { background: var(--ui); color: var(--ui-fg); border-radius: 12px; padding: 16px; width: min(520px, 100%); max-height: 80%; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.rdr-card h3 { margin: 0 0 8px; font: 600 16px 'IBM Plex Sans', system-ui, sans-serif; }
.rdr-card blockquote { margin: 0 0 10px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); font-size: 14px; }
.rdr-card textarea { width: 100%; min-height: 110px; font: 15px/1.5 'IBM Plex Sans', system-ui, sans-serif; padding: 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.rdr-card .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rdr-card .acts .pri { background: var(--acc); color: #fff; border-color: var(--acc); }
.rdr-fnbody { font-family: var(--rf, Georgia, serif); font-size: 16px; line-height: 1.55; }
.rdr-toast { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); background: #2b2b2b; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; z-index: 45; opacity: 0; transition: opacity .2s; pointer-events: none; }
.rdr-toast.on { opacity: 1; }
body.rdr-open { overflow: hidden; }