/* Quran tools (qt): search, ayah of the day, radio, tajweed. Loaded only on those pages. Builds on ak.css tokens. */

/* ---------- shared */
.qt_chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.6rem}
.qt_chip{display:inline-flex;align-items:center;min-height:2rem;padding:.3rem .75rem;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;line-height:1.3;transition:background-color .15s,box-shadow .15s}
.qt_chip:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45);background:var(--lapis-tint)}

/* ---------- search */
.qt_form .tools_search input{height:3.25rem;font-size:1.0625rem}
.qt_tabs{display:flex;flex-wrap:wrap;gap:.4rem}
.qt_tabs button{display:inline-flex;gap:.4rem;align-items:center;min-height:2rem;padding:.25rem .75rem;border:0;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;cursor:pointer}
.qt_tabs button span{font:400 .75rem var(--mono);color:var(--muted)}
.qt_tabs button[aria-pressed="true"]{background:var(--text);color:var(--page);box-shadow:none}
.qt_tabs button[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.qt_results{display:grid;gap:.6rem}
.qt_results:empty{display:none}
.qt_r{display:grid;gap:.5rem;padding:clamp(1rem,3vw,1.5rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.qt_r.is-pin{box-shadow:inset 0 0 0 1px rgba(201,154,46,.55)}
.qt_rh{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.qt_ref{font:500 .875rem var(--mono);color:var(--lapis);text-decoration:underline;text-decoration-color:rgba(29,58,138,.3);text-underline-offset:3px}
.qt_ref:hover{text-decoration-color:var(--lapis)}
.qt_where{font:400 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.qr_play.is-on{background:var(--lapis);color:#fff}
.qt_ar{direction:rtl;text-align:right;font:400 clamp(1.5rem,1.15rem + 1.2vw,2rem)/2.1 var(--arabic);overflow-wrap:anywhere}
.qt_wait{font:400 .8125rem var(--font);color:var(--faint)}
.qt_tl{font:italic 400 1.0625rem/1.55 var(--translit);color:var(--lapis)}
.qt_en{line-height:1.65;color:#2B2B2B}
.qt_en mark{background:var(--gold-tint);color:inherit;box-shadow:inset 0 -2px 0 rgba(201,154,46,.6);border-radius:2px}
.hide-ar .qt_ar,.hide-tl .qt_tl{display:none}
.qt_sc{display:grid;grid-template-columns:2.25rem 1fr auto;gap:.75rem;align-items:center;padding:.85rem 1rem;border-radius:var(--r2);background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.25)}
.qt_sc b{display:block;font-weight:500}
.qt_sc small{font-size:.8125rem;color:var(--muted)}
.qt_sc .qr_n{background:var(--page)}
.qt_topics[hidden]{display:none}
.qt_try{display:grid;gap:.35rem}
.qt_try a{display:grid;gap:.1rem;padding:.55rem .75rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.qt_try a:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45)}
.qt_try b{font:500 .9375rem var(--font)}
.qt_try small{font-size:.75rem;color:var(--muted)}

/* ---------- ayah of the day */
.qt_day_in{position:relative;display:grid;gap:1.1rem;padding:clamp(1.5rem,4vw,2.5rem)}
.qt_day_top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem}
.qt_day .tool_label{margin:0;color:rgba(255,255,255,.75)}
.qt_day_ref{font:500 .875rem var(--mono);color:var(--gold-soft);text-decoration:underline;text-decoration-color:rgba(233,211,160,.4);text-underline-offset:3px}
.qt_day_ar{direction:rtl;text-align:right;font:400 clamp(1.75rem,1.3rem + 1.8vw,2.625rem)/2.1 var(--arabic);color:#fff;overflow-wrap:anywhere}
.qt_day_ar .rc_end{color:var(--gold-soft)}
.qt_day_tl{font:italic 400 1.0625rem/1.55 var(--translit);color:var(--gold-soft)}
.qt_day_en{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:#fff}
.qt_day_btns{display:flex;flex-wrap:wrap;gap:.5rem}
.btn.qt_onlapis{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn.qt_onlapis:hover{background:rgba(255,255,255,.12);border-color:#fff}
.qt_day_msg{min-height:1.2em;font-size:.875rem;color:var(--gold-soft)}
.qt_daynav{display:flex;flex-wrap:wrap;gap:.5rem}
.qt_past{display:grid;gap:.35rem}
.qt_past a{display:grid;gap:.1rem;padding:.6rem .75rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.qt_past a:hover,.qt_past a[aria-current]{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45)}
.qt_past small{font:400 .6875rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.qt_past b{font-weight:500;font-size:.9375rem}
.qt_past span{font-size:.8125rem;color:var(--muted);line-height:1.4}
.qt_all summary{cursor:pointer;font-weight:500}
.prose .qt_refs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;margin-block-start:.75rem}
.qt_refs a{display:inline-block;padding:.15rem .5rem;border-radius:var(--r1);font:400 .8125rem var(--mono);box-shadow:inset 0 0 0 1px var(--line);color:var(--lapis)}

/* ---------- radio */
.qt_radio_in{position:relative;display:grid;gap:.6rem;justify-items:center;padding:clamp(1.75rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem);text-align:center}
.qt_radio_top{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%}
.qt_radio .tool_label{margin:0;color:rgba(255,255,255,.75)}
.qt_live{display:inline-flex;align-items:center;gap:.45rem;font:400 .6875rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.qt_live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.35)}
.qt_live.is-on{color:var(--gold-soft)}
.qt_live.is-on::before{background:var(--gold);box-shadow:0 0 0 3px rgba(201,154,46,.3)}
@media (prefers-reduced-motion:no-preference){.qt_live.is-on::before{animation:qt-pulse 1.6s ease-in-out infinite}}
@keyframes qt-pulse{50%{box-shadow:0 0 0 6px rgba(201,154,46,0)}}
.qt_radio_ar{margin-block-start:.75rem;font:400 clamp(2.25rem,1.6rem + 2.4vw,3.25rem)/1.5 var(--arabic);color:var(--gold-soft)}
.qt_radio_title{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:500;letter-spacing:-.03em;color:#fff}
.qt_radio_sub{color:rgba(255,255,255,.75);font-size:.9375rem}
.qt_prog{width:min(100%,24rem);height:4px;margin-block-start:.75rem;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.qt_prog span{display:block;height:100%;width:0;background:var(--gold);transition:width .4s var(--ease)}
.qt_radio_pos{font:400 .8125rem var(--mono);color:rgba(255,255,255,.8)}
.qt_radio_ctrl{display:flex;align-items:center;gap:1.25rem;margin-block-start:.5rem}
.icon-btn.qt_rbtn{width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.icon-btn.qt_rbtn:hover{background:rgba(255,255,255,.2)}
.icon-btn.qt_rbtn svg{width:1.25rem;height:1.25rem}
.qt_rplay{display:grid;place-items:center;width:4.5rem;height:4.5rem;border:0;border-radius:50%;background:var(--gold);color:var(--lapis-deep);cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .15s var(--ease)}
.qt_rplay:hover{transform:scale(1.04)}
.qt_rplay svg{width:1.75rem;height:1.75rem}
.qt_rplay .qt_i_pause,.qt_rplay.is-on .qt_i_play{display:none}
.qt_rplay.is-on .qt_i_pause{display:block}
.qt_radio_msg{min-height:1.2em;font-size:.875rem;color:var(--gold-soft)}
.qt_radio_text{display:grid;gap:.6rem;width:100%;margin-block-start:.5rem;padding-block-start:1rem;border-top:1px solid rgba(233,211,160,.25)}
.qt_radio_text[hidden]{display:none}
.qt_radio_vs{font:400 clamp(1.375rem,1.1rem + 1vw,1.75rem)/2 var(--arabic);color:#fff;overflow-wrap:anywhere}
.qt_radio_ven{color:rgba(255,255,255,.85);line-height:1.6}
.qt_stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.5rem}
.qt_stations button{display:grid;gap:.15rem;padding:.75rem 1rem;border:0;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);text-align:start;cursor:pointer;transition:box-shadow .15s,background-color .15s}
.qt_stations button:hover{box-shadow:inset 0 0 0 1px rgba(29,58,138,.45)}
.qt_stations button[aria-pressed="true"]{background:var(--lapis-tint);box-shadow:inset 0 0 0 1px rgba(29,58,138,.55)}
.qt_stations b{font-weight:500}
.qt_stations small{font-size:.8125rem;color:var(--muted)}

/* ---------- tajweed colours (simplified colour-coded mushaf scheme) */
.tj{border-radius:3px;padding-block:.05em}
.tj-g{color:#15803D;background:rgba(21,128,61,.08)}
.tj-iz{color:#1D4ED8;background:rgba(29,78,216,.07)}
.tj-idn{color:#8A8A8A;background:rgba(10,10,10,.05)}
.tj-ql{color:#0E7490;background:rgba(14,116,144,.09)}
.tj-m2{color:#B7791F;background:rgba(201,154,46,.12)}
.tj-m45{color:#DC2626;background:rgba(220,38,38,.07)}
.tj-m6{color:#9F1239;background:rgba(159,18,57,.08)}
.tj-hv{color:#5B21B6;background:rgba(91,33,182,.08)}
.tj-lt{color:#0284C7;background:rgba(2,132,199,.08)}
.tj-wq{color:var(--gold-ink);background:var(--gold-tint);box-shadow:0 0 0 2px var(--gold-tint)}
.tj_key{display:inline-block;flex:none;width:.875rem;height:.875rem;border-radius:3px;vertical-align:-1px;margin-inline-end:.5rem;background:currentColor}
.tj_key.tj-g{background:#15803D}.tj_key.tj-iz{background:#1D4ED8}.tj_key.tj-idn{background:#A3A3A3}.tj_key.tj-ql{background:#0E7490}.tj_key.tj-m2{background:#D69E2E}
.tj_key.tj-m45{background:#DC2626}.tj_key.tj-m6{background:#9F1239}.tj_key.tj-hv{background:#5B21B6}.tj_key.tj-lt{background:#38BDF8}.tj_key.tj-wq{background:var(--gold-tint);box-shadow:inset 0 0 0 2px var(--gold)}

/* ---------- tajweed layout */

.tool.tjw{gap:1.5rem}
.tj_top{display:grid;gap:1.25rem;padding:1.25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:860px){.tj_top{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.tj_legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.4rem 1rem;margin-block-start:.75rem;font-size:.875rem}
.tj_legend li{display:flex;align-items:baseline}
.tj_group{display:grid;gap:.75rem;scroll-margin-top:6rem}
.tj_gh{display:grid;gap:.35rem;padding-block-start:.5rem}
.tj_gh .h3{font-size:1.5rem}
.tj_gh p{color:var(--muted);line-height:1.6;max-width:46rem}
.tj_rule{display:grid;gap:.85rem;padding:clamp(1rem,3vw,1.5rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:6rem}
.tj_rh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem}
.tj_rh .h3{display:flex;align-items:baseline;font-size:1.125rem}
.tj_arname{font:400 1.375rem/1.4 var(--arabic);color:var(--lapis)}
.tj_body p{line-height:1.65;color:#2B2B2B}
.tj_l{font:400 1.25rem/1.3 var(--arabic);color:var(--lapis);white-space:normal;word-spacing:.15em;unicode-bidi:isolate}
.tj_exs{display:grid;gap:.6rem}
@media (min-width:860px){.tj_exs{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}}
.tj_ex{display:grid;gap:.5rem;margin:0;padding:.85rem 1rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft)}
.tj_ar{direction:rtl;text-align:right;font:400 clamp(1.5rem,1.2rem + 1vw,1.875rem)/2.1 var(--arabic);overflow-wrap:anywhere}
.tj_ex figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;font-size:.8125rem;color:var(--muted)}
.tj_play{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);color:var(--lapis)}
.tj_play svg{width:.75rem;height:.75rem}
.tj_play:hover{box-shadow:inset 0 0 0 1px var(--lapis)}
.tj_play.is-on{background:var(--lapis);color:#fff}
.tj_ref a{font:500 .8125rem var(--mono);color:var(--lapis)}
.tj_note::before{content:"· "}
.tj_waqf td{vertical-align:middle}
.tj_sign{width:4rem;text-align:center;font:400 2rem/1.6 var(--arabic);color:var(--gold-ink)}
.tj_err{width:100%}
.post_table table.tj_waqf{min-width:0}

/* ---------- article rail: ak.css's .docs_nav (display:grid) comes after .post_rail{display:none}, so the
   rail shows and overlaps the text below 1200px. Hide it there on this family's article. */
@media (max-width:1199px){.post .post_rail.docs_nav{display:none}}