/* ═══════════════════════════════════════════════════════════════════════
   قراري — الوكيل الدراسي | طبقة رقيقة فوق رموز قراري في styles.css.
   لا لون جديد يُخترع هنا إلا بمعنى دلالي لم يكن موجوداً: «الفرصة».
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── الفرصة ──────────────────────────────────────────────────────────
     الأخضر محجوز للنجاح (موثق/مكتمل)، والكهرماني للتحذير، والأحمر للخطأ.
     «فتح مقعد» ليس نجاحاً ولا تحذيراً — هو إشارة حيّة تستدعي انتباهاً الآن.
     فأخذت السماوي المعتمد أصلاً في الهوية للحالات النشطة.               */
  --opportunity:#54D8FF;
  --opportunity-bg:rgba(84,216,255,.10);
  --opportunity-line:rgba(84,216,255,.30);

  /* ── حالات المراقبة ──────────────────────────────────────────────────
     كل حالة لها لون ورمز ونص. اللون آخر طبقة لا أولها (§32).            */
  --st-open:var(--ok);            --st-open-bg:var(--ok-bg);
  --st-closed:var(--ink3);        --st-closed-bg:rgba(126,147,179,.09);
  --st-watching:var(--acc);       --st-watching-bg:rgba(22,139,255,.10);
  --st-chance:var(--opportunity); --st-chance-bg:var(--opportunity-bg);
  --st-decide:var(--warn);        --st-decide-bg:var(--warn-bg);
  --st-paused:var(--ink3);        --st-paused-bg:rgba(126,147,179,.06);

  /* ── أولويات البدائل ─────────────────────────────────────────────────
     الترتيب يُقرأ من الحرف والموضع أولاً، والشدة اللونية تسانده فقط.    */
  --pri-a:var(--acc);   --pri-a-bg:rgba(22,139,255,.13);
  --pri-b:#8FB4E8;      --pri-b-bg:rgba(143,180,232,.10);
  --pri-c:var(--ink3);  --pri-c-bg:rgba(126,147,179,.08);

  /* ── مقاسات الصدفة ─────────────────────────────────────────────────── */
  --sem-tabs-h:64px;          /* ارتفاع الشريط السفلي بلا المنطقة الآمنة */
  --sem-side-w:248px;         /* الشريط الجانبي على الديسكتوب */
  --sem-max:1120px;
  --sem-gap:14px;
}

/* styles.css يفرض flex عمودياً على body لصدفة المستشار — هذه صدفة مستقلة */
body.sem{
  display:block;
  background:var(--qarari-bg-primary);
  min-height:100dvh;
  padding-block-end:calc(var(--sem-tabs-h) + var(--safe-b));
}

/* المناطق الآمنة الجانبية فيزيائية (يسار/يمين الجهاز) ولا تظهر إلا أفقياً */
@media (orientation:landscape){
  .sem-shell,.sem-top-in{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))}
}

/* مقاس أساسي لكل أيقونات القسم — بدونه يأخذ svg مقاسه الافتراضي 300×150 */
.sem svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* الأيقونات ذات الاتجاه (شيفرون الرجوع) تُعكس مع اتجاه الصفحة */
[dir=rtl] .sem svg.dir{transform:scaleX(-1)}

/* ═══ الهيكل ═══════════════════════════════════════════════════════════ */
.sem-shell{width:100%;max-width:var(--sem-max);margin-inline:auto;
  padding-inline:16px;box-sizing:border-box}
.sem-main{padding-block:18px 28px;outline:none}

/* ── الشريط العلوي (الجوال) ─────────────────────────────────────────── */
.sem-top{position:sticky;top:0;z-index:20;
  background:color-mix(in oklab,var(--qarari-bg-primary) 88%,transparent);
  backdrop-filter:blur(12px);border-block-end:1px solid var(--hair);
  padding-block-start:var(--safe-t)}
.sem-top-in{display:flex;align-items:center;gap:10px;min-height:56px;
  width:100%;max-width:var(--sem-max);margin-inline:auto;
  padding-inline:16px;box-sizing:border-box}
.sem-brand{font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.sem-brand small{display:block;font-size:.7rem;font-weight:500;color:var(--ink3);
  letter-spacing:0;margin-block-start:1px}
.sem-top-acts{margin-inline-start:auto;display:flex;align-items:center;gap:4px}

/* زر أيقونة موحّد — 44px هدف لمس في كل مكان */
.sem-ico{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:var(--r-sm);border:0;
  background:transparent;color:var(--ink2);cursor:pointer;position:relative}
.sem-ico:hover{background:var(--s2);color:var(--ink)}
.sem-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sem-ico .dot{position:absolute;inset-block-start:9px;inset-inline-end:9px;
  width:8px;height:8px;border-radius:50%;background:var(--opportunity);
  border:2px solid var(--qarari-bg-primary)}

/* ── التنقل السفلي (الجوال) ─────────────────────────────────────────── */
.sem-tabs{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;
  background:color-mix(in oklab,var(--qarari-bg-secondary) 94%,transparent);
  backdrop-filter:blur(14px);border-block-start:1px solid var(--hair);
  padding-block-end:var(--safe-b)}
.sem-tabs-in{display:grid;grid-template-columns:repeat(5,1fr);
  max-width:520px;margin-inline:auto}
.sem-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:var(--sem-tabs-h);border:0;background:transparent;
  color:var(--ink3);font:inherit;font-size:.68rem;font-weight:600;cursor:pointer;
  padding:6px 2px;text-decoration:none;position:relative}
.sem-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sem-tab[aria-current=page]{color:var(--acc)}
/* الحالة النشطة لا تُقرأ من اللون وحده — شرطة فوق البند */
.sem-tab[aria-current=page]::before{content:"";position:absolute;inset-block-start:0;
  inset-inline:28%;height:2px;border-radius:0 0 2px 2px;background:var(--acc)}
.sem-tab .badge{position:absolute;inset-block-start:8px;inset-inline-end:calc(50% - 20px);
  min-width:16px;height:16px;border-radius:9px;background:var(--opportunity);
  color:#04131A;font-size:.62rem;font-weight:700;display:grid;place-items:center;
  padding-inline:4px;border:2px solid var(--qarari-bg-secondary)}

/* بند «قراري» المركزي — متميّز بلا زر عائم مبالغ فيه */
.sem-tab.is-agent svg{width:26px;height:26px}
.sem-tab.is-agent .ring{display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;background:var(--st-watching-bg);
  border:1px solid rgba(22,139,255,.28);color:var(--acc)}
.sem-tab.is-agent[aria-current=page] .ring{background:var(--acc);color:var(--on-acc);
  border-color:transparent}

/* ── الشريط الجانبي (الديسكتوب) ─────────────────────────────────────── */
.sem-side{display:none}

@media (min-width:900px){
  body.sem{padding-block-end:0;padding-inline-start:var(--sem-side-w)}
  .sem-top{display:none}
  .sem-tabs{display:none}
  .sem-side{display:flex;flex-direction:column;gap:2px;position:fixed;
    inset-block:0;inset-inline-start:0;width:var(--sem-side-w);z-index:20;
    background:var(--qarari-bg-secondary);border-inline-end:1px solid var(--hair);
    padding:22px 12px;box-sizing:border-box;overflow-y:auto}
  .sem-side .sem-brand{padding-inline:12px;margin-block-end:22px;font-size:1.15rem}
  .sem-nav{display:flex;align-items:center;gap:11px;min-height:46px;padding-inline:12px;
    border-radius:var(--r-sm);color:var(--ink2);font-size:.92rem;font-weight:600;
    border:0;background:transparent;cursor:pointer;font-family:inherit;
    text-decoration:none;text-align:start;transition:background var(--dur)}
  .sem-nav svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .sem-nav:hover{background:var(--s2);color:var(--ink)}
  .sem-nav[aria-current=page]{background:var(--st-watching-bg);color:var(--acc)}
  .sem-nav .badge{margin-inline-start:auto;min-width:20px;height:20px;border-radius:10px;
    background:var(--opportunity);color:#04131A;font-size:.68rem;font-weight:700;
    display:grid;place-items:center;padding-inline:6px}
  .sem-side-foot{margin-block-start:auto;padding:14px 12px 0;border-block-start:1px solid var(--hair);
    font-size:.74rem;color:var(--ink3);line-height:1.6}
  .sem-shell{padding-inline:32px}
  .sem-main{padding-block:32px 48px}
}

/* ═══ لافتة البيانات التجريبية — ظاهرة دائماً ما دام لا مصدر رسمي ════ */
.sem-demo{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;
  border-radius:var(--r-sm);background:var(--warn-bg);
  border:1px solid rgba(240,179,84,.26);margin-block-end:18px;
  font-size:.82rem;line-height:1.65;color:var(--ink2)}
.sem-demo svg{width:17px;height:17px;flex:0 0 auto;margin-block-start:2px;
  fill:none;stroke:var(--warn);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sem-demo b{color:var(--warn);font-weight:700}

/* ═══ عناصر مشتركة ════════════════════════════════════════════════════ */
.sem-h1{font-size:clamp(1.45rem,4.4vw,1.85rem);font-weight:700;line-height:1.4;
  margin:0 0 6px;letter-spacing:-.015em}
.sem-lede{margin:0 0 20px;color:var(--ink2);font-size:.95rem;line-height:1.7;max-width:58ch}
.sem-block{margin-block-end:26px}
.sem-block-h{display:flex;align-items:baseline;gap:10px;margin-block-end:11px}
.sem-block-h h2{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.sem-block-h a,.sem-block-h button.link{margin-inline-start:auto;font-size:.82rem;font-weight:600;
  color:var(--acc);background:transparent;border:0;cursor:pointer;font-family:inherit;
  min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.sem-block-h a:hover,.sem-block-h button.link:hover{text-decoration:underline}

.sem-card{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);
  padding:16px 16px;transition:border-color var(--dur)}
.sem-grid{display:grid;gap:var(--sem-gap)}
@media (min-width:640px){.sem-grid.two{grid-template-columns:1fr 1fr}}

/* قائمة روابط — بطاقة قابلة للنقر بأيقونة وعنوان وشرح */
.sem-link{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.sem-link .gl{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--s2);color:var(--ink2)}
.sem-link .tx{flex:1;min-width:0}
.sem-link b{display:block;font-size:.96rem;font-weight:700;color:var(--ink);
  margin-block-end:2px;line-height:1.45}
.sem-link small{display:block;font-size:.82rem;color:var(--ink3);line-height:1.55}
.sem-link .go{flex:0 0 auto;color:var(--ink3)}
.sem-link:hover{border-color:rgba(22,139,255,.34)}
.sem-link:hover b{color:var(--acc)}
.sem-link:hover .gl{background:var(--st-watching-bg);color:var(--acc)}

/* حالة فارغة مقصودة — لا «No data» */
.sem-empty{text-align:center;padding:38px 20px;background:var(--s1);
  border:1px dashed var(--hair);border-radius:var(--r)}
/* الفراغ الرأسي كله من الحشو (١٠٢ من ١٩٦ بكسل) بلا min-height. يُقلَّص ١٨٪
   على الشاشة العريضة وحدها — الجوال يبقى كما هو لأن الحشو هناك يفصل
   البطاقة عن حوافه الضيقة. */
@media (min-width:900px){ .sem-empty{padding:31px 20px} }
.sem-empty h3{margin:0 0 6px;font-size:1.02rem;font-weight:700}
.sem-empty p{margin:0 0 18px;color:var(--ink2);font-size:.9rem;line-height:1.7;
  max-width:40ch;margin-inline:auto}

.sem-btn{font:inherit;font-size:.94rem;font-weight:700;padding-inline:22px;min-height:48px;
  border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;text-decoration:none}
.sem-btn svg{width:19px;height:19px}
.sem-btn:hover:not(:disabled){background:var(--qarari-primary-hover)}
.sem-btn:disabled{opacity:.5;cursor:not-allowed}
.sem-btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--hair)}
.sem-btn.ghost:hover:not(:disabled){border-color:var(--acc);color:var(--acc);background:transparent}
.sem-btn.sm{min-height:42px;font-size:.87rem;padding-inline:16px}

/* بؤرة ظاهرة موحّدة على كل عنصر تفاعلي في القسم.
   #semMain مُستثنى داخل المُحدِّد نفسه لا بقاعدة تالية: قاعدة الإلغاء
   المنفصلة كانت أقل أولوية فتُهزم، فيظهر إطار أزرق حول الصفحة كلها بعد
   كل تنقل. بؤرة main برمجية لخدمة القارئ الصوتي، وليست إرشاداً بصرياً. */
.sem :is(a,button,input,textarea,select,[tabindex]):not(.sem-main):focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-sm)}

/* هيكل تحميل */
.sem-skel{background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 37%,var(--s1) 63%);
  background-size:400% 100%;animation:semshim 1.3s ease-in-out infinite;border-radius:var(--r-sm)}
@keyframes semshim{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media (prefers-reduced-motion:reduce){
  .sem-skel{animation:none;background:var(--s2)}
  .sem *{transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   بطاقات المراقبة والفرص
   ═══════════════════════════════════════════════════════════════════════ */

/* ── شارة الحالة ─────────────────────────────────────────────────────────
   ثلاث طبقات مستقلة: نص + رمز + لون. من يعجز عن تمييز اللون يقرأ النص،
   ومن يقرأ بالقارئ الصوتي يسمعه. اللون آخر الطبقات لا أولها.          */
.sem-st{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;
  padding:4px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
  /* بلا flex:0 0 auto ينكمش العنصر تحت مقاس نصه داخل حاوية مرنة، ومع
     nowrap يفيض النص خارج صندوقه فيركب على العنصر المجاور. */
  flex:0 0 auto}
.sem-st svg{width:14px;height:14px;stroke-width:2}
.sem-st-open   {color:var(--st-open);     background:var(--st-open-bg);     border-color:rgba(74,222,155,.24)}
.sem-st-closed {color:var(--st-closed);   background:var(--st-closed-bg);   border-color:rgba(126,147,179,.20)}
.sem-st-watching{color:var(--st-watching);background:var(--st-watching-bg); border-color:rgba(22,139,255,.26)}
.sem-st-chance {color:var(--st-chance);   background:var(--st-chance-bg);   border-color:var(--opportunity-line)}
.sem-st-decide {color:var(--st-decide);   background:var(--st-decide-bg);   border-color:rgba(240,179,84,.26)}
.sem-st-paused {color:var(--st-paused);   background:var(--st-paused-bg);   border-color:rgba(126,147,179,.16)}

/* نبضة خفيفة على «نراقبها» وحدها — إشارة حياة، لا زينة */
.sem-st-watching svg{animation:stpulse 2.4s ease-in-out infinite}
@keyframes stpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sem-st-watching svg{animation:none}}

/* ── حرف الأولوية ────────────────────────────────────────────────────── */
.sem-pri{display:inline-grid;place-items:center;width:24px;height:24px;flex:0 0 auto;
  border-radius:7px;font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums}
.sem-pri-A{color:var(--pri-a);background:var(--pri-a-bg);box-shadow:inset 0 0 0 1px rgba(22,139,255,.30)}
.sem-pri-B{color:var(--pri-b);background:var(--pri-b-bg);box-shadow:inset 0 0 0 1px rgba(143,180,232,.24)}
.sem-pri-C{color:var(--pri-c);background:var(--pri-c-bg);box-shadow:inset 0 0 0 1px rgba(126,147,179,.20)}

/* ── بطاقة شعبة ──────────────────────────────────────────────────────── */
.sem-sec{display:flex;flex-direction:column;gap:9px}
.sem-sec-top{display:flex;align-items:center;gap:9px}
.sem-sec-code{font-size:.78rem;font-weight:700;color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sem-sec-title{margin:0;font-size:1rem;font-weight:700;line-height:1.45;flex:1;min-width:0}
.sem-sec-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.83rem;color:var(--ink2);line-height:1.6}
.sem-sec-meta span{display:inline-flex;align-items:center;gap:5px}
.sem-sec-meta svg{width:14px;height:14px;color:var(--ink3)}
.sem-sec-foot{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;
  padding-block-start:9px;border-block-start:1px solid var(--hair)}
.sem-sec-foot .sem-sec-code{flex:0 0 auto}
.sem-sec-when{font-size:.76rem;color:var(--ink3);margin-inline-start:auto;
  font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.sem-sec-held{font-size:.74rem;font-weight:700;color:var(--ok);background:var(--ok-bg);
  border:1px solid rgba(74,222,155,.24);border-radius:999px;padding:3px 9px}

/* أيام الأسبوع كشريط صغير — أوضح من «ح ث خ» نصاً مجرداً */
.sem-days{display:flex;gap:3px}
.sem-days i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;
  font-size:.66rem;font-weight:700;font-style:normal;
  background:var(--s2);color:var(--ink3);border:1px solid var(--hair)}
.sem-days i.on{background:var(--st-watching-bg);color:var(--acc);border-color:rgba(22,139,255,.30)}

/* ── بطاقة الفرصة ────────────────────────────────────────────────────── */
.sem-opp{border:1px solid var(--opportunity-line);border-radius:var(--r);padding:16px;
  background:linear-gradient(180deg,var(--opportunity-bg),var(--s1) 62%)}
.sem-opp-tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;
  color:var(--opportunity);margin-block-end:10px}
.sem-opp-tag svg{width:15px;height:15px;stroke-width:2}
.sem-opp-why{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.sem-opp-why li{display:flex;align-items:flex-start;gap:7px;font-size:.87rem;
  color:var(--ink2);line-height:1.6}
.sem-opp-why svg{width:15px;height:15px;margin-block-start:2px;color:var(--ok)}
.sem-opp-why li.no svg{color:var(--warn)}
.sem-opp-acts{display:flex;gap:9px;flex-wrap:wrap;margin-block-start:15px}

/* ── شريط الملخص ─────────────────────────────────────────────────────────
   خمسة أعمدة ثابتة لا auto-fit: الأخير كان يتيتّم في سطر وحده على الجوال
   فتظهر مساحة فارغة بلون الفاصل تُقرأ كعطل.                            */
.sem-sum{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.sem-sum div{background:var(--s1);padding:12px 4px;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-start}
.sem-sum b{display:block;font-size:1.3rem;font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sem-sum small{display:block;font-size:.7rem;color:var(--ink3);margin-block-start:4px;
  line-height:1.35;text-wrap:balance}
@media (min-width:520px){.sem-sum div{padding:14px 10px}.sem-sum small{font-size:.76rem}}
.sem-sum .warnv b{color:var(--warn)}
.sem-sum .chancev b{color:var(--opportunity)}

/* ── مدخل الوكيل ─────────────────────────────────────────────────────── */
.sem-ask{display:flex;gap:8px;align-items:center;background:var(--s1);
  border:1px solid var(--hair);border-radius:var(--r);padding:6px 6px 6px 6px;
  margin-block-end:20px;transition:border-color var(--dur)}
.sem-ask:focus-within{border-color:var(--acc)}
.sem-ask input{flex:1;min-width:0;font:inherit;font-size:.95rem;background:transparent;
  color:var(--ink);border:0;padding:12px 10px;min-height:44px}
.sem-ask input::placeholder{color:var(--ink3)}
.sem-ask input:focus{outline:none}
.sem-ask button{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-sm);background:var(--acc);color:var(--on-acc);border:0;cursor:pointer}
.sem-ask button:hover{background:var(--qarari-primary-hover)}
/* شريط الاقتراحات يمرّر أفقياً. القناع وحده خافت جداً على الجوال، فأُضيف
   معه سهم ثابت عند الحافة يقول «فيه بعد» بلا لبس. */
.sem-chips-wrap{position:relative;margin-block-end:22px}
.sem-chips{display:flex;gap:7px;overflow-x:auto;padding-block-end:4px;
  scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(to left,#000 82%,transparent);
  mask-image:linear-gradient(to left,#000 82%,transparent)}
.sem-chips::-webkit-scrollbar{display:none}
.sem-chips button{scroll-snap-align:start}
.sem-chips-more{position:absolute;inset-block:0;inset-inline-end:0;width:34px;
  display:grid;place-items:center;pointer-events:none;color:var(--ink3);
  background:linear-gradient(to right,var(--bg),transparent)}
[dir=rtl] .sem-chips-more{background:linear-gradient(to left,var(--bg),transparent)}
.sem-chips-more svg{width:18px;height:18px}
.sem-chips-wrap.at-end .sem-chips-more{opacity:0;transition:opacity var(--dur)}
.sem-chips button{flex:0 0 auto;font:inherit;font-size:.83rem;font-weight:600;
  padding:0 14px;min-height:40px;border-radius:999px;background:var(--s1);
  color:var(--ink2);border:1px solid var(--hair);cursor:pointer;white-space:nowrap}
.sem-chips button:hover{border-color:var(--acc);color:var(--acc)}

/* ═══════════════════════════════════════════════════════════════════════
   شاشة المراقبة — مجموعة بدائل لكل مادة، مرتّبة A ثم B ثم C
   ═══════════════════════════════════════════════════════════════════════ */

/* عمود واحد على الجوال، وعمودان على الشاشة العريضة — عمود بعرض ١٠٠٠ بكسل
   يترك ثلثي البطاقة فارغاً ويجبر الطالب على تمرير طويل بلا داعٍ. */
.sem-grps{display:grid;gap:16px;align-items:start;margin-block-end:20px}
@media (min-width:1100px){.sem-grps{grid-template-columns:1fr 1fr}}

.sem-grp{background:var(--s1);border:1px solid var(--hair);
  border-radius:var(--r);overflow:hidden}
.sem-grp-h{display:flex;align-items:center;gap:10px;padding:14px 15px;
  border-block-end:1px solid var(--hair);background:var(--qarari-bg-secondary)}
.sem-grp-h h2{margin:0;font-size:1rem;font-weight:700;line-height:1.4;flex:1;min-width:0}
.sem-grp-h .sem-sec-code{flex:0 0 auto}
/* الحذف فعل لا رجعة فيه على الجوال — هدف لمس كامل لا 38 بكسل */
.sem-grp-x{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border-radius:var(--r-sm);background:transparent;border:0;color:var(--ink3);cursor:pointer}
.sem-grp-x:hover{background:var(--alert-bg);color:var(--alert)}

/* شرح ترتيب البدائل — يُقال مرة في رأس المجموعة لا على كل بطاقة */
.sem-grp-note{padding:10px 15px;font-size:.8rem;color:var(--ink3);line-height:1.6;
  border-block-end:1px solid var(--hair)}

/* قائمة البدائل: بدون تصفير يبقى حشو المتصفح الافتراضي (40px بداية) فيضيق
   عمود المحتوى إلى النصف تقريباً على الجوال بلا سبب ظاهر. */
.sem-alts{margin:0;padding:0;list-style:none}

.sem-alt{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border-block-end:1px solid var(--hair);background:var(--s1)}
.sem-alt:last-child{border-block-end:0}
.sem-alt.is-drag{opacity:.45}
.sem-alt.is-over{background:var(--st-watching-bg)}
.sem-alt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sem-alt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sem-alt-top b{font-size:.94rem;font-weight:700}

/* أزرار النقل — بديل السحب لمن لا يستطيعه، وليست خياراً ثانوياً مخفياً.
   على اللمس هي طريقة إعادة الترتيب الوحيدة (المقبض مخفي هناك)، فتأخذ
   مقاس هدف لمس كامل. مع مؤشر دقيق يكفي مقاس أصغر لأن السحب متاح. */
.sem-move{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.sem-move button{display:grid;place-items:center;width:44px;height:40px;
  border-radius:9px;background:var(--s2);border:1px solid var(--hair);
  color:var(--ink3);cursor:pointer;padding:0}
@media (hover:hover) and (pointer:fine){
  .sem-move{gap:2px}
  .sem-move button{width:34px;height:28px;border-radius:7px}
}
.sem-move button:hover:not(:disabled){color:var(--acc);border-color:rgba(22,139,255,.34)}
.sem-move button:disabled{opacity:.32;cursor:not-allowed}
.sem-move svg{width:15px;height:15px}

/* مقبض السحب — يظهر حيث السحب مدعوم فعلاً */
.sem-drag{display:none;flex:0 0 auto;width:30px;align-self:center;
  color:var(--ink3);cursor:grab;touch-action:none}
.sem-drag:active{cursor:grabbing}
@media (hover:hover) and (pointer:fine){.sem-drag{display:grid;place-items:center}}

/* شريط إجراءات البطاقة */
.sem-alt-acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sem-mini{font:inherit;font-size:.79rem;font-weight:600;padding:0 11px;min-height:36px;
  border-radius:8px;background:transparent;color:var(--ink2);
  border:1px solid var(--hair);cursor:pointer;white-space:nowrap}
.sem-mini:hover{border-color:var(--acc);color:var(--acc)}
.sem-mini.on{background:var(--ok-bg);color:var(--ok);border-color:rgba(74,222,155,.28)}
.sem-mini.danger:hover{border-color:rgba(255,107,90,.4);color:var(--alert)}

/* لوح اختيار الشعب */
.sem-pick{display:grid;gap:9px;margin-block-start:12px}
.sem-pick-row{display:flex;align-items:center;gap:11px;padding:12px 13px;
  border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--hair);
  cursor:pointer;text-align:start;font:inherit;color:inherit;width:100%}
.sem-pick-row:hover{border-color:rgba(22,139,255,.34)}
.sem-pick-row[aria-pressed=true]{border-color:var(--acc);background:var(--st-watching-bg)}
.sem-pick-row .tick{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:7px;border:1.5px solid var(--hair);color:transparent}
.sem-pick-row[aria-pressed=true] .tick{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.sem-pick-row .tick svg{width:14px;height:14px;stroke-width:2.4}
.sem-pick-info{flex:1;min-width:0}
.sem-pick-info b{display:block;font-size:.92rem;font-weight:700;margin-block-end:3px}
.sem-pick-info small{display:block;font-size:.8rem;color:var(--ink3);line-height:1.55}
.sem-pick-row.clash{border-color:rgba(240,179,84,.3)}
.sem-pick-row .clash-why{font-size:.76rem;color:var(--warn);display:block;margin-block-start:3px}

/* لوح منزلق للإضافة */
.sem-sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;
  background:rgba(2,8,20,.62);backdrop-filter:blur(3px);padding:0}
.sem-sheet-in{width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;
  background:var(--qarari-bg-secondary);border:1px solid var(--hair);
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 18px calc(24px + var(--safe-b))}
.sem-sheet-h{display:flex;align-items:center;gap:10px;margin-block-end:6px}
.sem-sheet-h h2{margin:0;font-size:1.1rem;font-weight:700;flex:1}
@media (min-width:640px){
  .sem-sheet{place-items:center}
  .sem-sheet-in{border-radius:var(--r-lg);max-height:82dvh}
}

/* ═══════════════════════════════════════════════════════════════════════
   الجدول — بطاقات خطط + عرض أسبوعي
   ═══════════════════════════════════════════════════════════════════════ */

.sem-plans{display:grid;gap:13px;margin-block-end:22px}
@media (min-width:900px){.sem-plans{grid-template-columns:repeat(3,1fr)}}

.sem-plan{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);
  padding:15px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  text-align:start;font:inherit;color:inherit;width:100%}
.sem-plan:hover{border-color:rgba(22,139,255,.34)}
.sem-plan[aria-pressed=true]{border-color:var(--acc);background:var(--st-watching-bg)}
.sem-plan-h{display:flex;align-items:center;gap:9px}
.sem-plan-h b{font-size:1rem;font-weight:700;flex:1;min-width:0}
.sem-plan-h .tick{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:50%;border:1.5px solid var(--hair);color:transparent}
.sem-plan[aria-pressed=true] .tick{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.sem-plan-h .tick svg{width:13px;height:13px;stroke-width:2.6}
.sem-plan-why{margin:0;font-size:.82rem;color:var(--ink3);line-height:1.6}
.sem-tags{display:flex;flex-wrap:wrap;gap:6px}
.sem-tag{font-size:.75rem;font-weight:600;padding:4px 9px;border-radius:7px;
  background:var(--s2);color:var(--ink2);border:1px solid var(--hair);white-space:nowrap}
.sem-tag.good{color:var(--ok);background:var(--ok-bg);border-color:rgba(74,222,155,.22)}
.sem-tag.bad{color:var(--warn);background:var(--warn-bg);border-color:rgba(240,179,84,.24)}
.sem-plan-same{font-size:.75rem;color:var(--ink3)}

/* ── العرض الأسبوعي: أجندة على الجوال ─────────────────────────────────
   شبكة بخمسة أعمدة على ٣٦٠ بكسل تعطي ٦٠ بكسل للعمود — لا اسم مادة يُقرأ
   فيها. الأجندة تعرض نفس المعلومة كاملة ومقروءة، والشبكة تظهر حيث تتسع. */
.sem-agenda{display:grid;gap:14px}
.sem-day{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.sem-day-h{display:flex;align-items:baseline;gap:8px;padding:11px 14px;
  background:var(--qarari-bg-secondary);border-block-end:1px solid var(--hair)}
.sem-day-h b{font-size:.94rem;font-weight:700}
.sem-day-h small{font-size:.76rem;color:var(--ink3)}
.sem-slot{display:flex;gap:12px;padding:12px 14px;border-block-end:1px solid var(--hair)}
.sem-slot:last-child{border-block-end:0}
.sem-slot-t{flex:0 0 auto;width:52px;font-size:.78rem;font-weight:700;color:var(--acc);
  font-variant-numeric:tabular-nums;line-height:1.5}
.sem-slot-t small{display:block;font-weight:400;color:var(--ink3)}
.sem-slot-b{flex:1;min-width:0}
.sem-slot-b b{display:block;font-size:.93rem;font-weight:700;line-height:1.45;margin-block-end:3px}
.sem-slot-b small{display:block;font-size:.8rem;color:var(--ink3);line-height:1.55}
.sem-gapline{display:flex;align-items:center;gap:8px;padding:7px 14px;
  font-size:.76rem;color:var(--ink3);background:var(--qarari-bg-primary)}
.sem-gapline::before,.sem-gapline::after{content:"";height:1px;flex:1;background:var(--hair)}

/* ── الشبكة الأسبوعية (تابلت فما فوق) ─────────────────────────────────
   شبكة واحدة بصفوف نصف ساعة؛ المحاضرة تمتد بعدد صفوفها الحقيقي فلا تبدو
   محاضرة ٩٠ دقيقة كأنها ٦٠.                                            */
.sem-week{display:none}
@media (min-width:768px){
  .sem-agenda{display:none}
  .sem-week{display:grid;gap:0;background:var(--s1);border:1px solid var(--hair);
    border-radius:var(--r);overflow:hidden}
  .sem-week-hh{background:var(--qarari-bg-secondary);padding:8px 6px;text-align:center;
    font-size:.74rem;font-weight:700;color:var(--ink3);font-variant-numeric:tabular-nums;
    border-inline-end:1px solid var(--hair);border-block-end:1px solid var(--hair)}
  .sem-week-hour{display:flex;align-items:flex-start;justify-content:center;
    background:var(--s1);padding-block-start:4px}
  .sem-week-cell{border-inline-end:1px solid var(--hair);border-block-end:1px solid var(--hair)}
  /* نصف الساعة بخط أخف من الساعة الكاملة — يُقرأ الإيقاع بلا ضجيج */
  .sem-week-cell.half{border-block-end-color:color-mix(in oklab,var(--hair) 45%,transparent)}
  .sem-week-blk{background:var(--st-watching-bg);border:1px solid rgba(22,139,255,.34);
    border-radius:8px;padding:5px 8px;margin:2px;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center}
  .sem-week-blk b{display:block;font-size:.78rem;font-weight:700;line-height:1.3;
    color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sem-week-blk small{display:block;font-size:.7rem;color:var(--ink3);line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* محاضرة قصيرة لا تتسع لسطرين — يُسقط السطر الثانوي بدل أن يُقصّ */
  .sem-week-blk.short small{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   الوكيل — محادثة موجّهة، لا دردشة حرة
   ═══════════════════════════════════════════════════════════════════════ */

/* لافتة المحاكاة — دائمة وصريحة ما دام الفهم بالقواعد لا بنموذج */
.sem-sim{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;
  border-radius:var(--r-sm);background:var(--st-watching-bg);
  border:1px solid rgba(22,139,255,.26);margin-block-end:16px;
  font-size:.82rem;line-height:1.65;color:var(--ink2)}
.sem-sim svg{width:17px;height:17px;flex:0 0 auto;margin-block-start:2px;color:var(--acc)}
.sem-sim b{color:var(--acc);font-weight:700}

.sem-turns{display:grid;gap:14px;margin-block-end:18px}
.sem-said{justify-self:end;max-width:88%;background:var(--acc);color:var(--on-acc);
  border-radius:var(--r) var(--r) 6px var(--r);padding:11px 14px;
  font-size:.93rem;line-height:1.65}
.sem-reply{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);
  padding:14px;display:grid;gap:11px}
.sem-reply h3{margin:0;font-size:.9rem;font-weight:700;color:var(--ink2)}

/* ما فُهم: كل بند مربوط بحقل مبنيّ لا بجملة حرة */
.sem-got{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sem-got li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;
  color:var(--ink);line-height:1.6}
.sem-got svg{width:15px;height:15px;margin-block-start:2px;color:var(--ok);flex:0 0 auto}
.sem-got li.sem-unclear svg{color:var(--warn)}
.sem-got li.sem-unclear{color:var(--ink2)}

.sem-effect{padding:11px 13px;border-radius:var(--r-sm);background:var(--s2);
  border:1px solid var(--hair);font-size:.85rem;line-height:1.65;color:var(--ink2)}
.sem-effect b{color:var(--ink)}

/* التفضيلات السارية — يشوفها الطالب دائماً ويقدر يشيل أي واحد */
.sem-prefs{display:flex;flex-wrap:wrap;gap:7px}
.sem-pref{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;
  padding:0 4px 0 12px;min-height:38px;border-radius:999px;background:var(--st-watching-bg);
  color:var(--acc);border:1px solid rgba(22,139,255,.28)}
/* زر الشيل هدف لمس حقيقي: كان ٢٢ بكسل، وهو الطريقة الوحيدة لإلغاء تفضيل */
.sem-pref button{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:transparent;border:0;color:inherit;cursor:pointer;padding:0;opacity:.75}
.sem-pref button:hover{opacity:1;background:rgba(255,107,90,.18);color:var(--alert)}
.sem-pref svg{width:13px;height:13px;stroke-width:2.4}

/* ═══════════════════════════════════════════════════════════════════════
   الفرص ومساعد التسجيل والتنبيهات
   ═══════════════════════════════════════════════════════════════════════ */

.sem-opps{display:grid;gap:14px}
@media (min-width:1100px){.sem-opps{grid-template-columns:1fr 1fr}}
.sem-opp.weak{background:var(--s1);border-color:var(--hair)}
.sem-opp.weak .sem-opp-tag{color:var(--ink3)}
.sem-opp.blocked{background:var(--s1);border-color:rgba(240,179,84,.26)}
.sem-opp.blocked .sem-opp-tag{color:var(--warn)}
.sem-opp-why li.no svg{color:var(--warn)}

/* ── مسار التسجيل: من يفعل ماذا ───────────────────────────────────────
   الغموض هنا خطر: الطالب لازم يعرف بالضبط وين ينتهي دور قراري ويبدأ دوره. */
.sem-lane{display:grid;gap:0;margin-block:14px;border:1px solid var(--hair);
  border-radius:var(--r);overflow:hidden}
.sem-lane-row{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;
  border-block-end:1px solid var(--hair);background:var(--s1)}
.sem-lane-row:last-child{border-block-end:0}
.sem-lane-row.you{background:var(--warn-bg)}
.sem-lane-who{flex:0 0 auto;font-size:.74rem;font-weight:700;padding:4px 10px;
  border-radius:999px;white-space:nowrap;
  background:var(--st-watching-bg);color:var(--acc);border:1px solid rgba(22,139,255,.28)}
.sem-lane-row.you .sem-lane-who{background:rgba(240,179,84,.16);color:var(--warn);
  border-color:rgba(240,179,84,.34)}
.sem-lane-txt{flex:1;min-width:0;font-size:.87rem;line-height:1.65;color:var(--ink2)}
.sem-lane-txt b{display:block;color:var(--ink);font-weight:700;margin-block-end:2px}

/* حقل نسخ */
.sem-copy{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-block-start:9px;
  border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--hair)}
.sem-copy code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  direction:ltr;text-align:start}
.sem-copy button{flex:0 0 auto;font:inherit;font-size:.78rem;font-weight:700;
  padding:0 12px;min-height:36px;border-radius:8px;background:var(--acc);
  color:var(--on-acc);border:0;cursor:pointer}
.sem-copy button.done{background:var(--ok);color:#04131A}

/* قائمة تأكيد بعد التسجيل — قراري لا يعرف النتيجة، الطالب يخبره */
.sem-check{display:grid;gap:8px;margin-block-start:12px}
.sem-check button{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:var(--r-sm);background:var(--s2);border:1px solid var(--hair);
  color:inherit;font:inherit;font-size:.88rem;cursor:pointer;text-align:start;width:100%}
.sem-check button:hover{border-color:var(--acc)}
.sem-check .box{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:6px;border:1.5px solid var(--hair);color:transparent}
.sem-check button[aria-pressed=true] .box{background:var(--ok);border-color:var(--ok);color:#04131A}
.sem-check button[aria-pressed=true]{border-color:rgba(74,222,155,.3)}
.sem-check svg{width:14px;height:14px;stroke-width:2.6}

/* ── التنبيهات ───────────────────────────────────────────────────────── */
.sem-notis{display:grid;gap:10px}
.sem-noti{display:flex;gap:11px;padding:13px 14px;background:var(--s1);
  border:1px solid var(--hair);border-radius:var(--r)}
.sem-noti.unread{border-inline-start:3px solid var(--acc)}
.sem-noti-ic{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:9px;background:var(--s2);color:var(--ink3)}
.sem-noti-ic.chance{background:var(--opportunity-bg);color:var(--opportunity)}
.sem-noti-ic.seat{background:var(--ok-bg);color:var(--ok)}
.sem-noti-ic.action{background:var(--warn-bg);color:var(--warn)}
.sem-noti-ic.conflict{background:var(--alert-bg);color:var(--alert)}
.sem-noti-b{flex:1;min-width:0}
.sem-noti-b b{display:block;font-size:.9rem;font-weight:700;line-height:1.5;margin-block-end:3px}
.sem-noti-b small{display:block;font-size:.78rem;color:var(--ink3);line-height:1.5}
.sem-noti-b ul{margin:7px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.sem-noti-b li{font-size:.8rem;color:var(--ink2);line-height:1.5}
.sem-noti-b li::before{content:"— ";color:var(--ink3)}

/* تفضيلات قنوات التنبيه — تُعرض كنيّة معلنة لا كميزة شغّالة */
.sem-chan{display:grid;gap:9px;margin-block-start:14px}
.sem-chan-row{display:flex;align-items:center;gap:11px;padding:12px 13px;
  border-radius:var(--r-sm);background:var(--s1);border:1px solid var(--hair)}
.sem-chan-row b{flex:1;font-size:.9rem;font-weight:700}
.sem-chan-soon{font-size:.74rem;font-weight:700;color:var(--ink3);
  background:var(--s2);border:1px solid var(--hair);border-radius:999px;padding:4px 10px}

/* ═══════════════════════════════════════════════════════════════════════
   التهيئة — ثلاث خطوات، ولا سؤال قبل ما نعطي قيمة
   ═══════════════════════════════════════════════════════════════════════ */

.sem-steps{display:flex;gap:7px;margin-block-end:20px}
.sem-steps i{flex:1;height:4px;border-radius:2px;background:var(--s2);
  border:1px solid var(--hair);font-style:normal}
.sem-steps i.on{background:var(--acc);border-color:var(--acc)}
.sem-steps i.done{background:rgba(22,139,255,.42);border-color:transparent}

.sem-step-n{font-size:.78rem;font-weight:700;color:var(--acc);margin-block-end:6px}
.sem-ob-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-block-start:22px;padding-block-start:18px;border-block-start:1px solid var(--hair)}
.sem-ob-foot .grow{flex:1}
.sem-ob-count{font-size:.82rem;color:var(--ink3)}

/* اختيار متعدد بسيط */
.sem-opts{display:grid;gap:9px}
.sem-opt{display:flex;align-items:center;gap:11px;padding:13px;border-radius:var(--r-sm);
  background:var(--s1);border:1px solid var(--hair);cursor:pointer;
  font:inherit;color:inherit;text-align:start;width:100%}
.sem-opt:hover{border-color:rgba(22,139,255,.34)}
.sem-opt[aria-pressed=true]{border-color:var(--acc);background:var(--st-watching-bg)}
.sem-opt .box{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;
  border-radius:6px;border:1.5px solid var(--hair);color:transparent}
.sem-opt[aria-pressed=true] .box{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.sem-opt .box svg{width:14px;height:14px;stroke-width:2.6}
.sem-opt-b{flex:1;min-width:0}
.sem-opt-b b{display:block;font-size:.93rem;font-weight:700;line-height:1.45}
.sem-opt-b small{display:block;font-size:.8rem;color:var(--ink3);line-height:1.55;margin-block-start:2px}

/* ═══════════════════════════════════════════════════════════════════════
   مخالفات الخطة المعتمدة — تُعرض بالمادة والسبب، لا كعدّاد مجرّد
   ═══════════════════════════════════════════════════════════════════════ */
.sem-issues{border:1px solid rgba(240,179,84,.30);border-radius:var(--r);
  background:linear-gradient(180deg,var(--warn-bg),var(--s1) 62%);padding:15px;
  margin-block-end:22px}
.sem-issues-h{display:flex;align-items:center;gap:8px;margin-block-end:11px}
.sem-issues-h svg{width:18px;height:18px;color:var(--warn);flex:0 0 auto}
.sem-issues-h b{font-size:.95rem;font-weight:700;color:var(--warn)}
.sem-issue{padding:11px 0;border-block-start:1px solid var(--hair)}
.sem-issue:first-of-type{border-block-start:0;padding-block-start:0}
.sem-issue > b{display:block;font-size:.9rem;font-weight:700;margin-block-end:5px}
.sem-issue ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.sem-issue li{display:flex;align-items:flex-start;gap:7px;font-size:.85rem;
  color:var(--ink2);line-height:1.6}
.sem-issue li svg{width:14px;height:14px;margin-block-start:3px;color:var(--warn);flex:0 0 auto}
.sem-issues-acts{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:13px}

/* تنبيه اختلاف الترتيب عن الاعتماد */
.sem-grp-warn{display:flex;align-items:flex-start;gap:8px;color:var(--warn);
  background:var(--warn-bg);border-block-end:1px solid rgba(240,179,84,.22)}
.sem-grp-warn svg{width:15px;height:15px;flex:0 0 auto;margin-block-start:3px}
.sem-grp-warn span{color:var(--ink2)}

/* ── شريط التراجع — يظهر بعد فعل لا رجعة فيه ─────────────────────────── */
.sem-undo{position:fixed;inset-inline:0;inset-block-end:calc(var(--sem-tabs-h) + var(--safe-b) + 10px);
  z-index:55;display:flex;justify-content:center;padding-inline:16px;pointer-events:none}
.sem-undo-in{display:flex;align-items:center;gap:12px;max-width:520px;width:100%;
  padding:12px 14px;border-radius:var(--r);background:var(--qarari-surface);
  border:1px solid var(--hair);box-shadow:var(--shadow-pop);pointer-events:auto}
.sem-undo-in span{flex:1;min-width:0;font-size:.88rem;line-height:1.5}
.sem-undo-in button{flex:0 0 auto;font:inherit;font-size:.85rem;font-weight:700;
  padding:0 14px;min-height:40px;border-radius:9px;background:var(--acc);
  color:var(--on-acc);border:0;cursor:pointer}
@media (min-width:900px){
  .sem-undo{inset-block-end:20px;padding-inline-start:calc(var(--sem-side-w) + 20px)}
}

/* ── نافذة تأكيد ─────────────────────────────────────────────────────── */
.sem-confirm-b{font-size:.9rem;line-height:1.75;color:var(--ink2);margin:0 0 6px}
.sem-confirm-l{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px}
.sem-confirm-l li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;
  color:var(--ink2);line-height:1.6}
.sem-confirm-l svg{width:14px;height:14px;margin-block-start:3px;color:var(--warn);flex:0 0 auto}
.sem-confirm-acts{display:flex;gap:10px;flex-wrap:wrap}
.sem-btn.danger{background:var(--alert);color:#1A0906}
.sem-btn.danger:hover:not(:disabled){filter:brightness(1.08)}
.sem-side-sep{margin:14px 12px 5px;font-size:.7rem;font-weight:700;color:var(--ink3);
  letter-spacing:.03em;padding-block-start:12px;border-block-start:1px solid var(--hair)}

/* رسالة سبب منع المتابعة — قرب الأزرار لا في أعلى الصفحة */
.sem-ob-hint{margin:10px 0 0;font-size:.85rem;font-weight:600;color:var(--warn);
  line-height:1.6}

/* رسالة المسار غير الموجود */
.sem-toast{display:block;padding:11px 14px;margin-block-end:16px;border-radius:var(--r-sm);
  background:var(--warn-bg);border:1px solid rgba(240,179,84,.26);
  color:var(--ink2);font-size:.86rem;line-height:1.6}

/* عدّاد اختيار البدائل + تأكيد بصري للضغطة */
.sem-pick-count{margin:0 0 10px;font-size:.83rem;font-weight:600;color:var(--acc)}
.sem-pick-row.just{animation:sempick .45s var(--ease)}
@keyframes sempick{0%{transform:scale(1)}40%{transform:scale(.985)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sem-pick-row.just{animation:none}}

/* ── P-1: مقبض السحب يحاذي محتوى الصف بدل ما يترك فراغاً معزولاً ─────
   المقبض مخفي على اللمس، وكان يترك عمود flex فارغاً بعرضه في بعض الحالات.
   الآن يُطوى تماماً حين يختفي.                                        */
.sem-drag{width:0;margin:0;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .sem-drag{display:grid;place-items:center;width:26px;align-self:flex-start;
    margin-block-start:4px;overflow:visible}
}

/* ── P-2: شكل المؤشّر يتبع سلوكه ───────────────────────────────────────
   المربّع للاختيار المتعدد، والدائرة للاختيار الأحادي. الخلط بينهما
   يجعل الطالب يظن أنه يقدر يختار أكثر من واحد وهو ما يقدر، أو العكس. */
.sem-opt.single .box{border-radius:50%}
.sem-opt.single[aria-pressed=true] .box{background:transparent;border-color:var(--acc);
  color:var(--acc);box-shadow:inset 0 0 0 4px var(--acc)}
.sem-opt.single[aria-pressed=true] .box svg{display:none}
.sem-check button.single .box{border-radius:50%}
.sem-check button.single[aria-pressed=true] .box{background:transparent;
  border-color:var(--ok);color:var(--ok);box-shadow:inset 0 0 0 4px var(--ok)}
.sem-check button.single[aria-pressed=true] .box svg{display:none}
/* قائمة إضافة المواد: فعل لا اختيار — علامة زائد ظاهرة لا مربع تحديد فارغ */
.sem-pick-row.action .tick{border-radius:50%;border-style:dashed;color:var(--acc)}
.sem-pick-row.action:hover .tick{border-color:var(--acc);border-style:solid}