/* OUSOS Arabic textbook — print design system (A4, Paged.js).
   Electric-blue and violet neon identity, taken from assets/brand/ousos-neon-style-reference.png.
   Rules for using these tokens and components: .claude/skills/ousos-textbook-design/SKILL.md */

:root {
  /* Brand */
  --ousos-blue: #1570FF;         /* electric blue: pronunciation, diagrams, illustration fills */
  --ousos-blue-deep: #0A4FC4;    /* blue for small text on white (AA) */
  --ousos-blue-tint: #E8F1FF;
  --ousos-violet: #8A22C9;       /* violet: the item being taught, highlights */
  --ousos-violet-deep: #6A1BA8;  /* violet for small text on white (AA) */
  --ousos-violet-tint: #F4EAFB;
  --ousos-cyan: #00BDC4;         /* glow highlight — on navy only, never for text on white */
  --ousos-navy: #050720;         /* the dark ground of neon panels; also body ink */
  --ousos-ink: #050720;
  --ousos-slate: #474B6B;        /* secondary text */
  --ousos-line: #D5DAF0;
  --ousos-ghost: #AEB8E2;        /* tracing letters: pale, but dark enough to survive an office printer */         /* hairlines, card borders */
  --ousos-paper: #FFFFFF;
  --ousos-neon: linear-gradient(90deg, #00BDC4 0%, #1570FF 35%, #8A22C9 100%);

  /* Type */
  --font-ar: "Noto Naskh Arabic";
  --font-ar-head: "Noto Kufi Arabic";
  --font-ar-classic: "Amiri";
  --font-en: "Source Sans 3";

  --size-body: 10.5pt;
  --size-small: 8.5pt;
  --size-ar: 17pt;               /* Arabic learning text is always larger than the English beside it */
  --size-ar-card: 26pt;
  --lh-ar: 2;                    /* room for stacked harakat above and below */

  /* Space */
  --gap: 5mm;
  --radius: 3mm;
}

/* ---------- Page ---------- */
@page {
  size: A4;
  margin: 18mm 16mm 20mm 16mm;
  @bottom-left   { content: "OUSOS  |  Training & Human Resource Development"; font: 600 8pt "Source Sans 3"; color: #474B6B; }
  @bottom-right  { content: counter(page); font: 700 9pt "Source Sans 3"; color: #0A4FC4; }
  @top-right     { content: string(lesson-title); font: 400 8pt "Source Sans 3"; color: #474B6B; }
}
/* The running header shows on every page, lesson openers included, so it is consistent in single-lesson and assembled builds. */

html { font-family: var(--font-en), sans-serif; font-size: var(--size-body); line-height: 1.45; color: var(--ousos-ink); }
body { margin: 0; background: var(--ousos-paper); }
* { box-sizing: border-box; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* ---------- Bilingual text primitives ---------- */
/* Every Arabic run carries lang="ar" dir="rtl" in the HTML; this class adds font + isolation. */
.ar {
  font-family: var(--font-ar), serif;
  font-size: var(--size-ar);
  line-height: var(--lh-ar);
  direction: rtl;
  unicode-bidi: isolate;
  font-kerning: normal;
  letter-spacing: 0;             /* letter-spacing breaks Arabic joining — never set it */
  font-feature-settings: "liga", "calt", "rlig", "mark", "mkmk", "ccmp";
}
.ar-head { font-family: var(--font-ar-head), sans-serif; line-height: 1.7; direction: rtl; unicode-bidi: isolate; letter-spacing: 0; }
.pron { font-weight: 600; color: var(--ousos-blue-deep); unicode-bidi: isolate; direction: ltr; }
.en   { color: var(--ousos-ink); unicode-bidi: isolate; direction: ltr; }
.note { font-size: 10pt; color: var(--ousos-slate); }  /* explanatory notes teach, so they are body size */

/* Variety tags: MSA vs Syrian spoken Arabic */
.tag { display: inline-block; font-size: 8pt; font-weight: 700; line-height: 1; padding: 1.1mm 1.8mm; border-radius: 1.2mm; vertical-align: middle; }
.tag-msa { background: var(--ousos-navy); color: #fff; }
.tag-syr { background: var(--ousos-violet-deep); color: #fff; }

/* The three-line unit: Arabic / pronunciation / meaning — always in this order */
.tri { display: grid; gap: 0.6mm; justify-items: center; text-align: center; break-inside: avoid; }
.tri .ar { font-size: var(--size-ar-card); line-height: 1.75; }
.tri .pron { font-size: 12pt; }
.tri .en { font-size: 10.5pt; }

/* ---------- Lesson header ---------- */
.lesson-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap);
  padding-bottom: 3mm; margin-bottom: var(--gap);
  border-bottom: 1mm solid; border-image: var(--ousos-neon) 1; }
.lesson-head h1 { font-size: 22pt; line-height: 1.1; font-weight: 700; string-set: lesson-title content(text); }
.lesson-head .where { font-size: 9pt; font-weight: 600; color: var(--ousos-slate); margin-bottom: 1mm; }
.lesson-head .ar-head { font-size: 15pt; font-weight: 700; color: var(--ousos-violet-deep); }
.lesson { break-before: page; }   /* wrap each lesson in <section class="lesson"> so it starts a new page */

h2.section { font-size: 12.5pt; font-weight: 700; margin: var(--gap) 0 2.5mm; display: flex; align-items: baseline; gap: 2.5mm; break-after: avoid; }
h2.section::before { content: ""; align-self: center; width: 1.4mm; height: 5mm; border-radius: 1mm; background: linear-gradient(180deg, #1570FF, #8A22C9); }
h2.section .ar-head { font-size: 11pt; font-weight: 400; color: var(--ousos-slate); }

/* ---------- Letter introduction ---------- */
.letter-intro { display: grid; grid-template-columns: 62mm 1fr; gap: var(--gap); break-inside: avoid; }
/* The neon panel: navy ground, blue glow top-left, violet glow bottom-right — the one dark element on a lesson page */
.letter-hero { border-radius: var(--radius); padding: 4mm 4mm 5mm; text-align: center; display: grid; align-content: center; color: #fff;
  background:
    radial-gradient(circle at 50% 42%, rgba(21,112,255,0.38), rgba(21,112,255,0) 58%),
    radial-gradient(circle at 0% 0%, rgba(0,189,196,0.30), rgba(0,189,196,0) 55%),
    radial-gradient(circle at 100% 100%, rgba(138,34,201,0.55), rgba(138,34,201,0) 60%),
    var(--ousos-navy); }
.letter-hero .glyph { font-family: var(--font-ar), serif; font-size: 104pt; line-height: 1.2; color: #fff; direction: rtl; }
.letter-hero .name { font-size: 16pt; font-weight: 700; color: #fff; }
.letter-hero .sound { font-size: 10pt; color: #C9D6FF; }

.letter-intro > .detail { display: grid; grid-template-rows: auto 1fr; gap: 3mm; }
.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5mm; direction: rtl; } /* right-to-left: isolated → initial → medial → final reads in Arabic order */
.form { border: 0.35mm solid var(--ousos-line); border-top: 1mm solid var(--ousos-blue); border-radius: var(--radius); padding: 2mm 1mm 3mm; text-align: center; direction: ltr; }
.form .glyph { font-family: var(--font-ar), serif; font-size: 40pt; line-height: 1.6; color: var(--ousos-ink); direction: rtl; unicode-bidi: isolate; }
.form .label { font-size: 9pt; font-weight: 700; }
.form .where { font-size: 8pt; color: var(--ousos-slate); }
.in-word { border-radius: var(--radius); background: linear-gradient(100deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); padding: 2.5mm 4mm; display: flex; align-items: center; justify-content: space-between; gap: 4mm; }
.in-word .ar { font-size: 28pt; line-height: 1.6; white-space: nowrap; }
.in-word .hl { color: var(--ousos-violet); }
.in-word .note { font-size: var(--size-body); color: var(--ousos-ink); }
.in-word .tri { flex: none; padding: 0 4mm; }
.exercise .sight { margin-top: 2mm; text-align: center; }

/* ---------- Vocabulary cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.card { border: 0.35mm solid var(--ousos-line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 38mm 1fr; break-inside: avoid; }
.card .art { background: linear-gradient(160deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); display: grid; place-items: center; padding: 3mm; }
.card .art img { width: 27mm; height: 27mm; }
.card .body { padding: 2.5mm 3mm 3mm; display: grid; align-content: center; }
.card .varieties { margin-top: 1.5mm; padding-top: 1.5mm; border-top: 0.25mm solid var(--ousos-line); font-size: 8.5pt; display: grid; gap: 0.8mm; justify-items: center; }

/* ---------- Reading exercise ---------- */
/* Neon outline: white inside, blue-to-violet border */
.exercise { border: 0.6mm solid transparent; border-radius: var(--radius); padding: 3.5mm 4mm 4mm; break-inside: avoid;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #1570FF, #8A22C9) border-box; }
.exercise .task { font-weight: 600; margin-bottom: 2mm; }
.exercise .task b { color: var(--ousos-violet-deep); }
.syllables { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2mm; direction: rtl; } /* read right to left */
.syllables .tri { border-radius: 2mm; background: var(--ousos-blue-tint); padding: 1mm 0 2mm; direction: ltr; }
.syllables .tri .ar { font-size: 24pt; line-height: 1.8; }
.syllables .tri .pron { font-size: 10.5pt; }
.read-line { margin-top: 4mm; }
.words { display: flex; justify-content: center; gap: 14mm; direction: rtl; } /* separate words by space, not commas */
.words .ar { font-size: 24pt; line-height: 1.7; white-space: nowrap; }
.words .tri { direction: ltr; }

/* ---------- Lesson furniture ---------- */
/* Can-do statements open a lesson */
.can-do { list-style: none; margin-bottom: var(--gap); padding: 2.5mm 4mm; border-left: 1.2mm solid var(--ousos-blue); background: var(--ousos-blue-tint); border-radius: 0 var(--radius) var(--radius) 0; display: grid; gap: 1mm; break-inside: avoid; }
.can-do li { font-weight: 600; }
/* Suggested minutes beside a section heading: <span class="mins">10 min</span> */
.mins { margin-left: auto; font-size: var(--size-small); font-weight: 600; color: var(--ousos-slate); border: 0.3mm solid var(--ousos-line); border-radius: 1.2mm; padding: 0.6mm 2mm; white-space: nowrap; }
/* A word given whole before all its letters have been taught */
.sight { font-size: 10pt; font-weight: 400; color: var(--ousos-slate); }
/* "Same in Syrian" and similar one-line notes under a card */
.same { font-size: var(--size-small); color: var(--ousos-slate); }

/* ==========================================================================
   Components added with lesson 1 (book/lessons/lesson-01.html) — reusable in every lesson.
   ========================================================================== */

/* The taught letter inside any Arabic word: <span class="hl">بَ</span>اب */
.hl { color: var(--ousos-violet); }
/* A plain introductory or guidance sentence at body size */
.lead { margin-bottom: 3mm; break-after: avoid; }
.lead.after-panel { margin-top: 3mm; }
.exercise + .exercise { margin-top: 3mm; }
/* A top margin on the first element of a page would push the page content past the bottom margin: contain it, then remove it */
.pagedjs_page_content > div { display: flow-root; }
.pagedjs_page_content > div > :first-child, .pagedjs_page_content > div > .lesson:first-child > :first-child { margin-top: 0; }

/* Short facts side by side: <ul class="points"><li><b>Title.</b> One sentence.</li>…</ul> */
.points { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; break-inside: avoid; }
.points li { border: 0.35mm solid var(--ousos-line); border-top: 1mm solid var(--ousos-blue); border-radius: var(--radius); padding: 2mm 3mm 2.5mm; font-size: 10pt; line-height: 1.35; }
.points li b { display: block; font-size: 10.5pt; margin-bottom: 0.5mm; }

/* The lesson's letters at a glance, grouped by shape — a navy neon panel (at most one navy panel per page) */
.letter-strip { border-radius: var(--radius); padding: 3mm 4mm 4mm; color: #fff; display: flex; direction: rtl; justify-content: space-around; break-inside: avoid;
  background:
    radial-gradient(circle at 50% 40%, rgba(21,112,255,0.34), rgba(21,112,255,0) 60%),
    radial-gradient(circle at 0% 0%, rgba(0,189,196,0.30), rgba(0,189,196,0) 45%),
    radial-gradient(circle at 100% 100%, rgba(138,34,201,0.55), rgba(138,34,201,0) 50%),
    var(--ousos-navy); }
.letter-strip .group { direction: ltr; text-align: center; padding: 0 3mm; }
.letter-strip .group + .group { border-right: 0.3mm solid rgba(201,214,255,0.4); }
.letter-strip .letters { display: flex; direction: rtl; justify-content: center; }
.letter-strip .letter { width: 20mm; direction: ltr; }
.letter-strip .glyph { font-family: var(--font-ar), serif; font-size: 46pt; line-height: 1.4; color: #fff; direction: rtl; unicode-bidi: isolate; }
.letter-strip .name { font-size: 11pt; font-weight: 700; color: #fff; }
.letter-strip .caption { font-size: 9pt; color: #C9D6FF; margin-top: 1.5mm; }

/* A shape-family label above its letter rows */
h3.family { font-size: 10.5pt; font-weight: 700; color: var(--ousos-violet-deep); margin: 3.5mm 0 2mm; display: flex; align-items: center; gap: 2.5mm; break-after: avoid; }
h3.family::after { content: ""; flex: 1; height: 0.35mm; background: var(--ousos-line); }

/* One compact row per letter: identity | four shapes | illustrated model word */
.letter-row { display: grid; grid-template-columns: 34mm 1fr 60mm; border: 0.35mm solid var(--ousos-line); border-radius: var(--radius); break-inside: avoid; }
.letter-row + .letter-row { margin-top: 2.5mm; }
.letter-row .id { background: linear-gradient(160deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); border-radius: 2.6mm 0 0 2.6mm; padding: 0 2mm 2.5mm; text-align: center; display: grid; align-content: center; }
.letter-row .id .glyph { font-family: var(--font-ar), serif; font-size: 40pt; line-height: 1.35; color: var(--ousos-violet); direction: rtl; unicode-bidi: isolate; }
.letter-row .id .name { font-size: 13pt; font-weight: 700; line-height: 1.2; }
.letter-row .id .sound { font-size: 10pt; line-height: 1.25; color: var(--ousos-slate); margin-top: 0.5mm; }
.letter-row .shapes { padding: 2mm 3mm; display: grid; align-content: center; gap: 1.5mm; }
.letter-row .forms { gap: 2mm; }
.letter-row .form { padding: 0 1mm 1.5mm; border-top-width: 0.7mm; }
.letter-row .form .glyph { font-size: 25pt; line-height: 1.5; }
.letter-row .form .label { font-size: 8pt; font-weight: 600; color: var(--ousos-slate); }
.letter-row .tip { font-size: 10pt; line-height: 1.3; }
.letter-row .model { display: grid; grid-template-columns: 23mm 1fr; align-items: center; gap: 2mm; padding: 2mm 3mm 2mm 1mm; }
.letter-row .model img { width: 23mm; height: 23mm; }
.letter-row .model .tri .ar { font-size: 24pt; line-height: 1.65; white-space: nowrap; }
.letter-row .model .tri .pron { font-size: 11pt; }
.letter-row .model .tri .en { font-size: 10pt; }

/* A tinted note with a title: sound notes ("Listen and say"), homework, tips */
.callout { border-left: 1.2mm solid var(--ousos-violet); background: var(--ousos-violet-tint); border-radius: 0 var(--radius) var(--radius) 0; padding: 3mm 4mm; margin-top: 3.5mm; display: grid; gap: 1.5mm; break-inside: avoid; }
.callout .title { font-size: 11pt; font-weight: 700; color: var(--ousos-violet-deep); }
/* Sounds explained inside a callout, in the pronunciation guide's wording */
.sound-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; direction: rtl; margin: 0.5mm 0; }
.sound-item { direction: ltr; display: grid; grid-template-columns: 14mm 1fr; align-items: center; gap: 3mm; background: #fff; border-radius: 2mm; padding: 0.5mm 3mm; }
.sound-item .glyph { font-family: var(--font-ar), serif; font-size: 28pt; line-height: 1.6; text-align: center; direction: rtl; unicode-bidi: isolate; }
.sound-item .name { font-weight: 700; }

/* Spot the letter: one line of letter shapes to circle; .done marks the worked example */
.spot { display: flex; direction: rtl; justify-content: space-between; align-items: center; padding: 0 1mm; }
.spot span { font-family: var(--font-ar), serif; font-size: 25pt; line-height: 1.7; width: 12.5mm; text-align: center; border: 0.5mm solid transparent; border-radius: 50%; }
.spot .done { border-color: var(--ousos-violet); }

/* Match numbered key shapes (first row) to shapes with an answer box (second row) */
.match { display: grid; gap: 2.5mm; }
.match .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5mm; direction: rtl; }
.match .item { direction: ltr; text-align: center; border: 0.35mm solid var(--ousos-line); border-radius: 2mm; padding: 0 1mm 2mm; }
.match .keys .item { background: var(--ousos-blue-tint); border-color: var(--ousos-blue-tint); }
.match .glyph { font-family: var(--font-ar), serif; font-size: 25pt; line-height: 1.7; direction: rtl; unicode-bidi: isolate; }
.match .name { font-size: 9.5pt; font-weight: 600; }
.match .num { display: inline-block; min-width: 4.6mm; line-height: 4.6mm; border-radius: 2.3mm; background: var(--ousos-blue-deep); color: #fff; font-size: 8.5pt; font-weight: 700; margin-right: 1mm; }
.match .answer { width: 8mm; height: 8mm; margin: 0 auto; border: 0.4mm solid var(--ousos-slate); border-radius: 1.2mm; line-height: 7mm; font-weight: 700; color: var(--ousos-violet-deep); }

/* Handwriting rows: name | model, pale copies to trace, then free ruled space — right to left on one baseline */
.hw { display: grid; gap: 1mm; }
.hw-row { display: grid; grid-template-columns: 19mm 1fr; direction: rtl; break-inside: avoid; }
.hw-name { direction: ltr; align-self: center; text-align: center; font-size: 10.5pt; font-weight: 700; }
.hw-line { display: grid; align-items: baseline; direction: rtl; }
.hw-line::before { content: ""; grid-area: 1 / 1; border-bottom: 0.35mm solid var(--ousos-slate); }
.hw-letters { grid-area: 1 / 1; font-family: var(--font-ar), serif; font-size: 31pt; line-height: 1.6; direction: rtl; unicode-bidi: isolate; text-align: right; white-space: nowrap; }
.hw-letters span { display: inline-block; width: 17mm; text-align: center; }
.hw-letters .model { color: var(--ousos-ink); }
.hw-letters .ghost { color: var(--ousos-ghost); }

/* An empty ruled line to write on */
.write-line { height: 13mm; border-bottom: 0.35mm solid var(--ousos-slate); }
/* A short instruction followed by one or more .write-line */
.write-box { margin: 4mm 0 6mm; break-inside: avoid; }
.write-box .task { font-weight: 600; }

/* Illustrated mini-dialogue: picture beside the turns; .turn.a speaks, .turn.b replies */
.dialogue { display: grid; grid-template-columns: 50mm 1fr; gap: var(--gap); margin-bottom: 3.5mm; break-inside: avoid; }
.dialogue .art { border-radius: var(--radius); background: linear-gradient(160deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); padding: 3mm; display: grid; place-items: center; }
.dialogue .art img { width: 44mm; height: 44mm; }
.dialogue .turns { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.turn { border-radius: var(--radius); padding: 2mm 3mm 3mm; display: grid; align-content: start; }
.turn.a { background: var(--ousos-blue-tint); border-bottom-left-radius: 0; }
.turn.b { background: var(--ousos-violet-tint); border-bottom-right-radius: 0; }
.turn .who { font-size: 8.5pt; font-weight: 700; color: var(--ousos-slate); }
.turn .tri .ar { font-size: 24pt; line-height: 1.7; white-space: nowrap; }
.turn .varieties { margin-top: 1.5mm; padding-top: 1.5mm; border-top: 0.25mm solid var(--ousos-line); font-size: 8.5pt; display: grid; gap: 0.5mm; justify-items: center; text-align: center; }
.turn .varieties .ar { font-size: 17pt; line-height: 1.5; margin: 0 1mm; vertical-align: middle; }
.turn .varieties .pron { font-size: 10.5pt; }

/* Numbered steps of a task (a real sequence) */
.steps { margin: 0 0 3mm 5mm; display: grid; gap: 0.8mm; }

/* Tick grid: a real-life task record or a self-check. Row headers on the left, .box to tick */
.tick-grid { width: 100%; border-collapse: collapse; break-inside: avoid; }
.tick-grid th, .tick-grid td { border: 0.35mm solid var(--ousos-line); padding: 1.2mm 2.5mm; text-align: center; vertical-align: middle; height: 9.5mm; }
.tick-grid thead th { background: var(--ousos-blue-tint); font-size: 9.5pt; font-weight: 700; line-height: 1.25; height: auto; }
.tick-grid tbody th { text-align: left; font-weight: 600; }
.tick-grid .wide { width: 46%; text-align: left; }
.tick-grid .n { color: var(--ousos-violet-deep); font-weight: 700; }
.tick-grid .box { display: inline-block; width: 6mm; height: 6mm; border: 0.4mm solid var(--ousos-slate); border-radius: 1mm; vertical-align: middle; }

/* ---------- Shared additions after the lesson 1 review ---------- */
/* A blank to be filled in, usable inside Arabic, pronunciation or English lines: <span class="blank"></span>
   Drawn as a rule, so it needs no glyph from any font. */
.blank { display: inline-block; width: 16mm; border-bottom: 0.4mm solid currentColor; vertical-align: baseline; margin: 0 1mm; }
/* A general reading or usage note under an exercise (use .sight only for sight words, .same only for "Same in Syrian") */
.hint { font-size: 10pt; color: var(--ousos-slate); margin-top: 2mm; }
/* Two forms of one phrase (to a man / to a woman) stacked in a single dialogue turn */
.turn .tri + .tri { margin-top: 2.5mm; padding-top: 2mm; border-top: 0.25mm solid var(--ousos-line); }
/* A single Arabic letter or word quoted inside a line of English (a tip, hint, task or note): keeps the line its normal height */
p.tip span.ar, p.hint span.ar, p.task span.ar, p.lead span.ar, p.note span.ar, p.sight span.ar, .callout p span.ar, .points li span.ar, .steps li span.ar, .can-do li span.ar { font-size: 1.3em; line-height: 1.5; }  /* 1.5 leaves room for a mark above the letter */
.exercise .note, .exercise .hint { margin-top: 2mm; }
/* Alphabet chart: seven letters per row, right to left: <div class="alphabet"><div class="item">…</div>…</div> */
.alphabet { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2mm; direction: rtl; }
.alphabet .item { direction: ltr; text-align: center; border: 0.3mm solid var(--ousos-line); border-radius: 2mm; padding: 0.5mm 0 1.5mm; break-inside: avoid; }
.alphabet .glyph { font-family: var(--font-ar), serif; font-size: 22pt; line-height: 1.6; direction: rtl; unicode-bidi: isolate; }
.alphabet .name { font-size: 9pt; font-weight: 600; }
.alphabet .num { font-size: 8pt; color: var(--ousos-slate); }

/* Keeps a hyphenated pronunciation word on one line: <span class="nb">bi-laa</span> */
.nb { white-space: nowrap; }
/* An alphabet-chart cell left empty for the learner to write the letter */
.alphabet .item.write .glyph { color: transparent; border-bottom: 0.3mm solid var(--ousos-ink); margin: 0 3mm; }

/* Spacing fixes after the second review */
p.sight { margin-bottom: 2.5mm; }
.alphabet .item.write .glyph { margin-bottom: 2mm; }

/* A shorter dialogue block for pages that are tight: <div class="dialogue compact"> */
.dialogue.compact { grid-template-columns: 30mm 1fr; }
.dialogue.compact .art img { width: 25mm; height: 25mm; }
.dialogue.compact .turns { align-items: start; }
.dialogue.compact .turn .tri .ar { font-size: 21pt; line-height: 1.6; }

/* ==========================================================================
   Components added with the pronunciation guide (book/front/pronunciation-guide.html).
   All names start with "guide-"; no earlier rule is changed.
   ========================================================================== */

/* Extra space above a block that follows another block inside the guide */
.guide-gap { margin-top: 3.5mm; }

/* The three-line unit taken apart: each line on the left, what it is on the right.
   Children in order: p.ar, p.what, p.pron, p.what, p.en, p.what */
.guide-key { display: grid; grid-template-columns: 62mm 1fr; align-items: center; column-gap: 6mm; border-radius: var(--radius); padding: 1mm 5mm 3mm; break-inside: avoid;
  background: linear-gradient(100deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); }
.guide-key > .ar { font-size: 28pt; line-height: 1.4; text-align: center; }
.guide-key > .pron { font-size: 15pt; text-align: center; padding: 1mm 0; }
.guide-key > .en { font-size: 12.5pt; text-align: center; padding: 1mm 0; }
.guide-key > .what { font-size: 10.5pt; line-height: 1.35; margin: 0.6mm 0; padding-left: 5mm; border-left: 0.6mm solid var(--ousos-violet); }
.guide-key > .what b { display: block; }
/* Last child: a one-line note under the whole key (variety tag + remark) */
.guide-key > .guide-key-note { grid-column: 1 / -1; font-size: 10pt; color: var(--ousos-slate); text-align: center; margin-top: 0.5mm; }

/* A plain reference table: first column is the spelling used in pronunciation lines */
.guide-table { width: 100%; border-collapse: collapse; break-inside: avoid; }
.guide-table th, .guide-table td { border-bottom: 0.3mm solid var(--ousos-line); padding: 0.4mm 3mm; text-align: left; vertical-align: middle; font-size: 10pt; line-height: 1.3; }
.guide-table thead th { background: var(--ousos-blue-tint); border-bottom: 0; font-size: 9.5pt; font-weight: 700; padding: 1.4mm 3mm; }
.guide-table .write { width: 19mm; font-size: 14pt; font-weight: 700; color: var(--ousos-blue-deep); white-space: nowrap; }
.guide-table .write.none { font-size: 10pt; color: var(--ousos-slate); }
.guide-table .eg { white-space: nowrap; }
.guide-table .eg .ar { margin-right: 1.5mm; }
.guide-table .eg .pron { font-size: 11pt; }
.guide-table td span.ar { font-size: 17pt; line-height: 1.35; vertical-align: middle; }
.guide-table td.eg span.ar { font-size: 18pt; line-height: 1.35; }
.guide-table.pairs td span.ar { font-size: 18pt; line-height: 1.5; margin-left: 3mm; }
.guide-table.pairs td span.ar.letter { font-size: 20pt; line-height: 1.35; margin: 0 1.5mm 0 0; color: var(--ousos-violet); display: inline-block; min-width: 9mm; text-align: center; }
.guide-table.pairs td { white-space: nowrap; }

/* One difficult sound: letter | how to make it | worked example.
   .wide puts the example row under the text (several examples) */
.guide-entry { display: grid; grid-template-columns: 27mm 1fr 38mm; border: 0.35mm solid var(--ousos-line); border-radius: var(--radius); break-inside: avoid; }
.guide-entry + .guide-entry { margin-top: 2.5mm; }
.guide-entry .id { background: linear-gradient(160deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); border-radius: 2.6mm 0 0 2.6mm; padding: 0 2mm 2.5mm; text-align: center; display: grid; align-content: center; }
.guide-entry .id .glyph { font-family: var(--font-ar), serif; font-size: 30pt; line-height: 1.35; color: var(--ousos-violet); direction: rtl; unicode-bidi: isolate; }
.guide-entry .id .glyph.four { font-size: 22pt; line-height: 1.45; white-space: nowrap; }
.guide-entry .id .name { font-size: 11.5pt; font-weight: 700; line-height: 1.2; }
.guide-entry .id .written { font-size: 9.5pt; color: var(--ousos-slate); margin-top: 0.5mm; }
.guide-entry .id .written .pron { font-size: 12pt; }
.guide-entry .how { padding: 1.5mm 3.5mm 2mm; display: grid; align-content: center; gap: 0.7mm; font-size: 10pt; line-height: 1.32; }
.guide-entry .how .sound { font-size: 10.5pt; font-weight: 600; }
.guide-entry .how b { color: var(--ousos-violet-deep); margin-right: 0.8mm; }
.guide-entry .how p span.ar { font-size: 1.3em; line-height: 1.3; }
.guide-entry .eg { display: grid; place-content: center; padding: 1mm 2mm 2mm; border-left: 0.35mm solid var(--ousos-line); }
.guide-entry .eg .tri .ar { font-size: 23pt; line-height: 1.65; white-space: nowrap; }
.guide-entry .eg .tri .pron { font-size: 11pt; }
.guide-entry .eg .tri .en { font-size: 10pt; }
.guide-entry.wide { grid-template-columns: 27mm 1fr; }
.guide-entry.long { grid-template-columns: 27mm 1fr 52mm; }
.guide-entry.wide .id { border-radius: 2.6mm 0 0 0; }
.guide-entry.wide .eg { grid-column: 1 / -1; border-left: 0; border-top: 0.35mm solid var(--ousos-line); display: block; padding: 0.5mm 3mm 2mm; }

/* A tinted box holding a label line and a row of examples; .syr is the violet (Syrian) one */
.guide-box { border-radius: var(--radius); background: var(--ousos-blue-tint); padding: 2mm 3mm 2.5mm; break-inside: avoid; }
.guide-box.syr { background: var(--ousos-violet-tint); }
.guide-box .label { font-size: 10pt; font-weight: 600; text-align: center; }
.guide-box .words { gap: 8mm; }
.guide-box .words .ar { font-size: 22pt; }
.guide-box .tri .pron { font-size: 11pt; }
.guide-box .tri .en { font-size: 10pt; }

/* "At a glance": three columns of spelling | Arabic | key word */
.guide-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; break-inside: avoid; }
.guide-glance .col { display: grid; align-content: start; }
.guide-glance .head { font-size: 9.5pt; font-weight: 700; background: var(--ousos-blue-tint); border-radius: 1.2mm; padding: 1mm 2.5mm; margin-bottom: 0.5mm; }
.guide-glance .row + .head { margin-top: 2.5mm; }
.guide-glance .row { display: grid; grid-template-columns: 7mm 9mm 1fr; align-items: center; column-gap: 1.5mm; padding: 0 1.5mm; border-bottom: 0.3mm solid var(--ousos-line); font-size: 9pt; line-height: 1.15; }
.guide-glance .row .pron { font-size: 11.5pt; font-weight: 700; }
.guide-glance .row .key .pron { font-size: inherit; font-weight: 600; }
.guide-glance .row .ar { font-size: 16pt; line-height: 1.2; text-align: center; }
/* A lone apostrophe mark (‘ or ’) shown as a spelling: set large so it can be seen */
.guide-glance .row .pron.guide-mark,
.guide-entry .id .written .pron.guide-mark { font-size: 18pt; font-weight: 700; line-height: 1; }
/* A sound-list cell that holds a note and no letter */
.sound-item.guide-plain { grid-template-columns: 1fr; }

/* A long exercise (e.g. handwriting rows) that may continue on the next page, breaking only between rows: <section class="exercise breakable"> */
.exercise.breakable { break-inside: auto; }
.exercise.breakable .task { break-after: avoid; }

/* ==========================================================================
   Components added with lesson 5, the first phrase lesson (book/lessons/lesson-05.html).
   For reuse in lessons 6–8. No earlier rule is changed.
   ========================================================================== */

/* A digit pair: Western digit, then Arabic-Indic digit. Never inside a pronunciation line.
   <p class="digits"><span class="west">5</span> <span class="ar" lang="ar" dir="rtl">٥</span></p> */
.digits { display: flex; align-items: baseline; justify-content: center; gap: 2.5mm; line-height: 1; }
.digits .west { font-size: 11pt; font-weight: 700; color: var(--ousos-slate); }
.digits .ar { font-size: 24pt; line-height: 1.2; color: var(--ousos-violet); }

/* A counting set to learn by heart: six cards to a row, right to left. Each card is .digits + .tri.
   .num-card.aside is a cell that holds a short note instead of a number. */
.num-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2mm; direction: rtl; break-inside: avoid; }
.num-card { direction: ltr; border: 0.35mm solid var(--ousos-line); border-top: 1mm solid var(--ousos-blue); border-radius: var(--radius); padding: 1.5mm 1mm 2mm; display: grid; align-content: start; gap: 0.5mm; }
.num-card .digits { padding-bottom: 1.2mm; border-bottom: 0.25mm solid var(--ousos-line); }
.num-card .tri .ar { font-size: 21pt; line-height: 1.6; white-space: nowrap; }
.num-card .tri .pron { font-size: 11pt; }
.num-card .tri .en { font-size: 10pt; }
.num-card.aside { border-top-color: var(--ousos-violet); background: var(--ousos-violet-tint); align-content: center; text-align: center; font-size: 10pt; line-height: 1.3; padding: 2mm; }

/* A reference chart for building numbers (recognition, not memorising): two tables side by side.
   Columns: digits | Arabic | pronunciation | meaning. */
.num-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: start; break-inside: avoid; }
.num-chart { width: 100%; border-collapse: collapse; }
.num-chart caption { caption-side: top; text-align: left; font-size: 9.5pt; font-weight: 700; background: var(--ousos-blue-tint); border-radius: 1.2mm 1.2mm 0 0; padding: 1mm 2.5mm; }
.num-chart td { border-bottom: 0.3mm solid var(--ousos-line); padding: 0 1.2mm; vertical-align: middle; font-size: 10pt; line-height: 1.2; white-space: nowrap; }
.num-chart td.d { width: 15mm; }
.num-chart td.d .digits { justify-content: flex-start; gap: 1.5mm; }
.num-chart td.d .west { font-size: 10pt; }
.num-chart td.d .ar { font-size: 17pt; color: var(--ousos-ink); }
.num-chart td .ar.word { font-size: 17pt; line-height: 1.55; text-align: right; display: block; }
.num-chart td .pron { font-size: 10.5pt; }

/* A pattern panel: a short explanation, then worked examples (.num-eg = .digits above a .tri).
   .num-panel.recognise marks material to recognise only, not to learn by heart. */
.num-panel { border-radius: var(--radius); background: linear-gradient(100deg, var(--ousos-blue-tint), var(--ousos-violet-tint)); padding: 2.5mm 4mm 3mm; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2mm 6mm; break-inside: avoid; }
.num-panel > .note { color: var(--ousos-ink); font-size: var(--size-body); }
.num-panel.recognise { background: #fff; border: 0.5mm dashed var(--ousos-slate); }
.num-panel + .num-panel { margin-top: 3mm; }
.num-eg { display: grid; justify-items: center; gap: 0.5mm; }
.num-eg .tri .ar { font-size: 23pt; line-height: 1.6; white-space: nowrap; }
.num-eg .tri .pron { font-size: 11.5pt; }
.num-eg .tri .en { font-size: 10pt; }

/* Illustrated vocabulary cards three to a row, picture above the three lines: <div class="cards stack"> */
.cards.stack { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.cards.stack .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.cards.stack .card .art { padding: 2mm; }
.cards.stack .card .art img { width: 22mm; height: 22mm; }
.cards.stack .card .body { padding: 1.5mm 2mm 2.5mm; }
.cards.stack .tri .ar { font-size: 23pt; line-height: 1.65; white-space: nowrap; }
.cards.stack .tri .pron { font-size: 11.5pt; }

/* A price tag drawn in CSS (no punched hole: a small ring would read as the digit five), holding Arabic-Indic digits: <span class="price-tag"><span class="ar" lang="ar" dir="rtl">٢٥</span></span> */
.price-tag { display: inline-flex; align-items: center; gap: 2mm; border: 0.5mm solid var(--ousos-ink); border-left: 2.2mm solid var(--ousos-violet); border-radius: 1mm 2.5mm 2.5mm 1mm; background: #fff; padding: 0 3mm 0 2mm; line-height: 1; }
.price-tag .ar { font-size: 22pt; line-height: 1.45; color: var(--ousos-ink); }

/* A row of tags or numbers to read, each with a line below to write the Western digits: <div class="prices"><div class="item">…</div></div> */
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }
.prices .item { display: grid; justify-items: center; gap: 1.5mm; }
.prices .answer { width: 26mm; height: 9mm; border-bottom: 0.35mm solid var(--ousos-slate); text-align: center; font-size: 13pt; font-weight: 700; line-height: 9mm; color: var(--ousos-violet-deep); }
.prices.two { grid-template-columns: repeat(2, 1fr); }
.prices.two .answer { width: 62mm; }
.prices + .prices { margin-top: 4mm; }

/* A phone number in Arabic-Indic digits, groups kept left to right as on a phone screen:
   <p class="phone-no"><span class="ar" lang="ar" dir="rtl">٠٩٠٠</span><span class="ar" lang="ar" dir="rtl">٢٤٦</span>…</p> */
.phone-no { display: flex; direction: ltr; gap: 3mm; justify-content: center; align-items: center; border: 0.35mm solid var(--ousos-line); border-radius: 2mm; background: var(--ousos-blue-tint); padding: 0 4mm; }
.phone-no .ar { font-size: 22pt; line-height: 1.5; }

/* Dictation boxes: numbered cells to write in. <div class="write-cells"><div class="cell"><span class="n">1</span>…</div></div> */
.write-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.write-cells .cell { border: 0.35mm solid var(--ousos-line); border-radius: 2mm; height: 15mm; padding: 0.5mm 2mm; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2mm; }
.write-cells .n { align-self: start; font-weight: 700; color: var(--ousos-violet-deep); }
.write-cells .done { text-align: center; }
.write-cells .done .ar { display: block; font-size: 22pt; line-height: 1.3; color: var(--ousos-violet-deep); }
.write-cells .done .pron { display: block; font-size: 9.5pt; line-height: 1.2; margin-top: 0.5mm; }

/* Matching with three-line units: a key row of shapes (as .match .keys) over a row of .tri items with answer boxes.
   <div class="match"><div class="row keys">…</div><div class="row words"><div class="item"><div class="tri">…</div><p class="answer"></p></div>…</div></div> */
.match .row.words .item { padding: 1mm 0.5mm 2mm; }
.match .row.words .tri .ar { font-size: 20pt; line-height: 1.6; white-space: nowrap; }
.match .row.words .tri .pron { font-size: 10.5pt; }
.match .row.words .tri .en { font-size: 10pt; }
.match .row.words .answer { margin-top: 1mm; height: 10mm; width: 10mm; }
.match .row.words .answer .ar { font-size: 20pt; line-height: 9mm; color: var(--ousos-violet-deep); }
.match .keys .glyph.digit { font-size: 28pt; line-height: 1.5; }

/* Picture-and-answer rows for a gap dialogue: picture | price tag | the line to complete.
   <div class="price-rows"><div class="price-row"><img …><span class="price-tag">…</span><div class="tri">…</div></div>…</div> */
.price-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 5mm; }
.price-row { display: grid; grid-template-columns: 18mm auto 1fr; align-items: center; gap: 3mm; border: 0.35mm solid var(--ousos-line); border-radius: var(--radius); padding: 1mm 3mm; break-inside: avoid; }
.price-row img { width: 18mm; height: 18mm; }
.price-row .tri .ar { font-size: 20pt; line-height: 1.6; white-space: nowrap; }
.price-row .tri .pron { font-size: 11pt; }
.price-row .tri .en { font-size: 10pt; }
.price-row .blank { width: 20mm; }

/* A market stall for a role-play: a striped awning over items, each with a label (.tri) and a .price-tag.
   <div class="stall"><div class="stall-item"><img …><div class="tri">…</div><span class="price-tag">…</span></div>…</div> */
.stall { border: 0.35mm solid var(--ousos-line); border-radius: var(--radius); overflow: hidden; break-inside: avoid; }
.stall::before { content: ""; display: block; height: 7mm; background: repeating-linear-gradient(90deg, var(--ousos-blue) 0 12mm, #fff 12mm 24mm); border-bottom: 0.5mm solid var(--ousos-ink); }
.stall .goods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2mm; direction: rtl; padding: 3mm 3mm 3.5mm; }
.stall-item { direction: ltr; display: grid; justify-items: center; align-content: start; gap: 1mm; }
.stall-item img { width: 20mm; height: 20mm; }
.stall-item .tri .ar { font-size: 19pt; line-height: 1.6; white-space: nowrap; }
.stall-item .tri .pron { font-size: 10.5pt; }
.stall-item .tri .en { font-size: 10pt; }
.stall-item .price-tag .ar { font-size: 20pt; }

/* The ten digits on a navy neon panel (counts as the page's one navy panel), right to left:
   <div class="digit-strip"><div class="d"><span class="ar" lang="ar" dir="rtl">٠</span><span class="west">0</span></div>…</div> */
.digit-strip { border-radius: var(--radius); padding: 1.5mm 4mm 2mm; display: grid; grid-template-columns: repeat(10, 1fr); direction: rtl; break-inside: avoid;
  background:
    radial-gradient(circle at 50% 40%, rgba(21,112,255,0.34), rgba(21,112,255,0) 60%),
    radial-gradient(circle at 0% 0%, rgba(0,189,196,0.30), rgba(0,189,196,0) 45%),
    radial-gradient(circle at 100% 100%, rgba(138,34,201,0.55), rgba(138,34,201,0) 50%),
    var(--ousos-navy); }
.digit-strip .d { direction: ltr; display: grid; justify-items: center; }
.digit-strip .d + .d { border-right: 0.3mm solid rgba(201,214,255,0.35); }
.digit-strip .ar { font-size: 28pt; line-height: 1.4; color: #fff; }
.digit-strip .west { font-size: 10.5pt; font-weight: 700; color: #C9D6FF; }

/* In a dialogue, the speaker label of the lines the learner must say: <p class="who you">You say</p> */
.turn .who.you { color: var(--ousos-violet-deep); }
/* A second dialogue under the first, or a dialogue that follows a lead: extra space above */
.exercise .dialogue { margin-top: 2mm; margin-bottom: 0; }
/* Keeps a heading, its lead and the block after it on one page: <div class="keep">…</div> */
.keep { break-inside: avoid; }

/* Narrow number column for rows that carry a long Arabic line (lesson 14 Practice 3): <div class="price-rows compact"> */
.price-rows.compact .price-row { grid-template-columns: 9mm 1fr; padding: 1mm 2mm; gap: 2mm; }
.price-rows.compact .price-row .tri .ar { font-size: 18pt; }

/* Space between a row of cards and the numbered steps that follow it inside an exercise */
.exercise .cards + .steps, .exercise .cards + ol { margin-top: 4mm; }