/* ============================================================
   /tasbih/ — online dhikr counter.
   Tokens + base classes come from /assets/styles.css and
   /library/assets/library.css (linked first in the page head).
   Page-specific styles only — do not edit shared stylesheets.
   ============================================================ */

.tasbih-main{min-height:70vh;padding-bottom:96px}
.tasbih-breadcrumbs{padding-top:24px;font-size:13px;color:var(--cream-muted)}
.tasbih-breadcrumbs a{color:var(--gold)}
.tasbih-breadcrumbs a:hover{text-decoration:underline}
.tasbih-breadcrumbs span[aria-current]{color:var(--cream-dim)}

.tasbih-hero{padding:44px 0 8px}
.tasbih-hero .lib-display{margin:6px 0 0}
.tasbih-hero .lib-display em{color:var(--gold);font-weight:400}
.tasbih-hero .lib-lead{margin:18px 0 0}
.tasbih-hero-ar{margin:22px 0 0;font-family:var(--arabic);font-size:clamp(30px,5vw,44px);line-height:1.9;direction:rtl;text-align:right;color:var(--emerald)}

/* ---- tool card ---- */
.tasbih-tool{margin:34px 0 0;background:var(--bg-card);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;box-shadow:0 24px 60px -42px rgba(13,40,24,.45)}

/* preset dhikr picker */
.dhikr-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.dhikr-row{display:flex;gap:10px;flex-wrap:wrap}
.dhikr-chip{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-height:56px;min-width:72px;justify-content:center;transition:border-color .15s,background .15s,transform .15s;font-family:var(--sans)}
.dhikr-chip .ar{font-size:19px;line-height:1.5;padding:0}
.dhikr-chip .nm{font-size:11.5px;color:var(--cream-muted);line-height:1.2}
.dhikr-chip:hover{border-color:var(--gold-soft);transform:translateY(-1px)}
.dhikr-chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald)}
.dhikr-chip[aria-pressed="true"] .ar{color:var(--bg)}
.dhikr-chip[aria-pressed="true"] .nm{color:rgba(250,246,238,.75)}

/* counter card — whole card is the tap target */
.counter-card{position:relative;margin-top:22px;background:var(--emerald);border-radius:16px;padding:34px 22px 30px;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(185,151,84,.25);touch-action:manipulation;overflow:hidden;transition:transform .08s ease;outline:none}
.counter-card:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.counter-card:active{transform:scale(.988)}
.counter-card.ticking .count-num{transform:scale(1.045)}
.count-num{font-family:var(--serif);font-size:clamp(72px,16vw,128px);line-height:1;color:#f8f4ea;display:inline-block;transition:transform .12s ease;font-weight:500}
.count-sub{margin-top:6px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.count-ar{margin-top:16px;font-family:var(--arabic);font-size:clamp(24px,4.2vw,34px);line-height:1.9;direction:rtl;color:#f5f1e8}
.count-tl{margin-top:4px;font-size:13px;font-style:italic;color:rgba(245,241,232,.72)}
.count-en{margin:6px 0 0;font-size:13px;color:rgba(245,241,232,.6)}
.count-hint{margin-top:14px;font-size:12px;color:rgba(245,241,232,.55)}

/* progress */
.count-progress{margin-top:20px;height:6px;border-radius:100px;background:rgba(245,241,232,.16);overflow:hidden}
.count-progress span{display:block;height:100%;width:0%;background:var(--gold-soft);border-radius:100px;transition:width .18s ease}
.count-progress-label{margin-top:8px;font-size:12.5px;color:rgba(245,241,232,.72)}
.count-progress-label b{color:#f8f4ea;font-weight:600}

/* sequence (after-salah mode) strip */
.seq-strip{display:none;margin-top:16px;background:rgba(245,241,232,.08);border:1px solid rgba(245,241,232,.14);border-radius:12px;padding:12px 16px;font-size:13.5px;color:rgba(245,241,232,.85)}
.seq-strip.on{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.seq-strip .seg{display:flex;align-items:center;gap:8px}
.seq-strip .seg b{color:#f8f4ea}
.seq-dot{width:8px;height:8px;border-radius:50%;background:rgba(245,241,232,.28)}
.seq-dot.done{background:var(--gold)}
.seq-dot.now{background:#f8f4ea;box-shadow:0 0 0 3px rgba(248,244,234,.22)}

/* completion state */
.count-done{display:none;margin-top:16px;background:rgba(184,145,84,.2);border:1px solid var(--gold);border-radius:12px;padding:14px 18px;color:#f8f4ea;font-size:15px;line-height:1.5}
.count-done.show{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.count-done .dn-t{font-family:var(--serif);font-size:18px}
.count-done .dn-a{font-size:13px;font-style:italic;color:var(--gold-soft)}
.count-done button{background:var(--gold);color:#1a1206;font-weight:700;font-size:13px;padding:10px 18px;border-radius:10px;min-height:44px}

/* controls under counter */
.tasbih-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.tbtn{font-size:13.5px;font-weight:600;color:var(--cream-dim);background:var(--bg-elevated);border:1px solid var(--line-strong);padding:11px 16px;border-radius:10px;min-height:44px;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,color .15s,background .15s;font-family:var(--sans)}
.tbtn:hover{border-color:var(--gold-soft);color:var(--emerald)}
.tbtn[aria-pressed="true"]{background:var(--emerald);color:var(--bg);border-color:var(--emerald)}
.tbtn.danger:hover{border-color:#8a3b2e;color:#8a3b2e}

/* target selector */
.target-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.target-row .lbl{font-size:13px;color:var(--cream-dim);font-weight:600}
.tgt{font-size:14px;font-weight:600;color:var(--cream-dim);border:1px solid var(--line-strong);background:var(--bg-card);padding:10px 16px;border-radius:100px;min-height:44px;min-width:52px;transition:.15s;font-family:var(--sans)}
.tgt:hover{border-color:var(--gold-soft)}
.tgt[aria-pressed="true"]{background:var(--emerald);color:var(--bg);border-color:var(--emerald)}
.tgt-custom{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:100px;padding:4px 8px 4px 16px;background:var(--bg-card);min-height:44px}
.tgt-custom span{font-size:13px;color:var(--cream-dim);font-weight:600}
.tgt-custom input{width:76px;border:none;background:none;font-family:var(--sans);font-size:14px;color:var(--cream);outline:none;padding:8px 4px;text-align:center}
.tgt-custom.go{border-color:var(--gold);background:var(--emerald)}
.tgt-custom.go span,.tgt-custom.go input{color:var(--bg)}

/* in-page reset confirm */
.reset-pop{display:none;margin-top:12px;background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px}
.reset-pop.show{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.reset-pop p{margin:0;font-size:14px;color:var(--cream-dim)}
.reset-pop .rr{display:flex;gap:10px}
.reset-pop button{font-size:13px;font-weight:600;padding:10px 16px;border-radius:9px;min-height:44px;border:1px solid var(--line-strong);background:var(--bg-card);color:var(--cream-dim)}
.reset-pop button.confirm{background:#8a3b2e;border-color:#8a3b2e;color:#fff}

/* stats row */
.tasbih-stats{margin-top:22px;display:flex;gap:34px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.stat b{font-family:var(--serif);font-size:30px;color:var(--emerald);font-weight:500;display:block;line-height:1}
.stat span{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-muted)}
.stat-note{margin-top:14px;font-size:12.5px;color:var(--cream-muted)}
.stat-note .today-breakdown{margin-top:6px;font-size:12.5px;color:var(--cream-muted);display:none}
.stat-note .today-breakdown.show{display:block}
.stat-note .today-breakdown li{list-style:none;display:flex;justify-content:space-between;gap:16px;max-width:380px;padding:3px 0;border-bottom:1px dashed var(--line)}

/* ---- content sections ---- */
.tasbih-section{margin:64px 0 0}
.tasbih-section h2{font-family:var(--serif);font-size:clamp(25px,3vw,34px);font-weight:500;line-height:1.15;color:var(--emerald);margin:0 0 16px;letter-spacing:-.01em}
.tasbih-section p{font-size:16px;line-height:1.7;color:var(--cream-dim);max-width:68ch;margin:0 0 14px}
.tasbih-section p:last-child{margin-bottom:0}
.tasbih-section a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(161,120,47,.35);text-underline-offset:3px}
.tasbih-section a:hover{color:var(--gold-soft)}
.tasbih-section .ar-inline{font-family:var(--arabic);font-size:1.4em;line-height:1.9;direction:rtl;unicode-bidi:isolate}
.src-note{font-size:13px;color:var(--cream-muted);letter-spacing:.02em}

/* ---- FAQ ---- */
.tasbih-faq .faq-item{border-top:1px solid var(--line);padding:20px 0}
.tasbih-faq .faq-item:last-child{border-bottom:1px solid var(--line)}
.tasbih-faq .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:500;color:var(--cream);padding:0}
.tasbih-faq .faq-q:hover{color:var(--gold-soft)}
.tasbih-faq .faq-q-icon{flex-shrink:0;width:22px;height:22px;display:grid;place-items:center;color:var(--gold);transition:transform .3s ease;font-size:18px;font-family:var(--sans)}
.tasbih-faq .faq-item[data-open="true"] .faq-q-icon{transform:rotate(45deg)}
.tasbih-faq .faq-a{margin-top:12px;font-size:15px;line-height:1.65;color:var(--cream-dim);max-width:64ch;display:none}
.tasbih-faq .faq-item[data-open="true"] .faq-a{display:block}

/* ---- app CTA ---- */
.app-cta{margin:64px 0 0;background:var(--bg-elevated);border:1px solid var(--line-strong);border-radius:18px;padding:36px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.app-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.8vw,32px);line-height:1.15;color:var(--emerald);margin:0 0 10px;letter-spacing:-.01em}
.app-cta p{margin:0;font-size:15px;line-height:1.6;color:var(--cream-dim);max-width:52ch}
.app-cta .cta-actions{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:720px){
  .lib-wrap{padding-left:20px;padding-right:20px}
  .tasbih-tool{padding:20px 16px 18px}
  .tasbih-hero{padding-top:32px}
  .tasbih-stats{gap:24px}
  .app-cta{padding:28px 20px}
}