/* TwentyDZ · الكتاب المدرسي التفاعلي (2026-10-13, Claude). أمر سيدي: «تصميم الكتب المدرسية وإعادة بنائها من جديد
   مطابقة للكتاب المدرسي بالظبط… نضغط على أي سؤال أو مثال أو تمرين يظهر الحل مع الشرح»، و«لا قصّ ولا لصق: بناء حقيقي مطابق».
   Each printed page is rebuilt as a live page on a fixed canvas the size of the scan (1654 × 2340, 200 dpi A4), so every
   measurement taken on the scan is used as is; the canvas is then scaled to the screen. Text is real text, frames and
   badges are CSS, figures are SVG drawn for the page. Nothing is cut from the scan. A book's own colours live in
   <book>/kit.css. This file: the reader chrome (in the platform's look) and the page parts every book shares. */

/* ---------- reader chrome ---------- */
body{margin:0;min-height:100vh}
.kbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px clamp(12px,3vw,28px);
  background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--border-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-look="bold"] .kbar{border-bottom:3px solid #111;background:var(--bg)}
.kbar .brand{display:flex;align-items:center;gap:8px;text-decoration:none;direction:ltr;flex:none}
.kbar .mk{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-fill);color:var(--accent-ink);font-family:var(--head);font-weight:var(--head-w);font-size:16px}
.kbar .wd{font-family:var(--head);font-weight:var(--head-w);font-size:20px;color:var(--text)}
.ktitle{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ktitle b{font-weight:800;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ktitle small{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kctl{display:flex;align-items:center;gap:6px;margin-inline-start:auto;flex:none}
.kbtn{min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--border-2);background:var(--surface);color:var(--text);font-weight:800;font-size:14px}
.kbtn.icon{width:40px;padding:0;font-size:20px;line-height:1}
.kbtn:disabled{opacity:.4}
html[data-look="bold"] .kbtn{border:3px solid #111;box-shadow:3px 3px 0 #111}
#main{padding:14px clamp(8px,2vw,24px) 120px}
.khint{max-width:900px;margin:0 auto 10px;text-align:center;color:var(--muted);font-size:14px;font-weight:600}
.stage{overflow-x:auto;overflow-y:hidden;padding:6px 0 14px;-webkit-overflow-scrolling:touch}
.pgwrap{position:relative;margin:0 auto;box-shadow:0 2px 6px rgba(0,0,0,.06),0 24px 50px -28px rgba(80,60,10,.45);border-radius:6px;overflow:hidden;background:#fff}
.kpager{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.kpage{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px}
.kpage input{width:4.5em;min-height:40px;border-radius:12px;border:2px solid var(--border-2);background:var(--surface);color:var(--text);font:inherit;text-align:center}
.ksrc{max-width:900px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:12.5px}
@media (max-width:640px){.kbar .wd,.kbar #toc{display:none}.ktitle b{font-size:14px}}

/* the solution: a side panel on wide screens, a bottom sheet on phones */
.sol{position:fixed;z-index:40;top:64px;bottom:0;left:0;width:min(440px,100%);overflow:auto;background:var(--surface);border-right:2px solid var(--border-2);box-shadow:18px 0 40px -30px rgba(0,0,0,.35);padding:16px 18px 24px}
.sol-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.sol-h b{font-family:var(--head);font-weight:var(--head-w);font-size:20px}
.sol-q{font-family:'Noto Sans Arabic',var(--font);font-size:17px;line-height:1.9;padding:12px 14px;border-radius:16px;background:var(--surface-2);margin-bottom:14px}
.sol-q svg{max-width:100%;height:auto}
.sol-b{font-size:16.5px;line-height:1.95}
.sol-b h4{margin:14px 0 4px;font-family:var(--font);font-weight:800;font-size:15px;color:var(--accent-text)}
/* numbers and equations read left to right in the panel too (they sit outside .pg) */
.sol .n,.sol .ltr{display:inline-block;direction:ltr;unicode-bidi:isolate;font-family:'Noto Sans','Tajawal',sans-serif}
.sol-b .ans{font-weight:800;font-size:18px;padding:10px 14px;border-radius:14px;background:var(--ok-bg);color:var(--ok-ink);margin:0 0 8px}
.sol-b ol,.sol-b ul{padding-inline-start:22px;margin:4px 0}
.sol-b .why{padding:10px 14px;border-radius:14px;background:var(--accent-2);margin:10px 0 0}
.sol-b .rule{padding:10px 14px;border-radius:14px;border:2px dashed var(--border-2);margin:10px 0 0;font-size:15px}
.sol-b svg{display:block;max-width:min(100%,260px);height:auto;margin:10px auto}
/* the open solution pushes the page aside on wide screens, and the floating helpers step back */
@media (min-width:861px){body.solopen #main{margin-left:440px}}
body.solopen :is(.tdz-as-btn,.tdza-launcher){display:none!important}
.sol-q .nb{display:none}
/* the question copied into the panel: readable size, normal wrapping (the page measures and fits lines, the panel does not) */
.sol-q *{position:static!important;white-space:normal!important;font-size:inherit!important;width:auto!important;height:auto!important;line-height:inherit!important;transform:none!important}
.sol-q p{margin:0 0 4px}
.sol-q svg{display:none}
.sol-nav{display:flex;justify-content:space-between;gap:8px;margin-top:18px}
@media (max-width:860px){
  .sol{top:auto;inset:auto 0 0 0;width:100%;max-height:72vh;border:0;border-top:2px solid var(--border-2);border-radius:26px 26px 0 0;box-shadow:0 -20px 40px -24px rgba(0,0,0,.4)}
}
.tocp{position:fixed;z-index:41;top:64px;bottom:0;right:0;width:min(380px,100%);overflow:auto;background:var(--surface);border-left:2px solid var(--border-2);padding:14px 16px 30px;box-shadow:18px 0 40px -30px rgba(0,0,0,.35)}
.tocp h3{font-size:15px;margin:14px 0 6px;color:var(--accent-text);font-family:var(--font);font-weight:800}
.tocp a{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:12px;text-decoration:none;color:var(--text);font-weight:600;font-size:14.5px}
.tocp a:hover,.tocp a[aria-current="page"]{background:var(--accent-2)}
.tocp a.todo{color:var(--muted)}

/* ---------- the page canvas ---------- */
.pg{position:absolute;top:0;left:0;width:1654px;height:var(--ph,2340px);transform-origin:0 0;background:#fff;color:#1d1d1b;overflow:hidden;
  direction:rtl;font-family:'Noto Sans Arabic','Tajawal',sans-serif;font-size:40px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.pg *{box-sizing:border-box}
.pg>*{position:absolute}
.pg p{margin:0}
.pg svg{display:block;overflow:visible}
.pg img.cut{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none} /* a drawing cut from the scan by content/kitab/tools/crop.py (2x, cleaned); never in ma-3ap */
.pg .ltr,.pg .n{direction:ltr;unicode-bidi:isolate}
.pg .n{font-family:'Noto Sans','Arial',sans-serif}
.pg b,.pg strong{font-weight:700}
/* a page not built yet */
.pg.todo{display:grid;place-items:center;text-align:center;color:#8a8475;font-size:56px;background:repeating-linear-gradient(-45deg,#fffdf6 0 40px,#fff8e8 40px 80px)}
.pg.todo>*{position:static}

/* the tappable questions, examples and exercises */
.pg [data-q]{cursor:pointer;border-radius:22px;transition:box-shadow .18s,background-color .18s}
.pg [data-q]:hover,.pg [data-q]:focus-visible{box-shadow:0 0 0 10px rgba(253,196,72,.55);background-color:rgba(253,196,72,.10);outline:none}
.pg [data-q].on{box-shadow:0 0 0 12px rgba(119,186,153,.75);background-color:rgba(119,186,153,.10)}
.pg.cues [data-q]::after{content:"";position:absolute;inset-inline-start:-34px;top:6px;width:26px;height:26px;border-radius:50%;background:#77BA99;box-shadow:0 0 0 5px rgba(119,186,153,.25)}
.pg.cues [data-q]{position:absolute}
.pg [data-q].seen::after{background:#C9C2B0;box-shadow:none}

/* bare mode: the page alone at its true size, for the side-by-side check against the scan */
html.bare body{background:#fff}
html.bare .kbar,html.bare .khint,html.bare .kpager,html.bare .ksrc,html.bare .tdza-launcher,html.bare .tdz-as-btn{display:none!important}
html.bare #main{padding:0}
html.bare .stage{padding:0;overflow:visible}
html.bare .pgwrap{margin:0;box-shadow:none;border-radius:0}