/* ============================================================
   lesson-core.css — اللغة البصريّة المشتركة لدروس المختبر
   ------------------------------------------------------------
   مرجع: docs/lesson-contract.md §4
   تُستورَد قبل أيّ lesson.css خاصّ بالدرس.
   تعديلها = جلسة مكرَّسة (العقد محجوز).
   ============================================================ */


/* ——— 1. TOKENS ——— */
:root {
  /* خلفيّة وأسطح */
  --bg: #05080f;
  --bg-2: #0b1220;
  --panel: #0e1626;
  --panel-2: #141d30;

  /* حدود */
  --line: #1e2a44;
  --line-bright: #2a3a5a;

  /* حبر */
  --ink: #e8eef8;
  --ink-soft: #8a97b0;
  --ink-dim: #5a677d;

  /* وظيفيّ محجوز (ذرّة) */
  --proton: #ff5e6c;
  --neutron: #8a97b0;
  --electron: #4ab8ff;

  /* accents (استعمال محدود، لا زخرفة) */
  --accent: #f5a623;     /* ذهبيّ — للتركيز */
  --violet: #8c5cff;
  --green:  #39d98a;
  --red:    #ff5e6c;
  --cyan:   #4ab8ff;

  /* شبكة الخلفيّة */
  --grid: rgba(74, 184, 255, 0.08);

  /* خطوط */
  --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-en: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* أحجام خط */
  --fs-base: 14px;
  --fs-small: 12px;
  --fs-xs: 11px;
  --fs-tiny: 10px;
  --fs-label-en: 9px;
  --fs-section-ar: 13px;

  /* نصف قطر */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 99px;

  /* مسافات */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 18px;
  --sp-8: 24px;

  /* مدّة حركيّة */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.3s;

  /* أبعاد التخطيط */
  --topbar-h: 48px;
  --panel-w-left: 320px;
  --panel-w-right: 340px;
}


/* ——— 2. RESET / BASE ——— */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[dir="rtl"] body { direction: rtl; }

a { color: var(--electron); text-decoration: none; }
a:hover { color: var(--ink); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* شبكة الخلفيّة العامّة (موضوعة على body::before) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(74,184,255,0.05) 0, transparent 60%),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 80px);
}


/* ——— 3. LAYOUT ——— */
/* الهيكل الموحَّد: topbar فوق، stage في القلب، لوحات جانبيّة اختياريّة */
.lesson-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--panel-w-left) 1fr var(--panel-w-right);
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  width: 100vw;
}

/* يمكن للدرس تعطيل أحد العمودَين الجانبيَّين */
.lesson-app.no-left  { grid-template-columns: 0 1fr var(--panel-w-right); }
.lesson-app.no-right { grid-template-columns: var(--panel-w-left) 1fr 0; }
.lesson-app.no-left.no-right { grid-template-columns: 0 1fr 0; }

.lesson-topbar {
  grid-column: 1 / -1;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}

.lesson-topbar__title {
  font-weight: 600;
  font-size: var(--fs-base);
}

.lesson-topbar__sub {
  font-family: var(--font-en);
  font-size: var(--fs-label-en);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* slots ملاحة دائمة: زرّ «عودة» على inline-start،
   زرّ fullscreen على inline-end. محتوى الدرس
   (brand/title/sub/meta) يجاورهما داخل نفس الـnav. */
.lesson-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* زرّ مختزَل بحجم الـtopbar — يستخدم نفس tokens
   لكنّه أخفّ من .btn كي لا يُربك الـ48px height. */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-ar);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.topbar-btn:hover {
  color: var(--ink);
  border-color: var(--electron);
  background: var(--panel-2);
}
.topbar-btn__icon {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-base);
  line-height: 1;
}
.topbar-btn__label {
  font-family: var(--font-ar);
}

.lesson-panel {
  padding: var(--sp-6) var(--sp-7);
  background: var(--panel);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.lesson-panel--left  { border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.lesson-panel--right { border-inline-start: 1px solid var(--line); }

.lesson-stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0a1020 0%, var(--bg) 80%);
}


/* ——— 4. PRIMITIVES ——— */

/* رأس قسم: عربيّ بارز + لاتينيّ صغير بـsmall-caps */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.section-head__ar {
  font-weight: 700;
  font-size: var(--fs-section-ar);
  color: var(--ink);
}
.section-head__en {
  font-family: var(--font-en);
  font-size: var(--fs-label-en);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* زرّ أساسيّ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn:hover { border-color: var(--electron); color: var(--electron); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--secondary { background: transparent; }
.btn--secondary:hover { background: var(--panel-2); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.btn--primary:hover { color: var(--bg); filter: brightness(1.08); }

/* هامش جانبيّ (ملحوظة) */
.side-note {
  border: 1px dashed var(--line-bright);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.6;
}
.side-note__label {
  font-weight: 700;
  color: var(--ink);
  font-style: italic;
  margin-inline-end: var(--sp-2);
}

/* خليّة HUD (مؤشّر رقميّ) */
.hud-cell {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
}
.hud-cell::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-start-start-radius: var(--r-sm);
  border-end-start-radius: var(--r-sm);
}
.hud-cell__label {
  font-family: var(--font-en);
  font-size: var(--fs-label-en);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hud-cell__value {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--ink);
  margin-top: 2px;
}

/* بطاقة العنوان فوق الـstage */
.title-card {
  position: absolute;
  top: var(--sp-6);
  inset-inline-start: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  z-index: 2;
  max-width: 360px;
}
.title-card__ar {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.title-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* وسيلة إيضاح */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--ink-soft);
}


/* ——— 5. LESSON STRUCTURE (العقد الرباعيّ) ——— */

/* الهوك — يظهر في أوّل 30 ثانية */
.lesson-hook {
  position: absolute;
  top: var(--sp-6);
  inset-inline-end: var(--sp-6);
  max-width: 380px;
  background: var(--panel);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-6);
  z-index: 3;
}
.lesson-hook__question {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.55;
}
.lesson-hook__hint {
  font-family: var(--font-en);
  font-size: var(--fs-tiny);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
  letter-spacing: 0.06em;
}

/* tabs لطبقات الشرح */
.lesson-layers {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.lesson-layers__tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.lesson-layers__tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.lesson-layers__tab:hover { color: var(--ink); }
.lesson-layers__tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.lesson-layers__panel {
  display: none;
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.7;
}
.lesson-layers__panel[aria-hidden="false"] { display: block; }

/* روابط الدروس المجاورة */
.lesson-threads {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.lesson-threads__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.lesson-threads__card {
  display: block;
  padding: var(--sp-5) var(--sp-5);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast);
}
.lesson-threads__card:hover { border-color: var(--electron); color: var(--ink); }
.lesson-threads__kind {
  font-family: var(--font-en);
  font-size: var(--fs-label-en);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.lesson-threads__title {
  font-weight: 600;
  font-size: var(--fs-small);
}
.lesson-threads__q {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.5;
}