/* ═══════════════════════════════════════════════════════════════════
   طبقة الحكاية — فوق theme.css

   theme.css فيه البنية والتوكنز. الملف ده بيحطّ فوقها الطابع
   المصنوع باليد: ورق محبّب، ضربات فرشاة ورا الكلمات المهمة،
   قصاصات لاصقة، ودوودلز مرسومة.

   ليه ملف منفصل؟ عشان الرجوع يبقى بسطر واحد لو الشكل مش عاجب،
   ومن غير ما نلمس ٤٦٠ سطر شغّالين.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════ الورق ══════════════════
   حبيبات خفيفة جدًا على الخلفية كلها — هي اللي بتخلي الكريمي
   يبان ورق مش لون مسطّح. SVG مضمّن، فمافيش طلب شبكة زيادة. */
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
body > *{position:relative; z-index:1}

/* ══════════════════ العناوين ══════════════════
   العربي بيحتاج وزن أتقل من اللاتيني عشان يدّي نفس الحضور. */
h1,h2,h3,h4,.hero-title,.sec-title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.2px;
  color:var(--heading);
}
h1,.hero-title{font-weight:800; line-height:1.22}

::selection{background:var(--note-500); color:var(--ink-900)}

/* ══════════════════ ضربة الفرشاة ══════════════════
   الكلمة المهمة عليها ضربة ورا النص. الحواف غير منتظمة عن قصد —
   المستطيل المضبوط بيبان مربّع برنامج، مش يد. */
.brush{
  position:relative;
  display:inline-block;
  padding:0 .18em;
  color:var(--ink-900);
  white-space:nowrap;
}
.brush::before{
  content:'';
  position:absolute;
  inset:.12em -.12em .05em;
  background:var(--gold-500);
  opacity:.9;
  z-index:-1;
  border-radius:56% 44% 62% 38% / 60% 40% 60% 40%;
  transform:rotate(-.7deg);
}
.brush.teal::before{background:var(--wood-500)}
.brush.note::before{background:var(--note-500)}
/* على خلفية غامقة النص بيبقى أبيض */
.brush.on-dark{color:var(--paper-100)}

/* توكيد أخفّ — خط عريض تحت الكلمة بس */
.under{
  background-image:linear-gradient(var(--note-500),var(--note-500));
  background-repeat:no-repeat;
  background-size:100% .34em;
  background-position:0 88%;
  padding:0 .06em;
}

/* ══════════════════ القصاصات اللاصقة ══════════════════ */
.sticky{
  background:var(--note-100);
  border:2px solid var(--ink-900);
  border-radius:4px;
  padding:1.1rem 1.2rem;
  box-shadow:var(--sh-hard);
  transform:rotate(-1.2deg);
  position:relative;
}
.sticky:nth-child(even){transform:rotate(1deg)}
/* شريط لاصق فوق */
.sticky::before{
  content:'';
  position:absolute; top:-11px; left:50%;
  width:64px; height:21px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(244,189,85,.8);
  border:1px solid rgba(16,16,16,.14);
}
.sticky.teal{background:var(--teal-tint)}
.sticky.coral{background:var(--accent-tint)}

/* ══════════════════ الكشكول ══════════════════
   حافة مثقوبة على الجنب — بتدّي إحساس صفحة مقطوعة من دفتر. */
.notebook{
  background:var(--surface);
  border:2px solid var(--ink-900);
  border-radius:var(--radius-lg);
  padding:1.3rem 1.4rem 1.3rem 2.6rem;
  box-shadow:var(--sh-hard);
  position:relative;
  overflow:hidden;
}
.notebook::before{
  content:'';
  position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:34px;
  background:var(--cream-3);
  border-inline-end:2px dashed var(--line-strong);
}
.notebook::after{
  content:'';
  position:absolute; inset-inline-start:11px; top:22px; bottom:22px;
  width:12px;
  background-image:radial-gradient(circle,var(--ink-900) 0 3px,transparent 3.5px);
  background-size:12px 34px;
  background-repeat:repeat-y;
  opacity:.42;
}

/* ══════════════════ الأزرار ══════════════════
   الظل الصلب بدل الناعم — بيدّي إحساس ورق مقصوص ملزوق. */
.btn-primary,.btn.primary,.cta{
  background:var(--accent);
  color:#0a0730; /* مرجاني الموقع هادي، فالأبيض عليه ضعيف — الكحلي بيدّي 7:1 */
  border:2px solid var(--sbs-coral-dark);
  border-radius:100px;
  font-family:var(--display);
  font-weight:800;
  box-shadow:var(--sh-hard);
  transition:transform .16s var(--pop), box-shadow .16s var(--ease);
}
.btn-primary:hover,.btn.primary:hover,.cta:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-lg);
}
.btn-primary:active,.btn.primary:active,.cta:active{
  transform:translate(2px,2px);
  box-shadow:1px 2px 0 rgba(16,16,16,.18);
}

/* ══════════════════ الدوودلز ══════════════════
   نجمة وخطوط سرعة مرسومة — بتتحطّ حوالين العناصر المهمة. */
.doodle{position:relative}
.doodle::after{
  content:'';
  position:absolute;
  width:26px; height:26px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f04b3d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v5M12 16v5M3 12h5M16 12h5'/%3E%3C/svg%3E");
  top:-16px; inset-inline-end:-14px;
  pointer-events:none;
}
.doodle.star::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23079aaa' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E");
}

/* خط متموّج فاصل بين الأقسام — بديل الخط المستقيم */
.wavy{
  height:14px; border:0; margin:2.2rem 0;
  background:repeat-x center/26px 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14' fill='none' stroke='%23e3d6c3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M0 7c3.5-6 9.5-6 13 0s9.5 6 13 0'/%3E%3C/svg%3E");
}

/* ══════════════════ الحقول ══════════════════ */
input[type=text],input[type=email],input[type=url],input[type=tel],
input[type=number],input[type=date],input[type=search],textarea,select{
  font-family:var(--body);
  background:var(--surface);
  border:2px solid var(--line-strong);
  border-radius:12px;
  color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--wood-500);
  box-shadow:0 0 0 4px var(--teal-tint);
}

/* ══════════════════ الحركة ══════════════════ */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .5s var(--ease) both}
.rise-1{animation-delay:.06s}.rise-2{animation-delay:.12s}
.rise-3{animation-delay:.18s}.rise-4{animation-delay:.24s}
.rise-5{animation-delay:.3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════════
   لمسات على المكتبة نفسها
   ═══════════════════════════════════════════════════════════════════ */

/* لافتة الهيرو: ضربة فرشاة ورا الاسم — نفس فكرة «سيزون» في الملصق.
   العنوان نفسه بيتملى بـtextContent من i18n، فمينفعش نغلّف كلمة
   جوّاه — واللافتة الصغيرة هي المكان الصح للضربة أصلًا. */
.hall .aisle-sign span{
  position:relative;
  display:inline-block;
  padding:.2em .75em;
  color:var(--paper-100);
  font-weight:800;
}
.hall .aisle-sign span::before{
  content:'';
  position:absolute; inset:0;
  background:var(--gold-500);
  z-index:-1;
  border-radius:58% 42% 60% 40% / 62% 38% 62% 38%;
  transform:rotate(-1.2deg);
}
/* الخطوط اللي على جنب اللافتة بقت أوضح على الكريمي */
.hall .aisle-sign::before,.hall .aisle-sign::after{
  background:linear-gradient(90deg,transparent,var(--ink-900),transparent);
  opacity:.28; height:2px;
}

/* الجملة تحت العنوان: خط أصفر عريض تحتها بدل لون سادة */
.hall .tagline{
  color:var(--wood-800);
  background-image:linear-gradient(var(--note-500),var(--note-500));
  background-repeat:no-repeat;
  background-size:100% .3em;
  background-position:0 86%;
  display:inline;
  padding:0 .12em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* صندوق الأرقام: قصاصة ملزوقة بدل كارت عادي.
   القاعدة في library.html نفس النوعية، فمحتاجين انتقاء أقوى منها. */
.hall .hall-stats{
  background:var(--note-100);
  border:1px solid var(--line-strong);
  border-radius:5px;
  box-shadow:var(--sh-hard);
  transform:rotate(-.8deg);
  position:relative;
}
.hall .hall-stats::before{
  content:'';
  position:absolute; top:-12px; left:50%;
  width:70px; height:20px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(7,154,170,.28);
  border:1px solid rgba(16,16,16,.14);
}
.hstat b{font-family:var(--display); font-weight:800; color:var(--gold-600)}

/* عناوين الأقسام: رقم/أيقونة في مربّع محبَّر */
.shelf-head .ico,.sec-head .ico{
  border:2px solid var(--ink-900);
  border-radius:10px;
  box-shadow:2px 3px 0 rgba(16,16,16,.15);
  background:var(--note-100);
}

/* كروت الفرص: حدود محبَّرة وظل صلب — إحساس ورق مقصوص */
.book,.opp-card{
  border:1px solid var(--line-strong) !important;
  box-shadow:var(--sh-book) !important;
  transition:transform .18s var(--pop), box-shadow .18s var(--ease);
}
.book:hover,.opp-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-lg) !important;
}

/* ══════════════════ الوضع الليلي ══════════════════ */
:root[data-theme="dark"] body::before{ mix-blend-mode:screen; opacity:.14 }
/* الهيدر: كحلي الموقع الليلي بدل الأبيض — وإلا روابطه الفاتحة بتختفي */
:root[data-theme="dark"] .site-header{
  background:rgba(20,24,48,.94); border-bottom-color:var(--line-strong); box-shadow:0 2px 14px rgba(0,0,0,.35) }
/* التاجلاين: القلم الأصفر شريط رفيع تحت النص، فالنص نفسه لازم يفتح في الليلي */
:root[data-theme="dark"] .hall .tagline{ color:var(--heading) }
/* ضربة الفرشاة: حبر كحلي فوق المرجاني/التركوازي الهادي في الوضعين */
:root[data-theme="dark"] .brush{ color:#0a0730 }
:root[data-theme="dark"] .brush.note{ color:#101010 }
/* الورق الأصفر بيفضل أصفر — فحبره لازم يفضل غامق في الوضعين */
.sticky, .hall .hall-stats, .hall .hall-stats span{ color:#0a0730 }
:root[data-theme="dark"] .sticky, :root[data-theme="dark"] .hall .hall-stats{
  background:#ffd9a0; border-color:#5a4a2a; box-shadow:4px 5px 0 rgba(0,0,0,.55) }
:root[data-theme="dark"] .hall .hall-stats b{ color:#b8342a }
/* الشارة فوق العنوان: حبر كحلي على المرجاني في الوضعين */
.hall .aisle-sign span{ color:#0a0730 }
/* الحدود المحبّرة: فاتحة على الغامق بس أخفّ عشان ماتزعقش */
:root[data-theme="dark"] .book, :root[data-theme="dark"] .opp-card{
  border-color:var(--line-strong) !important; box-shadow:4px 5px 0 rgba(0,0,0,.5) !important }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .cta{
  color:#0a0730; border-color:#101010 }
:root[data-theme="dark"] .notebook::before{ background:var(--cream-3) }

/* ══════════════════ زرار الوضع ══════════════════ */
.theme-btn{ min-width:2.4rem; padding-inline:.6rem; font-size:1rem; line-height:1 }

/* ══════════════════ فقرات التفاصيل ══════════════════
   الفقرة الإنجليزية جوّه صفحة RTL كانت بتتحاذى يمين ومقروئيتها
   وحشة. plaintext بيخلي كل فقرة تاخد اتجاهها من أول حرف فيها. */
.chapter p, .chapter li{ unicode-bidi:plaintext; text-align:start }

/* صندوق «ليه تضيف» في صفحة الإضافة: خلفيته لازم تفضل غامقة في الليلي
   (درجات التركوازي بتتفتّح هناك) ونصه فاتح — وإلا أبيض على فاتح. */
:root[data-theme="dark"] .why{
  background:linear-gradient(140deg,#0b3136 0%,#0f3a40 55%,#08262a 100%) !important;
  color:#f3ece1 !important; border-color:#1f6d75 !important }
:root[data-theme="dark"] .why .why-line, :root[data-theme="dark"] .why .fl b,
:root[data-theme="dark"] .why .fl small, :root[data-theme="dark"] .why .why-note,
:root[data-theme="dark"] .why .why-big span{ color:#f3ece1 }
:root[data-theme="dark"] .why .fl{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14) }