/* ══════════════════════════════════════════════════════════════
   Prismist — الهيكل والشريط الجانبي.

   الرموز من نظام التصميم كما هي. لا شيء هنا لصفحة بعينها: أنماط
   الصفحات تصل مع صفحاتها، فلا يتراكم في هذا الملف ما لا يُقرأ.
   ══════════════════════════════════════════════════════════════ */
:root{
  --page:#F7EFDE; --surface:#FFFDF5; --ink:#2B2014; --ink-2:#6F6353;
  --muted:#8A7C68; --grid:#EBDFC8; --baseline:#CDBFA6; --ring:#EBDFC8;
  --accent:#D9472B; --sp-amber:#E39A2E; --sp-olive:#6E9B4E;
  --sp-petrol:#35817D; --sp-violet:#8A63A8; --on-dark:#CDBFA6;
  /* سلّم رُتَبي — للبيانات المرتَّبة وحدها.
     الطيف الخمسة أعلاه **نوعيّ**: خمسة ألوان متساوية الرتبة، تُستعمل
     بالترتيب نفسه لتمييز فئات لا لترتيبها. ولو صُبغت به خريطةٌ كمّية
     لقرأ القارئ البنفسجيَّ «أكثر» من الزيتيّ بلا سبب. وهذا السلّم درجةٌ
     واحدة من الطينيّ تفتح وتغمق، فترتيب اللون فيه هو ترتيب الرقم. */
  --ord-1:#EEA893; --ord-2:#E4785C; --ord-3:#D9472B; --ord-4:#A32E17;
  --accent-wash:rgba(217,71,43,.10);
  /* عرض الشريط متغيّر لا ثابت: التصغير يبدّل رقماً واحداً على <html>. */
  --sb-w:244px;
}
html.sb-mini{--sb-w:62px}
html{direction:rtl}
/* بلا تثبيت تمرير: تبديل htmx للمتن (`outerHTML` على `body`) يُدرج الجديد
   قبل حذف القديم، فيثبّت المتصفّح القديمَ في مكانه ويقفز بالصفحة لأسفلها
   عند كل تصفية — كالضغط على محافظة في خريطة /brands. */
html,body{overflow-anchor:none}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:'Rubik',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#B23A22}
a:hover{color:var(--accent)}

.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;padding:26px 28px 60px;max-width:1240px;margin:0 auto}
.lede h1{font-family:'Zain',system-ui,sans-serif;font-weight:900;font-size:44px;
  margin:0 0 6px;line-height:1.1}
.lede p{margin:0;color:var(--ink-2);font-size:15px;max-width:68ch;line-height:2}

/* ══════════════════════════════════════════════════════════════
   الشريط الجانبي
   ══════════════════════════════════════════════════════════════ */
.sidebar{width:var(--sb-w);flex:none;background:var(--surface);
  border-inline-end:1px solid var(--ring);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  /* الشريط يمرّر بلا شريط تمرير ظاهر. الحافة الرأسية كانت تشقّ الفاصل
     بين المتن والشريط فتقرأ كخطٍّ ثانٍ بجوار الحدّ.
     `overscroll-behavior:contain` يمنع تسلسل التمرير إلى الصفحة حين
     يبلغ الشريط طرفه — بدونه يقفز المتن فجأةً تحت المؤشّر. */
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.sidebar::-webkit-scrollbar{width:0;height:0}

/* ── الرأس ── */
/* لاصق كالقدم وللسبب نفسه: الشريط يمرّر، ولو انزلق الرأس صار زرّ
   التصغير خارج المتناول حتى يعود المستخدم إلى الأعلى. */
.sb-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:14px 14px 12px;background:var(--surface);border-bottom:1px solid var(--grid)}
.lockup{display:flex;align-items:center;gap:12px;direction:ltr;color:var(--ink);
  min-width:0}
.lockup svg{display:block;flex:none}
.lockup .name{font-family:'Zain',system-ui,sans-serif;font-weight:900;font-size:24px;
  line-height:1;letter-spacing:-.01em;white-space:nowrap}
.lockup .tag{font-weight:500;font-size:11px;color:var(--ink-2);direction:rtl;
  margin-top:2px;white-space:nowrap}
.sb-mini-btn{flex:none;width:26px;height:26px;border:1px solid transparent;
  background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;
  display:grid;place-items:center;margin-inline-start:auto}
.sb-mini-btn:hover{background:var(--page);border-color:var(--baseline);color:var(--ink)}
.sb-mini-btn svg{display:block;transition:transform .18s}

/* ── الحساب ── */
.sb-acct{display:flex;align-items:center;gap:8px;
  border:1px solid var(--ring);border-radius:11px;padding:7px 7px;
  background:var(--page)}
.sb-out{margin-inline-start:auto;flex:none;width:24px;height:24px;display:grid;
  place-items:center;color:var(--muted);border:1px solid transparent;
  border-radius:8px;text-decoration:none}
.sb-out-f{display:contents}
button.sb-out{background:none;padding:0;cursor:pointer;font:inherit}
.sb-out:hover{color:#B23A22;border-color:#E8C4BA;background:#FBEDE9}
.sb-out svg{display:block}
.sb-acct .sav{width:28px;height:28px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:700;font-size:11px;color:var(--surface);
  background:var(--ink)}
.sb-acct .ai{min-width:0}
.sb-acct .an{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-acct .ap{display:block;font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── عناوين المجموعات ── */
.sb-sec{font-weight:700;font-size:11.5px;color:var(--ink-2);padding:15px 16px 6px;
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  white-space:nowrap;border-radius:8px}
.sb-sec:hover{color:var(--ink)}
.sb-sec.pinned,.sb-rule.pinned{margin-top:auto}
/* حدود **فيزيائية** لا منطقية: `border-inline-end` ينقلب مع الاتجاه،
   فيصير السهم في RTL مائلاً لليسار بدل أن يشير للأسفل. السهم رمز
   «مفتوح/مطوي» لا نصّ — اتجاهه ثابت مهما كان اتجاه الكتابة. */
.sb-sec:after{content:"";width:6px;height:6px;flex:none;margin-inline-start:auto;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.sb-rule{border-top:1px solid var(--grid);margin:0 0 8px;padding-top:8px}

/* ── الصفوف ── */
.sb-nav{display:flex;flex-direction:column;gap:3px;padding:0 12px}
.sb-nav.sb-ai{margin-top:8px}
.sb-nav a,.sb-nav>span{display:flex;align-items:center;gap:12px;min-height:38px;
  box-sizing:border-box;text-decoration:none;color:var(--ink-2);font-weight:600;
  font-size:14.5px;padding:9px 12px;border-radius:10px;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.sb-nav a>svg,.sb-nav>span>svg{flex:none}
.sb-nav a>span,.sb-nav>span>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sb-nav a:hover{background:var(--page);color:var(--ink)}
.sb-nav a:active{background:var(--grid);color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(43,32,20,.13)}
.sb-nav a.on{background:var(--ink);color:var(--page)}
.sb-nav a.on:hover{background:#3A2C1D;color:var(--page)}
.sb-nav a:focus-visible,.sb-sec:focus-visible,.sb-mini-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
/* المعطَّل: باهت وغير قابل للتحويم. وهو `<span>` أصلاً فلا يُنقر ولا يُبوَّب. */
.sb-nav>span.off{color:#B9AE9B;cursor:default}
.sb-nav .soon{margin-inline-start:auto;font-style:normal;font-size:10px;
  font-weight:600;color:var(--muted);border:1px solid var(--ring);
  border-radius:99px;padding:1px 6px;flex:none}

/* ── القدم ──
   `margin-top:auto` وحده لا يكفي: هو يثبّت عند وجود فراغ، وحين يفيض
   المحتوى لا فراغ فيه — فينزلق ختم الإصدار تحت الطيّة ولا يُرى. وهو
   أهمّ سطر في الشريط: يقول أيّ بيانات ينظر إليها المستخدم.
   `sticky` يجعله ملتصقاً بأسفل الحاوية سواء فاض المحتوى أو لم يفض. */
.sb-foot{position:sticky;bottom:0;margin-top:auto;padding:8px 8px 10px;
  background:var(--surface);border-top:1px solid var(--grid)}

/* ── الطيّ: الحالة على <html>، فتُطبَّق قبل الرسم ── */
html.g-off-0 .sb-nav[data-g="0"],html.g-off-1 .sb-nav[data-g="1"],
html.g-off-2 .sb-nav[data-g="2"],html.g-off-3 .sb-nav[data-g="3"],
html.g-off-4 .sb-nav[data-g="4"],html.g-off-5 .sb-nav[data-g="5"]{display:none}
html.g-off-0 .sb-sec[data-g="0"]:after,html.g-off-1 .sb-sec[data-g="1"]:after,
html.g-off-2 .sb-sec[data-g="2"]:after,html.g-off-3 .sb-sec[data-g="3"]:after,
html.g-off-4 .sb-sec[data-g="4"]:after,html.g-off-5 .sb-sec[data-g="5"]:after{
  transform:rotate(-45deg) translate(-2px,2px)}

/* ── التصغير: أيقونات فقط. الطيّ معطَّل هنا — لا عنوان يُضغط عليه،
      ولو بقي نافذاً لاختفت صفوف بلا وسيلة لإظهارها. ── */
html.sb-mini .sb-nav[data-g]{display:flex}
html.sb-mini .lockup>div,html.sb-mini .sb-sec,html.sb-mini .sb-acct .ai,
html.sb-mini .sb-nav a>span,html.sb-mini .sb-nav>span>span,
html.sb-mini .sb-nav .soon,html.sb-mini .sb-out{display:none}
html.sb-mini .sb-head{flex-direction:column;gap:8px;padding:14px 8px 12px}
html.sb-mini .sb-foot{padding:8px 6px}
html.sb-mini .sb-mini-btn{margin-inline-start:0}
html.sb-mini .sb-mini-btn svg{transform:rotate(180deg)}
html.sb-mini .sb-acct{justify-content:center;padding:5px 0;border:0;background:none}
html.sb-mini .sb-nav{padding:0 8px;gap:3px}
html.sb-mini .sb-nav a,html.sb-mini .sb-nav>span{justify-content:center;padding:9px 0}
html.sb-mini .sb-rule{margin-inline:8px}

@media(max-width:820px){
  .app{display:block}
  .sidebar{width:auto;position:static;height:auto;border-inline-end:0;
    border-bottom:1px solid var(--ring)}
  .sb-sec.pinned,.sb-rule.pinned{margin-top:0}
  .main{padding:20px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}

/* ══════════════════════════════════════════════════════════════
   حياة عنصر Prismist AI — طيفٌ يعبر داخل الحروف.

   المرجع: نمط `background-clip:text` مع تدرّج أعرض من النص بكثير.
   ثلاث نقاط أخذناها من المراجع لا من الحدس:

   1 · التدرّج **280%** لا 100%. بعرض النص يصير كل حرف بلونٍ ثابت —
       شريطٌ ملوّن لا ضوء. وبعرض 280% والطيف مركَّز في وسطه، يمرّ
       الطيف **داخل** الحروف مرةً كل دورة ويبقى النص بلونه بقيّتها.
   2 · لون الاحتياط **خارج** `@supports`. لو دخل معه، شحن المتصفّح
       الذي لا يقصّ التدرّج نصاً بـ`color:transparent` — أي كلمة
       تختفي كلياً. الترتيب هنا شرط سلامة لا ترتيب أسلوبي.
   3 · النص عقدة DOM حقيقية لا `::before`. يبقى قابلاً للنسخ والتحديد
       وللقراءة الآلية؛ و«قريباً» عنصر مستقلّ يبقى بلونه.

   لا إطار حول الصف: الطيف في الحروف يكفي للتمييز، والإطار كان
   يضيف حدّاً ثانياً بجوار خلفية التحويم فيبدو الصف مزدحماً.
   ══════════════════════════════════════════════════════════════ */
.sb-nav .ai-item{position:relative;border-radius:10px}

/* الصف مميَّز بسطحه لا بإطاره: مسحة طيفية بالغة الخفوت تفصله عن
   الصفوف العادية بلا حدٍّ ثانٍ يزاحم خلفية التحويم. */
.sb-nav .ai-item{
  background:linear-gradient(100deg,
    rgba(217,71,43,.07), rgba(227,154,46,.07),
    rgba(53,129,125,.06), rgba(138,99,168,.07))}

/* لون الاحتياط — خارج `@supports` عمداً. راجع النقطة ٢ أعلاه.
   طينيّ لا حبريّ: لو سقط القصّ، يبقى الاسم بلونٍ من الطيف لا بلون
   النصّ العادي. */
.sb-nav .ai-item>span{color:#B23A22;font-weight:700}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .sb-nav .ai-item>span{
    /* طيفٌ كامل بلا حبر. المنشور يفرّق الضوء ولا يبتلعه، فليس في
       الاسم حرفٌ «مطفأ» ينتظر دوره — كلّه ملوّن، طوال الوقت.

       الدرجات داكنة لا أصلية: الأصلية معايرة للأسطح والرسوم، وعلى
       نصٍّ بـ13.5px فوق أرضية شبه بيضاء يسقط الكهرماني #E39A2E إلى
       ~2.3:1. هذه الخمس كلّها ≥4.76:1.

       دورتان كاملتان عبر الـ200%: النافذة المرئية نصف الصورة، فترى
       الكلمة **طيفاً كاملاً** في كل لحظة بدل نصف طيف. والطرفان طينيّان
       فتلتحم البلاطة بالبلاطة. */
    background-image:linear-gradient(90deg,
      #B23A22   0%, #96691C 10%, #4E7A36 20%, #2C6A66 30%, #6E4E8A 40%,
      #B23A22  50%, #96691C 60%, #4E7A36 70%, #2C6A66 80%, #6E4E8A 90%,
      #B23A22 100%);
    background-size:200% 100%;
    background-repeat:repeat;   /* شرط الالتحام، لا زينة */
    background-position:200% 50%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    /* `linear` إلزامي: أي تسهيل على دورة لا نهائية يعني سرعةً مختلفة
       عند الطرفين، فيُقرأ الوصل تلعثماً حتى لو كان الطور سليماً. */
    animation:ai-glint 2.4s linear infinite}
}

/* بلاطة كاملة في كل دورة، فالنهاية هي البداية نفسها طوراً.
   من 200% إلى 0%: النسبة الأصغر تعني إزاحةً أقلّ سلباً، أي أن الصورة
   تنزلق **يميناً** — فيسيل الطيف من اليسار إلى اليمين. */
@keyframes ai-glint{
  from{background-position:200% 50%}
  to  {background-position:0% 50%}
}

/* بلا حركة: الطيف يقف في وسط الكلمة بدل أن يختفي. */
@media(prefers-reduced-motion:reduce){
  .sb-nav .ai-item>span{animation:none;background-position:50% 50%}
}

/* ══════════════════════════════════════════════════════════════
   شاشات بلا شريط — الدخول والرفض
   ══════════════════════════════════════════════════════════════ */
/* مخفيّ بصرياً لا بـ`display:none` — الأخير يُخرجه من ترتيب التبويب
   فلا يصله أحد أصلاً. يظهر عند التركيز وحده.

   ⚠️ والإخفاء بالإزاحة (`inset-inline-start:-9999px`) **لا يصلح في RTL**:
   البداية المنطقية هي اليمين، فيهاجر الرابط عشرة آلاف بكسل خارج الحافة
   اليمنى ويمدّ عرض المستند معه — أي تمرير أفقي في كل صفحة. القصّ يخفيه
   بلا أن يشغل مكاناً أصلاً. */
.skip{position:absolute;top:8px;inset-inline-start:8px;z-index:60;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--ink);color:var(--page);padding:0;border-radius:10px;
  font-weight:600;font-size:13px;text-decoration:none}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;padding:9px 16px}
.main:focus{outline:none}

body.plain{display:block;background:var(--page)}
.loginbox{max-width:430px;margin:10vh auto;padding:30px;background:var(--surface);
  border:1px solid var(--ring);border-radius:17px}
.loginbox .lockup{margin-bottom:18px}
.loginbox .hint{font-size:12.5px;color:var(--ink-2);line-height:1.95;margin:0 0 16px}
.loginbox form{margin:0 0 8px}
.loginbox button{width:100%;text-align:start;font:inherit;cursor:pointer;
  background:var(--page);border:1px solid var(--ring);border-radius:12px;
  padding:13px 15px;color:var(--ink)}
.loginbox button:hover{border-color:var(--baseline)}
.loginbox button b{display:block;font-size:14.5px;font-weight:600}
.loginbox button span{font-size:11.5px;color:var(--muted)}
.loginbox .deny{margin-bottom:14px}
.loginform{display:flex;flex-direction:column;gap:7px}
.loginform label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.loginform input{font:500 14px 'Rubik',system-ui,sans-serif;color:var(--ink);
  background:var(--page);border:1px solid var(--ring);border-radius:11px;
  padding:11px 13px;margin-bottom:6px;text-align:left}
.loginform input:focus{outline:2px solid var(--accent);outline-offset:1px}
.loginbox button.go{text-align:center;background:var(--ink);color:var(--page);
  border-color:var(--ink);font-weight:600;margin-top:4px}
.loginbox button.go:hover{opacity:.92}
.loginbox .hint.small{font-size:11.5px;color:var(--muted);margin:14px 0 0}
.deny{background:#FBEDE9;border:1px solid #E8C4BA;border-radius:12px;padding:16px 18px}
.deny b{display:block;color:#B23A22;font-size:15px;margin-bottom:5px}
.deny span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.85}

@media print{
  .sidebar{display:none}
  .app{display:block}
  .main{max-width:none;padding:0;margin:0}
  .sb-nav .ai-item{animation:none;--pai-o:1}
}