/* Continuous reading (READER_FLOW, 2026-09-15). Layout only: every word comes from
   the templates, and this file is linked only by pages that render with the flag on.
   Built on the surah reader's own tokens and classes (style.css), so a passage reads
   as the same surface. */

/* Surah dividers inside a passage */
.flow-seg{margin-top:var(--s5)}
.flow-seg:first-of-type{margin-top:var(--s3)}
.flow-divider{border-top:1px solid var(--line);padding-top:var(--s4);margin-bottom:var(--s3)}
.flow-seg:first-of-type .flow-divider{border-top:0;padding-top:0}
.flow-divider h2{margin:0}
.flow-divider .rdr-meta{margin-top:.25rem}
.flow-intro{margin-top:var(--s3)}
.flow-intro h3{margin-top:0}

/* The passage heading names a range, so it sits smaller than a surah title */
.flow-h1{font-size:var(--t-xl);font-variant-numeric:tabular-nums}

/* The note about where a place is kept, and the resume offer */
.flow-device{font-size:var(--t-xs);color:var(--ink-soft);margin:var(--s2) 0 0;max-width:40rem}
.flow-device[hidden],.flow-resume[hidden]{display:none}
.flow-resume{border:1px solid var(--line);padding:var(--s3);margin:var(--s3) 0}
.flow-resume-line{margin:0 0 var(--s2)}
.flow-resume-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0}
.flow-quiet{background:transparent}
.flow-start{margin:var(--s2) 0}

/* Earlier / Continue */
.flow-pager .flow-ref{font-variant-numeric:tabular-nums}
.flow-pager a:focus-visible,.flow-resume a:focus-visible,.flow-resume button:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}

/* The introduction's label row. /surah/<n> gives `.panel > h2` this treatment; inside a
   passage the introduction sits under the surah's h2, so its heading is an h3 and the
   same spacing and small caps are applied here rather than by a second h2. */
.flow-intro > h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.flow-intro > h3 .lname{font-family:var(--f-mono);font-size:var(--t-sm);letter-spacing:.14em;
  font-variant-caps:all-small-caps;color:var(--hue,var(--ink-soft))}
.flow-intro > h3 .tier-tag{margin-left:auto;color:var(--ink-faint)}

/* A divider's Arabic name sits a space away from its transliteration. A PHYSICAL left
   margin, not margin-inline-start: the <bdi> is dir="rtl", so its inline start is its
   right-hand edge and the gap would land after the name instead of before it. */
.flow-divider h2 .rdr-title-ar{margin-left:.5em;font-weight:400}