/* ══════════ لوحة الجمعية — راصد ══════════ */

:root {
    --rs-teal: #12524B;
    --rs-teal-2: #1A6B62;
    --rs-gold: #C29455;
    --rs-line: #E4EBE9;
    --rs-ink: #16211F;
    --rs-ink-2: #5A6865;
    /* والرمادُ الثانوي يحمل أكثرَ ما في اللوحة من سطورٍ صغيرة، وكان
       تباينُه على البياض ٢٫٩ إلى واحد — دون حدِّ ما يُقرأ بالعين
       المجهدة في مقرٍّ إضاءتُه خافتة. وهو الآن خمسةٌ تقريباً. */
    --rs-ink-3: #64736F;
    --rs-surface: #FFFFFF;
    /* أرضٌ ثانيةٌ دون السطح: كانت تُستعمل في أربعة مواضع ولا تُعرَّف
       إلا داخل كتلة الطباعة — فتُرسم البطاقاتُ على الشاشة بلا أرضٍ
       أصلاً، وهو ما يجعل الصفَّ يطفو بلا إطار. */
    --rs-surface-2: #F5F8F7;
    --rs-soft: #F4F8F7;
    --rs-radius: 16px;
    --rs-shadow: 0 1px 2px rgba(12, 40, 36, .04), 0 12px 28px -22px rgba(12, 40, 36, .5);

    /*
     | ولونُ العلامة نصّاً — لا اللونُ نفسُه.
     |
     | ‏`--rs-teal` معرَّفٌ مرّةً ولا يُعاد تعريفُه في الليل، وتسعُ قواعدَ
     | تكتب به نصّاً أو تمزجه أرضاً رقيقة. فالشريحةُ المختارة — وهي
     | الإجابةُ نفسُها في اثنين وأربعين سؤالاً وفي كل سطرٍ من بطاقة
     | التقييم — تباينُها ليلاً ١٫٨٥ إلى واحد: أسودُ على أسود. ونهاراً
     | ٧٫٦٥، فالعطبُ لا يُرى إلا ليلاً.
     |
     | فلونُ النصِّ رمزٌ ثانٍ ينقلب، واللونُ الأصلُ يبقى للأرضيّات
     | والحدود التي لا يُقرأ عليها شيء.
     */
    --rs-teal-fg: #12524B;
    --rs-gold-fg: #7A5518;

    /*
     | ── ألوانُ الحال: علامةٌ تُرسَم، وحِبرٌ يُقرأ ──
     |
     | «عُقد» و«فات» و«ينتظر» كانت تُكتب بأرقامها في تسعةٍ وخمسين
     | موضعاً، ولبعضها نظيرٌ في `.dark` يُكتب بيده — فمن زاد قاعدةً
     | نسي نظيرَها. وحافّةُ اللقاء المنعقد بلا نظيرٍ أصلاً، فهي على
     | أرض الليل ثلاثةٌ وخُمسان إلى واحد، والحمراءُ اثنان وثلثان.
     |
     | وقناتان لا واحدة، كما فُعل بـ`--rs-teal`/`--rs-teal-fg`: ما
     | يصلح حافّةً بثلاثة بكسلات لا يصلح نصّاً بأحدَ عشر. وحِبرُ
     | التنبيه `--rs-gold-fg` بعينه — لونٌ في اللوحة يُسمّى، لا لونٌ
     | يُخترع.
     */
    --rs-ok: #0E7A45;   --rs-ok-fg: #0E7A45;
    --rs-warn: #A87708; --rs-warn-fg: #7A5518;
    --rs-bad: #B3261E;  --rs-bad-fg: #B3261E;

    /* وظلٌّ يُلقى إلى أعلى: قدمُ الحفظ يأتيها المحتوى من فوقها */
    --rs-shadow-up: 0 -10px 26px -18px rgba(8, 24, 22, .5);

    /*
     | ومستوياتُ الارتفاع تُسمّى.
     |
     | في الملفّ سبعٌ وأربعون ظلّاً مكتوبةً بأرقامها، ورمزٌ واحدٌ يحملها
     | — فما كُتب بيده لا نظيرَ له في الليل: ظلٌّ مضبوطٌ لورقٍ أبيض لا
     | يُرى على أرضٍ سوداء، فيستوي المرتفعُ والمسطَّح.
     |
     | صفرٌ: غائرٌ تُكتب فيه الإجابة. اثنان: مرتفعٌ عند اللمس. ثلاثة:
     | طافٍ فوق الصفحة.
     */
    --rs-shadow-0: inset 0 1px 2px rgba(12, 40, 36, .07);
    --rs-shadow-2: 0 2px 4px rgba(12, 40, 36, .06), 0 10px 20px -14px rgba(12, 40, 36, .45);
    --rs-shadow-3: 0 24px 60px -20px rgba(8, 24, 22, .7);
    --rs-ring: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);

    /*
     | وألوانُ الأصناف: لكلِّ نوعِ إدخالٍ لونُه، ولكلِّ أداةٍ لونُها.
     | وكلُّها مقيسةٌ نصّاً على أرضها في الوضعين — أدناها ٥٫٦ إلى واحد.
     */
    --rs-kind-one: #12524B;
    --rs-kind-many: #5B3E8F;
    --rs-kind-scale: #7A5518;
    --rs-kind-text: #42544F;
    --rs-tool-environment: #10565F;
    --rs-tool-attainment: #12524B;
    --rs-tool-skills: #5B3E8F;
}

.dark {
    --rs-line: #24332F;
    --rs-ink: #E8EFED;
    --rs-ink-2: #9FAEAA;
    /* وفي الليل ينعكس الأمر: الرماد الداكن على أرضٍ داكنة ٣٫٩ إلى
       واحد، فيُرفع لا يُخفض. */
    --rs-ink-3: #8B9A96;
    --rs-surface: #121C1A;
    --rs-surface-2: #17221F;
    --rs-soft: #17221F;
    --rs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -22px rgba(0, 0, 0, .9);

    /* وفي الليل ينقلب لونُ النصِّ ويبقى لونُ العلامة */
    --rs-teal-fg: #7FC3B9;
    --rs-gold-fg: #E0B678;

    /*
     | وألوانُ الحال ليلاً: مأخوذةٌ من قيم الأقراص التي كانت تُكتب
     | بيدها في `.dark`، فلا لونَ جديدٌ يدخل اللوحة. وهي على أرض
     | الليل ثمانيةٌ وتسعةٌ وسبعة إلى واحد — تكفي للنصّ كما تكفي
     | للعلامة، فقناةٌ واحدةٌ تسدّ عنهما.
     */
    --rs-ok: #48C68C;   --rs-ok-fg: #48C68C;
    --rs-warn: #E0B54A; --rs-warn-fg: #E0B54A;
    --rs-bad: #F08A8D;  --rs-bad-fg: #F08A8D;

    --rs-shadow-up: 0 -10px 26px -18px rgba(0, 0, 0, .95);

    --rs-shadow-0: inset 0 1px 3px rgba(0, 0, 0, .55);
    --rs-shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 10px 20px -14px rgba(0, 0, 0, .95);
    --rs-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .95);
    --rs-ring: 0 0 0 3px color-mix(in srgb, var(--rs-teal-fg) 22%, transparent);

    --rs-kind-one: #7FC3B9;
    --rs-kind-many: #BFA6E8;
    --rs-kind-scale: #E0B678;
    --rs-kind-text: #A9BAB5;
    --rs-tool-environment: #7DC7D2;
    --rs-tool-attainment: #7FC3B9;
    --rs-tool-skills: #BFA6E8;
}

/* ── علامة الجهة في الشريط الجانبي ── */
.rs-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    height: 100%;
}

.rs-brand__mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.rs-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    background: #fff;
}

.rs-brand__text { min-width: 0; line-height: 1.3; }

.rs-brand__name {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--rs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-brand__role {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    color: var(--rs-ink-3);
}

/* تذييل الشريط الجانبي */
.rs-side-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .9rem 1rem 1.1rem;
    margin-top: auto;
    border-top: 1px solid var(--rs-line);
    font-size: .72rem;
    color: var(--rs-ink-3);
}

.rs-side-foot img { width: 15px; height: auto; opacity: .6; }

/* ══════════ لوحة التحكم ══════════ */

.rs-dash { display: grid; gap: 1.25rem; }

/* ── شريط الترحيب ── */
.rs-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 1.6rem 1.8rem;
    color: #fff;
    background:
        radial-gradient(110% 130% at 92% 0%, rgba(194, 148, 85, .28), transparent 55%),
        linear-gradient(135deg, var(--rs-teal-2) 0%, var(--rs-teal) 45%, #0A3B36 100%);
}

.rs-hero::after {
    content: '';
    position: absolute;
    inset-inline-start: -90px;
    bottom: -140px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 48px solid rgba(255, 255, 255, .045);
    pointer-events: none;
}

.rs-hero__row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.rs-hero__logo {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    display: grid;
    place-items: center;
    padding: 6px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45);
}

.rs-hero__logo img { width: 100%; height: 100%; object-fit: contain; }

.rs-hero__t { flex: 1; min-width: 12rem; }

.rs-hero__hi { font-size: .85rem; opacity: .8; }

.rs-hero__name {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.015em;
}

.rs-hero__meta {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.rs-hero__meta div { line-height: 1.35; }
.rs-hero__meta b { display: block; font-size: 1.3rem; font-weight: 800; }
.rs-hero__meta span { font-size: .75rem; opacity: .75; }

/*
 | ── أبوابُ صاحب الشاشة ──
 | لمن ليست أرقامُ الجمعية له: الصفحةُ بلا أرقامها كانت صفراً في صفر،
 | فصارت تُعرِّفه بعمله. وهي أوّلُ ما يقع عليه بصرُه بعد دخوله.
 */
.rs-doors {
    display: grid;
    gap: .55rem;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--rs-shadow);
}
.rs-doors h3 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 800; }
.rs-doors__none { margin: 0; font-size: .85rem; opacity: .7; }

.rs-door {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid var(--rs-line);
    border-radius: calc(var(--rs-radius) - 4px);
    font-size: .92rem; font-weight: 700;
    color: inherit; text-decoration: none;
    transition: border-color .14s ease, transform .14s ease;
}
.rs-door:hover { border-color: currentColor; transform: translateX(-2px); }
.rs-door span { flex: 1; }
.rs-door svg { width: 1rem; height: 1rem; opacity: .45; flex: 0 0 auto; }

/* ── بطاقات المؤشرات ── */
.rs-kpis {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.rs-kpi {
    position: relative;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--rs-shadow);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease;
}

.rs-kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(12,40,36,.06), 0 18px 34px -24px rgba(12,40,36,.6); }

.rs-kpi::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--kpi, var(--rs-teal));
}

.rs-kpi__top { display: flex; align-items: center; gap: .6rem; }

.rs-kpi__ic {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--kpi, var(--rs-teal)) 12%, transparent);
    color: var(--kpi, var(--rs-teal));
}

.rs-kpi__ic svg { width: 18px; height: 18px; }

.rs-kpi__lab { font-size: .82rem; color: var(--rs-ink-2); font-weight: 600; }

.rs-kpi__val {
    margin-top: .55rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-kpi__sub {
    margin-top: .2rem;
    font-size: .74rem;
    color: var(--rs-ink-3);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.rs-kpi__bar {
    margin-top: .8rem;
    height: 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--kpi, var(--rs-teal)) 12%, transparent);
    overflow: hidden;
}

.rs-kpi__bar i { display: block; height: 100%; border-radius: 99px; background: var(--kpi, var(--rs-teal)); }

/* ── الشبكة السفلية ── */
.rs-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
    .rs-grid { grid-template-columns: 1.35fr 1fr; }
}

.rs-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow);
    overflow: hidden;
}

.rs-card__h {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--rs-line);
}

.rs-card__h h3 { margin: 0; font-size: .98rem; font-weight: 800; color: var(--rs-ink); }
.rs-card__h p { margin: .1rem 0 0; font-size: .74rem; color: var(--rs-ink-3); }

/* والعمودُ المتمدّد: كان يُكتب في ست شاشاتٍ ولا قاعدةَ له، فيبقى
   السطرُ ملتصقاً بأخيه ولا يُدفع الرقمُ إلى الطرف — وهو أظهرُ ما
   يجعل الصفَّ يُقرأ ركاماً لا جدولاً. */
.rs-grow { flex: 1; min-width: 0; }

/*
 | والفاصلُ يفصل حيث كُتب لا في رأس البطاقة وحدَه.
 |
 | خارجَ `.rs-card__h` كان خانةً فارغةً عرضُها صفر، والفضلُ يجتمع في
 | آخر الصفّ — وآخرُه في العربية يسارُه. فرأسُ كلِّ نافذةٍ تُحزَم
 | أفعالُه إلى جانب عنوانه ويبقى نصفُها بياضاً.
 |
 | وهامشٌ تلقائيٌّ لا `flex: 1`: المواصفةُ تقسم الفضلَ على المرن قبل
 | الهوامش، فحيث في الصفِّ متمدّدٌ — كاسم الطالب — يبقى الهامشُ صفراً
 | ولا يُنازعه على نصف العرض، وحيث لا متمدّدَ أخذ الفضلَ كلَّه.
 | والهامشُ التلقائيُّ ينحسر إلى صفرٍ متى نفد الفضل، فلا يُخرج سطراً
 | عن حاويه أبداً.
 */
.rs-sp { margin-inline-start: auto; }

.rs-pill {
    font-size: .7rem;
    font-weight: 700;
    padding: .18rem .55rem;
    border-radius: 99px;
    white-space: nowrap;
}

.rs-pill--ok { background: rgba(14, 122, 69, .12); color: #0E7A45; }
/* وثلاثةٌ ونصفٌ إلى واحدٍ في النهار على القرص الذي يقول «بانتظار
   تأكيدك» — وهو أكثرُ ما يُقرأ في الشاشة الأولى. ورمزُ الحال يحمل قيمةَ
   الليل، فلم يبقَ لنظيرٍ يُكتب باليد معنى. */
.rs-pill--warn { background: color-mix(in srgb, var(--rs-warn) 16%, var(--rs-surface)); color: var(--rs-warn-fg); }
.rs-pill--bad { background: rgba(179, 38, 30, .12); color: #B3261E; }
.rs-pill--info { background: rgba(18, 82, 75, .1); color: var(--rs-teal-fg); }
.rs-pill--mute,
/*
 | و«الهادئة» كانت تُكتب في خمسة مواضع ولا قاعدةَ لها: «مبتدئ» و«أُلغي
 | اللقاء» تخرج نصّاً عارياً بلا قرصٍ ولا لون، فتُقرأ سهواً في الكتابة
 | لا حالاً مقصودة.
 */
.rs-pill--idle { background: color-mix(in srgb, var(--rs-ink-3) 14%, transparent); color: var(--rs-ink-2); }

.dark .rs-pill--ok { background: rgba(34, 162, 104, .16); color: #48C68C; }
.dark .rs-pill--bad { background: rgba(225, 79, 83, .16); color: #F08A8D; }
.dark .rs-pill--info { background: rgba(79, 188, 174, .14); color: #6FD3C4; }

/* صفوف الأشخاص */
.rs-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--rs-line);
    transition: background .12s;
}

.rs-row:last-child { border-bottom: 0; }
.rs-row:hover { background: var(--rs-soft); }

.rs-av {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--rs-teal) 11%, transparent);
    color: var(--rs-teal-fg);
}

.dark .rs-av { background: rgba(79, 188, 174, .14); color: #6FD3C4; }

.rs-av--warn { background: color-mix(in srgb, var(--rs-warn) 16%, var(--rs-surface)); color: var(--rs-warn-fg); }
.rs-av--bad { background: color-mix(in srgb, var(--rs-bad) 14%, var(--rs-surface)); color: var(--rs-bad-fg); }

/* والاسمُ فوق وصفِه لا بجواره.
   كلاهما `<span>` سطريّ، و`.rs-row__t` عنصرٌ مرنٌ لا حاوٍ مرن — فكانا
   يُقرآن جملةً واحدةً متّصلة في اثنين وعشرين موضعاً من اللوحة:
   «شرح الأصول الثلاثة الخميس ١٧ سبتمبر · ١٦:٠٠». ورقّعه موضعٌ واحد
   بـ`display:block` في سمته، فبقي واحدٌ صحيحاً وأحدٌ وعشرون ركاماً. */
.rs-row__t { flex: 1; min-width: 0; }
/*
 | و`anywhere` تكسر الكلمة حيثما وقع الضيق — حرفاً في كل سطر.
 |
 | ‏`break-word` لا تكسر إلا كلمةً لا تسعُ سطراً بحالٍ، فاسمٌ عربيٌّ
 | طويلٌ يلتفّ بين كلماته كما يُقرأ. وقد وقع هذا في شبكة الشهر من قبل
 | وعولج بالمثل.
 */
.rs-row__n { display: block; font-size: .89rem; font-weight: 700; color: var(--rs-ink); line-height: 1.45; overflow-wrap: break-word; }
.rs-row__s { display: block; font-size: .73rem; color: var(--rs-ink-3); line-height: 1.5; overflow-wrap: break-word; }

/* واسمُ الطالب في كشفٍ ضيّق سطرٌ واحدٌ يُقصّ: كان يحمل قصَّه في سمته
   فلا يراه من قرأ الملف، ولا يُصلَح في موضعٍ إلا بيده. */
.rs-row__n--tight {
    font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    overflow-wrap: normal;
}

.rs-mini {
    font-size: .72rem;
    font-weight: 700;
    padding: .3rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--rs-line);
    background: var(--rs-surface);
    color: var(--rs-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: .12s;
}

.rs-mini:hover { border-color: var(--rs-teal); color: var(--rs-teal-fg); }

/* بطاقات الدفعات */
.rs-coh { padding: 1rem 1.2rem; border-bottom: 1px solid var(--rs-line); }
.rs-coh:last-child { border-bottom: 0; }
.rs-coh__h { display: flex; align-items: center; gap: .6rem; }
.rs-coh__n { flex: 1; min-width: 0; font-size: .9rem; font-weight: 700; color: var(--rs-ink); }
.rs-coh__p { font-size: .72rem; color: var(--rs-ink-3); }

.rs-track {
    margin-top: .7rem;
    height: 7px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 16%, transparent);
    overflow: hidden;
}

.rs-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--rs-teal), var(--rs-teal-2)); }

.rs-coh__f { display: flex; gap: 1.1rem; margin-top: .6rem; font-size: .72rem; color: var(--rs-ink-3); }
.rs-coh__f b { color: var(--rs-ink); font-variant-numeric: tabular-nums; }

/* حالة فارغة */
.rs-empty { padding: 2.6rem 1.4rem; text-align: center; }
.rs-empty__i { font-size: 2rem; opacity: .35; }
.rs-empty h4 { margin: .7rem 0 .2rem; font-size: .95rem; color: var(--rs-ink); }
.rs-empty p { margin: 0; font-size: .8rem; color: var(--rs-ink-3); }

/* ══════════ التسميع ══════════ */

.rs-card.is-done { border-color: color-mix(in srgb, #0E7A45 26%, var(--rs-line)); }

/* شريط تقدّم اليوم */
.rs-bar {
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 16%, transparent);
    overflow: hidden;
}
.rs-bar > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--rs-teal-2), var(--rs-teal));
    transition: width .3s ease;
}

/* الأزرار */
.rs-btn {
    flex: 0 0 auto;
    padding: .5rem 1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--rs-teal);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.rs-btn:hover { background: #0E403B; }
.rs-btn:focus-visible { outline: 2px solid var(--rs-gold); outline-offset: 2px; }
.rs-btn:disabled { opacity: .45; cursor: not-allowed; }

.rs-btn--o {
    background: transparent;
    color: var(--rs-ink-2);
    border-color: var(--rs-line);
}
.rs-btn--o:hover { background: var(--rs-soft); color: var(--rs-teal-fg); border-color: var(--rs-teal); }

/* وسم نتيجة الجلسة */
.rs-chip {
    flex: 0 0 auto;
    padding: .22rem .6rem;
    border-radius: 99px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.rs-chip--success { background: rgba(14, 122, 69, .12); color: #0E7A45; }
.rs-chip--warning { background: rgba(201, 138, 10, .14); color: #A87708; }
.rs-chip--danger  { background: rgba(179, 38, 30, .12); color: #B3261E; }
.rs-chip--gray    { background: color-mix(in srgb, var(--rs-ink-3) 14%, transparent); color: var(--rs-ink-2); }

.dark .rs-chip--success { background: rgba(34, 162, 104, .16); color: #48C68C; }
.dark .rs-chip--warning { background: rgba(200, 138, 10, .18); color: #E0B54A; }
.dark .rs-chip--danger  { background: rgba(225, 79, 83, .16); color: #F08A8D; }

/* نموذج رصد الجلسة */
.rs-rec {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--rs-line);
}
.rs-rec__grid {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.rs-rec__foot {
    margin-top: 1rem;
    display: flex;
    gap: .5rem;
}

.rs-f { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.rs-f--wide { grid-column: 1 / -1; }
.rs-f > span {
    font-size: .76rem;
    font-weight: 700;
    color: var(--rs-ink-2);
}
.rs-f select,
.rs-f input {
    width: 100%;
    padding: .5rem .65rem;
    border-radius: 10px;
    border: 1px solid var(--rs-line);
    background: var(--rs-surface);
    color: var(--rs-ink);
    font-family: inherit;
    font-size: .86rem;
}
.rs-f select:focus,
.rs-f input:focus {
    outline: none;
    border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px rgba(18, 82, 75, .12);
}

/* حذف جلسة رُصدت خطأً */
.rs-rec__undo {
    margin-top: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.rs-rec__undo button {
    padding: .18rem .55rem;
    border: 1px solid var(--rs-line);
    border-radius: 8px;
    background: none;
    color: var(--rs-ink-3);
    font-family: inherit;
    font-size: .74rem;
    cursor: pointer;
}
.rs-rec__undo button:hover { color: #B3261E; border-color: #B3261E; }

/* ══════════ روابط الجمعية ══════════ */

.rs-links { display: grid; gap: .6rem; }

.rs-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    padding: .8rem 1rem;
    border: 1px solid var(--rs-line);
    border-radius: 12px;
    background: var(--rs-soft);
}

.rs-link__t { flex: 1 1 11rem; min-width: 0; }
.rs-link__t b { display: block; font-size: .88rem; font-weight: 800; }
.rs-link__t span { display: block; font-size: .76rem; color: var(--rs-ink-2); }

.rs-link code {
    flex: 2 1 18rem;
    min-width: 0;

    /*
     | والرابطُ يُقرأ آخرُه كما يُقرأ أوّلُه: يلتفّ عند أيِّ محرف، ولا
     | مُمرِّرَ أفقيٌّ يُخفي ذيلَه عمّن ينسخه. و`anywhere` لا
     | `break-word`: الرابطُ كلمةٌ واحدةٌ لا تُكسَر، وهي وحدَها التي
     | تُنزل أدنى عرضِه فيسع الصفَّ في شاشة الجوال.
     */
    overflow-wrap: anywhere;
    line-height: 1.7;

    padding: .4rem .6rem;
    border-radius: 8px;
    border: 1px solid var(--rs-line);
    background: var(--rs-surface);
    color: var(--rs-teal-fg);
    font-size: .8rem;
}


/* ══════════ تبويب الأنشطة ══════════ */

.ra-acts { display: grid; gap: 1rem; }

.ra-acts__add {
    border: 1px solid var(--rs-line);
    border-radius: 14px;
    padding: .95rem 1.1rem;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(194, 148, 85, .09), transparent 58%),
        var(--rs-soft);
}

.ra-acts__addt b { display: block; font-size: .95rem; font-weight: 800; }
.ra-acts__addt span { display: block; font-size: .78rem; color: var(--rs-ink-2); margin-top: .1rem; }

.ra-acts__chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/*
 | صفٌّ واحد بلا عناوين مجموعات.
 |
 | كانت الأنواع مقسومة على «حضوري/خطة/تقييم/تحفيز» — وذلك تصنيفُنا
 | نحن لا تصنيف المدير: هو يبحث عن «واجب» لا عن «التقييم ثم واجب».
 | وأربعة عناوين فوق ثلاثة عشر خياراً تُوهم أن الأمر أعقد ممّا هو.
 */
.ra-acts__chips--flat { margin-top: .9rem; gap: .45rem; }

.ra-acts__chipic { width: 1rem; height: 1rem; opacity: .65; }

/* قوالب الإرشاد — صندوقٌ مستقل عن «أضف نشاطاً» */
.ra-acts__tpl {
    margin-top: .9rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--rs-line);
    border-radius: 12px;
    background: var(--rs-surface-2);
}

.ra-acts__tpl .ra-acts__chip { cursor: pointer; font-family: inherit; }

.ra-acts__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .8rem;
    border-radius: 99px;
    border: 1px solid var(--rs-line);
    background: var(--rs-surface);
    color: var(--rs-ink);
    font-size: .82rem;
    font-weight: 700;
    transition: border-color .14s, color .14s, background .14s;
}
.ra-acts__chip:hover {
    border-color: var(--rs-teal);
    color: var(--rs-teal-fg);
    background: color-mix(in srgb, var(--rs-teal) 6%, var(--rs-surface));
}
.ra-acts__plus { color: var(--rs-teal-fg); font-weight: 800; }

.ra-acts__note {
    padding: .65rem .95rem;
    border-radius: 11px;
    background: rgba(201, 138, 10, .12);
    color: #A87708;
    font-size: .82rem;
}
.ra-acts__note b { font-weight: 800; }

.ra-acts__sec { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; }
.ra-acts__sec h4 { margin: 0; font-size: .76rem; font-weight: 800; color: var(--rs-ink-3); }
.ra-acts__sec span { flex: 1; height: 1px; background: var(--rs-line); }

.ra-act {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .95rem;
    border: 1px solid var(--rs-line);
    border-radius: 13px;
    background: var(--rs-surface);
    border-inline-start: 3px solid var(--rs-line);
    transition: border-color .14s, box-shadow .14s;
}
.ra-act:hover { box-shadow: 0 6px 18px -14px rgba(12, 40, 36, .6); }
.ra-act.is-live { border-inline-start-color: #0E7A45; }
.ra-act.is-ready { border-inline-start-color: var(--rs-gold); }
.ra-act.is-draft { border-inline-start-color: var(--rs-ink-3); }

.ra-act__ic {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--rs-teal) 10%, transparent);
    color: var(--rs-teal-fg);
}
.ra-act__ic svg { width: 1.15rem; height: 1.15rem; }

.ra-act__b { flex: 1; min-width: 0; }
.ra-act__b b { display: block; font-size: .9rem; font-weight: 700; }
.ra-act__m { display: block; font-size: .75rem; color: var(--rs-ink-3); }
.ra-act__miss { display: block; font-size: .73rem; color: #A87708; margin-top: .2rem; }

.ra-act__p {
    flex: 0 0 auto;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}
.ra-act__p.is-live { background: rgba(14, 122, 69, .12); color: #0E7A45; }
.ra-act__p.is-ready { background: rgba(201, 138, 10, .14); color: #A87708; }
.ra-act__p.is-draft { background: color-mix(in srgb, var(--rs-ink-3) 14%, transparent); color: var(--rs-ink-2); }

.ra-acts__empty { text-align: center; padding: 2.6rem 1.2rem; }
.ra-acts__empty span { font-size: 2rem; opacity: .3; }
.ra-acts__empty b { display: block; margin-top: .6rem; font-size: .95rem; }
.ra-acts__empty p { margin: .3rem auto 0; font-size: .8rem; color: var(--rs-ink-3); max-width: 34ch; line-height: 1.8; }

/* ══════════════════════════════════════════════════════
   هوية راصد فوق فيلامنت

   ما سبق في هذا الملف يخصّ الصفحات المخصّصة وحدها، ولم يمسّ
   عنصراً واحداً من فيلامنت — فبقيت اللوحة على شكلها الافتراضي.
   ما يلي يكسو مكوّناته نفسها: الشريط الجانبي والجداول والحقول
   والأزرار والقوائم.
   ══════════════════════════════════════════════════════ */

/* ── حركة عامة، تحترم من يطلب تقليلها ──

   ولا حركةَ على `.fi-main-content` ولا على `.fi-section`.

   العنصرُ ذو الحركة على `transform` يصير **كتلةً حاوية** لكل ما تحته
   من `position: fixed`، ويُنشئ سياقَ تراصٍّ خاصاً به. وقوائمُ فيلامنت
   المنسدلة ومنتقي التاريخ تُرسَم بـfixed وتُحسب إحداثياتُها من نافذة
   المتصفح — فصارت تُقصّ عند حافة القسم وتُدفَن تحت القسم الذي يليه:
   قائمةُ أنواع النشاط تُظهر أربعةً من ثلاثة عشر، والتقويم يُقصّ
   نصفُه فلا يُختار منه موعد.

   فبقيت الحركةُ حيث لا تُخفي شيئاً: صفوفُ الجداول. */
@media (prefers-reduced-motion: no-preference) {
    .fi-ta-row { animation: rs-fade .28s ease-out both; }
}

@keyframes rs-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── الشريط الجانبي ── */
.fi-sidebar {
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(194, 148, 85, .10), transparent 60%),
        linear-gradient(180deg, #143F3A 0%, #0E312D 62%, #0A2724 100%) !important;
    border-inline-end: 0 !important;
}

.fi-sidebar-nav { padding-inline: .6rem; }

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 700;
}

.fi-sidebar-group-label {
    font-size: .68rem !important;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .38) !important;
}

.fi-sidebar-item-icon { color: rgba(255, 255, 255, .55) !important; }

.fi-sidebar-item-btn {
    border-radius: 11px !important;
    transition: background .16s ease, transform .16s ease;
}

.fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    transform: translateX(-2px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(194, 148, 85, .22), rgba(194, 148, 85, .06)) !important;
    box-shadow: inset 2px 0 0 var(--rs-gold);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--rs-gold) !important; }

/* ── الشريط العلوي ── */
.fi-topbar > nav {
    background: color-mix(in srgb, var(--rs-surface) 86%, transparent) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rs-line) !important;
    box-shadow: 0 1px 0 rgba(12, 40, 36, .03);
}

/* ── العناوين ── */
.fi-header-heading {
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--rs-ink), color-mix(in srgb, var(--rs-teal) 70%, var(--rs-ink)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark .fi-header-heading { -webkit-text-fill-color: var(--rs-ink); }

/* ── الأقسام والبطاقات ── */
.fi-section {
    border-radius: 16px !important;
    border-color: var(--rs-line) !important;
    box-shadow: 0 1px 2px rgba(12, 40, 36, .03), 0 10px 26px -22px rgba(12, 40, 36, .45) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.fi-section:hover { box-shadow: 0 1px 2px rgba(12, 40, 36, .04), 0 16px 34px -24px rgba(12, 40, 36, .55) !important; }

.fi-section-header-heading { font-weight: 800 !important; letter-spacing: -.01em; }

/* شريط لوني رفيع أعلى كل قسم */
.fi-section-header {
    position: relative;
}
.fi-section-header::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rs-teal), var(--rs-gold) 70%, transparent);
    opacity: .5;
}

/* ── الأزرار ── */
.fi-btn {
    border-radius: 11px !important;
    font-weight: 700 !important;
    transition: transform .14s ease, box-shadow .18s ease, filter .14s ease !important;
}
.fi-btn:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(0); }

.fi-btn.fi-color-primary {
    box-shadow: 0 6px 16px -10px rgba(18, 82, 75, .9);
}
.fi-btn.fi-color-primary:hover {
    box-shadow: 0 10px 22px -10px rgba(18, 82, 75, .95);
}

.fi-icon-btn { border-radius: 10px !important; transition: background .14s, color .14s; }

/* ── الحقول ── */
.fi-input-wrp {
    border-radius: 11px !important;
    transition: box-shadow .16s ease, border-color .16s ease;
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 15%, transparent) !important;
}

.fi-fo-field-label-content { font-weight: 700 !important; }

/* ── الجداول ── */
.fi-ta { border-radius: 16px !important; }

.fi-ta-header-cell {
    font-size: .74rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    color: var(--rs-ink-3) !important;
    background: var(--rs-soft) !important;
}

.fi-ta-row { transition: background .14s ease; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--rs-teal) 4%, transparent) !important; }

/* ── الوسوم ── */
.fi-badge {
    border-radius: 99px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
}

/* ── التبويبات ── */
.fi-tabs {
    border-radius: 13px !important;
    background: var(--rs-soft) !important;
    padding: 3px !important;
}

.fi-tabs-item {
    border-radius: 10px !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.fi-tabs-item.fi-active {
    background: var(--rs-surface) !important;
    box-shadow: 0 1px 2px rgba(12, 40, 36, .07), 0 4px 10px -8px rgba(12, 40, 36, .5) !important;
}
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--rs-teal-fg) !important; font-weight: 800 !important; }

/* ── القوائم المنسدلة ── */
.fi-dropdown-panel {
    border-radius: 14px !important;
    border: 1px solid var(--rs-line) !important;
    box-shadow: 0 20px 48px -26px rgba(12, 40, 36, .6), 0 2px 8px rgba(12, 40, 36, .05) !important;
    /* clip لا hidden: الأول يقصّ عند الحافة المستديرة ويُبقي التمرير،
       والثاني كان يقطع ما تحت السقف فلا سبيل إليه — فقائمةُ أنواع
       النشاط تُظهر أربعةً من ثلاثة عشر ولا تُمرَّر. */
    overflow: clip;
}

/* وما جعله فيلامنت قابلاً للتمرير يبقى كذلك */
/* وما جعله فيلامنت قابلاً للتمرير يبقى كذلك — نزولاً وحدَه */
.fi-dropdown-panel.fi-scrollable { overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; }

@media (prefers-reduced-motion: no-preference) {
    .fi-dropdown-panel { animation: rs-drop .16s cubic-bezier(.2, .8, .3, 1) both; }
}

@keyframes rs-drop {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.fi-dropdown-list-item { border-radius: 9px !important; transition: background .13s ease; }

/* ── النوافذ ── */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 32px 70px -30px rgba(12, 40, 36, .6) !important;
}

/* ── الحالة الفارغة ── */
.fi-ta-empty-state-icon-ctn {
    background: color-mix(in srgb, var(--rs-teal) 8%, transparent) !important;
    color: var(--rs-teal-fg) !important;
}

/* ── التنبيهات ── */
.fi-no-notification { border-radius: 14px !important; }

/* ══════════ طلبات التسجيل ══════════ */

.rq { display: grid; gap: .6rem; }

.rq-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: 13px;
    position: sticky;
    top: 4.2rem;
    z-index: 20;
    box-shadow: 0 6px 18px -16px rgba(12, 40, 36, .7);
}

.rq-sp { flex: 1; }

.rq-all { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; cursor: pointer; }
.rq-all input { width: 17px; height: 17px; accent-color: var(--rs-teal); cursor: pointer; }

.rq-filter {
    padding: .42rem .8rem;
    border: 1px solid var(--rs-line);
    border-radius: 10px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

.rq-count {
    padding: .22rem .7rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--rs-teal) 12%, transparent);
    color: var(--rs-teal-fg);
    font-size: .78rem;
    font-weight: 800;
}

.rq-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.rq-card:hover { box-shadow: 0 8px 22px -18px rgba(12, 40, 36, .7); }
.rq-card.is-picked { border-color: var(--rs-teal); background: color-mix(in srgb, var(--rs-teal) 4%, var(--rs-surface)); }
.rq-card.is-open { box-shadow: 0 14px 34px -24px rgba(12, 40, 36, .8); }

.rq-head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; }

.rq-check input { width: 17px; height: 17px; accent-color: var(--rs-teal); cursor: pointer; }

.rq-av {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rs-teal) 11%, transparent);
    color: var(--rs-teal-fg);
    font-weight: 800;
}

.rq-id { flex: 1; min-width: 0; text-align: start; border: 0; background: none; padding: 0; cursor: pointer; }
.rq-id b { display: block; font-size: .92rem; font-weight: 700; color: var(--rs-ink); }
.rq-id span { display: block; font-size: .75rem; color: var(--rs-ink-3); }

.rq-quick { display: flex; gap: .35rem; flex-wrap: wrap; }
.rq-quick span {
    padding: .16rem .55rem;
    border-radius: 99px;
    background: var(--rs-soft);
    border: 1px solid var(--rs-line);
    font-size: .71rem;
    color: var(--rs-ink-2);
    white-space: nowrap;
}
.rq-quick span.is-wait { background: rgba(201, 138, 10, .14); color: #A87708; border-color: transparent; }

.rq-more {
    width: 30px; height: 30px; flex: 0 0 auto;
    border: 1px solid var(--rs-line);
    border-radius: 9px;
    background: none;
    color: var(--rs-ink-3);
    font-size: .65rem;
    cursor: pointer;
    transition: border-color .14s, color .14s;
}
.rq-more:hover { border-color: var(--rs-teal); color: var(--rs-teal-fg); }

.rq-body {
    padding: 0 1rem 1rem;
    border-top: 1px dashed var(--rs-line);
    margin-top: -1px;
}
@media (prefers-reduced-motion: no-preference) {
    .rq-body { animation: rs-rise .22s ease-out both; }
}

.rq-grid {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    padding-top: 1rem;
}

.rq-f {
    padding: .55rem .75rem;
    background: var(--rs-soft);
    border-radius: 10px;
}
.rq-f span { display: block; font-size: .68rem; color: var(--rs-ink-3); }
.rq-f b { display: block; font-size: .85rem; font-weight: 700; margin-top: .1rem; }

.rq-ans { margin-top: 1rem; }
.rq-ans h4 {
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-weight: 800;
    color: var(--rs-ink-3);
}

.rq-qa {
    display: flex;
    gap: .8rem;
    padding: .45rem .75rem;
    border-inline-start: 2px solid color-mix(in srgb, var(--rs-gold) 55%, transparent);
    background: var(--rs-soft);
    border-radius: 0 9px 9px 0;
    margin-bottom: .3rem;
}
.rq-qa span { flex: 0 0 40%; font-size: .78rem; color: var(--rs-ink-3); }
.rq-qa b { flex: 1; font-size: .82rem; font-weight: 700; }

.rq-acts {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--rs-line);
}

.rq-g { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.rq-g span { color: var(--rs-ink-2); font-weight: 700; }
.rq-g select {
    padding: .42rem .7rem;
    border: 1px solid var(--rs-line);
    border-radius: 10px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

/* ══════════ تبويبات المشروع ══════════
   لكل تبويب لونه: المدير يعرف أين هو من لمحة، ولا يتيه بين ثلاث
   شاشات متشابهة. اللون هنا معلومة لا زينة. */

.fi-tabs { position: relative; }

/* شارة العدد على التبويب */
.fi-tabs-item-badge {
    border-radius: 99px !important;
    font-weight: 800 !important;
    font-size: .66rem !important;
}

/* ── أقسام داخل التبويب: تدرّج بصري بين المستويات ── */
.fi-tabs-content .fi-section {
    border-inline-start: 3px solid transparent;
    transition: border-inline-start-color .2s ease, box-shadow .2s ease;
}
.fi-tabs-content .fi-section:hover { border-inline-start-color: color-mix(in srgb, var(--rs-teal) 40%, transparent); }
.fi-tabs-content .fi-section:focus-within { border-inline-start-color: var(--rs-teal); }

/* أيقونة القسم في دائرة ملوّنة بدل رمز عارٍ */
.fi-section-header-icon {
    width: 2rem !important;
    height: 2rem !important;
    padding: .38rem !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--rs-teal) 10%, transparent) !important;
    color: var(--rs-teal-fg) !important;
}

/* وصف القسم يبقى مقروءاً لا باهتاً */
.fi-section-header-description { color: var(--rs-ink-2) !important; line-height: 1.85 !important; }

/* ── استغلال المساحة ── */
.fi-section-content { padding-block: 1.15rem !important; }

/* الحقول المتلاصقة تأخذ مساحة متساوية بدل التمدّد العشوائي */
.fi-tabs-content .fi-grid { align-items: start; }

/* ── مفاتيح التبديل ── */
.fi-toggle { transition: background .18s ease; }

/* ── خيارات الاختيار المفرد ── */
.fi-fo-radio-option {
    padding: .85rem 1rem;
    border: 1px solid var(--rs-line);
    border-radius: 12px;
    transition: border-color .16s ease, background .16s ease;
    margin-bottom: .5rem;
}
.fi-fo-radio-option:hover { border-color: color-mix(in srgb, var(--rs-teal) 45%, transparent); }
.fi-fo-radio-option:has(input:checked) {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 5%, transparent);
}

/* ── قائمة مربّعات الاختيار ── */
.fi-fo-checkbox-list-option-label {
    padding: .6rem .75rem;
    border-radius: 10px;
    transition: background .14s ease;
}
.fi-fo-checkbox-list-option-label:hover { background: var(--rs-soft); }

/* ══════════ تصحيح العنصر النشط ══════════
   فيلامنت يضع fi-active لا fi-sidebar-item-active. القواعد التي
   استهدفت الاسم الخطأ لم تُطبَّق، فبقيت خلفيته الفاتحة على أرضية
   داكنة — نصّ باهت لا يُقرأ. */

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(194, 148, 85, .26), rgba(194, 148, 85, .07)) !important;
    box-shadow: inset 2px 0 0 var(--rs-gold) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--rs-gold) !important; }

/* التبويب النشط: خلفية بيضاء وشريط سفلي بلون الهوية */
.fi-tabs-item.fi-active {
    background: var(--rs-surface) !important;
    box-shadow:
        inset 0 -2px 0 var(--rs-teal),
        0 1px 2px rgba(12, 40, 36, .08),
        0 4px 10px -8px rgba(12, 40, 36, .5) !important;
}
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--rs-teal-fg) !important; font-weight: 800 !important; }
.fi-tabs-item.fi-active .fi-icon { color: var(--rs-teal-fg) !important; }

/* ══════════ ضغط المساحات ══════════
   الحقول القصيرة كانت تأخذ صفاً كاملاً فيمتدّ النموذج شاشتين. */

.fi-section-content { padding-block: 1rem !important; }
.fi-section-header { padding-block: .85rem !important; }

/* المسافة بين الأقسام */
.fi-tabs-content > .fi-sc { gap: .75rem !important; }

/* الحقل لا يتمدّد أعرض مما يحتاج */
.fi-fo-field-content-col { max-width: 100%; }

/* الوصف تحت الحقل يلتصق به */
.fi-fo-field-hint,
.fi-fo-field-hint-text { margin-top: .2rem !important; font-size: .74rem !important; }

/* منطقة رفع الملف كانت تأخذ ارتفاع بطاقة كاملة */
.fi-fo-file-upload .filepond--root { min-height: 5.5rem !important; }
.fi-fo-file-upload .filepond--drop-label { min-height: 5.5rem !important; }

/* حقل النصّ الطويل يبدأ بثلاثة أسطر لا بستة */
.fi-fo-textarea textarea { min-height: 4.5rem; }

/* الصفحة نفسها: هامش أقل حول المحتوى */
.fi-main { padding-block: 1.25rem !important; }
.fi-page-content { gap: .9rem !important; }

/* التبويب النشط: تمييز أقوى — لونٌ وحدّ وظلّ لا خلفية باهتة */
.fi-tabs-item.fi-active {
    background: var(--rs-surface) !important;
    box-shadow:
        inset 0 -2.5px 0 var(--rs-gold),
        0 1px 2px rgba(12, 40, 36, .1),
        0 6px 14px -10px rgba(12, 40, 36, .6) !important;
}
.fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--rs-teal-fg) !important; font-weight: 800 !important; }
.fi-tabs-item.fi-active .fi-icon { color: var(--rs-gold) !important; }

/* الشريط الذي يحمل التبويبات */
.fi-tabs {
    background: linear-gradient(180deg, var(--rs-soft), color-mix(in srgb, var(--rs-teal) 4%, var(--rs-soft))) !important;
    border: 1px solid var(--rs-line) !important;
}

/* أزرار القرار في السطر — القبول بنقرة لا بنقرتين */
.rq-row-acts { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

.rq-ok, .rq-no {
    padding: .38rem .85rem;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .14s, border-color .14s, background .14s;
}
.rq-ok { background: #0E7A45; color: #fff; }
.rq-ok:hover { filter: brightness(1.12); }
.rq-no { background: transparent; color: var(--rs-ink-2); border-color: var(--rs-line); }
.rq-no:hover { border-color: #B3261E; color: #B3261E; }

/* نافذة الرفض */
.rq-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(9, 24, 22, .55);
    backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
    .rq-modal { animation: rs-fade .16s ease-out both; }
    .rq-modal__box { animation: rs-rise .2s cubic-bezier(.2, .8, .3, 1) both; }
}

.rq-modal__box {
    width: min(28rem, 100%);
    background: var(--rs-surface);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.rq-modal__box h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 800; }
.rq-modal__box p { margin: 0 0 1rem; font-size: .82rem; color: var(--rs-ink-2); line-height: 1.8; }

.rq-modal__box textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--rs-line);
    border-radius: 11px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit;
    font-size: .88rem;
    line-height: 1.8;
    resize: vertical;
}
.rq-modal__box textarea:focus {
    outline: none;
    border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rq-modal__acts { display: flex; gap: .5rem; margin-top: 1.1rem; }

/* منتقي التاريخ فوق ما تحته — كان يتداخل مع الأزرار */
.fi-fo-date-time-picker-panel,
.fi-dropdown-panel { z-index: 60 !important; }

/* ── ورقة التصحيح ── */
.rs-paper {
    padding: .2rem 1.2rem 1rem;
    border-bottom: 1px solid var(--rs-line);
    background: var(--rs-soft);
}
.rs-paper:last-child { border-bottom: 0; }

.rs-paper__q { padding: .9rem 0; border-bottom: 1px dashed var(--rs-line); }
.rs-paper__q:last-of-type { border-bottom: 0; }

.rs-paper__ask { font-size: .88rem; font-weight: 700; color: var(--rs-ink); line-height: 1.7; }

.rs-paper__ans {
    margin: .5rem 0 .7rem; padding: .7rem .9rem;
    border: 1px solid var(--rs-line); border-radius: 12px;
    background: var(--rs-surface); color: var(--rs-ink);
    font-size: .86rem; line-height: 1.9; white-space: pre-wrap;
}

.rs-paper__grade { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rs-paper__grade label { font-size: .76rem; font-weight: 700; color: var(--rs-ink-2); }
.rs-paper__grade span { font-size: .76rem; color: var(--rs-ink-3); }

.rs-paper__grade input {
    width: 4.5rem; padding: .38rem .55rem;
    border: 1px solid var(--rs-line); border-radius: 9px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .86rem; font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
}
.rs-paper__grade input:focus {
    outline: none; border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rs-paper__note { margin-top: .9rem; }
.rs-paper__note label { display: block; margin-bottom: .3rem; font-size: .76rem; font-weight: 700; color: var(--rs-ink-2); }
.rs-paper__note textarea {
    width: 100%; padding: .6rem .8rem;
    border: 1px solid var(--rs-line); border-radius: 12px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .85rem; line-height: 1.8; resize: vertical;
}
.rs-paper__note textarea:focus {
    outline: none; border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rs-paper__foot {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rs-line);
    font-size: .78rem; color: var(--rs-ink-3);
}
.rs-paper__foot b { color: var(--rs-ink); font-variant-numeric: tabular-nums; }

/*
 | ── خيارات سؤال الاختيار كما رآها صاحبُها ──
 |
 | كانت الشاشة تحذف أسئلة الاختيار حذفاً وتضع مكانها رقماً واحداً:
 | «سبعةٌ من عشرة آلياً». فيعلم المشرفُ أنّ ثلاثةً سقطت ولا يعلم
 | أيَّها، ولا يفرّق بين من اختار الخطأ ومن لم يختر شيئاً — وكلاهما
 | في المجموع صفر. فلا يدري أعجَز الطالبُ عن المسألة أم لم تبلغه.
 |
 | وصنفٌ خاصٌّ لا `.rs-opt`: تلك شريحةٌ تُضغط، مؤشّرُها يدٌ وترتفع
 | بالمرور ولها حالةُ `.is-on` وقناةُ لون — تَعِدُ بفعلٍ لا يقع، وتُكتب
 | في خمس شاشاتٍ أخرى فتنقلب كلُّها بتبديل قاعدتها. وهذه خبرٌ يُقرأ.
 */
.rs-paper__opts { display: grid; gap: .35rem; margin: .5rem 0 .7rem; }

.rs-paper__opt {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .75rem;
    border: 1px solid var(--rs-line); border-radius: 12px;
    background: var(--rs-surface); color: var(--rs-ink);
    font-size: .84rem; line-height: 1.7;
}

/* والحالُ مكتوبةٌ فلا يحملها اللونُ وحده: «الصواب» و«اختياره» لفظان
   يُقرآن في وضع التباين العالي وفي الطباعة بالأسود. */
.rs-paper__opt b {
    flex: 0 0 auto; font-size: .68rem; font-weight: 800;
    padding: .12rem .45rem; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 16%, transparent);
    color: var(--rs-ink-2);
}

.rs-paper__opt i {
    flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
    display: grid; place-items: center; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--rs-ink-3) 45%, transparent);
    font-style: normal; font-size: .6rem; font-weight: 800; color: var(--rs-surface);
}

.rs-paper__opt.is-right {
    border-color: var(--rs-ok);
    background: color-mix(in srgb, var(--rs-ok) 10%, var(--rs-surface));
}
.rs-paper__opt.is-right i { border-color: var(--rs-ok); background: var(--rs-ok); }
.rs-paper__opt.is-right b { background: color-mix(in srgb, var(--rs-ok) 18%, transparent); color: var(--rs-ok-fg); }

.rs-paper__opt.is-wrong {
    border-color: var(--rs-bad);
    background: color-mix(in srgb, var(--rs-bad) 10%, var(--rs-surface));
}
.rs-paper__opt.is-wrong i { border-color: var(--rs-bad); background: var(--rs-bad); }
.rs-paper__opt.is-wrong b { background: color-mix(in srgb, var(--rs-bad) 18%, transparent); color: var(--rs-bad-fg); }

/* ومقياسٌ لا صوابَ فيه يُنتظر: يُعلَّم اختيارُه ولا يُحكم عليه، فتلوينُه
   خطأً ظلمٌ لمن أجاب بصدق. */
.rs-paper__opt.is-pick {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 8%, var(--rs-surface));
}

/* والفراغُ يُقال صريحاً: بياضٌ تحت سؤالٍ يُقرأ سهواً في الكتابة. */
.rs-paper__ans--none { color: var(--rs-ink-3); font-style: italic; }

.rs-paper__sc { font-size: .76rem; font-weight: 700; color: var(--rs-ink-3); font-variant-numeric: tabular-nums; }

/* ── الخطة الشخصية ── */
.rs-plan { padding: .2rem 1.2rem 1.1rem; border-bottom: 1px solid var(--rs-line); background: var(--rs-soft); }
.rs-plan:last-child { border-bottom: 0; }

.rs-plan__none { margin: .9rem 0; font-size: .82rem; color: var(--rs-ink-3); }

.rs-plan__item {
    margin: .7rem 0; padding: .8rem .95rem;
    border: 1px solid var(--rs-line); border-inline-start-width: 3px; border-radius: 12px;
    background: var(--rs-surface);
}
.rs-plan__item--ok { border-inline-start-color: var(--rs-ok); }
.rs-plan__item--warn { border-inline-start-color: var(--rs-warn); }
.rs-plan__item--bad { border-inline-start-color: var(--rs-bad); }
.rs-plan__item--idle { border-inline-start-color: var(--rs-ink-3); }

.rs-plan__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.rs-plan__kind {
    flex: 0 0 auto; padding: .16rem .5rem; border-radius: 8px;
    background: color-mix(in srgb, var(--rs-teal) 11%, transparent);
    color: var(--rs-teal-fg); font-size: .7rem; font-weight: 700;
}
.rs-plan__title { font-size: .88rem; font-weight: 700; color: var(--rs-ink); }

.rs-plan__meta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .4rem; font-size: .73rem; color: var(--rs-ink-3); }

.rs-plan__note { margin-top: .5rem; font-size: .78rem; line-height: 1.8; color: var(--rs-ink-2); }
.rs-plan__note b { color: var(--rs-ink); }
.rs-plan__note--student {
    padding: .45rem .7rem; border-radius: 9px;
    background: color-mix(in srgb, var(--rs-gold) 12%, transparent);
}

.rs-plan__acts { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }

.rs-plan__form {
    margin-top: 1rem; padding: .9rem 1rem;
    border: 1px dashed var(--rs-line); border-radius: 14px; background: var(--rs-surface);
}
.rs-plan__formh { margin-bottom: .7rem; font-size: .8rem; font-weight: 800; color: var(--rs-teal-fg); }

.rs-plan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.rs-plan__wide { grid-column: span 2; }
.rs-plan__full { grid-column: 1 / -1; }

.rs-plan__grid label { display: block; min-width: 0; }
.rs-plan__grid span { display: block; margin-bottom: .25rem; font-size: .73rem; font-weight: 700; color: var(--rs-ink-2); }
.rs-plan__grid em { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 700; font-style: normal; color: var(--rs-bad-fg); }

.rs-plan__grid input,
.rs-plan__grid select,
.rs-plan__grid textarea {
    width: 100%; padding: .45rem .6rem;
    border: 1px solid var(--rs-line); border-radius: 10px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .84rem; line-height: 1.7;
}
.rs-plan__grid textarea { resize: vertical; }
.rs-plan__grid input:focus,
.rs-plan__grid select:focus,
.rs-plan__grid textarea:focus {
    outline: none; border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rs-plan__formf { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; }

.rs-btn--sm { padding: .38rem .8rem; font-size: .78rem; }

@media (max-width: 720px) {
    .rs-plan__grid { grid-template-columns: 1fr 1fr; }
    .rs-plan__wide { grid-column: 1 / -1; }
}

/*
 | وعمودٌ واحدٌ في الجوال.
 |
 | عمودان في ثلاثمئةٍ وخمسةٍ وسبعين بكسلاً يجعلان الحقلَ مئةً وستين:
 | حقلُ تاريخٍ لا يتّسع لتقويمه، وقائمةٌ منسدلةٌ يُقصّ نصُّ خيارها،
 | و«الإطار الزمني للخطة» يُلفّ على ثلاثة أسطر فوق حقله.
 */
@media (max-width: 520px) {
    .rs-plan__grid { grid-template-columns: 1fr; }
    .rs-plan__wide { grid-column: auto; }
}

/* وقدمُ النموذج تنكسر: ثلاثةُ أزرارٍ ومباعدةٌ لا تتّسع في صفٍّ واحد */
.rs-plan__formf { flex-wrap: wrap; row-gap: .5rem; }
.rs-rev__h { flex-wrap: wrap; row-gap: .5rem; }

/* ── شريط رمز الحضور ── */
.rs-scan {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .85rem 1.2rem; border-bottom: 1px solid var(--rs-line);
    background: color-mix(in srgb, var(--rs-teal) 5%, transparent);
}

.rs-scan__ic {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 10px;
    background: var(--rs-surface); color: var(--rs-teal-fg);
    border: 1px solid var(--rs-line);
}
.rs-scan__ic svg { width: 17px; height: 17px; }

.rs-scan input {
    flex: 1; min-width: 9rem; padding: .5rem .8rem;
    border: 1px solid var(--rs-line); border-radius: 10px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .95rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    direction: ltr; text-align: start;
}
.rs-scan input:focus {
    outline: none; border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rs-scan__hint { flex: 1 0 100%; font-size: .72rem; color: var(--rs-ink-3); }

/* ── تقرير الأثر ── */
.rs-range { display: flex; gap: .7rem; flex-wrap: wrap; padding: 1rem 1.2rem; }
.rs-range label { display: block; }
.rs-range span { display: block; margin-bottom: .25rem; font-size: .73rem; font-weight: 700; color: var(--rs-ink-2); }
.rs-range__wide { flex: 1; min-width: 12rem; }

.rs-range input,
.rs-range select {
    width: 100%; padding: .45rem .7rem;
    border: 1px solid var(--rs-line); border-radius: 10px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .85rem;
}
.rs-range input:focus,
.rs-range select:focus {
    outline: none; border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 14%, transparent);
}

.rs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.rs-share {
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem 1.2rem;
}
.rs-share__l { flex: 0 0 7rem; font-size: .8rem; font-weight: 600; color: var(--rs-ink); }
.rs-share .rs-track { flex: 1; margin: 0; }
.rs-share__n {
    flex: 0 0 2.6rem; text-align: end;
    font-size: .8rem; font-weight: 700; color: var(--rs-ink);
    font-variant-numeric: tabular-nums;
}

.rs-source {
    margin: .4rem 0 0; padding: 0 .2rem;
    font-size: .72rem; line-height: 1.9; color: var(--rs-ink-3);
}

@media print {
    /*
     | الورق أبيضٌ دائماً.
     |
     | الوضع الداكن يُفعَّل من نظام المستخدم لا باختياره، ولوحةُ ألوانه
     | تجعل --rs-ink شبه أبيض. والمتصفح لا يطبع الخلفيات، فتذهب
     | الخلفية الداكنة ويبقى النص الفاتح على الورق — صفحةٌ بيضاء
     | تُرسَل لداعم. فتُعاد اللوحة الفاتحة هنا مهما كانت الشاشة.
     */
    :root, .dark, [data-theme="dark"] {
        --rs-ink: #16211F;
        --rs-ink-2: #3D4F4B;
        --rs-ink-3: #5A6B67;
        --rs-surface: #FFFFFF;
        --rs-surface-2: #F5F8F7;
        --rs-line: #DCE6E3;
        --rs-bg: #FFFFFF;

        /*
         | وألوانُ الحال تتبع `.dark` كغيرها، فتُطبع قيمُ الليل على
         | ورقٍ أبيض. وما كان عارياً قبل التسمية كان يُطبع صحيحاً لأنه
         | لا ينقلب — فالتسميةُ هي التي أورثته الانقلاب، وهنا يُردّ.
         |
         | و`--rs-teal-fg` معها: لم يكن يُردّ أصلاً، فكلُّ نصٍّ أخضرَ
         | في صفحةٍ تُطبع من الوضع الداكن يخرج `#7FC3B9` على البياض.
         */
        --rs-ok: #0E7A45;   --rs-ok-fg: #0E7A45;
        --rs-warn: #A87708; --rs-warn-fg: #7A5518;
        --rs-bad: #B3261E;  --rs-bad-fg: #B3261E;
        --rs-teal-fg: #12524B;
    }

    body, .fi-body, .fi-main { background: #fff !important; color: #16211F !important; }

    /*
     | ولونٌ مكتوبٌ في style= لا يعرفه تجاوزُ المتغيّرات.
     |
     | بطاقات تقرير الأثر تحمل ألوانها في السمة نفسها (--kpi وقيمٌ
     | مباشرة)، فتبقى فاتحةً على الورق ولو أُعيدت اللوحة. والأرقام
     | هي المقصود من التقرير — فتُجبَر على الحبر الداكن.
     */
    .rs-kpi__val, .rs-kpi__lab, .rs-kpi__sub,
    .rs-coh__n, .rs-empty h4, .rs-empty p,
    .rs-hero__name, .rs-hero__hi,
    [style*="color:var(--ink)"], [style*="color: var(--ink)"] {
        color: #16211F !important;
    }

    .rs-pill, .rs-kpi, .rs-card, .rs-coh {
        background: #fff !important;
        border-color: #DCE6E3 !important;
    }

    .rs-noprint,
    .fi-sidebar, .fi-topbar, .fi-header { display: none !important; }
    .fi-main, .fi-page, .fi-main-ctn { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    .rs-card, .rs-kpi, .rs-hero { break-inside: avoid; box-shadow: none; }
    .rs-hero { color: #16211F !important; background: none !important; border: 1px solid var(--rs-line); }
    .rs-hero::after { display: none; }
    @page { size: A4; margin: 12mm; }
}

/* ══ بطاقة التشخيص ═══════════════════════════════════ */

.rs-diag {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--rs-line);
    border-radius: 12px;
    background: var(--rs-surface-2);
}

.rs-diag__h { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rs-diag__h b { font-size: .9rem; font-weight: 800; }
.rs-diag__when { font-size: .74rem; color: var(--rs-ink-3); }

.rs-diag__grid {
    display: grid;
    gap: .5rem .9rem;
    margin-top: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.rs-diag__cell span { display: block; font-size: .68rem; color: var(--rs-ink-3); }
.rs-diag__cell b { display: block; font-size: .82rem; font-weight: 700; }

.rs-diag__sum {
    margin: .7rem 0 0;
    font-size: .8rem;
    line-height: 1.85;
    color: var(--rs-ink-2);
}

/* ما تغيّر — التراجع يُقال تراجعاً */
.rs-diag__delta { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rs-diag__dl { font-size: .68rem; font-weight: 800; color: var(--rs-ink-3); }

.rs-diag__d {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .55rem; border-radius: 99px;
    font-size: .72rem; font-weight: 700;
}
.rs-diag__d i { font-style: normal; font-size: .66rem; }
.rs-diag__d.is-up { background: color-mix(in srgb, #0E7A45 12%, transparent); color: #0E7A45; }
/* وأرضُها تبقى مزيجاً: هي أرضٌ لا حِبر */
.rs-diag__d.is-down { background: color-mix(in srgb, #B3261E 12%, transparent); color: var(--rs-bad-fg); }

.rs-diag__hist { margin-top: .6rem; font-size: .7rem; color: var(--rs-ink-3); }

/* ── الملء ── */
/*
 | وعمودُ الشبكة لا يتمدّد بأعرض ما فيه.
 |
 | عنصرُ الشبكة أدنى عرضٍ له `auto`، أي أعرضُ ما لا يُكسَر في جوفه —
 | وفي البطاقة جدولُ أنشطةٍ خلاياه لا تُكسَر، فصار العمودُ ثمانمئةً
 | وأربعةً وعشرين بكسلاً في نافذةٍ عرضُها ثلاثمئةٌ وثمانية وثلاثون:
 | تمشي البطاقةُ كلُّها عرضاً في الجوال — أسئلتُها وخياراتُها —
 | ويخرج نصفُها خارج الشاشة. والجدولُ له مُمرِّرُه، فلا يُمدّ به غيرُه.
 */
.rs-diag__form { margin-top: .9rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.rs-diag__row, .rs-diag__plan, .rs-diag__brief { min-width: 0; }
.rs-diag__row label { display: block; font-size: .74rem; font-weight: 700; margin-bottom: .35rem; }
.rs-diag__row label b { color: var(--rs-bad-fg); }

.rs-diag__row textarea {
    width: 100%; padding: .5rem .7rem;
    border: 1px solid var(--rs-line); border-radius: 8px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .82rem; line-height: 1.8;
}

.rs-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
/* و`min(12rem, 100%)` لا `12rem`: الأصمُّ لا ينكمش، فحاويةٌ دون مئةٍ
   واثنين وتسعين بكسلاً يخرج منها المسارُ — والبطاقةُ صارت تحمل دائرةً
   تزيدها أربعاً وعشرين. والمئةُ في المئة سقفٌ يمنع ذلك أبداً. */
.rs-opts--wide { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); display: grid; }

/*
 | ── الشرائح: ترتفع ساكنةً، وتنغرز مختارة ──
 |
 | المشرفُ يجلس ساعةً ينقر اثنتين وأربعين إجابة، فالشريحةُ يجب أن
 | تُقرأ مضغوطةً بلا قراءة: ترتفع بحرفٍ فاتحٍ في أعلاها وظلٍّ رقيقٍ
 | تحتها، فإذا اختيرت انقلب الظلُّ إلى داخلها وانخفضت بمقدار شعرة.
 |
 | ولونُ نصِّها `--rs-teal-fg` لا `--rs-teal`: الثاني معرَّفٌ مرّةً ولا
 | ينقلب ليلاً، فكانت المختارةُ أسودَ على أسود.
 |
 | و`--kind` قناةٌ محليّة: قاعدةٌ واحدةٌ تخدم كلَّ الأصناف، ويُبدَّل
 | لونُها من فوقُ بسطر.
 */
.rs-opt {
    /*
     | والقناةُ الموروثةُ تُقرأ ولا تُحجب.
     |
     | كُتب هنا أوّلاً `--kind: var(--rs-teal)`، وهو إعلانٌ على الشريحة
     | نفسِها فيغلب ما ورثته من خانة السؤال — فبقيت الشرائحُ كلُّها
     | بلونٍ واحدٍ وإن اختلفت أصنافُها. فاسمُ ما يُورَّث غيرُ اسم ما
     | يُقرأ، والافتراضُ في الاستدعاء لا في إعلانٍ يحجب.
     */
    --kind: var(--q-kind, var(--rs-teal));
    --kind-fg: var(--q-kind-fg, var(--rs-teal-fg));

    position: relative;
    padding: .35rem .75rem;
    border-radius: 99px;
    border: 1px solid var(--rs-line);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--rs-ink) 3%, var(--rs-surface)) 0%,
            var(--rs-surface) 42%);
    color: var(--rs-ink-2);
    font: inherit; font-size: .78rem; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 1px 1.5px rgba(12, 40, 36, .07);
    transition: border-color .14s, color .14s, background .14s, box-shadow .14s, transform .14s;
}

.dark .rs-opt {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #FFFFFF 5%, var(--rs-surface)) 0%,
            var(--rs-surface) 42%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 1px 2px rgba(0, 0, 0, .45);
}

.rs-opt:hover {
    border-color: var(--kind);
    color: var(--kind-fg);
    transform: translateY(-1px);
    box-shadow: var(--rs-shadow-2);
}

.rs-opt.is-on {
    border-color: var(--kind);
    background: color-mix(in srgb, var(--kind) 12%, var(--rs-surface));
    color: var(--kind-fg);
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--kind) 26%, transparent);
}

/* والمضغوطةُ لا ترتفع بالمرور: الضغطُ حالٌ لا لمسة */
.rs-opt.is-on:hover { transform: translateY(1px); }

.rs-opt:focus-visible {
    outline: none;
    box-shadow: var(--rs-ring), inset 0 2px 4px color-mix(in srgb, var(--kind) 20%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .rs-opt { transition: border-color .14s, color .14s; }
    .rs-opt:hover, .rs-opt.is-on { transform: none; }
}

.rs-opt--check { display: inline-flex; align-items: center; gap: .35rem; }
/* و`--rs-teal` لا ينقلب: مربّعُ «التوجه العلمي» ومربّعاتُ الاستنساخ
   تُملأ ليلاً بلونٍ داكنٍ على أرضٍ داكنة — واحدٌ وخُمسان إلى واحد، فلا
   يُعرف المؤشَّرُ من غيره. و`--kind-fg` ينقلب، وهو رمزُ الشريحة نفسِها. */
.rs-opt--check input { accent-color: var(--kind-fg); }

/*
 | ── الشريحةُ الطويلة: دائرةُ اختيارٍ تُقرأ بالشكل ──
 |
 | «نمط الدعم» و«بوابة القرار» أخطرُ اختيارين في المنتج، ولم يكن بين
 | المختارِ وغيرِه إلا ثلاثُ قنواتِ لون: حافّةٌ، وصبغةٌ اثنا عشرَ في
 | المئة، وحِبر. واثنا عشرَ في المئة من لونٍ على أرضه فرقُ إضاءةٍ دون
 | خمسة: يضيع في شمس الظهيرة، وعلى من لا يفرّق الألوان، وفي الورق حيث
 | تُلغى الأرضيّات. ومن لا يفرّق الأخضرَ من الرماد يفرّق المملوءَ من
 | الفارغ.
 */
.rs-opt--tall {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .55rem;
    align-items: start;
    text-align: start;
    border-radius: 10px;
    padding: .5rem .8rem;
}

/* والدائرةُ عمودٌ يمتدّ على سطرَي العنوان والوصف: لولا `grid-row`
   لانكسرت البطاقةُ ثلاثةَ عناصرَ في عمودين. و`box-sizing` مكتوبٌ هنا لا
   موروثٌ: عليه يقوم حسابُ الثقب وثباتُ القُطر. */
.rs-opt--tall::before {
    content: "";
    box-sizing: border-box;
    grid-row: 1 / span 2;
    align-self: center;
    width: .95rem; height: .95rem;
    /* ولا تُمزج الحافّةُ بالأرض: المزيجُ اثنان ونصفٌ إلى واحد، وهو دون
       الثلاثة التي تُرى بها حدودُ مِقوَدٍ يُضغط. والحدُّ هنا هو الشيءُ
       الوحيدُ الذي يقول «لم يُختَر». */
    border: 1.5px solid var(--rs-ink-3);
    border-radius: 50%;
    background: var(--rs-surface);
}

.rs-opt--tall b { grid-column: 2; display: block; font-size: .82rem; }
.rs-opt--tall span {
    grid-column: 2; display: block;
    font-size: .7rem; font-weight: 500; opacity: .78; margin-top: .1rem;
}

/* والمختارُ حدُّه ضعفان ودائرتُه مملوءة، والحشوةُ تنقص بقدر ما ثخن
   الحدُّ فلا يقفز ما تحت الشريحة عند الاختيار. */
.rs-opt--tall.is-on {
    border-width: 2px;
    padding: calc(.5rem - 1px) calc(.8rem - 1px);
}
.rs-opt--tall.is-on::before {
    border-width: .3rem;
    border-color: var(--kind-fg);
}

.rs-diag__acts { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rs-diag__note { font-size: .7rem; color: var(--rs-ink-3); }

.rs-err { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 700; color: var(--rs-bad-fg); }

/* ══ لقاءات المتابعة ═════════════════════════════════ */

.rs-mtg { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-surface-2); }
.rs-mtg__none { margin: .6rem 0 0; font-size: .78rem; color: var(--rs-ink-3); line-height: 1.9; }
.rs-mtg__list { margin-top: .7rem; display: grid; gap: .35rem; }

.rs-mtg__row {
    display: flex; align-items: center; gap: .7rem;
    padding: .45rem .7rem; border-radius: 9px;
    background: var(--rs-surface);
    border-inline-start: 3px solid var(--rs-line);
}
.rs-mtg__row.is-ok   { border-inline-start-color: var(--rs-ok); }
.rs-mtg__row.is-warn { border-inline-start-color: var(--rs-warn); }
.rs-mtg__row.is-bad  { border-inline-start-color: var(--rs-bad); }
/* والأخضرُ الداكنُ حافّةً على أرض الليل ثلاثةٌ من أربعةٍ إلى واحد — لا يُرى */
.rs-mtg__row.is-info { border-inline-start-color: var(--rs-teal-fg); }
/* و«الهادئة» كانت ترث لونَ الخطوط فتستوي بالصفِّ الذي لا حالَ له */
.rs-mtg__row.is-idle { border-inline-start-color: color-mix(in srgb, var(--rs-ink-3) 55%, transparent); }

/*
 | وموعدُ اللقاء سطرٌ لا عمود.
 |
 | كان التاريخُ فوق يومه في عمودٍ عرضُه ثلاثُ خاناتٍ ونصف، وإلى جانبه
 | فراغُ الصفّ كلِّه — فينزل الصفُّ ثلاثةَ أسطرٍ ليقول ما يسعه سطر.
 */
.rs-mtg__d {
    flex: 0 0 auto;
    display: flex; align-items: baseline; gap: .4rem;
    font-variant-numeric: tabular-nums;
}
.rs-mtg__d b { font-size: .82rem; font-weight: 800; white-space: nowrap; }
.rs-mtg__d i { font-size: .72rem; font-style: normal; color: var(--rs-ink-3); white-space: nowrap; }

/* والساعةُ قرصٌ صغير: هي ما يُسأل عنه بعد اليوم، ولا تُقرأ في الرمادي */
.rs-mtg__d em {
    padding: .05rem .38rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--rs-teal) 12%, transparent);
    color: var(--rs-teal-fg);
    font-size: .7rem; font-weight: 800; font-style: normal;
    white-space: nowrap;
}

/*
 | وخبرُ اللقاء سطرٌ لا عمود.
 |
 | كان النوعُ كتلةً وخبرُه كتلةً تحته، فيعلو الصفُّ سطرين ويبقى إلى
 | جانبهما فراغُ الصفّ كلِّه. وهما الآن سطرٌ واحدٌ يفصل بينهما خطٌّ
 | شعريّ.
 |
 | و`nowrap` لا `wrap`: لو انكسر السطرُ بقي الحدُّ الفاصلُ في أوّل
 | السطر الثاني يفصل بين لا شيءٍ ولا شيء. و`min-width: 0` يُنزل أضيقَ
 | ما يبلغه الصندوقُ إلى صفر، فلا يوسّع الصفَّ أبداً.
 */
.rs-mtg__b {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; flex-wrap: nowrap;
    gap: .55rem;
}
.rs-mtg__t { flex: 0 0 auto; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.rs-mtg__s {
    flex: 0 1 auto; min-width: 0;
    font-size: .72rem; color: var(--rs-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* والفاصلُ خطٌّ لا نقطة: يُرسم بالجوار فلا يبقى إذا غاب ما بعده */
.rs-mtg__t + .rs-mtg__s,
.rs-mtg__s + .rs-mtg__s {
    padding-inline-start: .55rem;
    border-inline-start: 1px solid var(--rs-line);
}

.rs-mtg__s--late { color: var(--rs-bad-fg); font-weight: 700; }

/*
 | ونموذجُ «موعدٌ جديد» صندوقٌ منقّط: حقولٌ في صفّ، وما لا يُصفّ سطرٌ
 | تحتها بعرضه. وكانت القاعدتان يتيمتين لا تكتبهما شاشة.
 */
.rs-mtg__form {
    display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
    margin: .2rem 0 .7rem; padding: .8rem 1rem;
    border: 1px dashed var(--rs-line); border-radius: 10px;
    background: color-mix(in srgb, var(--rs-ink-3) 4%, transparent);
}
.rs-mtg__pp { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--rs-ink-3); line-height: 1.9; }

/* وسطرٌ يستقلّ بعرضه: السؤالُ وشرائحُه لا يقفان في صفِّ الحقول */
.rs-mtg__wide { flex: 1 1 100%; min-width: 0; margin: 0; }

/* وعنوانُ السؤال فوق شرائحه: شريحتان بلا اسمٍ يُخمَّن ما تضبطان */
.rs-mtg__q {
    display: block; margin-bottom: .25rem;
    font-size: .73rem; font-weight: 700; color: var(--rs-ink-2);
}

/* وكشفُ المدعوّين يطول: يُمرَّر في نفسه ولا يمدّ النافذة */
.rs-mtg__who { flex: 1 1 100%; min-width: 0; max-height: 14rem; overflow-x: hidden; overflow-y: auto; }
.rs-mtg__who .rs-opt i { font-size: .66rem; color: var(--rs-ink-3); font-style: normal; }

.rs-in-n {
    padding: .35rem .6rem; border: 1px solid var(--rs-line); border-radius: 8px;
    background: var(--rs-surface); color: var(--rs-ink); font: inherit; font-size: .8rem;
}

/* ══ الإنهاء والانتقال ═══════════════════════════════ */

.rs-exit { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--rs-line); border-radius: 12px; background: var(--rs-surface-2); }
.rs-exit__log { display: grid; gap: .3rem; }
.rs-exit__l { padding: .35rem .6rem; border-radius: 8px; background: var(--rs-surface); font-size: .75rem; line-height: 1.8; }
.rs-exit__l b { font-weight: 800; margin-inline-end: .4rem; }
.rs-exit__l i { display: block; font-style: normal; font-size: .7rem; color: var(--rs-ink-3); }

/* بنك المهام */
.rs-plan__bank { margin: .6rem 0 .8rem; display: grid; gap: .35rem; }
.rs-plan__bank .rs-opt i { font-style: normal; font-size: .64rem; opacity: .65; }
.rs-plan__hint { font-style: normal; font-weight: 500; font-size: .68rem; color: var(--rs-ink-3); }

/* ══ طلبات الطلاب ══════════════════════════════════════
   ما يرفعه الطالب من تحضيرٍ واستئذانٍ وتذكرةِ دعم — وكانت تُرفع في
   واتساب مشرفٍ أو اثنين فتضيع بين الرسائل. */
.rq-said {
    margin: 0 0 .45rem;
    font-size: .85rem;
    color: var(--rs-ink-2);
    line-height: 1.85;
    white-space: pre-line;
}
.rq-said:last-child { margin-bottom: 0; }
.rq-said b { color: var(--rs-ink); font-weight: 700; }
.rq-said.is-mute { color: var(--rs-ink-3); font-style: italic; }

.rq-said.is-reply {
    margin-top: .7rem;
    padding: .6rem .8rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--rs-teal) 7%, transparent);
    color: var(--rs-ink-2);
}
.rq-said.is-reply span { font-weight: 800; color: var(--rs-teal-fg); }

.rq-quick span.is-ok { background: rgba(14, 122, 69, .14); color: #0E7A45; border-color: transparent; }
.rq-quick span.is-no { background: rgba(179, 38, 30, .12); color: #B3261E; border-color: transparent; }

/* ── محادثةُ التذكرة ──
   كان للتذكرة حقلان: ما كتبه الطالبُ مرّةً وما رُدّ به مرّة، ثم تُقفل.
   فمن لم يفهم الشكوى لم يستطع أن يسأل عنها — يقبلها أو يرفضها وهو لا
   يدري ما هي. */
.rq-msg {
    margin-top: .55rem;
    padding: .55rem .75rem;
    border-radius: 11px;
    border: 1px solid var(--rs-line);
    background: var(--rs-surface);
    max-width: 92%;
}
.rq-msg.is-them { margin-inline-end: auto; }
.rq-msg.is-us {
    margin-inline-start: auto;
    background: color-mix(in srgb, var(--rs-teal) 7%, transparent);
    border-color: color-mix(in srgb, var(--rs-teal) 20%, transparent);
}

.rq-msg__h {
    display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
    font-size: .68rem; color: var(--rs-ink-3);
}
.rq-msg__h b { font-size: .73rem; color: var(--rs-ink-2); font-weight: 700; }

.rq-msg p {
    margin: .25rem 0 0;
    font-size: .83rem; color: var(--rs-ink); line-height: 1.85;
    white-space: pre-line; overflow-wrap: anywhere;
}

/* والمرفقاتُ تُفتح في تبويبها — لا تُحمَّل في مكانها */
.rq-files { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }

.rq-file {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .5rem; border-radius: 9px;
    border: 1px solid var(--rs-line); background: var(--rs-surface);
    font-size: .71rem; font-weight: 700; color: var(--rs-ink-2);
    max-width: 100%; text-decoration: none;
}
.rq-file:hover { border-color: var(--rs-teal); color: var(--rs-teal-fg); }
.rq-file__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-file--img { padding: 0; overflow: hidden; }
.rq-file--img img { display: block; width: 84px; height: 84px; object-fit: cover; }

/* ══ أيقوناتُ الشريط — لا قائمةٌ تُفتح لتُغلق ══════════════
   السمةُ والحسابُ والخروجُ كانت خلف صورة الحساب: ثلاثُ ضغطاتٍ
   لتبديل الوضع، وعلى الجوّال قائمةٌ تغطّي الشاشة لأجل سطرين. */
.rs-acts { display: flex; align-items: center; gap: .25rem; }

.rs-act-form { display: flex; margin: 0; }

.rs-act {
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border: 0; padding: 0; background: none;
    border-radius: 10px;
    color: var(--rs-ink-2, #5B6B69);
    cursor: pointer;
    transition: background .14s, color .14s;
}
.rs-act:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--rs-teal, #12524B); }
.rs-act:focus-visible { outline: 2px solid var(--rs-teal, #12524B); outline-offset: 2px; }
.rs-act svg { width: 1.2rem; height: 1.2rem; }
.rs-act--out:hover { color: #B3261E; }

/* وما نُقل إلى الشريط لا يُكرَّر في القائمة */
.fi-user-menu .fi-theme-switcher { display: none !important; }

/* والقائمةُ تبقى لبقيّة بنودها؛ فإن خلَت فلا داعيَ لزرّها */
@media (max-width: 1023px) {
    /* خانةُ البحث تُصغَّر لتتّسع الأيقونات إلى جانبها */
    .fi-topbar .fi-global-search-field { max-width: 9.5rem; }
    .fi-topbar .fi-global-search-field input { font-size: .8rem; }

    /* ولا كلماتٍ مع الأيقونات: اسمُ الحساب يُقرأ في صفحته */
    .fi-user-menu .fi-dropdown-trigger > span,
    .fi-user-menu .fi-dropdown-trigger .fi-user-menu-label { display: none !important; }
}

/*
 | «بنفسه» — وسمُ من حضّر نفسه بجواله.
 |
 | الرصدُ بيد المشرف شهادةٌ منه أنه رآه، والرصدُ بيد الطالب دعوى.
 | وكانا يُكتبان سواءً في الكشف، فلا يدري المشرفُ أيَّهما شهد عليه
 | بنفسه ولا على أيِّهما يسأل. ووسمٌ مكتوبٌ لا لونٌ وحده.
 */
.rs-self {
    display: inline-block;
    margin-inline-start: .3rem;
    padding: .05rem .34rem;
    border-radius: 5px;
    font-size: .72rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--rs-teal, #12524B);
    background: color-mix(in srgb, var(--rs-teal, #12524B) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--rs-teal, #12524B) 26%, transparent);
    vertical-align: middle;
}

.dark .rs-self {
    color: color-mix(in srgb, var(--rs-teal, #12524B) 45%, #FFFFFF);
    background: color-mix(in srgb, #FFFFFF 10%, transparent);
    border-color: color-mix(in srgb, #FFFFFF 22%, transparent);
}

/* ══ بطاقةُ بيانات الطالب ═══════════════════════════════
   كانت تُفتح في طابور الطلبات وحده: من أراد جوّالَ طالبٍ قُبل من
   شهرٍ عاد يبحث عن طلبه فيه. */
.rs-facts { font-size: .86rem; }

.rs-facts__g {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.rs-facts__f {
    min-width: 0;
    padding: .5rem .65rem;
    border: 1px solid var(--rs-line);
    border-radius: 11px;
    background: var(--rs-surface);
}
.rs-facts__f span { display: block; font-size: .68rem; color: var(--rs-ink-3); }
.rs-facts__f b { display: block; font-weight: 700; color: var(--rs-ink); overflow-wrap: anywhere; }

.rs-facts__h {
    margin: 1rem 0 .5rem;
    font-size: .8rem; font-weight: 800; color: var(--rs-ink-2);
}

.rs-facts__qa {
    padding: .5rem .65rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--rs-teal) 45%, transparent);
    background: color-mix(in srgb, var(--rs-teal) 5%, transparent);
    border-radius: 0 11px 11px 0;
}
.rs-facts__qa + .rs-facts__qa { margin-top: .4rem; }
.rs-facts__qa span { display: block; font-size: .7rem; color: var(--rs-ink-3); }
.rs-facts__qa b { font-weight: 700; color: var(--rs-ink); overflow-wrap: anywhere; }

.rs-facts__none { margin: 0; color: var(--rs-ink-3); }

/* ══ كشفُ الجلسات ═══════════════════════════════════════
   كان السطرُ يحمل رقماً واحداً — مجموعَ من رُصد — يقول «عشرون» ولا
   يقول من العشرون، ولا يفرّق بين من حضر ومن غاب، ولا يذكر من أكّد
   حضوره ومن اعتذر قبل الموعد. وعليها تُدبَّر الكراسي والحافلة. */
.rs-sess { border-bottom: 1px solid var(--rs-line); }
.rs-sess.is-on { background: var(--rs-soft); }

.rs-sess__h {
    display: flex; align-items: center; gap: .7rem;
    width: 100%; padding: .7rem .9rem;
    border: 0; background: none; text-align: start;
    font: inherit; color: inherit; cursor: pointer;
}
.rs-sess__h:hover { background: color-mix(in srgb, var(--rs-teal) 4%, transparent); }
.rs-sess__h:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: -2px; }

/* ── الأرقامُ الأربعة: كلٌّ يُضغط فتنفتح أسماؤه ── */
.rs-sess__n {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: 0 .9rem .7rem;
}

.rs-num {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .55rem;
    border: 1px solid var(--rs-line);
    border-radius: 99px;
    background: var(--rs-surface);
    font: inherit; font-size: .72rem; color: var(--rs-ink-2);
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.rs-num svg { width: .85rem; height: .85rem; flex: 0 0 auto; }
.rs-num b { font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-num span { font-weight: 600; }

.rs-num:hover:not(:disabled) { border-color: currentColor; }
.rs-num:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: 2px; }
.rs-num:disabled { opacity: .45; cursor: default; }

.rs-num--ok   { color: #0E7A45; }
.rs-num--bad  { color: #B3261E; }
.rs-num--mute { color: var(--rs-ink-3); }

.rs-num.is-on {
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-color: currentColor;
}

/* ── الأسماءُ تحتها ── */
.rs-sess__l {
    display: flex; flex-wrap: wrap; gap: .3rem;
    padding: 0 .9rem .8rem;
}

.rs-name {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .55rem;
    border-radius: 9px;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    font-size: .74rem; color: var(--rs-ink);
}
/* والمتأخّرُ ومن اعتذر قبلُ يُكتبان — لا يُلوّنان وحسب */
.rs-name i {
    font-style: normal; font-size: .64rem; font-weight: 700;
    color: #8A5410;
    background: rgba(200, 138, 10, .14);
    padding: 0 .3rem; border-radius: 5px;
}

.rs-sess__none { font-size: .76rem; color: var(--rs-ink-3); }

.dark .rs-num--ok { color: #48C68C; }
.dark .rs-num--bad { color: #F08A8D; }
.dark .rs-name i { color: #E0B54A; background: rgba(200, 138, 10, .18); }

/* ══ صفحةُ الإشعارات ════════════════════════════════════
   ما يريد المديرُ قولَه لطلابه كان يذهب في مجموعةٍ على واتساب: يصل
   من انضمّ إليها، ويضيع بين الرسائل، ولا يُعرف من قرأه. */
.rs-note { display: flex; flex-direction: column; gap: .85rem; padding: 1rem 1.1rem 1.2rem; }

.rs-note__f { display: block; }
.rs-note__f > span {
    display: block; margin-bottom: .3rem;
    font-size: .75rem; font-weight: 800; color: var(--rs-ink-2);
}

.rs-note__hint {
    margin: 0; padding: .55rem .7rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--rs-teal) 6%, transparent);
    font-size: .78rem; color: var(--rs-ink-2);
}

/* ── نوعُ الإشعار: لونٌ ومعه كلمتُه ورمزُه ── */
.rs-kinds { display: flex; flex-wrap: wrap; gap: .35rem; }

.rs-kind input { position: absolute; opacity: 0; pointer-events: none; }
.rs-kind > span {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .34rem .7rem;
    border: 1px solid var(--rs-line);
    border-radius: 99px;
    font-size: .78rem; font-weight: 700; color: var(--rs-ink-2);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.rs-kind > span i { font-style: normal; }
.rs-kind:hover > span { border-color: currentColor; }
.rs-kind input:focus-visible + span { outline: 2px solid var(--rs-teal); outline-offset: 2px; }

.rs-kind.is-on > span {
    border-color: var(--k, var(--rs-teal));
    background: color-mix(in srgb, var(--k, var(--rs-teal)) 13%, transparent);
    color: var(--k, var(--rs-teal));
}

.rs-kind--general  { --k: #4A5B57; }
.rs-kind--announce { --k: #1D4E89; }
.rs-kind--alert    { --k: #8A5410; }
.rs-kind--warn     { --k: #B3261E; }
.rs-kind--praise   { --k: #0E7A45; }

.dark .rs-kind--general  { --k: #9DB0AB; }
.dark .rs-kind--announce { --k: #77AEEA; }
.dark .rs-kind--alert    { --k: #E0B45E; }
.dark .rs-kind--warn     { --k: #F08A8D; }
.dark .rs-kind--praise   { --k: #48C68C; }

/* ── وعددُ من يصله يُقرأ قبل الإرسال لا بعده ── */
.rs-note__go {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding-top: .3rem;
    border-top: 1px solid var(--rs-line);
}
.rs-note__reach { flex: 1; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--rs-ink-2); }

/* ── ولمحةٌ مما سيصله قبل أن يُرسَل ── */
.rs-note__peek {
    margin: .8rem 0;
    padding: .7rem .85rem;
    border-radius: 12px;
    border-inline-start: 4px solid var(--k, var(--rs-teal));
    background: color-mix(in srgb, var(--k, var(--rs-teal)) 8%, transparent);
    text-align: start;
}
.rs-note__peek b { display: block; color: var(--rs-ink); font-weight: 800; }
.rs-note__peek span { display: block; margin-top: .25rem; font-size: .82rem; color: var(--rs-ink-2); white-space: pre-line; }

/* ── جهةُ الإرسال: بطاقةٌ لكل باب ──────────────────────
   القائمةُ المنسدلة أداةُ إدخالٍ لا أداةُ قرار: تُخفي خياراتِها حتى
   تُفتح، وتعرض الواحدَ منها سطراً عارياً بخطّ النظام لا يقول كم
   يبلغ. وهذا قرارٌ يُبنى عليه ما يصل الناسَ في جرسهم. */
.rs-aud {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.rs-aud__i {
    display: flex; align-items: center; gap: .65rem;
    width: 100%;
    /* والهدفُ يُلمس بالإصبع: أربعةٌ وأربعون بكسلاً حدُّ ما يُصاب في جوّال */
    min-height: 3.1rem;
    padding: .6rem .75rem;
    border: 1px solid var(--rs-line);
    border-radius: 13px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit; text-align: start;
    cursor: pointer;
    transition: border-color .14s, background .14s, box-shadow .14s;
}
.rs-aud__i:hover { border-color: var(--rs-teal); background: var(--rs-soft); }
.rs-aud__i:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: 2px; }
.rs-aud__i b { display: block; font-size: .85rem; font-weight: 800; line-height: 1.45; }
.rs-aud__i small { display: block; font-size: .72rem; color: var(--rs-ink-3); }

.rs-aud__g {
    flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--rs-ink-3) 13%, transparent);
    color: var(--rs-ink-2);
}
.rs-aud__g svg { width: 1.15rem; height: 1.15rem; }

/* وحالُ الاختيار تُرى بغير اللون وحده: علامةٌ تظهر وحدٌّ يثخن */
.rs-aud__tick {
    flex: 0 0 auto;
    width: 1.15rem; height: 1.15rem;
    color: var(--rs-teal-fg);
    opacity: 0; transform: scale(.6);
    transition: opacity .14s, transform .14s cubic-bezier(.34, 1.5, .64, 1);
}
.rs-aud__tick svg { width: 100%; height: 100%; display: block; }

.rs-aud__i.is-on {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 8%, var(--rs-surface));
    box-shadow: inset 0 0 0 1px var(--rs-teal);
}
.rs-aud__i.is-on .rs-aud__g { background: var(--rs-teal); color: #fff; }
.rs-aud__i.is-on .rs-aud__tick { opacity: 1; transform: none; }
.rs-aud__i.is-on small { color: var(--rs-teal-fg); font-weight: 700; }

/* ── الخيارُ الثاني: برنامجٌ أو فئةٌ أو حلقة ──────────────
   والعددُ مع الخيار لا بعده: من يختار حلقةً يريد أن يعرف كم فيها
   قبل أن يفتحها، لا أن يجرّبها واحدةً واحدة ليقرأ «لا أحد». */
.rs-pick {
    display: grid; gap: .3rem;
    max-height: 17rem; overflow-x: hidden; overflow-y: auto;
    padding: .3rem;
    border: 1px solid var(--rs-line);
    border-radius: 13px;
    background: var(--rs-surface-2);
}

.rs-pick__i {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; min-height: 2.9rem;
    padding: .5rem .7rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit; text-align: start;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.rs-pick__i:hover { border-color: var(--rs-teal); }
.rs-pick__i:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: -1px; }
.rs-pick__i b { display: block; font-size: .83rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.rs-pick__i small { display: block; font-size: .71rem; color: var(--rs-ink-3); overflow-wrap: anywhere; }

.rs-pick__n {
    flex: 0 0 auto;
    padding: .18rem .55rem; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-teal) 10%, transparent);
    color: var(--rs-teal-fg);
    font-size: .7rem; font-weight: 800; white-space: nowrap;
}

/* والخالي يُعرض خالياً لا يُخفى: من لا يجده يظنّه لم يُنشأ */
.rs-pick__i.is-none .rs-pick__n {
    background: color-mix(in srgb, var(--rs-ink-3) 14%, transparent);
    color: var(--rs-ink-3);
}
.rs-pick__i.is-none b { color: var(--rs-ink-2); }

.rs-pick__i.is-on {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 9%, var(--rs-surface));
}
.rs-pick__i.is-on .rs-pick__n { background: var(--rs-teal); color: #fff; }

/* ── الطالبُ بعينه ────────────────────────────────────
   كان `<select size="6">`: سطورٌ عاريةٌ بخطّ النظام، لا وجهَ فيها ولا
   جوّالَ ولا حلقة — ومن بحث عن «محمد» وجد سبعةً بالاسم نفسه لا يفرّق
   بينهم شيء، فيُرسل الخبرَ إلى غير صاحبه ولا يعلم. */
.rs-seek {
    display: flex; align-items: center; gap: .5rem;
    padding: .1rem .7rem;
    border: 1px solid var(--rs-line);
    border-radius: 11px;
    background: var(--rs-surface);
    transition: border-color .14s, box-shadow .14s;
}
.rs-seek:focus-within {
    border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 16%, transparent);
}
.rs-seek__i { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--rs-ink-3); }
.rs-seek__i svg { width: 100%; height: 100%; display: block; }

.rs-seek__q {
    flex: 1; min-width: 0;
    padding: .55rem 0;
    border: 0; background: none; color: var(--rs-ink);
    font: inherit; font-size: .85rem;
}
.rs-seek__q:focus { outline: none; }
.rs-seek__q::-webkit-search-cancel-button { cursor: pointer; }

.rs-found {
    display: grid; gap: .25rem;
    margin-top: .45rem;
    max-height: 18rem; overflow-x: hidden; overflow-y: auto;
    padding: .3rem;
    border: 1px solid var(--rs-line);
    border-radius: 13px;
    background: var(--rs-surface-2);
}

.rs-found__i,
.rs-who {
    display: flex; align-items: center; gap: .6rem;
    width: 100%; min-height: 3rem;
    padding: .45rem .6rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit; text-align: start;
}
.rs-found__i { cursor: pointer; transition: border-color .14s, background .14s; }
.rs-found__i:hover { border-color: var(--rs-teal); background: color-mix(in srgb, var(--rs-teal) 6%, var(--rs-surface)); }
.rs-found__i:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: -1px; }

.rs-found__i b, .rs-who b { display: block; font-size: .84rem; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.rs-found__i small, .rs-who small { display: block; font-size: .71rem; color: var(--rs-ink-3); overflow-wrap: anywhere; }

.rs-who {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 8%, var(--rs-surface));
    flex-wrap: wrap;
}

.rs-who__av {
    flex: 0 0 auto;
    width: 2.1rem; height: 2.1rem; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--rs-teal) 12%, transparent);
    color: var(--rs-teal-fg);
    font-size: .9rem; font-weight: 800;
}

/* والجوّالُ يُقرأ من يساره: رقمٌ لاتينيُّ الاتجاه في سطرٍ عربي تنقلب
   خانتُه الأخيرة إلى أوّله فيُقرأ مقلوباً ويُكتب مقلوباً. */
.rs-who__p {
    flex: 0 0 auto;
    font-size: .74rem; color: var(--rs-ink-2);
    font-variant-numeric: tabular-nums;
}

.rs-found__none {
    margin: 0; padding: 1.1rem .8rem;
    text-align: center;
    font-size: .78rem; color: var(--rs-ink-3);
}

@media (max-width: 480px) {
    .rs-aud { grid-template-columns: 1fr; }
    .rs-who__p { display: none; }
}

/* ── العمودُ الملصق بالحافة ──────────────────────────
   جدولُ «الكل» أربعةٌ وعشرون عموداً، ومع أوّل جرّةٍ أفقية يغيب اسمُ
   الطالب عن يمين الشاشة — فيقرأ المشرفُ جوّالاً ومدينةً وتاريخَ ميلادٍ
   لا يدري لمن هي، ويرجع بالشريط ليرى الاسم ثم يعود فينسى.

   والصفحةُ عربيةٌ من اليمين، فالإلصاقُ منطقيٌّ لا يُكتب `left` ولا
   `right`: `inset-inline-start` تُصيب اليمينَ هنا واليسارَ في لسانٍ
   آخر بلا قاعدتين. */
.rs-stick {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: var(--rs-surface);
}

/* وحدٌّ يفصله عمّا يمرّ تحته، وإلا اختلط النصّان عند الجرّ */
.rs-stick::after {
    content: '';
    position: absolute; inset-block: 0;
    inset-inline-end: 0; width: 1px;
    background: var(--rs-line);
}

/* والصفُّ المخطَّط أرضُه غيرُ أرض السطح، فيتبعها العمودُ الملصق
   وإلا ظهر شريطٌ أبيضُ يمشي على الصفوف المظلَّلة */
.fi-ta-row:hover .rs-stick { background: var(--rs-soft); }
.fi-ta-row:nth-child(even) .rs-stick { background: var(--rs-surface-2); }
.fi-ta-row:nth-child(even):hover .rs-stick { background: var(--rs-soft); }

/* ورأسُ الجدول فوق الجميع: الملصقُ يمرّ تحته عند التمرير الرأسي */
th.rs-stick { z-index: 3; background: var(--rs-surface-2); }

/* ── رمزُ حضورِ النشاط ────────────────────────────────
   يُعرض على شاشة القاعة أو يُطبع، فيمسحه الطلاب. والأبيضُ تحته
   مقصود: الرمزُ يُقرأ بتباينٍ عالٍ، وأرضٌ داكنةٌ في النمط الليلي
   تُفشل المسحَ في إضاءةٍ خافتة. */
.rs-qr { text-align: center; }

.rs-qr__art {
    display: inline-block;
    padding: .9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--rs-line);
}
.rs-qr__art img { display: block; width: 14rem; height: 14rem; }

.rs-qr__of { margin: .9rem 0 0; }
.rs-qr__of b { display: block; font-size: .95rem; font-weight: 800; color: var(--rs-ink); }
.rs-qr__of span { display: block; margin-top: .15rem; font-size: .76rem; color: var(--rs-ink-3); }

.rs-qr__link {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    justify-content: center;
    margin-top: .9rem; padding: .5rem .6rem;
    border: 1px solid var(--rs-line); border-radius: 11px;
    background: var(--rs-surface-2);
}
.rs-qr__link code {
    flex: 1; min-width: 0;
    font-size: .72rem; color: var(--rs-ink-2);
    overflow-wrap: anywhere; text-align: start;
}

.rs-qr__acts {
    display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap;
    margin-top: .8rem;
}
.rs-qr__acts svg { width: .95rem; height: .95rem; flex: 0 0 auto; }
.rs-qr__acts .rs-btn { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }

.rs-qr__why {
    margin: .9rem 0 0;
    padding: .6rem .75rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--rs-teal) 7%, transparent);
    font-size: .76rem; line-height: 1.85; color: var(--rs-ink-2); text-align: start;
}
.rs-qr__why b { color: var(--rs-ink); }

@media print {
    /* وما يُطبع هو الرمزُ واسمُه — لا شرحُه ولا رابطُه */
    .rs-qr__link, .rs-qr__why, .rs-qr__acts { display: none; }
    .rs-qr__art img { width: 18rem; height: 18rem; }
}

/* حقلُ إدخالٍ في صفحاتِ اللوحة المخصّصة — لا يملكها فيلامنت */
.rs-in {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--rs-line);
    border-radius: 11px;
    background: var(--rs-surface);
    color: var(--rs-ink);
    font: inherit; font-size: .85rem;
}
.rs-in:focus {
    outline: none;
    border-color: var(--rs-teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rs-teal) 16%, transparent);
}
textarea.rs-in { resize: vertical; line-height: 1.8; }
select.rs-in[size] { padding: .3rem; }

/* ── وما أُغلق يُقال إغلاقُه، ويُفتح إن أخطأ الرصد ── */
.rs-shut {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin: 0; padding: .75rem 1.2rem;
    border-bottom: 1px solid var(--rs-line);
    background: color-mix(in srgb, var(--rs-teal) 6%, transparent);
    font-size: .8rem;
}
.rs-shut b { display: block; color: var(--rs-ink); font-weight: 800; }
.rs-shut span span { font-size: .72rem; color: var(--rs-ink-3); }

/* ووسمُ «تلقائي»: الغيابُ بانقضاء الوقت خلوُّ كشفٍ لا شهادةَ فيه */
.rs-auto {
    display: inline-block;
    margin-inline-start: .3rem;
    padding: .05rem .34rem;
    border-radius: 5px;
    font-size: .72rem; line-height: 1.5; font-weight: 600;
    color: #8A5410;
    background: rgba(200, 138, 10, .13);
    border: 1px dashed rgba(200, 138, 10, .45);
    vertical-align: middle;
}
.dark .rs-auto { color: #E0B54A; background: rgba(200, 138, 10, .16); border-color: rgba(224, 181, 74, .4); }

/* ── سجلُّ ما أُرسل ──
   الإشعارُ يذهب إلى صناديق الطلاب ولا يبقى منه في اللوحة أثر: فمن
   سأل «هل أُبلغوا؟» لا يجد جواباً، ثم يُرسل الخبرَ مرّتين. */
.rs-sent { border-bottom: 1px solid var(--rs-line); }

.rs-sent > summary {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .9rem;
    cursor: pointer; list-style: none;
}
.rs-sent > summary::-webkit-details-marker { display: none; }
.rs-sent > summary:hover { background: color-mix(in srgb, var(--rs-teal) 4%, transparent); }
.rs-sent > summary:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: -2px; }

.rs-sent__k {
    width: 2rem; height: 2rem; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--k, var(--rs-teal)) 14%, transparent);
    color: var(--k, var(--rs-teal));
}

.rs-sent__b {
    padding: 0 .9rem .9rem 3.6rem;
    padding-inline: 3.6rem .9rem;
}
.rs-sent__b p {
    margin: 0 0 .4rem;
    font-size: .84rem; color: var(--rs-ink-2); line-height: 1.85;
    white-space: pre-line; overflow-wrap: anywhere;
}
.rs-sent__b small { font-size: .7rem; color: var(--rs-ink-3); }

/*
 | ── رقمُ الإصدار ──
 | كُتب أوّلاً بأدوات تيلويند `text-gray-400`، والشريطُ الجانبيُّ أخضرُ
 | داكن — فصار رماديٌّ داكنٌ على أخضرَ داكن لا يكاد يُرى. والشريطُ يكتب
 | ألوانَه هنا بـ`rgba(255,255,255,…)`، فيُتبَع نسقُه.
 |
 | والرقمُ لاتينيُّ الأرقام بخطٍّ ذي أرقامٍ متساوية العرض: هو مُعرِّفٌ
 | يُنسخ ويُقارن، لا عددٌ يُقرأ في جملة.
 */
.rs-rel {
    display: flex; align-items: baseline; gap: .45rem;
    padding: .85rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .72rem; line-height: 1;
}
.rs-rel__n {
    font-weight: 800;
    color: rgba(255, 255, 255, .5);
}
.rs-rel__v {
    margin-inline-start: auto;
    font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
}

/* وتحت نموذج الدخول أرضيّةٌ فاتحة، فلونٌ يُقرأ عليها */
.rs-rel--bare {
    justify-content: center;
    border-top: 0;
    margin-top: 1.5rem;
    padding: 0;
}
.rs-rel--bare .rs-rel__v {
    margin-inline-start: 0;
    color: color-mix(in srgb, currentColor 45%, transparent);
}

/*
 | ── عنوانُ الحلقة في رسمة المشرف ──
 | كانت قائمةً واحدةً مرتَّبةً بالأسماء، فمشرفٌ عنده أربعون طالباً في
 | ثلاث حلقات يقرأ أربعين سطراً متشابهاً لا يدري أيُّها من أيّ حلقة.
 */
.rs-flock {
    display: flex; align-items: baseline; gap: .55rem;
    margin: 1.2rem 0 .1rem; padding: 0 .2rem;
}
.rs-flock:first-of-type { margin-top: .2rem; }
.rs-flock__n {
    font-size: .82rem; font-weight: 800; color: var(--rs-ink);
    padding-bottom: .25rem;
    border-bottom: 2px solid color-mix(in srgb, var(--rs-teal) 45%, transparent);
}
.rs-flock__c { font-size: .72rem; color: var(--rs-ink-3); }

/*
 | ── استعراضُ الخطة ──
 | لوحُ العمل نماذجُ وأزرارُ تأكيدٍ وحذف. ومن أراد أن يقرأ الخطةَ كلَّها
 | — ليطبعها أو يعرضها على الطالب — كان يمرّ ببنودها واحداً واحداً بين
 | أزرارٍ يخشى أن يمسّها.
 */
.rs-rev {
    margin: .2rem 0 1rem;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius);
    overflow: hidden;
}
.rs-rev__h {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--rs-line);
}
.rs-rev__h h4 { margin: 0; font-size: .95rem; font-weight: 800; }
.rs-rev__h p { margin: .1rem 0 0; font-size: .76rem; color: var(--rs-ink-3); }

/*
 | ولا مُمرِّرَ للجدول.
 |
 | خلاياه تُكسَر، وأيامُه صارت أقراصاً ثابتةَ العرض، ودون السبعمئةِ
 | والعشرين يصير بطاقاتٍ — فلم يبقَ ما يُمرَّر. و`visible` لا `clip`:
 | إن أخطأتُ يوماً فُقد الشريطُ ولم تُفقَد البيانات، والزائدُ يقع في
 | النافذة وهي تقصّ عرضَها أصلاً.
 */
.rs-rev__w { overflow-x: visible; }
.rs-rev__t { border-collapse: collapse; width: 100%; font-size: .82rem; }
.rs-rev__t th, .rs-rev__t td {
    border-bottom: 1px solid var(--rs-line);
    padding: .6rem .7rem; text-align: start; vertical-align: top;

    /*
     | ولا يمشي الجدولُ عرضاً.
     |
     | كانت كلُّ خليّةٍ `nowrap`، فأضيقُ ما يبلغه الجدولُ مجموعُ أطولِ
     | قيمةٍ في كلِّ عمود. و`break-word` لا `anywhere`: الثانيةُ تكسر
     | الاسمَ العربيَّ حرفاً في كل سطرٍ وتقطع وصلَ حروفه، والأولى لا
     | تكسر إلا كلمةً لا تسعُ سطراً بحال.
     */
    white-space: normal;
    overflow-wrap: break-word;
}
.rs-rev__t th {
    font-weight: 800; font-size: .74rem; color: var(--rs-ink-2);
    background: color-mix(in srgb, var(--rs-ink-3) 7%, var(--rs-surface));
}
.rs-rev__t tbody tr:last-child td { border-bottom: 0; }
/* وعشرُ ريماتٍ لا اثنتا عشرة: أضيقُ حاوٍ يقع فيه هذا الجدولُ جدولاً
   — بطاقةُ التقييم عند تسعمئةٍ وواحد — يُبقي فيه بعدها فضلاً. ومئةٌ
   وستون تسع كلمتين عربيّتين، فلا يُقرأ العنوانُ شَظيّة. */
.rs-rev__ttl { font-weight: 700; min-width: 10rem; }

.rs-rev__f {
    display: flex; flex-wrap: wrap; gap: 1rem;
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--rs-line);
    font-size: .78rem; color: var(--rs-ink-2);
}
.rs-rev__f .is-warn { color: var(--rs-warn-fg); }
.rs-rev__f .is-bad { color: var(--rs-bad-fg); }

@media print {
    .fi-sidebar, .fi-topbar, .rs-mini, .rs-btn { display: none !important; }
    .rs-rev { border: 0; }
    .rs-rev__t { font-size: 11px; }
}

/*
 | ── المقاييس ──
 | اثنان وأربعون سؤالاً لا تُعرض قائمةً واحدة: المشرفُ يجلس بجانب
 | الطالب، وشاشةٌ تطلب منه النزولَ أربعين مرة تُترك في منتصفها.
 */
/*
 | ولا يبقى اسمُ الشريحة على قاعدة اللوح.
 |
 | `.rs-who` شريحةُ شخصٍ في «الإشعارات»: أرضُها خضراءُ باهتة وحافّتُها
 | خضراءُ ونصفُ قطرها ١٠. وكانت هذه القاعدةُ تقع عليها أيضاً فتُبيّض
 | أرضَها وتُبدّل حافّتَها وتزيدها هامشاً وقصّاً — فتُقرأ صندوقاً لا
 | شريحةَ من اختير.
 */
.rs-sc, .rs-pane {
    margin: .2rem 0 1rem;
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius);
    overflow: hidden;
}
.rs-sc__h, .rs-who__h, .rs-pane__h {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.1rem; border-bottom: 1px solid var(--rs-line);
}
.rs-sc__h h4, .rs-who__h h4, .rs-pane__h h4 { margin: 0; font-size: .95rem; font-weight: 800; }
.rs-sc__h p, .rs-who__h p, .rs-pane__h p { margin: .1rem 0 0; font-size: .76rem; color: var(--rs-ink-3); }

.rs-sc__pick {
    display: grid; gap: .8rem; padding: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rs-sc__tool {
    border: 1px solid var(--rs-line); border-radius: calc(var(--rs-radius) - 4px);
    padding: .9rem 1rem; display: grid; gap: .45rem; align-content: start;
}
.rs-sc__tt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rs-sc__name { font-size: .9rem; font-weight: 800; }
.rs-sc__lead { margin: 0; font-size: .78rem; color: var(--rs-ink-2); line-height: 1.7; }
.rs-sc__acts { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.rs-sc__n { font-size: .72rem; color: var(--rs-ink-3); font-variant-numeric: tabular-nums; }

.rs-sc__bar {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .7rem 1.1rem;
    background: color-mix(in srgb, var(--rs-teal) 6%, var(--rs-surface));
    border-bottom: 1px solid var(--rs-line);
    font-size: .76rem;
}
.rs-sc__where { font-weight: 800; }
.rs-sc__saved { color: var(--rs-ink-3); }

.rs-sc__sec { padding: 1.1rem; }
.rs-sc__sec h5 {
    margin: 0 0 .9rem; font-size: .88rem; font-weight: 800;
    padding-bottom: .35rem; border-bottom: 1px solid var(--rs-line);
}
.rs-sc__q { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.rs-sc__qt { font-size: .86rem; font-weight: 700; line-height: 1.7; }
.rs-sc__q .rs-in { width: 100%; }
.rs-opts--scale .rs-opt { flex: 1 1 7rem; text-align: center; }

.rs-sc__f {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .9rem 1.1rem; border-top: 1px solid var(--rs-line);
}

.rs-sc__read { padding: 0 1.1rem 1.1rem; display: grid; gap: 1rem; }
.rs-sc__block h5 {
    margin: 0 0 .5rem; font-size: .84rem; font-weight: 800;
    display: flex; align-items: baseline; gap: .5rem;
}
.rs-sc__block h5 small { font-weight: 400; color: var(--rs-ink-3); font-size: .72rem; }

.rs-sc__block dl { margin: 0; display: grid; gap: .1rem; }
.rs-sc__block dt {
    font-size: .74rem; font-weight: 700; color: var(--rs-ink-3); margin-top: .5rem;
}
.rs-sc__block dd, .rs-who dd {
    margin: 0; font-size: .84rem; line-height: 1.7;
    padding-bottom: .35rem; border-bottom: 1px solid var(--rs-line);
}
.rs-who dd.is-none { color: var(--rs-ink-3); }

.rs-who__g {
    display: grid; gap: 1.4rem; padding: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rs-who__col--wide { grid-column: 1 / -1; }
.rs-who__col h5 {
    margin: 0 0 .3rem; font-size: .84rem; font-weight: 800;
    padding-bottom: .3rem; border-bottom: 2px solid color-mix(in srgb, var(--rs-teal) 45%, transparent);
}

/*
 | ── النوافذ ──
 | كانت الألواحُ تُفتح تحت اسم الطالب فتدفع من تحته إلى أسفل الشاشة:
 | المشرفُ يفتح «بياناته» فيختفي الطالبُ الذي فتحها له، ويطوي وينشر
 | ليعرف أين هو.
 */
.rs-modal {
    position: fixed; inset: 0; z-index: 80;
    display: grid; place-items: center;
    padding: 1.2rem;
}
.rs-modal__veil {
    position: absolute; inset: 0;
    background: rgba(8, 24, 22, .55);
    backdrop-filter: blur(2px);
}
.rs-modal__box {
    position: relative;
    width: min(46rem, 100%);

    /*
     | والارتفاعُ بوحدةٍ تعرف شريطَ المتصفح.
     |
     | ‏`vh` في الجوال تُقاس بالشاشة كاملةً كأنّ الشريطَ مخفيّ، فنافذةٌ
     | ارتفاعُها ٩٢ منها تنزل تحت حافّة ما يُرى — ويقع في أسفلها زرُّ
     | الحفظ. فيبقى المشرفُ يمرّر ولا يبلغه: «تحت ولا أستطيع أن
     | أضغط عليه». و`dvh` تُقاس بما يُرى الآن.
     |
     | والسطرُ الأول لمن لا يعرفها.
     */
    max-height: min(88vh, 60rem);
    max-height: min(88dvh, 60rem);

    /*
     | ولا تمشي النافذةُ عرضاً.
     |
     | ‏`overflow-y: auto` وحدَها تجعل المحورَ الآخر `auto` كذلك بحكم
     | المواصفة، فصارت النافذةُ تُمرَّر يميناً وشمالاً — ورأسُها لاصقٌ
     | من أعلى لا من الجانب، فيمشي معها. فمن جرّ الجدولَ في الجوال
     | ذهب «+ إضافة» خارجَ الشاشة، ولا سبيل إليه إلا بقلب الجهاز.
     | وقِيست: يزيح الرأسَ ثلاثمئةً وثلاثين بكسلاً.
     |
     | والجدولُ له مُمرِّرُه في `rs-rev__w`، فلا يُمنع من التمرير.
     */
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--rs-radius);
    background: var(--rs-surface);
    box-shadow: 0 24px 60px -20px rgba(8, 24, 22, .7);
    animation: rs-modal-in .16s ease-out;
}
.rs-modal--wide .rs-modal__box { width: min(62rem, 100%); }

/* والألواحُ داخلها بلا إطارٍ ثانٍ ولا هامشٍ يُبعدها عن حوافّها */
/* والألواحُ داخلها بلا إطارٍ ثانٍ ولا ظلٍّ ولا هامشٍ يُبعدها عن حوافّها:
   لوحٌ من المستوى الأوّل يقع في نافذةٍ فيُرسم صندوقٌ رماديٌّ ذو زوايا
   قائمةٍ داخلَ صندوقٍ أبيضَ ذي زوايا دائرة. */
.rs-modal__box > .rs-sc,
.rs-modal__box > .rs-who,
.rs-modal__box > .rs-pane,
.rs-modal__box > .rs-rev,
.rs-modal__box > .rs-diag,
.rs-modal__box > .rs-mtg,
.rs-modal__box > .rs-plan {
    margin: 0; border: 0; border-radius: inherit;
    box-shadow: none;
}

/*
 | وبطاقتا التقييم واللقاءات كُتبتا بطاقتين في صفحة، ولا تُعرضان إلا في
 | نافذة: فتُنزع حشوتُهما عن الحافّة ليبلغها الرأسُ اللاصق، وتُردّ أرضُهما
 | إلى أرض النافذة فلا رماديَّ في بياض.
 |
 | والحشوةُ على الحاوي لا على قائمةٍ من أبنائه تُكتب باليد: فكلُّ ابنٍ —
 | اليومَ وغداً — يُزاح مرّةً واحدة، ولا يسقط واحدٌ من مُنتقٍ نُسي.
 | و١٫١ريم لأنه حشوةُ `rs-pane__h` فوقها، وهو لاصق: أيُّ قيمةٍ سواه
 | تُبقي الرأسَ وصفوفَه على خطّين.
 */
.rs-modal__box > .rs-diag,
.rs-modal__box > .rs-mtg {
    padding: 0 1.1rem 1.1rem;
    background: var(--rs-surface);
}

/* ورأسُ اللوح يثبت عند التمرير: ٤٢ سؤالاً تُمرّر ولا يُنسى لمن هي */
.rs-modal__box .rs-sc__h,
.rs-modal__box .rs-who__h,
.rs-modal__box .rs-pane__h,
.rs-modal__box .rs-rev__h,
.rs-modal__box .rs-diag__h {
    position: sticky; top: 0; z-index: 2;
    background: var(--rs-surface);
}

/*
 | ورأسُ البطاقة يبلغ الحافّتين: البطاقةُ في الجوال نحوُ ألفٍ وأربعمئةِ
 | بكسل، فكان زرُّ الإغلاق يذهب مع أوّل مسحةٍ ولا يبقى للخروج إلا إيماءةُ
 | الجهاز. والهامشُ السالبُ يُلغي حشوةَ الحاوي بقدرها فيمتدّ الشريطُ من
 | طرفٍ إلى طرف، ولا يمرّ تحته شيءٌ في قناةٍ جانبيّة.
 |
 | و`>` لا الانحدار: `.rs-diag__grid` تقع في العمق الأوّل والثالث معاً.
 */
.rs-modal__box > .rs-diag > .rs-diag__h {
    margin-inline: -1.1rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--rs-line);
}
.rs-modal__box .rs-sc__bar { position: sticky; top: 3.4rem; z-index: 1; }
.rs-modal__box .rs-sc__f {
    position: sticky; bottom: 0;
    background: var(--rs-surface);
}

@keyframes rs-modal-in {
    from { opacity: 0; transform: translateY(6px) scale(.99); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rs-modal__box { animation: none; }
}
@media (max-width: 560px) {
    .rs-modal { padding: 0; place-items: end stretch; }

    .rs-modal__box {
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: var(--rs-radius) var(--rs-radius) 0 0;
    }
}

/*
 | ── الحركة: اثنا عشر أسبوعاً ──
 | لا مكتبةَ رسمٍ في المستودع ولا خطوةَ بناءٍ في النشر تُدخلها، والرسمُ
 | أعمدةٌ بارتفاعٍ في السطر — والأنماطُ هنا هيكلٌ لا قيم.
 */
.rs-mv {
    display: flex; align-items: flex-end; gap: .35rem;
    padding: 1.1rem 1.1rem .5rem;
    min-height: 9rem;
}
.rs-mv__w { flex: 1 1 0; display: grid; gap: .4rem; min-width: 0; }
.rs-mv__bars {
    display: flex; align-items: flex-end; gap: 2px;
    height: 6.5rem;
}
.rs-mv__bars i {
    flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 2px;
    transition: height .2s ease;
}
.rs-mv__l {
    font-size: .62rem; color: var(--rs-ink-3); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rs-lg {
    display: flex; flex-wrap: wrap; gap: 1rem;
    padding: 0 1.1rem 1rem;
    font-size: .74rem; color: var(--rs-ink-2);
}
.rs-lg i {
    display: inline-block; width: .7rem; height: .7rem;
    border-radius: 3px; margin-inline-end: .3rem; vertical-align: -1px;
}

/* ── تغطيةُ المقاييس ── */
.rs-cov { padding: .8rem 1.1rem; border-top: 1px solid var(--rs-line); }
.rs-cov:first-of-type { border-top: 0; }
.rs-cov__h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.rs-cov__n { font-size: .86rem; font-weight: 700; }
.rs-cov__c { font-size: .76rem; color: var(--rs-ink-3); font-variant-numeric: tabular-nums; }
.rs-cov__f {
    display: flex; flex-wrap: wrap; gap: .8rem;
    margin-top: .35rem; font-size: .72rem; color: var(--rs-ink-3);
}

/* وشريطُ النسبة في خانة الجدول */
.rs-pace { display: inline-flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.rs-pace .rs-track { width: 4rem; flex: 0 0 auto; margin-top: 0; }

@media (max-width: 720px) {
    .rs-mv__l { display: none; }
    .rs-mv { min-height: 7rem; }
    .rs-mv__bars { height: 5rem; }
}

/* ── صفوفُ التقارير ── */
.rs-qsec {
    padding: .9rem 1.1rem .3rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .03em;
    color: var(--rs-ink-3);
}
.rs-q { padding: .7rem 1.1rem; border-top: 1px solid var(--rs-line); }
.rs-q__h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.rs-q__t { font-size: .86rem; font-weight: 700; line-height: 1.7; }
.rs-q__n { font-size: .72rem; color: var(--rs-ink-3); font-variant-numeric: tabular-nums; }
.rs-q__none { margin: 0; font-size: .78rem; color: var(--rs-ink-3); }

.rs-qb { padding: .7rem 1.1rem 1rem; }
.rs-q__row {
    display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr 2.2rem;
    align-items: center; gap: .6rem; margin-bottom: .35rem;
    font-size: .8rem;
}
.rs-q__lab { color: var(--rs-ink-2); line-height: 1.6; }
.rs-q__c { text-align: end; font-variant-numeric: tabular-nums; color: var(--rs-ink-3); }

@media (max-width: 560px) {
    .rs-q__row { grid-template-columns: 1fr 2.2rem; }
    .rs-q__row .rs-q__lab { grid-column: 1 / -1; }
}

/*
 | ── الحقائق أفقاً ──
 | كانت كلُّ حقيقةٍ سطرين — عنواناً تحته قيمة — فأربعٌ وعشرون حقيقةً
 | ثمانيةٌ وأربعون سطراً يُمرَّر بينها، والشاشةُ عريضةٌ خاوية عن يمينها
 | وشمالها. وأكثرُها كلمةٌ واحدة.
 */
/*
 | و«rs-facts» اسمٌ لمكوّنين: هذه قائمةُ وصفٍ `dl`، وتلك لوحُ بياناتٍ
 | `div` له أبناؤه `__g` و`__f`. فتُقيَّد الشبكةُ بعنصرها.
 |
 | و`auto-fit` لا `auto-fill`: الثانيةُ تُبقي المساراتِ الفارغةَ قائمةً،
 | فقسمٌ فيه حقيقتان في شبكةٍ ذاتِ أربعةِ مساراتٍ يُرسم حقيقتين
 | ضيّقتين وفراغاً في ثلاثة أرباع السطر — وهو عينُ ما يُشتكى منه.
 */
dl.rs-facts {
    margin: 0;
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.rs-fact {
    min-width: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--rs-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--rs-ink-3) 4%, var(--rs-surface));
}
.rs-fact dt {
    margin: 0 0 .15rem;
    font-size: .7rem; font-weight: 700; color: var(--rs-ink-3);
    line-height: 1.5;
}
.rs-fact dd {
    margin: 0; border: 0; padding: 0;
    font-size: .86rem; font-weight: 600; line-height: 1.6;
    overflow-wrap: break-word;
}
.rs-fact dd.is-none { font-weight: 400; color: var(--rs-ink-3); }

/* وعنوانُ القسم يقطع الشبكةَ سطراً كاملاً */
.rs-facts__sec {
    grid-column: 1 / -1;
    margin-top: .4rem;
    font-size: .74rem; font-weight: 800; color: var(--rs-ink-3);
}

.rs-who__b, .rs-pane__b { padding: 1rem 1.1rem; border-top: 1px solid var(--rs-line); }
.rs-who__b:first-of-type, .rs-pane__b:first-of-type { border-top: 0; }
.rs-who__b h5, .rs-pane__b h5 {
    margin: 0 0 .6rem; font-size: .84rem; font-weight: 800;
    padding-bottom: .3rem;
    border-bottom: 2px solid color-mix(in srgb, var(--rs-teal) 45%, transparent);
    display: inline-block;
}

/* ورأسُ كل أداةٍ داخل لوحٍ واحد */
.rs-sc__tool-h {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .8rem 1.1rem .4rem;
    border-top: 1px solid var(--rs-line);
}
.rs-sc__tool-h:first-of-type { border-top: 0; }

/* ولسؤالٍ نصٍّ حرٍّ في الشبكة عرضُ سطرٍ كامل — وهو `.rs-fact--wide`.
   وكان هنا `.rs-fact dd:only-child` وهو لا يقع أبداً: الـ`dd` ابنُ
   الخانة لا عنصرٌ في الشبكة، ولا يكون وحيداً وفوقه `dt`. */

@media (max-width: 560px) {
    dl.rs-facts { grid-template-columns: 1fr 1fr; }
}

/* وسبعةُ أزرارٍ في صفّ الطالب تُلفّ ولا تدفع اسمَه خارج الشاشة */
.rs-doors__row {
    display: flex; flex-wrap: wrap; gap: .3rem;
    justify-content: flex-end; flex: 0 1 auto;
}
/*
 | وصفُّ الطالب يلتفّ على الجوّال ولا يُسحق.
 |
 | ‏`.rs-row` صفٌّ مرنٌ لا يلتفّ، فلمّا أخذ شريطُ الأزرار عرضَ الصفّ
 | كلَّه انكمش ما قبله إلى الصفر — و`min-width: 0` على حاوي الاسم
 | يأذن بذلك. فظهر اسمُ الطالب حرفاً في كل سطر: عمودٌ من ثلاثين حرفاً
 | مكان سطرٍ واحد.
 */
@media (max-width: 720px) {
    .rs-row { flex-wrap: wrap; row-gap: .5rem; }
    .rs-row__t { flex: 1 1 60%; min-width: 9rem; }

    .rs-doors__row {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: 0;
    }
}

/*
 | ── التوزيعات ──
 | كان الشريطُ رفيعاً في خانةٍ عرضُها أربعةُ أحرف، فيُقرأ مفتاحَ تشغيلٍ
 | لا مقداراً: «٦» بجانب نقطةٍ خضراء لا تقول شيئاً عن نسبتها إلى «١».
 */
.rs-dist { padding: .9rem 1.1rem 1rem; }

/* الشكلُ كلُّه في سطرٍ واحد يُقرأ بنظرة */
.rs-dist__whole {
    display: flex; gap: 2px;
    height: 12px; margin-bottom: .9rem;
    border-radius: 99px; overflow: hidden;
    background: color-mix(in srgb, var(--rs-ink-3) 12%, transparent);
}
.rs-dist__whole i { display: block; min-width: 3px; }

.rs-dist__rows { display: grid; gap: .5rem; }

.rs-dist__row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 8rem) 1fr auto;
    align-items: center; gap: .6rem;
}
.rs-dist__lab {
    font-size: .8rem; color: var(--rs-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rs-dist__row.is-rest .rs-dist__lab { color: var(--rs-ink-3); }

.rs-dist__bar {
    height: 10px; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 12%, transparent);
    overflow: hidden;
}
.rs-dist__bar i {
    display: block; height: 100%; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 30%, var(--rs-surface));
    transition: width .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .rs-dist__bar i { transition: none; }
}

.rs-dist__val {
    display: flex; align-items: baseline; gap: .35rem;
    font-variant-numeric: tabular-nums;
}
.rs-dist__val b { font-size: .86rem; font-weight: 800; }
.rs-dist__val small { font-size: .68rem; color: var(--rs-ink-3); min-width: 2.4rem; }

.rs-dist__foot {
    display: flex; gap: .9rem; margin-top: .85rem;
    padding-top: .6rem; border-top: 1px solid var(--rs-line);
    font-size: .72rem; color: var(--rs-ink-3);
    font-variant-numeric: tabular-nums;
}
.rs-dist__foot .is-none { color: var(--rs-bad-fg); }

.rs-dist__none { margin: 0; font-size: .8rem; color: var(--rs-ink-3); }

@media (max-width: 480px) {
    .rs-dist__row { grid-template-columns: minmax(3.5rem, 6rem) 1fr auto; }
    .rs-dist__val small { display: none; }
}

/*
 | ══ تمييزُ الخانات بالألوان والعمق ══
 |
 | اثنان وأربعون سؤالاً بلا تفريقٍ بصريّ جدارٌ رماديٌّ واحد: المشرفُ لا
 | يعرف أنه انتقل من اختيارٍ واحدٍ إلى سلّمٍ إلى نصٍّ حرّ إلا بقراءة
 | الخيارات. والصنفُ مكتوبٌ في الخانة، فيُمسَك بلون.
 |
 | والتمييزُ شريطٌ على الحافّة الداخلية — وهو اللغةُ التي يتكلّمها هذا
 | الملفُّ أصلاً في بنود الخطة وبطاقات اللوحة — لا أرضيّةٌ ملوّنة: كلُّ
 | أرضٍ ملوّنةٍ تأكل من هامش قراءة النصّ فوقها، وهامشُنا محسوب.
 */
.rs-sc__q {
    --q-kind: var(--rs-kind-one);
    --q-kind-fg: var(--rs-teal-fg);
    --kind: var(--q-kind);

    position: relative;
    padding-inline-start: .85rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--kind) 55%, transparent);
    border-radius: 0 3px 3px 0;
}

.rs-sc__q--many  { --q-kind: var(--rs-kind-many);  --q-kind-fg: var(--rs-kind-many); }
.rs-sc__q--scale { --q-kind: var(--rs-kind-scale); --q-kind-fg: var(--rs-kind-scale); }
.rs-sc__q--text  { --q-kind: var(--rs-kind-text);  --q-kind-fg: var(--rs-kind-text); }

/* وأداةٌ لكلِّ لون: ثلاثٌ متتابعةٌ في صفحةٍ واحدة تلتبس بلا علامة */
.rs-sc__sec--environment { --tool: var(--rs-tool-environment); }
.rs-sc__sec--attainment  { --tool: var(--rs-tool-attainment); }
.rs-sc__sec--skills      { --tool: var(--rs-tool-skills); }

.rs-sc__sec h5 {
    border-bottom-color: color-mix(in srgb, var(--tool, var(--rs-teal)) 38%, transparent);
}

.rs-sc__tool-h {
    border-top-width: 2px;
    border-top-color: color-mix(in srgb, var(--tool, var(--rs-teal)) 30%, var(--rs-line));
}
.rs-sc__tool-h--environment { --tool: var(--rs-tool-environment); }
.rs-sc__tool-h--attainment  { --tool: var(--rs-tool-attainment); }
.rs-sc__tool-h--skills      { --tool: var(--rs-tool-skills); }

.rs-sc__tool-h .rs-sc__name {
    padding-inline-start: .55rem;
    border-inline-start: 4px solid var(--tool, var(--rs-teal));
}

/*
 | ── الحقلُ النصّيُّ غائرٌ يُكتب فيه ──
 |
 | ‏`.rs-in:focus` يُطفئ الحدَّ الخارجيَّ ويحمل حلقةَ التركيز في
 | ‏`box-shadow`. فظلٌّ ساكنٌ يُكتب في قاعدةٍ أخرى يمحوه التركيزُ حين
 | يحلّ محلَّه — فالغائرُ والحلقةُ في قائمةٍ واحدة.
 */
.rs-sc__q .rs-in,
.rs-diag__form .rs-in {
    box-shadow: var(--rs-shadow-0);
    transition: border-color .14s, box-shadow .14s;
}
.rs-sc__q .rs-in:focus,
.rs-diag__form .rs-in:focus {
    box-shadow: var(--rs-ring), var(--rs-shadow-0);
}

@media (prefers-reduced-motion: reduce) {
    .rs-sc__q .rs-in, .rs-diag__form .rs-in { transition: border-color .14s; }
}

/*
 | ── بطاقةُ التقييم: كلُّ صفةٍ بلونها ──
 |
 | ستُّ صفاتٍ متتابعةٍ صفوفاً متشابهة، والمشرفُ يقرأ عنوانَ كلٍّ منها
 | ليعرف أين هو.
 */
.rs-diag__row {
    position: relative;
    padding-inline-start: .8rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--attr, var(--rs-teal)) 45%, transparent);
    border-radius: 0 3px 3px 0;

    --q-kind: var(--attr, var(--rs-teal));
    --q-kind-fg: var(--attr, var(--rs-teal-fg));
}
.rs-diag__row:nth-of-type(6n+1) { --attr: var(--rs-tool-environment); }
.rs-diag__row:nth-of-type(6n+2) { --attr: var(--rs-kind-one); }
.rs-diag__row:nth-of-type(6n+3) { --attr: var(--rs-kind-scale); }
.rs-diag__row:nth-of-type(6n+4) { --attr: var(--rs-kind-many); }
.rs-diag__row:nth-of-type(6n+5) { --attr: var(--rs-tool-skills); }
.rs-diag__row:nth-of-type(6n+6) { --attr: var(--rs-kind-text); }

/*
 | ── نموذجُ بند الخطة ──
 |
 | حقولُه عناصرُ خامٌ بلا أصناف، فيُمسَك بالعنصر ونوعه.
 */
.rs-plan__grid select,
.rs-plan__grid input,
.rs-plan__grid textarea {
    box-shadow: var(--rs-shadow-0);
}
.rs-plan__grid select:focus,
.rs-plan__grid input:focus,
.rs-plan__grid textarea:focus {
    box-shadow: var(--rs-ring), var(--rs-shadow-0);
}

/* والبطاقاتُ ترتفع عند المرور — إلا ما كان لاصقاً في نافذةٍ تُمرَّر */
.rs-card { transition: box-shadow .16s ease; }
.rs-card:hover { box-shadow: var(--rs-shadow-2); }

@media (prefers-reduced-motion: reduce) {
    .rs-card { transition: none; }
}

/* ولا ظلَّ في الورق */
@media print {
    .rs-opt, .rs-card, .rs-sc__q .rs-in, .rs-diag__form .rs-in,
    .rs-plan__grid select, .rs-plan__grid input, .rs-plan__grid textarea {
        box-shadow: none !important;
        transform: none !important;
    }
}

/* والمفتوحُ يأخذ سطراً كاملاً: هو الذي يطول، وحصرُه في خانةٍ يقطعه */
.rs-fact--wide { grid-column: 1 / -1; }
.rs-fact--wide dd { white-space: pre-line; }

/* ── يومُ بلوغ آخر الكتاب ── */
.rs-plan__full.rs-pace {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .65rem .9rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--rs-teal) 45%, transparent);
    background: color-mix(in srgb, var(--rs-teal) 5%, var(--rs-surface));
    font-size: .82rem;
}
.rs-pace__lab { font-size: .74rem; color: var(--rs-ink-3); }
.rs-pace b { font-weight: 800; color: var(--rs-teal-fg); }
.rs-pace__n { font-size: .74rem; color: var(--rs-ink-3); font-variant-numeric: tabular-nums; }

/* ══ أبواب المقاييس عند المشرف ══════════════════════════
   الطالبُ يصف نفسه، والمشرفُ يُطلق ويُذكّر ويقرأ. */

/* ورأسُ المجموعة يحمل زرَّيها: هي وحدةُ عمله لا الاسم — يلقاهم فيقول
   «املؤوها الليلة»، فلو لم يكن له إلا زرُّ الواحد أطلقها أربعين مرة. */
.rs-flock { flex-wrap: wrap; row-gap: .4rem; align-items: center; }
.rs-flock .rs-mini { font-size: .68rem; padding: .18rem .5rem; }

/*
 | وزرٌّ لا يُنقر يُقال إنه لا يُنقر.
 |
 | «ذُكِّر اليوم» كان يبقى على هيئة زرٍّ حيّ، فيضغطه المشرفُ فلا يجري
 | شيء، فيظنّ الشاشةَ متوقّفة ويضغط ثالثةً ورابعة.
 */
.rs-mini:disabled {
    opacity: .5;
    cursor: default;
    border-style: dashed;
}
.rs-mini:disabled:hover { border-color: var(--rs-line); color: inherit; }

/* ══ لوحُ نافذةٍ — لا شريحةُ شخص ═════════════════════════
   ‏`.rs-who` شريحةٌ تعرض شخصاً: صورةٌ واسمٌ وهاتفٌ في صفٍّ واحد،
   ‏`display:flex; align-items:center`. وأُعيد استعمالُها غلافاً للوحٍ
   كامل، فصار رأسُ اللوح وجسدُه عنصرين في ذلك الصفّ: قِيس فوجد الرأسُ
   ٢٤٤ بكسلاً والجسدُ ٢٤٣ في نافذةٍ عرضُها ٧٣٦ — خمسُمئةٍ ضائعة،
   وشبكةُ الحقائق في ٢٠٨ بكسل لا تسع إلا عموداً واحداً.

   ولا يُرى العطبُ على الجوّال: `flex-wrap` يلتفّ بالصفّين فيُقرأ
   اللوحُ صحيحاً — فيُصلَح ما يُرى ويبقى ما لا يُرى. */
.rs-pane {
    display: block;
    width: 100%;
    background: var(--rs-surface);
    color: var(--rs-ink);
    border-radius: inherit;
}

/* واسمُ الطالب في رأس اللوح وحدَه: خانةٌ في الشبكة تأكل عموداً
   كاملاً لتقول ما هو مكتوبٌ فوقها بخطٍّ أكبر. */
.rs-pane__h { position: relative; }

/* والشبكةُ في `dl.rs-facts` أعلاه: واحدةٌ للملفّ والنتائج والتقييمات
   — وكانت هنا بمحدِّدِ ابنٍ لا يبلغ إلا الملفّ، والنتائجُ والتقييماتُ
   تُعشّش قوائمَها داخل `.rs-sc__sec` فلا يصلها. */

/* ══ السؤال قبل الفعل ═══════════════════════════════════
   صندوقُ المتصفح يتصدّره اسمُ النطاق بخطٍّ لاتينيٍّ في شاشةٍ عربية،
   وزرّاه بلسان النظام لا بلساننا، ولا عنوانَ فيه يقول ما الفعل —
   وهو أظهرُ موضعٍ يُقرأ فيه أن الشاشة ليست من المنصة. */
.rs-modal--ask { z-index: 90; }

.rs-ask {
    position: relative;
    width: min(27rem, 100%);
    padding: 1.4rem 1.5rem 1.2rem;
    border-radius: var(--rs-radius);
    background: var(--rs-surface);
    box-shadow: 0 24px 60px -20px rgba(8, 24, 22, .7);
    animation: rs-modal-in .16s ease-out;
    text-align: center;
}

.rs-ask__i {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; margin: 0 auto .8rem;
    border-radius: 50%;
}
.rs-ask__i svg { width: 1.5rem; height: 1.5rem; }
.rs-ask__i--ok { background: color-mix(in srgb, var(--rs-teal) 13%, transparent); color: var(--rs-teal-fg); }
.rs-ask__i--warn { background: rgba(201, 138, 10, .14); color: #A87708; }
.rs-ask__i--bad { background: rgba(179, 38, 30, .12); color: #B3261E; }

.dark .rs-ask__i--warn { background: rgba(200, 138, 10, .18); color: #E0B54A; }
.dark .rs-ask__i--bad { background: rgba(225, 79, 83, .16); color: #F08A8D; }

.rs-ask h4 { margin: 0 0 .45rem; font-size: 1rem; font-weight: 800; color: var(--rs-ink); }
.rs-ask p {
    margin: 0 0 1.2rem;
    font-size: .84rem; line-height: 1.85; color: var(--rs-ink-2);
}

/* والزرّان متساويان: «تراجع» ليس أصغر من أخيه فيُضغط الآخرُ سهواً */
.rs-ask__acts { display: flex; gap: .55rem; }
.rs-ask__acts .rs-btn { flex: 1 1 0; justify-content: center; text-align: center; }

/* ولونُ الزرّ لونُ ما يفعله: الحذفُ أحمرُ والسحبُ أصفرُ والإطلاقُ لونُ المنصة */
.rs-btn--warn { background: #A87708; }
.rs-btn--warn:hover { background: #8A6206; }
.rs-btn--bad { background: #B3261E; }
.rs-btn--bad:hover { background: #911E17; }
.rs-btn--ok { background: var(--rs-teal); }

/* ══ نسخُ ما يُقرأ ═══════════════════════════════════════
   المشرفُ يفتح بيانات طالبه ليتّصل به، فكان يقرأ الرقمَ بعينه ويكتبه
   بيده في هاتفه — عشرةُ أرقامٍ يُخطئ في أحدها فيتّصل بغيره. */
.rs-fact--copy {
    position: relative;
    cursor: pointer;
    transition: border-color .14s, background .14s;
}
.rs-fact--copy:hover { border-color: var(--rs-teal); }
.rs-fact--copy:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: 1px; }

/* والأيقونةُ تظهر عند القصد لا دائماً: أربعُ عشرةَ أيقونةً في شبكةٍ
   واحدةٍ ضجيجٌ يُغطّي ما جاء يُقرأ. */
.rs-fact__c {
    position: absolute;
    inset-inline-end: .45rem; inset-block-start: .45rem;
    opacity: 0;
    color: var(--rs-ink-3);
    transition: opacity .14s;
    pointer-events: none;
}
.rs-fact__c svg { width: .85rem; height: .85rem; }
.rs-fact--copy:hover .rs-fact__c,
.rs-fact--copy:focus-visible .rs-fact__c { opacity: .7; }

/* والإقرارُ في موضع النقر: من نسخ حقلاً ينظر إليه، ولافتةٌ في زاوية
   الشاشة لا تُرى. */
.rs-fact--copy.is-copied {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 9%, var(--rs-surface));
}
.rs-fact--copy.is-copied .rs-fact__c { opacity: 0; }
.rs-fact--copy.is-copied::after {
    content: 'نُسخ';
    position: absolute;
    inset-inline-end: .45rem; inset-block-start: .4rem;
    padding: .06rem .4rem;
    border-radius: 99px;
    background: var(--rs-teal);
    color: #fff;
    font-size: .62rem; font-weight: 800;
}

/* والرقمُ واللاتينيُّ يُكتبان من اليسار ولو كانت الشاشةُ عربية */
.rs-fact__ltr { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }

.rs-copy.is-copied {
    border-color: var(--rs-teal);
    background: color-mix(in srgb, var(--rs-teal) 10%, transparent);
    color: var(--rs-teal-fg);
}

/* ولا يُسكت على إخفاق: ضغطةٌ لا يتبعها خبرٌ تُقرأ نجاحاً، فينصرف
   المشرفُ وحافظتُه فارغةٌ وهو يحسب الأرقامَ فيها — وفي رقمٍ واحدٍ
   مضضٌ، وفي ثلاثين قائمةٌ لم تُراسَل وصاحبُها يظنّها راسلت. */
.rs-copy.is-failed {
    border-color: var(--rs-bad);
    color: var(--rs-bad-fg);
}
.rs-copy.is-failed::after { content: ' · لم يُنسخ'; }

.rs-fact--copy.is-failed { border-color: var(--rs-bad); }
.rs-fact--copy.is-failed .rs-fact__c { opacity: 0; }
.rs-fact--copy.is-failed::after {
    content: 'لم يُنسخ';
    position: absolute;
    inset-inline-end: .45rem; inset-block-start: .4rem;
    padding: .06rem .4rem;
    border-radius: 99px;
    background: #B3261E;
    color: #fff;
    font-size: .62rem; font-weight: 800;
}

/* ══ أسئلة المقاييس — مبسوطةً لا مطويّة ═══════════════════
   كانت ثلاثةَ صناديقَ مغلقة: يفتح المديرُ الأداةَ ثم القسمَ ثم
   السؤال — ثلاثُ نقراتٍ قبل أن يقرأ سطراً واحداً، ولا يُرى في
   الشاشة كم سؤالاً إلزاميّ ولا أين هو. والطيُّ يُخفي العملَ ليُظهر
   ترتيبَه، والمديرُ جاء للعمل لا للترتيب. */

/* وما يُقال قبل التعديل لا بعده */
.rs-say {
    margin: 0 0 1rem;
    padding: .9rem 1.1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--rs-teal) 22%, var(--rs-line));
    border-radius: var(--rs-radius);
    background: color-mix(in srgb, var(--rs-teal) 5%, var(--rs-surface));
}
.rs-say__h { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rs-say__h b { font-size: .88rem; font-weight: 800; color: var(--rs-ink); }
.rs-say__i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--rs-teal-fg); }
.rs-say__i svg { width: 1.1rem; height: 1.1rem; }
.rs-say__l { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .3rem; }
.rs-say__l li { font-size: .79rem; line-height: 1.85; color: var(--rs-ink-2); }
.rs-say__l b { color: var(--rs-ink); font-weight: 800; }

/* ولكلّ أداةٍ لونُ حافّتها: ثلاثٌ متتابعةٌ في صفحةٍ واحدة */
.rs-inst { padding: 0; overflow: hidden; }
.rs-inst__h {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--rs-line);
    border-inline-start: 4px solid var(--i, var(--rs-teal));
}
.rs-inst__h h3 { margin: 0; font-size: .95rem; font-weight: 800; }
.rs-inst__h p { margin: .15rem 0 0; font-size: .74rem; color: var(--rs-ink-3); line-height: 1.7; }
.rs-inst--environment { --i: #1F5F57; }
.rs-inst--attainment  { --i: #8A6516; }
.rs-inst--skills      { --i: #40507E; }

/*
 | وحافّةُ الأداة تُقرأ ليلاً كما تُقرأ نهاراً.
 |
 | الثلاثةُ أعلاه مكتوبةٌ بأرقامها ولا نظيرَ لها في الليل، فتستوي عند
 | العين على أرضٍ سوداء — وتذهب العلامةُ التي بها تُفرَّق ثلاثُ أدواتٍ
 | معروضةٍ معاً، وهي كلُّ ما يفصلها. ورموزُ الأدوات معرَّفةٌ في
 | اللوحتين أصلاً ومقيسةٌ في كلتيهما، فتُستعار ولا يُخترع لون.
 */
.dark .rs-inst--environment { --i: var(--rs-tool-environment); }
.dark .rs-inst--attainment  { --i: var(--rs-tool-attainment); }
.dark .rs-inst--skills      { --i: var(--rs-tool-skills); }

/* والقسمُ سطرٌ واحدٌ يقابله ما يُفعل به */
.rs-secrow {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem;
    background: color-mix(in srgb, var(--rs-ink-3) 6%, var(--rs-surface));
    border-block: 1px solid var(--rs-line);
}
.rs-secrow__n { font-size: .82rem; font-weight: 800; color: var(--rs-ink); }
.rs-secrow__c {
    padding: .08rem .45rem; border-radius: 99px;
    background: var(--rs-surface); border: 1px solid var(--rs-line);
    font-size: .68rem; font-weight: 800; color: var(--rs-ink-3);
}

/* وسطرُ السؤال: نصُّه ثم ما يُفعل به */
.rs-qrow {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 55%, transparent);
}
.rs-qrow:last-child { border-bottom: 0; }
.rs-qrow:hover { background: color-mix(in srgb, var(--rs-teal) 3%, transparent); }
.rs-qrow.is-off { opacity: .55; }
.rs-qrow--none { color: var(--rs-ink-3); font-size: .78rem; }

.rs-qrow__n {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 1.4rem; height: 1.4rem; border-radius: 7px;
    background: color-mix(in srgb, var(--rs-ink-3) 12%, transparent);
    font-size: .66rem; font-weight: 800; color: var(--rs-ink-3);
}
.rs-qrow__t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .12rem; }
.rs-qrow__x { font-size: .82rem; font-weight: 700; line-height: 1.6; overflow-wrap: break-word; }
.rs-qrow__m { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.rs-qrow__m code {
    font-size: .64rem; color: var(--rs-ink-3);
    background: color-mix(in srgb, var(--rs-ink-3) 9%, transparent);
    padding: .04rem .3rem; border-radius: 5px;
}
.rs-qrow__after { font-size: .66rem; color: var(--rs-ink-3); }
.rs-qrow__mv { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }

.rs-tag {
    padding: .06rem .4rem; border-radius: 99px;
    font-size: .63rem; font-weight: 800; white-space: nowrap;
    background: color-mix(in srgb, var(--rs-ink-3) 12%, transparent);
    color: var(--rs-ink-2);
}
.rs-tag--one   { background: color-mix(in srgb, #3E8F84 16%, transparent); color: #1F5F57; }
.rs-tag--many  { background: color-mix(in srgb, #6C7DB3 18%, transparent); color: #40507E; }
.rs-tag--scale { background: color-mix(in srgb, #C79A3C 20%, transparent); color: #8A6516; }
.rs-tag--off   { background: color-mix(in srgb, #B3261E 12%, transparent); color: #B3261E; }

.dark .rs-tag--one   { color: #7FC3B9; }
.dark .rs-tag--many  { color: #A8B4DC; }
.dark .rs-tag--scale { color: #E0B54A; }
.dark .rs-tag--off   { color: #F08A8D; }

/*
 | وحالُ الإلزام تُقلب بنقرةٍ في مكانها.
 |
 | هي أكثرُ ما يُبدَّل في هذه الشاشة، فلو كانت خانةً في نافذةٍ تُفتح
 | لصار تعليمُ ستةِ أسئلةٍ ستَّ نوافذَ تُفتح وتُغلق.
 */
.rs-req {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid var(--rs-line); border-radius: 99px;
    background: var(--rs-surface);
    font-family: inherit; font-size: .68rem; font-weight: 800;
    color: var(--rs-ink-3);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s;
}
.rs-req__d {
    display: block; width: .42rem; height: .42rem; border-radius: 50%;
    background: currentColor; opacity: .55;
}
.rs-req:hover { border-color: var(--rs-ink-3); }
.rs-req.is-on {
    border-color: color-mix(in srgb, #B3261E 45%, transparent);
    background: color-mix(in srgb, #B3261E 10%, transparent);
    color: #B3261E;
}
.rs-req.is-on .rs-req__d { opacity: 1; }
.dark .rs-req.is-on { color: #F08A8D; }

/* وأيقونةٌ تُقال بكلمةٍ حيث يتّسع، وبصورتِها حيث لا يتّسع */
.rs-ico {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .25rem .45rem;
    border: 1px solid var(--rs-line); border-radius: 8px;
    background: var(--rs-surface);
    font-family: inherit; font-size: .68rem; font-weight: 700;
    color: var(--rs-ink-2);
    cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
}
.rs-ico svg { width: .92rem; height: .92rem; }
.rs-ico:hover { border-color: var(--rs-teal); color: var(--rs-teal-fg); }
.rs-ico:disabled { opacity: .35; cursor: default; }
.rs-ico:disabled:hover { border-color: var(--rs-line); color: var(--rs-ink-2); }
.rs-ico--bad:hover { border-color: var(--rs-bad); color: var(--rs-bad-fg); }
.rs-ico--sm { padding: 0 .3rem; font-size: .55rem; line-height: 1.25; }
.rs-ico__t { display: none; }

@media (min-width: 1100px) {
    .rs-ico__t { display: inline; }
}

/* وزرُّ الحفظ يتبع الشاشة: اثنان وأربعون سطراً لا يُصعَد إلى أعلاها لحفظ */
.rs-savebar {
    position: sticky; bottom: .6rem; z-index: 20;
    display: flex; align-items: center; gap: .6rem;
    margin-top: 1rem; padding: .7rem 1rem;
    border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
    background: var(--rs-surface);
    box-shadow: var(--rs-shadow-up);
}
.rs-savebar__t { font-size: .76rem; color: var(--rs-ink-3); }

/* ونافذةُ تحرير السؤال */
.rs-qedit { width: min(40rem, 100%); }
.rs-qedit__b { display: grid; gap: .9rem; }
.rs-qedit input[type="text"], .rs-qedit textarea {
    box-sizing: border-box; width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--rs-line); border-radius: 9px;
    background: var(--rs-surface); color: var(--rs-ink);
    font-family: inherit; font-size: .82rem;
}
.rs-qedit input:disabled { background: color-mix(in srgb, var(--rs-ink-3) 8%, transparent); color: var(--rs-ink-3); }

.rs-optrow { display: flex; gap: .4rem; margin-bottom: .35rem; }
.rs-optrow input:first-child { flex: 1 1 60%; }
.rs-optrow input:nth-child(2) { flex: 0 0 8rem; }

.rs-ask input[type="text"] {
    box-sizing: border-box; width: 100%; margin: .2rem 0 .4rem;
    padding: .55rem .7rem;
    border: 1px solid var(--rs-line); border-radius: 9px;
    background: var(--rs-surface); color: var(--rs-ink);
    font-family: inherit; font-size: .85rem; text-align: start;
}

/* ══ بانِي التقارير ══════════════════════════════════════
   كانت الشاشةُ تقريراً واحداً ثابتاً يُطبع كما هو أو لا يُطبع.
   وتقريرُ الفصل ليس تقريرَ مجلس الإدارة: الثاني لا يحتمل اثنين
   وعشرين شريطاً، والأولُ لا يكفيه أربعةُ أرقام. */

.rs-build { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 1rem; align-items: start; }

@media (max-width: 1100px) {
    .rs-build { grid-template-columns: 1fr; }
}

.rs-build__side {
    position: sticky; top: .5rem;
    display: flex; flex-direction: column; gap: .7rem;
    max-height: calc(100vh - 2rem);
    padding: .9rem;
    border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
    background: var(--rs-surface);
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 1100px) {
    /* وحيث صار كتلةً ساكنةً لا شيءَ يُمرَّر فيه، والحاويةُ تقصّ ما يبرز */
    .rs-build__side { position: static; max-height: none; overflow: visible; }
}

.rs-build__box { display: flex; flex-direction: column; gap: .35rem; }
.rs-build__box label { font-size: .75rem; font-weight: 800; color: var(--rs-ink-2); }
.rs-build__hint { font-size: .68rem; line-height: 1.75; color: var(--rs-ink-3); }
.rs-build__row { display: flex; gap: .35rem; }
.rs-build__row .rs-in { flex: 1 1 auto; }

.rs-build__h {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    padding-top: .6rem; border-top: 1px solid var(--rs-line);
    font-size: .78rem; font-weight: 800; color: var(--rs-ink-2);
}

.rs-build select.rs-in { appearance: auto; }

/* وقائمةُ العناصر: تأشيرٌ ومقبضُ سحبٍ وزرّا تقديمٍ وتأخير */
.rs-picks { display: flex; flex-direction: column; gap: .2rem; }

.rs-pick {
    display: flex; align-items: center; gap: .35rem;
    padding: .3rem .4rem;
    border: 1px solid transparent; border-radius: 9px;
}
.rs-pick:hover { background: color-mix(in srgb, var(--rs-teal) 4%, transparent); }
.rs-pick.is-on { border-color: color-mix(in srgb, var(--rs-teal) 28%, transparent); background: color-mix(in srgb, var(--rs-teal) 6%, transparent); }

.rs-pick__g { flex: 0 0 auto; cursor: grab; color: var(--rs-ink-3); font-size: .8rem; letter-spacing: -2px; opacity: .55; }
.rs-pick__g:active { cursor: grabbing; }

.rs-pick__l { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.rs-pick__l input { flex: 0 0 auto; width: .92rem; height: .92rem; accent-color: var(--rs-teal); cursor: pointer; }
.rs-pick__l span { min-width: 0; display: flex; flex-direction: column; }
.rs-pick__l b { font-size: .74rem; font-weight: 700; color: var(--rs-ink); line-height: 1.5; overflow-wrap: break-word; }
.rs-pick__l small { font-size: .62rem; color: var(--rs-ink-3); }
.rs-pick__mv { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }

.fi-sortable-ghost { opacity: .35; }

.rs-saved { display: flex; flex-direction: column; gap: .2rem; margin-top: .3rem; }
.rs-saved__r { display: flex; align-items: center; gap: .3rem; }
.rs-saved__n {
    flex: 1 1 auto; text-align: start;
    padding: .28rem .5rem;
    border: 1px solid var(--rs-line); border-radius: 8px;
    background: var(--rs-surface);
    font-family: inherit; font-size: .74rem; font-weight: 700; color: var(--rs-ink);
    cursor: pointer;
}
.rs-saved__n:hover { border-color: var(--rs-teal); color: var(--rs-teal-fg); }

.rs-build__acts { display: flex; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--rs-line); }
.rs-build__acts .rs-btn { flex: 1 1 0; text-align: center; }

/*
 | ── الورقة ──
 | وما يُرى هنا هو ما يُطبع: الصفحةُ نفسُها هي التقرير، لا معاينةٌ
 | تُشبهه ثم يخرج الورقُ بغيرها.
 */
.rs-sheet {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .7rem;
    align-content: start;
    padding: 1.1rem;
    border: 1px solid var(--rs-line); border-radius: var(--rs-radius);
    background: var(--rs-surface);
}

.rs-rb { min-width: 0; }
.rs-rb--s3 { grid-column: span 3; }
.rs-rb--s4 { grid-column: span 4; }
.rs-rb--s6 { grid-column: span 6; }
.rs-rb--s12 { grid-column: span 12; }

@media (max-width: 900px) {
    .rs-rb--s3 { grid-column: span 6; }
    .rs-rb--s4, .rs-rb--s6 { grid-column: span 12; }
}

.rs-rcard {
    height: 100%; box-sizing: border-box;
    padding: .75rem .85rem;
    border: 1px solid var(--rs-line); border-radius: 12px;
    background: var(--rs-surface);
}
.rs-rcard__h { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rs-rcard__h b { font-size: .84rem; font-weight: 800; line-height: 1.6; }
.rs-rcard__h small { font-size: .68rem; color: var(--rs-ink-3); white-space: nowrap; }

/* ترويسة */
.rs-rhead {
    display: flex; align-items: flex-start; gap: .8rem;
    padding: .2rem .2rem 1rem;
    border-bottom: 2px solid var(--rs-teal);
}
.rs-rhead__m {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border-radius: 12px;
    background: var(--rs-teal); color: #fff; font-size: 1.1rem; font-weight: 800;
}
.rs-rhead__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.rs-rhead__t b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.rs-rhead__t small { font-size: .74rem; color: var(--rs-ink-3); }
.rs-rhead__d { flex: 0 0 auto; text-align: end; display: flex; flex-direction: column; gap: .15rem; }
.rs-rhead__d small { font-size: .66rem; color: var(--rs-ink-3); }
.rs-rhead__d b { font-size: .74rem; font-weight: 800; }

/* عنوانُ قسم */
.rs-rsec {
    display: flex; align-items: baseline; gap: .5rem;
    margin-top: .3rem; padding-bottom: .25rem;
    border-bottom: 1px solid var(--rs-line);
}
.rs-rsec span { font-size: .84rem; font-weight: 800; color: var(--rs-ink); }
.rs-rsec small { font-size: .66rem; color: var(--rs-ink-3); }

/* رقمٌ رأسيّ */
.rs-rkpi {
    height: 100%; box-sizing: border-box;
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem .8rem;
    border: 1px solid var(--rs-line); border-radius: 12px;
    border-top: 3px solid var(--t, var(--rs-teal));
}
.rs-rkpi--ok { --t: var(--rs-teal); }
.rs-rkpi--warn { --t: #C79A3C; }
.rs-rkpi--bad { --t: #B3261E; }
.rs-rkpi__l { font-size: .68rem; font-weight: 700; color: var(--rs-ink-3); }
.rs-rkpi__v { font-size: 1.5rem; font-weight: 800; line-height: 1.35; color: var(--t, var(--rs-teal)); font-variant-numeric: tabular-nums; }
.rs-rkpi--warn .rs-rkpi__v { color: #A87708; }
.dark .rs-rkpi--warn .rs-rkpi__v { color: #E0B54A; }
.rs-rkpi__u { font-size: .64rem; color: var(--rs-ink-3); line-height: 1.6; }

/* صفوفُ الأشرطة */
.rs-rrows { display: flex; flex-direction: column; gap: .38rem; }
.rs-rrow { display: flex; align-items: center; gap: .5rem; }
.rs-rrow__l { flex: 0 0 7.5rem; font-size: .7rem; color: var(--rs-ink-2); line-height: 1.5; overflow-wrap: break-word; }
.rs-rrow__b { flex: 1 1 auto; height: .55rem; border-radius: 99px; background: color-mix(in srgb, var(--rs-ink-3) 11%, transparent); overflow: hidden; }
.rs-rrow__b i { display: block; height: 100%; border-radius: 99px; }
.rs-rrow__v { flex: 0 0 3.6rem; display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; }
.rs-rrow__v b { font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-rrow__v small { font-size: .62rem; color: var(--rs-ink-3); }

/* شريطٌ مركّب ودليلُه */
.rs-rbar { display: flex; height: .62rem; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--rs-ink-3) 11%, transparent); }
.rs-rbar i { display: block; height: 100%; }
.rs-rlgd { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rs-rlgd span { display: inline-flex; align-items: center; gap: .25rem; font-size: .64rem; color: var(--rs-ink-3); }
.rs-rlgd i { display: block; width: .5rem; height: .5rem; border-radius: 3px; }

/* حركةُ الأسابيع */
.rs-rmv { display: flex; align-items: flex-end; gap: .3rem; height: 7rem; }
.rs-rmv__w { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; height: 100%; }
.rs-rmv__bars { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.rs-rmv__bars i { display: block; flex: 1 1 0; max-width: .55rem; border-radius: 3px 3px 0 0; }
.rs-rmv__l { font-size: .55rem; color: var(--rs-ink-3); white-space: nowrap; }

/* جدول */
.rs-rtab { width: 100%; border-collapse: collapse; font-size: .74rem; }
.rs-rtab th, .rs-rtab td { padding: .38rem .45rem; text-align: start; }
.rs-rtab thead th { background: color-mix(in srgb, var(--rs-ink-3) 8%, transparent); font-weight: 800; color: var(--rs-ink-2); font-size: .68rem; }
.rs-rtab thead th:first-child { border-radius: 8px 0 0 8px; }
.rs-rtab thead th:last-child { border-radius: 0 8px 8px 0; }
.rs-rtab tbody th { font-weight: 700; }
.rs-rtab tbody td { border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 60%, transparent); text-align: center; font-variant-numeric: tabular-nums; }
.rs-rtab tbody th { border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 60%, transparent); }
.rs-rtab--list tbody td { text-align: start; }
.rs-rtab__n { font-weight: 700; }
.rs-rtab td.is-bad { color: #B3261E; font-weight: 800; }
.rs-rtab td.is-warn { color: #A87708; font-weight: 800; }
.dark .rs-rtab td.is-bad { color: #F08A8D; }
.dark .rs-rtab td.is-warn { color: #E0B54A; }

/* فاصلُ صفحة */
.rs-rbreak { display: flex; align-items: center; gap: .6rem; }
.rs-rbreak::before, .rs-rbreak::after {
    content: ''; flex: 1 1 auto; height: 0; border-top: 2px dashed color-mix(in srgb, var(--rs-ink-3) 35%, transparent);
}
.rs-rbreak span {
    flex: 0 0 auto; padding: .12rem .55rem; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-teal) 10%, transparent);
    color: var(--rs-teal-fg); font-size: .64rem; font-weight: 800;
}

/*
 | ── وعلى الورق ──
 | لوحُ الاختيار لا يُطبع (rs-noprint قائمةٌ في ورقة الطباعة)، والشبكةُ
 | تبقى كما هي — وبطاقةٌ تنقسم بين صفحتين تُقرأ نصفين.
 */
@media print {
    .rs-build { display: block; }
    .rs-sheet { border: 0; padding: 0; gap: .5rem; }
    .rs-rcard, .rs-rkpi { break-inside: avoid; }
    .rs-rb--break { break-before: page; }
    .rs-rbreak { display: none; }
    .rs-rhead { break-after: avoid; }
    .rs-rsec { break-after: avoid; }
    .rs-rtab { break-inside: auto; }
    .rs-rtab tr { break-inside: avoid; }
    .rs-rtab thead { display: table-header-group; }
}

/* ══ رسومٌ لا تُخمَّن أشكالُها ═════════════════════════════
   الشكلُ يتبع شكلَ البيانات: قسمةٌ أو ثلاثٌ تُقرأ في دائرةٍ بنظرة،
   وعشرةُ تصنيفاتٍ مرتَّبةٍ بالأكبر لا تُقرأ فيها أبداً — فقطاعٌ في
   ثلاثة بالمئة لا يُرى ولا يُسمّى. */

/*
 | والمتصفحُ لا يطبع الأرضيّات ما لم يُطلَب إليه.
 |
 | فشريطٌ لونُه أرضيّةٌ يخرج على الورق شريطاً أبيضَ في إطار: التقريرُ
 | يُرسَل فارغاً ولا يدري مُرسِلُه. و`print-color-adjust` تُلزم المتصفحَ
 | بطباعة ما رُسم.
 */
.rs-dist__bar i,
.rs-cols__b i,
.rs-donut__k i,
.rs-rrow__b i,
.rs-rbar i,
.rs-rmv__bars i,
.rs-track i {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ── الدائرة ── */
/*
 | والدائرةُ كانت وحدَها بلا غُرّة: سهمُها الأخير `small` محاذٍ
 | للنهاية — وهي في العربية اليسار — فتلصق «٪٧٦» بحدِّ البطاقة لصوقاً،
 | وبينهما صفرُ بكسل. وهو عينُ ما شُكي منه.
 */
.rs-donut { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem 1rem; }

.rs-donut__g { flex: 0 0 auto; width: 7.5rem; height: 7.5rem; transform: rotate(-90deg); }
.rs-donut__g circle {
    fill: none;
    stroke-width: 15;
}
.rs-donut__track { stroke: color-mix(in srgb, var(--rs-ink-3) 13%, transparent); }

/* والنصُّ في قلبها يعود إلى وضعه: الدائرةُ أُديرت ربعاً لتبدأ من أعلى */
.rs-donut__n, .rs-donut__u {
    transform: rotate(90deg);
    transform-origin: 60px 60px;
    text-anchor: middle;
    fill: var(--rs-ink);
}
.rs-donut__n { font-size: 20px; font-weight: 800; }
.rs-donut__u { font-size: 9px; font-weight: 700; fill: var(--rs-ink-3); }

/*
 | وأساسُ الدليل سبعةُ ريماتٍ لا تسع: الحشوةُ فوق تأخذ خمسةً وثلاثين
 | بكسلاً من عرض البطاقة، وبطاقاتُ «لوحة مشرف الخطة» في شبكتها الثلاثيّة
 | مئتان وتسعةٌ وثمانون — فعند تسعةٍ ينزل الدليلُ تحت الدائرة وتطول
 | البطاقةُ ستّين بكسلاً بلا سبب. وأرضيّةُ الدليل البنيويّة ثمانيةٌ
 | وسبعون، فسبعةٌ فضلٌ عنها.
 */
.rs-donut__k { flex: 1 1 7rem; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.rs-donut__k li { display: flex; align-items: center; gap: .4rem; font-size: .74rem; }
.rs-donut__k i { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 3px; }
.rs-donut__k span { flex: 1 1 auto; min-width: 0; color: var(--rs-ink-2); overflow-wrap: break-word; }
.rs-donut__k b { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-donut__k small { flex: 0 0 2.2rem; text-align: end; color: var(--rs-ink-3); font-size: .66rem; }

/* ── الأعمدة ── */
/*
 | والارتفاعُ الثابتُ ينزل من الصفّ إلى المِضمار.
 |
 | كان الصفُّ تسعةَ ريماتٍ صمّاء، والعنوانُ تحته `flex: 0 0 auto` لا
 | ينضغط — فـ«لا تنطبق إطلاقاً» في عمودٍ عرضُه سبعةٌ وأربعون بكسلاً
 | ينزل ثلاثةَ أسطرٍ فيتجاوز التسعة، ولا `overflow` على الصفّ فتقصّه
 | البطاقةُ من تحته. فصار الثابتُ على المِضمار وحدَه: الصفُّ يطول بأطول
 | عنوان، وكلُّ الأعمدة تبتدئ من سطرٍ واحدٍ فتستوي قواعدُها — وهو ما
 | يُقرأ عليه الرسم. والنسبةُ في `style` تبقى تُحلّ على ارتفاعٍ مصرَّح،
 | فلو جُعل الصفُّ `auto` وحدَه لصارت `auto` واختفت الأعمدةُ كلُّها.
 */
.rs-cols { display: flex; align-items: flex-start; gap: .5rem; padding: 1rem 1.1rem .9rem; }

.rs-cols__c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.rs-cols__n { flex: 0 0 auto; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rs-ink); }
.rs-cols__b { flex: 0 0 auto; height: 6.5rem; width: 100%; max-width: 3rem; display: flex; align-items: flex-end; }
.rs-cols__b i { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.rs-cols__l {
    flex: 0 0 auto; width: 100%;
    font-size: .64rem; line-height: 1.4; color: var(--rs-ink-3); text-align: center;
    overflow-wrap: break-word;
}

@media (max-width: 560px) {
    .rs-cols { gap: .3rem; padding: .8rem .8rem .7rem; }
    .rs-cols__b { height: 5rem; }
    .rs-cols__l { font-size: .58rem; }
}

/* ── شريطٌ مكدَّسٌ بمئةٍ في المئة ──
   شكلُ السلّم: «مبتدئ ثم متوسط ثم متخصص» تُقرأ حصصُه بترتيبها،
   والدائرةُ تُضيّع الترتيب فتصير الفئاتُ متجاورةً بلا وجهة. */
.rs-stack {
    display: flex; height: .95rem; margin: .2rem 0 .6rem;
    border-radius: 99px; overflow: hidden;
    background: color-mix(in srgb, var(--rs-ink-3) 11%, transparent);
}
.rs-stack i {
    display: block; height: 100%;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.rs-stack__k { margin: 0; padding: 0; list-style: none; display: grid; gap: .28rem; }
.rs-stack__k li { display: flex; align-items: center; gap: .4rem; font-size: .73rem; }
.rs-stack__k i { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 3px; }
.rs-stack__k span { flex: 1 1 auto; min-width: 0; color: var(--rs-ink-2); overflow-wrap: break-word; }
.rs-stack__k b { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-stack__k small { flex: 0 0 2.2rem; text-align: end; color: var(--rs-ink-3); font-size: .65rem; }

/* ── القمع ──
   مئةُ بندٍ أُسنِدت وعشرون أُكِّدت حالٌ غيرُ مئةٍ أُسنِدت وتسعين
   أُكِّدت — والرقمُ الأول واحدٌ فيهما. */
.rs-fun { display: grid; gap: .45rem; }
.rs-fun__s { display: flex; align-items: center; gap: .5rem; }
.rs-fun__l { flex: 0 0 7rem; font-size: .74rem; font-weight: 700; color: var(--rs-ink-2); }
.rs-fun__b { flex: 1 1 auto; height: 1.1rem; border-radius: 7px; background: color-mix(in srgb, var(--rs-ink-3) 9%, transparent); overflow: hidden; }
.rs-fun__b i { display: block; height: 100%; border-radius: 7px; }
.rs-fun__v { flex: 0 0 3.8rem; display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; }
.rs-fun__v b { font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rs-fun__v small { font-size: .63rem; color: var(--rs-ink-3); }
.rs-fun__n { margin: -.2rem 0 .1rem 0; padding-inline-start: 7.5rem; font-size: .66rem; color: var(--rs-ink-3); }

/* ── المصّاصة على محورٍ ثابت ──
   والمحورُ لا يتمدّد بالبيانات: لو تمدّد لبدا الفرقُ بين ٣٫٩ و٤٫١
   هوّةً، وهو عُشرٌ في سلّمٍ من خمس. */
.rs-lolli { display: grid; gap: .4rem; padding: .9rem 1.1rem 0; }
.rs-lolli__r { display: flex; align-items: center; gap: .5rem; }
.rs-lolli__l { flex: 0 0 11rem; font-size: .72rem; line-height: 1.55; color: var(--rs-ink-2); overflow-wrap: break-word; }
.rs-lolli__a {
    position: relative; flex: 1 1 auto; height: .5rem;
    border-radius: 99px;
    background: linear-gradient(to left,
        color-mix(in srgb, var(--rs-ink-3) 16%, transparent),
        color-mix(in srgb, var(--rs-ink-3) 6%, transparent));
}
.rs-lolli__d {
    position: absolute; inset-block-start: 50%;
    width: .78rem; height: .78rem; margin-inline-start: -.39rem;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px var(--rs-surface);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rs-lolli__v { flex: 0 0 2rem; text-align: end; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/*
 | ومحورُ المصّاصة يبقى محاذياً لمِضمارها بعد الغُرّة: أحدَ عشرَ للعنوان
 | ونصفٌ للفجوة، وريمٌ وعُشرٌ للغُرّة الجديدة. ويلتفّ ولا يخرج: طرفاه
 | يُشتقّان من خيارات القسم، وقد يطولان على جوّال.
 */
.rs-lolli__x {
    display: flex; flex-wrap: wrap; margin-top: .4rem;
    padding-inline: 12.6rem 1.1rem; padding-bottom: .9rem;
    font-size: .62rem; color: var(--rs-ink-3);
}

@media (max-width: 640px) {
    .rs-lolli__l { flex: 0 0 7rem; }
    .rs-lolli__x { padding-inline-start: 8.6rem; }
    .rs-fun__l { flex: 0 0 5.5rem; }
    .rs-fun__n { padding-inline-start: 6rem; }
}

/* ── ورقةُ اللوحة: عناوينُ الأقسام ──
   عشرُ بطاقاتٍ متجاورةٍ بلا عناوينَ رُكامٌ يُمرَّر بينه؛ والعنوانُ
   يقول لِمَ اجتمعت هذه دون تلك. */
.rs-band {
    display: flex; align-items: baseline; gap: .55rem;
    margin: 1.6rem 0 .1rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid color-mix(in srgb, var(--rs-teal) 40%, transparent);
}
.rs-band h2 { margin: 0; font-size: .95rem; font-weight: 800; color: var(--rs-ink); }
.rs-band p { margin: 0; font-size: .72rem; color: var(--rs-ink-3); line-height: 1.7; }
.rs-band__n {
    flex: 0 0 auto; padding: .1rem .5rem; border-radius: 99px;
    background: color-mix(in srgb, var(--rs-teal) 11%, transparent);
    color: var(--rs-teal-fg); font-size: .66rem; font-weight: 800;
}

/* وبطاقةٌ تأخذ عرضَ الشبكة: المصّاصةُ بخمسة أسطرٍ ومحورٍ لا تُقرأ في ثلثِ صفّ */
.rs-card--wide { grid-column: 1 / -1; }

/* ══ نافذةُ الخطة — باباً واحداً ═════════════════════════
   كان «استعراض الخطة» و«أضف أنشطة الخطة» زرّين لشيءٍ واحد، فصارا
   «الخطة»: تُعرض عناصرُها، وفي أعلاها «إضافة». */

/*
 | وأيقونةُ إغلاقٍ في رأس كل نافذة.
 |
 | كانت تُغلق بالمفتاح أو بالنقر على الستار — وكلاهما لا يُرى. فمن
 | لا يعرفهما يبقى في النافذة يبحث عن مخرج، أو يُعيد تحميل الصفحة.
 */
.rs-x {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem;
    border: 1px solid var(--rs-line); border-radius: 9px;
    background: var(--rs-surface); color: var(--rs-ink-2);
    cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.rs-x svg { width: .95rem; height: .95rem; }
.rs-x:hover { border-color: var(--rs-bad); color: var(--rs-bad-fg); }

/* ولنصٍّ لا يراه إلا قارئُ الشاشة: عمودُ الأيقونات لا عنوانَ له */
.rs-vh {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/*
 | ── قرارُ ختام الخطة ──
 | «إيقاف المتابعة» يُكتب في البطاقة الختامية، ولا أثرَ له في شيءٍ
 | يُرى — فيفتح المرشدُ الخطةَ بعده فيجدها كما تركها.
 */
.rs-rev__closed {
    margin: 0; padding: .6rem 1.1rem;
    font-size: .8rem; line-height: 1.85; color: var(--rs-ink-2);
    background: color-mix(in srgb, var(--rs-ink-3) 7%, transparent);
    border-bottom: 1px solid var(--rs-line);
}
.rs-rev__closed b { font-weight: 800; color: var(--rs-ink); }

/* ── رأسُ الخطة يُقرأ فوق جدولها ── */
.rs-brief { padding: .9rem 1.1rem 0; }
.rs-brief__crit {
    margin: .2rem 1.1rem .9rem;
    padding: .5rem .7rem;
    font-size: .78rem; line-height: 1.8; color: var(--rs-ink-2);
    background: color-mix(in srgb, var(--rs-teal) 7%, transparent);
    border-inline-start: 3px solid var(--rs-teal);
    border-radius: 10px;
}

/*
 | ── عمودُ الإنجاز ──
 | و«٣٠٪» وحدَها لا تقول أثلاثةٌ من عشرة أم ثلاثون من مئة، والفرقُ
 | بينهما هو الفرقُ بين خطةِ أسبوعٍ وخطةِ فصل.
 */
.rs-prog {
    display: block; width: 4.5rem; height: .42rem;
    margin-bottom: .25rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--rs-ink-3) 13%, transparent);
    overflow: hidden;
}
.rs-prog i {
    display: block; height: 100%; border-radius: 99px;
    background: var(--rs-teal);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* ولا يُكسَر رقمٌ عن علامته: «٣٠٪» تُقرأ شطرين، و«٣ من ١٠» ثلاثةً */
.rs-prog__n { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-prog__of { display: block; font-size: .68rem; color: var(--rs-ink-3); white-space: nowrap; }

/* وحاوي الإنجاز: في الحاسوب لا يفعل شيئاً، وفي البطاقة يجمع الشريطَ
   والنسبةَ والمقدارَ عنصراً واحداً في عمود القيمة. */
.rs-prog__c { display: block; }

.rs-rev__kind { display: block; font-size: .68rem; font-weight: 600; color: var(--rs-ink-3); }
.rs-rev__crit { display: block; color: var(--rs-ink-2); line-height: 1.75; }
.rs-rev__acts { white-space: nowrap; }
.rs-rev__acts .rs-ico + .rs-ico { margin-inline-start: .25rem; }

/* ── ما ينتظر تأكيدك — يوماً يوماً ── */
/* ── ما أنجزه حديثاً: خبرٌ لا إنذار، فلا كهرمانَ فيه ── */
.rs-did {
    margin: .9rem 1.1rem;
    padding: .7rem .8rem;
    border: 1px solid color-mix(in srgb, var(--rs-teal) 35%, var(--rs-line));
    border-radius: var(--rs-radius);
    background: color-mix(in srgb, var(--rs-teal) 6%, transparent);
}

/* ── استنساخُ الخطة ── */
.rs-clone { padding: 1rem 1.1rem 1.2rem; }
.rs-clone__say {
    margin: 0 0 .8rem; font-size: .82rem; line-height: 1.9; color: var(--rs-ink-2);
}
.rs-clone__who { max-height: 18rem; overflow-x: hidden; overflow-y: auto; }
.rs-clone__who .rs-opt i { font-size: .66rem; color: var(--rs-ink-3); font-style: normal; }

/* ── ما تقوله خطتُه داخل بطاقة التقييم ── */
.rs-diag__brief, .rs-diag__plan {
    margin: 0 0 1rem;
    padding: .75rem .85rem;
    border: 1px dashed var(--rs-line);
    border-radius: var(--rs-radius);
}
.rs-diag__plan .rs-rev__w { margin-top: .4rem; }
.rs-diag__skill {
    margin: .1rem 0 0;
    font-size: .88rem; font-weight: 800; color: var(--rs-ink);
}

/* ══ الفرزُ الأوّلي ══════════════════════════════════════
   من يشبه من، ومن يجلس مع من — قبل أن تُقسَّم المجموعات. */

/*
 | وبطاقةٌ داخل بطاقة: المجموعةُ المقترحة ليست لوحاً قائماً بنفسه،
 | فحدٌّ كاملٌ وظلٌّ يجعلان عشرَ مجموعاتٍ عشرةَ ألواحٍ متجاورةٍ لا
 | يُعرف أيُّها أصلٌ وأيُّها فرع.
 */
.rs-card--in {
    margin: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--rs-ink-3) 4%, var(--rs-surface));
}

.rs-who__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.rs-who__list li { display: flex; align-items: center; gap: .55rem; }

/*
 | ── وما يُضمَّن في بطاقةٍ يأخذ غُرّتَه منها ──
 |
 | ‏`.rs-card` بلا حشوةٍ أصلاً و`.rs-card__h` وحدَه مُحشوّ، والأشكالُ
 | والقوائمُ تُضمَّن أبناءً مباشرين لا جسدَ بينها وبين الحدّ. فالشبكةُ
 | تلصق بطاقاتِها الداخليةَ من جهاتها الأربع، وتقصُّ زاويةُ الأمّ
 | المدوّرةُ أركانَ الأربع منها، وأسماءُ المجموعة تلصق كذلك.
 |
 | والمحدِّدُ ابنٌ مباشرٌ قصداً لا انحدار: ذيلُ `_dist` داخلَ `.rs-dist`
 | يرث حشوتَها، فلو أُعطيها بالانحدار حُشي مرّتين.
 */
.rs-card > .rs-grid { padding: 1.1rem; }
.rs-card--in > .rs-who__list { padding: 0 1.1rem 1rem; }
.rs-card > .rs-dist__none { padding: .9rem 1.1rem 1rem; }
.rs-card > .rs-dist__foot { padding-inline: 1.1rem; padding-bottom: .9rem; }

/* والشريطُ المكدَّسُ معها: هو ابنٌ مباشرٌ في ستّة مواضعَ من لوحة المشرف،
   ولو أُزيح ذيلُه وحدَه لانفرد الذيلُ بالغُرّة دون دليلٍ فوقه. */
.rs-card > .rs-stack { margin-inline: 1.1rem; }
.rs-card > .rs-stack__k { padding-inline: 1.1rem; }
.rs-card > .rs-stack__k:last-child { padding-bottom: 1rem; }

/*
 | وأربعون اسماً في عمودٍ واحدٍ داخلَ نافذةٍ عرضُها ستٌّ وأربعون ريماً
 | شريطٌ رفيعٌ في وسط بياض — فتُقسَم أعمدةً بقدر ما يتّسع.
 */
.rs-pane__b > .rs-who__list { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/*
 | وشبكةُ الفرز تتّسع قبل الحاسوب: البطاقاتُ قصيرةٌ فلا تحتاج ألفاً ومئة.
 |
 | وأدناها تسعةَ عشرَ لا سبعةَ عشر: عند سبعةَ عشرَ تقع شاشةُ ألفٍ
 | وخمسمئةٍ وستٍّ وثلاثين — وهي شاشةُ ألفٍ وتسعمئةٍ بتكبير مئةٍ
 | وخمسةٍ وعشرين، أي شاشةُ الصورة التي شُكي منها — على أربعِ خاناتٍ
 | بأقلِّ مقاسٍ ممكنٍ تماماً وفضلةٍ نصفِ بكسلٍ في الصفِّ كلِّه. فصارت
 | ثلاثاً عرضُ الواحدة ثلاثُمئةٍ وثمانٍ وخمسون.
 */
@media (min-width: 720px) {
    .rs-card .rs-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}

/* والشريطُ العلويُّ لاصق، فما يُقفَز إليه يقف تحته لا خلفه */
.rs-band, .rs-inst { scroll-margin-top: 5rem; }

/* وثلاثُ أدواتٍ في صفحةٍ تطول صفحتين: القفزُ إليها تنقّلٌ لا تصفية —
   يَنقل العينَ ولا يطوي رسماً. والشريحةُ هي شريحةُ اللوحة نفسُها بكلِّ
   أحوالها، فلا يتعلّم المشرفُ شكلاً ثانياً لشيءٍ واحد. */
.rs-opt--jump { display: inline-flex; align-items: center; text-decoration: none; }

/*
 | ── وكلُّ خيارٍ مرسومٍ بابٌ إلى أهله ──
 |
 | «أحدَ عشرَ قالوا أقلَّ من خمس ساعات» رقمٌ لا يُجلَس به أحد: المشرفُ
 | يريد أسماءَهم ليُجلسهم معاً، وكان يفتح «الخطط الشخصية» طالباً طالباً
 | حتى يجدهم — أحدَ عشرَ باباً لخيارٍ واحد، وفي الأدوات اثنان وعشرون
 | سؤالاً.
 |
 | والزرُّ يُجرَّد من سَمت المتصفح تجريداً، وحشوتُه الافتراضيةُ أخصُّ ما
 | يُجرَّد: بكسلٌ وستّةٌ تُزيح عرضَ العمود، فيختلف عمودٌ مرسومٌ عن جاره
 | بلا سبب. ويُعاد تصريحُ `display` في كلِّ فرعٍ لأنّ سفاري يفرض
 | ‏`inline-block` على الأزرار بـ`-webkit-appearance`.
 */
.rs-peek__b, .rs-peek__c, .rs-peek__r {
    appearance: none; -webkit-appearance: none;
    margin: 0; padding: 0; border: 0;
    background: transparent; color: inherit; font: inherit;
    text-align: inherit; white-space: normal;
    cursor: pointer; border-radius: 8px;
    transition: background .14s ease, color .14s ease;
}

.rs-peek__b:focus-visible, .rs-peek__c:focus-visible, .rs-peek__r:focus-visible {
    outline: 2px solid var(--rs-teal-fg); outline-offset: 2px;
}

/*
 | وأرضٌ تُلوَّن عند المرور كما يُفعل بكلِّ صفٍّ يُنقر في اللوحة —
 | ‏`.rs-qrow` و`.rs-pick` كلاهما يمزج الأخضرَ في أرضه. ولا يُرفع
 | العمودُ ولا يُزاح: قواعدُ الأعمدة مستويةٌ يُقرأ الرسمُ عليها، ورفعُ
 | واحدٍ منها يكذب على العين.
 */
.rs-peek__b:not([disabled]):hover,
.rs-peek__r:not([disabled]):hover { background: color-mix(in srgb, var(--rs-teal) 7%, transparent); }
.rs-peek__c:not([disabled]):hover { background: color-mix(in srgb, var(--rs-teal) 6%, transparent); }

/* وما دام النداءُ في الطريق لا يُنقر ثانيةً: النقرةُ تُعيد بناءَ الحقيبة
   وجدولِ التشابه، فنقرتان متسارعتان نداءان لا يُفيد ثانيهما — ولا خبرَ
   على الشاشة أنّ الأولى وصلت. */
.rs-peek__b[disabled], .rs-peek__c[disabled], .rs-peek__r[disabled] { cursor: progress; opacity: .55; }

.rs-peek__b { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; padding-inline: .2rem; }
.rs-peek__c { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 1 1 0; min-width: 0; }
.rs-peek__r { display: grid; width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .rs-peek__b, .rs-peek__c, .rs-peek__r { transition: none; }
}

/*
 | والبابُ يُلمَس بإصبعٍ لا بفأرة.
 |
 | سطرُ الدليل حرفُه أربعةٌ وسبعون من المئة، فارتفاعُه ثمانيةَ عشرَ
 | بكسلاً — نصفُ ما رُفعت إليه أزرارُ هذه اللوحة وأيقوناتُها وشرائحُها.
 | وهو أكثرُ أبوابها عدداً: سبعةٌ وثمانون في شاشةٍ واحدة، إصابةُ
 | الخاطئِ منها تفتح أسماءَ غير من أُريد.
 |
 | و`flex`/`grid` لا يُعاد تصريحُهما: `min-height` لا يُنازعهما.
 */
@media (max-width: 720px) {
    .rs-peek__b, .rs-peek__r { min-height: 2.25rem; }
}

/* ══ الجوال: ما يُلمَس يُلمَس بالإصبع ═══════════════════
   لوحةُ المشرف كُتبت للفأرة: زرٌّ ارتفاعُه ثلاثةٌ وعشرون بكسلاً
   يُصاب بها بدقّة، ويُخطئه الإبهامُ مرّةً من ثلاث. والمشرفُ يعمل من
   جواله بين الحلقات لا من مكتبه. */
@media (max-width: 720px) {
    /*
     | وأدنى ما يُلمس: ستٌّ وثلاثون. والمعيارُ أربعٌ وأربعون، وهو
     | يُفرّق صفَّ الطالب سطرين — فوُقِف عند ستٍّ وثلاثين: تُصاب
     | بالإبهام ولا تُفرّق الصفّ.
     */
    .rs-mini,
    .rs-btn--sm {
        min-height: 2.25rem;
        display: inline-flex; align-items: center; justify-content: center;
        padding-block: .35rem;
    }

    .rs-ico { width: 2.25rem; height: 2.25rem; }
    .rs-x { width: 2.25rem; height: 2.25rem; }

    /*
     | والشريحةُ تُلمس كما يُلمس الزرّ.
     |
     | رُفعت الأزرارُ والأيقوناتُ إلى ستٍّ وثلاثين ونُسيت الشريحة، وهي
     | أكثرُ ما يُنقر في اللوحة: بطاقةُ التقييم وحدَها نحوُ خمسٍ وثلاثين
     | شريحةً يضغطها المشرفُ واحدةً واحدة، وارتفاعُها اثنان وثلاثون.
     |
     | ولا حشوةَ رأسيّةٌ هنا: `min-height` هو الحاكم، والحشوةُ لو كُتبت
     | غلبت مختصرَ `.rs-opt--tall` فقصّرت الشريحةَ الطويلة ثلاثةَ
     | بكسلاتٍ على الشاشة التي هي لها.
     */
    .rs-opt { min-height: 2.25rem; }

    /* والطويلةُ تُستثنى من `inline-flex`: هي شبكةٌ بعمودين — دائرتُها
       عمودٌ وعنوانُها ووصفُها عمود. ولولا الاستثناءُ لغلبتها هذه
       القاعدةُ بموضعها في الملفّ، فصار العنوانُ والوصفُ في سطرٍ واحدٍ
       تتزاحمان فيه، وقصُرت البطاقةُ من ستٍّ وخمسين إلى سبعٍ وثلاثين —
       على الشاشة التي كُتبت الشبكةُ لها. */
    .rs-opt:not(.rs-opt--tall) { display: inline-flex; align-items: center; }
    .rs-opt:not(.rs-opt--check):not(.rs-opt--tall) { justify-content: center; }
    .rs-opts { gap: .5rem .35rem; }

    /*
     | وأبوابُ الطالب تُعرض شبكةً لا صفّاً يلتفّ.
     |
     | خمسةُ أزرارٍ مختلفةِ العرض تلتفّ في ثلاثمئةٍ وخمسةٍ وسبعين
     | بكسلاً فتقع اثنان في سطرٍ وثلاثةٌ في آخر بحوافَّ غيرِ مستقيمة،
     | ويُقرأ الصفُّ رُكاماً. والشبكةُ تجعلها متساويةً تُقرأ عموداً
     | عموداً.
     */
    .rs-doors__row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .4rem;
        width: 100%;
    }
    .rs-doors__row .rs-mini { width: 100%; white-space: normal; }

    /* وصفُّ الطالب يلتفّ: الاسمُ سطرٌ وأبوابُه تحته */
    .rs-row { flex-wrap: wrap; row-gap: .5rem; }
    .rs-row__t { flex: 1 1 100%; min-width: 0; }

    /* وقدمُ الاستعراض تلتفّ بدل أن تُقصّ */
    .rs-rev__f { gap: .5rem 1rem; }
}

/*
 | ── أبوابُ اللقاء الثلاثة ──
 | يُثبَّت، أو يُعدَّل موعدُه، أو يُرفع. وكان التثبيتُ جملةً واحدةً لكلِّ
 | ما اقتُرح، فمن أراد موعداً واحداً ثبّت عشرة.
 */
.rs-mtg__acts { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

/* ── حضورُ الطالب في لقائه: قرصٌ يُضغط فيدور ──
   والألوانُ ألوانُ شاشة التحضير بأعيانها — من غيّرها غيّرها هنا
   وفي PlanMeeting::ATTENDANCE، وذاك للرسوم وهذا للشاشة. */
.rs-att {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .24rem .6rem;
    border: 1px solid currentColor;
    border-radius: 99px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font: inherit; font-size: .7rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .14s, color .14s;
}
.rs-att:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.rs-att:focus-visible { outline: 2px solid var(--rs-teal); outline-offset: 2px; }
.rs-att--none { color: var(--rs-ink-3); border-color: var(--rs-line); background: var(--rs-surface); }
.rs-att--present { color: #0E7A45; }
.rs-att--late    { color: #C98A0A; }
.rs-att--excused { color: #1D4E89; }
.rs-att--absent  { color: #B3261E; }
.dark .rs-att--present { color: #48C68C; }
.dark .rs-att--late    { color: #E0B54A; }
.dark .rs-att--excused { color: #8FB4E8; }
.dark .rs-att--absent  { color: #F08A8D; }

/* وفي الكشف يتّسع القرصُ لاسمٍ فوق حاله */
.rs-att--wide {
    display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
    width: 100%; padding: .55rem .7rem; border-radius: 10px; white-space: normal;
}
.rs-att--wide b { font-weight: 800; font-size: .78rem; color: var(--rs-ink); }
.rs-att--wide i { font-style: normal; font-size: .7rem; }

/* ── كشفُ الغرفة: الثمانيةُ معاً في موضعٍ واحد ── */
.rs-room {
    margin: -.2rem 0 .55rem;
    padding: .7rem .8rem;
    border: 1px dashed var(--rs-line);
    border-radius: 10px;
    background: var(--rs-surface);
}
.rs-room__h {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin-bottom: .6rem; font-size: .8rem;
}
.rs-room__g {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

/* وتعديلُ الموعد سطرٌ يُفتح تحته: يومُه وساعتُه */
.rs-mtg__slot {
    display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap;
    margin: -.2rem 0 .5rem;
    padding: .7rem .85rem;
    border: 1px dashed var(--rs-line);
    border-radius: var(--rs-radius);
    background: color-mix(in srgb, var(--rs-ink-3) 4%, transparent);
}
/*
 | والقواعدُ على الابن المباشر لا على كلِّ نسل: صار في اللوحين شرائحُ
 | ومربّعاتٌ داخلَ عناوينها، و`.rs-mtg__slot label` تغلب `.rs-opt--check`
 | وزناً — فتُسطَّح الشريحةُ، ويصير مربّعُ الاختيار حقلاً بعرض الصفّ.
 */
.rs-mtg__slot > label,
.rs-mtg__form > label { display: block; }
.rs-mtg__slot > label > span,
.rs-mtg__form > label > span {
    display: block; margin-bottom: .25rem;
    font-size: .73rem; font-weight: 700; color: var(--rs-ink-2);
}
.rs-mtg__slot > label > input,
.rs-mtg__form > label > input {
    width: 100%; padding: .42rem .6rem;
    border: 1px solid var(--rs-line); border-radius: 8px;
    background: var(--rs-surface); color: var(--rs-ink);
    font: inherit; font-size: .82rem;
}
/* والمكانُ نصٌّ حرٌّ لا تقويم: لا عرضَ طبيعيَّ له فينكمش إلى حرفين */
.rs-mtg__slot > label:has(input[type="text"]),
.rs-mtg__form > label:has(input[type="text"]) { flex: 1 1 10rem; }
.rs-mtg__slot > label > em,
.rs-mtg__form > label > em { display: block; margin-top: .22rem; font-size: .7rem; font-style: normal; color: var(--rs-bad-fg); }

@media (max-width: 720px) {
    /* وصفُّ اللقاء يلتفّ: تاريخُه سطرٌ وأبوابُه تحته */
    .rs-mtg__row { flex-wrap: wrap; row-gap: .5rem; }
    /* وحيث انكسر الصفُّ لا يبقى الخطُّ الفاصلُ تِيكاً فوق العنوان */
    .rs-mtg__b { flex: 1 1 100%; min-width: 0; padding-inline-start: 0; border-inline-start: 0; }
    .rs-mtg__acts { flex: 1 1 100%; flex-wrap: wrap; }
    .rs-mtg__slot > label,
    .rs-mtg__form > label { flex: 1 1 8rem; }
}

/* ══ جدولٌ يصير بطاقاتٍ حيث ضاق ═════════════════════════
   «لا أريد أن يكون هناك أي صفحة أو نافذة فيها شريط أفقي نهائياً».

   وجدولُ الأنشطة سبعةُ أعمدةٍ لا تُكسَر خلاياها — فُتح له مُمرِّرٌ
   أفقيٌّ يُقرأ في الحاسوب ولا يُقرأ في الجوال: عمودان يظهران وخمسةٌ
   تُقصّ، ولا شيءَ يقول إن وراءها شيئاً. والمُمرِّرُ الأفقي في صفحةٍ
   تُمرَّر عمودياً يُخطئه الإبهامُ ويُحرّك الصفحةَ كلَّها.

   فالصفُّ يصير بطاقةً: عنوانُ العمود إلى جانب قيمته من `::before`،
   واسمُ المادة رأسَها. والحاسوبُ يبقى جدولاً — الجدولُ يُقارَن فيه
   صفٌّ بصفّ، وذلك عملُ الشاشة الواسعة. */
@media (max-width: 900px) {
    .rs-rev__t,
    .rs-rev__t tbody,
    .rs-rev__t tr,
    .rs-rev__t td { display: block; width: auto; }

    /* ورأسُ الجدول لقارئ الشاشة وحدَه: عناوينُه صارت في كل خليّة */
    .rs-rev__t thead {
        position: absolute; width: 1px; height: 1px;
        margin: -1px; padding: 0; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; border: 0;
    }

    .rs-rev__t tr {
        margin: .6rem .8rem;
        border: 1px solid var(--rs-line);
        border-radius: var(--rs-radius);
        background: color-mix(in srgb, var(--rs-ink-3) 3%, var(--rs-surface));
        overflow: hidden;
    }
    .rs-rev__t tr:first-child { margin-top: .8rem; }
    .rs-rev__t tr:last-child { margin-bottom: .8rem; }

    .rs-rev__t td {
        display: grid;
        grid-template-columns: 5.4rem minmax(0, 1fr);
        align-items: baseline;
        gap: .2rem .7rem;
        padding: .45rem .75rem;
        border-bottom: 1px solid color-mix(in srgb, var(--rs-line) 60%, transparent);
        white-space: normal;
        overflow-wrap: break-word;
    }
    .rs-rev__t td:last-child { border-bottom: 0; }

    .rs-rev__t td::before {
        content: attr(data-label);
        font-size: .69rem; font-weight: 800; color: var(--rs-ink-3);
        line-height: 1.7;
    }

    /*
     | واسمُ المادة رأسُ البطاقة لا سطراً فيها: هو ما يُبحث عنه،
     | وعنوانُ عمودِه — «المادة» — لا يُضيف إليه شيئاً.
     */
    .rs-rev__t .rs-rev__ttl {
        display: block;
        padding: .6rem .75rem .5rem;
        background: color-mix(in srgb, var(--rs-teal) 6%, transparent);
        border-bottom: 1px solid var(--rs-line);
        font-size: .88rem;
    }
    .rs-rev__t .rs-rev__ttl::before { content: none; }

    /* وأبوابُ الصفّ صفٌّ من أزرارٍ لا خليّةٌ ضيّقة */
    .rs-rev__acts {
        display: flex; gap: .4rem;
        white-space: normal;
    }
    .rs-rev__acts::before { content: none; }

    .rs-rev__crit { max-width: none; }

    /* والإنجازُ شيءٌ واحد: شريطٌ ونسبةٌ ومقدار — لا ثلاثةُ عناصرَ في
       شبكةٍ ذاتِ عمودين، فتقع «٣٠٪» في خانة العنوان. */
    .rs-prog__c { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
    .rs-prog__c .rs-prog { flex: 0 0 auto; margin-bottom: 0; }
    .rs-prog__c .rs-prog__of { display: inline; }

    /* وصفُّ «لا شيء» ليس بطاقةً بخانتين: عنوانٌ فارغٌ يترك ثُلمة */
    .rs-rev__t td[colspan] {
        display: block;
        padding: .8rem .75rem;
        color: var(--rs-ink-2);
        text-align: center;
    }
    .rs-rev__t td[colspan]::before { content: none; }
}

/* ══ أيامُ الأسبوع: سبعةُ أقراصٍ في صفّ ══════════════════
   كانت سبعةَ مربّعاتٍ فيها «الأربعاء» و«الثلاثاء» — لا تقف في صفٍّ
   واحدٍ في الجوال فتلتفّ سطرين بحوافَّ غير مستقيمة، ومربّعُ الاختيار
   فيها فارغٌ صغيرٌ لا يُعرف منه المختارُ إلا بالتدقيق. */
/*
 | وسبعةُ الأقراص شبكةٌ من سبعة أعمدة لا صفٌّ يلتفّ.
 |
 | الصفُّ المرنُ يضع خمسةً في سطرٍ واثنين في الذي يليه حيث ضاقت
 | الشاشة، فيُقرأ الأسبوعُ مكسوراً. والشبكةُ تقسم ما بين يديها على
 | سبعةٍ كائناً ما كان، فيبقى الأسبوعُ أسبوعاً.
 */
.rs-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .3rem;
    max-width: 18.5rem;
    margin-top: .3rem;
}
.rs-days__l {
    display: block; margin-bottom: .1rem;
    font-size: .73rem; font-weight: 700; color: var(--rs-ink-2);
}

.rs-day {
    position: relative;
    display: grid; place-items: center;

    /*
     | وملعبٌ لا دائرة: عرضُ القرص سُبعُ ما بين يديه، فدون الثلاثمئةِ
     | والثلاثين كان يُرسم بيضةً. والملعبُ صحيحٌ في كلِّ نسبة، وهو
     | شكلُ الشرائح والأقراص في هذه اللوحة.
     */
    width: 100%; min-height: 2.3rem;
    border: 1px solid var(--rs-line); border-radius: 99px;
    background: var(--rs-surface);
    color: var(--rs-ink-2);
    font-size: .84rem; font-weight: 800;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
    user-select: none;
}
.rs-day input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}

/*
 | وحرفُ القرص يُكتب فيه لا فوقه.
 |
 | قاعدةُ العناوين فوق الحقول تنال كلَّ `span` في شبكة النموذج،
 | و`.rs-days` تسكن فيها — فورثها حرفُ اليوم: صغُر، وانزاح عن مركزه
 | ربعَ سطر، ولبس رمادَ العنوان فوق أرضٍ خضراءَ مصمتة. وهي القاعدةُ
 | نفسُها التي أخفت أثرَ المرور.
 |
 | و`inherit` تردّ الحرفَ إلى ما يقوله قرصُه، فيُكتب اللونُ مرّةً.
 */
.rs-day span {
    margin: 0;
    font-size: .84rem; font-weight: 800; line-height: 1;
    color: inherit;
}
/* والمرورُ حالُ فأرةٍ لا إصبع: على اللمس يبقى أثرُه على آخر قرصٍ لُمس
   فيُقرأ مختاراً. ويُمنع عن المختار — وإلا كُتب الحبرُ الداكنُ فوق
   أرضٍ داكنة. */
@media (hover: hover) {
    .rs-day:not(.is-on):hover {
        border-color: var(--rs-teal-fg);
        color: var(--rs-teal-fg);
    }
}

/*
 | والمختارُ يُقرأ بثلاثٍ لا بالصبغة وحدَها: أرضٌ مصمتة، ودرجةٌ
 | تنقلب، وحلقةٌ حوله — فمن لا يفرّق الألوان يفرّق الملأَ والحلقة،
 | ومن طبع الصفحةَ بالأسود يقرأ الفرق كما يقرؤه على الشاشة.
 */
.rs-day.is-on {
    background: var(--rs-teal);
    border-color: transparent;

    /*
     | وحرفُه لونُ الأرض لا أبيضَ مكتوباً بيده: رمزُ السطح أبيضُ نهاراً
     | وداكنٌ ليلاً، وأرضُ القرص تنقلب معه — فالتباينُ محفوظٌ في
     | الوضعين من رمزٍ قائمٍ بلا رمزٍ جديد.
     */
    color: var(--rs-surface);

    /*
     | والحلقةُ إلى الداخل لا إلى الخارج: الفجوةُ بين قرصين خمسةٌ
     | تقريباً، وحلقةٌ خارجيّةٌ ثلاثةٌ من كلِّ جهةٍ تركب حلقةَ جارتها —
     | والأحدُ والإثنان أكثرُ ما يُختار معاً.
     */
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rs-surface) 55%, transparent);
}

/* وفي الليل لونُ العلامة أسودُ على أسود، فتُؤخذ الأرضُ من الرمز الذي
   ينقلب، ويتبعها حرفُها */
.dark .rs-day.is-on { background: var(--rs-teal-fg); }

/* وحلقةُ التركيز بلونِ النصِّ لا بلونِ العلامة: الثاني لا ينقلب فيصير
   على أرض الليل واحداً وتسعةَ أعشارٍ إلى واحد، والأوّلُ ينقلب. */
.rs-day:has(input:focus-visible),
.rs-days__all:focus-visible {
    outline: 2px solid var(--rs-teal-fg);
    outline-offset: 2px;
}

/* و«يوميّاً» حالٌ تُختار لا فراغٌ يُستنتَج */
.rs-days__foot {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: .5rem;
}
.rs-days__all {
    flex: 0 0 auto;
    min-height: 2.3rem;
    padding: .3rem .85rem;
    border: 1px solid var(--rs-line); border-radius: 99px;
    background: var(--rs-surface); color: var(--rs-ink-2);
    font: inherit; font-size: .76rem; font-weight: 700;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
@media (hover: hover) {
    .rs-days__all:not(.is-on):hover { border-color: var(--rs-teal-fg); color: var(--rs-teal-fg); }
}
.rs-days__all.is-on {
    background: color-mix(in srgb, var(--rs-teal) 14%, transparent);
    border-color: var(--rs-teal);
    color: var(--rs-teal-fg);
}

/* وما اختير يُقال نصّاً تحته: الأقراصُ تُقرأ بالعين، والجملةُ تُراجَع */
.rs-days__say {
    flex: 1 1 10rem; min-width: 0;
    margin: 0;
    font-size: .72rem; line-height: 1.8; color: var(--rs-ink-3);
}

@media (prefers-reduced-motion: reduce) {
    .rs-day, .rs-days__all { transition: none; }
}


/* ══ أيامُ النشاط في الجدول ═══════════════════════════════
   كان العمودُ نصّاً ينمو مع بياناته: ستّةُ أيامٍ موصولةٍ بنقاطٍ لا
   تُكسَر — ثلاثمئةٍ وتسعةَ عشرَ بكسلاً أقلُّ ما تقبله الخليّة. وهو
   أكبرُ سببٍ منفردٍ لخروج الجدول عن نافذته، في الحاسوب قبل الجوال.

   وهي الآن سبعةُ أقراصٍ بحروف التقويم — ح ن ث ر خ ج س — مئةٌ وثلاثةٌ
   وستون بكسلاً لا تتبدّل بما فيها. وهي حروفُ النموذج نفسُها: ما نُقر
   هناك يُقرأ هنا بلا ترجمة. */
.rs-wk { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.rs-wk i {
    /*
     | لا ينكمش ولا يطفح: حيث تصير الخليّةُ شبكةً ينقلب `inline-flex`
     | إلى `flex` ويُشدّ الصفُّ إلى عرض عمودها — فالقرصُ بلا
     | `flex: 0 0 auto` يضيق عرضاً ويبقى ارتفاعاً فيصير بيضة.
     */
    flex: 0 0 auto;
    display: grid; place-items: center;
    inline-size: 1.35rem; block-size: 1.35rem;
    border-radius: 50%;
    font-style: normal; font-size: .72rem; font-weight: 800; line-height: 1;
    background: color-mix(in srgb, var(--rs-ink-3) 14%, transparent);
    color: var(--rs-ink-3);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* والمملوءُ: أرضُه لونُ العلامة وحرفُه لونُ الأرض — فالقاعدةُ واحدةٌ
   في الوضعين ولا يُبدَّل إلا رمزُ الأرضيّة. */
.rs-wk i.is-on { background: var(--rs-teal); color: var(--rs-surface); }
.dark .rs-wk i.is-on { background: var(--rs-teal-fg); }

/* وعلى الورق تُطفأ الأرضيّات فتُقرأ سبعةُ حروفٍ متشابهة — فيُكتب ما
   تقوله الأقراصُ نصّاً من وصفها. */
@media print {
    .rs-wk i { display: none; }
    .rs-wk::after { content: attr(aria-label); font-size: .74rem; }
}


/*
 | ── والورقُ يقرأ الجدولَ جدولاً ──
 |
 | صفحةُ A4 بهامشها سبعُمئةٍ وثلاثةُ بكسلات — دون حدِّ البطاقات. فكتلةُ
 | البطاقات تنطبق على الورق، وتقع قبل هذه فتغلبها بترتيب المصدر لا
 | بالأولوية. وما يُعاد هنا يُعاد آخِراً.
 */
@media print {
    /*
     | والنافذةُ على الورق ليست نافذة: هي مثبّتةٌ وصندوقُها سقفُه
     | ثمانيةٌ وثمانون من ارتفاع الشاشة يُمرَّر فيه — فمن ضغط «طباعة»
     | في نافذة الخطة طبع ملءَ شاشةٍ وذهب باقيها.
     */
    .rs-modal { position: static; display: block; padding: 0; }
    .rs-modal__veil { display: none; }
    .rs-modal__box {
        width: auto; max-height: none; overflow: visible;
        box-shadow: none; animation: none;
    }
    .rs-modal__box .rs-rev__h,
    .rs-modal__box .rs-pane__h,
    .rs-modal__box .rs-diag__h { position: static; }

    .rs-rev__w { overflow: visible; }
    .rs-rev__t { display: table; width: 100%; }
    .rs-rev__t thead {
        display: table-header-group;
        position: static; width: auto; height: auto;
        margin: 0; clip-path: none;
    }
    .rs-rev__t tbody { display: table-row-group; }
    .rs-rev__t tr {
        display: table-row;
        margin: 0; border: 0; border-radius: 0; background: none;
    }

    /* و`.rs-rev__ttl` تُذكر مع `td`: قاعدتُها في البطاقات أعلى أولويّة */
    .rs-rev__t td,
    .rs-rev__t .rs-rev__ttl {
        display: table-cell;
        padding: .4rem .5rem;
        background: none;
        border: 0; border-bottom: 1px solid var(--rs-line);
        font-size: inherit;
    }
    .rs-rev__t td:last-child { border-bottom: 1px solid var(--rs-line); }
    .rs-rev__t td::before { content: none; }

    /* ولا تُطبع الأبواب: ورقةٌ لا يُضغط فيها زرّ. والخليّةُ تبقى — رأسُها
       باقٍ، فلو حُذفت لصار الرأسُ سبعاً والصفُّ ستّاً. */
    .rs-rev__t .rs-rev__acts .rs-ico { display: none; }
}


/*
 | ── والورقُ يقرأ ثلاثَ أدواتٍ في ثلاث صفحات ──
 |
 | بطاقةُ الأداة صارت تحمل ثلاثةَ عشرَ رسماً وشرائطَ أقسامها، وهي
 | ‏`.rs-card` فتحمل «لا تُقطع» — فيدفعها المتصفحُ كلَّها إلى صفحةٍ
 | تالية، ثم لا تسعها فتُقطع على كل حالٍ في غير موضع. والقطعُ يُؤذن
 | به، ويُمنع حيث يُؤذي: شريطُ القسم لا يبقى وحدَه في ذيل الورقة،
 | والبطاقةُ الداخليةُ لا تُشطر رسماً.
 */
@media print {
    .rs-inst { break-inside: auto; }
    .rs-secrow { break-inside: avoid; break-after: avoid; }
    .rs-inst > .rs-grid > .rs-card--in { break-inside: avoid; }
}


/* ══ نسبةٌ تُكتب لا تُختار ═══════════════════════════════
   كان السلَّمُ أربعَ درجات، فمن قاس ثلاثةً وستين دُفع إلى خمسين أو
   خمسٍ وسبعين — ورقمٌ لم يقله أحدٌ يُقرأ بعد سنةٍ قياساً. */
.rs-pct { display: inline-flex; align-items: center; gap: .35rem; }

.rs-pct__n {
    width: 5.5rem; padding: .5rem .6rem;
    font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--rs-surface); color: var(--rs-ink);
    border: 1px solid var(--rs-line); border-radius: 10px;
}
.rs-pct__n:focus { outline: none; border-color: var(--rs-teal); }

.rs-pct__u { font-size: .9rem; font-weight: 700; color: var(--rs-ink-2); }

/* والمُسرَّعاتُ أصغرُ من الشريحة: هي ثانيةٌ بعد الحقل لا بدلٌ عنه */
.rs-opts--sm { margin-top: .4rem; }
.rs-opts--sm .rs-opt { font-size: .72rem; padding: .25rem .55rem; }