/* OMSB Selection Exam — منصة المراجعة.
 *
 * الرموز منقولة حرفاً من docs/design-tokens.md، وقيمها مستخرَجة قياساً من
 * صورة المرجع ومن الشعار. **سقف الإشباع ٤٨٪ ملزم** — أزرق أعلى إشباعاً عند
 * نفس الإضاءة يصير فاقعاً متعباً، وهو الفرق بين المُطفأ والفاقع.
 *
 * الواجهة إنجليزية يساراً-يميناً (ق-٠٩). والعربية لا تظهر إلا في شرح الإجابة
 * وشارات الشفافية، وكلاهما يُقلَب اتجاهه بـ.ar محلياً لا على الصفحة كلها.
 */

:root {
  /* الأزرق — من صورة المرجع */
  --blue-950: hsl(208 42% 11%);
  --blue-900: hsl(208 40% 16%);
  --blue-800: hsl(208 38% 26%);
  --blue-700: hsl(207 42% 36%);
  --blue-600: hsl(206 44% 46%);
  --blue-500: hsl(206 44% 52%);
  --blue-400: hsl(206 42% 62%);
  --blue-300: hsl(205 40% 72%);
  --blue-200: hsl(205 38% 82%);
  --blue-100: hsl(205 36% 91%);
  --blue-50:  hsl(205 40% 97%);

  /* الذهب — من الشعار. للتمييز لا للمساحات */
  --gold-600: hsl(40 48% 44%);
  --gold-500: hsl(40 48% 52%);
  --gold-400: hsl(40 46% 65%);
  --gold-200: hsl(40 46% 84%);

  /* دلالية */
  /* **دافئةٌ لا باردة — وتوحيدٌ يُصلح عيباً.** `theme-boot.js` يطلي
     الجذرَ `#FCFBF7` قبل وصول هذا الملفّ، وكان التطبيقُ يردّه إلى
     `blue-50` الباردة — فتُرى ومضةُ تبدّلٍ في كلّ فتحة. وهي لونُ
     الصفحة الرئيسية، فصار البناءُ واحداً. */
  --color-bg:        #FCFBF7;
  --color-surface:   hsl(0 0% 100%);
  --color-raised:    var(--blue-100);
  --color-border:    var(--blue-200);
  --color-text:      var(--blue-950);
  --color-muted:     hsl(206 16% 42%);
  --color-accent:    var(--blue-700);
  --color-accent-hover: var(--blue-600);
  --color-on-accent: var(--blue-50);
  --color-header:    var(--blue-800);
  --color-highlight: var(--gold-500);

  --color-correct:   hsl(158 46% 34%);
  --color-wrong:     hsl(4 56% 46%);
  --color-partial:   hsl(38 62% 48%);

  --radius: 0.625rem;
  --radius-full: 999px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* IBM Plex: عائلةٌ واحدة تحمل اللاتيني والعربي معاً، فلا يختلف النصّان
     في الشكل كما كان (Inter مع Tajawal، عائلتان لا صلة بينهما). ومزاجها
     هندسيٌّ رصين يليق بمادة طبية، لا خطّ واجهاتٍ عامّ. */
  --font-ui: 'IBM Plex Sans', 'IBM Plex Sans Arabic', -apple-system,
             BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'SF Arabic', system-ui, sans-serif;
  /* الرقعة للعناوين ونصّ السؤال: تفصل «الورقة» عن «التطبيق» بصرياً،
     فيُقرأ السؤال كأنه مطبوع في كرّاسة امتحان لا كأنه عنصر واجهة. */
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.75rem;

  --shadow-card: 0 1px 2px hsl(208 30% 20% / 0.05), 0 6px 20px hsl(208 30% 20% / 0.07);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* الوضع الليلي — الأزرق يقلب دوره: خلفيةً داكنة، وفاتحاً للإبراز.
 * وسقف الإشباع باقٍ: أفتح أزرق هنا ٤٠٪ لا أكثر. */
html.theme-dark {
  --color-bg:        #101C25;
  --color-surface:   hsl(208 34% 14%);
  --color-raised:    hsl(208 32% 19%);
  --color-border:    hsl(207 24% 30%);
  --color-text:      hsl(205 30% 92%);
  --color-muted:     hsl(205 16% 64%);
  --color-accent:    var(--blue-300);
  --color-accent-hover: var(--blue-200);
  --color-on-accent: var(--blue-950);
  --color-header:    hsl(208 36% 18%);
  --color-correct:   hsl(158 42% 58%);
  --color-wrong:     hsl(4 62% 66%);
  --color-partial:   hsl(38 58% 62%);
  --shadow-card: 0 1px 2px hsl(0 0% 0% / 0.3), 0 6px 20px hsl(0 0% 0% / 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { padding-bottom: calc(4.4rem + var(--safe-bottom)); }
body.runner-open { padding-bottom: 0; overflow: hidden; }

/* العربية أينما وردت: الاتجاه والخطّ محليّان لا عامّان */
.ar {
  direction: rtl;
  text-align: right;
  font-family: var(--font-ar);
  line-height: 1.85;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- الرأس ---------- */

header {
  background: var(--color-header);
  color: var(--blue-50);
  padding: calc(0.7rem + var(--safe-top)) 1rem 0.7rem;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* الشعار نسبته ٣:٢، فالإطار المربّع كان يصغّره ويُهدر ثلثه فراغاً */
header img { height: 2.4rem; width: auto; flex: none; }
header .titles { flex: 1; min-width: 0; }

header h1 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  /* الرقعة أعرض من الخطّ السابق: بلا هذا ينكسر العنوان سطرين على النوافذ
     الضيقة ويُزيح ما تحته. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

header .sub {
  font-size: var(--text-xs);
  opacity: 0.72;
  margin-top: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-toggle {
  appearance: none;
  flex: none;
  border: 1px solid hsl(0 0% 100% / 0.25);
  background: hsl(0 0% 100% / 0.1);
  color: inherit;
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

/* ---------- التبويبات السفلية ---------- */

nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: var(--safe-bottom);
  z-index: 30;
}

nav button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.65rem 0.2rem;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-muted);
  cursor: pointer;
  transition: color 160ms var(--ease);
}

nav button[aria-selected='true'] {
  color: var(--color-accent);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--color-accent);
}

nav .badge {
  display: inline-block;
  min-width: 1.1rem;
  margin-inline-start: 0.25rem;
  background: var(--gold-500);
  color: var(--blue-950);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0 0.3rem;
}

/* ---------- التخطيط ---------- */

main { padding: 0.9rem; max-width: 44rem; margin-inline: auto; }
section[hidden], [hidden] { display: none !important; }

h2 { font-family: var(--font-display); font-size: var(--text-md); margin: 1.3rem 0 0.5rem; font-weight: 600; letter-spacing: -0.01em; }
h2:first-child { margin-top: 0.2rem; }
h3 { font-size: var(--text-base); margin: 0 0 0.25rem; font-weight: 700; }

.intro { margin: 0 0 0.9rem; font-size: var(--text-sm); color: var(--color-muted); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--shadow-card);
}

.card .meta { font-size: var(--text-sm); color: var(--color-muted); }

.empty {
  text-align: center;
  color: var(--color-muted);
  padding: 2.4rem 1rem;
  font-size: var(--text-sm);
}

/* ---------- الأزرار ---------- */

button.btn, .btn {
  appearance: none;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius);
  padding: 0.55rem 0.95rem;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--ease);
}

button.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
button.btn:disabled { opacity: 0.45; cursor: default; }

button.btn.ghost { background: transparent; color: var(--color-accent); }
button.btn.ghost:hover { background: hsl(207 42% 36% / 0.08); }

button.btn.quiet {
  background: transparent;
  color: var(--color-muted);
  border-color: var(--color-border);
}
button.btn.quiet:hover { color: var(--color-accent); border-color: var(--color-accent); }

button.btn.danger { background: transparent; color: var(--color-wrong); border-color: var(--color-wrong); }

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.65rem; }
.actions .btn { flex: 1 1 8rem; }

/* ---------- بطاقات الأوضاع ---------- */

.mode {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: start;
  width: 100%;
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 0.6rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 160ms var(--ease);
}

.mode:hover { border-color: var(--color-accent); }
.mode .glyph {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--color-raised);
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-sm);
}
.mode .body { flex: 1; min-width: 0; }
.mode .body strong { display: block; font-size: var(--text-base); }
.mode .body span { display: block; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- استئناف ---------- */

.resume {
  border: 1px solid var(--gold-500);
  background: hsl(40 48% 52% / 0.1);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.9rem;
}
.resume strong { display: block; font-size: var(--text-base); }
.resume .meta { margin-bottom: 0.2rem; }

/* ---------- الحقول ---------- */

.field { margin-bottom: 0.8rem; }
.field > label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: 0.3rem; }
.field .hint { font-size: var(--text-xs); color: var(--color-muted); margin-top: 0.25rem; }

select, input[type='number'], input[type='text'], input[type='password'] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* رسالة نتيجة تغيير الرمز. لا تُبلَّغ باللون وحده (رمز التصميم ٣): النص
   نفسه يقول ما وقع، واللون تأكيدٌ له لا بديلٌ عنه. */
.acct-msg { font-size: var(--text-sm); min-height: 1.2em; margin-top: 0.2rem; }
.acct-msg.bad { color: var(--color-wrong); }
.acct-msg.good { color: var(--color-correct); }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.chip {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}

/* ---------- شاشة الاختبار ---------- */

.runner {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.runner-bar {
  background: var(--color-header);
  color: var(--blue-50);
  padding: calc(0.55rem + var(--safe-top)) 0.9rem 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.runner-bar .grow { flex: 1; min-width: 0; }
.runner-bar .label { font-size: var(--text-sm); font-weight: 700; }
.runner-bar .where { font-size: var(--text-xs); opacity: 0.75; }

.runner-bar button {
  appearance: none;
  border: 1px solid hsl(0 0% 100% / 0.25);
  background: hsl(0 0% 100% / 0.1);
  color: inherit;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}

.clock {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: hsl(0 0% 100% / 0.12);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.clock.over { background: hsl(38 62% 48% / 0.32); }

.runner-progress { height: 3px; background: var(--color-border); flex: none; }
.runner-progress > i { display: block; height: 100%; background: var(--gold-500); transition: width 200ms var(--ease); }

.runner-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.9rem; }
.runner-body > .inner { max-width: 44rem; margin-inline: auto; }

.runner-foot {
  flex: none;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0.9rem calc(0.6rem + var(--safe-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.runner-foot .spacer { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- السؤال ---------- */

.q {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-card);
}

.q .num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* رقم السؤال بالخطّ أحادي العرض ليصطفّ، واسم الفئة بخطّ الواجهة —
 * أحادي العرض للجرعات والقيم المخبرية لا لأسماء الأقسام */
.q .cat { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-accent); font-weight: 700; letter-spacing: 0; }
/* نصّ السؤال بالرقعة: يفصل «الورقة» عن «التطبيق»، فتقرؤه رضوى كما تقرأ
   كرّاسة امتحان لا كما تقرأ عنصر واجهة. */
.q .stem {
  margin: 0.5rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* صورةُ السؤال. **محدودةُ الارتفاع** لأن صورَ الشرائح تختلف اختلافاً
   شديداً — من ٣٠٠×٢٠٠ إلى ١٦٠٠×١٢٠٠ — وصورةٌ بطولِ الشاشة تدفع الخيارات
   خارج المشهد فيُجاب قبل أن تُرى. والخلفيةُ محايدةٌ لأن أكثرَها صورٌ
   سريريةٌ خلفيتُها بيضاء، فتذوب في اللون الفاتح بلا إطار. */
.qfig {
  margin: 0 0 0.85rem;
  padding: 0.4rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  text-align: center;
}

.qfig img {
  max-width: 100%;
  max-height: 340px;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

.ruling-box { border-left: 3px solid var(--color-accent); }
.ruling-box .verdict-line { margin-top: 0.35rem; }
.noshot { color: var(--color-muted); font-size: var(--text-xs); }
/* زرُّ الصفحة داخل سطرِ دليل: يُقرأ رابطاً في الجملة لا زرّاً مستقلاً */
.srcbtn.inline {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}

/* الشكلُ كاملاً تحت صفحة المصدر — حين يقصُّ العرضُ دليلَه */
.uncropped { margin-top: 0.9rem; }
.uncropped .lbl {
  display: block; font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--color-muted); letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.uncropped img {
  max-width: 100%; height: auto; margin-top: 0.4rem; border-radius: 4px;
  border: 1px solid var(--color-border);
}

/* ما كتبناه نحن. **لونٌ غيرُ لون المنهج** — لا إنذاراً، بل تمييزاً:
   القارئةُ يجب أن تعرف بنظرةٍ أنّ هذا سدُّ نقصٍ لا صفحةَ كتاب. */
.agency {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed hsl(40 48% 44% / 0.6);
  border-radius: var(--radius-sm, 6px);
  background: hsl(40 48% 52% / 0.08);
  font-size: var(--text-sm, 0.9rem);
  line-height: 1.5;
}
.sec h4 .ours {
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--gold-600); margin-left: 0.4rem;
}

.opts { display: grid; gap: 0.4rem; }

.opt {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: start;
  width: 100%;
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: inherit;
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.opt:hover { border-color: var(--color-accent); }

.opt .key {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
}

.opt[aria-pressed='true'] { border-color: var(--color-accent); background: hsl(207 42% 36% / 0.07); }
.opt[aria-pressed='true'] .key { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* الصواب والخطأ لا يُبلَّغان باللون وحده — رمزٌ ونصّ معه (رمز التصميم ٣) */
.opt.correct { border-color: var(--color-correct); background: hsl(158 46% 34% / 0.08); }
.opt.correct .key { background: var(--color-correct); border-color: var(--color-correct); color: #fff; }
.opt.wrong { border-color: var(--color-wrong); background: hsl(4 56% 46% / 0.08); }
.opt.wrong .key { background: var(--color-wrong); border-color: var(--color-wrong); color: #fff; }

.opt .verdict {
  flex: none;
  align-self: center;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.opt.correct .verdict { color: var(--color-correct); }
.opt.wrong .verdict { color: var(--color-wrong); }

/* ---------- الشرح والمرجع ---------- */

.reveal {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* ── تدرّج الشرح ──
   كتلة الشرح كانت رمادية اللون كلها: العنوان والنصّ والتعليل والترجمة
   بلونٍ واحد، فتُقرأ سرداً متصلاً لا بناءً له رأسٌ وبدن. والقارئة هنا
   تُراجع تحت ضغط وقت، فتحتاج أن تلتقط عينها موضعَ ما تريد قبل أن تقرأه.

   فلكل قسمٍ لونُه ودلالته:
     الشرح            أزرق  — الحكم الصحيح، وهو الأصل
     تعليل المشتِّتات  أحمر  — لماذا أخطأت، فيُقرأ بحذر
     المرجع           ذهبي  — الإثبات، ولون الشعار
     العربية          محايد بحافّة — إعانةٌ على الفهم لا معلومة زائدة */
.reveal h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.95rem 0 0.3rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.reveal h4::before {
  content: "";
  inline-size: 0.75rem;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.reveal h4:first-child { margin-top: 0; }
.reveal h4.why { color: var(--color-wrong); }
.reveal h4.src { color: var(--gold-600); }

.reveal p { margin: 0 0 0.4rem; color: var(--color-text); }
/* السطر العربي إعانةٌ على الفهم، فيُوسم بحافّةٍ ملاصقة لأول النص. و`inline`
   هنا ينعكس مع اتجاه العربية، فـ`start` هو اليمين — وبـ`end` وقعت الحافّة
   في أقصى اليسار بعيدةً عن النصّ الذي تصفه. */
.reveal .ar {
  margin: 0.5rem 0 0.25rem;
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--gold-400);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.75;
}
.reveal ul { margin: 0.25rem 0 0; padding-inline-start: 0; list-style: none; }
.reveal li {
  margin: 0 0 0.3rem;
  padding-inline-start: 1.5rem;
  position: relative;
  color: var(--color-muted);
}
.reveal li .k {
  position: absolute;
  inset-inline-start: 0;
  top: 0.05rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-wrong);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  inline-size: 1.05rem;
  block-size: 1.05rem;
  display: grid;
  place-items: center;
  opacity: 0.85;
}
.reveal .proof {
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid var(--color-accent);
  color: var(--color-text);
}
.reveal .topicline { margin-top: 0.45rem; font-size: var(--text-xs); color: var(--color-muted); }

.srcbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px dashed var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.3rem;
}
.srcbtn:hover { background: hsl(207 42% 36% / 0.08); }

/* ---------- شارات الشفافية — ق-١٦ ---------- */

.flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
  background: transparent;
}

.flag.editorial { color: var(--gold-600); border-color: hsl(40 48% 44% / 0.5); background: hsl(40 48% 52% / 0.1); }
.flag.uncertain { color: var(--color-partial); border-color: hsl(38 62% 48% / 0.5); background: hsl(38 62% 48% / 0.1); }
.flag.tierb    { color: var(--color-accent); border-color: hsl(207 42% 36% / 0.4); background: hsl(207 42% 36% / 0.07); }
.flag.ocr      { color: var(--color-muted); border-color: var(--color-border); }
.flag.conflict { color: var(--color-wrong); border-color: hsl(4 56% 46% / 0.45); background: hsl(4 56% 46% / 0.08); }
/* العتبةُ المعمولُ بها في القاعة تخالف الدليل — تنبيهٌ لا خطأ، فلونُه
   لونُ التنبيه لا لونُ الغلط (٢٠٢٦-٠٩-٠٧). */
.flag.cutoff   { color: var(--color-partial); border-color: hsl(38 62% 48% / 0.55); background: hsl(38 62% 48% / 0.12); }
/* حكمُ الوكالة: **لونٌ غيرُ لون التعارض**. التعارضُ أحمرُ لأنه عطبٌ لم
   يُحسم، وهذا محسومٌ بيدنا — فيُقرأ إشعاراً لا إنذاراً، ويبقى متمايزاً
   عن الشارات التي مصدرُها المنهجُ نفسُه. */
.flag.ruling   { color: var(--color-accent); border-color: hsl(207 42% 36% / 0.55); background: hsl(207 42% 36% / 0.1); }

.flag-detail {
  margin-top: 0.4rem;
  border-inline-start: 3px solid var(--color-border);
  padding: 0.25rem 0 0.25rem 0.6rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
html[dir='ltr'] .flag-detail { padding-inline-start: 0.6rem; padding-inline-end: 0; }

.flag-detail .ar { font-size: var(--text-sm); color: var(--color-text); }

.conflict-box {
  margin-top: 0.4rem;
  border: 1px solid hsl(4 56% 46% / 0.35);
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  font-size: var(--text-xs);
}
.conflict-box .reading { margin-top: 0.35rem; }
.conflict-box .reading b { color: var(--color-text); }

/* ---------- النتيجة ---------- */

.score-hero {
  background: var(--color-header);
  color: var(--blue-50);
  border-radius: var(--radius);
  padding: 1.1rem;
  text-align: center;
  margin-bottom: 0.9rem;
}
.score-hero .big { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 700; line-height: 1.05; }
.score-hero .of { font-size: var(--text-sm); opacity: 0.8; }
.score-hero .pct { font-size: var(--text-md); margin-top: 0.2rem; }
.score-hero .pass { display: inline-block; margin-top: 0.5rem; border-radius: var(--radius-full); padding: 0.15rem 0.75rem; font-size: var(--text-sm); font-weight: 700; }
.score-hero .pass.yes { background: hsl(158 46% 44%); color: hsl(158 46% 12%); }
.score-hero .pass.no { background: hsl(4 56% 56%); color: hsl(4 40% 12%); }
.score-hero .caveat { font-size: var(--text-xs); opacity: 0.78; margin-top: 0.55rem; line-height: 1.5; }

.passline { position: relative; height: 0.5rem; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-top: 0.6rem; }
.passline > i { display: block; height: 100%; background: var(--gold-500); }
.passline > span { position: absolute; top: -0.15rem; bottom: -0.15rem; width: 2px; background: var(--blue-50); }

/* ---------- خريطة القراءة ---------- */

.focus { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); margin-bottom: 0.6rem; overflow: hidden; }
.focus .head { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.65rem 0.8rem; }
.focus .head .name { flex: 1; font-weight: 700; }
.focus .head .tally { font-family: var(--font-mono); font-size: var(--text-sm); }
.focus.miss .head .tally { color: var(--color-wrong); }
.focus.solid .head .tally { color: var(--color-correct); }
.focus .pages { padding: 0 0.8rem 0.7rem; font-size: var(--text-sm); color: var(--color-muted); }
.focus .pages div { margin-top: 0.15rem; }
.focus .pages .doc { color: var(--color-text); }

/* اسم الملف زرٌّ يفتح صفحته، ويبدو نصاً كي لا يزاحم الأزرار الحقيقية */
.linkish {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.linkish:hover .doc { color: var(--color-accent); }
.focus .skip { font-size: var(--text-xs); color: var(--color-correct); font-weight: 700; }

/* ---------- لوحة الأداء ---------- */

.catrow { margin-bottom: 0.55rem; }
.catrow .line { display: flex; justify-content: space-between; gap: 0.6rem; font-size: var(--text-sm); }
.catrow .line .n { font-family: var(--font-mono); color: var(--color-muted); white-space: nowrap; }
.catrow .bar { height: 0.45rem; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-top: 0.2rem; position: relative; }
.catrow .bar > i { display: block; height: 100%; background: var(--color-accent); }
.catrow .bar > .mark { position: absolute; top: 0; bottom: 0; left: 60%; width: 2px; background: var(--gold-500); }
.catrow.untested .line { color: var(--color-muted); }

.trend { width: 100%; height: 9rem; display: block; }
.trend .grid { stroke: var(--color-border); stroke-width: 1; }
.trend .pass { stroke: var(--gold-500); stroke-width: 1.5; stroke-dasharray: 4 3; }
.trend .line { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.trend .dot { fill: var(--color-accent); }
.trend text { fill: var(--color-muted); font-size: 9px; font-family: var(--font-mono); }

/* ---------- سجل المحاولات ---------- */

.attempt { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius); padding: 0.7rem 0.8rem; margin-bottom: 0.55rem; }
.attempt .top { display: flex; gap: 0.6rem; align-items: baseline; }
.attempt .top .name { flex: 1; font-weight: 700; font-size: var(--text-sm); }
.attempt .top .res { font-family: var(--font-mono); font-size: var(--text-sm); }
.attempt .when { font-size: var(--text-xs); color: var(--color-muted); }
.attempt .actions { margin-top: 0.5rem; }
.attempt .actions .btn { flex: 1 1 6rem; padding: 0.35rem 0.5rem; font-size: var(--text-xs); }

/* ---------- عارض المرجع ---------- */

.modal { position: fixed; inset: 0; z-index: 60; background: hsl(208 42% 11% / 0.72); display: flex; align-items: flex-end; justify-content: center; }

.modal .sheet {
  background: var(--color-bg);
  width: min(44rem, 100%);
  max-height: 92dvh;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal .sheet-bar {
  flex: none;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--color-header);
  color: var(--blue-50);
}
.modal .sheet-bar .grow { flex: 1; min-width: 0; }
.modal .sheet-bar .t { font-size: var(--text-sm); font-weight: 700; overflow-wrap: anywhere; }
.modal .sheet-bar .s { font-size: var(--text-xs); opacity: 0.75; }
.modal .sheet-bar button {
  appearance: none; border: 1px solid hsl(0 0% 100% / 0.25); background: hsl(0 0% 100% / 0.1);
  color: inherit; border-radius: var(--radius-full); padding: 0.25rem 0.75rem;
  font-family: inherit; font-size: var(--text-xs); cursor: pointer;
}

.modal .sheet-body { overflow-y: auto; padding: 0.9rem; padding-bottom: calc(0.9rem + var(--safe-bottom)); }
.modal .sheet-body img { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }

.quote {
  background: hsl(40 48% 52% / 0.16);
  border-inline-start: 3px solid var(--gold-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.55rem 0.7rem;
  font-size: var(--text-sm);
  margin-bottom: 0.7rem;
}
.quote .lbl { display: block; font-size: var(--text-xs); color: var(--color-muted); font-weight: 700; margin-bottom: 0.15rem; }

/* صفُّ جدولٍ من الصفحة: فراغاته هي أعمدته. بتسطيحها يختلط عمودٌ بعمود
   ويصير الدليل كلاماً لا يُقرأ، فيُعرض كما كُتب — بخطٍّ ثابت العرض
   ليبقى التعامد، وبتمريرٍ أفقيٍّ خاصٍّ به فلا تنزلق الصفحة كلها. */
.quote pre.cols {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  tab-size: 4;
  padding-bottom: 0.2rem;
}
.quote pre.cols::-webkit-scrollbar { height: 6px; }
.quote pre.cols::-webkit-scrollbar-thumb {
  background: hsl(40 30% 40% / 0.35);
  border-radius: 3px;
}
@media (max-width: 560px) { .quote pre.cols { font-size: 0.66rem; } }

/* **والمخفيُّ خلف الحافّة يُعلَن.** قيسَ على جوّالٍ عرضُه ٣٧٥ بكسل: صندوقُ
   الاقتباس ٣٢٤ بكسل، وأعرضُ صفِّ جدولٍ في البنك (`q-ph-007`) ١٩٠٠ — أي أن
   سُبعَ الدليل ظاهرٌ وستةَ أسباعِه خلف الحافّة. والشريطُ الذي رسمناه أعلاه
   لا يظهر في سفاري الجوّال إلا أثناء التمرير نفسِه، فلا شيءَ يقول لها إن
   ثمّة ما يُمرَّر — فتقرأ نصفَ الدليل وتحسبه كلَّه.
   والسطرُ يُكتب من `showPage` حين يفيض الصندوقُ فعلاً لا احتياطاً، ويحمل
   الصندوقُ حينها `tabindex` ليمرَّر بلوحة المفاتيح و`aria-label` ليُسمَّى. */
.quote .cols-wider {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-weight: 700;
}
.quote pre.cols:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.missing {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 1.1rem 0.9rem;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.missing .file { color: var(--color-text); font-weight: 700; overflow-wrap: anywhere; }
.missing .path { font-family: var(--font-mono); font-size: var(--text-xs); margin-top: 0.35rem; overflow-wrap: anywhere; }

/* ---------- متفرّقات ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); gap: 0.55rem; margin-bottom: 0.9rem; }
.tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.65rem 0.5rem; text-align: center; box-shadow: var(--shadow-card); }
.tile .n { display: block; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-accent); line-height: 1.2; }
.tile .l { font-size: var(--text-xs); color: var(--color-muted); }

details.note { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.55rem 0.75rem; margin-bottom: 0.8rem; font-size: var(--text-sm); }
details.note summary { cursor: pointer; font-weight: 700; color: var(--color-accent); }
details.note p { margin: 0.45rem 0 0; color: var(--color-muted); }

.sample-warn {
  background: hsl(38 62% 48% / 0.14);
  border: 1px solid hsl(38 62% 48% / 0.45);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  font-size: var(--text-sm);
  margin-bottom: 0.9rem;
}
.sample-warn .btn { margin-top: 0.5rem; }

/* سطرُ الترويسة حين لا يصل البنك. وهو مخفيٌّ دون ٢٤rem أصلاً، ولذلك
   الرسالةُ الحقيقيةُ في `#load-warn` داخل الصفحة لا هنا. */
header .sub.is-bad { opacity: 1; color: var(--gold-400); font-weight: 700; }

.pager { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; margin: 0.9rem 0 0.4rem; }
.pager button {
  appearance: none; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-muted); border-radius: var(--radius); min-width: 2rem; padding: 0.25rem 0.4rem;
  font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
}
.pager button[aria-current='true'] { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.pager button.done { background: var(--color-raised); }

/* ── صفحات الأوضاع ──
   لكل وضعٍ صفحته: سجلُّه أولاً ثم الإعداد. لأن ما تحتاج المستعملة معرفته
   قبل الضغط على «ابدأ» هو أين كانت في المرة الماضية، لا حقلُ عدد أسئلة. */
.brand {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: var(--radius);
  transition: opacity 140ms var(--ease);
}
.brand:hover { opacity: 0.82; }
.brand:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

/* الرقعة أعرض من الخطّ السابق، فانكسر العنوان سطرين على الهاتف وابتُر
   السطر تحته. يُضيَّق قليلاً هناك ويُترك على سعته فيما فوق. */
@media (max-width: 36rem) {
  header h1 { font-size: var(--text-base); letter-spacing: -0.015em; }
  header .sub { font-size: 0.6875rem; }
  header { gap: 0.5rem; padding-inline: 0.85rem; }
  header img { height: 2.1rem; }
}

.backlink {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.2rem 0;
  margin-bottom: 0.35rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.backlink::before { content: "←"; font-size: 1em; }
.backlink:hover { color: var(--color-accent-hover); }

h3.sec {
  margin: 1.5rem 0 0.55rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-muted);
}

.modestat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 0.2rem 0 0.3rem;
}
.modestat .cell {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 0.6rem;
  text-align: center;
}
.modestat .cell b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-accent);
}
.modestat .cell span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.modestat.empty {
  display: block;
  grid-template-columns: none;
  padding: 0.85rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.movement { margin: 0.15rem 0 0.2rem; font-size: var(--text-sm); }

/* عنوان البطاقة داخل صفحة الوضع تكرارٌ لعنوان الصفحة نفسها */
#tab-mock .card > h3,
#tab-diag .card > h3,
#tab-study .card > h3 { display: none; }
.delta { font-weight: 700; }
.delta.up { color: var(--color-correct); }
.delta.up::before { content: "▲ "; }
.delta.down { color: var(--color-wrong); }
.delta.down::before { content: "▼ "; }

/* سطر الإرشاد: يُقال مرةً في صدر الصفحة بدل أن يُزخرف كل زرٍّ بإشارة.
   والسبب أن العناصر هنا كثيرة، فتوضيحُ كلٍّ منها يملأ الصفحة ضجيجاً. */
.howto {
  margin: -0.4rem 0 1rem;
  padding: 0.6rem 0.75rem;
  border-inline-start: 2px solid var(--gold-400);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}
.howto strong { color: var(--color-text); font-weight: 600; }

/* ── دفتر الأخطاء ──
   الوحدة المعروضة هي **الزاوية** لا الموضوع: «نزف الرحم» يحتمل عشر زوايا،
   فعرضُه وحده لا يخبر صاحبه بما أخطأ. والسؤال مطويٌّ تحتها — كشفُه كاملاً
   يُفسد إعادته، وإخفاؤه يترك صاحبه في عمى. */
.mqlist { display: grid; gap: 0.35rem; margin: 0.15rem 0 0.6rem; }

.mq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.mq > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
}
.mq > summary::-webkit-details-marker { display: none; }
.mq > summary::before {
  content: "+";
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
}
.mq[open] > summary::before { content: "−"; }
.mq > summary:hover { background: var(--color-raised); }
.mq .lines { display: grid; gap: 0.1rem; min-inline-size: 0; }
.mq .angle { font-weight: 600; color: var(--color-text); }
.mq .peek {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.45;
}
.mq[open] .peek { display: none; }   /* النصّ الكامل ظاهرٌ تحته، فلا يُكرَّر */

.mqbody {
  padding: 0.2rem 0.75rem 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.mqbody .stem {
  font-family: var(--font-display);
  margin: 0.6rem 0 0.55rem;
  line-height: 1.55;
}
.mqbody .ansline {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin: 0.2rem 0;
}
.mqbody .ansline.wrong { color: var(--color-wrong); }
.mqbody .ansline.right { color: var(--color-correct); }
.mqbody .ansline .k { flex: none; font-weight: 700; }
.mqbody .why { margin: 0.5rem 0 0.3rem; color: var(--color-muted); }

.wheretoread > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-600);
  font-weight: 600;
  padding: 0.2rem 0;
}
.wheretoread > summary::-webkit-details-marker { display: none; }
.wheretoread > summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: 0.4rem;
  transition: transform 140ms var(--ease);
}
.wheretoread[open] > summary::before { transform: rotate(90deg); }
.wheretoread > summary {
  display: inline-flex;
  align-items: center;
  border: 1px dashed var(--gold-400);
  border-radius: var(--radius);
  padding: 0.28rem 0.6rem;
}
.wheretoread > summary:hover { background: var(--color-raised); }

/* الروابط الضعيفة تُطوى خلف عدّها: إظهارها في مرتبة القويّة يجعل الثلث
   الضعيف يصبغ الكلّ. */
.weaker > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--text-xs);
  padding: 0.25rem 0;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.weaker > summary::-webkit-details-marker { display: none; }
.weaker > div { opacity: 0.72; }

.pageflip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--color-border);
}
.pageflip .of {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
  flex: 1;
}
.pageflip .btn { flex: none; }
.pageflip .btn[disabled] { opacity: 0.4; cursor: default; }

/* ملاحظات المحاضِر: تُعرض حين يكون الإثبات خلف الشريحة لا عليها */
.lecturer {
  margin: 0 0 0.8rem;
  padding: 0.65rem 0.8rem;
  background: var(--color-raised);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  white-space: pre-wrap;
}
.lecturer .lbl {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  font-weight: 600;
}

/* ── التذييل وصفحة التواصل ── */
footer {
  margin-top: 2.5rem;
  padding: 1.1rem 1rem calc(1.1rem + 3.6rem + var(--safe-bottom));
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: center;
}
footer .fmain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}
footer .sep { opacity: 0.5; }
/* **الفاصلُ بين الروابط يُولَد ولا يُكتب.** فروابطُ الذيل تُخفى وتظهر
   بحسب الحساب — «Add an exam» للمشرف، والصفحتان القانونيّتان بحسب
   `legal.json` — ولو كُتب الفاصلُ وسماً بين زرّين لبقي معلّقاً حين
   يُخفى ما بعده: «Contact |» تنتهي إلى لا شيء. فيُرسم قبلَ كلّ رابطٍ
   له سابقٌ، فلا يسبق أوّلَ ظاهرٍ ولا يتبع آخرَه.
   و`inline-block` تمنع خطَّ التحتيّة عند المرور من أن يمتدّ تحته. */
footer .fmain .flink + .flink::before {
  content: "|";
  display: inline-block;
  margin-inline-end: 0.4rem;
  color: var(--color-muted);
  opacity: 0.55;
  font-weight: 400;
}
footer .fnote { margin-top: 0.4rem; opacity: 0.75; max-width: 34rem; margin-inline: auto; }
.flink {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.flink:hover { text-decoration: underline; }

textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
  line-height: 1.6;
}
textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.sug-state {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.sug-state.ok { background: hsl(158 40% 94%); color: var(--color-correct); }
.sug-state.warn { background: hsl(38 60% 94%); color: hsl(30 60% 30%); }

.jobbar {
  height: 4px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: var(--color-raised);
  overflow: hidden;
}
.jobbar i { display: block; height: 100%; background: var(--color-accent); }
.job-running { color: var(--color-accent); }
.job-done { color: var(--color-correct); }
.job-failed { color: var(--color-wrong); }
.job-queued { color: var(--color-muted); }

/* ═══════════════════════════════════════════════════════════════════
   العرض حسب الجهاز

   بُني التصميم للهاتف أولاً، ثم بقي عليه: عمودٌ عرضه ٤٤rem في وسط شاشةٍ
   مقاسها ضعفا ذلك، فيقرأ المستعمل على الماك موقعاً يبدو أنه ليس له.

   والعلاج ليس تمديد كل شيء إلى عرض الشاشة — فطول السطر المريح للقراءة
   يبقى نحو ٧٠ حرفاً مهما اتسعت الشاشة، ومدُّ نصِّ السؤال إلى ألف بكسل
   يُتعب العين لا يُريحها. فالمساحة الزائدة تُصرف على ما ينتفع بها:
   الشبكات تُوسَّع، والتبويب ينتقل إلى عمودٍ جانبي، والشرح يقف بجانب
   السؤال بدل أن يقع تحته، وصورة الصفحة تكبر — وهي أنفع ما يكبر، لأن
   المستعملة تقرأ منها مرجعاً حقيقياً لا صورةً مصغّرة.
   ═══════════════════════════════════════════════════════════════════ */

/* ── لوح: ٤٨rem فأكثر ── */
@media (min-width: 48rem) {
  main { max-width: 54rem; padding: 1.25rem 1.4rem 1.4rem; }
  header { padding-inline: 1.4rem; }
  header img { height: 2.7rem; }
  h2 { font-size: var(--text-lg); }

  .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
  .modes .mode { margin-bottom: 0; flex-direction: column; }
  .modes .mode .glyph { margin-bottom: 0.15rem; }

  .card { padding: 1.1rem 1.2rem; }
  .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
  .setup-grid .actions { grid-column: 1 / -1; }

  /* النوافذ تتوسّط بدل أن تنزلق من الأسفل — النزلاق نمط هاتف */
  .modal { align-items: center; padding: 1.5rem; }
  .modal .sheet {
    width: min(52rem, 100%);
    max-height: 86dvh;
    border-radius: var(--radius);
  }
}

/* ── مكتب: ٦٤rem فأكثر ── */
@media (min-width: 64rem) {
  /* لا شبكة على `body`: العنصر اللاصق داخل الشبكة يلتصق في منطقته وحدها،
     ومنطقة الترويسة صفٌّ بارتفاعها — فتوقّف التصاقها بأعلى الشاشة. فبقيت
     الترويسة في المسار العادي لاصقةً كما كانت، وثُبِّت الشريط الجانبي
     تحتها بارتفاعها المقيس (`--header-h` يضبطه app.js عند كل تغيّر حجم). */
  nav {
    position: fixed;
    top: var(--header-h, 4.4rem);
    bottom: 0;
    inset-inline-start: 0;
    inline-size: 13.5rem;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.15rem;
    padding: 0.9rem 0.7rem;
    border-top: 0;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-bg);
    z-index: 18;
  }
  nav button {
    justify-content: flex-start;
    text-align: start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
  }
  nav button[aria-selected="true"] { background: var(--color-raised); }

  main {
    max-width: 62rem;
    margin-inline-start: 13.5rem;
    padding: 1.5rem 2rem 3rem;
  }
  footer { margin-inline-start: 13.5rem; padding-bottom: 1.4rem; }

  .runner-body { padding: 1.6rem 2rem 2rem; }
  .runner-body > .inner { max-width: 52rem; }
  .runner-bar, .runner-foot { padding-inline: 2rem; }

  .modal .sheet { width: min(60rem, 100%); max-height: 88dvh; }
  .modal .sheet-body { padding-inline: 1.4rem; }
}

/* ── مكتب عريض: ٨٤rem فأكثر ── */
@media (min-width: 84rem) {
  main { max-width: 68rem; }

  /* الشرح يقف بجانب السؤال لا تحته: فتُرى الإجابة الصحيحة وتعليل
     المشتِّتات والمرجع في نظرةٍ واحدة بلا تمرير. */
  .runner-body > .inner { max-width: 76rem; }
  .q:has(.reveal) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 0 1.8rem;
    align-items: start;
  }
  .q:has(.reveal) > .num,
  .q:has(.reveal) > .stem,
  .q:has(.reveal) > .opts,
  .q:has(.reveal) > .flags { grid-column: 1; }
  .q:has(.reveal) > .reveal {
    grid-column: 2;
    grid-row: 1 / span 5;
    margin-top: 0;
    position: sticky;
    top: 0.5rem;
  }

  .modal .sheet { width: min(72rem, 100%); }
}

@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .modal { align-items: center; }
  .modal .sheet { border-radius: var(--radius); max-height: 88dvh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ------------------------------------------------ بطاقة المذاكرة
   صفحةُ الخطة تعرض المادة لا موضعها: الموضوعُ ملخَّصاً من صفحاته كلّها،
   مرتّباً أبواباً. والألوانُ تفصل الرأس من البدن كما طُلب — لكلّ بابٍ
   لونُه على حرفه اليسار، فتُقرأ البطاقة قفزاً لا سطراً سطراً. */

.scard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.scard > summary {
  cursor: pointer;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}
.scard > summary::-webkit-details-marker { display: none; }
.scard > summary::before {
  content: "+";
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-accent);
  width: 1rem;
  flex: none;
}
.scard[open] > summary::before { content: "\2212"; }
.scard > summary:hover { background: var(--blue-50); }
.scard > summary .name { flex: 1; min-width: 0; }

/* **الاسمُ أوّلاً، والحصيلةُ خبرٌ عنه لا منافسٌ له.**
 *
 * كانت الحصيلةُ سطراً أحمرَ واحداً `white-space: nowrap`، فتطلب عرضَها
 * كاملاً وتترك للاسم ما بقي — و«Gynecology / Women's Health / Infertility /
 * Perinatal Care / Birth Spacing» على الجوّال ينكسر عندئذٍ إلى عمودٍ من
 * سبعة أسطر. فصارت أجزاءً: المكتوبُ خبرٌ حسنٌ بلون النصّ الخافت،
 * والناقصُ وحدَه أحمر، والنسبةُ خافتة. وتلتفّ الأجزاءُ ولا تُكسر داخلها. */
.scard > summary .tally {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  justify-content: flex-end;
}
.scard > summary .tally > span { white-space: nowrap; }
.scard > summary .tally > span + span::before {
  content: "·";
  margin-inline-end: 0.5rem;
  color: var(--color-muted);
}
.scard > summary .t-gap { color: var(--color-wrong); }

/* وعلى الشاشة الضيّقة تنزل الحصيلةُ سطراً تحت الاسم، بمحاذاته */
@media (max-width: 760px) {
  .scard > summary { flex-wrap: wrap; row-gap: 0.2rem; }
  .scard > summary .name { flex: 1 1 0; }
  .scard > summary .tally {
    flex: 1 0 100%;
    justify-content: flex-start;
    padding-inline-start: 1rem;
    font-weight: 400;
  }
}
.sbody { padding: 0 0.9rem 0.9rem; }

.sec { margin-top: 0.9rem; }
.sec > h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.4rem;
}
/* لونُ الباب على حرفه — تعريفٌ فسببٌ فعرضٌ فتشخيصٌ فعلاجٌ فمضاعفات */
.sec .chunk { border-inline-start: 3px solid var(--color-border); }
.sec.definition   .chunk { border-inline-start-color: hsl(206 44% 62%); }
.sec.cause        .chunk { border-inline-start-color: hsl(268 34% 62%); }
.sec.features     .chunk { border-inline-start-color: hsl(40 48% 55%); }
.sec.diagnosis    .chunk { border-inline-start-color: hsl(188 40% 46%); }
.sec.treatment    .chunk { border-inline-start-color: hsl(158 42% 42%); }
.sec.complications .chunk { border-inline-start-color: hsl(4 52% 56%); }
.sec.compare      .chunk,
.sec.shotsec      .chunk { border-inline-start-color: var(--gold-500); }

.chunk {
  background: var(--blue-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.5rem 0.75rem 0.55rem;
  margin-bottom: 0.45rem;
}
.chunk h5 {
  margin: 0 0 0.3rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text);
}
.chunk ul { margin: 0; padding: 0; list-style: none; }
.chunk li {
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 0.06rem 0;
}
.chunk li.b { padding-inline-start: 0.85rem; text-indent: -0.85rem; }
.chunk li.b::before { content: "\2022"; color: var(--gold-600); margin-inline-end: 0.4rem; }
.chunk li.d1 { padding-inline-start: 1.6rem; }
.chunk li.d2 { padding-inline-start: 2.4rem; }
.chunk .cite {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  color: var(--color-muted);
  border-bottom: 1px dotted var(--color-border);
}
.chunk .cite:hover { color: var(--color-accent); border-bottom-color: currentColor; }

.tscroll { overflow-x: auto; }
table.study { border-collapse: collapse; width: 100%; font-size: 0.78rem; }
table.study th, table.study td {
  border: 1px solid var(--color-border);
  padding: 0.34rem 0.5rem;
  vertical-align: top;
  text-align: start;
}
table.study thead th { background: var(--blue-100); font-weight: 700; }
table.study th[scope="row"] {
  background: hsl(0 0% 100% / 0.7);
  font-weight: 700;
  color: var(--color-accent);
}

/* الصورةُ تُعرض، ولا تُخبَّأ خلف رابط */
.shots figure { margin: 0 0 0.5rem; }
.shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.shots figcaption {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
}

/* هامشُ ما لا بطاقة له: المستندُ كاملاً لا أرقامُ صفحاته */
.nosum {
  margin: 0.5rem 0 0.2rem;
  padding: 0.45rem 0.7rem;
  border-inline-start: 2px solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-muted);
}
.nosum .linkish { font-weight: 600; }

/* مصادرُ الملخّص: المستنداتُ التي كُتب منها، في هامشه */
.sfrom {
  margin-top: 0.9rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.sfrom .linkish { font-weight: 600; }

/* الملخّصُ المكتوب: فقراتُه فقرات، وبنودُه بنود */
.chunk li.p { padding: 0.12rem 0; }
.chunk li.p + li.p { margin-top: 0.3rem; }

@media (min-width: 900px) {
  .chunk li { font-size: 0.88rem; }
  .shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .shots h5 { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   Study Journey · الواجهة المعتمدة ٢٠٢٦-٠٩-٠٤

   تحفظ وظائف المنصة وبنيتها، وتعيد ترتيب الصفحة الرئيسية حول القرار
   الأول: بأي طريقة ستستعدّ اليوم؟ الهاتف هو الأصل، ثم يُصرف اتساع المكتب
   في هرمية أوضح بدل عمود ضيق وشريط جانبي.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: hsl(42 38% 98%);
  --color-surface: hsl(42 30% 100%);
  --color-raised: hsl(42 36% 96%);
  --color-border: hsl(210 20% 84%);
  --color-text: hsl(211 49% 16%);
  --color-muted: hsl(210 9% 38%);
  --color-accent: hsl(210 54% 22%);
  --color-accent-hover: hsl(210 49% 29%);
  --color-on-accent: hsl(42 38% 98%);
  --color-header: hsl(210 54% 18%);
  --color-highlight: hsl(40 58% 51%);
  --gold-600: hsl(40 58% 39%);
  --gold-500: hsl(40 58% 51%);
  --gold-400: hsl(40 55% 64%);
  --gold-200: hsl(40 48% 86%);
  --radius: 0.875rem;
  --shadow-card: 0 1px 2px hsl(210 35% 18% / 0.06), 0 10px 28px hsl(210 35% 18% / 0.07);
}

/* **خطُّ الأيقونات مستضافٌ عندنا لا من جوجل — ٦٬٩٨٨ بايتاً.**
 *
 * المنصّةُ مبنيّةٌ لتعمل بلا شبكة (رضوى تذاكر على جوّالها)، وكان خطُّ
 * أيقوناتها يُجلب من `fonts.gstatic.com` في كلّ فتحةٍ باردة. فإن تأخّر
 * أو حُجب ظهرت **أسماءُ الأيقونات حروفاً** — `explore` و`chevron_right`
 * تسيل عبر البطاقات. رُئي ذلك على نطاقٍ جديدٍ بذاكرةٍ باردة.
 *
 * والخطُّ مقصوصٌ على ستٍّ وأربعين أيقونةً نستعملها، فوزنُه سبعةُ
 * كيلوبايتٍ لا ثلاثةُ ميغابايت.
 */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/material-symbols-rounded.woff2') format('woff2');
}

/* **خطوطُ النصّ مستضافةٌ عندنا لا من fonts.googleapis.com (٢٠٢٦-٠٩-١٩).**
 *
 * قِيس ٢٠٢٦-٠٩-١٨ في متصفّحٍ لا تصل منه Google Fonts: طلبُ ورقة أنماط
 * IBM Plex سقط وحدَه بين كلّ موردٍ آخر في الصفحة نجح. ولا يُفقَد نصٌّ
 * بهذا — يتراجع المتصفّحُ إلى خطٍّ نظاميّ فوراً (`font-display: swap`) —
 * لكنّها بقيت آخرَ اعتمادٍ لثوب المنصّة على شبكةٍ خارجية، بعد أن استُضيف
 * خطُّ الأيقونات أعلاه في اليوم نفسِه. تُبنى بـ`tools/build_text_fonts.py`
 * وأوزانُها مأخوذةٌ من الاستعمال الفعليّ في `--font-ui` و`--font-display`
 * و`--font-ar` أعلاه — لا وزنَ زائدٌ عمّا يُعرض.
 *
 * **و`IBM Plex Sans Arabic` بمجموعتين فرعيّتين لا واحدة**: `unicode-range`
 * منسوخٌ من ردّ جوجل بحرفه. فبدونه يُعلن الخطُّ تغطيةَ كلّ الترميز
 * افتراضاً، فيحجب سقوطَ `--font-ui` من `'IBM Plex Sans'` (لا يرسم
 * عربياً) إلى `'IBM Plex Sans Arabic'` — ويظهر النصُّ العربيُّ صناديقَ
 * حروفٍ مفقودة، وهو أسوأُ ممّا كان قبل الاستضافة لا مثله. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-serif-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* **ولا يُعرض اسمُ أيقونةٍ حرفاً أبداً.** الصندوقُ محفوظٌ بـ`visibility`
 * فلا يقفز التخطيط، وكلُّ أيقونةٍ عندنا بجانبها عنوانٌ أو تسمية — فغيابُ
 * الرمز لا يُفقد معنًى، وظهورُ اسمه يُفقد الصفحةَ كلَّها. */
html:not(.fonts-ready) .material-symbols-rounded { visibility: hidden; }

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body { padding-bottom: calc(5.15rem + var(--safe-bottom)); }

header {
  min-height: 4.9rem;
  padding: calc(0.82rem + var(--safe-top)) 0.95rem 0.82rem;
  gap: 0.7rem;
  box-shadow: 0 1px 0 hsl(40 58% 51% / 0.3);
}

header img { height: 3rem; }

header h1 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

header .sub { font-size: 0.68rem; opacity: 0.68; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  flex: none;
}

.theme-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-color: hsl(0 0% 100% / 0.22);
  background: hsl(0 0% 100% / 0.08);
}

.theme-toggle .material-symbols-rounded { font-size: 1.25rem; }
.theme-toggle .button-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

main {
  width: 100%;
  max-width: 48rem;
  padding: 1.35rem 0.9rem 1.8rem;
}

.home-lead { margin-bottom: 1.3rem; }

.home-intro { padding: 0.2rem 0.1rem 0.35rem; }

.home-intro .eyebrow {
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.2;
}

.home-intro h2 {
  margin: 0.2rem 0 0.6rem;
  color: var(--color-accent);
  font-size: clamp(1.75rem, 8.2vw, 2.35rem);
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.home-intro p {
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
}

.gold-rule {
  display: block;
  inline-size: 4.2rem;
  block-size: 3px;
  margin-top: 0.75rem;
  border-radius: 3px;
  background: var(--gold-600);
}

.resume {
  margin: 1rem 0 0;
  padding: 0.95rem 1rem;
  border-color: var(--gold-400);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.resume strong { font-family: var(--font-display); color: var(--color-accent); font-size: 1.05rem; }

.modes { display: grid; gap: 0.72rem; }

.mode,
.modes .mode {
  position: relative;
  display: grid;
  grid-template-columns: 5.15rem minmax(0, 1fr) 1.7rem;
  align-items: stretch;
  gap: 0;
  min-height: 7.8rem;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.mode:hover {
  border-color: var(--gold-500);
  transform: translateY(-1px);
  box-shadow: 0 3px 5px hsl(210 35% 18% / 0.08), 0 14px 34px hsl(210 35% 18% / 0.09);
}

.mode:focus-visible,
.primary-start:focus-visible,
nav button:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}

.mode.featured { border-color: var(--gold-500); }

.mode-visual {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
  background: var(--color-header);
}

.mode-visual > .material-symbols-rounded {
  inline-size: 3.35rem;
  block-size: 3.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-200);
  border-radius: var(--radius-full);
  background: hsl(42 55% 96%);
  color: var(--color-accent);
  font-size: 1.85rem;
}

.mode .body {
  position: static;
  align-self: center;
  padding: 1rem 0.75rem 0.9rem 0.95rem;
}

.mode .body strong {
  margin-bottom: 0.28rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-accent);
}

.mode .body > span:not(.recommendation) {
  font-size: 0.86rem;
  line-height: 1.48;
  color: var(--color-muted);
}

.recommendation {
  position: absolute;
  inset-block-start: -0.65rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  display: inline-flex !important;
  max-width: calc(100% - 6.5rem);
  padding: 0.26rem 0.55rem;
  border-radius: 0.45rem;
  background: var(--gold-500);
  color: hsl(210 54% 15%) !important;
  font-size: 0.67rem !important;
  font-weight: 700;
  line-height: 1.25 !important;
  text-align: center;
  box-shadow: 0 3px 10px hsl(40 58% 30% / 0.18);
}

.mode-arrow {
  align-self: center;
  color: var(--color-accent);
  font-size: 1.85rem;
}

.featured .mode-arrow { color: var(--gold-600); }

.primary-start {
  width: 100%;
  min-height: 4.2rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-header);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.primary-start .material-symbols-rounded:first-child { color: var(--gold-400); }
.primary-start .material-symbols-rounded:last-child { justify-self: end; color: var(--gold-400); }
.primary-start:hover { background: var(--color-accent-hover); }

.new-here {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 0.5rem 0.9rem;
  color: var(--color-muted);
}

.new-here > .material-symbols-rounded {
  flex: none;
  inline-size: 2.45rem;
  block-size: 2.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-full);
  color: var(--gold-600);
}

.new-here p { margin: 0.08rem 0 0; font-size: 0.88rem; line-height: 1.55; }
.new-here strong { color: var(--color-text); }

#bank-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1rem;
  overflow: hidden;
  border: 1px solid hsl(40 32% 82%);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

#bank-tiles .tile {
  min-width: 0;
  padding: 0.9rem 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#bank-tiles .tile + .tile { border-inline-start: 1px solid hsl(40 24% 83%); }
#bank-tiles .tile-icon { color: var(--gold-600); font-size: 1.5rem; }
#bank-tiles .tile .n { margin-top: 0.15rem; font-family: var(--font-display); font-size: 1.75rem; color: var(--color-accent); }
#bank-tiles .tile .l { display: block; margin-top: 0.1rem; font-size: 0.68rem; line-height: 1.25; }

nav {
  min-height: 4.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.38rem 0 calc(0.35rem + var(--safe-bottom));
  border-top: 1px solid hsl(40 58% 51% / 0.35);
  background: var(--color-header);
  box-shadow: 0 -8px 24px hsl(210 54% 15% / 0.08);
}

nav button {
  min-width: 0;
  min-height: 3.8rem;
  padding: 0.25rem 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: hsl(210 14% 76%);
  font-size: 0.72rem;
}

nav button > .material-symbols-rounded { font-size: 1.55rem; }

nav button[aria-selected='true'] {
  color: var(--gold-400);
  box-shadow: inset 0 -3px 0 var(--gold-500);
}

nav .badge {
  position: absolute;
  transform: translate(1.05rem, -1rem);
  margin: 0;
}

.card,
.attempt,
.focus,
.q,
details.note,
.scard { border-radius: var(--radius); }

button.btn,
.btn,
select,
input[type='number'],
input[type='text'],
input[type='password'],
textarea { min-height: 2.75rem; }

.runner-bar { padding-block: calc(0.7rem + var(--safe-top)) 0.7rem; }
.runner-foot { min-height: 4rem; }
.q { padding: 1rem; }
.opt { min-height: 3.25rem; padding: 0.72rem 0.78rem; }

footer { padding-bottom: calc(1.25rem + 4.7rem + var(--safe-bottom)); }

@media (max-width: 24rem) {
  header { gap: 0.5rem; padding-inline: 0.7rem; }
  header img { height: 2.65rem; }
  header h1 { font-size: 0.95rem; }
  header .sub { display: none; }
  .theme-toggle { min-width: 2.45rem; min-height: 2.45rem; }
  main { padding-inline: 0.72rem; }
  .mode, .modes .mode { grid-template-columns: 4.35rem minmax(0, 1fr) 1.35rem; }
  .mode-visual > .material-symbols-rounded { inline-size: 2.9rem; block-size: 2.9rem; font-size: 1.6rem; }
  .mode .body { padding-inline: 0.72rem 0.45rem; }
  .mode .body strong { font-size: 1.08rem; }
}

@media (max-width: 40rem) {
  .home-intro h2 {
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -0.03em;
  }

  .home-lead { margin-bottom: 1rem; }

  .mode,
  .modes .mode {
    min-height: 6.6rem;
  }

  .mode .body { padding-block: 0.8rem 0.72rem; }
}

/* اللابتوب: شريط أفقي، مساحة محتوى حقيقية، وهيرمية تحتفظ بأولوية التشخيص. */
@media (min-width: 64rem) {
  body { padding-bottom: 0; }

  header {
    min-height: 5.7rem;
    padding: calc(1rem + var(--safe-top)) max(2rem, calc((100vw - 74rem) / 2)) 1rem;
  }

  header img { height: 3.65rem; }
  header h1 { font-size: 1.5rem; }
  header .sub { font-size: 0.75rem; }

  .theme-toggle { min-width: auto; padding-inline: 0.8rem; }
  .theme-toggle .button-label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; }

  nav {
    position: fixed;
    inset-inline: 0;
    top: var(--header-h, 5.7rem);
    bottom: auto;
    inline-size: 100%;
    min-height: 4.65rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 5px 18px hsl(210 35% 18% / 0.05);
    z-index: 19;
  }

  nav button {
    min-width: 10rem;
    min-height: 4.65rem;
    padding: 0.8rem 1.25rem;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-muted);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0;
  }

  nav button > .material-symbols-rounded { font-size: 1.9rem; }

  nav button[aria-selected='true'] {
    color: var(--color-accent);
    font-weight: 700;
    background: transparent;
    box-shadow: inset 0 -4px 0 var(--gold-500);
  }

  nav .badge {
    position: static;
    transform: none;
    min-width: 1.35rem;
    margin-inline-start: 0.05rem;
    padding-inline: 0.36rem;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  main {
    max-width: 74rem;
    margin-inline: auto;
    padding: 7rem 2rem 3.5rem;
  }

  footer { margin-inline-start: 0; padding-bottom: 1.6rem; }

  .home-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .home-lead > .home-intro { grid-column: 1 / -1; }
  .home-lead:has(.resume:not([hidden])) > .home-intro { grid-column: auto; }

  .home-intro .eyebrow { font-size: 2rem; }
  .home-intro h2 { max-width: 48rem; font-size: 3rem; }
  .home-intro p { font-size: 1.1rem; }
  .home-intro .gold-rule { inline-size: 5.2rem; margin-top: 1rem; }
  .home-lead .resume { margin: 0; }

  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .mode.featured { grid-column: 1 / -1; min-height: 10rem; }
  .mode, .modes .mode { grid-template-columns: 7.5rem minmax(0, 1fr) 2.25rem; min-height: 9.3rem; }
  .mode.featured .body strong { font-size: 1.75rem; }
  .mode .body { padding: 1.35rem 1.25rem; }
  .mode .body strong { font-size: 1.4rem; }
  .mode .body > span:not(.recommendation) { max-width: 42rem; font-size: 0.98rem; }
  .mode-visual > .material-symbols-rounded { inline-size: 4.4rem; block-size: 4.4rem; font-size: 2.35rem; }
  .recommendation { inset-block-start: 1rem; inset-inline-end: 1rem; max-width: 18rem; font-size: 0.75rem !important; }

  .primary-start { max-width: 34rem; min-height: 4.65rem; margin: 1.3rem auto 0; font-size: 1.4rem; }
  .new-here { justify-content: center; align-items: center; padding-block: 1.3rem; }
  .new-here p { font-size: 0.95rem; }

  #bank-tiles { max-width: 52rem; margin: 0 auto 1rem; }
  #bank-tiles .tile { padding: 1.15rem 0.7rem; }
  #bank-tiles .tile .n { font-size: 2.25rem; }
  #bank-tiles .tile .l { font-size: 0.76rem; }

  .runner-body > .inner { max-width: 58rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Study Journey · الوضع الليلي

   نظامٌ لوني واحد: كحلي عميق للأسطح، كريمي للنص، وذهبي للحالة النشطة.
   لا تحمل بطاقات الملخص ألوان الوضع الفاتح، ولا يرث الزر الداكن نصاً داكناً.
   ═══════════════════════════════════════════════════════════════════ */

html.theme-dark {
  --color-bg: hsl(210 48% 9%);
  --color-surface: hsl(210 38% 14%);
  --color-raised: hsl(210 30% 20%);
  --color-border: hsl(210 20% 32%);
  --color-text: hsl(42 28% 93%);
  --color-muted: hsl(210 12% 69%);
  --color-accent: hsl(40 46% 70%);
  --color-accent-hover: hsl(40 50% 78%);
  --color-on-accent: hsl(210 48% 10%);
  --color-header: hsl(210 48% 16%);
  --color-highlight: hsl(40 58% 58%);
  --color-correct: hsl(158 42% 64%);
  --color-wrong: hsl(4 60% 70%);
  --color-partial: hsl(38 58% 68%);
  --shadow-card: 0 1px 2px hsl(210 60% 4% / 0.42), 0 12px 30px hsl(210 60% 4% / 0.3);
}

html.theme-dark header {
  box-shadow: 0 1px 0 hsl(40 58% 58% / 0.3);
}

#theme-toggle .material-symbols-rounded {
  transition: color 160ms var(--ease), transform 160ms var(--ease);
}

#theme-toggle[data-theme-mode='light'] .material-symbols-rounded { color: hsl(40 68% 72%); }
#theme-toggle[data-theme-mode='dark'] .material-symbols-rounded { color: var(--gold-400); }
#theme-toggle[data-theme-mode='system'] .material-symbols-rounded { color: inherit; }

html.theme-dark #theme-toggle {
  border-color: hsl(40 55% 64% / 0.55);
  background: hsl(40 50% 60% / 0.1);
}

html.theme-dark .home-intro .eyebrow,
html.theme-dark .home-intro h2,
html.theme-dark .mode .body strong,
html.theme-dark .resume strong,
html.theme-dark #bank-tiles .tile .n {
  color: var(--color-text);
}

html.theme-dark .mode,
html.theme-dark .modes .mode {
  border-color: var(--color-border);
  background: var(--color-surface);
}

html.theme-dark .mode.featured { border-color: var(--gold-500); }

html.theme-dark .mode-visual {
  background: hsl(210 48% 11%);
}

html.theme-dark .mode-visual > .material-symbols-rounded {
  border-color: hsl(40 55% 64% / 0.62);
  background: hsl(210 34% 18%);
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1px hsl(40 55% 64% / 0.08);
}

html.theme-dark .mode-arrow,
html.theme-dark .featured .mode-arrow,
html.theme-dark #bank-tiles .tile-icon {
  color: var(--gold-400);
}

html.theme-dark .primary-start {
  border-color: var(--gold-500);
  background: hsl(210 46% 22%);
  color: hsl(42 32% 95%);
}

html.theme-dark .primary-start:hover { background: hsl(210 42% 27%); }

html.theme-dark .new-here > .material-symbols-rounded {
  border-color: var(--gold-400);
  color: var(--gold-400);
}

html.theme-dark #bank-tiles {
  border-color: hsl(40 38% 56% / 0.55);
  background: var(--color-surface);
}

html.theme-dark #bank-tiles .tile + .tile {
  border-inline-start-color: hsl(40 28% 58% / 0.42);
}

html.theme-dark nav {
  border-color: hsl(40 48% 55% / 0.35);
  background: var(--color-header);
  box-shadow: 0 -8px 24px hsl(210 60% 4% / 0.25);
}

html.theme-dark nav button { color: hsl(210 12% 70%); }
html.theme-dark nav button[aria-selected='true'] { color: var(--gold-400); }

/* الملخصات والجداول كانت تحمل خلفية `blue-50` الفاتحة مع نص الوضع الداكن. */
html.theme-dark .scard > summary:hover,
html.theme-dark .chunk,
html.theme-dark table.study thead th {
  background: var(--color-raised);
}

html.theme-dark .chunk,
html.theme-dark .chunk h5,
html.theme-dark .chunk li,
html.theme-dark table.study th,
html.theme-dark table.study td {
  color: var(--color-text);
}

html.theme-dark table.study th[scope='row'] {
  background: var(--color-surface);
  color: var(--color-accent);
}

html.theme-dark .sug-state.ok {
  background: hsl(158 36% 22%);
  color: hsl(158 42% 78%);
}

html.theme-dark .sug-state.warn {
  background: hsl(38 40% 22%);
  color: hsl(38 55% 78%);
}

@media (min-width: 64rem) {
  html.theme-dark nav {
    background: var(--color-surface);
    box-shadow: 0 5px 18px hsl(210 60% 4% / 0.24);
  }
}

/* حاشيةُ المصدر المعيب: تُميَّز بحدٍّ جانبيٍّ لا بلونٍ جديد، فتُقرأ
   ملاحظةً لا متناً، ولا تُخرِج البطاقةَ عن لغتها. */
.scard .sec.srcnote { border-inline-start: 3px solid var(--rule, #c9b37e); }
.scard .sec.srcnote > h4 { opacity: .95; }
.scard .sec.srcnote figure { margin: .6rem 0 0; }
.scard .sec.srcnote figcaption { font-size: .78rem; opacity: .7; }

/* الاشتراك: بلغة البطاقات القائمة، بلا ألوانٍ جديدة */
.plan-price{font-size:1.5rem;margin:.2rem 0 .8rem}
.plan-price b{font-family:var(--serif,Georgia,serif)}
.plan-list{margin:0 0 1.1rem;padding-inline-start:1.1rem;line-height:1.75}
.plan-list li{margin:.15rem 0}
/* شريطُ القفل: يُقال ولا يُخفى — من رأى المنهجَ وعرف أنه مقفلٌ اشترك */
/* شريطُ قربِ الانتهاء — نبرةٌ تُخبر ولا تُفزع: لا أحمرَ ولا صياح،
   فالمشتركةُ لم تُخطئ شيئاً حتى تُنذَر. واليومُ الأخيرُ وحده يشتدّ. */
.expiry-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  border:1px solid var(--rule,#c9b37e);border-radius:12px;
  padding:.75rem 1rem;margin:0 0 1.2rem;
  font-size:.9rem;line-height:1.5}
.expiry-bar .eb-text{flex:1 1 18rem}
.expiry-bar .eb-text b{font-weight:700}
.expiry-bar .eb-go{flex:0 0 auto;font:inherit;font-weight:700;cursor:pointer;
  border:1px solid currentColor;border-radius:999px;background:none;
  color:inherit;padding:.3rem .9rem}
.expiry-bar .eb-hide{flex:0 0 auto;font:inherit;cursor:pointer;border:0;
  background:none;color:inherit;opacity:.6;padding:.3rem .4rem;
  text-decoration:underline;font-size:.82rem}
.expiry-bar.is-last{border-width:2px}

.locked-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  border:1px solid var(--rule,#c9b37e);border-radius:12px;
  padding:.75rem 1rem;margin:0 0 1.2rem}
.locked-bar .lb-text{flex:1 1 16rem;font-size:.92rem}
.locked-bar .lb-text b{display:block}
.mode.is-locked{opacity:.62}
.mode.is-locked .mode-arrow{visibility:hidden}
.mode .body .lock-chip, .mode .lock-chip{display:inline-block !important;width:auto;align-self:flex-start;
  margin:.15rem 0 .1rem;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  border:1px solid currentColor;border-radius:999px;padding:.02rem .5rem;opacity:.75}


/* دوّارُ انتظارِ صورةِ الصفحة — انتظارٌ فارغٌ يُقرأ عطباً، فيُقال إنه انتظار. */
#src-image { position: relative; min-height: 8rem; }
#src-image .page-wait { display: none; }
#src-image.is-loading .page-wait {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 2.4rem 1rem; color: var(--color-muted, #63798a); font-size: .9rem;
}
#src-image.is-loading img { display: none; }
/* **الانتظارُ يلبس الشعارَ لا دائرةً عامّة.** `loader.svg` ملفٌّ واحدٌ
   يحرّك نفسَه بلا جافاسكربت، فيظهر في اللحظة التي لم يُحمَّل فيها شيء. */
#src-image .spin {
  inline-size: 2.4rem; block-size: 2.4rem; border: 0; border-radius: 0;
  background: url('/loader.svg') center / contain no-repeat;
  animation: none;
  --unused-spin: src-spin;
}
@keyframes src-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #src-image .spin { animation-duration: 2.4s; }
}

/* فاصلُ خلايا الجدول داخل الاقتباس — ق-٧٩ */
.cell-sep {
  display: inline-block;
  margin: 0 0.45em;
  color: var(--color-muted);
  opacity: 0.45;
  font-weight: 400;
}

/* الفجوة: موضوعٌ يسأل عنه الاختبارُ ولا تحمله الملفّات */
.nosum.gap { border-inline-start: 3px solid var(--color-gold, #b9902f); }
.nosum.gap strong { color: var(--color-gold, #b9902f); }

/* **اسمُ الأيقونة لا يُقرأ حرفاً قبل وصول الخطّ.**
   رموزُ الواجهة ربائطُ نصّية (`explore` · `menu_book`)، فقبل وصول
   `Material Symbols` يعرضها المتصفّحُ بخطٍّ احتياطيّ — أي **كلماتٍ
   إنجليزيةً تفيض عن حاوياتها**. رآها المديرُ بعينه في أوّل تحميل.
   و`display=block` في رابط الخطّ يُخفي النصَّ بدل أن يستبدله، وهذا
   يسدّ مدّةَ الحجب؛ وما بعدها (شبكةٌ تحجب جوجل) يسدّه العرضُ الشفّاف
   حتى يُعلن `fonts.ready` وصولَ الخطّ. */
.material-symbols-rounded { visibility: hidden; }
html.fonts-ready .material-symbols-rounded,
html.fonts-failed .material-symbols-rounded { visibility: visible; }

/* بابُ السؤال إلى ملخّصه — يُفتح في مكانه ولا يُخرج القارئة من الاختبار */
.cardslot { margin-top: .6rem; }
.cardslot .scard { border-radius: 10px; }

/* بابُ العتبة في بطاقة المذاكرة — يُرى ولا يصرخ. */
.sec.cutoff > h4 { color: var(--color-partial); }
.sec.cutoff .conflict-box { margin-top: 0.4rem; }

/* **حكمُ التعارض في بطاقة المذاكرة** — تحت الملخّص الذي عرض القولين.
   لونُه لونُ الحكم في الشارة، فتُعرف بطاقةُ الحكم أينما رُئيت. */
.sec.ruling > h4 { color: var(--color-accent); }
.sec.ruling .ruling-intro { color: var(--color-muted); font-size: var(--text-sm); }
.sec.ruling .conflict-box { margin-top: 0.5rem; }
.ruling-why { margin-top: 0.4rem; }
.ruling-why > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--gold-600);
  font-weight: 600;
  padding: 0.2rem 0;
}
.ruling-why > summary::-webkit-details-marker { display: none; }
.ruling-why > summary::before {
  content: "▸";
  display: inline-block;
  margin-inline-end: 0.4rem;
  transition: transform 140ms var(--ease);
}
.ruling-why[open] > summary::before { transform: rotate(90deg); }

/* عنوانُ العتبة في الكشف — يُرى ولا يصرخ، ولا يُشبه عنوانَ الخطأ. */
.reveal h4.cut { color: var(--color-partial); }

/* **زرّان متلاصقان في الهاتف.** بابُ الملخّص فوق «أين تقرأ» في صفحة
   الأخطاء، وكلاهما مقطَّعُ الحدّ — فيبدوان كتلةً واحدةً على الشاشة
   الضيّقة (المشرف ٢٠٢٦-٠٩-٠٧). فيُفصل بينهما فصلاً يُرى ولا يُباعد. */
.focus.miss > .cardbtn { margin-top: 0.55rem; }
.focus.miss > .cardbtn + .cardslot:not([hidden]) { margin-top: 0.5rem; }
.focus.miss > .wheretoread { margin-top: 0.55rem; }

/* **نافذةُ الخبر** — تُقرأ مرّةً ثمّ تُغلق، فلا تُزاحم المحتوى بل تعلوه. */
.newswrap {
  position: fixed; inset: 0; z-index: 60;
  background: hsl(210 30% 6% / 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
.newsbox {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem 1.3rem;
  max-width: 34rem; width: 100%;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 48px hsl(210 40% 4% / 0.5);
}
.newsbox h3 { margin: 0 0 0.5rem; font-size: var(--text-lg); }
.newsbox h4 {
  margin: 1rem 0 0.35rem; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-accent);
}
.newsbox .lead { color: var(--color-muted); margin: 0 0 0.4rem; }
.newsbox ul { margin: 0; padding-inline-start: 1.1rem; }
.newsbox li { margin: 0.35rem 0; line-height: 1.55; }
.newsbox .primary { margin-top: 1.1rem; width: 100%; }

/* ── صفحتا الخصوصية والشروط ──
   **لا نظامَ تصميمٍ ثانٍ** (كقاعدة صفحة اللجنة): الترويسةُ والعناوينُ
   والفقرةُ والرابطُ كلُّها من هذه الورقة بأسمائها، ومن `main` عرضُها
   ومن `theme-boot.js` ثيمُها. وما هنا **ما ينقصها وحدَه**: جدولُ
   «ما نحفظه» وسطرُ الملخّص العربيّ. */
/* **وعمودُ القراءة**: القسمان متنٌ متّصلٌ طويل، وصفحةُ التطبيق عريضةٌ
   على المكتب (٧٤rem) لأنها تعرض بطاقاتٍ متجاورة. فيُقصر المتنُ وحدَه
   على عرضٍ يُقرأ فيه السطر، ويبقى القسمُ داخلَ المنصّة كما هو. */
#tab-privacy > *, #tab-terms > * { max-width: 46rem; }

.legaltable {
  width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.9rem;
  font-size: var(--text-sm);
}
.legaltable th, .legaltable td {
  text-align: start; vertical-align: top; padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--color-border); font-weight: inherit;
}
.legaltable th {
  white-space: nowrap; color: var(--color-muted); width: 10.5rem;
}
@media (max-width: 34rem) {
  .legaltable th, .legaltable td { display: block; width: auto; }
  .legaltable th { padding-bottom: 0.15rem; }
  .legaltable td { padding-top: 0; border-top: 0; }
}
/* الفقرةُ العربيةُ ملخّصٌ لا ترجمةٌ كاملة، فتُميَّز بخطّها ولونٍ أهدأ */
.ar { font-family: var(--font-ar); color: var(--color-muted); }
.legalfoot { margin-top: 1.8rem; padding-top: 0.9rem;
  border-top: 1px solid var(--color-border); }

/* ── البريدُ المباشر في قسم التواصل ──
   أيقونةٌ مرسومةٌ بالمسار لا صورةٌ ولا خطُّ أيقونات: لا طلبَ شبكةٍ زائد،
   وتأخذ لونَ النصّ فتتبع الثيمَ الفاتحَ والداكن بلا تكرار. */
.reachus { margin: 1.1rem 0 0; }
.reach {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface);
  color: var(--color-text); text-decoration: none;
  font-size: var(--text-sm); transition: border-color 0.15s var(--ease),
                                        color 0.15s var(--ease);
}
.reach:hover { border-color: var(--color-accent); color: var(--color-accent); }
.reach svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ── باقاتُ الاشتراك الثلاث (ق-١٠٠) ──
   بهويّةِ الصفحة الرئيسية نفسِها: بطاقاتٌ متساويةٌ، والمقصودةُ بالبيع
   تُميَّز بالذهب لا بالحجم، والسعرُ يُملأ من الخادم فالشرطةُ ما يبقى. */
.plan-tiers {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.plan-tiers li {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); padding: 0.7rem 0.4rem; text-align: center;
}
.plan-tiers li[data-tier='term'] { border-color: var(--gold-500); }
.plan-tiers .nm {
  display: block; font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-muted);
}
.plan-tiers .amt {
  display: block; font-family: var(--font-display); font-size: 1.15rem;
  color: var(--color-accent); margin-top: 0.15rem; font-variant-numeric: tabular-nums;
}
.plan-tiers li[data-tier='term'] .amt { color: var(--gold-600); }
html.theme-dark .plan-tiers li[data-tier='term'] .amt { color: var(--gold-400); }
.plan-tiers .sp { display: block; font-size: 0.66rem; color: var(--color-muted); }