/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Science & Cases
   تنسيقات صفحتَي الأساس العلمي والأعمال.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ الملخّص ════════════════════════════════════════════════════════════ */
.abstract-section{ padding-block:70px; border-bottom:1px solid var(--line); }
.abstract{ max-width:780px; }
.abstract .lbl{ font-size:10px; letter-spacing:.14em; color:var(--violet); margin-bottom:14px; }
.abstract > p:not(.lbl){ font-size:16px; line-height:2.05; color:#2a2a2a; text-wrap:pretty; }
.keywords{ margin-top:22px; display:flex; gap:9px; flex-wrap:wrap; }
.keywords li{ font-size:10px; border:1px solid var(--line); padding:6px 12px; color:var(--grey); }

/* ═══ أقسام النماذج ══════════════════════════════════════════════════════ */
.figure-section{ padding-block:var(--space-section); border-bottom:1px solid var(--line); }
.figure-section.is-alt{ background:var(--paper-dim); }
.fig-tag{ font-size:11px; letter-spacing:.1em; color:var(--violet); }
.fig-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(23px,3.2vw,34px); margin-top:12px; max-width:22ch; line-height:1.4;
}
.fig-title .hl{ color:var(--violet); }

.fig-stage{
  margin-block:44px; background:var(--white); border:1px solid var(--line);
  padding:46px 30px; display:flex; align-items:center; justify-content:center; min-height:220px;
}
.fig-body{ max-width:740px; }
.fig-name{ font-family:var(--font-en); direction:ltr; font-weight:600; font-size:19px; color:var(--violet-deep); }
.fig-body > p{ margin-top:14px; font-size:15.5px; line-height:2.05; color:#2a2a2a; text-wrap:pretty; }
.fig-cite{
  margin-top:20px !important; font-size:11px; color:var(--violet-deep);
  background:var(--violet-soft); display:inline-block; padding:8px 15px;
}
.apply-box{
  margin-top:24px; border-inline-start:3px solid var(--violet);
  padding:18px 22px; background:var(--paper-dim);
}
.figure-section.is-alt .apply-box{ background:var(--white); }
.apply-box .mono{ font-size:10px; letter-spacing:.1em; color:var(--violet); }
.apply-box p:not(.mono){ margin-top:8px; font-size:14px; line-height:1.95; color:#2a2a2a; }
.fig-link{
  display:inline-flex; gap:8px; margin-top:22px; color:var(--violet);
  font-size:14.5px; font-weight:500; transition:gap var(--dur-fast) var(--ease);
}
.fig-link:hover{ gap:13px; }
.viz-caption{ margin-top:18px; font-size:10px; color:var(--grey); text-align:center; }

/* ── SWOT ───────────────────────────────────────────────────────────────── */
.viz-swot{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(100%,380px); }
.swot-cell{
  border:1px solid var(--line); padding:18px 14px; text-align:center;
  transition:border-color var(--dur-fast) ease;
}
.swot-cell:hover{ border-color:var(--violet); }
.swot-letter{ font-size:19px; color:var(--violet); }
.swot-cell b{ display:block; margin-top:8px; font-size:12.5px; }
.swot-cell span:last-child{ display:block; margin-top:3px; font-size:11px; color:var(--grey); }

/* ── BANT ───────────────────────────────────────────────────────────────── */
.viz-bant{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%; }
.bant-step{
  flex:1; min-width:120px; border:1px solid var(--line); padding:18px 14px; text-align:center;
  transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.bant-step:hover{ border-color:var(--violet); transform:translateY(-3px); }
.bant-letter{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--violet); color:#fff; font-size:13px;
}
.bant-step b{ display:block; margin-top:10px; font-size:13px; }
.bant-q{ display:block; margin-top:5px; font-size:11.5px; color:var(--grey); }

/* ── بيان التموضع ───────────────────────────────────────────────────────── */
/* الفراغ يُرسم فراغًا فعلًا: حدّ متقطّع لا يمتلئ إلّا بقرار. */
.viz-position{
  width:min(100%,420px); display:flex; flex-direction:column; gap:7px;
  list-style:none; margin:0; padding:0;
}
.pos-row{
  display:flex; align-items:center; gap:10px;
  animation:pos-in .4s ease backwards;
  animation-delay:calc(var(--i) * 55ms);
}
.pos-fixed{
  font-size:12.5px; color:var(--grey); min-width:44px; text-align:end; flex:none;
}
.pos-slot{
  flex:1; padding:9px 14px; font-size:12px; color:var(--violet);
  border:1px dashed var(--line); border-radius:2px; background:var(--paper);
  transition:border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.pos-row:hover .pos-slot{ border-color:var(--violet); background:var(--paper-dim); }

@keyframes pos-in{ from{ opacity:0; transform:translateY(6px); } }

@media (prefers-reduced-motion: reduce){
  .pos-row{ animation:none; }
}

/* ── القمع ──────────────────────────────────────────────────────────────── */
/**
 * شبكة واحدة تشترك فيها المراحل كلّها: عمود مرن للأشرطة، وعمود بمقاس
 * أطول عنوان.
 *
 * المشكلة الأصلية أن الشريط كان بعرض ١٠٠٪ من الصفّ والعنوان بجانبه،
 * فيتجاوز مجموعهما الحاوية على كل عرض — لا على الجوّال وحده.
 *
 * ومحاولة إصلاحها بجعل كل صفّ شبكةً مستقلّة أنتجت خطأ أسوأ: العناوين
 * مختلفة الطول، فيختلف عرض المسار بين صفّ وآخر، وتُحسب النسبة في كل
 * صفّ على أساس مغاير — فظهرت ٧٨٪ بمقدار ٨٠٪ و٣٨٪ بمقدار ٤١٪. أشرطة لا
 * تصلح للمقارنة في رسم غرضه المقارنة.
 *
 * الحلّ: الحاوية هي الشبكة، والصفوف «display:contents» فتذوب أطرها
 * وتصطفّ أبناؤها في شبكة واحدة. فيصير أساس النسبة واحدًا للجميع.
 */
.viz-funnel{
  width:min(100%,440px);
  display:grid; grid-template-columns:1fr max-content;
  align-items:center; gap:10px 14px;
}
.funnel-row{ display:contents; }
.funnel-bar{
  height:26px; width:var(--w); border-radius:2px;
  background:linear-gradient(90deg, var(--violet), var(--violet-deep));
}
.funnel-label{ font-size:12px; color:var(--grey); white-space:nowrap; }
.funnel-label b{ color:var(--ink); font-size:12.5px; }

/**
 * على الشاشات الضيّقة يُكدَّس العنوان فوق الشريط.
 *
 * كان الصفّ الواحد: شريط بعرض ١٠٠٪ + فجوة + عنوان لا يلتفّ — أي أعرض
 * من الحاوية دائمًا، فيفيض المستند أفقيًّا وينزاح الموقع كلّه.
 *
 * والحلّ ليس تقليص الأشرطة كي تتّسع: التقليص يوزَّع بحسب العرض الأصلي
 * فتضيق الأشرطة الطويلة أكثر من القصيرة، وتنكسر النسبة بين المراحل.
 * ورسم قمع يكذب في نسبته أسوأ من قمع لا يُعرض.
 */
/* على الجوّال يُكدَّس العنوان فوق شريطه، فتعود الصفوف صناديق مستقلّة. */
@media (max-width:560px){
  /* «align-items:stretch» لازم صراحةً: قاعدة الشبكة أعلاه تضبطه على
     center، ولو بقي كذلك انكمش كل صفّ إلى عرض محتواه فانكسرت النسب. */
  .viz-funnel{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .funnel-row{ display:flex; flex-direction:column; align-items:stretch; gap:5px; }
  .funnel-label{ white-space:normal; order:-1; }
}

/* ── الإسناد ────────────────────────────────────────────────────────────── */
.viz-attr{ width:min(100%,440px); display:flex; flex-direction:column; gap:18px; }
.attr-row{ display:flex; align-items:center; gap:18px; }
.attr-name{ font-size:11.5px; color:var(--grey); min-width:110px; line-height:1.6; }
.attr-name b{ color:var(--ink); font-size:12px; }
.attr-track{ flex:1; display:flex; align-items:center; justify-content:space-between; position:relative; }
.attr-track::before{
  content:''; position:absolute; inset-inline:6px; top:50%; height:1px; background:var(--line);
}
.attr-dot{
  width:13px; height:13px; border-radius:50%; background:var(--paper-dim);
  border:1.5px solid var(--line); position:relative; z-index:1;
}
.attr-dot.is-on{ background:var(--violet); border-color:var(--violet); }

/* ── الماستان + OKR ─────────────────────────────────────────────────────── */
.viz-diamond{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.viz-okr{ width:min(100%,400px); }
.okr-o{
  padding:18px 20px; background:var(--violet); color:#fff; border-radius:2px;
  font-family:var(--font-display); font-weight:700; font-size:16px;
}
.okr-o .mono{
  display:block; font-size:9px; letter-spacing:.14em;
  opacity:.75; margin-bottom:6px; font-weight:400;
}
.okr-krs{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.okr-krs li{
  padding:13px 18px; border:1px solid var(--line); background:var(--paper);
  font-size:13px; color:var(--grey); margin-inline-start:24px;
}
.okr-krs .mono{ display:block; font-size:9.5px; color:var(--violet); margin-bottom:3px; }

/* ═══ سرعة الاستجابة ═════════════════════════════════════════════════════ */
.speed-body{ margin-top:44px; max-width:760px; }
.speed-lede{ font-size:15.5px; line-height:2.05; color:#2a2a2a; }
/* إفصاح صريح عن عدم عرض أرقام غير محقّقة — جزء من التصميم لا حاشية */
.speed-note{
  margin-top:20px; padding:15px 18px; font-size:13px; line-height:1.9;
  border:1px dashed var(--violet); color:var(--violet-deep); background:var(--violet-soft);
}

/* ═══ نماذج الخدمات المساندة ═════════════════════════════════════════════ */
.model-list{ margin-top:50px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.model{
  border:1px solid var(--line-dark); padding:24px 22px;
  transition:border-color var(--dur-fast) ease;
}
.model:hover{ border-color:var(--violet); }
.model-name{ font-weight:600; font-size:16px; color:var(--paper); }
.model-note{ margin-top:9px; font-size:13.5px; line-height:1.85; color:var(--grey-on-dark); }
.model-cite{ margin-top:12px; font-size:10px; color:var(--violet); }
@media (max-width:760px){ .model-list{ grid-template-columns:1fr; } }

/* ═══ الأعمال — الحالة الفارغة ═══════════════════════════════════════════ */
.empty-state{
  max-width:720px; margin-inline:auto; text-align:center;
  padding:56px 30px; border:1px dashed var(--line); background:var(--white);
}
.empty-mark{ display:block; color:var(--violet); opacity:.6; }
.empty-mark svg{ width:74px; margin-inline:auto; }
.empty-title{
  margin-top:24px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(21px,2.8vw,30px); line-height:1.5;
}
.empty-title .hl{ color:var(--violet); }
.empty-body{ margin-top:16px; font-size:15px; line-height:2; color:#2a2a2a; text-wrap:pretty; }
.empty-promise{
  margin-top:22px; padding:18px 20px; text-align:start;
  border-inline-start:3px solid var(--violet); background:var(--paper-dim);
  font-size:13.5px; line-height:1.95; color:#2a2a2a;
}

.judge-grid{ margin-top:50px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.judge{
  border:1px solid var(--line); background:var(--paper); padding:26px 24px;
  display:flex; flex-direction:column; gap:12px;
}
.judge h3{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.judge p{ font-size:13.5px; line-height:1.9; color:var(--grey); flex:1; }
@media (max-width:860px){ .judge-grid{ grid-template-columns:1fr; } }

.rule-list{
  margin-top:46px; display:flex; flex-direction:column; gap:1px;
  background:var(--line-dark); border:1px solid var(--line-dark);
}
.rule{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; background:var(--ink); }
.rule-num{ font-size:12px; color:var(--violet); padding-top:.25em; flex:none; }
.rule p{ font-size:14.5px; line-height:1.9; color:var(--grey-on-dark); }

/* ═══ دراسة حالة ═════════════════════════════════════════════════════════ */
.case-list{ margin-top:50px; display:flex; flex-direction:column; gap:22px; }
.case{ border:1px solid var(--line); background:var(--white); padding:32px 30px; }
.case-head{
  display:flex; gap:20px; align-items:flex-start;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.case-num{ font-size:15px; color:var(--violet); padding-top:.3em; }
.case-client{ font-family:var(--font-display); font-weight:800; font-size:23px; }
.case-sector{ margin-top:5px; font-size:10.5px; color:var(--grey); letter-spacing:.06em; }
.case-body{ margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-block .mono{ font-size:9.5px; letter-spacing:.12em; color:var(--violet); }
.case-block > p:not(.mono), .case-work{ margin-top:10px; font-size:13.5px; line-height:1.9; color:#2a2a2a; }
.case-work li{ padding-inline-start:14px; position:relative; margin-bottom:6px; }
.case-work li::before{
  content:''; position:absolute; inset-inline-start:0; top:.65em;
  width:5px; height:1px; background:var(--violet);
}
.case-block.is-result{ background:var(--violet-soft); padding:16px 18px; margin:-16px -18px; }
.case-result{ font-weight:600; }
/* نموذج الإسناد إلزامي مع أي رقم — لا يُخفى */
.case-attr{ margin-top:12px; font-size:9.5px; color:var(--violet-deep); }

@media (max-width:860px){
  .case-body{ grid-template-columns:1fr; }
  .case-block.is-result{ margin:0; }
}