/* Every value comes from shared/design/tokens.css. No literals here. */

/* الحشوةُ والحافّةُ داخلَ العرض المعلَن: بدونها كلُّ صندوقٍ بعرضٍ 100% وحشوةٍ يفيض عن أبيه. */
*, *::before, *::after { box-sizing: border-box; }

/* سمةُ hidden تغلب أيَّ display لاحق: بدونها لوحةٌ بـ display:flex تبقى ظاهرةً وهي «مخفيّة». */
[hidden] { display: none !important; }

/* ===== سلّمُ أحجامِ الأيقونات ===== */
/* أربعةُ مقاساتٍ لا أرقامٌ متفرّقةٌ في كلِّ صفحة (نظام الأيقونات — VISUAL_IDENTITY §8).
   مقاسٌ لا رمزُ هوية: الرموزُ لونٌ ومسافةٌ وخطّ، وهذه أبعادُ مكوّنٍ واحد. */
:root {
    --icon-sm: 20px;   /* داخل صفٍّ أو زرٍّ صغير */
    --icon-md: 28px;   /* بطاقةُ خدمةٍ أو بلاطة */
    --icon-lg: 32px;   /* بطاقةُ قسمٍ أو عنوانُ قسم */
    --icon-xl: 64px;   /* حالةُ فراغٍ أو رسمٌ توضيحي */
}

/* الأيقونةُ ترث لونَ أبيها دائماً (<c>currentColor</c>) ولا تنكمش داخل صفٍّ مرن. */
.rk-icon { flex: none; }
.rk-icon-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.rk-icon-md { inline-size: var(--icon-md); block-size: var(--icon-md); }
.rk-icon-lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.rk-icon-xl { inline-size: var(--icon-xl); block-size: var(--icon-xl); }

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    /* ارتفاع سطرٍ عربيٍّ مريح وتنعيمُ الحروف: الهوية 4.0 §3. */
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* محتوى HTML الأولي الذي تقرؤه محركات البحث ويظهر حتى يبدأ Blazor؛ يستبدله التطبيق عند الإقلاع. */
.seo-fallback {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-screen);
}

.seo-fallback nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-field-gap);
}

/* الحركة كلها بمنحنى واحد ومدّةٍ واحدة، وتُطفأ لمن يطلب تقليلها. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* عرضُ الحاوية من الرموز (1100px): القشرةُ تطبيقُ هاتفٍ على كل مقاس لا موقعٌ عريض. */
/* القشرةُ عمودٌ مرنٌ بارتفاعِ الشاشةِ على الأقلّ، وصفُّ المحتوى هو من يتمدّد — فيهبط
   التذييلُ إلى الأسفلِ في الصفحاتِ القصيرةِ بدل أن يرتفع تحتَ الفلاترِ مباشرةً ويترك نصفَ
   الشاشةِ خلفيّةً فارغة.

   **ولا ارتفاعَ ثابتاً ولا حيلة:** `min-block-size` حدٌّ أدنى لا مقاسٌ مفروض، فالصفحةُ
   الطويلةُ تتجاوزه كما كانت. و`100dvh` قبلها `100vh`: الأولى تتبع انكماشَ شريطِ متصفّحِ
   الهاتف، والثانية احتياطٌ لمن لا يعرفها فلا يبقى المتصفّحُ القديمُ بلا حدٍّ أصلاً. */
.page {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-screen);
}

/* المتمدِّدُ هو صفُّ المحتوى وحدَه: الشريطُ العلويُّ والتذييلُ بمقاسِهما. */
.page > .shell-row { flex: 1 1 auto; }

.bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    /* RC-F-03: أربعةُ أزرارٍ بـ48px (القائمة · البحث · السلة · الجرس) لا تسعها 207px (هاتفٌ 414 بتكبيرِ 200%):
       تنزل الأفعالُ سطراً ثانياً ولا تُوسّع الصفحة، والأهدافُ تبقى بمقاسِها. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-field-gap);
    min-height: var(--appbar-h);
    /* يمتد إلى حافّتي الشاشة ثم يردّ حشوته: شريطٌ زجاجيٌّ لا بطاقةٌ وسط الصفحة. */
    margin-block-end: var(--space-section);
    margin-inline: calc(-1 * var(--space-screen));
    padding-inline: var(--space-screen);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-block-end: 1px solid var(--color-divider);
}

/* هامشُ سطحِ المكتب فوق 1024px (brain/06 · التباعد): الرمزُ كان معلَناً بلا قاعدةٍ تقرأه في
   هذه الورقة، فالصفحةُ تبقى بهامشِ الهاتفِ على شاشةٍ عريضة. والشريطُ اللاصقُ يردّ الهامشَ
   الجديدَ بمقدارِه كي يبقى ممتداً إلى الحافّتين لا بطاقةً وسطَ الصفحة. */
@media (min-width: 64rem) {
    .page { padding-inline: var(--space-web-desktop); }

    .bar {
        margin-inline: calc(-1 * var(--space-web-desktop));
        padding-inline: var(--space-web-desktop);
    }

    /* **والتذييلُ معه**: تعليقُه يقول إنه يخرج من حشوةِ الحاوية «كما يفعل الشريطُ العلوي
       تماماً»، وكان يردّ 12px بينما صارت الحشوةُ 28px — فيبقى مُزاحاً ستةَ عشرَ بكسلاً عن
       كلِّ حافّةٍ وتظهر شريطا خلفيّةٍ على جانبيه. عيبٌ سابقٌ لم يكن يُرى إلا بعد تمريرِ صفحةٍ
       طويلة، وصار يُرى عند الفتحِ بعد أن هبط التذييلُ إلى أسفلِ الشاشةِ في الصفحاتِ القصيرة. */
    .site-footer {
        margin-inline: calc(-1 * var(--space-web-desktop));
        padding-inline: var(--space-web-desktop);
    }
}

.bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
    margin-inline-start: auto;
}

/* علامةُ الهوية: الشعارُ المعدنيُّ يحمل أرضيّتَه الداكنة معه — على شريطٍ فاتحٍ يُقرأ مربّعاً
   مستديرَ الحواف كأيقونةِ تطبيق، وبلا أرضيّةٍ يذوب الكرومُ في الأبيض. */
.brand-mark {
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 10px;
    object-fit: cover;
}

.brand {
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
}

.switch {
    min-height: var(--min-touch);
    padding-inline: var(--space-section);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-royal-blue);
    color: var(--color-text-on-color);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    box-shadow: var(--shadow-fab);
    cursor: pointer;
}

/* الأزرارُ كلها بحركةٍ واحدة: نزولٌ خفيفٌ عند المرور وضغطةٌ محسوسة عند النقر. */
.switch, .primary-button, .gradient-button, .ghost-button, .state-retry, .link-button {
    transition: background var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease),
        color var(--dur-control) var(--ease), transform var(--dur-control) var(--ease),
        box-shadow var(--dur-control) var(--ease);
}

.switch:hover, .primary-button:hover:not(:disabled), .gradient-button:hover, .ghost-button:hover:not([disabled]) {
    transform: translateY(-1px);
}

.switch:active, .primary-button:active, .gradient-button:active, .ghost-button:active {
    transform: scale(0.98);
}

.display {
    margin: 0 0 var(--space-field-gap);
    font-size: var(--text-display-size);
    font-weight: var(--text-display-weight);
}

.title {
    margin: 0 0 var(--space-field-gap);
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
}

.body {
    margin: 0;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
}

/* أولويّةٌ أعلى عمداً: قاعدةُ `.card` تلي هذه في الورقة، فبالأولويّةِ المتساويةِ
   كانت تدهس التدرّجَ ولونَ النصِّ الأبيض: بطلُ قشرةِ صاحبِ النادي صار أبيضَ على أبيض. */
.card.gradient-card, .gradient-card {
    margin-block-start: var(--space-card-gap);
    padding: var(--space-section);
    border-radius: var(--radius-card);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-gradient-card);
    color: var(--color-text-on-color);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-screen);
    background: var(--color-crimson);
    color: var(--color-text-on-color);
}

/* ==== حركةُ التحميلِ الرسمية ====
   ثلاثةُ مقاساتٍ لا أرقامٌ متفرّقة، ولكلٍّ موضعُه: `page` لانتظارٍ حقيقيٍّ يملك الشاشة،
   و`section` لقسمٍ داخل صفحة، و`inline` لتصفّحِ الصفحاتِ وللقوائمِ المنسدلةِ — حيث الحركةُ
   الكبيرةُ ضجيجٌ لا طمأنة. */
.rk-loading {
    display: grid;
    place-items: center;
    margin-inline: auto;
}

.rk-loading-art {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
}

.rk-loading-page    { inline-size: 160px; block-size: 160px; }
.rk-loading-section { inline-size: 96px;  block-size: 96px; }
.rk-loading-inline  { inline-size: 40px;  block-size: 40px; }

/* البديلُ الساكن: حلقةٌ بلونِ الهوية تُرسم في أولِ إطارٍ بلا جافاسكربتَ ولا ملف. تبقى
   ظاهرةً إن سقط المشغّلُ أو ملفُّ الحركة، وتُخفى حين يعلن المشغّلُ أنه رسم (`is-live`). */
.rk-loading-fallback {
    inline-size: 60%;
    block-size: 60%;
    border: 3px solid var(--color-divider);
    border-block-start-color: var(--color-crimson);
    border-radius: var(--radius-full);
    animation: rk-loading-spin 900ms linear infinite;
}

.rk-loading-art.is-live .rk-loading-fallback { display: none; }

@keyframes rk-loading-spin { to { transform: rotate(360deg); } }

/* شاشةُ الإقلاع: تملأ المنفذَ لأنها الانتظارُ الوحيدُ الذي لا شيءَ غيرَه على الشاشة. */
.rk-boot {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-card-gap);
    background: var(--color-background);
}

.rk-loading-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    text-align: center;
}

/* من طلب تقليلَ الحركة: الحلقةُ تقف. والمشغّلُ يقف بنفسه (rk-loading.js يفحص matchMedia)
   لأن القاعدةَ العامّةَ أعلاه تُطفئ حركةَ CSS ولا تبلغ رسماً بـrequestAnimationFrame. */
@media (prefers-reduced-motion: reduce) {
    .rk-loading-fallback { animation: none; }
}

.state {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-card-gap);
}

/* رسمُ الحالةِ الفارغة (Icons8 Color). المقاسُ `--icon-xl` وهو الرمزُ المخصَّصُ لحالةِ
   الفراغِ أصلاً: الأصلُ 100px فيُرسم 64px بكثافةٍ 1.56× — يبقى حادّاً على الشاشاتِ المضاعفة
   ولا يُكبَّر فيتحبّب. و`has-art` تتوسّط الرسمَ ورسالتَه وزرَّه معاً، فلا صورةٌ وسطى ونصٌّ
   ملتصقٌ بالحافّة. تُضاف للحالةِ الفارغةِ وحدَها، فحالتا الخطإِ والتحميلِ كما كانتا. */
.state.has-art {
    align-items: center;
    text-align: center;
}

.state-art {
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    /* الصورةُ زخرفيةٌ فلا تُلتقط بالفأرة ولا تُسحب فوق الزرِّ تحتها. */
    pointer-events: none;
}

.state-message {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-text-size);
    font-weight: var(--text-text-weight);
}

.state[data-state="error"] .state-message {
    color: var(--color-crimson);
}

.state-retry {
    align-self: start;
    min-height: var(--min-touch);
    padding-inline: var(--space-section);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-navy);
    color: var(--color-text-on-color);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    cursor: pointer;
}

/* ---- شاشات المصادقة: القيم كلها رموز من tokens.css ---- */
/* عرض الحاوية الوحيد الذي لا رمز له في نظام التصميم؛ بوحدة نسبية لا ببكسل منسوخ من المصدر. */
.auth-card {
    display: grid;
    grid-template-columns: 45fr 55fr; /* نفس نسبة اللوحين في الشاشة المصدرية */
    max-inline-size: 60rem;
    margin-inline: auto;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-level2);
}

@media (max-width: 60rem) {
    .auth-card { grid-template-columns: minmax(0, 1fr); }
}

/* بطاقةٌ بلا لوحِ ترويج: عمودٌ واحدٌ بعرضٍ يناسب استمارةً لا نصفَ بطاقة. */
.auth-card.single {
    /* minmax(0, 1fr) لا 1fr: الأخيرُ لا ينكمش دون أعرضِ محتواه، فعلى 207px (هاتفٌ على 200%) كانت
       البطاقةُ 228px وتُزيح صفحةَ الدخولِ والسلّةِ 33px أفقياً (H-CW). */
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 30rem;
}

.auth-promo {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
    padding: var(--space-section);
    background: var(--gradient-primary);
    color: var(--color-text-on-color);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
    padding: var(--space-section);
    background: var(--color-surface);
}

.auth-form form {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
}

.headline {
    margin: 0;
    font-size: var(--text-headline-size);
    font-weight: var(--text-headline-weight);
}

.on-color { color: var(--color-text-on-color); }

.eyebrow {
    margin: var(--space-section) 0 var(--space-field-gap);
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
}

.muted {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-body-size);
    font-weight: var(--text-text-weight);
}

.text {
    margin: 0;
    font-size: var(--text-text-size);
    font-weight: var(--text-text-weight);
}

.help {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
}

.mono { font-variant-numeric: tabular-nums; }

.chip, .tag {
    align-self: start;
    padding: var(--space-field-gap) var(--space-card-gap);
    border-radius: var(--radius-full);
    background: var(--color-divider);
    color: var(--color-text-primary);
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
}

.auth-promo .chip {
    background: var(--color-night-navy);
    color: var(--color-text-on-color);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    margin: 0;
    padding: 0;
    border: 0;
}

.field-label {
    font-size: var(--text-label-size);
    font-weight: var(--text-chip-weight);
}

.input {
    flex: 1;
    min-inline-size: 0;
    min-height: var(--min-touch);
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    outline: none;
}

/* النصُّ النائبُ كان يرث وزنَ الجسم (‎--text-body-weight: 700‎) ولونَ النصِّ الأساسيَّ معاً،
   فيُقرأ قيمةً مكتوبةً لا تلميحاً — يخفّ إلى الوزنِ العاديِّ واللونِ الثانوي بنصفِ شفافية.
   **الخفوتُ مأمونٌ هنا**: كلُّ حقلٍ يحمل ‎<label>‎ حقيقياً فوقه، فالنائبُ مثالٌ لا معلومةً
   يعتمد عليها أحد. والشفافيةُ صريحةٌ لأن فَيَرفُكس يضع 0.54 افتراضاً على ‎::placeholder‎
   فيهبط اللونُ مرّتين ويختفي. */
.input::placeholder {
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    opacity: 0.5;
}

.choice-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    cursor: pointer;
}

.info-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding: var(--space-card-gap);
    border-radius: var(--radius-medium);
    background: var(--color-background);
}

/* **صندوقٌ على أرضيّةِ الصفحةِ لا داخلَ بطاقة**: خلفيّةُ ‎--color-background‎ هي أرضيّةُ
   الصفحةِ نفسُها، فالصندوقُ يختفي في الموضعِ الذي وُضع فيه ليُرى — خبرٌ مهمٌّ يقرأ فقرةً
   عابرة. هذه النسخةُ تجلس على أرضيّةِ الصفحةِ بحدٍّ وسطحٍ كالبطاقة. */
.info-box.on-canvas {
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-level1);
    margin-block-end: var(--space-card-gap);
}

.info-box.on-color {
    background: var(--color-night-navy);
    color: var(--color-text-on-color);
}

.info-box .title { font-size: var(--text-chip-size); }

.primary-button {
    min-height: var(--min-touch);
    padding-inline: var(--space-section);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-navy);
    color: var(--color-text-on-color);
    font-family: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    box-shadow: var(--shadow-level1);
    cursor: pointer;
}

.primary-button:disabled {
    background: var(--color-border);
    box-shadow: none;
    cursor: not-allowed;
}

.gradient-button {
    min-height: var(--min-touch);
    margin-block-start: auto;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--gradient-horizontal);
    color: var(--color-text-on-color);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    cursor: pointer;
}

.link-button {
    min-height: var(--min-touch);
    border: 0;
    background: transparent;
    color: var(--color-crimson);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    text-decoration: underline;
    cursor: pointer;
}

.link-button:disabled {
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: not-allowed;
}

.link { color: var(--color-crimson); }

/* رابطُ «تعديل بيانات النادي» في بطلِ صاحبِ النادي كان `.link` قرمزياً على التدرّجِ القرمزيّ
   وارتفاعُه 22px. صار حبّةً بحدٍّ أبيضَ ونصٍّ أبيض — لونُ النصِّ الذي يحمله التدرّجُ أصلاً —
   بهدفِ لمسٍ ‎--min-touch‎. */
.gradient-card .hero-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--min-touch);
    margin-block-start: var(--space-card-gap);
    padding-inline: var(--space-section);
    border: 1px solid var(--color-text-on-color);
    border-radius: var(--radius-full);
    color: var(--color-text-on-color);
    font-weight: var(--text-chip-weight);
    text-decoration: none;
}

.form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---- شاشة الهبوط ---- */
/* بطاقةُ الصدر بنصفِ طولِها السابق (طلبُ المالك 2026-09-12): العرضُ كما هو، والطولُ
   يُقتطع من ثلاثةِ مواضعَ معاً — الحاشيةُ الرأسيةُ نصفُها، والفجواتُ أصغر، وقياسا العنوانِ
   والنصِّ أدنى درجةً. **والقياسُ هو الحاسم**: العنوانُ الطويلُ بقياسِ العرضِ كان ثلاثةَ
   أسطر، وبقياسِ العنوانِ الفرعيِّ يصير سطرين — وهما نصفُ الطولِ لا الحاشية.
   والسقفُ معلَن: العنوانُ فقد حجمَ «العرض» فصار كعنوانٍ فرعيٍّ كبير. */
/* نصٌّ يُقرأ ولا يُرى: خارجَ الشاشةِ بالقصِّ لا بـdisplay:none، فيبقى في شجرةِ الوصول. */
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* منطقةُ المحتوى تقبل التركيزَ برمجياً (tabindex="-1") ليصلها رابطُ التخطّي ولينتقل إليها
   التركيزُ عند كلِّ تغيّرِ مسار — **وبلا إطارٍ حول نصفِ الشاشة** حين يكون النقلُ برمجياً.
   و`:focus-visible` يبقى بإطارِه: من وصلها بلوحةِ المفاتيح يُخبَر أين صار. */
#main:focus:not(:focus-visible) { outline: none; }

/* رابطُ التخطّي وحده يعود من الخفاء حين يصله الـTab: يظهر فوق الشريط اللاصق ثم يغيب. */
.skip-link:focus {
    position: fixed;
    inset-block-start: var(--space-field-gap);
    inset-inline-start: var(--space-field-gap);
    z-index: 60;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: var(--space-field-gap) var(--space-card-gap);
    clip-path: none;
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-level2);
}

.hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding: var(--space-card-gap) var(--space-section);
    border-radius: var(--radius-card);
    /* صورةُ بطاقةِ الترويسة (site/cards/hero/image) طبقةٌ فوق التدرّج، ومسارُها يُكتب من الـJS
       بعد الرسم لأن عنوانَ الخادمِ لا تعرفه الأنماط. فإن لم تُرفع صورةٌ (404) لم تُرسم طبقتُها
       وبقي التدرّجُ كما هو تماماً — ولذلك التعتيمُ مزجٌ ضربيٌّ بالتدرّجِ نفسِه لا طبقةَ
       سوادٍ ثالثة: الضربُ يُعتم الصورةَ فيبقى النصُّ الأبيضُ مقروءاً، ولا أثرَ له بلا صورة. */
    background-image: var(--card-image, none), var(--gradient-primary);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-gradient-card);
    color: var(--color-text-on-color);
}

.hero .display {
    font-size: var(--text-title-size);
    line-height: 1.25;
}

.hero .body {
    font-size: var(--text-text-size);
    line-height: 1.4;
}

.hero .chip {
    background: var(--color-night-navy);
    color: var(--color-text-on-color);
}

/* ترويسةُ الرئيسية وحدَها: صورةٌ صافيةٌ بلا نصٍّ فوقها (طلبُ المالك 2026-09-17). النصُّ مضى
   فلا حاجةَ للتعتيمِ الضربيِّ الذي كان يجعله مقروءاً، ولا لحشوةٍ ولا لونِ نصّ. صفحةُ «من نحن»
   تبقى على الترويسةِ النصّيةِ نفسِها بلا مساس. */
.hero-media {
    aspect-ratio: 16 / 9;
    max-block-size: 20rem;
    padding: 0;
    background-blend-mode: normal;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding: var(--space-section);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-level1);
    transition: border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease);
}

/* الرفعُ عند المرور على الأجهزة ذات المؤشر وحدها: على اللمس تعلق الحالةُ بعد النقر. */
@media (hover: hover) {
    .card:hover { box-shadow: var(--shadow-level2); }
}

/* ---- إكمال الحساب والشروط والجدار: بنية w_auth_05 (عمودان 7/5) والقيم كلها رموز ---- */
.onboarding-grid {
    display: grid;
    grid-template-columns: 7fr 5fr; /* نسبة العمودين في الشبكة الاثني عشرية للشاشة المصدرية */
    gap: var(--space-section);
    align-items: start;
}

@media (max-width: 60rem) {
    /* RC-F-04: minmax(0, 1fr) لا 1fr — كما في ‎.auth-card.single‎: الأخيرُ لا ينكمش دون أعرضِ محتواه (207px). */
    .onboarding-grid { grid-template-columns: minmax(0, 1fr); }
}

.onboarding-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
}

/* شعارُ شاشةِ الدخول: عرضٌ نسبيٌّ بسقفٍ ثابت، والنسبةُ محفوظةٌ بـauto فلا يقفز التخطيطُ
   قبل تحميل الصورة (السمتان width/height في الوسم تحجزان مكانَه). */
/* استمارةُ الدخول: خياراتُ «نوع الحساب» تتوسّط عرضَ البطاقة كالأزرارِ فوقها وتحتها،
   بدل أن تتكدّس في جهةِ البداية. التسميةُ تبقى في محلِّها مع بقيةِ تسمياتِ الحقول. */
.auth-form .choice-group {
    justify-content: center;
}

.auth-logo {
    position: relative;
    align-self: center;
    inline-size: min(14rem, 65%);
    /* ظلٌّ خفيفٌ يرفع الشعارَ عن البطاقة فحسب. التوهّجُ القرمزيُّ الذي كان هنا أُزيل: على
       بطاقةٍ فاتحةٍ يُقرأ ضباباً وردياً حول الحوافِ لا بريقاً، وصاحبُ المشروع رآه «شوائب». */
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.18));
}

.auth-logo img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

/* لمعةٌ معدنيةٌ تمرّ على الشعار كلَّ بضعِ ثوانٍ. **الحاضنُ لا الصورة**: الـimg لا يحمل ::after.
   والقناعُ هو الشعارُ نفسُه فلا يلمع إلا المعدن، لا المستطيلُ الشفافُ حوله. */
.auth-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 38%, rgb(255 255 255 / 0.55) 47%, rgb(255 255 255 / 0.95) 50%,
        rgb(255 255 255 / 0.55) 53%, transparent 62%);
    background-size: 250% 100%;
    background-position: 0% 0;
    -webkit-mask-image: url("../logo.webp");
    mask-image: url("../logo.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    animation: rk-sheen 5s var(--ease) infinite;
}

@keyframes rk-sheen {
    0%, 60% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-logo::after { animation: none; }
}

/* ===== جرسُ الإشعاراتِ ولوحتُه المنسدلة ===== */

/* حاضنٌ نسبيٌّ للجرس: اللوحةُ تُعلَّق عليه لا على الشريط، فتبقى تحت الجرسِ نفسِه
   أيّاً كان عرضُ الشاشة. */
.bell {
    position: relative;
    display: flex;
}

/* حجابٌ شفّافٌ يغطّي الصفحة فيُمسك النقرَ خارج اللوحةِ ويغلقها. أخفضُ من اللوحةِ طبقةً
   وأعلى من كلِّ ما دونها. */
.bell-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.bell-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-field-gap));
    /* تنسدل من جهةِ نهايةِ السطر في كلا الاتجاهين: يمينِ العربية ويسارِ الإنكليزية. */
    inset-inline-end: 0;
    z-index: 51;
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    inline-size: min(22rem, calc(100vw - 2 * var(--space-screen)));
    /* سقفٌ للطولِ مع تمريرٍ داخليّ: عشرةُ إشعاراتٍ طويلةٍ لا تتجاوز الشاشة. */
    max-block-size: min(26rem, 70vh);
    overflow-y: auto;
    padding: var(--space-card-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-level2);
}

.bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-field-gap);
}

.bell-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* البندُ زرٌّ بعرضِ اللوحةِ ونصٍّ محاذٍ لأولِ السطر: صفٌّ يُضغط كلُّه لا رابطٌ داخل نص. */
.bell-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    inline-size: 100%;
    padding: var(--space-field-gap);
    border: 0;
    border-radius: var(--radius-medium);
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--dur-control) var(--ease);
}

.bell-item:hover:not([disabled]) { background: var(--color-surface-soft); }
.bell-item[disabled] { cursor: default; }

.bell-item-title {
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
}

/* غيرُ المقروءِ بنقطةٍ بلونِ التوقيعِ في أولِ السطر: الفرقُ يُرى بلمحةٍ بلا عمودِ حالة. */
.bell-list li[data-read="False"] .bell-item-title::before {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-end: var(--space-field-gap);
    border-radius: var(--radius-full);
    background: var(--color-crimson);
}

/* ===== تبويبا الدخولِ والتسجيل، وأزرارُ المزوّدين ===== */

/* شريحتان متجاورتان بعرضٍ متساوٍ: التبويبُ القائمُ يحمل لونَ التوقيع، والآخرُ سطحٌ هادئ.
   الحدُّ على الحاضنِ لا على كلِّ شريحة، فلا يزدوج الخطُّ بينهما. */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-background);
}

.auth-tab {
    min-height: var(--min-touch);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    cursor: pointer;
    transition: background var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}

.auth-tab.current {
    background: var(--color-crimson);
    color: var(--color-text-on-color);
}

/* فاصلُ «أو»: خطٌّ واحدٌ يمرّ خلف الكلمة، بلا عنصرَي خطٍّ يدويين على الجانبين. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
    color: var(--color-text-secondary);
    font-size: var(--text-help-size);
}

.auth-divider::before,
.auth-divider::after {
    flex: 1;
    block-size: 1px;
    background: var(--color-border);
    content: "";
}

.provider-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-field-gap);
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--text-chip-weight);
    cursor: pointer;
    transition: background var(--dur-control) var(--ease), transform var(--dur-control) var(--ease);
}

/* أيقونةُ المزوّدِ بعلامتِه الأصلية: قياسٌ ثابتٌ لا يتمدّد مع الزرّ، وتبقى ملوّنةً حتى
   على الزرِّ المعطَّل — الشفافيةُ على الزرِّ كلِّه تخفتها معه. */
.provider-icon {
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
}

.provider-button:hover:not([disabled]) { background: var(--color-surface-soft); }
.provider-button:active:not([disabled]) { transform: scale(0.98); }
.provider-button[disabled] { opacity: var(--opacity-disabled); cursor: default; }

.input.boxed {
    padding: var(--space-field-gap) var(--space-card-gap);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background);
    transition: border-color var(--dur-control) var(--ease),
        box-shadow var(--dur-control) var(--ease),
        background var(--dur-control) var(--ease),
        transform var(--dur-control) var(--ease);
}

/* المرورُ يوضّح الحدَّ فحسب: إشارةُ «هذا قابلٌ للكتابة» لا إشارةُ تركيز. */
.input.boxed:hover:not(:disabled):not(:focus):not(:focus-within) {
    border-color: var(--color-text-secondary);
    background: var(--color-surface);
}

/* التركيزُ حلقةٌ قرمزيةٌ شفّافةٌ ورفعةُ بكسلٍ واحد. **وهي حلقةُ تركيزٍ حقيقيةٌ لا زينة**:
   ‎.input‎ يُلغي ‎outline‎، فبلا هذا الظلِّ لا يعرف مستعملُ المفتاحِ أين هو.
   ويبقى ‎outline‎ الشفافُ لمن يتصفّح بوضعِ التبايُنِ العالي — فيه تُهمَل الظلال.
   و«focus-within» لغلافِ البحث (‎div.input.boxed‎ حول حقلٍ بلا إطار — الماركت والطلبات والصيانة
   والأجهزة): الغلافُ لا يُبأَّر أبداً فكان الحقلُ يُبأَّر بلا أيِّ أثرٍ مرئيّ (H-CW، WCAG 2.4.7). */
.input.boxed:focus,
.input.boxed:focus-within {
    border-color: var(--color-crimson);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-crimson) 16%, transparent),
        0 2px 8px color-mix(in srgb, var(--color-crimson) 12%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .input.boxed { transition-property: border-color, box-shadow, background; }
    .input.boxed:focus, .input.boxed:focus-within { transform: none; }
}

.textarea {
    min-height: var(--min-touch);
    resize: vertical;
    font-size: var(--text-text-size);
    font-weight: var(--text-text-weight);
}

.consent {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
    min-height: var(--min-touch);
    padding: var(--space-card-gap);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background);
    cursor: pointer;
}

.coords {
    padding: var(--space-field-gap) var(--space-card-gap);
    border-radius: var(--radius-button);
    background: var(--color-background);
    color: var(--color-navy);
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
}

/* A-47: الجدارُ حوارٌ يحجب ما تحته لا لوحةٌ في ذيل الصفحة؛ 95 فوق أعلى طبقةٍ
   قائمة (90) فلا يعلوه شيء. الحجابُ بمزيجِ رمزِ حجابِ الدرجِ نفسِه بلا قيمةٍ جديدة. */
.wall {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-screen);
    background: color-mix(in srgb, var(--color-night-navy) 45%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.wall .card {
    max-inline-size: 30rem;
    inline-size: 100%;
    max-block-size: 100%;
    overflow-y: auto;
    box-shadow: var(--shadow-level3);
}

/* حارسا التركيز: محطّتا Tab بلا مساحةٍ ولا أثرٍ بصري، وعنصرٌ بقياسٍ صفرٍ
   يبقى قابلاً للتركيز (بخلاف display: none). */
.focus-guard {
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    outline: none;
}

/* ---- سجل الأجهزة وطلبات الصيانة: القيم كلها رموز من tokens.css ---- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-card-gap);
    margin-block-end: var(--space-field-gap);
}

/* رابطُ الإجراء في ترويسةِ القسم («عرض الكل») كان 28px ارتفاعاً — أصغرَ من هدفِ اللمس.
   الحيّزُ وحدَه يكبر إلى ‎--min-touch‎: لا يكبر الخطُّ ولا يتزحزح النصُّ لأن الترويسةَ فلكسٌ
   متمركز. مقصورٌ على `.page-head` عمداً: `.link` داخلَ الجملِ يبقى سطرياً كما هو. */
.page-head > .link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--min-touch);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-card-gap);
    margin-block-end: var(--space-card-gap);
}

.filters .field { flex: 1 1 16rem; }

.ghost-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    text-decoration: none;
    cursor: pointer;
}

.ghost-button[disabled] { opacity: var(--opacity-disabled); cursor: default; }

/* مُلصَقُ اختيارِ الصور: الحقلُ الأصليُّ مقصوصٌ خارجَ الشاشة، فالتبئيرُ يقع عليه ولا يُرى.
   فالحلقةُ تُنقل إلى المُلصَقِ بـ«focus-within» — ولولاها لتاه مستخدمُ لوحةِ المفاتيح.
   وهي حلقةُ ‎.input.boxed:focus‎ نفسُها لا حلقةٌ ثانيةٌ تُخترع، ويبقى ‎outline‎ الشفافُ
   لمن يتصفّح بوضعِ التبايُنِ العالي — فيه تُهمَل الظلال. */
.file-pick:focus-within {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-crimson) 16%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-field-gap);
}

/* T-975: سؤالُ «متوفر 7 من 10» وخياراتُه — مجموعةٌ واحدةٌ تحت اسمِ البند لا سطورٌ متفرقة. */
.line-shortfall {
    display: grid;
    gap: var(--space-field-gap);
    margin-top: var(--space-field-gap);
}

.table-scroll {
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-level1);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-text-size);
}

.table th,
.table td {
    padding: var(--space-card-gap);
    text-align: start;
    border-bottom: 1px solid var(--color-divider);
    white-space: nowrap;
}

.table th {
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-card-gap);
    margin-block-start: var(--space-card-gap);
}

.photo-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-card-gap);
}

.photo { margin: 0; }

.photo-image {
    max-inline-size: 14rem;
    border-radius: var(--radius-medium);
}

/* ---- شبكة صفحات المرحلة 2: عمودا 8/4 من الشبكة الاثني عشرية في w_ind_02_1 وw_ind_03_2 وw_ind_04_1 وw_ind_04_2 ---- */
.detail-grid {
    display: grid;
    grid-template-columns: 8fr 4fr; /* نسبة العمودين في الشاشات المصدرية الأربع */
    gap: var(--space-section);
    align-items: start;
}

@media (max-width: 60rem) {
    /* RC-F-04: minmax(0, 1fr) لا 1fr — كما في ‎.auth-card.single‎: الأخيرُ لا ينكمش دون أعرضِ محتواه (207px). */
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ترتيب DOM يتبع المصدر: العمود العريض أولاً إلا في w_ind_03_2 حيث يسبقه الضيق. */
.detail-grid .aside-first { order: -1; }

@media (max-width: 60rem) {
    .detail-grid .aside-first { order: 0; }
}

.detail-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
    min-inline-size: 0;
}

.detail-column.sticky-column {
    position: sticky;
    inset-block-start: var(--space-section);
}

@media (max-width: 60rem) {
    .detail-column.sticky-column { position: static; }
}

/* ---- رأس القسم المرقّم: شارة الرقم ثم العنوان بجهة البداية، وشريحة الإلزام بجهة النهاية (w_ind_04_1) ---- */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-field-gap);
}

.section-head > .section-head-start {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-section);
    block-size: var(--space-section);
    border-radius: var(--radius-button);
    background: var(--color-divider);
    color: var(--color-navy);
    font-size: var(--text-label-size);
    font-weight: var(--text-chip-weight);
}

.pill {
    padding: 0 var(--space-field-gap);
    border-radius: var(--radius-full);
    background: var(--color-background);
    color: var(--color-navy);
    font-size: var(--text-label-size);
    font-weight: var(--text-chip-weight);
}

.pill.optional { color: var(--color-text-secondary); }

/* ---- الخط الزمني للحالات: شريط أفقي بخمس خانات كما في w_ind_04_2 ---- */
.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-field-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-field-gap);
    min-inline-size: 0;
}

/* صف العلامة والوصلة: العلامة ثم الوصلة تمتد نحو النهاية، فتنقلب مع الاتجاه من نفسها. */
.step-track-row {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
}

.step-marker {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-section);
    block-size: var(--space-section);
    border-radius: var(--radius-full);
    background: var(--color-divider);
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    font-weight: var(--text-chip-weight);
}

.step-track {
    flex: 1;
    block-size: var(--space-field-gap);
    border-radius: var(--radius-full);
    background: var(--color-divider);
}

.timeline-entry:last-child .step-track { visibility: hidden; }

.timeline-entry[data-step="done"] .step-marker,
.timeline-entry[data-step="done"] .step-track {
    background: var(--color-navy);
    color: var(--color-text-on-color);
}

.timeline-entry[data-step="current"] .step-marker {
    background: var(--color-royal-blue);
    color: var(--color-text-on-color);
    box-shadow: var(--shadow-fab);
}

.step-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    align-items: start;
}

.step-label {
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    color: var(--color-text-secondary);
}

.timeline-entry[data-step="done"] .step-label { color: var(--color-navy); }
.timeline-entry[data-step="current"] .step-label { color: var(--color-royal-blue); }

/* ---- شريط مؤشرات الرأس (w_ind_04_2) ---- */
.metric-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-section);
    padding: var(--space-card-gap);
    border-radius: var(--radius-medium);
    background: var(--color-background);
}

.metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
}

.metric .text { font-weight: var(--text-chip-weight); }

/* ---- شبكةُ بطاقاتِ القوائم: عمودان، بطاقةٌ برأسٍ متدرجٍ وبلاطاتِ بياناتٍ وصفِّ إجراءين ----
   (w_ind_02_2 أصلاً للأجهزة، **وطلباتُ الصيانةِ تستعمل البطاقةَ نفسَها** — صفُّ مُحدِّداتٍ
   لا نسخةٌ ثانيةٌ من الإعلانات، فلا تنفرد إحداهما بتحسينٍ لاحق. سقفٌ معلَن: بطاقةٌ ثالثةٌ
   تعني أنّ الوقت حان لاسمٍ محايدٍ واحدٍ بدل الصفوف.) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-section);
}

/* ---- شريطُ أدواتِ قوائمِ قشرةِ العميل: سطرُ وصفٍ · بحثٌ ومرشّحٌ · عدّادٌ · حالةُ فراغ ----

   **مشتركٌ بين `/devices` و`/requests`** (ولذلك `list-` لا `devices-`): قائمتان بالبنيةِ
   نفسِها — بحثٌ نصّيٌّ ومرشّحُ تعدادٍ واحد — ونسخةٌ ثانيةٌ من ثلاثين سطرَ CSS لأجلِ اسمٍ
   مختلفٍ ديْنٌ لا خدمة.

   الشريطُ سطرٌ واحدٌ على الشاشةِ الواسعةِ ينكسر وحدَه على الهاتف بـ`flex-wrap` — لا استعلامُ
   وسطٍ ثالثٌ لقاعدةٍ يقولها اللفُّ نفسُه. ولا نسخةَ من أوراقِ الماركت هنا: `catalog.css`
   مُعلَنٌ اختياريّاً في `index.html` (غيابُه لا يكسر شيئاً)، فبناءُ شريطِ صفحةٍ أخرى عليه
   يجعل غيابَه كسراً. */
.list-sub { margin-block-end: var(--space-card-gap); }

.list-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-field-gap);
    margin-block-end: var(--space-card-gap);
}

/* الأيقونةُ داخلَ إطارِ الحقلِ لا فوقَه، فلا صندوقان فوق بعضهما. */
.list-search {
    display: flex;
    flex: 2 1 14rem;
    align-items: center;
    gap: var(--space-field-gap);
    min-inline-size: 0;
}

.list-search-icon { flex-shrink: 0; color: var(--color-text-secondary); }

/* الحقلُ الداخليُّ يرث الإطارَ من غلافه: لا حدَّ ولا حشوةَ رأسيةً مضاعفة. */
.list-search > .input { padding: 0; min-inline-size: 0; }

.list-filter {
    flex: 1 1 10rem;
    min-inline-size: 0;
    min-block-size: var(--min-touch);
}

/* سطرُ المساعدةِ يملأ سطرَه وحدَه تحت الحقلين ولا يُزاحمهما على العرض. */
.list-help { flex-basis: 100%; margin: 0; }

.list-count { margin-block: 0 var(--space-field-gap); }

/* «لا أجهزة بعد»: حالةٌ بلا رسمِ Icons8 عمداً (القائمةُ المغلقةُ لا صورةَ فيها لهذا المعنى،
   ولا تُضاف أصولٌ جديدة)، فأيقونةُ السجلِّ نائبتُها والتوسيطُ محلّيٌّ هنا. */
.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-field-gap);
    text-align: center;
}

.list-empty > .rk-icon { color: var(--color-text-secondary); }

/* إجراءا البطاقةِ يقتسمان عرضَها على الهاتف: بحجمِ نصِّهما كانا يتركان نصفَ السطرِ فارغاً
   إلى جانبِهما، ويصير هدفُ اللمسِ أضيقَ ممّا يحتمله إبهامٌ على شاشةٍ بعرضِ 320. */
@media (max-width: 30rem) {
    .device-card .row-actions > *,
    .request-card .row-actions > *,
    .order-card .row-actions > *,
    /* ومخارجُ «متوفر 7 من 10» معها: زرّان بنصفِ سطرٍ لكلٍّ منهما على شاشةِ 320 أضيقُ من إبهام. */
    .cart-line .row-actions > * { flex: 1 1 100%; }
}

/* ===== الرئيسية: شريطُ البحثِ وبطاقتا الخدمات ===== */

/* حقلُ البحثِ ينفتح تحت الشريطِ العلويّ: حقلٌ يتمدّد وزرٌّ بجانبه، وعلى الشاشةِ الضيّقةِ
   يهبط الزرُّ سطراً بعرضِ الحقل. */
.bar-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-field-gap);
    margin-block-end: var(--space-section);
}

.bar-search .input { flex: 1 1 10rem; min-inline-size: 0; }

/* فاصلُ الأقسامِ على الرئيسية: الشريطُ الأفقيُّ والشبكةُ ينتهيان بفجوةِ قسمٍ كاملةٍ قبل
   العنوانِ التالي، فلا يلتصق «الأقسام» بـ«الماركت». */
.cat-rail,
.product-grid { margin-block-end: var(--space-section); }

/* ===== شريطُ أقسامِ المتجر الأفقيّ (الرئيسية) ===== */

/* سطرٌ واحدٌ يُسحب بالعرضِ مع لقطةٍ عند كلِّ بطاقة، ولا يلتفّ ولا يمدّ الصفحةَ أفقياً. */
.cat-rail {
    display: flex;
    gap: var(--space-card-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-field-gap);
    /* شريطُ التمرير يظهر عند السحبِ وحده على الأنظمة التي تُخفيه. */
    scrollbar-width: thin;
}

.cat-card {
    flex: 0 0 auto;
    /* مستطيلٌ عريضٌ وأيقونةٌ فوق الاسمِ يتوسّطان البطاقةَ أفقياً ورأسياً. */
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-snap-align: start;
    inline-size: 7.5rem;
    min-block-size: 3.5rem;
    padding: var(--space-card-gap) var(--space-field-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-level1);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease);
}

.cat-card .rk-icon { color: var(--color-text-primary); }

/* «الأقسام» يلتصق بشرائحه: رابطُ «عرض الكل» في الترويسةِ يحمل هدفَ لمسٍ بارتفاعِ ‎--min-touch‎،
   فيترك تحت السطرِ فراغاً لا يراه أحدٌ إلا كمسافة. الشريطُ يصعد فيه. */
.page-head + .cat-rail { margin-block-start: calc(-1 * var(--space-card-gap)); }

/* شريطُ الرئيسية: القسمُ شريحةٌ نصّيةٌ صغيرةٌ بلا أيقونةٍ ولا مربّع (طلبُ المالك 2026-09-18) —
   البطاقةُ المربّعةُ تبقى في صفحةِ الأقسامِ وحدَها. */
.cat-rail .cat-card {
    inline-size: auto;
    min-block-size: var(--min-touch);
    padding-inline: var(--space-section);
    border-radius: var(--min-touch);
    box-shadow: none;
    white-space: nowrap;
}

/* شبكةُ صفحةِ الأقسام: البطاقةُ نفسُها التي في شريطِ الرئيسية، لكنها تلتفّ بدل أن تُسحب.
   الأعمدةُ تتكيّف بلا استعلاماتِ وسائطَ لكلِّ مقاس، والبطاقةُ تمتدّ لعرضِ عمودها. */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-card-gap);
}

.cat-grid .cat-card {
    inline-size: auto;
    scroll-snap-align: none;
}

/* شريطُ سياقِ المرشّح: أيقونةُ القسمِ واسمُه وزرُّ إزالته. */
.filter-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-card-gap);
    margin-block-end: var(--space-card-gap);
    padding: var(--space-field-gap) var(--space-card-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    background: var(--color-surface);
}

.filter-context .rk-icon { color: var(--color-crimson); }

@media (hover: hover) {
    .cat-card:hover {
        border-color: var(--color-crimson);
        box-shadow: var(--shadow-level2);
    }
}

.device-card,
.request-card,
.order-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    gap: 0;
}

.device-card-head,
.request-card-head,
.order-card-head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-section);
    padding: var(--space-card-gap);
    border-radius: var(--radius-medium);
    background: var(--gradient-primary);
    color: var(--color-text-on-color);
}

.device-card > .device-card-head,
.request-card > .request-card-head,
.order-card > .order-card-head { border-radius: 0; }

.device-card-badges,
.request-card-badges,
.order-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-field-gap);
}

.device-card-head .chip,
.device-card-head .tag,
.request-card-head .chip,
.request-card-head .tag,
.order-card-head .chip,
.order-card-head .tag {
    background: var(--color-night-navy);
    color: var(--color-text-on-color);
}

/* الزرّان المتدرجُ والأساسيُّ يُستعملان رابطاً أيضاً (بطاقةُ الجهازِ ودعوةُ حالةِ الفراغ
   وسبعةُ مواضعَ غيرُهما)، فيلزمهما ما يلزم الأزرار.

   **و`.primary-button` كان ناقصاً هنا:** القاعدةُ بُنيت للمتدرّج وحدَه، فكلُّ
   `<a class="primary-button">` في التطبيق — تسعةُ مواضعَ — كان يُرسم بخطٍّ تحته لأنه
   رابطٌ قبل أن يكون زرّاً. `.ghost-button` نجا لأن قاعدتَه تحمل `text-decoration: none`
   أصلاً. أُمسك في المراجعةِ البصريةِ لهذه الصفحة، وأُصلح **في مصدرِه لا في نسخةٍ محليّة**. */
a.gradient-button,
a.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: 0;
    padding-inline: var(--space-section);
    text-decoration: none;
}

.help.on-color, .device-card-head .help, .request-card-head .help,
.order-card-head .help { color: var(--color-text-on-color); }

.device-card-title,
.request-card-title,
.order-card-title {
    margin: 0;
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
}

.device-card-body,
.request-card-body,
.order-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
    padding: var(--space-card-gap);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-field-gap);
}

.tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding: var(--space-field-gap) var(--space-card-gap);
    border-radius: var(--radius-medium);
    background: var(--color-background);
}

.tile.wide { grid-column: 1 / -1; }

/* رابطٌ داخلَ بلاطة (جهازُ الطلبِ ← صفحةُ الجهاز) هدفُ لمسٍ كامل: كان سطرَ نصٍّ بارتفاعِ
   28px، وهو ما أمسكته المراجعةُ البصرية. الحشوةُ أفقيّةٌ صفرٌ عمداً كي يبقى النصُّ محاذياً
   لبقيةِ قيمِ البلاطاتِ في العمودِ نفسِه. */
.tile > .link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--min-touch);
}

/* ---- قائمة المواصفات في العمود الضيق (w_ind_03_2) ---- */
.spec-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.spec-list > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-field-gap);
    padding-block: var(--space-field-gap);
    border-block-end: 1px solid var(--color-divider);
}

.spec-list > div:last-child { border-block-end: 0; }

.spec-list .text { font-weight: var(--text-chip-weight); }

/* ===== لوحة التوقيع بالإصبع (القرار 35) ===== */
.signature {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    margin-block: var(--space-card-gap);
}

.signature-pad {
    display: block;
    width: 100%;
    /* ارتفاع يكفي رسم توقيع بالإصبع على الهاتف، وهو مضاعف هدف اللمس لا رقم مخترع. */
    height: calc(var(--min-touch) * 3);
    touch-action: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    color: var(--color-text-primary);
}

.signature-pad:focus-visible { outline: 2px solid var(--color-royal-blue); }

/* بنود العقد: **الترقيم من <ol> نفسه** فلا رقم مكتوب في الـmarkup، والمسافات من الرموز. */
.terms {
    margin: 0 0 var(--space-card-gap);
    padding-inline-start: var(--space-screen);
}

.terms li {
    margin-block-end: var(--space-field-gap);
}

/* ==========================================================================
   الهوية 4.0 — قشرةُ تطبيقٍ على كل مقاس (المرجع: docs/VISUAL_IDENTITY.md §12).
   لا قيمة حرفية هنا: كلُّ لونٍ وزاويةٍ وظلٍّ ومدّةٍ رمزٌ من tokens.css، وكلُّ
   خاصيةٍ منطقيةٌ لا فيزيائية فينقلب التخطيط مع الاتجاه من نفسه.
   ========================================================================== */

/* ---------- قرصُ الأيقونة (البرغر والجرس) ---------- */
.icon-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: var(--min-touch);
    block-size: var(--min-touch);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}

.icon-button:hover { background: var(--color-surface-soft); color: var(--color-navy); }

/* شارةُ العددِ الحمراءُ فوق أيقونةِ السلة: قرصٌ صغيرٌ في زاويةِ الأيقونةِ بجهةِ النهاية،
   وحدُّه بلونِ خلفيةِ الشريطِ فينفصل عن الأيقونةِ تحته. الرقمُ الكبيرُ يمدُّ القرصَ بيضويّاً
   ولا يقصّه. */
.cart-link { position: relative; }

.count-badge {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 5px;
    border: 2px solid var(--color-background);
    border-radius: var(--radius-full);
    background: var(--color-crimson);
    color: var(--color-text-on-color);
    font-size: 11px;
    font-weight: var(--text-display-weight);
    line-height: 1;
    pointer-events: none;
}

.icon-button svg { inline-size: 22px; block-size: 22px; }

/* عنوانُ الشاشة وسط الشريط: يقصّ بالنقاط ولا يلتف سطرين. */
.bar-title {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- الدرج الجانبي: مخفيٌّ حتى يفتحه البرغر، على كل مقاس ---------- */
.drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 69;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--color-night-navy) 45%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
}

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 70;
    inline-size: min(var(--drawer-w), 86vw);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: var(--shadow-level3);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* مخفيٌّ خارج حافّة البداية؛ الإزاحة تنقلب مع الاتجاه بقاعدة RTL أدناه. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 280ms var(--ease), visibility 0s linear 280ms;
}

[dir="rtl"] .drawer { transform: translateX(100%); }

.page.drawer-open .drawer { transform: none; visibility: visible; transition: transform 280ms var(--ease); }
.page.drawer-open .drawer-scrim { opacity: 1; visibility: visible; transition: opacity 250ms var(--ease); }

/* رأسُ الدرج: التدرجُ الأساسي واسمُ العلامة ووصفُها. */
.drawer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-field-gap);
    padding: var(--space-section) var(--space-screen);
    background: var(--gradient-primary);
    color: var(--color-text-on-color);
    text-align: center;
}

.drawer-brand .brand { font-size: var(--text-headline-size); }

.drawer-mark {
    inline-size: min(9rem, 60%);
    block-size: auto;
    /* ظلٌّ واحدٌ يفصل الكرومَ عن التدرُّجِ تحته؛ بلاه تتلاشى حوافُّه الفاتحةُ في اللون. */
    filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.35));
}

/* اسمُ العلامةِ لاتينيٌّ دائماً، فيُلفّ بـ‎<bdi dir="ltr">‎ كي لا يعيد محرّكُ الاتجاهِ ترتيبَه
   داخل صفحةٍ عربية. والتفريقُ بين حرفيه من الهوية لا من تقديرٍ بصري. */
.wordmark {
    font-size: var(--text-title-size);
    font-weight: var(--weight-extrabold);
    letter-spacing: 0.18em;
    line-height: 1;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-field-gap);
}

.drawer-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border-radius: var(--radius-card);
    color: var(--color-text-primary);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    text-decoration: none;
    transition: background var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}

.drawer-nav a:hover { background: var(--color-surface-soft); color: var(--color-navy); }

.drawer-nav svg { flex-shrink: 0; inline-size: 20px; block-size: 20px; color: var(--color-navy); }

/* ---------- زرُّ الرجوع: كبسولةٌ بكلمةٍ لا أيقونةٌ صامتة ---------- */
.back-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-field-gap);
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-navy);
    color: var(--color-text-on-color);
    font-family: inherit;
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
    text-decoration: none;
    /* RC-F-06: لا nowrap ولا عرضَ فوق الحاوية — «My maintenance requests» عند 207px (تكبيرُ 200%) كان
       يدفع الصفحةَ 5px جانباً؛ الآن يلتفّ النصُّ حين لا يتّسع ولا يتغيّر شيءٌ حين يتّسع. */
    max-inline-size: 100%;
    box-shadow: var(--shadow-level1);
    cursor: pointer;
}

.back-pill:active { transform: scale(0.97); }
.back-pill svg { inline-size: 20px; block-size: 20px; }

/* أيقونةٌ اتجاهيةٌ تنعكس مع الاتجاه: السهمُ المرسومُ للعربية يشير يميناً، والإنكليزيةُ تعكسه
   (قاعدةُ انعكاس الأيقونات في brain/06_DESIGN_TOKENS.md). */
[dir="ltr"] .back-pill svg { transform: scaleX(-1); }

/* ---------- شريطُ الشرائح: صفٌّ واحدٌ يُسحب أفقياً لا ثلاثةُ صفوفٍ تتكدّس ---------- */
.nav-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-field-gap);
    overflow-x: auto;
    /* الشريطُ نفسه ضجيجٌ بصريٌّ مع السحب؛ والقصُّ على الحافّتين يقول «هنا مزيد». */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
    mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
    padding-block-end: 2px;
    margin-block-end: var(--space-card-gap);
}

.nav-rail::-webkit-scrollbar { display: none; }

.nav-rail > * { flex-shrink: 0; }

/* ---------- رأسُ القسم: خطٌّ متدرجٌ قصيرٌ تحت العنوان ---------- */
.page-head .headline::after {
    content: "";
    display: block;
    inline-size: 36px;
    block-size: 3px;
    margin-block-start: 4px;
    border-radius: var(--radius-full);
    background: var(--gradient-horizontal);
}

/* ---------- شبكةُ المنتجات: عمودان على الهاتف، ثلاثةٌ ثم أربعةٌ بعده ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-card-gap);
}

@media (min-width: 40rem) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* H-CW: **التكبيرُ لا الهاتف.** دون 15rem (240 بكسلاً CSS) لا يصل إليه إلا تكبيرُ المتصفّح أو النصّ
   (هاتفٌ 360–414 على 200% = 180–207): ثلاثةُ أعمدةٍ هناك بطاقاتٌ عرضُها 39px تفيض منها الأسعارُ
   فتُزيح الصفحةَ كلَّها أفقياً (33–45px مقيسة). عمودان هنا وحدَه؛ قرارُ «ثلاثةٌ على كلِّ عرض»
   قائمٌ على كلِّ شاشةٍ حقيقية. والكسرُ «anywhere» ملجأٌ أخيرٌ لا يمسّ نصّاً يتّسع له سطرُه. */
/* (الوسيطُ نفسُه في catalog.css بعد «.product-list» — تلك تأتي بعد هذه الورقة فتغلبها.) */
.product-card { overflow-wrap: anywhere; }

/* بطاقةُ المنتج: صورةٌ مربعةٌ ثم اسمٌ بسطرين ثم صفُّ السعر والإجراء. */
.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    min-inline-size: 0;
    padding: var(--space-field-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-level1);
    transition: border-color var(--dur-card) var(--ease), box-shadow var(--dur-card) var(--ease),
        transform var(--dur-card) var(--ease);
}

@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-6px);
        border-color: var(--color-border);
        box-shadow: var(--shadow-level2);
    }
    .product-card:hover .product-media img { transform: scale(1.06); }
}

.product-media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-medium);
    overflow: hidden;
    background: var(--color-surface-soft);
}

.product-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease);
}

/* شريحةُ التوفر فوق الصورة بجهة البداية، فلا تأكل سطراً من البطاقة. */
.product-media .chip {
    position: absolute;
    inset-block-start: var(--space-field-gap);
    inset-inline-start: var(--space-field-gap);
    background: var(--color-surface);
    box-shadow: var(--shadow-level1);
}

.product-name {
    margin: 0;
    font-size: var(--text-text-size);
    font-weight: var(--text-chip-weight);
    line-height: 1.4;
    /* سطران دائماً فتتساوى رؤوس البطاقات في الصف ولو اختلفت أسماؤها. */
    min-block-size: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a { color: var(--color-text-primary); text-decoration: none; }
.product-name a:hover { color: var(--color-navy); }

.product-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-field-gap);
    margin-block-start: auto;
}

/* `min-inline-size: 0` ليس زينة: عنصرُ المرونةِ لا ينكمش دون عرضِ محتواه افتراضياً
   (`min-width: auto`)، فسعرٌ طويلٌ في بطاقةٍ ضيّقةٍ كان يدفع قرصَ الإضافةِ خارجَ البطاقة
   ومنها خارجَ الصفحة. بالصفرِ ينكمش السطرُ ويلتفُّ داخلَه بدل أن يفيض. */
.product-price {
    min-inline-size: 0;
    margin: 0;
    color: var(--color-navy);
    font-size: var(--text-text-size);
    font-weight: var(--text-chip-weight);
}

/* شاشةُ الهاتف: بطاقةٌ أصغرُ وأكثرُ تناسقاً — حشوةٌ وفجواتٌ أضيق، اسمٌ ونصوصٌ أصغر،
   وقرصُ إضافةٍ 36px بدل 46px، فيدخل صفُّ السعر بسطرٍ واحدٍ في العمودين. */
@media (max-width: 40rem) {
    .product-grid { gap: var(--space-field-gap); }

    .product-card {
        gap: 6px;
        padding: 8px;
    }

    .product-card .help { font-size: 0.72rem; }

    .product-media .chip {
        inset-block-start: 6px;
        inset-inline-start: 6px;
        padding: 2px 8px;
        font-size: 0.68rem;
    }

    .product-name {
        font-size: 0.85rem;
        min-block-size: 2.4em;
    }

    .product-price { font-size: 0.9rem; }

    /* **ولا `flex-wrap: nowrap` هنا.** مُنع الالتفافُ يومَ كانت الشبكةُ عمودين فيتّسع الصفُّ
       للسعرِ والقرصِ معاً؛ ثم صارت الشبكةُ ثلاثةَ أعمدةٍ على كلِّ عرض (طلبُ المالك 2026-09-19)
       فضاقت البطاقةُ إلى 77px والصفُّ لا يتّسع — ومنعُ الالتفافِ حوّل الضيقَ إلى فيضٍ أفقيٍّ
       في الصفحةِ كلِّها على 320px. الالتفافُ يُعيد القرصَ سطراً تحتَ السعرِ بدل أن يخرج. */
    .product-foot {
        gap: 6px;
    }
}

/* ---------- نقطةُ التوفر: لونٌ يحمل الحالة قبل أن تُقرأ ---------- */
.avail { display: inline-flex; align-items: center; gap: 5px; }

.avail::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: var(--radius-full);
    background: currentColor;
}

/* الأخضرُ المصمت (color-green) على الأبيض 2.15:1 ويسقط في WCAG AA، فرمزُ النصّ الأغمقُ من
   العائلة نفسها. **والخلفيةُ المقيسةُ هي خلفيةُ الشريحةِ لا الصفحة:** الوسمُ يحمل `.chip`
   أيضاً فأرضيتُه `color-divider` لا الأبيض — وعليه كان الرمزُ القديمُ يقرأ 4.36:1 ويسقط،
   فأُدكن الرمزُ في `tokens.json` إلى 4.99:1. وفوق صورةِ المنتجِ وحدها تُبيَّض الشريحةُ
   فتقرأ 6.16:1. */
.avail-in { color: var(--color-green-deep); }
.avail-out { color: var(--color-text-secondary); }

/* ---------- السلة: بطاقةٌ واحدةٌ كتلُها يفصلها خطّ ---------- */
.cart-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding-block: var(--space-card-gap);
    border-block-end: 1px solid var(--color-divider);
}

.cart-block:first-child { padding-block-start: 0; }

.cart-block:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

/* ---- بنودُ السلة: قائمةٌ من بطاقاتٍ مدمجةٍ لا جدولُ خمسةِ أعمدة ----

   الجدولُ كان ينقلب على الهاتفِ إلى خمسةِ أسطرٍ لكلِّ بند، كلُّ سطرٍ يعيد كتابةَ عنوانِ
   عمودِه (`data-label`) — فبندٌ واحدٌ ينفق نصفَ الشاشة. البطاقةُ الآن سطران ثابتان: صورةٌ
   واسمٌ وشرائحُ وسعرُ وحدةٍ فوق، ومقياسُ الكميةِ وإجماليُّ البندِ تحت. */
.cart-lines,
.order-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-line,
.order-line {
    display: flex;
    flex-direction: column;
    gap: var(--space-card-gap);
    padding: var(--space-card-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-medium);
    background: var(--color-surface-soft);
}

.cart-line-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-card-gap);
}

/* الصورةُ مربّعٌ صغيرٌ ثابتُ القياس: تكبيرُها يعيد الارتفاعَ الذي أُنفق على إنقاصه،
   وغيابُها لا يزيح الاسمَ — النائبُ بالقياسِ نفسِه. */
.cart-line-art {
    flex-shrink: 0;
    inline-size: 56px;
    block-size: 56px;
    border-radius: var(--radius-medium);
    background: var(--color-divider);
    object-fit: cover;
}

.cart-line-art.is-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
}

.cart-line-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    /* عنصرٌ مرنٌ لا ينكمش بلا هذا، فاسمٌ طويلٌ يدفع الحذفَ خارجَ البطاقة. */
    min-inline-size: 0;
}

.cart-line-name {
    font-weight: var(--text-chip-weight);
    overflow-wrap: anywhere;
}

.cart-line-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* شرائحُ البندِ أصغرُ من شرائحِ الصفحة: حشوةُ الشريحةِ العامّةِ تضيف عشرين بكسلاً
   لارتفاعِ كلِّ بندٍ مقابلَ كلمتين. */
.cart-line-badges .chip,
.order-line-head .chip { padding: 2px 10px; }

.cart-line-unit { margin: 0; }

/* رأسُ سطرِ الطلبِ (بندٌ أو دفعة): الاسمُ وشرائحُه فوق، والقيمُ تحتها في `spec-list` القائمة.
   القاعدةُ الوحيدةُ الجديدةُ في هذه الدفعة — وما عداها ضُمَّ إلى صفوفِ المحدِّداتِ القائمة
   (`.device-card`/`.request-card` و`.cart-line`) فلا نظامَ تصميمٍ ثانٍ يُولَد لصفحةٍ واحدة. */
.order-line-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-field-gap);
}

/* الحذفُ أيقونةٌ بهدفِ لمسٍ كامل في زاويةِ البند، لا رابطٌ نصّيٌّ في سطرٍ خاصٍّ به. */
.cart-line-remove {
    margin-inline-start: auto;
    color: var(--color-text-secondary);
}

.cart-line-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-field-gap);
}

.cart-line-sum {
    display: flex;
    align-items: baseline;
    gap: var(--space-field-gap);
    margin: 0;
}

/* إجماليُّ البندِ رقمُ البطاقة، فيُقرأ أولاً. */
.cart-line-sum .mono {
    color: var(--color-navy);
    font-size: var(--text-title-size);
    font-weight: var(--text-display-weight);
}

/* ---- مقياسُ الكمية: ناقص · الرقم · زائد في علبةٍ واحدة ----
   الزرّان هدفا لمسٍ كاملان (`--min-touch`)، والحقلُ بينهما يبقى قابلاً للكتابة كما كان —
   من يريد عشرين يكتبها ولا يضغط تسعةَ عشرَ مرّة. */
.stepper {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-background);
}

.stepper-value {
    flex: 0 0 3rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* أسهمُ المتصفّحِ داخل مقياسٍ له زرّاه هدفا لمسٍ مزدوجان على ستةَ عشرَ بكسلاً. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.stepper-value::-webkit-outer-spin-button,
.stepper-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* الحقلُ بلا إطارٍ خاصٍّ به، فحلقةُ التركيزِ تُرسم على العلبةِ كلِّها — وإلا لم يعرف
   مستعملُ المفتاحِ أين هو (`.input` يُلغي `outline`). */
.stepper:focus-within {
    border-color: var(--color-crimson);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-crimson) 16%, transparent);
}

/* ---- الكوبون: الحقلُ يتمدّد والزرُّ بقياسه في سطرٍ واحدٍ تحت عنوانه ----
   وعلى الهاتفِ أيضاً: زرٌّ بكلمةٍ واحدةٍ لا يستحقّ سطراً ثالثاً. */
.coupon-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-field-gap);
}

.coupon-field .field-label { grid-column: 1 / -1; }

/* ---- خانةُ التركيب: مربّعٌ مقروءٌ ثم عنوانٌ وشرحُه في عمودٍ إلى جانبه ----
   كانت `<input>` داخلَ `.field-label` فيلتصق الشرحُ تحتها بلا محاذاةٍ للمربّع. */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-card-gap);
    /* والصفُّ كلُّه هدفُ لمسٍ لا المربّعُ وحدَه (‎<label for>‎ ينقل الضغطة). */
    min-block-size: var(--min-touch);
    cursor: pointer;
}

.check-row input {
    flex-shrink: 0;
    inline-size: 22px;
    block-size: 22px;
    margin: 0;
    accent-color: var(--color-crimson);
}

.check-row > span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* سطرُ الإجماليِّ في «مراجعة الطلب» هو نقطةُ القرار، فيُقرأ قبل ما فوقه. */
.spec-total .field-label,
.spec-total .text {
    color: var(--color-navy);
    font-size: var(--text-title-size);
    font-weight: var(--text-display-weight);
}

/* ---------- شريطُ الشراء اللاصق: السعرُ بجهة البداية والإجراءُ بجهة النهاية ---------- */
.buy-bar {
    position: sticky;
    inset-block-end: 0;
    z-index: 45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-card-gap);
    margin-block-start: var(--space-section);
    margin-inline: calc(-1 * var(--space-screen));
    padding: var(--space-field-gap) var(--space-screen);
    /* حشوةٌ سفلية تحترم شريطَ الإيماءات في هواتف الشاشات المنزوعة الحواف. */
    padding-block-end: calc(var(--space-field-gap) + env(safe-area-inset-bottom));
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-block-start: 1px solid var(--color-divider);
}

/* من الشاشة المتوسطة يصير الشريطُ بطاقةً تُغلق كتلةَ المنتج لا شريطاً ملتصقاً. */
@media (min-width: 56rem) {
    .buy-bar {
        position: static;
        margin-inline: 0;
        padding: var(--space-card-gap) var(--space-section);
        border: 1px solid var(--color-divider);
        border-radius: var(--radius-card);
        background: var(--color-surface);
        box-shadow: var(--shadow-level1);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* الزرُّ وسببُ تعطيلِه عنصرٌ واحدٌ في الشريط: بلا لفٍّ كان السببُ يصير عمودَ فليكس
   ثالثاً فيدفع الزرَّ إلى سطرٍ وحدَه على الهاتف. */
.buy-bar-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-field-gap);
    max-inline-size: 22rem;
}

.buy-bar .price {
    margin: 0;
    color: var(--color-navy);
    font-size: var(--text-title-size);
    font-weight: var(--text-display-weight);
}

.checkout-submit {
    display: grid;
    flex: 1 1 24rem;
    gap: var(--space-field-gap);
    justify-items: end;
    max-width: 42rem;
}

.checkout-policy {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    text-align: start;
}

.checkout-policy a {
    color: var(--color-navy);
    font-weight: var(--text-chip-weight);
}

.checkout-policy-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 var(--space-field-gap);
}

@media (max-width: 35rem) {
    .checkout-submit,
    .checkout-submit .gradient-button {
        inline-size: 100%;
    }
}

/* ---------- النجومُ والتقييم: ذهبيٌّ لا كحليّ ---------- */
.stars { color: var(--color-gold); letter-spacing: 2px; }

/* الشريطُ الداكن: تدرجٌ كحليٌّ وسطرٌ تمهيديٌّ ذهبي (الهوية 4.0 §8). */
.dark-band {
    position: relative;
    overflow: hidden;
    /* أطفالُ الشريط بلا هوامش، فالفجوةُ من الحاوية لا من الهوامش — وإلا تلاصقت النصوص. */
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    padding: var(--space-section);
    border-radius: var(--radius-sheet);
    /* كالترويسة: صورةُ البطاقة (site/cards/promo/image) فوق التدرّجِ بمزجٍ ضربيّ، وبلا صورةٍ يبقى التدرّج. */
    background-image: var(--card-image, none), var(--gradient-dark);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: var(--color-text-on-color);
}

/* شريطُ الرئيسيةِ وحدَه: صورةٌ صافيةٌ بلا نصٍّ فوقها ولا تعتيمٍ ضربيٍّ كان يخدمُ قراءتَه. */
.band-media {
    aspect-ratio: 16 / 9;
    max-block-size: 20rem;
    padding: 0;
    background-blend-mode: normal;
}

/* رابطُ التواصلِ في الشريطِ الداكن (`/about`) **رابطٌ وحيدٌ لا كلمةٌ في جملة**، فهو هدفُ
   لمسٍ يُقاس: قِيس 99×28 في جولةِ 2026-09-20 والمعيارُ 44. المنظرُ لم يتغيّر — إنما صار
   صندوقُه بارتفاعِ اللمس المعلَن، بالرمزِ نفسِه لا برقمٍ مكتوب. */
.dark-band .title a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--min-touch);
}

.dark-band .kicker {
    margin: 0;
    color: var(--color-gold-on-dark);
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
}

/* شريطُ الشراء داخل شبكةٍ ذاتِ أعمدة: يمتدُّ على العرض كلِّه لا في العمود الأول. */
.buy-bar.span-all { grid-column: 1 / -1; }

/* لوحٌ كبير (البطل، المعرض، الألواح): زوايا اللوح لا زوايا البطاقة. */
.sheet { border-radius: var(--radius-sheet); }

/* ---------- نصٌّ قانونيٌّ طويل: نمطُ محتوىً مولَّدٍ من Markdown (عناوين · قوائم · جداول) ---------- */
/* المحتوى يأتي جاهزاً من `shared/legal/*.html` فلا صنفَ على كل عنصر؛ النمطُ على الحاوية. */
.prose-doc {
    /* عنصرٌ مرنٌ داخل البطاقة: بلا هذا لا ينكمش فيدفع البطاقةَ خارج الشاشة. */
    min-inline-size: 0;
    max-inline-size: 70ch;
    font-size: var(--text-text-size);
    /* RC-F-02: روابطُ لاتينيةٌ طويلةٌ بلا مسافة (عنوانُ الموقع) تفيض بالصفحة عند تكبيرِ 200% — تنكسر ولا تُوسّعها. */
    overflow-wrap: anywhere;
}

.prose-doc h1 {
    margin: 0 0 var(--space-card-gap);
    font-size: var(--text-headline-size);
    font-weight: var(--text-headline-weight);
}

.prose-doc h2 {
    margin: var(--space-section) 0 var(--space-field-gap);
    color: var(--color-navy);
    font-size: var(--text-title-size);
    font-weight: var(--text-title-weight);
}

.prose-doc h3 {
    margin: var(--space-card-gap) 0 var(--space-field-gap);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
}

.prose-doc p { margin: 0 0 var(--space-card-gap); }

.prose-doc ul, .prose-doc ol { margin: 0 0 var(--space-card-gap); padding-inline-start: var(--space-section); }

.prose-doc li { margin-block-end: var(--space-field-gap); }

.prose-doc hr { border: 0; border-block-start: 1px solid var(--color-divider); margin-block: var(--space-section); }

/* الجدولُ يُمرَّر داخل نفسه: نصٌّ قانونيٌّ بأعمدةٍ كثيرة لا يُكسر عرضَ الصفحة. */
.prose-doc table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-card-gap);
}

.prose-doc th, .prose-doc td {
    /* بلا عرضٍ أدنى تنضغط الخلايا إلى كلمةٍ في السطر: الجدولُ لا يفيض فلا يُمرَّر. */
    min-inline-size: 12ch;
    padding: var(--space-field-gap) var(--space-card-gap);
    border: 1px solid var(--color-divider);
    text-align: start;
    vertical-align: top;
}

.prose-doc th { background: var(--color-surface-soft); font-weight: var(--text-chip-weight); }

.prose-doc blockquote {
    margin: var(--space-card-gap) 0;
    padding: var(--space-field-gap) var(--space-card-gap);
    border-inline-start: 4px solid var(--color-royal-blue);
    border-radius: var(--radius-button);
    background: var(--color-surface-soft);
}

.prose-doc blockquote > :last-child { margin-block-end: 0; }

/* الكودُ والروابطُ اللاتينية داخل نصٍّ عربي: اتجاهٌ معزولٌ فلا تختلط النقاطُ والأقواس. */
.prose-doc code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--color-surface-soft);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.92em;
    direction: ltr;
    unicode-bidi: isolate;
}

.prose-doc.en { direction: ltr; text-align: start; }

/* ---------- كتلةٌ تُفتح بالنقر: عنصرٌ أصليٌّ لا جافاسكربت ---------- */
.fold {
    margin-block-start: var(--space-card-gap);
    padding-block-start: var(--space-card-gap);
    border-block-start: 1px solid var(--color-divider);
}

.fold > summary {
    cursor: pointer;
    color: var(--color-navy);
    font-size: var(--text-text-size);
    font-weight: var(--text-body-weight);
    list-style: none;
}

.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: " \25BE"; }
.fold[open] > summary::after { content: " \25B4"; }

/* عنوانٌ تقفز إليه مرساةٌ لا يختفي تحت الشريط اللاصق أعلى الصفحة. */
.anchor { scroll-margin-block-start: calc(var(--appbar-h) + var(--space-field-gap)); }

/* ==========================================================================
   بيئتان منفصلتان + مؤشّرُ التنقّل + التذييل (الهوية 4.0، المرجع §5 و§13 و§14).
   لا قيمةَ لونٍ حرفيةٌ هنا: كلُّ لونٍ وظلٍّ ومدّةٍ رمزٌ من tokens.css.
   ========================================================================== */

/* الدرجُ المخفيُّ والتذييلُ بعرض الشاشة لا يوسّعان الصفحة أفقياً. */
html { overflow-x: clip; }

/* ---------- مؤشّرُ التقدّم عند التنقّل (§5.4) ---------- */
.nav-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 90;
    block-size: 3px;
    inline-size: 0;
    background: var(--gradient-horizontal);
    /* المفتاحُ يتغيّر مع كل مسار فيُعاد إنشاء العنصر وتبدأ الحركةُ من أولها ثم تنطفئ وحدها. */
    animation: rk-nav-progress 900ms var(--ease) forwards;
}

@keyframes rk-nav-progress {
    0% { inline-size: 0; opacity: 1; }
    30% { inline-size: 40%; }
    60% { inline-size: 80%; }
    85% { inline-size: 95%; opacity: 1; }
    100% { inline-size: 100%; opacity: 0; }
}

/* المحتوى الجديد يصل من خفوتٍ إلى تمامه بدل شاشةٍ جامدةٍ بلا إشارة. */
.shell-row > main { animation: rk-nav-content var(--dur-card) var(--ease); }

@keyframes rk-nav-content {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-progress { animation: none; opacity: 0; }
}

/* ---------- صفُّ القشرة: جانبيٌّ + محتوى ---------- */
.shell-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-screen);
}

.shell-row > main {
    flex: 1;
    min-inline-size: 0;
}

/* بيئةُ الحساب بلا شريطٍ علويٍّ للموقع، فالمحتوى يأخذ فسحتَه بنفسه. */
.account-page .shell-row { padding-block-start: var(--space-card-gap); }

/* تحت 56rem الجانبيُّ درجٌ خارجَ المجرى، لكنَّ زرَّ فتحه بقي عمودَ فلكسٍ ثالثاً: كان يقتطع
   44px وفجوةَ الصفِّ من جهة البداية، فيضيق المحتوى ويبدو غيرَ متمركزٍ وبفراغٍ يمينَ RTL.
   الزرُّ فوقَ المحتوى لا بجانبه — وهامشُه السفليُّ يقول ذلك أصلاً. */
@media (max-width: 56rem) {
    .account-page .shell-row { display: block; }
}

/* ---------- الشريطُ الجانبيُّ لبيئة الحساب ---------- */
.account-sidebar {
    /* تحت 56rem: درجٌ مخفيٌّ يفتحه الزر — الهاتفُ لا يتحمّل عموداً ثابتاً. */
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 70;
    inline-size: min(var(--drawer-w), 86vw);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: var(--shadow-level3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 280ms var(--ease), visibility 0s linear 280ms;
}

[dir="rtl"] .account-sidebar { transform: translateX(100%); }

.account-sidebar.open {
    transform: none;
    visibility: visible;
    transition: transform 280ms var(--ease);
}

.sidebar-open { margin-block-end: var(--space-card-gap); }

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-field-gap);
    min-height: var(--appbar-h);
    padding-inline: var(--space-card-gap);
    border-block-end: 1px solid var(--color-divider);
}

.sidebar-head .brand { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* أيقونةٌ اتجاهية: الشيفرون يشير إلى جهة الطيّ في كل اتجاه. */
[dir="ltr"] .sidebar-head .icon-button svg { transform: scaleX(-1); }

@media (min-width: 56rem) {
    /* بيئةٌ معزولة: عمودٌ دائمٌ في مجرى الصفحة، وزرُّ الفتح لا معنى له. */
    .account-sidebar {
        position: sticky;
        inset-block-start: 0;
        z-index: 30;
        inline-size: var(--drawer-w);
        flex-shrink: 0;
        max-block-size: 100svh;
        transform: none;
        visibility: visible;
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-level1);
        transition: inline-size var(--dur-card) var(--ease);
    }

    /* **الإزاحةُ الراقدةُ للدرج كانت تبقى على الشاشةِ الواسعة.** `[dir="rtl"] .account-sidebar`
       أعلى تخصيصاً من `.account-sidebar` أعلاه، والاستعلامُ لا يضيف تخصيصاً — فبقي
       `translateX(100%)` (300px = ‎--drawer-w‎) يدفع العمودَ خارجَ الحافة على 1440px.
       الإعادةُ بالتخصيصِ نفسِه. اتجاهُ ltr سليمٌ أصلاً: قاعدتُه بالتخصيصِ نفسِه وتسبقها ترتيباً. */
    [dir="rtl"] .account-sidebar { transform: none; }

    .account-sidebar.collapsed { inline-size: 64px; }

    .sidebar-open { display: none; }
}

/* المطويُّ أيقوناتٌ فقط: النصُّ يغيب ويبقى القرصُ في وسط العمود. */
.account-sidebar.collapsed .nav-label { display: none; }
.account-sidebar.collapsed .drawer-nav a,
.account-sidebar.collapsed .drawer-nav button { justify-content: center; }
.account-sidebar.collapsed .sidebar-head { justify-content: center; }

/* عناصرُ الجانبيّ هي عناصرُ الدرج نفسُها (.drawer-nav)، والأزرارُ فيه بهيئة الروابط. */
.drawer-nav button {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
    inline-size: 100%;
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border: 0;
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    cursor: pointer;
}

.drawer-nav button svg { flex-shrink: 0; inline-size: 20px; block-size: 20px; color: var(--color-navy); }

/* ---------- ألوانُ التمرير: قاعدةٌ واحدةٌ للقشرة كلها ---------- */
.drawer-nav a:hover,
.drawer-nav button:hover,
.footer-links a:hover,
.nav-rail a:hover,
.tile:hover {
    background: var(--color-surface-soft);
    color: var(--color-navy);
}

/* الأزرارُ المصمتة تغمق درجةً بلا لونٍ جديدٍ مخترَع. */
.switch:hover, .primary-button:hover:not(:disabled), .gradient-button:hover, .back-pill:hover, .state-retry:hover {
    filter: brightness(0.94);
}

/* رفعُ البطاقات باللمس ممنوع: الحالةُ تعلق بعد النقر (§13.8). */
@media (hover: hover) {
    .device-card:hover, .request-card:hover, .order-card:hover, .gradient-card:hover { box-shadow: var(--shadow-level2); }
}

/* ---------- التذييل: صفُّ روابطٍ واحدٌ ثم الدعمُ ثم الحقوق، بعرض الحاوية ---------- */
.site-footer {
    /* الخروجُ من حشوة الحاوية كما يفعل الشريطُ العلوي تماماً. و100vw ممنوعة هنا:
       تشمل عرضَ شريط التمرير فيفيض التذييلُ عن الشاشة ويُقصّ من جهة البداية. */
    margin-inline: calc(-1 * var(--space-screen));
    margin-block-start: var(--space-section);
    padding: var(--space-section) var(--space-screen);
    padding-block-end: calc(var(--space-section) + env(safe-area-inset-bottom));
    background: var(--gradient-dark);
    color: var(--color-text-on-color);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-field-gap);
    max-inline-size: var(--container-max);
    margin-inline: auto;
}

.footer-links a {
    display: flex;
    align-items: center;
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border-radius: var(--radius-button);
    color: var(--color-text-on-color);
    font-size: var(--text-text-size);
    text-decoration: none;
    transition: background var(--dur-control) var(--ease), color var(--dur-control) var(--ease);
}

/* «السياسات» بابٌ في صفِّ التذييل: عنوانُه بارتفاعِ لمسٍ كبقيةِ الروابط، وروابطُه الخمسُ
   تنسدل تحته بعرضِ الصفِّ كلِّه. */
.footer-policies { position: relative; }

/* مفتوحاً يأخذ الصفَّ كلَّه فتنسدل الخمسُ تحت الصفِّ لا داخلَ خانةٍ ضيّقةٍ منه. */
.footer-policies[open] { flex-basis: 100%; }

.footer-policies > summary {
    display: flex;
    align-items: center;
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border-radius: var(--radius-button);
    color: var(--color-text-on-color);
    font-size: var(--text-text-size);
    cursor: pointer;
    list-style: none;
}

.footer-policies > summary::-webkit-details-marker { display: none; }

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-field-gap);
    padding-block-start: var(--space-field-gap);
}

.footer-policy-links a {
    display: flex;
    align-items: center;
    min-height: var(--min-touch);
    padding-inline: var(--space-card-gap);
    border-radius: var(--radius-button);
    color: var(--color-text-on-color);
    font-size: var(--text-label-size);
    text-decoration: none;
}

.footer-heading {
    font-size: var(--text-text-size);
    font-weight: var(--text-title-weight);
    color: var(--color-gold-on-dark);
}

/* إسنادُ Icons8: سطرٌ خافتٌ فوق سطرِ الحقوق، **بلا الخطِّ الفاصلِ** الذي يحمله ذاك —
   خطّان متتاليان يقرآن عطلاً لا تصميماً. */
.footer-credit {
    max-inline-size: var(--container-max);
    margin: var(--space-card-gap) auto 0;
    font-size: var(--text-label-size);
    text-align: center;
    opacity: 0.75;
}

.footer-rights {
    max-inline-size: var(--container-max);
    margin: var(--space-card-gap) auto 0;
    padding-block-start: var(--space-card-gap);
    border-block-start: 1px solid var(--glass-border);
    font-size: var(--text-label-size);
    text-align: center;
}

/* ==== «الحساب والإعدادات»: بطاقةُ الحساب وصفوفُ الإعدادات ====
   لوحةٌ واحدةٌ محلَّ شاشتين. القاعدةُ التي تحكم الشكل: **صفٌّ لا زر** — كانت الصفحتان
   شريطَي أزرارٍ كبسوليةٍ متكرّرةٍ وبطاقاتٍ داخل بطاقات، فصارت صفوفاً بارتفاعِ لمسٍ واحد.
   ولا لونَ جديد ولا رمزَ خارج `tokens.css`. */

.profile-summary { gap: var(--space-section); }

.profile-identity {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
}

/* الحرفُ الأولُ لا صورة: لا حقلَ صورةٍ في النظام أصلاً، واختراعُ حقلٍ ممنوع (سابقة T-104).
   والحرفُ مشتقٌّ من الاسمِ المعروضِ نفسِه فلا بياناتٍ ثانية. */
.avatar-initial {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--gradient-horizontal);
    color: var(--color-text-on-color);
    font-size: var(--text-headline-size);
    font-weight: var(--weight-extrabold);
    line-height: 1;
}

.profile-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;   /* بلا هذا لا ينكسر اسمٌ طويلٌ داخل flex فيفيض الصفَّ أفقياً */
}

.profile-identity-text .title { overflow-wrap: anywhere; }

.completion { display: flex; flex-direction: column; gap: var(--space-field-gap); }

.completion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-field-gap);
}

/* الشريطُ عنصرُ تقدّمٍ دلالي: `role=progressbar` بقيمِه، فالقارئُ ينطق النسبةَ ولا يراها لوناً. */
.meter {
    appearance: none;
    display: block;
    inline-size: 100%;
    block-size: 8px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-divider);
    overflow: hidden;
}

/* <progress>: كلُّ محرّكٍ بشبهِ عنصرِه، وكلٌّ في قاعدةٍ مستقلّة — محدِّدٌ مجهولٌ يُسقط القائمةَ كلَّها. */
.meter::-webkit-progress-bar { background: var(--color-divider); border-radius: var(--radius-full); }
.meter::-webkit-progress-value { background: var(--gradient-horizontal); border-radius: var(--radius-full); }
.meter::-moz-progress-bar { background: var(--gradient-horizontal); border-radius: var(--radius-full); }
.meter.complete::-webkit-progress-value { background: var(--color-green-deep); }
.meter.complete::-moz-progress-bar { background: var(--color-green-deep); }

/* ---- صفوفُ الإعدادات ---- */
.settings-group { gap: 0; padding: 0; overflow: hidden; }

.settings-group-label {
    padding: var(--space-card-gap) var(--space-section) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
}

.settings-row {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
    /* ارتفاعُ اللمسِ الأدنى مضمونٌ بالرمز لا بالحشو وحده. */
    min-block-size: var(--min-touch);
    padding: var(--space-card-gap) var(--space-section);
    border: 0;
    inline-size: 100%;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-control) var(--ease);
}

.settings-row + .settings-row { border-block-start: 1px solid var(--color-divider); }

@media (hover: hover) {
    .settings-row:hover { background: var(--color-surface-soft); }
}

/* حلقةُ التركيزِ صريحةٌ هنا: لا حلقةَ عامّةً في الورقة، وصفٌّ بلا حلقةٍ يضيع على لوحةِ المفاتيح. */
.settings-row:focus-visible {
    outline: 2px solid var(--color-royal-blue);
    outline-offset: -2px;
}

.settings-row-icon {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    flex: 0 0 auto;
    border-radius: var(--radius-medium);
    background: var(--color-surface-soft);
    color: var(--color-purple);
}

.settings-row-icon svg { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

.settings-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.settings-row-title { font-size: var(--text-body-size); font-weight: var(--weight-semibold); }

.settings-row-hint {
    color: var(--color-text-secondary);
    font-size: var(--text-label-size);
    font-weight: var(--weight-regular);
    overflow-wrap: anywhere;
}

.settings-row-chevron {
    inline-size: 18px;
    block-size: 18px;
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

/* السهمُ يتبع اتجاهَ القراءة: في العربية يشير إلى اليسار، والانعكاسُ أصدقُ من أيقونتين. */
[dir="rtl"] .settings-row-chevron { transform: scaleX(-1); }

/* صفُّ الخطر (حذف الحساب) وصفُّ الخروج: فعلان لا وجهتان، فلونُهما يميّزهما عن بقية الصفوف. */
.settings-row.danger .settings-row-title { color: var(--color-crimson); }
.settings-row.danger .settings-row-icon { color: var(--color-crimson); }

@media (max-width: 30rem) {
    .settings-row { padding-inline: var(--space-screen); }
    .settings-group-label { padding-inline: var(--space-screen); }
}

/* ---- قائمةُ الجلسات: صفوفٌ بلا نقاطِ تعداد ---- */
.plain-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-row {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
    flex-wrap: wrap;   /* زرُّ التأكيدِ زران على الهاتف، فينزلان سطراً بدل أن يفيضا */
    min-block-size: var(--min-touch);
    padding-block: var(--space-card-gap);
}

.session-row + .session-row { border-block-start: 1px solid var(--color-divider); }