/* اولفانا — تصميم موقع تواصل طلابي على نمط X (RTL، فاتح/داكن، متجاوب) */ :root{ --brand:#8B5E3C; --brand-2:#5B3A29; --accent:#1d9bf0; --bg:#ffffff; --bg-soft:#f7f9fb; --panel:#ffffff; --hover:#f2f5f8; --text:#0f1419; --muted:#5b6b7a; --border:#e6ecf1; --card:#f7f9fb; --brand-soft:color-mix(in srgb,var(--brand) 12%,transparent); --like:#e0245e; --repost:#17bf63; --gold:#f0b429; /* ⚠️ ألوانُ بطاقاتِ الأدوات كانت ‏12 لوناً مكتوباً في جافاسكربت (أزرقُ تويتر وبنفسجيٌّ وأحمر) لا صلةَ لها بلوحةِ الموقعِ الدافئة (مراجعة 2026-09-22). ستّةُ رموزٍ متناسقةٍ مع البنّيّ والذهبيّ تكفي للتمييز بلا نشاز. */ --tool-brown:#8B5E3C; --tool-gold:#C79A3B; --tool-clay:#C77D34; --tool-teal:#2E7D6B; --tool-indigo:#3B5BA5; --tool-plum:#6A5A8E; --radius:16px; --maxw:1100px; /* تعبئةُ الأسطح التي فوقها نصٌّ أبيض (الأزرار، فقاعةُ رسالتك، الشارات…). في الفاتح هي `--brand` نفسُها فلا يتغيّر شيء؛ وتنفصل عنه في الداكن — انظر هناك. */ --brand-fill:var(--brand); } [data-theme="dark"]{ --bg:#15191e; --bg-soft:#1b2027; --panel:#1b2027; --hover:#222a33; --text:#e7eef5; --muted:#8b98a5; --border:#2a333d; --card:#222a33; --brand-soft:color-mix(in srgb,var(--brand) 24%,transparent); /* لونُ الهويّة في الوضع الداكن — قِيس ولم يُقدَّر. كان `#8B5E3C` يُورَث من `:root` بلا إعادة تعريف، فتباينُه على خلفيّة البطاقة الداكنة **٢٫٦٠:١** — دون عتبة WCAG AA (٤٫٥) بل ودون عتبة النصّ الكبير (٣٫٠). وعلى الخلفيّة الأساسيّة ٣٫١٦:١. و١٩٩ قاعدةً تستعمل `--brand`: اسمُ المنصّة، وبند القائمة النشط (وهو الدليل الوحيد على موضع الطالب في التطبيق)، وعدّاد نقاطه، وروابط مصادر المكتبة. والوضع الداكن هو ما يستعمله الطالب ليلاً — وهو وقت المذاكرة. `#C89A6B` أقربُ درجةٍ للهويّة ترفع التباين إلى ٦٫٩٧ على الأساسيّة و**٥٫٧٣** على البطاقة، فتعبر AA في الاثنتين. */ --brand:#C89A6B; --brand-2:#A87B52; /* ⚠️ لكنّ `#C89A6B` **خلفيةً** تحت نصٍّ أبيض تباينُها ‏2.53:1 (قِيس في مراجعة 2026-09-23: كلُّ زرٍّ رئيسيٍّ في الداكن — «منشور»، «متابعة»، «تسجيل الدخول»). فالتعبئةُ تنفصل عن لون النصّ: `#8B5E3C` — بنّيُّ الوضع الفاتح نفسُه، فالزرُّ واحدٌ في الوضعين — أبيضُه ‏5.58:1، ويتميّز عن الخلفيّة الداكنة بـ‏3.16:1. ورُفض ‏`#7A4F2E` (أبيضُه ‏7.03) لأنّه يذوب في الخلفيّة (‏2.51 و‏2.33 على البطاقة) ويُضيف درجةَ بنّيٍّ ثالثة. و`--brand` يبقى ‏`#C89A6B` لكلّ **نصٍّ** بنّيّ. */ --brand-fill:#8B5E3C; } *{box-sizing:border-box} html,body{margin:0;padding:0} /* ضبط حجم أيقونات SVG افتراضياً (تتمدّد بلا قيد لولاه) */ svg{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle} .searchbox svg{width:19px;height:19px;color:var(--muted)} .pctx svg{width:14px;height:14px} .why svg{width:14px;height:14px} .nav-compose .btn svg{width:21px;height:21px} .feature-ic svg{width:24px;height:24px} .av svg{width:54%;height:54%} .brand img{width:34px;height:34px} body{ font-family:"Segoe UI",Tahoma,system-ui,sans-serif; background:var(--bg-soft); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; /* الاتّجاهُ من (i18n.js)، لا مكتوباً هنا */ } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} /* الحقولُ ترث خطَّ الصفحة كالأزرار (مراجعة 2026-09-22: كانت Arial وسط Segoe UI) */ input,select,textarea,optgroup{font-family:inherit} /* ⚠️ عنصرُ النائب صريحاً (مراجعة 2026-09-22): بلا قاعدةٍ يأخذ كلُّ متصفّحٍ لونَه — Safari ‏#a9a9a9 ≈ 2.3:1 على الأبيض (دون WCAG AA). و`--muted` ‏5.2:1 في الفاتح. والشفافيّةُ 1 لأنّ Firefox يخفّفه افتراضاً. */ ::placeholder{color:var(--muted);opacity:1} .hidden{display:none!important} .spacer{flex:1} .muted{color:var(--muted)} .center{display:flex;align-items:center;justify-content:center} /* أزرار */ .btn{border:none;border-radius:999px;padding:10px 18px;font-weight:800;font-size:15px;background:var(--brand-fill);color:#fff;transition:.15s} .btn:hover{filter:brightness(1.08)} .btn.block{width:100%} .btn.lg{padding:13px 22px;font-size:16px} .btn.ghost{background:transparent;color:var(--brand);border:1.5px solid var(--border)} .btn.ghost:hover{background:var(--hover)} .btn.sm{padding:7px 14px;font-size:13px} .btn.danger{background:var(--like)} .icon-btn{background:transparent;border:none;color:var(--muted);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;transition:.15s} .icon-btn:hover{background:var(--hover);color:var(--brand)} .icon-btn svg{width:20px;height:20px} /* الصورة الرمزية */ .av{border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;flex:0 0 auto;overflow:hidden} .verified{color:var(--accent);width:17px;height:17px;flex:0 0 auto} /* الشارات/الرقائق */ .chip{display:inline-flex;align-items:center;gap:6px;background:var(--hover);color:var(--text);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700} .chip.brand{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand)} .badge{background:var(--brand-fill);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px} /* ── التخطيط (3 أعمدة) ── */ .app{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(330px,380px);max-width:none;margin:0;gap:0} .sidebar{position:sticky;top:0;height:100vh;height:100dvh;padding:8px 12px;display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--border);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain} .brand{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:6px} .brand img{width:34px;height:34px} .brand b{font-size:22px;font-weight:900;color:var(--brand)} .nav-item{display:flex;align-items:center;gap:14px;padding:9px 14px;border-radius:999px;font-size:18px;font-weight:700;color:var(--text);transition:.15s;position:relative} /* ⚠️ قِيس (مراجعة 2026-09-22): محتوى الشريط الجانبيّ ‏1013px في نافذةٍ ‏936px، فيظهر له شريطُ تمريرٍ **ثانٍ** بجانب شريط الصفحة على كلّ مسار. أربعةَ عشرَ بنداً + زرٌّ + صفُّ المستخدم: تضييقُ الحشوِ والمسافةِ يُدخلها في الشاشة الشائعة، ويبقى `overflow-y:auto` للنوافذِ القصيرةِ جدّاً (حيث التمريرُ ضرورةٌ لا زينة). */ .nav-item svg{width:24px;height:24px} .nav-item:hover{background:var(--hover)} .nav-item.active{font-weight:900;color:var(--brand)} .nav-item .ncount{position:absolute;inset-inline-start:30px;top:7px;background:var(--brand-fill);color:#fff;border-radius:999px;font-size:11px;font-weight:800;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px} .nav-compose{margin:10px 6px} .nav-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:999px;cursor:pointer} .nav-user:hover{background:var(--hover)} .main{min-height:100vh;border-inline:1px solid var(--border);background:var(--bg)} .topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--border)} .topbar .tb-head{display:flex;align-items:center;gap:14px;padding:10px 16px} .topbar h2{margin:0;font-size:20px;font-weight:900} /* ⚠️ إصلاحان متراكبان على هذا الرأس (يحشد حتى ٦ عناصر: أيقونة+عنوان + ٥ أزرار أيقونة، مثل رأس محادثة المكتبة الناطقة): (١) ٢٠٢٦-٠٨-٢٦ — تصغيرٌ طفيف للأزرار/المسافات/الخطّ عند ≤٤٨٠بكسل. **لكنّ `font-size:16px` هنا كان ميتاً فعلياً منذ كتابته**: قاعدة `.topbar h2` غير الشرطيّة (تحت هذا الصندوق مباشرةً حينها) بنفس الخصوصيّة وتالية له في الترتيب المصدريّ ⇒ تغلبه دائماً بصرف النظر عن العرض (تعادلُ الخصوصيّة يُحسَم بالترتيب، لا بوجود `@media`). نُقلت القاعدة غير الشرطيّة الآن *قبل* هذا الصندوق كي يستطيع فعلاً الكتابة فوقها. (٢) ٢٠٢٦-٠٨-٢٧ — حتى مع (١) مُصلَحاً، عند ٣٢٠بكسل تحديداً يبقى العنوان يلتفّ سطرَين فعلياً (ارتفاعُه المقيس ٦٤بكسل، لا ٣٢): بحساب الأزرار الخمسة وأيقونة الكتاب والمسافات لا يتبقّى له سوى ~٧٦بكسل من أصل ~١٥٠بكسل يحتاجها نصّه — فجوةٌ لا يسدّها تصغيرُ خطٍّ بمقدار نقطتين. الحلّ الجذريّ لا تخمين حجمٍ آخر: العنوان يتقلّص حتى الحدّ المتاح فعلياً ويُقتَطع بثلاث نقاطٍ بدل أن يلتفّ — يضمن سطراً واحداً **دائماً** أيّاً كان عدد الأزرار مستقبلاً، بدل عتبةٍ محسوبةٍ يدوياً تنكسر عند أوّل زرٍّ يُضاف. */ .topbar h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:480px){ .topbar .tb-head{gap:6px} .topbar h2{font-size:16px} .tb-head .icon-btn{width:32px;height:32px} .tb-head .icon-btn svg{width:17px;height:17px} } .tabs{display:flex} .tab{flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto;text-align:center;padding:15px;font-weight:800;color:var(--muted);position:relative;cursor:pointer;transition:.15s} /* تبويباتٌ متساويةٌ لا تفيض: «Most influential» ‏115px كان يدفع الصفَّ إلى ‏345 في شاشة ‏320 */ @media(max-width:400px){.tab{padding:15px 6px}} .tab:hover{background:var(--hover)} .tab.active{color:var(--text)} .tab.active:after{content:"";position:absolute;bottom:0;inset-inline:25%;height:4px;border-radius:4px;background:var(--brand)} .right{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:14px} /* ⚠️ **بطاقةٌ تُعصَر لا تفيض** (بلاغُ المالك 2026-09-23): الرفُّ عمودٌ مرن، وأبناؤه بـ`flex-shrink:1` افتراضاً. فحين يطول المحتوى عن النافذة تُقصَّر البطاقةُ نفسُها ويُقتطَع ما فيها بدل أن يفيض الرفُّ — فلا يظهر شريطُ تمريرٍ ولا يُبلَغ المقطوع. قِيس في نافذةٍ ارتفاعُها 620: «الأندية الرائجة» 507 من 598، و`scrollHeight == clientHeight` أي لا تمرير. المنعُ من الانكماش يجعل الفيضَ حقيقيّاً فيعمل `overflow-y:auto` كما يُنتظَر. وينطبق الأمرُ نفسُه على شريط التنقّل. */ .right > *, .sidebar > *{flex:0 0 auto} /* الحشوةُ على الحقل لا على الإطار: كان الحقلُ ‏22px في إطارٍ ‏42px فلمسُ حوافّه لا يُركّز فيه (مراجعة 2026-09-23) */ .searchbox{display:flex;align-items:center;gap:8px;background:var(--hover);border-radius:999px;padding:0 16px} .searchbox input{background:transparent;border:none;outline:none;color:var(--text);width:100%;font-size:15px;padding:11px 0} .card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} [data-theme="dark"] .card{background:#1f262e} .card h3{margin:0;padding:14px 16px 6px;font-size:19px;font-weight:900} .card .row{display:flex;align-items:center;gap:10px;padding:11px 16px;transition:.15s} .card .row:hover{background:var(--hover)} .card .row .av{width:42px;height:42px} /* ── المنشور ── */ .post{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:.1s;cursor:pointer} .post:hover{background:var(--hover)} .post .pbody{flex:1;min-width:0} .phead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;position:relative} /* منشورٌ باسمٍ/شارةٍ طويلة على هاتفٍ ضيّق يلفّ .phead — فيسحب معه .spacer الفارغ و.pmenu («⋯» خيارات المنشور) إلى سطرٍ يتيمٍ وحدهما، منفصلَين بصريّاً عن الاسم الذي يخصّانه. الحل: يخرج .pmenu من تدفّق الالتفاف تماماً ويُثبَّت أعلى الرأس دائماً — نمطٌ مألوف (X/Twitter). الحشوة تحجز له مكاناً فلا يعلو النصّ تحته. */ .phead:has(.pmenu){padding-inline-end:26px} .phead .pname{font-weight:800} .phead .phandle,.phead .ptime{color:var(--muted);font-size:14px} .pctx{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:5px;margin-top:1px} .ptext{margin:5px 0;white-space:pre-wrap;word-break:break-word;font-size:15.5px} .pimg{margin-top:8px;border-radius:14px;border:1px solid var(--border);max-height:380px;width:100%;object-fit:cover;display:block} .phashtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .phashtags a{color:var(--accent);font-weight:700;font-size:14px} .why{margin-top:8px;font-size:12px;color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent);border:1px solid color-mix(in srgb,var(--brand) 16%,transparent);border-radius:8px;padding:5px 9px;display:inline-flex;gap:6px;align-items:center;cursor:pointer;transition:background .15s,border-color .15s} .why:hover{background:color-mix(in srgb,var(--brand) 13%,transparent);border-color:color-mix(in srgb,var(--brand) 30%,transparent)} .why:focus-visible{outline:2px solid var(--brand);outline-offset:1px} .why-gear{margin-inline-start:auto;font-size:11px;font-weight:700;opacity:.85;white-space:nowrap;padding-inline-start:6px} /* ستّة أزرارٍ ثابتة العرض (ردّ/إعادة نشر/إعجاب/حفظ/مشاهدات/مشاركة)، كلٌّ منها يتّسع بعددٍ ظاهر (رقم التفاعل) — لا تشترك كل المنشورات في نفس العرض المطلوب: منشورٌ بتفاعلٍ عالٍ (كل الحقول مملوءة بأرقام) قِيس يحتاج ٢٤٢بكسل، بينما البطاقة نفسها عند ٣٢٠بكسل لا تمنحه إلا ٢٣٢ — ‎١٠بكسل فيضانٌ صامت (`space-between` يوزّع الفائض، لا يتقلّص عن مجموع محتوى الأزرار). نفس معالجة `.kind-chips` أعلاه: تمريرٌ أفقيّ بدل فيضانٍ يكسر عرض المستند كلّه (المُكتشَف حيّاً في المُنشئ). */ .pactions{display:flex;justify-content:space-between;max-width:430px;margin-top:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .pactions::-webkit-scrollbar{display:none} .pactions .pact{flex-shrink:0} .pact{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;border:none;background:none;padding:6px 8px;border-radius:999px;transition:.15s} .pact svg{width:18px;height:18px} .pact:hover{background:var(--hover)} .pact.reply:hover{color:var(--accent)} .pact.repost:hover,.pact.repost.on{color:var(--repost)} .pact.like:hover,.pact.like.on{color:var(--like)} .pact.bm:hover,.pact.bm.on{color:var(--brand)} .pmenu{position:absolute;top:-2px;inset-inline-end:0} /* Portaled to as position:fixed (coords set in openMenu) so it floats above later posts/comments — which form their own stacking contexts via the fadeUp animation and otherwise painted over an absolute, in-card menu. */ .pmenu-pop{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.18);min-width:190px;z-index:160;overflow:hidden} .pmenu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:11px 14px;background:none;border:none;color:var(--text);font-size:14px} .pmenu-pop button:hover{background:var(--hover)} .pmenu-pop button.del{color:var(--like)} /* استطلاع */ .poll{margin-top:8px;max-width:430px} .poll-opt{position:relative;border:1px solid var(--border);border-radius:10px;padding:9px 13px;margin-bottom:7px;font-weight:700;overflow:hidden;cursor:pointer} .poll-opt .fill{position:absolute;inset-block:0;inset-inline-start:0;background:color-mix(in srgb,var(--brand) 18%,transparent);z-index:0} .poll-opt .lbl{position:relative;z-index:1;display:flex;justify-content:space-between} /* المُنشئ */ .composer{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)} /* عمودُ النصّ (`
` بلا صنف) إلى جانب الصورة الرمزية `.av` — عنصرُ flex بلا `min-width:0` يرث `min-width:auto`، فيُقاس حدُّه الأدنى بأكبر محتوًى داخله. و`