/* Styles shared by the editor and the printed PDF */
:root { --ink: #111; --line: #555; }

.page {
  width: 210mm; min-height: 297mm; box-sizing: border-box;
  padding: 13mm 14mm; background: #fff; color: var(--ink);
  font-family: "Times New Roman", "Amiri", "Cairo", serif; font-size: 15.5pt; line-height: 1.55;
  position: relative; overflow-wrap: anywhere;
}
.page [dir="rtl"], .page:lang(ar) { font-family: "Cairo", "Amiri", "Times New Roman", serif; }
.page.page-rtl { direction: rtl; }

.sheet-header { border: 2px solid var(--ink); padding: 6px 10px; margin-bottom: 12px; font-size: 13.5pt; }
.sheet-header table.hdr { width: 100%; border-collapse: collapse; }
.sheet-header table.hdr td { border: 1.5px solid var(--ink); padding: 4px 8px; text-align: center; vertical-align: middle; }
.sheet-header h1 { font-size: 19pt; margin: 2px 0 6px; text-align: center; }

.section-title { font-size: 16.5pt; font-weight: 700; margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.sec-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; height: 1.45em;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: .85em; padding: 0 3px; flex: none;
}
.q { margin: 5px 0 5px 1.2em; }
[dir="rtl"] .q, .q[dir="rtl"] { margin: 5px 1.2em 5px 0; }
.q .q { margin-top: 3px; }
.q-num { font-weight: 600; margin-inline-end: 4px; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 2px 18px; margin: 3px 0 6px 1.6em; }
[dir="rtl"] .choices, .choices[dir="rtl"] { margin: 3px 1.6em 6px 0; }

.blank { display: inline-block; min-width: 5.5em; border-bottom: 2px dotted var(--line); height: 1em; vertical-align: baseline; margin: 0 3px; }
.blank.short { min-width: 2.5em; }
.blank.long { min-width: 12em; }
.box {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: 1.7em; height: 1.45em; border: 1.6px solid var(--ink); border-radius: 3px; margin: 0 4px; padding: 0 3px; font-size: .95em;
}
.row { display: flex; gap: 16px; align-items: flex-start; }
.row > * { flex: 1 1 0; min-width: 0; }
.figure-wrap { display: flex; justify-content: center; margin: 6px 0; }
.figure-wrap.left { justify-content: flex-start; }
.figure-wrap.right { justify-content: flex-end; }
svg.figure { max-width: 100%; height: auto; overflow: visible; }
img.sheet-img { max-width: 100%; height: auto; }

table.grid { border-collapse: collapse; margin: 6px auto; }
table.grid td, table.grid th { border: 1.5px solid var(--ink); padding: 4px 10px; text-align: center; min-width: 2.2em; }

/* ---------- تسطير جاهز: خطوط للكتابة / مربعات (تختزن بخطوطها في الطباعة وPDF وWord) ---------- */
.ruled-block {
  margin: 6px 0; min-height: 20mm; direction: ltr;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  break-inside: avoid; page-break-inside: avoid;
}
.ruled-lines {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(8mm - 0.35mm), var(--ink) calc(8mm - 0.35mm), var(--ink) 8mm);
}
.ruled-sq {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(5mm - 0.35mm), color-mix(in srgb, var(--ink) 40%, transparent) calc(5mm - 0.35mm), color-mix(in srgb, var(--ink) 40%, transparent) 5mm),
    repeating-linear-gradient(to right, transparent 0, transparent calc(5mm - 0.35mm), color-mix(in srgb, var(--ink) 40%, transparent) calc(5mm - 0.35mm), color-mix(in srgb, var(--ink) 40%, transparent) 5mm);
}
.ruled-both {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(8mm - 0.5mm), var(--ink) calc(8mm - 0.5mm), var(--ink) 8mm),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(5mm - 0.2mm), color-mix(in srgb, var(--ink) 40%, transparent) calc(5mm - 0.2mm), color-mix(in srgb, var(--ink) 40%, transparent) 5mm),
    repeating-linear-gradient(to right, transparent 0, transparent calc(5mm - 0.2mm), color-mix(in srgb, var(--ink) 40%, transparent) calc(5mm - 0.2mm), color-mix(in srgb, var(--ink) 40%, transparent) 5mm);
}
table.plain td { border: 0; }

.clip { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 0 3px; }
.clip .ico { position: relative; display: inline-block; line-height: 0; }
.clip .ico svg { width: 100%; height: 100%; }
.clip .ico .lbl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 14pt/1 Arial, "Cairo", sans-serif; color: #fff; line-height: 1; padding-top: 14%;
  -webkit-text-stroke: 3px #1a1a1a; paint-order: stroke fill;
}
.clip .emoji { line-height: 1; }

.math { white-space: nowrap; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.math.math-ar { direction: rtl; }
.math .katex { font-size: 1.05em; }
mark.check { background: #fff2a8; }
.page-break { height: 0; }

/* print / PDF */
@page { size: A4; margin: 0; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .page { box-shadow: none !important; margin: 0 !important; break-after: page; }
  .page:last-child { break-after: auto; }
  mark.check { background: none; }
  .no-print { display: none !important; }
  .q, .choices, .figure-wrap, table.grid, .row { break-inside: avoid; }
}
body.print { margin: 0; }
body.print .page { break-after: page; }
body.print .page:last-child { break-after: auto; }
body.print mark.check { background: none; }

/* ============================================================ 🧒 كتاب الحضانة (kids.js) — تصميم Ibny Academy
   صفحة لكل حرف: إطار ملون بحافة ذهبية + ريبون متموج + 4 أقسام مرقمة — نفس الألوان في الطباعة/PDF */
.wk-page {
  --wk-hand: "Comic Sans MS", "Segoe Print", "Comic Neue", "Bradley Hand", Cairo, cursive;
  position: relative; display: flex; flex-direction: column; min-height: 266mm; box-sizing: border-box;
  border: 3.2mm solid var(--acc); border-radius: 15px; color: #26344a;
  background-color: var(--pgbg, #fff9ec);
  background-image: radial-gradient(rgba(15, 23, 42, .05) 1.15px, transparent 1.45px); background-size: 13px 13px;
  font-family: "Segoe UI", Tahoma, Cairo, Arial, sans-serif; line-height: 1.4;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow-wrap: normal;
}
.wk-page, .wk-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* حلقة ذهبية منقطة داخل الإطار */
.wk-page::after {
  content: ""; position: absolute; inset: 1.5mm; border: 1.7px dashed rgba(209, 152, 34, .8);
  border-radius: 8px; pointer-events: none;
}
.wk-page[dir="rtl"] { direction: rtl; }
.wk-page .q { margin: 0; }
/* ريبون متموج فوق وتحت (صف من الأنفالScala ملتصقة بشريط ثابت) */
.wk-ribbon { position: absolute; left: 4mm; right: 4mm; height: 7.2mm; pointer-events: none; }
.wk-rib-top {
  top: 3.7mm;
  background-image: linear-gradient(var(--acc), var(--acc)),
    radial-gradient(circle at 50% 0, var(--acc) 4.6px, transparent 5.3px);
  background-size: 100% 3mm, 12px 8.6px;
  background-position: 0 0, center 3mm;
  background-repeat: no-repeat, repeat-x;
}
.wk-rib-bot {
  bottom: 3.7mm;
  background-image: linear-gradient(var(--acc), var(--acc)),
    radial-gradient(circle at 50% 100%, var(--acc) 4.6px, transparent 5.3px);
  background-size: 100% 3mm, 12px 8.6px;
  background-position: 0 100%, center calc(100% - 3mm);
  background-repeat: no-repeat, repeat-x;
}
/* جسم الصفحة: فوق الريبون */
.wk-in { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 12mm 9mm 11mm; }
.wk-i { display: block; }
.wk-svg { width: 100%; height: auto; display: block; }

/* ---------- الهيدر: شعار + اسم + ماسكوم + أقلام + بادج الحرف ---------- */
.wk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 2px solid var(--acc-soft); border-radius: 18px; padding: 9px 13px;
  box-shadow: 0 2px 5px rgba(24, 36, 56, .07); flex: none;
}
.wk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wk-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 13px; background: #fff; border: 2px solid #eef2f7; padding: 2px; flex: none; }
.wk-nologo { display: grid; place-items: center; font-size: 29px; background: var(--acc); border-color: rgba(255, 255, 255, .5); padding: 0; }
.wk-brandt { display: flex; flex-direction: column; min-width: 0; }
.wk-name { font-size: 21px; font-weight: 800; color: #26344a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--wk-hand); }
.wk-sub { font-style: normal; font-size: 12px; font-weight: 700; color: var(--acc); letter-spacing: .4px; }
.wk-mascot { width: 54px; height: 58px; flex: none; }
.wk-hr { display: flex; align-items: center; gap: 10px; flex: none; }
.wk-pencils { width: 82px; height: 31px; flex: none; }
.wk-badge {
  width: 84px; height: 86px; flex: none; border-radius: 18px; background: var(--acc); color: #fff;
  display: grid; place-items: center; font-size: 38px; font-weight: 900; line-height: 1.02;
  font-family: var(--wk-hand); box-shadow: inset 0 0 0 3.5px rgba(255, 255, 255, .4);
}
.wk-badge small { font-size: .58em; opacity: .95; }

/* ---------- الأقسام المرقمة (رقعة صفراء) ---------- */
.wk-no {
  display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  background: #ffc93a; color: #5f430b; border: 2px solid #f0ae27;
  font-weight: 900; font-size: 14px; vertical-align: middle; margin-inline-end: 9px;
  box-shadow: 0 2px 0 rgba(190, 128, 13, .3); flex: none;
}
.wk-act-t { font-size: 17.5px; font-weight: 800; vertical-align: middle; color: #26344a; }
.wk-act {
  display: block; border: 2.4px solid #e2e8f0; border-radius: 18px; background: #fff;
  padding: 9px 13px 11px; margin-top: 9px;
}
.wk-a1 { display: flex; gap: 12px; align-items: stretch; margin-top: 8px; }
.wk-bigbox {
  flex: none; width: 29%; display: grid; place-items: center; padding: 4px;
  border: 2px dashed var(--acc-soft); background: var(--acc-tint); border-radius: 15px;
}
.wk-big { display: grid; place-items: center; gap: 5px; width: 100%; padding: 3px 0; }
.wk-big svg { width: 62%; height: auto; display: block; }
.wk-cards { display: flex; gap: 12px; flex: 1 1 auto; min-width: 0; }
.wk-card {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  border-radius: 15px; border: 2px solid #eef2f7; background: #fff; padding: 9px 8px;
  box-shadow: 0 2px 6px rgba(20, 30, 50, .05);
}
.wk-pic { width: 96px; height: 96px; display: block; }
.wk-pic svg.wk-i { width: 100%; height: 100%; }
.wk-card b {
  font-size: 14px; color: #fff; background: var(--acc); border-radius: 999px;
  padding: 3.5px 15px; line-height: 1.3; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700;
}

/* ---------- تتبع على سطر الدفتر (خط أحمر + سطر تعقب منقط + سطر كتابة داكن) ---------- */
.wk-trace { margin-top: 8px; display: flex; flex-direction: column; gap: 5.5mm; }
.wk-trow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; position: relative;
  border-bottom: 2.7px solid #2e3f55;
  border-top: 1.7px dashed rgba(214, 51, 108, .5);
}
.wk-trow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 52%;
  border-top: 1.4px dashed #aac0d3;
}
.wk-t { display: flex; align-items: flex-end; justify-content: center; }
.wk-t svg { display: block; width: 95%; height: auto; }

.wk-split { display: flex; gap: 10px; align-items: stretch; }
.wk-act.wk-half { flex: 1 1 0; min-width: 0; }
.wk-half .wk-act-t { font-size: 15.5px; }

/* صِل: صندوق الحرف + نقطة + خط منقط + صورة وكلمة */
.wk-mrow { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.wk-ml {
  font-size: 25px; font-weight: 900; color: #26344a; flex: none;
  border: 2.2px solid var(--acc-soft); background: var(--acc-tint); border-radius: 12px;
  min-width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--wk-hand);
}
.wk-mdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wk-mline { flex: 1 1 auto; height: 2.4px; border-radius: 2px; opacity: .5; min-width: 12px; }
.wk-mpi { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; }
.wk-mpi svg.wk-i { width: 46px; height: 46px; flex: none; }
.wk-mpi b { font-size: 14.5px; color: #31415a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* دوِّر على الحرف: صورة + فخختين منقّطين بداخلهم الحروف */
.wk-crow { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.wk-cpic { display: block; flex: none; width: 41px; height: 41px; }
.wk-cpic svg.wk-i { width: 100%; height: 100%; }
.wk-cbox {
  flex: 1 1 0; display: grid; place-items: center; border: 2.5px dashed #b9c8d8;
  border-radius: 14px; height: 42px; background: #fff;
}
.wk-cbox b { font-size: 24px; font-weight: 900; color: #26344a; font-family: var(--wk-hand); }

/* اختار واكتب (تخطيط B): الصورة + الكلمة + مربع فاضي + بنك حروف تحت */
.wk-bank { margin-top: 5px; display: flex; flex-direction: column; flex: 1; }
.wk-brow { display: flex; align-items: center; gap: 8px; padding: 3.5px 0; }
.wk-bpic { width: 42px; height: 42px; flex: none; }
.wk-bpic svg.wk-i { width: 100%; height: 100%; }
.wk-bword { font-size: 15.5px; color: #31415a; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.wk-boff { flex: none; width: 54px; height: 42px; border: 2.6px dashed #b9c8d8; border-radius: 11px; background: var(--acc-tint); }
.wk-bchips { display: flex; gap: 8px; justify-content: center; margin-top: auto; padding-top: 6px; }
.wk-bchips span {
  min-width: 41px; height: 41px; display: grid; place-items: center;
  border: 2.2px solid var(--acc-soft); border-radius: 12px; background: #fff;
  font-family: var(--wk-hand); font-weight: 900; font-size: 21px; color: #26344a;
}

/* لوِّن الصور (تخطيط B): شبكة 2×2 ببطاقة اسم تحت كل رسمة */
.wk-color2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 5px; flex: 1; }
.wk-cl {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px;
  border: 2px dashed #dbe3ec; border-radius: 13px; background: var(--acc-tint); padding: 6px 6px 7px; min-width: 0;
}
.wk-cl svg { display: block; width: 86%; height: auto; }
.wk-cl b {
  font-size: 12.5px; color: #fff; background: var(--acc); border-radius: 999px; padding: 2px 11px;
  font-weight: 700; max-width: 97%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- الفوتر: كتب متراكمة + Learn ★ Grow ★ Shine ---------- */
.wk-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 11px;
  padding-top: 9px; color: var(--acc); font-weight: 800; font-size: 15px;
  border-top: 2px dashed var(--acc-soft); flex: none;
}
.wk-stackw { display: inline-block; width: 54px; height: 29px; flex: none; }
.wk-stack { display: block; width: 100%; height: 100%; }
.wk-foot i { font-style: normal; opacity: .7; }

/* رسمة الذكاء الاصطناعي (نانو بنانا) لكل صفحة */
.wk-ai-hero { margin: 0 0 8px; border: 2px dashed #c9d6e2; border-radius: 14px; background: #fff; padding: 4px; flex: none; }
.wk-ai-hero img.wk-ai { display: block; width: 100%; height: 26mm; object-fit: cover; object-position: center; border-radius: 10px; }

/* ---------- الغلاف ---------- */
.wk-cover { justify-content: flex-start; }
.wk-cover-mid {
  border: 2.6px solid var(--acc); border-radius: 20px; padding: 17px 18px 19px; text-align: center;
  margin-top: 13px; background: #fff; position: relative;
}
.wk-cstack { display: inline-block; width: 66px; height: 36px; }
.wk-cover-mid h2 { font-size: 30px; margin: 5px 0 6px; color: var(--acc); font-family: var(--wk-hand); }
.wk-cover-mid p { margin: 0; font-size: 17px; color: #4b5a70; font-weight: 700; }
.wk-cover-row { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.wk-cover-row svg.wk-i { width: 64px; height: 64px; }
.wk-ab { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 13px; }
.wk-ab span {
  display: grid; place-items: center; border-radius: 12px; border: 2px solid #e9eef5; background: #fff;
  font-weight: 800; font-size: 21px; font-family: var(--wk-hand); padding: 5px 0;
  box-shadow: 0 1.5px 0 rgba(20, 30, 50, .05);
}
.wk-owner {
  margin-top: 15px; display: grid; grid-template-columns: auto 1fr; gap: 11px 14px; align-items: end;
  border: 2px dashed var(--acc); border-radius: 16px; background: #fff; padding: 14px 16px; flex: none;
}
.wk-owner b { font-size: 17px; font-weight: 800; color: #26344a; white-space: nowrap; }
.wk-owner i { border-bottom: 2.5px dashed #9db0c4; height: 1.15em; min-width: 40px; }

/* ============ معاينة الكتاب: صفحة قدام صفحة بظل تجليد حقيقي ============ */
.wk-ov { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .72); display: flex; flex-direction: column; }
.wk-ov-bar { display: flex; align-items: center; gap: 12px; background: #0f172a; color: #fff; padding: 10px 16px; }
.wk-ov-bar b { white-space: nowrap; }
.wk-ov-bar span { opacity: .85; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ov-x { margin-inline-start: auto; border: 0; background: #1e293b; color: #fff; width: 36px; height: 36px; border-radius: 10px; font-size: 15px; cursor: pointer; flex: none; }
.wk-ov-x:hover { background: #334155; }
.wk-ov-scroll { flex: 1; overflow: auto; padding: 24px 16px 54px; }
.wk-book {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5px;
  width: min(1180px, 100%); margin-inline: auto; position: relative;
}
/* كعب الكتاب: ظل رأسي في وسط الفتحة */
.wk-book::before {
  content: ""; position: absolute; top: -14px; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 17px; border-radius: 50%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(9, 14, 26, .38) 42%, rgba(5, 9, 17, .62) 50%, rgba(9, 14, 26, .38) 58%, transparent);
}
.wk-bkpg { position: relative; min-width: 0; padding: 9px 9px 16px; background: rgba(240, 243, 248, .55); }
.wk-bkpg::after { content: ""; position: absolute; inset-block: 9px; width: 38px; pointer-events: none; z-index: 2; }
.wk-bkpg.fl-end::after { inset-inline-end: 9px; background: linear-gradient(to left, rgba(9, 14, 26, .38), transparent); }
.wk-bkpg.fl-start::after { inset-inline-start: 9px; background: linear-gradient(to right, rgba(9, 14, 26, .38), transparent); }
.wk-book .wk-page { box-shadow: 0 10px 24px rgba(9, 14, 26, .35); border-radius: 6px; }
.wk-load { grid-column: 1 / -1; text-align: center; color: #cbd5e1; padding: 26px 0 6px; font-size: 13px; grid-row: auto; }
@media (max-width: 720px) { .wk-book { grid-template-columns: 1fr; } .wk-bkpg::after, .wk-book::before { display: none; } .wk-bkpg { background: none; } }