/* =====================================================================
   كتاب القراءة — nawatij-book-reader
   قارئ فقط: لا حقول، لا تحرير، لا تخزين. فواصل يسار الورق، تقليب حقيقي.
   ===================================================================== */
:root{
  --rd-top:56px; --rd-foot:56px; --rd-tabs:168px; --rd-tabs-m:54px; --rd-overlap:14px;
  --rd-paper:#FFFDF8; --rd-paper-edge:#EFE8D8;
}
html,body{height:100%}
body.reader{overflow:hidden;background:linear-gradient(180deg,#EDE6D6,#E6DCC8)}
.rd-noscript{padding:20px;text-align:center;font-family:"Cairo"}
.rd-fail{position:fixed;inset:auto 12px 70px 12px;z-index:60;background:#fff4f0;border:1px solid #d9a08f;color:#7a2e1a;border-radius:12px;padding:10px 14px;font-size:14px}

/* ---------- الرأس ---------- */
.rd-top{position:fixed;top:0;right:0;left:0;height:var(--rd-top);z-index:40;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:rgba(252,248,245,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--sand)}
.rd-top .brand{margin-inline-end:0}
.rd-label{flex:1;text-align:center;font-family:"Cairo";font-size:12.5px;font-weight:700;color:var(--sage);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rd-tools{display:flex;gap:8px;align-items:center}
.rd-tools .btn{min-height:40px}
.rd-tools .btn[aria-pressed="true"]{background:var(--sage-tint);border-color:var(--sage);color:var(--forest)}

/* ---------- الفواصل (يسار الورق) ---------- */
.rd-tabs{position:fixed;top:calc(var(--rd-top) + 14px);bottom:calc(var(--rd-foot) + 14px);left:0;width:var(--rd-tabs);z-index:35;
  display:flex;flex-direction:column;gap:5px;padding:4px 0 4px 8px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none}
.rd-tabs::-webkit-scrollbar{display:none}
.rd-tab{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px 4px 10px;border:1px solid rgba(21,80,59,.14);border-inline-end:0;
  border-radius:14px 0 0 14px;background:var(--beige);color:var(--forest);font-family:inherit;font-size:12.5px;line-height:1.3;text-align:right;
  cursor:pointer;box-shadow:-3px 3px 10px rgba(21,80,59,.10);transform:translateX(0);transition:transform .15s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;flex:none;width:100%}
.rd-tab:nth-child(3n+1){background:#F2EADA}
.rd-tab:nth-child(3n+2){background:#E8F0EA}
.rd-tab:nth-child(3n+3){background:#F7EBE7}
.rd-tab:hover{transform:translateX(-3px)}
.rd-tab .ico{flex:none;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.7);display:grid;place-items:center;color:var(--forest)}
.rd-tab .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rd-tab .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.rd-tab .n{font-family:"Cairo";font-size:10px;color:var(--muted);line-height:1.2}
.rd-tab .t{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rd-tab.active{background:var(--forest)!important;color:#fff;border-color:var(--forest);transform:translateX(-6px);box-shadow:-6px 6px 16px rgba(21,80,59,.25)}
.rd-tab.active .ico{background:rgba(255,255,255,.18);color:#fff}
.rd-tab.active .n{color:rgba(255,255,255,.8)}

/* ---------- مسرح الكتاب ---------- */
.rd-stage{position:fixed;top:var(--rd-top);bottom:var(--rd-foot);right:0;left:calc(var(--rd-tabs) - var(--rd-overlap));
  perspective:2400px;perspective-origin:100% 50%;overflow:hidden}
.rd-book{position:absolute;inset:14px 16px 14px 6px;transform-style:preserve-3d}
.rd-measure{position:absolute;inset:14px 16px 14px 6px;visibility:hidden;pointer-events:none;overflow:hidden}
.rd-measure .page{position:absolute;inset:0}

/* ---------- الصفحة ---------- */
.page{position:absolute;inset:0;background:var(--rd-paper);border:1px solid var(--rd-paper-edge);border-radius:6px 14px 14px 6px;
  box-shadow:0 10px 30px rgba(21,80,59,.12),inset 0 0 0 1px rgba(255,255,255,.6);
  display:none;flex-direction:column;transform-origin:100% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.page.on{display:flex}
.page .pg-body{flex:1;min-height:0;padding:22px 26px 14px 34px;overflow:hidden}
.page.flow .pg-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.page .pg-foot{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 26px 8px 34px;font-family:"Cairo";font-size:11px;color:var(--muted);border-top:1px dashed var(--sand)}
.page .eyebrow{margin-bottom:2px}
.page h2{margin:0 0 6px;font-size:22px;color:var(--forest)}
.page .cont{font-family:"Cairo";font-size:12px;color:var(--sage);margin:0 0 8px}
.page p.intro{margin:0 0 10px;font-size:14px}
/* حافة الكعب (يمين) */
.page::before{content:"";position:absolute;top:0;bottom:0;right:0;width:18px;pointer-events:none;
  background:linear-gradient(270deg,rgba(21,80,59,.10),rgba(21,80,59,0));border-radius:0 14px 14px 0}
/* ظل متحرك أثناء الانثناء */
.page::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,.05) 35%,rgba(255,255,255,.18) 60%,rgba(0,0,0,.12))}
.page.out{display:flex;animation:rdOut .5s cubic-bezier(.55,.05,.7,.4) forwards;pointer-events:none;z-index:3}
.page.out::after{animation:rdShade .5s ease forwards}
.page.in{display:flex;animation:rdIn .5s cubic-bezier(.2,.6,.3,1);z-index:2}
.page.in::after{animation:rdShadeIn .5s ease}
.page.out.back{animation-name:rdOutBack}
.page.in.back{animation-name:rdInBack}
/* الكتاب العربي: كعبه يمين؛ الصفحة التالية تُرفع من اليسار وتنثني على الكعب */
@keyframes rdOut{0%{transform:rotateY(0) skewY(0)}60%{transform:rotateY(-70deg) skewY(1.2deg)}100%{transform:rotateY(-100deg) skewY(0);opacity:.6}}
@keyframes rdIn{0%{transform:rotateY(85deg) skewY(-1deg);opacity:.5}100%{transform:rotateY(0) skewY(0);opacity:1}}
@keyframes rdOutBack{0%{transform:rotateY(0)}60%{transform:rotateY(70deg) skewY(-1.2deg)}100%{transform:rotateY(100deg);opacity:.6}}
@keyframes rdInBack{0%{transform:rotateY(-85deg) skewY(1deg);opacity:.5}100%{transform:rotateY(0);opacity:1}}
@keyframes rdShade{0%{opacity:0}50%{opacity:.9}100%{opacity:1}}
@keyframes rdShadeIn{0%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .page.out,.page.in,.page.out::after,.page.in::after{animation:none!important}
  .page.out{display:none}
}

/* ---------- محتوى القراءة ---------- */
.rd-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:6px 0 12px}
.rd-kv .k{font-family:"Cairo";font-size:12px;color:var(--muted)}
.rd-kv .v{font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--sand);padding:2px 0 5px;min-height:22px;overflow-wrap:anywhere}
.rd-kv .v.empty,.rd-empty{color:var(--muted);font-style:normal;font-size:13px}
.rd-group h3{font-family:"Cairo";font-size:14px;color:var(--forest);margin:12px 0 6px}
.rd-text{white-space:pre-wrap;font-size:14.5px;line-height:1.75;margin:0 0 10px}
.rd-field{margin:10px 0}
.rd-field .k{font-family:"Cairo";font-size:12.5px;color:var(--sage);margin-bottom:3px;font-weight:700}
.rd-table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:0;font-size:13.5px;margin:6px 0 10px}
.rd-table th{background:var(--sage-tint);color:var(--forest);font-family:"Cairo";font-size:12px;font-weight:700;padding:7px 6px;text-align:right;
  border-bottom:1px solid var(--sand);white-space:normal;line-height:1.35;vertical-align:bottom}
.rd-table td{padding:7px 6px;border-bottom:1px solid #EFE9DC;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
.rd-table td.num,.rd-table th.num{text-align:center;font-variant-numeric:tabular-nums}
.rd-table td.calc{font-weight:700;color:var(--forest);text-align:center}
.rd-table td.calc.warn{color:#9C3B1E}
.rd-check{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px solid #EFE9DC;font-size:14px}
.rd-check .box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--sage);display:grid;place-items:center;font-size:13px;color:#fff}
.rd-check .box.on{background:var(--forest);border-color:var(--forest)}
.rd-check .extra{color:var(--muted);font-size:13px}
.rd-list{margin:4px 0 10px;padding-inline-start:20px;font-size:14px;line-height:1.7}
.rd-list li.on::marker{color:var(--forest)}
.rd-sig{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 14px;margin-top:8px}
.rd-cover{background:linear-gradient(152deg,#E7F0E9 0%,#F7F2E6 54%,#F5E8E1 100%);border:1px solid #DED5C3;border-radius:18px;padding:30px 28px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.rd-cover .kicker{font-family:"Cairo";font-size:13px;color:var(--sage);font-weight:700}
.rd-cover h1{font-size:30px;margin:8px 0 6px;line-height:1.35;color:var(--forest)}
.rd-cover .sub{color:var(--muted);font-size:14px;margin-bottom:18px}
.rd-cover .edition{display:inline-block;margin-top:14px;font-family:"Cairo";font-size:12px;color:var(--forest);border:1px solid var(--sage);border-radius:999px;padding:3px 12px;align-self:flex-start}
.rd-demo{display:inline-block;margin-top:10px;font-family:"Cairo";font-size:12px;color:#7a5a12;background:#FBF1D6;border:1px solid var(--gold);border-radius:999px;padding:3px 12px;align-self:flex-start}
.rd-toc{list-style:none;margin:6px 0;padding:0;columns:2;column-gap:28px}
.rd-toc li{break-inside:avoid;display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px dotted var(--sand);font-size:14px}
.rd-toc li a{color:var(--ink);text-decoration:none;flex:1;min-width:0}
.rd-toc li a:hover{color:var(--forest)}
.rd-toc li .pg{font-family:"Cairo";font-size:12px;color:var(--sage)}
/* بطاقات الصفوف على الجوال */
.rd-rowcard{border:1px solid var(--sand);border-radius:12px;padding:8px 10px 6px;margin:0 0 8px;background:#fff}
.rd-rowcard .rc-head{font-family:"Cairo";font-size:12px;font-weight:700;color:var(--forest);margin-bottom:4px}
.rd-rowcard .rc-f{padding:4px 0;border-top:1px dotted var(--sand)}
.rd-rowcard .rc-k{font-family:"Cairo";font-size:11px;color:var(--sage);font-weight:700}
.rd-rowcard .rc-v{font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.rd-rowcard .rc-v.warn{color:#9C3B1E}
/* الشواهد */
.rd-ev{margin-top:12px;border-top:1px dashed var(--sand);padding-top:8px}
.rd-ev h4{margin:0 0 6px;font-family:"Cairo";font-size:13px;color:var(--forest)}
.rd-evcard{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--sand);border-radius:12px;padding:10px;margin-bottom:8px;background:var(--ivory)}
.rd-evcard .body{flex:1;min-width:0}
.rd-evcard b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}
.rd-evcard a{color:var(--sage);font-size:13px;overflow-wrap:anywhere;text-decoration:underline;display:inline-block;padding:6px 0;min-height:30px}
.rd-evcard svg{width:84px;height:84px;flex:none}
.rd-evcard img{max-width:140px;max-height:110px;border-radius:8px;border:1px solid var(--sand);flex:none}

/* ---------- شريط التقليب ---------- */
.rd-foot{position:fixed;right:0;left:0;bottom:0;height:var(--rd-foot);z-index:40;background:rgba(252,248,245,.94);border-top:1px solid var(--sand);
  display:flex;align-items:center;gap:10px;padding:0 14px 0 14px}
.rd-foot .bk-btn{min-width:96px;min-height:44px;border-radius:12px;border:1px solid var(--sand);background:var(--ivory);color:var(--forest);font-family:"Cairo";font-weight:700;font-size:14px;cursor:pointer;padding:0 14px}
.rd-foot .bk-btn.primary{background:var(--forest);color:#fff;border-color:var(--forest)}
.rd-foot .bk-btn:disabled{opacity:.4;cursor:default}
.rd-foot .bk-pos{flex:1;text-align:center;font-family:"Cairo";font-size:13px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rd-foot .bk-pos b{color:var(--forest)}

/* ---------- iPad ---------- */
@media (max-width:1100px){ :root{ --rd-tabs:150px } .rd-tab{font-size:12px} }
@media (max-width:900px){
  .rd-top{padding:0 10px;gap:8px}
  .rd-top .brand span{display:none}
  .rd-tools .btn{padding:6px 10px;font-size:12.5px}
  .page .pg-body{padding:16px 18px 10px 30px}
  .rd-kv{grid-template-columns:1fr 1fr}
}
/* ---------- الجوال: فواصل أيقونية ضيقة، الفاصل المفتوح يعرض اسمه ---------- */
@media (max-width:600px){
  :root{ --rd-tabs:var(--rd-tabs-m); --rd-overlap:10px; --rd-top:50px; --rd-foot:52px }
  .rd-top .brand b{font-size:14px}
  .rd-top .mark{width:28px;height:28px;font-size:15px;border-radius:9px}
  .rd-label{display:none}
  .rd-tools .btn{padding:6px 8px;font-size:12px;min-height:36px}
  .rd-tabs{padding-left:4px;gap:4px}
  .rd-tab{min-height:42px;padding:4px 6px;gap:6px;justify-content:center}
  .rd-tab .txt{display:none}
  .rd-tab.active{transform:translateX(-3px)}
  .rd-book{inset:8px 8px 8px 2px}
  .rd-measure{inset:8px 8px 8px 2px}
  .page .pg-body{padding:12px 12px 8px 20px}
  .page .pg-foot{padding:4px 12px 6px 20px}
  .page h2{font-size:18px}
  .rd-kv{grid-template-columns:1fr}
  .rd-toc{columns:1}
  .rd-sig{grid-template-columns:1fr 1fr}
  .rd-cover h1{font-size:22px}
  .rd-cover{padding:18px 16px}
  .rd-cover .sub{margin-bottom:10px}
  .rd-foot .bk-btn{min-width:76px;padding:0 10px;font-size:13px}
  .rd-table{font-size:12.5px}
  .rd-table th{font-size:11px;padding:5px 4px}
  .rd-table td{padding:5px 4px}
}

/* ---------- الطباعة ---------- */
@media print{
  @page{size:A4 portrait;margin:12mm 10mm}
  body.reader{overflow:visible;background:#fff}
  .rd-top,.rd-tabs,.rd-foot,.rd-fail,.rd-measure{display:none!important}
  .rd-stage{position:static;perspective:none;overflow:visible}
  .rd-book{position:static;inset:auto;transform:none}
  .page{position:static;display:block!important;animation:none!important;transform:none!important;box-shadow:none;border:0;border-radius:0;
    page-break-after:always;overflow:visible;height:auto}
  .page::before,.page::after{display:none}
  .page .pg-body{overflow:visible;padding:0;height:auto}
  .page.flow .pg-body{overflow:visible}
  .page:last-child{page-break-after:auto}
}

/* 0.6.1 — visible right-hand binding, independent of the moving leaf. */
.rd-book,.rd-measure { right:32px; }
.page { border-radius:9px 5px 5px 9px; }
.page .pg-body { padding-right:58px; }
.page .pg-foot { padding-right:58px; }
.page::before { width:36px; border-radius:0 5px 5px 0;
 background:linear-gradient(270deg,rgba(74,58,36,.15),rgba(74,58,36,.035) 48%,transparent); }
.rd-binding { position:absolute;right:0;top:27px;bottom:27px;width:62px;z-index:12;
 display:flex;flex-direction:column;justify-content:space-around;align-items:center;
 pointer-events:none;user-select:none;-webkit-user-select:none; }
.rd-ring { display:block;width:62px;height:28px;flex:0 0 28px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2262%22%20height%3D%2228%22%20viewBox%3D%220%200%2062%2028%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22metal%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2379564a%22%2F%3E%3Cstop%20offset%3D%22.25%22%20stop-color%3D%22%23edc7b3%22%2F%3E%3Cstop%20offset%3D%22.47%22%20stop-color%3D%22%23fff0d9%22%2F%3E%3Cstop%20offset%3D%22.67%22%20stop-color%3D%22%23c19079%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23735147%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2216%22%20rx%3D%228%22%20ry%3D%2210%22%20fill%3D%22%23806c59%22%20opacity%3D%22.2%22%2F%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2214%22%20rx%3D%226.8%22%20ry%3D%228.5%22%20fill%3D%22%23332c28%22%2F%3E%3Cellipse%20cx%3D%2214%22%20cy%3D%2214%22%20rx%3D%224.8%22%20ry%3D%226.5%22%20fill%3D%22%23151b16%22%2F%3E%3Cpath%20d%3D%22M14%2017C30%2020%2055%2020%2056%2011C57%203%2035%204%2017%207%22%20fill%3D%22none%22%20stroke%3D%22%23382e28%22%20stroke-width%3D%226.8%22%20opacity%3D%22.28%22%20transform%3D%22translate%280%202%29%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M14%2016C29%2018%2055%2019%2056%2010C57%203%2035%204%2017%207%22%20fill%3D%22none%22%20stroke%3D%22url%28%23metal%29%22%20stroke-width%3D%225.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M17%206C34%203%2052%204%2054%208%22%20fill%3D%22none%22%20stroke%3D%22%23fff4e3%22%20stroke-width%3D%221.05%22%20opacity%3D%22.86%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat; }
/* Forward: lift the free LEFT edge toward the RIGHT-hand binding.
   The destination sheet stays flat underneath the moving sheet. */
.page.out { animation:rdBoundNext .58s cubic-bezier(.35,.05,.45,1) forwards;z-index:3; }
.page.in { animation:none;z-index:1; }
.page.in::after { animation:none;opacity:0; }
.page.out::after { animation:rdShade .58s ease forwards; }
.page.out.back { animation:none;z-index:1;opacity:1; }
.page.out.back::after { animation:none;opacity:0; }
.page.in.back { animation:rdBoundReturn .58s cubic-bezier(.22,.6,.3,1) both;z-index:3; }
.page.in.back::after { animation:rdShadeIn .58s ease; }
@keyframes rdBoundNext {
 0%{transform:rotateY(0deg) skewY(0deg);opacity:1}
 54%{transform:rotateY(57deg) skewY(-.85deg);opacity:1}
 100%{transform:rotateY(104deg) skewY(0deg);opacity:1}
}
@keyframes rdBoundReturn {
 0%{transform:rotateY(104deg) skewY(0deg);opacity:1}
 46%{transform:rotateY(57deg) skewY(-.85deg);opacity:1}
 100%{transform:rotateY(0deg) skewY(0deg);opacity:1}
}
@media (max-width:900px){
 .page .pg-body{padding-right:48px}
 .page .pg-foot{padding-right:48px}
}
@media (max-width:600px){
 .rd-book,.rd-measure{right:23px}
 .rd-binding{width:42px;top:18px;bottom:18px}
 .rd-ring{width:42px;height:24px;flex-basis:24px;background-size:42px 21px}
 .page .pg-body{padding-right:29px}
 .page .pg-foot{padding-right:29px}
 .page::before{width:23px}
}
@media (prefers-reduced-motion:reduce){
 .page.out,.page.in,.page.in.back,.page.out::after,.page.in::after{animation:none!important}
 .page.out{display:none}
}
@media print{
 .rd-binding{display:none!important}
 .page .pg-body{padding:0}
 .page .pg-foot{padding-right:0}
}