/* /learn-quran, the word-by-word trainer for any surah (ar4). Built on the ak.css tokens and the lapis panel. */
.lq .tool_main{gap:.75rem}
/* current surah and the picker */
.lq_now{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;width:100%;min-height:3.5rem;padding:.6rem .9rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);text-align:left;cursor:pointer;color:var(--text)}
.lq_now_t{font:600 1.125rem/1.25 var(--font);grid-column:1}
.lq_now_s{font-size:.875rem;color:var(--muted);grid-column:1}
.lq_now_btn{grid-column:2;grid-row:1 / span 2;padding:.55rem .9rem;border-radius:999px;background:var(--lapis);color:#fff;font:500 .875rem/1 var(--font)}
.lq_now[aria-expanded="true"] .lq_now_btn{background:var(--gold-soft);color:var(--lapis-deep)}
.lq_chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lq_chip{flex:none;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .9rem;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-size:.9375rem;text-decoration:none;white-space:nowrap}
.lq_chip:hover{box-shadow:inset 0 0 0 1px var(--lapis)}
.lq_chip[aria-current="true"]{background:var(--lapis);color:#fff;box-shadow:none}
.lq_pick{display:grid;gap:.6rem;padding:.9rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.lq_pick[hidden]{display:none}
.lq_pick .tool_label{margin:0}
.lq_search input{width:100%;min-height:3rem;padding:.6rem .9rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);font:400 1rem var(--font);color:var(--text)}
.lq_list{list-style:none;margin:0;padding:0;max-height:min(24rem,55vh);overflow-y:auto;border-top:1px solid var(--line)}
.lq_list li[hidden]{display:none}
.lq_item{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;align-items:center;gap:.6rem;min-height:3.25rem;padding:.35rem .25rem;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.lq_item:hover{background:var(--lapis-tint)}
.lq_no{font:600 .875rem var(--font);color:var(--lapis);text-align:center}
.lq_nm b{display:block;font-weight:600}
.lq_nm small{display:block;font-size:.8125rem;color:var(--muted)}
.lq_ar{font:400 1.375rem/1.6 var(--arabic);color:var(--lapis-deep)}
.lq_none{margin:0;color:var(--muted);font-size:.9375rem}
/* the card */
.lq_card{padding:clamp(1rem,3vw,1.75rem)}
.lq_card > *{position:relative}
.lq_head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem;font-size:.875rem;color:var(--gold-soft)}
.lq_words{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:.5rem;margin:1rem 0 .75rem;min-height:8rem}
.lq_w{display:grid;justify-items:center;align-content:start;gap:.1rem;min-width:2.75rem;min-height:2.75rem;max-width:11rem;padding:.35rem .55rem .5rem;border:0;border-radius:var(--r2);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(233,211,160,.25);color:#fff;cursor:pointer;transition:background-color .15s,color .15s;direction:rtl}
.lq_w:hover{background:rgba(255,255,255,.12)}
.lq_wa{font:400 2.125rem/1.75 var(--arabic)}
.lq_wt{direction:ltr;font:italic 400 .9375rem/1.3 var(--translit);color:var(--gold-soft)}
.lq_wm{direction:ltr;font-size:.75rem;line-height:1.3;color:rgba(255,255,255,.8);text-align:center}
.lq_w.is-on{background:#fff;box-shadow:none;color:var(--lapis-deep)}
.lq_w.is-on .lq_wt{color:var(--lapis)}
.lq_w.is-on .lq_wm{color:var(--muted)}
.lq_w.is-hid{background:transparent;box-shadow:none;outline:1px dashed rgba(233,211,160,.55);outline-offset:-1px}
.lq_w.is-hid > span{visibility:hidden}
.lq_w.is-hid.is-on{outline-color:#fff;background:rgba(255,255,255,.15)}
.lq_w.is-peek{outline:1px dashed var(--gold-soft);outline-offset:-1px}
.lq_end{display:inline-grid;place-items:center;align-self:center;width:44px;height:44px}
.lq_end svg{width:44px;height:44px}
.lq_en{margin:0;padding-top:.75rem;border-top:1px solid rgba(233,211,160,.3);color:rgba(255,255,255,.9);text-align:center;line-height:1.55}
.lq_en:empty{display:none}
.lq_msg{margin:.5rem 0 0;font-size:.875rem;color:#fff;text-align:center}
.lq_msg:empty{display:none}
.lq_loading{color:#fff;text-align:center;align-self:center}
.lq.hide-tr .lq_wt,.lq.hide-mn .lq_wm,.lq.hide-en .lq_en{display:none}
/* the controls stay under the thumb */
.lq_ctrl{position:sticky;bottom:0;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;gap:.5rem;align-items:center;padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.lq_ctrl .btn{min-height:2.75rem}
.lq_jump select{width:100%;min-height:2.75rem;font-size:1rem}
.lq_play{min-width:6.5rem;gap:.4rem}
.lq_play svg{width:.875rem;height:.875rem}
.lq_play[data-state="playing"] svg{display:none}
@media (max-width:600px){
  .lq_ctrl{grid-template-columns:3.25rem minmax(0,1fr) 3.25rem 3.25rem;grid-template-areas:"sel sel rate rep" "prev play play next"}
  .lq_jump{grid-area:sel}.lq_cyc[data-lq-cyc="rate"]{grid-area:rate}.lq_cyc[data-lq-cyc="rep"]{grid-area:rep}.lq_prev{grid-area:prev}.lq_play{grid-area:play}.lq_next{grid-area:next}
  .lq_wa{font-size:1.875rem}
  .lq_words{gap:.375rem}
  .lq_w{padding:.3rem .45rem .45rem}
}
@media (min-width:992px){.lq_wa{font-size:2.5rem}.lq_words.is-long .lq_wa{font-size:2.125rem}}
@media (max-width:600px){.lq_ctrl .lq_t{display:none}.lq_prev,.lq_next{min-width:3.25rem;font-size:1.5rem;padding:0}.lq_play{min-width:0}}
.lq_cyc{min-width:3.25rem;padding:0 .4rem;font-variant-numeric:tabular-nums}
.lq_memo{min-height:2.75rem;padding:0 .9rem;border:1px solid rgba(233,211,160,.55);border-radius:999px;background:transparent;color:#fff;font:500 .875rem/1 var(--font);cursor:pointer}
.lq_memo:hover{background:rgba(255,255,255,.1)}
.lq_head{align-items:center}
.lq_mode{margin:.5rem 0 0;font-size:.8125rem;color:var(--gold-soft);text-align:center}
.lq_mode[hidden]{display:none}