/* styles/worship2.css — v1489. SALAH, TASBĪḤ and the DUʿĀʾ LIST in INSET, the owner's pick of four Quiet Glass designs
   (artifact "Worship in Quiet Glass", https://claude.ai/artifact/HLcDFdieBodJfpbVAE4ZkZ — "Inset full implementation").
   Inset = the Quiet Glass rules as written: the warm page, white inset groups with hairlines from the text column,
   sentence-case captions, glyphs without tiles, round glass keys, one ink capsule per screen, and the owner's ACCENT (clay by default)
   (no Worship rose, no area green / blue). Drawn by modules/tools/salah-ui.js, tasbih.js and dua-list.js, with the
   shared pieces from styles/ds-ui.css (Mithlayn.ui2) re-skinned here inside .wr-app only.
   VALUES: the Quiet Glass tokens (--q-*, styles/ql/ql.css: they follow the reader's paper) with the ds.css roles as
   the fallback (?old has no --q-*); the accent is --c-accent (styles/ds.css: clay, or Settings › Appearance › Accent). No literal colour here.
   body.tint-plain (Settings › Colours › Plain) still turns the accent to ink: its [data-area] rule outranks the one below. */

/* ── the Inset roles, set on the window: every ui2 piece inside reads them ──────────────────────────────────── */
.wr-app[data-area] {
  --c-page:var(--q-page, var(--al-paper)); --c-soft:var(--q-page, var(--al-paper)); --c-card:var(--q-group, var(--al-card));
  --c-fill:var(--q-fill, var(--al-card2)); --c-ink:var(--q-ink, var(--al-ink)); --c-ink2:var(--q-ink2, var(--al-ink2));
  --c-mut:var(--q-ink3, var(--al-mut)); --c-hair:var(--q-hair, var(--al-line)); --c-scrim:var(--q-scrim, var(--al-scrim));
  --c-on:var(--c-accent); --c-on-ink:var(--c-accent-ink); --c-good:var(--c-on);
  --wi-ink:var(--q-ink-strong, var(--al-ink)); --wi-sel:var(--q-selected, var(--al-card2)); --wi-val:var(--q-value, var(--al-mut));
  --wi-chev:var(--q-chev, var(--al-mut)); --wi-glyph:var(--q-glyph, var(--al-ink2));
  --wi-strong:var(--q-strong, var(--al-ink)); --wi-strong-ink:var(--q-strong-ink, var(--al-paper));
  --wi-glass:var(--q-glass, var(--mat-chrome)); --wi-blur:var(--q-blur, var(--mat-blur));
  --wi-rim:var(--q-glass-rim, 0 0 0 .5px var(--al-line)); --wi-edge:var(--q-glass-edge, 0 0 0 .5px var(--al-line)); --wi-gsh:var(--q-sh-glass, var(--sh-float));
  --wi-off:color-mix(in srgb, var(--c-ink) 18%, transparent); --wi-soft:color-mix(in srgb, var(--c-on) 13%, transparent);
  --wi-rg:var(--q-r-group, var(--r-grp)); --wi-rs:var(--q-r-sheet, var(--r-win)); --wi-row:var(--q-row-min, var(--row-h));
  --wi-font:var(--q-ui, var(--ds-font)); --wi-lead:26px;
}

/* ── the full-screen window and its stack of pages ─────────────────────────────────────────────────────────── */
.wr-app { position:fixed; inset:0; z-index:64; background:var(--c-page); color:var(--c-ink); font:400 var(--fs-body)/1.3 var(--wi-font); transform:translateY(100%); transition:transform var(--q-rise, var(--dur-3) var(--ease-out)); touch-action:pan-y; }
.wr-app.show { transform:none; }
.wr-pages { position:absolute; inset:0; overflow:hidden; }
.wr-pg { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:var(--c-page);
  padding:calc(var(--sp-2) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-5) * 2 + env(safe-area-inset-bottom, 0px));
  display:grid; align-content:start; transition:transform var(--q-rise, var(--dur-3) var(--ease-out)), opacity var(--dur-2) var(--ease-out); }
.wr-pg.off { transform:translateX(100%); }
.wr-pg.under { transform:translateX(-28%); opacity:.4; }
.wr-inner { width:100%; max-width:640px; margin:0 auto; display:grid; gap:var(--sp-5); align-content:start; min-width:0; }
@media (min-width:744px) { .wr-pg { padding-left:var(--sp-5); padding-right:var(--sp-5); } }

/* the head: ✕ or ‹ as a round glass key on the left, the title centred, an optional key on the right */
.wr-app .ds-head { display:grid; grid-template-columns:var(--tap) minmax(0,1fr) var(--tap); align-items:center; gap:var(--sp-2); min-height:64px; margin-bottom:calc(var(--sp-2) * -1); }
.wr-app .ds-head .ds-tile { display:none; }
.wr-app .ds-head .ds-title { grid-column:2; text-align:center; }
.wr-app .ds-head > .ds-round:last-child:not(:first-child) { grid-column:3; }
.wr-app .ds-title b { font:600 var(--fs-head)/1.3 var(--wi-font); letter-spacing:0; color:var(--wi-ink); white-space:normal; text-wrap:balance; }
.wr-app .ds-title small { font:400 var(--fs-sub)/1.33 var(--wi-font); color:var(--c-mut); white-space:normal; text-wrap:balance; }
.wr-app .ds-round { width:var(--tap); height:var(--tap); background:var(--c-fill); color:var(--wi-glyph); box-shadow:none; }
.wr-app .ds-round .ic { width:20px; height:20px; stroke-width:1.6; }
.wr-app :is(.ds-head, .wr-chrome) .ds-round { background:var(--wi-glass); -webkit-backdrop-filter:var(--wi-blur); backdrop-filter:var(--wi-blur); box-shadow:var(--wi-rim), var(--wi-edge), var(--wi-gsh); }

/* inset groups: caption → white group → footnote; rows grow with their text; hairlines start at the text column */
.wr-app .ds-sec { display:grid; min-width:0; }
.wr-app .ds-cap { font:400 var(--fs-sub)/1.33 var(--wi-font); color:var(--c-mut); padding:0 var(--sp-4) var(--sp-2); }
.wr-app .ds-foot { font:400 var(--fs-sub)/1.33 var(--wi-font); color:var(--c-mut); padding:var(--sp-2) var(--sp-4) 0; }
.wr-app .ds-group { background:var(--c-card); border-radius:var(--wi-rg); box-shadow:none; overflow:hidden; }
.wr-app .ds-row { --wi-tx:var(--sp-4); min-height:var(--wi-row); padding:var(--sp-3) var(--sp-4); gap:var(--sp-3); font:400 var(--fs-body)/1.3 var(--wi-font); color:var(--c-ink); }
.wr-app .ds-row:has(> .ds-gl, > .wr-lead, > .wr-chk:first-child, > .wl-n) { --wi-tx:calc(var(--sp-4) + var(--wi-lead) + var(--sp-3)); }
.wr-app .ds-row + .ds-row::before, .wr-app .ds-row + .ds-row.noicon::before { inset-inline-start:var(--wi-tx); inset-inline-end:var(--sp-4); height:1px; background:var(--c-hair); }
.wr-app .ds-gl, .wr-app .wr-lead { width:var(--wi-lead); height:var(--wi-lead); flex:none; border-radius:0; background:none; color:var(--wi-glyph); display:grid; place-items:center; }
.wr-app .ds-gl .ic, .wr-app .wr-lead .ic { width:22px; height:22px; stroke-width:1.6; }
.wr-app .ds-rt > span { font-weight:400; }
.wr-app .ds-rt small { font:400 var(--fs-sub)/1.33 var(--wi-font); color:var(--c-mut); }
.wr-app .ds-rv { color:var(--wi-val); font-size:var(--fs-body); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:var(--sp-2); }
.wr-app .ds-chev { width:16px; height:16px; color:var(--wi-chev); opacity:1; }
.wr-app .ds-empty .ds-gl { background:none; color:var(--wi-glyph); }
.wr-app .ds-empty b { font:600 var(--fs-head)/1.3 var(--wi-font); }

/* the one strong capsule (ink), quiet capsules (fill), the plain accent word */
.wr-app .ds-btn.pro { min-height:52px; border-radius:var(--r-cap); background:var(--wi-strong); color:var(--wi-strong-ink); font:500 var(--fs-call)/1.25 var(--wi-font); }
.wr-app .ds-btn.plain { color:var(--c-on); font:400 var(--fs-body)/1.3 var(--wi-font); }
.wr-app .wr-cap2 { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--tap); padding:0 var(--sp-5); border:0; border-radius:var(--r-cap);
  background:var(--c-fill); color:var(--c-ink); font:500 var(--fs-call)/1.25 var(--wi-font); cursor:pointer; }
.wr-app .wr-cap2.strong { background:var(--wi-strong); color:var(--wi-strong-ink); }
.wr-app .wr-cap2 .ic { width:18px; height:18px; }

/* controls: the segmented capsule, the switch, the stepper */
.wr-app .ds-seg { padding:2px; min-height:36px; background:var(--c-fill); }
.wr-app .ds-seg button { min-height:32px; color:var(--c-ink2); font:500 var(--fs-sub)/1.2 var(--wi-font); }
.wr-app .ds-seg button[aria-checked="true"] { color:var(--c-ink); font-weight:600; }
.wr-app .ds-seg .ds-th { top:2px; bottom:2px; left:2px; width:calc((100% - 4px) / var(--n)); background:var(--c-card); }
.wr-app .ds-sw { width:63px; height:28px; background:var(--wi-off); }
.wr-app .ds-sw::after { width:37px; height:24px; }
.wr-app .ds-sw[aria-checked="true"] { background:var(--c-on); }
.wr-app .ds-sw[aria-checked="true"]::after { transform:translateX(22px); }
.wr-app .ds-stp { grid-template-columns:var(--tap) minmax(48px,auto) var(--tap); }
.wr-app .ds-stp button { min-height:36px; color:var(--c-ink); font:400 var(--fs-t3)/1 var(--wi-font); }
.wr-app .ds-stp output { font:500 var(--fs-sub)/1 var(--wi-font); }

/* the tick circle (prayed, said, chosen): a ring, filled in the accent when on */
.wr-chk { width:var(--wi-lead); height:var(--wi-lead); flex:none; border:0; border-radius:var(--r-cap); background:none; box-shadow:inset 0 0 0 1.6px var(--wi-chev); display:grid; place-items:center; color:transparent; cursor:pointer; padding:0;
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.wr-chk .ic { width:16px; height:16px; stroke-width:2.4; }
.wr-chk[aria-checked="true"], .wr-chk.on, [aria-pressed="true"] > .wr-chk { background:var(--c-on); box-shadow:none; color:var(--c-on-ink); }
/* as a button it is tapped: a 44-point target around the 26-point ring (rule H3), the ring drawn inside it */
button.wr-chk { position:relative; width:var(--tap); height:var(--tap); margin:calc((var(--wi-lead) - var(--tap)) / 2); background:none; box-shadow:none; }
button.wr-chk::before { content:""; position:absolute; inset:calc((var(--tap) - var(--wi-lead)) / 2); border-radius:var(--r-cap); box-shadow:inset 0 0 0 1.6px var(--wi-chev);
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
button.wr-chk[aria-checked="true"] { background:none; }
button.wr-chk[aria-checked="true"]::before { background:var(--c-on); box-shadow:none; }
button.wr-chk .ic { position:relative; }
.wr-pill { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:var(--r-cap); background:var(--wi-soft); color:var(--c-on); font:500 var(--fs-sub)/1 var(--wi-font); white-space:nowrap; }

/* ── Salah ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.wr-next { background:var(--c-card); border-radius:var(--wi-rg); padding:var(--sp-5); display:grid; gap:var(--sp-1); }
.wr-next small { font:400 var(--fs-sub)/1.33 var(--wi-font); color:var(--c-ink2); }
.wr-next b { font:600 var(--fs-t1)/1.2 var(--wi-font); letter-spacing:0; color:var(--wi-ink); font-variant-numeric:tabular-nums; }
.wr-next span { font-size:var(--fs-sub); line-height:1.33; color:var(--c-mut); }
.wr-pr .ds-rv { min-width:52px; justify-content:flex-end; }
.wr-app .wr-pr:has(> button.wr-chk) { min-height:calc(var(--tap) + var(--sp-3)); }   /* audit D6-15: two rows' 44 ticks keep 12 between them */
.wr-pr.now { background:var(--wi-sel); }
.wr-pr.past .ds-rv { color:var(--c-mut); }
.wr-dial { position:relative; width:250px; height:250px; margin:0 auto; border-radius:var(--r-cap); background:none; box-shadow:inset 0 0 0 1px var(--c-hair); }
.wr-dial i { position:absolute; left:50%; top:4px; width:1.5px; height:12px; margin-left:-.75px; background:var(--c-mut); transform-origin:.75px 121px; }
.wr-needle { position:absolute; left:50%; top:30px; width:3px; height:95px; margin-left:-1.5px; border-radius:var(--r-cap); background:var(--c-on); transform-origin:1.5px 95px; transition:transform var(--dur-3) var(--ease-back); }
.wr-needle.ok { background:var(--c-on); box-shadow:0 0 0 2px var(--wi-soft); }
.wr-dial .wr-ka { position:absolute; left:50%; top:117px; width:16px; height:16px; margin-left:-8px; border-radius:var(--r-cap); background:var(--c-on); }
.wr-dial .wr-n { position:absolute; top:22px; left:0; right:0; text-align:center; font:600 var(--fs-sub)/1 var(--wi-font); color:var(--c-ink); }
.wr-dialbox { background:var(--c-card); border-radius:var(--wi-rg); padding:var(--sp-5) var(--sp-4); display:grid; gap:var(--sp-3); }
.wr-qb { text-align:center; display:grid; gap:2px; }
.wr-qb b { font:600 var(--fs-t1)/1.2 var(--wi-font); font-variant-numeric:tabular-nums; color:var(--wi-ink); }
.wr-qb small { color:var(--c-mut); font-size:var(--fs-sub); }
.wr-cal { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:var(--sp-1); padding:var(--sp-4); }
.wr-cal span { display:grid; place-items:center; justify-self:center; width:40px; height:40px; border-radius:var(--r-cap); font:400 var(--fs-body)/1 var(--wi-font); font-variant-numeric:tabular-nums; }
.wr-cal .h { width:auto; height:auto; padding-bottom:var(--sp-1); font:400 var(--fs-sub)/1 var(--wi-font); color:var(--c-mut); }
.wr-cal .today { background:var(--c-on); color:var(--c-on-ink); font-weight:600; }
.wr-cal .white { text-decoration:underline 2px var(--c-on); text-underline-offset:6px; }
.wr-empty-go { display:grid; gap:var(--sp-2); padding:0 var(--sp-4) var(--sp-4); }
.wr-field { display:grid; gap:var(--sp-2); padding:var(--sp-4); }
.wr-field input { min-height:var(--tap); border-radius:var(--r-cap); border:0; background:var(--c-fill); color:var(--c-ink); padding:0 var(--sp-4); font:400 var(--fs-body)/1 var(--wi-font); }
.wr-field input:focus { outline:none; box-shadow:inset 0 0 0 2px var(--c-on); }
.wr-inner > .wr-col { display:grid; gap:var(--sp-5); align-content:start; min-width:0; }
/* iPad: two columns — the next prayer and today on the left, the rest on the right */
@media (min-width:900px) {
  .wr-inner.wr-two { max-width:1040px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--sp-5); align-items:start; }
  .wr-inner.wr-two > :is(.ds-head, .wr-topics) { grid-column:1 / -1; }
  .wr-inner.wr-two > .wr-opts { position:sticky; top:0; }
  .wr-setup .wr-startbar .ds-btn { width:min(100%, 1040px); }
}

/* ── Tasbīḥ: setup · the blank count · why say it ─────────────────────────────────────────────────────────── */
.wr-setup { padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)); }
.wr-topics { display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--sp-4) * -1); padding:2px var(--sp-4); }
.wr-topics::-webkit-scrollbar { display:none; }
.wr-topics button { flex:none; display:inline-flex; align-items:center; gap:6px; border:0; min-height:36px; padding:0 14px; border-radius:var(--r-cap); background:var(--c-fill); box-shadow:none; color:var(--c-ink); font:500 var(--fs-sub)/1 var(--wi-font); white-space:nowrap; cursor:pointer; }
.wr-topics button[aria-selected="true"] { background:var(--wi-soft); color:var(--c-on); }
.wr-topics button .ic { width:16px; height:16px; stroke-width:2; }
.wr-dh { position:relative; display:flex; align-items:center; gap:var(--sp-3); min-height:var(--wi-row); padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); cursor:pointer; }
.wr-dh + .wr-dh::before { content:""; position:absolute; top:0; left:calc(var(--sp-4) + var(--wi-lead) + var(--sp-3)); right:var(--sp-4); height:1px; background:var(--c-hair); }
.wr-dh > .ic { width:var(--wi-lead); height:var(--wi-lead); flex:none; padding:5px; border-radius:var(--r-cap); box-shadow:inset 0 0 0 1.6px var(--wi-chev); color:transparent; stroke-width:2.4; opacity:1;
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.wr-dh[aria-checked="true"] > .ic { background:var(--c-on); box-shadow:none; color:var(--c-on-ink); }
.wr-dt { flex:1; min-width:0; display:grid; gap:var(--sp-2); }   /* audit D6-14: the Arabic's lowest marks (a tanwīn kasra) sat 2 over the meaning's letters */
.wr-dt .ar { font:400 var(--fs-t2)/1.9 var(--ds-font-ar); direction:rtl; text-align:right; color:var(--c-ink); overflow-wrap:anywhere; }
.wr-dt small { font-size:var(--fs-sub); line-height:1.33; color:var(--c-mut); }
.wr-dn { font:400 var(--fs-sub)/1 var(--wi-font); color:var(--c-mut); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wr-why { width:40px; height:40px; flex:none; border:0; border-radius:var(--r-cap); background:var(--c-fill); color:var(--wi-glyph); font:600 var(--fs-head)/1 var(--wi-font); cursor:pointer; }
.wr-app .ds-group:has(> .wr-tgt) { background:none; border-radius:0; overflow:visible; }
.wr-tgt { padding:0; }
/* audit #60 / #62 (merged onto the Inset look): a prayer's whole row marks it (salah-ui.js); the "!" key, the topic
   chips and the reference chips take a 44px tap, each drawn at its own size (audit D6-17: the Hadith source links too) */
.wr-pr.wr-tap { cursor:pointer; }
.wr-why, .wr-topics button, .wr-chip, .wr-meta a { position:relative; }
.wr-why::before { content:""; position:absolute; inset:calc((40px - var(--tap)) / 2); }
.wr-topics button::before, .wr-chip::before, .wr-meta a::before { content:""; position:absolute; left:0; right:0; top:50%; height:var(--tap); transform:translateY(-50%); }
.wr-tgt .ds-seg { width:100%; }
.wr-range { flex:1; min-width:0; accent-color:var(--c-on); }
.wr-dimrow .ds-rt { flex:none; }
.wr-startbar { position:fixed; left:0; right:0; bottom:0; padding:var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); display:flex; justify-content:center;
  background:linear-gradient(to top, var(--c-page) 62%, transparent); }
.wr-startbar .ds-btn { width:min(100%, 640px); }
.wr-pg.under .wr-startbar { opacity:0; pointer-events:none; }

/* the blank screen */
.wr-tb { position:absolute; inset:0; background:var(--c-page); cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:manipulation; outline:none;
  transition:transform var(--q-rise, var(--dur-3) var(--ease-out)), opacity var(--dur-2) var(--ease-out); }
.wr-tb.off { transform:translateY(100%); }
.wr-tb.under { opacity:.4; }
.wr-mid { position:absolute; inset:calc(76px + env(safe-area-inset-top, 0px)) var(--sp-5) calc(84px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-2); pointer-events:none; text-align:center; }
.wr-phr { max-width:600px; display:grid; gap:var(--sp-1); margin-bottom:var(--sp-2); transition:opacity var(--dur-2) var(--ease-out); }
.wr-phr .ar { font:400 var(--fs-t1)/1.9 var(--ds-font-ar); direction:rtl; color:var(--wi-ink); }
.wr-phr.long .ar { font-size:var(--fs-t3); line-height:2.1; max-height:38vh; overflow-y:auto; scrollbar-width:none; pointer-events:auto; }
.wr-phr small { font-size:var(--fs-sub); color:var(--c-mut); line-height:1.33; }
.wr-num { font:400 var(--fs-hero)/1 var(--wi-font); letter-spacing:0; color:var(--wi-ink); font-variant-numeric:tabular-nums; transition:scale var(--dur-2) var(--ease-back), color var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.wr-num.bump { scale:1.04; transition:none; }
/* M4-R7: under Reduce Motion (both switches) the number never grows (tasbih.js cross-fades it) and turns clay over 0.15 s */
@media (prefers-reduced-motion:reduce) { .wr-num.bump { scale:none; } html.ql body .wr-num { transition:color var(--q-d-150) var(--ease-out) !important; } }
body.reduce-motion .wr-num.bump { scale:none; } body.reduce-motion .wr-num { transition:color var(--q-d-150) var(--ease-out) !important; }
.wr-of { font:400 var(--fs-sub)/1 var(--wi-font); color:var(--c-mut); font-variant-numeric:tabular-nums; transition:opacity var(--dur-2) var(--ease-out); }
.wr-tb.done .wr-num, .wr-tb.done .wr-of { color:var(--c-on); }
.wr-tb.hideon .wr-num, .wr-tb.hideon .wr-of, .wr-tb.hideon .wr-phr { opacity:0; }
.wr-flash { min-height:20px; margin-top:6px; font:500 var(--fs-sub)/1.3 var(--wi-font); color:var(--c-on); opacity:0; transition:opacity var(--dur-3) var(--ease-out); }
.wr-flash.on { opacity:1; }
.wr-done { margin-top:var(--sp-4); pointer-events:auto; }   /* v1517: the stage's middle lets taps through to count; Done must take its own (a tap once finished used to close from anywhere, hiding this) */   /* v1510: counting for the Duʿāʾ list, the target reached → Done · back to the list */
.wr-done[hidden] { display:none; }
.wr-mean { max-width:600px; max-height:32vh; overflow-y:auto; overscroll-behavior:contain; margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-grp); background:var(--c-fill); font:400 var(--fs-body)/1.5 var(--ds-font); color:var(--wi-ink); text-align:start; pointer-events:auto; }   /* v1516: the duʿāʾ's meaning under Done, to read before going back */
.wr-mean[hidden] { display:none; }
.wr-tb.reading .wr-phr { display:none; }   /* v1517: finished for the Duʿāʾ list — the Arabic steps out; the meaning and Done take the screen */
.wr-tb.reading .wr-mean { max-height:52vh; }
.wr-auto { display:flex; align-items:center; gap:var(--sp-2); font:400 var(--fs-sub)/1 var(--wi-font); color:var(--c-mut); }
.wr-auto[hidden] { display:none; }
.wr-auto i { width:8px; height:8px; border-radius:var(--r-cap); background:var(--c-mut); }
.wr-auto.run i { background:var(--c-on); }
.wr-chrome { position:absolute; inset:0; pointer-events:none; transition:opacity var(--dur-3) var(--ease-out); }
.wr-tb.idle .wr-chrome { opacity:.22; }
.wr-chrome .ds-round { position:absolute; pointer-events:auto; }
.wr-c-tl { top:calc(var(--sp-3) + env(safe-area-inset-top, 0px)); left:var(--sp-3); }
.wr-c-tr { top:calc(var(--sp-3) + env(safe-area-inset-top, 0px)); right:var(--sp-3); }
.wr-c-bl { bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); left:var(--sp-3); }
.wr-c-bc { bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); left:50%; translate:-50% 0; }
.wr-c-br { bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); right:var(--sp-3); }
/* v1528 (owner: "they have to be all equally … make the placement all equal"): four keys on the bottom row, evenly spaced — the two
   ends where they were, Dim and Screen options at one and two thirds between them */
.wr-c-bd, .wr-c-bc { --wr-span:calc(100% - 2 * var(--sp-3) - var(--tap)); translate:-50% 0; }
.wr-c-bd { bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); left:calc(var(--sp-3) + var(--tap) / 2 + var(--wr-span) / 3); }
.wr-tb .wr-c-bc { left:calc(var(--sp-3) + var(--tap) / 2 + var(--wr-span) * 2 / 3); }
.wr-c-bd[aria-pressed="true"] { color:var(--c-accent); }
.wr-bang { font:600 var(--fs-head)/1 var(--wi-font); }
.wr-dim { position:absolute; inset:0; z-index:5; background:black; opacity:0; pointer-events:none; }
.wr-shw { position:absolute; inset:0; z-index:3; background:var(--c-scrim); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease-out); cursor:default; }
.wr-sh { position:absolute; z-index:4; left:0; right:0; bottom:0; max-width:580px; margin:0 auto; padding:var(--sp-2) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); cursor:default;
  background:var(--c-page); border-radius:var(--wi-rs) var(--wi-rs) 0 0; box-shadow:var(--sh-win); transform:translateY(calc(100% + 48px)); transition:transform var(--q-rise, var(--dur-3) var(--ease-out)); }
@media (min-width:744px) { .wr-sh { bottom:calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); border-radius:var(--wi-rs); padding-bottom:var(--sp-4); } }
.wr-sheet-on .wr-shw { opacity:1; pointer-events:auto; }
.wr-sheet-on .wr-sh { transform:none; }
.wr-grab { width:36px; height:5px; border-radius:var(--r-cap); background:var(--c-hair); margin:0 auto var(--sp-3); }

/* why say it */
.wr-ihead { display:grid; gap:var(--sp-1); text-align:center; padding:0 var(--sp-2); }
.wr-ihead .ar { font:400 var(--fs-t1)/1.9 var(--ds-font-ar); direction:rtl; color:var(--wi-ink); }
.wr-ihead .ar.long { font-size:var(--fs-t3); line-height:2.1; }
.wr-ihead b { font:600 var(--fs-body)/1.3 var(--wi-font); color:var(--c-ink); }
.wr-ihead p { margin:0; font-size:var(--fs-sub); line-height:1.33; color:var(--c-mut); }
.wr-ibody { display:grid; gap:var(--sp-3); }
.wr-card { background:var(--c-card); border-radius:var(--wi-rg); box-shadow:none; padding:var(--sp-4) var(--sp-5); display:grid; gap:var(--sp-2); min-width:0; }
.wr-card.hl { box-shadow:inset 0 0 0 2px var(--c-on); }
.wr-ben { grid-template-columns:auto 1fr; align-items:start; gap:var(--sp-3); }
.wr-ben > .ic { width:20px; height:20px; color:var(--c-on); margin-top:2px; }
.wr-ben > div { display:grid; gap:var(--sp-2); justify-items:start; min-width:0; }
.wr-chip { border:0; min-height:32px; background:var(--c-fill); color:var(--c-ink2); border-radius:var(--r-cap); padding:0 12px; font:500 var(--fs-sub)/1.2 var(--wi-font); cursor:pointer; }
.wr-lbl { font:400 var(--fs-sub)/1.33 var(--wi-font); letter-spacing:0; text-transform:none; color:var(--c-mut); }
.wr-story { font-size:var(--fs-body); line-height:1.6; }
.wr-arq { font:400 var(--fs-t2)/2 var(--ds-font-ar); direction:rtl; text-align:right; }
/* v1565: an āyah (Tanzil's text) is drawn in the Qurʾān face (--f-quran), a duʿāʾ in the prose face */
.wr-arq, .wr-dt .ar.q, .wr-ihead .ar.q, .wr-phr .ar.q, .wl-ar[data-q] { font-family:var(--f-quran); }
.wr-arh { font:400 var(--fs-t3)/2 var(--ds-font-ar); direction:rtl; text-align:right; color:var(--c-ink2); }
.wr-en { margin:0; font-size:var(--fs-body); line-height:1.6; }
.wr-why-l { font-size:var(--fs-sub); color:var(--c-mut); }
.wr-meta { display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-3); align-items:center; font-size:var(--fs-sub); color:var(--c-mut); }
.wr-meta a { color:var(--c-on); font-weight:500; text-decoration:none; }
.wr-grade { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:var(--r-cap); background:var(--wi-soft); color:var(--c-on); font:500 var(--fs-sub)/1.2 var(--wi-font); }

/* ── the Duʿāʾ list (modules/tools/dua-list.js): shelves · a shelf's cascade · names · every category · search ── */
.wl-n { width:var(--wi-lead); flex:none; text-align:center; color:var(--c-mut); font:400 var(--fs-sub)/1 var(--wi-font); font-variant-numeric:tabular-nums; }
.wl-row .ds-rt > span { font-weight:400; }
.wl-row.done .ds-rt > span { color:var(--c-mut); }
.wl-card { position:relative; display:grid; gap:var(--sp-3); padding:var(--sp-5); background:var(--c-card); }
.wl-card + .ds-row::before, .ds-row + .wl-card::before { content:""; position:absolute; top:0; left:var(--sp-4); right:var(--sp-4); height:1px; background:var(--c-hair); }
.wl-card + .ds-row::before { inset-inline-start:var(--wi-tx); }
.wl-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.wl-top b { font:600 var(--fs-body)/1.3 var(--wi-font); color:var(--wi-ink); }
.wl-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.wl-tag { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:var(--r-cap); background:var(--c-fill); color:var(--c-ink2); font:500 var(--fs-sub)/1.2 var(--wi-font); }
.wl-tag[data-status="weak"], .wl-tag[data-status="disputed"] { background:color-mix(in srgb, var(--q-danger, var(--c-danger)) 12%, transparent); color:var(--q-danger, var(--c-danger)); }
.wl-who { margin:0; font-size:var(--fs-sub); line-height:1.4; color:var(--c-mut); }
.wl-ar { margin:0; font:400 var(--fs-t2)/2.1 var(--ds-font-ar); direction:rtl; text-align:right; color:var(--wi-ink); overflow-wrap:anywhere; }
.wl-q { font-size:var(--fs-sub); color:var(--c-mut); }
.wl-caps { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.wl-caps button { min-height:var(--tap); padding:0 14px; border:0; border-radius:var(--r-cap); background:var(--c-fill); color:var(--c-ink2); font:500 var(--fs-sub)/1 var(--wi-font); cursor:pointer; }
.wl-caps button[aria-pressed="true"] { background:var(--wi-soft); color:var(--c-on); font-weight:600; }
.wl-read { margin:0; font-size:var(--fs-body); line-height:1.6; color:var(--c-ink); white-space:pre-line; }
.wl-read.src { font-size:var(--fs-sub); color:var(--c-ink2); }
.wl-wbw { display:flex; flex-wrap:wrap; gap:var(--sp-2); direction:rtl; }
.wl-wbw span { display:grid; gap:2px; justify-items:center; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-ctl); background:var(--c-fill); }
.wl-wbw b { font:400 var(--fs-t3)/1.8 var(--ds-font-ar); }
.wl-wbw i { font:400 var(--fs-sub)/1.2 var(--wi-font); font-style:normal; color:var(--c-mut); direction:ltr; }
.wl-acts { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
/* v1491: the open card is one big tap target — no text selection or callout to fight the tap; the hint says so */
.wl-card.wl-tap { cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; transition:background var(--dur-1) var(--ease-out); }
.wl-hint { font-size:var(--fs-sub); line-height:1.33; color:var(--c-mut); }
.wl-acts .ds-round { width:var(--tap); height:var(--tap); }
.wl-name { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); }
.wl-name .ar { font:400 var(--fs-t2)/1.7 var(--ds-font-ar); direction:rtl; color:var(--wi-ink); }
.wl-field { display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap); padding:0 var(--sp-4); border-radius:var(--r-cap); background:var(--c-fill); color:var(--c-mut); }
.wl-field:focus-within { box-shadow:inset 0 0 0 2px var(--c-on); }
.wl-field input { flex:1; min-width:0; border:0; background:none; outline:none; color:var(--c-ink); font:400 var(--fs-body)/1.3 var(--wi-font); }
.wl-field .ic { width:20px; height:20px; }
.wl-end { display:grid; justify-items:center; gap:var(--sp-2); padding:var(--sp-5) var(--sp-4); text-align:center; }
.wl-end b { font:600 var(--fs-body)/1.3 var(--wi-font); }
.wl-endk { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); }   /* v1527: Begin again · Home */
.wl-hdk { display:flex; flex:none; gap:var(--sp-3); grid-column:3; justify-self:end; }   /* v1527: Home beside Start this set again (audit D6-15: 12 apart) */
.wr-app .ds-head:has(> .wl-hdk) { grid-template-columns:calc(var(--tap) * 2 + var(--sp-3)) minmax(0,1fr) calc(var(--tap) * 2 + var(--sp-3)); }
@media (min-width:900px) {
  .wr-inner.wl-two { max-width:1040px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--sp-5); align-items:start; }
  .wr-inner.wl-two > :is(.ds-head, .wl-full) { grid-column:1 / -1; }
}