/**
 * search-panel.css — لوحةُ البحث، تعريفٌ واحدٌ لقِشرتين.
 *
 * ── ولماذا في public لا في src/styles ──
 * استيرادُه بـ`import` جعل Astro يضمّه في كلّ صفحة: 3727 حرفًا × 828
 * صفحةً، لأنّ حجمَه دون عتبةِ التضمين التلقائيّ. فصار يُخدَم من `public`
 * ويُربَط بوسمٍ صريح — كما يُفعَل بـ`tokens.css` — فيُجلَب مرّةً ويُخزَّن.
 *
 * ── لماذا خرجت من site.css ──
 * للموقع قِشرتان: `layouts/Base.astro` تخدم 604 صفحات وتُحمّل `site.css`،
 * و`pages/index.astro` تخدم الصفحةَ الأولى وحدَها ولا تعرفها — تُدرِج
 * `src/generated/css/*` وحدَها. فكانت اللوحةُ موصولةً في القشرتين
 * (يحرسه `check-search-panel`) ومُنمَّقةً في واحدة.
 *
 * وقِيس الأثرُ على النشر لا في الشيفرة: على `/` عدد قواعد `.sp-*`
 * المطابِقة **صفر**، فيسقط `<dialog>` إلى صندوق المتصفّح الافتراضيّ —
 * عرضٌ 263.9px و`max-width:calc(100% - 37.8px)` و`inset:0` مع `margin:0`،
 * فيستقرّ في زاوية البداية العليا: **أعلى اليمين** في RTL. وعلى
 * `/components/` القواعدُ 26 والصندوقُ 680px متمركز. صفحةٌ واحدةٌ كذبت
 * بصمت، والحارسُ يفحص الوصلَ لا المظهر.
 *
 * فصار التعريفُ ملفًّا واحدًا تستورده القِشرتان. ولا نسختان تفترقان.
 */

/* ── لوحةُ البحث ───────────────────────────────────────────────────────
   طبقةٌ في الوسط على الشاشة الكبيرة، وشاشةٌ كاملةٌ على الصغيرة — كما
   تطلب المرحلةُ الحادية عشرة. و`<dialog>` يحبس التركيزَ ويستمع لـEscape
   بلا شيفرةٍ منّا، وهو نمطُ بوّابة البريد نفسُه في `site.css`. */
.sp-dlg { width: min(680px, calc(100vw - 2 * var(--pt-space-4)));
  max-height: min(560px, calc(100vh - 2 * var(--pt-space-6)));
  /* ── والتمركزُ يُكتب ولا يُستعار ──
     `dialog` النموذجيُّ يتمركز بـ`margin:auto` من ورقة المتصفّح مع
     `inset:0`. وحزمةُ الصفحة الأولى تبدأ بإعادة تعيين `* { margin: 0 }`
     — والمحدّدُ العامُّ يهزم ورقةَ المتصفّح. فكانت اللوحةُ تُقاس هناك عند
     (745, 0): ملتصقةً بحافّة البدء والأعلى، بينما تتمركز في صفحات القالب
     لأنّ `site.css` لا تحمل ذلك الإعادةَ تعيينٍ.
     وهي العلّةُ نفسُها التي أخرجت هذا الملفَّ: لوحةٌ تعتمد على ما في
     القِشرة. فالتمركزُ يُعلَن هنا، فتصحّ في القِشرتين وفي أيّ ثالثة. */
  margin: auto;
  padding: 0; border: 1px solid var(--pt-border-default);
  border-radius: var(--pt-radius-md); background: var(--pt-bg-raised);
  color: var(--pt-text-primary);
  box-shadow: var(--pt-shadow-lg, 0 24px 64px rgb(0 0 0 / .45));
  overflow: hidden; }
/* ── والتخطيطُ للمفتوحة وحدَها ──
   ورقةُ المتصفّح تُخفي `dialog` غيرَ المفتوح بـ`display:none`، ومحدّدُ
   صنفٍ يهزمها. فكان `display:flex` على `.sp-dlg` يُبقي اللوحةَ مرسومةً
   بعد أوّل إغلاق: قِيست 680×226 عند 5453 من أعلى المستند، آخرَ عنصرٍ في
   `body` و`checkVisibility()` تقول true — لوحةٌ سائبةٌ في ذيل الصفحة.
   فالتخطيطُ يُقيَّد بالحالة المفتوحة، وتعود ورقةُ المتصفّح تعمل عملَها. */
.sp-dlg[open] { display: flex; flex-direction: column; }
.sp-dlg::backdrop { background: var(--pt-scrim, rgb(0 0 0 / .55)); backdrop-filter: blur(2px); }

.sp-head { display: flex; align-items: center; gap: var(--pt-space-2);
  padding: var(--pt-space-3) var(--pt-space-4);
  border-bottom: 1px solid var(--pt-border-subtle); }
.sp-q { flex: 1; min-width: 0; background: transparent; border: 0;
  color: inherit; font: inherit; font-size: var(--pt-font-size-base); outline: 0; }
/* ويُخفى زرُّ المسح الأصليّ: للحقل زرُّ إغلاقٍ ظاهرٌ بجانبه، فبقاؤهما
   معًا يعرض للزائر ضربَين متجاورين لا يعرف أيَّهما يُغلق أيَّهما.
   كشفته لقطةُ الشاشة بعد البناء — ولم يظهر في اختبارٍ نصّيّ. */
.sp-q::-webkit-search-cancel-button { display: none; }
.sp-x { flex: none; width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: transparent; color: var(--pt-text-muted);
  border: 1px solid var(--pt-border-subtle); border-radius: var(--pt-radius-xs); }
.sp-x:hover { color: var(--pt-accent); border-color: var(--pt-accent); }
/* ── وتركيزٌ يُرى ──
   اللوحةُ تُساق بلوحة المفاتيح، ومن ساقها بها يحتاج أن يعرف أين هو.
   و`:focus-visible` لا `:focus`: من نقر بالفأرة لا يُرسَم له إطار. */
.sp-x:focus-visible,
.sp-scope:focus-visible,
.sp-all:focus-visible,
.sp-q:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }

.sp-scopes { display: flex; flex-wrap: wrap; gap: var(--pt-space-1);
  padding: var(--pt-space-2) var(--pt-space-4);
  border-bottom: 1px solid var(--pt-border-subtle); }
.sp-scope { padding: 3px var(--pt-space-3); cursor: pointer;
  font: inherit; font-size: var(--pt-font-size-xs);
  background: transparent; color: var(--pt-text-secondary);
  border: 1px solid var(--pt-border-subtle); border-radius: 99px; }
.sp-scope[aria-selected="true"] { background: var(--pt-surface);
  border-color: var(--pt-accent); color: var(--pt-accent); }

.sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pt-space-2) 0; }
.sp-sec { display: flex; align-items: baseline; gap: var(--pt-space-2);
  margin: var(--pt-space-2) var(--pt-space-4) var(--pt-space-1);
  font-size: var(--pt-font-size-xs); color: var(--pt-text-muted); }
.sp-item { display: flex; align-items: center; gap: var(--pt-space-3);
  padding: var(--pt-space-2) var(--pt-space-4); cursor: pointer; }
/* البطاقة: اسمٌ فوق وصفٍ، وشاراتٌ في الطرف. والوصفُ سطرٌ واحدٌ يُقصّ —
   سطران يجعلان القائمةَ جدارًا، وثلاثةٌ يجعلانها مقالًا. */
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-desc { font-size: var(--pt-font-size-xs); color: var(--pt-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-badges { flex: none; display: flex; gap: 4px; }
.sp-badge { padding: 1px 7px; border-radius: 99px;
  border: 1px solid var(--pt-border-subtle); color: var(--pt-text-muted);
  font-size: 10px; white-space: nowrap; }
/* «عرض الكلّ» في ترويسة المجموعة — والترويسةُ تصير صفًّا */
.sp-all { margin-inline-start: auto; color: var(--pt-accent); text-decoration: none; }
.sp-all:hover { text-decoration: underline; }
/* النشطُ يُعلَن بالسمة ويُرى باللون — والتركيزُ باقٍ في الحقل، فلا يُعوَّل
   على `:focus` وحدَه ليُرى ما اختاره السهم. */
.sp-item[aria-selected="true"] { background: var(--pt-surface); }
.sp-item:hover { background: var(--pt-surface); }
.sp-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-note { flex: none; font-size: var(--pt-font-size-xs); color: var(--pt-text-muted); }
.sp-empty { margin: var(--pt-space-5) var(--pt-space-4); color: var(--pt-text-secondary); }

.sp-foot { margin: 0; padding: var(--pt-space-2) var(--pt-space-4);
  border-top: 1px solid var(--pt-border-subtle);
  font-size: var(--pt-font-size-xs); color: var(--pt-text-muted); }
.sp-foot kbd { padding: 1px 5px; margin-inline-end: 2px;
  border: 1px solid var(--pt-border-subtle); border-radius: var(--pt-radius-xs);
  background: var(--pt-bg-inset); font: inherit; font-size: 11px; }

/* ── والإخفاءُ البصريُّ يسافر مع اللوحة ──
   اللوحةُ تحقن `<p class="sr-only" id="sp-status" role="status">` في أيّ
   قِشرةٍ فُتحت فيها، و`.sr-only` معرَّفةٌ في `site.css` وحدَها. فلو
   بقيت هناك لظهر سطرُ الحالة نصًّا مقروءًا على الصفحة الأولى: «334
   نتيجةً في 3 من النطاقات» مطبوعًا في وسط اللوحة.
   وهي العلّةُ نفسُها التي أخرجت هذا الملفَّ من `site.css` — ولو تركتُها
   لعالجتُ عرَضًا وأبقيتُ سببَه. فتُقيَّد باللوحة: لا تزاحم التعريفَ
   العامَّ حيث يوجد، وتكفي حيث لا يوجد. */
.sp-dlg .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── ومرساةٌ تحت الزرّ الذي فتحها ──
   اللوحةُ `showModal()` فهي في الطبقة العليا، لا أبًا لها تُنسَب إليه.
   و`anchor-name` لا تُعوَّل عليها اليوم — متصفّحٌ واحدٌ يعرفها. فالموضعُ
   يُحسب من مستطيل الزرّ في `search-panel.mjs` ويُمرَّر متغيّرَين، ويبقى
   التمركزُ هو الافتراضَ حين لا مرساةَ (المفتاح `/` مثلًا).

   والبدايةُ منطقيّةٌ لا فيزيائيّة: الوحدةُ تحسب البُعدَ عن حافّة البدء
   — `innerWidth - rect.right` في RTL و`rect.left` في LTR — فتتبع اللوحةُ
   الاتّجاهَ بلا فرعٍ في الأنماط. */
.sp-dlg[data-anchored] {
  margin: 0;
  inset-block-start: var(--sp-block-start);
  inset-inline-start: var(--sp-inline-start);
  width: var(--sp-width);
  max-width: var(--sp-width);
}

@media (max-width: 820px) {
  /* شاشةٌ كاملة: الحقلُ في الأعلى والنتائجُ تحته، بلا حوافَّ تُضيّق.
     والمرساةُ تُلغى هنا — على الهاتف لا موضعَ تحت الزرّ يتّسع لها. */
  .sp-dlg,
  .sp-dlg[data-anchored] { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    border: 0; border-radius: 0;
    margin: 0; inset-block-start: 0; inset-inline-start: 0; }
  /* والحقلُ 16px وإلّا كبّرته سفاري ولم يُعده — وهو ثابتُ `check-mobile` */
  .sp-q { font-size: 16px; }
  /* ولا يُعرَض مفتاحٌ لمن لا لوحةَ عنده */
  .sp-foot { display: none; }
}