/* styles/waqf-drill.css — the waqf (stopping) drill inside Recite on the Mushaf (modules/tools/waqf-drill.js):
   its chip in Recite's count row, the little menu under it, the one-line note, the signed word flashing on the page,
   and the "Waqf signs" block on the session sheet. Recite's --al-* tokens; every tappable is 44px or more, every word 16px or more (the floor).
   SAFE TO DELETE: with waqf-drill.js. */

#tt-panel .wq-chip { min-height:32px; padding:6px 12px; gap:6px; align-items:center; border-radius:999px; background:var(--al-card2); font:600 16px/1.2 var(--f-ui); color:var(--al-ink2); position:relative; }
#tt-panel .wq-chip::after { content:""; position:absolute; inset:-6px 0; }            /* a 44px tap area around the 32px chip */
#tt-panel .wq-chip b { font:700 16px/1 var(--f-ui); color:var(--al-ink); }
#tt-panel .wq-dot { width:8px; height:8px; border-radius:50%; background:var(--al-mut); }
#tt-panel .wq-dot.on { background:var(--data-ok); }

#tt-panel .wq-menu { display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:16px; background:var(--al-card2); }
#tt-panel .wq-menu[hidden] { display:none; }
#tt-panel .wq-menu > button { display:flex; align-items:center; gap:12px; min-height:52px; padding:6px 10px; border-radius:12px; text-align:left; }
#tt-panel .wq-menu button:disabled { opacity:.45; cursor:default; }
#tt-panel .wq-t { flex:1; min-width:0; display:flex; flex-direction:column; }
#tt-panel .wq-t b { font:600 16px/1.3 var(--f-ui); color:var(--al-ink); }
#tt-panel .wq-t span, #tt-panel .wq-lvl span { font:500 16px/1.3 var(--f-ui); color:var(--al-mut); }
#tt-panel .wq-sw { flex:none; width:44px; height:26px; border-radius:999px; background:var(--al-line); position:relative; transition:background var(--al-d2,.2s) ease; }
#tt-panel .wq-sw::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--al-surf); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform var(--al-d2,.2s) ease; }
#tt-panel .wq-sw.on { background:var(--data-ok); }
#tt-panel .wq-sw.on::after { transform:translateX(18px); }
#tt-panel .wq-lvl { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#tt-panel .wq-lvl button { display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:56px; padding:6px 10px; border-radius:12px; background:var(--al-surf); box-shadow:inset 0 0 0 1px var(--al-line); text-align:left; }
#tt-panel .wq-lvl button b { font:600 16px/1.25 var(--f-ui); color:var(--al-ink); }
#tt-panel .wq-lvl [lang=ar] { font:600 16px/1.3 var(--f-quran); color:var(--al-ink2); text-align:left; }
#tt-panel .wq-lvl button[aria-checked="true"] { box-shadow:inset 0 0 0 2px var(--al-acc-txt); }

#tt-panel .wq-note { padding:8px 12px; border-radius:12px; font:600 16px/1.45 var(--f-ui); color:var(--al-ink); background:var(--al-card2); }
#tt-panel .wq-note[hidden] { display:none; }
#tt-panel .wq-note.bad { background:color-mix(in srgb,var(--data-bad) 13%,var(--al-card)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--data-bad) 40%,transparent); }
#tt-panel .wq-note.ok { background:color-mix(in srgb,var(--data-ok) 12%,var(--al-card)); }
#tt-panel .wq-note.hint { color:var(--al-ink2); font-weight:500; }

.al-lit[data-lit="wq-flash"] { background:color-mix(in srgb,var(--data-bad) 38%,transparent); animation:wqflash .8s ease-in-out 3; }
@keyframes wqflash { 50% { opacity:.2; } }
@media (prefers-reduced-motion:reduce) { .al-lit[data-lit="wq-flash"] { animation:none; } }

#tt-panel .wq-sum { display:flex; flex-direction:column; gap:6px; margin-top:4px; padding:12px; border-radius:16px; background:var(--al-card2); }
#tt-panel .wq-h { font:700 16px/1.3 var(--f-ui); }
#tt-panel .wq-n { display:flex; flex-wrap:wrap; gap:6px 14px; font:500 16px/1.3 var(--f-ui); color:var(--al-ink2); }
#tt-panel .wq-n b { font:700 16px/1 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--al-ink); }
#tt-panel .wq-n .ok b { color:var(--data-ok); } #tt-panel .wq-n .fx b { color:var(--al-acc-txt); } #tt-panel .wq-n .bad b { color:var(--data-bad); }
#tt-panel .wq-miss { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; min-height:52px; padding:6px 10px; border-radius:12px; background:var(--al-surf); text-align:left; }
#tt-panel .wq-sg { grid-row:1 / 3; font:700 18px/1 var(--f-quran); color:var(--data-bad); min-width:28px; text-align:center; }
#tt-panel .wq-w { font:20px/1.5 var(--f-quran); color:var(--al-ink); text-align:left; }
#tt-panel .wq-r { font:500 16px/1.3 var(--f-ui); color:var(--al-mut); }