/* ===== The look of the class course's study pages: every platform/chapter-*.html (55 chapters + the checkpoint exams) =====
   Linked only from the chapter pages, right after shared.css (tools/add_study_css.py puts the line in and keeps it there),
   so nothing here reaches the GCSE pages or the lesson/week teaching pages. Light theme only; every colour is a token below.

   1. A calm page and white "paper" cards. The light blue-grey page (--bg) stays: it glares less than white over a long
      study session. Each section of a lesson sits on its own white card, so the sections separate without the old dividers.
   2. One accent per kind of section, the same on every chapter, always shown with its icon and its label (never colour alone):
        blue        conversation : Dialogue, Everyday Phrases, Conversation Practice
        green       words        : Vocabulary
        gold        grammar      : Grammar Corner (and the grammar films' card at its top)
        deep red    the Qur'an   : Qur'an Connection
        violet      skills       : Listening, Speaking, Reading, Free Reading, Listen and Type
        terracotta  practice     : Exercises, Play & practise
      Each kind has a fill (the card's top edge and the icon chip, at least 3:1 on white), an ink (its label, at least
      5.6:1 on white), a tint and a line. The six fills were chosen to stay apart for red-green and blue-yellow colour
      blindness (about 20 CIELAB units or more between any two, after a Machado simulation of each type).
   3. Chapters are told apart by their unit, not by repainting the page: a thin band in the unit's colour across the top
      of the title card and the unit tag in that colour. <body data-unit="N"> is written by tools/add_study_css.py from
      the course plan; without it the band takes the site's terracotta.
   Touch targets on phones are at least 44 px; nothing scrolls sideways at 390 px; print stays plain. */

:root{
  --st-paper:#FFFFFF;
  --st-well:#F5F9FC;
  --st-line:#D5E3EC;
  --st-line-soft:#E6EEF4;
  --st-head:var(--teal-deep, #6B3420);
  --st-shadow:0 1px 2px rgba(25, 55, 80, .05), 0 10px 26px -18px rgba(25, 55, 80, .30);
  --st-glass:rgba(255, 255, 255, .6);
  --st-quran-frame:rgba(246, 233, 198, .24);
  --st-quran-shadow:0 10px 24px -16px rgba(60, 20, 10, .55);
  --st-ok:var(--pill-learned-ink, #2E6B47); --st-ok-bg:var(--pill-learned-bg, #DCEEE1);
  --st-bad:#A23B32; --st-bad-bg:#F5DEDA;
  --st-r:16px;
  --st-r-sm:12px;
  --radius:10px;   /* the pages' own boxes (dialogue, grammar, Qur'an box, answers…) were 3 px: softened to sit with the cards */

  /* the kinds of section: fill / ink / tint / line */
  --st-talk:#36598F;     --st-talk-ink:#36598F;     --st-talk-tint:#EDF2FA;     --st-talk-line:#C9D5EA;
  --st-words:#2A8F79;    --st-words-ink:#137461;    --st-words-tint:#E5F4EF;    --st-words-line:#B9DCD0;
  --st-grammar:#C08423;  --st-grammar-ink:#8D5E0C;  --st-grammar-tint:#FBF3E4;  --st-grammar-line:#EBD3A9;
  --st-quran:#74253A;    --st-quran-ink:#74253A;    --st-quran-tint:#F8ECEF;    --st-quran-line:#E9C9D0;
  --st-skills:#8784CC;   --st-skills-ink:#5F5FA3;   --st-skills-tint:#F0EFFA;   --st-skills-line:#D4D2F0;
  --st-practice:#B4502F; --st-practice-ink:#AB4828; --st-practice-tint:#FBEEE8; --st-practice-line:#F1CDBE;
  --st-other:#7D8B97;    --st-other-ink:#56636F;    --st-other-tint:#F1F5F8;    --st-other-line:#D5E3EC;

  /* the six units of the course (UNITS in tools/build_course.py): fill / ink / tint */
  --st-u1:#B85C38; --st-u1-ink:#A64D2A; --st-u1-tint:#FBEEE7;
  --st-u2:#2B7C83; --st-u2-ink:#1D7279; --st-u2-tint:#E6F4F5;
  --st-u3:#4A5DA6; --st-u3-ink:#4A5DA6; --st-u3-tint:#EDF0FB;
  --st-u4:#8A4E8D; --st-u4-ink:#8A4E8D; --st-u4-tint:#F7ECF7;
  --st-u5:#687B2B; --st-u5-ink:#5B6E1F; --st-u5-tint:#F1F4E3;
  --st-u6:#A06E1C; --st-u6-ink:#8C5D05; --st-u6-tint:#FBF1E1;
  --st-unit:var(--teal, #B85C38); --st-unit-ink:var(--teal-deep, #6B3420); --st-unit-tint:var(--teal-tint, #EFE1D3);

  /* icons (masks: the colour comes from the token they are painted with) */
  --st-i-dialogue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h9a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8.5L5 16v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M18.5 8H20a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1v3l-3.5-3H11a2 2 0 0 1-2-2'/%3E%3C/svg%3E");
  --st-i-phrases:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 8.5h8M8 12.5h5'/%3E%3C/svg%3E");
  --st-i-tutor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.1-5.6A8.5 8.5 0 1 1 21 11.5z'/%3E%3Cpath d='M8.5 11.5h.01M12.5 11.5h.01M16.5 11.5h.01' stroke-width='2.6'/%3E%3C/svg%3E");
  --st-i-words:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='13' height='13.5' rx='2'/%3E%3Cpath d='M8 3.5h11a2 2 0 0 1 2 2v11'/%3E%3Cpath d='M7 12.5h5M7 16h3'/%3E%3C/svg%3E");
  --st-i-grammar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.8' r='2.3'/%3E%3Ccircle cx='5.2' cy='19' r='2.3'/%3E%3Ccircle cx='18.8' cy='19' r='2.3'/%3E%3Cpath d='M12 7.1v4.4M12 11.5l-5.3 5.7M12 11.5l5.3 5.7'/%3E%3C/svg%3E");
  --st-i-quran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='1.9' stroke-linejoin='miter'%3E%3Crect x='4.9' y='4.9' width='14.2' height='14.2'/%3E%3Crect x='4.9' y='4.9' width='14.2' height='14.2' transform='rotate(45 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  --st-i-listening:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
  --st-i-speaking:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M8.5 22h7'/%3E%3C/svg%3E");
  --st-i-reading:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h7a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-7a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h8z'/%3E%3C/svg%3E");
  --st-i-dictation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 12.5h.01M18 12.5h.01M10 12.5h4M7.5 16h9'/%3E%3C/svg%3E");
  --st-i-exercises:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  --st-i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.3l5.6 3.7-5.6 3.7z'/%3E%3C/svg%3E");
  --st-i-generic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --st-i-goals:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3C/svg%3E");
  /* the title card's band: eight-pointed stars joined point to point (geometric, no figures) */
  --st-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='9' y='9' width='14' height='14'/%3E%3Crect x='9' y='9' width='14' height='14' transform='rotate(45 16 16)'/%3E%3Cpath d='M0 16h6.1M25.9 16h6.1M16 0v6.1M16 25.9v6.1'/%3E%3C/svg%3E");
}
body[data-unit="1"]{--st-unit:var(--st-u1); --st-unit-ink:var(--st-u1-ink); --st-unit-tint:var(--st-u1-tint);}
body[data-unit="2"]{--st-unit:var(--st-u2); --st-unit-ink:var(--st-u2-ink); --st-unit-tint:var(--st-u2-tint);}
body[data-unit="3"]{--st-unit:var(--st-u3); --st-unit-ink:var(--st-u3-ink); --st-unit-tint:var(--st-u3-tint);}
body[data-unit="4"]{--st-unit:var(--st-u4); --st-unit-ink:var(--st-u4-ink); --st-unit-tint:var(--st-u4-tint);}
body[data-unit="5"]{--st-unit:var(--st-u5); --st-unit-ink:var(--st-u5-ink); --st-unit-tint:var(--st-u5-tint);}
body[data-unit="6"]{--st-unit:var(--st-u6); --st-unit-ink:var(--st-u6-ink); --st-unit-tint:var(--st-u6-tint);}

/* ---------- which kind each section is ---------- */
.page > section[id]{--acc:var(--st-other); --acc-ink:var(--st-other-ink); --acc-tint:var(--st-other-tint); --acc-line:var(--st-other-line); --st-icon:var(--st-i-generic);}
.page > section:is(#dialogue, #phrases, #tutor){--acc:var(--st-talk); --acc-ink:var(--st-talk-ink); --acc-tint:var(--st-talk-tint); --acc-line:var(--st-talk-line);}
.page > section#vocab{--acc:var(--st-words); --acc-ink:var(--st-words-ink); --acc-tint:var(--st-words-tint); --acc-line:var(--st-words-line);}
.page > section#grammar{--acc:var(--st-grammar); --acc-ink:var(--st-grammar-ink); --acc-tint:var(--st-grammar-tint); --acc-line:var(--st-grammar-line);}
.page > section#quran{--acc:var(--st-quran); --acc-ink:var(--st-quran-ink); --acc-tint:var(--st-quran-tint); --acc-line:var(--st-quran-line);}
.page > section:is(#listening, #speaking, #reading, #free-reading, #dictation){--acc:var(--st-skills); --acc-ink:var(--st-skills-ink); --acc-tint:var(--st-skills-tint); --acc-line:var(--st-skills-line);}
.page > section:is(#exercises, #play-practise){--acc:var(--st-practice); --acc-ink:var(--st-practice-ink); --acc-tint:var(--st-practice-tint); --acc-line:var(--st-practice-line);}
.page > section#dialogue{--st-icon:var(--st-i-dialogue);}
.page > section#phrases{--st-icon:var(--st-i-phrases);}
.page > section#tutor{--st-icon:var(--st-i-tutor);}
.page > section#vocab{--st-icon:var(--st-i-words);}
.page > section#grammar{--st-icon:var(--st-i-grammar);}
.page > section#quran{--st-icon:var(--st-i-quran);}
.page > section#listening{--st-icon:var(--st-i-listening);}
.page > section#speaking{--st-icon:var(--st-i-speaking);}
.page > section:is(#reading, #free-reading){--st-icon:var(--st-i-reading);}
.page > section#dictation{--st-icon:var(--st-i-dictation);}
.page > section#exercises{--st-icon:var(--st-i-exercises);}
.page > section#play-practise{--st-icon:var(--st-i-play);}

/* ---------- the page ---------- */
.page{max-width:880px;}
.book-kicker{padding-top:36px;}
/* the top bar already carries the brand: below it only the Arabic name stays, so the lesson's title comes sooner on a phone
   (the logo has an inline display:block) */
.page > .book-kicker{padding-top:18px;}
.page > .book-kicker img, .page > .book-kicker .en{display:none !important;}
.page > .book-kicker + .chapnav{margin-top:16px;}
.chapnav a{background:var(--st-paper); border-color:var(--st-line);}
@supports selector(:has(> a)){ .page > .divider{display:none;} }   /* the cards separate the sections now (no cards, no change) */

/* the title card, with the unit's band */
.page > .hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--st-paper); border:1px solid var(--st-line); border-radius:var(--st-r); box-shadow:var(--st-shadow);
  padding:44px 36px 28px; margin:4px 0 20px;
}
.page > .hero::before{content:""; position:absolute; z-index:-1; left:0; right:0; top:0; height:6px; background:var(--st-unit);}
.page > .hero::after{
  content:""; position:absolute; z-index:-1; left:0; right:0; top:6px; height:88px; background-color:var(--st-unit); opacity:.12;
  -webkit-mask-image:var(--st-pattern), linear-gradient(#000, rgba(0, 0, 0, 0));
  -webkit-mask-size:32px 32px, 100% 100%; -webkit-mask-repeat:repeat, no-repeat; -webkit-mask-position:center top, 0 0;
  -webkit-mask-composite:source-in;
  mask-image:var(--st-pattern), linear-gradient(#000, rgba(0, 0, 0, 0));
  mask-size:32px 32px, 100% 100%; mask-repeat:repeat, no-repeat; mask-position:center top, 0 0;
  mask-composite:intersect;
}
.page > .hero .unit-tag{
  display:inline-flex; align-items:center; gap:8px; max-width:100%; box-sizing:border-box;
  font-weight:700; letter-spacing:.01em; color:var(--st-unit-ink); background:var(--st-unit-tint);
  border:1px solid color-mix(in srgb, var(--st-unit) 34%, var(--st-paper)); padding:5px 15px 5px 12px; margin-bottom:20px;
}
.page > .hero .unit-tag{align-items:flex-start;}   /* a tag that wraps keeps its dot by the first line */
.page > .hero .unit-tag::before{content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--st-unit); margin-top:.45em;}
.page > .hero h1.chapter-title{margin-bottom:10px;}     /* its tails clear the English title under it */
.page > .hero .chapter-title-en{margin-bottom:20px;}
.page > .hero .hero-intro{margin-bottom:6px; line-height:1.7;}

/* the note on the listen buttons: a quiet line, not a block */
.page > .audio-note{background:var(--st-glass); border:1px solid var(--st-line-soft); border-radius:var(--st-r-sm); color:var(--ink-soft); padding:12px 18px; margin:0 0 20px;}

/* "By the end of this chapter": a card with the unit's colour */
.page > .goals{background:var(--st-paper); border:1px solid var(--st-line); border-radius:var(--st-r); box-shadow:var(--st-shadow); padding:22px 30px 20px; margin:0 0 20px;}
.page > .goals h2{position:relative; display:flex; align-items:center; min-height:28px; padding-left:38px; letter-spacing:.06em; color:var(--st-unit-ink);}
.page > .goals h2::before{content:""; position:absolute; left:0; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:9px; background:var(--st-unit);}
.page > .goals h2::after{content:""; position:absolute; left:6px; top:50%; width:16px; height:16px; margin-top:-8px; background:var(--st-paper);
  -webkit-mask:var(--st-i-goals) center / contain no-repeat; mask:var(--st-i-goals) center / contain no-repeat;}
.page > .goals li::marker{color:var(--st-unit);}

/* the lesson's progress and the contents: one chip per section, its dot in the section's colour */
.page > .q-sec-tracker{background:var(--st-paper); border-color:var(--st-line); border-radius:var(--st-r-sm); box-shadow:var(--st-shadow); margin-bottom:16px;}
.page > .q-sec-tracker.all-done{background:var(--st-ok-bg); border-color:var(--st-ok);}
.page > .q-sec-tracker.q-pulse{box-shadow:0 0 0 3px var(--st-ok-bg);}
.page > nav.toc{gap:8px; justify-content:center; padding:0; margin:0 0 8px;}
.page > nav.toc a{
  --dot:var(--st-other);
  display:inline-flex; align-items:center; gap:7px; box-sizing:border-box; min-height:34px; padding:5px 14px 5px 11px;
  border:1px solid var(--st-line); border-radius:100px; background:var(--st-paper); color:var(--ink); text-decoration:none;
  font-weight:600; line-height:1.2;
}
.page > nav.toc a::before{content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--dot);}
@media (hover:hover){ .page > nav.toc a:hover{border-color:var(--teal); color:var(--teal-deep);} }
.page > nav.toc a:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.page > nav.toc a:is([href="#dialogue"], [href="#phrases"], [href="#tutor"]){--dot:var(--st-talk);}
.page > nav.toc a[href="#vocab"]{--dot:var(--st-words);}
.page > nav.toc a[href="#grammar"]{--dot:var(--st-grammar);}
.page > nav.toc a[href="#quran"]{--dot:var(--st-quran);}
.page > nav.toc a:is([href="#listening"], [href="#speaking"], [href="#reading"], [href="#free-reading"], [href="#dictation"]){--dot:var(--st-skills);}
.page > nav.toc a:is([href="#exercises"], [href="#play-practise"]){--dot:var(--st-practice);}
.page > nav.toc a.q-toc-done{border:1px solid var(--st-ok); background:var(--st-ok-bg); color:var(--st-ok);}

/* ---------- each section: a white card with its kind's top edge ----------
   (a section of the lesson is a section[id] with a .sec-head: not the teacher's marks on an exam or the "Āyāt you can
   now read" box, which have frames of their own) */
.page > section[id]:has(> .sec-head){
  position:relative; box-sizing:border-box;
  background:var(--st-paper); border:1px solid var(--st-line); border-top:4px solid var(--acc); border-radius:var(--st-r);
  box-shadow:var(--st-shadow); padding:26px 32px 24px; margin:26px 0 0;
}
.page > section[id] > .sec-head{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:18px; align-items:center; margin-bottom:18px;}
.page > section[id] > .sec-head > *{grid-column:1;}
.page > section[id] > .sec-head > .sec-label{grid-column:1 / -1;}
.page > section[id] > .sec-head > .q-sec-tick-top{grid-column:2; grid-row:2; justify-self:end; margin:0;}
.page > section[id] > .sec-head > .sec-label{
  position:relative; display:flex; align-items:center; min-height:30px; padding-left:40px; margin:0 0 8px;
  font-size:12.5px; letter-spacing:.07em; line-height:1.3; color:var(--acc-ink);
}
.page > section[id] > .sec-head > .sec-label::before{content:""; position:absolute; left:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:9px; background:var(--acc);}
.page > section[id] > .sec-head > .sec-label::after{content:""; position:absolute; left:7px; top:50%; width:16px; height:16px; margin-top:-8px; background:var(--st-paper);
  -webkit-mask:var(--st-icon) center / contain no-repeat; mask:var(--st-icon) center / contain no-repeat;}
.page > section[id] > .sec-head h2{gap:4px 14px;}
.page > section[id] > .sec-head h2 .ar{font-size:31px; line-height:1.4; color:var(--st-head);}
.page > section[id] > .sec-head h2 .en{font-size:18.5px;}
.page > section[id] .sec-note{line-height:1.6; max-width:44em;}
.page > section[id] .skill-badge{background:var(--acc-tint); color:var(--acc-ink); border:1px solid var(--acc-line); padding:5px 13px;}
section.q-sec-done > .sec-head{border-left-width:4px;}
.page > section[id] .q-sec-end{border-top-color:var(--st-line); margin-top:24px;}

/* chapters 1-2: the "Before you start" note and the visitors' live-class line */
.page > :is(.q-start-note, .q-trial-cta){border-radius:var(--st-r-sm);}

/* the warm-up and quick-recall boxes between the cards */
.page > .q-rc{background:var(--st-paper); border-color:var(--st-line); border-radius:var(--st-r); box-shadow:var(--st-shadow); margin-top:26px; margin-bottom:0;}

/* ---------- dialogue ---------- */
.page .dialogue{background:var(--st-paper); border:1px solid var(--st-line); border-radius:var(--st-r-sm); padding:0; overflow:hidden;}
.page .dline{padding:15px 22px; border-bottom-color:var(--st-line-soft);}
.page .dline:nth-child(even){background:var(--st-well);}
.page .dline .speaker{font-family:'Amiri','Arial',serif; font-size:18px; line-height:1.5; font-weight:700; color:var(--st-talk-ink); padding-top:2px; direction:rtl; text-align:left;}   /* the names are vowelled Arabic */
@media (max-width:520px){ .page .dline .speaker{text-align:right; padding-top:0;} }   /* a phone: the name sits over its line */
.page .dline .ar{line-height:1.75;}

/* ---------- vocabulary tables ---------- */
@media (min-width:601px){
  .page table.vocab{border-collapse:separate; border-spacing:0;}
  .page table.vocab th{background:var(--st-well); border-bottom:1px solid var(--st-line); padding:9px 12px; letter-spacing:.02em;}
  .page table.vocab tr:first-child th:first-child{border-top-left-radius:10px;}
  .page table.vocab tr:first-child th:last-child{border-top-right-radius:10px;}
  .page table.vocab td{border-bottom:1px solid var(--st-line-soft); padding:10px 12px;}
  .page table.vocab tr:last-child td{border-bottom:none;}
  .page table.vocab:has(td.tl) td.ar.speak-wrap:first-child{width:28%;}   /* word lists (not the all-Arabic grammar tables) */
  .page table.vocab:has(td.tl) td:nth-child(3){min-width:9em;}   /* the meaning is never squeezed by the Arabic */
}
/* the listen button keeps to one column at the start of the Arabic, so it never drops under the word */
.page table.vocab td.ar.speak-wrap{position:relative; padding-right:48px;}
.page table.vocab td.ar.speak-wrap > .speak-btn{position:absolute; right:10px; top:12px; margin:0;}
@media (max-width:600px){
  /* a phone: each word is a block of the card, divided by a line (no box inside the box) */
  .page table.vocab tbody{display:block;}
  .page table.vocab tr, .page table.particle-table tr{background:none; border:none; border-bottom:1px solid var(--st-line-soft); border-radius:0; padding:14px 2px; margin:0;}
  .page table.vocab tr:last-child, .page table.particle-table tr:last-child{border-bottom:none;}
  .page table.vocab td.ar.speak-wrap{padding-right:40px;}
  .page table.vocab td.ar.speak-wrap > .speak-btn{right:0; top:4px;}
  .page table.vocab td.note:empty{display:none;}   /* no note: no dashed rule with nothing under it */
}

/* ---------- grammar ---------- */
.page .grammar{background:var(--st-grammar-tint); border:1px solid var(--st-grammar-line); border-left:4px solid var(--st-grammar); border-radius:var(--st-r-sm); padding:22px 26px;}
.page .grammar .example{background:var(--st-paper); border-color:var(--st-grammar-line); border-radius:10px; padding:12px 16px; gap:16px;}
.page .grammar .example .ar{font-size:22px; line-height:1.75;}
.page .grammar table, .page .grammar .sarf-wrap{background:var(--st-paper);}
.page .grammar table.vocab{border:1px solid var(--st-grammar-line); border-radius:10px;}
.page .sarf-wrap{border-color:var(--st-line); border-radius:var(--st-r-sm); background:var(--st-paper);}
/* the grammar films' card sits at the top of the Grammar Corner, under its heading (platform/grammar-films.css) */
:where(.page > section#grammar) > .q-film{margin-bottom:18px;}

/* ---------- the Qur'an ---------- */
.page .quran-box{border-radius:var(--st-r-sm); outline:1px solid var(--st-quran-frame); outline-offset:-8px; box-shadow:var(--st-quran-shadow);}

/* ---------- everyday phrases ---------- */
.page .phrase-grid{gap:12px;}
.page .phrase{background:var(--st-well); border:1px solid var(--st-line-soft); border-radius:var(--st-r-sm); padding:12px 16px;}
.page .phrase .ar{line-height:1.7;}

/* ---------- listening, reading ---------- */
.page .script-box{background:var(--st-well); border-color:var(--st-line-soft); border-radius:var(--st-r-sm);}
.page .reading-passage{background:var(--st-paper); border-color:var(--st-line); border-radius:var(--st-r-sm);}
.page .reading-passage.speak-wrap{gap:14px;}
.page .reading-passage > span.reading-passage{flex:1 1 auto; min-width:0; background:none; border:none; border-radius:0; padding:0; margin:0;}   /* the text inside the box, not a second box */
.page .q-cr-passage{border-color:var(--st-line); border-radius:var(--st-r-sm); background:var(--st-paper);}
.page .fill-blank{background:var(--st-paper); border-color:var(--st-line); border-radius:var(--st-r-sm);}

/* ---------- exercises: each one on a light tray, its number in a terracotta disc ---------- */
.page > section[id] .exercise{background:var(--st-well); border:1px solid var(--st-line-soft); border-radius:14px; padding:18px 20px 16px; margin:0 0 18px;}
.page > section[id] .exercise:last-child{margin-bottom:0;}
.page .exercise-head{align-items:center; gap:12px;}
.page .exercise-num{display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:34px; height:34px; padding:0 4px; box-sizing:border-box;
  border-radius:50%; background:var(--st-practice); color:var(--st-paper); font-size:18px; line-height:1;}
/* the answer buttons: a new resting look, then every state of theirs again, in the pages' own order */
.page .quiz-opt, .page .match-btn{background:var(--st-paper); border-color:var(--st-line); border-radius:10px;}
.page .tf-btn{background:var(--st-paper); border-color:var(--st-line);}
.page :is(.quiz-opt, .match-btn, .tf-btn):hover{border-color:var(--teal);}
.page :is(.quiz-opt, .match-btn, .tf-btn).selected{background:var(--teal-tint); border-color:var(--teal);}
.page .match-btn.paired{border-color:var(--gold-soft);}
.page :is(.quiz-opt, .match-btn, .tf-btn).correct{background:var(--st-ok-bg); border-color:var(--st-ok); color:var(--st-ok);}
.page :is(.quiz-opt, .match-btn, .tf-btn).incorrect{background:var(--st-bad-bg); border-color:var(--st-bad); color:var(--st-bad);}
.page .tf-item{border-bottom-color:var(--st-line-soft);}
/* the answers: a neat fold, opened only when wanted */
.page details.answers{background:var(--st-paper); border:1px dashed var(--st-line); border-radius:var(--st-r-sm); padding:0 16px; margin-top:12px;}
.page details.answers[open]{border-style:solid;}
.page details.answers summary{display:flex; align-items:center; gap:4px; min-height:40px; padding:0; color:var(--st-head);}
.page details.answers .ans-body{border-top:1px dashed var(--st-line-soft); padding-top:12px;}

/* ---------- the end of the chapter ---------- */
.page > .chapter-end{border-top-color:var(--st-line); margin-top:44px;}

/* ---------- phones ---------- */
@media (max-width:600px){
  .page{padding-left:10px; padding-right:10px;}
  .page > .book-kicker{padding-top:6px;}
  .page > .book-kicker + .chapnav{margin-top:12px;}
  .page > .hero{padding:24px 18px 20px; border-radius:14px;}
  .page > .hero .unit-tag{margin-bottom:12px;}
  .page > .hero h1.chapter-title{font-size:36px;}
  .page > .goals{padding:18px 18px 16px; border-radius:14px;}
  .page > section[id]:has(> .sec-head){padding:20px 16px 18px; margin-top:18px; border-radius:14px;}
  .page > section[id] > .sec-head{display:block;}
  .page > section[id] > .sec-head > .q-sec-tick-top{margin-top:10px;}
  .page > section[id] > .sec-head h2 .ar{font-size:28px;}
  .page > .q-rc{margin-top:18px;}
  .page .dline{padding:13px 14px;}
  .page .grammar{padding:16px 14px; border-radius:10px;}
  .page .quran-box{padding:26px 16px 20px;}
  .page .reading-passage{padding:18px 16px;}
  .page .script-box{padding:14px 14px;}
  .page .fill-blank{padding:16px 14px;}
  .page > section[id] .exercise{padding:14px 12px 12px;}
}
@media (max-width:560px){
  /* an example's Arabic gets the whole line, its gloss underneath */
  .page .grammar .example{grid-template-columns:minmax(0, 1fr); gap:6px;}
  .page .grammar .example .gloss{min-width:0; text-align:left; border-top:1px dashed var(--st-grammar-line); padding-top:6px;}
}

/* ---------- touch screens: every control at least 44 px tall ---------- */
@media (pointer:coarse){
  .page > nav.toc a{min-height:44px; padding-top:0; padding-bottom:0;}
  .page details.answers summary{min-height:44px;}
  .page .rv-bar .rv-all, .page .q-playall-btn, .page .ar-kb-toggle, .page .q-dict-kbtoggle, .page .q-rc-skip{min-height:44px; box-sizing:border-box;}
  .page .q-playall-btn, .page .ar-kb-toggle{display:inline-flex; align-items:center;}
  .page .tf-btn{min-height:44px;}
  .page .wb-chip{min-height:44px; box-sizing:border-box;}
  .page .q-sec-next{display:inline-flex; align-items:center; min-height:44px;}
  .page .tutor-vocab-toggle{display:inline-flex; align-items:center; min-height:44px;}
  .page table.vocab .speak-btn::after{inset:-9px;}
}

/* ---------- print: plain and readable ---------- */
@media print{
  .page > .hero, .page > .goals, .page > .q-sec-tracker, .page > section[id], .page > .q-rc{
    background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important;
  }
  .page > section[id]{border-top:1pt solid #999 !important; padding-top:10pt !important; margin:18pt 0 0 !important;}
  .page > .hero::before, .page > .hero::after, .page > .goals h2::before, .page > .goals h2::after,
  .page > section[id] > .sec-head > .sec-label::before, .page > section[id] > .sec-head > .sec-label::after{display:none !important;}
  .page > section[id] > .sec-head > .sec-label, .page > .goals h2{padding-left:0 !important; color:#000 !important;}
  .page > section[id] > .sec-head{display:block !important;}
  .page .unit-tag{color:#000 !important; background:none !important; border:1px solid #999 !important;}
  .page .dline:nth-child(even), .page .phrase, .page .script-box, .page > section[id] .exercise, .page .grammar{background:none !important;}
  .page .quran-box{outline:none !important; box-shadow:none !important;}
}

/* a word's English tag in the word table, e.g. مَنْ (relative): small and quiet; QSpeak never reads bracketed English */
.page td.ar .q-vtag{font:600 12.5px/1.2 'Karla', sans-serif; color:var(--ink-soft, #5B6672); letter-spacing:.02em; white-space:nowrap;}

/* Arabic that wraps inside a matching button keeps room for its vowel marks (owner, 25 Oct 2026: "letters and vowels must
   not overlap"): the buttons' own line spacing is "normal", too tight for two lines of vowelled Arabic */
.page .match-btn{line-height:1.6;}
.page .match-btn .ar, .page .match-btn .q-arun, .page .match-btn[lang="ar"]{line-height:1.8;}

/* a reading-comprehension question asked in Arabic (its stem is one Arabic span): the stem and its choices read right to
   left, أ) first at the right; the English-stem questions keep their left-to-right layout */
.page .mcq-item:has(> .stem > .ar:only-child){direction:rtl; text-align:right;}
.page .mcq-item:has(> .stem > .ar:only-child) .mcq-opts{padding:0 6px 0 0;}

/* Small text in the site's gold (#A67C3D) and terracotta read at 3.5-4.4:1 on white: a darker shade of each for small text
   only, at least 4.5:1 (WCAG AA); the old colours stay for borders, icons and large headings */
.page .dline .translit, .page table.vocab td.tl{color:#87642E;}
/* the listening script's speaker names are vowelled Arabic: an Arabic face at a readable size, not 12.5px Karla */
.page .script-line .who{font-family:'Amiri','Arial',serif; direction:rtl; text-align:right; font-size:15px; color:#87642E;}
@media (max-width:820px){ .page .script-line .who{font-size:17px;} }   /* as shared.css's phone size */

/* ---------- the Arabic face: Amiri first (owner, 26 Oct 2026, STY-06) ----------
   The pages' inline styles put Arial first, so Windows showed Arial's Arabic; every Arabic text on the chapter and exam
   pages now starts with Amiri, as the reader, the GCSE pages and the portal do. One :is() list, so the rule weighs as its
   heaviest entry (details.answers .ans-body .ar) and outranks every inline rule (table.vocab td.ar, .mcq-item .stem .ar…). */
.page :is(.ar, .arabic, h1.chapter-title, .reading-passage, .fill-blank, .quran-box .ayah, .quran-gloss .g-ar,
  .q-arun, .q-rc-ar, .q-cr-passage, .tutor-ar, .tutor-input, .tutor-chip b, details.answers .ans-body .ar){font-family:'Amiri','Arial',serif;}

/* ======================= Site review, 29 Oct 2026 (shared.js, reading-check.js) ======================= */

/* ---------- the run-up: the speaker tip (until dismissed), the goals (folded on phones), the teacher's links ---------- */
.page > .audio-note{align-items:center;}
.page > .audio-note.q-tip-gone{display:none;}
.q-tip-x{flex:none; align-self:flex-start; margin:-6px -10px -6px auto; box-sizing:border-box; width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer;
  border:none; background:transparent; color:var(--ink-soft, #5B6672); font:400 24px/1 'Karla', sans-serif;}
.q-tip-x:hover{background:var(--st-line-soft); color:var(--st-head);}
.q-tip-x:focus-visible{outline:2px solid var(--teal, #B85C38); outline-offset:1px;}
.q-goals-more{display:none;}
@media (max-width:640px){
  .page > .goals.q-goals-fold:not(.q-open) ul{max-height:5.1em; overflow:hidden;}
  .page > .goals.q-goals-cut:not(.q-open) ul{-webkit-mask-image:linear-gradient(#000 50%, transparent); mask-image:linear-gradient(#000 50%, transparent);}
  .page > .goals .q-goals-more{display:inline-flex; align-items:center; min-height:44px; margin:4px 0 -6px; padding:0; border:none; background:none; cursor:pointer;
    font:700 14px/1 'Karla', sans-serif; color:var(--st-unit-ink);}
  .page > .goals .q-goals-more[hidden]{display:none;}
  .page > .goals .q-goals-more::after{content:"▾"; margin-left:6px; font-size:12px;}
  .page > .goals.q-open .q-goals-more::after{content:"▴";}
  .q-tip-x{width:44px; height:44px;}
  /* the "Report a problem" edge tab (feedback.css) sits on the left edge on phones: keep the tip's speaker clear of it */
  .page > .audio-note{padding-left:32px;}
}
.page > .q-start-note[hidden]{display:none;}
.q-teach-pill{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-6px 0 18px; padding:8px 12px; border-radius:var(--st-r-sm);
  border:1px dashed var(--st-line); background:var(--st-glass); font:600 14px/1.3 'Karla', sans-serif;}
.q-teach-k{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft, #5B6672); margin-right:2px;}
.q-teach-pill a{display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:100px; border:1px solid var(--st-line);
  background:var(--st-paper); color:#A9532F; font-weight:700; text-decoration:none;}
.q-teach-pill a:hover{border-color:#A9532F;}
@media (pointer:coarse){ .q-teach-pill a{min-height:44px;} }

/* ---------- Listening: the script waits until the conversation has been heard ---------- */
.q-script-fold{margin:4px 0 16px;}
.q-script-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;}
.q-script-toggle{display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; min-height:44px; padding:0 18px; border-radius:100px; cursor:pointer;
  border:1.5px dashed var(--st-skills-line); background:var(--st-skills-tint); color:var(--st-skills-ink); font:700 14.5px/1 'Karla', sans-serif;}
.q-script-toggle:hover{border-color:var(--st-skills);}
.q-script-fold.q-open .q-script-toggle{border-style:solid; background:var(--st-paper);}
.q-script-hint{font:600 13.5px/1.4 'Karla', sans-serif; color:var(--ink-soft, #5B6672);}
.q-script-inner{margin-top:12px;}
.q-script-inner[hidden]{display:none;}

/* ---------- checking: ✓ / ✗ on what was chosen, the second try, the messages ---------- */
.page :is(.quiz-opt, .tf-btn, .match-btn).correct::after{content:" ✓"; font-weight:800;}
.page :is(.quiz-opt, .tf-btn, .match-btn).incorrect::after{content:" ✗"; font-weight:800;}
.page .match-btn.correct .match-badge, .page .match-btn.incorrect .match-badge{margin-inline-end:4px;}
.page .gap-slot.correct::after{content:"✓"; margin-inline-start:4px; font-size:.7em;}
.page .gap-slot.incorrect::after{content:"✗"; margin-inline-start:4px; font-size:.7em;}
.page .q-held{cursor:default;}
.page .quiz-opt:not([disabled]).incorrect:hover{border-color:#A23B32;}
.q-check-empty, .q-rq-msg{margin:8px 0 0; color:#8A4B00; font:600 15px/1.4 'Karla', sans-serif;}
.q-check-empty[hidden], .q-rq-msg:empty{display:none;}
.q-try-note{display:block; margin-top:4px; font-weight:600; font-size:14px; color:var(--ink, #24262B);}
.q-try-sub{font-weight:600; font-size:14px;}
.q-try-again{font:700 15px/1 'Karla', sans-serif; min-height:44px; padding:8px 18px; margin:0 0 12px; border-radius:100px; cursor:pointer;
  border:1px solid var(--teal, #B85C38); background:var(--bg-panel, #FBFDFE); color:#A9532F;}

/* the Reading's questions, click-and-check (reading-check.js) */
.q-rq{margin-top:6px;}
.q-rq .quiz-opt{display:block; width:100%; box-sizing:border-box; min-height:44px; margin:6px 0; padding:8px 14px; border-radius:10px; cursor:pointer;
  border:1px solid var(--st-line); background:var(--st-paper); color:var(--ink, #24262B); font:inherit; text-align:inherit;}
.q-rq .quiz-opt:hover:not([disabled]){border-color:var(--st-skills);}
.q-rq .quiz-opt.selected{border-color:var(--st-skills); background:var(--st-skills-tint);}
.q-rq .quiz-opt.correct{border-color:#2E6B47; background:var(--st-ok-bg); color:var(--st-ok);}
.q-rq .quiz-opt.incorrect{border-color:#A23B32; background:#F5DEDA; color:#A23B32;}
.q-rq .quiz-opt[disabled]{cursor:default;}
.q-rq .mcq-opts{display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:6px 0 4px;}
.q-rq .mcq-opts .quiz-opt{margin:0;}
.q-rq .mcq-item{margin-bottom:16px;}
@media (min-width:560px){ .q-rq .mcq-opts{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.q-rq-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px;}
.q-rq .q-rq-check{min-height:44px; margin-top:0;}
.q-rq-score{margin:12px 0 0; padding:12px 16px; border-radius:var(--st-r-sm); background:var(--st-skills-tint); color:var(--st-skills-ink); font:600 15px/1.4 'Karla', sans-serif;}
.q-rq-score[hidden]{display:none;}
.q-rq-score b{font-weight:800;}
.q-rq:not(.q-checked) > details.answers{display:none;}

/* ---------- the week's end: what was won, what comes next ---------- */
.q-cel-facts{list-style:none; margin:4px auto 12px; padding:0; max-width:400px; text-align:left; font-size:15px; line-height:1.45;}
.q-cel-facts li{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px dashed #9FCBAE;}
.q-cel-facts li:first-child{border-top:none;}
.q-cel-ico{flex:none; width:22px; text-align:center; color:#2E6B47;}
.q-cel-facts a{color:#A9532F; font-weight:700; white-space:nowrap;}
.q-cel-facts b{white-space:nowrap;}
.q-tickall{box-sizing:border-box; width:100%; max-width:480px; margin:0 auto; padding:12px 16px; border-radius:14px; text-align:center;
  border:1px dashed var(--st-line); background:var(--st-paper); font:600 14.5px/1.4 'Karla', sans-serif; color:var(--ink-soft, #5B6672);}
.q-tickall[hidden]{display:none;}
.q-tickall p{margin:0 0 8px;}
.q-tickall .q-tickall-done{margin:0; color:var(--st-ok); font-weight:700;}
.q-tickall-btn{min-height:44px; padding:0 18px; border-radius:100px; cursor:pointer; border:1px solid var(--st-ok); background:var(--st-ok-bg); color:var(--st-ok); font:700 14.5px/1 'Karla', sans-serif;}
/* the last week of a level, done: a link to the dashboard's level card (shared.js addCompleteControl, level-end.js) */
.q-level-note{box-sizing:border-box; width:100%; max-width:480px; margin:0 auto; padding:12px 16px; border-radius:14px; text-align:center;
  background:var(--st-ok-bg); border:1px solid var(--st-ok); font:500 15px/1.45 'Karla', sans-serif; color:var(--ink, #24262B);}
.q-level-note[hidden]{display:none;}
.q-level-note b{color:var(--st-ok);}
.q-level-note a{color:#8E4127; font-weight:700;}   /* the deep terracotta (portal.css --cta-deep): 5.9:1 on the green note (#A9532F is 4.4:1, under AA) */
.q-upnext{box-sizing:border-box; width:100%; max-width:480px; margin:0 auto; padding:18px 20px; border-radius:16px; text-align:left;
  background:var(--st-paper); border:1px solid var(--st-line); box-shadow:var(--st-shadow); font-family:'Karla', sans-serif; color:var(--ink, #24262B);}
.q-upnext[hidden]{display:none;}
.q-upnext-k{font-size:12.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--st-unit-ink);}
.q-upnext-ar{margin:8px 0 0; font-family:'Amiri', 'Arial', serif; font-size:26px; line-height:1.7; text-align:right; color:var(--st-head);}
.q-upnext-en{font-family:'Lora', Georgia, serif; font-weight:600; font-size:19px; line-height:1.3; color:var(--st-head); margin:2px 0 8px;}
.q-upnext-goal, .q-upnext-opens{margin:6px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-soft, #5B6672);}
.q-upnext-goal[hidden]{display:none;}
.q-upnext-goal b, .q-upnext-opens b{color:var(--ink, #24262B);}
.q-upnext-go{display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:0 20px; border-radius:100px; background:#A9532F; color:#fff; font-weight:700; text-decoration:none;}
.q-upnext-go:hover{filter:brightness(1.08);}
.q-upnext-alt{display:inline-block; margin:14px 0 0 16px; font-size:14.5px; font-weight:600; color:var(--ink-soft, #5B6672); text-decoration:underline; text-underline-offset:2px;}
.q-upnext.q-upnext-locked{background:var(--st-well);}
.q-upnext.q-upnext-locked .q-upnext-k{color:var(--ink-soft, #5B6672); letter-spacing:.04em; text-transform:none; font-size:15px;}
.q-upnext-meanwhile{margin:8px 0 10px; font-size:14.5px; color:var(--ink-soft, #5B6672);}
.q-upnext-acts{display:flex; flex-wrap:wrap; gap:8px;}
.q-upnext-act{display:inline-flex; flex-direction:column; justify-content:center; box-sizing:border-box; min-height:52px; padding:6px 16px; border-radius:14px;
  border:1px solid var(--st-line); background:var(--st-paper); color:var(--st-head); text-decoration:none; font-size:14.5px; line-height:1.25;}
.q-upnext-act b{font-weight:800; color:#A9532F;}
.q-upnext-act span{font-size:12.5px; font-weight:600; color:var(--ink-soft, #5B6672);}
.q-upnext-act span:empty{display:none;}
.q-upnext-act:hover{border-color:#A9532F;}
@media (max-width:480px){ .q-upnext-act{flex:1 1 100%;} }
@media print{ .q-teach-pill, .q-script-head, .q-listen-again, .q-rq-bar, .q-upnext, .q-tickall, .q-tip-x, .q-goals-more{display:none !important;}
  .q-script-inner[hidden]{display:block !important;} .page > .goals.q-goals-fold ul{max-height:none !important; -webkit-mask-image:none !important; mask-image:none !important;} }

/* ======================= Arabic never overlapped (owner, 5 Nov 2026; tools/test_arabic_overlap.js) =======================
   Amiri's hamza with a ḍammah or tanwīn stands up to 1.57em above the line and its tails reach 0.52em below: Arabic that
   wraps is set at 2 to 2.1, so the marks of one line clear the tails of the line above. A negative margin gives a
   single line back the extra height where the old line height was enough for it. */
.page .quran-gloss .g-ar{line-height:1.9;}
/* "Āyāt you can now read" sits outside .page (before #q-complete-box) and each word has its English straight under it:
   the kasra under a final letter (ٱلرَّحِيمِ) needs the room */
.q-ayat .quran-gloss .g-ar{line-height:2.1;}
.page .sec-note .q-arun{line-height:2;}
.page .q-rc-ar{line-height:2.1; margin-block:-.3em;}
.page .tf-item .ar{line-height:2.1; margin-block:-.2em;}