/* islamictimes.net/duas — estate black/gold theme, tab bar per prayer, reading progress. */
:root {
  --bg: #0a0a0a;
  --card: #111111;
  --gold: #c9a84c;
  --gold-bright: #f0c040;
  /* Lifted from #7a6a30, which measured about 3.5:1 on the card and failed WCAG AA.
     This clears roughly 5.3:1. Every use of this token is light-on-dark, so the change
     only ever raises contrast. */
  --gold-dim: #9a8845;
  --gold-border: #3a3020;
  --green: #3ecf7a;
  /* verse of prostration: warm red, 5.6:1 on the card, sits beside the gold */
  --sajdah: #e0674f;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --transition: 0.2s ease;
}
@font-face { font-family: 'Amiri'; src: url('/fonts/Amiri-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'UthmanicHafs'; src: url('/fonts/UthmanicHafs.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--gold);
  font-family: var(--font-sans);
  min-height: 100dvh;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* The selection lock comes from the ONE estate switch (COPY_LOCK in sync.js, which
     injects the style on every app) - nothing static here, so a single flip opens or
     locks the whole site. touch-action stays unset: this is a reading page and
     double-tap zoom must keep working. */
}
button { cursor: pointer; background: none; border: none; font-family: inherit; font-size: inherit; color: inherit; }

/* header — same family as the estate */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,10,10,0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-border);
  padding-top: env(safe-area-inset-top);
}
/* Reading progress. It sits on the header's own bottom edge rather than at a fixed
   offset, so it stays glued to the header whatever the safe-area inset does. */
.read-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgba(201, 168, 76, 0.10); overflow: hidden; }
.read-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.45), var(--gold-bright, #f0c040));
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.5);
  border-radius: 0 2px 2px 0;
  transition: width 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .read-fill { transition: none; } }

.header-inner {
  max-width: 720px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
/* The two side groups share an identical flex basis, so they always measure the same
   width and the title between them lands on the true centre of the header. Because they
   are in the flow, a long tab name truncates rather than sliding under the title, which
   is what an absolutely centred title allowed. */
/* Back to the main site, matching the chevron-then-wordmark pattern the counters and the
   audio apps already use. The chevron and the logo are one link, so the whole thing is a
   single 36px-tall target rather than two small ones. */
.header-brand { display: flex; align-items: center; gap: 0.4rem; color: var(--gold-dim); text-decoration: none; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: color var(--transition); }
.header-brand:hover, .header-brand:active { color: var(--gold-bright); }
.header-brand svg { flex-shrink: 0; display: block; }
.header-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.header-right { justify-content: flex-end; gap: 8px; }
/* Matches the main site exactly: the logo.svg is 400x160, so pinning the HEIGHT draws it
   90x36. Pinning the width instead (or letting height be auto from the 120px attribute)
   renders it 120x48, a third taller than every other page in the estate. */
.logo { display: flex; flex-direction: column; align-items: center; line-height: 1; user-select: none; }
.logo-top, .logo-bottom { font-family: Georgia, serif; font-weight: bold; font-size: 0.58rem; letter-spacing: 0.2em; color: #c9a84c; display: block; }
.logo-line { width: 100%; height: 1px; background: #7a6a30; opacity: 0.7; margin: 2px 0; display: block; border: none; }
/* Page identity, sitting in the flex row beside the logo. It used to be absolutely
   centred, which put it on a collision course with a long tab name on a narrow phone;
   in the flow it simply takes its space and the tab name truncates instead. */
.header-title { cursor: pointer; flex: 0 0 auto; margin: 0; font-weight: 400; text-align: center; font-family: var(--font-serif); font-size: 1.05rem; color: var(--gold-bright); letter-spacing: 0.08em; white-space: nowrap; }

/* The selected tab, so the header always says where you are, with its progress next to
   it. Truncates rather than pushing the percentage off the edge on a narrow phone. */
.header-tab { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.read-pct { font-size: 0.72rem; color: var(--gold-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; min-width: 36px; text-align: right; }


/* tab bar — two rows: recitations above, the five prayers below */
.tab-nav {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--gold-border);
  background: var(--bg);
  /* Deliberately NOT sticky. It used to pin at a hardcoded top: 61px, but the header
     carries safe-area padding and is taller than that on a notched phone, so the first
     tab row slid underneath it and vanished while rows two and three stayed. Letting the
     whole bar scroll away fixes that inconsistency and returns about 120px to reading. */
  max-width: 720px; margin: 0 auto;
}
/* Tabs are pills. They used to be edge-to-edge labels about 29px tall with only a
   bottom border, which was under the 44px touch target and did not read as pressable. */
/* All three rows carry exactly five tabs, so a five column grid lines the columns up
   vertically: Adhaan over Fajr over Yaseen, and so on. Grid items stretch, so every pill
   in a row is the same height even when a longer label wraps to two lines. */
.tab-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 6px 8px; }
.tab-row + .tab-row { border-top: 1px solid rgba(58, 48, 32, 0.4); }
.tab-btn {
  min-height: 48px;              /* the two line labels set the height; every pill matches */
  padding: 8px 8px;
  /* fluid with the phone: the pill resizes from the 5-column grid, the type follows;
     fitTabLabels() then guarantees the fit per row (owner, 2026-09-06) */
  font-size: clamp(8px, 2.6vw, 0.76rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  /* nowrap stops a browser breaking a line after the hyphen in Al-Mulk or As-Sajdah.
     The explicit <br> the tabs are built with still breaks, so the two line labels are
     unaffected: every wrap is deliberate rather than a function of width. */
  white-space: nowrap;
  text-align: center;
  color: var(--gold-dim);
  background: transparent;
  border: 1px solid var(--gold-border);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--gold); border-color: var(--gold); }
/* The Adhaan pill: three words, three lines, smaller fixed font, same 48px pill as
   every other tab (owner, 2026-09-06, supersedes the two-line rule for this pill) */
.tab-btn.tab-3line { font-size: clamp(6.5px, 2.1vw, 0.6rem); line-height: 1.25; letter-spacing: 0.03em; padding-top: 3px; padding-bottom: 3px; }
.tab-btn.active { color: #0a0a0a; background: var(--gold); border-color: var(--gold); font-weight: 600; }
/* the due-prayer gold dot: quiet, never moves the reader anywhere. LEFT of the label
   (owner, 2026-09-02): the read-today tick owns the right side, so they never collide.
   It BLINKS through the due window (owner, 2026-09-02) - a slow two-second breath,
   opacity only, stilled entirely for reduced-motion readers. */
@keyframes dueBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.tab-btn.due::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 6px rgba(240, 192, 64, 0.6); vertical-align: middle; flex-shrink: 0; }
/* the breath (owner, 2026-09-23, reversing the 2026-09-02 "first minutes only"): the due prayer's dot
   breathes for the whole of its window, so the pill to read is unmistakable; opacity only, slow, and
   stilled for reduced-motion readers. The due-fresh class stays harmless. */
.tab-btn.due::before { animation: dueBlink 2.6s ease-in-out infinite; } /* through the WHOLE window (owner, 2026-09-23), not only the first minutes */
.tab-btn.active.due::before { background: #0a0a0a; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tab-btn.due::before { animation: none; } }
/* a pill whose label had to shrink hard trades side padding for glyph room, and an
   ellipsis is the never-clip floor (owner, 2026-09-06: two lines, smaller font, in the box) */
.tab-btn.tab-fit { padding-left: 2px; padding-right: 2px; letter-spacing: 0; }
.tab-btn { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 420px) {
  .tab-row { gap: 4px; padding: 5px 5px; }
  .tab-btn { font-size: 0.66rem; padding: 6px 4px; min-height: 42px; }
}

/* section head with progress bar */
.page { max-width: 720px; margin: 0 auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.section-head { display: flex; justify-content: center; margin: 10px 0 16px; }
.section-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--gold-bright);
  font-weight: normal;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 13px 34px 15px;
  background: linear-gradient(180deg, #1a1500, var(--card));
  border: 1px solid var(--gold-border);
  border-top: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  position: relative;
  max-width: 100%;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7px;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.8;
}


/* Arabic reading estimate, sitting under the tab title. Small chips rather than a
   sentence, so it reads as metadata and never competes with the content below it. */
.read-est { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 0 0 14px; }
.re-part {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-dim); border: 1px solid var(--gold-border);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.re-part b { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; }
/* a section door (owner, 2026-09-20): the line that names a section opens it on tap */
.re-part.re-jump { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.re-part.re-jump b { text-decoration: underline; text-decoration-color: rgba(201, 168, 76, 0.45); text-underline-offset: 3px; }
.re-part.re-jump:active { opacity: 0.7; }
.re-part i { font-style: normal; opacity: 0.55; padding: 0 2px; }

/* dua cards */
.dua-list { display: flex; flex-direction: column; gap: 12px; }
.dua-card {
  background: var(--card);
  border: 1px solid var(--gold-border);
  border-top: 1px solid var(--gold);
  border-radius: 12px;
  padding: 18px 16px 14px;
  transition: opacity var(--transition);
}
.dua-t { font-weight: 400; font-size: 0.72rem; color: var(--gold-dim); letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 8px; }
.dua-ar {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: calc(1.55rem * var(--dscale, 1)); line-height: 2.1;
  color: var(--gold-bright);
  text-align: right; direction: rtl;
  margin-bottom: 10px;
}
/* Font law: any Qur'anic Arabic renders in Uthmanic Hafs; everything else stays Amiri. */
.dua-ar.quran-ar, .rep-inst.quran-ar { font-family: 'UthmanicHafs', 'Amiri', 'Traditional Arabic', serif; }

/* Written-repetition calligraphy (display only, no counters) */
.rep-panel { background: #0a0a00; border-radius: 12px; padding: 22px 16px; display: flex; align-items: center; justify-content: center; margin: 4px 0 12px; }
.rep-panel.rep-stack { flex-direction: column; gap: 6px; }
.rep-panel.rep-inline { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.rep-panel.rep-grid { flex-direction: column; gap: 12px; }
.rep-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rep-inst { font-family: 'Amiri', 'Traditional Arabic', serif; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 2; color: #f0c040; text-shadow: 0 0 18px rgba(201, 168, 76, 0.45); direction: rtl; text-align: center; }
.rep-sep { color: #c9a84c; font-size: 0.9rem; line-height: 1; opacity: 0.85; }
.tier { margin: 6px 0 4px; }
.tier-box { border: 1px solid #3a3020; background: #100e07; border-radius: 10px; padding: 12px 12px 14px; }
.tier-step { color: #7a6a30; font-size: 0.78rem; letter-spacing: 0.04em; text-align: center; margin-bottom: 10px; }
.tier-en { color: var(--gold-dim); font-size: calc(0.82rem * var(--dscale, 1)); text-align: center; margin-top: 8px; }
@media (max-width: 420px) { .rep-panel.rep-inline, .rep-row { flex-direction: column; gap: 6px; } .rep-row .rep-sep { display: none; } }
/* OWNER LAW (2026-09-05, second strike): English and notes span the FULL card width.
   Measure caps (NNch or px) on English text are banned on every duas page and sub page. */
.dua-en { font-size: calc(0.88rem * var(--dscale, 1)); line-height: 1.65; color: var(--gold); margin-bottom: 4px; }
.dua-ref { font-size: 0.72rem; color: var(--gold-dim); letter-spacing: 0.05em; }
/* Was 0.72rem italic, the least legible text on the page. Upright and a little larger;
   the dimmer colour still separates a note from its translation. */
.dua-note {
  font-size: calc(0.78rem * var(--dscale, 1)); line-height: 1.55;
  color: var(--gold-dim); margin-top: 6px;
}
.dua-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

.badge-set { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.src-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; color: #000; white-space: nowrap; }
/* Simplified 3-badge scheme: Quran (theme gold), Hadith (Madinah-dome green),
   General Dua (sky blue). Older fine-grade classes retained but no longer emitted. */
.g-quran { background: #c9a84c; }
.g-hadith { background: #17794c; color: #eafff4; }
.g-gdua { background: #7fc3ec; color: #06263f; }
.g-dup { background: #6aa9e8; }
.g-sahih { background: #17794c; color: #eafff4; }
.g-hasan { background: #17794c; color: #eafff4; }
.g-names { background: #7fc3ec; color: #06263f; }
.g-guide { background: #7fc3ec; color: #06263f; }
.g-salawat { background: #7fc3ec; color: #06263f; }
.g-disputed { background: #7fc3ec; color: #06263f; }
.g-unknown { background: #7fc3ec; color: #06263f; }

.call-lines { margin: 4px 0 12px; }
/* Adhaan / Iqamah. Each repeated phrase is one soft block containing its own lines, so
   the pairing is carried by the block rather than by rules between rows. No spines, no
   part-dividers: the space between blocks is the movement of the call. */
.call-grp {
  background: rgba(240, 192, 64, 0.032);
  border: 1px solid rgba(58, 48, 32, 0.6);
  border-radius: 10px;
  padding: 4px 12px;
}
.call-grp + .call-grp { margin-top: 8px; }
.call-grp.taswib {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.12), rgba(240, 192, 64, 0.04));
  border-color: rgba(240, 192, 64, 0.42);
}
.call-grp.taswib .call-en { color: var(--gold-bright, #f0c040); font-weight: 600; }

.call-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 10px;
  padding: 3px 0;
}
.call-n { font-size: 0.56rem; color: var(--gold-dim); font-variant-numeric: tabular-nums; text-align: center; opacity: 0.7; }
.call-ar {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: calc(1.3rem * var(--dscale, 1));
  color: var(--gold-bright);
  direction: rtl; text-align: right; line-height: 1.85;
}
/* One translation per block, at its foot, flush left under the Arabic that sits right.
   The count says how many times the block is called, so the meaning is stated once
   instead of four identical rows of it. */
.call-en {
  margin: 5px 0 2px; padding-top: 5px;
  border-top: 1px solid rgba(58, 48, 32, 0.55);
  font-size: calc(0.78rem * var(--dscale, 1)); line-height: 1.5;
  color: var(--gold); text-align: left; direction: ltr;
}
.call-en + .call-en { margin-top: 0; border-top: 0; padding-top: 0; }
.call-x {
  display: inline-block; margin-inline-end: 7px; padding: 0 6px;
  border-radius: 999px; border: 1px solid rgba(240, 192, 64, 0.4);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--gold-bright); vertical-align: 1px;
}
.call-chip { display: inline-block; margin-inline-start: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #000; background: var(--gold-bright, #f0c040); vertical-align: middle; white-space: nowrap; }
.call-grp.taswib .call-ar { text-shadow: 0 0 14px rgba(240, 192, 64, 0.35); }
@media (max-width: 420px) {
  .call-ar { font-size: calc(1.18rem * var(--dscale, 1)); }
  .call-grp { padding: 4px 10px; }
}

.sec-break { display: flex; align-items: center; gap: 14px; margin: 54px 6px 16px; }
.sec-break.first { margin-top: 10px; }
.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c9a84c 40%, #c9a84c 60%, transparent); opacity: 0.55; }
.sec-orn { font-family: 'Amiri', serif; font-size: 1.5rem; line-height: 1; color: var(--gold-bright, #f0c040); text-shadow: 0 0 12px rgba(240, 192, 64, 0.35); }

.lohe-card { position: relative; background: #0a0a00; }
.lohe-card::before { content: 'LOH-E-QURANI'; position: absolute; top: -1px; right: 14px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.12em; color: #000; background: var(--gold-bright, #f0c040); padding: 2px 8px; border-radius: 0 0 5px 5px; }
.lohe-grid { display: grid; grid-template-columns: repeat(3, 1fr); direction: rtl; gap: 10px; padding: 14px 4px; margin: 4px 0 12px; }
.lohe-cell { border: 1px solid #3a3020; border-radius: 8px; padding: clamp(14px, 4vw, 22px) 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.lohe-ar { font-family: 'UthmanicHafs', 'Amiri', 'Traditional Arabic', serif; font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.2; color: var(--gold-bright, #f0c040); text-shadow: 0 0 16px rgba(201, 168, 76, 0.5); direction: rtl; }
.lohe-sub { font-size: 0.6rem; line-height: 1.4; color: var(--gold-dim); direction: ltr; }

.cat-head { background: linear-gradient(180deg, #16120a, #111111); border: 1px solid #3a3020; border-left: 3px solid #f0c040; border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; }
.cat-kicker { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim, #7a6a30); margin: 0 0 5px; }
.cat-t { font-weight: 400; font-family: Georgia, serif; color: #f0c040; font-size: 1.16rem; letter-spacing: 0.02em; margin: 0 0 6px; }
.cat-p { font-size: 0.8rem; line-height: 1.55; color: var(--gold); margin: 0 0 6px; }
.cat-src { font-size: 0.68rem; line-height: 1.5; color: var(--gold-dim); margin: 0; }
.cat-fl { font-size: 0.68rem; line-height: 1.5; color: #c98181; font-style: italic; margin: 6px 0 0; }

.cat-x { font-size: 0.74rem; line-height: 1.5; color: var(--gold); margin: 6px 0 0; }


.amr { border-bottom: 2px dotted rgba(240, 192, 64, 0.65); padding-bottom: 2px; }

.r3-sep { display: block; width: 72px; height: 1px; background: rgba(201, 168, 76, 0.45); margin: 14px auto; }

/* The reading break. A small gold lozenge, sized in em so it scales with whatever text it
   sits in, drawn in CSS rather than set as a glyph so it can never be confused with a
   Qur'anic sign and never depends on font coverage. It marks the end of an ayah or of a
   clause without ending the line, so the passage still reads in one go. */
.v-dot {
  display: inline-block;
  width: 0.34em; height: 0.34em;
  margin: 0 0.44em; vertical-align: 0.26em;
  transform: rotate(45deg);
  background: var(--gold); opacity: 0.7;
}
.dua-ar .v-dot { opacity: 0.62; margin: 0 0.5em; }

/* zebra reading bands: em-based stops equal one line-height, so bands track
   font size, zoom and device width by construction; applied per block so
   sub-pixel drift never accumulates */
.aya-ar.zebra {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.25em, rgba(240, 192, 64, 0.045) 2.25em, rgba(240, 192, 64, 0.045) 4.5em);
  background-origin: content-box; background-clip: content-box;
}
.dua-ar.zebra {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.1em, rgba(240, 192, 64, 0.045) 2.1em, rgba(240, 192, 64, 0.045) 4.2em);
  background-origin: content-box; background-clip: content-box;
}
.dua-ar.zebra .r3-sep { margin: calc(1.05em - 0.5px) auto; }

/* alternate-repetition shading (owner, 2026-09-06): written-out repetition cards band
   every other utterance in the same soft gold as the zebra lines, so the eye keeps its
   place mid-count. Stack children run inst, sep, inst, sep - period four selects
   alternate instances; grid rows alternate directly. */
.rep-panel.rep-stack .rep-inst:nth-child(4n+1) { background: rgba(240, 192, 64, 0.045); border-radius: 8px; padding: 6px 12px; }
.rep-panel.rep-grid .rep-row:nth-of-type(odd) { background: rgba(240, 192, 64, 0.045); border-radius: 8px; padding: 6px 4px; }


.intro-note { background: var(--card, #111111); border: 1px solid #3a3020; border-left: 3px solid #c9a84c; border-radius: 8px; padding: 16px 18px; margin: 0 0 18px; }
.intro-head { font-weight: 400; font-family: Georgia, serif; color: #f0c040; font-size: 0.98rem; margin: 0 0 10px; }
.intro-pt { font-size: 0.82rem; line-height: 1.6; color: #d8cfae; margin: 0 0 9px; }
.intro-pt:last-child { margin-bottom: 0; }
.intro-pt strong { color: #c9a84c; font-weight: 700; }
.dua-num { font-size: 0.72rem; color: var(--gold-dim); font-variant-numeric: tabular-nums; }

/* compact cards for the 99 Names */
/* 99 Names. Amiri, not UthmanicHafs: these are names, not Qur'anic verses, per the font
   law. No text-shadow either, because Lohe's glow repeated across 99 cells turns to mud. */
.names-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  direction: rtl;                       /* name 1 lands top-right, sequence reads RTL */
  background: var(--card);
  border: 1px solid var(--gold-border); border-radius: 12px; overflow: hidden;
}
.nm-cell {
  position: relative; min-height: 78px;  /* uniform plaque cell, clears the 44px target */
  display: flex; align-items: center; justify-content: center;
  padding: 16px 6px 10px;
  border-block-end: 1px solid rgba(58, 48, 32, 0.55);
  border-inline-end: 1px solid rgba(58, 48, 32, 0.55);
}
.nm-cell:nth-child(3n) { border-inline-end: 0; }        /* outer edge of each row */
.nm-cell:nth-last-child(-n+3) { border-block-end: 0; }  /* final row, 99 divides evenly */
/* Bands run three cells wide so a shaded row reads as one continuous plaque stripe. */
.nm-cell:nth-child(6n+1), .nm-cell:nth-child(6n+2), .nm-cell:nth-child(6n+3) { background: rgba(240, 192, 64, 0.045); }

.names-list {
  display: flex; flex-direction: column; gap: 0;
  background: var(--card);
  border: 1px solid var(--gold-border); border-radius: 12px; overflow: hidden;
}
/* One line per name: number, meaning on the left, Arabic on the right, as everywhere
   else that pairs Arabic with a translation. */
.nm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid rgba(58, 48, 32, 0.55); }
.nm-row:last-child { border-bottom: 0; }
.nm-row:nth-child(even) { background: rgba(240, 192, 64, 0.045); }

.nm-num { font-size: 0.55rem; color: var(--gold-dim); font-variant-numeric: tabular-nums; }
.nm-cell .nm-num { position: absolute; top: 6px; inset-inline-start: 8px; }
.nm-row .nm-num { font-size: 0.62rem; text-align: center; }
.nm-ar {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: calc(clamp(1.15rem, 4.6vw, 1.6rem) * var(--dscale, 1));
  line-height: 1.55; color: var(--gold-bright); direction: rtl;
}
.nm-cell .nm-ar { text-align: center; }
.nm-row .nm-ar { text-align: right; }
.nm-en { font-size: calc(0.82rem * var(--dscale, 1)); line-height: 1.45; color: var(--gold); text-align: left; }

/* tab-opening epigraph */
.epigraph {
  text-align: center;
  padding: 10px 10px 20px;
  border-bottom: 1px solid rgba(58, 48, 32, 0.55);
  margin-bottom: 6px;
}
.ep-head {
  font-family: var(--font-serif);
  font-size: 1.02rem; line-height: 1.5;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.ep-body { font-size: 0.84rem; line-height: 1.75; color: var(--gold); margin: 0 0 10px; }
.ep-ref { font-size: 0.7rem; color: var(--gold-dim); letter-spacing: 0.08em; }
.ep-why { font-size: 0.72rem; font-style: italic; color: var(--gold-dim); opacity: 0.8; margin-top: 4px; }

/* Quran reading */
.bismillah {
  font-family: 'Amiri', 'Traditional Arabic', serif;
  font-size: 1.5rem; color: var(--gold-bright);
  text-align: center; direction: rtl;
  padding: 10px 0 18px;
}

/* Opening formula. A hairline frame rather than card chrome, so it reads as the opening of
   a reading and not as the first item of content. The basmala keeps the exact size and
   colour the bare .bismillah had, so surah tabs do not shift; the isti'adhah is added
   above it, one step smaller and one step quieter. */
.open-formula {
  text-align: center; direction: rtl;
  padding: 18px 12px 20px; margin: 6px 0 20px;
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.05), transparent 72%);
}
.of-ar { font-family: 'Amiri', 'Traditional Arabic', serif; margin: 0; line-height: 1.95; }
.of-taa { font-size: 1.3rem; color: var(--gold); }
.of-bism { font-size: 1.5rem; color: var(--gold-bright); margin-top: 12px; }
.of-en {
  direction: ltr; margin: 3px 0 0;
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-dim);
}
@media (max-width: 420px) {
  .open-formula { padding: 14px 8px 16px; margin-bottom: 16px; }
  .of-taa { font-size: 1.15rem; }
  .of-bism { font-size: 1.32rem; }
  .of-en { font-size: 0.6rem; letter-spacing: 0.07em; }
}
.aya-card {
  background: var(--card);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: 16px 16px 14px;
  position: relative;
}
.aya-num {
  position: absolute; top: 12px; left: 14px;
  font-size: 0.68rem; color: var(--gold-dim);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--gold-border); border-radius: 999px;
  padding: 2px 8px;
}
.aya-ar {
  font-family: 'UthmanicHafs', 'Amiri', 'Traditional Arabic', serif;
  font-size: var(--qfs, 1.5rem); line-height: 2.25;
  color: var(--gold-bright);
  text-align: right; direction: rtl;
  margin: 4px 0 10px; padding-left: 44px;
}
/* Arabic mode on the dua tabs: drop the English prose, keep the card title, source
   reference, badge and section headings, which identify the dua and carry its grading. */
.lang-ar .dua-en,
.lang-ar .dua-note,
.lang-ar .call-en,
.lang-ar .tier-en { display: none; }
/* Both of these are flex rows built around an Arabic/English pair. Removing the English
   half strands the Arabic on the LEFT: the Adhaan row is space-between, so a lone child
   falls to the start, and the 99 Names row loses the flex:1 element that was holding the
   Arabic over to the right. Arabic stays on the right, as it does everywhere else. */
.lang-ar .call-ar { max-width: 100%; }
.lang-ar .aya-en { display: none; }
.lang-ar .of-en { display: none; }
.lang-en .aya-ar { display: none; }
/* English-only: first line clears the top-left verse-number pill */
.lang-en .aya-en { text-indent: 54px; }

.reader-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.rgroup { display: inline-flex; gap: 6px; }
/* inline-flex with a pinned min-height so the taller A cannot make its chip taller than
   the rest of the row; 26px is the natural height of a text chip, so nothing else moves */
.rchip { font-family: inherit; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--gold); background: transparent; border: 1px solid #3a3020; border-radius: 999px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; }
.rchip.fs-chip { padding: 3px 12px; min-width: 40px; }
.rchip .a-sm { font-size: 0.85em; line-height: 1; }
.rchip .a-lg { font-size: 1.4em; line-height: 1; }
.rchip.on { color: #000; background: var(--gold, #c9a84c); border-color: var(--gold, #c9a84c); font-weight: 600; }

.mushaf {
  font-family: 'UthmanicHafs', 'Amiri', 'Traditional Arabic', serif;
  font-size: var(--qfs, 1.7rem); line-height: 2.5;
  color: var(--gold-bright);
  direction: rtl; text-align: right;
  background-color: var(--card, #111111);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2.5em, rgba(240, 192, 64, 0.045) 2.5em, rgba(240, 192, 64, 0.045) 5em);
  background-origin: content-box; background-clip: content-box, border-box;
  border: 1px solid #3a3020; border-radius: 10px;
  padding: 18px 20px; margin: 0 0 16px;
}
.m-num { font-size: 0.62em; color: var(--gold); margin: 0 5px; white-space: nowrap; }

.theme-wrap { margin: 0 0 14px; }
.theme-band {
  background: linear-gradient(180deg, #16120a, #111111);
  border: 1px solid #3a3020; border-left: 3px solid #f0c040; border-radius: 8px;
  padding: 12px 16px;
  font-family: Georgia, serif; font-size: 1.02rem; line-height: 1.5; color: var(--gold-bright);
}
/* was bare text in the band; as a heading it must inherit the band's own type */
.theme-band .tb-title { font: inherit; font-weight: inherit; color: inherit; margin: 0; }
.theme-band .tb-range { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); margin: 0 0 5px; }
/* the English owns the card's full line (owner, 2026-09-04): no measure cap - it runs
   the width the Arabic runs, and only then wraps */
.aya-en { font-size: calc(0.5rem + 0.2 * var(--qfs, 1.7rem)); line-height: 1.65; color: var(--gold); }

.refnote {
  text-align: center;
  font-size: 0.7rem; color: var(--gold-dim); opacity: 0.7;
  letter-spacing: 0.05em;
  padding: 14px 0 4px;
}

.sj-mark { color: var(--sajdah); font-family: 'UthmanicHafs', 'Amiri', serif; }

/* Verse of prostration. Restrained on purpose: this marks a required action, so it reads
   as a cue rather than decoration, and it must not compete with the Arabic above it. */
.sajdah-cue { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(224, 103, 79, 0.30); }
.sj-head { display: inline-flex; align-items: center; gap: 8px; }
.sj-glyph { font-family: 'UthmanicHafs', 'Amiri', serif; font-size: 1.2rem; line-height: 1; color: var(--sajdah); }
.sj-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sajdah); }
.sj-foot { font-size: 0.64rem; line-height: 1.4; color: var(--gold-dim); text-align: center; }

/* ── Reading log card (Fajr pilot) ──────────────────────────────────────────── */
.read-card { margin: 26px 0 10px; padding: 20px 18px 18px; text-align: center; background: linear-gradient(180deg, #14110a, var(--card)); border: 1px solid var(--gold-border); border-top: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
.rc-eyebrow { margin: 0 0 12px; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 360px; padding: 13px 18px; font-family: var(--font-serif); font-size: 1.02rem; letter-spacing: 0.04em; color: var(--gold-bright); background: transparent; border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background var(--transition), color var(--transition); }
.rc-btn:hover { background: rgba(201, 168, 76, 0.08); }
.rc-btn.done { color: #0a0a0a; background: var(--gold); border-color: var(--gold); font-weight: 600; cursor: default; }
.rc-btn .tick { font-size: 0.95em; }
.rc-undo { display: block; margin: 8px auto 0; padding: 10px 12px; min-height: 36px; background: none; border: 0; color: var(--gold-dim); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.rc-line { margin: 10px 0 0; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--gold-dim); }
.rc-line b { color: var(--gold); font-weight: 600; }
.rc-more { margin-top: 14px; }
.rc-detail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gold-border); }
.rc-detail[hidden] { display: none; }
.rc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 360px; margin: 16px auto 0; }
.rc-stat { padding: 10px 8px; background: #0d0b06; border: 1px solid var(--gold-border); border-radius: 10px; }
.rc-stat b { display: block; font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold-bright); }
.rc-stat span { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); }
.rc-foot { margin: 12px 0 0; font-size: 0.68rem; line-height: 1.5; color: var(--gold-dim); }
/* Gold tick on a prayer tab read today. Beside the label where there is room, beneath it on
   phones. One accent only: the dark tick on the active pill is the label's own treatment. */
.tab-btn .tab-tick { display: none; }
.tab-btn.read-today .tab-tick { display: inline-block; margin-left: 6px; font-size: 0.9em; color: var(--gold-bright); }
.tab-btn.active.read-today .tab-tick { color: #0a0a0a; }
@media (max-width: 480px) {
  .rc-months { grid-template-columns: repeat(4, 1fr); }
  .rc-mo b { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  /* The pill is a flex row, so the tick drops beneath the label by taking a full line. */
  .tab-btn.read-today { flex-wrap: wrap; }
  .tab-btn.read-today .tab-tick { flex-basis: 100%; margin: 0; font-size: 0.7rem; line-height: 1.1; }
}

/* ── Reading log report ───────────────────────────────────────────────────────
   One cell family at four densities, a muted emerald and brick palette that sits inside
   the estate's gold, a hero strip with the trend and the usual mark time, weekday-aligned
   grids, twelve month calendars, and motion on open. Numbers are Inter, lining and
   tabular: Georgia's old-style figures turn a zero into an o. */
.read-card { --rl-ok: #2ea36b; --rl-bad: #b8463c; --rl-neutral: #16130b; --rl-pre: #121009; }
.rl-hero { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 12px; align-items: stretch; margin-top: 14px; padding: 16px 16px 12px; text-align: left; background: linear-gradient(180deg, #14110a, #0d0b06); border: 1px solid var(--gold-border); border-top: 1px solid var(--gold); border-radius: 12px; }
.rl-hero-main { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.rl-hero-pct { font-family: var(--font-sans); font-size: 2.5rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; color: var(--gold-bright); }
.rl-hero-lab { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); }
.rl-hero-side { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 64px; padding: 6px 10px; border-left: 1px solid var(--gold-border); }
.rl-hero-side b { font-family: var(--font-sans); font-size: 1.45rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--gold-bright); }
.rl-hero-side span { margin-top: 5px; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); text-align: center; }
/* The trend and the usual mark time share one full-width line under the strip; on a phone
   they wrap to two lines, each on its own, rather than squeezing in beside the tiles. */
.rl-hero-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding-top: 9px; border-top: 1px solid var(--gold-border); }
.rl-trend, .rl-time { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--gold-dim); white-space: nowrap; }
.rl-block { margin-top: 12px; padding: 14px 14px 12px; text-align: left; background: #0d0b06; border: 1px solid var(--gold-border); border-radius: 12px; }
.rl-head { display: flex; justify-content: space-between; align-items: baseline; }
.rl-title { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
.rl-pct { font-family: var(--font-sans); font-size: 1.2rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--gold-bright); }
.rl-sub { margin: 4px 0 12px; font-size: 0.72rem; color: var(--gold); }
/* Equal columns across the whole block, so a grid is evenly divided in its box on every
   width; each cell fills its column up to a cap and sits centred in it on wide screens. */
.rl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.rl-g7 { gap: 8px; margin-bottom: 18px; }
.rl-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.rl-g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-bottom: 16px; }
.rl-gw { gap: 5px; }
.rl-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; font-size: 0.58rem; letter-spacing: 0.08em; text-align: center; color: var(--gold-dim); }
.rl-blank { background: transparent; }
.rl-cell { display: block; width: 100%; max-width: 44px; justify-self: center; aspect-ratio: 1 / 1; min-height: 30px; border-radius: 5px; background: var(--rl-neutral); position: relative; transition: transform var(--transition); }
.rl-g7 .rl-cell, .rl-g4 .rl-cell { border-radius: 8px; }
@media (hover: hover) { .rl-cell:hover { transform: scale(1.12); } }
.rl-cell i { position: absolute; left: 0; right: 0; top: 100%; margin-top: 5px; font-style: normal; font-size: 0.58rem; letter-spacing: 0.08em; text-align: center; color: var(--gold-dim); white-space: nowrap; }
.rl-g12 .rl-cell i { margin-top: 4px; font-size: 0.5rem; letter-spacing: 0; }
.rl-on { background: var(--rl-ok); }
.rl-off { background: var(--rl-bad); }
.rl-today { background: transparent; border: 1px solid var(--gold); box-shadow: 0 0 10px rgba(240, 192, 64, 0.25); }
.rl-pre, .rl-future { background: var(--rl-pre); }
.rl-hmflex { display: flex; align-items: stretch; gap: 6px; }
.rl-hmrows { display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; font-size: 0.52rem; letter-spacing: 0.06em; color: var(--gold-dim); text-align: center; width: 10px; }
.rl-hmrows span { display: flex; align-items: center; justify-content: center; }
.rl-hmwrap { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rl-hm90 { gap: 4px; }
.rl-hm90 .rl-hmcol { gap: 4px; }
.rl-hm90 .rl-hm { border-radius: 4px; max-width: 28px; justify-self: center; }
.rl-hmcol { display: grid; grid-template-rows: repeat(7, auto); gap: 2px; min-width: 0; }
.rl-hm { display: block; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 12px; border-radius: 1.5px; background: var(--rl-neutral); }
.rl-hm.rl-on { background: var(--rl-ok); } .rl-hm.rl-off { background: var(--rl-bad); } .rl-hm.rl-pre, .rl-hm.rl-future { background: var(--rl-pre); }
.rl-hm.rl-today { background: transparent; box-shadow: inset 0 0 0 1px var(--gold); }
.rl-insight { margin: 12px 0 2px; font-size: 0.7rem; letter-spacing: 0.03em; text-align: center; color: var(--gold-dim); }
.rl-insight b { color: var(--gold); font-weight: 600; }
/* Twelve month calendars, Monday to Sunday, three across on a phone and four on a desktop;
   Al-Kahf's version shows only each month's Fridays. */
.rl-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.rl-mon { min-width: 0; }
.rl-mon-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.rl-mon-h b { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; color: var(--gold); }
.rl-mon.now .rl-mon-h span { color: var(--gold-bright); }
.rl-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rl-fgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.rl-mc { display: block; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 10px; border-radius: 2px; background: var(--rl-neutral); }
.rl-fgrid .rl-mc { border-radius: 3px; }
.rl-mc.rl-blank { background: transparent; }
/* Restated at cell specificity: .rl-mc sets the neutral background above, so a bare .rl-on
   lost to it and the twelve calendars showed no colour (v567 to v570). */
.rl-mc.rl-on { background: var(--rl-ok); } .rl-mc.rl-off { background: var(--rl-bad); } .rl-mc.rl-pre, .rl-mc.rl-future { background: var(--rl-pre); }
.rl-mc.rl-today { background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--gold); }
.rl-legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
.rl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl-legend .rl-cell { width: 10px; height: 10px; aspect-ratio: auto; border-radius: 3px; }
@keyframes rlFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rl-anim .rl-hero, .rl-anim .rl-block { animation: rlFade 0.4s ease both; }
.rl-anim .rl-block:nth-of-type(2) { animation-delay: 0.06s; } .rl-anim .rl-block:nth-of-type(3) { animation-delay: 0.12s; }
.rl-anim .rl-block:nth-of-type(4) { animation-delay: 0.18s; } .rl-anim .rl-block:nth-of-type(5) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .rl-anim .rl-hero, .rl-anim .rl-block { animation: none; } .rl-cell:hover { transform: none; } }
/* Wide screens: the capped cells sit in wide columns, so open the rows a little too, or the
   calendar reads as tight stripes. */
@media (min-width: 600px) {
  .rl-gw { row-gap: 12px; }
  .rl-hm90 .rl-hmcol { gap: 8px; }
  .rl-year { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
}
@media (max-width: 480px) {
  .rl-hero { gap: 8px; padding: 14px 12px 10px; }
  .rl-hero-side { min-width: 54px; padding: 4px 6px; }
  .rl-hero-side b { font-size: 1.3rem; }
  .rl-hero-pct { font-size: 2.2rem; }
  .rl-hm90, .rl-hm90 .rl-hmcol { gap: 3px; }
}

/* ── BEAD ROW (owner, Khatam, 2026-09-11) ───────────────────────────────────────────────
   Its own .bd- prefix, used by nothing else and reaching nothing else, so the whole widget
   can be moved or deleted without disturbing a single other rule on this page. Sits directly
   above the Khatam reading log and deliberately reads as its own frame, not part of it. */
.bd-card { margin: 26px 0 10px; padding: 18px 18px 14px; text-align: center; background: linear-gradient(180deg, #14110a, var(--card)); border: 1px solid var(--gold-border); border-top: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
.bd-eyebrow { margin: 0 0 14px; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }
/* ONE tap target, not seven: the row is the button, the beads are only what it looks like.
   touch-action and the select guards stop a long press starting a selection or a callout,
   which is what a hold-to-reset gesture collides with on a phone. */
.bd-row { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 46px; padding: 6px 10px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bd-row:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; border-radius: 999px; }
.bd-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gold-border); background: #0d0b06; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.bd-dot.on { background: var(--gold-bright); border-color: var(--gold-bright); transform: scale(1.12); }
.bd-count { margin: 10px 0 0; font-family: var(--font-sans); font-size: 1.05rem; font-variant-numeric: lining-nums tabular-nums; color: var(--gold-bright); }
.bd-hint { margin: 5px 0 0; font-size: 0.68rem; letter-spacing: 0.04em; color: var(--gold-dim); }
/* the foot: a hadith on consistency and an honest note that seven is a preference. Full width,
   never measure-capped, per the duas English law. */
.bd-quote { max-width: none; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--gold-border); font-family: var(--font-serif); font-size: 0.9rem; line-height: 1.6; color: var(--gold-bright); }
.bd-ref { max-width: none; margin: 6px 0 0; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold-dim); }
.bd-note { max-width: none; margin: 10px 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--gold-dim); }
@media (prefers-reduced-motion: reduce) { .bd-dot { transition: none; } .bd-dot.on { transform: none; } }