/* TwentyDZ · كتابنا: صفحات «الكتاب الحيّ» المبنية من الصفر (عرض 1000 بكسل، يحرّكها engine.js) */
.kh-doc { position: relative; width: 1000px; }
.bk { --ink: #10233a; --teal: #0f766e; --amber: #f4b545; --rose: #e05a6a; --soft: #f3efe4; --line: rgba(16, 35, 58, .12);
  position: relative; width: 1000px; min-height: 1414px; box-sizing: border-box; padding: 0 0 56px; background: #fffdf8; color: var(--ink);
  font: 500 23px/1.75 Tajawal, sans-serif; direction: rtl; }
.bk * { box-sizing: border-box; }
.bk .m { font-family: 'Readex Pro', Tajawal, sans-serif; font-weight: 500; unicode-bidi: isolate; white-space: nowrap; direction: ltr; display: inline-block; }

/* the band at the top of every page */
.bk-band { display: flex; align-items: center; gap: 18px; padding: 26px 60px 18px; background: linear-gradient(90deg, #e9f5f3, #fdf4dd); border-bottom: 4px solid var(--ink); }
.bk-band .kind { font: 800 34px/1.1 'Baloo Bhaijaan 2', Tajawal, sans-serif; color: var(--teal); }
.bk-band .lesson { flex: 1; display: grid; line-height: 1.3; }
.bk-band .lesson small { font-size: 17px; color: #4b6075; }
.bk-band .lesson b { font: 800 26px/1.2 'Baloo Bhaijaan 2', Tajawal, sans-serif; }
.bk-band .ref { font-size: 16px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px 12px; white-space: nowrap; }
.bk-body { padding: 26px 60px 0; }

/* blocks */
.bk-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; font: 800 26px/1.3 'Baloo Bhaijaan 2', Tajawal, sans-serif; }
.bk-h .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--teal); color: #fff; font-size: 22px; }
.bk-h::after { content: ''; flex: 1; height: 3px; background: linear-gradient(90deg, transparent, var(--amber)); border-radius: 2px; margin-inline-start: 8px; }
.bk p { margin: 6px 0; }
.bk .q { margin: 6px 0; padding-inline-start: 6px; }
.bk .rule { margin: 10px 0 12px; padding: 12px 18px; background: #eaf6f3; border-inline-start: 8px solid var(--teal); border-radius: 12px; }
.bk .rule b.t { color: var(--teal); }
.bk .warn { margin: 14px 0; padding: 10px 18px; background: #fff3f3; border-inline-start: 8px solid var(--rose); border-radius: 12px; }
.bk .warn b.t { color: var(--rose); }
.bk .ex { display: flex; flex-wrap: wrap; gap: 8px 44px; margin: 8px 0 4px; padding-inline-start: 18px; }
.bk .ex .it { display: inline-flex; align-items: baseline; gap: 10px; }
.bk .ex .lbl { color: #4b6075; font-weight: 700; }
.bk .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; padding-inline-start: 18px; }
.bk .slot { display: inline-block; min-width: 92px; height: 34px; vertical-align: -6px; border-bottom: 3px dotted #9aa8b6; margin: 0 4px; }
.bk .slot.wide { min-width: 300px; }
.bk .keys { display: inline-flex; gap: 8px; direction: ltr; vertical-align: middle; }
.bk .keys i { font-style: normal; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 10px;
  font: 700 22px 'Readex Pro', sans-serif; background: #fbe3d3; border: 2px solid #e0a183; box-shadow: 0 3px 0 #e0a183; }
.bk .keys i.op { background: #def2e8; border-color: #8cc5a9; box-shadow: 0 3px 0 #8cc5a9; }
.bk figure { margin: 6px 0; text-align: center; }
.bk figure img { max-width: 100%; border-radius: 14px; }
.bk figure figcaption { font-size: 18px; color: #4b6075; }
.bk .side { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: center; }
.bk .who { color: var(--teal); font-weight: 800; }
.bk .foot { position: absolute; left: 60px; right: 60px; bottom: 18px; display: flex; justify-content: space-between; font-size: 15px; color: #8b97a3; border-top: 1px solid var(--line); padding-top: 6px; }

/* a fraction written with a bar (lesson 2: the bar is a pair of hidden brackets) */
.bk .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; line-height: 1.25; }
.bk .frac > span:first-child { border-bottom: 2.5px solid var(--ink); padding: 0 6px 2px; }
.bk .frac > span:last-child { padding: 2px 6px 0; }
.bk .tall { line-height: 2.6; }
/* our geometry, drawn to scale in SVG */
.bk svg.geo { display: block; margin: 0 auto; }
.bk svg.geo text { font: 600 20px 'Readex Pro', sans-serif; fill: var(--ink); }
.bk .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.bk .slot.mid { min-width: 170px; }
/* lesson 4: the approximate-values table on the page */
.bk table.tq { border-collapse: collapse; margin: 8px auto 4px; font-size: 21px; }
.bk table.tq th, .bk table.tq td { border: 2px solid var(--ink); padding: 4px 14px; text-align: center; min-width: 120px; height: 46px; }
.bk table.tq thead th { background: #eaf6f3; color: var(--teal); }
.bk table.tq td .slot { min-width: 80px; border: 0; }
/* lesson 5: fractions on the page, and taller blanks for a fraction answer */
.bk .fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; line-height: 1.2; font-size: .92em; }
.bk .fr > span:first-child { border-bottom: 2.5px solid var(--ink); padding: 0 5px 1px; }
.bk .fr > span:last-child { padding: 1px 5px 0; }
.bk .slot.fq { min-width: 70px; height: 62px; vertical-align: middle; }
.bk .fl { line-height: 2.7; }
/* lesson 6: figures drawn from the construction scenes */
.bk .geo-fig { display: flex; justify-content: center; margin: 4px 0; }
.bk .geo-fig .geo-svg .pn { font: 700 20px 'Readex Pro', sans-serif; fill: #10233a; }
.bk .geo-fig .geo-svg .nm { font: 700 18px 'Readex Pro', sans-serif; }
.bk .geo-fig .geo-svg .ln { font: 600 16px 'Readex Pro', sans-serif; fill: #475569; }
.bk ol.qs { margin: 4px 0; padding-inline-start: 28px; }
.bk ol.qs li { margin: 2px 0; }
/* an English book: the same page, read left to right */
.kh-doc[dir=ltr] .bk, .bk.ltr { direction: ltr; font-family: 'Readex Pro', Tajawal, sans-serif; font-size: 22px; }
/* a figure we draw ourselves (svg) or an illustration, with its caption */
.bk .fig { margin: 8px 0; text-align: center; }
.bk .fig svg, .bk .fig img { max-width: 100%; height: auto; }
.bk .fig figcaption { font-size: 17px; color: #4b6075; }
.bk table.grid { border-collapse: collapse; margin: 8px 0; width: 100%; }
.bk table.grid th, .bk table.grid td { border: 2px solid var(--line); padding: 6px 10px; text-align: center; }
.bk table.grid thead th { background: #eaf6f3; color: var(--teal); }