@font-face{font-family:"Plex";src:url("fonts/IBMPlexSansArabic-400.ttf");font-weight:400}
@font-face{font-family:"Plex";src:url("fonts/IBMPlexSansArabic-500.ttf");font-weight:500}
@font-face{font-family:"Plex";src:url("fonts/IBMPlexSansArabic-600.ttf");font-weight:600}
@font-face{font-family:"Plex";src:url("fonts/IBMPlexSansArabic-700.ttf");font-weight:700}
@font-face{font-family:"Amiri";src:url("fonts/Amiri-Regular.ttf");font-weight:400}
@font-face{font-family:"Amiri";src:url("fonts/Amiri-Bold.ttf");font-weight:700}
@font-face{font-family:"AmiriQ";src:url("fonts/AmiriQuran.ttf")}

:root{--teal:#1F7A6B;--teal-d:#145c50;--tint:#E7F2EE;--bg:#F2F6F4;--sand:#F4D57A;--sand-d:#5a4300;--ink:#14332d;--mute:#6b8a84}
@page{size:108mm 192mm;margin:12.5mm 8mm 14mm}
@page :first{margin:0}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{font-family:"Plex",sans-serif;color:var(--ink);font-size:10pt;line-height:1.6}
@media screen{body{max-width:560px;margin:0 auto;padding:0 14px 40px}.cover{margin:0 -14px 18px}}

/* cover */
.cover{width:108mm;height:192mm;background:var(--teal);color:#fff;position:relative;overflow:hidden;page-break-after:always;break-after:page}
.cover svg{position:absolute;inset:0;width:100%;height:100%}
.cv-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 10mm}
.cv-top{font-family:"AmiriQ";font-size:13pt;color:var(--sand);margin-bottom:22mm}
.cv-title{font-weight:700;font-size:34pt;line-height:1.25}
.cv-rule{width:22mm;height:1.2mm;background:var(--sand);border-radius:1mm;margin:8mm 0}
.cv-sub{font-size:12pt;line-height:1.9;font-weight:500}
.cv-draft{position:absolute;bottom:12mm;font-size:8pt;background:rgba(0,0,0,.2);padding:1mm 4mm;border-radius:4mm}

/* front matter */
.front{break-after:page;page-break-after:always}
.fh{font-weight:700;font-size:15pt;color:var(--teal-d);margin-bottom:6mm;border-bottom:.4mm solid var(--sand);padding-bottom:2mm}
.ded{display:flex;align-items:center;justify-content:center;height:150mm;text-align:center}
.ded h2{font-size:17pt;color:var(--teal-d);margin-bottom:10mm}
.ded p{font-family:"Amiri";font-size:15pt;line-height:2.1}
.notes{margin:6mm 4mm 0 0;font-size:9.5pt;line-height:1.85;color:var(--ink)}
.notes li{margin-bottom:2.2mm}
.toc ol{list-style:none}
.toc li{border-bottom:.2mm solid #d8e4df}
.toc a{display:flex;align-items:baseline;gap:3mm;padding:1.4mm 0;color:inherit;text-decoration:none}
.toc .t{flex:1;font-weight:500}.toc .c{font-size:8pt;color:var(--mute)}.toc .p{width:9mm;text-align:left;font-weight:600;color:var(--teal-d)}

/* surah bar */
.bar{background:var(--teal);color:#fff;font-weight:700;font-size:12pt;padding:2.8mm 4mm;border-radius:3mm;display:flex;justify-content:space-between;align-items:center;margin:5mm 0 3mm;break-after:avoid;page-break-after:avoid}
.bar span{font-weight:400;font-size:8pt;opacity:.85}
.bar.app{background:#7a8a86}

/* cards */
.card{background:#fff;border-radius:3.4mm;padding:3mm 4mm 3mm;margin-bottom:3mm;box-shadow:0 .2mm .8mm rgba(20,51,45,.18);break-inside:avoid;page-break-inside:avoid;position:relative;text-align:right}
.no{position:absolute;left:2.5mm;top:2mm;font-size:6.5pt;font-weight:600;color:#fff;background:var(--teal);border-radius:3mm;min-width:5mm;text-align:center;padding:0 1.4mm;line-height:1.05;height:3.6mm;display:flex;align-items:center;justify-content:center}
.phrase{font-family:"AmiriQ";font-size:12.5pt;line-height:1.95;background:var(--tint);color:var(--teal-d);border-radius:2.6mm;padding:.6mm 3mm;text-align:center;margin:0 0 1.4mm}
.card .ln{display:block;font-family:"Amiri";font-size:12.2pt;line-height:1.75;padding:0 1mm}
.q{font-family:"AmiriQ";color:var(--teal-d);font-size:12pt}
.loc{display:inline-block;margin-top:1.3mm;font-size:6.8pt;background:var(--sand);color:var(--sand-d);border-radius:4mm;padding:.2mm 2.8mm;font-weight:500}
.card:has(.no) .phrase:first-of-type{margin-top:3mm}
.card .no + .ln{margin-top:3.6mm}
.card.app{background:#eef1f0;box-shadow:none;break-inside:auto;page-break-inside:auto}
.atext{font-family:"Amiri";font-size:10.5pt;line-height:1.75;white-space:pre-wrap}
.appnote{font-size:8.5pt;color:var(--mute);margin-bottom:3mm}

/* phrase index */
.idx{margin-top:1mm}
.ltr{font-family:"Amiri";font-weight:700;font-size:13pt;color:var(--teal-d);margin:3mm 0 1mm;border-bottom:.3mm solid var(--sand);break-after:avoid;padding-bottom:.4mm}
.row{display:flex;gap:2.4mm;align-items:baseline;padding:.7mm 0;border-bottom:.15mm dotted #cfdcd7;color:inherit;text-decoration:none;font-size:8.8pt;break-inside:avoid}
.row .t{flex:1;font-family:"Amiri";font-size:10.4pt;line-height:1.5}
.row .n{width:8mm;text-align:center;color:var(--mute);font-size:7.5pt}
.row .p{width:8mm;text-align:left;font-weight:600;color:var(--teal-d);font-size:8pt}

/* colophon */
.colo{break-before:page;page-break-before:always;font-size:9pt;line-height:1.9;color:var(--ink)}
.colo p{margin-bottom:3mm}

/* ---------- web only ---------- */
.cv-dl{position:absolute;bottom:22mm;font-size:9pt;font-weight:600;color:var(--teal-d);background:var(--sand);padding:1.4mm 5mm;border-radius:5mm;text-decoration:none}
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:3mm;margin-top:1.3mm}
.cfoot .loc{margin-top:0}
.share{display:inline-flex;align-items:center;gap:1.4mm;font:inherit;font-weight:500;font-size:8pt;color:var(--teal-d);background:transparent;border:.3mm solid #b9d6cf;border-radius:5mm;padding:.8mm 3.2mm;cursor:pointer;line-height:1.4}
.share:hover,.share:focus-visible{background:var(--tint);outline:none}
.share[disabled]{opacity:.55;cursor:progress}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#14332d;color:#fff;font-size:13px;padding:8px 16px;border-radius:20px;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
/* off-screen card used to draw the share image */
.shot{position:fixed;left:-9999px;top:0;width:380px;padding:18px;background:var(--bg);direction:rtl}
.shot .card{margin:0;box-shadow:0 1px 3px rgba(20,51,45,.18)}
.shot .no,.shot .share,.shot .cfoot .share{display:none!important}
@media screen{
  body{font-size:15px}
  .card{padding:14px 16px 12px;margin-bottom:12px;border-radius:14px}
  .phrase{font-size:19px;line-height:1.9;padding:3px 12px;margin-bottom:6px}
  .card .ln{font-size:18px;line-height:1.75}
  .q{font-size:18px}
  .loc{font-size:11px;padding:1px 12px}
  .share{font-size:12px;padding:3px 12px}
  .no{font-size:10px;height:17px;min-width:22px;left:10px;top:9px;border-radius:9px}
  .card .no + .ln,.card:has(.no) .phrase:first-of-type{margin-top:15px}
  .bar{font-size:17px;padding:11px 16px;border-radius:12px;margin:22px 0 12px;position:sticky;top:34px;z-index:10}
  .bar span{font-size:12px}
  .fh{font-size:20px;margin-bottom:16px;padding-bottom:8px}
  .ded{height:70vh}.ded p{font-size:21px}
  .notes{font-size:15px;margin-right:12px}
  .toc a{padding:8px 0}.toc .t{font-size:16px}.toc .c{font-size:12px}
  .row{font-size:13px;padding:6px 0}.row .t{font-size:17px}.row .n{font-size:12px;width:34px}
  .ltr{font-size:20px;margin:14px 0 4px}
  .cover{height:100vh;min-height:560px;width:auto;margin:0 -14px}
  .cv-title{font-size:48px}.cv-sub{font-size:17px}.cv-top{font-size:19px}.cv-draft{font-size:12px}.cv-dl{font-size:13px;bottom:70px}
  .colo{font-size:14px}
}

/* ---------- site header: menu button + search ---------- */
:root{--hh:56px}
.webhead,.results,.drawer,.scrim{display:none}
@media screen{
  .webhead{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;height:var(--hh);margin:0 -14px;padding:0 12px;background:rgba(242,246,244,.95);backdrop-filter:blur(8px);border-bottom:1px solid #d6e4df}
  .menu-btn{flex:none;width:42px;height:42px;border:0;border-radius:12px;background:var(--teal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
  .menu-btn span{display:block;width:20px;height:2.4px;border-radius:2px;background:#fff}
  .menu-btn:focus-visible,.dr-close:focus-visible,.go:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
  .search{position:relative;flex:1}
  .search input{width:100%;height:42px;border:1px solid #c5d8d2;border-radius:21px;background:#fff;padding:0 16px 0 40px;font:inherit;font-size:15px;color:var(--ink);text-align:right}
  .search input::placeholder{color:#7f9a94}
  .search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,122,107,.18)}
  .search input::-webkit-search-cancel-button{display:none}
  .clear{position:absolute;left:8px;top:7px;width:28px;height:28px;border:0;border-radius:50%;background:#e4eeea;color:var(--teal-d);font-size:18px;line-height:1;cursor:pointer}
  .clear[hidden]{display:none}
  .cover{height:calc(100vh - var(--hh));min-height:520px}
  .bar{top:var(--hh)}
  :target{scroll-margin-top:calc(var(--hh) + 56px)}
  .card.flash{animation:flash 2.2s ease}
  @keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--sand),0 4px 14px rgba(20,51,45,.25)}100%{box-shadow:0 1px 3px rgba(20,51,45,.18)}}

  /* results */
  .results{display:block;position:sticky;top:var(--hh);z-index:39;margin:0 -14px;max-height:0;overflow:hidden;background:var(--bg);transition:max-height .2s ease}
  .results.open{max-height:calc(100vh - var(--hh));overflow-y:auto;border-bottom:3px solid var(--teal);box-shadow:0 10px 24px rgba(20,51,45,.2)}
  .results[hidden]{display:block;max-height:0}
  .rs-count{padding:10px 16px 4px;font-size:13px;color:var(--mute)}
  .rs-item{display:block;width:100%;text-align:right;background:#fff;border:0;border-radius:12px;margin:8px 12px;width:calc(100% - 24px);padding:10px 14px;font:inherit;color:inherit;cursor:pointer;box-shadow:0 1px 3px rgba(20,51,45,.14)}
  .rs-item:hover,.rs-item:focus-visible{background:var(--tint);outline:none}
  .rs-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mute);margin-bottom:2px}
  .rs-meta b{background:var(--teal);color:#fff;border-radius:9px;padding:0 8px;font-weight:600;font-size:11px}
  .rs-text{font-family:"Amiri",serif;font-size:17px;line-height:1.65}
  .rs-text .q{font-family:"AmiriQ",serif;font-size:17px;color:var(--teal-d)}
  .rs-text mark{background:var(--sand);color:inherit;border-radius:3px;padding:0 1px}
  .rs-empty{padding:26px 16px;text-align:center;color:var(--mute);font-size:14px}

  /* drawer */
  .scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(10,30,26,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.on{opacity:1;pointer-events:auto}
  .drawer{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;z-index:61;width:min(86vw,380px);background:var(--bg);box-shadow:-8px 0 30px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .25s ease;visibility:hidden}
  .drawer.on{transform:none;visibility:visible}
  .dr-top{position:relative;background:var(--teal);color:#fff;padding:16px 18px 14px;display:flex;flex-direction:column;gap:2px}
  .dr-top b{font-size:18px}.dr-top span{font-size:12.5px;opacity:.85}
  .dr-close{position:absolute;left:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer}
  .goto{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #d6e4df;font-size:13px}
  .goto label{flex:1;color:var(--mute)}
  .goto input{width:68px;height:36px;border:1px solid #c5d8d2;border-radius:10px;text-align:center;font:inherit;font-size:15px;background:#fff}
  .go{height:36px;border:0;border-radius:10px;background:var(--sand);color:var(--sand-d);font:inherit;font-weight:600;padding:0 14px;cursor:pointer}
  .dr-links{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid #d6e4df;flex-wrap:wrap}
  .dr-links a{font-size:13px;color:var(--teal-d);background:var(--tint);border-radius:16px;padding:5px 12px;text-decoration:none}
  .dr-list{flex:1;overflow-y:auto;padding:6px 8px 24px;-webkit-overflow-scrolling:touch}
  .dr-list details{border-bottom:1px solid #dde8e4}
  .dr-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 8px;font-weight:600;cursor:pointer;font-size:15.5px}
  .dr-list summary::-webkit-details-marker{display:none}
  .dr-list summary::after{content:"‹";margin-inline-start:8px;color:var(--mute);transition:transform .15s;font-size:20px;line-height:1}
  .dr-list details[open] summary::after{transform:rotate(-90deg)}
  .dr-list summary span{flex:1}
  .dr-list summary small{background:var(--tint);color:var(--teal-d);border-radius:10px;padding:0 9px;font-weight:600;font-size:12px}
  .dr-list ul{list-style:none;padding:0 4px 8px}
  .dr-list li a{display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;color:inherit;text-decoration:none;font-family:"Amiri",serif;font-size:16.5px;line-height:1.5}
  .dr-list li a:hover,.dr-list li a:active{background:var(--tint)}
  .dr-list li a b{flex:none;min-width:26px;text-align:center;font-family:"Plex",sans-serif;font-size:11.5px;color:#fff;background:var(--teal);border-radius:9px}
  .dr-list li.go a{font-family:"Plex",sans-serif;font-size:13px;color:var(--teal-d);font-weight:600}
  body.nav-open{overflow:hidden}
}
.more{display:none}
@media screen{
  .more{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 0 60px;color:var(--mute);font-size:14px}
  .more i{width:18px;height:18px;border:3px solid #cfe0da;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
  .more.err{cursor:pointer;color:var(--teal-d)}.more.err i{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
}
@media print{.webhead,.results,.drawer,.scrim,.more{display:none!important}}