/* ═══════════════════════════════════════════════════════════════════════
   ARABIC MARKING — THE ONE STYLESHEET
   ═══════════════════════════════════════════════════════════════════════
   Every screen in this project that splits a vowelled Arabic word into
   clickable letter/vowel pieces loads THIS file. Before 5 Aug 2026 the same
   ~90 lines were copied into three places and had already drifted apart:

     public/quran-tracking/styles.css   had a fatha-on-lam nudge nobody else got
     public/sms/assets/css/nooraniah.css had kasra drops nobody else got
     src/app/globals.css                asked for a font the app never loaded

   which is exactly why the same word looked different on the Quran tracker,
   the Lessons tab and the teacher page. One file, one place to tune, every
   page gets every fix.

   Loaded by:
     public/quran-tracking/index.html
     public/sms/index.html
     src/app/layout.tsx            (served from /shared/arabic-marking.css)

   The rendering engine that produces these spans is shared too:
     public/quran-tracking/vowel-letter-marker.js   (browser / static apps)
     src/lib/vowelLetterMarker.ts                   (TypeScript port)
   Both emit the same markup: .vlm-word > .vlm-unit > .vlm-letter + .vlm-vowel

   ⚠️ Read the memory note `arabic-clickable-text-technique` before touching
   anything here. Every rule below is the fix for a real bug, and Arabic
   shaping breaks in ways that are invisible until a teacher reports it.

   COLOURS ARE NOT HERE. Each page decides what a mistake looks like (the
   tracker uses blue letter / red vowel, the Nooraniah lesson uses four
   category colours), so those rules stay in each page's own stylesheet.
   This file is only about making the letters render and join correctly.

   Doubled selectors (.vlm-word.vlm-word) are deliberate: they have to beat
   the host page's own Arabic classes, which carry letter-spacing and
   ligature settings that break span-splitting.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The word ──────────────────────────────────────────────────────────
   letter-spacing:0   — any letter-spacing pushes the letters apart and
                        the cursive joining across sibling spans breaks
   font-weight:400    — the weight the technique was proven on; 600 makes
                        Amiri substitute composed glyphs
   liga/dlig off      — those features fuse letter+mark into ONE glyph,
                        which can then only ever paint a single colour
                        (that is what made vowels look unclickable)
   calt on            — contextual forms; this is what keeps letters joined
   text-shadow:none   — a glow around a letter washes over its small mark
                        and the two read as one colour
   font-family        — Amiri (regular) is the font this was proven on.
                        'Amiri Quran' and several naskh fonts misplace
                        harakat when letter and mark shape in separate runs.
                        Standardise here so no page can drift off it.

   A page that genuinely reads a DIFFERENT script (the tracker's IndoPak
   Nastaleeq mode) sets --vlm-font on any ancestor. That is the only
   supported way to change the marking font: do not re-declare font-family
   on .vlm-word in a page stylesheet or the drift starts again.            */
.vlm-word.vlm-word {
  display: inline;
  letter-spacing: 0;
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 1, "liga" 0, "dlig" 0;
  text-shadow: none;
  font-family: var(--vlm-font, 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif);
}

/* Markable, as opposed to a read-only replay of saved marks. */
.vlm-word.vlm-interactive {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ── The pieces ────────────────────────────────────────────────────────
   MUST stay display:inline. An inline-block, or any padding or spacing in
   here, starts a new shaping run and the word falls apart on screen.      */
.vlm-word .vlm-unit,
.vlm-word .vlm-letter,
.vlm-word .vlm-vowel {
  display: inline;
  font-family: inherit;
  font-weight: inherit;
  transition: color 0.13s ease;
}

/* Colour is DELIBERATELY on its own single-class rule, and deliberately
   weak. Each page's mistake colours are written as .vlm-letter.vlm-wrong /
   .vlm-letter.nr-wrong-letter — two classes. If "inherit" were bundled into
   the two-class rule above it would tie on specificity, win on source order
   (this file loads last) and silently erase every mistake colour on every
   page. Leave these selectors alone. */
.vlm-unit,
.vlm-letter,
.vlm-vowel {
  color: inherit;
}

/* ── THE SECRET (4 Jul 2026) ───────────────────────────────────────────
   The vowel span must have a DIFFERENT font-size from its letter. At the
   same size the browser shapes letter+mark as ONE glyph cluster and paints
   the whole thing in the LETTER's colour: the vowel then looks unclickable
   and marking a letter appears to colour its vowel too. 5% is enough to
   force separate shaping runs, the letters still join across them, and the
   eye cannot see the difference. This single line is the whole technique. */
.vlm-word.vlm-word .vlm-vowel {
  font-size: 1.05em;
}

/* Standing dagger alef (صَـٰ) rides a kashida, which is a real base
   character with its own glyph cluster, so it colours independently
   without the size trick — keep it letter-sized or the connecting line
   does not meet its neighbours. mark/mkmk must stay on or a maddah sitting
   on it (يَـٰٓ) piles onto it instead of stacking above it. */
.vlm-word.vlm-word .vlm-vowel.vlm-ext {
  font-size: inherit;
  font-feature-settings: "calt" 1, "kern" 1, "mark" 1, "mkmk" 1;
}

/* Fused units — shadda stacks, lam-alef, hamza carriers, maddah, dagger
   alef — keep their marks INSIDE the letter span so the font positions
   them natively. They colour as one piece anyway, so give them the real
   font features back and they render pixel-identical to untouched text. */
.vlm-word.vlm-word .vlm-letter.vlm-fused {
  font-variant-ligatures: normal;
  font-feature-settings: "liga" 1, "calt" 1, "dlig" 1, "kern" 1, "mark" 1, "mkmk" 1;
}

/* ── Tap-target padding (opt-in per page: renderInteractiveWord {pad}) ──
   Kashida connector between letters that DO join: inline, so it joins both
   neighbours, and it keeps the page's contextual joining.                 */
.vlm-word .vlm-pad {
  display: inline;
  color: inherit;
  font-family: inherit;
  font-feature-settings: "calt" 1;
}
/* Thin spacer at a NON-joining boundary (وَ‌لَ, أَ‌بْ). inline-block is safe
   here and only here: those letters do not join, so there is no join to
   break, and it restores the gap that letter-spacing:0 removed. */
.vlm-word .vlm-gap {
  display: inline-block;
  width: 0.14em;
}

/* ── Fine mark placement ───────────────────────────────────────────────
   Splitting a word into spans re-shapes it, and a few marks land slightly
   wrong afterwards. position:relative on an INLINE span moves only the
   painted glyph, so cross-span joining is untouched. Tune the variables.

   Each of these was a real correction Jamal asked for on ONE page. They
   are here so that every page gets them:
     fatha on lam   — the mark lands too far right of the tall stem
     kasra under ع/غ — Amiri drops it too high (3 Aug)
     kasra under ح/خ/ج — deep bowl below the baseline, so a kasra at the
                        normal depth sits INSIDE the bowl (4 Aug)          */
.vlm-word.vlm-word {
  --vlm-fatha-lam-shift: -0.10em;
  --vlm-kasra-ayn-drop: 0.13em;
  --vlm-kasra-haa-drop: 0.20em;
}

.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Fatha"][data-on="ل"] {
  position: relative;
  left: var(--vlm-fatha-lam-shift);
}

.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Kasra"][data-on="ع"],
.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Kasra"][data-on="غ"] {
  position: relative;
  top: var(--vlm-kasra-ayn-drop);
}

.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Kasra"][data-on="ح"],
.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Kasra"][data-on="خ"],
.vlm-word.vlm-word .vlm-vowel[data-harakah-name="Kasra"][data-on="ج"] {
  position: relative;
  top: var(--vlm-kasra-haa-drop);
}

/* ── Read-only replay (lesson history modals, the child's book) ─────────
   A saved set of marks re-rendered with the same engine, no clicking. The
   wrapper exists because these modals sit inside host text styled with a
   different font and full ligatures; the .vlm-word rules above already do
   the real work, this just stops the wrapper's own font leaking in. */
.vlm-display {
  letter-spacing: 0;
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 1, "liga" 0, "dlig" 0;
  text-shadow: none;
  font-family: var(--vlm-font, 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif);
}