/* tokens.css */
/* GENERATED by scripts/extract-tokens.mjs from the Android app's res/values*.
   Do not hand-edit — edit the app's colors_m3.xml / colors_accents.xml and re-run `npm run tokens`.
   70 light roles, 70 dark overrides. */

:root {
  color-scheme: light dark;

  --primary: #006495;
  --on-primary: #FFFFFF;
  --primary-container: #CDE5FF;
  --on-primary-container: #001E31;
  --secondary: #41617E;
  --on-secondary: #FFFFFF;
  --secondary-container: #CDE5FF;
  --on-secondary-container: #001E31;
  --tertiary: #785908;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #FFDEA7;
  --on-tertiary-container: #251A00;
  --error: #B22832;
  --on-error: #FFFFFF;
  --error-container: #FFDAD7;
  --on-error-container: #420000;
  --background: #F5FAFF;
  --on-background: #181C21;
  --surface: #F5FAFF;
  --on-surface: #181C21;
  --surface-variant: #D7E4F3;
  --on-surface-variant: #3C4854;
  --outline: #6C7886;
  --outline-variant: #BBC8D7;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #EEF4FB;
  --surface-container: #E9EEF5;
  --surface-container-high: #E3E9EF;
  --surface-container-highest: #DDE3EA;
  --surface-dim: #D5DBE1;
  --surface-bright: #F5FAFF;
  --inverse-surface: #2C3136;
  --inverse-on-surface: #ECF1F8;
  --inverse-primary: #95CCFF;
  --scrim: #000000;
  --shadow: #000000;
  --hero-start: #00639B;
  --hero-end: #00A5B5;
  --hero-on: #FFFFFF;
  --hero-on-dim: #B8EAF6;
  --hero-glass: #FFFFFF2E;
  --hero-glass-stroke: #FFFFFF4D;
  --hero-accent: #FFC24D;
  --hero-track: #FFFFFF38;
  --azkar-morning: #8A5900;
  --azkar-morning-container: #FFDDB8;
  --azkar-morning-on-container: #281900;
  --azkar-evening: #A9430F;
  --azkar-evening-container: #FFDBCB;
  --azkar-evening-on-container: #311300;
  --azkar-prayer: #006C9A;
  --azkar-prayer-container: #CAE6FF;
  --azkar-prayer-on-container: #001E2F;
  --azkar-sleep: #475BBB;
  --azkar-sleep-container: #E1E0FF;
  --azkar-sleep-on-container: #00184A;
  --azkar-waking: #016D7E;
  --azkar-waking-container: #A7EEFF;
  --azkar-waking-on-container: #001F26;
  --grade-quran: #00699E;
  --grade-quran-container: #CFE5FF;
  --grade-quran-on-container: #001E32;
  --grade-sound: #007249;
  --grade-sound-container: #8EF7C0;
  --grade-sound-on-container: #002111;
  --grade-weak: #9E4B24;
  --grade-weak-container: #FFDBCC;
  --grade-weak-on-container: #311300;
  --progress-done: #269866;
  --azkar-favorite: #C23648;

  /* Typography — Arabic faces are loaded in fonts.css; these are the stacks. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* These names must match the @font-face families in fonts.css, which are generated from the
     font binaries. A name that matches nothing fails silently to the next entry, so the text
     renders in the wrong face with no error anywhere. */
  --font-arabic: "Amiri", "AmiriFallback", serif;
  --font-quran: "HafsUthmanic", "HafsUthmanicFallback", "Amiri", serif;

  /* Scale — 1.25 major third, clamped for fluid type. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.56rem, 1.44rem + 0.6vw, 1.8rem);
  --step-3:  clamp(1.95rem, 1.75rem + 1vw, 2.3rem);

  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;
  --radius: 12px; --radius-lg: 20px;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #95CCFF;
    --on-primary: #003450;
    --primary-container: #004B72;
    --on-primary-container: #CDE5FF;
    --secondary: #AACAEB;
    --on-secondary: #0B334D;
    --secondary-container: #284A65;
    --on-secondary-container: #CDE5FF;
    --tertiary: #EBC070;
    --on-tertiary: #402D00;
    --tertiary-container: #5C4300;
    --on-tertiary-container: #FFDEA7;
    --error: #FFB4AD;
    --on-error: #690012;
    --error-container: #93001E;
    --on-error-container: #FFDAD7;
    --background: #0F1419;
    --on-background: #DDE3EA;
    --surface: #0F1419;
    --on-surface: #DDE3EA;
    --surface-variant: #3C4854;
    --on-surface-variant: #BBC8D7;
    --outline: #8692A0;
    --outline-variant: #3C4854;
    --surface-container-lowest: #080F15;
    --surface-container-low: #181C21;
    --surface-container: #1C2025;
    --surface-container-high: #262A2F;
    --surface-container-highest: #31353A;
    --surface-dim: #0F1419;
    --surface-bright: #353A3F;
    --inverse-surface: #DDE3EA;
    --inverse-on-surface: #2C3136;
    --inverse-primary: #006495;
    --scrim: #000000;
    --shadow: #000000;
    --hero-start: #003D63;
    --hero-end: #006C79;
    --hero-on: #FFFFFF;
    --hero-on-dim: #A6D8E6;
    --hero-glass: #FFFFFF2E;
    --hero-glass-stroke: #FFFFFF4D;
    --hero-accent: #F4B03C;
    --hero-track: #FFFFFF38;
    --azkar-morning: #F4A62C;
    --azkar-morning-container: #643F00;
    --azkar-morning-on-container: #FFDDB8;
    --azkar-evening: #FF9E70;
    --azkar-evening-container: #7F2B00;
    --azkar-evening-on-container: #FFDBCB;
    --azkar-prayer: #58BFFF;
    --azkar-prayer-container: #004C6D;
    --azkar-prayer-on-container: #CAE6FF;
    --azkar-sleep: #ACAFFF;
    --azkar-sleep-container: #1D409A;
    --azkar-sleep-on-container: #E1E0FF;
    --azkar-waking: #06C7E5;
    --azkar-waking-container: #004E5B;
    --azkar-waking-on-container: #A7EEFF;
    --grade-quran: #6EBCFF;
    --grade-quran-container: #004B73;
    --grade-quran-on-container: #CFE5FF;
    --grade-sound: #60CA95;
    --grade-sound-container: #005233;
    --grade-sound-on-container: #8EF7C0;
    --grade-weak: #FF9E71;
    --grade-weak-container: #7B2E07;
    --grade-weak-on-container: #FFDBCC;
    --progress-done: #41AE7A;
    --azkar-favorite: #FFABAB;
  }
}

:root[data-theme="dark"] {
    --primary: #95CCFF;
    --on-primary: #003450;
    --primary-container: #004B72;
    --on-primary-container: #CDE5FF;
    --secondary: #AACAEB;
    --on-secondary: #0B334D;
    --secondary-container: #284A65;
    --on-secondary-container: #CDE5FF;
    --tertiary: #EBC070;
    --on-tertiary: #402D00;
    --tertiary-container: #5C4300;
    --on-tertiary-container: #FFDEA7;
    --error: #FFB4AD;
    --on-error: #690012;
    --error-container: #93001E;
    --on-error-container: #FFDAD7;
    --background: #0F1419;
    --on-background: #DDE3EA;
    --surface: #0F1419;
    --on-surface: #DDE3EA;
    --surface-variant: #3C4854;
    --on-surface-variant: #BBC8D7;
    --outline: #8692A0;
    --outline-variant: #3C4854;
    --surface-container-lowest: #080F15;
    --surface-container-low: #181C21;
    --surface-container: #1C2025;
    --surface-container-high: #262A2F;
    --surface-container-highest: #31353A;
    --surface-dim: #0F1419;
    --surface-bright: #353A3F;
    --inverse-surface: #DDE3EA;
    --inverse-on-surface: #2C3136;
    --inverse-primary: #006495;
    --scrim: #000000;
    --shadow: #000000;
    --hero-start: #003D63;
    --hero-end: #006C79;
    --hero-on: #FFFFFF;
    --hero-on-dim: #A6D8E6;
    --hero-glass: #FFFFFF2E;
    --hero-glass-stroke: #FFFFFF4D;
    --hero-accent: #F4B03C;
    --hero-track: #FFFFFF38;
    --azkar-morning: #F4A62C;
    --azkar-morning-container: #643F00;
    --azkar-morning-on-container: #FFDDB8;
    --azkar-evening: #FF9E70;
    --azkar-evening-container: #7F2B00;
    --azkar-evening-on-container: #FFDBCB;
    --azkar-prayer: #58BFFF;
    --azkar-prayer-container: #004C6D;
    --azkar-prayer-on-container: #CAE6FF;
    --azkar-sleep: #ACAFFF;
    --azkar-sleep-container: #1D409A;
    --azkar-sleep-on-container: #E1E0FF;
    --azkar-waking: #06C7E5;
    --azkar-waking-container: #004E5B;
    --azkar-waking-on-container: #A7EEFF;
    --grade-quran: #6EBCFF;
    --grade-quran-container: #004B73;
    --grade-quran-on-container: #CFE5FF;
    --grade-sound: #60CA95;
    --grade-sound-container: #005233;
    --grade-sound-on-container: #8EF7C0;
    --grade-weak: #FF9E71;
    --grade-weak-container: #7B2E07;
    --grade-weak-on-container: #FFDBCC;
    --progress-done: #41AE7A;
    --azkar-favorite: #FFABAB;
}

/* fonts.css */
/* GENERATED by scripts/build-fonts.mjs — do not hand-edit.
   5 Arabic faces, subset to 1344 codepoints. */

@font-face {
  font-family: "Amiri";
  src: url("/fonts/amiri.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-007E;
}

/* Metric-compatible fallback — holds the line box while "Amiri" loads. */
@font-face {
  font-family: "AmiriFallback";
  src: local("Geeza Pro"), local("Noto Naskh Arabic"), local("Arial");
  ascent-override: 112.4%;
  descent-override: 63.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "HafsUthmanic";
  src: url("/fonts/hafs.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-007E;
}

/* Metric-compatible fallback — holds the line box while "HafsUthmanic" loads. */
@font-face {
  font-family: "HafsUthmanicFallback";
  src: local("Geeza Pro"), local("Noto Naskh Arabic"), local("Arial");
  ascent-override: 117.19%;
  descent-override: 58.59%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Lateef";
  src: url("/fonts/lateef.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-007E;
}

/* Metric-compatible fallback — holds the line box while "Lateef" loads. */
@font-face {
  font-family: "LateefFallback";
  src: local("Geeza Pro"), local("Noto Naskh Arabic"), local("Arial");
  ascent-override: 94.58%;
  descent-override: 50%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/fonts/noto-naskh-arabic.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-007E;
}

/* Metric-compatible fallback — holds the line box while "Noto Naskh Arabic" loads. */
@font-face {
  font-family: "Noto Naskh ArabicFallback";
  src: local("Geeza Pro"), local("Noto Naskh Arabic"), local("Arial");
  ascent-override: 106.9%;
  descent-override: 63.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Scheherazade";
  src: url("/fonts/scheherazade.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+0020-007E;
}

/* Metric-compatible fallback — holds the line box while "Scheherazade" loads. */
@font-face {
  font-family: "ScheherazadeFallback";
  src: local("Geeza Pro"), local("Noto Naskh Arabic"), local("Arial");
  ascent-override: 101.12%;
  descent-override: 67.68%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "HafsGlyphFix";
  src: url("/fonts/amiri.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+066B, U+066C;
}

/* The reader picks a face by setting --font-quran on the html element. */
.font-hafs         { --font-quran: "HafsGlyphFix", "HafsUthmanic", "HafsUthmanicFallback", serif;
                     --quran-features: normal; }
.font-scheherazade { --font-quran: "Scheherazade", "ScheherazadeFallback", serif;
                     --quran-features: "cv62" 1; }
.font-default      { --font-quran: "Noto Naskh Arabic", "Noto Naskh ArabicFallback", serif;
                     --quran-features: normal; }
.font-amiri        { --font-quran: "Amiri", "AmiriFallback", serif;
                     --quran-features: normal; }
.font-lateef       { --font-quran: "Lateef", "LateefFallback", serif;
                     --quran-features: "cv62" 1; }

.quran-text, .arabic { font-feature-settings: var(--quran-features, normal); }

/* main.css */
/* Base styles. Logical properties throughout, so one stylesheet serves LTR and RTL. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface);
}
:where(h1, h2, h3) { line-height: 1.25; text-wrap: balance; margin-block: 0 var(--space-3); }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-block-start: var(--space-6); }
h3 { font-size: var(--step-1); margin-block-start: var(--space-5); }
p { margin-block: 0 var(--space-4); max-inline-size: var(--measure); }
a { color: var(--primary); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.wrap { inline-size: min(100% - 2rem, 72rem); margin-inline: auto; }

.skip-link {
  position: absolute; inset-block-start: -3rem; inset-inline-start: var(--space-4);
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-2) var(--space-4); border-radius: 0 0 var(--radius) var(--radius);
  z-index: 10; transition: inset-block-start 0.15s;
}
.skip-link:focus { inset-block-start: 0; }

/* ---- Play Store banner ------------------------------------------------------------------
   A strip above the header, in the same hero gradient the home page uses, so the one piece of
   promotion on the site reads as part of the design rather than as an ad bolted on top.

   It is in the flow, not fixed: a sticky bar on a reading site steals screen from the ayah on
   every page, and this has to be dismissible anyway. `.app-banner-off` is set on <html> before
   paint by the head script once the visitor has dismissed it. */
.app-banner {
  /* Sticky, not fixed: it keeps its space in the flow, so nothing has to be pushed down by a
     hand-maintained offset and the first ayah is never hidden under it on load. z-index 5 puts
     it over the page but under the skip link (10), which must stay reachable. The bottom player
     in reader.css also uses 5 and sticks to the opposite edge, so the two never meet. */
  position: sticky; inset-block-start: 0; z-index: 5;
  background: linear-gradient(100deg, var(--hero-start), var(--hero-end));
  /* A shadow only once it is actually overlapping content — at rest it sits on the header's own
     border and a shadow there would read as a seam. */
  box-shadow: 0 1px 12px #00000026;
  color: var(--hero-on);
  /* The gradient is a light surface in both themes, so the focus ring inherited from --primary
     would be low-contrast against it. */
  --focus-on-hero: #FFFFFF;
}
.app-banner-off .app-banner { display: none; }
.app-banner :focus-visible { outline-color: var(--focus-on-hero); }

/* Icon, text and store button travel together as one centred group; the dismiss control is
   taken out of the flow and pinned to the trailing edge so it cannot pull that group off
   centre. Extra inline padding keeps the group clear of the close button at the width where
   they would otherwise meet. */
.app-banner .wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: 2.5rem;
  min-block-size: 3.25rem;
}

/* The icon is decorative next to a title that already says what the app is, so it carries an
   empty alt and is dropped rather than wrapped when space runs out. */
.app-banner-icon {
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 10px; flex: 0 0 auto;
  background: var(--hero-glass);
  box-shadow: 0 1px 3px #00000033;
}

.app-banner-text { display: flex; flex-direction: column; line-height: 1.35; min-inline-size: 0; }
.app-banner-title { font-size: var(--step-0); font-weight: 650; }
.app-banner-sub {
  font-size: var(--step--1); color: var(--hero-on-dim);
  /* One line: on a narrow screen this is the first thing above the nav and must not grow into a
     paragraph that pushes the header off-screen. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-banner-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--hero-glass); border: 1px solid var(--hero-glass-stroke);
  /* Backdrop blur is an enhancement; the translucent fill alone already reads as a button. */
  backdrop-filter: blur(6px);
  color: var(--hero-on); text-decoration: none; font-weight: 600; font-size: var(--step--1);
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.app-banner-cta:hover { background: #FFFFFF; color: #12181F; text-decoration: none; transform: translateY(-1px); }
.app-banner-cta:active { transform: none; }
.app-banner-play { inline-size: 1.05rem; block-size: 1.15rem; flex: 0 0 auto; }

.app-banner-close {
  position: absolute; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 28px; block-size: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--hero-on-dim); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.app-banner-close:hover { background: var(--hero-glass); color: var(--hero-on); }

/* On a phone the icon goes and the store button keeps only its Play mark — the label is
   redundant next to a mark everyone recognises, and dropping it is what buys the width for the
   message itself. The message is the one thing that must survive: "download our app" alone
   names no reason to, so the feature line stays and is allowed to wrap. */
@media (max-width: 30rem) {
  .app-banner-icon { display: none; }
  .app-banner .wrap { gap: var(--space-2); padding-inline: 1.75rem; align-items: center; }
  .app-banner-title { font-size: var(--step--1); }
  /* Four items rather than three: a shade smaller is what keeps the feature line to one row on
     a 360px screen. It is a supporting line, not body copy, so it may go below the base scale. */
  .app-banner-sub {
    white-space: normal; font-size: 0.7rem;
    /* If the four items do not fit on one row on the narrowest phones, they break into two even
       halves rather than leaving "Azkar" alone on a second line. */
    text-wrap: balance;
  }
  .app-banner-cta { padding: var(--space-2); }
  .app-banner-cta-label {
    position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .app-banner-play { inline-size: 1.3rem; block-size: 1.45rem; }
}

.site-header { border-block-end: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-5); min-block-size: 3.5rem; flex-wrap: wrap; }
/* The brand and the tools take equal share of the free space so the nav sits on the page's
   centre line, not merely centred in whatever is left over after the wider of the two. Both keep
   their own content aligned to the outside edges. */
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--on-surface); text-decoration: none; flex: 1 1 0; min-inline-size: max-content; }
.brand-mark { color: var(--primary); font-size: 1.3em; }
.site-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; flex: 0 1 auto; }
.site-nav a {
  color: var(--on-surface-variant); text-decoration: none;
  /* WCAG 2.2 target size. Short Arabic nav words ("تعلّم") measure only 21px wide, so the
     minimum is set on the box rather than left to the text. */
  display: inline-flex; align-items: center;
  min-inline-size: 24px; min-block-size: 24px;
}
.site-nav a:hover { color: var(--primary); text-decoration: underline; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex: 1 1 0; min-inline-size: max-content; }
.lang-switch { color: var(--on-surface-variant); text-decoration: none; font-size: var(--step--1); }
.theme-toggle { background: none; border: 1px solid var(--outline-variant); border-radius: var(--radius); color: var(--on-surface-variant); cursor: pointer; padding: var(--space-1) var(--space-3); font-size: 1rem; }

main { padding-block: var(--space-6) var(--space-7); }

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); font-size: var(--step--1); color: var(--on-surface-variant); }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--outline); }
.breadcrumbs a { color: var(--on-surface-variant); }

.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); padding: 0; list-style: none; margin-block: var(--space-5); }
.card { display: block; padding: var(--space-4); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); background: var(--surface-container-lowest); text-decoration: none; color: inherit; }
.card:hover { border-color: var(--primary); }
.card h3 { margin-block: 0 var(--space-1); font-size: var(--step-1); }
.card p { margin: 0; color: var(--on-surface-variant); font-size: var(--step--1); }

/* Arabic content. --font-quran is set by a .font-* class from fonts.css. */
.arabic, .quran-text { font-family: var(--font-quran); direction: rtl; text-align: right; line-height: 2.1; font-size: 1.6rem; }
:lang(ar) .site-nav, :lang(ar) p { letter-spacing: 0; }

.site-footer { border-block-start: 1px solid var(--outline-variant); background: var(--surface-container-low); padding-block: var(--space-5); margin-block-start: var(--space-7); font-size: var(--step--1); color: var(--on-surface-variant); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.site-footer nav { display: flex; gap: var(--space-4); }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- WCAG 2.2 SC 2.5.8, Target Size (Minimum) -------------------------------------------
   Every interactive target must be at least 24x24 CSS px. Several were smaller: the language
   switch, breadcrumb links, and the per-verse play/copy buttons. Padding alone would change the
   visual design, so the hit area is grown with a pseudo-element instead — the control looks the
   same and the target meets the minimum. */
.lang-switch, .breadcrumbs a, .site-footer nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
.lang-switch::after, .breadcrumbs a::after, .site-footer nav a::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  block-size: 24px;
  transform: translateY(-50%);
  /* The padded area is only a target; it must not swallow clicks meant for what sits behind it
     at the edges, so it is inset horizontally to the text box exactly. */
}

/* ---- Mobile header ----------------------------------------------------------------------
   Six nav items wrapped onto three rows and pushed the hero below the fold. On narrow screens
   the nav scrolls horizontally on one line instead. A scrolling row keeps every destination
   reachable without a menu button, which would need JS and hide the destinations behind a tap. */
@media (max-width: 48rem) {
  .site-header .wrap { gap: var(--space-2) var(--space-3); padding-block: var(--space-2); }
  .site-nav {
    order: 3;
    inline-size: 100%;
    flex: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-5);
    padding-block-end: var(--space-1);
    scrollbar-width: none;
    /* Fade the trailing edge so it reads as scrollable rather than clipped. */
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* `gap` alone collapsed between multi-word items once the links became inline-flex for the
     target-size minimum; explicit padding keeps them visually separated while scrolling.

     `flex: 0 0 auto` is what actually stops them colliding. A flex child shrinks by default, so
     in this nowrap strip every link was squeezed to about two-thirds of its intrinsic width while
     `white-space: nowrap` kept the text at full width — the text then spilled out of its own box
     and ran into the next item ("Prayer TimesAzkar"). The boxes never overlapped, which is why
     this survived: it is only visible on screen, not in the geometry. Items in a horizontally
     scrolling strip must keep their intrinsic width; that is what the scrolling is for. */
  .site-nav a { white-space: nowrap; padding-inline: var(--space-1); flex: 0 0 auto; }
  .header-tools { flex: 0 0 auto; margin-inline-start: auto; }
  [dir="rtl"] .site-nav { mask-image: linear-gradient(to left, #000 85%, transparent); }
}

/* An <a> styled as a button should not also carry a link underline. */
a.btn-primary { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
a.btn-primary:hover { text-decoration: none; }

/* Editorial policy on /about/: a definition list of the three kinds of page and the standard each
   is held to. `dt` carries the weight so the three categories read as the structure of the
   argument, not as three more paragraphs. */
.policy { margin-block: var(--space-4); display: grid; gap: var(--space-3); }
.policy dt { font-weight: 600; }
.policy dd { margin-inline-start: 0; padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--outline-variant); color: var(--on-surface-variant); }

/* Provenance line on the pages most likely to be quoted elsewhere: who published this, when it
   was last reviewed, and where the machine-readable copy is. Quiet by design — it is a claim of
   accountability, not a call to action. */
.provenance { margin-block-start: var(--space-5); padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--outline-variant);
  color: var(--on-surface-variant); font-size: var(--step--1); }

/* reader.css */
/* Surah reader, index and juz pages. Logical properties throughout so one file serves both dirs. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--on-surface-variant); margin-block-end: var(--space-1); }
.lede { font-size: var(--step-1); color: var(--on-surface-variant); max-inline-size: var(--measure); }

/* ---- Surah header ---- */
.surah-header { border-block-end: 1px solid var(--outline-variant); padding-block-end: var(--space-5); margin-block-end: var(--space-5); }
.surah-header h1 { display: flex; flex-direction: column; gap: var(--space-1); }
.surah-name-ar { font-family: var(--font-arabic); font-size: 1.4em; line-height: 1.5; }
.surah-name-latin { font-size: 0.55em; color: var(--on-surface-variant); font-weight: 500; }

.surah-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; }
.surah-facts div { display: flex; flex-direction: column; }
.surah-facts dt { font-size: var(--step--1); color: var(--on-surface-variant); }
.surah-facts dd { margin: 0; font-weight: 600; }

/* ---- Verses ---- */
.verses { list-style: none; padding: 0; margin: var(--space-5) 0; counter-reset: none; }
.verse { padding: var(--space-4) 0; border-block-end: 1px solid var(--outline-variant); scroll-margin-block-start: 5rem; }
.verse:last-child { border-block-end: 0; }
.verse:target { background: var(--primary-container); border-radius: var(--radius);
  padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1); }

.verse-head { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.verse-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 2rem; min-block-size: 2rem; padding: 0 var(--space-2);
  border: 1px solid var(--outline-variant); border-radius: 999px;
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant); text-decoration: none;
}
.verse-num:hover, .verse-num:focus-visible { border-color: var(--primary); color: var(--primary); }
.sajda { color: var(--tertiary); font-size: 1.2em; }
.verse-copy { background: none; border: 0; cursor: pointer; opacity: 0; padding: var(--space-1);
  font-size: 0.9rem; border-radius: var(--radius); color: var(--on-surface-variant); }
.verse:hover .verse-copy, .verse-copy:focus-visible { opacity: 1; }
.verse-copy[data-copied="true"] { opacity: 1; color: var(--primary); }

.quran-text { font-family: var(--font-quran, "Amiri", serif); direction: rtl; text-align: right;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 2.2; margin: 0 0 var(--space-3);
  max-inline-size: none; }
.verse-translation { color: var(--on-surface-variant); margin: 0; max-inline-size: var(--measure); }
.bismillah { text-align: center; padding-block: var(--space-5); border-block-end: 1px solid var(--outline-variant); }

.verse-divider { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-5);
  color: var(--on-surface-variant); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; }
.verse-divider::before, .verse-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--outline-variant); }

/* ---- Surah index list ---- */
.surah-list { list-style: none; padding: 0; margin: var(--space-4) 0;
  display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.surah-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--outline-variant); border-radius: var(--radius); text-decoration: none; color: inherit; }
.surah-list a:hover { border-color: var(--primary); background: var(--surface-container-low); }
.surah-num { flex: none; inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center;
  border-radius: 999px; background: var(--primary-container); color: var(--on-primary-container);
  font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.surah-list-name { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.n-primary { font-weight: 600; }
.n-secondary, .surah-list-meta { font-size: var(--step--1); color: var(--on-surface-variant); }
.surah-list-meta { text-align: end; flex: none; }

/* ---- Tabs, tables, nav, FAQ ---- */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block: var(--space-5); }
.tabs a { padding: var(--space-2) var(--space-4); border: 1px solid var(--outline-variant);
  border-radius: 999px; text-decoration: none; color: var(--on-surface-variant); }
.tabs a[aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.data-table { inline-size: 100%; border-collapse: collapse; margin-block: var(--space-4); }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); text-align: start;
  border-block-end: 1px solid var(--outline-variant); font-variant-numeric: tabular-nums; }
.data-table thead th { font-size: var(--step--1); color: var(--on-surface-variant); }
/* Wide content scrolls inside its own container; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; }

.surah-nav { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin-block: var(--space-6); }
.surah-nav a { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--outline-variant); border-radius: var(--radius); text-decoration: none; color: inherit; flex: 1; }
.surah-nav a:hover { border-color: var(--primary); }
.nav-next { text-align: end; }
.nav-label { font-size: var(--step--1); color: var(--on-surface-variant); }
.nav-name { font-weight: 600; }

.faq h3 { font-size: var(--step-1); }
.faq p { color: var(--on-surface-variant); }

.sourcing { margin-block-start: var(--space-6); padding: var(--space-4);
  background: var(--surface-container-low); border-radius: var(--radius); }
.sourcing h2 { margin-block-start: 0; font-size: var(--step-1); }
.sourcing p { font-size: var(--step--1); margin: 0; }

.licence-notice { white-space: pre-wrap; font-size: var(--step--1); line-height: 1.5;
  background: var(--surface-container); padding: var(--space-4); border-radius: var(--radius);
  overflow-x: auto; color: var(--on-surface-variant); }
.licence-list dt { font-weight: 600; margin-block-start: var(--space-4); }
.licence-list dd { margin-inline-start: 0; }
.licence-list dd p { font-size: var(--step--1); color: var(--on-surface-variant); }

/* ---- Print: people print surahs. The app cannot do this at all. §3.3 ---- */
@media print {
  .site-header, .site-footer, .surah-nav, .tabs, .verse-copy, .skip-link, .breadcrumbs { display: none; }
  body { background: #fff; color: #000; }
  .verse { break-inside: avoid; border-block-end: 1px solid #ddd; }
  .quran-text { font-size: 18pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* An RTL span inside an LTR page inherits its own text-align from `dir`, which floats the Arabic
   surah name to the far edge. The base direction must stay RTL for correct glyph ordering, so
   alignment is set from the PAGE direction instead. */
.surah-header h1 { align-items: flex-start; }
[dir="ltr"] .surah-name-ar { text-align: left; align-self: stretch; }
[dir="rtl"] .surah-name-ar { text-align: right; align-self: stretch; }

/* Number ranges ("2–49") reverse visually inside an RTL paragraph. Isolating them keeps the range
   reading in its own direction without breaking the surrounding Arabic. */
.surah-facts dd, .data-table td, .data-table th { unicode-bidi: isolate; }

/* ---- Audio player -------------------------------------------------------------------
   Sticky above the content, so it must be SHORT: every pixel here is a pixel of the verse the
   reader is trying to read. One row, labels hidden (each select carries its own title), and the
   keyboard shortcuts behind a hint rather than occupying a line of their own. */
.player {
  position: sticky; inset-block-end: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3); margin-block: var(--space-3);
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.player-transport { display: flex; align-items: center; gap: var(--space-1); }
.player-btn {
  min-inline-size: 2.25rem; min-block-size: 2.25rem; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--on-surface-variant); font-size: 0.9rem;
}
.player-btn:hover { background: var(--surface-container-high); color: var(--primary); }
.player-play { background: var(--primary); color: var(--on-primary);
  inline-size: 2.5rem; block-size: 2.5rem; font-size: 1rem; }
.player-play:hover { background: var(--primary); color: var(--on-primary); filter: brightness(1.1); }
.player-play::before { content: "▶"; }
.player-play[data-state="playing"]::before { content: "⏸"; }
.player-status { font-size: var(--step--1); color: var(--on-surface-variant);
  min-inline-size: 6ch; font-variant-numeric: tabular-nums; }

.player-settings { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-inline-start: auto; }
.player-field { display: flex; align-items: center; }
.player-field select {
  font: inherit; font-size: var(--step--1);
  padding: var(--space-1) var(--space-2); border-radius: 999px;
  border: 1px solid var(--outline-variant); background: var(--surface-container-lowest);
  color: var(--on-surface); max-inline-size: 11rem; block-size: 2.25rem;
}
.player-keys { font-size: var(--step--1); color: var(--outline); cursor: help; padding-inline: var(--space-1); }

.verse-play { background: none; border: 0; cursor: pointer; opacity: 0; padding: var(--space-1);
  font-size: 0.8rem; color: var(--on-surface-variant); border-radius: var(--radius); }
.verse:hover .verse-play, .verse-play:focus-visible { opacity: 1; }

/* The verse currently being recited. Verse-level by design — each verse is its own audio file. */
.verse.is-playing {
  background: var(--primary-container); border-radius: var(--radius);
  padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1);
}
.verse.is-playing .verse-num { border-color: var(--primary); color: var(--on-primary-container); }

.resume-link { display: inline-block; margin-block-end: var(--space-4); font-size: var(--step--1); }

@media (max-width: 40rem) {
  .player-settings { margin-inline-start: 0; inline-size: 100%; }
  .player-field select { max-inline-size: 100%; }
}

/* WCAG 2.2 target size: the per-verse controls were 19x24 and 23x27. */
.verse-copy, .verse-play {
  min-inline-size: 28px;
  min-block-size: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* They are revealed on hover, but a keyboard user never hovers — so they are always present for
   keyboard and for anyone who prefers reduced motion, and only fade for pointer users. */
@media (hover: none) {
  .verse-copy, .verse-play { opacity: 1; }
}

.player-help { margin: 0; font-size: var(--step--1); color: var(--on-surface-variant); flex-basis: 100%; }
.player-help kbd { font: inherit; font-family: ui-monospace, monospace; padding: 1px var(--space-2);
  border: 1px solid var(--outline-variant); border-radius: 4px; background: var(--surface-container-lowest); }

/* ---- Reader toolbar -------------------------------------------------------------------- */
.reader-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-4); margin-block: var(--space-4);
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  background: var(--surface-container-low);
}
.toolbar-group { display: flex; align-items: center; gap: var(--space-2); }
.toolbar-label { font-size: var(--step--1); color: var(--on-surface-variant); }
.toolbar-btn {
  font: inherit; cursor: pointer; min-inline-size: 2.5rem; min-block-size: 2.5rem;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  background: var(--surface-container-lowest); color: var(--on-surface);
}
.toolbar-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.toolbar-btn:disabled { opacity: 0.45; cursor: default; }
.tb-small { font-size: 0.7em; } .tb-large { font-size: 1.15em; }
.toolbar-value {
  min-inline-size: 4ch; text-align: center; font-size: var(--step--1);
  font-variant-numeric: tabular-nums; color: var(--on-surface-variant);
}
.toolbar-check { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); color: var(--on-surface-variant); min-block-size: 2.5rem; cursor: pointer; }
.toolbar-check input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--primary); }
.toolbar-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: 600; min-block-size: 2.5rem; }
.toolbar-count { padding: 0 var(--space-2); border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-variant-numeric: tabular-nums; }

/* The scale applies to the Arabic and the translation together, so their relationship holds. */
.quran-text { font-size: calc(clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem) * var(--reader-scale, 1)); }
.verse-translation { font-size: calc(var(--step-0) * var(--reader-scale, 1)); }
/* Visibility only — the translation stays in the DOM for crawlers and for Ctrl+F. */
.hide-translation .verse-translation { display: none; }

.verse-bookmark { background: none; border: 0; cursor: pointer; padding: var(--space-1);
  min-inline-size: 28px; min-block-size: 28px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1rem; color: var(--on-surface-variant); opacity: 0;
  border-radius: var(--radius); }
.verse:hover .verse-bookmark, .verse-bookmark:focus-visible, .verse-bookmark.is-on { opacity: 1; }
.verse-bookmark.is-on { color: var(--tertiary); }
@media (hover: none) { .verse-bookmark { opacity: 1; } }

/* ---- Bookmarks page ---- */
.bookmark-list { list-style: none; padding: 0; margin-block: var(--space-5); display: grid; gap: var(--space-2); }
.bookmark-list li { display: flex; align-items: stretch; gap: var(--space-2);
  border: 1px solid var(--outline-variant); border-radius: var(--radius); overflow: hidden; }
.bookmark-link { flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) var(--space-4); text-decoration: none; color: inherit; }
.bookmark-link:hover { background: var(--surface-container-low); }
.bookmark-ref { font-weight: 600; }
.bookmark-date { font-size: var(--step--1); color: var(--on-surface-variant); }
.bookmark-remove { flex: none; inline-size: 3rem; border: 0; border-inline-start: 1px solid var(--outline-variant);
  background: none; cursor: pointer; color: var(--on-surface-variant); font-size: 1rem; }
.bookmark-remove:hover { background: var(--error-container); color: var(--on-error-container); }
.empty-state { text-align: center; padding-block: var(--space-7); }
.empty-state h2 { margin-block-start: 0; }
.empty-state p { margin-inline: auto; color: var(--on-surface-variant); }
.bookmark-actions { margin-block-start: var(--space-5); }

/* ---- Offline download panel ---- */
.download-panel {
  padding: var(--space-3) var(--space-4); margin-block: var(--space-3);
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  background: var(--surface-container-low);
}
.download-panel[data-state="done"] { border-color: var(--primary); }
.download-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.download-title { font-weight: 600; }
.download-size { font-size: var(--step--1); color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums; }
.download-status { margin-block: var(--space-2) 0; font-size: var(--step--1);
  color: var(--on-surface-variant); font-variant-numeric: tabular-nums; min-block-size: 1.2em; }
.download-bar { inline-size: 100%; block-size: 0.5rem; margin-block-start: var(--space-2);
  accent-color: var(--primary); }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-block-start: var(--space-3); }
.download-actions .toolbar-btn { padding-inline: var(--space-4); }
.download-actions .toolbar-link { margin-inline-start: auto; }
/* The storage caveat matters, but only once someone is considering the download — so it is
   folded away until the panel is not idle, rather than always occupying three lines. */
.download-note { margin-block: var(--space-2) 0; font-size: var(--step--1);
  color: var(--on-surface-variant); max-inline-size: var(--measure); display: none; }
.download-panel:hover .download-note,
.download-panel:focus-within .download-note,
.download-panel[data-state="downloading"] .download-note { display: block; }
.downloads-total { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Counted per-page facts (reciter pages) ---- */
.fact-notes { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5);
  max-inline-size: 68ch; }
.fact-notes li { margin-block-end: var(--space-2); }

/* ---- Link from a page to the article explaining its subject ---- */
.learn-link { margin-block: var(--space-5); font-size: var(--step--1); }
.learn-link a { font-weight: 600; }

/* prayer.css */
/* Prayer times, qibla and city pages. */

.today-card { padding: var(--space-4); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); background: var(--surface-container-low); margin-block: var(--space-5); }
.today-card h2 { margin-block-start: 0; font-size: var(--step-1); }

.today-times { list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.today-times li { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3);
  border-radius: var(--radius); background: var(--surface-container-lowest);
  border: 1px solid transparent; }
.today-times li.is-next { border-color: var(--primary); background: var(--primary-container); }
.p-name { font-size: var(--step--1); color: var(--on-surface-variant); }
.today-times li.is-next .p-name { color: var(--on-primary-container); }
.p-time { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }

.next-prayer { margin-block: var(--space-4) 0; font-weight: 600; color: var(--primary);
  font-variant-numeric: tabular-nums; }

.timetable tr.is-today { background: var(--primary-container); }
.timetable tr.is-today th, .timetable tr.is-today td { color: var(--on-primary-container); font-weight: 600; }

.finder { padding: var(--space-4); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); margin-block: var(--space-5); }
.finder-controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.finder-status { margin-block: var(--space-3) 0; font-size: var(--step--1); color: var(--on-surface-variant); }

.btn-primary { font: inherit; font-weight: 600; cursor: pointer; border: 0;
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.btn-primary:hover { filter: brightness(1.08); }

.city-list { list-style: none; padding: 0; margin-block: var(--space-4);
  display: grid; gap: var(--space-1) var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.city-list a { display: block; padding: var(--space-2) 0; }

/* Compass. Rotates only when a real heading is available; otherwise it shows a fixed bearing. */
.compass { inline-size: min(18rem, 80vw); block-size: min(18rem, 80vw); margin-inline: auto;
  position: relative; border-radius: 50%; border: 2px solid var(--outline-variant);
  display: grid; place-items: center; margin-block: var(--space-5); }
.compass-needle { position: absolute; inline-size: 4px; block-size: 42%;
  background: linear-gradient(var(--primary) 0 60%, var(--outline-variant) 60% 100%);
  transform-origin: bottom center; inset-block-start: 8%; border-radius: 2px;
  transition: transform 0.2s ease-out; }
.compass-label { font-size: var(--step--1); color: var(--on-surface-variant); text-align: center; }
.compass-bearing { font-size: var(--step-2); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Azkar ---- */
.azkar-list { list-style: none; padding: 0; margin-block: var(--space-5); }
.dhikr { padding: var(--space-5) 0; border-block-end: 1px solid var(--outline-variant);
  scroll-margin-block-start: 5rem; }
.dhikr:target { background: var(--primary-container); border-radius: var(--radius);
  padding-inline: var(--space-4); margin-inline: calc(var(--space-4) * -1); }
.dhikr.is-done { opacity: 0.65; }
.dhikr-head { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-3); flex-wrap: wrap; }
.repeat-badge { font-size: var(--step--1); font-weight: 600; padding: 2px var(--space-2);
  border-radius: 999px; background: var(--tertiary-container); color: var(--on-tertiary-container); }
.grade { font-size: var(--step--1); padding: 2px var(--space-2); border-radius: 999px;
  background: var(--surface-container-high); color: var(--on-surface-variant); }
.grade-quran { background: var(--grade-quran-container, var(--primary-container)); color: var(--on-primary-container); }
.dhikr-translit { color: var(--on-surface-variant); }
.dhikr-translation { font-weight: 500; }
.dhikr-benefit { color: var(--on-surface-variant); font-size: var(--step--1); }
.dhikr-source { font-size: var(--step--1); color: var(--on-surface-variant); }
.dhikr-source cite { font-style: normal; }

.counter-btn { font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--outline-variant); background: var(--surface-container-lowest);
  color: var(--on-surface); padding: var(--space-2) var(--space-5); border-radius: 999px;
  font-variant-numeric: tabular-nums; min-block-size: 2.75rem; }
.counter-btn:hover { border-color: var(--primary); }
.counter-btn.is-done { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.azkar-card.azkar-morning { border-inline-start: 4px solid var(--azkar-morning); }
.azkar-card.azkar-evening { border-inline-start: 4px solid var(--azkar-evening); }
.azkar-card.azkar-after_prayer { border-inline-start: 4px solid var(--azkar-prayer); }
.azkar-card.azkar-sleep { border-inline-start: 4px solid var(--azkar-sleep); }
.azkar-card.azkar-waking { border-inline-start: 4px solid var(--azkar-morning); }

/* ---- Learn articles ---- */
.answer-block { border-inline-start: 4px solid var(--primary); padding-inline-start: var(--space-4);
  margin-block: var(--space-5); }
.answer-block h2 { margin-block-start: 0; font-size: var(--step-1); }
.answer-block .answer { font-size: var(--step-1); color: var(--on-surface); max-inline-size: var(--measure); }
.related { margin-block-start: var(--space-6); }

/* Azkar favourites */
.dhikr-fav { background: none; border: 0; cursor: pointer; padding: var(--space-1);
  min-inline-size: 28px; min-block-size: 28px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1rem; color: var(--on-surface-variant);
  border-radius: var(--radius); margin-inline-start: auto; }
.dhikr-fav:hover { color: var(--error); }
.dhikr-fav.is-on { color: var(--error); }
.azkar-fav-link { margin-block-start: var(--space-5); font-weight: 600; }
.azkar-fav-link a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.5rem; }

/* Nearby-city links carry their distance, so the list is scannable as a set of options rather
   than an undifferentiated column of place names. */
.city-distance { color: var(--on-surface-variant); font-size: var(--step--1);
  margin-inline-start: var(--space-1); font-variant-numeric: tabular-nums; }

/* The other-methods and other-reciters lists: a dense wrap of links, not a column of cards.
   These exist to connect pages that were otherwise two clicks from anywhere. */
.method-list { list-style: none; padding: 0; margin: var(--space-3) 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); }
.method-list li { display: flex; align-items: baseline; gap: var(--space-1);
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  padding: var(--space-1) var(--space-2); }
.method-angle { color: var(--on-surface-variant); font-size: var(--step--1);
  font-variant-numeric: tabular-nums; }

/* ---- Chips ----
   Moved here from home.css: the azkar category pages grew a sibling-set nav that uses them, and
   home.css ships to the two home pages only, so the chips would have rendered unstyled on 10
   pages that do load this bundle. */
.chip-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); min-block-size: 2.5rem;
  border: 1px solid var(--outline-variant); border-radius: 999px;
  text-decoration: none; color: inherit; background: var(--surface-container-lowest);
}
.chip:hover { border-color: var(--primary); }
.chip-count {
  font-size: var(--step--1); padding: 0 var(--space-2); border-radius: 999px;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}
.chip.azkar-morning { border-inline-start: 3px solid var(--azkar-morning); }
.chip.azkar-evening { border-inline-start: 3px solid var(--azkar-evening); }
.chip.azkar-after_prayer { border-inline-start: 3px solid var(--azkar-prayer); }
.chip.azkar-sleep { border-inline-start: 3px solid var(--azkar-sleep); }
.chip.azkar-waking { border-inline-start: 3px solid var(--azkar-morning); }

/* ---- Azkar: timing, alternate names, sibling sets ---- */
.azkar-when { margin-block: var(--space-5); padding: var(--space-4);
  background: var(--surface-container-low); border-radius: var(--radius-lg); }
.azkar-when h2 { margin-block-start: 0; font-size: var(--step-1); }
.azkar-when p { margin: 0 0 var(--space-2); max-inline-size: 65ch; }
.azkar-when p:last-child { margin-bottom: 0; }
.azkar-when-link a { font-weight: 600; display: inline-flex; align-items: center;
  gap: var(--space-2); min-block-size: 2.5rem; }
.azkar-alt-names { font-size: var(--step--1); color: var(--on-surface-variant); }
.azkar-siblings { margin-block-start: var(--space-6); }
.azkar-siblings h2 { font-size: var(--step-1); margin-block-end: var(--space-3); }
.card-translit { font-weight: 400; color: var(--on-surface-variant); }

/* ---- City page: 13 month blocks, their jump list, and per-month ranges ----

   The page carries one table per month, so the month heading has to read as a section start and
   the jump list has to be reachable without scrolling past a year of rows. `.prayer-glance` used
   to style a single current-month summary at the top of the page; that section is gone, and the
   ranges now sit inside each month block instead. */
.month-jump { margin-block: var(--space-3) var(--space-5); }
.month-jump ul { list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); }
.month-jump a { display: inline-block; padding: var(--space-1) var(--space-3);
  background: var(--surface-container-low); border-radius: var(--radius-lg);
  font-size: var(--step--1); text-decoration: none; }
.month-jump a:hover, .month-jump a:focus-visible { background: var(--primary-container);
  color: var(--on-primary-container); }

.month-block { margin-block: var(--space-5); }
.month-block h3 { font-size: var(--step-1); margin-block: 0 var(--space-3);
  /* The heading is the anchor target for #2026-10, so keep it clear of the sticky header. */
  scroll-margin-block-start: var(--space-5); }
.month-block .glance-list { margin-block-end: var(--space-3); padding: var(--space-3);
  background: var(--surface-container-low); border-radius: var(--radius-lg); }

.glance-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); }
.glance-list li { display: flex; flex-direction: column; min-inline-size: 6.5rem; }
.glance-name { font-size: var(--step--1); color: var(--on-surface-variant); }
.glance-range { font-weight: 600; font-variant-numeric: tabular-nums; }
.table-note { font-size: var(--step--1); color: var(--on-surface-variant);
  max-inline-size: 65ch; margin-block: 0 var(--space-3); }

/* ---- Calendar: the answer-first next-occurrence line ---- */
.event-next { padding: var(--space-4); background: var(--surface-container-low);
  border-radius: var(--radius-lg); max-inline-size: 68ch; margin-block: var(--space-4); }

/* search.css */
/* Quran search — /quran/search/. Loaded on every page because the stylesheet set is fixed in
   head.njk; it is under 2 KB and costs nothing on pages that never use these classes. */

.search { margin-block: var(--space-5) var(--space-6); }

.search form {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end;
  max-inline-size: var(--measure);
}
.search label {
  flex-basis: 100%; font-size: var(--step--1); color: var(--on-surface-variant);
}
.search input[type="search"] {
  flex: 1 1 16rem; min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--step-1);
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline); border-radius: var(--radius);
}
.search input[type="search"]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
/* Disabled until search.js enables it — an input that cannot work should not look like it can. */
.search input[type="search"]:disabled { background: var(--surface-container); color: var(--outline); }

.search-nojs {
  max-inline-size: var(--measure); margin-block-start: var(--space-4);
  padding: var(--space-4); border-inline-start: 3px solid var(--tertiary);
  background: var(--surface-container-low); color: var(--on-surface-variant);
  font-size: var(--step--1);
}

.search-status {
  margin-block: var(--space-4) 0; color: var(--on-surface-variant); font-size: var(--step--1);
  min-block-size: 1.5em;   /* reserved, so a result count arriving does not shift the list. §4.3 */
}

.search-results { list-style: none; padding: 0; margin-block: var(--space-3) 0; }

.search-hit { border-block-end: 1px solid var(--outline-variant); }
.search-hit:last-child { border-block-end: 0; }
.search-hit > a {
  display: block; padding: var(--space-4) var(--space-3);
  color: inherit; text-decoration: none; border-radius: var(--radius);
}
.search-hit > a:hover, .search-hit > a:focus-visible { background: var(--surface-container-low); }

.search-ref {
  display: block; font-size: var(--step--1); font-weight: 600; color: var(--primary);
  margin-block-end: var(--space-2);
}

.search-text { display: block; color: var(--on-surface); line-height: 1.7; }
.search-text-ar {
  font-family: var(--font-quran); font-size: 1.45rem; line-height: 2.1;
  direction: rtl; text-align: right;
}

.search-text mark {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: 3px; padding-inline: 2px;
}

/* A typed reference is an action, not a passage — it reads as a jump rather than a result. */
.search-hit-reference > a {
  background: var(--primary-container); color: var(--on-primary-container);
  margin-block-end: var(--space-3);
}
.search-hit-reference .search-ref { color: inherit; font-size: var(--step-1); margin: 0; }
.search-jump { font-size: var(--step--1); opacity: 0.85; }