/* ========================================
   NEXUS — Chart system
   ----------------------------------------
   لوحة الرسوم ليست ألوان الواجهة نفسها: ألوان العلامة التجارية
   (var(--color-primary-bright) / var(--color-secondary)) تقع خارج نطاق الإضاءة المطلوب للرسوم على
   خلفية داكنة (L 0.48–0.67)، فتفشل الفحص. الدرجات أدناه مُصادَق
   عليها بـ validate_palette.js على السطح var(--viz-surface):

     [PASS] نطاق الإضاءة · [PASS] حد التشبع · [PASS] فصل عمى الألوان
     [PASS] أرضية الرؤية الطبيعية · [PASS] التباين مقابل السطح
     (all-pairs — صالحة حتى للمخططات المبعثرة)
   ======================================== */

.viz {
    --surface: var(--viz-surface);
    --series-1: var(--viz-series-1);
    /* أزرق — يقرأ كالأزرق السيادي */
    --series-2: var(--viz-series-2);
    /* برتقالي — يقرأ كالبرتقالي التقني */
    --series-3: var(--viz-series-3);
    /* أخضر */
    --neutral: var(--viz-neutral);
    /* المنافسون/الخلفية — رمادي محايد */
    --grid: var(--viz-grid);
    --axis: var(--viz-axis);

    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
}

.viz--plain {
    background: none;
    border: none;
    padding: 0;
}

.viz__head {
    margin-bottom: 22px;
}

.viz__title {
    font-size: 1.06rem;
    margin-bottom: 6px;
}

.viz__sub {
    font-size: 0.88rem;
    color: var(--color-text-gray);
}

/* Only the chart itself scales — not the icons inside flags/callouts.
   Capped so a square-ish chart doesn't balloon on a wide screen. */
.viz > svg {
    width: 100%;
    max-width: 760px;
    height: auto;
    display: block;
    margin-inline: auto;
    overflow: visible;
}

/* الخرائط المربّعة تحتاج سقفاً أضيق */
.viz > svg[viewBox$="420"] {
    max-width: 560px;
}

/* --- الأسطورة --- */
.viz__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    font-size: 0.84rem;
    color: var(--color-text-gray);
    /* النصوص بألوان النص لا بألوان السلاسل */
}

.viz__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.viz__swatch {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

.viz__swatch--1 {
    background: var(--series-1);
}

.viz__swatch--2 {
    background: var(--series-2);
}

.viz__swatch--3 {
    background: var(--series-3);
}

.viz__swatch--neutral {
    background: var(--neutral);
}

/* --- علامة "مستهدف / توقّع" — شرط الصدق --- */
.viz__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-secondary);
    background: var(--color-secondary-soft);
    border: 1px solid var(--color-secondary-line);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    margin-bottom: 14px;
}

/* --- المصدر --- */
.viz__source {
    margin-top: 16px;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* --- البديل النصي/الجدولي (إتاحة) --- */
.viz__table {
    margin-top: 16px;
}

.viz__table summary {
    font-size: 0.8rem;
    color: var(--color-text-gray);
    cursor: pointer;
    padding: 6px 0;
}

.viz__table summary:hover {
    color: var(--color-primary-bright);
}

.viz__table table {
    width: 100%;
    margin-top: 10px;
    font-size: 0.84rem;
    border-collapse: collapse;
}

.viz__table th,
.viz__table td {
    padding: 8px 12px;
    text-align: start;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-gray);
}

.viz__table th {
    color: var(--color-text-white);
    font-weight: 600;
}

/* --- عناصر SVG المشتركة --- */
.viz-axis-line {
    stroke: var(--axis);
    stroke-width: 1;
}

.viz-grid-line {
    stroke: var(--grid);
    stroke-width: 1;
}

.viz-label {
    fill: var(--viz-label);
    font-family: var(--font-ar);
    font-size: 12px;
}

.viz-label--en {
    font-family: var(--font-en);
    direction: ltr;
}

.viz-value {
    fill: var(--viz-value);
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 600;
    direction: ltr;
}

.viz-value--muted {
    fill: var(--viz-label);
    font-weight: 500;
}

/* علامات رفيعة، نهايات مدوّرة 4px مثبتة على خط الأساس */
.viz-bar {
    rx: 4;
}

.viz-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.viz-dot {
    r: 4.5;
    stroke: var(--surface);
    stroke-width: 2;
    /* حلقة 2px على العلامات المتراكبة */
}

/* --- الرقم البطولي --- */
.viz-hero {
    text-align: center;
    padding: 8px 0 4px;
}

.viz-hero__value {
    display: block;
    font-family: var(--font-en);
    font-size: clamp(2.6rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-secondary);
    direction: ltr;
}

.viz-hero__label {
    display: block;
    margin-top: 12px;
    font-size: 0.98rem;
    color: var(--color-text-body);
}

/* ============================================================
   انحسار التدخل البشري
   ============================================================ */
.ov__area {
    fill: var(--series-1);
    opacity: 0.14;
}

.ov__line {
    stroke: var(--series-1);
}

.ov__dot {
    fill: var(--series-1);
}

.ov__dot--mid {
    fill: var(--neutral);
}

.ov__val {
    text-anchor: middle;
}

.ov__x {
    text-anchor: middle;
    fill: var(--viz-value);
    font-size: 13px;
    font-weight: 600;
}

.ov__phase {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--viz-muted);
}

/* ============================================================
   كلفة السنترال
   ============================================================ */
.pbx__bar--old {
    fill: var(--series-2);
}

.pbx__bar--new {
    fill: var(--series-1);
}

.ov__y {
    /* ltr: end = الحافة اليمنى. بدونها تنسكب خارج viewBox. */
    text-anchor: end;
}

.pbx__val {
    text-anchor: middle;
    fill: var(--viz-on-series);
}

.pbx__val--new {
    /* .viz-value تضبط direction:ltr ⇒ start = الحافة اليسرى (هندسي لا منطقي) */
    text-anchor: start;
    fill: var(--series-1);
}

.pbx__label {
    /* نص عربي (rtl): start = الحافة اليمنى، end = اليسرى — معكوس عن الحدس الهندسي. */
    text-anchor: start;
    fill: var(--viz-value);
    font-size: 13px;
    font-weight: 600;
}

.pbx__label--new {
    fill: var(--series-1);
}

.pbx__note {
    text-anchor: start;
    font-size: 11.5px;
}

.pbx__zero {
    text-anchor: middle;
    font-size: 11px;
}

.pbx__after {
    margin-top: 20px;
}

/* ============================================================
   خريطة التموضع
   ============================================================ */
.pos__field {
    fill: var(--color-surface-wash-2);
    stroke: var(--color-border);
}

.pos__quad {
    fill: var(--series-1);
    opacity: 0.07;
}

.pos__dot--other {
    fill: var(--neutral);
}

.pos__dot--rival {
    fill: var(--series-2);
}

.pos__dot--own {
    fill: var(--series-1);
    stroke: var(--surface);
    stroke-width: 3;
}

.pos__name {
    text-anchor: middle;
    fill: var(--color-text-body);
    font-size: 12.5px;
    font-weight: 600;
}

.pos__name--own {
    fill: var(--viz-value);
    font-size: 16px;
    font-weight: 700;
}

.pos__note {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--viz-muted);
}

.pos__note--own {
    fill: var(--viz-label);
}

.pos__axis {
    text-anchor: middle;
    font-size: 12px;
    fill: var(--viz-muted);
}

.pos__honest {
    margin-top: 20px;
}

/* ============================================================
   بناء أصل البيانات
   ============================================================ */
.hv__track {
    fill: var(--color-surface-wash);
}

.hv__seg--1 {
    fill: var(--series-3);
}

.hv__seg--2 {
    fill: var(--series-1);
}

.hv__val {
    text-anchor: middle;
}

.hv__val--key {
    fill: var(--viz-value);
    font-size: 15px;
}

.hv__when {
    text-anchor: middle;
    fill: var(--viz-value);
    font-size: 13px;
    font-weight: 600;
}

.hv__note {
    text-anchor: middle;
    font-size: 11px;
    fill: var(--viz-muted);
}

/* ============================================================
   حجم السوق
   ============================================================ */
.mk__bar {
    fill: var(--neutral);
}

.mk__bar--key {
    fill: var(--series-1);
}

.mk__bar--muted {
    fill: var(--neutral);
    opacity: 0.6;
}

.mk__cat {
    /* نص عربي (rtl): start = الحافة اليمنى. end كان يقلب الاتجاه ويخرجه عن اللوحة. */
    text-anchor: start;
    fill: var(--viz-value);
    font-size: 13px;
    font-weight: 600;
}

.mk__val {
    /* القيمة تجلس على سطر العنوان في الطرف المقابل — لا فوق العمود أبداً */
    text-anchor: start;
    fill: var(--viz-value);
    font-size: 15px;
}

.mk__val--muted {
    fill: var(--viz-label);
}

.mk__note {
    text-anchor: start;
    font-size: 11px;
    fill: var(--viz-muted);
}

/* ============================================================
   المعالم
   ============================================================ */
.ms {
    display: grid;
    gap: 2px;
    position: relative;
}

.ms__item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--color-surface-wash-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.ms__item--key {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-line);
}

.ms__when {
    flex-shrink: 0;
    min-width: 66px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-secondary);
    padding-top: 2px;
}

.ms__item--key .ms__when {
    color: var(--color-primary-bright);
}

.ms__title {
    font-size: 1rem;
    margin-bottom: 5px;
}

.ms__text {
    font-size: 0.9rem;
    color: var(--color-text-gray);
}

/* ============================================================
   اللغات
   ============================================================ */
.lang {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.lang__group {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
}

.lang__group:first-child {
    border-color: var(--color-primary-line);
    background: linear-gradient(180deg, rgba(46, 123, 214, 0.08) 0%, transparent 60%), var(--color-card-bg);
}

.lang__title {
    font-size: 1.02rem;
    margin-bottom: 6px;
}

.lang__note {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.lang__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lang__tags .pill {
    font-size: 0.81rem;
    padding: 5px 12px;
}

.lang__total {
    margin-top: 26px;
    text-align: center;
}

.lang__total-num {
    display: block;
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-bright);
}

.lang__total-label {
    display: block;
    margin-top: 10px;
    font-size: 0.96rem;
    color: var(--color-text-gray);
}

/* ============================================================
   الذكاء البيعي
   ============================================================ */
.up__bar--base {
    fill: var(--neutral);
}

.up__bar--add {
    fill: var(--series-2);
}

.up__val {
    text-anchor: middle;
    fill: var(--viz-on-series);
    font-family: var(--font-ar);
    font-size: 13px;
}

.up__val--add {
    fill: var(--viz-on-series);
}

.up__note {
    text-anchor: end;
    font-size: 11.5px;
}

@media (max-width: 900px) {
    .lang {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .viz {
        padding: 20px 16px;
    }

    .ms__item {
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .viz [class*="anim"],
    .viz animate,
    .viz animateTransform {
        animation: none !important;
    }
}

/* ============================================================
   الجوال — تكبير نصوص الرسوم «العمودية»
   ------------------------------------------------------------
   الحجم المعروض = حجم الخط (وحدات viewBox) × (عرض اللوحة ÷ عرض viewBox).
   على شاشة 375px تكون اللوحة ~302px، فمعامل viewBox 620 هو 0.487 —
   أي أن خطاً بـ 11px يُعرض بـ 5.4px: غير مقروء. الأرقام أدناه تضمن
   أرضية 9.5px معروضة لأصغر نص، مع الحفاظ على التدرّج (القيمة أبرز
   من التسمية). الرسوم التي تحمل .viz-grow تخطيطها عمودي أصلاً
   (أعمدة أفقية مرصوفة) فيكفيها التكبير + إزاحات دقيقة؛ أما المخططات
   الكثيفة (العقد والصناديق) فلها نسخة جوال مستقلة بدل التكبير.

   --t = أرضية الحجم. قيمتها محسوبة لكل عرض viewBox:
     620 → 20px (×0.487 = 9.7px معروضة)
     640 → 21px (×0.472 = 9.9px معروضة)
   ============================================================ */
@media (max-width: 700px) {

    /* سقف العرض: بدونه يتضخّم النص عند 700px بلا داعٍ.
       الانتقاء أقوى من .viz > svg (0,2,1 مقابل 0,1,1). */
    .viz > svg.viz-grow {
        max-width: 430px;
    }

    .viz-grow {
        --t: 20px;
    }

    svg.viz-grow[viewBox="0 0 640 260"] {
        --t: 21px;
    }

    /* الأرضية لكل نص داخل اللوحة، ثم التدرّج فوقها */
    .viz-grow .viz-label,
    .viz-grow .viz-value {
        font-size: var(--t);
    }

    /* --- حجم السوق --- */
    .viz-grow .mk__cat {
        font-size: calc(var(--t) * 1.1);
    }

    .viz-grow .mk__val {
        font-size: calc(var(--t) * 1.3);
    }

    .viz-grow .mk__note {
        font-size: var(--t);
    }

    /* --- الذكاء البيعي --- */
    .viz-grow .up__val {
        font-size: calc(var(--t) * 1.1);
    }

    /* --- كلفة السنترال --- */
    .viz-grow .pbx__label {
        font-size: calc(var(--t) * 1.1);
    }

    .viz-grow .pbx__val {
        font-size: calc(var(--t) * 1.15);
    }

    /* --- بناء أصل البيانات --- */
    .viz-grow .hv__val {
        font-size: calc(var(--t) * 1.15);
    }

    .viz-grow .hv__val--key {
        font-size: calc(var(--t) * 1.3);
    }

    .viz-grow .hv__when {
        font-size: calc(var(--t) * 1.1);
    }

    /* --- انحسار التدخل البشري --- */
    .viz-grow .ov__x {
        font-size: var(--t);
    }

    .viz-grow .ov__val {
        font-size: calc(var(--t) * 1.15);
    }

    .viz-grow .viz-value--muted {
        font-size: var(--t);
    }
}

/* ============================================================
   الجوال — إزاحات التخطيط بعد التكبير
   ------------------------------------------------------------
   التكبير وحده يُلصق الصفوف ببعضها ويُدخل النص في الأعمدة، لأن
   صندوق النص العربي يرتفع ~1.5× مع الخط. الإزاحات أدناه محسوبة من
   صناديق مقيسة فعلياً (getBBox × مصفوفة العنصر) عند عرض 375px،
   لا بالتقدير. القاعدة في كل صف: فجوة ≥ 2 وحدة بين الصناديق
   المتجاورة، ونصُّ القيمة محتوى بالكامل داخل عموده.

   transform وحده — بلا خصائص الهندسة (x/y/width) — ليبقى السلوك
   واحداً في كل المتصفحات التي تدعم SVG.
   ============================================================ */
@media (max-width: 700px) {

    /* --- حجم السوق: الصف (عنوان+قيمة) ثم العمود ثم الملاحظة --- */
    .viz-grow .mk__val,
    .viz-grow .mk__bar {
        transform: translateY(3px);
    }

    /* العنوان يزيح 3 وحدات يساراً أيضاً: حرفه الأول يتجاوز
       نقطة الإرساء 600 قليلاً فيلامس خط الأساس الرأسي. */
    .viz-grow .mk__cat {
        transform: translate(-3px, 3px);
    }

    /* اللوحة تنتهي عند 330 والصفوف الثلاثة تشغل حتى 311 فقط،
       فتُوزَّع الوحدات الـ19 الفائضة على الصفّين الثاني والثالث
       ليتساوى الإيقاع الرأسي بدل أن يتكدّس أعلى اللوحة. */
    .viz-grow .mk__row--2 {
        transform: translateY(6px);
    }

    .viz-grow .mk__row--3 {
        transform: translateY(12px);
    }

    .viz-grow .mk__note {
        transform: translateY(9px);
    }

    /* --- الذكاء البيعي ---
       الملاحظة المكبّرة أطول وأعلى، فيرتفع خط الأساس 10 وحدات
       والعمودان 6، وإلا مرّ الخط أفقياً وسط الملاحظة. */
    .viz-grow .up__note {
        transform: translateY(-3px);
    }

    .viz-grow .up__axis {
        transform: translateY(-10px);
    }

    .viz-grow .up__bar,
    .viz-grow .up__val {
        transform: translateY(-6px);
    }

    /* --- كلفة السنترال: العمودان 44 وحدة، فيُفرَّج ما بينهما --- */
    .viz-grow .pbx__label {
        transform: translateY(3px);
    }

    .viz-grow .pbx__bar--old {
        transform: translateY(6px);
    }

    .viz-grow .pbx__bar--new {
        transform: translateY(9px);
    }

    .viz-grow .pbx__val {
        transform: translateY(8px);
    }

    /* بعد .pbx__val: نفس الانتقاء، والترتيب هو الحاكم */
    .viz-grow .pbx__val--new {
        transform: translateY(11px);
    }

    .viz-grow .pbx__note {
        transform: translateY(12px);
    }

    .viz-grow .pbx__zero {
        transform: translateY(3px);
    }

    /* --- بناء أصل البيانات: الشهر ثم الملاحظة تحته --- */
    .viz-grow .hv__when {
        transform: translateY(-4px);
    }

    .viz-grow .hv__note {
        transform: translateY(12px);
    }

    /* --- انحسار التدخل البشري ---
       جسم المخطط يرتفع 8 وحدات، فيتسع أسفل المحور صفّان:
       السنة (أرضية الحجم) ثم المرحلة. و«100%» تنزل إلى داخل
       الهضبة لأنها كانت تخرج من أعلى اللوحة وتلتصق بتسمية المحور. */
    .viz-grow .ov__plot {
        transform: translateY(-8px);
    }

    .viz-grow .ov__val--first {
        transform: translate(-90px, 44px);
    }

    .viz-grow .ov__x {
        transform: translateY(-8px);
    }

    .viz-grow .ov__phase {
        transform: translateY(4px);
    }
}

/* ============================================================
   نسختا رسم البطاقة: سطح المكتب والجوال
   ------------------------------------------------------------
   الانتقاء هنا (0,2,1) لا (0,1,0): قاعدة .viz > svg أعلاه
   تضبط display:block بانتقاء (0,1,1)، فلو أخفينا النسخة
   بـ .viz-m وحدها لظهرت النسختان معاً على سطح المكتب.
   تنتقل عند العتبة نفسها التي ينتقل عندها تكبير .viz-grow.
   ============================================================ */
.viz > svg.viz-m {
    display: none;
}

@media (max-width: 700px) {

    .viz > svg.viz-d {
        display: none;
    }

    .viz > svg.viz-m {
        display: block;
        max-width: 380px;
    }
}