/*
   ─────────────────────────────────────────────────────────────
   ٦ · ناحية الطالب: كورساتي · المشغّل · الامتحان · الشهادات
   ─────────────────────────────────────────────────────────────
*/

/* ══════════════════════════════════════════
   كورساتي
   ══════════════════════════════════════════ */

.enrolled-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.enrolled-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }

.enrolled-card__media {
    position: relative;
    aspect-ratio: 16 / 6;
    background: var(--surface-inset);
    overflow: hidden;
}

.enrolled-card__media img { width: 100%; height: 100%; object-fit: cover; }

.enrolled-card__flag {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
}

.enrolled-card__body { flex: 1; padding: var(--s-5); }

.enrolled-card__title {
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    margin: 0 0 var(--s-4);
    color: var(--text);
}

.enrolled-card__progress { margin-bottom: var(--s-3); }

.enrolled-card__progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin-bottom: var(--s-2);
}

.enrolled-card__percent { font-weight: var(--fw-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; }

.enrolled-card__warning {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--warn-600);
    margin: var(--s-3) 0 0;
}

.enrolled-card__footer {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line-soft);
    background: var(--surface-sunken);
}

.enrolled-card__footer .push-end { margin-inline-start: auto; }

/* ══════════════════════════════════════════
   المشغّل
   ══════════════════════════════════════════ */

.player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    max-width: var(--shell-wide);
    margin-inline: auto;
    align-items: start;
}

@media (max-width: 1199px) {
    .player { grid-template-columns: minmax(0, 1fr); }
}

.player__main { min-width: 0; }

.player__video {
    /* الإطار الأسود يخدم الصورة لا السمة: يبقى أسود في الوضعين */
    background: #000;
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
}

.player__video video { width: 100%; height: 100%; display: block; }
.player__video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* مبدّل الجودة: أيقونة فقط في الزاوية العلوية — تفتح قائمة عند الضغط بدل
   أن تكون قائمة منسدلة ظاهرة دومًا. */
.quality-picker {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
}

.quality-picker__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    height: 2rem;
    padding-inline: var(--s-2);
    background: rgb(0 0 0 / 55%);
    border: 0;
    border-radius: var(--r-sm);
    color: #fff;
    opacity: .85;
    cursor: pointer;
    transition: opacity var(--dur) var(--ease);
}

.quality-picker__toggle:hover,
.quality-picker__toggle[aria-expanded="true"] { opacity: 1; }

.quality-picker__toggle .icon { color: #fff; flex: none; }

.quality-picker__label { font-size: var(--t-xs); white-space: nowrap; }

.quality-picker__menu {
    position: absolute;
    inset-block-start: calc(100% + .4rem);
    inset-inline-end: 0;
    background: rgb(20 20 20 / 92%);
    border-radius: var(--r-sm);
    padding: var(--s-1);
    margin: 0;
    list-style: none;
    min-width: 7rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 40%);
}

.quality-picker__option {
    display: block;
    width: 100%;
    text-align: start;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: var(--t-sm);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-xs);
    cursor: pointer;
    white-space: nowrap;
}

.quality-picker__option:hover { background: rgb(255 255 255 / 15%); }
.quality-picker__option.is-active { color: var(--p-300); font-weight: var(--fw-semibold); }

/* ─── كتلة الكود داخل نص الدرس ─── */

.player__prose pre.prose-code {
    background: var(--d-950);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    font-size: var(--t-sm);
    line-height: var(--lh-snug);
}

.player__prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.player__prose ul,
.player__prose ol { padding-inline-start: var(--s-5); }

/* جدول داخل نص الدرس: الحاوية بتتسحب أفقيًا لوحدها، فجدول عريض على الموبايل
   مايوسّعش الصفحة كلها. tabindex في الـ HTML عشان يتسحب بالكيبورد كمان. */
.player__prose .prose-table {
    margin-block: var(--s-4);
    overflow-x: auto;
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
    -webkit-overflow-scrolling: touch;
}

.player__prose .prose-table:focus-visible { outline: 2px solid var(--p-500); outline-offset: 2px; }

.player__prose table {
    width: 100%;
    min-width: 28rem;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.player__prose th,
.player__prose td {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--d-line);
    text-align: start;
    vertical-align: top;
}

.player__prose th { background: var(--d-800); font-weight: var(--fw-bold); white-space: nowrap; }
.player__prose tbody tr:last-child td { border-bottom: 0; }
.player__prose td code { white-space: nowrap; }
.player__prose h2 { font-size: var(--t-lg); margin-block: var(--s-5) var(--s-2); }
.player__prose h3 { font-size: var(--t-md); margin-block: var(--s-4) var(--s-2); }

.player__content { padding: var(--s-6); max-width: 60rem; }

@media (max-width: 575px) { .player__content { padding: var(--s-4); } }

.player__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-medium);
    color: var(--p-300);
    margin-bottom: var(--s-2);
}

.player__eyebrow:hover { color: var(--p-200); text-decoration: none; }

.player__title {
    font-size: var(--t-2xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--d-text);
    margin: 0 0 var(--s-3);
}

.player__summary {
    font-size: var(--t-md);
    font-weight: var(--fw-light);
    color: var(--d-text-2);
    line-height: var(--lh-body);
    margin: 0;
}

/* ─── تابات قسم الدرس (الفيديو ظاهر برّه التابات، هي بس تبدّل اللي تحته) ─── */

/* كل تاب كارت صغير بأيقونة داخل مربّع ملوّن — لون مميّز لكل قسم (زي ألوان
   كراسات المواد) فالطالب يعرف مكانه من اللون قبل ما يقرا الكلمة. */
.player-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--d-line);
}

.player-tabs__btn {
    --tab-accent: var(--p-600);

    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: var(--s-3);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-radius: var(--r-lg);
    color: var(--d-text-2);
    font-family: inherit;
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease),
                background-color var(--dur-fast) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}

.player-tabs__btn--video { --tab-accent: var(--p-600); }
/* بنفسجي خاص بالتاب ده: لون info قريب جدًا من أزرق البراند بتاع تاب الفيديو */
.player-tabs__btn--questions { --tab-accent: #8b5cf6; }
[data-theme='dark'] .player-tabs__btn--questions { --tab-accent: #a78bfa; }
.player-tabs__btn--exams { --tab-accent: var(--a-600); }
.player-tabs__btn--content { --tab-accent: var(--ok-600); }

.player-tabs__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--tab-accent) 15%, transparent);
    color: var(--tab-accent);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.player-tabs__icon .icon { width: 1.4rem; height: 1.4rem; }

.player-tabs__label { min-width: 0; }

.player-tabs__btn:hover {
    border-color: color-mix(in srgb, var(--tab-accent) 50%, var(--d-line));
    color: var(--d-text);
    transform: translateY(-1px);
}

.player-tabs__btn:hover .player-tabs__icon { transform: rotate(-6deg) scale(1.06); }

.player-tabs__btn:focus-visible { outline: 2px solid var(--tab-accent); outline-offset: 2px; }

/* التاب المفتوح: إطار ولمسة بلون القسم، والأيقونة تتملي بيه */
.player-tabs__btn.is-active {
    background: color-mix(in srgb, var(--tab-accent) 10%, var(--d-800));
    border-color: var(--tab-accent);
    color: var(--d-text);
    box-shadow: 0 10px 22px -16px var(--tab-accent);
    transform: none;
}

.player-tabs__btn.is-active .player-tabs__icon {
    background: var(--tab-accent);
    color: var(--n-0);
    transform: none;
}

/* العدّاد شارة على ركن الكارت — زي إشعارات التطبيقات */
.player-tabs__count {
    position: absolute;
    inset-block-start: -.45rem;
    inset-inline-end: -.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: .3rem;
    border: 2px solid var(--d-900);
    border-radius: var(--r-pill);
    background: var(--tab-accent);
    color: var(--n-0);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* ألوان الأقسام في الداكن فاتحة (أصفر، أخضر فاتح...) — الأبيض عليها مايتقريش */
[data-theme='dark'] .player-tabs__btn.is-active .player-tabs__icon,
[data-theme='dark'] .player-tabs__count { color: var(--d-950); }

/* شارة الامتحانات لما يعدّي كلهم: أخضر النجاح بدل لون القسم */
.player-tabs__count.is-complete { background: var(--ok-600); }
[data-theme='dark'] .player-tabs__count.is-complete { background: var(--ok-500); }

@media (max-width: 1199px) and (min-width: 992px) {
    .player-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .player-tabs__btn:hover,
    .player-tabs__btn:hover .player-tabs__icon { transform: none; }
}

.player-tabpanel { margin-top: var(--s-6); }

.player__prose {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--d-line);
    color: var(--d-text-2);
    font-size: var(--t-md);
    line-height: var(--lh-body);
}

.player__prose h2, .player__prose h3 { color: var(--d-text); }
.player__prose a { color: var(--p-300); }

/* أول عنصر داخل تاب مفتوح أصلًا مفصول عن التابات بمسافة التاب نفسه —
   حد الفصل العلوي وتكرار المسافة هنا زيادة بلا داعٍ. */
.player-tabpanel > .player__prose:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ─── المذكرة وبنك الأسئلة: كل ملف كارت كبير واضح ───
   أيقونة بلون نوع الملف (PDF أحمر، Word أزرق...) فالطالب يميّز الملف
   من بعيد، والزرارين كبار عشان مايضطرش يدقّق وهو بيضغط. */

.attach-list {
    list-style: none;
    display: grid;
    gap: var(--s-4);
    margin: 0;
    padding: 0;
}

.attach-card {
    --file-accent: var(--p-600);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-5);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-inline-start: 4px solid var(--file-accent);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 28px -24px rgba(15, 23, 42, .6);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

.attach-card:hover {
    border-color: color-mix(in srgb, var(--file-accent) 45%, var(--d-line));
    border-inline-start-color: var(--file-accent);
    box-shadow: 0 16px 32px -22px color-mix(in srgb, var(--file-accent) 60%, transparent);
}

.attach-card--pdf { --file-accent: #dc2626; }
.attach-card--doc { --file-accent: #2563eb; }
.attach-card--sheet { --file-accent: #16a34a; }
.attach-card--slides { --file-accent: #ea580c; }
.attach-card--image { --file-accent: #8b5cf6; }
.attach-card--other { --file-accent: var(--d-muted); }

[data-theme='dark'] .attach-card--pdf { --file-accent: #f87171; }
[data-theme='dark'] .attach-card--doc { --file-accent: #60a5fa; }
[data-theme='dark'] .attach-card--sheet { --file-accent: #4ade80; }
[data-theme='dark'] .attach-card--slides { --file-accent: #fb923c; }
[data-theme='dark'] .attach-card--image { --file-accent: #a78bfa; }

.attach-card__thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4.5rem;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--file-accent) 14%, transparent);
    color: var(--file-accent);
}

.attach-card__thumb .icon { width: 2rem; height: 2rem; }

/* نوع الملف شارة ملوّنة على ركن الأيقونة */
.attach-card__ext {
    position: absolute;
    inset-block-end: -.4rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: .1rem .45rem;
    border-radius: var(--r-xs);
    background: var(--file-accent);
    color: var(--n-0);
    font-size: .68rem;
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    line-height: 1.4;
}

html[dir='rtl'] .attach-card__ext { transform: translateX(50%); }
[data-theme='dark'] .attach-card__ext { color: var(--d-950); }

.attach-card__body { min-width: 0; }

.attach-card__title {
    margin: 0;
    font-size: var(--t-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--d-text);
    overflow-wrap: anywhere;
}

.attach-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin: var(--s-2) 0 0;
    font-size: var(--t-sm);
    color: var(--d-muted);
}

.attach-card__meta > span + span::before {
    content: "•";
    margin-inline-end: var(--s-3);
    color: var(--d-line);
}

.attach-card__actions {
    display: flex;
    gap: var(--s-2);
}

.attach-card__actions .btn {
    min-height: var(--control-h);
    padding-inline: var(--s-5);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* تابلت/شاشة متوسطة: الأزرار تنزل سطر لوحدها بعرض الكارت */
@media (max-width: 767.98px) {
    .attach-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--s-4);
        padding: var(--s-4);
    }

    .attach-card__actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }

    .attach-card__actions .btn {
        justify-content: center;
        min-height: 3rem;
        font-size: var(--t-md);
    }

    .attach-card__thumb { width: 3.5rem; height: 4rem; }
    .attach-card__title { font-size: var(--t-md); }
}

.player__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--d-line);
}

.player__nav { display: flex; gap: var(--s-2); }
.player__actions .push-end { margin-inline-start: auto; }

/* درس بلا امتحان بعد: تنبيه واضح لا سطر باهت يفوت الطالب */
.lesson-exam-pending {
    align-items: center;
    padding: var(--s-5);
    font-size: var(--t-lg);
    font-weight: var(--fw-bold);
}

.lesson-exam-pending .icon { width: 1.6rem; height: 1.6rem; margin-top: 0; }

/* دعوة امتحان الدرس */
.quiz-cta {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-inline-start: 3px solid var(--warn-500);
    border-radius: var(--r-sm);
}

.quiz-cta.is-passed { border-inline-start-color: var(--ok-500); }
.quiz-cta__icon { color: var(--warn-500); flex: none; }
.quiz-cta.is-passed .quiz-cta__icon { color: var(--ok-500); }
.quiz-cta__body { flex: 1; min-width: 12rem; }
.quiz-cta__title { display: block; font-weight: var(--fw-semibold); color: var(--d-text); margin-bottom: .15rem; }
.quiz-cta__text { display: block; font-size: var(--t-sm); color: var(--d-muted); margin: 0; line-height: var(--lh-snug); }
.quiz-cta .btn { margin-inline-start: auto; }
.quiz-cta .btn:disabled { opacity: .55; cursor: not-allowed; }

.quiz-cta--monthly { border-inline-start-color: var(--p-500); }
.quiz-cta--monthly .quiz-cta__icon { color: var(--accent); }
.quiz-cta--monthly.is-passed { border-inline-start-color: var(--ok-500); }
.quiz-cta--monthly.is-passed .quiz-cta__icon { color: var(--ok-500); }

.player-module__exam { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px dashed var(--d-line); }

/* أسئلة خاصة على الدرس */
.lesson-qa {
    margin-top: var(--s-6);
    padding: var(--s-5);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
}

.lesson-qa__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    color: var(--d-text);
    margin: 0 0 var(--s-4);
}

.lesson-qa__list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.lesson-qa__item {
    padding: var(--s-3) var(--s-4);
    background: var(--d-900);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
}

.lesson-qa__question { margin: 0 0 var(--s-2); color: var(--d-text); line-height: var(--lh-snug); }

.lesson-qa__image {
    display: block;
    max-width: 12rem;
    max-height: 12rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--d-line);
    margin: 0 0 var(--s-2);
}

.lesson-qa__answer { margin-top: var(--s-2); }
.lesson-qa__answer p { margin: var(--s-2) 0 0; color: var(--d-muted); line-height: var(--lh-snug); }

.lesson-qa__hint { font-size: var(--t-sm); color: var(--d-muted); margin: 0 0 var(--s-3); }

.lesson-qa__form { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; }
.lesson-qa__form textarea { flex: 1; min-width: 14rem; resize: vertical; }

.lesson-qa__form-row { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-width: 14rem; }

.lesson-qa__attach {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    align-self: flex-start;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    padding: var(--s-2) var(--s-3);
    color: var(--accent);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.lesson-qa__attach:hover { background: var(--accent); color: var(--d-900); }

.lesson-qa__preview {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--d-muted);
}
.lesson-qa__preview img { max-width: 4rem; max-height: 4rem; border-radius: var(--r-sm); }
.lesson-qa__preview button { background: none; border: 0; color: var(--d-muted); cursor: pointer; }
.lesson-qa__preview button:hover { color: var(--d-text); }

/* كومنتات عامة على الدرس */
.lesson-comments {
    margin-top: var(--s-6);
    padding: var(--s-5);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
}

.lesson-comments__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    color: var(--d-text);
    margin: 0 0 var(--s-4);
}

.lesson-comments__count { color: var(--d-muted); font-weight: var(--fw-regular); }

.lesson-comments__form { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--s-5); }
.lesson-comments__form textarea { flex: 1; min-width: 14rem; resize: vertical; }

.lesson-comments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.lesson-comments__item {
    padding: var(--s-3) var(--s-4);
    background: var(--d-900);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
}

.lesson-comments__meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--d-muted); margin-bottom: var(--s-2); }
.lesson-comments__author { font-weight: var(--fw-semibold); color: var(--d-text); }
.lesson-comments__body { margin: 0; color: var(--d-text); line-height: var(--lh-snug); }

/* ─── الشريط الجانبي للمنهج ─── */

.player__sidebar {
    position: sticky;
    inset-block-start: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--d-800);
    border-inline-start: 1px solid var(--d-line);
    padding: var(--s-5);
}

@media (max-width: 1199px) {
    .player__sidebar { position: static; max-height: none; border-inline-start: 0; border-top: 1px solid var(--d-line); }
}

/* ─── المنهج كلوحة سفلية على الشاشات الضيقة (أقل من ٩٠٠) ───
   على الشاشة الواسعة المنهج عمود جانبي ظاهر، فالزرار ورأس اللوحة مخفيين. */

/* الزرار عليه كمان .focus-topbar__btn (display: inline-flex تحت) — الصنفين مع بعض عشان
   الإخفاء يغلب، وإلا كان بيظهر على الكمبيوتر والتابلت الأفقي والمنهج ظاهر جنبه أصلًا */
.focus-topbar__btn.player-curriculum-toggle,
.player-sheet__head,
.player-sheet-scrim { display: none; }

.focus-topbar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding-inline: var(--s-3);
    background: var(--d-700);
    border: 1px solid var(--d-line);
    border-radius: var(--r-pill);
    color: var(--d-text);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

.focus-topbar__btn[aria-expanded="true"] { background: var(--p-700); border-color: var(--p-700); color: var(--n-0); }

@media (max-width: 899.98px) {
    .focus-topbar__btn.player-curriculum-toggle { display: inline-flex; }

    .player > .player__sidebar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--z-drawer);
        max-height: min(82dvh, 44rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
        background: var(--d-900);
        border: 0;
        border-top: 1px solid var(--d-line);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: 0 -18px 40px -20px rgba(2, 6, 23, .55);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
    }

    .player > .player__sidebar.is-open {
        transform: none;
        visibility: visible;
        transition: transform var(--dur-slow) var(--ease), visibility 0s;
    }

    .player-sheet__head {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: var(--s-3);
        margin-inline: calc(var(--s-5) * -1);
        margin-bottom: var(--s-4);
        padding: var(--s-5) var(--s-5) var(--s-3);
        background: var(--d-900);
        border-bottom: 1px solid var(--d-line);
    }

    /* مقبض اللوحة — نفس شكل اللوحات السفلية في تطبيقات الموبايل */
    .player-sheet__grip {
        position: absolute;
        inset-block-start: var(--s-2);
        inset-inline-start: 50%;
        width: 2.5rem;
        height: 4px;
        margin-inline-start: -1.25rem;
        border-radius: var(--r-pill);
        background: var(--d-600);
    }

    .player-sheet__title { flex: 1; margin: 0; font-size: var(--t-md); font-weight: var(--fw-bold); color: var(--d-text); }

    .player-sheet__close {
        display: grid;
        place-items: center;
        width: var(--control-h);
        height: var(--control-h);
        background: var(--d-700);
        border: 0;
        border-radius: 50%;
        color: var(--d-text);
        cursor: pointer;
    }

    .player-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-drawer) - 1);
        background: var(--scrim);
    }

    .player-sheet-scrim[hidden] { display: none; }
}

/* على الموبايل الصغير الزرار أيقونة بس — الشريط العلوي ضيق */
@media (max-width: 380px) {
    .player-curriculum-toggle > span { display: none; }
}

/* زرار سالب الحشو الجانبي بلا تعديل .focus-topbar__back نفسها —
   تلك مبنية لشريط علوي، وهذا يعيش داخل حشو .player__sidebar */
.player__back { margin: calc(var(--s-2) * -1) calc(var(--s-3) * -1) var(--s-4); }

.player-module { margin-bottom: var(--s-5); }
.player-module:last-child { margin-bottom: 0; }

.player-module__title {
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--d-muted);
    margin: 0 0 var(--s-2);
    padding-inline: var(--s-2);
}

.player-module__lessons { list-style: none; padding: 0; margin: 0; }
.player-module__lessons li { margin-bottom: 2px; }

.player-lesson {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-ui);
    line-height: var(--lh-snug);
    color: var(--d-text-2);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.player-lesson .icon { flex: none; margin-top: .2em; color: var(--d-muted); }
.player-lesson:hover { background: var(--d-700); color: var(--d-text); text-decoration: none; }
.player-lesson.is-done .icon { color: var(--ok-500); }
.player-lesson.is-locked { color: var(--text-faint); cursor: help; }
.player-lesson.is-locked:hover { background: none; color: var(--text-faint); }

.player-module__lessons li.is-current .player-lesson {
    background: var(--p-700);
    color: var(--n-0);
    font-weight: var(--fw-medium);
}

.player-module__lessons li.is-current .player-lesson .icon { color: var(--p-200); }

/* علامة «خلّصت الدرس ده» — نفس الشكل في كل الصفوف: اتشيك تفاعلي على الدرس
   المفتوح، وعلامة ثابتة (tick) على الباقي. الصح نفسه SVG مش حدود مدوّرة،
   فبيطلع في النص بالظبط ومايتقلبش مع اتجاه الصفحة العربي. */
.player-lesson__check,
.player-lesson__tick {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    /* عناصر الفورم مابتورّثش لون النص — من غيرها البرواز يطلع أسود على صف الدرس الأزرق */
    color: inherit;
    border: 2px solid currentColor;
    border-radius: 8px;
    background: transparent center / 72% no-repeat;
    opacity: .6;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.player-lesson__check { cursor: pointer; opacity: .9; }
.player-lesson__check:hover:not(:disabled) { transform: scale(1.08); opacity: 1; }
.player-lesson__check:focus-visible { outline: 2px solid var(--n-0); outline-offset: 2px; }

.player-lesson__check:checked,
.player-lesson__tick.is-done {
    opacity: 1;
    border-color: var(--ok-500);
    background-color: var(--ok-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* لحظة التعليم: نطّة صغيرة تحسّس الطالب إنه أنجز حاجة */
.player-lesson__check:checked { animation: tick-pop .35s var(--ease); }

@keyframes tick-pop {
    0%   { transform: scale(.7); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.player-lesson__check:disabled { cursor: default; }
label.player-lesson { cursor: pointer; }

/* الصف كله في النص رأسيًا مع العلامة الكبيرة */
.player-lesson:has(.player-lesson__check, .player-lesson__tick) { align-items: center; }

@media (prefers-reduced-motion: reduce) {
    .player-lesson__check:checked { animation: none; }
}

/* ══════════════════════════════════════════
   قاعة الامتحان
   ══════════════════════════════════════════ */

.exam {
    max-width: 52rem;
    margin-inline: auto;
    padding: var(--s-6) var(--s-5) var(--s-10);
}

.exam__header {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    flex-wrap: wrap;
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--d-line);
}

.exam__title { font-size: var(--t-xl); font-weight: var(--fw-bold); color: var(--d-text); margin: 0; }

.exam__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    font-size: var(--t-sm);
    color: var(--d-muted);
    margin: var(--s-2) 0 0;
}

.exam__timer {
    margin-inline-start: auto;
    min-width: 8rem;
    padding: var(--s-2) var(--s-4);
    text-align: center;
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
}

.exam__timer-label {
    display: block;
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-muted);
}

.exam__timer-value {
    display: block;
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--d-text);
    line-height: 1.3;
}

.exam__timer.is-warning { border-color: var(--warn-500); }
.exam__timer.is-warning .exam__timer-value { color: var(--warn-600); }
.exam__timer.is-critical { border-color: var(--err-500); background: var(--err-50); }
.exam__timer.is-critical .exam__timer-value { color: var(--err-600); }

.exam__instructions {
    margin-block: var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-inline-start: 3px solid var(--p-500);
    border-radius: var(--r-sm);
    color: var(--d-text-2);
    line-height: var(--lh-body);
}

.exam__save-state {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 1.5rem;
    margin-bottom: var(--s-3);
    font-size: var(--t-sm);
    color: var(--d-muted);
}

.exam__save-state.is-error { color: var(--err-600); }

.exam-question {
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    background: var(--d-800);
    border: 1px solid var(--d-line);
    border-radius: var(--r);
}

/* ‎<legend>‎ يقطع حد الـ fieldset افتراضيًا فيطفو الرقم على الإطار.
   التعويم بعرض كامل يعيده سطرًا عاديًا داخل البطاقة ويغلق الحد. */
.exam-question__header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    float: inline-start;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 0 var(--s-4);
}

.exam-question__header + * { clear: both; }

.exam-question__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--p-700);
    color: var(--p-100);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.exam-question__points { margin-inline-start: auto; font-size: var(--t-sm); color: var(--d-muted); }

.exam-question__stem {
    font-size: var(--t-md);
    line-height: var(--lh-body);
    color: var(--d-text);
    margin-bottom: var(--s-4);
}

.exam-question__hint { font-size: var(--t-sm); color: var(--d-muted); margin-bottom: var(--s-3); }

.exam-question__code {
    background: var(--d-950);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--d-text);
}

.exam-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-2);
    background: var(--d-900);
    border: 1px solid var(--d-line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.exam-option:hover { border-color: var(--p-500); }
.exam-option:has(.form-check-input:checked) { border-color: var(--p-400); background: var(--accent-soft); }
.exam-option .form-check-label { flex: 1; color: var(--d-text-2); font-size: var(--t-md); }
.exam-option:has(.form-check-input:checked) .form-check-label { color: var(--d-text); }

.exam-fill .form-control { max-width: 26rem; }

.exam__actions {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--d-line);
}

.exam__unanswered { margin: 0; font-size: var(--t-sm); color: var(--d-muted); }
.exam__actions .btn { margin-inline-start: auto; }

/* ══════════════════════════════════════════
   نتيجة الامتحان
   ══════════════════════════════════════════ */

.result-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    overflow: hidden;
    text-align: center;
}

.result-card__banner {
    padding: var(--s-8) var(--s-5) var(--s-6);
    background: var(--ok-50);
    border-bottom: 1px solid var(--line-soft);
}

.result-card.is-failed .result-card__banner { background: var(--warn-50); }

.result-card__percent {
    display: block;
    font-size: var(--t-4xl);
    font-weight: var(--fw-light);
    line-height: 1;
    color: var(--ok-700);
    font-variant-numeric: tabular-nums;
}

.result-card.is-failed .result-card__percent { color: var(--warn-700); }

/* المقالي قبل التصحيح: ورقته وصلت بس — مفيش لون نجاح ولا رسوب */
.result-card.is-pending .result-card__banner { background: var(--info-50); }
.result-card.is-pending .result-card__percent { color: var(--info-700); }
.result-card.is-pending .result-card__percent .icon { width: 2.75rem; height: 2.75rem; }

.result-card__fraction { display: block; font-size: var(--t-ui); color: var(--text-muted); margin-top: var(--s-2); }

.result-card__verdict {
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
    margin: var(--s-4) 0 var(--s-2);
    color: var(--text);
}

.result-card__detail { color: var(--text-muted); margin: 0; font-size: var(--t-ui); }
.result-card__body { padding: var(--s-5); }

.result-card__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* مراجعة الإجابات */
.review-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--line-strong);
    border-radius: var(--r);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
}

.review-item.is-correct { border-inline-start-color: var(--ok-500); }
.review-item.is-wrong { border-inline-start-color: var(--err-500); }
.review-item.is-pending { border-inline-start-color: var(--warn-500); }

.review-item__header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-3);
    font-size: var(--t-sm);
}

.review-item__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--surface-inset);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    flex: none;
}

.review-item__mark { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semibold); }
.is-correct .review-item__mark { color: var(--ok-600); }
.is-wrong .review-item__mark { color: var(--err-500); }
.is-pending .review-item__mark { color: var(--warn-600); }

.review-item__points { margin-inline-start: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.review-item__stem { font-size: var(--t-md); color: var(--text); margin-bottom: var(--s-4); line-height: var(--lh-body); }

.review-item .exam-question__code {
    background: var(--surface-inset);
    border-color: var(--line);
    color: var(--text-2);
}

.review-options { list-style: none; padding: 0; margin: 0; }

.review-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    margin-bottom: var(--s-1);
    font-size: var(--t-ui);
    color: var(--text-2);
}

.review-option.is-correct { background: var(--ok-50); color: var(--ok-700); }
.review-option.is-selected:not(.is-correct) { background: var(--err-50); color: var(--err-700); }
.review-option__marker { flex: none; width: 1.15rem; margin-top: .15em; }
.review-option.is-correct .review-option__marker { color: var(--ok-500); }
.review-option.is-selected:not(.is-correct) .review-option__marker { color: var(--err-500); }
.review-option__text { flex: 1; }

.review-option__badge {
    flex: none;
    font-size: var(--t-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: .1em .6em;
}

.review-item__explanation {
    display: flex;
    gap: var(--s-3);
    background: var(--surface-inset);
    border-radius: var(--r-sm);
    padding: var(--s-3) var(--s-4);
    margin-top: var(--s-4);
    font-size: var(--t-ui);
    color: var(--text-2);
    line-height: var(--lh-snug);
}

.review-item__explanation .icon { color: var(--info-500); flex: none; margin-top: .15em; }

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

.course-nav {
    --nav-bubble: 2.75rem;
}

.course-nav__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--s-3);
}

/* ── الزرّان: كروت كبيرة سهلة اللمس، لا روابط نصّية ── */
.course-nav__side {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    min-height: 4.25rem;
    padding: var(--s-3) var(--s-4);
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.course-nav__side:hover {
    color: var(--text);
    text-decoration: none;
    border-color: var(--p-500);
    box-shadow: var(--sh-3);
    transform: translateY(-2px);
}

.course-nav__side:active { transform: scale(.97); box-shadow: var(--sh-2); }
.course-nav__side:focus-visible { outline: 3px solid var(--p-500); outline-offset: 2px; }

.course-nav__side--next { justify-content: flex-end; text-align: end; }
.course-nav__side.is-empty { visibility: hidden; pointer-events: none; }

/* دائرة الأيقونة: اتجاه الحركة واضح من غير قراءة */
.course-nav__bubble {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--nav-bubble);
    height: var(--nav-bubble);
    border-radius: 50%;
    background: var(--p-100);
    color: var(--p-700);
    transition: transform var(--dur) var(--ease);
}

.course-nav__bubble .icon { width: 1.35rem; height: 1.35rem; }

html[dir='rtl'] .course-nav__side--prev:hover .course-nav__bubble { transform: translateX(3px); }
html[dir='ltr'] .course-nav__side--prev:hover .course-nav__bubble { transform: translateX(-3px); }
html[dir='rtl'] .course-nav__side--next:hover .course-nav__bubble { transform: translateX(-3px); }
html[dir='ltr'] .course-nav__side--next:hover .course-nav__bubble { transform: translateX(3px); }

/* «التالي»: الزر الأساسي — مليان بتدرّج اللون الرئيسي */
.course-nav__side--next:not(.is-disabled) {
    color: var(--n-0);
    background: linear-gradient(135deg, var(--p-600), var(--p-700));
    border-color: transparent;
    box-shadow: 0 10px 22px -10px var(--p-600);
}

.course-nav__side--next:not(.is-disabled):hover {
    color: var(--n-0);
    border-color: transparent;
    box-shadow: 0 14px 26px -10px var(--p-600);
}

.course-nav__side--next:not(.is-disabled) .course-nav__bubble {
    background: rgba(255, 255, 255, .22);
    color: inherit;
}

.course-nav__side--next:not(.is-disabled) .course-nav__side-label { color: inherit; opacity: .85; }

/* «السابق»: أحمر — لون الرجوع، وبيتفرق عن «التالي» الأزرق من أول نظرة */
.course-nav__side--prev:not(.is-empty) {
    color: var(--n-0);
    background: linear-gradient(135deg, var(--err-600), var(--err-700));
    border-color: transparent;
    box-shadow: 0 10px 22px -10px var(--err-600);
}

.course-nav__side--prev:not(.is-empty):hover {
    color: var(--n-0);
    border-color: transparent;
    box-shadow: 0 14px 26px -10px var(--err-600);
}

.course-nav__side--prev .course-nav__bubble { background: rgba(255, 255, 255, .22); color: inherit; }
.course-nav__side--prev .course-nav__side-label { color: inherit; opacity: .85; }
.course-nav__side--prev:focus-visible { outline-color: var(--err-500); }

/* آخر الكورس: أخضر احتفالي بدل الأزرق */
.course-nav__side--finish:not(.is-disabled) {
    background: linear-gradient(135deg, var(--ok-600), var(--ok-700));
    box-shadow: 0 10px 22px -10px var(--ok-600);
}

.course-nav__side--finish:not(.is-disabled):hover { box-shadow: 0 14px 26px -10px var(--ok-600); }

/* المعطّل يبقى مقروءًا لا باهتًا حتى لا يختفي سببه */
.course-nav__side.is-disabled {
    cursor: not-allowed;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-style: dashed;
    box-shadow: none;
}

.course-nav__side.is-disabled:hover { transform: none; border-color: var(--line); box-shadow: none; }
.course-nav__side.is-disabled .course-nav__bubble { background: var(--surface); color: var(--text-faint); }

.course-nav__side-body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

.course-nav__side-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
}

.course-nav__side--next .course-nav__side-label { justify-content: flex-end; }
.course-nav__kind { display: inline-flex; opacity: .8; }

.course-nav__side-title {
    font-size: var(--t-ui);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── الموضع الحالي والتقدّم ── */
.course-nav__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    min-width: 9rem;
}

.course-nav__counter {
    font-size: var(--t-md, 1rem);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.course-nav__current {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: .15rem .6rem;
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--p-700);
    background: var(--p-100);
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.course-nav__track {
    width: 100%;
    height: .4rem;
    background: var(--n-100);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.course-nav__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--p-500), var(--ok-500));
    border-radius: var(--r-pill);
    transition: width var(--dur-slow) var(--ease);
}

/* تابلت وموبايل: المؤشّر فوق، والزرّين جنب بعض بعرض الشاشة */
@media (max-width: 767px) {
    .course-nav__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--s-2); }

    .course-nav__center {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        padding: 0 0 var(--s-1);
    }

    .course-nav__center .course-nav__track { flex-basis: 100%; }

    .course-nav__side { min-height: 3.5rem; padding: var(--s-2) var(--s-3); gap: var(--s-2); }
    .course-nav__side-title { -webkit-line-clamp: 1; line-clamp: 1; font-size: var(--t-sm); }
    .course-nav__side--next { grid-column: 2; }
    .course-nav { --nav-bubble: 2.25rem; }
}

/* موبايل صغير جدًا: عنوان الدرس مايكفيش — الزر يكتفي بالأيقونة والكلمة */
@media (max-width: 359.98px) {
    .course-nav__side-title { display: none; }
    .course-nav__side-label { font-size: var(--t-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .course-nav__side, .course-nav__bubble { transition: none; }
    .course-nav__side:hover, .course-nav__side:hover .course-nav__bubble { transform: none; }
}

.player__course-nav { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--d-line); }

/* شريط التنقّل في شاشات الامتحان — سطح فاتح */
.assessment-nav { margin-top: var(--s-6); }

.exam__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin: 0 0 var(--s-4);
    font-size: var(--t-sm);
    color: var(--d-muted);
}

.exam__breadcrumb .icon { color: var(--accent); }
.exam__breadcrumb-sep { color: var(--text-faint); }

/* ══════════════════════════════════════════
   امتحان الأخطاء
   ══════════════════════════════════════════
   دعوة واضحة تحت النتيجة على طول، ونفس ورقة الامتحان من غير وقت ولا حفظ. */

.mistakes-cta {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-top: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--p-50), var(--surface));
    border: 1.5px solid var(--p-200);
    box-shadow: var(--sh-2);
}

.mistakes-cta__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--err-500);
    color: #fff;
    box-shadow: 0 10px 20px -10px var(--err-500);
}

.mistakes-cta__icon .icon { width: 1.5rem; height: 1.5rem; }

.mistakes-cta__body { flex: 1; min-width: 14rem; }
.mistakes-cta__title { margin: 0; font-size: var(--t-lg); font-weight: var(--fw-bold); }
.mistakes-cta__text { margin: var(--s-1) 0 0; color: var(--text-muted); }

.mistakes-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0 0 var(--s-1);
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--err-50);
    color: var(--err-600);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
}

.mistakes-note { margin-block: var(--s-4); }

@media (max-width: 599.98px) {
    .mistakes-cta { padding: var(--s-4); }
    .mistakes-cta__btn { width: 100%; justify-content: center; }
}

/* ─── رأس «راجع إجاباتك»: فلتر الغلط بس + نزّل PDF ─── */
.review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: 2.5rem;
    scroll-margin-top: 6rem;
}

.review-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.review-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.review-filter .filter-chip { min-height: 2.25rem; padding: .25rem .9rem; }
.review-filter__wrong .icon { color: var(--err-600); }
.review-filter__wrong.is-active .icon { color: currentColor; }

/* «افتح الكورس» ياخد المساحة و«امتحاناتي» جنبه على قده */
.enrolled-card__open { flex: 1 1 auto; justify-content: center; }
.enrolled-card__exams { flex: 0 0 auto; white-space: nowrap; }

/* ─── مراجعة السؤال المقالي (إجابة الطالب + ملاحظة المصحّح + نموذج الإجابة) ─── */
.review-essay { display: grid; gap: var(--s-3); }
.review-essay__label { margin: 0; font-size: var(--t-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.review-essay__answer {
    padding: var(--s-3) var(--s-4);
    background: var(--surface-inset);
    border-radius: var(--r);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.review-essay__comment {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r);
    background: var(--info-50);
    color: var(--info-700);
    white-space: pre-wrap;
}
.review-essay__model { white-space: pre-wrap; }

.exam-essay__input { min-height: 10rem; resize: vertical; line-height: 1.8; }