/* clarity-ui.css - CLARITY-UI-01 (seat A1, 15 Oct 2026). Loaded last by base.html. Every rule here is for a piece this
   order adds (tap-to-explain, Reading settings, the once-per-page Sources, the editor's note's "more", the home page's
   "New here?" doors and its Sources fold) or for the reading pages' DIN line and text sizes. No text is transformed:
   capitals stay as written. */

/* ── TAP-TO-EXPLAIN (words.py / explain.js). A dotted underline, the word's own colour. With scripting off it is the link
      to the word on /words; with scripting on the one plain line opens beside it. ─────────────────────────────────── */
a.xp{color:inherit;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:help}
a.xp:hover,a.xp[aria-expanded="true"]{text-decoration-style:solid}
.xp-pop{position:absolute;z-index:60;box-sizing:border-box;max-width:min(22rem,calc(100vw - 32px));
  background:var(--rd-card,#fffdf8);color:var(--rd-ink,#191816);border:1px solid var(--rd-input,#c9c4b8);
  border-radius:var(--rd-r-sm,.5rem);padding:.6rem .8rem;font:400 .95rem/1.45 var(--rd-sans,sans-serif);
  text-transform:none;letter-spacing:normal;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.xp-pop a{display:inline-block;margin-top:.35rem;font-size:.85rem;color:var(--rd-gold,#8a6a18)}

/* ── THE DIN 31635 LINE ON THE READING PAGES: its own line, OFF by default, shown by Reading settings
      (html[data-din-line="on"], set before paint by base.html). The easy-read line always shows here - the verse page's
      own easy-read/DIN switch (aalamin-translit) keeps working on the verse page and the study, where it lives. ───── */
.rdr-verse .tl-simple,:root[data-translit="din31635"] .rdr-verse .tl-simple{display:block}
.rdr-verse .tl-din,:root[data-translit="din31635"] .rdr-verse .tl-din{display:none}
:root[data-din-line="on"] .rdr-verse .tl-din{display:block}

/* ── TEXT SIZE, ARABIC SEPARATELY (html[data-text-size] / html[data-ar-size]). zoom scales each verse line with every
      size the existing rules give it (phone, long verse, lead line), so none of them is restated here; the action row
      is not scaled, so its 44px targets (rule 8) hold at every setting. ────────────────────────────────────────────── */
:root[data-text-size="s"]{--cu-tr:.9}  :root[data-text-size="l"]{--cu-tr:1.15}  :root[data-text-size="xl"]{--cu-tr:1.3}
:root[data-ar-size="s"]{--cu-ar:.85}   :root[data-ar-size="l"]{--cu-ar:1.2}     :root[data-ar-size="xl"]{--cu-ar:1.4}
.rdr-verse>.rdr-tr,.rdr-verse>.rdr-by,.rdr-verse>.tl,.rdr-verse>.tr-note,.rdr-verse>.L-verdict,.rdr-verse .rdr-ev-body{zoom:var(--cu-tr,1)}
.rdr-verse>.rdr-ar{zoom:var(--cu-ar,1)}

/* ── THE EASY-READ NOTE, ONCE PER PAGE ─────────────────────────────────────────────────────────────────────────────── */
.rdr-tl-note{margin:.6rem 0 0;font-size:.9rem;line-height:1.5;color:var(--rd-ink-soft,#4a4f4b)}

/* ── THE READING PAGE'S SOURCES, ONCE ──────────────────────────────────────────────────────────────────────────────── */
.rdr-page-sources{margin:1.5rem 0 1rem;border-top:1px solid var(--rd-border,#e2ddd2);padding-top:.25rem}
.rdr-page-sources>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600}
.rdr-page-sources .rdr-src-k{margin:.75rem 0 .25rem;font-weight:600;font-size:.95rem}
.rdr-page-sources .rdr-src-list{margin:0 0 .5rem;padding-left:1.2rem}
.rdr-page-sources .rdr-src-refs{color:var(--rd-ink-muted,#6b6f6a);font-size:.85rem;white-space:nowrap}
.rdr-evidence .rdr-pw-link{margin-left:0}

/* ── HOME: "New here?" AND THE SOURCES FOLD ────────────────────────────────────────────────────────────────────────── */
.cu-new{margin:1.25rem 0 0;padding:1rem 1.1rem;border:1px solid var(--rd-border,#e2ddd2);border-radius:var(--rd-r,1rem);background:var(--rd-card,#fffdf8)}
.cu-new h2{margin:0 0 .6rem;font-size:1.2rem}
.cu-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none}
.cu-door a{display:block;height:100%;box-sizing:border-box;padding:.75rem .85rem;border:1px solid var(--rd-input,#c9c4b8);
  border-radius:var(--rd-r-sm,.5rem);text-decoration:none;color:inherit;background:var(--rd-bg,#f7f5ef)}
.cu-door a:hover,.cu-door a:focus-visible{border-color:var(--rd-ink,#191816)}
.cu-door b{display:block;font-size:1rem;margin-bottom:.2rem}
.cu-door span{display:block;font-size:.875rem;line-height:1.4;color:var(--rd-ink-soft,#4a4f4b)}
@media (max-width:639.98px){.cu-doors{grid-template-columns:1fr}}
.cu-home-sources{margin:2rem 0 0}
.cu-home-sources>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600}

/* ── /words ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-words{max-width:42rem;margin:0 auto;padding:2rem 16px 3rem}
.cu-words dl{margin:1.5rem 0 0}
.cu-words dt{font-weight:700;margin-top:1.1rem;scroll-margin-top:5rem}
.cu-words dd{margin:.2rem 0 0;line-height:1.55}
.cu-words dt:target{background:var(--rd-gold-light,#c7a24e33)}
.cu-draft{display:inline-block;margin-left:.5rem;padding:0 .4rem;border:1px solid #a63c33;border-radius:4px;color:#a63c33;font-size:.75rem;font-weight:600;vertical-align:middle}

/* The three folds this order adds keep a visible open/closed mark: their summaries are flex (for the 44px target), which
   drops the browser's own marker, so it is drawn here. */
.cu-ctlrow>summary,.rdr-page-sources>summary,.cu-home-sources>summary{list-style:none}
.cu-ctlrow>summary::-webkit-details-marker,.rdr-page-sources>summary::-webkit-details-marker,.cu-home-sources>summary::-webkit-details-marker{display:none}
.cu-ctlrow>summary::before,.rdr-page-sources>summary::before,.cu-home-sources>summary::before{content:"\25B8";display:inline-block;width:1.1em;font-size:.9em}
.cu-ctlrow[open]>summary::before,.rdr-page-sources[open]>summary::before,.cu-home-sources[open]>summary::before{content:"\25BE"}

/* ── r2 (board read of the screenshots): verse 1 on the first phone screen ──────────────────────────────────────────── */
/* THE HEADING: name and facts, then ONE navigation row (U.nav). */
.rd-reader .rdr-head .rdr-title{margin-bottom:.5rem}
.cu-nav{display:flex;flex-wrap:wrap;align-items:stretch;gap:.25rem;margin:.6rem 0 0;position:relative}
.cu-nav-i{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .7rem;box-sizing:border-box;
  border:1px solid var(--rd-input,#c9c4b8);border-radius:var(--rd-r-sm,.5rem);background:var(--rd-card,#fffdf8);
  color:var(--rd-ink,#191816);text-decoration:none;font-size:.9rem;white-space:nowrap;cursor:pointer}
.cu-nav-i[aria-current="page"]{background:var(--rd-ink,#191816);color:var(--rd-card,#fffdf8);border-color:var(--rd-ink,#191816)}
.cu-nav-arrow{min-width:44px;padding:0;font-size:1.4rem;line-height:1}
.cu-nav>.cu-nav-arrow[rel="next"]{margin-left:auto}
.cu-nav-more{position:relative;display:flex}
.cu-nav-more>summary{list-style:none}
.cu-nav-more>summary::-webkit-details-marker{display:none}
.cu-nav-more>summary::after{content:"\25BE";margin-left:.3em;font-size:.8em}
.cu-nav-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:14rem;display:flex;flex-direction:column;
  background:var(--rd-card,#fffdf8);border:1px solid var(--rd-input,#c9c4b8);border-radius:var(--rd-r-sm,.5rem);
  box-shadow:0 6px 20px rgba(0,0,0,.12);padding:.25rem 0}
.cu-nav-menu a{display:flex;align-items:center;min-height:44px;padding:0 .9rem;color:var(--rd-ink,#191816);text-decoration:none}
.cu-nav-menu a:hover,.cu-nav-menu a:focus-visible{background:var(--rd-bg,#f7f5ef)}
@media (max-width:639.98px){
  .cu-nav{gap:.2rem}
  .cu-nav-i{padding:0 .45rem;font-size:.82rem}
  .cu-nav-arrow{min-width:36px;font-size:1.3rem}
  .cu-nav-more .cu-nav-menu{right:0}
}
/* THE CONTROL ROW (U.ctlrow): one line, closed; opens to the boxes, the credit, the notes and the settings. */
.rdr-controls .cu-ctlrow{margin:0}
.cu-ctlrow>summary{display:flex;align-items:center;flex-wrap:wrap;gap:.2em;min-height:44px;cursor:pointer;font-weight:600;font-size:.95rem}
.cu-ctlrow-body{padding:.25rem 0 .75rem}
.cu-ctlrow-body .rdr-picker{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:.25rem 0 .5rem}
.cu-ctlrow-body .rdr-credit{margin:.25rem 0}
.cu-ctlrow-body .lead-note{margin:.4rem 0}
.rdr-settings{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:flex-start;padding:.6rem 0 0;margin-top:.5rem;border-top:1px solid var(--rd-border,#e2ddd2)}
.rdr-settings[hidden]{display:none}
.rdr-settings .rdr-ctl-group{flex-wrap:wrap}
.rdr-settings-note{flex-basis:100%;margin:0;font-size:.85rem;color:var(--rd-ink-muted,#6b6f6a)}
.rdr-controls>.rdr-wrap>.rdr-credit{margin:.25rem 0 .5rem}
/* "IN PLAIN WORDS": the whole first sentence, then "more" (a checkbox: no script). */
.cu-fsbox .cu-fs-rest{display:none}
.cu-fsbox .cu-fs-after{display:none}
.cu-fsbox .cu-more{cursor:pointer;text-decoration:underline;text-underline-offset:.2em;color:var(--rd-gold,#8a6a18);
  font-family:var(--rd-sans,sans-serif);font-size:.85em;white-space:nowrap;padding:.4em 0}
.cu-more-in:checked~.cu-fs .cu-fs-rest{display:inline}
.cu-more-in:checked~.cu-fs-after{display:block}
.cu-more-in:checked~.cu-fs .cu-more{display:none}
.cu-more-in:focus-visible~.cu-fs .cu-more{outline:2px solid var(--rd-gold,#8a6a18);outline-offset:2px}
@media (max-width:639.98px){
  .rd-reader .rd-pw .tr.big,.rd-reader .flow-intro .tr.big{font-size:1.15rem;line-height:1.5;margin-bottom:.4rem}
  .rd-reader .rd-pw{padding-top:.5rem;padding-bottom:.25rem;margin-bottom:0}
  .rd-reader .rd-pw h2{padding-top:.5rem;margin-bottom:.4rem}
  .rd-reader .rd-pw .orientation-sub{margin:.1rem 0 .35rem}
  .rd-reader .rdr-head{padding-top:1rem;padding-bottom:.75rem}
  .rd-reader .rdr-controls{padding-top:.25rem;padding-bottom:.25rem}
  .rd-reader .rd-surahtop{margin-top:.75rem}
  .rd-reader .rdr-column{padding-top:.75rem}
}
/* THE VERDICT AS THE WAY IN TO THIS VERSE'S COMPARE PANEL */
.cu-verdict-link{color:inherit;text-decoration:underline;text-underline-offset:.2em}
/* CLARITY-UI-02: THE TRANSLATION LINE (U.trrow), directly under the navigation row. One line: "Translation:", the chips, the
   language picker. On a phone it scrolls sideways and stays one line (no wrap). The selected chip is marked by aria-current. */
.cu-trrow{margin:.4rem 0 0}
.cu-trrow-line{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:2px}
.cu-tr-k{flex:0 0 auto;font-weight:600;font-size:.9rem;white-space:nowrap}
.cu-chips{display:flex;flex-wrap:nowrap;gap:.3rem;flex:0 0 auto}
.cu-chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 .55rem;box-sizing:border-box;white-space:nowrap;
  border:1px solid var(--rd-border,#d9d3c4);border-radius:999px;background:var(--rd-card,#fffdf8);color:var(--rd-ink,#191816);
  text-decoration:none;font-size:.9rem}
a.cu-chip:hover{border-color:var(--rd-ink,#191816)}
.cu-chip[aria-current="true"]{background:var(--rd-ink,#191816);color:var(--rd-card,#fffdf8);border-color:var(--rd-ink,#191816);font-weight:600}
.cu-lang{display:flex;align-items:center;gap:.3rem;flex:0 0 auto;margin:0 0 0 .4rem;white-space:nowrap}
.cu-lang .rdr-select{min-height:40px;max-width:9rem}
.cu-lang-en{font-weight:400}
.cu-trrow>.rdr-credit,.cu-trrow>p.rdr-credit{margin:.3rem 0 0;font-size:.8rem}
.cu-trmeta{display:flex;flex-wrap:wrap;align-items:center;column-gap:.6rem;margin:.3rem 0 0}
.cu-trrow .cu-trmeta>.rdr-credit{margin:0;font-size:.8rem}
.cu-why{font-size:.8rem}
.cu-why>summary{cursor:pointer;min-height:24px;display:flex;align-items:center;gap:.25em;color:var(--rd-ink-muted,#6b6f6a);text-decoration:underline;text-underline-offset:2px}
.cu-why[open]{flex-basis:100%}
.cu-why .lead-note{margin:.15rem 0 0;padding:0;border:0;font-size:.8rem;line-height:1.35;color:var(--rd-ink-muted,#6b6f6a)}
/* CLARITY-UI-02 r2, phones only: so that verse 1's Arabic AND its translation end on the first screen at 390x844 (board read of
   15 Oct), the new line takes no more height than it must: chips 34px tall, tighter gaps, the heading's bottom padding under it and the gap above the "New here?" box. */
@media (max-width:639.98px){
  .cu-trrow{margin-top:.25rem}
  .cu-chip,.cu-lang .rdr-select{min-height:34px}
  .cu-trmeta{margin-top:.15rem}
  .rd-reader .rdr-head:has(.cu-trrow){padding-bottom:.25rem}
  .rd-reader .rdr-head:has(.cu-trrow)+.rdr-controls{padding-top:0}
  .rd-reader:has(.cu-trrow) .rd-surahtop{margin-top:.4rem}
}
.cu-ctlrow>summary{gap:.4em}
/* CLARITY-UI-03 (board order of 15 Oct 2026). THE NAVIGATION ROW: below 760px (phones) "More" holds Go to a verse, Read on and
   Library; from 760px (tablets and wider) the three are inline in the row and "More" is hidden - measured: the full row is 757px at
   its desktop padding and fits a 768px tablet at the tighter padding below. THE TRANSLATION LINE: from 760px it may wrap, so the
   language picker sits beside the chips where the width allows (1024px and wider) and goes under them, whole, where it does not;
   phones keep the one sideways-scrolling line. The chips are pills at every width (.cu-chip above). */
.cu-nav-wide{display:none}
@media (min-width:760px){
  .cu-nav-wide{display:inline-flex}
  .cu-nav>.cu-nav-more{display:none}
  .cu-trrow-line{flex-wrap:wrap;overflow-x:visible;row-gap:.4rem}
  .cu-chips{flex:1 1 0;min-width:18rem;flex-wrap:wrap;row-gap:.3rem}
  .cu-chip{padding:0 .5rem}
  .cu-lang{margin-left:.15rem}
  .cu-lang .rdr-select{max-width:7.5rem}
}
@media (min-width:760px) and (max-width:1023.98px){
  .cu-nav{gap:.2rem}
  .cu-nav-i{padding:0 .45rem}
}