/* Hadith Checker — full results page.
   VISUAL PASS (this correction): reworked to be structurally close to the
   Ahmed ElTabarani reference screenshots — inline grading/takhrij (not boxed
   panels), gold/tan accents, a full-width solid-color action-button row, and
   a modal popup for شرح. Own color tokens and markup throughout — no CSS or
   HTML copied from the reference; only its layout/structure/density were
   studied (see app.js's file-level comment for the explicit list of what was
   and wasn't carried over, and why).

   BILINGUAL PARALLEL REDESIGN (this pass): the results page now opens in its
   own full browser tab, not a narrow extension popup, so the card layout
   changed from a single stacked column (Arabic, English note underneath) to
   a genuine two-column grid: English on the LEFT, Arabic on the RIGHT,
   row-aligned so the two languages visually correspond field-by-field.
   `.hadith-card` is itself the grid container — every field-row function in
   app.js appends its English/Arabic cells directly as grid children so
   everything stays column-aligned across the whole card, not just within
   one sub-section. Takhrij is the deliberate exception (can run much
   longer than the other fields): a full-width block, Arabic row on top,
   English row underneath, rather than two cramped narrow columns. Below a
   width where two columns stop being comfortable, the grid collapses to a
   single column and every field naturally stacks Arabic-then-English in DOM
   order (see the responsive block at the end of this file). This is a
   presentation-only change — none of it touches how/when translations are
   requested, cached, or retried (see app.js). */

:root {
  color-scheme: light;

  --primary: #146356;
  --primary-dark: #0d4a41;
  --primary-light: #e5f1ee;

  --accent: #b3892f;
  --accent-light: #f8f0dd;
  --accent-dark: #8f6c22;

  --bg: #f6f4ee;
  --card-bg: #ffffff;
  --border: #e6e2d6;
  --border-strong: #d5cfc0;

  --text: #23281f;
  --text-secondary: #4b5047;
  --muted: #7d8277;

  --error: #a5291f;

  /* Metadata label badges only (Narrator/Muhaddith/Source/Page-Number/
     Grading/Takhrij) — deliberately distinct from --primary/--accent (used
     by the header/cards/action-tabs) and from each action-tab's own color,
     so labels read as a separate visual layer without competing with them. */
  --label-badge: #6b4c93;
  --label-badge-text: #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 24, 20, 0.05), 0 8px 20px rgba(20, 24, 20, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(20, 24, 20, 0.06), 0 12px 28px rgba(20, 99, 86, 0.12);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.35);

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Header — stacked title + centered search pill (closer to the reference)
   ------------------------------------------------------------------------- */

header {
  background: var(--primary);
  border-bottom: 3px solid var(--accent);
  padding: 20px 24px 26px;
}

.header-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.search-pill {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--card-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s var(--ease);
}

.search-pill:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), var(--shadow-card);
}

#query-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 18px;
  font-size: 16px;
  background: transparent;
  color: var(--text);
}

#query-input::placeholder {
  color: var(--muted);
}

#search-button {
  border: none;
  padding: 0 20px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

#search-button:hover:not(:disabled) {
  background: var(--accent-dark);
}

#search-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* -------------------------------------------------------------------------
   Main
   ------------------------------------------------------------------------- */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 32px 60px;
}

#status {
  min-height: 18px;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
}

#status.error {
  color: var(--error);
}

/* Subtle, non-error fallback note — never styled as a warning/error, appears
   exactly once, directly under the header/search bar, before any result. */
.disclaimer {
  margin: 0 0 16px;
  padding: 8px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

#results-summary {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.summary-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

#result-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* -------------------------------------------------------------------------
   Hadith card
   ------------------------------------------------------------------------- */

.hadith-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-inline-end: 4px solid var(--accent); /* thin gold accent edge, matching the reference */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 34px;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);

  /* Bilingual grid: English left / Arabic right, row-aligned. Every direct
     child is explicitly placed via grid-column below — result-serial,
     takhrij-block, and action-bar span both columns; every bi-cell-en/
     bi-cell-ar pair occupies one row each. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 14px;
  align-items: start;
}

.hadith-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.hadith-card > .result-serial,
.hadith-card > .takhrij-block,
.hadith-card > .action-bar {
  grid-column: 1 / -1;
}

.bi-cell-en {
  grid-column: 1;
}

.bi-cell-ar {
  grid-column: 2;
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 30px;
}

.card-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 0;
}

.result-serial {
  align-self: flex-start;
  /* Kept a step above the metadata/value text sizes below (now 17px/17.5px
     after this pass's +1px metadata increase) so RESULT #N still reads as
     clearly the more prominent heading, not merely equal to body text. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
}

/* --- The hadith itself: the card's visual centerpiece. Arabic (right,
   authoritative) and its English translation (left) both get full prose
   treatment — generous size and line-height, not compact "note" styling. --- */

.hadith-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arabic-block {
  font-family: 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 2.1;
  color: var(--text);
  user-select: text;
  /* Render as one continuous flowing RTL paragraph: collapse any incidental
     whitespace/newlines that happen to be embedded in Dorar's own raw text
     (confirmed live — some results contain a literal newline between the
     main isnad and an alternate "وَرَواه..." chain) into ordinary collapsible
     space, so wrapping is driven purely by the browser at the available
     column width — never one clause/sentence forced onto its own line. This
     is whitespace normalization only; no Arabic word or diacritic changes. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.hadith-en-text {
  font-weight: 500;
  line-height: 1.75;
  color: var(--text);
  white-space: normal;
}

/* Specificity fix: .hadith-en-text and .translation-text (below) are both
   single-class selectors with equal specificity, and .translation-text
   comes later in source order — so its font-size was silently winning the
   cascade here regardless of what this rule said, ever since the bilingual
   redesign (confirmed live: computed font-size was 16px, not the intended
   larger size). Pairing both classes in the selector raises specificity
   enough to reliably win, independent of source order. */
.translation-text.hadith-en-text {
  font-size: 19px;
}

.hadith-en-text.is-loading,
.hadith-en-text.is-unavailable {
  font-size: 15px;
  font-weight: 400;
}

/* --- Inline translation (used under hadith / grading / takhrij / sharh) --- */

.inline-translation {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-inline-start: 2px;
}

.inline-translation-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  cursor: help;
}

.translation-text {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.translation-text.is-loading,
.translation-text.is-unavailable {
  color: var(--muted);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.translation-text.is-loading::before {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-right-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Metadata rows: one English cell + one Arabic cell per field, row-
   aligned via the card's own grid (see .bi-cell-en/.bi-cell-ar above). --- */

.field-cell {
  font-size: 15.5px;
  line-height: 1.8;
}

.field-row-full {
  font-size: 15.5px;
  line-height: 1.8;
  padding-top: 2px;
}

.field-row-label {
  font-weight: 700;
  color: var(--text);
  font-size: 14.5px;
}

.field-row-value {
  color: var(--text-secondary);
  font-size: 17.5px;
}

.field-cell .field-row-value {
  font-family: 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* --- Main-card metadata labels: small purple badges (Narrator/Muhaddith/
   Source/Page-Number/Grading/Takhrij only). Scoped to .hadith-card so the
   أصول الحديث modal's own field rows — which reuse .field-row-label/
   .field-row-value for a different, unrelated set of labels (Source/Chain/
   Wording) — are completely unaffected; the base rules above still apply
   there exactly as before. Font-size matches .field-row-value/.translation-
   text's 17px exactly, per requirement: label and value read as the same
   typography level, not two different sizes. */
.hadith-card .field-row-label {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--label-badge-text);
  background: var(--label-badge);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  margin-inline-end: 8px;
  line-height: 1.3;
  white-space: nowrap;
}

.hadith-card .field-row-value {
  font-size: 17px;
}

/* Takhrij's label sits on its own line above the (often long) paragraph,
   rather than inline before it like the other, short-value rows — matches
   the approved mockup and keeps a long Takhrij paragraph from starting
   mid-line after the badge. */
.hadith-card .takhrij-row .field-row-label {
  display: block;
  margin-inline-end: 0;
  margin-bottom: 6px;
}

.name-english {
  font-weight: 600;
  color: var(--text);
}

.name-english.is-loading,
.name-english.is-unavailable {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

/* Grading's English cell: bold + slightly larger, "visually distinctive" —
   but deliberately NO verdict-based color (no sahih=green), unlike the
   reference — see the file-level note in app.js for why. */
.field-cell .translation-text:not(.is-loading):not(.is-unavailable) {
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   WEBSITE ADDITION — mobile field-card wrapping (base/desktop state).
   `display: contents` makes a wrapper's own box disappear for layout
   purposes: its children render as if they were direct children of ITS
   parent instead. Chained across both nesting levels here, the real
   .bi-cell-en/.bi-cell-ar pair inside ends up exactly where it would sit
   with NO wrapper at all — direct grid children of .hadith-card, placed by
   their own existing inline grid-row/grid-column styles from app.js. This
   is what keeps desktop's two-column layout completely byte-for-byte
   unaffected by the new wrapper markup. Only the mobile media query below
   gives these real flex layout. field-icon stays hidden everywhere except
   inside that same query.
   ------------------------------------------------------------------------- */

.field-card,
.field-card-content {
  display: contents;
}

.field-icon,
.result-serial-check,
.hadith-mobile-divider {
  display: none;
}

/* -------------------------------------------------------------------------
   Takhrij — deliberate exception to the side-by-side layout (see the
   file-level note): full width, Arabic row on top, English row underneath,
   rather than two narrow columns for what can be a long paragraph.
   ------------------------------------------------------------------------- */

.takhrij-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}

.takhrij-row {
  font-size: 15.5px;
  line-height: 1.8;
}

.takhrij-row-en .translation-text {
  font-size: 17px;
}

/* -------------------------------------------------------------------------
   Action bar — full-width row of solid buttons, distinct color per action
   ------------------------------------------------------------------------- */

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.action-btn {
  flex: 1 1 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: filter 0.2s var(--ease), transform 0.15s var(--ease);
}

.action-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.action-btn:active {
  transform: translateY(0);
}

.action-btn-sharh {
  background: #219653;
}

.action-btn-similar {
  background: #2a5c8a;
}

.action-btn-usul {
  background: var(--primary);
}

.action-btn-alt {
  background: var(--accent);
}

.action-btn-asbab {
  background: #a8562f;
}

/* -------------------------------------------------------------------------
   شرح modal — dark backdrop, centered card, X close button
   ------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 20, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px;
  overflow-y: auto;
  z-index: 1000;
}

.modal-panel {
  width: 100%;
  max-width: 780px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-close {
  position: fixed;
  top: 18px;
  inset-inline-end: 24px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  z-index: 1001;
}

.modal-close:hover {
  background: var(--error);
  color: #fff;
}

.modal-recap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-recap-arabic {
  font-size: 19px;
  white-space: normal;
}

/* If the hadith was already translated (session cache) by the time شرح/أصول
   is opened, the recap shows both languages side by side, matching the main
   list's bilingual philosophy — read from the cache only, never triggers a
   new translation (see app.js's renderModalRecap). */
.modal-recap-bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 10px;
  align-items: start;
}

.modal-recap-bilingual .bi-cell-ar {
  border-inline-start: 1px solid var(--border);
  padding-inline-start: 20px;
}

.modal-recap-english {
  font-size: 17px;
  line-height: 1.7;
}

.modal-recap-grading-bilingual {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 14.5px;
  color: var(--text-secondary);
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.modal-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sharh-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sharh-modal-body.is-unavailable {
  color: var(--muted);
  font-style: italic;
}

/* One progressive-translation chunk of شرح content (see app.js's
   chunkLongArabicText) — its own Arabic block + inline translation, spaced
   from the next chunk by the parent's gap above. */
.sharh-chunk {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usul-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.usul-modal-body.is-unavailable {
  color: var(--muted);
  font-style: italic;
}

.usul-source-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
}

.usul-source-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

.secondary-prose-arabic {
  font-family: 'Traditional Arabic', 'Segoe UI', Tahoma, sans-serif;
  font-size: 18px;
  line-height: 1.9;
  color: var(--text);
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  white-space: normal;
}

/* -------------------------------------------------------------------------
   Responsive — below this width, two side-by-side columns stop being
   comfortable (per spec: never shrink the text to force two columns, fall
   back to a single stacked column instead). Every bi-cell-en/bi-cell-ar pair
   collapses to grid-column: 1, so cards stack in DOM order — Arabic first,
   English beneath, matching this project's established convention.
   ------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .hadith-card {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  /* WEBSITE FIX: the desktop grid assigns an explicit numbered grid-row via
     inline style to EVERY .hadith-card child that needs deliberate
     placement — not just the bi-cell-en/bi-cell-ar pairs (placePairInRow),
     but also the result-serial badge, the takhrij-block, and the
     action-bar (placeInRow). Only the pairs were being reset back to
     `auto` here, so on a real narrow viewport the other three kept their
     desktop row NUMBER while everything else flowed via auto-placement —
     Grid's auto-flow algorithm then had to route AROUND those fixed
     positions, visually reordering the card (confirmed live: Source/Page-
     Number/Grading rendered ~450px below where the takhrij block and
     action bar rendered, despite coming BEFORE them in the DOM). Every
     child that can carry an explicit row must be reset together so the
     single-column layout falls back to pure DOM-order stacking, with
     nothing left overriding it. */
  .bi-cell-en,
  .bi-cell-ar,
  .hadith-card > .result-serial,
  .hadith-card > .takhrij-block,
  .hadith-card > .action-bar,
  .hadith-card > .hadith-mobile-divider,
  .hadith-card > .field-card {
    grid-column: 1;
    grid-row: auto !important;
  }

  .bi-cell-ar {
    border-inline-start: none;
    padding-inline-start: 0;
  }

  .modal-recap-bilingual {
    grid-template-columns: 1fr;
  }

  .modal-recap-bilingual .bi-cell-ar {
    border-inline-start: none;
    padding-inline-start: 0;
  }

  /* WEBSITE ADDITION (2nd attempt — the "quiet small label" idea in the
     first attempt made Grading/Takhrij look disproportionately loud by
     contrast and was reverted; see git history / prior comment). This
     version keeps every field's PILL styling uniform (nothing loud vs
     quiet), and instead removes only the truly redundant piece: for the
     short, atomic facts (Narrator/Muhaddith/Source/Page-Number —
     app.js's field-cell-quiet class, still an accurate name for "this
     field is a short atomic fact", not reused from the reverted attempt
     for its old meaning), the Arabic field-row-label is hidden outright
     — its English pill above already names the field, so repeating
     "الراوي"/"المحدث"/etc. right below added no information, only
     length. Grading/Takhrij/the hadith text are UNCHANGED — deliberately
     excluded from field-cell-quiet — since those can run to full
     sentences, where dropping the label would cost real context. The
     Arabic VALUE itself is never touched or hidden — only its own label. */
  .hadith-card .field-cell-quiet.bi-cell-ar .field-row-label {
    display: none;
  }

  /* WEBSITE ADDITION (3rd attempt) — full field-card redesign, per a
     reference mockup the user supplied: each field becomes its own
     rounded, bordered card with a small icon on the left, replacing the
     earlier plain stacked-lines treatment. This REPLACES the previous
     "-8px margin-top" tightening hack — field-card-content's own small
     internal gap does that job directly and more reliably. Reuses the
     site's existing --primary green (already the header/badge color)
     rather than introducing a new one, matching the unified-green
     direction chosen over the alternative varied-pastel-per-field
     reference. Desktop is untouched: .field-card/.field-card-content are
     `display: contents` there (see the base rule near .takhrij-block),
     so none of this flex/card styling applies outside this query. */
  .field-card,
  .field-card-content {
    display: flex;
  }

  .field-card {
    align-items: flex-start;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
  }

  .field-card-content {
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }

  .hadith-card .field-card-content .field-cell-quiet.bi-cell-ar {
    margin-top: 0; /* the old hack's job is now field-card-content's own `gap` above */
  }

  .field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
  }

  .field-icon svg {
    width: 17px;
    height: 17px;
  }

  /* Unified green accent for every field label on mobile (reusing
     --primary, already the site's own color), replacing --label-badge
     (purple) — scoped to this query only, so desktop's purple pill is
     completely unaffected. */
  .hadith-card .field-row-label {
    background: var(--primary);
  }

  /* Page/Number is a language-neutral citation number — showing the exact
     same digits twice (once per language) added nothing. The Arabic
     LABEL above stays fully bilingual; only this one duplicate VALUE is
     hidden, and only on mobile (see app.js's appendPageNumberRow). */
  .field-value-once {
    display: none;
  }

  /* Result badge -> a small ribbon (asymmetric corner radius approximates
     a flag/ribbon cut without needing clip-path), with a check icon. */
  .result-serial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    padding: 7px 16px 7px 12px;
    border-radius: 8px 8px 8px 2px;
  }

  .result-serial-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
  }

  .result-serial-check svg {
    width: 10px;
    height: 10px;
  }

  /* Decorative divider between the hadith text and the metadata cards
     below it — a dashed line either side of a small ornament. */
  .hadith-mobile-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    padding: 4px 0;
  }

  .hadith-mobile-divider-line {
    flex: 1;
    height: 0;
    border-top: 1px dashed var(--border-strong);
  }

  .hadith-mobile-divider-ornament {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  main {
    padding: 16px 14px 40px;
  }

  .hadith-card {
    padding: 18px 20px;
    row-gap: 14px;
    column-gap: 0;
  }

  .arabic-block {
    font-size: 20px;
  }

  .translation-text.hadith-en-text {
    font-size: 17px;
  }

  .action-btn {
    flex: 1 1 45%;
  }

  /* WEBSITE ADDITION: a bit more usable width for the شرح/أصول modals on
     phones — the close button is `position: fixed` and placed via its own
     fixed inset-inline-end (see .modal-close above), completely independent
     of the overlay's side padding, so narrowing that padding here can never
     make the modal content collide with it. */
  .modal-overlay {
    padding: 60px 10px;
  }

  .modal-panel {
    padding: 20px 16px;
  }
}