/* ============================================================
   3ers — نظام التصميم v2 · «صباح دافئ»
   ألوان مشرقة دافئة · بطاقات مستديرة · أشرطة منزلقة بـscroll-snap
   بلا مكتبة JS · بلا صور في الواجهة · RTL أصيل بخصائص منطقية
   عقد الأصناف محفوظ:
   .card .row .badge (b-open · b-ask · b-stale · b-blocked)
   .cal .day .filters .flash .list .item .ltr .num
   ============================================================ */

/* ---------- 1 · الرموز ---------- */
:root{
  color-scheme: light dark;

  /* ستّ قيم مسمّاة: الأساس دافئ مشرق، والحالات بألوان فرِحة متمايزة */
  --paper:#FFF7F0;      /* صباح — خلفية الصفحة، أبيض دافئ مشرق */
  --sheet:#FFFFFF;      /* بطاقة */
  --ink:#2A1A14;        /* حبر دافئ — نصّ أساسي (تباين 13:1 على الورق) */
  --joy:#FF5A87;        /* الفرح — العلامة والفعل الأول */
  --sun:#FFB020;        /* الشمس — تسليط ودفء ووسوم */
  --mint:#0FA968;       /* النعناع — الثقة: تقويم حقيقي مؤكَّد */
  --sky:#2F80F6;        /* السماء — الدعوة: «التوفّر عند الطلب» */
  --ember:#E8590C;      /* الجمر — العقوبة: تقويم قديم */

  --ink-2:#7A5A4C;      /* حبر ثانوي دافئ */
  --line:#F2DFD2;       /* حدّ دافئ فاتح */
  --line-2:#E4C7B4;

  --mint-soft:#E4F8EE; --sky-soft:#E7F0FE; --ember-soft:#FEEDE1;
  --joy-soft:#FFE9EF;  --sun-soft:#FFF3D9; --quiet-soft:#F7EDE5;

  /* ★ حشوات تحمل نصّاً — قيمها أغمق من ألوان التسليط كي يبلغ النصّ 4.5:1.
     ألوان --joy/--mint/--sky تبقى مشرقة للحدود والنقاط والظلال فقط. */
  --fill-joy:linear-gradient(135deg,#D2452F,#C42A63);
  --fill-trust:linear-gradient(135deg,#0A7A4B,#0C6B45);
  --fill-invite:linear-gradient(135deg,#1A5FBF,#2A6FD0);
  --fill-booked:linear-gradient(135deg,#3A2418,#2A1A14); /* حجز مؤكَّد: حبر لا نعناع */
  --on-fill:#FFFFFF;
  --on-booked:#FFFFFF;
  --ink-invite:#1A5FBF;  /* نصّ سماوي على خلفية فاتحة */
  --ink-ember:#B4420A;   /* نصّ جمري على خلفية فاتحة */

  /* تدرّجان دافئان فقط، وللأفعال والتسليط لا للخلفيات الكبيرة */
  --grad-joy:var(--fill-joy);
  --grad-sun:linear-gradient(135deg,#FFD166,#FF9F1C);
  --grad-dawn:linear-gradient(160deg,#FFF1E4,#FFE7EF 55%,#FFF7F0);

  --u:4px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* أنصاف أقطار متفاوتة بحسب الدور */
  --r-pill:999px; --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px;

  /* ظلال ملوَّنة ناعمة — لا رمادي ميّت */
  --sh-1:0 1px 2px rgba(122,90,76,.06), 0 2px 8px rgba(255,90,135,.06);
  --sh-2:0 2px 6px rgba(122,90,76,.07), 0 12px 28px rgba(255,120,90,.10);
  --sh-joy:0 6px 18px rgba(255,78,139,.30);
  --sh-mint:0 6px 18px rgba(15,169,104,.25);

  /* مقياس طباعي سائل */
  --t-xs:clamp(11px,.72rem + .1vw,12px);
  --t-sm:clamp(13px,.8rem + .12vw,14px);
  --t-base:clamp(15px,.9rem + .2vw,16px);
  --t-md:clamp(17px,1rem + .35vw,19px);
  --t-lg:clamp(21px,1.15rem + .8vw,26px);
  --t-xl:clamp(27px,1.4rem + 1.6vw,38px);
  --lh-tight:1.22; --lh:1.6;

  --font:"Rubik","Noto Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --col:1080px;
  --hit:48px;           /* هدف اللمس أكبر: إبهام واحد، وهي واقفة */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:#1A1210; --sheet:#241A17; --ink:#FDEFE7;
    --joy:#FF7BA0; --sun:#FFC85C; --mint:#3CD494; --sky:#77AEFF; --ember:#FF9052;
    --ink-2:#C4A797; --line:#3A2A24; --line-2:#4E382F;
    --mint-soft:#12332A; --sky-soft:#152540; --ember-soft:#3A2114;
    --joy-soft:#3A1D28; --sun-soft:#3A2C13; --quiet-soft:#2C201B;
    --grad-dawn:linear-gradient(160deg,#2A1C18,#33202A 55%,#1A1210);
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
    --fill-joy:linear-gradient(135deg,#FF9A6E,#FF7BA0);
    --fill-trust:linear-gradient(135deg,#3CD494,#2BB87E);
    --fill-invite:linear-gradient(135deg,#8FBCFF,#77AEFF);
    --fill-booked:linear-gradient(135deg,#FDEFE7,#EAD2C3);
    --on-fill:#1A1210; --on-booked:#241A17;
    --ink-invite:#9BC3FF; --ink-ember:#FFA771;
  }
}
[data-theme="light"]{
  --paper:#FFF7F0; --sheet:#FFFFFF; --ink:#2A1A14;
  --joy:#FF5A87; --sun:#FFB020; --mint:#0FA968; --sky:#2F80F6; --ember:#E8590C;
  --ink-2:#7A5A4C; --line:#F2DFD2; --line-2:#E4C7B4;
  --mint-soft:#E4F8EE; --sky-soft:#E7F0FE; --ember-soft:#FEEDE1;
  --joy-soft:#FFE9EF; --sun-soft:#FFF3D9; --quiet-soft:#F7EDE5;
  --grad-dawn:linear-gradient(160deg,#FFF1E4,#FFE7EF 55%,#FFF7F0);
  --fill-joy:linear-gradient(135deg,#D2452F,#C42A63);
  --fill-trust:linear-gradient(135deg,#0A7A4B,#0C6B45);
  --fill-invite:linear-gradient(135deg,#1A5FBF,#2A6FD0);
  --fill-booked:linear-gradient(135deg,#3A2418,#2A1A14);
  --on-fill:#FFFFFF; --on-booked:#FFFFFF;
  --ink-invite:#1A5FBF; --ink-ember:#B4420A;
  background:var(--paper); color:var(--ink);
}
[data-theme="dark"]{
  --paper:#1A1210; --sheet:#241A17; --ink:#FDEFE7;
  --joy:#FF7BA0; --sun:#FFC85C; --mint:#3CD494; --sky:#77AEFF; --ember:#FF9052;
  --ink-2:#C4A797; --line:#3A2A24; --line-2:#4E382F;
  --mint-soft:#12332A; --sky-soft:#152540; --ember-soft:#3A2114;
  --joy-soft:#3A1D28; --sun-soft:#3A2C13; --quiet-soft:#2C201B;
  --grad-dawn:linear-gradient(160deg,#2A1C18,#33202A 55%,#1A1210);
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --fill-joy:linear-gradient(135deg,#FF9A6E,#FF7BA0);
  --fill-trust:linear-gradient(135deg,#3CD494,#2BB87E);
  --fill-invite:linear-gradient(135deg,#8FBCFF,#77AEFF);
  --fill-booked:linear-gradient(135deg,#FDEFE7,#EAD2C3);
  --on-fill:#1A1210; --on-booked:#241A17;
  --ink-invite:#9BC3FF; --ink-ember:#FFA771;
  background:var(--paper); color:var(--ink);
}

/* ---------- 2 · الأساس ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--t-base)/var(--lh) var(--font);
  text-wrap:pretty; container-type:inline-size;
}
h1,h2,h3{margin:0;font-weight:600;line-height:var(--lh-tight);letter-spacing:-.015em}
h1{font-size:var(--t-lg)} h2{font-size:var(--t-md)} h3{font-size:var(--t-base)}
p{margin:0}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--joy)}
img{max-width:100%;display:block}
.wrap{max-width:var(--col);margin:0 auto;padding:var(--s4)}
.muted{color:var(--ink-2)}

/* ---------- 3 · عزل الأرقام — غير قابل للتفاوض ----------
   .num مبلغ داخل نصّ عربي · .ltr هاتف ومرجع ومسار لاتيني.
   الفواصل مسافات غير قاطعة (U+00A0) من الخادم. لا تستبدل الصنفين.

   ‏`direction:ltr` على .num إصلاحٌ لا تفصيل، ولا يجوز إسقاطه:
   ‏`unicode-bidi:isolate` وحده يمنع الخارج من إعادة ترتيب الداخل،
   ولا يمنع الاتجاه الموروث (rtl) من قلب **مقطعين** رقميين حول «–».
   فمدى سعر «380 000 دج – 520 000 دج» كان يُعرض «520 … 380» — وهو
   العطب الذي أبلغ عنه صاحب المشروع، فعاد بحرفه مع هذه النسخة.
   قياسه لا يكون بالنظر إلى الصفحة بل بقياس مواضع المقاطع على الشاشة
   (القاعدة ١٣ · `tests/Feature/RtlAndCopyTest.php`). */
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;white-space:nowrap;display:inline-block;
     font-variant-numeric:tabular-nums}
/* ‏`.price` وحدة قياس كاملة، ومداها يُقرأ من الأصغر إلى الأكبر.
   بلا اتجاه لاتيني عليها يضع الترتيبُ العربي الأصغرَ على اليمين، بينما
   `.ltr` تضع مدى السعة (200 – 400) بالأصغر على اليسار — فيظهر على
   البطاقة الواحدة مَدَيان بترتيبين متعاكسين، ويقرأ الزائر «520 000 –
   380 000» فيظنّه تنازلياً. الاتّساق أوجب من العُرف هنا. */
.price{direction:ltr;unicode-bidi:isolate;font-weight:600;font-variant-numeric:tabular-nums}
.on-request{color:var(--ink-invite);font-weight:600}
/* وحدة السعر («للنفر» · «لليوم»): كلمة تابعة لا رقم، فلا تزاحم
   المبلغ ولا تدخل عزلته اللاتينية. وبلاها يُقرأ سعر النفر سعراً للعرس. */
.unit{color:var(--ink-2);font-size:var(--t-sm);font-weight:400}

/* ---------- 4 · الرأس والعلامة ---------- */
.top{position:sticky;inset-block-start:0;z-index:20;
     background:color-mix(in oklab, var(--sheet) 94%, var(--joy));
     border-block-end:1px solid var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.top nav{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--s3);
         align-items:center;font-size:var(--t-sm)}
.top nav a{text-decoration:none;color:var(--ink-2);padding:6px 10px;border-radius:var(--r-pill);
           display:inline-flex;align-items:center;min-block-size:var(--hit)}
.top nav a:hover{color:var(--ink);background:var(--joy-soft)}

/* قفل الاسم: نصّ لا شعار مرسوم. الاسم مؤقّت وسيتغيّر، فالهويّة في اللون
   والطباعة والتخطيط. النقطة قفل هندسي محايد لا حرف. */
.wordmark{display:inline-flex;align-items:center;min-block-size:var(--hit);gap:.4em;font-weight:600;
          font-size:clamp(20px,1.1rem + .5vw,24px);line-height:1.3;
          letter-spacing:-.02em;color:var(--ink);text-decoration:none;min-width:0}
.wordmark::before{content:"";flex:0 0 auto;inline-size:.62em;block-size:.62em;
                  border-radius:50% 50% 50% 4px;background:var(--fill-joy);
                  box-shadow:var(--sh-joy)}
.wordmark>span,.wordmark .lat{display:inline-block;max-inline-size:16ch;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap}
.wordmark .lat{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.tag{color:var(--ink-2);font-size:var(--t-sm)}

/* ---------- 5 · الأسطح ---------- */
.hero{background:var(--grad-dawn);border-radius:var(--r-lg);padding:var(--s5);
      display:grid;gap:var(--s3);box-shadow:var(--sh-1)}
.hero h1{font-size:var(--t-xl)}
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);
       padding:var(--s4);box-shadow:var(--sh-1)}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);
      padding:var(--s3) var(--s4) var(--s4);box-shadow:var(--sh-1);
      position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
/* الحالة تُقرأ من شريط علوي ملوَّن + الشارة، لا من نصف القطر */
.card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
              block-size:4px;background:var(--line-2)}
.card--trust::before{background:linear-gradient(90deg,var(--mint),#7BE0B0)}
.card--ask::before{background:linear-gradient(90deg,var(--sky),#8FC0FF)}
.card--stale::before{background:repeating-linear-gradient(135deg,var(--ember) 0 8px,#FFC9A3 8px 16px)}
.card--blocked::before{background:var(--line-2)}
.card--blocked{box-shadow:none;background:var(--quiet-soft)}
.card h3{margin-block:var(--s2) 2px}
.place{color:var(--ink-2);font-size:var(--t-sm);margin:0 0 var(--s2)}
.cards{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}

.row{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t-sm);
     padding-block:var(--s2);border-block-start:1px solid var(--line);align-items:baseline}
.row>span:first-child{color:var(--ink-2)}
.row>span:last-child{text-align:end}
.row span,.list .item>div{min-width:0;overflow-wrap:anywhere}
.row--total{border-block-start:2px solid var(--line-2);font-size:var(--t-base)}

.thumb{aspect-ratio:16/10;inline-size:100%;object-fit:cover;border-radius:var(--r-sm);
       background:var(--quiet-soft)}
.no-photo{aspect-ratio:16/10;display:grid;place-items:center;border-radius:var(--r-sm);
          background:var(--grad-dawn);color:var(--ink-2);font-size:var(--t-sm);
          text-align:center;padding:var(--s3);border:1px dashed var(--line-2)}

/* ---------- 6 · شريط منزلق (بلا JS) ----------
   scroll-snap للصور والأقسام والأيام: حركة تطبيق حقيقي، وبلا مكتبة. */
.slider{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
        scroll-behavior:smooth;overscroll-behavior-x:contain;
        padding-block-end:var(--s2);scrollbar-width:none;
        -webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{display:none}
.slider>*{scroll-snap-align:start;flex:0 0 auto}
.slider--full>*{inline-size:100%}
.slider--peek>*{inline-size:min(84%,320px)}
.slider--media>*{inline-size:min(78%,260px)}
.dots{display:flex;gap:6px;justify-content:center;margin-block-start:var(--s2)}
.dots i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--line-2)}
.dots i.on{inline-size:20px;background:var(--joy)}

/* رقائق أقسام منزلقة */
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;
       scroll-snap-type:x proximity;padding-block:var(--s1)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;scroll-snap-align:start;min-block-size:40px;padding:0 var(--s4);
      display:inline-flex;align-items:center;gap:.4em;border-radius:var(--r-pill);
      border:1px solid var(--line-2);background:var(--sheet);color:var(--ink);
      font-size:var(--t-sm);font-weight:500;text-decoration:none}
.chip[aria-pressed="true"],.chip.on{background:var(--fill-joy);color:var(--on-fill);
      border-color:transparent;box-shadow:var(--sh-joy)}

/* مبدّل مقسَّم */
.seg{display:inline-flex;background:var(--quiet-soft);border-radius:var(--r-pill);padding:4px;
     gap:4px}
.seg a{min-block-size:40px;padding:0 var(--s4);display:inline-flex;align-items:center;
       border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;
       text-decoration:none;color:var(--ink-2)}
.seg a.on{background:var(--sheet);color:var(--ink);box-shadow:var(--sh-1)}

/* ---------- 7 · الشارات ----------
   أربع حالات، أربعة معانٍ: لون + شكل + رمز.
   b-open   ممتلئة نعناعية        · أعلى ثقة
   b-ask    ممتلئة سماوية         · وزن مساوٍ لها تماماً — حالة لا عقوبة
   b-stale  حدّ متقطّع جمري       · عقوبة
   b-blocked خطّ محايد بلا لون     · نتيجة صحيحة تُطوى */
.badge{display:inline-flex;align-items:center;gap:.4em;font-size:var(--t-xs);
       font-weight:600;padding:6px 12px;border-radius:var(--r-pill);
       border:1.5px solid transparent;line-height:1.25;white-space:nowrap}
.badge .g{font-size:1.05em;line-height:1}
.b-open{background:var(--fill-trust);color:var(--on-fill);box-shadow:var(--sh-mint)}
.b-ask{background:var(--fill-invite);color:var(--on-fill);
       box-shadow:0 6px 18px rgba(47,128,246,.25)}
.b-stale{background:var(--ember-soft);color:var(--ink-ember);border-color:var(--ember);
         border-style:dashed}
.b-blocked{background:transparent;color:var(--ink-2);border-color:var(--line-2)}

/* «قبل» ليس «أكّد»: شكلان لا لونان */
.badge-held{background:var(--sheet);color:var(--ink);border:1.5px dashed var(--line-2)}
.badge-confirmed{background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);
                 box-shadow:inset 0 0 0 3px var(--sheet),0 0 0 1.5px var(--ink)}
.step{font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* شارة الشفافية: حقيقة إدارية، دافئة لا تحذيرية */
.unverified{margin-block-start:var(--s3);font-size:var(--t-sm);color:var(--ink-2);
            background:var(--sun-soft);border-radius:var(--r-sm);padding:var(--s3);
            display:flex;gap:var(--s2);align-items:flex-start}
.unverified strong{color:var(--ink)}
.unverified a{color:var(--ember);font-weight:600}

/* ---------- 8 · الفلاتر والمنزلقات ---------- */
.filters{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);
         padding:var(--s4);display:grid;gap:var(--s3);box-shadow:var(--sh-1);
         grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));margin-block:var(--s4)}
.filters .full{grid-column:1/-1}
label{display:block;font-size:var(--t-xs);color:var(--ink-2);margin-block-end:6px;font-weight:600}
/* ‏`min-inline-size:0` و`max-inline-size:100%` ليسا زيادة احتراز:
   ‏`input[type=date]` و`input[type=range]` لهما عرض ذاتي أدنى يفرضه
   المتصفّح، وخانة الشبكة لا تنكمش تحته — فيبرز الحقل خارج حدّ البطاقة
   عند عروض معيّنة، ويختلف الحدّ من متصفّح إلى آخر فلا يظهر في اختبار
   عرض واحد. القياس على ثلاثة عروض لا يكفي دليلاً؛ المنع هو الدليل. */
input,select,textarea{inline-size:100%;min-inline-size:0;max-inline-size:100%;
      min-block-size:var(--hit);padding:0 var(--s4);
      border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--sheet);
      color:var(--ink);font:400 var(--t-base)/1.4 var(--font)}
input[type="range"]{padding:0}
/* ‏خانات خصائص القسم — `input,select,textarea` أعلاه تُعطي عرضاً كاملاً
   وارتفاعاً بحجم الهدف، وهما صحيحان للحقول لا للخانة: خانةٌ بعرض
   الصفحة تُقرأ زرّاً. فتُستثنى، ويبقى **الهدف اللمسيّ** في السطر الذي
   يحملها (44 بكسل) لا في المربّع نفسه — وهو ما تطلبه WCAG 2.5.8. */
input[type="checkbox"]{inline-size:1.15rem;min-inline-size:1.15rem;
      block-size:1.15rem;min-block-size:0;padding:0;accent-color:var(--joy-2);flex:0 0 auto}
.check{display:flex;align-items:center;gap:var(--s2);min-block-size:var(--hit);
      margin:0;font-size:var(--t-base);font-weight:400;color:var(--ink);cursor:pointer}
.checks{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
/* عنوان مجموعة خانات: يبدو كعنوان حقل ولا يخاطب حقلاً بعينه */
.label-like{display:block;font-size:var(--t-xs);color:var(--ink-2);
      margin-block-end:6px;font-weight:600}
.hint-inline{color:var(--ink-2);font-weight:400}
select{padding-inline-end:var(--s2)}
textarea{padding-block:var(--s3);min-block-size:96px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,
a:focus-visible,.day:focus-visible,.chip:focus-visible{
      outline:3px solid color-mix(in oklab,var(--joy) 55%,transparent);outline-offset:2px}
input[type="date"],input[type="tel"],input[type="number"]{font-variant-numeric:tabular-nums}
.hint{font-size:var(--t-xs);color:var(--ink-2);margin-block-start:6px}

/* منزلق الميزانية: إشارة ترتيب لا فلتر إقصاء */
.range{inline-size:100%;min-block-size:var(--hit);accent-color:var(--joy);
       background:none;border:0;padding:0}
input[type="range"].range{-webkit-appearance:none;appearance:none}
input[type="range"].range::-webkit-slider-runnable-track{
      block-size:10px;border-radius:var(--r-pill);
      background:linear-gradient(90deg,var(--sun),var(--joy))}
input[type="range"].range::-moz-range-track{
      block-size:10px;border-radius:var(--r-pill);
      background:linear-gradient(90deg,var(--sun),var(--joy))}
input[type="range"].range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
      inline-size:28px;block-size:28px;margin-block-start:-9px;border-radius:50%;
      background:var(--sheet);border:3px solid var(--joy);box-shadow:var(--sh-joy)}
input[type="range"].range::-moz-range-thumb{inline-size:28px;block-size:28px;border-radius:50%;
      background:var(--sheet);border:3px solid var(--joy);box-shadow:var(--sh-joy)}
.range-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}

/* شريط تقدّم — للميزانية في «مشروعي» */
.bar{block-size:10px;border-radius:var(--r-pill);background:var(--quiet-soft);overflow:hidden}
.bar>i{display:block;block-size:100%;border-radius:var(--r-pill);background:var(--grad-sun)}
.bar>i.over{background:linear-gradient(90deg,var(--ember),var(--joy))}

button,.btn{min-block-size:var(--hit);padding:0 var(--s5);border:0;border-radius:var(--r-pill);
    background:var(--fill-joy);color:var(--on-fill);font:600 var(--t-base)/1 var(--font);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;
    text-decoration:none;box-shadow:var(--sh-joy);transition:transform .16s ease,filter .16s ease}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
button:active,.btn:active{transform:translateY(0) scale(.99)}
.btn-ghost,button.ghost{background:var(--sheet);color:var(--ink);
    border:1.5px solid var(--line-2);box-shadow:none}
.btn-mint,button.mint{background:var(--fill-trust);color:var(--on-fill);box-shadow:var(--sh-mint)}
.btn-warn,button.warn{background:var(--sheet);color:var(--ember);
    border:1.5px solid var(--ember);box-shadow:none}
.btn-sm{min-block-size:38px;padding:0 var(--s4);font-size:var(--t-sm)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.actions form{display:inline}

/* ---------- 9 · المجموعات والقوائم ---------- */
.group{margin-block:var(--s5)}
.group-head{display:flex;align-items:center;gap:var(--s2);margin-block-end:var(--s2);
            flex-wrap:wrap}
.count{font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.group-note{font-size:var(--t-sm);color:var(--ink-2);margin:0 0 var(--s3)}
details.blocked-group{background:var(--quiet-soft);border-radius:var(--r-lg);padding:var(--s3) var(--s4)}
details.blocked-group>summary{cursor:pointer;color:var(--ink-2);font-size:var(--t-base);
    list-style:none;display:flex;align-items:center;gap:.5em;min-block-size:44px}
details.blocked-group>summary::-webkit-details-marker{display:none}
details.blocked-group>summary::after{content:"⌄";margin-inline-start:auto;font-size:18px}
details.blocked-group[open]>summary::after{content:"⌃"}

.list{display:flex;flex-direction:column;gap:var(--s2)}
.list .item{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);
            padding:var(--s3) var(--s4);display:flex;justify-content:space-between;
            gap:var(--s3);align-items:center;font-size:var(--t-sm);box-shadow:var(--sh-1)}
.list .item .sub{color:var(--ink-2);font-size:var(--t-xs);margin-block-start:2px}

.stat{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.stat b{font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums}
.stat-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat-card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);
           padding:var(--s3) var(--s4);box-shadow:var(--sh-1);display:grid;gap:4px}
.stat-card .k{font-size:var(--t-xs);color:var(--ink-2);font-weight:600}
.stat-card .v{font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 10 · تقويم المورّد ----------
   أهمّ شاشة: بلاطات مستديرة، حالة بلون ممتلئ + رمز، وأصغر بلاطة 44 بكسل.
   مع شريط أسبوع منزلق للتنقّل السريع على شاشة 5 بوصات. */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
          margin-block:var(--s3)}
.cal-head h2{font-variant-numeric:tabular-nums}
.cal-head a{min-inline-size:44px;min-block-size:44px;display:grid;place-items:center;
            text-decoration:none;font-size:20px;color:var(--ink);background:var(--sheet);
            border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .wd{text-align:center;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);
         padding-block:var(--s1)}
.cal .pad{min-block-size:44px}
.day{min-block-size:44px;border-radius:var(--r-sm);background:var(--sheet);
     border:1px solid var(--line);padding:6px 4px;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ink);
     font-size:var(--t-base);font-weight:500;line-height:1.05;
     font-variant-numeric:tabular-nums;transition:transform .14s ease}
.day .g{font-size:9px;line-height:1}
.day small{font-size:10px;color:inherit;opacity:.85;max-inline-size:100%;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap}
.day:hover{transform:scale(1.04)}
.day.st-open{background:var(--sheet);border-color:var(--line-2)}
.day.st-open .g{color:var(--mint)}
.day.st-held{background:var(--sky-soft);border-color:transparent;color:var(--ink-invite)}
/* حجز مؤكَّد = حبر، لا نعناع: النعناع معناه «متاح» في صفحة النتائج،
   ولا يجوز أن يعني «مأخوذ» في التقويم. */
.day.st-blocked{background:var(--fill-booked);border-color:transparent;
                color:var(--on-booked);box-shadow:var(--sh-2)}
.day.st-closed{background:var(--quiet-soft);border-color:transparent;color:var(--ink-2)}
/* الماضي يُخفَت ولا يُمحى: الحالة تبقى مقروءة في الأشهر السابقة */
.day.past{opacity:.5}
.day.st-open.past{background:transparent;border-color:transparent;color:var(--ink-2)}
.day.sel{box-shadow:0 0 0 3px var(--joy);border-color:transparent}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--t-sm);color:var(--ink-2);
        margin-block:var(--s3);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:.4em}
.legend .k{inline-size:18px;block-size:18px;border-radius:6px;display:inline-grid;
           place-items:center;font-size:9px;background:var(--sheet);border:1px solid var(--line-2)}
.legend .k.blocked{background:var(--fill-booked);color:var(--on-booked);border-color:transparent}
.legend .k.held{background:var(--sky-soft);color:var(--ink-invite);border-color:transparent}
.legend .k.closed{background:var(--quiet-soft);color:var(--ink-2);border-color:transparent}
.legend .k.open{color:var(--mint)}

/* شريط أيام منزلق — تنقّل بإبهام واحد */
.days-strip{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;
            scrollbar-width:none;padding-block:var(--s1)}
.days-strip::-webkit-scrollbar{display:none}
.days-strip>a{flex:0 0 auto;scroll-snap-align:center;min-inline-size:60px;min-block-size:68px;
      border-radius:var(--r-md);background:var(--sheet);border:1px solid var(--line);
      display:grid;place-items:center;gap:2px;text-decoration:none;color:var(--ink);
      font-variant-numeric:tabular-nums;box-shadow:var(--sh-1)}
.days-strip>a .wd{font-size:var(--t-xs);color:var(--ink-2)}
.days-strip>a.on{background:var(--fill-joy);color:var(--on-fill);border-color:transparent;
      box-shadow:var(--sh-joy)}
.days-strip>a.on .wd{color:var(--on-fill);opacity:.9}

/* شريط التأكيد الملتصق */
.confirm-bar{position:sticky;inset-block-end:0;z-index:10;
     background:var(--sheet);
     border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
     padding:var(--s3) var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);
     align-items:center;justify-content:space-between;margin-block-start:var(--s4)}

/* ---------- 11 · الرسائل والحالات الفارغة ---------- */
.flash{border-radius:var(--r-md);padding:var(--s3) var(--s4);margin-block:var(--s3);
       font-size:var(--t-base);display:flex;gap:var(--s3);align-items:flex-start;
       background:var(--sheet);border:1px solid var(--line);box-shadow:var(--sh-1)}
.flash>.i{flex:0 0 auto;inline-size:28px;block-size:28px;border-radius:50%;display:grid;
          place-items:center;font-size:14px;color:#fff}
.flash-ok{background:var(--mint-soft);border-color:transparent;color:var(--ink)}
.flash-ok>.i{background:#0A7A4B}
.flash-err{background:var(--ember-soft);border-color:transparent;color:var(--ink)}
.flash-err>.i{background:var(--ink-ember)}
.flash-note{background:var(--sky-soft);border-color:transparent;color:var(--ink)}
.flash-note>.i{background:var(--ink-invite)}
.flash-ok>.i,.flash-err>.i,.flash-note>.i{color:#fff}
.empty{background:var(--grad-dawn);border-radius:var(--r-lg);padding:var(--s5);
       display:grid;gap:var(--s3);justify-items:start;color:var(--ink-2)}
.empty h2{color:var(--ink)}
.err-page{max-inline-size:560px;margin-inline:auto;display:grid;gap:var(--s3);
          justify-items:start;padding:var(--s6) var(--s4)}
.err-code{font-size:var(--t-xl);font-weight:600;font-variant-numeric:tabular-nums;
          background:var(--fill-joy);-webkit-background-clip:text;background-clip:text;
          color:transparent}
.foot{color:var(--ink-2);font-size:var(--t-sm);text-align:center;padding:var(--s6) var(--s4)}

/* ---------- 12 · سطح المكتب (بشرط الحاوية) ---------- */
@container (min-width:900px){
  .wrap{padding:var(--s5)}
  .day{min-block-size:76px;font-size:var(--t-md)}
  .day small{font-size:var(--t-xs)}
  .day .g{font-size:11px}
  .hero{padding:var(--s6)}
}
@supports not (container-type: inline-size){
  @media (min-width:900px){
    .wrap{padding:var(--s5)}
    .day{min-block-size:76px;font-size:var(--t-md)}
    .day small{font-size:var(--t-xs)}
    .hero{padding:var(--s6)}
  }
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  .card:hover,.day:hover,button:hover,.btn:hover{transform:none}
}

/* ---------- اختيار العرض (فاتح · داكن · تلقائي) ----------
   ثلاثة أزرار في التذييل، بلا JS. المُطبَّق منها يُعلَّم بـaria-current
   فيقرأه قارئ الشاشة أيضاً لا اللون وحده. */
.theme-pick{display:flex;align-items:center;justify-content:center;gap:6px;
            flex-wrap:wrap;margin-block:10px}
.theme-pick span{color:var(--ink-2);font-size:13px}
.theme-pick button{min-block-size:var(--hit);padding:6px 14px;border-radius:999px;
                   border:1px solid var(--line-2);background:var(--sheet);
                   color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
                   box-shadow:none}
.theme-pick button:hover{border-color:var(--joy)}
.theme-pick button[aria-current]{border-color:var(--joy);color:var(--joy);
                                 font-weight:600;background:var(--joy-soft)}

/* ---------- شريط تحكّم الإدارة ----------
   يظهر للأدمن فوق الصفحة العامة نفسها. مميَّز بلونه ومحصور في سطر
   حتى لا يُشبه محتوى المنصة ولا يزحف على الشاشة. */
.admin-bar{align-items:flex-start;gap:8px;font-size:var(--t-sm);
           background:var(--sun-soft);border-color:var(--sun);color:var(--ink)}
.admin-bar a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.admin-bar strong{color:var(--ink)}

/* ---------- معرض صفحة القاعة ----------
   `aspect-ratio` لا `height` ثابت: يحفظ المكان قبل تحميل الصورة فلا
   يقفز المحتوى تحتها (وهو ما يُفسد قراءة السعر أثناء التحميل على شبكة
   بطيئة). و`object-fit:cover` حتى لا تُشوَّه صورة بنسبة مختلفة. */
.media-slider{margin-block-end:var(--s3)}
.media-slider .shot{display:block;border-radius:var(--r-md);overflow:hidden;
                    background:var(--quiet-soft)}
.media-slider .shot img{display:block;inline-size:100%;aspect-ratio:16/10;
                        object-fit:cover;block-size:auto}
.shot-count{margin-block-start:6px;text-align:center;color:var(--ink-2);
            font-size:var(--t-xs)}
.no-photo--lg{aspect-ratio:16/10;display:flex;flex-direction:column;
              align-items:center;justify-content:center;gap:6px;text-align:center;
              border-radius:var(--r-md);margin-block-end:var(--s3)}
.no-photo--lg small{color:var(--ink-2);font-size:var(--t-xs);max-inline-size:34ch}

/* ---------- شريط التأكيد ----------
   ملتصق أسفل الشاشة على الهاتف: التأكيد نقرة واحدة وأثره أن الزبون
   يرى «متوفّرة» بدل «تحقّق مع المورّد». تحت تمريرتين لا يُفعَل.
   ‏`env(safe-area-inset-bottom)` من أجل الشريط السفلي في هواتف iOS. */
.confirm-bar{position:sticky;inset-block-end:0;z-index:15;
             display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
             margin-block:var(--s3);padding:var(--s3);
             padding-block-end:calc(var(--s3) + env(safe-area-inset-bottom,0px));
             background:color-mix(in oklab, var(--sheet) 92%, var(--paper));
             border:1px solid var(--line);border-radius:var(--r-md);
             box-shadow:var(--sh-2);backdrop-filter:blur(6px)}
.confirm-bar form{margin:0}
.confirm-bar .tag{flex:1 1 12ch;font-size:var(--t-xs);color:var(--ink-2)}
.confirm-bar .btn-ghost{text-decoration:none;display:inline-flex;align-items:center;
                        min-block-size:var(--hit);padding:0 var(--s4);
                        border-radius:var(--r-pill);border:1px solid var(--line-2);
                        font-weight:600;font-size:var(--t-sm)}
@media (prefers-reduced-motion: reduce){
  .day:hover{transform:none}
  .slider{scroll-behavior:auto}
}

/* ---------- مساحات اللمس ----------
   قياسٌ على الخادم أظهر 27 عنصراً من 39 تحت 44 بكسل، وقائمة القبول
   تشترط 44. الفرق بين حالتين:

   - **عنصر تحكّم** (رابط في الشريط، عنوان بطاقة، «طالِب بالملف» كدعوة،
     زرّ) يجب أن يبلغ 44: إبهام واحد على شاشة 5 بوصات، والخطأ فيه يفتح
     صفحة أخرى.
   - **رابط داخل جملة** يُترك: إجباره على 44 يُبعد سطور النصّ بعضها عن
     بعض فيصير الكلام مفكَّكاً. معيار WCAG 2.5.8 يستثنيه لهذا نفسه.

   ولا نُكبّر الصندوق بل نُوسّع منطقة اللمس بحشو رأسي: الشكل يبقى، وما
   يتغيّر هو ما يُلمس. */
.card h3 a{display:inline-flex;align-items:center;min-block-size:var(--hit);
           padding-block:2px}
.unverified a,.no-photo a{display:inline-flex;align-items:center;
           min-block-size:var(--hit);padding-inline:2px}
.foot .theme-pick+br+*,.foot a{display:inline-flex;align-items:center;
           min-block-size:var(--hit);padding-inline:4px}
.dots{min-block-size:var(--hit);align-items:center}

/* الروابط الباقية تحت 44: ثلاثة في شريط الإدارة و«رجوع للنتائج».
   كلها **أفعال** لا كلامٌ فيه رابط، فتأخذ حقّها من منطقة اللمس. */
.admin-bar a{display:inline-flex;align-items:center;min-block-size:var(--hit);
             padding-inline:2px}
.retour{display:inline-flex;align-items:center;min-block-size:var(--hit);
        gap:.3em;text-decoration:none;font-weight:600}
