/* ==========================================================================
   THEME — Arabic RTL (Tajawal) — ملّون
   Adaptation of studio.css for Arabic books. Same rigid B5 canvas, same
   colour roles, flipped for right-to-left reading, with a warmer coloured
   palette: indigo glow, tinted cards, teal action box.
   ========================================================================== */

@import url('../fonts/fonts.css');          /* Inter — Latin + digits */
@import url('../fonts/fonts-arabic.css');   /* Tajawal — Arabic */

.deck{ counter-reset:bbpage; }

.sheet.bb{
  --surface:#F5F3FF; --card:#FFFFFF; --ink:#1E1B4B; --muted:#6B7280; --line:#E7E9EF;
  --accent:#6366F1; --accent-strong:#4338CA;
  --signal:#0D9488; --danger:#DC2626; --warn:#B45309;

  direction:rtl;
  background:
    radial-gradient(1100px 260px at 82% -4%, #E0E7FF 0%, rgba(224,231,255,0) 62%),
    linear-gradient(180deg, #F5F3FF 0%, #FBF9FF 45%, #FFFFFF 100%);
  color:var(--ink);
  font-family:"Tajawal","Inter",system-ui,sans-serif;
  line-height:1.7;
  display:flex;
  flex-direction:column;
  padding:9mm var(--page-pad);
  counter-increment:bbpage;
}

/* ---- header ---- */
.bb .tab{ width:56px; height:7px; flex:0 0 7px; border-radius:99px; background:linear-gradient(90deg,#6366F1,#8B5CF6); }
.bb .top{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px; }
.bb .eyebrow{ font-size:14px; color:var(--muted); }
.bb .eyebrow b{ color:var(--accent-strong); font-weight:700; }
.bb .pill{
  font-size:13px; font-weight:600; color:#4338CA; background:#EEF2FF;
  border:1px solid #C7D2FE; padding:6px 15px; border-radius:99px; white-space:nowrap;
}

/* ---- title block (Arabic, coloured) ---- */
.bb .title{
  font-family:"Tajawal",sans-serif; font-size:42px; font-weight:700;
  letter-spacing:0; color:var(--accent-strong); margin:14px 0 0; line-height:1.16;
}
.bb .sub{ font-size:18px; color:var(--muted); margin-top:4px; }
.bb .rule{ height:1px; flex:0 0 1px; background:linear-gradient(90deg,#C7D2FE,transparent); border:0; margin:16px 0; }
.bb .kicker{ font-size:14px; color:var(--muted); margin-bottom:10px; }

/* ---- diagram: tinted band ---- */
.bb .diagram{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  margin-top:4px; background:#F4F2FF; border:1px solid #E6E4FB; border-radius:16px;
  padding:10px 12px;
}
.bb .diagram svg{ width:100%; height:auto; max-height:190px; display:block; }
.bb .photo{ flex:0 0 auto; margin:4px 0 0; }
.bb .photo img{ display:block; width:100%; height:200px; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.bb .photo figcaption{ margin-top:7px; font-size:13.5px; color:var(--muted); text-align:center; }
.sheet.bb.snug .photo{ margin-top:2px; }

/* ---- explainer card (white, indigo accent bar) ---- */
.bb .explain{
  background:var(--card); border:1px solid var(--line); border-right:4px solid var(--accent);
  border-radius:14px; padding:20px 26px; font-size:16.5px; color:var(--ink);
  box-shadow:0 1px 3px rgba(79,70,229,.08);
}
.bb .explain p{ margin:0; color:var(--ink); }
.bb .explain p + p{ margin-top:.85em; }
.bb .explain strong{ font-weight:700; color:var(--ink); }
.bb .explain .hl{ font-weight:700; color:var(--accent-strong); }
.bb .explain .bad{ font-weight:700; color:var(--danger); }
.bb .explain .good{ font-weight:700; color:var(--signal); }
.bb .explain p.close{ margin-top:14px; font-weight:700; color:var(--accent-strong); }

.bb a{ color:inherit; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:2.5px; }
.bb a:hover{ color:var(--accent-strong); }
.bb .cue{ font-size:14.5px; color:var(--muted); margin-top:14px; }
.bb .cue b{ color:var(--ink); font-weight:700; }

/* "اطلب من الذكاء الاصطناعي" box — teal */
.bb .ask{ margin-top:12px; background:#ECFDF5; border:1px solid #A7F3D0; border-radius:12px; padding:11px 16px; }
.bb .ask .lbl{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.5px; color:#0F766E; margin-bottom:4px; }
.bb .ask p{ margin:0; font-size:15px; line-height:1.55; color:#134E4A; }

/* ---- footer (RTL: brand right, series left) ---- */
.sheet.bb.snug .rule{ margin:14px 0; }
.sheet.bb.snug .top{ margin-top:15px; }
.sheet.bb.snug .diagram{ margin-top:2px; }
.sheet.bb.snug .ask{ margin-top:10px; }

.bb .foot{
  display:flex; align-items:center; font-size:13px; color:var(--muted);
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
}
.bb .foot span{ color:var(--muted); }
.bb .foot .brand{ flex:1 1 0; text-align:right; color:var(--accent-strong); font-weight:600; }
.bb .foot .series{ flex:1 1 0; text-align:left; }
.bb .foot .pg{ flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:.3px; }
.bb .foot .pg::before{ content:counter(bbpage); }

.bb .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }