/* OMSB Selection Exam — صفحاتُ المنهج العامّة.
 *
 * **تلبس المنصّةَ ولا تجاورها.** بُنيت أوّلَ مرّةٍ بألوانٍ وخطوطٍ من
 * عندها، فخرجت «كأنها صفحةُ RSS» (حكمُ المشرف ٢٠٢٦-٠٩-٢٢): ورقٌ أبيضُ
 * وخطُّ نظامٍ وقوائمُ عارية. والرموزُ هنا هي رموزُ `landing.css` بقيمها
 * نفسِها من `docs/design-tokens.md`، والخطوطُ ملفّاتُها نفسُها تحت
 * `/fonts/` — فالزائرُ الآتي من الصفحة الرئيسة لا يشعر أنّه غادرها.
 *
 * **والسمةُ تتبع `theme-boot.js`**: يضع `.theme-dark`/`.theme-light` على
 * الجذر قبل الرسم، فلا تومض الصفحةُ بيضاءَ قبل الداكن.
 */

: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-400: hsl(206 42% 62%);
  --blue-200: hsl(205 38% 82%);
  --blue-100: hsl(205 36% 91%);
  --gold-600: hsl(40 48% 44%);
  --gold-500: hsl(40 48% 52%);
  --gold-400: hsl(40 46% 65%);
  --bg: #FCFBF7;
  --surface: hsl(0 0% 100%);
  --border: var(--blue-200);
  --text: var(--blue-950);
  --muted: hsl(206 16% 42%);
  --accent: var(--blue-700);
  --on-accent: hsl(205 40% 97%);
  --nav-bg: rgb(252 251 247 / 0.86);
  --radius: 0.625rem;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --gutter: clamp(1rem, 5vw, 3rem);
}

.theme-dark {
  --bg: #101C25;
  --surface: hsl(208 34% 14%);
  --border: hsl(208 28% 26%);
  --text: hsl(205 36% 93%);
  --muted: hsl(205 20% 68%);
  --accent: var(--blue-400);
  --on-accent: var(--blue-950);
  --nav-bg: rgb(16 28 37 / 0.86);
}

/* الخطوطُ مستضافةٌ عندنا — ملفّاتُ `landing.css` نفسُها. */
@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');
}
@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');
}
@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');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

/* ── الشريطُ العلويّ — كشريط الصفحة الرئيسة ── */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem var(--gutter);
  background: var(--nav-bg); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
}
.brand img { display: block; }
.signin {
  color: var(--accent); text-decoration: none;
  font-weight: 600; font-size: 0.87rem;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.38rem 1rem; transition: border-color .15s, color .15s;
}
.signin:hover { border-color: var(--gold-500); color: var(--gold-600); }

/* ── المتن ── */
.wrap { max-width: 46rem; margin: 0 auto; padding: 2.6rem var(--gutter) 3.5rem; }

.cat {
  margin: 0 0 0.7rem; font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-600);
}
.cat a { color: var(--muted); text-decoration: none; }
.cat a:hover { color: var(--gold-600); }

h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.5rem); line-height: 1.18;
  margin: 0 0 1.5rem; letter-spacing: -0.015em; color: var(--text);
}

.lede {
  color: var(--muted); margin: 0 0 2.6rem; font-size: 1.02rem;
  max-width: 38rem;
}

/* ── أقسامُ الموضوع ── */
.sec { margin: 0 0 2rem; }
.sec h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; margin: 0 0 0.6rem; color: var(--gold-600);
  letter-spacing: -0.005em;
}
.sec p {
  margin: 0 0 0.9rem;
  /* **ولا محاذاةَ طرفين.** جُرّبت ٢٠٢٦-٠٩-٢٢ فرُدّت في يومها: الإنجليزيّةُ
     كلماتُها متفاوتةُ الطول، فالمحاذاةُ تفتح فجواتٍ بين الكلمات أو تقطع
     الكلمةَ بشرطة — وكلاهما أبطأُ في القراءة من طرفٍ حرٍّ. والعربيّةُ
     تُحاذى بالتمطيط فتحسُن، ولا يقيس أحدُهما على الآخر. */
}

/* قوائمُ المتن — رُبعُ الأقسام فيها قوائمُ كانت تنهار في فقرة */
.note-list {
  margin: 0 0 1rem; padding: 0; list-style: none;
  display: grid; gap: 0.4rem;
}
.note-list li {
  position: relative; padding-inline-start: 1.2rem; text-align: start;
}
.note-list li::before {
  content: ''; position: absolute; inset-inline-start: 0.1rem; top: 0.66em;
  width: 0.36rem; height: 0.36rem; border-radius: 50%;
  background: var(--gold-500);
}
ol.note-list { counter-reset: n; }
ol.note-list li::before {
  counter-increment: n; content: counter(n) '.';
  background: none; width: auto; height: auto; top: 0;
  inset-inline-start: 0; color: var(--gold-600); font-weight: 600;
  font-size: 0.88em;
}

/* ── ما خلف الدخول ── */
.locked {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 2.6rem 0 0;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgb(16 28 37 / 0.04), 0 8px 24px rgb(16 28 37 / 0.05);
}
.locked::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
}
.locked h2 {
  font-family: var(--font-display); font-size: 1.05rem;
  margin: 0 0 0.8rem; color: var(--text);
}
.locked ul {
  margin: 0 0 1rem; padding: 0; list-style: none;
  display: grid; gap: 0.35rem;
}
.locked li {
  color: var(--muted); font-size: 0.93rem;
  padding-inline-start: 1.1rem; position: relative;
}
.locked li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 0.34rem; height: 0.34rem; border-radius: 50%;
  background: var(--gold-500);
}
.locked .note { font-size: 0.89rem; color: var(--muted); margin: 0 0 1.1rem; }
.cta {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 0.62rem 1.4rem; border-radius: var(--radius);
  transition: transform .15s, filter .15s;
}
.cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ── إخوةُ الموضوع ── */
.sibs { margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.sibs h2 {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; margin: 0 0 0.9rem; color: var(--muted);
}
.sibs ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.45rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.sibs a {
  color: var(--text); text-decoration: none; font-size: 0.92rem;
  display: inline-flex; gap: 0.45rem;
}
.sibs a::before { content: '\2192'; color: var(--gold-500); flex: none; }
.sibs a:hover { color: var(--gold-600); }

/* ── فهرسُ المنهج ── */
.cat-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 0 0 1rem;
  box-shadow: 0 1px 2px rgb(16 28 37 / 0.03);
}
.cat-head {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.12rem; margin: 0 0 0.9rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.cat-name { color: var(--gold-600); }
.cat-head::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
  order: 2;
}
.cat-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.15rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.cat-list a {
  display: block; color: var(--text); text-decoration: none;
  font-size: 0.92rem; line-height: 1.5;
  padding: 0.3rem 0.5rem; margin-inline-start: -0.5rem;
  border-radius: 0.35rem; transition: background .12s, color .12s;
}
.cat-list a:hover { background: var(--blue-100); color: var(--accent); }
.theme-dark .cat-list a:hover { background: hsl(208 34% 20%); }

/* ── الذيل ── */
.foot {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  justify-content: space-between;
  max-width: 46rem; margin: 0 auto;
  padding: 1.5rem var(--gutter) 2.6rem;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.84rem;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--gold-600); }

/* عددُ مواضيع الفئة — رقمٌ هادئٌ بجانب العنوان لا عنوانٌ ثانٍ */
.cat-n {
  order: 3; flex: none;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.1rem 0.55rem; letter-spacing: 0.02em;
}

/* ── شريطُ القفز إلى الفئات — مطويّ ── */
.jump {
  margin: 0 0 2.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.jump summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.jump summary::-webkit-details-marker { display: none; }
.jump summary::after {
  content: ''; margin-inline-start: auto; flex: none;
  width: 0.5rem; height: 0.5rem;
  border-inline-end: 2px solid var(--muted); border-block-end: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.jump[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.jump[open] summary { border-block-end: 1px solid var(--border); }
.jump-n {
  font-size: 0.74rem; font-weight: 600; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.08rem 0.5rem;
}
.jump ul {
  margin: 0; padding: 0.9rem 1.1rem 1.1rem; list-style: none;
  display: grid; gap: 0.35rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.jump a {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.88rem; text-decoration: none; color: var(--text);
  padding: 0.28rem 0.5rem; margin-inline-start: -0.5rem;
  border-radius: 0.35rem; transition: background .12s, color .12s;
}
.jump a:hover { background: var(--blue-100); color: var(--accent); }
.theme-dark .jump a:hover { background: hsl(208 34% 20%); }
/* **مسافةٌ بين الاسم والرقم** — كانا ملتصقين: «Hypertension82» */
.jump-c {
  margin-inline-start: auto; flex: none;
  font-size: 0.75rem; font-weight: 600; color: var(--muted);
}

/* البطاقةُ تُبرز نفسَها حين يُقفَز إليها */
.cat-block:target { border-color: var(--gold-500); }
.cat-block { scroll-margin-top: 4.5rem; }

/* ── أين تجدنا — صفُّ الذيل ── */
.reach { display: inline-flex; align-items: center; gap: 0.15rem; }
.reach a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  color: var(--muted); transition: color .15s, background .15s;
}
.reach a:hover { color: var(--gold-600); background: var(--surface); }
.reach svg { width: 1.05rem; height: 1.05rem; display: block; }