/* Ustad = one mic (modules/tutor.js): the listening ring on the green mic, its small tooltip, the soft highlight of the
   ayah being recited, the mistake marks on the mushaf words and the popover of a mark. Scoped with tt-. */

/* ---- the mic while listening: a gentle gold ring that breathes and follows the voice */
.dk-mic.tt-on { position: relative; overflow: visible; }
.dk-mic.tt-on::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--gold, #d6a828); box-shadow: 0 0 10px rgba(214, 168, 40, .35);
  transform: scale(calc(1 + var(--lv, 0) * .22)); transition: transform .12s linear;
  animation: ttBreath 1.8s ease-in-out infinite;
}
.dk-mic.tt-busy::after { animation-duration: .8s; }
@keyframes ttBreath { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.tt-tip {
  position: fixed; z-index: 80; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  padding: 3px 11px; border-radius: 999px; font-size: 12.5px; line-height: 1.7;
  background: var(--card, #17271f); color: var(--text, #f1ead2); border: 1px solid rgba(214, 168, 40, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.tt-tip.below { transform: translate(-50%, 0); }
.tt-tip[hidden] { display: none; }
body.light .tt-tip { background: #fffaf0; color: #2b2615; box-shadow: 0 4px 14px rgba(60, 45, 10, .18); }

/* ---- the ayah being recited: a very soft highlight (the player keeps its stronger one) */
body.tt-on #mushafHost .qm-w.qm-hl, body.tt-on #mushafHost .qm-ae.qm-hl { background: rgba(214, 168, 40, .13); box-shadow: none; }
body.tt-on #mushafHost .qm-dark .qm-w.qm-hl, body.tt-on #mushafHost .qm-dark .qm-ae.qm-hl { background: rgba(241, 217, 140, .10); }

/* ---- mistake marks: thin red line under the word + a tiny dot above it; amber = helped (luqma) */
#mushafHost .qm-w.tt-mk { --tt-mk: #c0392b; --tt-o: .62; cursor: pointer; }
#mushafHost .qm-dark .qm-w.tt-mk { --tt-mk: #ff8f80; }
#mushafHost .qm-w.tt-mk-2 { --tt-o: .82; }
#mushafHost .qm-w.tt-mk-3 { --tt-o: 1; }
#mushafHost .qm-w.tt-mk-h { --tt-mk: #c98a12; --tt-o: .66; }
#mushafHost .qm-dark .qm-w.tt-mk-h { --tt-mk: #f2c35a; }
#mushafHost .qm-w.tt-mk::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: .06em; height: .05em; min-height: 1.5px;
  border-radius: 1px; background: var(--tt-mk); opacity: var(--tt-o); pointer-events: none;
}
#mushafHost .qm-w.tt-mk-3::after { height: .075em; min-height: 2px; }
#mushafHost .qm-w.tt-mk::before {
  content: ''; position: absolute; top: .02em; left: 50%; width: .12em; height: .12em; min-width: 3px; min-height: 3px;
  transform: translateX(-50%); border-radius: 50%; background: var(--tt-mk); opacity: var(--tt-o); pointer-events: none;
}
#mushafHost .qm-w.tt-mk:hover::after { opacity: 1; }

/* ---- popover of a mark */
.tt-pop {
  position: fixed; z-index: 90; width: 250px; max-width: calc(100vw - 24px); padding: 10px 12px 11px; direction: rtl;
  background: var(--card, #17271f); color: var(--text, #f1ead2); border: 1px solid rgba(214, 168, 40, .35);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13px; line-height: 1.8;
}
body.light .tt-pop { background: #fffdf6; color: #2b2615; box-shadow: 0 10px 30px rgba(60, 45, 10, .2); }
.tt-pop-w { font-size: 30px; line-height: 1.6; text-align: center; padding-bottom: 2px; }
.tt-pop-k { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.tt-pop-k i { width: 8px; height: 8px; border-radius: 50%; background: #d9534f; flex: none; }
.tt-pop.h .tt-pop-k i { background: #d99a1e; }
.tt-pop-h b { font-size: 17px; font-weight: 400; }
.tt-pop-h span, .tt-pop-m { color: var(--muted, #a9bcb1); }
.tt-pop-m { display: flex; gap: 6px; font-size: 12px; }
.tt-pop-b { display: flex; gap: 6px; margin-top: 8px; }
.tt-pop-b button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; font: inherit; font-size: 12.5px;
  border-radius: 8px; cursor: pointer; background: var(--btn, #24382d); color: inherit; border: 1px solid rgba(214, 168, 40, .25);
}
.tt-pop-b button:hover { background: var(--btnh, #2e4739); }
body.light .tt-pop-b button { background: #f3ecd8; }
body.light .tt-pop-b button:hover { background: #ebe1c4; }

@media (prefers-reduced-motion: reduce) { .dk-mic.tt-on::after { animation: none; opacity: .85; } }