/* The website's indexable pages (tools/seo/build-seo.mjs): the app's green, gold and ivory, in a page that reads without script. */
:root {
  --u-ink: #23201b; --u-muted: #635c50; --u-paper: #f7f4ec; --u-card: #fffdf7; --u-line: #e2dbc9;
  --u-green: #1f4d3a; --u-green2: #2e6b4f; --u-gold: #a9852f; --u-tj: #2a64a8; --u-on-green: #fbf8f0;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --u-ink: #ebe4d4; --u-muted: #b3aa98; --u-paper: #15191a; --u-card: #1e2425; --u-line: #333b3b;
    --u-green: #2e6b4f; --u-green2: #7cc4a0; --u-gold: #d9b65c; --u-tj: #7faee3; --u-on-green: #f7f4ec;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--u-paper); color: var(--u-ink); font: 1.0625rem/1.75 system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; overflow-wrap: anywhere; }
a { color: var(--u-green2); }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: 1rem; top: 1rem; background: var(--u-card); padding: .5rem 1rem; z-index: 2; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .75rem max(16px, calc((100vw - 60rem) / 2)); background: var(--u-green); color: var(--u-on-green); }
.top a { color: inherit; text-decoration: none; }
.top a:hover, .top a:focus-visible { text-decoration: underline; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; flex: 1 1 auto; font-size: .95rem; }
.lang { font-size: .95rem; border: 1px solid color-mix(in srgb, var(--u-on-green) 45%, transparent); border-radius: 99px; padding: .1rem .75rem; }

main { max-width: 60rem; margin: 0 auto; padding: 1rem 16px 2.5rem; }
h1 { font-size: 1.9rem; line-height: 1.35; margin: .5rem 0 .75rem; color: var(--u-green2); }
h2 { font-size: 1.35rem; line-height: 1.4; margin: 2rem 0 .6rem; color: var(--u-green2); }
h3 { font-size: 1.05rem; margin: 1rem 0 .15rem; }
p { margin: .5rem 0; }
.lead { color: var(--u-ink); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .1rem .5rem; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--u-muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: .5rem; }
:root[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { color: inherit; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; }
.btn { display: inline-block; min-height: 44px; padding: .5rem 1.1rem; border-radius: 10px; background: var(--u-green); color: var(--u-on-green); font-weight: 600; text-decoration: none; }
.btn.alt { background: transparent; color: var(--u-green2); box-shadow: inset 0 0 0 1.5px var(--u-green2); }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 56px; width: auto; }

.q { font-family: 'UthmanicHafs', 'Noto Naskh Arabic', 'Amiri', serif; font-size: 1.75rem; line-height: 2.25; margin: 1rem 0; text-align: start; }
.q i, .ex i { font-style: normal; color: var(--u-tj); }
.q .sj { text-decoration: overline; }
.bas { text-align: center; }
.m { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.12em; width: 1.3em; height: 1.3em; margin: 0 0.12em; background: var(--img-ayah) center / contain no-repeat; color: #1f1d1f; user-select: none; }
.m > span { font: 600 0.42em/1 system-ui, Tahoma, sans-serif; }
.m3 > span { font-size: 0.35em; }

/* the mushaf's pages, each the reader's own drawing at its own size (tools/seo/snapshot-pages.mjs), the whole scaled to the screen */
.mps { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.mp { margin: 0; width: calc(var(--pw) * var(--mps, 1) * 1px); scroll-margin-top: 1rem; content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.mp-box { position: relative; height: calc(var(--ph) * var(--mps, 1) * 1px); overflow: hidden; }
.mp-in { position: absolute; top: 0; left: 0; width: calc(var(--pw) * 1px); height: calc(var(--ph) * 1px); transform-origin: 0 0; transform: scale(var(--mps, 1)); }
.mp figcaption { padding-top: .35rem; text-align: center; font-size: .875rem; }

.ex { font-family: 'UthmanicHafs', 'Noto Naskh Arabic', 'Amiri', serif; font-size: 1.45rem; line-height: 1.9; white-space: nowrap; }
.ref { font-size: .875rem; }
.letters { font-size: 1.3rem; letter-spacing: .15em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .6rem; list-style: none; margin: 1rem 0; padding: 0; }
.grid a { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; min-height: 44px; height: 100%; padding: .55rem .75rem; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 12px; color: var(--u-ink); text-decoration: none; }
.grid a:hover, .grid a:focus-visible { border-color: var(--u-green2); }
.grid .n { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1.5px solid var(--u-gold); border-radius: 50%; font-size: .875rem; }
.grid small, .rules small, .most small { color: var(--u-muted); }
.rules, .exs, .most { list-style: none; margin: .5rem 0; padding: 0; }
.rules li { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--u-line); }
.exs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.exs li { display: flex; flex-direction: column; align-items: center; padding: .5rem; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 12px; text-align: center; }
.exs .ex { white-space: normal; }
.most li { padding: .3rem 0; }
.wide { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--u-card); }
th, td { padding: .5rem .7rem; border: 1px solid var(--u-line); text-align: start; vertical-align: middle; }
td:nth-child(2) { white-space: nowrap; }
.faq h3 { color: var(--u-ink); }
.pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin: 1.5rem 0; }
.pn a { min-height: 44px; display: inline-flex; align-items: center; }
.ta { padding: .5rem 0 1rem; border-bottom: 1px solid var(--u-line); }
.tf { margin: 0; }
.foot { padding: 1.5rem max(16px, calc((100vw - 60rem) / 2)) 2rem; background: var(--u-card); border-top: 1px solid var(--u-line); }
.fname { font-weight: 700; font-size: 1.15rem; color: var(--u-green2); margin: 0; }
.small { font-size: .85rem; color: var(--u-muted); }
.small a { color: inherit; }
@media (max-width: 480px) {
  h1 { font-size: 1.55rem; }
}

/* the azkar and the books */
.zkg { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.zkg a { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.zk { margin: 1rem 0; padding: .75rem 1rem; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 12px; }
.zk h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.zk .q { margin: .5rem 0; }
.zkt { margin: .5rem 0; font: 400 1.4rem/2.05 'Amiri', 'Noto Naskh Arabic', serif; overflow-wrap: anywhere; text-align: justify; text-align-last: start; }
/* a treatise: its paragraphs, a verse's place under it, end-aligned as a printed book writes it */
.tr .trb { margin: .25rem 0 .75rem; }
.tr .zkt { margin: .25rem 0; }
.vref { margin: -.5rem 0 .5rem; text-align: end; font-size: .85rem; }
.vref a { color: var(--u-muted); text-decoration: none; }
/* a commentary's passage held until it is reviewed: «[…]» */
.held { color: var(--u-muted); }
.zkn { margin: .25rem 0 0; font-size: .9rem; color: var(--u-muted); }
.bkh { text-align: center; }
.bkv { position: relative; padding: .5rem 1rem; border-bottom: 1px solid var(--u-line); text-align: center; }
.bkv p { margin: 0; font: 400 1.4rem/2 'Amiri', 'Noto Naskh Arabic', serif; }
.bkv .n { position: absolute; inset-inline-start: .25rem; top: .5rem; font-size: .8rem; color: var(--u-muted); }
.tq { color: var(--u-green2); }

/* sending a page on WhatsApp; the ayahs of a surah, each a link to its tafsir */
.share { margin: 1.5rem 0 0; }
.share a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 1rem; border-radius: 99px; background: #1f7a4a; color: #fff; font-weight: 600; text-decoration: none; }
.ayl { display: flex; flex-wrap: wrap; gap: .3rem; }
.ayl a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); text-decoration: none; }
/* a surah's tajweed, ayah by ayah: the rules of each ayah under it */
.ah { margin: .25rem 0 0; font-size: 1.05rem; }
.tjl { margin: .25rem 0 .5rem; padding-inline-start: 1.2rem; }
.tjl li { padding: .15rem 0; }
.tjl .ex { white-space: normal; }
/* the tafsirs of one ayah, the parts of a long surah, a khatma's days */
.toc, .parts { margin: .75rem 0; font-size: .95rem; }
.toc a, .parts a { display: inline-flex; align-items: center; min-height: 44px; }
.tb { padding: .25rem 0 1rem; border-bottom: 1px solid var(--u-line); }
.tb h2 { margin-top: 1.25rem; }
.kt td:first-child { white-space: nowrap; }
.kt td:nth-child(2) { white-space: normal; }
.kt a { display: inline-flex; align-items: center; min-height: 44px; }
/* an evening's words, where Hisn al-Muslim gives them under the dhikr */
.zke { padding: .25rem .75rem; border-inline-start: 3px solid var(--u-gold); background: color-mix(in srgb, var(--u-gold) 10%, transparent); border-radius: 6px; }
/* the meanings of the words (السراج): the book's headword, then its meaning */
.ghl { margin: .25rem 0 .5rem; }
.gh { margin: .3rem 0; font: 400 1.15rem/1.9 'Amiri', 'Noto Naskh Arabic', serif; }
.gh b { color: var(--u-green2); font-weight: 700; }