/* صدقة جارية عن محمد بن علي آل تركي الشهري رحمه الله. Design "فجر": dawn over the Asir highlands.
   Tokens, fonts and base first; the header, home and page language next; the engine's components (Quran reader,
   Mushaf, prayer, live wall, player bars) after; phone rules last. Logical properties throughout (13 languages). */
@font-face { font-family: "Hafs"; font-display: swap; src: url("../fonts/hafs.woff2") format("woff2"); }
@font-face { font-family: "QuranAlt"; font-display: swap; src: url("../fonts/scheherazade-new.woff2") format("woff2"); }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/amiri-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/amiri-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/amiri-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/amiri-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --page: #f3f5f1;
  --page-deep: #e7ece5;
  --surface: #ffffff;
  --surface-2: #f6f8f4;
  --ink: #1c2a24;
  --ink-soft: #46574e;
  --ink-faint: #56665d;
  --sage: #5f8574;           /* lines, icons, fills: never carries words */
  --sage-deep: #3b5d4d;      /* sage wherever it carries words */
  --sage-soft: rgba(95, 133, 116, .12);
  --gold: #b8934f;           /* hairlines and the mark only */
  --gold-deep: #7a5c27;      /* gold that carries words */
  --dawn: rgba(236, 186, 160, .38);
  --rule: rgba(95, 133, 116, .26);
  --rule-strong: rgba(95, 133, 116, .5);
  --primary: #3b5d4d;
  --primary-ink: #ffffff;
  --band: #1f3a2e;           /* the header band: deep green in both themes, never pale */
  --band-ink: #f1f5ee;
  --band-soft: #c3d4ca;
  --band-accent: #a9cdb9;
  --band-rule: rgba(255, 255, 255, .14);
  --veil: rgba(243, 245, 241, .9);
  --shadow: 0 1px 2px rgba(28, 42, 36, .04), 0 10px 30px rgba(28, 42, 36, .06);
  --shadow-2: 0 18px 50px rgba(28, 42, 36, .14);
  --mark-line: #3b5d4d;
  --mark-sun: #b8934f;
  --radius: 18px;
  --ui: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", Tahoma, sans-serif;
  --display: "Amiri", "IBM Plex Sans Arabic", "Noto Naskh Arabic", Georgia, serif;
  --naskh: "Amiri", "IBM Plex Sans Arabic", "Noto Naskh Arabic", serif;
  --content: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --quran-size: 26px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0c1a16;
  --page-deep: #08130f;
  --surface: #13261f;
  --surface-2: #193029;
  --ink: #edf1ea;
  --ink-soft: #bccabf;
  --ink-faint: #a9b8ad;
  --sage: #9cc3b0;
  --sage-deep: #a6ccb9;
  --sage-soft: rgba(156, 195, 176, .12);
  --gold: #dcbb82;
  --gold-deep: #e2c48f;
  --dawn: rgba(120, 140, 190, .22);
  --rule: rgba(156, 195, 176, .2);
  --rule-strong: rgba(156, 195, 176, .42);
  --primary: #9cc3b0;
  --primary-ink: #0c1a16;
  --band: #0f211b;
  --band-ink: #edf1ea;
  --band-soft: #b9c9be;
  --band-accent: #9cc3b0;
  --band-rule: rgba(156, 195, 176, .2);
  --veil: rgba(12, 26, 22, .88);
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .22);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .45);
  --mark-line: #9cc3b0;
  --mark-sun: #dcbb82;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { border: 0; color: inherit; background: none; font: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
svg { display: block; }
svg[fill="currentColor"] { fill: currentColor; }
html[dir="rtl"] svg.dir { transform: scaleX(-1); }
h1, h2, h3 { line-height: 1.3; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--ink-soft); }
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* the page's scene: fixed behind everything at low strength, veiled toward the content (body::before).
   Each page names its scene on its main (main.scene-*), so the home shell switches it with the view. */
body::before { content: ""; position: fixed; inset: 0 0 -12vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page) 38%, transparent) 0, color-mix(in srgb, var(--page) 74%, transparent) 260px, var(--veil) 520px), var(--scene, none) center top / cover no-repeat;
  transform: translate3d(0, calc(var(--page-shift, 0px) * -1), 0); }
body.home:has(> #main-content:not([hidden]))::before { background: var(--page); }

/* ===== header: one slim translucent band over the scene; brand at the start, the nav, then theme and language ===== */
.site-header { position: sticky; inset-block-start: 0; z-index: 30; background: var(--band); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border-block-end: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); color: var(--band-ink); --mark-line: #a9cdb9; --mark-sun: #dcbb82; transition: box-shadow .3s var(--ease); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23dcbb82' stroke-width='1'%3E%3Cpath d='M36 4l7 25 25 7-25 7-7 25-7-25-25-7 25-7z'/%3E%3Ccircle cx='36' cy='36' r='3.5'/%3E%3Cpath d='M0 36h4M68 36h4M36 0v4M36 68v4'/%3E%3C/svg%3E"); background-size: 72px 72px; background-position: center top; }
html[data-theme="dark"] .site-header::before { opacity: .14; }
.site-header .subnav, .site-header .stats { border-block-start-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.site-header.scrolled { box-shadow: 0 8px 30px rgba(28, 42, 36, .07); }
.header-inner { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; min-height: 68px; display: flex; align-items: center; gap: clamp(14px, 2.6vw, 40px); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.brand-mark { width: 46px; height: 46px; flex: none; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; min-width: 0; }
.brand-kicker { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--band-accent); letter-spacing: .2px; }
.brand-name { font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1.4; color: var(--band-ink); white-space: nowrap; }
.brand-name .brand-rip { font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--band-soft); margin-inline-start: 4px; }
.main-nav { flex: 1; display: flex; justify-content: center; gap: clamp(12px, 2vw, 30px); min-width: 0; }
.main-nav a { position: relative; padding: 22px 2px; font-size: 15px; font-weight: 500; color: var(--band-soft); white-space: nowrap; transition: color .2s var(--ease); }
.main-nav a::after { content: ""; position: absolute; inset-inline: 30%; inset-block-end: 14px; height: 5px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .25s var(--ease); }
.main-nav a:hover { color: var(--band-ink); }
.main-nav a[aria-current="page"] { color: var(--band-ink); font-weight: 600; }
.main-nav a[aria-current="page"]::after { inset-inline: calc(50% - 2.5px); width: 5px; transform: none; }
.header-controls { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.icon-button, .language-button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); border: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 70%, transparent); transition: color .2s var(--ease), border-color .2s var(--ease); }
.icon-button:hover, .language-button:hover { color: var(--ink); border-color: var(--rule-strong); }
.icon-button svg, .language-button svg { width: 19px; height: 19px; }
.site-header .icon-button, .site-header .language-button { color: var(--band-soft); border-color: var(--band-rule); background: rgba(255, 255, 255, .06); }
.site-header .icon-button:hover, .site-header .language-button:hover { color: var(--band-ink); border-color: var(--band-accent); background: rgba(255, 255, 255, .12); }
.language-button #langLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sun-icon { display: none !important; }
html[data-theme="dark"] .moon-icon { display: none !important; }
html[data-theme="dark"] .sun-icon { display: block !important; }
.lang-menu { position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; min-width: 210px; max-height: min(70vh, 520px); overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-2); }
.lang-menu button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; text-align: start; font-size: 15px; color: var(--ink); }
.lang-menu button:hover { background: var(--sage-soft); }
.lang-menu button[aria-current="true"] { color: var(--sage-deep); font-weight: 600; }
.lang-menu button[aria-current="true"]::after { content: "✓"; font-size: 13px; }
.lang-menu button[disabled] { opacity: .5; cursor: default; }

/* the quiet status row: next prayer, pages read, minutes on the site, visitors when the shared counter exists, age */
.stats { border-block-start: 1px solid var(--rule); }
.stats-in { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; display: flex; justify-content: center; flex-wrap: wrap; padding: 5px 0 6px; }
.stats-in:empty { display: none; }
.stat { display: flex; align-items: center; gap: 9px; padding: 2px 18px; color: inherit; font: inherit; background: none; border: 0; cursor: pointer; border-inline-start: 1px solid var(--rule); }
.stat:first-child { border-inline-start: 0; }
.stat-t { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; min-width: 0; }
.stat-t b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.stat-t span { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.stat-ic { order: -1; width: 18px; height: 18px; flex: none; color: var(--sage); }
.stat-ic svg { width: 18px; height: 18px; }
.stat:hover .stat-t b { color: var(--sage-deep); }

/* the section row of a page: the last band of the header stack, one line that scrolls sideways on phones */
.site-header .subnav { display: flex; gap: 0 26px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); border-block-start: 1px solid var(--rule); background: var(--page); color: var(--ink); }
.site-header .stats { background: var(--page); color: var(--ink); }
.subnav::-webkit-scrollbar { display: none; }
.subnav > :first-child, .subnav > [hidden]:first-child + * { margin-inline-start: auto; } /* a hidden first link (the sadaqah row while there is no link) must not leave the row off centre */
.subnav > :last-child { margin-inline-end: auto; }
.subnav a, .subnav button { position: relative; flex: none; padding: 9px 2px 11px; font-size: 14px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.subnav a::after, .subnav button::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; border-radius: 2px; background: var(--sage); transform: scaleX(0); transition: transform .25s var(--ease); }
.subnav a:hover, .subnav button:hover { color: var(--ink); }
.subnav a.active, .subnav a[aria-current="page"], .subnav button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.subnav a.active::after, .subnav a[aria-current="page"]::after, .subnav button[aria-selected="true"]::after { transform: none; }
.subnav:has(a.active) button[aria-selected="true"] { color: var(--ink-soft); font-weight: 500; }
.subnav:has(a.active) button[aria-selected="true"]::after { transform: scaleX(0); }
/* a mode switch (the Quran's three modes; prayer times or the qibla): one segmented control in the same band, the
   shown mode filled. Each segment: an icon, the name, and on wider screens the one line that says what it is for */
.site-header .subnav.modes { padding-block: 6px 7px; overflow: visible; }
.subnav.modes .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; margin-inline: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 15px; background: var(--surface); }
.subnav.modes a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 18px 6px 16px; border-radius: 12px; color: var(--ink-soft); white-space: normal; transition: background .2s var(--ease), color .2s var(--ease); }
.subnav.modes a::after { display: none; }
.subnav.modes a svg { width: 22px; height: 22px; flex: none; color: var(--sage); }
.subnav.modes .m-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.subnav.modes .m-t b { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.subnav.modes .m-t small { font-size: 12px; font-weight: 400; color: var(--ink-faint); text-wrap: balance; } /* one line where it fits; a long language takes two rather than being cut */
.subnav.modes a:hover { background: var(--sage-soft); }
.subnav.modes a.active, .subnav.modes a[aria-current="page"] { background: var(--primary); }
.subnav.modes a.active svg, .subnav.modes a.active .m-t b, .subnav.modes a.active .m-t small,
.subnav.modes a[aria-current="page"] svg, .subnav.modes a[aria-current="page"] .m-t b, .subnav.modes a[aria-current="page"] .m-t small { color: var(--primary-ink); }
.subnav.modes a:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.mode-lead { display: none; }
.l-short { display: none; } /* a shorter label where a phone has no room for the full one (the full one stays for screen readers) */

/* footer */
.site-footer { margin-top: 48px; padding: 30px var(--gutter) 40px; text-align: center; color: var(--ink-soft); font-size: 14px; border-block-start: 1px solid var(--rule); background: color-mix(in srgb, var(--page) 92%, transparent); }
.site-footer p { margin: 0 0 6px; }
.footer-dua { font-family: var(--display); font-size: 20px; color: var(--ink); }
.site-footer a { color: var(--sage-deep); font-weight: 600; }
body.shell .site-footer { display: none; }

/* the title bar (phones, inner pages) and the masthead's menu button: hidden on wider screens */
.titlebar, .hdr-menu { display: none; }
/* a sheet (shell.js APP.sheet): rises from the bottom on a phone, a small centred panel on a wide screen */
.psheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8, 19, 15, .45); opacity: 0; transition: opacity .25s var(--ease); }
.psheet-scrim.open { opacity: 1; }
.psheet { position: fixed; z-index: 61; inset-inline: 0; bottom: 0; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink); border-top: 1px solid var(--rule-strong); border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, .22); padding: 0 16px calc(18px + env(safe-area-inset-bottom)); transform: translateY(28px); opacity: 0; transition: transform .28s var(--ease), opacity .2s var(--ease); }
.psheet.open { transform: none; opacity: 1; }
.psheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; background: var(--surface); }
.psheet-head::before { content: ""; position: absolute; top: 6px; inset-inline: calc(50% - 18px); height: 4px; border-radius: 2px; background: var(--rule-strong); }
.psheet-head b { font-size: 17px; font-weight: 600; }
.psheet-x { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--rule); }
.psheet-x svg { width: 18px; height: 18px; }
.psheet-x:hover { color: var(--ink); }
@media (min-width: 601px) { .psheet { width: min(460px, calc(100% - 32px)); margin-inline: auto; bottom: 24px; border: 1px solid var(--rule-strong); border-radius: 22px; } .psheet-head::before { display: none; } }
/* the menu sheet: extra pages as rows, then the theme switch and the language */
.ms-pages { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.ms-pages a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; font-weight: 500; color: var(--ink); }
.ms-pages a + a { border-top: 1px solid var(--rule); }
.ms-pages a > i:first-child svg { width: 22px; height: 22px; color: var(--sage-deep); }
.ms-pages a[aria-current="page"] { background: var(--sage-soft); font-weight: 600; }
.ms-go { margin-inline-start: auto; width: 8px; height: 8px; border-inline-end: 1.8px solid var(--sage); border-block-end: 1.8px solid var(--sage); transform: rotate(-45deg); }
html[dir="rtl"] .ms-go { transform: rotate(45deg); }
.ms-row { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ms-label { font-weight: 600; color: var(--ink); }
.ms-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface-2); }
.ms-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.ms-seg button svg { width: 17px; height: 17px; color: var(--sage-deep); }
.ms-seg button[aria-checked="true"] { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.ms-seg button[aria-checked="true"] svg { color: currentColor; }
.ms-lang { flex-direction: column; align-items: stretch; gap: 8px; }
.ms-lang-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0; text-align: start; }
.ms-lang-now { margin-inline-start: auto; color: var(--ink-soft); font-size: 15px; }
.ms-lang-btn svg { width: 18px; height: 18px; color: var(--sage-deep); transition: transform .2s var(--ease); }
.ms-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ms-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms-langs button { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rule); text-align: start; font-size: 15px; color: var(--ink); }
.ms-langs button[aria-current="true"] { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); font-weight: 600; }
.ms-pages a:focus-visible, .ms-seg button:focus-visible, .ms-lang-btn:focus-visible, .ms-langs button:focus-visible, .psheet-x:focus-visible, .tbar-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* the toast */
.toast { position: fixed; inset-inline: 0; bottom: calc(22px + var(--bottom-bar, 0px)); margin-inline: auto; width: max-content; max-width: 90vw; z-index: 100; background: var(--ink); color: var(--page); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

/* the phone tab bar (shell.js renders it on every page; hidden above 600px) */
.tabbar { display: none; }

/* ===== the home page as a shell (index.html): header on top, one pane scrolls below it; views mount in #view ===== */
body.shell { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.shell > .site-header { position: relative; flex: none; }
body.shell > main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.shell > main::-webkit-scrollbar { display: none; }
body.shell > main#view { width: 100%; padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2)); }
body.shell > main#view.live { padding-inline: var(--gutter); }
body.shell [id] { scroll-margin-top: 14px; }
#view:not([hidden]) { animation: view-in .35s var(--ease); }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }

/* the hero: the dawn scene full bleed, a soft scrim where the words sit, the name large in Amiri */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100% - 92px); display: flex; align-items: center; justify-content: center; padding: clamp(36px, 7vh, 90px) var(--gutter) clamp(40px, 8vh, 96px); text-align: center; }
body:not(.shell) .hero { min-height: 78vh; }
.hero-bg { position: absolute; inset: -8% 0 0; z-index: -2; background: var(--hero-image) center 60% / cover no-repeat; will-change: transform; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 62% 54% at 50% 46%, color-mix(in srgb, var(--page) 84%, transparent) 0, color-mix(in srgb, var(--page) 62%, transparent) 46%, transparent 78%),
  linear-gradient(180deg, color-mix(in srgb, var(--page) 30%, transparent) 0, transparent 30%, transparent 62%, color-mix(in srgb, var(--page) 70%, transparent) 86%, var(--page) 100%); }
.hero-bg .mist { position: absolute; inset: 40% -20% 0; background: radial-gradient(ellipse 50% 40% at 30% 70%, rgba(255, 255, 255, .45), transparent 70%), radial-gradient(ellipse 45% 35% at 75% 80%, rgba(255, 255, 255, .35), transparent 70%); filter: blur(8px); opacity: .7; }
html[data-theme="dark"] .hero-bg .mist { opacity: .16; }
.hero::before { content: ""; position: absolute; z-index: -1; inset-inline: 10%; inset-block-start: 6%; height: 70%; background: radial-gradient(ellipse at 50% 40%, var(--dawn), transparent 66%); pointer-events: none; }
.hero-inner { width: min(100%, 980px); display: flex; flex-direction: column; align-items: center; }
.eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; color: var(--sage-deep); letter-spacing: .3px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--gold); }
.memorial-title { margin: clamp(10px, 1.6vh, 18px) 0 0; font-family: var(--display); font-weight: 700; color: var(--ink); line-height: 1.25; display: flex; flex-direction: column; align-items: center; }
.memorial-title .title-prefix { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; color: var(--ink-soft); }
.memorial-title strong { font-size: clamp(38px, 5.4vw, 72px); font-weight: 700; line-height: 1.5; text-wrap: balance; } /* Amiri at this size needs room between two lines of the name */
.memorial-title .title-mercy { margin-top: 6px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; color: var(--sage-deep); }
.hero-dua { margin: clamp(14px, 2.4vh, 26px) 0 0; font-family: var(--display); font-size: clamp(22px, 2.5vw, 32px); line-height: 1.6; color: var(--ink); text-wrap: balance; }
.hero-lead { margin: 6px 0 0; max-width: 640px; font-size: clamp(15px, 1.4vw, 17px); color: var(--ink); }
.primary-actions { margin-top: clamp(20px, 3.4vh, 36px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.action-button { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--rule-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--shadow); transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.action-button svg { width: 21px; height: 21px; color: var(--sage-deep); }
.action-button:hover { transform: translateY(-1px); border-color: var(--sage); }
.action-button.action-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.action-button.action-primary svg { color: currentColor; }
/* the Friday card: filled, three centred lines (the day, the surah, the dua), its button under them; equal room above and below */
.hero-friday { position: relative; margin-block: 24px; width: min(100%, 440px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 20px 20px; text-align: center; border-radius: 20px; background: linear-gradient(color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)), var(--scene-friday) center 40% / cover no-repeat; border: 1px solid var(--rule-strong); box-shadow: var(--shadow); }
.hero-friday::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 50% auto; width: 96px; height: 2px; translate: 50% 0; background: var(--gold); border-radius: 2px; }
html[dir="ltr"] .hero-friday::before { translate: -50% 0; }
.fr-lines { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.5; }
.fr-lines b { font-size: 13.5px; font-weight: 600; color: var(--sage-deep); letter-spacing: .2px; }
.fr-lines span:nth-child(2) { font-family: var(--display); font-size: 23px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.fr-lines span:nth-child(3) { font-size: 15px; color: var(--ink-soft); }
.hero-friday .btn { min-height: 42px; }

.home-more { width: min(100% - 2 * var(--gutter), 1040px); margin: 0 auto; padding-block: 8px 56px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.utility-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.utility-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; min-width: 0; text-align: start; transition: background .2s var(--ease); }
.utility-item + .utility-item { border-inline-start: 1px solid var(--rule); }
.utility-item:hover { background: var(--sage-soft); }
.utility-item:first-child { border-start-start-radius: var(--radius); border-end-start-radius: var(--radius); }
.utility-item:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.utility-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--sage-deep); }
.utility-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.utility-item > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.utility-item b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.utility-item small { font-size: 13px; color: var(--ink-faint); }
.hadith-card { position: relative; width: 100%; margin: 0; padding: clamp(24px, 3.4vw, 38px) clamp(20px, 4vw, 52px) clamp(20px, 3vw, 30px); text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.hadith-card::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 50% auto; width: 120px; height: 2px; translate: 50% 0; background: var(--gold); border-radius: 2px; }
html[dir="ltr"] .hadith-card::before { translate: -50% 0; }
.hadith-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--sage-deep); }
.hadith-text { margin: 10px 0 0; font-family: var(--naskh); font-size: clamp(21px, 2.3vw, 29px); line-height: 1.9; color: var(--ink); text-wrap: balance; }
.hadith-text .hl { color: var(--sage-deep); font-weight: 700; }
.hadith-card footer { margin-top: 8px; font-size: 14px; color: var(--ink-faint); }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.share-kicker { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; color: var(--ink-soft); }
.share-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--sage-deep); background: var(--surface); border: 1px solid var(--rule-strong); transition: background .2s var(--ease); }
.share-button svg { width: 18px; height: 18px; }
.share-button:hover { background: var(--sage-soft); }
.share-button.share-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* ===== the language of every inner page: sections, titles, cards, buttons, chips, compact rows ===== */
main.wrap { padding-block: 22px 40px; }
.section { padding-block: clamp(18px, 3vw, 32px); }
main.wrap > .sr-only:first-child + .section, main.wrap > .subnav + .sr-only + .section { padding-top: 6px; }
.section-title { margin: 0 0 16px; display: flex; align-items: center; gap: 12px; font-size: clamp(21px, 2.6vw, 26px); font-weight: 600; color: var(--ink); }
.section-title::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, var(--sage), transparent); }
html[dir="rtl"] .section-title::after { background: linear-gradient(270deg, var(--sage), transparent); }
.section-title::before { content: ""; order: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; margin-inline-start: -6px; }
.reader-top .section-title, .card .section-title { margin-bottom: 4px; }
.lead { margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(16px, 2.4vw, 24px); box-shadow: var(--shadow); }
.note { margin: 16px 0 0; padding: 10px 14px; border-inline-start: 2px solid var(--sage); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 10px; color: var(--ink-soft); font-size: 15px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--primary-ink); background: var(--primary); border: 1px solid var(--primary); transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { background: var(--surface); color: var(--sage-deep); border-color: var(--rule-strong); }
.btn-gold:hover { background: var(--sage-soft); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--sage-soft); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn:disabled, .chip:disabled { opacity: .45; cursor: default; transform: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); }
.chip:hover { border-color: var(--sage); }
.chip svg { width: 16px; height: 16px; flex: none; color: var(--sage-deep); }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.chip[aria-pressed="true"] svg { color: currentColor; }
.chip select { border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; outline: none; max-width: 190px; }
.chip select option { color: var(--ink); background: var(--surface); }
.chip.group { padding: 3px 5px; gap: 2px; }
.chip.group button { padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.chip.group button:hover { background: var(--sage-soft); }
.chip.chip-icon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip.chip-icon { padding-inline: 11px; }
.chip.chip-khatma { color: var(--sage-deep); font-weight: 600; border-color: var(--sage); }
.reader-tools label.chip > span:first-child::after { content: ":"; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); }
.icon-btn:hover { background: var(--sage-soft); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.mini { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--sage-deep); font-size: 13.5px; font-weight: 600; }
.mini svg { width: 15px; height: 15px; }
.mini:hover { background: var(--sage-soft); }
.btn:focus-visible, .chip:focus-visible, .mini:focus-visible, .icon-btn:focus-visible, .tb:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* compact rows, never boxes around little content */
.list { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.list.rows-only { border: 0; box-shadow: none; background: transparent; display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; text-align: start; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; transition: background .2s var(--ease), border-color .2s var(--ease); }
.row:hover { border-color: var(--sage); }
.row-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--sage-deep); }
.row-icon svg { width: 20px; height: 20px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.row-main b { font-size: 15.5px; font-weight: 600; }
.row-main small { color: var(--ink-faint); font-size: 13px; margin-top: 2px; }
.row-go { flex: none; width: 9px; height: 9px; border-inline-end: 2px solid var(--sage); border-block-end: 2px solid var(--sage); transform: rotate(-45deg); }
html[dir="rtl"] .row-go { transform: rotate(135deg); }

/* ===== أبواب الخير له: the deeds with their hadith and reference, six duas, the note on reciting ===== */
.deeds { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 820px) { .deeds { grid-template-columns: 1fr 1fr; } }
.deed, .dua-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.deed h3 { margin: 0; font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.deed h3::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.deed .how { margin: 0; color: var(--ink-soft); font-size: 15px; }
.deed .soon { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--sage-soft); color: var(--sage-deep); font-size: 14px; font-weight: 500; }
.hadith-quote { margin: 0; padding: 4px 14px; border-inline-start: 2px solid var(--sage); font-family: var(--naskh); font-size: 19px; line-height: 2; color: var(--ink); direction: rtl; text-align: right; }
html:not([lang="ar"]):not([lang="ur"]) .hadith-quote.tr { font-family: var(--ui); font-size: 15px; line-height: 1.7; direction: ltr; text-align: left; color: var(--ink-soft); }
.dua-card .ar { margin: 0; font-family: var(--naskh); font-size: 21px; line-height: 2; direction: rtl; text-align: right; }
.dua-card .en { margin: 0; font-size: 15px; color: var(--ink-soft); }
.ref { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-faint); }
.ref a { color: var(--sage-deep); font-weight: 600; }
.ref a:hover { text-decoration: underline; }
.dua-actions { display: flex; gap: 8px; margin-top: auto; }
.rec-note { margin: 8px 0 0; font-size: 16px; line-height: 1.9; color: var(--ink-soft); }
html[lang="ar"] .rec-note, html[lang="ur"] .rec-note { font-family: var(--naskh); font-size: 18px; color: var(--ink); }
#sadaqah .ehsan { margin-top: 14px; }
#sadaqah .sadaqah-actions { justify-content: center; margin-top: 16px; }
.ehsan { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ehsan { grid-template-columns: 1fr 1fr; } }

/* the sadaqah card as HTML (shown with the family's link): hadith, title, name, the QR codes */
.sadaqah-card { position: relative; width: 100%; margin: 16px auto 0; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--rule-strong); border-radius: 22px; background: var(--surface-2); text-align: center; display: flex; flex-direction: column; align-items: center; }
.sc-text { display: contents; }
.sc-quote { width: 100%; padding: 12px clamp(12px, 2.6vw, 30px); background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; }
.sc-said { margin: 0; font-size: 14px; font-weight: 600; color: var(--sage-deep); }
.sc-hadith { margin: 4px 0 0; font-family: var(--naskh); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.85; }
.sc-hadith .hl { color: var(--sage-deep); font-weight: 700; }
.sc-rawa { margin: 2px 0 0; font-size: 13px; color: var(--ink-faint); }
.sc-title { margin: 14px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.2; color: var(--sage-deep); }
.sc-pill { margin: 8px 0 0; padding: 6px 24px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font-weight: 600; font-size: clamp(14px, 1.5vw, 19px); }
.sc-qrs { order: 1; margin-top: 16px; display: flex; gap: clamp(12px, 2.4vw, 28px); justify-content: center; flex-wrap: wrap; }
.sc-cta, .sc-foot { order: 2; }
.sc-qr { background: #fff; padding: 8px 8px 6px; border-radius: 16px; border: 2px solid var(--gold); }
.sc-qr img { width: clamp(120px, 18vw, 210px); height: auto; aspect-ratio: 1; display: block; image-rendering: pixelated; }
.sc-qr .cap { margin-top: 4px; font-size: 11.5px; color: #3b5d4d; }
.sc-cta { margin: 14px 0 0; font-weight: 600; font-size: clamp(15px, 1.5vw, 19px); }
.sc-foot { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* the scenes: one per page, light and blue-hour dark, 1920 wide on large screens and 1100 below; the home hero is the
   valley at its own 1672 width above phones, and the dawn scene on phones */
body { --hero-image: url("../img/bg/hero-valley-light-1672.jpg"); --scene-friday: url("../img/bg/quran-window-light-1100.jpg"); }
html[data-theme="dark"] body { --scene-friday: url("../img/bg/quran-window-dark-1100.jpg"); }
body:has(> main.scene-quran:not([hidden])) { --scene: url("../img/bg/quran-window-light-1920.jpg"); }
body:has(> main.scene-live:not([hidden])) { --scene: url("../img/bg/haram-arches-light-1920.jpg"); }
body:has(> main.scene-prayer:not([hidden])) { --scene: url("../img/bg/minaret-sky-light-1920.jpg"); }
body:has(> main.scene-adhkar:not([hidden])) { --scene: url("../img/bg/adhkar-dusk-light-1920.jpg"); }
body:has(> main.scene-khair:not([hidden])) { --scene: url("../img/bg/khair-water-light-1920.jpg"); }
html[data-theme="dark"] body { --hero-image: url("../img/bg/hero-valley-dark-1672.jpg"); }
html[data-theme="dark"] body:has(> main.scene-quran:not([hidden])) { --scene: url("../img/bg/quran-window-dark-1920.jpg"); }
html[data-theme="dark"] body:has(> main.scene-live:not([hidden])) { --scene: url("../img/bg/haram-arches-dark-1920.jpg"); }
html[data-theme="dark"] body:has(> main.scene-prayer:not([hidden])) { --scene: url("../img/bg/minaret-sky-dark-1920.jpg"); }
html[data-theme="dark"] body:has(> main.scene-adhkar:not([hidden])) { --scene: url("../img/bg/adhkar-dusk-dark-1920.jpg"); }
html[data-theme="dark"] body:has(> main.scene-khair:not([hidden])) { --scene: url("../img/bg/khair-water-dark-1920.jpg"); }
@media (max-width: 1100px) {
  body { --hero-image: url("../img/bg/hero-valley-light-1100.jpg"); }
  body:has(> main.scene-quran:not([hidden])) { --scene: url("../img/bg/quran-window-light-1100.jpg"); }
  body:has(> main.scene-live:not([hidden])) { --scene: url("../img/bg/haram-arches-light-1100.jpg"); }
  body:has(> main.scene-prayer:not([hidden])) { --scene: url("../img/bg/minaret-sky-light-1100.jpg"); }
  body:has(> main.scene-adhkar:not([hidden])) { --scene: url("../img/bg/adhkar-dusk-light-1100.jpg"); }
  body:has(> main.scene-khair:not([hidden])) { --scene: url("../img/bg/khair-water-light-1100.jpg"); }
  html[data-theme="dark"] body { --hero-image: url("../img/bg/hero-valley-dark-1100.jpg"); }
  html[data-theme="dark"] body:has(> main.scene-quran:not([hidden])) { --scene: url("../img/bg/quran-window-dark-1100.jpg"); }
  html[data-theme="dark"] body:has(> main.scene-live:not([hidden])) { --scene: url("../img/bg/haram-arches-dark-1100.jpg"); }
  html[data-theme="dark"] body:has(> main.scene-prayer:not([hidden])) { --scene: url("../img/bg/minaret-sky-dark-1100.jpg"); }
  html[data-theme="dark"] body:has(> main.scene-adhkar:not([hidden])) { --scene: url("../img/bg/adhkar-dusk-dark-1100.jpg"); }
  html[data-theme="dark"] body:has(> main.scene-khair:not([hidden])) { --scene: url("../img/bg/khair-water-dark-1100.jpg"); }
}
@media (max-width: 600px) {
  body { --hero-image: url("../img/bg/hero-dawn-light-1100.jpg"); }
  html[data-theme="dark"] body { --hero-image: url("../img/bg/hero-dawn-dark-1100.jpg"); }
}

/* ===== Quran text and the reader (reader.js) ===== */
.quran { font-family: "Hafs", "Amiri Quran", "Noto Naskh Arabic", serif; direction: rtl; font-size: var(--quran-size); line-height: 2.1; color: var(--ink); text-align: right; unicode-bidi: isolate; }
.quran .marker { color: var(--sage-deep); font-size: .95em; margin-inline-start: 4px; }
.q-alt { font-family: "QuranAlt", "Hafs", serif; }
.basmalah { text-align: center; font-size: calc(var(--quran-size) * 1.05); margin: 6px 0 14px; color: var(--sage-deep); }
.search { width: 100%; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font-size: 16px; outline: none; box-shadow: var(--shadow); }
.search::placeholder { color: var(--ink-faint); }
.search:focus { border-color: var(--sage); }
.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* the Quran's one toolbar (reading, listening, the Mushaf): search or jump first, then continue, then bookmark */
.qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.qbar .search { flex: 1 1 280px; width: auto; min-width: 0; }
.qbar .chip { min-height: 42px; }
.chip.chip-continue { color: var(--sage-deep); font-weight: 600; border-color: var(--sage); }
.chip.chip-continue svg { color: var(--sage-deep); }
/* reading: the 114 surahs, rows in one white card, three columns on a wide screen */
.slist { list-style: none; margin: 0; padding: 6px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 32px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.slist:empty { display: none; }
.slist li { border-block-end: 1px solid var(--rule); min-width: 0; }
.srow, .lrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 2px; color: inherit; text-align: start; }
.srow:hover .s-main b, .lrow:hover .s-main b { color: var(--sage-deep); }
.s-num { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--gold); border-radius: 50%; font-variant-numeric: tabular-nums; }
.s-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s-main b { font-family: "Hafs", var(--naskh); font-size: 20px; font-weight: 400; line-height: 1.35; transition: color .2s var(--ease); }
.s-main small { color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-pg { flex: none; color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.s-go { flex: none; width: 7px; height: 7px; border-inline-end: 1.6px solid var(--sage); border-block-end: 1.6px solid var(--sage); transform: rotate(-45deg); }
[dir="rtl"] .s-go { transform: rotate(45deg); }
/* listening: the reciter first and large, every other one a tap away; then rows that play */
.reciter-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.rc-head { display: flex; align-items: center; gap: 14px; }
.rc-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--sage-deep); }
.rc-ic svg { width: 24px; height: 24px; }
.rc-now { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rc-now small { color: var(--ink-faint); font-size: 13px; }
.rc-now b { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--ink); }
.rc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-opt { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease); }
.rc-opt small { color: var(--ink-faint); font-size: 12px; }
.rc-opt:hover { border-color: var(--sage); }
.rc-opt[aria-checked="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 600; cursor: default; }
.rc-opt[aria-checked="true"] small { color: var(--primary-ink); }
.rc-opt:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.reciter-card .listen-partial { margin: 0; }
.llist { padding-inline: 14px; }
.lrow { font: inherit; cursor: pointer; border-radius: 12px; padding-inline: 6px; }
.l-play { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sage); color: var(--sage-deep); transition: background .2s var(--ease), color .2s var(--ease); }
.l-play svg { width: 17px; height: 17px; }
.lrow:hover .l-play { background: var(--sage-soft); }
.l-n { flex: none; min-width: 24px; color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
.l-now { display: none; flex: none; color: var(--sage-deep); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lrow.playing { background: color-mix(in srgb, var(--sage) 12%, var(--surface)); }
.lrow.playing .l-play { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.lrow.playing:not(.paused) .l-now { display: inline; }
.lrow:focus-visible, .srow:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; border-radius: 10px; }
.listen-partial { margin: 14px 4px 0; color: var(--ink-soft); font-size: 14.5px; }
#ayahResults .ayah { display: block; padding: 10px 14px; }
#ayahResults .ayah .quran { font-size: calc(var(--quran-size) * .8); }
.reader-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; text-align: center; }
.reader-head h1 { margin: 0; font-family: "Hafs", var(--naskh); font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.3; }
.reader-head .sub { color: var(--ink-faint); font-size: 14px; }
.reader-head .reciter-pick { margin-top: 8px; }
.reader-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.ayahs { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ayah { padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease); scroll-margin-top: 140px; }
.ayah:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.ayah.playing { background: color-mix(in srgb, var(--sage) 12%, var(--surface)); border-color: var(--rule-strong); }
.ayah .quran { margin: 0; cursor: pointer; }
.ayah .tr { margin: 8px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
html[lang="ur"] .ayah .tr { font-family: "Noto Nastaliq Urdu", var(--naskh); line-height: 2; }
.ayah .tf, .sheet .tf { margin: 8px 0 0; padding: 8px 12px; color: var(--ink-soft); font-family: var(--naskh); font-size: 17px; line-height: 1.9; direction: rtl; text-align: right; background: var(--surface-2); border-radius: 10px; border-inline-start: 2px solid var(--sage); }
.ayah-actions { display: flex; gap: 6px; margin-top: 6px; }
.ayah-actions button { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--sage-deep); padding: 3px 8px; border-radius: 8px; }
.ayah-actions button svg { width: 13px; height: 13px; flex: none; }
.ayah-actions button:hover { background: var(--sage-soft); }
.reader-end { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 0 40px; }
.reciter-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); cursor: pointer; max-width: 100%; }
.reciter-pick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 0; cursor: pointer; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.reciter-pick select option { color: var(--ink); background: var(--surface); }
.reciter-pick::after { content: "▾"; color: var(--sage-deep); font-size: 12px; pointer-events: none; }
#listenPick { order: -1; flex: 1 1 100%; justify-content: center; padding-block: 10px; font-size: 16px; }

/* the reading bar: fixed at the bottom, above the player, the video strip or the tab bar (--bottom-bar) */
.readbar { position: fixed; inset-inline: 0; bottom: var(--bottom-bar, 0px); z-index: 41; background: color-mix(in srgb, var(--surface) 95%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--rule); padding: 8px var(--gutter); }
.readbar .reader-tools { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0 auto; max-width: var(--content); padding: 0; }
.readbar .reader-tools > [hidden] { display: none; }
.readbar .chip { white-space: nowrap; }
body.readbar-on { --readbar-h: 58px; }
body.readbar-on #view, body.readbar-on main { padding-bottom: calc(var(--bottom-bar, 0px) + var(--readbar-h) + 16px) !important; }

/* the recitation player bar (audio.js) */
.audiobar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--rule); box-shadow: 0 -8px 30px rgba(28, 42, 36, .07); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.audiobar-in { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "now ctrl close" "bar bar bar"; column-gap: 16px; row-gap: 8px; align-items: center; }
.audiobar .now { grid-area: now; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.audiobar .now b { font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 18px; }
.audiobar .now small { color: var(--ink-faint); font-size: 12.5px; }
.audiobar .ctrl { grid-area: ctrl; display: flex; align-items: center; justify-content: center; gap: 4px; }
.audiobar .ctrl [hidden], .ab-reciter[hidden], #abSub[hidden] { display: none; }
.audiobar .ctrl button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.audiobar .ctrl button:hover { background: var(--sage-soft); }
.audiobar .ctrl button svg { width: 20px; height: 20px; }
.audiobar .ctrl .play { width: 48px; height: 48px; background: var(--primary); color: var(--primary-ink); }
.audiobar .ctrl .play:hover { background: var(--primary); opacity: .92; }
.audiobar .ctrl .play svg { width: 22px; height: 22px; }
.audiobar .ctrl .skip-a svg { width: 18px; height: 18px; }
.audiobar #abClose { grid-area: close; }
.audiobar .bar { grid-area: bar; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.audiobar .bar i { display: block; height: 100%; width: 0; background: var(--sage); transition: width .25s linear; }
.audiobar.radio .hide-in-radio { display: none; }
.audiobar.radio .now b { font-family: var(--ui); font-weight: 600; font-size: 16px; }
.ab-reciter { display: inline-flex; align-items: center; color: var(--ink-faint); font-size: 12.5px; }
.audiobar .ab-reciter b { font-family: var(--ui); font-size: 15px; font-weight: 600; color: var(--ink); margin-inline-start: 4px; }
body.audio-on main { padding-bottom: 130px; }

/* phone-only parts of the Quran views: hidden on a wide screen, which keeps its own layout */
.m-top, .m-prog, .m-toolbar, .reader-ptools, .np-card, .listen-opts, .a-num, .ayah-actions [data-act="tafsir"], .ayah-actions [data-act="share"] { display: none; }
/* the Mushaf's index sheet: the khatma place and the bookmark, then juz, surah or page */
.mj-marks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mj-mark { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--sage); background: var(--surface); color: var(--sage-deep); font-size: 14px; font-weight: 600; }
.mj-mark svg { width: 17px; height: 17px; flex: none; }
.mj-tabs { margin-bottom: 10px; }
.mj-tabs [aria-selected="true"] { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.mj-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.mj-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 4px 14px; text-align: start; color: var(--ink); }
.mj-row + .mj-row { border-top: 1px solid var(--rule); }
.mj-row.here { background: var(--sage-soft); }
.mj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.mj-main b { font-weight: 600; font-size: 15.5px; }
.mj-main .mj-sn { font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 20px; }
.mj-main small { font-size: 12.5px; color: var(--ink-faint); }
.mj-pg { flex: none; min-width: 34px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mj-page { display: flex; align-items: center; gap: 10px; padding: 14px; }
.mj-page label { font-weight: 600; }
.mj-page input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface-2); color: var(--ink); font-size: 17px; font-weight: 600; text-align: center; }
.mj-row:focus-visible, .mj-mark:focus-visible, .mj-tabs button:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.m-off { flex-wrap: wrap; }
.m-off .set-l { flex: 1 1 180px; }

/* a settings sheet's rows: a label and its control, a link row, the switch */
.set-rows { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.set-row, .set-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 6px 14px; color: var(--ink); text-align: start; }
.set-rows > * + * { border-top: 1px solid var(--rule); }
.set-l { font-weight: 500; color: var(--ink); display: flex; flex-direction: column; line-height: 1.35; }
.set-l small { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
.set-link { width: 100%; font: inherit; }
.set-link b { margin-inline-start: auto; font-weight: 600; color: var(--sage-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-link b + .ms-go { margin-inline-start: 0; }
.set-font { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface-2); }
.set-font button { min-width: 44px; min-height: 38px; border-radius: 9px; font-weight: 700; color: var(--ink); }
.set-font button:hover { background: var(--sage-soft); }
.set-font output { min-width: 34px; text-align: center; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sw { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--rule-strong); transition: background .2s var(--ease); }
.sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .2s var(--ease); }
.sw[aria-checked="true"] { background: var(--primary); }
.sw[aria-checked="true"] i { inset-inline-start: 23px; }
html[data-theme="dark"] .sw[aria-checked="true"] i { background: var(--primary-ink); }
.sw:focus-visible, .set-font button:focus-visible, .set-link:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.psheet .ms-row:last-child { margin-top: 14px; }

/* the phone player (audio.js): a slim bar and its sheet; a wide screen keeps the full bar above */
.ab-mini { display: none; }
/* the now-playing panel (audio.js panel): the listening page's top card and the phone player's sheet */
.np { display: flex; flex-direction: column; gap: 12px; }
.np-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.np-title { font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 28px; line-height: 1.45; color: var(--ink); }
.np-title.ui { font-family: var(--ui); font-weight: 600; font-size: 19px; }
.np-sub { color: var(--ink-faint); font-size: 13px; }
.np-reciter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; max-width: 100%; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 600; }
.np-reciter svg { width: 17px; height: 17px; flex: none; color: var(--sage-deep); }
.np-rn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-note { color: var(--ink-soft); font-size: 13.5px; }
.np-prog { direction: ltr; display: flex; flex-direction: column; gap: 0; }
.np-seek { width: 100%; height: 24px; margin: 0; accent-color: var(--sage-deep); cursor: pointer; }
.np-times { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.np-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.np-ctrl button { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.np-ctrl button:hover { background: var(--sage-soft); }
.np-ctrl button svg { width: 22px; height: 22px; }
.np-ctrl .np-play { width: 62px; height: 62px; background: var(--primary); color: var(--primary-ink); }
.np-ctrl .np-play:hover { background: var(--primary); opacity: .92; }
.np-ctrl .np-play svg { width: 28px; height: 28px; }
.np-ctrl .np-play:disabled { opacity: .45; }
.np-ctrl .np-rep[aria-pressed="true"] { background: var(--sage-soft); color: var(--sage-deep); box-shadow: inset 0 0 0 1.5px var(--sage); }
.np-ctrl .np-rate { font-size: 14px; font-weight: 700; color: var(--sage-deep); border: 1px solid var(--rule-strong); }
.np-ctrl [hidden], .np [hidden] { display: none; }
.np-close { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface-2); color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.np-close svg { width: 16px; height: 16px; }
.np button:focus-visible, .np-seek:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
/* the reciters sheet: seven rows, the chosen one checked */
.rc-rows { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.rc-rows button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; text-align: start; color: var(--ink); font-size: 16px; font-weight: 500; }
.rc-rows button + button { border-top: 1px solid var(--rule); }
.rc-rows button[aria-checked="true"] { background: var(--sage-soft); font-weight: 600; }
.rc-rows button:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
.rc-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage-deep); }
.rc-av svg { width: 18px; height: 18px; }
.rc-nm { display: flex; flex-direction: column; line-height: 1.35; }
.rc-nm small { color: var(--ink-faint); font-size: 12.5px; font-weight: 400; }
.rc-ck { margin-inline-start: auto; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--rule-strong); }
.rc-rows button[aria-checked="true"] .rc-ck { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }
.dock-expand .ic-phone { display: none; }
.dock-expand .ic-wide { display: contents; }
#livehost .livecover { container-type: size; }
@container (max-height: 70px) { #livehost .livecover > .lc-play.lc-play { display: none; } } /* a thumbnail in the mini player: no play circle */

/* every close (ayah panel, player bar, video strip): a small pill with the x and the word */
#shClose, #abClose, #livedock .tb.dock-close, #livedock .tb.dock-close2 { width: auto; height: 32px; padding: 0 12px 0 9px; gap: 5px; display: inline-flex; align-items: center; flex: none; border-radius: 16px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--rule-strong); cursor: pointer; }
html[dir="rtl"] #shClose, html[dir="rtl"] #abClose, html[dir="rtl"] #livedock .tb.dock-close, html[dir="rtl"] #livedock .tb.dock-close2 { padding: 0 9px 0 12px; }
#shClose svg, #abClose svg, #livedock .tb.dock-close svg, #livedock .tb.dock-close2 svg { width: 15px; height: 15px; flex: none; }
#shClose:hover, #abClose:hover, #livedock .tb.dock-close:hover, #livedock .tb.dock-close2:hover { color: var(--ink); border-color: var(--sage); }
#livedock .tb.dock-close2 { height: 26px; font-size: 11.5px; }

/* one bar at a time: the folded player hides, its chip sits on the active bar's top edge, end corner */
body.chip-audio #audiobar, body.chip-video #livedock { display: none !important; }
.player-chip { position: fixed; inset-inline-end: var(--gutter); z-index: 47; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 10px; border-radius: 15px 15px 0 0; background: var(--surface); border: 1px solid var(--rule-strong); border-bottom: 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .12); max-width: min(70vw, 320px); }
html[dir="rtl"] .player-chip { padding: 0 10px 0 4px; }
.player-chip .pc-go { display: flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 4px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.player-chip .pc-go svg { width: 14px; height: 14px; flex: none; color: var(--sage-deep); }
.player-chip .pc-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player-chip .pc-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-soft); border-radius: 50%; }
.player-chip .pc-x svg { width: 16px; height: 16px; }

/* ===== the Mushaf (mushaf.js): page-accurate, KFGQPC page fonts; the page stays cream in both themes ===== */
.mushaf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.mushaf-tools .chip input { width: 64px; border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; outline: none; text-align: center; }
.mushaf-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mpage { width: min(100%, 620px); background: #fdfcf7; color: #1a1a1a; border: 1px solid #c9b78f; border-radius: 12px; box-shadow: var(--shadow-2); padding: 14px clamp(10px, 3vw, 22px) 12px; position: relative; direction: rtl; user-select: none; touch-action: pan-y; outline: 1px solid rgba(95, 133, 116, .35); outline-offset: -8px; }
html[data-theme="dark"] .mpage { background: #f6f3e8; }
.mhead { display: flex; justify-content: space-between; font-family: var(--ui); font-weight: 600; font-size: 14px; color: #3b5d4d; padding: 0 6px 6px; border-bottom: 1px solid rgba(95, 133, 116, .35); margin-bottom: 8px; }
.mlines { display: flex; flex-direction: column; }
.mline { display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; line-height: 1.85; height: var(--mline-h, 2.1em); overflow: visible; }
.mline.center { justify-content: center; gap: .35em; }
.mline.first2 { justify-content: center; gap: .3em; }
.mword { display: inline-block; cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .2s var(--ease); }
.mword.sel { background: rgba(184, 147, 79, .3); }
.mword.playing { background: rgba(95, 133, 116, .22); }
.mline.header { justify-content: center; }
.mline.header .banner { font-family: "Hafs", var(--naskh); font-size: .78em; color: #fdfcf7; background: linear-gradient(180deg, #43695a, #34574a); border: 1px solid #b8934f; border-radius: 999px; padding: .05em 1.4em; line-height: 1.7; box-shadow: inset 0 0 0 3px #fdfcf7, inset 0 0 0 4px #b8934f; }
.mline.basmalah { justify-content: center; font-family: "Hafs", var(--naskh); font-size: .95em; color: #1a1a1a; }
.mfoot { text-align: center; font-family: var(--ui); font-weight: 600; color: #3b5d4d; font-size: 15px; margin-top: 6px; }
.mnav { display: flex; justify-content: space-between; width: min(100%, 620px); gap: 10px; }
.mloading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(253, 252, 247, .78); font-weight: 600; color: #3b5d4d; border-radius: 10px; }
.mread-go { flex: none; padding: 0 24px; min-height: 46px; font-size: 16px; }
.mread-go svg { width: 21px; height: 21px; }
.mushaf-section .mushaf-tools { justify-content: center; } /* under the centred page */
.mushaf-tools .mread-go { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.mushaf-tools .mread-go svg { width: 18px; height: 18px; }
.mread-x { display: none; }
body.m-reading .mread-x { display: inline-flex; }
body.m-reading .mread-go { display: none; }
/* the toolbar's fifth slot (phones): وضع القراءة in the page view, the way out in reading mode */
body:not(.m-reading) #tbRead .rd-out, body.m-reading #tbRead .rd-in { display: none; }
body.m-reading .site-header, body.m-reading .site-header * { visibility: hidden !important; transition: none !important; }
body.m-reading .tabbar { display: none; }
body.m-reading.shell > main#view, body.m-reading:not(.shell) { overflow: hidden; }
body.m-reading .audiobar, body.m-reading #livedock { bottom: 0 !important; }
body.m-reading .mushaf-wrap { position: fixed; inset: 0; z-index: 39; margin: 0; gap: 8px; background: var(--page); overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 8px) 6px 0; }
body.m-reading .mushaf-wrap::after { content: ""; flex: none; height: max(env(safe-area-inset-bottom), var(--rm-bar, 0px)); }
body.m-reading .mpage { flex: none; margin-block-start: auto; }
body.m-reading .mnav { flex: none; margin-block-end: auto; }
/* the ayah panel: rises above whichever player bar shows (--bottom-bar) */
.sheet { position: fixed; inset-inline: 0; bottom: var(--bottom-bar, 0px); z-index: 46; background: var(--surface); border-top: 1px solid var(--rule-strong); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(28, 42, 36, .16); padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom)); max-height: 60vh; overflow: auto; transform: translateY(calc(100% + var(--bottom-bar, 0px) + 24px)); transition: transform .3s var(--ease), bottom .2s var(--ease); }
.sheet.open { transform: none; }
.sheet .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.sheet .sheet-head b { font-family: var(--naskh); font-weight: 700; font-size: 19px; } /* Amiri: Hafs would draw the ayah number as an ornament */
.sheet .sheet-pick { margin-top: 10px; }
.sheet .quran { font-size: 22px; margin: 4px 0 8px; }

/* ===== prayer times (prayer.js) ===== */
.prayer-view { max-width: 760px; margin-inline: auto; } /* one view at a time (prayer.js): a reading column, not a stretched list */
.prayer-pane { animation: pane-in .25s var(--ease); }
@keyframes pane-in { from { opacity: 0; } to { opacity: 1; } }
#qiblaView .compass-wrap { padding-block: 22px 26px; }
#qiblaView .compass { width: min(300px, 72vw); }
.dates { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--ink-soft); margin: 4px 0 14px; font-size: 16px; }
.dates b { font-size: 20px; color: var(--ink); font-weight: 600; }
.times { display: flex; flex-direction: column; gap: 6px; }
.time { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--rule); font-weight: 600; }
.time .ltr { font-variant-numeric: tabular-nums; font-size: 18px; }
.time.next { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: var(--shadow); }
.time.next small { display: block; font-weight: 500; font-size: 12.5px; }
.time.past { color: var(--ink-soft); }
.compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.compass { width: min(260px, 70vw); aspect-ratio: 1; position: relative; }
.compass svg { width: 100%; height: 100%; }
.compass .dial { transition: transform .15s linear; transform-origin: 50% 50%; }

/* ===== adhkar (adhkar.js) ===== */
.adhkar { display: flex; flex-direction: column; gap: 10px; }
.dhikr { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); user-select: none; }
.dhikr:hover { border-color: var(--sage); }
.dhikr.complete { background: var(--surface-2); }
.dhikr-text { margin: 0; font-family: var(--naskh); font-size: 21px; line-height: 2.05; direction: rtl; text-align: right; color: var(--ink); }
.dhikr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.dhikr-foot .ref { font-size: 13px; color: var(--ink-soft); }
.dhikr .count { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--sage); color: var(--sage-deep); flex: none; line-height: 1.1; }
.dhikr .count b { font-size: 20px; font-weight: 700; }
.dhikr .count small { font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.dhikr.complete .count { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.dhikr.complete .count small { color: var(--primary-ink); }

/* ===== the live wall (live.js): every feed a tile of equal standing, one sound tied to the choice ===== */
main.live { width: calc(100% - 2 * var(--gutter)); max-width: none; padding-block: 16px; }
.live .wall { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - var(--header-h, 150px) - 32px); min-height: 380px; }
body.audio-on .live .wall { height: calc(100dvh - var(--header-h, 150px) - 32px - var(--audiobar-h, 82px)); }
.tiles { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
.tile { position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden; background: #10231c; border: 1px solid rgba(95, 133, 116, .4); box-shadow: var(--shadow); display: grid; grid-template-rows: minmax(0, 1fr) 34px; grid-template-columns: minmax(0, 1fr); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); padding: 0; }
.tile .stage { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.tile-video { grid-column: span 2; }
.tile-radio { grid-column: span 1; aspect-ratio: 2 / 1; grid-template-rows: minmax(0, 1fr) auto; }
.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tile .player, .tile .art { position: relative; width: min(100%, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0; background: transparent; }
.tile .art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-radio .art, .tile-radio.focused .art { width: 100%; height: 100%; }
.tile-focus { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; }
.tile.focused .tile-focus { display: none; }
.tile-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; pointer-events: none; color: #fff; background: #0d1f18; border-top: 1px solid rgba(255, 255, 255, .06); }
.tile-bar b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tile-bar small { flex: 1; min-width: 0; color: rgba(255, 255, 255, .78); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-bar .tile-link { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 32px; min-width: 32px; color: #e8d3a6; font-size: 12px; font-weight: 600; pointer-events: auto; white-space: nowrap; }
.tile-bar .tile-link svg { width: 12px; height: 12px; flex: none; }
.tile-radio .tile-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 7px 10px 8px; }
.tile-radio .tile-bar .badge { grid-row: 1 / span 2; }
.tile-radio .tile-bar b { grid-column: 2; overflow: hidden; text-overflow: ellipsis; }
.tile-radio .tile-bar small { grid-column: 2; white-space: normal; line-height: 1.5; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: #e0524a; box-shadow: 0 0 0 3px rgba(224, 82, 74, .25); animation: pulse 1.6s infinite; }
.badge.radio i { background: #dcbb82; box-shadow: 0 0 0 3px rgba(220, 187, 130, .25); animation: none; }
.tile-radio.on-air .badge.radio i { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(224, 82, 74, .2); } 50% { box-shadow: 0 0 0 6px rgba(224, 82, 74, .05); } }
.tile-ctl { display: flex; gap: 6px; pointer-events: auto; margin-inline-start: auto; }
.tb { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; padding: 0; transition: background .2s var(--ease); }
.tb svg { width: 16px; height: 16px; }
.tb:hover { background: rgba(156, 195, 176, .35); }
.tb.grid { display: none; }
.tile.focused .tb.grid { display: grid; }
.tile.audible { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent), var(--shadow); }
.wall[data-mode="focus"] .tiles { grid-template-columns: repeat(var(--others, 7), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; } /* --others: every tile but the focused one, one row under it (live.js) */
.wall[data-mode="focus"] .tile { grid-column: span 1; grid-row: 2; aspect-ratio: 16 / 9; }
.wall[data-mode="focus"] .tile.focused { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; }
.wall[data-mode="focus"] .tile:not(.focused) { grid-template-rows: minmax(0, 1fr) 22px; aspect-ratio: 16 / 9; }
.wall[data-mode="focus"] .tile:not(.focused) .badge, .wall[data-mode="focus"] .tile:not(.focused) .tile-bar small, .wall[data-mode="focus"] .tile:not(.focused) .tile-link, .wall[data-mode="focus"] .tile:not(.focused) .tile-ctl { display: none; }
.wall[data-mode="focus"] .tile:not(.focused) .tile-bar { padding: 0 8px; }
.wall[data-mode="focus"] .tile:not(.focused) .tile-bar b { font-size: 11.5px; }
.wall[data-mode="focus"] .tile-radio:not(.focused) .tile-bar { display: flex; padding: 0 8px; }
.wall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; padding: 6px 14px; font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--rule); border-radius: 999px; align-self: center; }
.wall-foot .kh-title { font-weight: 600; color: var(--ink); }
.wall-foot .kh { color: var(--sage-deep); font-weight: 600; }
.wall-foot .kh:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .live .wall { height: auto; min-height: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .tile .stage { container-type: normal; aspect-ratio: 16 / 9; }
  .tile-video { grid-column: span 2; }
  .tile .player, .tile .art { width: 100%; }
  .live .wall .tile, .wall[data-mode="focus"] .tile.focused { aspect-ratio: auto; grid-template-rows: auto auto; }
  .wall[data-mode="focus"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
  .wall[data-mode="focus"] .tile { grid-row: auto; }
  .wall[data-mode="focus"] .tile.focused { grid-column: 1 / -1; grid-row: 1; }
  .wall-foot { border-radius: 16px; }
}
/* the players' fixed layer in the home shell: each player over its tile by geometry; the current video docks below when the page is left */
#livehost { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
#livehost .livefeed { position: fixed; z-index: 2; border: 0; background: #000; visibility: hidden; }
#livehost .livecover { position: fixed; z-index: 3; pointer-events: none; visibility: hidden; background: #10231c center / cover no-repeat; display: grid; place-items: center; }
#livehost .livecover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 19, 15, .15), rgba(8, 19, 15, .55)); }
#livehost .livecover.clips { background-image: radial-gradient(circle at 50% 40%, rgba(220, 187, 130, .26), transparent 62%), linear-gradient(135deg, #2c4a3e, #10231c); }
#livehost .livecover .lc-play { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 19, 15, .55); border: 1.5px solid #dcbb82; color: #f3efe2; }
#livehost .livecover .lc-play svg { width: 26px; height: 26px; margin-inline-start: 3px; }
html[dir="rtl"] #livehost .livecover .lc-play svg { margin-inline-start: 0; margin-inline-end: 3px; }
#livedock { position: fixed; inset-inline: 0; bottom: 0; z-index: 1; pointer-events: auto; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--rule); box-shadow: 0 -8px 30px rgba(28, 42, 36, .08); padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); }
#livedock .dock-in { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "slot now ctl close"; column-gap: 14px; row-gap: 6px; align-items: center; }
#livedock .dock-slot { grid-area: slot; flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; border: 1px solid var(--rule); padding: 0; cursor: pointer; }
#livedock.big .dock-slot { opacity: .35; }
#livedock .dock-big { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-start: var(--gutter); width: min(640px, calc(100vw - 2 * var(--gutter))); border-radius: 14px; overflow: hidden; background: #050c09; border: 1px solid var(--rule-strong); box-shadow: 0 22px 60px rgba(0, 0, 0, .4); display: grid; grid-template-rows: 34px auto; }
#livedock .dock-big-bar { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; color: #fff; background: #0d1f18; }
#livedock .dock-big-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-big-bar .tb { width: 28px; height: 28px; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .08); }
#livedock .dock-big-video { aspect-ratio: 16 / 9; background: #000; }
#livedock .dock-now { grid-area: now; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#livedock .dock-name { font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-sub { color: var(--ink-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-ctl { grid-area: ctl; display: flex; align-items: center; justify-content: center; gap: 8px; }
#livedock .tb.dock-close { grid-area: close; }
#livedock .tb { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--ink); border: 0; }
#livedock .tb:hover { background: var(--sage-soft); }
#livedock .tb svg { width: 18px; height: 18px; }
#livedock .dock-play { background: var(--primary); color: var(--primary-ink); }
#livedock .dock-vol { width: 110px; accent-color: var(--sage); }
body.shell.video-on > main { padding-bottom: 92px; }
@media (max-width: 720px) {
  #livedock .dock-vol, #livedock .dock-sub { display: none; }
  #livedock .dock-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "slot now close" "slot ctl ctl"; column-gap: 12px; }
  #livedock .dock-slot { width: 104px; align-self: center; }
  #livedock .dock-now { flex-direction: column; align-items: flex-start; gap: 4px; }
  #livedock .dock-name { white-space: normal; line-height: 1.3; }
  #livedock .dock-ctl { justify-self: center; gap: 4px; }
}

/* ===== motion: slow rise-in, the mist drifting on the hero; all of it off for reduced motion ===== */
.js-motion .reveal { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-motion .reveal.in { opacity: 1; transform: none; }
.hero-bg .mist { animation: mist 26s ease-in-out infinite alternate; }
@keyframes mist { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.hero-inner > * { animation: rise 1s var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; } .hero-inner > :nth-child(3) { animation-delay: .16s; } .hero-inner > :nth-child(4) { animation-delay: .22s; } .hero-inner > :nth-child(5) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js-motion .reveal { opacity: 1; transform: none; }
}

/* ===== tablets and phones ===== */
@media (max-width: 1100px) {
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 14px; }
  .brand-name .brand-rip { display: block; margin: 0; }
}
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; gap: 0 14px; padding-top: 8px; }
  .brand { flex: 1; }
  .main-nav { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 18px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { padding: 10px 2px 14px; }
  .main-nav a::after, .main-nav a[aria-current="page"]::after { inset-block-end: 6px; }
  .utility-actions { grid-template-columns: 1fr; }
  .utility-item + .utility-item { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .utility-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .utility-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
  .reader-head { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 600px) {
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); --quran-size: 24px; }
  /* the mode switch on a phone: icon and name, equal thirds of the width; what the shown mode is for is the first
     line of the Reading and Listening views (.mode-lead), the Mushaf keeps its screen for the page */
  .site-header .subnav.modes { padding: 6px 12px 7px; }
  .subnav.modes .seg { width: 100%; }
  .subnav.modes a { justify-content: center; gap: 6px; padding: 7px 6px; }
  .subnav.modes a svg { width: 19px; height: 19px; }
  .subnav.modes .m-t b { font-size: 14px; }
  .subnav.modes .m-t small { display: none; }
  .readbar .l-long, .subnav.modes .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .readbar .l-short, .subnav.modes .l-short { display: inline; }
  .mode-lead { display: block; margin: 0 2px 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
  /* a compact masthead: the mark and the short name, the two round controls at the end; the nav moves to the tab bar */
  .main-nav { display: none; }
  /* phones: the band in two rows, the mark and the kicker with the buttons on the first, the name across the whole second */
  .header-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark kicker search menu" "name name name name"; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 0; padding: 7px 0 9px; }
  .header-inner > .brand, .header-inner .brand-copy { display: contents; }
  .brand-mark { grid-area: mark; width: 38px; height: 38px; }
  .brand-kicker { grid-area: kicker; font-size: 12.5px; line-height: 1.3; }
  .brand-name { grid-area: name; font-size: 23px; line-height: 1.4; text-align: center; white-space: normal; text-wrap: balance; }
  .brand-name .brand-rip { display: inline; font-size: 12.5px; margin-inline-start: 6px; }
  .hdr-search { grid-area: search; }
  .hdr-menu { grid-area: menu; }
  .icon-button, .language-button { width: 36px; height: 36px; }
  .header-controls { gap: 6px; }
  /* the status row: three at a time, fading to the next group (shell.js sets data-p every 4.5 s) */
  .stats-in { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); padding: 6px 0 7px; }
  .stat { grid-row: 1; flex-direction: column; gap: 2px; padding: 0 4px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
  .stat:nth-child(3n + 1) { grid-column: 1; border-inline-start: 0; }
  .stat:nth-child(3n + 2) { grid-column: 2; }
  .stat:nth-child(3n) { grid-column: 3; }
  .stat:nth-child(3n + 1):last-child { grid-column: 1 / -1; border-inline-start: 0; } /* a group of one (no counter, no sadaqah yet): centred across the strip */
  .stat-ic { display: none; }
  .stat-t { flex-direction: column; align-items: center; gap: 0; }
  .stat-t b { font-size: 13px; }
  .stat-t span { font-size: 10.5px; white-space: normal; line-height: 1.3; }
  .stats-in:not([data-p]) .stat:nth-child(-n + 3), .stats-in[data-p="0"] .stat:nth-child(-n + 3), .stats-in[data-p="1"] .stat:nth-child(n + 4) { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .15s, visibility 0s; }
  /* the tab bar */
  .tabbar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 48; height: var(--tabbar-h); padding: 6px 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 95%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--rule); }
  .tabbar > a, .tabbar > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-soft); font-size: 11.5px; font-weight: 500; position: relative; }
  .tabbar > a span, .tabbar > button span { white-space: nowrap; }
  .tabbar svg { width: 23px; height: 23px; color: var(--sage); }
  .tabbar > a[aria-current="page"], .tabbar > button.on { color: var(--ink); font-weight: 600; }
  .tabbar > a[aria-current="page"] svg, .tabbar > button.on svg { color: var(--sage-deep); }
  .tabbar > a[aria-current="page"]::after, .tabbar > button.on::after { content: ""; position: absolute; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
  .audiobar, #livedock { bottom: var(--tabbar-h) !important; }
  body { padding-bottom: var(--tabbar-h); }
  body.shell { padding-bottom: 0; }
  body.shell > main { padding-bottom: calc(var(--tabbar-h) + 12px); }
  .site-footer { padding-bottom: 28px; }
  /* home */
  .hero { min-height: auto; padding: 34px 18px 40px; }
  .eyebrow::before, .eyebrow::after { width: 22px; }
  /* phones: رحمه الله small and inline after the name, not a line of its own (the Friday card gets the room) */
  .memorial-title { display: block; text-align: center; text-wrap: balance; }
  .memorial-title .title-prefix { display: block; font-size: 20px; }
  .memorial-title strong { display: inline; font-size: clamp(30px, 9.4vw, 40px); line-height: 1.55; text-wrap: inherit; }
  .memorial-title .title-mercy { display: inline; margin: 0; margin-inline-start: .35em; font-size: 15px; vertical-align: .25em; white-space: nowrap; }
  .hero-dua { font-size: clamp(20px, 6.2vw, 25px); }
  .primary-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .action-button { justify-content: center; min-height: 50px; }
  .hero-friday { border-radius: 18px; padding: 12px 14px; flex-direction: column; gap: 8px; }
  .home-more { gap: 20px; padding-bottom: 32px; }
  .hadith-text { font-size: clamp(19px, 5.6vw, 22px); }
  .share-button { flex: 1; justify-content: center; }
  /* inner pages */
  main.wrap { padding-top: 14px; }
  .audiobar-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now close" "ctrl ctrl" "bar bar"; row-gap: 6px; }
  .audiobar .ctrl { justify-self: center; }
  .reader-head { gap: 8px; padding: 14px 12px; }
  .reader-head > .btn { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; }
  .reader-head > .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #surahSearch, #listenSearch { flex: 1 1 100% !important; min-width: 0 !important; }
  #continueBtn, #listenContinue { flex: 1 1 100%; }
  .slist { padding: 2px 14px; }
  .s-pg { display: none; }
  .reciter-card { padding: 14px 16px 16px; gap: 12px; }
  .rc-now b { font-size: 24px; }
  .rc-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .rc-list::-webkit-scrollbar { display: none; }
  .llist { padding-inline: 8px; }
  .readbar { padding: 6px; }
  body.readbar-on { --readbar-h: 64px; }
  .readbar .reader-tools { gap: 4px; }
  .readbar .chip { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 2px; border: 0; background: none; font-size: 11px; justify-content: center; }
  .readbar .chip svg { width: 22px; height: 22px; }
  .readbar .chip[aria-pressed="true"] { color: var(--sage-deep); background: none; }
  .readbar .chip.group { flex: 0 0 auto; flex-direction: row; gap: 10px; font-size: 14px; } /* A- A+ at their own width; the labelled chips share the rest */
  .reciter-pick, .mushaf-tools .chip, .mushaf-tools input, .mushaf-tools select, #listenSearch, #surahSearch { font-size: 16px; }
  .mushaf-section { display: flex; flex-direction: column; padding-top: 10px; }
  .mushaf-section .mushaf-tools { order: 2; justify-content: center; margin: 14px 0 0; }
  .mushaf-wrap { margin-inline: calc(6px - var(--gutter)); }
  .mushaf-wrap .mnav { padding-inline: calc(var(--gutter) - 6px); width: 100%; }
  body.q-focus.shell > main#view { width: 100%; padding-inline: var(--gutter); overflow-x: hidden; }
  body.m-reading .mushaf-wrap .mnav { padding-inline: 6px; }
  body.m-reading #prevPage, body.m-reading #nextPage { padding: 10px 16px; }
  body.m-reading #prevPage span, body.m-reading #nextPage span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sc-qr img { width: min(38vw, 150px); }
  /* live */
  .wall[data-mode="focus"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall[data-mode="focus"] .tile:not(.focused) { grid-template-rows: auto auto; aspect-ratio: auto; }
  .wall[data-mode="focus"] .tile:not(.focused) .tile-bar { padding: 5px 8px 6px; }
  .wall[data-mode="focus"] .tile:not(.focused) .tile-bar b { font-size: 12px; white-space: normal; line-height: 1.35; }
  .live .tile-bar { min-width: 0; overflow: hidden; }
  .live .tile-bar small { display: none; }
  .live .tile-bar .tile-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .live .tile-bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* ===== phones, the second layout (2026-10-23 mockups): less chrome, more content. The home keeps the brand masthead
   and the strip; every inner page has one slim title bar (menu, the page's icon and name, search where the page
   searches) and under it only the page's own row. The header is solid, so the status bar is one colour everywhere ===== */
@media (max-width: 600px) {
  .site-header { background: var(--band); -webkit-backdrop-filter: none; backdrop-filter: none; padding-block-start: env(safe-area-inset-top, 0px); } /* installed app: the bar starts under the iOS status bar, so the header carries that inset */
  .header-controls { display: none; }
  .hdr-menu { display: grid; }
  .hdr-search { display: grid; }
  .hdr-search:not([hidden]) + .hdr-menu { margin-inline-start: 0; }
  .header-inner > .hdr-search, .header-inner > .hdr-menu { flex: none; }
  .header-inner > .brand { margin-inline-end: auto; }
  /* one header on every page (Bakr, 2026-10-23): the brand band stays, the menu and the search sit at its end; the title bar is gone */
  .site-header .stats { display: none; }
  .tbar-side { display: flex; }
  .tbar-end { justify-content: flex-end; }
  .tbar-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--band-ink); }
  .tbar-btn:hover { background: rgba(255, 255, 255, .08); }
  .tbar-btn svg { width: 23px; height: 23px; }
  .tbar-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: var(--band-accent); }
  .tbar-title { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--band-ink); }
  .tbar-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbar-ic { flex: none; color: var(--band-accent); }
  .tbar-ic svg { width: 22px; height: 22px; }
  /* the page's row right under the title bar, slim */
  .site-header .subnav { border-block-start: 1px solid var(--rule); }
  .site-header .subnav.modes { padding: 5px 10px 6px; }
  .subnav.modes .seg { border-radius: 14px; padding: 3px; gap: 3px; }
  .subnav.modes a { padding: 6px 6px; min-height: 38px; border-radius: 11px; }
  /* the strip: one quiet row on the home, under the actions; the groups swap one after the other, never together */
  .strip-spot { width: 100%; }
  .strip-spot .stats { border: 0; margin-top: 2px; }
  .strip-spot .stats-in { width: 100%; padding: 4px 0; }
  .stat { transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .stats-in:not([data-p]) .stat:nth-child(-n + 3), .stats-in[data-p="0"] .stat:nth-child(-n + 3), .stats-in[data-p="1"] .stat:nth-child(n + 4) { transition: opacity .35s var(--ease) .4s, visibility 0s linear .4s; }
  /* home: the read action first and filled, the dua second and outlined; the masthead's eyebrow is the header's kicker */
  .primary-actions .action-primary { order: -1; }
  .primary-actions .action-dua { background: color-mix(in srgb, var(--page) 55%, transparent); border-color: var(--sage); box-shadow: none; }
  .hero-friday { margin-block: 20px; }
  /* the scene larger and clearer behind the name: a light veil where the words sit, the full page colour only where
     the actions and the cards begin */
  .hero { padding: 30px 16px 18px; }
  .hero-bg { background-position: center 42%; }
  .hero-bg::after { background:
    radial-gradient(ellipse 90% 34% at 50% 24%, color-mix(in srgb, var(--page) 74%, transparent) 0, color-mix(in srgb, var(--page) 40%, transparent) 60%, transparent 92%),
    linear-gradient(180deg, color-mix(in srgb, var(--page) 25%, transparent) 0, transparent 18%, transparent 30%, color-mix(in srgb, var(--page) 50%, transparent) 44%, color-mix(in srgb, var(--page) 86%, transparent) 60%, var(--page) 78%); }
  .memorial-title strong { text-shadow: 0 0 18px color-mix(in srgb, var(--page) 70%, transparent); }
  /* adhkar: the page names itself again now that the header carries the brand on every page */
  .scene-adhkar .reader-top { gap: 8px; margin-bottom: 10px; }
  .scene-adhkar .reader-top .muted { font-size: 14.5px; line-height: 1.6; }
  .scene-adhkar #resetBtn { min-height: 38px; padding: 0 14px; font-size: 14px; }
}
/* phones: one mini player above the tab bar, for whatever plays (the recitation bar or the docked live feed): an icon
   or the feed's picture, the name, play or pause, and a chevron that opens the full controls above it */
/* phones, the Mushaf (mushaf.js): the page full width; above it one slim row (previous, the juz and page as a pill that
   opens the index, next); under it a thin progress line; the toolbar sits above the mini player and the tab bar */
@media (max-width: 600px) {
  body.m-tools { --tools-h: 62px; }
  .mushaf-section .mushaf-tools, .mushaf-wrap > .mnav, #readGo { display: none; }
  body.m-reading .mushaf-wrap > .mnav { display: flex; }
  .mushaf-section { padding-top: 8px; }
  .mushaf-wrap { gap: 8px; }
  .m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-inline: calc(var(--gutter) - 6px); }
  .m-arrow { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); }
  .m-arrow svg { width: 20px; height: 20px; }
  .m-arrow:disabled { opacity: .4; }
  .m-pill { flex: 1; max-width: 240px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
  .m-pill svg { width: 16px; height: 16px; flex: none; color: var(--sage-deep); }
  .m-prog { display: none; align-items: center; gap: 10px; width: 100%; height: 14px; margin-top: -2px; padding-inline: calc(var(--gutter) + 2px); direction: ltr; }
  /* one page in both views (Bakr, 2026-10-23): the width sets the text size, the printed spacing, the same padding;
     a page taller than the screen scrolls */
  .mpage { padding: 10px 12px 6px; }
  .mhead { font-size: 13px; padding: 0 4px 4px; margin-bottom: 6px; }
  .mfoot { font-size: 13.5px; margin-top: 2px; line-height: 1.5; }
  .m-prog-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
  .m-prog-bar i { display: block; height: 100%; width: 0; background: var(--sage); }
  .m-prog span:last-child { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .m-toolbar { display: flex; position: fixed; inset-inline: 0; bottom: var(--bottom-bar, 0px); z-index: 39; height: var(--tools-h); padding: 4px 4px 2px; background: var(--page); border-top: 1px solid var(--rule); }
  .m-toolbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: var(--ink); font-size: 11.5px; font-weight: 500; line-height: 1.2; }
  .m-toolbar button span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-toolbar svg { width: 22px; height: 22px; color: var(--sage-deep); }
  .m-toolbar button:hover { background: var(--sage-soft); }
  .m-toolbar button:focus-visible, .m-arrow:focus-visible, .m-pill:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }
  body.m-reading .m-top, body.m-reading .m-prog { display: none; }
  /* reading mode: the page alone, edge to edge on one sheet of paper. The tools (a faint strip of icons at the bottom,
     two edge arrows, the mini player at its slimmest) show on a tap off the lines (body.m-strip, mushaf.js) and fade */
  body.m-reading .mushaf-wrap { padding: env(safe-area-inset-top) 0 0; gap: 0; background: #fdfcf7; }
  html[data-theme="dark"] body.m-reading .mushaf-wrap { background: #f6f3e8; }
  body.m-reading .mpage { width: 100%; margin-block: auto; border-width: 0; border-radius: 0; box-shadow: none; }
  body.m-reading .mushaf-wrap > .mnav { position: fixed; inset-inline: 0; top: 50%; z-index: 40; width: 100%; margin: 0; padding-inline: 4px; transform: translateY(-50%); justify-content: space-between; pointer-events: none; }
  body.m-reading .mushaf-wrap .mnav .btn { pointer-events: auto; width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(95, 133, 116, .3); background: rgba(253, 252, 247, .82); color: #3b5d4d; box-shadow: none; }
  body.m-reading .mushaf-wrap .mnav .btn svg { width: 20px; height: 20px; }
  body.m-reading .mushaf-wrap .mnav .btn:disabled { opacity: .35; }
  body.m-reading #readExit { display: none; }
  body.m-reading .mread-top { display: grid; place-items: center; position: fixed; top: calc(env(safe-area-inset-top) + 8px); inset-inline-start: 8px; z-index: 41; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(95, 133, 116, .3); background: rgba(253, 252, 247, .82); color: #3b5d4d; opacity: .5; transition: opacity .3s var(--ease); }
  body.m-reading .mread-top svg { width: 20px; height: 20px; }
  body.m-reading.m-strip .mread-top { opacity: 1; }
  body.m-reading #prevPage, body.m-reading #nextPage { padding: 0; }
  body.m-reading .m-toolbar { bottom: 0; height: calc(48px + env(safe-area-inset-bottom)); padding: 2px 10px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--page) 80%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top-color: color-mix(in srgb, var(--rule) 60%, transparent); }
  body.m-reading .m-toolbar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.m-reading .m-toolbar svg { width: 21px; height: 21px; color: var(--ink-soft); }
  body.m-reading #tbRead { order: 9; } /* the way out at the strip's far end */
  body.m-reading .m-toolbar, body.m-reading .mushaf-wrap > .mnav, body.m-reading #audiobar, body.m-reading #livedock, body.m-reading #playerChip { transition: opacity .2s var(--ease), visibility 0s; }
  body.m-reading:not(.m-strip) .m-toolbar, body.m-reading:not(.m-strip) .mushaf-wrap > .mnav, body.m-reading:not(.m-strip) #audiobar, body.m-reading:not(.m-strip) #livedock, body.m-reading:not(.m-strip) #playerChip { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
  body.m-reading:not(.m-strip) .mushaf-wrap > .mnav { opacity: .3; visibility: visible; } /* the edge arrows stay faintly there, so the way to the next page is never a secret */
  body.m-reading .sheet { bottom: 0; }
}
/* phones, the Quran's reading and listening (reader.js): the surah's card on top, each ayah a card with its action
   row and its own fold of tafsir (and translation); listening opens on the now-playing panel */
@media (max-width: 600px) {
  .mode-lead { display: none; }
  body:not(.q-search) #surahSearch:placeholder-shown, body:not(.q-search) #listenSearch:placeholder-shown { display: none; }
  .reader-head { padding: 14px 10px 12px; row-gap: 4px; }
  .reader-head h1 { font-size: 30px; }
  .reader-head .sub { font-size: 13px; line-height: 1.5; }
  .reader-head .reciter-pick { display: none; }
  .reader-ptools { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
  .reader-ptools .chip { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
  .reader-ptools .chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
  .ayahs { gap: 10px; margin-top: 12px; }
  .basmalah { margin: 4px 0 2px; }
  .ayah { display: flex; flex-direction: column; padding: 14px 14px 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); }
  .ayah:hover { background: var(--surface); }
  .ayah.playing { background: color-mix(in srgb, var(--sage) 13%, var(--surface)); border-color: var(--sage); }
  .ayah .quran { order: 0; }
  .ayah-actions { order: 1; display: flex; align-items: center; gap: 0; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--rule); }
  .ayah-actions button, .ayah-actions [data-act="tafsir"], .ayah-actions [data-act="share"] { display: inline-flex; flex: 1 1 0; justify-content: center; gap: 5px; min-height: 42px; padding: 0 4px; font-size: 13px; }
  .ayah-actions button svg { width: 16px; height: 16px; }
  .ayah-actions [aria-expanded="true"] { background: var(--sage-soft); }
  .ayah-actions .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ayah-actions .l-short { display: inline; }
  .a-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-inline-end: 4px; border: 1px solid var(--gold); border-radius: 50%; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .ayah .tf { order: 2; margin: 8px 0 6px; }
  .ayah .tr { order: 3; margin: 6px 0 6px; padding: 8px 12px; background: var(--surface-2); border-radius: 10px; border-inline-start: 2px solid var(--gold); font-size: 15.5px; }
  .ayah .tf[data-label]::before, .ayah .tr[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--sage-deep); line-height: 1.6; }
  .ayah .tf[data-label]::before { direction: rtl; }
  html[lang="ar"] .ayah .tr[data-label]::before, html[lang="ur"] .ayah .tr[data-label]::before { direction: rtl; }
  /* listening */
  #listenView .reciter-card { display: none; }
  .np-card { display: block; margin-bottom: 12px; padding: 16px 16px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
  .listen-opts { display: flex; flex-direction: column; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
  .listen-opts .set-row + .set-row { border-top: 1px solid var(--rule); }
  .listen-opts .set-timer { flex-wrap: wrap; padding-block: 10px; }
  .listen-opts .ms-seg button { min-height: 36px; padding: 0 10px; font-size: 13.5px; }
  #listenView .qbar { margin-bottom: 10px; }
}
@media (max-width: 600px) {
  #audiobar, #livedock { inset-inline: 8px; bottom: calc(var(--tabbar-h) + 6px) !important; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 8px 26px rgba(0, 0, 0, .16); }
  /* reading mode: the mini player at its slimmest, over the strip, shown and faded with it */
  body.m-reading #audiobar, body.m-reading #livedock { bottom: calc(env(safe-area-inset-bottom) + 54px) !important; }
  body.m-reading .ab-mini { grid-template-columns: minmax(0, 1fr) 38px 34px; height: 46px; gap: 6px; }
  body.m-reading .abm-ic { display: none; }
  body.m-reading .abm-play { width: 38px; height: 38px; }
  body.m-reading .abm-play svg, body.m-reading .abm-exp svg { width: 19px; height: 19px; }
  body.m-reading .abm-exp { width: 34px; height: 34px; }
  body.m-reading .abm-t { font-size: 16px; }
  body.m-reading #livedock .dock-in { grid-template-columns: 52px minmax(0, 1fr) auto; height: 46px; }
  body.m-reading #livedock .dock-slot { width: 52px; }
  #audiobar .audiobar-in { display: none; }
  .ab-mini { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px 40px; align-items: center; gap: 8px; height: 58px; }
  .abm-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sage-soft); color: var(--sage-deep); }
  .abm-ic svg { width: 22px; height: 22px; }
  .abm-now { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0; text-align: start; line-height: 1.3; }
  .abm-t { max-width: 100%; font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 18px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .abm-t.ui { font-family: var(--ui); font-weight: 600; font-size: 15px; }
  .abm-s { max-width: 100%; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .abm-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
  .abm-play svg { width: 22px; height: 22px; }
  .abm-exp { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); }
  .abm-exp svg { width: 22px; height: 22px; transition: transform .2s var(--ease); }
  #audiobar.open .abm-exp svg { transform: rotate(180deg); }
  .abm-play:focus-visible, .abm-exp:focus-visible, .abm-now:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
  .abm-bar { position: absolute; inset-inline: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; direction: ltr; }
  .abm-bar i { display: block; width: 0; height: 100%; background: var(--sage); transition: width .25s linear; }
  .ab-sheet:not([hidden]) { display: block; position: absolute; inset-inline: -1px; bottom: calc(100% + 8px); max-height: calc(100dvh - 190px); overflow-y: auto; padding: 18px 16px 16px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 20px; box-shadow: 0 -14px 44px rgba(0, 0, 0, .22); }
  /* the docked live feed as the same bar: its picture, the place, مباشر; expanded, the large video and its controls */
  #livedock .dock-in { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "slot now ctl"; column-gap: 10px; height: 58px; }
  #livedock .dock-slot { width: 64px; border-radius: 9px; }
  #livedock .dock-now { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
  #livedock .dock-name { white-space: nowrap; font-size: 15px; }
  #livedock .dock-now .badge { order: 2; padding: 0; background: none; color: var(--ink-faint); font-size: 12px; font-weight: 500; gap: 6px; }
  #livedock .badge i { width: 6px; height: 6px; }
  #livedock .tb.dock-close, #livedock .dock-fs, #livedock .dock-back { display: none; }
  #livedock.big .dock-back { display: grid; }
  #livedock .dock-ctl { gap: 2px; }
  #livedock .dock-play { width: 44px; height: 44px; }
  #livedock .dock-expand { color: var(--ink-soft); }
  .dock-expand .ic-wide { display: none; }
  .dock-expand .ic-phone { display: contents; }
  #livedock.big .dock-expand svg { transform: rotate(180deg); }
  #livedock .dock-big { inset-inline-start: -1px; width: calc(100% + 2px); bottom: calc(100% + 8px); border-radius: 18px; }
  /* the room under the content: whatever bars sit at the bottom (--bottom-bar), and a page's own toolbar (--tools-h) */
  body > main, body.audio-on main, body.readbar-on main, body.shell.video-on > main, body.readbar-on #view { padding-bottom: calc(var(--bottom-bar, 0px) + var(--tools-h, 0px) + 18px) !important; }
  .readbar { display: none !important; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 15px; }
  .brand-mark { width: 30px; height: 30px; }
  .tabbar > a, .tabbar > button { font-size: 10.5px; }
}

/* reading mode, the first two times: three plain cues for a moment (mushaf.js hint) */
.mread-top { display: none; }
.m-hint { position: fixed; inset: 0; z-index: 46; pointer-events: none; transition: opacity .45s var(--ease); }
.m-hint.out { opacity: 0; }
.m-hint .hp { position: absolute; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 999px; background: rgba(28, 42, 36, .9); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; box-shadow: var(--shadow-2); animation: hintIn .5s var(--ease) both; }
.m-hint .hp b { font-size: 22px; line-height: 1; }
.m-hint .hp-exit { top: calc(env(safe-area-inset-top) + 54px); inset-inline-start: 10px; animation-delay: .1s; }
.m-hint .hp-swipe { top: 44%; left: 50%; transform: translate(-50%, -50%); animation-delay: .5s; }
.m-hint .hp-tools { bottom: calc(env(safe-area-inset-bottom) + 70px); left: 50%; transform: translateX(-50%); animation-delay: .9s; }
.m-hint .hand { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #dcbb82; animation: hintHand 1.3s ease-in-out .9s 3; }
.m-hint .hand svg { width: 26px; height: 26px; }
@keyframes hintIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hintHand { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-12px); } 70% { transform: translateX(12px); } }