/* Design tokens seeded from docs/brand (plan §6): the cover maroon, page cream, frame blue,
   gold, and the site green of the header. Light and dark follow the system. */
:root {
  --green: #7fb02f;
  --green-deep: #5f8a1f;
  --maroon: #7a2a2a;        /* sura names, Arabic headings, links in references */
  --button: #7a2a2a;        /* filled buttons: stays maroon in every theme */
  --cream: #fbf6e7;
  --page: #fffdf7;
  --ink: #2a2118;
  --ink-soft: #6b5e4e;
  --blue: #2f5fae;
  --gold: #c99a35;
  --line: #e6dcc6;
  --mark: #fff1b8;
  --recite: #c6e39a;        /* the ayah being recited: site green, distinct from the search mark */
  --recite-ink: #3f6a12;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: Georgia, "Times New Roman", serif;
  --font-arabic: "KFGQPC Uthmanic Hafs", "Amiri Quran", serif;
  --arabic-leading: 1;      /* some hands (Nastaliq) need taller lines */
}
@media (prefers-color-scheme: dark) {
  :root {
    --maroon: #e2b46e;
    --button: #8a3434;
    --page: #171410;
    --cream: #211c15;
    --ink: #efe6d3;
    --ink-soft: #bba88a;
    --line: #3a3126;
    --mark: #5a4a14;
    --recite: #3d5f1c;
    --recite-ink: #c9ef96;
    --blue: #7ea3e6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-family: var(--font-ui); color: var(--ink); background: var(--page); }
/* the scrollbar's space is reserved on every page, so a short page (Info, a verse) does not sit a
   few pixels to the right of a long one and the content stops jumping between pages */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body { margin: 0; line-height: 1.5; }
[hidden] { display: none !important; }   /* the attribute always wins over a display rule on the same element */
a { color: var(--blue); }
.wrap { max-width: 56rem; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }

/* header: the old site's green bar, the icon and the Harabara wordmark */
.site-header { background: linear-gradient(180deg, var(--green), var(--green-deep)); color: #fff; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .75rem; }
.brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; min-width: 0; }
.brand-icon { width: 56px; height: 56px; flex: none; }
.brand-wordmark { height: 2.6rem; width: auto; max-width: 60vw; filter: brightness(0) invert(1); }
.langs { display: flex; gap: .25rem; }
.langs a { display: inline-flex; align-items: center; gap: .3rem; color: #fff; text-decoration: none; padding: .25rem .5rem; border-radius: .35rem; opacity: .8; font-size: .85rem; letter-spacing: .05em; }
.langs .flag { width: .9rem; height: .9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.28); flex: none; }
.langs a.current { background: rgba(255,255,255,.22); opacity: 1; }

/* the menu: a strip under the green bar, tabs like the results tabs, the current one marked */
/* the menu strip (owner's pick, option 19 of twenty, 2026-11-01): the page itself under a thick green
   rule that touches the header; soft entries, the current one bold maroon, no underline */
.menubar { background: var(--page); border-top: 3px solid var(--green); border-bottom: 1px solid var(--line); }
.site-nav { display: flex; gap: .25rem; }
.site-nav a { padding: .65rem .9rem; color: var(--ink-soft); text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.current { color: var(--maroon); font-weight: 700; }
@media (max-width: 600px) { .site-nav { justify-content: space-between; gap: 0; } .site-nav a { padding: .6rem .3rem; font-size: .92rem; } }
/* phones: the strip sticks to the top (the brand bar scrolls away); on a sura or mushaf page the sura's name
   and a small play button take the current entry's place once the title has scrolled off (owner, 2026-11-01) */
.site-nav .bar-context { display: none; }
@media (max-width: 700px) {
  .menubar { position: sticky; top: 0; z-index: 36; }
  .sura-head { position: static; border-bottom: 0; }
  .site-nav.context a.current { display: none; }
  .site-nav.context .bar-context { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .3rem; min-width: 0; }
  .bar-title { color: var(--maroon); font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; font-size: .92rem; }
  /* .site-nav in the selector: the generic .play-page pill rule comes later in this file and would otherwise win */
  .site-nav .bar-play { width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; background: var(--green-deep); color: #fff; font-size: 0; line-height: 0; display: inline-grid; place-items: center; cursor: pointer; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
  .site-nav .bar-play:hover { background: var(--green-deep); filter: brightness(1.1); }
  .site-nav .bar-play svg { margin-inline-start: 1px; }
  .site-nav .bar-play[hidden] { display: none; }
}
/* search */
.search { margin-block: 1.5rem 1rem; }
.search form { display: flex; gap: .5rem; }
/* the box must be found at a glance (owner, 2026-11-01): a green frame and a lift off the page, not cream on cream */
.search input[type=search] { flex: 1; font: inherit; font-size: 1.2rem; padding: .8rem 1.1rem; border: 2px solid var(--green-deep); border-radius: .7rem; background: var(--page); color: var(--ink); min-width: 0; box-shadow: 0 3px 12px rgba(0,0,0,.1); }
.search input[type=search]::placeholder { color: var(--ink-soft); opacity: .8; }
/* focus in the site's own green, not the browser's orange */
.search input[type=search]:focus, .goto input:focus, .goto select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 30%, transparent); }
:root { accent-color: var(--green); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: .3rem; }
.search button { font: inherit; padding: .7rem 1.1rem; border: 0; border-radius: .6rem; background: var(--button); color: #fff; cursor: pointer; }
.htmx-request .spinner { visibility: visible; }
/* the search is on its way: a sliding green bar under the box, the button and the old results dimmed */
.search { position: relative; }
.search-busy { position: absolute; left: 0; right: 0; bottom: -.45rem; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--green) 22%, transparent); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.search-busy::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 2px; background: var(--green); animation: search-slide 1s ease-in-out infinite; }
@keyframes search-slide { 0% { left: -35%; } 100% { left: 100%; } }
.search form.htmx-request + .search-busy, .search form.busy + .search-busy { opacity: 1; }
.search form.htmx-request button, .search form.busy button { opacity: .6; cursor: progress; }
.search:has(form.htmx-request) ~ #results { opacity: .55; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .search-busy::before { animation: none; width: 100%; left: 0; opacity: .6; } }

/* results */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-block: 1rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.current { color: var(--ink); border-color: var(--button); font-weight: 600; }
.tabs .count { color: var(--ink-soft); font-size: .85em; margin-inline-start: .3em; }
.hit { padding-block: .9rem; border-bottom: 1px solid var(--line); }
.hit .ref { font-size: .85rem; color: var(--ink-soft); display: flex; gap: .6rem; flex-wrap: wrap; }
.hit .ref a { color: var(--maroon); text-decoration: none; font-weight: 600; }
.hit .text { font-family: var(--font-text); font-size: 1.08rem; margin: .25rem 0 0; }
mark { background: var(--mark); color: inherit; padding: 0 .1em; border-radius: .15em; }
.muted { color: var(--ink-soft); }
.suggest { margin-block: .5rem; }
/* pagers: a pill to each side, the position in the middle, all on one line */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 1.2rem; direction: ltr; }
.pager .side:first-child { justify-self: start; }
.pager .side:last-child { justify-self: end; }
.pager .current { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pager .turn { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.pager .turn:hover { border-color: var(--green); color: var(--green-deep); background: color-mix(in srgb, var(--green) 10%, var(--page)); }
.pager .arrow { color: var(--green-deep); font-size: 1.3em; line-height: 1; }
@media (max-width: 480px) { .pager .turn { padding: .35rem .7rem; font-size: .9rem; } }

/* reader and verse page */
.sura-title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-block: 1.5rem .5rem; }
.sura-title h1 { margin: 0; font-size: 1.6rem; }
.sura-title .ar { font-family: var(--font-arabic); font-size: 1.6rem; color: var(--maroon); }
/* the translation picker (_TranslationPick): the name is a button, the list marks the open one with a check */
.translation-pick { position: relative; display: inline-block; font-size: .9rem; margin-block: .4rem .8rem; }
.translation-pick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.3rem; padding: .25rem .6rem .25rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--cream); color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.translation-pick summary::-webkit-details-marker { display: none; }
.translation-pick summary:hover, .translation-pick[open] summary { border-color: var(--green); }
.translation-pick summary b { font-weight: 600; }
.translation-pick .caret { color: var(--ink-soft); font-size: .85em; }
.pick-list { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + .3rem); min-width: 15rem; background: var(--page); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .3rem; display: grid; gap: .1rem; }
.pick-list a { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .4rem .6rem; border-radius: .4rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.pick-list a:hover { background: var(--cream); }
.pick-list a.current { background: var(--cream); font-weight: 600; }
.pick-list .chk { width: 1.1rem; color: var(--maroon); text-align: center; flex: none; }
.two-columns .col-head { align-items: center; }
.two-columns .col-head .translation-pick { margin: 0; }
.two-columns .col-head .translation-pick .label { display: none; }
.aya-sheet .head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.aya-sheet .translation-pick { margin: 0; font-size: .85rem; }
.aya-sheet .translation-pick summary { min-height: 2rem; padding-block: .1rem; }
.aya-sheet .translation-pick .label { display: none; }
.aya-sheet .pick-list { top: auto; bottom: calc(100% + .3rem); }
.verse { display: grid; grid-template-columns: 2.6rem 1fr; gap: .5rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.verse .n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-size: .85rem; font-weight: 600; text-decoration: none; }
.verse .t { font-family: var(--font-text); font-size: 1.12rem; margin: 0; }
.verse .t[dir=rtl] { font-family: var(--font-arabic); font-size: 1.6rem; line-height: 2; }
.fn-mark { font-size: .7em; vertical-align: super; color: var(--blue); text-decoration: none; margin-inline-start: .15em; }
.footnote { grid-column: 2; background: var(--cream); border-inline-start: 3px solid var(--gold); padding: .6rem .9rem; border-radius: .3rem; font-size: .95rem; }
.footnote summary { cursor: pointer; color: var(--ink-soft); font-size: .85rem; }
.actions { grid-column: 2; display: flex; gap: 1rem; font-size: .85rem; }
.actions a, .actions button { color: var(--ink-soft); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
.actions a:hover, .actions button:hover { color: var(--maroon); }
.tafsir { grid-column: 1 / -1; margin-top: .5rem; }
.tafsir .source { border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; margin-block: .5rem; background: var(--cream); }
.tafsir .source h4 { margin: 0 0 .4rem; font-size: .9rem; color: var(--maroon); }
.tafsir .source p { margin: .3rem 0; font-family: var(--font-text); white-space: pre-line; }
.tafsir .source[dir=rtl] p { font-family: var(--font-arabic); font-size: 1.25rem; line-height: 1.9; }
.sura-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .4rem; }
.sura-list a { display: flex; gap: .6rem; align-items: baseline; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: .5rem; text-decoration: none; color: var(--ink); }
.sura-list .n { color: var(--green-deep); background: color-mix(in srgb, var(--green) 18%, transparent); font-weight: 700; min-width: 2em; text-align: center; padding: .05em .4em; border-radius: 999px; font-size: .9rem; }
:root[data-theme="dark"] .sura-list .n { color: var(--green); background: color-mix(in srgb, var(--green) 22%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sura-list .n { color: var(--green); background: color-mix(in srgb, var(--green) 22%, transparent); } }
.sura-list .ar { margin-inline-start: auto; font-family: var(--font-arabic); color: var(--maroon); }
/* "add to home screen": a bar along the bottom on phones (site.js shows it from the second visit) */
.install-hint { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: .7rem; padding: .6rem max(1rem, env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); background: var(--page); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.1); font-size: .85rem; line-height: 1.35; }
.install-hint[hidden], :root.reading .install-hint { display: none; }
.install-hint img { border-radius: .6rem; flex: none; }
.install-hint .text { flex: 1; min-width: 0; } .install-hint .text b { display: block; }
.install-hint .text span { color: var(--ink-soft); }
.install-hint .install { font: inherit; font-weight: 600; padding: .45rem .9rem; border: 0; border-radius: 999px; background: var(--green-deep); color: #fff; cursor: pointer; min-height: 2.4rem; }
.install-hint .dismiss { font: inherit; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.install-hint .how { font: inherit; font-weight: 600; padding: .45rem .9rem; border: 1px solid var(--green); border-radius: 999px; background: var(--cream); color: var(--green-deep); cursor: pointer; min-height: 2.4rem; }
.install-hint.tappable .text { cursor: pointer; }
/* the two-step guide: a sheet from the bottom, the steps with Safari's icons */
.install-guide { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; }
.install-guide[hidden] { display: none; }
.install-guide .sheet { width: 100%; max-height: 85vh; overflow: auto; background: var(--page); color: var(--ink); border-radius: 1rem 1rem 0 0; padding: 1.1rem max(1.1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1.1rem, env(safe-area-inset-left, 0px)); box-shadow: 0 -8px 30px rgba(0,0,0,.25); }
.install-guide h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.install-guide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: step; }
.install-guide li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; align-items: center; font-size: 1rem; line-height: 1.4; counter-increment: step; }
.install-guide li::before { content: counter(step); grid-column: 1; grid-row: 1; justify-self: start; align-self: start; font-size: .7rem; font-weight: 700; color: #fff; background: var(--green-deep); border-radius: 50%; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; margin: -.3rem 0 0 -.3rem; }
.install-guide .ico { grid-column: 1; grid-row: 1; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .8rem; background: var(--cream); color: #1f6fde; }
.install-guide li > span:last-child { grid-column: 2; }
.install-guide .where { color: var(--ink-soft); font-size: .9rem; margin: .9rem 0 1rem; }
.install-guide .ok { font: inherit; font-weight: 600; width: 100%; min-height: 2.8rem; border: 0; border-radius: .7rem; background: var(--green-deep); color: #fff; cursor: pointer; }
@media (min-width: 601px) { .install-hint { display: none !important; } }
.poster-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.poster-links .button { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .4rem 1rem; border: 1px solid var(--green); border-radius: 999px; background: var(--cream); color: var(--ink); text-decoration: none; font-weight: 600; }
.poster-links .button:hover { background: var(--green); color: #fff; }
.site-footer { padding-block: 2rem; color: var(--ink-soft); font-size: .85rem; }
@media (max-width: 480px) { .brand-wordmark { display: none; } .verse { grid-template-columns: 2.2rem 1fr; } }

/* ---- phase 2: themes, scale, reader modes, action row, share sheet --------------------- */
:root { --text-scale: 1; }
:root[data-theme="dark"] { --maroon: #e2b46e; --button: #8a3434; --page: #171410; --cream: #211c15; --ink: #efe6d3; --ink-soft: #bba88a; --line: #3a3126; --mark: #5a4a14; --recite: #3d5f1c; --recite-ink: #c9ef96; --blue: #7ea3e6; color-scheme: dark; }
:root[data-theme="light"] { --maroon: #7a2a2a; --button: #7a2a2a; --page: #fffdf7; --cream: #fbf6e7; --ink: #2a2118; --ink-soft: #6b5e4e; --line: #e6dcc6; --mark: #fff1b8; --recite: #c6e39a; --recite-ink: #3f6a12; --blue: #2f5fae; color-scheme: light; }
/* the Madinah face, self-hosted (King Fahd Complex, Uthmanic Hafs v18) */
@font-face { font-family: "KFGQPC Uthmanic Hafs"; src: url("/fonts/UthmanicHafs18.woff2") format("woff2"); font-display: swap; }
/* Qur'an typefaces (Scripts.cs); the id is set on <html> as data-script */
:root, :root[data-script="uthmani"] { --font-arabic: "KFGQPC Uthmanic Hafs", "Amiri Quran", serif; --arabic-leading: 1.1; }
:root[data-script="medine"] { --font-arabic: "Amiri Quran", "Scheherazade New", serif; --arabic-leading: 1; }
:root[data-script="naskh"] { --font-arabic: "Scheherazade New", "Amiri Quran", serif; }
:root[data-script="noto"] { --font-arabic: "Noto Naskh Arabic", "Amiri Quran", serif; }
:root[data-script="indopak"] { --font-arabic: "Lateef", "Noto Naskh Arabic", serif; --arabic-leading: 1.15; }
:root[data-script="nastaliq"] { --font-arabic: "Noto Nastaliq Urdu", "Lateef", serif; --arabic-leading: 1.35; }
.header-tools { display: flex; align-items: center; gap: .75rem; }
.prefs { display: flex; gap: .15rem; }
.prefs button { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: .35rem; padding: .25rem .45rem; font: inherit; font-size: .8rem; cursor: pointer; }
.prefs button.current { background: rgba(255,255,255,.35); }
.theme-toggle { display: inline-grid; place-items: center; min-width: 2rem; min-height: 1.75rem; }
.theme-toggle svg { display: block; }
.theme-toggle .sun, .theme-toggle.dark .moon { display: none; }
.theme-toggle.dark .sun { display: block; }

.verse .t, .hit .text, .two-columns .t { font-size: calc(1.12rem * var(--text-scale)); }
.verse .arabic { font-family: var(--font-arabic); font-size: calc(1.75rem * var(--text-scale)); line-height: calc(2 * var(--arabic-leading)); margin: 0 0 .35rem; color: var(--ink); }
.verse { grid-template-columns: 2.4rem 1fr; }
.verse .body { min-width: 0; }
/* the playing verse is marked by its Arabic fill (or the outline below): no edge bar, it crowded the number ring */
/* the playing verse: its number ring turns green and so do the rules above and below it
   (the one above is the previous verse's bottom rule); the result card does the same with its reference */
.verse.playing .n { border-color: var(--green); color: var(--green-deep); }
.verse.playing, .verse:has(+ .verse.playing), .hit.playing, .hit:has(+ .hit.playing) { border-bottom-color: var(--green); }
.hit.playing .ref a { color: var(--green-deep); }
:root[data-theme="dark"] .verse.playing .n, :root[data-theme="dark"] .hit.playing .ref a { color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .verse.playing .n, :root:not([data-theme="light"]) .hit.playing .ref a { color: var(--green); } }
/* recitation follows the Arabic: a soft fill moves right-to-left through the verse as it is read */
.verse .arabic > span, .aya { --progress: 0%; }
/* the fill hugs the words (an inline box), so on a long verse it runs line by line in reading order */
.verse.playing .arabic { color: var(--recite-ink); }
/* word-by-word (reciters with timings): the word being recited is lit, the words already read keep the ink */
.w { border-radius: .2em; transition: background-color .12s ease, color .12s ease; }
.playing .w.read { color: var(--recite-ink); }
.playing .w.now { background: var(--recite); color: var(--recite-ink); box-shadow: 0 0 0 .12em var(--recite); }
.playing [data-words] .w:not(.read):not(.now), .playing[data-words] .w:not(.read):not(.now) { color: var(--ink); }
.verse.playing .arabic > span { padding: .05em .15em; border-radius: .3em;
  background: linear-gradient(to left, var(--recite) var(--progress), color-mix(in srgb, var(--recite) 30%, transparent) var(--progress)); }
.basmala { font-family: var(--font-arabic); font-size: 1.8rem; text-align: center; color: var(--maroon); margin: .5rem 0 1rem; }
.sura-head { position: sticky; top: 0; background: var(--page); z-index: 5; padding-block: .5rem; border-bottom: 1px solid var(--line); }
.reader-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.modes { display: flex; gap: .2rem; flex-wrap: wrap; }
.modes a { font-size: .85rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-soft); }
.modes a.current { background: var(--button); border-color: var(--button); color: #fff; }
/* on a phone fewer pills: two translations side by side need room, and Arabic-only is the mushaf's job
   there (owner, 2026-11-02); both modes stay reachable by their addresses */
@media (max-width: 480px) { .modes a[data-mode="dy"], .modes a[data-mode="arabisht"] { display: none; } }
.arabic-flow { font-family: var(--font-arabic); font-size: calc(2rem * var(--text-scale)); line-height: calc(2.2 * var(--arabic-leading)); text-align: justify; padding-block: 1rem; }
/* ayah markers: the typeface's own end-of-ayah ornament (۝ composed with the Arabic-Indic digits);
   the Madinah face ornaments its digits by itself, so it gets the digits alone */
.aya-end { color: var(--green-deep); text-decoration: none; margin: 0 .1em; font-family: var(--font-arabic); }
.aya-end:hover { color: var(--maroon); }
/* the Madinah face (the default, also when no face was ever chosen) ornaments its own digits;
   the other faces compose the ring glyph ۝ with the digits */
.aya-end .glyph, :root[data-script]:not([data-script="uthmani"]) .aya-end .plain { display: none; }
:root[data-script]:not([data-script="uthmani"]) .aya-end .glyph { display: inline; }
:root[data-theme="dark"] .aya-end { color: var(--green); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aya-end { color: var(--green); } }
.two-columns .col-head { display: grid; grid-template-columns: 2.4rem 1fr 1fr; gap: 1rem; font-size: .85rem; color: var(--ink-soft); padding-block: .5rem; }
.two-columns .col-head span:first-child { grid-column: 2; }
.two-columns .row { display: grid; grid-template-columns: 2.4rem 1fr 1fr; gap: .5rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.two-columns .n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font-size: .85rem; text-decoration: none; }
.two-columns .t { font-family: var(--font-text); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .85rem; margin-top: .4rem; }
.actions button span, .actions .share summary span { display: none; }
@media (min-width: 640px) { .actions button span, .actions .share summary span { display: inline; } }
.actions .bookmark.on { color: var(--gold); }
details.share { position: relative; display: inline-block; }
details.share summary { list-style: none; cursor: pointer; color: var(--ink-soft); }
details.share summary::-webkit-details-marker { display: none; }
details.share summary:hover { color: var(--maroon); }
.share-sheet { position: absolute; z-index: 40;   /* above the sticky player (30) */ inset-inline-start: 0; top: 1.6rem; background: var(--page); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; min-width: 17rem; }
.share-sheet a, .share-sheet button { font: inherit; font-size: .9rem; text-align: start; padding: .45rem .6rem; border: 0; background: none; color: var(--ink); text-decoration: none; border-radius: .4rem; cursor: pointer; }
.share-sheet a:hover, .share-sheet button:hover { background: var(--cream); }
.share-sheet .native { grid-column: 1 / -1; font-weight: 600; }
/* monochrome network glyphs (Simple Icons, CC0): they take the text colour, so they fit every theme */
.ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: currentColor; margin-inline-end: .2em; flex: none; }
.share-sheet a, .share-sheet button { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.share-sheet .ico { width: 1.15rem; height: 1.15rem; color: var(--ink-soft); }
.share-sheet a:hover .ico, .share-sheet button:hover .ico { color: var(--maroon); }
/* on hover each network shows its own colour */
.share-sheet .wa:hover .ico { color: #25d366; }
.share-sheet .fb:hover .ico { color: #0866ff; }
.share-sheet .x:hover .ico { color: var(--ink); }
.share-sheet .tg:hover .ico { color: #26a5e4; }
.share-sheet .vb:hover .ico { color: #7360f2; }
.share-sheet .ig:hover .ico { color: #e4405f; }
.share-sheet .ico { transition: color .15s ease; }
details.share summary .ico { width: 1em; height: 1em; }
@media (max-width: 640px) { .two-columns .row, .two-columns .col-head { grid-template-columns: 2.2rem 1fr; } .two-columns .row .t + .t { grid-column: 2; border-top: 1px dashed var(--line); padding-top: .4rem; } .two-columns .col-head { display: flex; flex-wrap: wrap; gap: .4rem; } .two-columns .col-head > span:first-child { display: none; } }

/* ---- mushaf page mode ------------------------------------------------------------------- */
.mushaf-page { max-width: 40rem; margin: 1rem auto; padding: 1.5rem 1.25rem; background: var(--cream); border: 1px solid var(--line); border-radius: .4rem; box-shadow: inset 0 0 0 6px var(--page), inset 0 0 0 7px var(--gold); font-family: var(--font-arabic); font-size: calc(1.9rem * var(--text-scale)); line-height: calc(2.1 * var(--arabic-leading)); text-align: justify; }
.mushaf-page .flow { margin: 0; }
.mushaf-page .sura-banner { text-align: center; font-size: 1.1em; font-weight: 400; margin: .5rem 0 .25rem; padding: .3rem; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.mushaf-page .sura-banner a { color: var(--maroon); text-decoration: none; }
.mushaf-page .basmala { margin: .25rem 0 .5rem; font-size: .95em; }
.goto { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.goto input { width: 4.5rem; font: inherit; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--page); color: var(--ink); }
.goto select { font: inherit; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--page); color: var(--ink); }

/* ---- hadith pages ------------------------------------------------------------------------ */
.chapters { padding-inline-start: 1.5rem; } .chapters li { padding-block: .3rem; } .chapters .count { color: var(--ink-soft); font-size: .85em; }
.hadith-numbers { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; } .hadith-numbers a { display: inline-block; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: .3rem; text-decoration: none; }
.hadith { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.hadith-head { display: flex; gap: .75rem; align-items: center; margin-bottom: .4rem; }
.hadith .n { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding-inline: .3rem; border-radius: 1.1rem; border: 1.5px solid var(--gold); color: var(--gold); font-size: .85rem; font-weight: 600; text-decoration: none; }
.hadith .grade { font-size: .8rem; color: var(--ink-soft); }
.hadith .t { font-family: var(--font-text); font-size: calc(1.08rem * var(--text-scale)); margin: 0; white-space: pre-line; }
.arguments { background: var(--cream); border-inline-start: 3px solid var(--gold); padding: .6rem 1rem; margin-block: 1rem; border-radius: .3rem; }
.arguments h3 { margin: 0 0 .4rem; font-size: .85rem; color: var(--ink-soft); } .arguments .t { font-family: var(--font-text); margin: .3rem 0; }

/* ---- result cards: full text and actions --------------------------------------------- */
.hit .ref .grade { font-size: .8em; }
/* the full text continues where the excerpt stood: the excerpt hides, the toggle moves below and reads "close" */
.hit .fulltext { margin-top: .3rem; } .hit .fulltext summary { cursor: pointer; color: var(--blue); font-size: .85rem; list-style: none; }
.hit .fulltext summary::-webkit-details-marker { display: none; }
.hit .fulltext summary .less, .hit .fulltext[open] summary .more { display: none; }
.hit .fulltext[open] summary .less { display: inline; }
.hit .fulltext[open] { display: flex; flex-direction: column; gap: .4rem; }
.hit .fulltext[open] summary { order: 2; }
.hit .text:has(+ .fulltext[open]) { display: none; } .hit .fulltext .t { font-family: var(--font-text); font-size: calc(1.05rem * var(--text-scale)); margin: .4rem 0 0; white-space: pre-line; }
.hit .actions { margin-top: .5rem; } .hit .actions a:last-child { margin-inline-start: auto; }
.hit .tafsir { margin-top: .5rem; }
.back-to-search { display: inline-block; margin-block: .9rem 0; padding: .35rem .8rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; }
.back-to-search:hover { border-color: var(--green); }
.routed { margin-block: 1rem; } .routed a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--green); border-radius: .5rem; text-decoration: none; color: var(--ink); background: var(--cream); font-weight: 600; } .routed a:hover { background: var(--green); color: #fff; }
.note { background: var(--cream); border-inline-start: 3px solid var(--green); padding: .5rem .9rem; border-radius: .3rem; font-size: .9rem; margin-block: .6rem; }

/* ---- player bar ------------------------------------------------------------------------ */
.player { position: sticky; bottom: 0; z-index: 30; background: var(--page); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.08); padding-bottom: env(safe-area-inset-bottom, 0px); }
.player-row { display: flex; align-items: center; gap: 1rem; padding-block: .5rem; }
.player .wave { width: 160px; height: 44px; flex: none; }
.player-main { flex: 1; min-width: 0; }
.player-title { font-size: .85rem; display: flex; gap: .6rem; align-items: baseline; }
.player-title .now { font-weight: 700; color: var(--maroon); }
.player-controls { display: flex; align-items: center; gap: .5rem; }
.player-controls button { font: inherit; font-size: 1rem; background: none; border: 1px solid var(--line); border-radius: 50%; width: 2rem; height: 2rem; cursor: pointer; color: var(--ink); }
.player-controls .toggle { background: var(--button); color: #fff; border-color: var(--button); width: 2.4rem; height: 2.4rem; }
.player-controls .seek { flex: 1; min-width: 4rem; accent-color: var(--green); }
.player-controls .time { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-controls .close { border: 0; }
.player-controls select.repeat { font: inherit; font-size: .8rem; padding: .15rem .2rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--page); color: var(--ink); }
.player-controls .loop { display: inline-flex; align-items: center; gap: .15rem; font-size: 1rem; cursor: pointer; color: var(--ink-soft); }
.player-controls .loop input { accent-color: var(--green); margin: 0; }
.player-controls .loop:has(input:checked) { color: var(--green-deep); }
@media (max-width: 560px) { .player .wave { width: 90px; } .player-controls .time { display: none; } }
.player-title .reciter { font: inherit; font-size: .85rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--page); color: var(--ink); padding: .1rem .3rem; max-width: 60vw; }
.aya.playing { color: var(--recite-ink); border-radius: .3em; padding: .05em .15em;
  background: linear-gradient(to left, var(--recite) var(--progress), color-mix(in srgb, var(--recite) 30%, transparent) var(--progress)); }
.play-page { font: inherit; font-size: .85rem; padding: .3rem .8rem; border: 1px solid var(--green); border-radius: 999px; background: var(--cream); color: var(--ink); cursor: pointer; }
.play-page:hover { background: var(--green); color: #fff; }
/* the sura page's play button: round, filled, at the end of the title (study 2026-11-01, option B) */
.sura-title .play-round { align-self: center; margin-inline-start: auto; width: 2.7rem; height: 2.7rem; padding: 0; border: 0; border-radius: 50%; background: var(--green-deep); color: #fff; display: inline-grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.22); cursor: pointer; }
.sura-title .play-round svg { margin-inline-start: 2px; }
.sura-title .play-round:hover { background: var(--green-deep); filter: brightness(1.1); }
/* "Aa": the script settings in a small sheet under the row, like the translation picker */
.text-pick { position: relative; display: inline-block; font-size: .9rem; }
.text-pick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; min-height: 2.3rem; padding: .25rem .6rem .25rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--cream); color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.text-pick summary::-webkit-details-marker { display: none; }
.text-pick summary:hover, .text-pick[open] summary { border-color: var(--green); }
.text-pick .caret { color: var(--ink-soft); font-size: .85em; }
.text-pick .pick-panel { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + .3rem); min-width: 17rem; max-width: calc(100vw - 2rem); background: var(--page); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .7rem .8rem; display: grid; gap: .5rem; }
.text-pick .pick-panel .script-pick { display: grid; grid-template-columns: auto 1fr; min-width: 0; }
.text-pick .pick-panel .script-pick select { width: 100%; min-width: 0; box-sizing: border-box; }
.text-pick .pick-panel .tajweed-pick { margin-inline-start: 0; }
.text-pick .pick-panel .tj-legend { margin: 0; }
.script-pick { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.script-pick select { font: inherit; font-size: .85rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--page); color: var(--ink); }

/* ---- phones (≤ 600px): header in two rows, finger-sized controls, share as a bottom sheet ---- */
html { -webkit-text-size-adjust: 100%; }
/* app-like controls on touch screens: no grey tap flash, no double-tap zoom on buttons and pills */
button, .pager a, .modes a, .tabs a, .actions a, .site-nav a, .langs a, .aya-end, .verse .n { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-variant-emoji: text; }
@media (max-width: 600px) {
  .two-columns .col-head .translation-pick summary { padding-inline: .5rem; }
  .pick-list { min-width: 12rem; }
  .header-row { flex-wrap: wrap; gap: .4rem .75rem; padding-block: .6rem .5rem; }
  .brand { flex: 1 1 auto; gap: .6rem; }
  .brand-icon { width: 44px; height: 44px; }
  .brand-wordmark { display: block; height: 2rem; max-width: calc(100vw - 110px); }
  .header-tools { flex: 1 0 100%; justify-content: space-between; gap: .5rem; }
  .langs { gap: .1rem; }
  .langs a, .prefs button { min-width: 1.9rem; min-height: 2.2rem; padding: 0 .3rem; }
  .prefs button { display: inline-grid; place-items: center; }
  .langs a { justify-content: center; gap: .25rem; }
  .prefs { gap: .1rem; }
  /* the sura header stays put on a phone: sticky, it would cover a third of the screen */
  .sura-head { position: static; }
  /* the action row is icons only here; give each a finger-sized box */
  .actions { gap: .25rem .4rem; }
  .actions > a, .actions > button, .actions .share summary { display: inline-grid; place-items: center; min-width: 2.4rem; min-height: 2.2rem; }
  /* the share sheet as a bottom sheet, one column of tall rows */
  .share-sheet { position: fixed; inset-inline: .75rem; top: auto; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); min-width: 0; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .6rem; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
  .share-sheet a, .share-sheet button { padding: .7rem .7rem; font-size: 1rem; }
  /* iOS zooms the page when a focused control is smaller than 16px */
  .goto input, .goto select, .script-pick select, .player select { font-size: 1rem; }
  .goto input { width: 4rem; }
  .modes a { padding: .4rem .8rem; }
  /* finger-sized: the ayah rings in running text, the pager pills, the tajweed box */
  .aya-end { display: inline-block; min-width: 1.6em; text-align: center; }
  .pager .turn, .pager .side a { min-height: 2.4rem; display: inline-flex; align-items: center; }
  .tajweed-pick { min-height: 2.2rem; }
  .tajweed-pick input { width: 1.1rem; height: 1.1rem; }
  /* the player: a narrower wave, the title in one line that ellipsises */
  .player-row { gap: .6rem; }
  .player .wave { display: none; }   /* decorative; the repeat controls need the room */
  .player-controls { gap: .4rem; }
  .player-title { white-space: nowrap; overflow: hidden; }
  .player-title > * { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .player-title .now { flex: none; }
}

/* ---- home page: intro, quick links, the verse of the day; hidden once results are shown ---- */
#results:not(:empty) ~ .home { display: none; }
.home .intro { color: var(--ink-soft); max-width: 60ch; margin: .25rem 0 1rem; }
/* where you left off (site.js, localStorage): one line on the home and Kuran pages */
.continue { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .25rem 0 1.25rem; padding: .7rem .9rem; border: 1px solid var(--line); border-inline-start: 3px solid var(--green); border-radius: .3rem; background: var(--cream); color: var(--ink); text-decoration: none; min-height: 2.6rem; }
.continue .where { font-weight: 600; }
.continue .arrow { margin-inline-start: auto; color: var(--green-deep); }
.continue:hover { border-color: var(--green); }
.continue[hidden] { display: none; }   /* the display rule above would otherwise win over the attribute: an empty card showed on a first visit (live, 2026-11-02) */
.bookmarks h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.bookmarks ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.bookmarks a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: .5rem; text-decoration: none; color: var(--ink); min-height: 2.4rem; }
.bookmarks a .k { color: var(--maroon); font-weight: 600; font-variant-numeric: tabular-nums; }
.daily { margin-bottom: 1.5rem; }
.daily h2 { margin-bottom: 0; }
.daily h2 .muted { font-weight: 400; font-size: .8em; }
.daily .verse { border-bottom: 0; }
/* info page */
.info { max-width: 70ch; }
.sources { border-collapse: collapse; width: 100%; font-size: .95rem; }
.sources th, .sources td { text-align: start; vertical-align: top; padding: .5rem .6rem; border-top: 1px solid var(--line); }
.sources th { white-space: nowrap; color: var(--maroon); font-weight: 600; width: 11rem; }
@media (max-width: 600px) { .sources th, .sources td { display: block; width: auto; padding-inline: 0; } .sources th { border-top: 1px solid var(--line); padding-bottom: 0; } .sources td { border-top: 0; padding-top: .2rem; } }


/* ---- tajweed colours (data/quran/ar.tajweed.jsonl): madd in reds by length, ghunnah green,
   idgham teal/brown, ikhfa blue, iqlab purple, qalqalah indigo, unpronounced grey, الله maroon ---- */
:root { --tj-madd2: #e08a00; --tj-madd246: #e8601c; --tj-madd45: #d32f2f; --tj-madd6: #9c0d16; --tj-ghunnah: #2e8b3a; --tj-idgham: #0e8a7a; --tj-idgham2: #7a5230; --tj-ikhfa: #1f6fd6; --tj-iqlab: #8e34b5; --tj-qalqalah: #3f4fc2; --tj-silent: #9a9a9a; }
:root[data-theme="dark"] { --tj-madd2: #ffb74d; --tj-madd246: #ff8a65; --tj-madd45: #ef5350; --tj-madd6: #ff5252; --tj-ghunnah: #66d17a; --tj-idgham: #4dd0c0; --tj-idgham2: #c8a27a; --tj-ikhfa: #64a7ff; --tj-iqlab: #ce93d8; --tj-qalqalah: #9fa8ff; --tj-silent: #8a8a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tj-madd2: #ffb74d; --tj-madd246: #ff8a65; --tj-madd45: #ef5350; --tj-madd6: #ff5252; --tj-ghunnah: #66d17a; --tj-idgham: #4dd0c0; --tj-idgham2: #c8a27a; --tj-ikhfa: #64a7ff; --tj-iqlab: #ce93d8; --tj-qalqalah: #9fa8ff; --tj-silent: #8a8a8a; } }
.tj.madd_2 { color: var(--tj-madd2); }
.tj.madd_246 { color: var(--tj-madd246); }
.tj.madd_muttasil, .tj.madd_munfasil { color: var(--tj-madd45); }
.tj.madd_6 { color: var(--tj-madd6); }
.tj.ghunnah { color: var(--tj-ghunnah); }
.tj.idghaam_ghunnah, .tj.idghaam_shafawi, .tj.idghaam_mutajanisayn, .tj.idghaam_mutaqaribayn { color: var(--tj-idgham); }
.tj.idghaam_no_ghunnah { color: var(--tj-idgham2); }
.tj.ikhfa, .tj.ikhfa_shafawi { color: var(--tj-ikhfa); }
.tj.iqlab { color: var(--tj-iqlab); }
.tj.qalqalah { color: var(--tj-qalqalah); }
.tj.hamzat_wasl, .tj.lam_shamsiyyah, .tj.silent { color: var(--tj-silent); }
.tj.allah { color: var(--maroon); }
/* the recitation highlight keeps the colours: only the word being read gets the green box */
.playing .w.read .tj, .playing .w.now .tj { color: inherit; }
.tajweed-pick { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; margin-inline-start: .6rem; cursor: pointer; }
.tajweed-pick input { accent-color: var(--green); }
.tj-legend { font-size: .85rem; margin: .4rem 0 0; color: var(--ink-soft); }
.tj-legend summary { cursor: pointer; }
.tj-legend ul { list-style: none; padding: 0; margin: .3rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .15rem .8rem; }
.tj-legend .tj { font-size: 1.1em; margin-inline-end: .1em; }
.tj-legend p { margin: .2rem 0 0; font-size: .8rem; }

/* ---- mushaf: page turns in place (site.js turnPage), the page follows the finger, reading mode ---- */
main.turning { transition: transform .17s ease, opacity .17s ease; }
.mushaf-page { touch-action: pan-y; transition: transform .2s ease; will-change: transform; }
.mushaf-page.dragging { transition: none; }
.reading-exit, .reading-page-no { display: none; }
:root.reading .site-header, :root.reading .menubar, :root.reading .mushaf-head, :root.reading .mushaf-pager, :root.reading .site-footer, :root.reading .back-to-search { display: none; }
:root.reading body { background: var(--cream); }
:root.reading main { padding-inline: 0; max-width: none; }
/* a band at the top for the ✕, so it never sits on the first line of the page */
:root.reading .mushaf-page { max-width: 46rem; margin: 0 auto; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; padding: calc(3.1rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) calc(3.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }
:root.reading .reading-exit { display: grid; place-items: center; position: fixed; top: calc(.3rem + env(safe-area-inset-top, 0px)); inset-inline-end: calc(.5rem + env(safe-area-inset-right, 0px)); z-index: 50; width: 2.6rem; height: 2.6rem; border: 1px solid color-mix(in srgb, var(--ink) 25%, var(--line)); border-radius: 50%; background: var(--page); color: var(--ink); font-size: 1.25rem; font-weight: 600; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
:root.reading .reading-exit:hover { border-color: var(--maroon); color: var(--maroon); }
/* page arrows for a mouse: a phone swipes instead, so they appear only on hover-capable devices */
.reading-turn { display: none; }
@media (hover: hover) and (pointer: fine) {
  :root.reading .reading-turn { display: grid; place-items: center; position: fixed; top: 50%; transform: translateY(-50%); z-index: 50; width: 3rem; height: 3.6rem; border: 1px solid var(--line); border-radius: .6rem; background: color-mix(in srgb, var(--page) 80%, transparent); color: var(--ink-soft); font-size: 2.2rem; line-height: 1; padding: 0 0 .3rem; cursor: pointer; opacity: .55; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
  :root.reading .reading-turn.next { left: calc(.6rem + env(safe-area-inset-left, 0px)); }
  :root.reading .reading-turn.prev { right: calc(.6rem + env(safe-area-inset-right, 0px)); }
  :root.reading .reading-turn:hover { opacity: 1; color: var(--green-deep); border-color: var(--green); }
}
/* the selected ayah (a tap in reading mode) and its small menu: listen, or open the verse */
.aya.selected { background: color-mix(in srgb, var(--green) 12%, transparent); border-radius: .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.aya.selected .aya-end { color: var(--maroon); }
.aya-menu { position: fixed; z-index: 55; display: flex; align-items: center; gap: .2rem; padding: .2rem .25rem .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.18); font-family: var(--font-ui); font-size: .9rem; white-space: nowrap; direction: ltr; }
.aya-menu[hidden] { display: none; }
.aya-menu .key { color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-inline-end: .35rem; }
.aya-menu button, .aya-menu a { font: inherit; min-height: 2.3rem; padding: 0 .8rem; border: 0; border-radius: 999px; background: none; color: var(--ink); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.aya-menu .play-aya { background: var(--green-deep); color: #fff; font-weight: 600; }
.aya-menu .play-aya:hover { background: var(--green); }
.aya-menu .open-aya:hover { color: var(--maroon); }
/* the translation of the selected ayah, as a sheet along the bottom (above the player when it shows) */
.aya-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 45vh; max-height: 45dvh; overflow: auto; background: var(--page); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.14); padding: .8rem max(1rem, env(safe-area-inset-right, 0px)) calc(.9rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; text-align: start; }
.aya-sheet[hidden] { display: none; }
.aya-sheet .body { max-width: 44rem; margin: 0 auto; padding-inline-end: 2.4rem; }
.aya-sheet .body p { margin: 0 0 .4rem; }
.aya-sheet .body .t { font-family: var(--font-text); font-size: 1.05rem; }
.aya-sheet .body a { color: var(--maroon); text-decoration: none; font-weight: 600; }
.aya-sheet .x { position: absolute; top: .5rem; inset-inline-end: .6rem; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--page); color: var(--ink-soft); font: inherit; cursor: pointer; }
:root.reading .reading-page-no { display: block; position: fixed; bottom: calc(.55rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 50; font-size: .8rem; color: var(--ink-soft); padding: .15rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--page) 80%, transparent); white-space: nowrap; }
:root.reading .player { z-index: 60; }
/* the one filled green control on the page: the small pills are outlined or maroon, so it is found at a glance */
/* small enough to sit inside the band the title already leaves above itself: nothing moves down for it */
.mushaf-head { position: relative; }
.mushaf-top { position: absolute; top: .55rem; inset-inline-end: 0; }
.mushaf-head .sura-title { margin-top: 2.1rem; }   /* the band above the title holds the button with air on both sides */
.focus-mode { font: inherit; font-size: .8rem; font-weight: 600; min-height: 1.7rem; padding: .2rem .75rem; border: 0; border-radius: 999px; background: var(--green-deep); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 1px 5px rgba(0,0,0,.2); }
.focus-mode svg { width: 14px; height: 14px; }
.focus-mode:hover { filter: brightness(1.08); }
.focus-mode:active { transform: translateY(1px); }

/* ---- feedback: the form anyone may send, the list only the owner sees ---- */
.feedback form { display: grid; gap: .9rem; max-width: 40rem; }
.feedback label { display: grid; gap: .3rem; font-weight: 600; }
.feedback textarea, .feedback input[type="text"], .feedback input[type="password"], .feedback select { font: inherit; font-weight: 400; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--page); color: var(--ink); width: 100%; box-sizing: border-box; }
.feedback .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback button { font: inherit; padding: .65rem 1.2rem; border: 0; border-radius: .6rem; background: var(--button); color: #fff; cursor: pointer; }
.feedback-list { border-collapse: collapse; width: 100%; }
.feedback-list td { vertical-align: top; padding: .6rem .5rem; border-top: 1px solid var(--line); }
.feedback-list .when { white-space: nowrap; font-size: .9rem; }
.feedback-list .text { white-space: pre-line; margin: 0 0 .3rem; }
.feedback-list p { margin: 0; }
.feedback form .note { margin: 0; }
.feedback img.captcha { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: .5rem; }
.feedback input[name="captcha"] { max-width: 14rem; letter-spacing: .2em; text-transform: uppercase; }
.oops { max-width: 40rem; }
.oops .links { margin-top: 1.5rem; }

/* ---- the owner's mailbox ---- */
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inbox-head h1 { margin: 0; }
.inbox .badge { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--button); color: #fff; font-size: .9rem; font-weight: 700; vertical-align: middle; }
.inbox .quiet { font: inherit; font-size: .9rem; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink-soft); cursor: pointer; }
.inbox .filters { display: flex; gap: 1rem; margin: 1rem 0 .5rem; }
.inbox .filters a { color: var(--ink-soft); text-decoration: none; padding-bottom: .2rem; border-bottom: 2px solid transparent; }
.inbox .filters a.current { color: var(--ink); border-bottom-color: var(--button); }
.inbox .filters .count { color: var(--ink-soft); font-size: .85rem; }
.messages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.messages li { border-bottom: 1px solid var(--line); }
.messages a { display: grid; grid-template-columns: .8rem 1fr; grid-template-rows: auto auto; column-gap: .6rem; padding: .7rem .2rem; color: var(--ink); text-decoration: none; }
.messages a:hover { background: var(--cream); }
.messages .dot { grid-row: 1 / span 2; align-self: center; width: .55rem; height: .55rem; border-radius: 50%; background: var(--button); }
.messages .read .dot { background: transparent; }
.messages .meta { font-size: .82rem; color: var(--ink-soft); }
.messages .snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages .unread .snippet { font-weight: 600; }
.message { border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.1rem; max-width: 44rem; }
.message .meta { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.message .text { white-space: pre-line; font-size: 1.05rem; margin: 0 0 .8rem; }
.message form { margin-top: .8rem; }

/* ---- the launch note on the home page (design D, 2026-11-02): the 14-year stamp, the text, pills at the end ---- */
.welcome { position: relative; border: 1px solid var(--line); border-radius: .8rem; padding: 1rem 1.1rem 1.1rem; margin: 1rem 0; background: var(--cream); }
.welcome h2 { margin: 0 0 .5rem; font-size: 1.15rem; padding-inline-end: 1.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome p { margin: 0 0 .5rem; }
.welcome .ask { color: var(--ink-soft); margin: .2rem 0 .55rem; }
/* a rubber stamp: a double ring, tilted, ink-red, lettering in small caps, inked into the paper */
.welcome .stamp { --ink: #9b2d2d; float: inline-end; margin: .1rem 0 .6rem 1rem; width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 5px double var(--ink); color: var(--ink); display: grid; place-content: center; text-align: center; line-height: 1; transform: rotate(-12deg); opacity: .9; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 65%); mix-blend-mode: multiply; font-family: "Helvetica Neue", Arial, sans-serif; }
.welcome .stamp b { font-size: 1.9rem; font-weight: 800; display: block; letter-spacing: -.02em; }
.welcome .stamp small { font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: .15rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .welcome .stamp { --ink: #e07a6a; mix-blend-mode: normal; background: none; } }
:root[data-theme="dark"] .welcome .stamp { --ink: #e07a6a; mix-blend-mode: normal; background: none; }
.welcome .dismiss { position: absolute; top: .35rem; inset-inline-end: .35rem; width: 2rem; height: 2rem; border: 0; background: none; font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; }
.welcome .buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; clear: both; }
.welcome .pill, .welcome .buttons details.share summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: .4rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink); text-decoration: none; font-weight: 500; }
.welcome .pill:hover { border-color: var(--green); }
.welcome .buttons details.share summary { background: var(--button); border-color: var(--button); color: #fff; font-weight: 600; }
.welcome .buttons details.share summary .ico { color: #fff; }
.welcome .follow { margin-top: .7rem; }
/* ---- help: one short guide per feature ---- */
.help section { margin: 2rem 0; max-width: 44rem; }
.help h2 { margin: 0 0 .4rem; }
.help video { display: block; width: 100%; max-width: 20rem; height: auto; border: 1px solid var(--line); border-radius: .8rem; margin: .6rem 0; background: #000; }
.help .hot video { max-width: 22rem; }

/* ---- "Na ndiqni": the Facebook page ---- */
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .6rem 0 0; }
.follow a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--page); }
.follow a:hover { border-color: var(--green); }
.follow .ico { width: 1.1rem; height: 1.1rem; }
.follow a.fb:hover .ico { color: #1877f2; }
.follow.in-footer { margin: 0 0 .6rem; }
.site-footer .follow { margin-bottom: .6rem; }   /* the footer links themselves stay on one line */