/* ═══════════════════════════════════════════════════════════════════════ QUORUM — طبقة التصميم ورق ومداد وختم. الوثيقة هي المركز، والخبراء رفٌّ دائم إلى جانبها. عائلة خطّية واحدة (Tajawal) بثلاثة أوزان؛ صوت الوثيقة يتمايز عن صوت الواجهة بالحجم والوزن وارتفاع السطر وعرض السطر، لا بعائلة ثانية. كل الخصائص الاتجاهية منطقية (inline-start/end) لتصحّ في RTL وLTR معاً. ═══════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════ الرموز ═════════════════════════════ */ :root{ --paper:#F6F5F2; --surface:#FFFFFF; --sunken:#EDEBE6; --ink:#14120F; --ink2:#4A4640; --ink3:#6E6960; --rule:#E0DCD4; --rule2:#CFC9BF; --seal:#8A2B22; --seal-deep:#6E221B; --seal-wash:#F5E9E7; --ok:#2E6A4E; --mid:#7A5C15; --off:#6B665F; --sel:#F0E7DC; --veil:rgba(246,245,242,.88); /* حدّ القصّ: ظلّ رقيق يُعلن أنّ تحت الحدّ بقيّة. ليس زينة بل خبرٌ عن وجود محتوى مخفيّ، فقيمته في الداكن أقوى بكثير لأنّ السطح نفسه شبه أسود. */ --edge:rgba(20,18,15,.13); --ui:'Tajawal',system-ui,-apple-system,sans-serif; --doc:var(--ui); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --r:2px; --r2:4px; --t:120ms cubic-bezier(.2,.7,.3,1); --t2:260ms cubic-bezier(.2,.7,.3,1); --lift:0 1px 2px rgba(20,18,15,.06), 0 8px 28px rgba(20,18,15,.10); } html[data-mode="dark"]{ --paper:#121110; --surface:#1A1917; --sunken:#0B0A09; --ink:#EFECE6; --ink2:#B4AFA6; --ink3:#938E85; --rule:#2C2A27; --rule2:#3A3733; --seal:#D4695C; --seal-deep:#E58275; --seal-wash:#2A1917; --ok:#6FA98A; --mid:#C9A44F; --off:#8A857C; --sel:#2A2521; --veil:rgba(18,17,16,.90); --edge:rgba(0,0,0,.55); --lift:0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.55); } /* ═════════════════════════════ الأساس ═════════════════════════════ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui); font-size:14.5px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--t2), color var(--t2); } /* مسافة الكلمة: مسافة Tajawal تعادل 0.21em — أضيق من المألوف في خطوط الواجهة (0.25–0.28em)، فتلتحم «المستشار المالي» بصرياً عند الوزن 700 وبعد الحروف غير الواصلة (ر، ا، د، و). عناصر النماذج لا ترث الخاصية من body فتُذكر صراحةً. */ body,button,input,select,textarea{word-spacing:.08em} ::selection{background:var(--sel)} h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.25} p{margin:0} a{color:inherit} img,svg{max-width:100%} :focus-visible{outline:2px solid var(--seal);outline-offset:2px;border-radius:var(--r)} [hidden]{display:none !important} /* عزل ثنائي الاتجاه: أي سلسلة لاتينية أو رقمية مركّبة داخل نصّ عربي. direction:ltr إلزامي مع العزل — العزل وحده لا يرتّب سلاسل الأرقام المفصولة بمسافات. و inline-block لا block: فرض direction على عنصر كتلي يسحب المحاذاة إلى اليسار داخل سياق RTL. والاستثناء ‎.bdi-t‎ ضرورة لا زينة. للعنصر ‎bdi‎ في هذا المشروع وظيفتان: سلسلةٌ قصيرة (رقم، تاريخ، رمز) — وهي التي كُتبت لها القاعدة أعلاه — وجملةٌ كاملة قد تكون بلغةٍ غير لغة الواجهة (سؤال التنفيذي، موضوع الجلسة). فإذا أصابت القاعدةُ الجملةَ صارت سطراً واحداً لا ينكسر (‎white-space:nowrap‎) في كتلةٍ سطريّة، فامتدّ الصندوق بامتداد السؤال: 374 بكسل في عمودٍ عرضه 356 لسؤالٍ من 45 محرفاً، وأضعافُ ذلك لسؤالٍ حقيقيّ. ثمّ إنّ ‎direction:ltr‎ تقلب جملةً عربيّةً إلى اليسار — وهو نقيضُ ما وُضع ‎bdi‎ له أصلاً. والاستثناء بالنفي لا بالإلغاء لأنّ اتّجاه ‎bdi‎ التلقائيّ (‎dir=auto‎) يُستنتج من أوّل حرفٍ قويّ في النصّ، ولا سبيل إلى استرجاعه بقيمةٍ في ‎direction‎: الخاصّية لا تقبل ‎auto‎، و‎revert‎/‎unset‎ لا تُعيدان تلميح السمة. فالسبيل الوحيد ألّا تُصيب القاعدةُ العنصرَ ابتداءً. و‎unicode-bidi:isolate‎ باقٍ له من ورقة المتصفّح الافتراضيّة، فالعزل لا يضيع. */ bdi:not(.bdi-t),.ltr{unicode-bidi:isolate;direction:ltr;display:inline-block;white-space:nowrap} .n,code,.mono-n{unicode-bidi:isolate} .num{unicode-bidi:isolate;direction:ltr;white-space:nowrap;display:inline-block} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* لون الورق لا الأبيض: الختم في الوضع الداكن فاتح (#D4695C) فيسقط الأبيض إلى 3.5:1 */ .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--seal); color:var(--paper);padding:10px 16px;font-weight:700;font-size:13px; display:inline-flex;align-items:center;min-height:44px} .skip:focus{inset-inline-start:0} /* ═════════════════════════════ الرمز ═════════════════════════════ */ .mk{width:44px;height:44px;color:var(--seal);display:block} .mk-ring{fill:none;stroke:currentColor;stroke-width:9} .mk-tail{stroke:currentColor;stroke-width:9} .mk.prog .mk-ring{ stroke-dasharray:263.9; stroke-dashoffset:calc(263.9 * (1 - var(--p,0))); transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset .7s cubic-bezier(.3,.8,.2,1); } .mk.prog .mk-tail{opacity:0;transition:opacity .35s ease .25s} .mk.prog[data-done="1"] .mk-tail{opacity:1} .mk.prog:not([data-done="1"]){animation:breathe 2.4s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}} .mk-ghost .mk-ring,.mk-ghost .mk-tail{stroke:var(--rule2)} .prog-num{display:none;font-weight:700;font-size:12.5px;color:var(--seal); unicode-bidi:isolate;direction:ltr} /* احترام تقليل الحركة — مطبَّق فعلاً لا موصوف فقط */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} .mk.prog:not([data-done="1"]){animation:none} .prog-num{display:inline} } /* ═════════════════════════════ الأزرار ═════════════════════════════ */ .btn{ font-family:var(--ui);font-size:14px;font-weight:700;line-height:1; padding:11px 20px;border-radius:var(--r);border:1px solid transparent; background:transparent;color:var(--ink);cursor:pointer;text-decoration:none; transition:background var(--t),color var(--t),border-color var(--t); display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:44px;min-width:44px; } .btn-seal{background:var(--seal);color:#FFF;border-color:var(--seal)} .btn-seal:hover{background:var(--seal-deep);border-color:var(--seal-deep);color:#FFF} .btn-ink{border-color:var(--ink);color:var(--ink)} .btn-ink:hover{background:var(--ink);color:var(--paper)} .btn-line{border-color:var(--rule2);color:var(--ink2)} .btn-line:hover{border-color:var(--ink2);color:var(--ink)} .btn-quiet{color:var(--ink2);padding-inline:8px} .btn-quiet:hover{color:var(--seal)} .btn-sm{font-size:12.5px;padding:7px 13px;min-height:34px} .btn-wide{width:100%} .btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none} html[data-mode="dark"] .btn-seal{color:#140F0E} html[data-mode="dark"] .btn-seal:hover{color:#140F0E} /* ═════════════════════════════ الحقول ═════════════════════════════ */ .field{margin-bottom:var(--s4)} .lbl,label.lbl{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:6px} .inp,.ta,.sel{ width:100%;font-family:var(--ui);font-size:14.5px;color:var(--ink); background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r); padding:11px 13px;transition:border-color var(--t),box-shadow var(--t); } .ta{min-height:96px;resize:vertical;line-height:1.7} .inp:focus,.ta:focus,.sel:focus{outline:none;border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-wash)} .inp::placeholder,.ta::placeholder{color:var(--ink3)} .hint{font-size:12px;color:var(--ink3);margin-top:5px} .err{font-size:12px;color:var(--seal);margin-top:5px;font-weight:700} /* ما ينقص السياق: كان تلميحاً رمادياً بلا عنوان، فقرأه المدير حاشيةً ولم يجده. الآن قائمةٌ معنونة بلون المداد الثاني لا الثالث — لأنّه محتوى لا هامش. الخطّ العلويّ يفصله عن الرقم فوقه فلا يُقرأ امتداداً لعنوان البطاقة. */ .miss{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);text-align:start} .miss-t{font-size:12px;font-weight:700;color:var(--ink2);margin-bottom:var(--s2)} .miss-l{margin:0;padding-inline-start:var(--s4);display:grid;gap:var(--s1)} .miss-l li{font-size:12px;line-height:1.55;color:var(--ink2)} .inp.bad,.ta.bad,.sel.bad{border-color:var(--seal)} /* تكامل تحقّق ASP.NET: أسماء الأصناف يولّدها jQuery Validation فتُلبَس هنا */ .input-validation-error{border-color:var(--seal) !important} .field-validation-error{display:block;font-size:12px;color:var(--seal);margin-top:5px;font-weight:700} .field-validation-valid{display:none} .validation-summary-errors{border:1px solid var(--seal);border-inline-start:3px solid var(--seal); border-radius:var(--r2);background:var(--seal-wash);padding:var(--s3) var(--s4); margin-bottom:var(--s4);font-size:13px;color:var(--ink)} .validation-summary-errors ul{margin:0;padding-inline-start:var(--s4)} .validation-summary-errors li{line-height:1.7} .validation-summary-valid{display:none} /* صندوق اختيار */ .chk{display:flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink2); cursor:pointer;min-height:44px} .chk input[type=checkbox]{width:17px;height:17px;accent-color:var(--seal);flex:0 0 auto;margin:0} /* حقل كلمة المرور بزرّ الكشف */ .pass-wrap{position:relative} .pass-wrap .inp{padding-inline-end:44px} .pass-eye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%); background:none;border:none;cursor:pointer;color:var(--ink3); width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r)} .pass-eye:hover{color:var(--ink2)} /* مقياس قوّة كلمة المرور — أربع خانات، اللون يتبع الحكم لا الزخرفة. الحالة معلَنة نصّياً أيضاً في .pm-l لأن اللون وحده ليس معلومة. */ .pm{display:flex;gap:4px;margin-top:7px} .pm-seg{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background var(--t)} .pm-seg.weak{background:var(--seal)} .pm-seg.mid{background:var(--mid)} .pm-seg.good{background:var(--ok)} .pm-l{font-size:11.5px;color:var(--ink3);margin-top:5px} /* ═════════════════════════════ الوثيقة ═════════════════════════════ */ /* ‏.doc‎ هو الوعاء الوحيد الذي يدخله نصٌّ لم نكتبه: ماركداون من النموذج بعناوين ونقاط وجداول واقتباسات. كان هنا سطران فقط (المقاس والفقرة)، فكل بناء آخر يسقط على أنماط المتصفّح الافتراضية أو على ‏margin:0‎ من إعادة الضبط العامّة — فيلتصق العنوان بما تحته وتفقد القائمة إزاحتها. وهذا نصف شكوى «التصميم القديم». قاعدة حاكمة تُطابق نظيرها في الطبعة (PdfMarkdownRenderer): عنوان النموذج من عائلة الحبر دائماً ولا يأخذ لون الخاتم أبداً — لون الخاتم محجوز لتسمية القسم التي تكتبها الوثيقة نفسها (‏.kicker‎ و‏.verdict-k‎). بذلك لا يشتبه عنوانٌ من كلام النموذج بتسمية قسم، ولو تشابه النصّان بقي الفارق البصري معلناً. */ .doc{font-family:var(--doc);font-size:18.5px;line-height:1.95;max-width:none;color:var(--ink)} /* التباعد بالأشقّاء لا بالحواشي: يعمل بين أيّ بنيتين متجاورتين مهما كان نوعهما، ولا يُخلّف فراغاً معلّقاً في أوّل الوثيقة أو آخرها. بالأمّ (em) لا بالبكسل حتى يتقلّص التباعد مع النصّ داخل ‏.op-b .doc‎ (17px) بلا قاعدة ثانية. */ .doc > * + *{margin-top:1.05em} .doc > :first-child{margin-top:0} /* العناوين: التفاوت بالحجم واللون لا بالوزن — إعادة الضبط العامّة تجعل كل العناوين 700، ولا وزن وسيط في العائلة. */ .doc h1,.doc h2,.doc h3,.doc h4,.doc h5,.doc h6{line-height:1.35;color:var(--ink)} .doc h1{font-size:1.28em} .doc h2{font-size:1.14em} .doc h3{font-size:1.05em} .doc h4,.doc h5,.doc h6{font-size:1em;color:var(--ink2)} /* فوق العنوان فراغٌ أوسع، وتحته أضيق: العنوان يلتصق بما يعنوِنه لا بما قبله */ .doc > h1,.doc > h2,.doc > h3,.doc > h4,.doc > h5,.doc > h6{margin-top:1.65em} .doc > h1 + *,.doc > h2 + *,.doc > h3 + *,.doc > h4 + *,.doc > h5 + *,.doc > h6 + *{margin-top:.45em} /* القوائم: علامة القائمة بلون الخاتم كما في الطبعة — أثرٌ خفيف يربط النقاط بهوية الوثيقة دون أن يصير النصّ ملوّناً. الإزاحة منطقية فتصحّ في الاتجاهين. */ .doc ul,.doc ol{padding-inline-start:1.4em} .doc li + li{margin-top:.4em} .doc li > ul,.doc li > ol,.doc li > p + p{margin-top:.4em} .doc li::marker{color:var(--seal)} .doc strong,.doc b{font-weight:700;color:var(--ink)} /* الاقتباس: نظير ‏.op-q‎ — خطّ جانبيّ وحبر أخفت، بلا خلفية. الوثيقة ورقٌ لا بطاقات */ .doc blockquote{border-inline-start:2px solid var(--rule2);padding-inline-start:var(--s4); color:var(--ink2);font-size:.94em} /* الشفرة: كتلة لاتينية معزولة اتجاهياً حتى لا ينقلب ترتيبها داخل سياق عربي */ .doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8em; background:var(--sunken);border:1px solid var(--rule);border-radius:var(--r);padding:1px 5px; direction:ltr;unicode-bidi:isolate} .doc pre{background:var(--sunken);border:1px solid var(--rule);border-radius:var(--r2); padding:var(--s4);overflow-x:auto;direction:ltr;text-align:left} .doc pre code{background:none;border:0;padding:0;display:block;font-size:.8em;line-height:1.6} /* الجدول: الخبير المالي يُجيب «بأرقام» فالجداول متوقّعة. حجمه أصغر من المتن بنسبة ثابتة، وترويسته على السطح المنخفض. وتباعد الحروف يُلغى هنا: القاعدة العامّة تضعه على ‏th‎ وهو يفصل الأحرف العربية الموصولة، وترويسة جدول النموذج عربية دائماً. و‏overflow-wrap‎ تأميناً من طفح أفقي بمقطع طويل غير قابل للكسر. */ .doc table{font-size:.78em} .doc thead th{background:var(--sunken)} .doc th{letter-spacing:normal;color:var(--ink2)} .doc th,.doc td{overflow-wrap:anywhere} .doc hr{border:0;border-top:1px solid var(--rule)} .doc a{color:var(--seal);text-decoration:underline;text-underline-offset:2px} .doc img{max-width:100%;height:auto} .paper{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r2)} .paper-hd{padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--rule)} .kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--seal)} .paper-t{font-size:21px;margin-top:6px} .paper-m{font-size:12.5px;color:var(--ink3);margin-top:var(--s2);display:flex;gap:var(--s3);flex-wrap:wrap} .paper-b{padding:var(--s5)} .sig{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5); padding-top:var(--s4);border-top:1px solid var(--rule)} .sig .mk{width:30px;height:30px} .sig-t{font-size:12.5px;font-weight:700} .sig-s{font-size:11.5px;color:var(--ink3)} /* ═════════════════════════════ الخبير ═════════════════════════════ */ .exp{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3); border:1px solid var(--rule);border-radius:var(--r2);background:var(--surface); transition:border-color var(--t)} .exp:hover{border-color:var(--rule2)} .exp-b{flex:1;min-width:0} /* ترويسة الخيط والجلسة: بطاقةُ خبيرٍ يجاورها زرُّ العودة. الزرّ لا ينكسر نصّه (‎.btn‎ سطرٌ واحد بحكم ‎line-height:1‎ و‎inline-flex‎)، فيأخذ عرضه كاملاً من السطر: «Toutes les consultations» تطلب 198 بكسل من 356، فلا يبقى للاسم والتخصّص إلّا 68 — و«Président» وحدها 76. القياس على الهاتف بالفرنسية. الحلّ نقلُ الزرّ إلى سطرٍ ثانٍ دون 640 بكسل، على سُنّة ‎.gen‎ في آخر الملفّ. وفوق هذا الحدّ لا يتغيّر شيء. */ .exp-hd{align-items:center} .mono{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:var(--r); border:1px solid var(--rule2);background:var(--sunken); font-weight:700;font-size:14px;color:var(--ink2);letter-spacing:.04em} .exp-n{font-size:14px;font-weight:700} .exp-s{font-size:12.5px;color:var(--ink3)} /* صندوق التسمية — مطويّ افتراضياً داخل البطاقة، فلا يزيد ارتفاع المقعد حتى يُطلَب. منخفضٌ عن سطح البطاقة (--sunken) ليُقرأ إجراءً داخلها لا بطاقةً ثانية. */ .nmbox{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--rule); border-radius:var(--r2);background:var(--sunken)} .nmbox .inp{margin-bottom:var(--s3)} .nmbox .lbl{margin-bottom:5px} .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em; padding:2px 7px;border-radius:var(--r);border:1px solid var(--rule2);color:var(--ink2);margin-top:5px} .tag+.tag{margin-inline-start:5px} .tag.crit{color:var(--seal);border-color:var(--seal)} .tag.opt{color:var(--ok);border-color:var(--ok)} .tag.pess{color:var(--mid);border-color:var(--mid)} /* المقعد السابع: رئيس المجلس. الشارة بلون الخاتم لا بلون الحبر — يُقرأ فوراً أنّه ليس واحداً من الستة، دون كلمة إضافية. */ .mono.chair{border-color:var(--seal);color:var(--seal-deep);background:var(--seal-wash)} /* ═════════════════════════════ الحالات ═════════════════════════════ الحالة مُرمَّزة بالشكل لا باللون وحده: ممتلئ / نصف / فارغ / متقطّع. */ .st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700} .st i{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;display:block;flex:0 0 auto} .st.done{color:var(--ok)} .st.done i{background:currentColor} .st.part{color:var(--mid)} .st.part i{background:linear-gradient(to left,currentColor 50%,transparent 50%)} .st.miss{color:var(--off)} .st.miss i{background:transparent} .st.wait{color:var(--seal)} .st.wait i{border-style:dashed} .empty{border:1px dashed var(--rule2);border-radius:var(--r2);padding:var(--s6); text-align:center;color:var(--ink3);font-size:13.5px} .skel{height:12px;border-radius:2px;background:linear-gradient(90deg,var(--sunken),var(--rule),var(--sunken)); background-size:200% 100%;animation:sh 1.4s linear infinite} @keyframes sh{to{background-position:-200% 0}} /* ═════════════════════════════ التوتر ═════════════════════════════ */ .tension{border:1px solid var(--rule);border-radius:var(--r2);overflow:hidden;background:var(--surface)} .tension-h{padding:10px var(--s4);border-bottom:1px solid var(--rule); font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--seal)} .tension-b{display:grid;grid-template-columns:1fr auto 1fr} .tside{padding:var(--s4)} .tsep{width:1px;background:var(--rule)} .tside-w{font-size:12px;color:var(--ink3);font-weight:700} .tside-t{font-family:var(--doc);font-size:16px;line-height:1.8;margin-top:6px} /* ═════════════════════════════ الجداول ═════════════════════════════ */ table{width:100%;border-collapse:collapse;font-size:13.5px} th,td{text-align:start;padding:9px 12px;border-bottom:1px solid var(--rule)} th{font-size:11.5px;letter-spacing:.08em;color:var(--ink3);font-weight:700} td.n{font-size:12.5px;color:var(--ink2)} .rule-list{list-style:none;padding:0;margin:var(--s3) 0 0} .rule-list li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--ink2)} .rule-list li:last-child{border-bottom:none} .rule-list b{color:var(--ink)} /* أدوات تخطيط عامّة */ .grid{display:grid;gap:var(--s3)} /* 1fr = minmax(auto,1fr) وأرضيّة auto هي min-content: طفل واحد nowrap يوسّع المسار فوق حاويته. min-width:0 يفكّ هذا القيد ويمنع الطفح الأفقي على الشاشات الضيقة. */ .grid>*{min-width:0} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center} .note{font-size:12.5px;color:var(--ink3);margin-top:var(--s2);max-width:60ch} /* سطر افتتاحي لصفحة: أثقل من .note وأخفّ من المتن — يشرح ما الشاشة، لا ما فيها. */ .lede{color:var(--ink2);max-width:62ch;margin-top:var(--s3);font-size:15px;line-height:1.8} /* ═══════════════ الهيكل: رفّ الخبراء دائم، والوثيقة هي المركز ═══════════════ */ .app{display:grid;grid-template-columns:auto 1fr;min-height:100vh} /* عالمُ المشرف بلا رفّ: عمودٌ واحدٌ يملأ العرض، وإلّا وقع المتنُ في عمود auto الضيّق. */ .app.app-solo{grid-template-columns:1fr} /* ── رفّ الخبراء ── */ .rail{ width:236px;background:var(--surface);border-inline-end:1px solid var(--rule); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .rail-hd{padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--rule); display:flex;align-items:center;gap:var(--s2);text-decoration:none} .rail-hd .mk{width:26px;height:26px;flex:0 0 26px} .wordmark{font-weight:700;letter-spacing:.22em;font-size:14px} .rail-lbl{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--ink3); padding:var(--s4) var(--s4) var(--s2)} /* التنقّل مجموعتان لا كتلة واحدة: ما تفعله بمجلسك فوق المقاعد، وما تديره به تحتها — والمقاعد بينهما لأن الرفّ عن المجلس أوّلاً. سبعة روابط متلاصقة بارتفاع 44 كانت تُقرأ جداراً وتسرق ارتفاع القائمة. */ .rail-nav,.rail-ft{display:flex;flex-direction:column;padding:var(--s2)} .rail-nav{border-bottom:1px solid var(--rule)} .rail-ft{border-top:1px solid var(--rule)} .rail-lnk{font-size:12.5px;color:var(--ink2);text-decoration:none; padding:0 var(--s3);border-radius:var(--r2); display:flex;align-items:center;gap:var(--s2);min-height:30px; transition:background var(--t),color var(--t)} .rail-lnk:hover{color:var(--seal);background:var(--sunken)} .rail-lnk[aria-current="page"]{color:var(--seal);font-weight:700;background:var(--sel)} /* في الوضع الداكن ‎--seal‎ (#D4695C) على ‎--sel‎ (#2A2521) يساوي 4.31 — أقلّ من 4.5 المطلوبة. ‎--seal-deep‎ في الداكن هو الخَتم نفسه أسطعَ (5.62) فيعبُر AA دون أن يتغيّر لون الحالة النشطة. والوسم داخل الرابط يجلس على الخلفية ذاتها. */ html[data-mode="dark"] .rail-lnk[aria-current="page"]{color:var(--seal-deep)} html[data-mode="dark"] .rail-lnk[aria-current="page"] .tag.crit{ color:var(--seal-deep);border-color:var(--seal-deep)} /* 30px يحقّق حدّ WCAG 2.5.8 غير المشروط (24px) ويرتفع إلى 44px على المؤشّر الخشن — نفس النمط المطبَّق على الروابط المستقلة في هذا الملف. */ @media (pointer:coarse), (max-width:960px){ .rail-lnk{min-height:44px} } /* الازدحام الثالث ليس في العرض بل في الارتفاع، وهذا قياس لا تقدير: أثاث الرفّ الثابت 340px بمؤشّر دقيق و438px بخشن، والمقاعد السبعة 402px. فعلى 900px تظهر كلّها، وعلى 1280×620 بمؤشّر خشن يبقى للقائمة 182px من 402 — أي أنّ مقعد رئيس المجلس يغيب بلا أثر يدلّ عليه. لا يصحّ تقليل ارتفاع الروابط أو المقاعد: 44px هو حدّ اللمس، فالحلّ في إظهار القصّ لا في إنكاره. ظلّ التمرير أعلى القائمة بحيلة background-attachment: طبقة الغطاء تمرّ مع المحتوى (local) فتخفي الظلّ عند الأعلى تماماً، والظلّ ثابت بالعنصر (scroll) فيظهر وحده حين يُمرَّر — بلا جافاسكربت وبلا ظلّ كاذب على قائمة لا تُمرَّر. */ /* الفرجة السفليّة margin لا padding، وهذا فرقٌ قِيسَ لا خُمِّن: إزاحة sticky تُحسَب من حدّ المحتوى، فحاشية 12px داخل النافذة تُبقي شريطاً تحت مقعد الرئيس المثبَّت يطلّ منه نصف مقعد آخر (قِيس: فرجة 12px ومقعد رابع يطلّ عند 1280×620). بجعلها خارج النافذة يلتصق المقعد بالحدّ تماماً وتبقى المسافة إلى روابط الرفّ. */ /* حدٌّ أدنى لنافذة القائمة، وهو قياسٌ لا احتياط: على 390×560 يبلغ أثاثُ الرفّ 526px من 560، فتبقى للقائمة 22px — أصغرَ من مقعد رئيس المجلس نفسِه (60px). فالمقعدُ اللاصق يفيض 54px تحت نافذتِه ولا يُرى كاملاً لا في أعلى التمرير ولا في أسفلِه، فيسقط وعدُ التثبيت من أصلِه: «الرئيس مبلوغٌ دائماً» يصير «الرئيس مقطوعٌ دائماً». وحدُّ القصّ المقيس هو 586px من الارتفاع بمؤشّرٍ خشن. والحدُّ الأدنى 88px مجموعُ أجزاءٍ قِيسَت لا رقمٌ مُستحسَن: حاشيةُ القائمة العليا 4 (‎--s1‎) + هامشُ مقعد الرئيس العلويّ 12 (‎--s3‎) + المقعدُ نفسُه 60 + فرجةُ إطلالٍ 12 تُرى منها بدايةُ مقعدٍ فيُعلَم أنّ تحته بقيّة. والهامشُ العلويُّ داخلٌ في الحساب لأنّ قيدَ ‎sticky‎ يُحسَب على صندوق الهامش لا صندوق المحتوى — وهذا ما جعل حدّاً من 72px يُبقي فيضاً مقيساً 3.8px. ومتى ضاقت النافذةُ عن مجموع الأثاث وهذا الحدّ مُرِّر الرفُّ نفسُه (overflow على ‎.rail‎) فبقي المقعدُ مبلوغاً بالتمرير بدلاً من أن يُعصَر إلى لا شيء. وعلى الشاشات الكافية لا يلزم الحدُّ ولا يفيض الرفّ، فالقاعدتانِ خامدتانِ تماماً — ولذلك لا استفهامَ ارتفاعٍ هنا ولا رقمَ عتبة. */ .rail{overflow-y:auto} .rail-list{flex:1;min-height:88px;overflow-y:auto;padding-block:var(--s1) 0;margin-bottom:var(--s3); overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--rule2) transparent; background: linear-gradient(var(--surface) 45%, rgba(0,0,0,0)) top/100% 20px no-repeat local, linear-gradient(var(--edge), rgba(0,0,0,0)) top/100% 9px no-repeat scroll} .rail-list::-webkit-scrollbar{width:6px} .rail-list::-webkit-scrollbar-thumb{background:var(--rule2);border-radius:3px} /* ── مقاعد الرفّ (تصميمٌ جديد): صفٌّ مستديرٌ نظيفٌ لكلّ خبير، شارةٌ دائريّةٌ للرقم، سطرا الاسمِ والتخصّصِ مقتضبان لتتساوى الصفوف، والحالةُ نقطةٌ في الطرف. المقعدُ النشطُ يُضاء بخلفيّة الخاتم لا بخطٍّ جانبيّ — أهدأ وأوضح. ── */ .seat{ display:flex;align-items:center;gap:10px; margin:1px var(--s2);padding:8px 10px;border-radius:10px; color:var(--ink);text-decoration:none;cursor:pointer;font-family:var(--ui); background:none;border:0;width:auto;text-align:start; transition:background var(--t); } .seat:hover{background:var(--sunken)} .seat[aria-current="true"],.seat.on{background:var(--seal-wash)} .seat .mono{flex:0 0 30px;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;font-size:12px;font-weight:700; background:var(--sunken);border:1px solid var(--rule);color:var(--ink2)} .seat[aria-current="true"] .mono,.seat.on .mono{ background:var(--paper);border-color:var(--seal);color:var(--seal-deep)} .seat-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .seat-n{font-size:12.5px;font-weight:600;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .seat-s{font-size:10.5px;color:var(--ink3);line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* رئيس المجلس سطرُه جملةٌ لا تخصّص، فيُسمح له بسطرين. */ .seat.chair .seat-s{white-space:normal;text-overflow:clip; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .seat-st{margin-inline-start:auto;flex:0 0 auto;width:8px;height:8px;border-radius:50%; border:1.5px solid var(--ink3)} .seat.spoke .seat-st{background:var(--ok);border-color:var(--ok)} .seat.pending .seat-st{border-style:dashed;border-color:var(--seal)} /* ترويسةُ مجموعة بنك الخبراء — يفصلها خطٌّ خفيفٌ عن مقاعد المجلس. */ .rail-sub{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ink3); padding:var(--s4) var(--s3) var(--s1);margin-top:var(--s2);border-top:1px solid var(--rule)} /* خبيرُ البنك: شارتُه وسمٌ «بنك» مستطيلٌ بلون الخاتم بدل الرقم. */ .seat.bench .mono{width:auto;min-width:30px;padding:0 9px;border-radius:999px; font-size:9px;letter-spacing:.06em; background:var(--seal-wash);border:1px solid var(--seal);color:var(--seal-deep)} /* ── التلميحُ المخصّصُ لمقاعد الرفّ ── بطاقةٌ ثابتةٌ (fixed) يضعها سكربتُ الرفّ إلى جانب المقعد، فلا تقصّها حافّةُ الرفّ ولا حاويةُ التمرير. بلا أحداث مؤشّرٍ لئلّا تسرق مرورَ الماوس. */ .rail-tip{position:fixed;z-index:200;pointer-events:none; max-width:264px;min-width:172px; background:var(--paper);border:1px solid var(--rule2);border-radius:12px; box-shadow:0 12px 34px rgba(20,18,15,.18); padding:12px 14px; opacity:0;transform:translateY(3px);visibility:hidden; transition:opacity .12s ease,transform .12s ease} .rail-tip.on{opacity:1;transform:none;visibility:visible} .rail-tip .rt-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em; color:var(--seal-deep);background:var(--seal-wash);border:1px solid var(--seal); border-radius:999px;padding:1px 8px;margin-bottom:7px} .rail-tip .rt-h{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3} .rail-tip .rt-s{font-size:12px;color:var(--ink2);margin-top:2px} .rail-tip .rt-m{font-size:11.5px;color:var(--ink3);margin-top:7px} .rail-tip .rt-bg{font-size:11.5px;color:var(--ink2);margin-top:7px;line-height:1.65} .rail-tip .rt-st{font-size:11px;color:var(--ink3);margin-top:9px; padding-top:7px;border-top:1px solid var(--rule)} /* رئيس المجلس يلي الستة مفصولاً بخط: مقعد في الرفّ لا سابعُ الأعضاء. ومثبَّت في أسفل القائمة: هو مدخل استشارته، وغيابه تحت الحدّ على شاشة قصيرة خسارةُ وظيفة لا خسارةُ زينة. sticky بلا تمرير لا أثر له، فالشاشات الطويلة تبقى كما كانت حرفياً — والخلفية مصمتة ليمرّ الستّة تحته لا خلاله. */ .seat.chair{margin-top:var(--s3);padding-top:var(--s4); border-top:1px solid var(--rule); position:sticky;bottom:0;z-index:1;background:var(--surface)} .seat.chair:hover{background:var(--sunken)} .seat.chair .seat-n{color:var(--seal-deep)} /* ظلّ فوق المقعد المثبَّت: يقول «تحت هذا بقيّة مقاعد». يظهر بقياس من qRailCut لا بالتخمين — data-cut="1" تعني أنّ في مسار التمرير محتوى لم يُرَ بعد، و"0" تعني أنّ القائمة مستوفاة فلا ظلّ. الظلّ خارج المقعد لا داخله (bottom:100%) لئلّا يزحف على نصّه، وبلا أحداث مؤشّر لئلّا يسرق نقرة. */ .seat.chair::before{content:'';position:absolute;inset-inline:0;bottom:100%; height:9px;pointer-events:none;opacity:0;transition:opacity var(--t); background:linear-gradient(to top, var(--edge), rgba(0,0,0,0))} .rail-list[data-cut="1"] .seat.chair::before{opacity:1} /* ── العمود الرئيسي ── */ .main{min-width:0;display:flex;flex-direction:column} .top{position:sticky;top:0;z-index:40;background:var(--paper); border-bottom:1px solid var(--rule);padding:var(--s4) var(--s6); display:flex;align-items:center;gap:var(--s3)} .top-t{font-size:16px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .top-m{font-size:12px;color:var(--ink3);flex:0 0 auto} .top-end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s2);flex:0 0 auto} /* خاتم الحساب — كان شارةً صامتة، وصار باب الإعدادات. صنفٌ خاصّ لا ‎.mono‎: ‎.mono‎ مقاسه 42px وكان يُقهَر بأنماط سطرية هنا إلى 34px، وأصلاً لا يعرف حالة التمرير ولا حلقة التركيز. الحدّ يظهر عند التمرير فقط ليبقى الشريط ساكناً — الخاتم علامة هويّة قبل أن يكون زرّاً. */ .seal-lnk{display:inline-flex;align-items:center;gap:6px;height:34px; padding-inline:10px 4px;max-width:190px; border-radius:999px;border:1px solid var(--rule);background:var(--sunken); text-decoration:none;transition:border-color var(--t),background var(--t)} .seal-nm{font-size:12.5px;font-weight:700;color:var(--ink2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px} .seal-ini{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center; border-radius:50%;background:var(--surface);border:1px solid var(--rule); font-weight:700;font-size:11px;color:var(--ink2);letter-spacing:.04em} .seal-lnk:hover{border-color:var(--rule2);background:var(--surface)} .seal-lnk[aria-current="page"]{border-color:var(--seal);background:var(--seal-wash)} .seal-lnk[aria-current="page"] .seal-nm{color:var(--seal-deep)} .seal-lnk[aria-current="page"] .seal-ini{border-color:var(--seal);color:var(--seal-deep)} /* حقلُ الاسم وزرُّ حفظه في صفٍّ واحد: الحقل يتمدّد والزرّ ثابت بجانبه. */ .name-edit{display:flex;gap:var(--s2);align-items:center} .name-edit .inp{flex:1 1 auto;min-width:0} .name-edit .btn{flex:0 0 auto} /* منتقي اللغة — قائمةٌ لا زرّ، لأنّ الحالات ستّ. ويلزمها فكُّ ‎width:100%‎ الذي ترثه من طبقة الحقول: داخل صفٍّ مرن يعني ذلك التهامَ ما بقي من الشريط. والسابقةُ نفسها في ‎.set-r>.sel‎. وقياسُها من ‎.btn-sm‎ (34 بكسل) لا من ‎.sel‎ (44) لتقف في سطرٍ واحد مع زرّ النمط والخاتم — وهي مع ذلك حقلٌ حقيقيّ فتأخذ حلقة تركيزه لا حلقة الزرّ. والعرضُ محدود: «Español» أطول من «ar» بأربعة أضعاف، وبلا حدٍّ أعلى يزحف الشريط على العنوان في الشاشات الضيّقة. */ .lang-f{margin:0;display:flex;flex:0 0 auto} .lang-sel{ width:auto;max-width:132px;font-family:var(--ui);font-size:12.5px;font-weight:700; color:var(--ink2);background:var(--surface);border:1px solid var(--rule); border-radius:var(--r);padding:6px 8px;min-height:34px;cursor:pointer; text-overflow:ellipsis; transition:border-color var(--t),color var(--t),box-shadow var(--t); } .lang-sel:hover{border-color:var(--rule2);color:var(--seal)} .lang-sel:focus-visible{outline:none;border-color:var(--seal);box-shadow:0 0 0 3px var(--seal-wash)} /* أسماء اللغات لاتينيّةٌ كلُّها إلّا «العربية»، وهي داخل صفحةٍ قد تكون يساريّة. القائمة تعرض قيمةً واحدة فلا تداخل اتّجاهيّ، لكنّ الخيارات تُقرأ معاً — فتُترك لاتّجاه محتواها. */ .lang-sel option{direction:ltr} .lang-sel option[value="ar"]{direction:rtl} .body{padding:var(--s6) var(--s6) var(--s9);max-width:920px;width:100%;margin:0 auto} .body-wide{max-width:1100px} /* ── طبقات المخرَج الثلاث ── */ .layers{display:flex;gap:0;border-bottom:1px solid var(--rule);margin-bottom:var(--s5)} .layer{ background:none;border:none;font-family:var(--ui);font-size:13.5px;font-weight:700; color:var(--ink3);padding:11px 16px;cursor:pointer;min-height:44px;text-decoration:none; display:inline-flex;align-items:center; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t); } .layer:hover{color:var(--ink2)} .layer[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--seal)} .layer .c{font-size:11px;color:var(--ink3);margin-inline-start:6px;font-weight:700} .pane[hidden]{display:none} /* ── المُلخَّص التنفيذي ── */ .verdict{border:1px solid var(--rule);border-inline-start:3px solid var(--seal); border-radius:var(--r2);background:var(--surface);padding:var(--s5)} .verdict-k{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--seal)} .verdict-t{font-family:var(--doc);font-size:22px;line-height:1.6;margin-top:8px;max-width:52ch} .split{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5)} .stat{border:1px solid var(--rule);border-radius:var(--r2);background:var(--surface);padding:var(--s4)} /* inline-block لا block: فرض direction:ltr على عنصر كتلي يسحب المحاذاة إلى اليسار داخل سياق RTL. inline-block يترك المحاذاة للحاوية، فتصحّ في الاتجاهين. */ .stat-n{font-size:26px;font-weight:700;line-height:1;unicode-bidi:isolate;direction:ltr;display:inline-block} .stat-l{font-size:12px;color:var(--ink3);margin-top:6px} /* شريط نسبة. المقدار مُعلَن نصّاً بجواره دائماً — اللون والطول وحدهما ليسا معلومة. يُملأ بـ --v (من 0 إلى 100) لا بعرض مكتوب في السطر، ليبقى الترميز نظيفاً. */ .bar{height:4px;border-radius:2px;background:var(--sunken); border:1px solid var(--rule);margin-top:var(--s3);overflow:hidden} .bar>i{display:block;height:100%;width:calc(var(--v,0) * 1%);background:var(--seal)} .acts{margin-top:var(--s5)} .act{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) 0; border-bottom:1px solid var(--rule)} .act:last-child{border-bottom:none} .act-i{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--rule2); display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink2);background:var(--sunken)} .act-c{flex:1;min-width:0} .act-t{font-size:14.5px;font-weight:700} .act-w{font-size:12.5px;color:var(--ink3);margin-top:3px} .act-b{margin-inline-start:auto;display:flex;gap:6px;flex:0 0 auto} /* ── رأي خبير ── */ .op{border:1px solid var(--rule);border-radius:var(--r2);background:var(--surface); margin-bottom:var(--s3);overflow:hidden} .op-h{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4); border-bottom:1px solid var(--rule);background:var(--sunken)} .op-b{padding:var(--s5)} .op-b .doc{font-size:17px;line-height:1.9} /* آراء الخبراء قابلةٌ للطيّ: نقرةٌ على الترويسة تطوي المتن، فلا تملأ الستّةُ الشاشةَ ويقفز المديرُ إلى ما يريد. سهمٌ يدلّ على الحالة، ويختفي المتنُ عند الطيّ. */ .op-h{cursor:pointer} .op-h::after{content:"▾";margin-inline-start:auto;color:var(--ink3); transition:transform .15s ease;flex:0 0 auto;font-size:12px} .op.collapsed .op-h::after{transform:rotate(-90deg)} .op.collapsed .op-h{border-bottom:0} .op.collapsed .op-b{display:none} .op-q{font-family:var(--doc);font-size:15.5px;line-height:1.8;color:var(--ink2); border-inline-start:2px solid var(--rule2);padding-inline-start:var(--s4);margin-top:var(--s4)} /* ── إحالة رئيس المجلس ── ليست جواباً فلا تأخذ هيئة البطاقة: سطر مُحال يسبق التقرير ويقول إلى مَن ذهب السؤال ولماذا. الخطّ الجانبيّ بلون الخاتم يربطه ببقيّة حضور الرئيس. */ .cnote{display:flex;gap:var(--s3);align-items:flex-start; background:var(--sel);border-inline-start:2px solid var(--seal); border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s3)} .cnote .mono{flex:0 0 30px;height:30px;font-size:12.5px} .cnote-b{flex:1;min-width:0} /* لون الخاتم لا --ink3: على أرضية --sel يهبط ink3 إلى ٤٫٤٦ (تحت ٤٫٥)، والخاتم يُعطي ٩٫٠٠ فاتحاً و٥٫٦٢ داكناً ويربط السطر بحضور الرئيس. */ .cnote-t{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--seal-deep)} .cnote-x{font-size:13.5px;line-height:1.75;color:var(--ink2);white-space:pre-line;margin-top:2px} /* ── سؤال التنفيذي في الخيط ── يُقرأ كاقتباس لا كبطاقة: البطاقة للجواب، لأن الجواب هو ما يُعاد إليه. حدّه بلون الختم ليتمايز عن .op-q (شرط الخبير) بحدّه الرمادي. */ .qn{font-family:var(--doc);font-size:17px;line-height:1.85;color:var(--ink2); border-inline-start:2px solid var(--seal);padding-inline-start:var(--s4); margin:var(--s7) 0 var(--s4);white-space:pre-wrap} .qn:first-child{margin-top:0} .qn-l{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em; color:var(--ink3);display:block;margin-bottom:var(--s2)} /* ── المُنشئ ── */ .comp{position:sticky;bottom:0;background:var(--paper);padding-top:var(--s4); border-top:1px solid var(--rule);margin-top:var(--s7)} .comp-box{border:1px solid var(--rule2);border-radius:var(--r2);background:var(--surface); padding:var(--s3);display:flex;gap:var(--s3);align-items:flex-end} .comp-ta{flex:1;border:none;outline:none;resize:none;font-family:var(--ui); font-size:14.5px;line-height:1.7;color:var(--ink);background:transparent; min-height:44px;max-height:160px} .comp-m{font-size:11.5px;color:var(--ink3);margin-top:7px;display:flex;gap:var(--s4); flex-wrap:wrap;align-items:center} /* ── حالة التوليد ── */ .gen{display:flex;gap:var(--s4);align-items:center;border:1px solid var(--rule); border-radius:var(--r2);background:var(--surface);padding:var(--s4) var(--s5)} .gen .mk{width:48px;height:48px;flex:0 0 48px} .gen-t{font-size:14px;font-weight:700} .gen-s{font-size:12.5px;color:var(--ink3);margin-top:3px} /* ── شريط الجوال ── */ .tabbar{display:none} .scrim{display:none} /* ═══════════════════════ عناصر الشاشات ═══════════════════════ */ .sec-h{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s7) 0 var(--s4)} .sec-h:first-child{margin-top:0} .sec-t{font-size:15px;font-weight:700} .sec-m{font-size:12.5px;color:var(--ink3)} .sec-e{margin-inline-start:auto;font-size:12.5px} a.lnk{color:var(--seal);text-decoration:none;font-weight:700;font-size:12.5px} a.lnk:hover{text-decoration:underline} /* الروابط المستقلة (ذيل قسم، تلميح، سطر تحت النموذج) ليست «داخل جملة»، فلا يشملها استثناء 2.5.8 للروابط السطرية. 24px هو حدّ AA غير المشروط بنوع المؤشّر، ثمّ 44px على المؤشّر الخشن وفق الإرشاد الأوسع. */ .sec-e a.lnk,.hint a.lnk,.auth .note a.lnk,.qfoot a.lnk{ display:inline-flex;align-items:center;min-height:24px} @media (pointer:coarse), (max-width:820px){ .sec-e a.lnk,.hint a.lnk,.auth .note a.lnk,.qfoot a.lnk{min-height:44px} } /* بطاقة صفّية عامة */ .rw{display:flex;gap:var(--s4);align-items:center;padding:var(--s4); border:1px solid var(--rule);border-radius:var(--r2);background:var(--surface); margin-bottom:var(--s2);text-decoration:none;color:var(--ink)} a.rw:hover{border-color:var(--rule2)} .rw-b{flex:1;min-width:0;display:block} /* داخل