/* ===========================================================================
   Tafsir Ahl al-Bayt — reader styles.

   Four scripts share every page, so type is the whole design: Al Qalam for the
   Quranic Arabic, Vazirmatn for Persian, Source Serif for English, Hind
   Vadodara for Gujarati. Everything else is quiet on purpose: paper, one rule
   colour, one accent.
   =========================================================================== */

@font-face {
  font-family: 'Al Qalam';
  src: url('../fonts/AlQalam.woff2') format('woff2'),
       url('../fonts/AlQalam.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #fcfbf8;
  --surface:   #ffffff;
  --raise:     #f6f4ee;
  --ink:       #1b1a17;
  --ink-2:     #55524c;
  --ink-3:     #8b867d;
  --line:      #e7e3d9;
  --line-soft: #f0ede5;
  --accent:    #1e6f5c;
  --accent-2:  #e8f1ee;
  --quote:     #1a55a8;   /* Arabic quoted inside a Latin-script translation */
  --mark:      #fbeec2;
  --shadow:    0 1px 2px rgba(27, 26, 23, .04), 0 8px 24px -16px rgba(27, 26, 23, .18);

  --ui:  'Inter', system-ui, -apple-system, sans-serif;
  --ar:  'Al Qalam', 'Scheherazade New', 'Geeza Pro', serif;
  --fa:  'Vazirmatn', 'Al Qalam', Tahoma, sans-serif;
  --en:  'Source Serif 4', Georgia, serif;
  --gu:  'Hind Vadodara', 'Noto Sans Gujarati', 'Gujarati Sangam MN', sans-serif;

  --scale: 1;          /* driven by the A- / A+ buttons */
  --col: 46rem;        /* reading column */
  --radius: 14px;

  /* Light only for now. Pinned so form controls and scrollbars do not go dark
     on a device set to dark mode while the page stays paper-coloured. */
  color-scheme: light;
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 .12em; }

.wrap { width: min(72rem, 100% - 2.5rem); margin-inline: auto; }
.muted { color: var(--ink-3); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

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

/* --- header -------------------------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.head-row {
  display: flex; align-items: center; gap: 1rem;
  min-height: 60px; padding-block: .55rem;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .6rem; margin-inline-end: auto; }
.brand-mark { font-size: 1.35rem; color: var(--accent); line-height: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: .96rem; font-weight: 600; letter-spacing: -.01em; }
.brand-text small { font-family: var(--fa); font-size: .72rem; color: var(--ink-3); direction: rtl; }

.search { position: relative; flex: 1 1 16rem; max-width: 24rem; }
.search input {
  width: 100%; font: inherit; font-size: .88rem;
  padding: .5rem 2.2rem .5rem .85rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.search input::placeholder { color: var(--ink-3); }
.search button {
  position: absolute; inset-inline-end: .3rem; top: 50%; translate: 0 -50%;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 1rem;
}
.search button:hover { color: var(--accent); }

.head-tools { display: flex; align-items: center; gap: .35rem; }

.chips { display: flex; gap: 2px; padding: 2px; background: var(--raise); border-radius: 999px; }
.chip {
  font: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .55rem; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-3);
}
.chip[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.chip[data-pending]::after { content: '·'; color: var(--accent); margin-inline-start: .15rem; }

.icon-btn {
  font: inherit; font-size: .78rem; width: 2rem; height: 2rem;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--ink-3);
  border: 1px solid transparent; border-radius: 8px;
}
.icon-btn:hover { color: var(--ink); background: var(--raise); }
.icon-btn svg { display: block; }
.size-btn { font-family: var(--en); font-size: .8rem; }
.size-btn.big { font-size: 1.15rem; }

@media (max-width: 640px) {
  .head-row { min-height: 0; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .brand-text small { display: none; }
}

/* --- language visibility -------------------------------------------------- */
/* One class on <html> hides a whole script everywhere, with no reload. */

.no-ar .lang-ar, .no-fa .lang-fa, .no-en .lang-en, .no-gu .lang-gu { display: none; }

/* --- text blocks ---------------------------------------------------------- */

.t { margin: 0 0 1rem; }
.t:last-child { margin-bottom: 0; }

.lang-ar { font-family: var(--ar); direction: rtl; text-align: right; line-height: 2.15; }
.lang-fa { font-family: var(--fa); direction: rtl; text-align: right; line-height: 2; }
.lang-en { font-family: var(--en); direction: ltr; line-height: 1.72; }
.lang-gu { font-family: var(--gu); direction: ltr; line-height: 1.85; }

/* Arabic quoted inside an English or Gujarati translation. Set in the Quranic
   face and coloured so the original stands apart from the rendering of it.
   `isolate` keeps the RTL run from dragging the brackets around it. */
.ar-inline {
  font-family: var(--ar);
  font-weight: 700;
  color: var(--quote);
  font-size: 1.15em;
  line-height: 1;
  unicode-bidi: isolate;
}

.pending {
  font-family: var(--ui); font-size: .78rem; color: var(--ink-3);
  font-style: italic; direction: ltr; text-align: start;
}

/* --- home ----------------------------------------------------------------- */

.hero { padding: 3.5rem 0 2rem; text-align: center; }
.hero h1 {
  margin: 0 0 .5rem; font-family: var(--en); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: -.02em;
}
.hero .arabic-title {
  font-family: var(--ar); font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--accent); direction: rtl; margin-bottom: .9rem;
}
.hero p { color: var(--ink-2); max-width: 34rem; margin-inline: auto; }
.hero .counts { margin-top: 1.4rem; font-size: .8rem; color: var(--ink-3); }
.hero .counts b { color: var(--ink); font-weight: 600; }

.surah-grid {
  display: grid; gap: .6rem; padding-bottom: 4rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

/* Two rows on a fixed grid so 114 cards line up whatever the name length. */
.surah-card {
  display: grid; gap: 0 .8rem; align-items: center;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  grid-template-areas: 'no name arabic' 'no meta count';
  padding: .7rem .85rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.surah-card:hover { border-color: var(--accent); transform: translateY(-1px); color: inherit; }

.surah-no {
  grid-area: no; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  font-size: .78rem; font-weight: 600; color: var(--accent);
  background: var(--accent-2); border-radius: 9px;
}
.surah-en {
  grid-area: name; font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.surah-meta {
  grid-area: meta; font-size: .72rem; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.surah-ar {
  grid-area: arabic; font-family: var(--ar); font-size: 1.25rem;
  direction: rtl; color: var(--ink-2); line-height: 1.6; white-space: nowrap;
}
.surah-count {
  grid-area: count; font-size: .68rem; color: var(--ink-3);
  text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --- reader --------------------------------------------------------------- */

.reader { width: min(var(--col), 100% - 2.5rem); margin-inline: auto; padding-bottom: 4rem; }

.surah-head { padding: 2.6rem 0 1.6rem; text-align: center; border-bottom: 1px solid var(--line); }
.surah-head .kicker {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.surah-head h1 {
  margin: .5rem 0 .2rem; font-family: var(--ar); font-weight: 400;
  font-size: clamp(2rem, 7vw, 3rem); direction: rtl; line-height: 1.5;
}
.surah-head h2 {
  margin: 0; font-family: var(--en); font-weight: 400; font-size: 1.05rem; color: var(--ink-2);
}
.surah-head .guj { font-family: var(--gu); font-size: .95rem; color: var(--ink-2); margin-top: .2rem; }
.surah-head .facts { margin-top: .9rem; font-size: .76rem; color: var(--ink-3); }
.surah-head .facts span + span::before { content: '·'; margin: 0 .5rem; }

.bismillah {
  font-family: var(--ar); font-size: calc(1.7rem * var(--scale)); text-align: center;
  direction: rtl; color: var(--accent); padding: 2rem 0 .5rem; line-height: 2;
}

.ayah {
  padding: 2rem 0; border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 5rem;
}
.ayah:last-of-type { border-bottom: 0; }

/* On the single-verse page the verse is the subject of everything below it, so
   it sits in a tinted panel. In the surah list every verse is equal, and the
   panel is left off. */
.ayah-featured > .verse-panel {
  background: var(--accent-2);
  border: 1px solid #cfe2db;   /* fallback for browsers without color-mix */
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem 1.5rem;
}
.ayah-featured > .verse-panel .ayah-act { color: var(--ink-2); }
.ayah-featured > .verse-panel .ayah-act:hover { background: var(--surface); }
.ayah-featured > .verse-panel .ayah-no { background: var(--surface); }
.ayah-featured > .verse-panel .t-body { color: var(--ink); }

.ayah-bar {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
}
.ayah-no {
  font-family: var(--ui); font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  color: var(--accent); background: var(--accent-2);
  padding: .2rem .5rem; border-radius: 6px;
}
.ayah-bar .spacer { flex: 1; }
.ayah-act {
  font: inherit; font-size: .7rem; color: var(--ink-3); background: none;
  border: 0; cursor: pointer; padding: .2rem .35rem; border-radius: 6px;
}
.ayah-act:hover { color: var(--accent); background: var(--raise); }

.verse {
  font-family: var(--ar); direction: rtl; text-align: right;
  font-size: calc(1.85rem * var(--scale)); line-height: 2.25;
  margin-bottom: 1.3rem;
}

.ayah .t-body { font-size: calc(1rem * var(--scale)); color: var(--ink-2); }
.ayah .lang-ar.t-body { color: var(--ink); }

/* commentary ---------------------------------------------------------------- */

.tafsir-toggle {
  font: inherit; font-size: .78rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem; padding: .4rem .8rem; cursor: pointer;
  color: var(--accent); background: var(--accent-2);
  border: 0; border-radius: 999px;
}
.tafsir-toggle:hover { filter: brightness(.97); }
.tafsir-toggle .caret { transition: rotate .2s; font-size: .7em; }
.tafsir-toggle[aria-expanded='true'] .caret { rotate: 180deg; }
.tafsir-toggle[disabled] { color: var(--ink-3); background: var(--raise); cursor: default; }

.tafsir { margin-top: 1.2rem; display: none; }
.tafsir.open { display: block; }
.tafsir .loading { font-size: .8rem; color: var(--ink-3); padding: .8rem 0; }

/* Banded rows. Without them the citation that closes one narration reads as a
   heading for the next, since both sit in the same tight column of small grey
   text. The band is what says "this block ended". */
.hadith {
  position: relative; padding: 1.3rem 1.2rem;
  border-inline-start: 2px solid var(--line);
  border-radius: 0 10px 10px 0;
}
.hadith:nth-child(even) { background: var(--raise); }
.hadith + .hadith { margin-top: .3rem; }
.hadith:hover { border-inline-start-color: var(--accent); }

.hadith-head { margin-bottom: .9rem; }
.hadith-section {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); display: block; margin-bottom: .25rem;
}
.hadith-narrator { font-size: 1.08rem; font-weight: 600; color: var(--ink); line-height: 1.7; }

/* The narrator, the section heading and the citation each exist in up to three
   scripts. Every one of them is its own line, aligned to the side its script
   reads from — otherwise the Persian original sits left against a right-aligned
   body, and a two-line citation splits down opposite margins. Block display is
   set on these inner classes and never on .lang-*, which the header chips use
   to hide a whole language. */
.hadith-head .fa, .hadith-ref .fa {
  display: block; font-family: var(--fa); direction: rtl; text-align: right;
  text-transform: none; letter-spacing: 0;
}
.hadith-head .en, .hadith-ref .en { display: block; direction: ltr; text-align: left; }
.hadith-head .gu, .hadith-ref .gu {
  display: block; font-family: var(--gu); direction: ltr; text-align: left;
  text-transform: none; letter-spacing: 0;
}

/* The index within the section, in a badge. Rounded to a pill rather than a
   fixed circle so a three-digit index still fits — sections run past 100. */
.hadith-n {
  float: inline-start;
  display: flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .45rem;
  margin-inline-end: .7rem;
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-2);
  border-radius: 999px;
}

.hadith .t-body { font-size: calc(.97rem * var(--scale)); }
.hadith .lang-ar.t-body { font-size: calc(1.3rem * var(--scale)); color: var(--ink); }

.hadith-ref {
  margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line);
  font-size: .86rem; color: var(--ink-3); line-height: 1.75;
}
.hadith-ref .other { font-size: .8rem; opacity: .8; }

/* pagination ---------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: .82rem;
}
.pager a, .pager span { padding: .45rem .9rem; border-radius: 999px; }
.pager a { border: 1px solid var(--line); }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .pos { color: var(--ink-3); }

.jump { display: flex; gap: .4rem; align-items: center; font-size: .8rem; }
.jump select, .jump input {
  font: inherit; font-size: .8rem; padding: .35rem .5rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}

/* --- notices, search, 404 -------------------------------------------------- */

.notice {
  margin: 1.5rem 0; padding: .8rem 1rem; border-radius: 10px;
  background: var(--raise); border: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-2);
}
.notice.error { border-color: #c0553c; }

.results { width: min(var(--col), 100% - 2.5rem); margin-inline: auto; padding: 2.5rem 0 4rem; }
.results h1 { font-family: var(--en); font-weight: 400; font-size: 1.6rem; margin: 0 0 .3rem; }
.results .count { color: var(--ink-3); font-size: .82rem; margin-bottom: 2rem; }
.results h2 {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 2rem 0 .8rem; font-weight: 600;
}

.hit {
  display: block; padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
}
.hit:hover { color: inherit; }
.hit-ref { font-size: .72rem; font-weight: 600; color: var(--accent); margin-bottom: .45rem; }
.hit .t { margin-bottom: .5rem; }
.hit .t-body { font-size: .92rem; color: var(--ink-2); }
.hit .lang-ar.t-body { font-size: 1.15rem; }

.empty { padding: 3rem 0; text-align: center; color: var(--ink-3); }

.center-page { text-align: center; padding: 6rem 0; }
.center-page h1 { font-family: var(--en); font-weight: 400; font-size: 2rem; margin: 0 0 .5rem; }

/* --- report a translation --------------------------------------------------- */

/* Floated alongside the number badge, so the two read as one control group in
   the inline-start gutter and the header text wraps past both. Height matches
   .hadith-n so they sit on the same line. */
.hadith-report {
  float: inline-start;
  display: inline-flex; align-items: center; height: 2rem;
  margin-inline-end: .7rem;
  opacity: .5; transition: opacity .15s;
}
.hadith:hover .hadith-report,
.hadith-report:hover,
.hadith-report:focus-visible { opacity: 1; }
/* Nothing hovers on a touch screen, so fading it back would just hide it. */
@media (hover: none) { .hadith-report { opacity: .85; } }

.report-modal {
  width: min(30rem, calc(100% - 2rem));
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-family: var(--ui); box-shadow: var(--shadow);
}
.report-modal::backdrop { background: rgba(27, 26, 23, .45); }
.report-modal h2 {
  margin: 0 0 .6rem; font-family: var(--en); font-weight: 400; font-size: 1.25rem;
}
.report-modal .ref {
  margin: 0 0 1rem; padding: .55rem .7rem; border-radius: 8px;
  background: var(--accent-2); color: var(--accent);
  font-size: .82rem; font-weight: 600;
}
.report-modal label { display: block; font-size: .78rem; color: var(--ink-2); margin-bottom: .35rem; }
.report-modal textarea {
  width: 100%; min-height: 6.5rem; resize: vertical;
  font: inherit; font-size: .9rem; color: var(--ink);
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
.report-modal textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.report-modal .notice { margin: .9rem 0 0; }
.report-modal .row {
  display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem;
}
.report-modal button {
  font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer;
  padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
}
.report-modal button:hover { background: var(--raise); }
.report-modal .primary {
  border-color: transparent; background: var(--accent); color: #fff;
}
.report-modal .primary:hover { filter: brightness(1.08); background: var(--accent); }
.report-modal button[disabled] { opacity: .55; cursor: default; }
.report-modal .done { margin: 0; padding: 1rem 0; font-size: .95rem; }

/* Bots fill every input they find. Off-screen rather than display:none, which
   is the first thing a scripted filler checks for. */
.report-modal .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --- footer ---------------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--line); margin-top: 2rem; }
.foot-row { padding: 2rem 0 3rem; font-size: .78rem; color: var(--ink-2); }
.foot-row p { margin: 0 0 .3rem; }

@media print {
  .site-head, .site-foot, .tafsir-toggle, .pager, .ayah-act,
  .hadith-report, .report-modal { display: none; }
  .tafsir { display: block; }
}