/* رِواق 7.9.13 — طبقة التبسيط واللون.

   المشكلة التي تعالجها: الطلاب وصفوا المنصة بأنها «ضخمة · معقدة · صعب نستخدمها»، وأن
   الصفحات «مصمتة» — لونٌ واحد لا تميّز فيه العين بلوكًا عن بلوك، فتقرأ الصفحة ككتلة
   واحدة ويضيع الترتيب. والعلاج ليس ألوانًا ثابتة نفرضها، بل درجات مشتقّة من لون المظهر
   الذي اختاره المستخدم نفسه، حتى يبقى الشكل شكله ويكسب التمييز.

   القاعدتان اللتان يطبّقهما هذا الملف:
   ١) التناوب: كل بلوك فاتح ويليه غامق، فيفصل بينهما اللون بلا خطوط ولا فواصل.
   ٢) لكل صفحة درجتها الخاصة من اللون نفسه، فتعرف العين مكانها قبل أن تقرأ العنوان.

   ولا شيء هنا يمسّ المخرجات: قواعد الطباعة والتصدير خارج نطاق هذا الملف تمامًا،
   ومحصورة بـ :not(.plan-sheet) حيث يلزم. */

/* ── صفوف الخطة الأسبوعية ─────────────────────────────────────────────── */

.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

/* نافذة الخطة مساحة عمل لا نموذج صغير: تستفيد من عرض الشاشة من غير شريط أفقي. */
.modal.weekly-plan-modal {
  width: min(1500px, calc(100vw - 28px));
}

.weekly-plan-modal .modal-body {
  padding: 16px 18px;
  overflow-x: hidden;
}

.weekly-plan-modal form > header,
.weekly-plan-modal form > footer {
  padding-inline: 18px;
}

.modal.plan-export-modal { width: min(920px, calc(100vw - 28px)); }
.plan-one-page-promise { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--riwaq-block-line, #e8d9b9); border-radius: 14px; background: var(--riwaq-block-beige, #f8f3e8); }
.plan-one-page-promise > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 999px; background: var(--riwaq-block-ink, var(--sidebar)); color: #fff; font-weight: 900; }
.plan-one-page-promise > div { display: grid; gap: 2px; }
.plan-one-page-promise small, .plan-export-advanced > small, .plan-font-control small { color: var(--muted); line-height: 1.5; }
.plan-font-control, .plan-width-control { display: grid; gap: 7px; }
.plan-font-control > span, .plan-width-control > span { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.plan-font-control output, .plan-width-control output { color: var(--accent); font-weight: 900; }
.plan-font-control input[type="range"], .plan-width-control input[type="range"] { width: 100%; accent-color: var(--accent); }
.plan-export-advanced { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.plan-export-advanced > summary { cursor: pointer; padding: 12px 14px; font-weight: 900; color: var(--text); }
.plan-export-advanced[open] > summary { border-bottom: 1px solid var(--line); background: var(--riwaq-block-beige-soft, #fcf9f3); }
.plan-column-widths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.plan-export-advanced > small { display: block; padding: 0 14px 14px; }

@media (max-width: 640px) {
  .plan-column-widths { grid-template-columns: 1fr; }
  .plan-one-page-promise { align-items: flex-start; }
  .admin-account-actions { grid-template-columns: 1fr; min-width: 180px; }
}

.admin-account-actions { display: grid; grid-template-columns: repeat(2, minmax(132px, 1fr)); gap: 8px; min-width: 292px; }
.admin-account-actions .btn { width: 100%; min-width: 0; }
.account-change-summary, .activation-help { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--riwaq-block-line, #e8d9b9); border-radius: 14px; background: var(--riwaq-block-beige, #f8f3e8); }
.account-change-summary p, .activation-help p { margin: 4px 0 0; color: var(--muted); line-height: 1.65; }
.activation-help > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 999px; background: var(--riwaq-block-gold, #d4aa4b); color: var(--riwaq-block-ink, var(--text)); font-weight: 900; }
.account-section-field { display: grid; gap: 7px; font-weight: 800; }
.account-section-field select { width: 100%; min-height: 48px; }
.activation-steps { margin: 0; padding-inline-start: 24px; color: var(--text); line-height: 1.9; }

@media (min-width: 761px) {
  .weekly-plan-modal .modal-body { max-height: calc(100dvh - 178px); }
}

.plan-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1.75fr) minmax(190px, 0.72fr) minmax(118px, 0.46fr);
  align-items: start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--riwaq-block-line, #e8d9b9));
  border-inline-start: 5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 3%, var(--card, #fff));
}

/* التناوب: الدرجة الغامقة على الأسطر الزوجية. الفرق مقصود أن يكون محسوسًا لا صارخًا —
   يكفي أن تفصله العين، لا أن يسرق الانتباه من النص. */
.plan-row:nth-child(even) {
  background: color-mix(in srgb, var(--accent) 8%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--riwaq-block-line, #e8d9b9));
}

.plan-row.has-assignment {
  border-inline-start-color: color-mix(in srgb, var(--accent) 72%, var(--riwaq-block-gold, #d4aa4b));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* v7.9.13: يوم الإجازة جزء من التسلسل الزمني لكنه ليس أسبوع عمل. يظهر مرةً واحدة
   باسم الإجازة المحدد، وبلا أي حقل أو زر يمكنه فتح مسار تعديل. */
.plan-row.plan-row-holiday {
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  border-color: var(--riwaq-block-gold);
  background: linear-gradient(110deg, var(--riwaq-block-beige-soft), var(--riwaq-block-beige));
  box-shadow: inset -4px 0 0 var(--riwaq-block-gold);
}

.plan-row-holiday .plan-cell-label,
.plan-row-holiday .plan-week-date .dual-date-hijri,
.plan-row-holiday .plan-week-date .dual-date-gregorian {
  color: var(--riwaq-block-ink);
}

.plan-holiday-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--riwaq-block-ink);
  color: white;
  font-size: 0.76rem;
  font-weight: 800;
}

.plan-holiday-cell {
  grid-column: 2 / -1;
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--riwaq-block-ink);
}

.plan-holiday-cell > span {
  color: color-mix(in srgb, var(--riwaq-block-gold) 68%, var(--riwaq-block-ink));
  font-size: 0.76rem;
  font-weight: 800;
}

.plan-holiday-cell > strong {
  font-size: 1.05rem;
  line-height: 1.5;
}

.plan-holiday-cell > small {
  color: var(--muted);
  line-height: 1.55;
}

.plan-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* العنوان فوق كل خانة — يُقرأ مرة ثم تتعلمه العين، فيبقى صغيرًا وهادئًا. */
.plan-cell-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted, #667));
}

.plan-beginner-guide {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--riwaq-block-line, #e8d9b9);
  border-radius: 13px;
  background: var(--riwaq-block-beige, #f8f3e8);
}

.plan-beginner-guide > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  background: var(--riwaq-block-ink, var(--sidebar, #173b3f));
  color: #fff;
  font-weight: 900;
}

.plan-beginner-guide > div { display: grid; gap: 2px; }
.plan-beginner-guide strong { color: var(--riwaq-block-ink, var(--text)); }
.plan-beginner-guide small { color: var(--muted); line-height: 1.45; }

.plan-cell-week {
  align-items: center;
  text-align: center;
  align-self: stretch;
  justify-content: center;
  padding: 9px 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card, #fff));
}

.plan-week-number {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 82%, var(--text, #222));
}

.plan-cell-main {
  gap: 9px;
}

.plan-topic-field {
  display: grid;
  gap: 6px;
}

.plan-assignment-mode {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card, #fff));
  cursor: pointer;
}

.plan-assignment-mode.is-active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 11%, var(--card, #fff));
  box-shadow: inset -4px 0 0 var(--accent);
}

.plan-assignment-mode input {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px;
  accent-color: var(--accent);
}

.plan-assignment-mode > span { display: grid; gap: 2px; }
.plan-assignment-mode strong { color: var(--riwaq-block-ink, var(--text)); }
.plan-assignment-mode small { color: var(--muted); line-height: 1.45; }

.plan-add-assignment {
  justify-self: start;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px dashed color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card, #fff));
  color: var(--accent);
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.plan-add-assignment:hover { background: color-mix(in srgb, var(--accent) 12%, var(--card, #fff)); }

.plan-week-assignment {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card, #fff));
}

.plan-week-assignment > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.plan-week-assignment > header > div,
.plan-week-assignment.is-readonly > header { display: grid; gap: 2px; }
.plan-week-assignment strong { color: var(--accent); }
.plan-week-assignment small,
.plan-week-assignment > span { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.plan-week-assignment p { margin: 0; line-height: 1.6; white-space: pre-wrap; }

.plan-remove-assignment {
  border: 0;
  background: transparent;
  color: #a33b32;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.plan-assignment-deadline {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, .65fr);
  gap: 8px;
}

.plan-assignment-deadline label { display: grid; gap: 5px; }
.plan-assignment-deadline label > span { color: var(--muted); font-size: .72rem; font-weight: 700; }

/* v7.9.13: العنوان قد يكون سطرين. الأسطر التي كُتبت بـ Alt+Enter تظهر كما كُتبت،
   في الشاشة كما في الورقة المطبوعة — وإلا انطوى النص سطرًا واحدًا عند العرض. */
.plan-cell-value {
  font-size: 0.94rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-line;
}

/* v7.9.13: حقل عنوان يقبل أكثر من سطر، ويبدو كحقل سطر واحد حتى يُكتب فيه سطر ثانٍ.
   القاعدة نفسها في المقررات والخطة والمهام والمشروعات والاجتماعات والمشاركات. */
.multiline-field {
  resize: none;
  overflow: hidden;
  min-height: 0;
  line-height: 1.55;
  font-family: inherit;
}

/* الأسطر التي كُتبت بـ Alt+Enter تظهر كما كُتبت في البطاقات والعناوين. */
.task-card-v60 h4,
.task-card-v60 .task-title,
.project-card h3,
.project-card h4,
.post-card h3,
.post-card h4,
.personal-item h4,
.meeting-card h4,
.reference-card h4 {
  white-space: pre-line;
}

/* حقل يكبر بارتفاعه مع النص، بلا شريط تمرير داخلي ولا مقبض سحب. */
.plan-inline-grow {
  resize: none;
  overflow: hidden;
  min-height: 0;
  line-height: 1.5;
}

.plan-cell-value.muted {
  color: var(--muted, #889);
}

/* الإجازة القصيرة تستخدم صف الأسبوع نفسه بلا بطاقة أو لون جديد. */
.plan-short-holiday-name {
  color: var(--text, #17383c);
  font-weight: 800;
}

.plan-cell-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #667);
  word-break: break-word;
}

/* الحقول تبدو حقولًا: الحدّ ظاهر دائمًا، لا يظهر عند المرور. الحقل الخفيّ يجعل المحرر
   يشكّ هل الصفحة قابلة للتعديل أصلًا. */
.plan-inline-input,
.plan-inline-select {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.92rem;
  color: inherit;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: var(--card, #fff);
}

/* v7.9.13: التكليف عمود مستقل. الفصل البصري يمنع اختلاط سؤال الأسبوع بمفردته،
   من دون إضافة موعد أو طريقة تسليم أو أي مسار عمل جديد. */
.plan-cell-research .plan-cell-label small {
  color: var(--muted, #667);
  font-size: 0.7rem;
  font-weight: 600;
}

.plan-inline-textarea {
  min-height: 58px;
  line-height: 1.55;
  resize: vertical;
}

.plan-research-value {
  color: var(--text, #17383c);
  white-space: pre-wrap;
}

.plan-inline-input:focus,
.plan-inline-select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.plan-inline-input::placeholder {
  color: color-mix(in srgb, var(--muted, #889) 75%, transparent);
}

.plan-inline-btn {
  align-self: flex-start;
}

/* ── رأس الصفحة: ثلاثة أزرار، بلا عدّادات ولا شرائط ولا مفاتيح ألوان ─────── */

.plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ── قائمة اختيار المقدِّمين ────────────────────────────────────────────── */

.pick-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  cursor: pointer;
}

.pick-row:nth-child(even) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.pick-row:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── تمييز البلوكات في بقية الصفحات ─────────────────────────────────────── */
/* نفس قاعدة التناوب، مطبَّقة على قوائم البطاقات التي كانت تُقرأ ككتلة واحدة.
   محصورة في الشاشة: أوراق الطباعة (.plan-sheet, .term-sheet) خارجها. */

body:not(.printing) .student-course-list > .student-course-card:nth-child(even),
body:not(.printing) .interactive-course-list > .student-course-card:nth-child(even) {
  background: color-mix(in srgb, var(--accent) 9%, var(--card, #fff));
}

body:not(.printing) .student-course-list > .student-course-card:nth-child(odd),
body:not(.printing) .interactive-course-list > .student-course-card:nth-child(odd) {
  background: color-mix(in srgb, var(--accent) 3%, var(--card, #fff));
}

/* ── الشاشات الضيقة ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .weekly-plan-modal .modal-body { padding: 10px !important; }
  .weekly-plan-modal .plan-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weekly-plan-modal .plan-actions .btn { width: 100%; min-height: 44px; }
  .weekly-plan-modal .plan-facts { display: grid; gap: 3px; }
  .plan-beginner-guide { align-items: flex-start; }
  .plan-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 11px;
  }
  .plan-row.plan-row-holiday {
    grid-template-columns: 1fr;
  }
  .plan-holiday-cell {
    grid-column: auto;
  }
  .plan-cell-week {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    text-align: right;
  }
  .plan-week-number {
    font-size: 1.2rem;
  }
  .plan-cell-main {
    grid-column: 1 / -1;
  }
  .plan-cell-presenter:has(.plan-presenter-fold),
  .plan-cell-presenter:has(.plan-presenter-picks),
  .plan-cell-presenter:has(.plan-inline-input) {
    grid-column: 1 / -1;
  }
  .plan-inline-textarea { min-height: 68px; }
  .plan-cell-deck .week-deck .btn { white-space: normal; }
}

@media (max-width: 460px) {
  .plan-assignment-deadline { grid-template-columns: 1fr; }
}

/* ── الحقائق الثلاث: نصٌّ لا أزرار ────────────────────────────────────── */
/* حُذفت في أول محاولة لأنها كانت مغلّفة بأزرار، فضاعت المعلومة مع غلافها.
   الآن تُعرض كسطر واحد هادئ: الطالب يعرف متى الاختبار ومتى المحاضرة بلا نقرة. */

.plan-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted, #667);
}

.plan-facts .exam-readonly {
  color: color-mix(in srgb, var(--accent) 78%, var(--text, #222));
  font-weight: 600;
}

/* تاريخ اللقاء تحت رقم الأسبوع — الرقم وحده لا يقول متى. */
.plan-week-date {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted, #778);
  text-align: center;
}

.plan-week-date * {
  font-size: inherit;
  color: inherit;
}

@media (max-width: 760px) {
  .plan-week-date { text-align: right; }
}

/* ── v7.9.13: الأزرار كلها بلون المظهر الغامق ──────────────────────────── */
/* الشكل السابق كان زرًّا واحدًا ملوّنًا وزرَّين شاحبين، فتقرأ العين تدرّجًا في الأهمية
   لا وجود له: الثلاثة أفعال متساوية. ولون واحد غامق يجعل الرأس كتلة واحدة واضحة. */

.plan-actions .btn,
.plan-actions .btn.quiet,
.plan-actions .btn.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 600;
}

.plan-actions .btn:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  border-color: color-mix(in srgb, var(--accent) 85%, #000);
}

.plan-actions .btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

/* زر رفع العرض داخل الصف يتبع القاعدة نفسها. */
.plan-cell-deck .btn,
.plan-cell-deck .btn.quiet,
.plan-cell-deck .btn.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

/* ── اختيار الطلاب داخل الصف، بلا نافذة ────────────────────────────────── */

/* v7.9.13: الحقل مطويّ — سطر واحد يقول من اختير، ويُفتح عند الحاجة وحدها.
   كانت خمس عشرة قائمة مفتوحة في الصفحة الواحدة تصنع برجًا يُمرَّر ومئات
   العناصر تُرسم مع كل تحديث. */
.plan-presenter-fold {
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--card, #fff);
  overflow: hidden;
}

.plan-presenter-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.35;
  list-style: none;
  user-select: none;
}

.plan-presenter-summary::-webkit-details-marker { display: none; }

.plan-presenter-summary::after {
  content: "⌄";
  margin-inline-start: auto;
  font-size: 0.9rem;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.plan-presenter-fold[open] > .plan-presenter-summary::after {
  transform: rotate(180deg);
}

.plan-presenter-summary:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.plan-presenter-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.plan-presenter-names {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-presenter-fold .plan-presenter-picks {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 0;
  background: transparent;
}

.plan-presenter-fold .plan-inline-input {
  width: calc(100% - 8px);
  margin: 0 4px 5px;
}

.plan-presenter-picks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 152px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--card, #fff);
}

.plan-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 0.86rem;
  line-height: 1.35;
  cursor: pointer;
}

.plan-pick:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.plan-pick input {
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.plan-pick span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* التاريخ: الهجري وحده في صف الأسبوع. الميلادي باقٍ في المخرجات وصفحة التقويم —
   القاعدة محصورة داخل .plan-week-date فلا تسري على أي موضع آخر يعرض التاريخين. */
.plan-week-date .dual-date-gregorian {
  display: none;
}

.plan-week-date .dual-date-hijri {
  display: block;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted, #667));
}

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

/* المرساة الزمنية تحمل لون المظهر — نقطة الارتساء الأولى للعين. */
body:not(.printing) .student-course-card .course-rail {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
}

body:not(.printing) .student-course-card .course-rail-week {
  color: var(--accent);
}

/* سطر الأسبوع هو قلب البطاقة: خلفية هادئة وحدّ جانبي يقوده. */
body:not(.printing) .course-week-line {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 12px;
}

body:not(.printing) .course-week-line strong {
  color: color-mix(in srgb, var(--accent) 88%, var(--text, #222));
}

/* «مطلوب منك الآن» يأخذ أقوى درجة — هو الشيء الوحيد الذي يطلب فعلًا. */
body:not(.printing) .student-course-next.attention {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-inline-start: 3px solid var(--accent);
  border-radius: 12px;
}

body:not(.printing) .student-course-next.attention > div > span {
  color: var(--accent);
  font-weight: 700;
}

/* الأستاذ والوقت ينخفضان: معلومة مرجعية لا تُطلب كل مرة. */
body:not(.printing) .student-course-card .course-professor,
body:not(.printing) .course-week-line small {
  color: color-mix(in srgb, var(--muted, #778) 88%, transparent);
}

/* الزر الوحيد بلون المظهر الغامق، كبقية أزرار المنصة. */
body:not(.printing) .course-plan-persistent {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

/* ── v7.9.13: زر رفع العرض يقف على خط المربعات التي بجانبه ─────────────── */
/* كان الزر يبدأ من أعلى الخانة بينما جيرانه لهم عنوان فوقهم، فيرتفع عنهم بارتفاع
   العنوان ويبدو نافرًا. الخانات كلها شبكة واحدة، فيجب أن تتساوى بداياتها. */

.plan-cell-deck .week-deck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  margin: 0;
}

.plan-cell-deck .week-deck .btn {
  width: 100%;
  min-height: var(--riwaq-control-h, 44px);
  padding: 7px 10px;
  border-radius: 9px;
  font-size: clamp(0.76rem, 1.15vw, 0.9rem);
  line-height: 1.3;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.plan-cell-deck .week-deck small {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted, #778);
  overflow-wrap: anywhere;
}

/* ── نوافذ تعديل المقرر والاختبار: الحقول تُميَّز بالمظهر ──────────────── */
/* كانت الحقول بيضاء على أبيض بلا حدّ محسوس، فتقرأ العين مستطيلات متشابهة ولا تعرف
   أين ينتهي حقل ويبدأ آخر. الحدّ من لون المظهر يرسم الشبكة بلا خطوط فاصلة. */

#modalForm .form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted, #667));
}

#modalForm .form-grid > label:focus-within {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

#modalForm .form-grid > label > input,
#modalForm .form-grid > label > select,
#modalForm .form-grid > label > textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: var(--card, #fff);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text, #222);
}

/* الملاحظات تحت الحقل تنخفض: شرحٌ يُقرأ مرة، لا يزاحم القيمة. */
#modalForm .form-grid > label > .field-help {
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted, #889);
}

#modalForm .form-grid > .form-note {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted, #667);
}

/* ══ v7.9.13: بطاقة المقرر — صفّان بدل أربعة ═══════════════════════════════ */
/* وصفها بأنها «عقيمة» وصفٌ دقيق: أربعة صفوف بيضاء متتالية بلا تدرّج، وزرٌّ وحيد
   في صف فارغ آخرها. البطاقة لم تكن مزدحمة فقط — كانت بلا بنية، فالعين تنزل عليها
   سطرًا سطرًا ولا تجد أين ترتكز. والعلاج ليس تزيينًا: بنية من كتلتين لا أكثر،
   واللون يحمل الحالة بدل شارة تشرحها. */

.card-v78 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  background: var(--card, #fff);
}

.card-v78-main {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}

/* المرساة الزمنية: كتلة ملوّنة تمسك الطرف وتعطي البطاقة ثقلًا بصريًا. */
.card-v78 .course-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  text-align: center;
}

.card-v78 .course-rail-label,
.card-v78 .course-rail-when,
.card-v78 .course-rail-time {
  font-size: 0.72rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--accent) 62%, var(--muted, #667));
}

.card-v78 .course-rail-week {
  font-size: 1.85rem;
  line-height: 1.05;
  font-weight: 700;
  color: var(--accent);
}

.card-v78 .course-rail-today {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}

.card-v78-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.card-v78-title {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.45;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.card-v78-professor {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted, #889);
}

/* سطر المفردة: صفٌّ واحد قابل للنقر، لا صندوق مستقل بحدود من كل جهة. */
.card-v78-week {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 8px;
  padding: 9px 12px;
  width: 100%;
  text-align: start;
  border: 0;
  border-inline-start: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 4px 11px 11px 4px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  cursor: pointer;
  font: inherit;
}

.card-v78-week:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.card-v78-week > span {
  font-size: 0.74rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 68%, var(--muted, #667));
}

.card-v78-week > strong {
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.card-v78-week:not(.has-value) > strong {
  font-weight: 400;
  color: var(--muted, #99a);
}

.card-v78-week > em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted, #889);
}

/* v7.9.13: كلمة «يقدمها» تسبق الاسم فلا يُقرأ الاسم مفردًا بلا معنى. */
.card-v78-week > em > b {
  font-weight: 700;
  color: var(--accent);
  margin-inline-end: 4px;
}

/* v7.9.13: التكليف القادم سطر مستقل على البطاقة، يظهر فور إضافته لا حين يحلّ أسبوعه. */
.card-v78-assignment {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  text-align: start;
  border: 0;
  border-inline-start: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.card-v78-assignment:hover {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.card-v78-assignment > span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.card-v78-assignment > strong {
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.card-v78-assignment > em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted, #889);
}

/* الذيل: السطر يقول كم الشغل، والزر يقول أين تذهب. طرفان لا صفٌّ فارغ. */
.card-v78-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.card-v78-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #778);
  overflow-wrap: anywhere;
}

.card-v78-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.card-v78-action i {
  font-style: normal;
  opacity: 0.75;
}

.card-v78-action:hover {
  background: color-mix(in srgb, var(--accent) 86%, #000);
}

/* ── الحالة تُقال بالبطاقة كلها، لا بشارة تشرحها ──────────────────────── */

.card-v78.tone-needs {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-inline-start: 4px solid var(--accent);
}

.card-v78.tone-needs .card-v78-foot {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.card-v78.tone-needs .card-v78-note {
  color: color-mix(in srgb, var(--accent) 80%, var(--text, #222));
  font-weight: 600;
}

.card-v78.tone-today {
  border-top: 3px solid var(--accent);
}

.card-v78.tone-calm .card-v78-action {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  border-color: color-mix(in srgb, var(--accent) 88%, transparent);
}

@media (max-width: 640px) {
  .card-v78-main {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }
  .card-v78 .course-rail-week { font-size: 1.5rem; }
  .card-v78-foot { flex-wrap: wrap; }
  .card-v78-action { width: 100%; justify-content: center; }
}

/* ── v7.9.13: رأس صفحة المقررات — سطر واحد بدل أربع بطاقات ────────────── */
/* أربع بطاقات إحصاء لا يفعل الطالب بثلاثٍ منها شيئًا، ثم ستة مرشِّحات لخمسة صفوف.
   ما بقي سطرٌ واحد يجيب عن السؤال الوحيد الذي يفتح الطالب الصفحة من أجله:
   «ما الذي عليّ الآن؟» — ويختفي تمامًا حين لا شيء، فالصمت هنا معلومة أيضًا. */

.courses-due-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 14px;
  padding: 11px 15px;
  border-radius: 12px;
  border-inline-start: 4px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.courses-due-line > span {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--accent) 72%, var(--muted, #667));
}

.courses-due-line > strong {
  font-size: 0.98rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 88%, var(--text, #222));
}

/* المتأخر يستحق درجة أعلى — لا لونًا آخر. اللون واحد، والشدّة هي التي تتكلم. */
.courses-due-line.tone-late {
  background: color-mix(in srgb, var(--accent) 17%, transparent);
}

.courses-due-line.tone-calm {
  border-inline-start-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.courses-due-line.tone-calm > strong {
  font-weight: 500;
  color: var(--muted, #667);
}

/* ── v7.9.13: سطر المحرّر — يظهر لمن يحرّر خطةً فقط ────────────────────── */
/* حُذف «اكتمال الخطط» في v7.9.13 لأنه كان يُعرض لكل طالب: رقمٌ لا يقرر به شيئًا ولا
   يملك تغييره. وهو للمحرّر الشيء الوحيد الذي يقيس عمله، فعاد إليه وحده — محسوبًا على
   شعبه هو، بدرجة أخفت من سطر «عليك الآن» لأن ترتيب الأولوية بينهما واضح: ما عليك
   اليوم يسبق ما تراكم عليك هذا الفصل. */

.courses-editor-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 14px;
  padding: 9px 15px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
}

.courses-editor-line > span {
  font-size: 0.74rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 62%, var(--muted, #778));
}

.courses-editor-line > strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted, #667);
}

/* الشريط يقول النسبة بلا رقم مئوي ثانٍ — العدد فوقه يكفي. */
.courses-editor-line > i {
  flex: 1 1 120px;
  min-width: 90px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  position: relative;
  overflow: hidden;
}

.courses-editor-line > i::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--plan-pct, 0%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
}

.courses-editor-line.is-done > i::after {
  background: var(--accent);
}

.courses-editor-line.is-done > strong {
  color: color-mix(in srgb, var(--accent) 80%, var(--text, #222));
}

/* ══ v7.9.13: الرئيسية — سؤالان لا أكثر ═══════════════════════════════════ */
/* كانت أكثر صفحة تشتيتًا: أربعة وثلاثون عنصرًا، والمهمة الأولى تظهر مرتين على شاشة
   واحدة. والشكل الجديد يجيب عن سؤالين فقط: ما عليّ الآن؟ وما مقرري اليوم؟
   ولا لافتة كبيرة تسبقهما — العنوان تحية، والنبض سطر، ثم العمل مباشرة. */

.signature-dashboard.is-lean {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 940px;
}

/* v7.9.13: اللافتة عادت — كتلة واحدة تحمل التحية والنبض. تعرية الرأس في v7.7.82
   ذهبت أبعد من اللازم: صار العنوان يطفو بلا أرض تحته والصفحة تبدأ ببياض. والرجوع
   ليس إلى الشكل القديم — تلك كانت لافتة تعرض المهمة ثم تكررها القائمة — بل إلى
   كتلة تُمسك أعلى الصفحة وتنتهي عندها. */

.sig-lean-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding: 20px 24px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

.sig-lean-head.tone-late {
  background: color-mix(in srgb, var(--accent) 15%, var(--card, #fff));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.sig-lean-greet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sig-lean-eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 65%, var(--muted, #778));
}

.sig-lean-head h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 700;
}

/* النبض داخل اللافتة: العنوان والقيمة مفصولان بمسافة واضحة لا ملتصقين. */
.sig-lean-pulse {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  border-inline-start: 4px solid var(--accent);
  background: var(--card, #fff);
}

.sig-lean-pulse > span {
  font-size: 0.74rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 70%, var(--muted, #778));
}

.sig-lean-pulse > strong {
  font-size: 1rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 88%, var(--text, #222));
}

/* v7.9.13: الفاصل النصي «·» بجوار الرقم العربي ١ بدا كأنه صفر. كل قيمة الآن وحدة
   اتجاه مستقلة، والفصل خط CSS لا محرفًا يدخل في ترتيب الأرقام أو يلتصق بها. */
.sig-lean-pulse > strong.sig-pulse-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.sig-pulse-items > span {
  display: inline-flex;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.sig-pulse-items > span + span {
  padding-inline-start: 10px;
  border-inline-start: 1px solid color-mix(in srgb, currentColor 38%, transparent);
}

.sig-lean-head:not(.tone-late) .sig-lean-pulse > strong {
  font-weight: 600;
}

/* القسمان الباقيان يقفان في عمود واحد — لا شبكة من أربعة صناديق. */
.signature-dashboard.is-lean .sig-surface {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--card, #fff);
  padding: 16px;
}

.signature-dashboard.is-lean .sig-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.signature-dashboard.is-lean .sig-section-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.signature-dashboard.is-lean .sig-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .signature-dashboard.is-lean .sig-course-grid { grid-template-columns: 1fr; }
  .sig-lean-head h1 { font-size: 1.25rem; }
}

/* ══ v7.9.13: بطاقة المهمة — أربعة عناصر بدل خمسة عشر ═════════════════════ */
/* أربعة منها كانت تقول الحقيقة نفسها بأربع طرق: شارة «متأخرة»، وصندوق «الحالة
   التلقائية: متأخرة»، وشريط ٠٪، وسطر يشرح أن الشريط يُحسب من الحالة. والحالة
   معروضة أصلًا كأزرار يضغطها الطالب — فالشريط رسمٌ لما تقوله الأزرار.
   واللون هنا يحمل الحالة على البطاقة كلها، فلا شارة تشرح ما تراه العين. */

.task-v83 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 17px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 20%, transparent);
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 4%, var(--card, #fff));
}

.task-v83-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* سطر واحد يجمع ما كان ثلاثة صناديق: السياق · نوع المسؤولية · الموعد. */
.task-v83-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted, #778);
}

.task-v83-meta > span:not(:last-child)::after {
  content: " ·";
  color: color-mix(in srgb, var(--muted, #99a) 60%, transparent);
}

.task-v83-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted, #667);
  overflow-wrap: anywhere;
}

/* ── الحالة باللون، لا بشارة ─────────────────────────────────────────── */

/* المتأخر يأخذ أقوى درجة من لون المظهر نفسه، لا لونًا أحمر مستوردًا. أدخلتُ أحمر
   ثابتًا في أول محاولة فأمسكه الحارس: القاعدة أن الشدّة تحمل الحالة، لا لون ثانٍ —
   وإلا صار للمنصة لونان لا يتبعان اختيار المستخدم. */
.task-v83.tone-late {
  border-inline-start: 4px solid var(--task-tone, var(--sidebar));
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 14%, var(--card, #fff));
}

.task-v83.tone-late .task-v83-meta > span:last-child {
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 88%, var(--text, #222));
  font-weight: 700;
}

.task-v83.tone-done {
  opacity: 0.72;
  border-inline-start: 4px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 55%, transparent);
}

.task-v83.tone-done .task-v83-title {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted, #99a) 60%, transparent);
}

.task-v83.tone-calm {
  border-inline-start: 4px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 45%, transparent);
}

.task-v83 .task-actions-v60 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
}

/* إشعار المزامنة حالة لحظية لا شرح دائم — يظهر ويختفي وحده. */
.task-sync-note {
  margin: 0 0 12px;
  padding: 9px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-size: 0.84rem;
  color: var(--muted, #667);
}


/* ── v7.9.13: ضبط الإخراج بعد التبسيط ─────────────────────────────────── */
/* ثلاثة أشياء ظهرت بعد التعرية ولم تكن ظاهرة قبلها. */

/* ١) الصفحة كانت تنزوي في نصفها بعد حذف الشبكة — العمود يتوسّط الآن. */
.signature-dashboard.is-lean {
  margin-inline: auto;
  width: 100%;
}

/* ٢) صفوف المهام كانت تلتصق بأطراف الصندوق، والزر يخرج عن حدّ الصف.
      الصفّ صار شبكة: العنوان يتمدد، والموعد والفعل يقفان على اليسار بمحاذاة واحدة. */
.signature-dashboard.is-lean .sig-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signature-dashboard.is-lean .sig-task-list > * {
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card, #fff));
  padding: 12px 14px;
}

/* ٣) الأزرار داخل الصفوف كانت أغمق من الصف فتبدو طافية فوقه لا جزءًا منه. */
.signature-dashboard.is-lean .sig-task-list .btn {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}

.signature-dashboard.is-lean .sig-task-list .btn.quiet {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, var(--text, #222));
}

@media (max-width: 640px) {
  .sig-lean-head {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .sig-lean-pulse { width: 100%; }
}

/* ── v7.9.13: البطاقة تنكمش لمحتواها، والمصدر يُقال بدرجة اللون ─────────── */
/* بطاقة «حجوزات الطيران» كانت عنوانًا وسطرًا وأزرارًا ثم أربعمئة بكسل بياض: الصف
   يساوي البطاقات بأطولها، فالقصيرة تتمدد فارغة. والحلّ ليس حشوها بمحتوى — بل أن
   يتوقف الصفّ عن مساواتها. */

/* v7.9.13: **الشبكة كانت على الحاوية الخطأ.** البطاقات ليست أبناء #taskResults
   مباشرة — بينهما `.cards`. فوضعُ الشبكة على الأب جعل الحاويات نفسها أعمدةً بعرض
   320px، فانضغط المحتوى في نصف الشاشة وتقطّعت النصوص والأزرار.
   والدرس: قبل وضع شبكة، تأكّد من **من هم أبناؤها فعلًا** لا من يُفترض أنهم كذلك.

   auto-fill كانت خطأً ثانيًا: تحجز أعمدةً وإن لم يكن لها محتوى، فيبقى فراغٌ على
   اليسار. auto-fit تطوي الأعمدة الفارغة، فالبطاقتان تملآن الصف. */
.task-list-v85 {
  display: block;   /* الحاوية الخارجية لا تُشبِّك — أبناؤها أقسام لا بطاقات */
}

/* v7.9.13: **`align-items: start` كان يخسر المعركة.** قاعدة v5.37 تفرض
   `align-items: stretch` على `#tasksPage #taskResults > .cards` بمحدِّد أقوى
   تخصيصًا من محدِّدي، فبقيت البطاقات تتمدد لأطول جارٍ — ٢٢٠ بكسل محتوًى في ٨٥٠.
   والمحدِّد هنا يطابق تخصيصها ويزيد، ويعلن ذلك بدل أن يعتمد على ترتيب التحميل. */
.task-list-v85 > .cards,
#taskResults > .cards,
#tasksPage #taskResults > .cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 14px !important;
}

/* والبطاقة نفسها لا تُمدّ. الصنف هنا `.task-v89` وحده — لا `.task-card-v60`:
   ذاك بلغ ٢٦٤ قاعدة في خمسة ملفات وحارسُنا يمنع نموّه، والحارس محقّ. البطاقة
   الجديدة تملك صنفها الخاص، فكل ما يخصّها يُكتب عليه لا على الصنف المتنازَع. */
.task-v89 {
  align-self: start !important;
  height: auto !important;
}

/* شاشة ضيقة: عمود واحد قبل أن تنضغط البطاقة على نصّها. */
@media (max-width: 720px) {
  .task-list-v85 > .cards,
  #taskResults > .cards {
    grid-template-columns: 1fr !important;
  }
}

.task-v83 {
  height: auto;
  align-self: start;
}

/* مصدر المهمة يُقال بدرجة من لون المظهر، لا بثلاثة ألوان مستقلة.
   الحدّ الجانبي وحده يحمل التمييز: العين تفرز المصادر قبل أن تقرأ. */
.task-v83.task-kind-course {
  border-inline-start-width: 4px;
  border-inline-start-color: color-mix(in srgb, var(--accent) 80%, transparent);
}

.task-v83.task-kind-project {
  border-inline-start-width: 4px;
  border-inline-start-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.task-v83.task-kind-general {
  border-inline-start-width: 4px;
  border-inline-start-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* المتأخر يتجاوز تدرّج المصدر: الأولوية تسبق التصنيف. */
.task-v83.tone-late.task-kind-course,
.task-v83.tone-late.task-kind-project,
.task-v83.tone-late.task-kind-general {
  border-inline-start-color: var(--accent);
  border-inline-start-width: 5px;
}

/* أزرار الحالة صفٌّ واحد متساوٍ لا أحجام مختلفة. */
.task-v83 .task-actions-v60 .btn {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: 38px;
  justify-content: center;
}

.task-v83 .task-actions-v60 .btn.danger,
.task-v83 .task-actions-v60 .btn.quiet {
  flex: 0 1 auto;
  min-width: 0;
}

/* ══ v7.9.13: ترويسة موحّدة لكل الصفحات ═══════════════════════════════════ */
/* طلبه: الشكل الداكن المميّز في كل صفحة، بارتفاع يتبع نصّه لا ارتفاعًا ثابتًا.
   القاعدة هنا في الورقة وحدها — .page-head يشترك فيه ثمانية عشر موضعًا في app.js،
   فالتعديل مرة واحدة يشمل الصفحات كلها بلا لمس أي دالة عرض. وهذا يمنع أيضًا أن
   تتفرّق الترويسات بأشكال مختلفة كلما أُضيفت صفحة.

   الارتفاع: لا min-height ولا padding كبير ثابت. الحشوة نسبية، والكتلة تنكمش
   لسطر واحد وتتمدد لثلاثة بالقدر الذي يحتاجه النص. */

/* v7.9.13: **الترويسة الداكنة للعنوان الأول وحده.**
   `.page-head` يُستعمل مرتين في بعض الصفحات: ترويسةً أولى، ثم عنوانًا فرعيًا داخل
   الصفحة (`compact-section-head` بعد رأس التقويم الموحّد). فصار في الصفحة لافتتان
   داكنتان — والثانية تدّعي أنها بداية صفحة جديدة، فتكسر التسلسل الذي بنيناه.
   الاستثناء بالصنف لا بالترتيب: `:first-of-type` يكسر متى أُدرج عنصر قبله. */
body:not(.printing) .page-head:not(.compact-section-head) {
  position: relative;
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 20px;
  padding: 16px 24px;
  border-radius: 18px;
  overflow: hidden;
  /* v7.9.13: **التدرّج من `--sidebar` لا من `--accent`.** كنت أخلط بينهما: `--accent`
     لون التمييز داخل الصفحة، و`--sidebar` هو لون الهوية الذي يحمله الشريط الجانبي.
     فبدت الترويسة بلونٍ قريبٍ من الشريط لا مطابقٍ له، وهو أسوأ من اختلافٍ صريح —
     العين تلتقط التقارب الناقص فتقرؤه خطأً لا اختيارًا.
     والاتجاه أفقي (90deg) لا مائل: الشريط رأسي، فالترويسة الأفقية تكمله بدل أن
     تنافسه، ويلتقي طرفاهما عند الزاوية بالدرجة نفسها. */
  background: var(--sidebar);
  color: #fff;
}

/* قوسٌ خافت يذكّر بالشعار — زخرفة لا تزاحم النص ولا تزيد الارتفاع. */
body:not(.printing) .page-head:not(.compact-section-head)::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: -6%;
  width: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 68%);
  pointer-events: none;
}

body:not(.printing) .page-head:not(.compact-section-head) > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body:not(.printing) .page-head:not(.compact-section-head) h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

body:not(.printing) .page-head:not(.compact-section-head) p {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

/* v7.9.13: `.eyebrow` مبنيّة أصلًا كشارةٍ لخلفية داكنة: خلفيةٌ بيضاء شفافة وحدٌّ
   أبيض. وجعلتُها `display:block` في v7.7.86 فكسرتُ الشارة — صار الحدّ يمتدّ عرض
   السطر كله والخلفية الشفافة تُقرأ ضبابًا. القاعدة الآن تُبقيها شارةً كما صُمِّمت،
   وتضبط حجمها فقط. */
body:not(.printing) .page-head:not(.compact-section-head) .eyebrow,
body:not(.printing) .page-head:not(.compact-section-head) .student-course-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

/* الأزرار داخل الترويسة الداكنة: فاتحة على داكن، لا داكنة على داكن. */
body:not(.printing) .page-head:not(.compact-section-head) .page-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn,
body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn.primary,
body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn.quiet {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
}

body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn.primary {
  background: #fff;
  border-color: #fff;
  color: color-mix(in srgb, var(--sidebar) 88%, #000);
}

body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn.primary:hover {
  background: rgba(255, 255, 255, 0.88);
}

body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn b {
  font-weight: 700;
}

/* لافتة الرئيسية تتبع القاعدة نفسها — شكل واحد لا شكلان. */
body:not(.printing) .sig-lean-head {
  padding: 16px 24px;
  border: 0;
  background: var(--sidebar);
  color: #fff;
}

/* المتأخر يعمّق التدرّج نفسه، ولا يستورد لونًا ثانيًا. */
body:not(.printing) .sig-lean-head.tone-late {
  background: color-mix(in srgb, var(--sidebar) 88%, #000);
}

body:not(.printing) .sig-lean-head h1 { color: #fff; }
body:not(.printing) .sig-lean-eyebrow { color: rgba(255,255,255,0.66); }

body:not(.printing) .sig-lean-pulse {
  border-inline-start-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

body:not(.printing) .sig-lean-pulse > span { color: rgba(255, 255, 255, 0.72); }
body:not(.printing) .sig-lean-pulse > strong { color: #fff; }

@media (max-width: 640px) {
  body:not(.printing) .page-head:not(.compact-section-head) {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  body:not(.printing) .page-head:not(.compact-section-head) h2 { font-size: 1.22rem; }
  body:not(.printing) .page-head:not(.compact-section-head)::after { display: none; }
}

/* ── v7.9.13: بطاقة التواصل المباشر ───────────────────────────────────── */
/* صفحة الدعم أُوقفت، فلا يبقى الطالب بلا باب. البطاقة هادئة عمدًا: هي المخرج
   الأخير لا الأول — المذكرة أسرع وتحفظ سجلًا، والرقم لمن لا يحتمل الانتظار. */

.sig-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card, #fff));
}

.sig-contact > div { min-width: 0; }

.sig-contact strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
}

.sig-contact p {
  margin: 3px 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted, #778);
}

/* الرقم بخطٍّ أحاديّ العرض واتجاه صريح: أرقام الجوال في نصٍّ عربي تنقلب قراءتها
   إن تُركت لخوارزمية الاتجاه، فيتصل الطالب برقم مقلوب. */
.sig-contact-phone {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--card, #fff);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: color-mix(in srgb, var(--accent) 85%, var(--text, #222));
  unicode-bidi: isolate;
}

.sig-contact-phone:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--card, #fff));
}

/* ── لوحة ضبط ما يراه الطالب (المدير) ─────────────────────────────────── */

.admin-student-access .access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}

.admin-student-access .access-row strong {
  display: block;
  font-size: 0.94rem;
}

.admin-student-access .access-row small {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted, #778);
}

@media (max-width: 560px) {
  .sig-contact { flex-direction: column; align-items: stretch; }
  .sig-contact-phone { text-align: center; }
}

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

.task-v89 {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 18%, transparent);
  background: var(--card, #fff);
}

.task-v89-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 10px 4px;
  border-radius: 13px;
  text-align: center;
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 11%, transparent);
}

/* علامة النوع: تقول ما هذه المهمة قبل أن يُقرأ نصّها. */
.task-v89-mark {
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.55;
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 90%, var(--text, #222));
}

.task-v89-count {
  font-size: 1.55rem;
  line-height: 1.1;
  font-weight: 700;
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 88%, var(--text, #222));
}

/* «اليوم» كلمة لا رقم، فتحتاج حجمًا أصغر حتى لا تفيض عن المرساة. */
.task-v89-rail:has(.task-v89-count) .task-v89-count:not(:empty) { word-break: keep-all; }
.task-v89-count { font-size: clamp(0.92rem, 1.4vw + 0.5rem, 1.55rem); }

.task-v89-note {
  font-size: 0.68rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 62%, var(--muted, #778));
}

.task-v89-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* ── الحالة على المرساة، فلا شارة تشرحها ────────────────────────────────── */

.task-v89.tone-late {
  border-inline-start-width: 4px;
  border-inline-start-color: var(--task-tone, var(--sidebar));
}

.task-v89.tone-late .task-v89-rail {
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 22%, transparent);
}

.task-v89.tone-late .task-v89-count,
.task-v89.tone-late .task-v89-note {
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 95%, var(--text, #222));
}

.task-v89.tone-done { opacity: 0.68; }

.task-v89.tone-done .task-v83-title {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted, #99a) 55%, transparent);
}

.task-v89.tone-done .task-v89-rail {
  background: color-mix(in srgb, var(--muted, #99a) 12%, transparent);
}

/* الشاشة الضيقة: المرساة تصير صفًّا أفقيًا فوق النص لا عمودًا يضغطه. */
@media (max-width: 520px) {
  .task-v89 { grid-template-columns: 1fr; gap: 10px; }
  .task-v89-rail {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 12px;
  }
  .task-v89-count { font-size: 1.15rem; }
}


/* العنوان الفرعي داخل الصفحة: هادئ، يفصل قسمًا عن قسم ولا يدّعي بداية صفحة. */
body:not(.printing) .page-head.compact-section-head {
  margin: 22px 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: none;
  color: inherit;
}

body:not(.printing) .page-head.compact-section-head h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 82%, var(--text, #222));
}

body:not(.printing) .page-head.compact-section-head p {
  margin: 3px 0 0;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--muted, #778);
}


/* ── v7.9.13: الترويسة تلتقي بالشريط عند الزاوية ──────────────────────── */
/* الشريط الجانبي يبدأ بأفتح درجة من أعلى، والترويسة تبدأ بالدرجة نفسها من طرفها
   الملاصق له. فيبدو الاثنان سطحًا واحدًا مطويًّا لا لوحين متجاورين. */

body:not(.printing) .page-head:not(.compact-section-head)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.06) 100%);
  pointer-events: none;
}

/* العنوان الفرعي يتبع الهوية أيضًا — بدرجة هادئة لا بلون آخر. */
body:not(.printing) .page-head.compact-section-head {
  border-bottom-color: color-mix(in srgb, var(--sidebar) 20%, transparent);
}

body:not(.printing) .page-head.compact-section-head h2 {
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text, #222));
}

/* ══ v7.9.13: نافذة المشروع — تنظيف التكرار وتمييز بالهوية ════════════════ */
/* كان الاسم يظهر ثلاث مرات، و«لا يوجد وصف مضاف» ثلاث مرات، والحالة ثلاث مرات
   (نقطة ملوّنة، وخانة «الحالة»، وأزرار التغيير). والقاعدة نفسها: ما يتكرر يُحذف. */

.v493-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 16px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 14%, transparent);
  background: color-mix(in srgb, var(--sidebar) 5%, var(--card, #fff));
}

.v493-header-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.v493-header-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted, #667);
}

/* الحقائق الثلاث سطرًا واحدًا بدل صندوق النسبة الخماسي الأسطر. */
.v493-header-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 0.83rem;
  color: var(--muted, #778);
}

.v493-header-facts > span:not(:last-child)::after {
  content: " ·";
  color: color-mix(in srgb, var(--muted, #99a) 55%, transparent);
}

.v493-header-tools { flex: 0 0 auto; }

/* ── بطاقة المهمة داخل المشروع: الحالة بالحدّ لا بخانة ─────────────────── */

.v492-task-card.v493-tone-calm,
.v492-task-card.v493-tone-late,
.v492-task-card.v493-tone-done {
  border-inline-start-width: 4px;
  border-inline-start-style: solid;
}

.v492-task-card.v493-tone-calm {
  border-inline-start-color: color-mix(in srgb, var(--sidebar) 42%, transparent);
}

.v492-task-card.v493-tone-late {
  border-inline-start-color: var(--sidebar);
  background: color-mix(in srgb, var(--sidebar) 8%, var(--card, #fff));
}

.v492-task-card.v493-tone-done {
  border-inline-start-color: color-mix(in srgb, var(--muted, #99a) 45%, transparent);
  opacity: 0.7;
}

.v492-task-card.v493-tone-done h4 {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted, #99a) 55%, transparent);
}

/* المسؤول والموعد سطرٌ واحد بدل ثلاث خانات معنونة. */
.v493-task-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 5px 0 0;
  font-size: 0.83rem;
  color: var(--muted, #778);
}

.v493-task-line > span:not(:last-child)::after {
  content: " ·";
  color: color-mix(in srgb, var(--muted, #99a) 55%, transparent);
}

/* ── أسبوع «لا يوجد» في الخطة ─────────────────────────────────────────── */

.plan-cell-note.is-empty {
  font-style: normal;
  color: color-mix(in srgb, var(--muted, #99a) 88%, transparent);
}


/* ── v7.9.13: بقايا الشكل القديم داخل البطاقة ─────────────────────────── */
/* `.task-description` كانت تحجز `min-height: 2.9em` — سطرين فارغين لوصفٍ حُذف
   أصلًا في v7.7.83. وهي من القواعد التي تبقى بعد أن يزول سببها فتُنتج فراغًا
   لا يعرف أحد من أين جاء. */

.task-v89 .task-v83-desc,
.task-v89 .task-description {
  min-height: 0 !important;
}

/* المرساة فقدت لونها لأن `--task-tone` لا يُضبط إلا عبر `style` المضمّن، وبعض
   المسارات لا تمرّره. الاحتياط: تعود إلى لون الهوية بدل أن تصير رمادية. */
.task-v89-rail {
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 12%, transparent);
}

.task-v89-count {
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 88%, var(--text, #222));
}

.task-v89-note {
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 64%, var(--muted, #778));
}

.task-v89-mark {
  color: color-mix(in srgb, var(--task-tone, var(--sidebar)) 90%, var(--text, #222));
}

/* أزرار الحالة: `min-height:48px` و`min-width:170px` من الشكل القديم تجعل صفًّا
   من ثلاثة أزرار يفيض إلى سطرين في بطاقة ضيقة. */
.task-v89 .task-actions-v60 {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.task-v89 .task-actions-v60 .workflow-primary,
.task-v89 .task-actions-v60 .workflow-completed,
.task-v89 .task-actions-v60 .btn {
  min-width: 0 !important;
  min-height: 38px !important;
  flex: 1 1 auto;
}


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

body:not(.printing) .page-head:not(.compact-section-head) > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* عنوان الصفحة نفسه: وزن ثابت على كل الصفحات، لا يتبع ما ورثته كل صفحة. */
body:not(.printing) .page-head:not(.compact-section-head) h2 {
  letter-spacing: -0.01em;
}

/* والوصف يُقصّ إلى سطرين على الأكثر: ترويسة بوصفٍ من أربعة أسطر تدفع المحتوى
   خارج الشاشة، والوصف يُقرأ مرة واحدة في العمر. */
body:not(.printing) .page-head:not(.compact-section-head) p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 68ch;
}

/* ══ v7.9.13: الترويسة الداكنة على **كل** الصفحات بلا استثناء ═════════════ */
/* طلبه كان «جميع صفحات المنصة»، ونفّذتُه على `.page-head` وحده. لكن صفحتين لا
   تستعملانه: لوحة المدير تبني `.admin-category-title`، ولوحة الطالب تبني
   `.sig-lean-head`. فبقيتا بيضاوين بينما بقية الصفحات داكنة — وهو تفاوتٌ يُقرأ
   عطلًا لا اختيارًا.
   والقاعدة تُكتب هنا لا في ثلاث دوال عرض: أي ترويسة تُضاف لاحقًا تأخذ الشكل متى
   حملت أحد هذه الأصناف الثلاثة. */

body:not(.printing) .admin-category-title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 20px;
  padding: 16px 24px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sidebar);
  color: #fff;
}

body:not(.printing) .admin-category-title > div { min-width: 0; }

body:not(.printing) .admin-category-title h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

body:not(.printing) .admin-category-title p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 68ch;
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

/* التمهيد فوق العنوان: شارة كما في بقية الترويسات لا سطر ممتدّ. */
body:not(.printing) .admin-category-title > div > span:first-child {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

/* العدّاد على الطرف يتبع الخلفية الداكنة. */
body:not(.printing) .admin-category-title > b {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-size: 0.9rem;
  color: #fff;
}

@media (max-width: 640px) {
  body:not(.printing) .admin-category-title {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  body:not(.printing) .admin-category-title h2 { font-size: 1.22rem; }
}

/* ══ v7.9.13: ترويسة واحدة لكل المنصة — خمسة أصناف تصير شكلًا واحدًا ══════ */
/* المنصة تحمل **خمسة** أصناف ترويسة بُنيت في أوقات مختلفة:
   `.page-head` · `.admin-category-title` · `.admin-console-bar` ·
   `.sig-lean-head` · `.assistant-hero`.
   وحّدتُ ثلاثة منها في الإصدارات السابقة وظننتُ العمل تمّ — وكان ناقصًا، لأني
   وحّدتُ ما وجدتُ لا ما بحثتُ عنه. القائمة أعلاه من جردٍ كامل هذه المرة.

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

body:not(.printing) .admin-console-bar,
body:not(.printing) .assistant-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: 20px;
  padding: 16px 24px;
  border: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none !important;
  background: var(--sidebar) !important;
  color: #fff;
}

/* ── نصوص الترويسة: ثلاث درجات لا لون واحد ──────────────────────────────
   العنوان أبيض كامل، والوصف عند ٧٤٪، والشارة عند ٨٦٪ داخل خلفيتها.
   التدرّج هو ما يجعل العين تقرأ الترتيب قبل أن تقرأ الكلمات. */

body:not(.printing) .admin-console-bar h2,
body:not(.printing) .assistant-hero h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

body:not(.printing) .admin-console-bar p,
body:not(.printing) .assistant-hero p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 68ch;
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}

body:not(.printing) .admin-console-title > div > span,
body:not(.printing) .assistant-hero .eyebrow {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}

body:not(.printing) .admin-console-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

body:not(.printing) .admin-console-title > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* النقطة الضوئية تتبع الخلفية الداكنة. */
body:not(.printing) .admin-console-title > i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

/* ── الأزرار: تباينٌ صريح على الداكن ────────────────────────────────────
   زرٌّ داكن على خلفية داكنة يختفي. الأساسي أبيض كامل، والثانوي شفاف بحدّ. */

body:not(.printing) .admin-console-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body:not(.printing) .admin-console-actions button,
body:not(.printing) .admin-console-actions .btn,
body:not(.printing) .assistant-hero .btn {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

body:not(.printing) .admin-console-actions button:hover,
body:not(.printing) .admin-console-actions .btn:hover,
body:not(.printing) .assistant-hero .btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

body:not(.printing) .admin-console-actions .btn.primary,
body:not(.printing) .assistant-hero .btn.primary {
  background: #fff;
  border-color: #fff;
  color: color-mix(in srgb, var(--sidebar) 88%, #000);
}

/* شارة الفصل على الطرف — تُقرأ معلومةً لا زرًّا، فحدُّها أخفت. */
body:not(.printing) .admin-console-term {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

/* أرقام لوحة المساعد على الداكن. */
body:not(.printing) .assistant-hero .assistant-kpis > div {
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body:not(.printing) .assistant-hero .assistant-kpis strong { color: #fff; }
body:not(.printing) .assistant-hero .assistant-kpis span { color: rgba(255, 255, 255, 0.74); }

@media (max-width: 640px) {
  body:not(.printing) .admin-console-bar,
  body:not(.printing) .assistant-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  body:not(.printing) .admin-console-bar h2,
  body:not(.printing) .assistant-hero h2 { font-size: 1.22rem; }
}

/* ══ v7.9.13: البلوكات تأخذ لغة الهوية نفسها ═════════════════════════════ */
/* البطاقات كانت بحدود رمادية محايدة (`var(--line)`) لا علاقة لها بالمظهر، بينما
   الترويسة تحمل لون الهوية. فالصفحة تُقرأ طبقتين: ترويسة تنتمي، ومحتوًى لا ينتمي.
   القاعدة: **الحدود من الهوية، والخلفية بيضاء.** اللون يربط ولا يطغى — الحدّ
   يكفي للانتماء، والخلفية الملوّنة تُتعب العين على مساحة صفحة كاملة. */

body:not(.printing) .panel,
body:not(.printing) .card-v78,
body:not(.printing) .task-v89,
body:not(.printing) .v492-task-card,
body:not(.printing) .v493-header,
body:not(.printing) .sig-surface {
  border-color: color-mix(in srgb, var(--sidebar) 16%, transparent);
}

/* رؤوس البلوكات الداخلية: خطٌّ فاصل من الهوية وعنوان بدرجتها. */
body:not(.printing) .panel-head {
  border-bottom: 1px solid color-mix(in srgb, var(--sidebar) 12%, transparent);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

body:not(.printing) .panel-head h3 {
  color: color-mix(in srgb, var(--sidebar) 86%, var(--text, #222));
}

body:not(.printing) .panel-head p {
  color: var(--muted, #778);
}

/* ── الأزرار داخل البلوكات: ثلاث درجات لا لونان ─────────────────────────
   الأساسي مصمت بلون الهوية، والثانوي حدٌّ بلا خلفية، والهادئ نصٌّ وحده.
   ثلاث درجات تكفي لأي شاشة، والرابعة تبدأ التشتيت. */

body:not(.printing) .panel .btn.primary,
body:not(.printing) .card-v78 .btn.primary,
body:not(.printing) .v492-task-card .btn.primary {
  background: var(--sidebar);
  border: 1px solid var(--sidebar);
  color: #fff;
  font-weight: 600;
}

body:not(.printing) .panel .btn.primary:hover,
body:not(.printing) .card-v78 .btn.primary:hover,
body:not(.printing) .v492-task-card .btn.primary:hover {
  background: color-mix(in srgb, var(--sidebar) 86%, #000);
  border-color: color-mix(in srgb, var(--sidebar) 86%, #000);
}

body:not(.printing) .panel .btn.quiet,
body:not(.printing) .card-v78 .btn.quiet,
body:not(.printing) .v492-task-card .btn.quiet {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--sidebar) 30%, transparent);
  color: color-mix(in srgb, var(--sidebar) 86%, var(--text, #222));
}

body:not(.printing) .panel .btn.quiet:hover,
body:not(.printing) .card-v78 .btn.quiet:hover,
body:not(.printing) .v492-task-card .btn.quiet:hover {
  background: color-mix(in srgb, var(--sidebar) 9%, transparent);
}

/* الحذف يبقى محذِّرًا: هو الفعل الوحيد الذي لا يُتراجع عنه، فلا يذوب في الهوية.
   وهذا **الاستثناء الوحيد** من قاعدة «كل لون من المظهر» — ومصرَّحٌ به هنا برمز
   مسمّى لا برقمٍ سائب، حتى يُقرأ قرارًا لا سهوًا. حارس الألوان الثابتة يستثنيه
   بالاسم، فيبقى الباقي محروسًا كما كان. */
:root { --riwaq-danger: #a8413a; }

body:not(.printing) .panel .btn.danger,
body:not(.printing) .card-v78 .btn.danger,
body:not(.printing) .v492-task-card .btn.danger {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--riwaq-danger) 45%, transparent);
  color: var(--riwaq-danger);
}

/* ── النصوص داخل البلوكات: تدرّج يقود العين ────────────────────────────── */

body:not(.printing) .card-v78-title,
body:not(.printing) .task-v83-title,
body:not(.printing) .v492-task-card h4 {
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text, #222));
}

body:not(.printing) .card-v78-professor,
body:not(.printing) .task-v83-meta,
body:not(.printing) .v493-task-line {
  color: var(--muted, #778);
}

/* ── v7.9.13: نافذة تنبيهات التقويم ───────────────────────────────────── */
/* اللوحة كانت مفتوحةً دائمًا فوق قائمة المواعيد: أربعة مربعات، ومفتاح، وزرّا وضع،
   وحقلا ساعة، وفقرة شرح — لمن جاء ليقرأ مواعيده لا ليضبط تنبيهاته. والإعداد يُضبط
   مرة في الفصل، فبقاؤه مفتوحًا كل زيارة تشتيتٌ دائم لفائدة لحظية. */

.calendar-setup-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-setup-block {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 14%, transparent);
  background: color-mix(in srgb, var(--sidebar) 4%, var(--card, #fff));
}

.calendar-setup-block h4 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--sidebar) 86%, var(--text, #222));
}

.calendar-setup-block > p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted, #778);
}

.calendar-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.calendar-setup-actions .btn { min-height: 40px; }

/* اللوحة داخل النافذة تتخلّص من إطارها الخاص — الصندوق الحاوي يحمله. */
.calendar-setup-block .panel,
.calendar-setup-block #reminderSettings {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* الشارة على الزر تقول العدد بلا فتح. */
.week-ahead__tools .btn b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 0.76rem;
  font-weight: 700;
}

/* ══ v7.9.13: الشكل الموحّد يغلب كل محدِّد أقوى ═══════════════════════════ */
/* **هذا سبب بقاء صفحات بيضاء رغم أربعة إصدارات.** قواعد قديمة تستعمل مُعرّف الصفحة
   (`#coursesPage .student-courses-head`) — و`#id` يغلب `body:not(...)` مهما كتبتُ.
   فكانت الترويسة تتلوّن حيث لا مُعرّف، وتبقى بيضاء حيث يوجد. وكل إصدار كنتُ أضيف
   قاعدة أضعف من التي تغلبها، فلا يتغيّر شيء ويزداد إحباطه — والحقّ معه.
   الحلّ: محدِّد يطابق قوّتها ويزيد، مع `!important` على الخلفية وحدها. */

body:not(.printing) #coursesPage .student-courses-head,
body:not(.printing) #tasksPage .page-head,
body:not(.printing) #projectsPage .page-head,
body:not(.printing) #calendarPage .page-head:not(.compact-section-head),
body:not(.printing) #filesPage .page-head,
body:not(.printing) #journeyPage .scientific-page-head,
body:not(.printing) .page-head:not(.compact-section-head),
body:not(.printing) .admin-category-title,
body:not(.printing) .admin-console-bar,
body:not(.printing) .assistant-hero,
body:not(.printing) .sig-lean-head {
  background: var(--sidebar) !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 16px 24px !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* والعناوين كذلك: قواعد قديمة تفرض `--primary-strong` بمحدِّدات أقوى. */
body:not(.printing) #coursesPage .student-courses-head h2,
body:not(.printing) #journeyPage .scientific-page-head h1,
body:not(.printing) .page-head:not(.compact-section-head) h2,
body:not(.printing) .admin-category-title h2,
body:not(.printing) .admin-console-bar h2,
body:not(.printing) .assistant-hero h2,
body:not(.printing) .sig-lean-head h1 {
  color: #fff !important;
}

body:not(.printing) #coursesPage .student-courses-head p,
body:not(.printing) #journeyPage .scientific-page-head p,
body:not(.printing) .page-head:not(.compact-section-head) p,
body:not(.printing) .admin-category-title p,
body:not(.printing) .admin-console-bar p,
body:not(.printing) .assistant-hero p {
  color: rgba(255, 255, 255, 0.76) !important;
}

/* الشارة: بيضاء شفافة على الداكن — كانت تختفي حين بقيت الخلفية بيضاء. */
/* v7.9.13: **الشارة كانت تخرج مربّعة** — كتبتُ الخلفية والحدّ بـ`!important` ونسيتُ
   `border-radius`، فورثه العنصر من قاعدة أقدم وصار مستطيلًا حادًّا يُقرأ حقلَ إدخال
   لا شارة. الدرس: حين تُجبر خاصية بـ`!important`، أجبر **كل** ما يصنع الشكل معها —
   وإلا خرج نصفُه جديدًا ونصفُه موروثًا، وهو أسوأ من الاثنين. */
body:not(.printing) .page-head:not(.compact-section-head) .eyebrow,
body:not(.printing) .page-head:not(.compact-section-head) .student-course-eyebrow,
body:not(.printing) .admin-console-title > div > span,
body:not(.printing) .assistant-hero .eyebrow,
body:not(.printing) .sig-lean-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  width: auto !important;
  max-width: max-content !important;
  margin-bottom: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* الأزرار على الداكن — تغلب كل قاعدة سابقة تجعلها فاتحة على فاتح. */
body:not(.printing) #coursesPage .student-courses-head .page-actions .btn,
body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn,
body:not(.printing) .admin-console-actions button,
body:not(.printing) .admin-console-actions .btn {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

body:not(.printing) #coursesPage .student-courses-head .page-actions .btn.primary,
body:not(.printing) .page-head:not(.compact-section-head) .page-actions .btn.primary,
body:not(.printing) .admin-console-actions .btn.primary {
  background: #fff !important;
  border-color: #fff !important;
  color: color-mix(in srgb, var(--sidebar) 90%, #000) !important;
}

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

body:not(.printing) .card-v78,
body:not(.printing) .task-v89,
body:not(.printing) .v492-task-card,
body:not(.printing) .v493-header,
body:not(.printing) .project-card,
body:not(.printing) .sig-surface {
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--sidebar) 17%, transparent) !important;
  background: var(--card, #fff) !important;
  box-shadow: none !important;
}

/* الحدّ الجانبي وحده يحمل الحالة — كما في بطاقة المقرر. */
body:not(.printing) .task-v89.tone-late,
body:not(.printing) .v492-task-card.v493-tone-late,
body:not(.printing) .card-v78.tone-needs {
  border-inline-start: 4px solid var(--sidebar) !important;
}

body:not(.printing) .task-v89.tone-done,
body:not(.printing) .v492-task-card.v493-tone-done {
  border-inline-start: 4px solid color-mix(in srgb, var(--muted, #99a) 45%, transparent) !important;
  opacity: 0.7;
}

/* عناوين البطاقات بدرجة الهوية لا بلون موروث. */
body:not(.printing) .card-v78-title,
body:not(.printing) .task-v83-title,
body:not(.printing) .v492-task-card h4,
body:not(.printing) .project-card h3 {
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text, #222)) !important;
}

/* ── v7.9.13: تصنيف المرجع بمساره البحثي ──────────────────────────────── */

.research-track-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.research-track-picker .hidden { display: none; }

.research-chip {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--sidebar) 22%, transparent);
  font-size: 0.73rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--sidebar) 84%, var(--text, #222));
  white-space: nowrap;
}

/* ══ v7.9.13: «مقرراتي» هو النموذج البصري لبقية المساحة ════════════════ */

/* الترويسة: كتلة واحدة هادئة، والشارة والعنوان والفعل في مواضع ثابتة. */
body:not(.printing) #dashboardPage .dashboard-model-head,
body:not(.printing) #tasksPage > .page-head,
body:not(.printing) #projectsPage > .page-head,
body:not(.printing) #filesPage > .page-head {
  min-height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px !important;
  padding: 20px 26px !important;
}

body:not(.printing) #dashboardPage .dashboard-model-head h2,
body:not(.printing) #tasksPage > .page-head h2,
body:not(.printing) #projectsPage > .page-head h2,
body:not(.printing) #filesPage > .page-head h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  line-height: 1.35;
}

body:not(.printing) #dashboardPage .dashboard-model-head p,
body:not(.printing) #tasksPage > .page-head p,
body:not(.printing) #projectsPage > .page-head p,
body:not(.printing) #filesPage > .page-head p {
  max-width: 720px;
  margin-top: 5px;
}

.dashboard-now {
  flex: 0 0 auto;
  min-width: 220px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  text-align: right;
}

.dashboard-now span,
.dashboard-now strong { display: block; }
.dashboard-now span { color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; }
.dashboard-now strong { margin-top: 3px; color: #fff; font-size: 1.08rem; }

/* الرئيسية: الأولوية بطاقة بيضاء مثل بطاقة المقرر، لا ترويسة داكنة ثانية. */
body:not(.printing) #dashboardPage .next-action-card {
  position: relative;
  min-height: 152px;
  overflow: hidden;
  padding: 24px 26px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 20%, var(--line)) !important;
  border-inline-start: 5px solid var(--sidebar) !important;
  border-radius: 16px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body:not(.printing) #dashboardPage .next-action-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 112px;
  pointer-events: none;
  background: radial-gradient(circle at left, color-mix(in srgb, var(--sidebar) 7%, transparent), transparent 72%);
}

body:not(.printing) #dashboardPage .next-action-copy,
body:not(.printing) #dashboardPage .next-action-buttons { position: relative; z-index: 1; }
body:not(.printing) #dashboardPage .next-action-copy .eyebrow {
  width: max-content;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar) 10%, transparent);
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text));
}
body:not(.printing) #dashboardPage .next-action-copy h2 {
  margin: 8px 0 4px;
  color: color-mix(in srgb, var(--sidebar) 88%, var(--text));
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}
body:not(.printing) #dashboardPage .next-action-copy p { color: var(--muted); }
body:not(.printing) #dashboardPage .next-action-buttons .btn {
  min-height: 46px;
  border-radius: 12px;
}
body:not(.printing) #dashboardPage .next-action-buttons .quiet {
  background: var(--panel2);
  border-color: var(--line);
  color: var(--text);
}

body:not(.printing) #dashboardPage .today-strip { gap: 9px; }
body:not(.printing) #dashboardPage .today-strip article {
  min-height: 68px;
  padding: 12px 15px;
  border-color: color-mix(in srgb, var(--sidebar) 14%, var(--line));
  border-radius: 14px;
  box-shadow: none;
}
body:not(.printing) #dashboardPage .today-strip b { color: var(--sidebar); }
body:not(.printing) #dashboardPage .focused-dashboard-grid > .panel {
  border: 1px solid color-mix(in srgb, var(--sidebar) 14%, var(--line)) !important;
  border-inline-end: 0 !important;
  border-radius: 16px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

/* سطر الحقيقة الوحيد أعلى القوائم. */
body:not(.printing) #tasksPage .courses-due-line,
body:not(.printing) #projectsPage .courses-due-line {
  margin: 0 0 18px;
}

/* المهام: بطاقة المقرر نفسها في الإيقاع والحواف، مع بقاء لون نوع المهمة. */
body:not(.printing) #tasksPage .task-list-v85 > .cards {
  grid-template-columns: 1fr !important;
  gap: 13px !important;
}
body:not(.printing) #tasksPage .task-v89 {
  min-height: 146px;
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px !important;
  background: var(--panel) !important;
}
body:not(.printing) #tasksPage .task-v89-rail {
  min-height: 146px;
  border: 0;
  border-inline-end: 1px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 24%, var(--line));
  border-radius: 0;
  background: color-mix(in srgb, var(--task-tone, var(--sidebar)) 9%, var(--panel));
}
body:not(.printing) #tasksPage .task-v89-body {
  align-content: center;
  padding: 22px 24px;
}
body:not(.printing) #tasksPage .task-v83-title { font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
body:not(.printing) #tasksPage .task-actions-v60 { margin-top: 14px; }

/* المشروعات: مرساة تقدم على الطرف، والمحتوى ثم الفعل في تذييل هادئ. */
body:not(.printing) #projectsPage .project-list { gap: 14px; }
body:not(.printing) #projectsPage .course-model-project {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sidebar) 18%, var(--line)) !important;
  border-inline-start: 5px solid var(--sidebar) !important;
  border-inline-end: 1px solid color-mix(in srgb, var(--sidebar) 18%, var(--line)) !important;
  border-radius: 16px !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}
.project-model-main {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 190px;
}
.project-model-rail {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 18px 12px;
  border-inline-end: 1px solid color-mix(in srgb, var(--sidebar) 18%, var(--line));
  background: color-mix(in srgb, var(--sidebar) 7%, var(--panel));
  text-align: center;
}
.project-model-rail span { color: var(--muted); font-size: 0.76rem; }
.project-model-rail b { color: var(--sidebar); font-size: 1.75rem; line-height: 1; }
.project-model-rail small { color: color-mix(in srgb, var(--sidebar) 80%, var(--muted)); font-weight: 750; }
.project-model-copy { min-width: 0; padding: 22px 24px 18px; }
.project-model-copy h3 { margin: 13px 0 5px !important; font-size: clamp(1.18rem, 2vw, 1.55rem) !important; }
.project-model-copy > p { margin: 0; color: var(--muted); line-height: 1.65; }
.project-model-facts {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1.1fr) repeat(2, minmax(82px, .5fr));
  gap: 8px;
  margin-top: 16px;
}
.project-model-facts > span {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel2);
}
.project-model-facts small { display: block; margin-bottom: 3px; color: var(--muted); }
.project-model-facts b { color: var(--text); }
.project-model-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 10px 18px;
  border-top: 1px solid color-mix(in srgb, var(--sidebar) 12%, var(--line));
  background: color-mix(in srgb, var(--sidebar) 4%, var(--panel));
}
.project-model-foot > span { color: var(--muted); font-weight: 650; }
.project-model-foot .btn { min-width: 158px; min-height: 44px; }
.project-model-foot .btn i { margin-inline-start: 7px; font-style: normal; }
.project-model-actions { display: flex; align-items: center; gap: 8px; }
.project-model-foot .v492-open-project {
  min-width: 168px;
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--sidebar);
  color: #fff;
  box-shadow: none;
}
.project-model-foot .v492-open-project > span { display: none; }
.project-model-foot .v492-open-project > strong { color: #fff; }
.project-model-foot .v492-card-delete-project { min-width: 72px; }

body:not(.printing) #filesPage .library-tabs { margin-bottom: 10px; }
body:not(.printing) #filesPage .library-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body:not(.printing) #filesPage .library-folder-card,
body:not(.printing) #filesPage .library-file-row,
body:not(.printing) #filesPage .reference-simple-row {
  border-color: color-mix(in srgb, var(--sidebar) 15%, var(--line));
  border-radius: 16px;
  box-shadow: none;
}
body:not(.printing) #filesPage .library-folder-card {
  min-height: 132px;
  border-inline-start: 4px solid var(--sidebar);
}
body:not(.printing) #filesPage .library-folder-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--sidebar) 34%, var(--line));
  background: color-mix(in srgb, var(--sidebar) 3%, var(--panel));
  box-shadow: none;
}
body:not(.printing) #filesPage .library-file-row,
body:not(.printing) #filesPage .reference-simple-row { min-height: 92px; }
body:not(.printing) #filesPage .research-chip { vertical-align: middle; }
.content-research-track {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel2);
}

@media (max-width: 820px) {
  body:not(.printing) #dashboardPage .dashboard-model-head,
  body:not(.printing) #tasksPage > .page-head,
  body:not(.printing) #projectsPage > .page-head,
  body:not(.printing) #filesPage > .page-head {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    padding: 18px !important;
  }
  .dashboard-now { width: 100%; min-width: 0; }
  body:not(.printing) #dashboardPage .next-action-card { align-items: stretch; }
  body:not(.printing) #dashboardPage .next-action-buttons { display: grid; grid-template-columns: 1fr; }
  body:not(.printing) #dashboardPage .next-action-buttons .btn { width: 100%; }
  body:not(.printing) #projectsPage .project-model-main { grid-template-columns: 96px minmax(0, 1fr); }
  .project-model-copy { padding: 18px 16px 15px; }
  .project-model-facts { grid-template-columns: 1fr 1fr; }
  .project-model-facts > span:first-child,
  .project-model-facts > .v741-project-creator { grid-column: auto; }
  body:not(.printing) #filesPage .library-folder-grid { grid-template-columns: 1fr; }
  body:not(.printing) #filesPage .library-tabs { display: grid; grid-template-columns: 1fr; overflow: visible; }
  body:not(.printing) #filesPage .library-tabs > * { width: 100%; justify-content: space-between; }
}

@media (max-width: 620px) {
  body:not(.printing) #tasksPage .task-v89 { grid-template-columns: 82px minmax(0, 1fr); }
  body:not(.printing) #tasksPage .task-v89-rail { min-height: 132px; padding: 10px 6px; }
  body:not(.printing) #tasksPage .task-v89-body { padding: 17px 14px; }
  body:not(.printing) #tasksPage .task-actions-v60 { grid-template-columns: 1fr !important; }
  body:not(.printing) #projectsPage .project-model-main { grid-template-columns: 1fr; }
  .project-model-rail {
    min-height: 72px;
    grid-template-columns: auto auto auto;
    place-content: center;
    gap: 10px;
    border-inline-end: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sidebar) 16%, var(--line));
  }
  .project-model-rail b { font-size: 1.35rem; }
  .project-model-facts { grid-template-columns: 1fr; }
  .project-model-facts > span:first-child,
  .project-model-facts > .v741-project-creator { grid-column: auto; }
  .project-model-foot { align-items: stretch; flex-direction: column; }
  .project-model-foot .btn { width: 100%; }
  .project-model-actions { display: grid; grid-template-columns: 1fr; }
  .project-model-foot .v492-open-project { width: 100%; }
}

/* ══ v7.9.13: إخراج المهام ومساحة المشروع والتقويم ═══════════════════════ */
/* بطاقة المهمة لا ترث ارتفاع الشبكة التاريخي مهما كان عرض الشاشة أو التكبير. */
body:not(.printing) #tasksPage #taskResults .task-v89 {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
  grid-template-rows: none !important;
}

body:not(.printing) #tasksPage #taskResults .task-v89-rail {
  min-height: 0 !important;
  align-self: stretch;
}

body:not(.printing) #tasksPage #taskResults .task-v89-body {
  align-content: start;
  justify-content: center;
}

/* الحالة بعرض البطاقة، والإجراءات الثانوية تحتها دون قصّ أو خروج من الإطار. */
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
}

body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .task-state-segment {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
}

body:not(.printing) #tasksPage .task-v89 .task-state-segment button,
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .btn {
  width: 100%;
  min-width: 0 !important;
  padding-inline: 9px !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  body:not(.printing) #tasksPage #taskResults .task-v89 {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  body:not(.printing) #tasksPage #taskResults .task-v89-rail {
    min-height: 54px !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
    padding: 9px 14px;
    border-inline-end: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--task-tone, var(--sidebar)) 20%, var(--line));
  }
  body:not(.printing) #tasksPage #taskResults .task-v89-body { padding: 16px 14px; }
}

@media (max-width: 430px) {
  body:not(.printing) #tasksPage .task-v89 .task-actions-v60 { grid-template-columns: 1fr !important; }
  body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .task-state-segment { grid-column: 1; }
  body:not(.printing) #tasksPage .task-v89 .task-state-segment button { font-size: .79rem; }
}

/* مساحة المشروع: نافذة مركّزة، وبداية واضحة، وتنقل خفيف داخل النافذة نفسها. */
.modal.project-workspace-v492 {
  width: min(1180px, calc(100% - 30px)) !important;
}

.project-workspace-v492 .modal-body {
  padding: 14px 16px 20px;
  background: var(--panel2);
  scroll-behavior: auto;
}

.project-workspace-v492 .v493-header {
  align-items: center;
  padding: 13px 15px;
}

.project-workspace-v492 .v493-header-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 7px;
  margin-top: 3px;
}

.project-workspace-v492 .v493-header-facts > span {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 12%, var(--line));
  border-radius: 10px;
  background: var(--panel);
}

.project-workspace-v492 .v493-header-facts > span::after { content: none !important; }
.project-workspace-v492 .v493-header-facts small { display: block; margin-bottom: 2px; color: var(--muted); }
.project-workspace-v492 .v493-header-facts b { color: var(--text); }

.project-workspace-v492 .v492-project-tabs {
  position: sticky;
  top: -14px;
  z-index: 4;
  gap: 7px;
  margin: 10px 0 12px;
  padding: 7px 0;
  background: var(--panel2);
}

.project-workspace-v492 .v492-project-tab {
  min-height: 56px;
  padding: 8px 11px;
  border-radius: 12px;
}

.project-workspace-v492 .v492-project-tab.active {
  background: var(--sidebar);
  border-color: var(--sidebar);
  box-shadow: none;
}

.project-workspace-v492 .v492-project-content { min-height: 0; }

.v805-project-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 14px;
}

.v805-project-shortcuts button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 16%, var(--line));
  border-radius: 13px;
  background: var(--panel);
  color: var(--text);
  text-align: right;
  font: inherit;
  cursor: pointer;
}

.v805-project-shortcuts button:hover { border-color: var(--sidebar); background: var(--primary-soft); }
.v805-project-shortcuts b { color: color-mix(in srgb, var(--sidebar) 88%, var(--text)); }
.v805-project-shortcuts span { color: var(--muted); font-size: .78rem; }

.project-workspace-v492 .v492-task-actions { min-width: 150px; }
.project-workspace-v492 .v495-task-more > summary { letter-spacing: 0; }

@media (max-width: 760px) {
  .modal.project-workspace-v492 { width: 100vw !important; }
  .project-workspace-v492 .v493-header-facts { grid-template-columns: 1fr 1fr; }
  .project-workspace-v492 .v493-header-facts > span:last-child { grid-column: 1 / -1; }
  .project-workspace-v492 .v492-project-tab { grid-template-columns: auto minmax(0, 1fr) auto; }
  .project-workspace-v492 .v492-project-tab small { display: none; }
  .v805-project-shortcuts { grid-template-columns: 1fr; }
  .project-workspace-v492 .v492-next-step { align-items: stretch; flex-direction: column; }
  .project-workspace-v492 .v492-next-step .btn { width: 100%; }
}

/* نافذة التقويم: لا شارة رقمية غامضة، ومسافات أقل، وخيارات أوضح. */
.calendar-setup-dialog { gap: 12px; }
.calendar-setup-block { padding: 13px 14px; }
.calendar-setup-block .reminder-settings .panel-head { margin-bottom: 9px; padding-bottom: 8px; }
.calendar-setup-block .reminder-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.calendar-setup-block .reminder-chip { justify-content: center; min-width: 0; padding: 8px 9px; }
.calendar-setup-block .reminder-events-row { margin-top: 10px; }
.calendar-setup-block .field-help { margin-top: 9px; }

@media (max-width: 620px) {
  .calendar-setup-actions { display: grid; grid-template-columns: 1fr; }
  .calendar-setup-actions .btn { width: 100%; }
  .calendar-setup-block .reminder-chips { grid-template-columns: 1fr 1fr; }
  .calendar-setup-block .reminder-mode { display: grid; grid-template-columns: 1fr; }
}

/* ══ v7.9.13: مكتبة بمسار تركيز واحد بدل ثلاثة صفوف متكررة ═══════════ */
.library-focus-toolbar {
  display: grid;
  grid-template-columns: minmax(210px, .38fr) minmax(320px, 1fr);
  align-items: end;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--sidebar) 15%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--sidebar) 3%, var(--panel2));
}

.library-focus-toolbar.has-course {
  grid-template-columns: minmax(190px, .34fr) minmax(230px, .42fr) minmax(300px, 1fr);
}

.library-filter-field { display: grid; gap: 5px; min-width: 0; }
.library-filter-field > span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
}

.library-filter-field select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 750;
}

.library-focus-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}

.library-focus-search > span { color: var(--primary); font-size: 1.15rem; }
.library-focus-search input {
  width: 100%;
  min-height: 34px;
  padding: 3px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

.library-result-count {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.library-row-more { min-width: 94px; }
.library-row-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: .8rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.library-row-more > summary::-webkit-details-marker { display: none; }
.library-row-more > summary::after { content: '⌄'; color: var(--muted); }
.library-row-more[open] > summary { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.library-row-more[open] > summary::after { content: '⌃'; }
.library-row-more > div { display: grid; gap: 6px; margin-top: 6px; }
.library-row-more > div .btn { width: 100%; }

@media (max-width: 840px) {
  .library-focus-toolbar,
  .library-focus-toolbar.has-course { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .library-focus-toolbar { padding: 10px; }
  .library-focus-search { grid-template-columns: auto minmax(0, 1fr); }
  .library-focus-search .btn { grid-column: 1 / -1; width: 100%; }
  .library-file-actions > .btn,
  .reference-simple-actions > .btn,
  .library-file-actions > a,
  .reference-simple-actions > a,
  .library-row-more { flex: 1 1 100%; }
  .library-row-more > summary { width: 100%; }
}

/* ══ v7.9.13: هندسة مستقلة لبطاقات المهام — لا ترث شبكة البطاقات القديمة ══ */
/*
   سبب الخلل الظاهر: الحاوية كانت تحمل الصنف العام `.cards`، فتتنازع عليها قواعد
   تاريخية تجعلها عمودين، ثم auto-fit يجعلها ثلاثة أعمدة عند التكبير/تحجيم النظام.
   النتيجة بطاقة بعرض يقارب 300px وبداخلها مرساة 132px وثلاثة أزرار؛ لذلك تقطعت
   الكلمات حرفيًا. الحاوية الجديدة مستقلة، وحدها الأدنى 660px: عمودان مريحان كحد
   أقصى على الشاشة الواسعة، وعمود واحد تلقائيًا متى لم تكف المساحة.
*/
body:not(.printing) #tasksPage #taskResults .task-stack-v807 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(660px, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  gap: 16px !important;
  min-width: 0;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89 {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-rail {
  min-width: 0;
  min-height: 100% !important;
  padding: 16px 9px;
  align-self: stretch;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-body {
  display: flex;
  min-width: 0;
  padding: 20px 22px;
  align-content: initial;
  justify-content: center;
  overflow: hidden;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-title,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-meta,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-desc {
  max-width: 72ch;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-title {
  margin: 0;
  line-height: 1.55;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-meta,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v83-desc {
  line-height: 1.7;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-shared-team,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60 {
  width: 100%;
  max-width: 760px;
  min-width: 0;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px;
  margin-top: 12px;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-width: 0;
}

body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment button,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60 > .btn {
  min-width: 0 !important;
  min-height: 44px !important;
  width: 100%;
  padding: 9px 11px !important;
  line-height: 1.35;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body:not(.printing) #tasksPage .completed-tasks-section .task-stack-v807 {
  padding: 14px;
}

@media (max-width: 1420px) {
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ══ v7.9.13: تدرّج هوية القائمة على حروف عناوين الصفحات ══ */
/*
   الخلفية تبقى كحلية مصمتة كما اختارها المستخدم؛ التدرّج هنا للنص وحده.
   حصر المحددات في عناوين الصفحات يمنع انتقال اللمعة إلى عناوين البطاقات
   والنوافذ والأقسام الفرعية، ويُبقي الطباعة خارج المؤثر تمامًا.
*/
body:not(.printing) #journeyPage .scientific-page-head h1,
body:not(.printing) .page-head:not(.compact-section-head) h2,
body:not(.printing) .admin-category-title h2,
body:not(.printing) .admin-console-bar h2,
body:not(.printing) .assistant-hero h2,
body:not(.printing) .sig-lean-head h1 {
  color: color-mix(in srgb, #fff 82%, var(--accent)) !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body:not(.printing) #journeyPage .scientific-page-head h1,
  body:not(.printing) .page-head:not(.compact-section-head) h2,
  body:not(.printing) .admin-category-title h2,
  body:not(.printing) .admin-console-bar h2,
  body:not(.printing) .assistant-hero h2,
  body:not(.printing) .sig-lean-head h1 {
    background: linear-gradient(
      100deg,
      #fff 0%,
      color-mix(in srgb, #fff 88%, var(--accent)) 45%,
      color-mix(in srgb, #fff 58%, var(--accent)) 100%
    ) !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
}

@media (forced-colors: active) {
  body:not(.printing) #journeyPage .scientific-page-head h1,
  body:not(.printing) .page-head:not(.compact-section-head) h2,
  body:not(.printing) .admin-category-title h2,
  body:not(.printing) .admin-console-bar h2,
  body:not(.printing) .assistant-hero h2,
  body:not(.printing) .sig-lean-head h1 {
    background: none !important;
    -webkit-text-fill-color: CanvasText !important;
    color: CanvasText !important;
  }
}

@media (max-width: 760px) {
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-rail {
    min-height: 54px !important;
    padding: 9px 14px;
  }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-body {
    padding: 16px 14px;
    overflow: visible;
  }
}

@media (max-width: 430px) {
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60,
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment {
    grid-column: 1;
  }
}

/* ══ v7.9.13: البيج هو لون البلوكات ══════════════════════════════════════
   **خطأ فهمٍ مني في v7.9.13.** قال «بلون المظهر» ففهمتُ لون الشريط الجانبي
   (`--sidebar`) الغامق، فحوّلتُ المرساة والبطاقات إليه. والمقصود `--accent` —
   وهو البيج الذي كان أصلًا في البطاقة التي أعجبته.
   والفرق ليس ذوقًا: البيج لونُ محتوًى، والغامق لونُ إطار. الترويسة والشريط يأخذان
   الغامق لأنهما يحيطان بالصفحة؛ والبطاقات تأخذ البيج لأنها الصفحة نفسها. ولو
   غمقت البطاقات لصارت الشاشة إطارًا بلا محتوًى.

   فالتصحيح: كل ما يخصّ البلوكات يعود إلى `--accent`، ويُطبَّق على المهام
   والمشروعات بالبنية نفسها. */

/* ── مرساة بطاقة المقرر: البيج كما كانت ─────────────────────────────────── */

body:not(.printing) .card-v78 .course-rail,
body:not(.printing) .student-course-card .course-rail {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* الكتابات كلها بدرجة واحدة قوية من البيج — كانت متفاوتة فبدا بعضها باهتًا. */
/* v7.9.13: **نصّ المرساة غامق، وخلفيتها بيج.** البيج على البيج يُقرأ بجهد —
   والمرساة هي أول ما تمسكه العين، فيجب أن تُقرأ بلا محاولة. الخلفية تبقى بيج
   فتنتمي البطاقة، والنصّ يأخذ الغامق فيُقرأ: **التباين داخل الكتلة، والانتماء
   عبر لونها.** وهذا يطبَّق على مراسي المنصة كلها لا على واحدة. */
body:not(.printing) .card-v78 .course-rail-week,
body:not(.printing) .student-course-card .course-rail-week {
  color: var(--sidebar) !important;
}

body:not(.printing) .card-v78 .course-rail-label,
body:not(.printing) .card-v78 .course-rail-when,
body:not(.printing) .card-v78 .course-rail-time,
body:not(.printing) .student-course-card .course-rail-label,
body:not(.printing) .student-course-card .course-rail-when,
body:not(.printing) .student-course-card .course-rail-time {
  color: color-mix(in srgb, var(--sidebar) 82%, transparent) !important;
}

body:not(.printing) .card-v78 .course-rail-today {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ── سطر المفردة والذيل: البيج نفسه ─────────────────────────────────────── */

body:not(.printing) .card-v78,
body:not(.printing) .task-v89,
body:not(.printing) .v492-task-card,
body:not(.printing) .v493-header,
body:not(.printing) .project-card,
body:not(.printing) .sig-surface {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent) !important;
  border-radius: 16px !important;
  background: var(--card, #fff) !important;
  box-shadow: none !important;
}

body:not(.printing) .card-v78-week {
  border-inline-start-color: color-mix(in srgb, var(--accent) 42%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

body:not(.printing) .card-v78-week > span {
  color: color-mix(in srgb, var(--accent) 92%, #000) !important;
}

body:not(.printing) .card-v78-foot {
  border-top-color: color-mix(in srgb, var(--accent) 20%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

body:not(.printing) .card-v78-note {
  color: color-mix(in srgb, var(--accent) 92%, #000) !important;
}

/* v7.9.13: المتأخّرة تُقال بلونها. القاعدة السابقة تفرض لون المظهر بـ!important على كل
   سطر ذيل، فلو كُتب لون التأخير في مكان آخر لخسر أمامها. يُكتب هنا، بعدها مباشرة،
   وبنفس بادئتها — فيربح بالتخصيص لا بمعركة !important جديدة. */
body:not(.printing) .card-v78-note.is-late,
.card-v78.tone-needs .card-v78-note.is-late,
.card-v78-note.is-late {
  color: var(--danger) !important;
  font-weight: 700;
}

body:not(.printing) .card-v78.tone-needs {
  border-inline-start: 4px solid var(--accent) !important;
}

body:not(.printing) .card-v78.tone-needs .card-v78-foot {
  background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
}

/* ══ المهام والمشروعات: البنية نفسها والبيج نفسه ═════════════════════════ */
/* وألوان الأنواع الثلاثة تبقى ملغاة — لونٌ واحد لكل البطاقات كما طلب. */

body:not(.printing) .task-v89 {
  --task-tone: var(--accent) !important;
  --task-accent: var(--accent) !important;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

body:not(.printing) .task-v89-rail {
  gap: 3px;
  padding: 11px 6px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

body:not(.printing) .task-v89-mark {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 1;
  color: color-mix(in srgb, var(--sidebar) 82%, transparent) !important;
}

body:not(.printing) .task-v89-count {
  font-size: clamp(0.92rem, 1.4vw + 0.5rem, 1.7rem);
  font-weight: 700;
  color: var(--sidebar) !important;
}

body:not(.printing) .task-v89-note {
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--sidebar) 82%, transparent) !important;
}

body:not(.printing) .task-v89.task-kind-course,
body:not(.printing) .task-v89.task-kind-project,
body:not(.printing) .task-v89.task-kind-general {
  border-inline-start-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

body:not(.printing) .task-v89.tone-late,
body:not(.printing) .task-v89.tone-late.task-kind-course,
body:not(.printing) .task-v89.tone-late.task-kind-project,
body:not(.printing) .task-v89.tone-late.task-kind-general {
  border-inline-start: 4px solid var(--accent) !important;
}

body:not(.printing) .task-v89.tone-late .task-v89-rail {
  background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

body:not(.printing) .task-v89.tone-done .task-v89-rail {
  background: color-mix(in srgb, var(--muted, #99a) 12%, transparent) !important;
}

body:not(.printing) .task-v89.tone-done .task-v89-count,
body:not(.printing) .task-v89.tone-done .task-v89-mark,
body:not(.printing) .task-v89.tone-done .task-v89-note {
  color: color-mix(in srgb, var(--muted, #99a) 92%, #000) !important;
}

/* بطاقة مهمة المشروع تتبع البيج كذلك. */
body:not(.printing) .v492-task-card {
  border-inline-start-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

body:not(.printing) .v492-task-card.v493-tone-late {
  border-inline-start: 4px solid var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 7%, var(--card, #fff)) !important;
}

body:not(.printing) .v493-task-line {
  color: color-mix(in srgb, var(--accent) 88%, #000) !important;
}

/* عناوين البطاقات: غامقة للقراءة، والبيج للإطار والمرساة. */
body:not(.printing) .card-v78-title,
body:not(.printing) .task-v83-title,
body:not(.printing) .v492-task-card h4,
body:not(.printing) .project-card h3 {
  color: color-mix(in srgb, var(--accent) 96%, #000) !important;
}


/* ══ v7.9.13: قاعدة واحدة لكل مراسي المنصة ═══════════════════════════════
   المرساة تتكرر في أربعة مواضع بأصناف مختلفة. وتوحيدها موضعًا موضعًا هو ما جعل
   واحدةً تتخلّف عن أخرى في كل إصدار. فالقاعدة هنا تجمعها كلها:
   **خلفية بيج · نصّ غامق · شارة بيضاء على غامق.** */

body:not(.printing) .card-v78 .course-rail,
body:not(.printing) .student-course-card .course-rail,
body:not(.printing) .task-v89-rail,
body:not(.printing) .v492-task-rail {
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

body:not(.printing) .card-v78 .course-rail *,
body:not(.printing) .student-course-card .course-rail *,
body:not(.printing) .task-v89-rail *,
body:not(.printing) .v492-task-rail * {
  color: color-mix(in srgb, var(--sidebar) 84%, transparent);
}

/* الرقم أقوى درجة: هو ما تقرؤه العين أولًا من المرساة كلها. */
body:not(.printing) .card-v78 .course-rail-week,
body:not(.printing) .student-course-card .course-rail-week,
body:not(.printing) .task-v89-count {
  color: var(--sidebar) !important;
  font-weight: 700;
}

/* شارة «اليوم» تبقى مصمتة — هي إعلانٌ لا معلومة هادئة. */
body:not(.printing) .card-v78 .course-rail-today {
  background: var(--sidebar) !important;
  color: #fff !important;
}

/* المكتملة تخرج من قاعدة اللون كلها: الرمادي يقول «انتهى» بلا أن يزاحم. */
body:not(.printing) .task-v89.tone-done .task-v89-rail *,
body:not(.printing) .task-v89.tone-done .task-v89-count {
  color: color-mix(in srgb, var(--muted, #99a) 92%, transparent) !important;
}

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

body:not(.printing) .task-v89-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* الأزرار تنزل إلى قاع البطاقة دائمًا، فالفراغ يصير مسافةً مقصودة لا نقصًا. */
body:not(.printing) .task-v89 .task-actions-v60 {
  margin-top: auto;
  padding-top: 4px;
}

/* سطر السياق: نقطة فاصلة بين الحقائق كما في بطاقة المقرر. */
body:not(.printing) .task-v83-meta > span:not(:last-child)::after {
  content: " ·";
  color: color-mix(in srgb, var(--accent) 55%, transparent);
}

body:not(.printing) .task-v83-meta {
  gap: 4px 8px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--sidebar) 66%, transparent);
}

/* شركاء المهمة: صندوق بيج كما في بطاقة المشروع، لا كتلة رمادية. */
body:not(.printing) .task-v89 .shared-task-partners,
body:not(.printing) .task-v89 [class*="shared-task"] {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* والعنوان يتنفّس: كان ملتصقًا بالسطر تحته في البطاقات القصيرة. */
body:not(.printing) .task-v89 .task-v83-title {
  margin: 0 0 2px;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* الوصف حين يوجد — بمسافة تفصله عن الحقائق فوقه. */
body:not(.printing) .task-v89 .task-v83-desc {
  margin: 2px 0 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-size: 0.86rem;
  line-height: 1.65;
}

/* ══ v7.9.13: أزرار المهام بحجم أزرار المشروع ════════════════════════════
   **السبب لم يكن الشكل بل التخطيط.** قواعد `#tasksPage` تفرض على الأزرار شبكةً
   بعرض البطاقة (`display:grid` و`width:100%` و`1fr`)، فتتمدد كلٌّ منها لتملأ
   عمودها. وبطاقة مهمة المشروع خارج تلك الصفحة، فبقيت على `flex` — أزرار بحجم
   نصّها، مضغوطة إلى الطرف.
   والقاعدة هنا تُرجع صفحة المهام إلى السلوك نفسه: `flex` لا `grid`، وعرضٌ بقدر
   المحتوى لا بقدر العمود، ومحاذاةٌ إلى الطرف كما في المشروع. */

body:not(.printing) #tasksPage .task-v89 .task-actions-v60,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60,
body:not(.printing) .task-v89 .task-actions-v60 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px !important;
  grid-template-columns: none !important;
  width: auto !important;
  margin-top: auto;
  padding-top: 6px;
}

/* مجموعة الحالة: ثلاثة أزرار متلاصقة كما في المشروع، لا صفٌّ ممتدّ. */
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .task-state-segment,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment,
body:not(.printing) .task-v89 .task-state-segment {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-template-columns: none !important;
  width: auto !important;
  gap: 6px;
}

/* كل زرّ بعرض نصّه: لا `1fr` يمدّه، ولا `100%` يملأ عموده. */
body:not(.printing) #tasksPage .task-v89 .task-state-segment button,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment button,
body:not(.printing) .task-v89 .task-state-segment button,
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .btn,
body:not(.printing) .task-v89 .task-actions-v60 > .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* الإجراءات الثانوية — تعديل وحذف — على سطرها بمحاذاة الطرف نفسه. */
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .btn.quiet,
body:not(.printing) #tasksPage .task-v89 .task-actions-v60 > .btn.danger,
body:not(.printing) .task-v89 .task-actions-v60 > .btn.quiet,
body:not(.printing) .task-v89 .task-actions-v60 > .btn.danger {
  padding: 8px 15px !important;
  font-size: 0.86rem;
  font-weight: 500;
}

/* الشاشة الضيقة: الأزرار تملأ العرض بدل أن تُقصّ نصوصها. */
@media (max-width: 560px) {
  body:not(.printing) #tasksPage .task-v89 .task-actions-v60,
  body:not(.printing) .task-v89 .task-actions-v60 {
    justify-content: stretch;
  }
  body:not(.printing) #tasksPage .task-v89 .task-state-segment,
  body:not(.printing) .task-v89 .task-state-segment {
    width: 100% !important;
  }
  body:not(.printing) #tasksPage .task-v89 .task-state-segment button,
  body:not(.printing) .task-v89 .task-state-segment button {
    flex: 1 1 auto !important;
    padding-inline: 10px !important;
  }
}

/* ══ v7.9.13: مساحتا الرسالة والاختبار الشامل ════════════════════════════ */

.research-space { display: flex; flex-direction: column; gap: 14px; }

.research-title-row label { display: flex; flex-direction: column; gap: 6px; }

.research-title-row input {
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--card, #fff);
  font-size: 0.98rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--sidebar) 92%, var(--text, #222));
}

.research-items-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.research-items-head strong { font-size: 0.95rem; color: var(--sidebar); }
.research-items-head .btn { margin-inline-start: auto; }

.research-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 12px;
}

.research-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: var(--card, #fff);
}

.research-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.research-item-head h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--sidebar);
}

/* العدّاد يقول أيّ متغيّر ما زال فقيرًا — وهي المعلومة التي يوازن بها فصوله. */
.research-ref-count {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  font-size: 0.74rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--sidebar) 84%, transparent);
  white-space: nowrap;
}

.research-ref-count.is-empty {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--muted, #99a) 40%, transparent);
  color: var(--muted, #778);
}

.research-state { display: flex; flex-wrap: wrap; gap: 6px; }

.research-state button {
  padding: 6px 13px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--card, #fff);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--sidebar) 86%, var(--text, #222));
}

.research-state button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.research-refs {
  margin: 0;
  padding-inline-start: 16px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--muted, #667);
}

.research-note {
  margin: 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted, #667);
}

.research-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.research-actions-label {
  font-size: 0.78rem;
  color: var(--muted, #889);
}

.research-actions .btn { min-height: 32px; padding: 6px 12px; font-size: 0.8rem; }

@media (max-width: 560px) {
  .research-items { grid-template-columns: 1fr; }
  .research-items-head .btn { margin-inline-start: 0; width: 100%; }
}


/* v7.9.13: سطر التأجيل. المهمة التي أُجّلت تقول ذلك على وجهها — وإلا بدا الموعد
   الجديد كأنه الأصل، وضاع أن شيئًا تغيّر. الأصل يُذكر، والسبب إن كُتب. */
.task-v83-postponed {
  margin: 4px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--warn);
  overflow-wrap: anywhere;
}


/* v7.9.13: ما ينقص يُقال. الخطة تكلّفك وبطاقة المهمة لم تصل — فالصفحة تقول ذلك
   بدل أن تعرض فراغًا يُقرأ «لا شيء عليك». */
.plan-gap-notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border-inline-start: 4px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}

.plan-gap-notice strong { display: block; font-size: 0.95rem; }
.plan-gap-notice p { margin: 4px 0 0; font-size: 0.84rem; line-height: 1.6; }
.plan-gap-notice ul { margin: 8px 0 0; padding-inline-start: 18px; font-size: 0.86rem; line-height: 1.7; }