/* Everyday Arabic (ar4): /arabic-phrases pages, days, colours, family words, your name in Arabic,
   /blog/arabic-calligraphy, and the letter forms, chart and kids mode on /arabic-alphabet. */
[data-ar4-voice][hidden],.ar4_printimg[hidden]{display:none!important}
.ar4 .tool_main{gap:1rem}
.ar4_to .tool_label{margin-block-end:.5rem}
.ar4_sec{margin-block-start:.5rem;font:600 1rem/1.3 var(--display);color:var(--lapis-deep)}
.ar4_card .verse_head .badge{margin-inline-start:auto}
.ar4_card .verse_ar{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.375rem);line-height:1.9}
.ar4_main{box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--gold)}
.ar4_main .verse_ar{font-size:clamp(2.5rem,1.9rem + 2.6vw,3.75rem);line-height:1.7;text-align:center}
.ar4_main .verse_tr{text-align:center;font-size:1.375rem}
.ar4_main .verse_en{text-align:center}
.ar4_main .ar4_g{display:block;text-align:center}
.ar4_f{display:grid;gap:.35rem}
.ar4_g{font:500 .8125rem/1 var(--font);color:var(--gold-ink)}
.ar4_btns{display:flex;flex-wrap:wrap;gap:.5rem}
.ar4_btns .btn[hidden]{display:none}
.ar4_side .ar4_isl{display:grid;gap:.5rem;padding:1rem;border-radius:var(--r2);background:var(--gold-tint);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.ar4_isl p{margin:0}
.ar4_isl .verse_ar{font:400 1.75rem/1.8 var(--arabic);direction:rtl;text-align:right}
.ar4_isl .verse_tr{font-size:1rem}
.ar4_isl .verse_en{font-size:.9375rem}
.ar4_isl .btn{justify-self:start}
.ar4_more{font-size:.9375rem;color:var(--lapis);text-decoration:underline;text-underline-offset:3px}
.ar4_dl{display:grid;gap:.6rem;margin:0}
.ar4_dl dt{font:600 .8125rem/1.3 var(--font);color:var(--lapis-deep)}
.ar4_dl dd{margin:0;font-size:.9375rem;line-height:1.5;color:var(--text)}
.ar4_tar{font:400 1.375rem/1.8 var(--arabic);direction:rtl;unicode-bidi:isolate}
td.ar4_tar{text-align:right;min-width:8rem}
.ar4_wt td{vertical-align:middle}
.ar4_wc .ar4_tar{font-size:1.5rem}
.ar4_sayi{height:2rem;min-width:2rem;padding:0 .55rem;margin-inline-start:.4rem;vertical-align:middle;font-size:.8rem}
/* days, colours, family */
.ar4_days,.ar4_cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8rem),1fr));gap:.6rem}
.ar4_day,.ar4_col,.ar4_fam{text-align:center}
.ar4_day .ar4_big,.ar4_col .ar4_big,.ar4_fam .ar4_big{text-align:center}
.ar4_day .ar4_btns,.ar4_col .ar4_btns,.ar4_fam .ar4_btns{justify-content:center}
.ar4_day,.ar4_col,.ar4_fam,.ar4_today{display:grid;gap:.3rem;align-content:start;padding:1rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.ar4_day p,.ar4_col p,.ar4_fam p,.ar4_today p{margin:0}
.ar4_day.is-today{box-shadow:inset 0 0 0 2px var(--gold)}
.ar4_day_en{font:600 .9375rem/1.3 var(--display)}
.ar4_big{font:400 2.25rem/1.6 var(--arabic);direction:rtl;text-align:right}
.ar4_today{box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--gold)}
.ar4_today .ar4_big{font-size:2.75rem;text-align:center}
.ar4_today .verse_tr,.ar4_today .verse_en{text-align:center}
.ar4_day .verse_tr,.ar4_col .verse_tr,.ar4_fam .verse_tr{font-size:1rem}
.ar4_sw{display:block;height:2.5rem;border-radius:var(--r1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.ar4_quiz{display:grid;gap:.6rem;justify-items:start}
.ar4_quiz .ar4_big{justify-self:stretch;text-align:center;min-height:3.6rem}
.ar4_opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%}
.ar4_opts button{min-height:2.75rem;padding:.4rem .5rem;border:0;border-radius:var(--r1);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:500 .9375rem/1.2 var(--font);cursor:pointer}
.ar4_opts.is-sw button{min-height:3.25rem}
.ar4_opts button.is-right{background:var(--ok-tint);box-shadow:inset 0 0 0 2px var(--ok)}
.ar4_opts button.is-wrong{box-shadow:inset 0 0 0 2px var(--bad);opacity:.7}
.ar4_opts.is-sw button.is-right,.ar4_opts.is-sw button.is-wrong{outline:3px solid var(--page);outline-offset:-6px}
/* hub */
.ar4_hub{display:grid;gap:1.5rem}
.ar4_find{max-width:28rem}
.ar4_find input{width:100%}
.ar4_hub_ar{font:400 1.25rem/1 var(--arabic);color:var(--lapis);margin-inline-start:.35rem;white-space:nowrap}
.tc[hidden],[data-ar4-group][hidden]{display:none}
/* blog */
.ar4_fig{margin:1.5rem 0}
.ar4_img{width:100%;height:auto;border-radius:var(--r2);display:block}
.ar4_fig figcaption{margin-block-start:.5rem;font-size:.875rem;color:var(--muted)}
.ar4_spec{display:grid;gap:.25rem;margin:1.25rem 0;padding:1.25rem;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.ar4_spec .note{margin:0 0 .75rem}
.ar4_spec_ar{margin:0;font:400 clamp(1.75rem,1.2rem + 2vw,2.5rem)/2 var(--arabic);direction:rtl;text-align:center;color:var(--lapis-deep)}
.ar4_amiri{font-family:"Amiri Quran","Scheherazade New",serif}
/* your name in Arabic */
.ar4_nf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:end}
.ar4_nf input{width:100%}
.ar4_try{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0;font-size:.875rem;color:var(--muted)}
.ar4_chip{height:2rem;padding:0 .75rem;border:0;border-radius:999px;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:500 .875rem/1 var(--font);cursor:pointer}
.ar4_chip:hover{box-shadow:inset 0 0 0 1px var(--lapis)}
.ar4_nres{display:grid;gap:.6rem;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--gold);text-align:center}
.ar4_nres p{margin:0}
.ar4_nbig{font:400 clamp(3.5rem,2.5rem + 5vw,5.5rem)/1.6 var(--arabic);direction:rtl;text-align:center;color:var(--lapis-deep)}
.ar4_nname b{font:600 1.5rem/1.2 var(--display)}
.ar4_nres .badge{vertical-align:4px}
.ar4_nres .ar4_btns{justify-content:center}
.ar4_spell{padding:.75rem;border-radius:var(--r2);background:var(--surface)}
.ar4_spell .tool_label{margin-block-end:.4rem}
.ar4_letters{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;direction:rtl}
.ar4_letters span{display:inline-grid;justify-items:center;min-width:3.25rem;padding:.3rem .45rem;border-radius:var(--r1);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font-size:.75rem;color:var(--muted);direction:ltr}
.ar4_letters b{font:400 1.75rem/1.5 var(--arabic);color:var(--text)}
.ar4_nmiss{padding:1rem 1.25rem;border-radius:var(--r2);background:var(--warn-tint);box-shadow:inset 0 0 0 1px rgba(146,64,14,.2)}
.ar4_nmiss p{margin:0 0 .5rem}
.ar4_nmiss p:last-child{margin:0}
.ar4_nmiss a{color:var(--lapis);text-decoration:underline}
.ar4_canvas{width:100%;height:auto;border-radius:var(--r2);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:520px){.ar4_nf{grid-template-columns:minmax(0,1fr)}.ar4_nf .btn{width:100%}}

/* ---------------------------------------------- /arabic-alphabet additions (30_alphabet.py) */
.ar4_lf_pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.25rem,1fr));gap:.4rem}
.ar4_lf_pick button{position:relative;height:3.5rem;border:0;border-radius:var(--r1);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);font:400 1.75rem/1 var(--arabic);cursor:pointer}
.ar4_lf_pick button.is-nj::after{content:"";position:absolute;top:.3rem;left:.3rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--gold)}
.ar4_lf_pick button[aria-pressed="true"]{background:var(--lapis);color:#fff;box-shadow:none}
.ar4_lf_out{display:grid;gap:.75rem;padding:clamp(1rem,3vw,1.5rem);border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line)}
.ar4_lf_out p{margin:0}
.ar4_lf_head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.ar4_lf_head b{font:600 1.375rem/1.2 var(--display)}
.ar4_lf_four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;direction:rtl}
.ar4_lf_four > div{display:grid;justify-items:center;gap:.25rem;padding:.75rem .25rem;border-radius:var(--r2);background:var(--surface);direction:ltr}
.ar4_lf_four .tool_label{margin:0;font-size:.75rem}
.ar4_lf_four b{font:400 clamp(2.25rem,1.6rem + 2.5vw,3.25rem)/1.5 var(--arabic)}
.ar4_lf_four small{font:400 1.375rem/1.6 var(--arabic);color:var(--lapis)}
.ar4_lf_note{font-size:.9375rem}
.ar4_lf_note.is-nj{color:var(--gold-ink)}
.ar4_nj_key{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--gold);margin-inline-end:.3rem}
.ab_forms_t td.ab_ar{font-size:1.75rem}
.ab_forms_t tr.is-nj td:first-child::after{content:" (does not join forward)";font-size:.8rem;color:var(--gold-ink)}
.ar4_chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7rem),1fr));gap:.5rem;direction:rtl}
.ar4_chart > div{display:grid;justify-items:center;gap:.1rem;padding:.6rem .25rem;border-radius:var(--r2);background:var(--page);box-shadow:inset 0 0 0 1px var(--line);direction:ltr;break-inside:avoid}
.ar4_chart b{font:400 2.5rem/1.9 var(--arabic);color:var(--lapis-deep)}
.ar4_chart span{font:600 .875rem/1.2 var(--font)}
.ar4_chart small{font-size:.75rem;color:var(--muted)}
.ar4_chart_bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-end:1rem}
.ar4_kids{scroll-margin-top:5rem;display:grid;gap:1rem;padding:clamp(1rem,3vw,2rem);border-radius:var(--r3);background:var(--lapis);color:#fff;text-align:center;box-shadow:inset 0 0 0 1px var(--gold-soft)}
.ar4_kids[hidden]{display:none}
.ar4_kids p{margin:0}
.ar4_kids_big{font:400 clamp(8rem,5rem + 18vw,14rem)/1.25 var(--arabic);color:#fff}
.ar4_kids_name{font:700 clamp(1.75rem,1.3rem + 2vw,2.5rem)/1.1 var(--display);color:var(--gold-soft)}
.ar4_kids_ex{font-size:1.125rem}
.ar4_kids_ex b{font:400 2.25rem/1.5 var(--arabic);margin-inline-end:.5rem}
.ar4_kids_nav{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}
.ar4_kids .btn{height:3.5rem;font-size:1.125rem}
.ar4_kids .btn.is-gold{min-width:9rem}
.ar4_kids .btn.is-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.ar4_kids .btn.is-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.ar4_kids_n{font:500 1rem/1 var(--font);color:var(--gold-soft)}
.ar4_kids_dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;direction:rtl}
.ar4_kids_dots i{width:.55rem;height:.55rem;border-radius:50%;background:rgba(255,255,255,.3)}
.ar4_kids_dots i.is-on{background:var(--gold-soft)}
@media (max-width:520px){.ar4_kids_nav{grid-template-columns:1fr 1fr}.ar4_kids_nav .ar4_kids_play{grid-column:1 / -1;order:-1}}

@media print{
  html.ar4-pr-chart .header,html.ar4-pr-chart .footer,html.ar4-pr-chart .skip,html.ar4-pr-chart main > *:not(#alphabet-chart),
  html.ar4-pr-forms .header,html.ar4-pr-forms .footer,html.ar4-pr-forms .skip,html.ar4-pr-forms main > *:not(#letter-forms){display:none!important}
  html.ar4-pr-chart .ar4_chart_bar,html.ar4-pr-chart #alphabet-chart .eyebrow,html.ar4-pr-chart #alphabet-chart .ar4_chart_lede,
  html.ar4-pr-forms #letter-forms .ar4_lf_tool,html.ar4-pr-forms #letter-forms .eyebrow,html.ar4-pr-forms .ar4_chart_bar{display:none!important}
  html.ar4-pr-chart .section,html.ar4-pr-forms .section{padding:0!important}
  .ar4_chart{grid-template-columns:repeat(7,1fr);gap:4pt}
  .ar4_chart > div{box-shadow:none;border:1px solid #999;padding:4pt 2pt}
  .ar4_chart b{font-size:32pt;line-height:1.9;color:#000}
  html.ar4-pr-chart #alphabet-chart .fade{display:none}
  .ar4_chart > div{padding:8pt 2pt}
  .ab_forms_t td,.ab_forms_t th{padding:2pt 6pt!important}
  .ab_forms_t td.ab_ar{font-size:18pt}
  html.ar4-pr-card body *{visibility:hidden}
  html.ar4-pr-card .ar4_printimg,html.ar4-pr-card .ar4_printimg *{visibility:visible}
  html.ar4-pr-card .ar4_printimg{display:block!important;position:fixed;inset:0;margin:auto;width:100%;max-width:18cm;height:auto}
}
/* compact phrase cards */
.ar4 .ar4_card.verse{gap:.55rem;padding:1.1rem 1.25rem}
.ar4 .ar4_card.verse .verse_head{min-height:1.5rem}
.ar4 .ar4_card .verse_ar{line-height:1.3;padding-block:.15em .1em}
.ar4 .ar4_card.ar4_main{padding:clamp(1.25rem,3vw,2rem)}
.ar4 .ar4_card .verse_en{font-size:1rem}
.ar4_side .ar4_btns .btn{padding:0 .8rem}
/* UX audit 31 Oct (arabic-learning): letter card above the grid, step buttons, quick links, phone grid */
.ab_card{margin-block:0 .25rem;scroll-margin-top:5.5rem}
.ab_step{justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.75rem}
.ab_step .btn{min-height:2.75rem}
.ab_pick{margin:.75rem 0 0}
.ab_quick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.9375rem;color:var(--muted)}
.ab_quick .btn{min-height:2.75rem}
@media (max-width:420px){.ab_grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}.ab_tile{padding:.45rem .1rem .5rem}.ab_c{font-size:1.75rem}.ab_n{font-size:.75rem}}
/* Noorani Qaida: hub progress, continue link, tick mode */
.qd_resume{margin:0 0 1rem}
.qd_hp{margin-top:.35rem;font-size:.8125rem;font-weight:600;color:#1B7A43}
.is-marking .qd_cell{box-shadow:inset 0 0 0 1px var(--lapis),0 0 0 0 transparent}
.is-marking .qd_cell:not(.is-known)::after{content:"";position:absolute;top:.3rem;right:.35rem;width:.7rem;height:.7rem;border-radius:3px;box-shadow:inset 0 0 0 1.5px var(--lapis)}
.qr_bar .btn{min-height:2.75rem}
.tc_icon.qd_num{isolation:isolate}
.tc_icon.qd_num::before{z-index:-1}
.qd_hub .qd_hp{color:#1B7A43}
.ab_step{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem}
.ab_step .btn{padding-inline:.6rem}
.ab_step [data-step="1"]{justify-self:end}
.ab_step [data-step="-1"]{justify-self:start}
/* Kalimas: a bigger Learned tick, and room for the title on phones */
.km_done{min-height:2.75rem;padding-inline:.5rem;border-radius:var(--r2);box-shadow:inset 0 0 0 1px rgba(233,211,160,.35)}
.km_done input{width:1.25rem;height:1.25rem}
.km_foot .btn{min-height:2.75rem}
@media (max-width:480px){.km_head{flex-wrap:wrap}.km_done{margin-inline-start:0;order:3;flex-basis:100%;justify-content:center}}