/* Studio component: the Adhkar reader of the Sabeel app (inbox #17). One dhikr at a time with its counter.
   Reads tokens only. Informs, never gamifies: no streaks, scores or confetti; the count and the place in the set only.
   Markup: <section class="dhikr"> <p class="dplace">…</p> <article class="dtext" lang="ar" dir="rtl">…</article>
             <p class="dnote">…</p> <div class="dfoot"><button class="ib prev">…</button>
             <button class="count" aria-live="polite"><span class="n">1</span><span class="of">of 3</span></button>
             <button class="ib next">…</button></div></section> */

.dhikr { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); min-height: calc(100dvh - var(--size-head)); padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin-inline: auto; }
.dplace { display: grid; gap: var(--space-2); margin: 0; }
.dplace .lane { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.dplace .lane i { height: 3px; border-radius: 2px; background: var(--color-line); }
.dplace .lane i.done { background: var(--color-accent); }
.dplace .lane i.here { background: var(--color-gold); }
.dplace span { font-size: var(--font-size-label); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dtext {
  align-self: start; margin: 0; padding: var(--space-5) var(--space-5) var(--space-4); border-radius: var(--radius-sheet);
  background: var(--color-surface); border: 1px solid var(--color-line); box-shadow: var(--elevation-sheet);
  font: 400 var(--font-size-dhikr)/2.05 "Amiri Quran", "Noto Naskh Arabic", serif; color: var(--color-fg); text-align: start; overflow-wrap: anywhere;
}
.dtext .ay { color: var(--color-accent); }
.dnote { margin: 0; padding: 0 var(--space-1); font-size: var(--font-size-label); color: var(--color-muted); }
.dfoot { display: grid; grid-template-columns: var(--size-tap) 1fr var(--size-tap); align-items: center; justify-items: center; gap: var(--space-4); position: sticky; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.count {
  display: grid; place-items: center; align-content: center; gap: 2px; width: var(--size-counter); height: var(--size-counter); padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-accent); box-shadow: var(--elevation-dock);
  transition: transform var(--motion-duration-press) var(--motion-easing-out), background var(--motion-duration-move) var(--motion-easing-out);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.count .n { font: var(--font-weight-semibold) var(--font-size-display)/1 var(--font-family-name); font-variant-numeric: tabular-nums; }
.count .of { font: var(--font-weight-medium) var(--font-size-label)/1.2 var(--font-family-body); color: var(--color-muted); }
.count:active { transform: scale(.97); box-shadow: var(--elevation-sheet); }
.count.done { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.count.done .of { color: var(--color-on-accent); }
.count:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
[dir="rtl"] .dfoot .ib svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .count { transition: none; } }
@media (min-width: 1024px) { .dhikr { min-height: calc(100dvh - var(--size-head) - var(--space-4)); } .dtext { font-size: var(--font-size-dhikr-wide); } }