/* ------------------------------------------------------------------
   Spiritual Socialist Party — the primer
   Read after style.css and party.css, by learn-islam.html alone:
   ila Allah again, as twelve lessons in two units rather than one
   page.
   ------------------------------------------------------------------ */

/* Like the readers, the primer is a long column, so it lets go of the
   centring every short page uses and runs down from the top. The name,
   the rule, the basmala and the lesson names stay put; the lesson
   beneath them changes.                                               */

body.primer{
  height:auto;
  display:block;
  place-items:normal;
  padding:clamp(44px,9vh,96px) max(22px,env(safe-area-inset-right))
          clamp(56px,11vh,112px) max(22px,env(safe-area-inset-left));

  /* Arabic is set in Noto Sans Arabic, which carries the even stroke of
     Inter and of the front page's shahada sigil while keeping the letters
     of every mushaf. Inter has no Arabic, so naming the face after it
     lets each Arabic letter find it, alone or inside an English line. */
  font-family:Inter,"Noto Sans Arabic","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --soft:rgba(233,224,204,.74);       /* bone held back: meanings, notes  */
  --line:rgba(233,224,204,.10);       /* the hairline between steps       */
  --gold-faint:rgba(200,164,76,.26);  /* the site's resting link line     */
}

.primer main{gap:clamp(28px,4.6vh,46px)}

.primer p{margin:0}

[lang="ar"]{letter-spacing:0}

/* --- the opening -------------------------------------------------- */

.basmala{
  font-size:clamp(1.15rem,3.6vw,1.4rem);
  font-weight:300;
  line-height:1.9;
  color:var(--soft);
}

/* --- the lesson names --------------------------------------------- */
/* Small capitals like "return", each with the gate's gold line drawn
   under the letters alone: full gold under the lesson being read, the
   faint resting line under the pointer, none otherwise. The part
   names of Daily Salah, Ramadan and the Two Refuges are set the same
   way (.parts, see "a lesson's parts" below). A name never breaks
   across lines, and its hyphens are plain ones, which Inter has: the
   unbreakable hyphen is not in Inter, and borrowed from Noto Sans
   Arabic it set Al-Fatiha a little below its neighbours.              */

.lessons ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px clamp(22px,3.4vw,38px);
}

.lessons a,
.parts a{
  position:relative;
  display:inline-block;
  padding:10px 0 12px;
  margin-right:-.3em;               /* the trailing letter-space, given back */
  font-size:clamp(.72rem,2vw,.84rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--muted);
  transition:color 300ms ease;
}

.lessons a::after,
.parts a::after{
  content:"";
  position:absolute;
  left:0;
  right:.3em;
  bottom:4px;
  height:1px;
  background:transparent;
  transition:background-color 400ms ease;
}

.lessons a:hover,
.lessons a:focus-visible,
.lessons a[aria-current],
.parts a:hover,
.parts a:focus-visible,
.parts a[aria-current]{color:var(--bone)}

.lessons a:hover::after,
.lessons a:focus-visible::after,
.parts a:hover::after,
.parts a:focus-visible::after{background:var(--gold-faint)}

.lessons a[aria-current]::after,
.parts a[aria-current]::after{background:var(--gold)}

/* three over three on a phone, the columns aligned */
@media (max-width:560px){
  .lessons ul{
    display:grid;
    grid-template-columns:repeat(3,auto);
    justify-content:center;
    justify-items:center;
    column-gap:clamp(18px,6vw,30px);
  }
}

/* --- a lesson ----------------------------------------------------- */

.lesson{
  width:100%;
  max-width:44rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,50px);
}

.lesson[hidden]{display:none}

.lesson.arriving{animation:arrive 700ms ease both}

@keyframes arrive{from{opacity:0}}

/* Its name in Arabic, in the large light hand of the Party pages' ways,
   with the English beneath in the small capitals of their lines. */

.lesson-head,
.sub-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-weight:300;
}

.lesson-head:focus{outline:none}

.lesson-ar{
  font-size:clamp(2.1rem,7.4vw,2.9rem);
  line-height:1.55;
  color:var(--bone);
}

.lesson-en,
.sub-en,
.stage-note,
.pos-term,
.kind,
.hour{
  font-size:clamp(.62rem,1.2vw,.72rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}

.lesson-en,
.sub-en,
.stage-note{text-indent:.32em}     /* centred: the trailing space balanced */

/* --- reading text ------------------------------------------------- */

.prose{
  max-width:34rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--soft);
}

.prose p{text-wrap:pretty}

.prose p + p{margin-top:.75em}

.translit{
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.02rem,2.8vw,1.12rem);
  line-height:1.5;
  color:var(--bone);
}

.meaning{
  font-size:.95rem;
  line-height:1.55;
  color:var(--soft);
}

.lesson b{font-weight:500}
.lesson i{font-weight:300}

/* a way to another lesson, inside a sentence */
.lesson p a{
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid var(--gold-faint);
  transition:border-color 300ms ease;
}

.lesson p a:hover,
.lesson p a:focus-visible{border-bottom-color:var(--gold)}

/* --- the Shahada, and the ayat of Al-Fatiha ----------------------- */
/* Each line as a stanza: the Arabic, how it sounds, what it says. */

.verses,
.ayat{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,46px);
}

.verse{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.verse p{text-wrap:balance}

.ayat{max-width:38rem}

/* an ayah's last word and its ring never part at a line's end */
.tail{white-space:nowrap}

.ar-display{
  font-size:clamp(1.75rem,6.4vw,2.4rem);
  font-weight:300;
  line-height:1.75;
  color:var(--bone);
}

.ar-verse{
  font-size:clamp(1.45rem,4.8vw,1.85rem);
  font-weight:400;
  line-height:2;
  color:var(--bone);
}

/* The end of each ayah, marked as a mushaf marks it: its number in a
   ring — here a ring of the gold hairline. */

.ayah-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.9em;
  height:1.9em;
  margin-inline-start:.15em;
  border:1px solid rgba(200,164,76,.55);
  border-radius:50%;
  font-size:.56em;
  font-weight:400;
  line-height:1;
  color:var(--gold);
  vertical-align:middle;
}

/* --- Wudu and Ghusl: the steps ------------------------------------ */
/* In order, under one another. The obligatory steps carry gold
   numerals, so the fard at the centre of each can be seen at a glance;
   what each step is stands in its own column at the right.            */

.steps,
.positions{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:38rem;
  text-align:left;
  border-top:1px solid var(--line);
}

.steps li{
  display:grid;
  grid-template-columns:2.2rem 1fr auto;
  column-gap:clamp(12px,2.6vw,24px);
  align-items:baseline;
  padding:15px 0 16px;
  border-bottom:1px solid var(--line);
}

/* the numeral, the step, what it is; a note, if any, beneath the step */
.step-no{grid-column:1;grid-row:1}
.step-main{grid-column:2;grid-row:1;line-height:1.6}
.kind{grid-column:3;grid-row:1}
.steps .step-note{grid-column:2;grid-row:2}

.step-no{
  font-size:1.3rem;
  font-weight:300;
  line-height:1;
  text-align:center;
  color:var(--muted);
}

.fard .step-no{color:var(--gold)}

.steps .step-note{
  margin-top:4px;
  font-size:.92rem;
  color:var(--soft);
}

.kind{
  margin-right:-.32em;
  white-space:nowrap;
}

.fard .kind{color:var(--soft)}

/* on a phone the label drops beneath the step, still before its note */
@media (max-width:560px){
  .steps li{grid-template-columns:1.8rem 1fr}
  .kind{grid-column:2;grid-row:2;margin-top:8px}
  .steps .step-note{grid-row:3;margin-top:7px}
}

/* --- Salah -------------------------------------------------------- */
/* Its stages, one raka at a time. (The five prayers it once opened on
   are now Daily Salah's, at the end of this file.)                     */

.stage{
  width:100%;
  max-width:38rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,3vh,26px);
}

.stage-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:clamp(1.3rem,3.8vw,1.55rem);
  font-weight:300;
  line-height:1.2;
}

.positions li{
  display:grid;
  grid-template-columns:8.4rem 1fr;
  column-gap:clamp(14px,3vw,26px);
  padding:15px 0 16px;
  border-bottom:1px solid var(--line);
}

.pos-name{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:1.02rem;
  line-height:1.6;
}

.pos-body{line-height:1.6}

.pos-body p + p{margin-top:5px}

.pos-body .meaning{margin-top:2px}

@media (max-width:560px){
  .positions li{grid-template-columns:1fr;row-gap:8px}
  .pos-name{flex-direction:row;align-items:baseline;gap:14px}
}

/* --- the alphabet ------------------------------------------------- */
/* Read from the right, as the letters are. */

.letters{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:36rem;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(16px,2.8vh,26px) 6px;
}

.letters li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.glyph{
  font-size:clamp(1.9rem,6vw,2.35rem);
  font-weight:300;
  line-height:1.5;
  color:var(--bone);
}

.roman{
  font-size:.86rem;
  color:var(--soft);
}

.sub-ar{
  font-size:clamp(1.6rem,5vw,2rem);
  line-height:1.6;
  color:var(--bone);
}

.vowels{
  max-width:28rem;
  grid-template-columns:repeat(4,1fr);
}

.vowel{
  margin-top:2px;
  font-size:.8rem;
  line-height:1.4;
  color:var(--muted);
}

@media (max-width:480px){
  .letters{grid-template-columns:repeat(4,1fr)}
}

/* --- the way on --------------------------------------------------- */
/* The next lesson, set as islam.html sets its ways. */

.onward{margin-top:clamp(6px,2vh,18px)}

/* --- quiet motion, and paper -------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .lesson.arriving{animation:none}
  .lessons a,.lessons a::after{transition:none}
}

/* Printed, the primer is all twelve lessons, dark on white. */

@media print{
  body.primer{
    --bone:#000;
    --muted:#555;
    --soft:#222;
    --line:#ccc;
    --gold:#8a6d1f;
    background:#fff;
    padding:0;
  }
  .primer main{animation:none}
  .lesson[hidden]{display:flex}
  .lesson + .lesson{break-before:page}
  .lessons,.onward,.return{display:none}
}


/* --- the Arabic, heavier ------------------------------------------ */
/* Every Arabic word on the page — the basmala, the lesson names, the
   Shahada, the ayat, the letters, the terms set inside English lines —
   is set at medium weight, so the script carries a fuller stroke than
   the light Latin around it. One number: change it here to retune all
   of it. The page loads Noto Sans Arabic from 300 to 700.              */

.primer [lang="ar"]{font-weight:500}


/* --- the stanzas, set as a column --------------------------------- */
/* Wherever a line comes as Arabic, transliteration and meaning — the
   Shahada and the ayat of Al-Fatiha — the three share one narrow
   column: the Arabic set from the right, where it begins, and how it
   sounds and what it says set from the left, where they begin.        */

.verses,
.ayat{
  max-width:30rem;
  align-items:stretch;
}

.verse{align-items:stretch}

.verse [lang="ar"]{text-align:right}

.verse .translit,
.verse .meaning{
  text-align:left;
  text-wrap:pretty;
}

.verse .translit{margin-top:4px}


/* a second recitation within one position — on the Tashahhud, the
   Shahada after the Tahiyyat — stands a little apart from the first */
.pos-body p.then{margin-top:14px}


/* --- the packet's palette ----------------------------------------- */
/* The primer is set in the colours of the La ilaha ila Allah packet
   (documents/la-ilaha-ila-allah.pdf): white paper, its soft graphite
   type, its pale grey hairlines, and its bright gold. The five prayers
   take the colours the packet's prayer wheel gives them. Only this page
   reads this file, so the rest of the site keeps its dark ground.      */

html{color-scheme:light}

body.primer{
  --ground:#ffffff;
  --bone:#3d3d3d;                     /* the packet's darkest type        */
  --soft:#717171;                     /* its reading grey                 */
  --muted:#9f9f9f;                    /* its small labels                 */
  --line:#e4e4e4;                     /* its hairlines                    */
  --gold:#ffc900;                     /* its gold                         */
  --gold-faint:rgba(255,201,0,.45);
  --fajr:#ffc900;                     /* the prayer wheel's five colours  */
  --zuhr:#ff5b59;
  --asr:#7ec636;
  --maghrib:#58b1ff;
  --isha:#b9bfff;
  --wheel:#d2d2d2;                    /* the wheel's hours without prayer */
  --bracket:#cfcfcf;                  /* the bracket of the Three Refuges */
  background:var(--ground);
  color:var(--bone);
}

.primer .rule{background:linear-gradient(90deg,rgba(255,201,0,0),var(--gold),rgba(255,201,0,0))}
.primer .ayah-no{border-color:var(--gold)}
.primer .entries a,
.primer .entry-title{border-bottom-color:var(--gold-faint)}
.primer .entries a:hover,
.primer .entries a:focus-visible,
.primer .entries a:hover .entry-title,
.primer .entries a:focus-visible .entry-title{border-bottom-color:var(--gold)}
.primer .return{border-bottom-color:var(--line)}
.primer .return:hover,
.primer .return:focus-visible{border-bottom-color:var(--gold)}

/* the prayer wheel's colours: Fajr gold, Zuhr red, Asr green,
   Maghrib blue, Isha lavender */
.prayers > li:nth-child(1) .prayer{color:var(--fajr)}
.prayers > li:nth-child(2) .prayer{color:var(--zuhr)}
.prayers > li:nth-child(3) .prayer{color:var(--asr)}
.prayers > li:nth-child(4) .prayer{color:var(--maghrib)}
.prayers > li:nth-child(5) .prayer{color:var(--isha)}
.prayer{font-weight:500}

@media print{
  body.primer{--bone:#000;--muted:#555;--soft:#222;--line:#ccc;--gold:#8a6d1f;--bracket:#999}
  .prayers .prayer{color:#000}
}


/* --- Allah, in gold ----------------------------------------------- */
/* As the packet sets it: wherever the name stands in Arabic, it is
   gold. Each is a <span class="allah"> around the whole word.          */

.allah{color:var(--gold)}


/* --- Isha, then dua ----------------------------------------------- */
/* Isha answers a touch and nothing marks it. The wolf of the ghost page
   rises and falls over a little more than a second, never quite whole;
   its black ground is masked away by its own light, so on the white
   page only the stardust shows. After that, dua leads to the ghost page,
   still set as the sentence around it.                                 */

#isha{cursor:default;-webkit-tap-highlight-color:transparent}

.apparition{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:0;
  background:url("../img/technicolor-wolf.jpg") center / min(64vw,42vh,352px) auto no-repeat;
  -webkit-mask:url("../img/technicolor-wolf.jpg") center / min(64vw,42vh,352px) auto no-repeat;
  mask:url("../img/technicolor-wolf.jpg") center / min(64vw,42vh,352px) auto no-repeat luminance;
}

.apparition.rising{animation:apparition 1300ms ease-in-out both}

@keyframes apparition{
  0%  {opacity:0}
  50% {opacity:.82}
  100%{opacity:0}
}

.lesson p a.dua-way{
  color:inherit;
  border-bottom:0;
}


/* --- the Shahada, letter by letter -------------------------------- */
/* Each line of the Shahada opens onto the first page of the La ilaha
   ila Allah packet, one line at a time. From the right: the words, what
   each says beneath it; the letters bare, as written, each with its
   sound; the letters again with their vowels, as read, each with its
   syllable. Then, past the packet's abc, the line in Latin letters word
   by word — the syllables run together — with each word's meaning
   beneath, read from the left. Allah is gold where the packet sets it
   gold: in the line and among the words, not among the letters.

   Each line is a button. With a mouse, the rectangle around the line
   dims under the pointer, and after a moment "letter by letter" comes up
   beside the pointer, as a tooltip does; on a touch screen the same
   rectangle is what is touched, and it dims while pressed. Nothing marks
   the lines otherwise. The rectangle is the line's ::before, reaching a
   little past the line on every side, so it can be touched by its edges
   as well. The tooltip is one element, .line-tip, made by the script and
   moved with the pointer; it says what the line's button says — "letter
   by letter" here, "word by word" on the ayat of Al-Fatiha, which are
   buttons in the same way (see Al-Fatiha, word by word, below). Inside each line a <button>, visually hidden,
   is what a keyboard or a screen reader finds; its focus lights the
   rectangle, ringed in gold, with the tooltip under it. The sheet is a
   <dialog>, white on a veil of the page; Escape, the cross or a touch on
   the veil closes it. The script at the foot of the page makes the lines
   buttons and opens the sheets; without it, both sheets stand under the
   lines, and printed, neither prints.                                  */

.verse,
.opens{position:relative}

.opens{
  cursor:pointer;
  isolation:isolate;                /* the rectangle stays behind its line */
  -webkit-tap-highlight-color:transparent;
}

.opens::before{                     /* the rectangle */
  content:"";
  position:absolute;
  inset:-14px -20px;
  z-index:-1;
  border-radius:10px;
  background:rgba(61,61,61,.06);
  opacity:0;
  transition:opacity 250ms ease,background-color 150ms ease;
}

/* under a pointer that can hover; a finger leaves no hover behind */
@media (hover:hover) and (pointer:fine){
  .opens:hover::before{opacity:1}
}

/* pressed, by finger or by mouse: a shade deeper */
.opens:active::before{
  opacity:1;
  background:rgba(61,61,61,.1);
}

/* the focus of the hidden button, from the keyboard */
.opens:has(.line-button:focus-visible)::before{
  opacity:1;
  box-shadow:0 0 0 1px var(--gold);
}

.line-tip{
  position:fixed;
  left:0;
  top:0;
  z-index:5;
  padding:7px 10px 7px calc(10px + .3em);   /* the trailing letter-space, balanced */
  border-radius:4px;
  background:var(--bone);
  color:var(--ground);
  font-size:.6rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity 150ms ease,visibility 0s linear 150ms;
}

.line-tip.showing{                  /* after a moment's hover */
  opacity:1;
  visibility:visible;
  transition:opacity 180ms ease 350ms,visibility 0s linear 350ms;
}

.line-tip.at-once{transition:opacity 180ms ease,visibility 0s}

.line-button{                         /* visually hidden, as .visually-hidden */
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(50%);
}

.line-button[hidden]{display:none}

/* on a phone the rectangle keeps inside the page's margins */
@media (max-width:560px){
  .verse.opens::before{inset:-12px -14px}
}

/* the sheet */

.breakdown{
  width:min(54rem,calc(100% - 24px));
  max-width:none;
  max-height:calc(100% - 24px);
  max-height:calc(100svh - 24px);
  margin:auto;
  padding:0;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--ground);
  color:var(--bone);
  box-shadow:0 30px 90px -24px rgba(61,61,61,.24),0 2px 10px rgba(61,61,61,.05);
  overflow:hidden;                  /* the inside scrolls; the cross stays */
}

.breakdown[open]{
  display:flex;
  flex-direction:column;
  animation:arrive 450ms ease both;
}

.breakdown::backdrop{
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

.breakdown[open]::backdrop{animation:arrive 450ms ease both}

html.holding{overflow:hidden}       /* the page stays put beneath */

.breakdown-body{
  min-height:0;
  outline:none;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(50px,7vh,60px) clamp(16px,4.6vw,52px) clamp(30px,5.4vh,50px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(24px,4.2vh,38px);
}

.shut{
  position:absolute;
  top:6px;
  right:6px;
  z-index:1;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 300ms ease;
}

.shut svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
}

.shut:hover,
.shut:focus-visible{color:var(--bone)}

.shut:focus{outline:none}
.shut:focus-visible{outline:1px solid var(--gold);outline-offset:-5px}

/* the line, and the way it reads: an arrow under where it begins */

.breakdown-head{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;           /* in a right-to-left line, the right */
  gap:2px;
  font-size:clamp(1.3rem,4.2vw,1.6rem);
  font-weight:300;
  line-height:1.8;
  color:var(--bone);
}

.reading-way{
  width:56px;
  height:10px;
  margin-right:2px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* the words, side by side from the right; four rows run through them
   all — word, meaning, letters bare, letters voiced — held level by a
   subgrid, so a meaning that takes two lines moves every column alike */

.words{
  list-style:none;
  margin:0 0 calc(-1 * clamp(20px,3.4vh,30px));
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,auto);
  justify-content:space-between;
  column-gap:clamp(14px,2.6vw,30px);
  row-gap:0;
}

.word{
  grid-row:span 4;
  display:grid;
  grid-template-rows:subgrid;
  justify-items:center;
  align-items:start;
  margin-bottom:clamp(20px,3.4vh,30px);   /* between rows of words */
}

/* a browser without subgrid: the one meaning on two lines — Muhammad,
   peace be upon him — gives every meaning in its sheet the same room */
@supports not (grid-template-rows:subgrid){
  #shahada-second-line .word-en{min-height:2.7em}
}

.word-ar{
  font-size:clamp(1.45rem,4.4vw,1.85rem);
  line-height:1.8;
  color:var(--bone);
}

.word-en{
  font-size:.8rem;
  line-height:1.35;
  text-align:center;
  white-space:nowrap;
  color:var(--soft);
}

.spelling{
  display:flex;
  justify-content:center;
  gap:clamp(4px,1.1vw,10px);
  margin-top:clamp(12px,2.2vh,18px);
}

.cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:.95rem;
}

.cell-ar{
  font-size:clamp(1.15rem,3.4vw,1.4rem);
  line-height:1.9;
  color:var(--bone);
}

.cell-ro{
  font-size:.8rem;
  line-height:1.25;
  white-space:nowrap;
  color:var(--soft);
}

/* the packet's abc: the Arabic turned into Latin letters */

.abc{
  width:46px;
  height:46px;
  flex:none;
  fill:none;
  stroke:var(--soft);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.abc text{
  fill:var(--soft);
  stroke:none;
  font-size:9.5px;
  font-weight:400;
}

/* the line in Latin letters, word by word, each meaning beneath */

.assembled{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(6,auto);
  justify-content:space-between;
  gap:18px clamp(14px,2.6vw,30px);
  text-align:left;
}

.assembled li{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.as-ro{
  font-style:italic;
  font-weight:300;
  font-size:clamp(1rem,2.8vw,1.1rem);
  line-height:1.4;
  white-space:nowrap;
  color:var(--bone);
}

.as-en{
  font-size:.9rem;
  line-height:1.4;
  color:var(--soft);
}

.salawat{font-size:1.3em;line-height:1}

/* three words to a row where six will not fit, and on a phone the
   sheet takes nearly the whole screen, drawn a little closer; two to a
   row on the narrowest                                                 */

@media (max-width:660px){
  .words,
  .assembled{grid-template-columns:repeat(3,auto)}
}

@media (max-width:440px){
  .breakdown{width:calc(100% - 16px);max-height:calc(100% - 16px);max-height:calc(100svh - 16px)}
  .breakdown-body{padding-left:12px;padding-right:12px}
  .words,
  .assembled{column-gap:10px}
  .word-en{font-size:.74rem}
  .spelling{margin-top:10px}
}

@media (max-width:349px){
  .words,
  .assembled{grid-template-columns:repeat(2,auto)}
}

@media (prefers-reduced-motion:reduce){
  .breakdown[open],
  .breakdown[open]::backdrop{animation:none}
  .opens::before,.line-tip,.line-tip.showing,.shut{transition:none}
}

@media print{
  .opens::before,
  .line-tip,
  .breakdown,
  .breakdown[open]{display:none}
  html.holding{overflow:visible}
}


/* --- Al-Fatiha, word by word -------------------------------------- */
/* Each ayah of Al-Fatiha is a button as the lines of the Shahada are,
   and opens onto the third page of the La ilaha ila Allah packet, one
   ayah at a time: the ayah with its ring and the arrow under where it
   begins, then its words from the right, each with how it sounds
   beneath it and what it says beneath that. The sheet is the Shahada's
   (.breakdown), a little narrower, and the words are its .words grid,
   three rows to a word, held level by the subgrid. --n on each list is
   how many words its widest row holds; the seventh ayah keeps the
   packet's three phrases, each beginning a row (.starts). On a phone,
   two words to a row.                                                   */

.breakdown.word-sheet{width:min(46rem,calc(100% - 24px))}

/* an ayah too long for one line runs on as the lesson sets it, from the
   right, so the arrow stays under where it begins */
.word-sheet .breakdown-head{text-align:start}

.words.by-word{
  grid-template-columns:repeat(var(--n),auto);
  justify-content:center;
  column-gap:clamp(22px,4.6vw,52px);
}

.by-word .word{grid-row:span 3}

.by-word .starts{grid-column-start:1}   /* a phrase begins a row */

.word-ro{
  margin-top:2px;
  font-style:italic;
  font-weight:300;
  font-size:.95rem;
  line-height:1.4;
  white-space:nowrap;
  color:var(--bone);
}

.by-word .word-en{margin-top:3px}

@media (max-width:560px){
  .words.by-word{
    grid-template-columns:repeat(2,auto);
    column-gap:clamp(20px,8vw,44px);
  }
}

@media (max-width:440px){
  .breakdown.word-sheet{width:calc(100% - 16px)}
}


/* --- the alphabet, letter by letter ------------------------------- */
/* Each letter of the Alphabet lesson is a button as the lines are, and
   opens onto its row of the fifth page of the La ilaha ila Allah
   packet: its name, then its four forms from the right — alone, and as
   it begins, stands within and ends a word — and beside them, past a
   hairline, its Hebrew letter: mostly the one that holds its place in
   the alphabet, by the order and the numbers the two alphabets share
   (abjad), but samekh stands with ṣād and tsadi with ẓāʾ, as the packet
   sets them, and sīn has the Hebrew sin (shin with its dot on the
   left). Five letters (ث خ ذ ض غ) have no Hebrew letter of their own,
   and their sheets say whose shape they take. A
   letter that never joins the letter after it says so beneath. The
   tooltip over a letter is its name. The forms are written with a
   zero-width joiner (&#8205;) where a neighbour would join, so each
   takes its shape in a word without a drawn-out stroke to show it.
   Hebrew is set in Noto Sans Hebrew, loaded on this page for it.       */

.primer [lang="he"]{
  font-family:"Noto Sans Hebrew",Inter,"Noto Sans",system-ui,sans-serif;
  font-weight:400;
}

.letters .opens::before{inset:-8px -2px;border-radius:8px}

.breakdown.letter-sheet{width:min(44rem,calc(100% - 24px))}

.letter-says{
  margin-top:calc(-1 * clamp(10px,2vh,18px));
  font-size:1rem;
  color:var(--soft);
}

.letter-ro{
  font-style:italic;
  font-weight:300;
  color:var(--bone);
}

.letter-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(22px,4.4vw,44px);
}

.forms{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,auto);
  column-gap:clamp(16px,3.2vw,34px);
  row-gap:22px;
}

.forms li,
.hebrew{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.form-ar,
.hebrew-he{
  font-size:clamp(2.3rem,7.4vw,2.9rem);
  line-height:1.7;
  color:var(--bone);
}

.form-en{                           /* small capitals, as the lesson names */
  direction:ltr;
  padding-left:.26em;               /* the trailing letter-space, balanced */
  font-size:.6rem;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}

.hebrew{
  min-width:7rem;
  padding-inline-start:clamp(22px,4.4vw,44px);
  border-inline-start:1px solid var(--line);   /* the packet's hairline */
}

.hebrew-ro{
  margin-top:3px;
  font-style:italic;
  font-weight:300;
  font-size:.95rem;
  color:var(--bone);
}

.hebrew-final,
.hebrew-none{
  direction:ltr;
  margin-top:4px;
  font-size:.82rem;
  line-height:1.5;
  text-align:center;
  color:var(--soft);
}

.hebrew-final [lang="he"]{font-size:1.35em;color:var(--bone)}

.hebrew-none{max-width:9.5rem}

.hebrew-none [lang="ar"]{font-size:1.25em;color:var(--bone)}

.hebrew-dash{color:var(--line)}       /* no letter: a hairline dash in its place */

.letter-note{
  font-size:.9rem;
  color:var(--soft);
}

/* on a phone: the forms two by two, the Hebrew beneath them */
@media (max-width:560px){
  .letter-row{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .forms{
    grid-template-columns:repeat(2,auto);
    column-gap:clamp(36px,14vw,64px);
  }
  .hebrew{
    align-self:stretch;
    padding:18px 0 0;
    border-inline-start:0;
    border-top:1px solid var(--line);
  }
  .hebrew-none{max-width:none}
}


/* --- the two units ------------------------------------------------ */
/* The lesson names stand in two units of six, each under its name in
   the smallest capitals: Unit One, the six of the packet — Shahada to
   the Alphabet — and beneath it, past a short hairline, Unit Two: Daily
   Salah, Ramadan and the Hadith of Gabriel on one line; on the next,
   Al-Ikhlas and the Two Refuges held together as the Three Refuges,
   al-Mu'awwidhat ath-Thalath — a hairline bracket under the two names,
   its ends turned up to them, the group's name set in its middle and
   its Arabic name, in Latin letters, beneath — and last the Night
   Journey. The name of the unit being read darkens, as the bracket and
   its names do while either of the two is read. A unit's name and the
   group's come first in the page, so a screen reader hears each before
   the lessons it holds; the group's are drawn beneath its two. (The
   second unit's list keeps its first class, .layer-two, and the group
   its, .quls.)                                                         */

.lessons{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lessons .unit{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.lessons .unit + .unit{
  position:relative;
  margin-top:clamp(8px,1.4vh,14px);
  padding-top:clamp(14px,2.2vh,20px);
}

.lessons .unit + .unit::before{       /* the hairline between the units */
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:44px;
  height:1px;
  margin-left:-22px;
  background:var(--line);
}

.unit-name{
  font-size:.6rem;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.34em;
  text-indent:.34em;                  /* the trailing letter-space, balanced */
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--muted);
  transition:color 300ms ease;
}

.unit:has(a[aria-current]) .unit-name{color:var(--soft)}

/* the Three Refuges and the Night Journey on a line of their own,
   beneath the first three of Unit Two: the break between is the list's
   last box, drawn before them */
.lessons .layer-two::after{
  content:"";
  order:1;
  flex-basis:100%;
  height:0;
  margin-top:-4px;                    /* the row gap it would double */
}

.lessons .quls,
.lessons .quls ~ li{order:2}

.lessons .quls{
  display:grid;
  justify-content:center;
}

.lessons .quls ul{grid-row:1}

.quls-name{
  grid-row:2;
  display:flex;
  align-items:center;
  gap:.9em;
  margin-top:2px;
  font-size:.56rem;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.3em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--muted);
  transition:color 300ms ease;
}

.quls-name::before,
.quls-name::after{                    /* the bracket, in two halves */
  content:"";
  flex:1;
  height:6px;
  transform:translateY(-3.5px);       /* its line through the middle of the name */
  border-bottom:1px solid var(--bracket);
  transition:border-color 300ms ease;
}

.quls-name::before{border-left:1px solid var(--bracket)}

.quls-name::after{
  margin-left:-.3em;                  /* the trailing letter-space, given back */
  border-right:1px solid var(--bracket);
}

.quls-ro{                             /* the group's name as the Arabic has it */
  grid-row:3;
  margin-top:1px;
  font-size:.74rem;
  font-weight:300;
  font-style:italic;
  line-height:1.3;
  text-align:center;
  white-space:nowrap;
  color:var(--muted);
  transition:color 300ms ease;
}

.quls:has(a[aria-current]) .quls-name,
.quls:has(a[aria-current]) .quls-ro{color:var(--soft)}

.quls:has(a[aria-current]) .quls-name::before,
.quls:has(a[aria-current]) .quls-name::after{border-color:var(--muted)}

/* on a phone the first layer keeps its three columns; the second runs
   on as its names allow, each line centred */
@media (max-width:560px){
  .lessons .layer-two,
  .lessons .quls ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:clamp(18px,6vw,30px);
  }
  .lessons .quls ul{flex-wrap:nowrap}
}

@media (max-width:359px){
  .lessons .quls ul{column-gap:14px}
}


/* --- a lesson's parts --------------------------------------------- */
/* Daily Salah ends on two parts, Fard and Sunnah; Ramadan holds three
   — Sawm, then two surahs — and the Two Refuges two surahs; each is
   read one at a time. Their names stand over them as the lesson names
   stand over the lessons, the part being read underlined in gold. Each
   part is a <section class="part"> with its own address (#fard,
   #sunnah, #sawm, #alaq, #qadr, #falaq, #nas), and the lesson's own
   address shows its first part; its name in Arabic heads it, with the
   basmala where a surah opens, and its ayat open word by word as
   Al-Fatiha's do. Without the script the parts run down the lesson one
   after another; printed, all print.                                   */

.parts ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:clamp(30px,7vw,56px);
}

.part{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,5vh,50px);
}

.part[hidden]{display:none}

.part.arriving{animation:arrive 700ms ease both}

/* the basmala that opens each surah: the page's own, as it stands
   under the name */
.part .basmala,
#ikhlas .basmala{margin-bottom:calc(-1 * clamp(8px,1.6vh,16px))}


/* --- Daily Salah: the five prayers -------------------------------- */
/* The five prayers through the day, one beside another, as page 8 of
   the packet sets them: the sun as the hour finds it, the name in its
   colour, the name in Arabic, the hour, then under a hairline its
   rakahs in the order they are prayed — the fard numbered in gold, as
   the fard steps of Wudu and Ghusl are, the sunnah in grey. On a phone
   the prayers stand one under another, each read across, its rakahs
   beneath. Isha's name still answers a touch (see "Isha, then dua").  */

.prayers{
  list-style:none;
  margin:0;
  padding:26px 0 24px;
  width:100%;
  max-width:40rem;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  column-gap:6px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.prayers > li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.sun{                                 /* page 8's signs, drawn in its grey */
  width:38px;
  height:26px;
  margin-bottom:8px;
  fill:none;
  stroke:var(--soft);
  stroke-width:1.25;
  stroke-linecap:round;
}

.sun .shade{fill:var(--soft);stroke:none}

.prayer{
  font-size:clamp(1.15rem,2.6vw,1.4rem);
  color:var(--bone);
}

.prayer-ar{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--soft);
}

.hour{text-indent:.32em}

.rakat{
  list-style:none;
  margin:10px 0 0;
  padding:12px 0 0;
  min-width:6.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  border-top:1px solid var(--line);
}

.rakat li{
  display:flex;
  align-items:baseline;
  gap:.55em;
  min-width:5.6em;
}

.rak-n{
  min-width:.75em;
  font-size:1.08rem;
  font-weight:300;
  line-height:1.3;
  text-align:right;
  color:var(--muted);
}

.fard .rak-n{
  font-weight:400;
  color:var(--gold);
}

.rak-kind{
  font-size:.6rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--muted);
}

.fard .rak-kind{color:var(--soft)}

@media (max-width:560px){
  .prayers{
    grid-template-columns:1fr;
    padding:0;
    border-bottom:0;
  }
  .prayers > li{
    display:grid;
    grid-template-columns:34px auto 1fr auto;
    grid-template-areas:"sun name ar hour" ". rakat rakat rakat";
    align-items:center;
    column-gap:12px;
    row-gap:4px;
    padding:14px 0 15px;
    border-bottom:1px solid var(--line);
  }
  .sun{grid-area:sun;width:30px;height:21px;margin:0}
  .prayer{grid-area:name}
  .prayer-ar{grid-area:ar;justify-self:start}
  .hour{grid-area:hour;justify-self:end;text-indent:0;margin-right:-.32em}
  .rakat{
    grid-area:rakat;
    flex-direction:row;
    flex-wrap:wrap;
    gap:2px 20px;
    margin:0;
    padding:0;
    min-width:0;
    border-top:0;
  }
  .rakat li{min-width:0}
}

/* The wheel of page 8: the day as a ring, noon at the top and night at
   the foot, sunrise to the west and sunset to the east; each prayer's
   span drawn in its colour over the grey of the hours without one, its
   name inside. Measured from the packet's own wheel. The hours are in
   the packet's grey, its dots a shade lighter.                         */

.wheel{
  margin:0;
  width:min(100%,23.5rem);
}

.wheel svg{
  display:block;
  width:100%;
  height:auto;
}

.ring{
  fill:none;
  stroke-width:14.2;
  stroke-linecap:round;
}

.ring circle{stroke:var(--wheel)}
.ring .fajr{stroke:var(--fajr)}
.ring .zuhr{stroke:var(--zuhr)}
.ring .asr{stroke:var(--asr)}
.ring .maghrib{stroke:var(--maghrib)}
.ring .isha{stroke:var(--isha)}

.times .dot{fill:#8e8e8e}

.times text{
  font-size:12px;
  font-weight:400;
  fill:var(--soft);
}

.names text{
  font-size:25.5px;
  font-weight:650;
  text-anchor:middle;
}

.names .fajr{fill:var(--fajr)}
.names .zuhr{fill:var(--zuhr)}
.names .asr{fill:var(--asr)}
.names .maghrib{fill:var(--maghrib)}
.names .isha{fill:var(--isha)}

/* Travel, Storms, Forgetting and Jumu'ah: four columns, as the packet
   sets them; two by two on a phone. */

.notes{
  list-style:none;
  margin:0;
  padding:24px 0 0;
  width:100%;
  max-width:40rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px clamp(16px,3vw,30px);
  text-align:left;
  border-top:1px solid var(--line);
}

.note-head{
  margin:0 0 8px;
  font-size:1.08rem;
  font-weight:300;
  line-height:1.3;
  color:var(--bone);
}

.notes p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--soft);
  text-wrap:pretty;
}

@media (max-width:660px){
  .notes{grid-template-columns:repeat(2,1fr)}
}


/* --- the Hadith of Gabriel ---------------------------------------- */
/* Its four answers under their names in Arabic, as the Alphabet's
   vowels are headed; the five pillars and the six articles of Iman set
   as the steps of Wudu are; Ihsan, and the Prophet's last words, in
   Arabic, as the Shahada is. Where it is told, in small capitals.     */

.source{
  margin-top:calc(-1 * clamp(12px,2.6vh,26px));
  font-size:clamp(.6rem,1.2vw,.7rem);
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  color:var(--muted);
}


/* --- quiet motion, and paper, for the second layer ---------------- */

@media (prefers-reduced-motion:reduce){
  .part.arriving{animation:none}
  .parts a,.parts a::after,.quls-name,.quls-name::before,.quls-name::after,.unit-name{transition:none}
}

@media print{
  .part[hidden]{display:flex}
  .lessons,
  .parts{display:none}
  .prayers > li,
  .notes li{break-inside:avoid}
}


/* --- the lesson names, as they sound ------------------------------ */
/* Between each lesson's name in Arabic and its meaning, the name in
   Latin letters, as the scholars write it — light italic, as the
   transliterations of the lines are set, a size down and in the reading
   grey, held close under the Arabic.                                  */

.lesson-ro{
  margin-top:-4px;
  font-size:clamp(1rem,2.8vw,1.12rem);
  font-weight:300;
  font-style:italic;
  line-height:1.35;
  color:var(--soft);
}


/* --- an ayah's ring, for a number of three figures ---------------- */
/* Al-Baqarah 185: the ring draws out into a lozenge of the same
   hairline, so the figures keep their size.                          */

.ayah-no.long{
  width:auto;
  min-width:1.9em;
  padding:0 .55em;
  border-radius:1em;
}


/* --- the Hadith of Gabriel, at a glance --------------------------- */
/* Its four answers side by side above the telling, set as Daily Salah
   sets its five prayers: the name, the name in Arabic, its meaning in
   small capitals, and under a hairline the answer in brief — the five
   pillars and the six articles, each in a word or two, "worship Allah
   as though you see Him", and the two signs of the Hour, a line each.
   In the bone of the page rather than the prayers' colours, and with no
   gold, which is kept for the fard. On a phone, one under another, each
   list run across but the signs, one under the other.                  */

.answers{
  list-style:none;
  margin:0;
  padding:26px 0 24px;
  width:100%;
  max-width:40rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.answers > li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.answer{
  font-size:clamp(1.15rem,2.6vw,1.4rem);
  font-weight:400;
  color:var(--bone);
}

.answer-ar{
  font-size:1.02rem;
  line-height:1.65;
  color:var(--soft);
}

.answer-en{
  font-size:clamp(.62rem,1.2vw,.72rem);
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  color:var(--muted);
}

.answers .answer-sum{
  margin:10px 0 0;
  padding:12px 0 0;
  min-width:6.4rem;
  max-width:9.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  border-top:1px solid var(--line);
}

.answer-count{
  display:flex;
  align-items:baseline;
  gap:.55em;
}

.answer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  font-size:.88rem;
  line-height:1.4;
  color:var(--soft);
}

.answer-list.signs{gap:9px}

.answer-list.signs li{text-wrap:balance}

.answer-say i{
  display:block;
  text-wrap:balance;
  font-size:.88rem;
  font-weight:300;
  line-height:1.45;
  color:var(--soft);
}

@media (max-width:560px){
  .answers{
    grid-template-columns:1fr;
    padding:0;
    border-bottom:0;
  }
  .answers > li{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"name ar en" "sum sum sum";
    align-items:center;
    column-gap:12px;
    row-gap:4px;
    padding:14px 0 15px;
    border-bottom:1px solid var(--line);
  }
  .answer{grid-area:name}
  .answer-ar{grid-area:ar;justify-self:start}
  .answer-en{grid-area:en;justify-self:end;text-indent:0;margin-right:-.32em}
  .answers .answer-sum{
    grid-area:sum;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 16px;
    margin:0;
    padding:0;
    min-width:0;
    max-width:none;
    border-top:0;
    text-align:left;
  }
  .answer-list{
    flex-direction:row;
    flex-wrap:wrap;
    gap:2px 14px;
  }
  .answer-list.signs{
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
}

@media print{
  .answers > li{break-inside:avoid}
}