/*
 * ══════════════════════════════════════════════════════════════
 *  موقع مسار التعريفي — من `design/landing-reference.html` (الموجة ١٠ / الشريحة ٨)
 *
 *  الرموزُ من `@ghalla/ui` وحدها (نسخةُ design/tokens.css): لونُ الفعل --v-600، والأسطحُ paper،
 *  والنصُّ t1/t2/t3، والشريطان الداكنان --v-900. لا لونٌ حرفيّ، ولا تدرّج، ولا خطٌّ خارجيّ.
 *  والمرجعُ بعرضٍ ثابت ١٤٤٠ — هنا شبكاتٌ تنطوي حتى ٣٧٥ بلا فيضٍ أفقيّ.
 * ══════════════════════════════════════════════════════════════ */


/* ── @ghalla/ui/masar.css ── */
/*
 * نظام تصميم مسار — مدخل واحد.
 *
 * الترتيب مُلزِم: الرموز أولًا (كل ما بعدها يقرؤها)، ثم الخطّ، ثم
 * الأساس، ثم المكوّنات. عكسُه يُنتج مكوّنات تقرأ رموزًا لم تُعرَّف
 * بعد فترتدّ إلى قيم المتصفح.
 */

/* ── ./tokens.css ── */
/**
 * رموز تصميم مسار — الهويّة البنفسجيّة المعتمَدة (١٤ سبتمبر ٢٠٢٦)
 *
 * ⚠ هذا الملفّ مصدر الحقيقة الوحيد للّون والخطّ والمسافة.
 *   لا تكتب لونًا حرفيًّا في أيّ مكوّن — استعمل الرمز.
 *   لا تُضِف تدرّجًا لونيًّا (linear-gradient) في أيّ زرّ أو أيقونة أو بطاقة أو ترويسة.
 */

:root {
  /* ═══ اللون الأساسيّ ═══
     الزرّ والأيقونة والرابط والعنصر النشط = --v-600 وحده.
     بقيّة الدرجات للأسطح والخلفيّات والشارات، يختار منها التاجر. */
  --v-900: #2A0A4A;
  --v-800: #3B0E66;
  --v-700: #4C127F;
  --v-600: #5D1A9E;   /* ← لون الفعل. تباينه مع الأبيض 9.1:1 (AAA) */
  --v-500: #7129BD;
  --v-300: #B08BE0;
  --v-100: #EDE3FA;
  --v-50:  #F7F2FD;

  /* ═══ الأسطح ═══ */
  --paper:   #FFFFFF;
  --paper-2: #FAF9FC;
  --paper-3: #F2F0F6;
  --hair:    #E4E1EB;
  --hair-2:  #D9D3E2;

  /* ═══ النصّ ═══ */
  --t1: #17121F;
  --t2: #5A5265;
  --t3: #8C8497;

  /* ═══ الدلاليّة ═══ */
  /*
   * ⚠ الدرجتان أُغمقتا (الموجة ١٢ / الشريحة ١٢) لأنّ فاحصَ التباين رسّبهما:
   *   --ok على --ok-bg كان 3.86 والحدّ 4.5 · --ok على --surface كان 4.36 · --warn على --warn-bg كان 4.12.
   * وهما حبرُ شاراتِ الحالة التي يقرأها التاجر كلَّ يوم («مدفوع» و«مُسلَّم» و«بانتظار»)، فرسوبُها
   * رسوبُ الشاشة لا رسوبُ رمز. والعلاج تغييرُ الرمز لا خفضُ الحدّ ولا استثناؤه.
   *   #0C7A54 → 4.73 على السطح الباهت و5.35 على الأبيض · #965D0C → 4.88 و5.43.
   */
  --ok:        #0C7A54;  --ok-soft:   #E4F5EE;
  --warn:      #965D0C;  --warn-soft: #FBF2E0;
  --bad:       #C42A44;  --bad-soft:  #FBE9ED;
  --info:      #2F5FB8;  --info-soft: #E9EFFB;

  /* ═══ الحواف ═══ */
  --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ═══ الخطوط — مستضافة محليًّا، لا طلبَ إلى غوغل ═══ */
  --font-body:    'Tajawal', system-ui, sans-serif;
  --font-display: 'Cairo', 'Tajawal', system-ui, sans-serif;

  /* ═══ التركيز — على كلّ عنصرٍ يُركَّز عليه بلا استثناء ═══ */
  --focus-ring: 2.5px solid var(--v-300);
  --focus-offset: 2px;
}

/* الأرقام لا ترقص في الجداول */
.num, table, .price, input[type="number"] { font-variant-numeric: tabular-nums; }

*:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ═══ الزرّ الأساسيّ — لونٌ واحدٌ مسطّح في كلّ الحالات ═══ */
.btn {
  background: var(--v-600); color: #fff; border: none;
  border-radius: var(--r-md); padding: 13px 26px;
  font: 600 15px/1 var(--font-body); cursor: pointer;
}
.btn:disabled { background: var(--hair-2); cursor: not-allowed; }
.btn-secondary { background: var(--paper); color: var(--v-600); border: 1.5px solid var(--v-600); }
.btn-soft      { background: var(--v-100); color: var(--v-700); border: none; }
.btn-text      { background: transparent; color: var(--v-600); border: none; }
.btn-danger    { background: var(--bad); color: #fff; border: none; }

/* ══════════════════════════════════════════════════════════════════════
 *  رموز النظام — ما لا تحدّده الهويّة (الموجة ١٠ / الشريحة ٠)
 *
 *  ⚠ كلُّ ما فوق هذا السطر نسخةٌ حرفيّة من `design/tokens.css` — لا يُحرَّر
 *  هنا بل هناك ثمّ يُنسخ (يحرسه `packages/ui/test/identity.test.mjs`).
 *
 *  وما تحته أمران لا ثالث لهما:
 *   ١) مقاييسُ لا تحدّدها الهويّة: المسافات، سُلَّم الخطّ، الظلال، الطبقات، الحركة.
 *   ٢) أسماءٌ قديمة (`--accent-*` · `--navy-*` · `--ink-*` · `--fg*` · `--line*`)
 *      تشير إلى رموز الهويّة بـ`var()` — **لا لونَ جديد**. مئاتُ القواعد في
 *      اللوحة والمتجر تقرؤها، فتنتقل كلُّها إلى البنفسجيّ بسطرٍ واحد هنا.
 *
 *  ⚠ لا تدرّج: `--brand-gradient` كان تدرّجًا تركوازيًّا، وصار اسمًا مستعارًا
 *  للونٍ مسطّح واحد (`--v-600`) — القاعدة ١ في `design/README.md`.
 *  ⚠ ولا وضعَ داكن: الهويّة المعتمدة فاتحةٌ وحدها.
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* ── الفعل: لونٌ واحد ── */
  --accent-700: var(--v-700);
  --accent-600: var(--v-600);
  --accent-500: var(--v-600);
  --accent-400: var(--v-600);
  --accent-100: var(--v-100);
  --accent-050: var(--v-50);
  --brand-gradient: var(--v-600);
  --on-accent: var(--paper);

  /* ── الأسطح الداكنة (الشريط الجانبي، الترويسات) ── */
  --navy-900: var(--v-900);
  --navy-800: var(--v-800);
  --navy-700: var(--v-700);
  --navy-600: var(--v-600);
  --navy-500: var(--v-500);
  --on-navy: var(--paper);
  --wash-1: color-mix(in srgb, var(--paper) 6%, transparent);
  --wash-2: color-mix(in srgb, var(--paper) 8%, transparent);
  --wash-3: color-mix(in srgb, var(--paper) 14%, transparent);

  /* ── النصّ والحدود ── */
  --ink-900: var(--t1);
  --ink-800: var(--t1);
  --ink-700: var(--t1);
  --ink-600: var(--t2);
  --ink-500: var(--t2);
  --ink-400: var(--t3);
  --ink-300: var(--t3);
  --ink-200: var(--hair-2);
  --ink-100: var(--hair);
  --ink-050: var(--paper-3);
  --fg: var(--t1);
  --fg-2: var(--t2);
  /* ⚠ الدرجة الثالثة من النصّ `--t2` لا `--t3`: `--t3` تباينه ٣٫٦:١ على الأبيض،
     ونصٌّ ثانويٌّ بخطٍّ صغير يحتاج ٤٫٥:١ (WCAG 1.4.3). `--t3` للحدود والعناصر المعطّلة. */
  --fg-3: var(--t2);
  --fg-inv: var(--paper);
  --line: var(--hair);
  --line-2: var(--hair-2);
  --line-3: var(--t3);
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-3);
  --surface-3: var(--hair);
  --overlay: color-mix(in srgb, var(--t1) 55%, transparent);

  /* ── الدلاليّة ── */
  --ok-bg: var(--ok-soft);
  --ok-line: color-mix(in srgb, var(--ok) 30%, var(--paper));
  --warn-bg: var(--warn-soft);
  --warn-line: color-mix(in srgb, var(--warn) 30%, var(--paper));
  --danger: var(--bad);
  --danger-bg: var(--bad-soft);
  --danger-line: color-mix(in srgb, var(--bad) 30%, var(--paper));
  --info-bg: var(--info-soft);
  --info-line: color-mix(in srgb, var(--info) 30%, var(--paper));
  /* النجوم وتنبيه الحوالات — لا ذهبَ في الهويّة، فالتحذيرُ الدلاليّ مكانه */
  --gold: var(--warn);
  --gold-soft: var(--warn-soft);

  /* ── التركيز ── */
  --glow-ring: var(--v-100);
  --ring: 0 0 0 2.5px var(--v-300);
  --ring-danger: 0 0 0 2.5px color-mix(in srgb, var(--bad) 40%, var(--paper));

  /* ── الخطّ ── */
  --font-plex: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font: var(--font-body);
  --font-head: var(--font-display);
  --font-num: var(--font-body);

  /* ⚠ ١٢ بكسل لا ١١ (الموجة ١٢): أصغرُ نصٍّ في اللوحة يُقرأ على شاشةِ حاسوبٍ بعيدة، والجوّالُ يرفعه إلى ١٤ */
  --t-11: .75rem;
  --t-12: .75rem;
  --t-13: .8125rem;
  --t-14: .875rem;
  --t-15: .9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-26: 1.625rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --lh-tight: 1.35;
  --lh-snug: 1.5;
  --lh-base: 1.68;
  --w-normal: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --track-tight: -.01em;
  --track-tighter: -.02em;

  /* ── المسافات ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ── الحواف: سُلَّم الهويّة، واسمان قديمان يشيران إليه ── */
  --r-xs: var(--r-sm);
  --r-full: var(--r-pill);

  /* ── الظلال: بمسحة النصّ لا بلونٍ جديد، وخفيفة — السطحُ المسطّح هو الهويّة ── */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--t1) 6%, transparent);
  --sh-2: 0 2px 4px color-mix(in srgb, var(--t1) 5%, transparent), 0 8px 22px color-mix(in srgb, var(--t1) 7%, transparent);
  --sh-3: 0 4px 10px color-mix(in srgb, var(--t1) 7%, transparent), 0 22px 54px color-mix(in srgb, var(--t1) 14%, transparent);
  --e-glow: none;

  /* ── الحركة (masar-motion) ── */
  --ease: cubic-bezier(.22, .7, .28, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-1: 150ms;
  --dur-2: 260ms;

  --z-sticky: 10;
  --z-drawer: 40;
  --z-dialog: 50;
  --z-toast: 60;
}


/* ── ./fonts.css ── */
/*
 * ══════════════════════════════════════════════════════════════
 *  مسار — الخطوط (الموجة ١٠ / الشريحة ٠)
 *
 *  تجوّل للنصّ، والقاهرة للعناوين، وستّةُ خطوطٍ عربيّة يختار منها التاجر:
 *  تجوّل · القاهرة · المرعى · ريدكس · كوفي · بلكس.
 *
 *  ⚠ كلُّها مستضافةٌ محليًّا (`packages/ui/fonts`، ومنها إلى `public/fonts` في كلّ تطبيق).
 *  لا `<link>` إلى fonts.googleapis.com من أيّ تطبيق — القاعدة ٧ في
 *  `design/README.md`: تتبّعُ مشترينا لطرفٍ ثالث، واتصالٌ إضافيّ على شبكةٍ
 *  بطيئة، وخطٌّ يسقط حين يُحجب النطاق. ويحرسها `scripts/check-identity.mjs`.
 *
 *  ⚠ تعريفُ `@font-face` لا ينزّل شيئًا: المتصفّح يجلب الملفّ حين يُستعمل الخطّ.
 *  فالخطوطُ الستّة معرّفةٌ هنا ولا يدفع الزائرُ إلا ثمنَ ما اختاره التاجر.
 *  و`unicode-range` يفصل العربيّ عن اللاتينيّ فلا يُجلب إلا ما يظهر.
 *
 *  ⚠ `font-display: swap`: النصّ يظهر فورًا بخطّ النظام ثمّ يُستبدل.
 * ══════════════════════════════════════════════════════════════
 */

/* ── تجوّل — نصُّ النظام (design/tokens.css: --font-body) ── */
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tajawal-400-arabic.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;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tajawal-400-latin.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: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/tajawal-700-arabic.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;
}
@font-face {
  font-family: "Tajawal";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/tajawal-700-latin.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-display). ملفٌّ متغيّر: وزنٌ واحد يغطّي ٤٠٠–٩٠٠ ── */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cairo-var-arabic.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;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cairo-var-latin.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: "Almarai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/almarai-400-arabic.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;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/almarai-400-latin.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: "Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/almarai-700-arabic.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;
}
@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/almarai-700-latin.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: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/readex-var-arabic.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;
}
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/readex-var-latin.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;
}

/* ── كوفي (Noto Kufi Arabic) — من خطوط التاجر (متغيّر) ── */
@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/kufi-var-arabic.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;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/kufi-var-latin.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;
}

/* ── بلكس (IBM Plex Sans Arabic) — من خطوط التاجر ── */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-400-arabic.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;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-400-latin.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/plex-600-arabic.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;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-600-latin.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;
}


/* ── ./base.css ── */
/*
 * ══════════════════════════════════════════════════════════════
 *  مسار — الأساس
 *
 *  التصفير والطباعة والعناصر الأصلية. يُستورد بعد `tokens.css`
 *  وقبل `components.css`.
 *
 *  ═══ عربي أصالةً لا ترجمةً ═══
 *  الاتجاه من اليمين هو الأصل هنا، لا حالةً تُعالَج بـ`[dir=rtl]`
 *  بعد بناء الواجهة. لذلك كل خاصية منطقية: `margin-inline-start`
 *  لا `margin-left`، و`padding-inline` لا `padding-left/right`،
 *  و`text-align: start` لا `right`.
 *
 *  الفارق ليس أناقة: الواجهة المبنية بخصائص فيزيائية ثم المقلوبة
 *  تُنتج أسهمًا تشير إلى الجهة الخطأ وجداول تنكسر — وهي العيوب
 *  التي تجعل المنتج يبدو مترجَمًا لا مصنوعًا.
 * ══════════════════════════════════════════════════════════════
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-15);
  line-height: var(--lh-base);
  font-weight: var(--w-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
   * الأرقام جدولية في كل مكان.
   * بلا هذا يتغيّر عرض الرقم بين ١ و٨، فترقص أعمدة الأسعار عموديًا
   * في القوائم ويصعب مسحها بالعين — وهي أكثر حركة يقوم بها التاجر.
   */
  font-variant-numeric: tabular-nums;
}

/* ── الطباعة ── */
/*
 * ⚠ العناوين بـReadex Pro، والمتن بـPlex.
 *
 * خطّان لا واحد لأن لكلٍّ عملًا: Plex محايدٌ ممتاز في المتن ويفقد
 * حضوره في المقاسات الكبيرة؛ وReadex أعرض وأكثر انفتاحًا فيعطي
 * العنوانَ والرقمَ الكبير وزنًا. والاحتياط في السلسلة هو Plex نفسه،
 * فلو تعذّر تحميل Readex لم يقع النصّ إلى خطّ نظام.
 */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  color: var(--fg);
  /* التتبّع السالب للاتيني وحده: في العربية يفكّ الوصلات */
  letter-spacing: var(--track-tight);
}
h1 { font-size: var(--t-26); letter-spacing: var(--track-tighter); }
h2 { font-size: var(--t-18); }
h3 { font-size: var(--t-15); }
h4 { font-size: var(--t-14); }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
}

small { font-size: var(--t-13); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-5) 0;
}

/*
 * حلقة التركيز — ظاهرة دائمًا للوحة المفاتيح.
 * `:focus-visible` لا `:focus`: النقر بالفأرة لا يُظهرها، والتنقّل
 * بـTab يُظهرها. فلا نعاقب مستخدم الفأرة ولا نُعمي مستخدم المفاتيح.
 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--accent-100);
  color: var(--ink-900);
}

/* ── العناصر الأصلية ── */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

table { border-collapse: collapse; width: 100%; }

/* ── مُعِينات ── */
.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * تخطّي إلى المحتوى — يظهر عند أول Tab.
 * لوحة التاجر شريط تنقّلها طويل؛ بلا هذا يمرّ مستخدم لوحة المفاتيح
 * على اثني عشر رابطًا قبل أن يبلغ الطلبات في كل صفحة.
 */
.u-skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: var(--z-toast);
  background: var(--ink-900);
  color: var(--fg-inv);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--t-14);
  font-weight: var(--w-semi);
}
.u-skip:focus { inset-block-start: var(--s-4); }

.u-muted { color: var(--fg-2); }
.u-dim { color: var(--fg-3); }
/*
 * الأرقام جدولية دائمًا — والكبيرة منها بخطّ العناوين.
 *
 * ⚠ «tabular-nums» مضبوطة على «body» أيضًا، وتكرارها هنا مقصود:
 * «u-num» يُستعمَل داخل عناصر قد تُعيد ضبط «font-variant»، والرقم
 * الذي يرقص عرضًا بين صفّ وصفّ يُفقد القائمة قابلية المسح بالعين.
 */
.u-num { font-variant-numeric: tabular-nums; }

/* الأرقام المهيمنة: خطّ العناوين وتتبّعٌ أضيق */
.metric__value,
.price,
.u-num--hero {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tighter);
}
.u-nowrap { white-space: nowrap; }
.u-ltr { direction: ltr; unicode-bidi: isolate; }

/*
 * قصّ النصّ الطويل.
 * أسماء المنتجات العربية تطول («عسل سدر جبلي دوعني معتّق — كيلو»)،
 * وبلا قصّ تكسر كل شبكة. و`min-width: 0` شرط لعمل القصّ داخل
 * flex/grid — بدونه يتمدّد العنصر بعرض محتواه ولا يُقصّ أبدًا.
 */
.u-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * ⚠ عناصر الشبكة تأخذ `min-width: auto` افتراضيًا، فتتمدّد بعرض
 * محتواها الطبيعي وتُفيض الصفحة أفقيًا. عطلٌ وقع فعلًا: شريط تنقّل
 * يُمرَّر أفقيًا داخل نفسه مدّ عموده فقُطعت بطاقات الطلبات على
 * الهاتف. كشفته لقطة شاشة لا اختبار — الاختبار يقرأ HTML ولا يرى
 * تخطيطًا.
 */
.u-min0 { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── ./components.css ── */
/*
 * ══════════════════════════════════════════════════════════════
 *  مسار — المكوّنات
 *
 *  لغة بصرية واحدة للوحة التاجر وواجهة المتجر. مكوّنٌ يُعرَّف هنا
 *  ولا يُعاد تعريفه في تطبيق — وإلا انحرف الشكلان بعد شهر.
 *
 *  ═══ مبادئ نُخالف بها لوحات التحكّم المعتادة ═══
 *
 *  ١) البطاقة ليست الحلّ الافتراضي.
 *     «كل شيء في بطاقة» يُنتج شاشةً من صناديق متساوية الأهمية، فلا
 *     يعرف التاجر بأيّها يبدأ. الأصل هنا `panel` بسطح واحد وقوائم
 *     مفصولة بخطّ شعري؛ والبطاقة لكائن مستقلّ فعلًا (منتج · طلب).
 *
 *  ٢) الحدّ آخر أداة لا أولها.
 *     الفصل يقع بالسطح والمسافة أولًا. الشبكة الرمادية من الحدود
 *     هي ما يجعل اللوحة تبدو جدول بيانات.
 *
 *  ٣) التسلسل بالمقاس واللون قبل الوزن، وبالوزن قبل الحجم الضخم.
 *     العنوان الكبير فوق نصّ باهت تعويضٌ عن هرمية غائبة.
 *
 *  ٤) الاستدارة متدرّجة بالمعنى: الحقل والزرّ أقلّ استدارة من
 *     البطاقة، والبطاقة أقلّ من الحوار. استدارة واحدة للكل تُذيب
 *     الفروق.
 *
 *  ٥) لا جافاسكربت في المسار الأساسي.
 *     القوائم والشرائح والأدراج كلها CSS و`<details>` ونماذج.
 * ══════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════
   الأزرار
   ══════════════════════════════════════════════════════════════ */
.btn {
  --btn-h: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  /*
   * ⚠ الفعل الأساسي: تدرّجٌ تركوازي + توهّج + نصٌّ كحلي.
   *
   * التدرّج والتوهّج من وثيقة الهوية. والنصّ كحليٌّ لا أبيض بقياس:
   * الأبيض على محطّات التدرّج يعطي 3.97 · 2.74 · **1.89** فيرسب
   * WCAG AA على ثلثيه؛ والكحلي يعطي 4.57 · 6.62 · 9.60.
   *
   * ⚠ والحدّ ليس زينة: تعبئةُ التدرّج عند طرفها الفاتح تباينها 1.89
   * على الأبيض، فلا تصلح وحدها دليلًا على وجود الزرّ (WCAG 1.4.11).
   * والحدُّ بـ--accent-700 يعطي 4.58.
   *
   * وهذا الشكل — تعبئة صريحة — هو ما يفرّق الفعلَ عن شارة النجاح
   * (رقاقة باهتة بنقطة)، فلا يلتبس زرٌّ بحالة ولو تشاركا اللون.
   */
  /* ⚠ الهويّة البنفسجيّة (الموجة ١٠): لونٌ واحدٌ مسطّح `--v-600` — لا تدرّج ولا توهّج */
  background: var(--v-600);
  border-color: var(--v-600);
  box-shadow: none;
  color: var(--on-accent);
  font-size: var(--t-14);
  font-weight: var(--w-semi);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-1) var(--ease);
}
/*
 * التمرير يرفع التوهّج ويُصعِد الزرّ قليلًا — والضغط يُنزله.
 *
 * ⚠ حركةٌ مقيسة لا استعراض: ١ بكسل صعودًا و٠٫٥ نزولًا بمنحنى
 * --spring. الزرّ الذي يقفز ٤ بكسل يُقرأ لعبةً لا أداة.
 */
.btn { transition-timing-function: var(--spring); }
.btn:hover {
  background: var(--v-600);
  box-shadow: var(--sh-1);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(.5px); box-shadow: var(--sh-1); }
.btn:focus-visible { box-shadow: var(--ring); outline: none; }

/*
 * الفعل البنيوي — كحلي.
 * لما ليس دفعًا للنموّ: «تبديل المتجر» · «تخطّي». يبقى واضحًا أنه
 * فعل، ولا يزاحم الزمردي على معنى «هذا ما تريده».
 */
.btn--navy { background: var(--ink-900); color: var(--fg-inv); }
.btn--navy:hover { background: var(--ink-700); }

/*
 * الثانوي: سطح وحدّ لا لون.
 * زرّان ملوّنان متجاوران يتنازعان الانتباه، فيختار التاجر بالحجم لا
 * بالمعنى. الملوّن واحد في كل شاشة.
 */
.btn--quiet {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line-2);
  box-shadow: var(--sh-1);
}
.btn--quiet:hover { background: var(--surface-2); border-color: var(--line-3); }

.btn--ghost {
  background: transparent;
  color: var(--fg-2);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-3); color: var(--fg); }

.btn--danger { background: var(--danger); color: var(--fg-inv); }
/* ⚠ الإعتام بـ--ink-900 لا بأسودَ صريح: يبقى الميل الكحلي في الضغط */
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 85%, var(--ink-900)); }
.btn--danger:focus-visible { box-shadow: var(--ring-danger); }

/* الخطر الهادئ: للحذف والأرشفة — ظاهر ولا يصرخ في كل شاشة */
.btn--danger-quiet {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger-line);
}
.btn--danger-quiet:hover { background: var(--danger-bg); }

.btn--sm { --btn-h: 30px; padding: 0 var(--s-3); font-size: var(--t-13); }
.btn--lg { --btn-h: 46px; padding: 0 var(--s-6); font-size: var(--t-15); }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--btn-h); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* مجموعة أفعال — تلتفّ على الهاتف ولا تُقطع */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.actions--end { justify-content: flex-end; }
/* شرحٌ على اليمين وفعلٌ على اليسار في تذييل واحد — لا لوحان لأجل سطر */
.actions--between { justify-content: space-between; }
/* `display: contents` يجعل نموذج الفعل شفّافًا للتخطيط، فيصطفّ زرّه
   مع الأزرار المجاورة بدل أن يُنشئ صندوقًا يكسر الصفّ */
.actions form { display: contents; }

/* ══════════════════════════════════════════════════════════════
   الأسطح: اللوح والبطاقة
   ══════════════════════════════════════════════════════════════ */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.panel__head h2 { margin: 0; }
.panel__sub { font-size: var(--t-13); color: var(--fg-2); margin: 2px 0 0; }
.panel__body { padding: var(--s-5); }
.panel__body--flush { padding: 0; }
.panel__foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-end-start-radius: var(--r-lg);
  border-end-end-radius: var(--r-lg);
  font-size: var(--t-13);
  color: var(--fg-2);
}

/* قائمة داخل لوح — الشكل الافتراضي بدل تكديس البطاقات */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  min-width: 0;
}
.row:first-child { border-top: 0; }
a.row, button.row { width: 100%; text-align: start; background: none; border-inline: 0; cursor: pointer; }
a.row:hover, button.row:hover { background: var(--surface-2); }
.row__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__title { font-weight: var(--w-semi); font-size: var(--t-14); }
.row__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--t-12); color: var(--fg-2);
}
.row__side { display: grid; gap: var(--s-1); justify-items: end; text-align: end; }

/* ══════════════════════════════════════════════════════════════
   الأرقام: بطاقة قياس
   ══════════════════════════════════════════════════════════════ */
.metrics {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/*
 * ⚠ العمود الأوّل أعرض — قِيس أن البطاقات الأربع كانت **٢٧٠٫٢ بكسل
 * لكلٍّ بالتساوي**، وأن «بطاقة البطل» لم تكن تختلف إلا في مقاس الخطّ.
 * والهرمية التي لا تُقرأ إلا بعد قراءة الرقم ليست هرمية: العين تمسح
 * المساحات قبل أن تقرأ الأرقام.
 */
@media (min-width: 860px) {
  .metrics { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  /* الموظّف لا يرى «حوالات للمراجعة» — فثلاث بطاقات لا أربع */
  .metrics--3 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); }
}

.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-1);
  align-content: start;
  min-width: 0;
  position: relative;
}
a.metric:hover { border-color: var(--line-3); box-shadow: var(--sh-2); }
.metric__label {
  font-size: var(--t-12);
  color: var(--fg-2);
  font-weight: var(--w-medium);
  display: flex; align-items: center; gap: var(--s-2);
}
.metric__value {
  font-size: var(--t-26);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tighter);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.metric__note { font-size: var(--t-12); color: var(--fg-3); }

/*
 * بطاقة الإيراد — أكبر رقم في الشاشة.
 *
 * هذا الاستثناء الوحيد من سُلَّم المقاسات الضيّق، وهو مقصود: أول
 * سؤال يفتح التاجر اللوحة من أجله هو «كم بعتُ اليوم؟». الحجم هنا
 * يخدم الهرمية لا يعوّض عنها.
 *
 * وتأخذ العمودين على الهاتف: رقم مبيعات مقصوص في نصف عرض الشاشة
 * يهزم الغرض كلّه.
 */
.metric--hero { grid-column: span 2; }
@media (min-width: 860px) { .metric--hero { grid-column: span 1; } }
/* وحشوٌ أوسع: المساحة جزء من الوزن البصري لا زينة */
@media (min-width: 860px) { .metric--hero { padding: var(--s-5) var(--s-6); } }
.metric--hero .metric__value {
  font-size: var(--t-32);
  letter-spacing: var(--track-tighter);
}
@media (min-width: 640px) { .metric--hero .metric__value { font-size: var(--t-40); } }

/* مؤشّر نموّ — زمردي صاعد أو أحمر هابط، ومعه سهم فالمعنى بلا لون */
.trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-12); font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}
.trend--up { color: var(--accent-700); }
.trend--up::before { content: "▲"; font-size: .7em; }
.trend--down { color: var(--danger); }
.trend--down::before { content: "▼"; font-size: .7em; }

/*
 * الحالة على الحافّة لا على الخلفية.
 * تلوين البطاقة كلها بالأحمر يجعل الشاشة تصرخ؛ شريط على الحافّة
 * البادئة يُري الإلحاح ولا يُتلف قراءة الرقم.
 */
.metric--attention { border-color: var(--warn-line); }
.metric--attention::before,
.metric--critical::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 3px;
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
}
.metric--attention::before { background: var(--warn); }
.metric--critical { border-color: var(--danger-line); }
.metric--critical::before { background: var(--danger); }
.metric--critical .metric__value { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════
   الحالة: الشارات
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--s-2);
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--t-12);
  font-weight: var(--w-semi);
  line-height: 1.6;
  white-space: nowrap;
}
/*
 * النقطة قبل النصّ.
 * تُري الحالة بلون **وشكل** معًا. اللون وحده يُقصي نحو ٨٪ من
 * الرجال (عمى الألوان)، والنقطة تجعل الحالة مقروءة بلا لون أصلًا.
 */
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--plain::before { display: none; }
/* شارةٌ صغيرةٌ تسكن داخل صفٍّ آخر — وسمُ قسمٍ في القائمة مثلًا: بلا نقطةٍ ولا حدٍّ ولا ارتفاعٍ يكسر الصفّ */
.badge--sm { padding: 1px 6px; font-size: var(--t-11); border-color: transparent; }
.badge--sm::before { display: none; }

.badge--ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.badge--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.badge--danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.badge--info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
.badge--accent { color: var(--accent-700); background: var(--accent-100); border-color: var(--accent-400); }

/* عدّاد التنقّل */
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger); color: var(--fg-inv);
  font-size: var(--t-11); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════
   السعر والمخزون
   ══════════════════════════════════════════════════════════════ */
.price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
}
.price--lg { font-size: var(--t-21); }
.price__cur { font-size: .82em; font-weight: var(--w-normal); color: var(--fg-2); }
/* السعر قبل الخصم — مشطوب وباهت، ولا يُقرأ سعرًا */
.price--was {
  color: var(--fg-3);
  font-weight: var(--w-normal);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: .85em;
}

/*
 * مؤشّر المخزون — النصّ يحمل المعنى لا اللون وحده.
 * «نفد» و«٣ متاح» يُقرآن بلا لون؛ اللون يُسرِّع لا يُبلِّغ.
 */
.stock { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-12); font-weight: var(--w-semi); }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.stock--in { color: var(--ok); }
.stock--low { color: var(--warn); }
.stock--out { color: var(--danger); }

/* ══════════════════════════════════════════════════════════════
   النماذج
   ══════════════════════════════════════════════════════════════ */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 620px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: repeat(3, 1fr); }
}

.field { display: grid; gap: var(--s-2); min-width: 0; }
.field__label {
  font-size: var(--t-13);
  font-weight: var(--w-semi);
  color: var(--fg);
  display: flex; align-items: center; gap: var(--s-1);
}
.field__req { color: var(--danger); }
.field__hint { font-size: var(--t-12); color: var(--fg-2); line-height: var(--lh-snug); }
.field__error {
  font-size: var(--t-12);
  color: var(--danger);
  font-weight: var(--w-medium);
  display: flex; align-items: center; gap: 5px;
}

.input, .select, .textarea {
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  /*
   * ⚠ ١٦ بكسل على الهاتف. سفاري يُقرّب الصفحة تلقائيًا عند التركيز
   * على حقل أصغر من ذلك، فيخرج التخطيط عن الشاشة ولا يعود — عطلٌ
   * يشلّ النموذج كلّه على الآيفون.
   */
  font-size: 16px;
  line-height: var(--lh-snug);
}
@media (min-width: 900px) { .input, .select, .textarea { font-size: var(--t-14); } }

.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus { box-shadow: var(--ring-danger); }
.input[disabled], .select[disabled], .textarea[disabled] {
  background: var(--surface-3); color: var(--fg-3); cursor: not-allowed;
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-base); }

/*
 * القائمة المنسدلة — سهم مرسوم لا سهم النظام.
 * سهم النظام يظهر على اليمين في RTL فيصطدم بالنصّ العربي؛ ومظهره
 * يختلف بين متصفّح وآخر فتنكسر وحدة الشكل.
 */
.select {
  appearance: none;
  padding-inline-end: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a7166' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--s-3) center;
  background-size: 12px;
}
[dir="ltr"] .select { background-position: right var(--s-3) center; }

/* حقل بلاحقة ثابتة — النطاق الفرعي، وحدة العملة */
.affix { display: flex; min-width: 0; }
.affix .input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.affix__tag {
  display: grid; place-items: center;
  padding-inline: var(--s-3);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-inline-start: 0;
  border-start-end-radius: var(--r-sm);
  border-end-end-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: var(--t-13);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

/* البحث — بأيقونة داخلية */
.search { position: relative; min-width: 0; }
.search .input { padding-inline-start: var(--s-10); }
.search__icon {
  position: absolute;
  inset-inline-start: var(--s-3);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}

/* خانة اختيار — الصفّ كلّه هدف نقر، وهو فرق حقيقي على الهاتف */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.check:hover { border-color: var(--line-3); background: var(--surface); }
.check:has(input:checked) {
  border-color: var(--accent-400);
  background: var(--accent-100);
}
.check input {
  width: 18px; height: 18px; margin: 1px 0 0;
  flex: none;
  accent-color: var(--ink-900);
  cursor: pointer;
}
.check__text { display: grid; gap: 2px; min-width: 0; }
.check__title { font-size: var(--t-14); font-weight: var(--w-semi); }
.check__hint { font-size: var(--t-12); color: var(--fg-2); line-height: var(--lh-snug); }

/* مجموعة حقول */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: 0;
  display: grid;
  gap: var(--s-4);
  background: var(--surface-2);
}
.fieldset > legend {
  padding-inline: var(--s-2);
  font-size: var(--t-13);
  font-weight: var(--w-semi);
  color: var(--fg-2);
}

/* رفع صورة — منطقة إفلات بلا جافاسكربت */
.upload {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1.5px dashed var(--line-3);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
}
.upload:hover { border-color: var(--accent-500); background: var(--accent-100); }
.upload__icon { justify-self: center; width: 26px; height: 26px; color: var(--fg-3); }
.upload__title { font-size: var(--t-14); font-weight: var(--w-semi); }
.upload__hint { font-size: var(--t-12); color: var(--fg-2); }
.upload input[type="file"] { display: none; }

/* ══════════════════════════════════════════════════════════════
   الوسائط
   ══════════════════════════════════════════════════════════════ */
.thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-3);
  border: 1px solid var(--line);
  flex: none;
}
.thumb--lg { width: 72px; height: 72px; }
.thumb--ph {
  display: grid; place-items: center;
  color: var(--fg-3);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-2);
}
.media-grid figure { margin: 0; position: relative; }
.media-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line);
}
.media-grid figcaption {
  position: absolute;
  inset-block-end: var(--s-1);
  inset-inline-start: var(--s-1);
}

/* ══════════════════════════════════════════════════════════════
   الجداول
   ══════════════════════════════════════════════════════════════ */
.table { font-size: var(--t-14); }
.table th, .table td {
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table thead th {
  font-size: var(--t-12);
  font-weight: var(--w-semi);
  color: var(--fg-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: end; font-variant-numeric: tabular-nums; }
/* الرأس اللاصق داخل الجدول لا الصفحة: يبقى ظاهرًا مع تمرير الجدول */
.table--sticky thead th { position: sticky; inset-block-start: 0; z-index: 1; }

/*
 * ⚠ الجدول العريض يُمرَّر داخل حاويته لا يُفيض الصفحة.
 * بلا هذا تنزلق الصفحة كلها أفقيًا على الهاتف فتُقطع القوائم — وهو
 * عطل وقع فعلًا ولم يكشفه إلا لقطة شاشة.
 */
/*
 * ══════════════════════════════════════════════════════════════
 *  غلاف التمرير الأفقي
 * ══════════════════════════════════════════════════════════════
 *
 * ⚠ `overflow-x: auto` **وحده لا يكفي** — وهذا عطلٌ قِيس لا نظرية.
 *
 * الغلاف يسكن غالبًا داخل شبكة (`.stack` داخل `.cols--main`)،
 * وعناصر الشبكة تأخذ `min-width: auto` فترفض أن تقصُر عن عرض
 * محتواها الطبيعي. فجدول ثمانية متغيّرات يمطّ غلافَه ثم عمودَه ثم
 * **الصفحة كلّها**: قِيس ١٣٧ بكسل فيضًا أفقيًّا في محرّر المنتج على
 * ٣٧٥ — والجدول نفسه لم يُمرَّر داخل نفسه قطّ.
 *
 * والسطران أدناه هما ما يجعل `auto` تعمل أصلًا.
 */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* وأبناء المكدّس كذلك — نفس السبب، ولذلك يُذكر صراحةً */
.stack > *, .panel { min-inline-size: 0; }

/* ══════════════════════════════════════════════════════════════
   التنقّل والشرائح
   ══════════════════════════════════════════════════════════════ */
.tabs {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > a {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-14);
  font-weight: var(--w-medium);
  color: var(--fg-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs > a:hover { color: var(--fg); }
.tabs > a[aria-current="page"] {
  color: var(--fg);
  font-weight: var(--w-semi);
  border-bottom-color: var(--ink-900);
}

/* مُرشِّحات — حبّات لا شرائح: تُجمَع ولا تُلغي بعضها بصريًا */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--fg-2);
  font-size: var(--t-13);
  font-weight: var(--w-medium);
  white-space: nowrap;
}
.chip:hover { border-color: var(--line-3); color: var(--fg); }
.chip[aria-current="page"], .chip[aria-pressed="true"] {
  background: var(--ink-900); color: var(--fg-inv); border-color: var(--ink-900);
}

/* مسار التنقّل — الفاصل مرسوم بـCSS فينقلب مع الاتجاه تلقائيًا */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  font-size: var(--t-13); color: var(--fg-2);
}
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/*
 * ⚠ ٤٤ بكسل على الجوّال (تدقيقُ التخطيط الحيّ — الموجة ١٢): رابطُ المسار كان ٢٤ بكسل ارتفاعًا.
 * وهو رابطُ تنقّلٍ قائمٌ بنفسه لا كلمةٌ داخل جملة — فلا يشمله استثناءُ الروابط السطريّة.
 */
.crumbs a { min-block-size: 32px; display: inline-flex; align-items: center; }
@media (max-width: 767.98px) { .crumbs a { min-block-size: 44px; } }
.crumbs li { display: flex; align-items: center; gap: var(--s-2); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before {
  content: "/";
  color: var(--line-3);
  /* في RTL يُقرأ الشرطة المائلة معكوسة الاتجاه بصريًا؛ العزل يمنع ذلك */
  unicode-bidi: isolate;
}

/* الترقيم */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
.pager__info { font-size: var(--t-13); color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   القوائم المنسدلة والأدراج — بلا جافاسكربت
   ══════════════════════════════════════════════════════════════ */
/*
 * `<details>` هو المنسدلة. مجّانية وظيفيًا: تعمل بالمفاتيح، وتُغلق
 * بـEsc، ولا تحتاج بايتًا واحدًا من سكربت. وهي متاحة قبل أن يُحمَّل
 * أي جافاسكربت — وهو ما يهمّ على اتصال متقطّع.
 */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-end: 0;
  min-width: 200px;
  z-index: var(--z-drawer);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: var(--s-1);
  display: grid;
  gap: 1px;
}
.menu__item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  font-size: var(--t-14);
  color: var(--fg);
  cursor: pointer;
  width: 100%;
  background: none; border: 0;
  text-align: start;
}
.menu__item:hover { background: var(--surface-2); }
.menu__item--danger { color: var(--danger); }
.menu__sep { height: 1px; background: var(--line); margin: var(--s-1) 0; }

/* ══════════════════════════════════════════════════════════════
   التنبيهات
   ══════════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--t-14);
  line-height: var(--lh-snug);
}
.alert__icon { flex: none; width: 18px; height: 18px; margin-block-start: 2px; }
.alert__body { min-width: 0; display: grid; gap: var(--s-1); }
.alert__title { font-weight: var(--w-semi); }
.alert--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert--danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.alert--info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }

/* ══════════════════════════════════════════════════════════════
   الحالات الفارغة والتحميل
   ══════════════════════════════════════════════════════════════ */
/*
 * الحالة الفارغة تقول ما يُفعَل، لا «لا بيانات».
 * أول شاشة يراها التاجر في كل قسم فارغة — فهي فرصة توجيه لا رسالة
 * خطأ. ولذلك فيها زرّ فعل دائمًا حين يكون هناك فعل.
 */
.empty {
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  text-align: center;
  padding: var(--s-12) var(--s-5);
}
.empty__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--fg-3);
}
.empty__title { font-size: var(--t-16); font-weight: var(--w-semi); }
.empty__text { max-width: 44ch; font-size: var(--t-14); color: var(--fg-2); margin: 0; }

.skeleton {
  border-radius: var(--r-sm);
  /* ⚠ لا تدرّج (design/README.md ١): نبضُ شفافيّةٍ على سطحٍ مسطّح بدل موجة اللمعان */
  background: var(--surface-3);
  animation: sk 1.4s ease-in-out infinite;
}
@keyframes sk { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skeleton--text { height: 1em; }
.skeleton--row { height: 56px; margin-bottom: var(--s-2); }

/* شريط تقدّم — للتهيئة وللرفع */
.progress {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.progress > i {
  display: block; height: 100%;
  background: var(--accent-500);
  border-radius: var(--r-full);
}

/* ══════════════════════════════════════════════════════════════
   قائمة الخطوات
   ══════════════════════════════════════════════════════════════ */
.steps { display: grid; }
.step {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
.step:first-child { border-top: 0; }
a.step:hover { background: var(--surface-2); }
.step__mark {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  display: grid; place-items: center;
  color: transparent;
  font-size: 11px;
}
.step__label { flex: 1; min-width: 0; font-size: var(--t-14); font-weight: var(--w-medium); }
.step__go { font-size: var(--t-13); font-weight: var(--w-semi); color: var(--fg-2); white-space: nowrap; }
a.step:hover .step__go { color: var(--fg); }

/* النصّ كحلي لا أبيض: في الوضع الداكن يصير --ok أخضر فاتحًا فتختفي
   علامة الصحّ البيضاء عليه تمامًا */
.step--done .step__mark {
  background: var(--ok); border-color: var(--ok); color: var(--navy-900);
}
.step--done .step__label { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 1px; }
/* الخطوة الحالية مميّزة: التاجر يعرف من أين يكمل بلا قراءة */
.step--now .step__mark { border-color: var(--accent-500); border-width: 2px; }
.step--now .step__label { font-weight: var(--w-semi); }

/* ══════════════════════════════════════════════════════════════
   الحوار — عنصر أصلي
   ══════════════════════════════════════════════════════════════ */
dialog {
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--sh-3);
  max-width: min(480px, calc(100vw - var(--s-8)));
  width: 100%;
}
dialog::backdrop { background: var(--overlay); }

/* ══════════════════════════════════════════════════════════════
   التخطيط
   ══════════════════════════════════════════════════════════════ */
.stack { display: grid; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.stack--lg { gap: var(--s-6); }

/*
 * ⚠ min-width: 0 على أبناء الكومة — نفس العطل الذي أصاب `.app` من قبل.
 *
 * عنصر الشبكة يأخذ `min-width: auto`، فيتمدّد بعرض محتواه الطبيعي
 * لا بعرض عموده. فلوحٌ فيه جدول عريض يتمدّد إلى عرض الجدول، ويصير
 * `.scroll-x` داخله بعرض محتواه أيضًا — فلا يُمرَّر شيء، ويُقصّ
 * اللوح كلّه عند حافّة `.main` التي تُخفي الفيض.
 *
 * قاسه الفحص البصري على تفصيل الطلب عند ٣٧٥ بكسل: اللوح ٥٦٣ بكسل
 * في عمود ٣٤٣، و٢٠٤ بكسل من الجدول مخفيّة لا يبلغها المستخدم بتمرير
 * ولا بغيره. والصفحة لا تُبلّغ عن فيض لأن `.main` ابتلعته.
 */
.stack > * { min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.spread {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
}
.cols { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  /* المحتوى الأساسي أوسع من الجانبي — لا نصفان متساويان */
  .cols--main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  /* عمودان متساويان: نموذجان متكافئان لا أساسي وجانبي */
  .cols--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cols > * { min-width: 0; }

/* ترويسة الصفحة */
.page-head {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s-6);
}
.page-head__text { min-width: 0; display: grid; gap: var(--s-1); }
.page-head__sub { font-size: var(--t-14); color: var(--fg-2); margin: 0; }

/* كود/معرّف قابل للنسخ */
.mono {
  font-family: var(--font-num);
  font-size: var(--t-13);
  background: var(--surface-3);
  border-radius: var(--r-xs);
  padding: 1px var(--s-2);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/*
 * قائمة وصف — تسمية وقيمة.
 *
 * للبيانات المرجعية: المشتري · العنوان · تفاصيل الدفع · الإجماليات.
 * `dl` لا جدولًا: هذه أزواج تسمية/قيمة لا صفوف بأعمدة، وقارئ الشاشة
 * يقرؤها مقترنة. والجدول لها يُنتج ترويسة وهمية ويكسر على الهاتف.
 */
.kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--t-14);
  align-items: baseline;
}
.kv dt { color: var(--fg-2); white-space: nowrap; }
.kv dd { margin: 0; min-width: 0; text-align: end; }

/* ══════════════════════════════════════════════════════════════
   بطاقة الإقلاع — ما يراه التاجر في يومه الأوّل
   ══════════════════════════════════════════════════════════════

   ⚠ هذه ليست زينة ترحيب. قِيس أن العمود الرئيس في اللوحة كان
   **فارغًا تمامًا** للتاجر الجديد — ٦٩٣ بكسل من ١١١٧، أي ٦٢٪ من
   عرض المحتوى — لأن ظهوره كان مشروطًا باكتمال التهيئة. فالحالة
   الوحيدة التي يبدأ منها كل تاجر كانت هي الحالة المكسورة.

   والقاعدة هنا: **فعلٌ واحد ظاهر**. لا ستّ خطوات متساوية الوزن
   تترك التاجر يختار من أين يبدأ، بل الخطوة التالية وحدها بزرٍّ
   ابتدائي، وما بعدها مسرودٌ خافتًا ليُطمئن لا ليُشتّت.
*/
.launch { display: grid; gap: var(--s-5); padding: var(--s-6); }
@media (min-width: 640px) { .launch { padding: var(--s-8) var(--s-6); } }

.launch__step {
  font-size: var(--t-12);
  font-weight: var(--w-semi);
  color: var(--accent-700);
  letter-spacing: var(--track-wide, 0);
}
.launch__title {
  font-size: var(--t-26);
  font-weight: var(--w-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tighter);
  margin: 0;
}
.launch__text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-15);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.launch__act { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* بقيّة الخطوات: صفٌّ واحد خافت — سياقٌ لا قائمة مهامّ ثانية */
.launch__rest {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--t-13);
  color: var(--fg-3);
}
.launch__rest b { font-weight: var(--w-semi); color: var(--fg-2); }

/* ══════════════════════════════════════════════════════════════
   بدائيّات القوائم — تُكتب مرّة وتُستعمَل في الطلبات والمنتجات
   والتصنيفات والمخزون
   ══════════════════════════════════════════════════════════════ */

/* شريط الأدوات: بحثٌ يتمدّد، ومُرشِّحات تنكسر تحته على الهاتف */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}
.toolbar > form { flex: 1 1 240px; min-inline-size: 0; }

/* أفعال الصفّ — تلتصق بطرفه ولا تتمدّد */
.row__acts {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
  flex-shrink: 0;
}

.u-link { color: inherit; text-decoration: none; }
.u-link:hover { color: var(--accent-600); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   الموجة ١٢ / الشريحتان ٤ و٥ — الصفُّ يصير بطاقةً على الجوّال
   ══════════════════════════════════════════════════════════════

   ⚠ هذا عطلٌ رصده المالكُ بعينه: «بيانات متداخلة بشكل كبير».
   وقيسَ على ٣٩٠ بكسل: اسمُ المنتج والسعرُ يُطبعان فوق بعضهما،
   والشارةُ فوق المخزون. السببُ أنّ `.row` صفٌّ مرنٌ واحد: الاسمُ
   يأخذ ما بقي، و`.row__side` يُعصَر إلى صفرٍ فيفيض نصُّه فوق جاره.
   وتحت ٧٦٨ يصير الصفُّ **شبكةً من سطرين**: الاسمُ والحالةُ سطرًا،
   والسعرُ والمخزونُ والأفعالُ سطرًا — بلا تمريرٍ أفقيٍّ ولا تداخل.
*/
@media (max-width: 767px) {
  .row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--s-2);
    row-gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
  }
  /* الصورةُ والمقبضُ والتأشيرُ يبقون في الصدر، والاسمُ يملأ ما بعدهم */
  .row__main { grid-column: 2 / -1; }
  .row__side {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
    justify-items: start; text-align: start;
  }
  .row__acts { grid-column: 1 / -1; margin-inline-start: 0; justify-content: flex-end; }
  .row__side > *, .row__meta > * { min-block-size: 24px; display: inline-flex; align-items: center; }
}

/* عددُ الحالة داخل الرقاقة — الرقمُ يقرأ قبل الاسم */
.chip__n {
  margin-inline-start: var(--s-2);
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--t-12);
}
.chip[aria-current="page"] .chip__n { background: color-mix(in srgb, var(--fg-inv) 25%, transparent); color: inherit; }

/* ══════════════════════════════════════════════════════════════
   الموجة ١٢ / الشريحة ٤ — أهدافُ اللمس والنصُّ على الجوّال
   ══════════════════════════════════════════════════════════════

   القاعدةُ: ٤٤×٤٤ لكلّ ما يُنقر، ولا نصَّ دون ١٤ بكسل — على الجوّال حيث الإبهامُ والشمس.
   وعلى الحاسوب يبقى المقياسُ أدقَّ: الفأرةُ تصيب ٣٢ بكسل، والكثافةُ تخدم من يعمل بلوحة مفاتيح.
*/
@media (max-width: 959px) {
  :root {
    --t-11: 14px;
    --t-12: 14px;
    --t-13: 14px;
  }
  .nav a, .nav > span,
  .chip, .btn--sm, .btn--quiet, .btn,
  .tabbar a, .brand, .row__acts .btn,
  .input, .select, .textarea, .input--sm {
    min-block-size: 44px;
  }
  /* والعرضُ أيضًا: زرٌّ ٤١ بكسلًا عرضًا يُخطئه الإبهامُ كما يُخطئ ٤١ ارتفاعًا */
  .btn, .btn--sm, .btn--quiet, .chip, .topbar__ibtn, .grip-h { min-inline-size: 44px; }
  .chip, .btn--sm, .btn--quiet, .brand { display: inline-flex; align-items: center; justify-content: center; }
  .shot__acts .btn, .drawer__btn, .pindex a { min-block-size: 44px; }
  /* روابطُ التذييل والقوائم في المتجر — صفوفٌ تُنقر بإبهام */
  .u-dim, a.cluster { min-block-size: 44px; display: flex; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   الجدول يصير بطاقات تحت ٧٦٨
   ══════════════════════════════════════════════════════════════

   ⚠ هذا ليس تجميلًا. جدولٌ بخمسة أعمدة على شاشة ٣٧٥ بكسل يعطي
   ٧٥ بكسلًا للعمود: اسمُ منتجٍ عربي يُقصّ بعد كلمتين، والرقم يلتفّ
   على سطرين. والتمرير الأفقي داخل الجدول يعني أن التاجر لا يرى
   «الاسم» و«المتاح» معًا — وهما السببُ الوحيد لفتح الشاشة.

   فتحت ٧٦٨ يصير كل صفٍّ بطاقةً، وكل خليّة سطرًا عنوانُه من
   `data-label`. ولذلك **كل `<td>` يحتاج `data-label`** — وإلّا صار
   رقمٌ عائمٌ بلا معنى.
*/
@media (max-width: 767px) {
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .table--cards tbody tr {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-3);
    margin-block-end: var(--s-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .table--cards tbody tr:hover { background: var(--surface); }

  .table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 0;
    border: 0;
    text-align: start;
    min-block-size: 28px;
  }
  .table--cards tbody td.num { text-align: start; }

  .table--cards tbody td[data-label]::before {
    content: attr(data-label);
    font-size: var(--t-12);
    color: var(--fg-3);
    font-weight: var(--w-medium);
    flex: 0 0 auto;
  }

  /* الخليّة الأولى عنوان البطاقة: بلا تسمية وبوزن أثقل */
  .table--cards tbody td:first-child {
    display: block;
    font-weight: var(--w-semi);
    padding-block-end: var(--s-2);
    margin-block-end: var(--s-1);
    border-block-end: 1px solid var(--line);
  }
  .table--cards tbody td:first-child::before { content: none; }

  /* خليّة الأفعال: أزرارٌ بعرض كامل يبلغها الإبهام */
  .table--cards tbody td:last-child { padding-block-start: var(--s-2); }
  .table--cards tbody td:last-child .btn { min-block-size: 36px; }

  .u-hide-sm { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   شريط الإجراءات الجماعية
   ══════════════════════════════════════════════════════════════

   ⚠ يظهر بالتحديد لا دائمًا — و`:has()` تكفي بلا جافاسكربت:
   الشريط يظهر حين يُؤشَّر صندوقٌ واحد على الأقلّ.
*/
.bulk { display: none; }
.bulkform:has(input[name="ids"]:checked) .bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-3);
  border: 1px solid var(--accent-line, var(--line));
  border-radius: var(--r-md);
  background: var(--accent-050);
}
.bulk__note { font-size: var(--t-13); font-weight: var(--w-medium); color: var(--fg-2); }
.bulk__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-inline-start: auto; }

/* صندوق تأشير بهدف لمسٍ حقيقي — ٤٤ بكسل لا ١٦ */
.tick {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin: -12px;
  cursor: pointer;
}
.tick input { inline-size: 17px; block-size: 17px; accent-color: var(--accent-600); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   هيكل التحميل
   ══════════════════════════════════════════════════════════════

   ⚠ يحترم `prefers-reduced-motion`: النبض المستمرّ يؤذي من يعاني
   حساسية الحركة، والهيكل الساكن يؤدّي الغرض نفسه.
*/
.skel {
  border-radius: var(--r-xs);
  background: var(--surface-2);
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: var(--surface-2); }
}
.skel__row { block-size: 56px; margin-block-end: var(--s-2); }

/*
 * حقلٌ داخل شريط أدوات: بلا تسمية فوقه وبلا تمدّد.
 * التسمية هنا `u-sr` — الاسم المعروض في القائمة نفسها («كل
 * المحافظات») يشرحها، وعنوانٌ فوق كل قائمة يُطيل الشريط سطرين.
 */
.field--inline { flex: 0 0 auto; gap: 0; }
.field--inline .select { min-inline-size: 140px; }
@media (max-width: 559px) {
  .field--inline { flex: 1 1 140px; }
  .field--inline .select { inline-size: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   الخطّ الزمني
   ══════════════════════════════════════════════════════════════

   ⚠ يُقرأ حين يختلف تاجرٌ مع مشترٍ: «متى أُكِّد الطلب؟ ومتى قُبلت
   الحوالة؟». وصفوفٌ متساوية لا تُظهر التسلسل — والخطّ الواصل بين
   النقاط يقوله بلا كلمة.
*/
.timeline { list-style: none; margin: 0; padding: var(--s-4) var(--s-5); display: grid; }

.timeline__at {
  position: relative;
  padding-inline-start: var(--s-6);
  padding-block-end: var(--s-4);
}
.timeline__at:last-child { padding-block-end: 0; }

/* الخطّ الواصل — يقف عند آخر نقطة فلا يتدلّى في الفراغ */
.timeline__at::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block: 14px 0;
  inline-size: 1px;
  background: var(--line-2);
}
.timeline__at:last-child::before { display: none; }

.timeline__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 5px;
  inline-size: 9px; block-size: 9px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 2px solid var(--line-3);
}
/* الأحدث مميّز: هو ما يُسأل عنه */
.timeline__at--now .timeline__dot { border-color: var(--accent-500); }

.timeline__body { display: grid; gap: 2px; }
.timeline__what { font-size: var(--t-13); font-weight: var(--w-medium); }
.timeline__when { font-size: var(--t-12); color: var(--fg-3); }

/* شبكة صناديق تأشير — تنكسر بعرض الحاوية لا بعدد ثابت */
.checks {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}

/* ══════════════════════════════════════════════════════════════
   شريط الحفظ الملتصق
   ══════════════════════════════════════════════════════════════

   ⚠ محرّر المنتج أطول من الشاشة. وزرُّ حفظٍ في القاع يعني تمريرًا
   كاملًا بعد كل تعديل — أو حفظًا يُنسى، فيخرج التاجر بتغييرٍ لم
   يُحفظ ويظنّ النظام أضاعه.
*/
.savebar {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--line);
}
.savebar .actions { margin-inline-start: auto; }
.savebar__note { font-size: var(--t-12); color: var(--fg-3); }
@media (max-width: 559px) { .savebar__note { display: none; } }

/* على الهاتف يرتفع فوق الشريط السفلي فلا يختبئ خلفه */
@media (max-width: 959px) {
  .savebar { inset-block-end: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════════════════
   الرسوم البيانية — SVG مُصيَّر في الخادم
   ══════════════════════════════════════════════════════════════ */
.chart { margin: 0; }
.chart__svg { inline-size: 100%; block-size: auto; display: block; }
.chart__empty {
  margin: 0;
  padding: var(--s-6) 0;
  text-align: center;
  font-size: var(--t-13);
  color: var(--fg-3);
}

/* ── أعمدة أفقية ──
   ⚠ أفقية لا رأسية: أسماء المنتجات العربية طويلة، وتحت العمود
   الرأسي تُقصّ أو تُمال. والأفقي يعطي الاسم سطرًا كاملًا. */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.bars__row { display: grid; gap: 6px; min-inline-size: 0; }
.bars__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); min-inline-size: 0;
}
.bars__label { font-size: var(--t-14); font-weight: var(--w-medium); min-inline-size: 0; }
.bars__value {
  font-size: var(--t-14); font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bars__track {
  display: block;
  block-size: 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}
.bars__fill {
  display: block;
  block-size: 100%;
  border-radius: var(--r-full);
  background: var(--v-600);
}
.bars__note { font-size: var(--t-12); color: var(--fg-3); }

/* ── شريط الحالات المكدّس ──
   ⚠ شريطٌ واحد لا دائرة: مقارنة قطاعين متقاربين في الدائرة مستحيلة
   بالعين، وفي الشريط طولٌ يُقاس. */
.statusbar { display: grid; gap: var(--s-4); }
.statusbar__track {
  display: flex;
  block-size: 14px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-2);
}
.statusbar__seg { display: block; block-size: 100%; }

.statusbar__key {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-2);
  font-size: var(--t-13);
}
.statusbar__key li { display: flex; align-items: center; gap: var(--s-2); }
.statusbar__key i {
  inline-size: 10px; block-size: 10px;
  border-radius: 3px; flex: 0 0 auto;
}
.statusbar__key b {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semi);
}

/* ══════════════════════════════════════════════════════════════
   تفصيلة تُطوى — حقولٌ يحتاجها القليل، فلا تُطيل النموذج على الكلّ

   ⚠ `<details>` لا زرّ بجافاسكربت: يعمل بلوحة المفاتيح، ويُبحَث فيه
   بـCtrl+F، ويُطبع مفتوحًا. وحقوله تُرسَل مع النموذج مطويّةً كانت
   أو مفتوحة — وهذا ما يجعله صالحًا داخل نموذج.
   ══════════════════════════════════════════════════════════════ */
.disclose__head {
  display: flex; align-items: center; gap: var(--s-2);
  cursor: pointer;
  font-weight: var(--w-semi); font-size: var(--t-14);
  color: var(--fg);
  /* ٤٤ بكسل هدف لمس — الصفّ كلّه لا النصّ وحده */
  min-block-size: 44px;
  list-style: none;
}
.disclose__head::-webkit-details-marker { display: none; }
.disclose__head:focus-visible {
  outline: 2px solid var(--accent-500); outline-offset: 3px;
  border-radius: var(--r-sm);
}
.disclose__head::after {
  content: '';
  margin-inline-start: auto;
  inline-size: 9px; block-size: 9px;
  border-inline-end: 2px solid var(--fg-3);
  border-block-end: 2px solid var(--fg-3);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease);
}
.disclose[open] > .disclose__head::after { transform: rotate(-135deg); }

/* ══════════════════════════════════════════════════════════════
   معرض صور المنتج — عرضٌ وترتيبٌ وحذف

   ⚠ الترتيب بزرّي «قدّم/أخّر» لا بالسحب: السحب يحتاج جافاسكربت،
   ويفشل على شاشة لمس بلا هدف كبير، ولا يُستعمل بلوحة مفاتيح. وزرّان
   يعملان في كل هذه الحالات — والأولى في الترتيب هي الرئيسة.
   ══════════════════════════════════════════════════════════════ */
.shots { display: grid; gap: var(--s-3); }
.shot {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center; gap: var(--s-3);
  padding: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.shot > * { min-inline-size: 0; }
.shot__img {
  inline-size: 64px; block-size: 64px;
  object-fit: cover;
  border-radius: var(--r-xs);
  background: var(--surface-2);
}
.shot__meta { display: grid; gap: 2px; font-size: var(--t-13); }
.shot__acts { display: flex; gap: var(--s-1); }
.shot__acts .btn { min-inline-size: 44px; min-block-size: 44px; }

/* ══════════════════════════════════════════════════════════════
   الموجة ١٢ — نموذجُ المنتج في صفحةٍ واحدة
   ══════════════════════════════════════════════════════════════ */

/* شبكةُ الصور: بطاقاتٌ تُسحب لا صفوفٌ طويلة — والترتيبُ يُرى بالعين */
.shots--grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shots--grid .shot {
  grid-template-columns: auto 96px 1fr;
  grid-template-areas: 'grab img meta' 'acts acts acts' 'alt alt alt';
  align-items: start; gap: var(--s-2);
}
.shots--grid .shot__grab { grid-area: grab; color: var(--fg-3); cursor: grab; align-self: center; }
.shots--grid .shot__img { grid-area: img; inline-size: 96px; block-size: 96px; }
.shots--grid .shot__meta { grid-area: meta; align-self: center; }
.shots--grid .shot__acts { grid-area: acts; flex-wrap: wrap; }
.shot--drag { opacity: .5; outline: 2px dashed var(--accent-500); }
.shot__alt { grid-area: alt; display: flex; gap: var(--s-1); align-items: center; }
.shot__alt .input { flex: 1 1 auto; }
.input--sm { padding-block: 6px; font-size: var(--t-13); }

/* ما اختاره التاجرُ ولم يُرفع بعد — معاينةٌ فوريّة قبل الحفظ */
.shots--new { margin-block-start: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shot--new { border-style: dashed; }
.upload--over { border-color: var(--accent-500); background: var(--accent-100); }

/* اختيارُ نوع المنتج — بطاقاتٌ لا قائمةٌ منسدلة: التاجر يقرأ الفرقَ قبل أن يختار */
.picks { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pick { position: relative; display: block; cursor: pointer; }
.pick input {
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  inline-size: 18px; block-size: 18px; accent-color: var(--accent-600);
}
.pick__body {
  display: grid; gap: 2px; min-block-size: 44px;
  padding: var(--s-3) var(--s-3) var(--s-3) calc(var(--s-3) * 2 + 18px);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  font-size: var(--t-13);
}
.pick:hover .pick__body { border-color: var(--line-3); }
.pick:has(input:checked) .pick__body { border-color: var(--accent-500); background: var(--accent-100); }
.pick:has(input:focus-visible) .pick__body { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.pick__icon { color: var(--accent-600); }

/* فهرسُ اللوحات — شريطُ قفزٍ أفقيٌّ على الجوّال، وعمودٌ لزقٌ إلى جانب النموذج على الحاسوب */
.cols--index { display: grid; gap: var(--s-4); }
.pindex ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-1); overflow-x: auto; }
.pindex a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  color: var(--fg-2); text-decoration: none; font-size: var(--t-13); white-space: nowrap;
  min-block-size: 44px; display: flex; align-items: center;
}
.pindex a:hover { background: var(--surface-2); color: var(--fg); }
/* ⚠ الترتيبُ مقصود: القاعدةُ العامّة أوّلًا ثمّ الاستثناءُ — والعكسُ كان يجعل الفهرسَ شريطًا أفقيًّا
   فوق أوّل لوحةٍ على الحاسوب (قيسَ تداخلًا حيًّا على ١٤٤٠). */
@media (min-width: 1080px) {
  .cols--index { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); align-items: start; }
  .pindex { position: sticky; inset-block-start: var(--s-4); }
  .pindex ul { display: grid; gap: 2px; overflow: visible; }
}

/* شريطُ الحفظ اللزق خارج لوحةٍ — للنموذج كلِّه لا للوحةٍ واحدة */
.savebar--sticky {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-block-start: var(--s-4);
}
/*
 * ⚠ الشريطُ اللزقُ يحجب آخرَ حقلٍ إن لم يُترك له مكان — قيسَ حيًّا على ٣٩٠: «انشره في المتجر»
 * فوق «عنوان البحث». فالنموذجُ الذي يحمله يترك أسفله فراغًا بقدره.
 */
form:has(> .savebar--sticky) { padding-block-end: calc(var(--s-6) + 44px); }
.savebar__publish { border: 0; background: none; padding: 0; }
.savebar__prog { font-size: var(--t-13); color: var(--accent-700); }

/* عيّناتُ اللوحة المشتقّة — تُقرأ بالعين لا بالاسم */
.swatches { display: flex; gap: var(--s-2); }
.swatch {
  inline-size: 40px; block-size: 40px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   نافذة المعاينة

   ⚠ نسبةٌ محجوزة لا ارتفاع ثابت: الإطار يُحمَّل متأخّرًا، وارتفاعٌ
   يُحسب بعد التحميل يُقفز التخطيط في الشاشة التي يُراد منها الحكم
   على التخطيط.
   ══════════════════════════════════════════════════════════════ */
.preview {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.preview__frame { inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* ══════════════════════════════════════════════════════════════
   شريط التقدّم

   ⚠ `<progress>` لا `<div>` بعرضٍ محسوب: ينطقه قارئ الشاشة، ويعمل
   بلا CSS، ويقول قيمته لمن كبّر الخطّ.
   ══════════════════════════════════════════════════════════════ */
.bar {
  inline-size: 100%;
  block-size: 10px;
  appearance: none;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}
.bar::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-full); }
.bar::-webkit-progress-value { background: var(--v-600); border-radius: var(--r-full); }
.bar::-moz-progress-bar { background: var(--accent-500); border-radius: var(--r-full); }

/* علامة الخطوة: رقمٌ ثم صحّ */
.step-mark {
  inline-size: 28px; block-size: 28px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  font-size: var(--t-13); font-weight: var(--w-semi);
  color: var(--fg-2);
}
[data-state="done"] .step-mark {
  background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok);
}
[data-state="skipped"] .step-mark { opacity: .55; }

/* حقلٌ صغير داخل صفّ — للسبب المكتوب بجانب زرّ القرار */
.input--sm {
  min-block-size: 36px;
  padding-block: var(--s-1);
  font-size: var(--t-13);
}

/* ══════════════════════════════════════════════════════════════
   النجوم — الاستثناء الوحيد للذهب
   ══════════════════════════════════════════════════════════════ */
.stars { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; }
.stars__i { flex: none; }
.stars__off { fill: var(--line-3); }
.stars__on { fill: var(--gold); }
.stars__n {
  margin-inline-start: var(--s-2);
  font-size: var(--t-12); color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

/* اختيار النجوم: صفٌّ معكوس فيعمل `:checked ~` من اليسار */
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-pick__l {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  cursor: pointer; border-radius: var(--r-sm);
}
.star-pick__l input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick__l svg path { fill: var(--line-3); }
.star-pick__l:hover svg path,
.star-pick__l:hover ~ .star-pick__l svg path,
.star-pick__l:has(input:checked) svg path,
.star-pick__l:has(input:checked) ~ .star-pick__l svg path { fill: var(--gold); }
.star-pick__l:has(input:focus-visible) { outline: 2px solid var(--accent-600); outline-offset: 2px; }


/* ══════════════════════════════════════════════════════════════
   الموجة ١٢ / الشريحة ٤ — الحدُّ الأدنى لما يُنقر (آخرُ الملفّ عمدًا)
   ══════════════════════════════════════════════════════════════
   ⚠ الموضعُ في آخر الملفّ مقصود: هذه حدودٌ دنيا تغلب أيَّ قاعدةٍ سابقة بالكثافة نفسها،
   وقد قيسَ حيًّا أنّ قواعدَ سابقةً كانت تغلبها بترتيبها لا بمعناها.
*/
.btn, .btn--sm, .btn--quiet, .btn--ghost, .chip, .input, .select, .textarea,
.input--sm, .topbar__input, .search input, .check, .pick {
  min-block-size: 32px;
}
@media (max-width: 959px) {
  .btn, .btn--sm, .btn--quiet, .btn--ghost, .chip, .input, .select, .textarea,
  .input--sm, .topbar__input, .search input, .check, .pick, .tabbar a, .nav a {
    min-block-size: 44px;
  }
  .btn, .btn--sm, .btn--quiet, .btn--ghost, .chip { min-inline-size: 44px; }
}

/* زرّ السلّة الموحَّد — نسخةٌ حرفيّة من design/add-to-cart.css */

/* ── ./add-to-cart.css ── */
/* زرّ السلّة — لونٌ واحدٌ مسطّح، بلا تدرّج، في كلّ المقاسات */
.add-to-cart {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--v-600); color: #fff; border: none;
  border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700;
  cursor: pointer;
}
/*
 * ⚠ ٤٤ بكسل حدًّا أدنى (تدقيقُ التخطيط الحيّ — الموجة ١٢): كان الحشوُ وحدَه يعطي ٤١ بكسل،
 * وهو دون حدّ الإبهام. وزرُّ السلّة على البطاقة أكثرُ ما يُضغط في المتجر كلِّه.
 */
.add-to-cart--card   { width: 100%; padding: 10px 0; font-size: 12.5px; margin-top: 7px; min-block-size: 44px; }
/*
 * ⚠ ١٤ بكسل على الجوّال: «أضف إلى السلّة» نصُّ الفعل الأوّل في المتجر، ومقاسُ ١٢٫٥ محسوبٌ
 * لبطاقةٍ ضيّقةٍ على شاشةٍ كبيرة. وعلى الهاتف تُقرأ البطاقةُ على بُعد ذراع — والزرُّ بعرض
 * البطاقة كاملًا فلا يضيق بالحرف.
 */
@media (max-width: 767.98px) { .add-to-cart--card { font-size: 14px; } }
.add-to-cart--page   { width: 100%; padding: 15px 0; font-size: 15.5px; }
.add-to-cart--sticky { padding: 13px 26px; font-size: 14.5px; max-width: 170px; flex-grow: 1; }
.add-to-cart:disabled { background: var(--hair-2); cursor: not-allowed; }

/* «اشترِ الآن» بجوار «أضف للسلّة» (الموجة ١٠ / الشريحة ٧ج): الزرُّ نفسه بأيقونة السلّة نفسها بدرجةٍ ثانويّة
   كـ.btn-secondary — والحدُّ ظلٌّ داخليّ لا border فيبقى الزرّان بارتفاعٍ واحد. والإضافةُ تبقى الفعلَ الأوّل. */
.add-to-cart[data-tone="secondary"] { background: var(--paper); color: var(--v-600); box-shadow: inset 0 0 0 1.5px var(--v-600); }
.buy-actions { display: flex; gap: 8px; }
.buy-actions > .add-to-cart { flex: 1 1 0; min-width: 0; }

/* الارتداد عند الفشل — من مهارة masar-motion، مرّتان ثمّ يتوقّف */
@keyframes cart-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.add-to-cart[data-failed="true"] { animation: cart-shake 160ms 2; }
@media (prefers-reduced-motion: reduce) { .add-to-cart[data-failed="true"] { animation: none; } }

/* الوضع الخفيف: الزرّ نموذج POST عاديّ بلا جافاسكربت */


/* ══════════════ الأيقونة ══════════════ */
.icon { flex: none; display: inline-block; vertical-align: middle; }

/*
 * الأيقونات الدلالية تنقلب مع الاتجاه.
 * سهم «التالي» يشير يسارًا في العربية ويمينًا في الإنجليزية. القلب
 * بـtransform لا بشكلين — فشكل واحد يخدم الاتجاهين ولا ينحرف أحدهما
 * عن الآخر عند التعديل.
 */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* علامة مسار — ألوانها مثبَّتة فلا تتبدّل بحسب السطح */
.mark { border-radius: var(--r-md); }


/* ══════════════ التخطيط والطباعة ══════════════ */

.page > * { min-inline-size: 0; }
.page { overflow-x: clip; background: var(--paper); color: var(--t1); font-family: var(--font-body); }
.wrap { inline-size: min(1296px, 100% - var(--s-5) * 2); margin-inline: auto; }

.dsp { font-family: var(--font-display); font-weight: 900; }
.num { font-variant-numeric: tabular-nums; }
.u-accent { color: var(--v-600); }
.u-center { text-align: center; }

.sec { padding-block: clamp(var(--s-10), 6vw, 64px); }
.sec--alt { background: var(--paper-2); }
.sec--flush { padding-block-start: 0; }
.sec__head { display: grid; gap: var(--s-3); justify-items: center; text-align: center; margin-block-end: clamp(var(--s-6), 3vw, 36px); }
.sec__head .lede { max-inline-size: 62ch; }

.h-sec { margin: 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.35; }
.h-card { margin: 0; font-size: var(--t-16); line-height: 1.5; }
.lede { margin: 0; font-size: clamp(var(--t-15), 1.4vw, var(--t-16)); line-height: 1.95; color: var(--t2); }
.lede strong { color: var(--t1); }
.eyebrow { font-size: var(--t-13); font-weight: var(--w-bold); color: var(--t3); letter-spacing: .5px; }
.pill { justify-self: start; align-self: flex-start; background: var(--v-100); color: var(--v-700); font-size: var(--t-13); font-weight: var(--w-bold); border-radius: var(--r-pill); padding: 7px 15px; }
.card { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; }

/* الأزرار — لونٌ واحدٌ مسطّح (نظام التصميم)، ودرجاتٌ ثانويّة بالحدّ لا بلونٍ آخر */
/* ⚠ الحدُّ border لا box-shadow: ظلُّ التحويم في components.css كان يمحو حدًّا مرسومًا بالظلّ. والتحويمُ عتامةٌ لا درجةٌ ثانية */
.btn--line { background: var(--paper); color: var(--v-600); border: 1.5px solid var(--v-600); }
.btn--inv { background: var(--paper); color: var(--v-900); }
.btn--ghost-inv { background: transparent; color: var(--paper); border: 1.5px solid color-mix(in srgb, var(--paper) 40%, transparent); }
.btn--line:hover, .btn--inv:hover, .btn--ghost-inv:hover { opacity: .9; }
.plan .btn { min-block-size: 44px; }
.btn--lg { min-block-size: 48px; }
.btn--sm { --btn-h: 44px; }

/* ══════════════ الترويسة ══════════════ */

.nav-top { position: sticky; inset-block-start: 0; z-index: 20; background: var(--paper); border-block-end: 1px solid var(--hair); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: 68px; }
.nav-start { display: flex; align-items: center; gap: 34px; min-inline-size: 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--t1); text-decoration: none; font-size: 21px; }
.brand--inv { color: var(--paper); font-size: 17px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { color: var(--t2); font-size: var(--t-14); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover { color: var(--v-600); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
/* ⚠ `min-inline-size` كذلك: «دخول» كلمةٌ قصيرة، وصندوقُها كان ٣١ بكسل عرضًا — دون حدّ الفأرة (٣٢) */
.nav-login { color: var(--t1); font-size: var(--t-14); text-decoration: none; min-block-size: 44px; min-inline-size: 44px; justify-content: center; display: inline-flex; align-items: center; }
@media (max-width: 960px) { .nav-links { display: none; } }
@media (max-width: 420px) { .nav-login { display: none; } }

/* ══════════════ البطل ══════════════ */

.hero { padding-block: clamp(var(--s-8), 5vw, 64px) clamp(var(--s-8), 4vw, 52px); }
.hero--page { background: var(--paper); border-block-end: 1px solid var(--hair); }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); } }
.hero__text { display: grid; gap: 20px; min-inline-size: 0; }
.hero__text--center { justify-items: center; text-align: center; max-inline-size: 820px; }
.hero__text--center .pill { justify-self: center; }
.hero__h { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: -.5px; }
.hero__lede { margin: 0; font-size: clamp(var(--t-15), 1.5vw, 17px); line-height: 1.95; color: var(--t2); }
.hero__lede strong { color: var(--t1); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 13px; }
.hero__acts--center { justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2) 24px; list-style: none; margin: 0; padding: 0; }
.chips li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--t2); }
.chips .ck { border-color: var(--ok); }

/* اللوحة المصغّرة — من الرموز، aria-hidden */
.peek { justify-self: center; inline-size: min(640px, 100%); border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 8px 28px color-mix(in srgb, var(--t1) 10%, transparent); }
.peek__bar { display: flex; align-items: center; gap: 5px; padding: 9px 14px; background: var(--paper-3); border-block-end: 1px solid var(--hair); }
.peek__bar i { inline-size: 9px; block-size: 9px; border-radius: var(--r-pill); background: var(--hair-2); }
.peek__bar span { flex: 1; margin-inline-start: 10px; background: var(--paper); border-radius: 6px; padding: 4px 12px; text-align: center; font-size: 11.5px; color: var(--t3); direction: ltr; }
.peek__body { background: var(--paper-2); padding: 18px; display: grid; gap: 14px; }
.peek__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 520px) { .peek__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.peek__kpi { padding: 13px; display: grid; gap: 3px; }
.peek__kpi span { font-size: 11px; color: var(--t3); }
.peek__kpi b { font-size: 19px; }
.peek__kpi em { font-style: normal; font-size: 10.5px; color: var(--v-600); }
.peek__kpi em.up { color: var(--ok); }
.peek__kpi em.warn { color: var(--warn); }
.peek__kpi--hi { border-color: var(--v-300); background: var(--v-50); }
.peek__kpi--hi span, .peek__kpi--hi b { color: var(--v-700); }
.peek__orders { padding: 14px 16px; display: grid; gap: 10px; }
.peek__row { display: flex; justify-content: space-between; align-items: center; gap: 11px; font-size: 12.5px; padding-block-end: 8px; border-block-end: 1px solid var(--paper-3); }
.peek__row:last-child { border: 0; padding: 0; }
.peek__row span { display: inline-flex; align-items: center; gap: 11px; min-inline-size: 0; }
.peek__row--head b { font-size: 13px; }
.st { font-style: normal; font-size: 10.5px; border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.st--warn { color: var(--warn); background: var(--warn-soft); }
.st--info { color: var(--info); background: var(--info-soft); }
.st--ok { color: var(--ok); background: var(--ok-soft); }
@media (max-width: 520px) { .peek__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } }

/* ══════════════ شريط القطاعات ══════════════ */

.strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); list-style: none; margin: 0; padding: 18px max(var(--s-5), calc((100% - 1296px) / 2)); background: var(--paper-2); border-block: 1px solid var(--hair); }
.strip li { font-size: var(--t-14); color: var(--t2); }
@media (max-width: 720px) { .strip { justify-content: center; } }

/* ══════════════ الفكرة ══════════════ */

.idea { display: grid; gap: 52px; align-items: center; }
@media (min-width: 960px) { .idea { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } }
.idea__text { display: grid; gap: 16px; }
.idea__flow { display: grid; gap: 14px; justify-items: stretch; }
.flow { display: flex; align-items: center; gap: 18px; border-radius: 16px; padding: 22px 24px; }
.flow--a { background: var(--v-50); }
.flow--b { background: var(--v-100); }
.flow__icon { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--v-600); color: var(--paper); }
.flow__body { display: grid; gap: 3px; }
.flow__body b { font-size: var(--t-15); }
.flow--b .flow__body b { color: var(--v-800); }
.flow__body span { font-size: 13.5px; color: var(--t2); }
.flow__arrow { justify-self: center; color: var(--v-600); transform: rotate(90deg); }

/* ══════════════ ما يجعلها يمنيّة ══════════════ */

.cards3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.feat { padding: 26px 24px; display: grid; gap: 11px; align-content: start; }
.feat--star { border-color: var(--v-300); }
.feat__top { display: flex; align-items: center; gap: 10px; }
.feat__icon { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 11px; background: var(--v-100); color: var(--v-600); }
.feat--star .feat__icon { background: var(--v-600); color: var(--paper); }
.feat__star { color: var(--v-600); font-weight: var(--w-bold); font-size: var(--t-13); }
.feat .h-card { font-size: 17px; }
.feat p { margin: 0; font-size: var(--t-14); color: var(--t2); line-height: 1.9; }

/* ══════════════ الخطوات ══════════════ */

.steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); list-style: none; margin: 0; padding: 0; }
.step { display: grid; gap: 11px; align-content: start; }
.step__n { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 11px; background: var(--v-600); color: var(--paper); font-size: 17px; }
.step p { margin: 0; font-size: 13.5px; color: var(--t2); line-height: 1.9; }

/* ══════════════ شريط الأرقام ══════════════ */

.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px; list-style: none; margin: 0; padding: 44px max(var(--s-5), calc((100% - 1296px) / 2)); background: var(--v-900); }
.band li { display: grid; gap: 5px; justify-items: center; text-align: center; }
.band__n { font-size: clamp(30px, 3.4vw, 38px); color: var(--paper); font-variant-numeric: tabular-nums; }
.band__n b { font-weight: inherit; }
.band li > span:last-child { font-size: 13.5px; color: var(--v-300); }

/* ══════════════ الأسعار ══════════════ */

.pricing { display: grid; gap: 28px; }
.period { justify-self: center; display: flex; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 3px; }
.period__opt { font-size: 13.5px; padding: 8px 20px; border-radius: 8px; color: var(--t2); cursor: pointer; user-select: none; min-block-size: 44px; display: inline-flex; align-items: center; }
.period__mo, .pricing:has(.yearly:checked) .period__yr { background: var(--v-600); color: var(--paper); font-weight: var(--w-bold); }
.pricing:has(.yearly:checked) .period__mo { background: transparent; color: var(--t2); font-weight: var(--w-medium); }
.pricing:has(.yearly:focus-visible) .period { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.yr { display: none; }
.pricing:has(.yearly:checked) .yr { display: inline; }
.pricing:has(.yearly:checked) .mo { display: none; }

.plans { display: grid; gap: 18px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.plan { padding: 26px 22px; display: grid; gap: 12px; position: relative; }
.plan--featured { border: 2px solid var(--v-600); box-shadow: 0 8px 28px color-mix(in srgb, var(--v-600) 10%, transparent); }
.plan__badge { position: absolute; inset-block-start: -12px; inset-inline-start: 22px; background: var(--v-600); color: var(--paper); font-size: 13px; font-weight: var(--w-bold); border-radius: var(--r-pill); padding: 5px 14px; }
.plan__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.plan__name { margin: 0; font-size: 19px; }
/*
 * ⚠ ١٣ بكسل لا ١١ (تدقيقُ التخطيط الحيّ — الموجة ١٢): «لمتجرٍ يبيع كلَّ يوم» و«نوصي بها» نصٌّ
 * يقرأه المشتري ليختار باقةً يدفع عليها شهريًّا — لا زخرفة. والأحدُّ في قاعدتنا ١٢ على الحاسوب
 * و١٤ على الجوّال؛ فالوسمُ ١٣ ثمّ ١٤ تحت ٧٦٨ حيث تُقرأ الشاشةُ على بُعد ذراع.
 */
.plan__tag { font-size: 13px; font-weight: var(--w-bold); color: var(--t2); background: var(--paper-3); border-radius: var(--r-pill); padding: 4px 10px; }
@media (max-width: 767.98px) { .plan__tag, .plan__badge { font-size: 14px; } }
.plan__tag--on { color: var(--v-600); background: var(--v-100); }
.plan__for { margin: 0; font-size: 12.5px; color: var(--t2); line-height: 1.75; min-block-size: 42px; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.plan__amount { font-size: clamp(28px, 2.6vw, 34px); color: var(--v-600); font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--t-13); color: var(--t2); }
.plan__note { font-size: var(--t-12); color: var(--t3); margin-block-start: -8px; }
.feats { display: grid; gap: 9px; list-style: none; margin: 0; padding: 15px 0 0; border-block-start: 1px solid var(--paper-3); }
.feats li { display: flex; gap: 8px; font-size: 12.8px; line-height: 1.7; align-items: flex-start; }
.feats li .ck { margin-block-start: 5px; }
/* علامةُ ✓ مرسومة: زاويةٌ مدوّرة بلون الفعل — بلا خطٍّ ولا SVG */
.ck { flex: none; display: inline-block; inline-size: 6px; block-size: 11px; border: solid var(--v-600); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline: 4px; vertical-align: middle; }
.feats__head { font-size: var(--t-12); font-weight: var(--w-bold); color: var(--t2); }
.empty-plans { padding: var(--s-6); display: grid; gap: var(--s-3); max-inline-size: 52ch; margin-inline: auto; }
.pays { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 0; }
.pays > span:first-child { font-size: var(--t-13); color: var(--t2); }
.pay { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 14px; font-size: 12.5px; }

/* ══════════════ المقارنة ══════════════ */

.tbl-wrap { overflow-x: auto; }
.cmp { inline-size: 100%; border-collapse: collapse; font-size: 13.2px; }
.cmp th, .cmp td { padding: 11px 10px; border-block-end: 1px solid var(--paper-3); text-align: center; color: var(--t2); }
.cmp thead th { font-size: 13.5px; font-weight: var(--w-bold); padding-block: 13px; border-block-end: 1.5px solid var(--hair); color: var(--t1); }
.cmp tbody th[scope="row"], .cmp thead th:first-child { text-align: start; color: var(--t1); font-weight: var(--w-medium); inline-size: 34%; }
.cmp .hi { background: var(--v-50); }
.cmp thead th.hi { color: var(--v-600); }
.cmp .no { color: var(--hair-2); }
.cmp tr.grp th { background: var(--v-50); color: var(--v-700); font-weight: var(--w-bold); text-align: start; font-size: 12.5px; }
.cmp__note { margin: var(--s-4) 0 0; font-size: 12.5px; color: var(--t3); text-align: center; }
/* فوق ٧٦٨ الجدولُ يسع الشاشة، فلا إشارةَ تمريرٍ تكذب على القارئ */
.cmp__hint { display: none; }
/* تحت ٧٦٨: الجدولُ يمرَّر داخل إطاره وعمودُ الميزة ثابتٌ ظاهر */
@media (max-width: 767.98px) {
  .cmp__hint {
    display: flex; align-items: center; gap: 6px; justify-content: flex-end;
    margin: 0 0 var(--s-3); font-size: 12.5px; color: var(--t3);
  }
  .cmp__hint svg { transform: scaleX(-1); flex: none; }
  .tbl-wrap { margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
  .cmp { min-inline-size: 620px; }
  .cmp tbody th[scope="row"], .cmp thead th:first-child { position: sticky; inset-inline-start: 0; background: var(--paper); inline-size: 150px; min-inline-size: 150px; z-index: 1; }
  .cmp tr.grp th { position: static; }
}

/* ══════════════ الأسئلة ══════════════ */

.faq-wrap { display: grid; gap: 28px; max-inline-size: 900px; }
.faq { display: grid; gap: 11px; }
.faq summary { padding: 18px 22px; cursor: pointer; font-weight: var(--w-bold); font-size: var(--t-15); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); list-style: none; min-block-size: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--v-600); font-size: 20px; font-weight: var(--w-bold); line-height: 1; }
.faq details[open] { border-color: var(--v-300); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0; padding: 0 22px 18px; font-size: var(--t-14); color: var(--t2); line-height: 1.95; }

/* ══════════════ الدعوة والتذييل ══════════════ */

.cta { background: var(--v-900); padding-block: clamp(var(--s-10), 6vw, 66px); }
.cta__in { display: grid; gap: 20px; justify-items: center; text-align: center; }
.cta__h { margin: 0; font-size: clamp(26px, 3.4vw, 38px); color: var(--paper); line-height: 1.35; }
.cta__in > p { margin: 0; font-size: 16.5px; color: var(--v-300); max-inline-size: 560px; line-height: 1.9; }
.cta__login { font-size: var(--t-14) !important; }
.cta__login a { color: var(--paper); }

.ftr { background: var(--t1); padding-block: 40px var(--s-5); color: var(--t3); }
.ftr__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); }
.ftr__brand { display: grid; gap: 11px; max-inline-size: 320px; }
.ftr__brand p { margin: 0; font-size: var(--t-13); line-height: 1.9; }
.ftr__cols { display: flex; flex-wrap: wrap; gap: var(--s-6) 64px; }
.ftr__col { display: grid; gap: 4px; align-content: start; }
.ftr__col strong { color: var(--paper); font-size: 13.5px; margin-block-end: 5px; }
/*
 * ⚠ ٤٤ لا ٣٦ (تدقيقُ التخطيط الحيّ — الموجة ١٢): روابطُ التذييل كانت ٣٦ بكسل ارتفاعًا، ومن يصيبها
 * بإبهامه على هاتفٍ يخطئ إلى جارتها. والحدُّ في قاعدة المستودع ٤٤ على الجوّال — وهو حدُّ الإبهام لا ذوق.
 * وعلى الحاسوب تبقى ٣٦ كافيةً للفأرة، والكثافةُ هناك تخدم من يقرأ.
 */
.ftr__col a { color: var(--t3); font-size: var(--t-13); text-decoration: none; min-block-size: 44px; display: inline-flex; align-items: center; }
@media (min-width: 768px) { .ftr__col a { min-block-size: 36px; } }
.ftr__col a:hover { color: var(--paper); }
.ftr__btm { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-8); padding-block-start: var(--s-4); border-block-start: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); font-size: var(--t-12); }
.ftr__made { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ══════════════ صفحة الثيمات ══════════════ */

.themes { display: grid; gap: 28px; }
.theme { display: grid; overflow: hidden; }
@media (min-width: 900px) { .theme { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }
.theme__shot { margin: 0; padding: 22px 22px 34px; background: var(--paper-3); }
/* الجوّالُ يُقاس على لقطة الحاسوب لا على الشكل — الشكلُ يطول بطول عمود النصّ على الشاشات العريضة */
.theme__frame { position: relative; }
.theme__shot img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-sm); border: 1px solid var(--hair); background: var(--paper); }
.theme__desk { aspect-ratio: 960 / 600; }
.theme__shot .theme__phone { position: absolute; inset-block-end: -14px; inset-inline-start: -10px; inline-size: 34%; aspect-ratio: 390 / 780; box-shadow: var(--sh-2); }
.theme__body { display: grid; gap: 14px; padding: 26px 24px; align-content: start; }
.theme__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.theme__plan { margin: 0; font-size: var(--t-14); color: var(--t2); }
.theme__plan b { color: var(--t1); }
.theme__cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.theme__cols strong { font-size: var(--t-13); color: var(--v-700); }

/* ══════════════ الحركة ══════════════ */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ══════════════ الأقسام الحيّة (الموجة ٧) — بثيمات مسار الأربعة ══════════════ */

/*
 * المتجر المصغّر: درجةُ الثيم وخطُّه من راديو «كيف يبدو متجرك» عبر `:has()` — بلا جافاسكربت.
 * كلُّ ثيمٍ درجةٌ من البنفسجيّ المعتمد؛ والسكربت يضيف السلّة والحاسبة والعدّ لا الشكل.
 */
.demo { display: grid; gap: var(--s-6); --demo-accent: var(--v-600); --demo-accent-soft: var(--v-50); --demo-on: var(--paper); --demo-font: var(--font-body); }
.demo:has(input[name="demo-theme"][value="aden"]:checked)      { --demo-accent: var(--v-700); --demo-accent-soft: var(--v-100); }
.demo:has(input[name="demo-theme"][value="sanaa"]:checked)     { --demo-accent: var(--v-800); --demo-accent-soft: var(--v-100); }
.demo:has(input[name="demo-theme"][value="hadramout"]:checked) { --demo-accent: var(--v-900); --demo-accent-soft: var(--paper-3); }
.demo:has(input[name="demo-font"][value="cairo"]:checked) { --demo-font: var(--font-display); }

.demo__controls { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .demo__controls { grid-template-columns: 1fr 1fr; } }
.switch { margin: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--paper); display: grid; gap: var(--s-3); min-inline-size: 0; }
.switch legend { font-weight: var(--w-semi); font-size: var(--t-14); padding: 0 var(--s-2); }
.switch__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.switch__hint { margin: 0; font-size: var(--t-12); color: var(--t2); }

.chip-r, .tswatch { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-block-size: 44px; padding: 0 var(--s-3); border: 1px solid var(--hair-2); border-radius: var(--r-pill); font-size: var(--t-13); cursor: pointer; background: var(--paper); }
.chip-r input, .tswatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-r:has(input:checked), .tswatch:has(input:checked) { border-color: var(--v-600); background: var(--v-50); color: var(--v-600); font-weight: var(--w-semi); }
.chip-r:has(input:focus-visible), .tswatch:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tswatch__dot { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--v-600); box-shadow: inset 0 0 0 2px var(--paper); }
.tswatch--aden .tswatch__dot { background: var(--v-700); }
.tswatch--sanaa .tswatch__dot { background: var(--v-800); }
.tswatch--hadramout .tswatch__dot { background: var(--v-900); }

.phone { max-inline-size: 420px; margin-inline: auto; inline-size: 100%; border: 1px solid var(--hair-2); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-3); overflow: hidden; font-family: var(--demo-font); display: grid; }
.phone__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); background: var(--demo-accent); color: var(--demo-on); }
.phone__brand { font-weight: var(--w-semi); font-family: var(--demo-font); }
.phone__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--demo-on) 14%, transparent); color: inherit; cursor: pointer; }
.phone__count { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; min-inline-size: 20px; block-size: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--paper); color: var(--demo-accent); font-size: var(--t-11); font-weight: var(--w-bold); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.phone__count.bump { animation: bump var(--dur-2) var(--spring); }
@keyframes bump { 50% { transform: scale(1.35); } }

.demo__pane { display: none; padding: var(--s-4); }
.demo[data-step="shop"] [data-pane="shop"], .demo[data-step="cart"] [data-pane="cart"],
.demo[data-step="checkout"] [data-pane="checkout"], .demo[data-step="done"] [data-pane="done"] { display: block; }

.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.dp { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3); border: 1px solid var(--hair); border-radius: var(--r-md); min-inline-size: 0; }
.dp__img { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--demo-accent-soft); color: var(--v-600); }
.dp__cat { font-size: var(--t-11); color: var(--t2); }
.dp__name { margin: 0; font-size: var(--t-13); font-weight: var(--w-medium); line-height: var(--lh-snug); font-family: var(--demo-font); }
.dp__price { font-weight: var(--w-semi); font-variant-numeric: tabular-nums; color: var(--demo-accent); font-size: var(--t-14); }
.p-aden { display: none; }
.demo:has(input[name="demo-region"][value="aden"]:checked) .p-aden { display: inline; }
.demo:has(input[name="demo-region"][value="aden"]:checked) .p-sanaa { display: none; }

.cart, .chk, .done { display: grid; gap: var(--s-3); }
.cart__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cart__line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); align-items: center; font-size: var(--t-13); padding-block: var(--s-2); border-block-end: 1px solid var(--hair); }
.cart__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart__qty { display: inline-flex; align-items: center; gap: var(--s-1); }
.cart__qty b { min-inline-size: 1.5em; text-align: center; font-variant-numeric: tabular-nums; }
.qbtn { inline-size: 36px; block-size: 36px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); background: var(--paper); cursor: pointer; font-size: var(--t-16); line-height: 1; }
.cart__amt { font-variant-numeric: tabular-nums; font-weight: var(--w-semi); white-space: nowrap; }
.cart__empty { color: var(--t2); font-size: var(--t-13); }
.cart__totals { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--t-13); }
.cart__totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.cart__grand { font-weight: var(--w-semi); font-size: var(--t-15); color: var(--demo-accent); }
.cart__acts { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
/* درجةُ الثيم للأسطح وحدها — الأزرارُ والأيقونات --v-600 (القاعدة ٣) */
.cart__acts .btn:not(.btn--quiet) { background: var(--v-600); color: var(--paper); }
.chk__pay { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chk__pay legend { font-size: var(--t-13); font-weight: var(--w-medium); margin-block-end: var(--s-2); }
.chk__err { margin: 0; color: var(--bad); font-size: var(--t-13); }
.done { text-align: center; justify-items: center; }
.done__ok { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.done p { margin: 0; font-size: var(--t-14); color: var(--t2); }
.done__toast { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--v-900); color: var(--paper); font-size: var(--t-13); }
.demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin: 0; color: var(--t2); }

/* بلا جافاسكربت: أزرار السلّة لا تفعل شيئًا — تُخفى ويبقى المعرض معرضًا */
.no-js .phone__cart, .no-js [data-add], .no-js .demo__pane:not([data-pane="shop"]) { display: none !important; }

/* الحاسبة */
.calc { display: grid; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--paper); }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .calc__note { grid-column: 1 / -1; } }
.calc__in { display: grid; gap: var(--s-5); align-content: start; }
.range { inline-size: 100%; accent-color: var(--v-600); block-size: 44px; margin: 0; }
.calc__out { display: grid; gap: var(--s-3); margin: 0; align-content: start; }
.calc__out > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block-end: var(--s-2); border-block-end: 1px solid var(--hair); }
.calc__out dt { color: var(--t2); font-size: var(--t-14); }
.calc__out dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--w-semi); }
.calc__bad { color: var(--bad); }
.calc__hero { border: 0 !important; padding: var(--s-4); border-radius: var(--r-md); background: var(--v-50); }
.calc__hero dt, .calc__hero dd { color: var(--v-700); }
.calc__hero dd { font-size: clamp(var(--t-18), 3vw, 28px); }
.calc[data-worth="no"] .calc__hero { background: var(--paper-3); }
.calc__note { margin: 0; font-size: var(--t-12); color: var(--t2); }

/* الوضع الخفيف */
.lite { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .lite { grid-template-columns: 1fr 1fr; } }
.lite__pane { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--paper); min-inline-size: 0; }
.lite__tag { font-size: var(--t-12); font-weight: var(--w-semi); color: var(--t2); }
.lite__pane--lite .lite__tag { color: var(--v-700); }
.lite__mock { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--paper-2); }
.lite__img { block-size: 120px; border-radius: var(--r-sm); background: var(--v-100); }
.lite__t { block-size: 10px; border-radius: var(--r-pill); background: var(--hair); inline-size: 70%; }
.lite__t--w { inline-size: 90%; block-size: 14px; background: var(--hair-2); }
.lite__t--s { inline-size: 40%; }
.lite__mock--lite { background: var(--paper); }
.bar { block-size: 10px; border-radius: var(--r-pill); background: var(--paper-3); overflow: hidden; }
.bar i { display: block; block-size: 100%; inline-size: var(--w); border-radius: inherit; background: var(--v-600); transform-origin: right; }
@media (prefers-reduced-motion: no-preference) { .lite[data-shown] .bar i { animation: bar-in 900ms var(--ease) both; } }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lite__kb { font-size: var(--t-13); color: var(--t2); }
.lite__kb b { font-variant-numeric: tabular-nums; color: var(--t1); }

/*
 * ══════════════ مقاسُ النصّ على الجوّال ══════════════
 * ⚠ ١٤ بكسل حدًّا أدنى تحت ٧٦٨ (تدقيقُ التخطيط الحيّ — الموجة ١٢، القاعدةُ في `masar-ui-standard`).
 * هذه الأصنافُ كانت ١٢٫٥–١٣٫٨ على الحاسوب — وهو مقاسٌ محسوبٌ لكثافةٍ يُقرأ بها الجدولُ على شاشةٍ
 * كبيرة. لكنّ الزائرَ اليمنيَّ يفتح الموقعَ من هاتفٍ في الغالب، وسطرُ مزايا الباقة هناك يُقرأ على
 * بُعد ذراع. فالحاسوبُ يبقى كما صُمّم، والجوّالُ يرتفع — ولا يُخفَّض الحدُّ في التدقيق.
 */
@media (max-width: 767.98px) {
  .pay,
  .chips li,
  .period__opt,
  .feats li,
  .plan__for,
  .cmp__note,
  .cmp__hint,
  .ftr__brand p,
  .ftr__col a,
  .step p,
  .band li > span:last-child,
  .flow__body span,
  .theme__cols strong { font-size: 14px; }
  /*
   * ⚠ وجدولُ المقارنة معها: يمرَّر أفقيًّا تحت ٧٦٨ أصلًا (عرضُه ٦٢٠ ثابت)، فرفعُ مقاسِه لا يضيف
   * فيضًا — ويجعل «عدد المنتجات: ٥٬٠٠٠» مقروءًا لمن يقارن الباقات على هاتفه قبل أن يدفع.
   */
  .cmp, .cmp th, .cmp td, .cmp tr.grp th, .cmp thead th { font-size: 14px; }
}