/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Enhance
   طبقة التفاعل المتقدّم: لوحة الرسم، بقعة الضوء، المغناطيسية،
   مقياس نطاق الخدمة، لوحة الأوامر.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ لوحة الخربشة في الهيرو ═══ */
.hero-canvas{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;               /* الأحداث تُلتقط من الأب، لا تُحجب الروابط */
  mix-blend-mode:screen;
}
/* الورقة تعلو اللوحة بصريًا لكن لا تحجب الرسم */
.hero-sheet{ position:relative; z-index:2; }

/* ═══ بقعة ضوء تتبع المؤشر ═══ */
[data-spotlight]{ position:relative; isolation:isolate; }
[data-spotlight]::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity var(--dur-fast) ease;
  background:radial-gradient(
    260px circle at var(--px, 50%) var(--py, 50%),
    color-mix(in oklch, var(--violet) 13%, transparent),
    transparent 62%
  );
}
[data-spotlight]:hover::after{ opacity:1; }

/* في وضع الخربشة ::after محجوز لطبقة الحد المهتزّ — نستخدم ::before بدلها */
html.mode-sketch .pf-row::after{ z-index:-1; }

/* ═══ الانجذاب المغناطيسي ═══ */
[data-magnetic]{
  translate:var(--mx, 0) var(--my, 0);
  transition:translate .35s var(--ease-spring), background var(--dur-fast) ease,
             border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

/* ═══ مؤشر نطاق الخدمة ═══ */
.svc-scope{ display:flex; flex-direction:column; gap:9px; }
@media (max-width:860px){ .svc-scope{ flex-direction:row; flex-wrap:wrap; gap:8px 16px; } }
.svc-phase{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); direction:rtl; font-size:11px; letter-spacing:0;
  color:var(--grey);
}
.svc-phase-mark{
  width:9px; height:9px; flex:none; border-radius:1px;
  border:1px solid currentColor; position:relative;
}
.svc-phase.is-yes{ color:var(--violet); }
.svc-phase.is-yes .svc-phase-mark{ background:var(--violet); border-color:var(--violet); }

.svc-phase.is-partial{ color:var(--violet-deep); }
.svc-phase.is-partial .svc-phase-mark{
  background:linear-gradient(135deg, var(--violet) 50%, transparent 50%);
  border-color:var(--violet);
}

/* «غير مشمول» يُعرض مشطوبًا صراحةً — الصدق جزء من التصميم، لا حاشية */
.svc-phase.is-no{ color:var(--grey); opacity:.75; }
.svc-phase.is-no .svc-phase-name{ text-decoration:line-through; text-decoration-thickness:1px; }
.svc-phase.is-no .svc-phase-mark::after{
  content:''; position:absolute; inset:-1px;
  background:linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
}

/* ═══ زر لوحة الأوامر ═══ */
.cmdk-trigger{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius:var(--radius); padding:7px 10px;
  color:var(--paper); font-size:10px; letter-spacing:.04em;
  transition:border-color var(--dur-fast) ease, color var(--dur-base) ease;
}
.site-header.is-scrolled .cmdk-trigger{ color:var(--ink); }
.cmdk-trigger:hover{ border-color:var(--violet); color:var(--violet); }
.cmdk-trigger svg{ width:13px; height:13px; }
.cmdk-trigger kbd{ font:inherit; opacity:.7; }

/* ═══ لوحة الأوامر ═══ */
.cmdk{
  border:none; background:none; padding:0; margin:0; inset:0;
  width:100%; max-width:100%; height:100%; max-height:100%;
  align-items:flex-start; justify-content:center;
  overflow:visible;
}
.cmdk:popover-open{ display:flex; }
.cmdk::backdrop{
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter:blur(3px);
}

.cmdk-box{
  width:min(92vw, 520px); margin-top:14vh;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(10,10,10,.5);
}

/* دخول ناعم — @starting-style يسمح بتحريك عنصر ظهر للتو */
@supports at-rule(@starting-style){
  .cmdk-box{ transition:opacity .22s ease, translate .22s var(--ease-spring); }
  @starting-style{ .cmdk-box{ opacity:0; translate:0 -12px; } }
}

.cmdk-field{
  display:flex; align-items:center; gap:11px;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.cmdk-field svg{ width:15px; height:15px; color:var(--violet); flex:none; }
.cmdk-field input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:var(--font-ar); font-size:14.5px; color:var(--ink);
}
.cmdk-field input::placeholder{ color:var(--grey); }
.cmdk-field kbd{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--grey);
  border:1px solid var(--line); border-radius:3px; padding:3px 6px;
}

.cmdk-list{ max-height:min(52vh, 340px); overflow-y:auto; padding:7px; }
.cmdk-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; border-radius:var(--radius); text-align:start;
  font-size:14px; transition:background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.cmdk-item.is-active{ background:var(--violet-soft); color:var(--violet-deep); }
.cmdk-item.is-active .cmdk-hint{ color:var(--violet); border-color:var(--violet); }
.cmdk-hint{
  font-size:9.5px; color:var(--grey); border:1px solid var(--line);
  border-radius:3px; padding:2px 6px; flex:none;
}

.cmdk-empty{ padding:26px 18px; text-align:center; font-size:13px; color:var(--grey); }

.cmdk-foot{
  display:flex; gap:16px; flex-wrap:wrap;
  padding:11px 18px; border-top:1px solid var(--line);
  background:var(--paper-dim); font-size:11px; color:var(--grey);
}
.cmdk-foot kbd{
  font-family:var(--font-mono); border:1px solid var(--line); border-radius:3px;
  padding:2px 5px; margin-inline-end:3px; background:var(--paper);
}

/* ═══ شريط تقدّم القراءة — احتياطي بلا animation-timeline ═══ */
.read-progress{ display:none; }
@supports (animation-timeline: scroll()){
  html.has-scroll-timeline .read-progress{ display:block; }
}

/* ═══ تجاوب ═══ */
@media (max-width:980px){
  .cmdk-trigger{ display:none; }
  .mode-switch{ font-size:10.5px; }
  .mode-switch button{ padding:5px 9px; }
}
@media (max-width:560px){
  .mode-switch{ display:none; }   /* الاختصار S ولوحة الأوامر يغطّيان الوظيفة */
}

@media (prefers-reduced-motion: reduce){
  .sheet-dot, .hero-eyebrow-dot{ animation:none; }
  [data-magnetic]{ translate:none !important; transition:none; }
}