/* ═══ طبقة الصغار — نماذج الصفّ الأوّل الابتدائيّ (٦–٧ سنوات) ═══════════════════════
   تُحمَّل بعد lab3d.css ولا تعدّله:  <link rel="stylesheet" href="../_kit/kids.css" />
   وتعمل فقط حين يحمل <body> الصنف .kids — الصفحة تضيفه دائماً لنماذج الصفّ الأوّل، أو حين ‎?g=1‎
   في نموذجٍ مشترك بين الصفوف:  if (grade1 || params.get("g") === "1") document.body.classList.add("kids")
   العقد كما هو (#dock/#phaseRow/#track/#actions/.tick/.btn/.card/.lbl…)، وهذه الطبقة تغيّر المقاسات فقط:
     • أهداف لمس ≥ ٦٤px (الأزرار وعلامات المنزلق)، ومقبض منزلقٍ كبير.
     • خطٌّ أكبر وسطرٌ أعلى يتّسع للتشكيل الكامل (النصّ الظاهر مشكولٌ من الصفحة نفسها).
     • لوحةٌ «بسطرٍ واحد» على الشاشات العريضة: المنزلق والأزرار في صفٍّ واحد تحت الاسم والجملة.
     • #lit مخفيّ إلا إذا حمل الصنف .count (حين يكون العدّ هو الدرس).
     • أدوات جاهزة: .hexes (عدّاد سداسيّات يمتلئ أصفر)، .lbl.pop (الاسم يكبر ≥٢٨px)،
       .card.good (وميضٌ أخضر)، .kshake (اهتزازٌ خفيف بلا أحمر).
   الدليل: artifacts/huroof-3d/specs/g1-science.md (الملاحظة ٢). */

body.kids{--kid-tap:64px;--kid-gap:10px}

/* ── الرأس ── */
body.kids #brand h1{font-size:19px;line-height:1.5}
body.kids #brand p{font-size:12.5px}
body.kids #back{width:52px;height:52px}

/* ── أسماء الأجسام: كبيرة ونصٌّ فقط (بلا إطار، كما في lab3d.css) ── */
body.kids .lbl{font-size:24px;line-height:1.7;letter-spacing:0;transition:color .25s,opacity .25s}
body.kids .lbl.pop{font-size:30px;color:var(--yellow);animation:kpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes kpop{0%{scale:1}40%{scale:1.22}100%{scale:1}}

/* ── اللوحة ── */
body.kids #dock{width:min(980px,calc(100% - 24px));padding:14px 18px 14px;border-radius:26px}
body.kids #phaseRow{gap:16px;align-items:center}
body.kids #phaseIcon{width:64px;height:64px}
body.kids #phaseName{font-size:32px;line-height:1.45;gap:12px}
body.kids #phaseDesc{margin-top:0;font-size:20px;font-weight:700;line-height:1.85;color:#EAF0FB}
body.kids #lit:not(.count){display:none}
body.kids #lit.count b{font-size:34px}

/* المنزلق: مقبضٌ كبير وعلاماتٌ أيقونة + كلمة، كلّها ≥ ٦٤px */
body.kids #track{margin:10px 8px 0;padding-bottom:76px}
body.kids #day{height:48px}
body.kids #day::-webkit-slider-runnable-track{height:12px;border-radius:12px}
body.kids #day::-moz-range-track{height:12px;border-radius:12px}
body.kids #day::-webkit-slider-thumb{width:46px;height:46px;margin-top:-17px;border-width:5px}
body.kids #day::-moz-range-thumb{width:36px;height:36px;border-width:5px}
body.kids #ticks{top:46px;left:23px;right:23px;height:72px}
body.kids .tick{min-width:var(--kid-tap);min-height:var(--kid-tap);padding:6px 10px 4px;border-radius:18px;gap:0;
  font-size:16.5px;font-weight:800;line-height:1.55;color:#C9D5EE}
body.kids .tick svg{width:30px;height:30px}
body.kids .tick.on{color:#fff;background:rgba(255,187,0,.16);box-shadow:inset 0 0 0 2px rgba(255,187,0,.6)}
/* وضع التكبير (lab3d.css يُخفي كلمات العلامات): تبقى الأيقونات بمساحتها فقط */
body.kids.big #track{padding-bottom:58px}

/* الأزرار */
body.kids #actions{gap:var(--kid-gap)}
body.kids .btn{height:var(--kid-tap);min-width:var(--kid-tap);padding:0 20px;border-radius:22px;font-size:19px;line-height:1.5}
body.kids .btn svg{width:28px;height:28px}
body.kids .btn.ghost{width:var(--kid-tap);padding:0}
body.kids .btn.primary{padding:0 22px}

/* لوحةٌ بسطرٍ واحد على الشاشات العريضة: [الاسم والجملة] فوق، و[المنزلق | الأزرار] في صفٍّ واحد.
   ما تحت #dock غير #track و#actions (‎#phaseRow‎ ولوحات الشرح) يأخذ العرض كاملاً.
   في وضع الظاهرة (#dock.eclipse، اصطلاح النماذج كلّها) تمتدّ الأزرار على السطر كلّه. */
@media (min-width:900px){
  body.kids #dock{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:start}
  body.kids #dock>*{grid-column:1/-1}
  body.kids #dock>#track{grid-column:1}
  body.kids #dock>#actions{grid-column:2;flex-wrap:nowrap;margin-top:6px}
  body.kids #dock>#actions .grow{display:none}
  body.kids #dock.eclipse>#actions{grid-column:1/-1;justify-content:flex-start;margin-top:10px}
}

/* ── «التحدّي» باللمس ── */
body.kids .card{padding:16px 20px;border-radius:26px}
body.kids .card h2{font-size:24px;line-height:1.5}
body.kids .card p{font-size:26px;font-weight:800;line-height:1.75}
body.kids .card .row{gap:var(--kid-gap);align-items:center}
body.kids .card.good{box-shadow:0 0 0 3px var(--green),0 0 46px rgba(31,191,117,.55)}
body.kids #challengeCard .target{color:var(--yellow)}
body.kids #challengeCard .ok{color:var(--green)}

/* عدّاد السداسيّات: تمتلئ بالأصفر #FFBB00 — لا أرقام */
.hexes{display:inline-flex;gap:6px;align-items:center;direction:rtl}
.hexes i{display:block;width:30px;height:34px;background:rgba(255,255,255,.14);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .3s}
.hexes i.on{background:var(--yellow)}
.hexes i.new{animation:kpop .55s cubic-bezier(.3,1.6,.5,1)}

/* اهتزازٌ خفيف للإجابة الخاطئة (بلا لونٍ أحمر حتى لا يُحبط الطفل) */
.kshake{animation:kshake .45s}
@keyframes kshake{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:3px}}

body.kids #hint{font-size:16px;padding:6px 14px}
body.kids #inset .cap{font-size:14px;line-height:1.6}
body.kids #insetName{font-size:15px}

/* ── جوّال بالطول ── */
@media (max-width:640px){
  body.kids #brand h1{font-size:16px}
  body.kids #dock{padding:12px 12px 12px}
  body.kids #phaseIcon{width:50px;height:50px}
  body.kids #phaseName{font-size:26px}
  body.kids #phaseDesc{font-size:17.5px;line-height:1.8}
  body.kids .tick span{display:block}          /* الكلمة تبقى تحت الأيقونة: الطفل يقرأ بالصورة والكلمة */
  body.kids #track{padding-bottom:74px}
  body.kids .tick{min-width:60px;padding:6px 6px 4px;font-size:15px}
  body.kids .btn{padding:0 14px;font-size:17px}
  body.kids .lbl{font-size:20px}
  body.kids .lbl.pop{font-size:28px}
  body.kids .card p{font-size:22px}
  body.kids #inset .cap{font-size:12px}
}

/* ── إطارٌ قصير (مضمَّن في صفحة درس، أو جوّال بالعرض): المشهد يبقى ظاهراً ──
   الأزرار ٥٢px هنا وحدها (الإطار لا يتّسع لـ٦٤)، والجملة في سطرٍ واحد. */
@media (max-height:560px){
  body.kids #dock{padding:8px 14px 8px;border-radius:20px}
  body.kids #phaseIcon{width:40px;height:40px}
  body.kids #phaseName{font-size:21px;line-height:1.35}
  body.kids #phaseDesc{display:block;font-size:15px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.kids #track{margin-top:2px;padding-bottom:50px}
  body.kids #day{height:38px}
  body.kids #day::-webkit-slider-thumb{width:36px;height:36px;margin-top:-12px;border-width:4px}
  body.kids #ticks{top:36px;height:50px;left:18px;right:18px}
  body.kids .tick{min-height:48px;min-width:52px;padding:2px 6px;font-size:13px;line-height:1.4}
  body.kids .tick span{display:block}
  body.kids .tick svg{width:22px;height:22px}
  body.kids .btn{height:52px;min-width:52px;font-size:15.5px;padding:0 14px;border-radius:16px}
  body.kids .btn.ghost{width:52px}
  body.kids .btn svg{width:24px;height:24px}
  body.kids .card p{font-size:19px;line-height:1.6}
  body.kids .card h2{font-size:18px}
  body.kids .hexes i{width:22px;height:25px}
  body.kids .lbl{font-size:16px}
  body.kids .lbl.pop{font-size:22px}
}
@media (max-height:560px) and (min-width:600px){
  body.kids #dock{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
  body.kids #dock>*{grid-column:1/-1}
  body.kids #dock>#track{grid-column:1}
  body.kids #dock>#actions{grid-column:2;flex-wrap:nowrap}
  body.kids #dock>#actions .grow{display:none}
  body.kids #dock.eclipse>#actions{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){body.kids .lbl.pop,.hexes i.new,.kshake{animation:none}}

/* ── وضع الثالث الابتدائيّ (body.kids.k3): خطٌّ أصغر من الأوّل بدرجة، واللوحة تتّسع لجملتين من الكتاب ── */
body.kids.k3 #phaseName{font-size:28px}
body.kids.k3 #phaseDesc{font-size:18px;line-height:1.8}
body.kids.k3 .tick{font-size:15px}
body.kids.k3 .btn{font-size:17.5px}
body.kids.k3 .lbl{font-size:21px}
body.kids.k3 .lbl.pop{font-size:27px}
body.kids.k3 .card p{font-size:23px;line-height:1.7}
body.kids.k3 #brand h1{font-size:18px}
@media (max-width:640px){
  body.kids.k3 #phaseName{font-size:22px} body.kids.k3 #phaseDesc{font-size:15px;line-height:1.75}
  body.kids.k3 .lbl{font-size:17px} body.kids.k3 .lbl.pop{font-size:23px}
  body.kids.k3 .card p{font-size:19px}
}
@media (max-height:560px){
  body.kids.k3 #phaseName{font-size:20px} body.kids.k3 #phaseDesc{font-size:14px}
  body.kids.k3 .card p{font-size:17px}
  body.kids.k3 .lbl{font-size:15px} body.kids.k3 .lbl.pop{font-size:20px}
}

/* ── السمة الفاتحة (الأصل): kids.css يُحمَّل بعد lab3d.css فيغلب ألوانه الفاتحة على
   السمة، فتُعاد هنا صراحةً لنصوص الصغار (الوصف، العلامات، التحدّي) ── */
html.light body.kids #phaseDesc{color:#2A3B5F}
html.light body.kids .tick{color:#52628A;text-shadow:none}
html.light body.kids .tick.on{color:#1A3365;background:rgba(255,187,0,.2);box-shadow:inset 0 0 0 2px rgba(255,150,0,.65)}
html.light body.kids .lbl.pop{color:#C77A00}
html.light body.kids #challengeCard .target{color:#E07B00}
html.light body.kids #challengeCard .ok{color:#14995A}

/* ── وضع الثاني الابتدائيّ (body.kids.k2): بين الأوّل والثالث — جملتان قصيرتان مشكولتان (g2-math.md §٢) ── */
body.kids.k2{--kid-tap:60px}
body.kids.k2 #phaseName{font-size:30px}
body.kids.k2 #phaseDesc{font-size:19px;line-height:1.8}
body.kids.k2 .tick{font-size:15.5px}
body.kids.k2 .btn{font-size:18px}
body.kids.k2 .lbl{font-size:22px}
body.kids.k2 .lbl.pop{font-size:28px}
body.kids.k2 .card p{font-size:24px;line-height:1.7}
body.kids.k2 #brand h1{font-size:18.5px}
@media (max-width:640px){
  body.kids.k2 #phaseName{font-size:22px} body.kids.k2 #phaseDesc{font-size:15px;line-height:1.75}
  body.kids.k2 .lbl{font-size:17px} body.kids.k2 .lbl.pop{font-size:23px}
  body.kids.k2 .card p{font-size:19px}
}
@media (max-height:560px){
  body.kids.k2 #phaseName{font-size:20px} body.kids.k2 #phaseDesc{font-size:14px}
  body.kids.k2 .card p{font-size:17px}
  body.kids.k2 .lbl{font-size:15px} body.kids.k2 .lbl.pop{font-size:20px}
}

/* ── أوضاع الرابع والخامس والسادس الابتدائيّ (body.kids.k4/.k5/.k6) — أُضيفت مع day-seasons (٢١ أكتوبر ٢٠٢٦)
   المواصفات: g4-science.md §٢ · g5-science.md §٢ · g6-science.md §٣. قاعدة ١٤ أكتوبر: المصطلح وحده كبيراً
   (‎#phaseName‎ ≥ ٣٠px على ١٩٢٠)، وجملةٌ قصيرة واحدة كحدٍّ أقصى، و‎#lit‎ حين يكون الرقم هو الدرس (‎.count‎). ── */
body.kids.k4,body.kids.k5,body.kids.k6{--kid-tap:56px}
body.kids.k4 #phaseName,body.kids.k5 #phaseName,body.kids.k6 #phaseName{font-size:30px;font-weight:900;line-height:1.4}
body.kids.k4 #phaseDesc{font-size:17px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kids.k4 #phaseDesc:empty{display:none}
body.kids.k5 #phaseDesc{display:none}
body.kids.k6 #phaseDesc{font-size:18px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kids.k6 #phaseDesc:empty{display:none}
body.kids.k6 #lit:not(.count){display:block}
body.kids.k4 .lbl{font-size:22px} body.kids.k4 .lbl.pop{font-size:28px}
body.kids.k5 .lbl{font-size:20px} body.kids.k5 .lbl.pop{font-size:26px}
body.kids.k6 .lbl{font-size:20px} body.kids.k6 .lbl.pop{font-size:26px}
body.kids.k4 .tick,body.kids.k5 .tick,body.kids.k6 .tick{font-size:15px}
body.kids.k4 .btn{font-size:17.5px} body.kids.k5 .btn,body.kids.k6 .btn{font-size:17px}
body.kids.k4 .card p{font-size:23px;line-height:1.7}
body.kids.k5 .card p,body.kids.k6 .card p{font-size:22px;line-height:1.7}
body.kids.k4 #brand h1,body.kids.k5 #brand h1,body.kids.k6 #brand h1{font-size:18px}
@media (max-width:640px){
  body.kids.k4 #phaseName,body.kids.k5 #phaseName,body.kids.k6 #phaseName{font-size:22px}
  body.kids.k4 #phaseDesc,body.kids.k6 #phaseDesc{font-size:14.5px}
  body.kids.k4 .lbl,body.kids.k5 .lbl,body.kids.k6 .lbl{font-size:17px}
  body.kids.k4 .lbl.pop,body.kids.k5 .lbl.pop,body.kids.k6 .lbl.pop{font-size:22px}
  body.kids.k4 .card p,body.kids.k5 .card p,body.kids.k6 .card p{font-size:19px}
}
@media (max-height:560px){
  body.kids.k4 #phaseName,body.kids.k5 #phaseName,body.kids.k6 #phaseName{font-size:20px}
  body.kids.k4 #phaseDesc,body.kids.k6 #phaseDesc{font-size:14px}
  body.kids.k4 .card p,body.kids.k5 .card p,body.kids.k6 .card p{font-size:17px}
  body.kids.k4 .lbl,body.kids.k5 .lbl,body.kids.k6 .lbl{font-size:15px}
  body.kids.k4 .lbl.pop,body.kids.k5 .lbl.pop,body.kids.k6 .lbl.pop{font-size:20px}
}