/* ==========================================================================
   report.css — نظام تصميم تقارير الأدوات
   مبنيّ حرفياً على فريمات «رئيسية - أداة … - مشروع تعليمي» (صفحة final):
   الدارس الذكي 271:14075 · المُعبّئ 271:18370 · فاحص الجودة 271:19569 ·
   المقاصدي 271:20668 (+ تبويباته 271:21878 و271:21400 ومخططه 271:20256) ·
   الفرز 271:24303.
   يُستخدم في مكانين: صفحة الزائر المستقلة، ومودالات الداشبورد.
   الخط: Greta Arabic (خط المشروع — Cairo في فيجما غير معتمد هنا عمداً).
   ========================================================================== */

/* التوكنات على :root أيضاً — بعض العناصر (بطاقة النتيجة في تقرير Livewire)
   تُعرض خارج نطاق `.rp` فتحتاج المتغيّرات متاحة عالمياً. الأسماء مسبوقة بـ rp. */
:root,
.rp {
    --rp-ink: #0d0f52;
    --rp-ink-deep: #0d0035;
    --rp-body: #515151;
    --rp-muted: #939393;
    --rp-line: #eaeaea;
    --rp-tint: #f4f5ff;
    --rp-tint-2: #f6f7ff;
    --rp-badge: #eef2ff;
    --rp-accent: #3333ff;
    --rp-accent-deep: #2d0e8b;
    --rp-purple: #2b0081;
    --rp-score: #3862ef;
    --rp-danger: #b42318;
    --rp-danger-bg: #fff3f2;
    --rp-warn-bg: #fffaf2;
    --rp-ok-bg: #f5fff4;
    --rp-radius: 16px;
    --rp-radius-lg: 24px;
    /* حدود فيجما المتكررة: 4361EE بشفافيتين */
    --rp-card-line: rgba(67, 97, 238, 0.1);
    --rp-card-line-strong: rgba(67, 97, 238, 0.22);
    /* تدرّجات فيجما: البطاقات الداكنة والأزرار */
    --rp-dark-grad: linear-gradient(to left, #111178, #14073b);
    --rp-btn-grad: linear-gradient(to left, #3333ff, #2d0e8b);
    --rp-shadow: 0 2px 20px rgba(67, 97, 238, 0.07);
    --rp-shadow-btn: 1px 2px 4px 0px rgba(67, 97, 238, .38);
}

/* الخط واللون يخصّان نطاق `.rp` وحده — لا يُطبَّقان على :root */
.rp {
    box-sizing: border-box;
    color: var(--rp-ink);
    font-family: 'Greta Arabic', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.rp *,
.rp *::before,
.rp *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------- عناصر عامة */

.rp-page {
    background: #fdfcff;
    /* Frame 2147226832: pad 48/64 (24 أعلى صفحة الدارس الذكي وحدها) */
    padding-block: 48px 0;
}

.rp-page--tight {
    padding-top: 24px;
}

.rp-wrap {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--rp-body);
}

.rp-crumbs li {
    padding-block: 8px;
    border-radius: 99px;
}

.rp-crumbs a {
    color: var(--rp-body);
    text-decoration: none;
}

.rp-crumbs a:hover {
    color: var(--rp-accent);
}

.rp-crumbs li[aria-current] {
    color: var(--rp-accent);
}

/* الفاصل سهم كما في فيجما (arrow-left-01) لا شرطة مائلة */
.rp-crumbs li + li::before {
    content: '‹';
    margin-inline-end: 8px;
    color: var(--rp-body);
}

/* عنوان الصفحة — يظهر في فريمَي الدارس الذكي والمقاصدي فقط */
.rp-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.85;
    color: var(--rp-ink);
}

/* شريط داكن متدرّج: زر «جرّب على ملفاتك» + تنبيه + أيقونة (Container 1312x72) */
.rp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--rp-radius);
    background: var(--rp-dark-grad);
}

.rp-bar__note {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* سطر «هذه تجربة حيّة…» يظهر على الجوال فقط (يحل محل نص الشريط) */
.rp-bar__msg--demo {
    display: none;
}

.rp-bar__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #d8daff;
    background: #fff;
    color: var(--rp-accent);
}

/* ------------------------------------------------------------- الأزرار -- */

.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 32px;
    border: 0;
    border-radius: var(--rp-radius);
    background: var(--rp-btn-grad);
    box-shadow: var(--rp-shadow-btn);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.rp-btn:hover {
    filter: brightness(1.08);
}

.rp-btn--lg {
    min-height: 48px;
}

/* زر بحدّ ونص متدرّجين (فيجما: stroke/fill linear #3333ff→#2d0e8b) */
.rp-btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 40px;
    padding: 8px 32px;
    border: 1px solid transparent;
    border-radius: var(--rp-radius);
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--rp-btn-grad) border-box;
    box-shadow: var(--rp-shadow-btn);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

.rp-btn--outline > span {
    background: var(--rp-btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------- تفاعلات الداشبورد: إعادة التشغيل وتعديل الدرجات -- */

/* مجموعة أزرار الشريط الداكن (إعادة التشغيل + العودة للمشروع) */
.rp-bar__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* زر ثانوي شفاف على الشريط الداكن */
.rp-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: none;
}

.rp-btn--ghost:hover {
    filter: none;
    background: rgba(255, 255, 255, 0.22);
}

.rp-btn[disabled] {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* أزرار − / + الفعلية في شريحة الدرجة (تحل محل العلامات الزخرفية للمالك) */
.rp-crit__step {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3a00ab;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s ease;
}

.rp-crit__step:hover {
    background: #e6defa;
}

.rp-crit__step:disabled {
    color: #b0b0b0;
    cursor: default;
    background: transparent;
}

/* --------------------------------------------- الحاوية البيضاء الكبرى --- */

/* Container 1312: أبيض بحدّ 4361EE@10% وظل خفيف، يضم رأس الأداة والمحتوى */
.rp-shell {
    background: #fff;
    border: 1px solid var(--rp-card-line);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-shell__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px 24px;
    margin-top: -8px; /* gap32 للـ shell − gap24 الداخلي كما في الفريم */
}

.rp-shell__body--loose {
    gap: 32px;
    margin-top: 0;
}

/* زر «جرّب على ملفاتك» أسفل الحاوية (Button 349x48) — ملاصق لبداية السطر
   (يمين الحاوية) في كل الفريمات، لا في الوسط */
.rp-shell__cta {
    align-self: flex-start;
    width: 349px;
    max-width: 100%;
    min-height: 48px;
}

/* --------------------------------------------------------- رأس الأداة -- */

/* ToolCard 1310x80: شريط f6f7ff بحدّ سفلي وزوايا علوية 14 */
.rp-toolcard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 14px 14px 0 0;
    background: var(--rp-tint-2);
    border-bottom: 1px solid var(--rp-card-line);
}

.rp-toolcard__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background: var(--rp-badge);
    border: 1px solid #dcd2f0;
    color: var(--rp-purple);
}

.rp-toolcard__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--rp-badge);
    color: var(--rp-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
}

.rp-toolcard__sub {
    margin: 4px 0 0;
    padding-top: 2px;
    color: var(--rp-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

/* ------------------------------------------------------ ملخّص + النتيجة -- */

/* الحدّ الفاصل أسفل منطقة الملخّص — فيجما strokeDashes [15,15] بلون 515151 */
.rp-divide {
    padding-bottom: 25px;
    background-image: repeating-linear-gradient(to left, var(--rp-body) 0 15px, transparent 15px 30px);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 1px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-sum {
    display: flex;
    align-items: center;
    gap: 32px;
}

.rp-sum__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-sum__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rp-sum__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-sum__text p {
    margin: 0;
    color: #191919;
    font-size: 16px;
    line-height: 30px;
}

/* سطر ثانوي تحت الملخص (فاحص الجودة: «درجة الجودة التقديرية: 75/100») */
.rp-sum__meta {
    margin: 0;
    color: var(--rp-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
}

/* شارة التوصية في ملخص المقاصدي (Frame 2147226850) */
.rp-rec {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: var(--rp-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
}

.rp-rec--conditional {
    background: rgba(152, 122, 3, 0.08);
    border: 1px solid #ede4c2;
    color: #987a03;
}

.rp-rec--strong {
    background: rgba(3, 152, 85, 0.08);
    border: 1px solid #c2edd6;
    color: #039855;
}

.rp-rec--weak,
.rp-rec--none {
    background: rgba(180, 35, 24, 0.08);
    border: 1px solid #f3c6c2;
    color: var(--rp-danger);
}

/* بطاقة النتيجة الداكنة 275×200 وخلفها هالة 3862EF (زاوية علوية يسرى بالفريم) */
.rp-score {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 275px;
    min-height: 200px;
    padding: 12px;
    border-radius: var(--rp-radius);
    background: var(--rp-dark-grad);
    border: 1px solid var(--rp-card-line);
    overflow: hidden;
}

.rp-score::before {
    content: '';
    position: absolute;
    top: -93px;
    left: 216px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--rp-score);
    filter: blur(54px);
}

.rp-score__col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.rp-score .rp-score__label {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 23px;
}

.rp-score .rp-score__value {
    color: #f6f7ff;
    font-size: 54px;
    font-weight: 800;
    line-height: 54px;
    direction: ltr;
}

/* مقام القيمة الكسرية «/195» بحجم 24 (فيجما styleOverride على 271:20336) */
.rp-score__denom {
    font-size: 24px;
}

.rp-score .rp-score__sub {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    opacity: 1;
}

/* تبويب النجاعة في المقاصدي: القيمة أولاً ثم عنوان 16 وسطر 12 (271:21478) */
.rp-score .rp-score__label--sm {
    font-size: 16px;
}

.rp-score .rp-score__sub--xs {
    font-size: 12px;
    font-weight: 600;
}

.rp-score__pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --------------------------------------------------------- قائمة المعايير */

.rp-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--rp-ink);
}

.rp-sec-head span {
    flex: 1 1 auto;
}

.rp-sec-head b {
    color: var(--rp-accent);
    font-weight: 700;
}

.rp-criteria {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-crit {
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
    border: 1px solid #c8c8fb;
    overflow: hidden;
}

.rp-crit__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 12px;
    background: #fff;
    border-bottom: 1px solid var(--rp-card-line);
}

.rp-crit__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rp-badge);
    color: var(--rp-ink-deep);
    font-size: 16px;
    font-weight: 700;
}

.rp-crit__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rp-crit__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-crit__text {
    margin: 0;
    color: var(--rp-body);
    font-size: 16px;
    line-height: 20px;
}

/* شريحة الدرجة «6 /10» مع علامتَي − و + (Frame 2147226850 125×56) */
.rp-crit__score {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 125px;
    min-height: 56px;
    padding: 4px 12px;
    border-radius: 10px;
    background: var(--rp-tint-2);
    direction: ltr;
}

.rp-crit__score b {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--rp-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 26px;
    white-space: nowrap;
}

/* فيجما 271:14151: القيمة 24px بلون 3A00AB والمقام «/10» بحجم 16 */
.rp-crit__score-val {
    color: #3a00ab;
    font-size: 24px;
    line-height: 1;
}

.rp-crit__score-max {
    font-size: 16px;
}

.rp-crit__score i {
    flex: none;
    color: #b0b0b0;
    font-style: normal;
    line-height: 0;
}

.rp-crit__body {
    padding: 24px 16px;
}

/* بطاقة الدليل: بيضاء بشريط أيمن 4px بلون 2B0081 (Frame 427321512) */
.rp-evidence {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 24px;
    border-radius: var(--rp-radius);
    background: #fff;
    border-right: 4px solid var(--rp-purple);
}

.rp-evidence__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rp-evidence__head h4 {
    margin: 0;
    color: var(--rp-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
}

/* زر «إضافة …» الرمادي المعطّل (فيجما: حد 939393، دليل r:8 / ملاحظات r:16) */
.rp-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    border: 1px solid var(--rp-muted);
    border-radius: var(--rp-radius);
    background: transparent;
    color: var(--rp-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 23px;
}

.rp-add--sq {
    border-radius: 8px;
}

/* صف عنصر (دليل / خطر / اشتراط / ملاحظة): رقم ملوّن يمين + نص + ×  يسار */
.rp-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(176, 176, 176, 0.3);
}

.rp-item__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(13, 0, 53, 0.1);
    border: 1px solid var(--rp-purple);
    color: var(--rp-purple);
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
}

.rp-item__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #191919;
    font-size: 16px;
    font-weight: 500;
    line-height: 29px;
}

.rp-item__x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #efefef;
    color: #141b34;
}

.rp-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ------------------------------------------------- بطاقات المخاطر/الشروط */

/* إطار ملوّن خفيف حول بطاقة بيضاء بشريط أيمن بلون النبرة (271:14255…) */
.rp-note {
    border-radius: var(--rp-radius);
    border: 1px solid transparent;
    padding: 24px 16px;
}

.rp-note--risk {
    background: var(--rp-danger-bg);
    border-color: #fbc8c8;
}

.rp-note--cond {
    background: var(--rp-warn-bg);
    border-color: #ffe4c0;
}

.rp-note--info {
    background: #f2f7ff;
    border-color: #bbd1ff;
}

.rp-note__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 24px;
    border-radius: var(--rp-radius);
    background: #fff;
    border-right: 4px solid transparent;
}

.rp-note--risk .rp-note__card {
    border-right-color: #b42318;
}

.rp-note--cond .rp-note__card {
    border-right-color: #da8f2c;
}

.rp-note--info .rp-note__card {
    border-right-color: #184cb4;
}

.rp-note__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rp-note__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rp-note__title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.rp-note__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.rp-note--risk .rp-note__title h3 { color: #b42318; }
.rp-note--cond .rp-note__title h3 { color: #f79009; }
.rp-note--info .rp-note__title h3 { color: #184cb4; }

.rp-note--risk .rp-note__badge { background: #fff1ee; color: #b42318; }
.rp-note--cond .rp-note__badge { background: #fef2e4; color: #f79009; }
.rp-note--info .rp-note__badge { background: #eef4ff; color: #184cb4; }

/* أرقام العناصر بلون النبرة (فيجما: 810000 / 814900 / 002B81) */
.rp-note--risk .rp-item__n { background: rgba(237, 103, 103, 0.1); border-color: #ed8b8b; color: #810000; }
.rp-note--cond .rp-item__n { background: rgba(217, 135, 28, 0.1); border-color: #efad56; color: #814900; }
.rp-note--info .rp-item__n { background: rgba(103, 148, 237, 0.1); border-color: #8baced; color: #002b81; }

.rp-note__empty {
    margin: 0;
    color: var(--rp-body);
    font-size: 15px;
}

/* --------------------- بطاقة الاشتراطات الكهرمانية (فاحص الجودة 271:19644) */

.rp-amber {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: var(--rp-radius);
    background: rgba(254, 200, 75, 0.1);
    border: 0.5px solid rgba(247, 144, 9, 0.3);
}

.rp-amber__head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f79009;
}

.rp-amber__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    color: #f79009;
}

.rp-amber ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-amber li {
    color: #191919;
    font-size: 16px;
    font-weight: 500;
    line-height: 29px;
}

/* -------------------------------- الحقول المستخرجة (المُعبّئ الذكي) ---- */

/* صف المؤشرات الملوّنة (Frame 2147226834): كل شريحة تحمل --kpi للقيمة والهالة */
.rp-kpis {
    display: flex;
    gap: 16px;
}

.rp-kpi {
    --kpi: var(--rp-score);
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
    border: 1px solid var(--rp-card-line);
}

/* الهالة قد تخالف لون القيمة (فيجما: «المدن» قيمة 29A792 وهالة 5EF7DD) */
.rp-kpi::before {
    content: '';
    position: absolute;
    top: -73px;
    left: 181px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--kpi-glow, var(--kpi));
    filter: blur(54px);
    /* شدّة توهّج فيجما (layer blur 108 على قرص مصمت) أخفت من blur(54) الصرف */
    opacity: 0.55;
}

.rp-kpi__icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--rp-badge);
    color: var(--kpi);
}

.rp-kpi--onwhite {
    background: #fff;
}

.rp-kpi--whitebox .rp-kpi__icon {
    background: #fff;
}

.rp-kpi__col {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-kpi__value {
    color: var(--kpi);
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
}

.rp-kpi__value bdi {
    unicode-bidi: plaintext;
}

/* القيم الكسرية «83.5/ 95» (فيجما 271:20343): البسط 18px والمقام 12px */
.rp-kpi--fraction .rp-kpi__value {
    font-size: 18px;
    font-weight: 800;
}

.rp-kpi__max {
    font-size: 12px;
    font-weight: 700;
}

.rp-kpi__label {
    color: var(--rp-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 23px;
}

/* شبكة بطاقات المجموعات (المبررات / الأهداف / الأثر / المخرجات) */
.rp-extract-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.rp-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.rp-group {
    background: #fff;
    border: 1px solid var(--rp-card-line-strong);
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
    overflow: hidden;
}

.rp-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--rp-card-line);
}

.rp-group__head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-group__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rp-badge);
    color: var(--rp-purple);
}

/* الجسم: أرضية F4F5FF بهامش سفلي 8 والفقرة تحمل حشوها (فيجما pad0/0/8/0 + pad12) */
.rp-group__body {
    background: var(--rp-tint);
    padding: 0 0 8px;
}

.rp-group__body p {
    margin: 0;
    padding: 12px;
    color: var(--rp-body);
    font-size: 16px;
    line-height: 27px;
}

/* أعمدة «الفئة المستهدفة»: تسمية فوق شريحة بنفسجية (Frame 2147226842) */
.rp-tgt {
    display: flex;
    gap: 32px;
    padding: 4px 16px;
}

.rp-tgt > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.rp-tgt b {
    color: var(--rp-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
}

.rp-tgt span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(13, 0, 53, 0.1);
    border: 1px solid var(--rp-purple);
    color: var(--rp-purple);
    font-size: 16px;
    line-height: 27px;
}

/* رمز الريال السعودي الرسمي داخل القيم */
.rp-riyal {
    width: 0.85em;
    height: 0.85em;
    display: inline-block;
    vertical-align: -0.06em;
}

/* ------------------------------- بطاقة القرار (الفارز الاستراتيجي) ---- */

/* «نتيجة الفرز» (Container 1262x137): المحتوى مرصوص لليمين */
.rp-verdict {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: var(--rp-radius);
    border: 1px solid transparent;
}

.rp-verdict--ok {
    background: var(--rp-ok-bg);
    border-color: #9ae696;
}

.rp-verdict--no {
    background: var(--rp-danger-bg);
    border-color: #fbc8c8;
}

.rp-verdict__badge {
    flex: none;
    display: inline-flex;
    color: #027a48;
}

.rp-verdict--no .rp-verdict__badge {
    color: var(--rp-danger);
}

.rp-verdict__kicker {
    margin: 0;
    color: #191919;
    font-size: 16px;
    font-weight: 500;
    line-height: 29px;
}

.rp-verdict h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.8;
}

.rp-verdict--ok h3 {
    color: #027a48;
}

.rp-verdict--no h3 {
    color: var(--rp-danger);
}

/* صفوف «آخر تشغيل / المجال» أسفل ملخص الفرز */
.rp-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.rp-meta div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rp-body);
    font-size: 14px;
    line-height: 23px;
}

/* «مبرر التقييم»: أرضية بنفسجية والنص ببطاقة بشريط أيمن 5A30FF */
.rp-reason {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
}

.rp-reason h4 {
    margin: 0;
    color: var(--rp-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
}

.rp-reason p {
    margin: 0;
    padding: 8px 16px;
    border-radius: 12px;
    border-right: 4px solid #5a30ff;
    background: #fff;
    color: #191919;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
}

/* --------------------------------- الدارس المقاصدي: التبويبات والمحاور */

.rp-tabs {
    display: flex;
}

.rp-tab {
    flex: 1 1 0;
    padding: 12px;
    border: 0;
    border-radius: var(--rp-radius);
    background: none;
    color: var(--rp-body);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

/* التبويب النشط: تدرّج فيجما العمودي الخافت جداً (نهايته عند 9.25× الارتفاع
   بشفافية 0.48 ⇒ ≈7% عند حافة التبويب) + حد سفلي 3333FF وزوايا r:16 كاملة */
.rp-tab.is-active {
    background: linear-gradient(180deg, rgba(51, 51, 255, 0) 0%, rgba(51, 51, 255, 0.07) 100%);
    border-bottom: 1px solid var(--rp-accent);
    color: #1115ac;
}

/* صف عمل البر في الملخص: شارة الدرجة الداكنة + العنوان */
.rp-goalrow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rp-goalrow__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rp-goalrow__head h3 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-scorepill {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: var(--rp-radius);
    background: var(--rp-ink-deep);
    border: 1px solid #babeff;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 30px;
    direction: ltr;
}

/* بطاقة «رسم بياني للمعايير الفنية» (ToolCard 1262) */
.rp-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 20px;
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
}

.rp-chart > h3 {
    align-self: stretch;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

/* مبدّل قائمة/مخطط (Frame 2147226864) */
.rp-seg {
    display: flex;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(58, 58, 201, 0.2);
}

.rp-seg button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: none;
    color: var(--rp-accent);
    font: inherit;
    font-size: 13.2px;
    font-weight: 700;
    line-height: 20px;
    cursor: pointer;
}

.rp-seg button.is-active {
    background: #4a00dc;
    border-color: var(--rp-accent);
    color: #fff;
}

.rp-goals {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* صف معيار في القائمة: بطاقة بيضاء بشريط أيمن 3A00AB (Container 1222x108) */
.rp-goal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 24px;
    border-radius: var(--rp-radius);
    background: #fff;
    border-right: 2px solid #3a00ab;
}

.rp-goal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rp-goal__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #ebecff;
    border: 1px solid #babeff;
    color: var(--rp-purple);
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 10.2px;
    font-weight: 500;
}

.rp-goal__col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rp-goal__col b {
    color: var(--rp-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
}

.rp-goal__col small {
    color: var(--rp-ink);
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
}

.rp-goal__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

.rp-goal__val {
    flex: none;
    color: var(--rp-accent);
    font-family: 'DM Mono', ui-monospace, monospace;
    font-size: 17.25px;
    font-weight: 500;
    line-height: 26px;
}

.rp-goal__track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 9999px;
    background: #e8e8e8;
    overflow: hidden;
}

.rp-goal__fill {
    display: block;
    height: 7px;
    border-radius: 9999px;
    background: var(--rp-btn-grad);
}

/* المخطط الشبكي (271:20256) */
.rp-radar {
    width: min(560px, 100%);
}

.rp-radar text {
    font-family: 'Greta Arabic', sans-serif;
    font-size: 16px;
    font-weight: 600;
    fill: var(--rp-ink);
}

/* ---- تبويب «أعمال البر» (271:21878) ---- */

.rp-workcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--rp-radius);
    background: #fff;
    border: 1px solid var(--rp-card-line-strong);
}

.rp-workcard > h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-work {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 20px;
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
    border: 1px solid #c8c8fb;
}

.rp-work__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rp-work__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rp-work__title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-pill-lav {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: var(--rp-radius);
    background: #d8daff;
    border: 1px solid #babeff;
    color: var(--rp-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 26px;
    direction: ltr;
}

.rp-work__toggle {
    flex: none;
    border: 0;
    background: none;
    color: var(--rp-ink);
    cursor: pointer;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.rp-work__toggle.is-closed {
    transform: rotate(180deg);
}

.rp-work__divider {
    border: 0;
    border-top: 1px solid #d6d1d1;
    margin: 0;
}

/* صندوق محور (epic): أبيض بحد ebecff 2px */
.rp-epicbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--rp-radius);
    background: #fff;
    border: 2px solid #ebecff;
}

.rp-epicbox__head {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rp-epicbox__head svg {
    flex: none;
    color: var(--rp-ink);
    margin-inline-end: 8px;
}

.rp-epicbox__head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    color: var(--rp-ink);
}

.rp-epicbox__head .rp-pill-epic {
    margin-inline-start: auto;
}

.rp-pill-epic {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: var(--rp-radius);
    background: #ebecff;
    border: 1px solid #babeff;
    color: var(--rp-accent);
    font-size: 14px;
    font-weight: 800;
    line-height: 26px;
    direction: ltr;
}

.rp-mgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* بطاقة معيار مقاصدي: «معيار X» + القيمة/الدرجة/المبرر + اقتباس الدليل */
.rp-mcrit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: var(--rp-radius);
    background: #fff;
    border: 1px solid #ceceff;
}

.rp-mcrit > h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-mrow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rp-mrow__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--rp-tint-2);
    border: 1px solid #d8daff;
    color: var(--rp-purple);
}

.rp-mrow__label {
    flex: none;
    color: var(--rp-body);
    font-size: 14px;
    line-height: 28px;
}

.rp-mrow__val {
    color: var(--rp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
}

.rp-pill-green {
    display: inline-flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: var(--rp-radius);
    background: rgba(3, 152, 85, 0.08);
    border: 1px solid #c2edd6;
    color: #039855;
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    direction: ltr;
}

/* اقتباس الدليل: بطاقة بشريط أيمن 3A00AB */
.rp-quote {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    border-radius: var(--rp-radius);
    background: #fff;
    border-right: 2px solid #3a00ab;
}

.rp-quote p {
    margin: 0;
    color: var(--rp-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
}

.rp-quote small {
    color: var(--rp-body);
    font-size: 12px;
    line-height: 22px;
}

/* ------------------------------------------------------- أدوات أخرى ---- */

.rp-others {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-others h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 53px;
    color: var(--rp-ink);
}

.rp-others__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* بطاقة أداة (Container 316x323): بيضاء بحد 4361EE@22% */
.rp-other {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 16px;
    border-radius: var(--rp-radius);
    background: #fff;
    border: 1px solid var(--rp-card-line-strong);
    box-shadow: var(--rp-shadow);
    text-align: right;
}

.rp-other__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rp-other__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rp-other__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--rp-badge);
    color: var(--rp-purple);
}

.rp-other__titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rp-other__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--rp-ink);
}

.rp-other__sub {
    margin: 4px 0 0;
    padding-top: 2px;
    color: var(--rp-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.rp-other__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-other__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--rp-body);
    font-size: 14px;
    line-height: 20px;
}

.rp-other__list svg {
    flex: none;
    margin-top: 4px;
    color: var(--rp-purple);
}

/* -------------------------------------------------------- ملف المشروع -- */

.rp-file {
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-radius: var(--rp-radius);
    background: #fff;
    border: 1px solid var(--rp-card-line);
    box-shadow: var(--rp-shadow);
    padding: 24px;
}

.rp-file__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rp-file__label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rp-body);
    font-size: 14px;
    line-height: 23px;
}

.rp-file__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #d8daff;
    color: var(--rp-purple);
}

.rp-file__frame {
    width: 100%;
    height: 729px;
    border: 1px solid #babeff;
    border-radius: var(--rp-radius);
    background: var(--rp-tint);
}

/* ------------------------------------------------------------ CTA ذيل -- */

/* النصف الأول من «fotter» فيجما (269:12417): يعلو فوتر التسويق مباشرة */
.rp-cta {
    position: relative;
    overflow: hidden;
    margin-top: 32px;
    background: #0d0035;
    color: #fff;
    padding: 48px 64px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}

.rp-cta::before {
    content: '';
    position: absolute;
    top: -350px;
    inset-inline-start: 22%;
    width: 818px;
    height: 767px;
    border-radius: 999px;
    background: rgba(148, 94, 247, 0.35);
    filter: blur(108px);
    pointer-events: none;
}

.rp-cta > * {
    position: relative;
}

.rp-cta__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-cta h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 500;
    line-height: 67px;
}

.rp-cta__sub {
    margin: 0;
    color: #d9d9d9;
    font-size: 20px;
    line-height: 1.2;
}

.rp-cta__perks {
    display: grid;
    grid-template-columns: repeat(2, 384px);
    gap: 32px;
    justify-content: center;
}

.rp-cta__perk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border-radius: var(--rp-radius);
    background: rgba(255, 255, 255, 0.1);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-align: right;
}

.rp-cta__perk svg {
    flex: none;
}

.rp-cta__actions {
    display: flex;
    gap: 12px;
}

.rp-cta__actions .rp-btn {
    min-height: 51px;
    padding: 14px 28px;
    font-size: 15px;
    box-shadow: 0 10px 35px rgba(67, 97, 238, 0.38);
}

.rp-cta__actions .rp-btn--outline {
    min-height: 53px;
    padding: 14px 28px;
    font-size: 15px;
    box-shadow: none;
}

/* ==========================================================================
   طبقة مودالات الداشبورد
   المودالات (partials/ui/proposal-report-modals) مبنيّة على Alpine و`dash-*`،
   فتُعاد تلوينها هنا بلغة فيجما دون المساس بمنطقها أو ربطها.
   ========================================================================== */

.rp-modal__box {
    width: 100%;
    background: var(--rp-tint);
    border-radius: var(--rp-radius-lg);
    box-shadow: 0 30px 80px -20px rgba(13, 0, 53, 0.5);
    overflow: hidden;
    margin: auto;
}

/* الترويسة */
.rp-modal .rp-modal__box > div:first-child {
    background: #fff;
    border-bottom: 1px solid var(--rp-line);
}

/* البطاقات داخل المودال */
.rp-modal .dash-card {
    background: #fff;
    border: 0;
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow);
}

.rp-modal .dash-card-title {
    color: var(--rp-ink);
    font-size: 16px;
    font-weight: 700;
}

.rp-modal .dash-card-subtitle,
.rp-modal .dash-stat-label {
    color: var(--rp-muted);
    font-size: 13px;
    font-weight: 600;
}

/* الشارات */
.rp-modal .dash-badge {
    border-radius: 999px;
    background: var(--rp-tint);
    border-color: transparent;
    color: var(--rp-accent);
    font-weight: 600;
}

/* الأزرار الأساسية داخل المودال تأخذ تدرّج فيجما */
.rp-modal .dash-btn-primary {
    background: linear-gradient(to left, var(--rp-accent), var(--rp-accent-deep));
    border: 0;
    border-radius: var(--rp-radius);
    box-shadow: var(--rp-shadow-btn);
    color: #fff;
}

.rp-modal .dash-btn-ghost {
    border-radius: var(--rp-radius);
}

/* بطاقة الدرجة الكبرى — قرص فيجما #3862EF */
.rp-modal .smart-score-hero {
    background: var(--rp-score);
    border: 0;
    border-radius: var(--rp-radius-lg);
    color: #fff;
}

/* (القرص الأزرق القديم لبطاقة Livewire أُزيل — البوب أب يستخدم كتلة rpx-score أدناه) */

/* --------------------------------------------------------------- تجاوب - */

@media (max-width: 1180px) {
    .rp-kpis {
        flex-wrap: wrap;
    }

    .rp-kpi {
        flex: 1 1 200px;
    }

    .rp-others__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-cta__perks {
        grid-template-columns: repeat(2, minmax(0, 384px));
    }
}

@media (max-width: 1024px) {
    .rp-wrap {
        padding-inline: 24px;
    }

    .rp-sum {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .rp-score {
        width: 100%;
    }

    .rp-extract-grid,
    .rp-mgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .rp-wrap {
        padding-inline: 16px;
    }

    /* فريم الجوال 271:17904: النص والأيقونة أعلى ثم الزر أسفل */
    .rp-bar {
        flex-direction: column;
        align-items: stretch;
    }

    /* فريما الجوال (271:17906/271:19948): نص الشريط يصبح سطر «تجربة حيّة» */
    .rp-bar__msg--main {
        display: none;
    }

    .rp-bar__msg--demo {
        display: inline;
    }

    .rp-others__grid {
        grid-template-columns: 1fr;
    }

    .rp-crit__head {
        flex-wrap: wrap;
    }

    .rp-tabs {
        flex-direction: column;
    }

    .rp-cta {
        padding: 28px 20px 36px;
    }

    .rp-cta h2 {
        font-size: 28px;
        line-height: 1.5;
    }

    .rp-cta__sub {
        font-size: 16px;
        line-height: 1.6;
    }

    .rp-cta__perks {
        grid-template-columns: 1fr;
    }

    .rp-cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .rp-file__frame {
        height: 460px;
    }

    .rp-btn,
    .rp-btn--outline {
        width: 100%;
    }

    .rp-shell__cta {
        width: 100%;
    }
}

/* ------------------------------------------- شبكة الأدوات الخمس (العيّنة) - */

/* صفحة العيّنة تعرض خمس بطاقات لا أربعاً — ترتيب فريم «أدوات الذكاء
   الاصطناعي الخمسة» (271:32710): ثلاث بطاقات في الصف الأول واثنتان أعرض
   في الثاني. شبكة من 6 أعمدة: 2+2+2 ثم 3+3. */
.rp-others__grid--five {
    grid-template-columns: repeat(6, 1fr);
}

.rp-others__grid--five > .rp-other {
    grid-column: span 2;
}

.rp-others__grid--five > .rp-other:nth-child(4),
.rp-others__grid--five > .rp-other:nth-child(5) {
    grid-column: span 3;
}

@media (max-width: 1180px) {
    .rp-others__grid--five {
        grid-template-columns: repeat(2, 1fr);
    }

    .rp-others__grid--five > .rp-other,
    .rp-others__grid--five > .rp-other:nth-child(4),
    .rp-others__grid--five > .rp-other:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .rp-others__grid--five {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   rpx — جسم تقرير الدارس داخل نوافذ المُقيِّم (.as-modal) — فريم 730:12720
   (+ الأدلة 730:13247). البادئة `rpx-` تُستخدم داخل بوب أبات صفحة المشروع:
   livewire/assessment-report، و(منذ 2026-09-09) بوب أبات «فاحص الجودة»
   و«المُعَبّئ الذكي» و«تصوّر عن الجهة» في dashboard/proposals/show.blade.php،
   إضافةً إلى components/result/kpi-card وpublic/js/maqasid-renderer.
   القواعد المُنطاقة تحت `.as-modal` وحدها هي التي تخص البوب أب، فصفحات
   الزائر `.rp` لا تتأثر.
   القيم مستخرجة من الـ node JSON عبر MCP (730:12744/12745/12752/12763/12765/
   12780/12790/12868/12900/12932).
   ========================================================================== */

/* PA-14: لا حشوة جانبية خاصة بالتبويب — جسم النافذة (24) + البطاقة (17) = 41 */
.rpx-tabbody { padding: 0; }
.rpx-najaa { padding: 0; display: flex; flex-direction: column; }

/* popup-smart-03: بطاقة واحدة تضم صفّ النتيجة/الملخص وقائمة المعايير (730:12744) */
.rpx-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--rp-card-line);
    border-radius: 16px;
    padding: 17px;
    box-shadow: 0 2px 10px rgba(67, 97, 238, 0.07);
}

/* popup-smart-03 / PA-05: الصف العلوي — النتيجة 275 يميناً، الملخص يساراً، فاصل متقطّع (730:12745) */
.rpx-top {
    display: grid;
    grid-template-columns: 275px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    padding-bottom: 24px;
    border-bottom: 1px dashed #515151;
}

/* popup-smart-02 / PA-04: كتلة النتيجة الداكنة 275×200 وهالتها (730:12752) */
.rpx-score {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 275px;
    min-height: 200px;
    padding: 12.8px;
    border-radius: 16px;
    border: 0.8px solid var(--rp-card-line);
    background: linear-gradient(270deg, #111178, #14073b);
    color: #fff;
    text-align: center;
}

.rpx-score::before {
    content: '';
    position: absolute;
    top: -93.3px;
    right: -101.8px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #3862ef;
    filter: blur(54px);
    opacity: 0.25;
    pointer-events: none;
}

.rpx-score-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.rpx-score-label { font-size: 20px; font-weight: 600; line-height: 22.5px; color: #fff; }
.rpx-score-value { font-size: 54px; font-weight: 800; line-height: 54px; color: #f6f7ff; white-space: nowrap; }
.rpx-score-sub { font-size: 16px; font-weight: 600; line-height: 22.5px; color: #fff; }

/* popup-smart-04 / PA-05: ملخص التحليل — نص مجرّد داخل البطاقة (730:12746) */
.rpx-summary { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rpx-summary-title { font-size: 16px; font-weight: 700; line-height: 22.5px; color: #0d0f52; }
.rpx-summary-body { margin: 0; font-size: 16px; font-weight: 400; line-height: 30px; color: #191919; }
.rpx-summary-body.is-empty { color: var(--rp-muted); }

/* popup-smart-05 / PA-13: رأس «تقييم المعايير» والعدّاد الأزرق (730:12758-12761) */
.rpx-crits { display: flex; flex-direction: column; gap: 24px; }
.rpx-crits-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rpx-h { font-size: 16px; font-weight: 700; line-height: 22.5px; color: #0d0f52; }
.rpx-count { font-size: 16px; font-weight: 700; color: var(--rp-accent); white-space: nowrap; }

/* popup-smart-07: بطاقة المعيار — رأس أبيض على أرضية ملوّنة، تباعد 32 (730:12762/12763) */
.rpx-crit-list { display: flex; flex-direction: column; gap: 32px; }
.rpx-crit {
    background: var(--rp-tint);
    border: 1px solid #c8c8fb;
    border-radius: 16px;
    overflow: hidden;
}

.rpx-crit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 12px;
    background: #fff;
    border-bottom: 0.8px solid var(--rp-card-line);
}

.rpx-crit-main { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }

/* popup-smart-06 / PA-06: شارة الترتيب 32×32 (730:12775) */
.rpx-crit-idx {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rp-badge);
    color: var(--rp-ink-deep);
    font-size: 16px;
    font-weight: 700;
    line-height: 22.75px;
}

.rpx-crit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* popup-smart-12 / PA-08: العنوان 16/700 والوصف 16/400 كنص مجرّد (يبقى قابلاً للتحرير) */
.rpx-crit-title { font-size: 16px; font-weight: 700; line-height: 22.5px; color: #0d0f52; }
.rpx-crit-desc {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.5px;
    color: var(--rp-body);
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

.rpx-crit-desc:focus,
.rpx-row-text:focus,
.rpx-page:focus {
    outline: 2px solid #8a8df8;
    outline-offset: 3px;
}

.rpx-ai-note { font-size: 11px; line-height: 1.55; color: var(--rp-muted); margin-top: 2px; }
.rpx-crit-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* popup-smart-08 / PA-07: عدّاد الدرجة في صفّ واحد 125×56 (730:12765) */
.rpx-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 125px;
    height: 56px;
    padding: 4px 12px;
    border-radius: 10px;
    background: var(--rp-tint-2);
}

.rpx-stepper button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.rpx-stepper button img { display: block; }
.rpx-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.rpx-stepper button:focus-visible { outline: 2px solid #8a8df8; outline-offset: 2px; }

/* popup-smart-r2-02 / PA-22 / popup-smart-08: القيمة و«/الحد» عزلة LTR واحدة — ترتيب DOM
   (القيمة ثم /الحد) يُرسم «6 /10» بالأرقام العربية واللاتينية معاً؛ كانت inline-flex
   تحت RTL تعكس النصفين («10/ 6»). المسافة بين العنصرين تأتي من فاصل المصدر. */
.rpx-stepper-val {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: #3a00ab;
    font-variant-numeric: tabular-nums;
}

.rpx-stepper-max { font-size: 16px; font-weight: 800; color: #0d0f52; }

/* popup-smart-07: منطقة الدليل تحت الرأس على الأرضية الملوّنة (730:12776) */
.rpx-crit-body { padding: 24px 16px; }

/* popup-smart-11: بطاقة الدليل البيضاء وشريطها 4px عند بداية القراءة (730:12779) */
.rpx-evid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 24px;
    border-inline-start: 4px solid var(--rp-purple);
}

/* popup-smart-09 / PA-09: صف الرأس — العنوان عند بداية القراءة والزر في الطرف الآخر (730:12781) */
.rpx-evid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.rpx-evid-label { flex: 1; min-width: 0; font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--rp-body); }

/* زر «إضافة …» المحدّد 40px (730:12782 / 730:12874 / 730:12906 / 730:12938) */
.rpx-add {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 40px;
    padding: 9px 25px;
    border: 1px solid var(--rpx-add-ink, var(--rp-accent));
    border-radius: 16px;
    background: #fff;
    color: var(--rpx-add-ink, var(--rp-accent));
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 22.5px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 35px rgba(67, 97, 238, 0.38);
    transition: filter .15s ease;
}

.rpx-add:hover { filter: brightness(0.97); }
.rpx-add:focus-visible { outline: 2px solid #8a8df8; outline-offset: 2px; }
.rpx-add img { width: 20px; height: 20px; display: block; }
.rpx-add--brand > span {
    background: var(--rp-btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* popup-smart-10 / PA-09 / popup-smart-16 / PA-12: صفوف الأدلة والبنود (730:12790 / 730:12888) */
.rpx-rows { display: flex; flex-direction: column; gap: 12px; }
.rpx-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    /* popup-smart-r2-04: الفريم 0.3px #b0b0b0 — لا تُرسم دون البكسل على 1× فتصبح خطاً كاملاً؛
       حدّ 1px بشفافية .35 يُعطي الخيط الباهت نفسه */
    border: 1px solid rgba(176, 176, 176, 0.35);
    border-radius: 12px;
    background: #fff;
}

/* شارة الصفحة = حقل رقم الصفحة نفسه بمظهر الشارة (730:12794) */
.rpx-page {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--rp-purple);
    border-radius: 4px;
    background: rgba(13, 0, 53, 0.1);
    color: var(--rp-purple);
    font: inherit;
    font-size: 16px;
    line-height: 1.7;
    box-sizing: border-box;
}

.rpx-page::placeholder { color: rgba(43, 0, 129, 0.55); }

/* شارة ترقيم البنود (730:12892 / 12924 / 12956) */
.rpx-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.7;
    background: var(--rpx-badge-bg, rgba(13, 0, 53, 0.1));
    border: 1px solid var(--rpx-badge-bd, var(--rp-purple));
    color: var(--rpx-badge-ink, var(--rp-purple));
}

.rpx-row-text {
    flex: 1;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.8;
    color: #191919;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* زر الحذف: بلاطة 32×32 رمادية بأيقونة cancel-01 (730:12791) */
.rpx-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 0;
    border-radius: 4px;
    background: #efefef;
    cursor: pointer;
    transition: background .15s ease;
}

.rpx-remove:hover { background: #e3e3e3; }
.rpx-remove:focus-visible { outline: 2px solid #8a8df8; outline-offset: 2px; }
.rpx-remove img { width: 14px; height: 14px; display: block; }

/* «الأصلي من AI» — سطر توثيق صغير تحت القائمة */
.rpx-ai-block { padding-top: 8px; border-top: 1px dashed #d8daff; display: flex; flex-direction: column; gap: 4px; }
.rpx-ai-block-title { font-size: 11px; font-weight: 700; color: var(--rp-muted); }
.rpx-ai-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.6; color: var(--rp-muted); }
.rpx-ai-row em { flex: 1; }
.rpx-ai-pg { flex: none; padding: 1px 6px; border-radius: 4px; background: var(--rp-tint-2); font-size: 11px; font-weight: 700; }
.rpx-ai-list { margin: 0; padding-inline-start: 16px; font-size: 12px; line-height: 1.7; color: var(--rp-muted); list-style: disc; }

/* popup-smart-13..18 / PA-10..12: أقسام المخاطر/الاشتراطات/الملاحظات (730:12868/12900/12932) */
.rpx-notes { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.rpx-note {
    background: var(--rpx-n-bg);
    border: 1px solid var(--rpx-n-bd);
    border-radius: 16px;
    padding: 24px 16px;
    --rpx-add-ink: var(--rpx-n-btn);
    --rpx-badge-bg: var(--rpx-n-badge-bg);
    --rpx-badge-bd: var(--rpx-n-badge-bd);
    --rpx-badge-ink: var(--rpx-n-badge-ink);
}

/* البطاقة البيضاء الداخلية وشريطها 4px عند بداية القراءة (730:12871) */
.rpx-note-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 24px;
    border-inline-start: 4px solid var(--rpx-n-accent);
}

.rpx-note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rpx-note-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.5px;
    color: var(--rpx-n-title);
}

.rpx-note-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--rpx-n-tile);
}

.rpx-note-tile img { width: 16px; height: 16px; display: block; }

/* PA-19: شريط التبويبات — لا تغيير بصري، فقط حالة التركيز */
.rpx-tabs [role="tab"]:focus-visible { outline: 2px solid #8a8df8; outline-offset: -2px; border-radius: 8px; }

/* PA-18: محرّر «القيمة» في تبويب أعمال البر — قائمة بمظهر الشِّل (بدون الأداة الأصلية) */
.rpx-select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    padding-inline-end: 36px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    background: #fff url('/img/assessor/combo-chevron.svg') no-repeat left 12px center;
    background-size: 16px 16px;
    font-family: inherit;
    font-size: 14px;
    color: #191919;
    cursor: pointer;
}

.rpx-select:focus { outline: 2px solid #8a8df8; outline-offset: 1px; }
.rpx-select.is-invalid { border-color: #fbbf24; color: #92400e; }

/* PA-17: زر فتح الدليل داخل صف المعيار (تبويب أعمال البر) */
.rpx-row-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rp-accent);
    cursor: pointer;
}

.rpx-row-toggle:focus-visible { outline: 2px solid #8a8df8; outline-offset: 1px; }
.rpx-row-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.rpx-row-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 720px) {
    .rpx-top { grid-template-columns: 1fr; }
    .rpx-score { width: 100%; }
    .rpx-crit-head { flex-wrap: wrap; }
}

/* ==========================================================================
   rpx — الجولة الثانية (PA-24 / PA-25 / PA-16): تبويبا «الملخص» و«أعمال البر»
   يتبنّيان قالب النجاعة (كتلة النتيجة 275×200 + أدوار نص الملخص + شريط تبويب بألوان
   الشِّل). كل قاعدة تحت .as-modal فصفحات الزائر لا تتأثر.
   ========================================================================== */

/* PA-24: بطاقة الهيرو — بطاقة rpx بلا قائمة معايير تحتها، فلا فاصل متقطّع ولا حشوة سفلية */
.as-modal .rpx-card--hero { gap: 0; }
.as-modal .rpx-top--plain { padding-bottom: 0; border-bottom: 0; }

/* PA-24: متغيّر «أعمال البر» — تدرّج العلامة #3333ff→#2d0e8b بدل الكحلي */
.as-modal .rpx-score--brand { background: linear-gradient(270deg, #3333ff, #2d0e8b); }
.as-modal .rpx-score--brand::before { background: #8a8df8; }

/* PA-24 / PA-25: صف رأس الملخص — العنوان عند بداية القراءة وشارة التوصية في الطرف الآخر */
.as-modal .rpx-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.as-modal .rpx-verdict {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 2px solid var(--rpx-v-bd, #e5e7eb);
    background: var(--rpx-v-bg, #f3f4f6);
    color: var(--rpx-v-fg, #6b7280);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* PA-24: سطر «النجاعة N%» تحت نص الملخص — النسبة عزلة LTR كي تبقى «100.0%» بالأرقام العربية */
.as-modal .rpx-summary-meta { font-size: 16px; font-weight: 600; line-height: 22.5px; color: var(--rp-body); }
.as-modal .rpx-pct { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* PA-25: شريط التبويبات بألوان الشِّل — #515151 غير نشط، #3333ff نشط مع الخط السفلي */
.as-modal .rpx-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rp-card-line);
}

.as-modal .rpx-tabs .dash-tab {
    flex: 1;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.5px;
    color: var(--rp-body);
}

.as-modal .rpx-tabs .dash-tab:hover { color: var(--rp-ink); }
.as-modal .rpx-tabs .dash-tab.is-active { color: var(--rp-accent); }
.as-modal .rpx-tabs .dash-tab.is-active::after { background: var(--rp-accent); }

/* PA-16 / PA-25: بطاقات المؤشرات الثلاث في تبويب الملخص — إطار rpx (16، خط .1) */
.as-modal .rpx-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--rp-card-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(67, 97, 238, 0.07);
    text-align: center;
}

.as-modal .rpx-kpi-head { display: flex; align-items: center; gap: 8px; }
.as-modal .rpx-kpi-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--tone-soft);
    color: var(--tone);
}
.as-modal .rpx-kpi-tile svg { width: 14px; height: 14px; }
.as-modal .rpx-kpi-label { font-size: 16px; font-weight: 700; line-height: 22.5px; color: #0d0f52; }
.as-modal .rpx-kpi-value { font-size: 24px; font-weight: 800; line-height: 1; color: var(--tone-ink); }
.as-modal .rpx-kpi-max { font-size: 16px; font-weight: 600; line-height: 22.5px; color: var(--rp-body); }
.as-modal .rpx-kpi-sub { font-size: 14px; line-height: 1.5; color: var(--rp-muted); }

/* PA-15 / PA-16: مؤشر «المنظور المقاصدي» بألوان الشِّل (لا إنديجو Tailwind) داخل البوب أب */
.as-modal .rpx-kpi.tone-maqasid { --tone: #3333ff; --tone-soft: #ebecff; --tone-ink: #3a00ab; }

/* ==========================================================================
   Mobile pass (2026-09-10) — report bodies on phones.
   Inside the assessor popups every criterion used to sit in ONE row: index ·
   text · the 125px score stepper, and `.rpx-crit-main { flex: 1; min-width: 0 }`
   let the text column shrink to ~60px — the justification read one word per
   line. Evidence rows lost the rest of the width to five stacked paddings
   (body 24 · card 17 · crit body 16 · evidence 24 · row 12). On a phone the
   stepper now drops UNDER the text and each padding tier is trimmed; the guest
   sample pages (.rp-*) get the same trim. Pinned by MobileLayoutTest.
   ========================================================================== */
@media (max-width: 640px) {
    /* ONE level of card on a phone. The white report card, the white evidence card and the
       tinted note wrapper stop drawing boxes, so the criterion cards sit straight on the
       report ground and their rows sit straight in them (it was body → card → criterion →
       evidence card → row: five boxes, five paddings). */
    .as-modal .rpx-card { padding: 0; gap: 20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .as-modal .rpx-top { gap: 16px; padding-bottom: 16px; }
    .as-modal .rpx-score { min-height: 150px; padding: 16px; }
    .as-modal .rpx-score-label { font-size: 17px; }
    .as-modal .rpx-score-value { font-size: 44px; line-height: 44px; }
    .as-modal .rpx-score-sub { font-size: 14px; }
    .as-modal .rpx-summary-body { font-size: 15px; line-height: 27px; }

    .as-modal .rpx-crits { gap: 16px; }
    .as-modal .rpx-crit-list { gap: 16px; }
    .as-modal .rpx-crit-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
    /* stepper under the text, aligned with it (32px index + 12px gap) */
    .as-modal .rpx-crit-side { flex-direction: row; align-items: center; gap: 12px; padding-inline-start: 44px; }
    .as-modal .rpx-stepper { height: 44px; min-width: 120px; gap: 14px; }
    .as-modal .rpx-stepper button { width: 28px; height: 28px; }       /* touch targets */
    .as-modal .rpx-stepper-val { font-size: 20px; }
    .as-modal .rpx-crit-title { font-size: 15px; }
    .as-modal .rpx-crit-desc { font-size: 14px; line-height: 22px; }
    .as-modal .rpx-crit-body { padding: 12px; }
    .as-modal .rpx-evid { padding: 0; gap: 10px; border: 0; background: transparent; }
    .as-modal .rpx-evid-head { flex-wrap: wrap; min-height: 0; }
    .as-modal .rpx-evid-label { font-size: 14px; }
    .as-modal .rpx-add { height: 36px; padding: 6px 14px; gap: 8px; font-size: 14px; box-shadow: none; }
    .as-modal .rpx-rows { gap: 8px; }
    .as-modal .rpx-row { padding: 10px; gap: 10px; }
    .as-modal .rpx-row-text { font-size: 14px; line-height: 1.75; }
    .as-modal .rpx-page, .as-modal .rpx-badge, .as-modal .rpx-remove { width: 28px; height: 28px; font-size: 14px; }

    .as-modal .rpx-notes { gap: 16px; margin-top: 16px; }
    .as-modal .rpx-note { padding: 0; border: 0; background: transparent; }
    .as-modal .rpx-note-card { padding: 12px 14px; gap: 10px; border: 1px solid var(--rpx-n-bd); border-inline-start: 3px solid var(--rpx-n-accent); }
    .as-modal .rpx-note .rpx-rows { gap: 0; }
    .as-modal .rpx-note .rpx-row { border: 0; border-top: 1px solid rgba(176, 176, 176, 0.35); border-radius: 0; padding: 10px 0; }
    .as-modal .rpx-note .rpx-row:first-child { border-top: 0; }
    .as-modal .rpx-note-title { font-size: 15px; }

    /* «النجاعة الفنية للمشروع» wrapped onto three lines: the bar scrolls sideways instead */
    .as-modal .rpx-tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
    .as-modal .rpx-tabs::-webkit-scrollbar { display: none; }
    .as-modal .rpx-tabs .dash-tab { flex: 1 0 auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
    .as-modal .rpx-kpi { padding: 14px; }
    .as-modal .rpx-kpi-value { font-size: 22px; }

    /* «أعمال البر» (public/js/maqasid-renderer.js): its four-column criteria table left
       «المبرر» ~20px wide — one letter per line. Each row becomes a card: criterion + score,
       then «القيمة», then «المبرر» at full width. !important only where the renderer
       writes the value inline. */
    .as-modal .mq-work-head { padding: 12px !important; gap: 10px !important; }
    .as-modal .mq-work-body { padding: 12px !important; }
    .as-modal .mq-table, .as-modal .mq-table tbody { display: block; }
    .as-modal .mq-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .as-modal .mq-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name score" "val val" "just just";
        gap: 10px 12px;
        padding: 12px;
    }
    .as-modal .mq-row > td { padding: 0 !important; text-align: start !important; }
    .as-modal .mq-row > .mq-c-name { grid-area: name; align-self: center; font-size: 14px !important; }
    .as-modal .mq-row > .mq-c-score { grid-area: score; align-self: center; }
    .as-modal .mq-row > .mq-c-val { grid-area: val; display: flex; align-items: center; gap: 12px; }
    .as-modal .mq-row > .mq-c-val > div { flex: 1; min-width: 0; }
    .as-modal .mq-row > .mq-c-just { grid-area: just; font-size: 13px !important; }
    .as-modal .mq-row > td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--rp-muted);
    }
    .as-modal .mq-row > .mq-c-just::before { display: block; margin-bottom: 4px; }
    .as-modal .mq-ev, .as-modal .mq-ev > td { display: block; }
    .as-modal .mq-ev > td { padding: 10px 12px !important; }

    /* guest sample pages (.rp-*): same rule — one card level. The report shell, the
       «أعمال البر» card, each axis box and the evidence card stop drawing boxes; the
       work, the criterion and the note cards stay. In the maqasid tab the justification
       sat six boxes deep at ~80px. */
    .rp-shell { gap: 20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .rp-shell__body { padding: 0; margin-top: 0; }
    .rp-toolcard { border-radius: 16px; border: 1px solid var(--rp-card-line); }
    .rp-workcard { padding: 0; border: 0; background: transparent; }
    .rp-work { padding: 12px; gap: 16px; }
    .rp-epicbox { padding: 0; gap: 10px; border: 0; background: transparent; }
    .rp-mgrid { gap: 12px; }
    .rp-mcrit { padding: 14px; gap: 10px; }
    .rp-mrow { flex-wrap: wrap; align-items: center; }
    .rp-mrow__val { flex: 1 1 auto; min-width: 0; }           /* a long «المبرر» drops under its label */
    .rp-quote { padding: 8px 12px; }
    .rp-note { padding: 0; border: 0; background: transparent; }
    .rp-note__card { padding: 12px 14px; border-block: 1px solid var(--rp-card-line); border-left: 1px solid var(--rp-card-line); }
    .rp-file { padding: 16px; gap: 16px; }
    .rp-file__frame { display: none; }                         /* phones do not render a PDF in an iframe */
    /* the three tabs stacked into three rows (the older ≤640 rule above); one swipeable row instead */
    .rp-tabs { flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .rp-tabs::-webkit-scrollbar { display: none; }
    .rp-tab { flex: 1 0 auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
    .rp-crit__head { padding: 12px; }
    .rp-crit__body { padding: 12px; }
    .rp-evidence { padding: 0; gap: 10px; border: 0; background: transparent; }
    .rp-evidence__head { flex-wrap: wrap; }
    .rp-evidence__head h4 { font-size: 14px; }
    .rp-add { padding: 6px 14px; gap: 8px; font-size: 14px; }
    .rp-item { padding: 10px; gap: 10px; }
    .rp-item__n { width: 28px; height: 28px; font-size: 14px; }
    .rp-item__text { font-size: 15px; line-height: 26px; }
}