/* Learning tools, Round 4: Islamic games, hifz test, rakats chart, tajweed lessons. Uses the ak.css tokens. */

/* ---------------------------------------------------------------- Shared ---- */
.lr_bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;margin-block-end:.75rem;font-size:.9375rem;color:var(--muted)}
.lr_score{font-weight:500;color:var(--lapis);font-variant-numeric:tabular-nums}
.lr_stage{min-height:20rem;padding:clamp(1rem,3.5vw,1.75rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:5.5rem}
.lr_intro,.lr_end,.lr_q,.lr_hzcard{display:grid;gap:1rem}
.lr_big{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.4;letter-spacing:-.02em}
.lr_big b{color:var(--lapis);font-weight:600}
.lr_new{color:var(--gold-ink);font-weight:500}
.lr_meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1rem;font-size:.8125rem;color:var(--muted)}
.lr_prog{height:4px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.lr_prog i{display:block;height:100%;background:var(--lapis);transition:width .3s var(--ease-out)}
.lr_list{display:grid;gap:.5rem;padding:0;list-style:none}
.lr_list li{display:grid;gap:.15rem;padding:.7rem .9rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;line-height:1.5}
.lr_list li span{color:var(--muted)}
.lr_list li.is-miss{box-shadow:inset 3px 0 0 var(--gold),inset 0 0 0 1px var(--line)}
.lr_list a{color:var(--lapis)}
.lr_list b[lang="ar"],.lr_letters b{font-family:var(--arabic);font-size:1.4rem;font-weight:400;line-height:1.2}
.lr_letters{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.lr_names{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.lr_stepsum{list-style:decimal inside}
.lr_stepsum li{display:list-item}
.lr_stepsum li span{display:block;margin-block-start:.2rem}
.lr_l,.lr_td_ar{font-family:var(--arabic);font-size:1.3em;line-height:1.2}
.lr_td_ar{font-size:1.5rem}
.lr_samples{display:grid;gap:.9rem;padding-inline-start:1.25rem;list-style:decimal}
.lr_ans{margin-block-start:.3rem}
.lr_ans summary{cursor:pointer;color:var(--lapis);font-size:.9375rem}
.lr_ans p{margin-block-start:.35rem}
.lr_keys{margin-block-start:.6rem}
.lr_keys kbd{padding:.05rem .35rem;border-radius:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:.8125rem}
@media (hover:none){.lr_keys{display:none}}
.lr button:focus-visible{outline:none;box-shadow:var(--ring),inset 0 0 0 1px var(--lapis)}

/* ---------------------------------------------------------------- Memory match ---- */
.lr_mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.4rem,1.5vw,.75rem)}
.lr_mem[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.lr_card{position:relative;aspect-ratio:3/4;min-height:4.5rem;padding:0;border:0;border-radius:var(--r2);background:none;cursor:pointer;font:inherit;color:var(--text)}
.lr_back,.lr_face{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.15rem;border-radius:var(--r2);transition:opacity .2s,transform .25s var(--ease-out)}
.lr_back{background:var(--lapis);box-shadow:inset 0 0 0 3px var(--lapis),inset 0 0 0 4px var(--gold-soft)}
.lr_back::before{content:"";width:42%;aspect-ratio:1;background:var(--gold-soft);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;opacity:.9}
.lr_face{opacity:0;transform:scale(.96);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:.25rem;text-align:center}
.lr_face b{font-family:var(--arabic);font-weight:400;font-size:clamp(2rem,1.4rem + 3vw,3.25rem);line-height:1;color:var(--lapis-deep)}
.lr_face span{font-weight:600;font-size:clamp(.8125rem,.7rem + .5vw,1rem);line-height:1.15}
.lr_face small{font-size:.75rem;color:var(--muted)}
.lr_card.is-up .lr_back{opacity:0}
.lr_card.is-up .lr_face{opacity:1;transform:none}
.lr_card.is-done .lr_face{background:var(--gold-tint);box-shadow:inset 0 0 0 2px var(--gold)}
.lr_card.is-done{cursor:default}
@media (hover:hover){.lr_card:not(.is-up):hover .lr_back{box-shadow:inset 0 0 0 3px var(--lapis),inset 0 0 0 4px var(--gold)}}

/* ---------------------------------------------------------------- Steps in order ---- */
.lr_ord{display:grid;gap:1.25rem}
@media (min-width:880px){.lr_ord{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.lr_slots{display:grid;gap:.4rem;padding:0;margin-block-start:.4rem;list-style:none}
.lr_slot{display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:center;gap:.5rem;min-height:2.9rem;padding:.25rem .35rem .25rem .25rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.lr_slot.is-empty{background:none;box-shadow:inset 0 0 0 1px var(--line);border:0;outline:1px dashed var(--line);outline-offset:-1px}
.lr_slot.is-right{background:var(--ok-tint);box-shadow:inset 0 0 0 2px var(--ok)}
.lr_n{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:var(--r1);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.8125rem;font-weight:600;color:var(--gold-ink)}
.lr_slot.is-right .lr_n{background:var(--ok);color:#fff;box-shadow:none}
.lr_pool{display:flex;flex-wrap:wrap;gap:.45rem;margin-block-start:.4rem}
.lr_step{min-height:2.6rem;padding:.5rem .8rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:.9375rem;line-height:1.3;text-align:left;color:var(--text);cursor:pointer}
.lr_pool .lr_step{background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.25)}
.lr_slot .lr_step{width:100%;background:none;box-shadow:none;padding-inline:.25rem}
.lr_slot.is-right .lr_step{cursor:default;font-weight:500}
@media (hover:hover){.lr_pool .lr_step:hover{box-shadow:inset 0 0 0 1px var(--lapis)}}
.lr_ordbar{margin-block-start:1rem}

/* ---------------------------------------------------------------- Pairs (99 Names) ---- */
.lr_pairs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;margin-block-start:.5rem}
.lr_col{display:grid;gap:.5rem;align-content:start}
.lr_pair_b{display:grid;gap:.1rem;min-height:3.5rem;padding:.55rem .75rem;border:0;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:.9375rem;line-height:1.3;text-align:left;color:var(--text);cursor:pointer;transition:background-color .15s,box-shadow .15s}
.lr_pair_b b{font-family:var(--arabic);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--lapis-deep);text-align:right}
.lr_pair_b span{overflow-wrap:break-word;hyphens:auto}
.lr_col[data-col="n"] .lr_pair_b span{font-size:.875rem;color:var(--muted)}
.lr_pair_b[aria-pressed="true"]{background:var(--lapis-tint);box-shadow:inset 0 0 0 2px var(--lapis)}
.lr_pair_b.is-done{background:var(--gold-tint);box-shadow:inset 0 0 0 1px var(--gold);cursor:default;opacity:.75}
.lr_pair_b.is-wrong{background:#FDECEA;box-shadow:inset 0 0 0 2px var(--bad)}

/* ---------------------------------------------------------------- Quiz ---- */
.lr_qt{font-size:clamp(1.2rem,1.05rem + .8vw,1.5rem);font-weight:500;line-height:1.35;letter-spacing:-.02em}
.lr_opts{display:grid;gap:.6rem}
@media (min-width:640px){.lr_opts{grid-template-columns:1fr 1fr}}
.lr_opt{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.7rem 1rem;border:0;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:1rem;line-height:1.35;text-align:left;color:var(--text);cursor:pointer}
.lr_key{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:var(--r1);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.8125rem;color:var(--muted)}
.lr_opt:disabled{cursor:default}
.lr_opt:disabled:not(.is-right):not(.is-wrong){opacity:.6}
.lr_opt.is-right{background:var(--ok-tint);box-shadow:inset 0 0 0 2px var(--ok)}
.lr_opt.is-right .lr_key{background:var(--ok);color:#fff;box-shadow:none}
.lr_opt.is-wrong{background:#FDECEA;box-shadow:inset 0 0 0 2px var(--bad)}
.lr_opt.is-wrong .lr_key{background:var(--bad);color:#fff;box-shadow:none}
.lr_fb{display:grid;gap:.6rem}
.lr_fb:empty{display:none}
.lr_verdict{font-weight:600}
.lr_verdict.is-ok{color:var(--ok)}
.lr_verdict.is-no{color:var(--bad)}
.lr_x{color:var(--muted);line-height:1.55}
.lr_x a,.lr_end a{color:var(--lapis)}

/* ---------------------------------------------------------------- Hub ---- */
.lr_hub{margin-block-start:0}

/* ---------------------------------------------------------------- Hifz test ---- */
.lr_pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem}
.lr_hzsum dt{max-width:14rem}
.lr_hz_ar{font-family:var(--arabic);font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);line-height:2.1;color:var(--text);text-align:right;overflow-wrap:anywhere}
.lr_hz_given{color:var(--lapis);background:var(--lapis-tint);border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding-inline:.15em}
.lr_hz_more{color:var(--gold);letter-spacing:.1em}
.lr_hz_cue{display:grid;gap:.2rem;padding:.6rem .8rem;border-radius:var(--r2);background:var(--surface)}
.lr_hz_cue span[lang]{font-family:var(--arabic);font-size:1.35rem;line-height:1.8;text-align:right;color:var(--muted)}
.lr_hz_ref{font-family:var(--font);font-size:.8125rem;color:var(--lapis);white-space:nowrap}
.lr_hz_how{flex-basis:100%}
.lr_mk{min-width:6.5rem}
.lr_mk.is-ok{background:var(--ok-tint);box-shadow:inset 0 0 0 1px var(--ok);color:var(--ok)}
.lr_mk.is-mid{background:var(--gold-tint);box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold-ink)}
.lr_mk.is-no{background:#FDECEA;box-shadow:inset 0 0 0 1px var(--bad);color:var(--bad)}
.lr_hzweak span[lang]{font-family:var(--arabic);font-size:1.2rem;line-height:1.7;text-align:right}

/* ---------------------------------------------------------------- Rakats chart ---- */
.rk{display:grid;gap:1rem}
.rk_top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.rk_legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:0;list-style:none;font-size:.875rem;color:var(--muted)}
.rk_legend li{display:flex;align-items:center;gap:.4rem}
.rk_legend i,.rk_dots i{display:inline-block;width:.85rem;height:.85rem;border-radius:3px}
.rk i.is-f{background:var(--lapis)}
.rk i.is-w{background:var(--gold)}
.rk i.is-wt{background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px var(--gold)}
.rk i.is-sm{background:#6C86C9}
.rk i.is-sg{background:var(--lapis-tint);box-shadow:inset 0 0 0 1.5px #6C86C9}
.rk i.is-n{background:var(--page);box-shadow:inset 0 0 0 1.5px var(--faint)}
.rk_table table{min-width:0}
.rk_table th[scope="row"]{white-space:nowrap;font-weight:600;vertical-align:top}
.rk_row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem .35rem}
.rk_seg{display:grid;gap:.25rem;max-width:12rem}
.rk_dots{display:flex;flex-wrap:wrap;gap:3px;max-width:10.5rem}
.rk_seg small{font-size:.75rem;line-height:1.3;color:var(--muted)}
.rk_seg small b{color:var(--text)}
.rk_any{width:2.2rem!important;border-radius:999px!important;background-image:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.7) 4px 6px)}
.rk_arrow{align-self:center;padding-block-end:1.1rem;color:var(--faint)}
.rk_tot{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rk_sum dt{max-width:14rem}
.rk_foot{max-width:60rem}
.rk_qa{columns:2 18rem}
.rk_qa li{break-inside:avoid}
@media (max-width:599px){.rk_row{flex-direction:column;gap:.6rem}.rk_arrow{display:none}.rk_seg{max-width:none}}
@media (max-width:479px){.rk_table th,.rk_table td{padding:.6rem .45rem}.rk_table th[scope="row"]{white-space:normal}}

@media print{
  body:has([data-lr-rak]) .section:not(:has([data-lr-rak])),body:has([data-lr-rak]) .page_head .lede,body:has([data-lr-rak]) .page_head .eyebrow,
  body:has([data-lr-rak]) .header,body:has([data-lr-rak]) .footer,.rk_print,.rk_top .tool_ab{display:none!important}
  .rk_school[hidden]{display:none!important}
  body:has([data-lr-rak]) .page_head{padding-block-start:0}
  body:has([data-lr-rak]) .page_head > .wrap::before{display:none}
  .rk_table tr{break-inside:avoid}
  .rk_dots i,.rk_legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rk_table th,.rk_table td{padding:.3rem .45rem;font-size:9.5pt}
}

/* ---------------------------------------------------------------- Tajweed lessons ---- */
.lr_tj .tj_group + .tj_group{margin-block-start:2rem}
/* Phone audit (31 Oct): 44px taps, and in the order games the steps to place come first on a narrow screen,
   so the next tap is in view instead of below ten empty slots. */
.lr_step{min-height:2.75rem}
[data-lr-level] button{height:2.75rem}
@media (max-width:879px){
  .lr_ord > div:last-child{order:-1}
  .lr_slot.is-empty{min-height:2.4rem}
  .lr_pool{position:relative}
}
.lr_card,.lr_step,.lr_pair_b,.lr_opt,[data-lr-level] button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lr_tj .tj_play{width:2.75rem;height:2.75rem}
.lr_tj .tj_play svg{width:.95rem;height:.95rem}