/* ═══════════════════════════════════════════════════════════════════════════
   A1 Design System — COMPONENTS  ·  Contenta1-ds.css
   ⛔ مُولَّدٌ من مصدرِ الحقيقة؟ لا — هذا **هو** مصدرُ الحقيقة.
      نماذجُ الدراسةِ ترتبط بهذا الملفِّ نفسِه بمسارٍ نسبيّ، فلا مصدرانِ لملفٍّ يُشحَن.

   النطاقُ إلزاميّ:
     • كلُّ صنفٍ يشترط سلفًا يحمل .a1  ⇒ صفرُ أثرٍ على 313 صفحةً قائمة.
       القياسُ الذي فرض هذا: .btn في 79 صفحة · .card في 78 · .row في 61 · .badge في 47.
     • كلُّ رمزٍ ببادئة --a1-          ⇒ صفرُ تصادمٍ مع 25 ملفًّا تُعرِّف --muted و24 تُعرِّف --bg.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   A1 Design System — COMPONENTS
   D:\A1-Nova\دراسات\Supervision\02_UX\Mockups\assets\a1-ds.css

   الطبقةُ التي لا وجودَ لها في المنتَجِ اليوم.
   القياس: Content\master-core.css فيه ٥٥ صنفًا **كلُّها قشرةٌ وتنقّل** وصفرُ
   مكوّنِ صفحة. ولذلك اخترعت ١٩٩ شاشةً مكوّناتِها بنفسِها، فصار في الشجرة
   ٢٨ تطبيقًا متمايزًا لسبعةِ مكوّنات. هذا الملفُّ هو المكانُ الغائب.

   ⛔ قاعدتانِ حاكمتان لا يُستثنى منهما شيء:
      ١) صفرُ لونٍ حرفيّ — كلُّ قيمةٍ من tokens.css.
      ٢) صفرُ اتّجاهٍ ماديّ — لا left ولا right ولا margin-left.
         كلُّ محاذاةٍ منطقيّة (inline-start/end)، فتعمل العربيّةُ والإنجليزيّةُ
         من ملفٍّ واحدٍ بلا [dir=rtl] ولا ورقةِ أنماطٍ ثانية.
         الجردُ قاس ١٩ اتّجاهًا ماديًّا في الجوّالِ و«طبقةَ RTL خامدةً بالكامل»
         في الويب — هذه القاعدةُ تمنع تكرارَ الاثنين بالبناء لا بالمراجعة.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── إعادةُ ضبطٍ محصورة ─────────────────────────────────────────────────────
   ⛔ لا محدِّدَ `*` شامل: قِيس في ParentLms.aspx أنّه يكسر قياساتِ عناصرِ
   الماستر وأدواتِ DevExpress في الصفحةِ نفسِها. يُحصَر في شجرةِ التطبيق. */
.a1, .a1 *, .a1 *::before, .a1 *::after { box-sizing: border-box; }
.a1 h1, .a1 h2, .a1 h3, .a1 h4, .a1 p, .a1 figure, .a1 ul, .a1 ol { margin: 0; padding: 0; }
.a1 ul, .a1 ol { list-style: none; }

.a1 {
  margin: 0;
  background: var(--a1-bg);
  color: var(--a1-ink);
  font-family: var(--a1-font-ui);
  font-size: var(--a1-fs-md);
  line-height: var(--a1-lh-body);
  font-variant-numeric: var(--a1-num);
  -webkit-font-smoothing: antialiased;
}

/* ═══ 1 · الطباعة ══════════════════════════════════════════════════════════ */
.a1 .t-display { font-size: var(--a1-fs-4xl); font-weight: var(--a1-fw-bold); line-height: var(--a1-lh-tight); letter-spacing: -.02em; text-wrap: balance; }
.a1 .t-h1 { font-size: var(--a1-fs-3xl); font-weight: var(--a1-fw-bold); line-height: var(--a1-lh-tight); text-wrap: balance; }
.a1 .t-h2 { font-size: var(--a1-fs-2xl); font-weight: var(--a1-fw-bold); line-height: var(--a1-lh-tight); }
.a1 .t-h3 { font-size: var(--a1-fs-xl);  font-weight: var(--a1-fw-bold); }
.a1 .t-body { font-size: var(--a1-fs-lg);  line-height: var(--a1-lh-body); max-width: 68ch; }
.a1 .t-sm { font-size: var(--a1-fs-sm); }
.a1 .t-muted { color: var(--a1-muted); }
.a1 .t-label { font-size: var(--a1-fs-xs); font-weight: var(--a1-fw-bold); color: var(--a1-muted);
             letter-spacing: .06em; text-transform: uppercase; }
.a1 .t-num { font-variant-numeric: var(--a1-num); font-feature-settings: "tnum" 1; }
.a1 .t-mono { font-family: var(--a1-font-mono); font-size: var(--a1-fs-sm); }
/* رقمُ الهويّةِ ونحوُه: لاتينيٌّ داخل جملةٍ عربيّة — يُعزَل اتّجاهيًّا (UAX#9) */
.a1 .t-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ═══ 2 · القشرة ═══════════════════════════════════════════════════════════ */
.a1 .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.a1 .app.-rail { grid-template-columns: 68px 1fr; }
@media (max-width: 900px) { .app, .app.-rail { grid-template-columns: 1fr; } }

.a1 .side {
  background: var(--a1-side-bg); color: var(--a1-side-fg);
  display: flex; flex-direction: column; gap: var(--a1-sp-1);
  padding: var(--a1-sp-4) var(--a1-sp-3);
}
.a1 .side-brand { display: flex; align-items: center; gap: var(--a1-sp-3); padding: var(--a1-sp-2) var(--a1-sp-2) var(--a1-sp-5); }
.a1 .side-mark { width: 34px; height: 34px; border-radius: var(--a1-r-sm); background: var(--a1-side-mark);
              display: grid; place-items: center; font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-sm); flex: 0 0 auto; }
.a1 .side-name { font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-md); }
.a1 .side-sub { font-size: var(--a1-fs-xs); color: var(--a1-side-dim); }

.a1 .nav-group { font-size: var(--a1-fs-xs); letter-spacing: .06em; text-transform: uppercase;
              opacity: .6; padding: var(--a1-sp-4) var(--a1-sp-2) var(--a1-sp-1); }
.a1 .nav-item { display: flex; align-items: center; gap: var(--a1-sp-3); min-height: 38px;
              padding-inline: var(--a1-sp-3); border-radius: var(--a1-r-sm);
              color: var(--a1-side-fg); text-decoration: none; font-size: var(--a1-fs-md);
              opacity: .82; transition: background var(--a1-t-fast), opacity var(--a1-t-fast); }
.a1 .nav-item:hover { background: var(--a1-side-hover); opacity: 1; }
.a1 .nav-item.-on { background: var(--a1-side-active); opacity: 1; font-weight: var(--a1-fw-medium); }
.a1 .nav-item .ic { width: 18px; text-align: center; flex: 0 0 auto; opacity: .9; }
.a1 .nav-item .cnt { margin-inline-start: auto; font-size: var(--a1-fs-xs); font-weight: var(--a1-fw-bold);
                  background: var(--a1-side-cnt); padding: 1px 7px; border-radius: var(--a1-r-pill); }

.a1 .main { display: flex; flex-direction: column; min-width: 0; }

.a1 .topbar {
  display: flex; align-items: center; gap: var(--a1-sp-3);
  padding: var(--a1-sp-3) var(--a1-sp-5); background: var(--a1-surface);
  border-block-end: 1px solid var(--a1-line); position: sticky; inset-block-start: 0; z-index: 30;
}
.a1 .topbar .grow { flex: 1; }

/* ═══ 3 · ترويسةُ الصفحة — واحدةٌ بدل أربعةِ تطبيقاتٍ متمايزة ═══════════════ */
.a1 .page-head {
  display: flex; align-items: flex-start; gap: var(--a1-sp-4); flex-wrap: wrap;
  padding: var(--a1-sp-5) var(--a1-sp-5) var(--a1-sp-4);
}
.a1 .page-head .titles { flex: 1; min-width: 220px; }
.a1 .page-title { font-size: var(--a1-fs-2xl); font-weight: var(--a1-fw-bold); line-height: var(--a1-lh-tight); }
.a1 .page-sub { font-size: var(--a1-fs-sm); color: var(--a1-muted); margin-block-start: 2px; }
.a1 .page-acts { display: flex; gap: var(--a1-sp-2); flex-wrap: wrap; }
.a1 .page-body { padding: 0 var(--a1-sp-5) var(--a1-sp-8); display: flex; flex-direction: column; gap: var(--a1-gap); }

.a1 .crumbs { display: flex; align-items: center; gap: var(--a1-sp-2); font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .crumbs a { color: inherit; text-decoration: none; }
.a1 .crumbs a:hover { color: var(--a1-brand); text-decoration: underline; }
.a1 .crumbs .sep::before { content: "/"; opacity: .5; }

/* ═══ 4 · الأزرار ══════════════════════════════════════════════════════════ */
.a1 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a1-sp-2);
  min-height: var(--a1-ctl-h); padding-inline: var(--a1-sp-4);
  border: 1px solid transparent; border-radius: var(--a1-r-sm);
  font: inherit; font-size: var(--a1-fs-md); font-weight: var(--a1-fw-medium);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--a1-t-fast), border-color var(--a1-t-fast), color var(--a1-t-fast);
}
.a1 .btn:focus-visible { outline: none; box-shadow: var(--a1-ring) color-mix(in srgb, var(--a1-brand) 40%, transparent); }
.a1 .btn.-primary { background: var(--a1-brand); color: var(--a1-on-brand); }
.a1 .btn.-primary:hover { background: var(--a1-brand-700); }
.a1 .btn.-ghost { background: transparent; border-color: var(--a1-line-2); color: var(--a1-ink-2); }
.a1 .btn.-ghost:hover { border-color: var(--a1-brand); color: var(--a1-brand); background: var(--a1-brand-50); }
.a1 .btn.-quiet { background: transparent; color: var(--a1-ink-2); }
.a1 .btn.-quiet:hover { background: var(--a1-surface-2); }
.a1 .btn.-danger { background: var(--a1-bad-bg); color: var(--a1-bad); border-color: var(--a1-bad-br); }
.a1 .btn.-danger:hover { background: color-mix(in srgb, var(--a1-bad-bg) 70%, var(--a1-bad) 12%); }
.a1 .btn.-sm { min-height: 30px; padding-inline: var(--a1-sp-3); font-size: var(--a1-fs-sm); }
.a1 .btn.-icon { padding-inline: 0; width: var(--a1-ctl-h); }
.a1 .btn[disabled], .a1 .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ⛔ الزرُّ المعطَّلُ يشرح تعطيلَه — لا يترك المستخدمَ يخمّن */
.a1 .btn-why { display: inline-flex; align-items: center; gap: var(--a1-sp-2); font-size: var(--a1-fs-xs); color: var(--a1-muted); }

.a1 .btn-row { display: flex; gap: var(--a1-sp-2); flex-wrap: wrap; align-items: center; }

/* ═══ 5 · الحقولُ والمنتقيات ════════════════════════════════════════════════ */
.a1 .field { display: flex; flex-direction: column; gap: var(--a1-sp-1); min-width: 0; }
.a1 .field > label { font-size: var(--a1-fs-sm); font-weight: var(--a1-fw-medium); color: var(--a1-ink-2); }
.a1 .field .req { color: var(--a1-bad); }
.a1 .field .hint { font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .field .err { font-size: var(--a1-fs-xs); color: var(--a1-bad); display: flex; align-items: center; gap: var(--a1-sp-1); }

.a1 .input, .a1 .select, .a1 .textarea {
  width: 100%; min-height: var(--a1-ctl-h);
  padding: 0 var(--a1-sp-3); border: 1px solid var(--a1-line-2); border-radius: var(--a1-r-sm);
  background: var(--a1-surface); color: var(--a1-ink);
  font: inherit; font-size: var(--a1-fs-md);
  transition: border-color var(--a1-t-fast), box-shadow var(--a1-t-fast);
}
.a1 .textarea { padding: var(--a1-sp-2) var(--a1-sp-3); min-height: 90px; line-height: var(--a1-lh-body); resize: vertical; }
.a1 .input:focus, .a1 .select:focus, .a1 .textarea:focus {
  outline: none; border-color: var(--a1-brand);
  box-shadow: var(--a1-ring) color-mix(in srgb, var(--a1-brand) 22%, transparent);
}
.a1 .input[aria-invalid="true"] { border-color: var(--a1-bad); }
.a1 .input[readonly], .a1 .input[disabled], .a1 .select[disabled] { background: var(--a1-surface-2); color: var(--a1-muted); }
.a1 .select { appearance: none; padding-inline-end: var(--a1-sp-8); }
.a1 .select-wrap { position: relative; }
.a1 .select-wrap .caret { position: absolute; inset-inline-end: var(--a1-sp-3); inset-block-start: 50%;
                      transform: translateY(-50%); pointer-events: none; color: var(--a1-muted); font-size: var(--a1-fs-sm); }

.a1 .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--a1-sp-4); }

/* شريطُ المرشِّحات — بديلُ «ثماني قوائمَ متتاليّة» التي قاسها الجرد */
.a1 .filters { display: flex; gap: var(--a1-sp-2); flex-wrap: wrap; align-items: flex-end; }
.a1 .filters .field { flex: 1 1 170px; }

/* ═══ 6 · البطاقات ═════════════════════════════════════════════════════════ */
.a1 .card {
  background: var(--a1-surface); border: 1px solid var(--a1-line);
  border-radius: var(--a1-r); box-shadow: var(--a1-sh-1);
}
.a1 .card-head {
  display: flex; align-items: center; gap: var(--a1-sp-3);
  padding: var(--a1-pad-card); padding-block-end: var(--a1-sp-3);
  border-block-end: 1px solid var(--a1-line);
}
.a1 .card-head .grow { flex: 1; min-width: 0; }
.a1 .card-title { font-size: var(--a1-fs-lg); font-weight: var(--a1-fw-bold); }
.a1 .card-sub { font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .card-body { padding: var(--a1-pad-card); }
.a1 .card-foot { padding: var(--a1-sp-3) var(--a1-pad-card); border-block-start: 1px solid var(--a1-line);
              display: flex; gap: var(--a1-sp-2); align-items: center; }

.a1 .grid { display: grid; gap: var(--a1-gap); }
.a1 .g-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.a1 .g-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.a1 .g-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.a1 .split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: var(--a1-gap); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ═══ 7 · مؤشّرُ الأداء KPI ═════════════════════════════════════════════════ */
.a1 .kpi { background: var(--a1-surface); border: 1px solid var(--a1-line); border-radius: var(--a1-r);
       padding: var(--a1-pad-card); display: flex; flex-direction: column; gap: var(--a1-sp-2); }
.a1 .kpi-top { display: flex; align-items: center; gap: var(--a1-sp-2); }
.a1 .kpi-lbl { font-size: var(--a1-fs-sm); color: var(--a1-muted); flex: 1; }
.a1 .kpi-val { font-size: var(--a1-fs-3xl); font-weight: var(--a1-fw-bold); line-height: 1;
           font-variant-numeric: var(--a1-num); letter-spacing: -.02em; }
.a1 .kpi-sub { font-size: var(--a1-fs-xs); color: var(--a1-muted); display: flex; align-items: center; gap: var(--a1-sp-1); }
.a1 .kpi-ic { width: 34px; height: 34px; border-radius: var(--a1-r-sm); display: grid; place-items: center;
           background: var(--a1-neutral-bg); color: var(--a1-neutral); font-size: var(--a1-fs-md); }
.a1 .kpi.-ok   .kpi-ic { background: var(--a1-ok-bg);   color: var(--a1-ok); }
.a1 .kpi.-warn .kpi-ic { background: var(--a1-warn-bg); color: var(--a1-warn); }
.a1 .kpi.-bad  .kpi-ic { background: var(--a1-bad-bg);  color: var(--a1-bad); }
.a1 .kpi.-info .kpi-ic { background: var(--a1-info-bg); color: var(--a1-info); }
/* الاتّجاه: سهمٌ + كلمةٌ + رقم — ثلاثُ قنواتٍ لا لونٌ وحدَه */
.a1 .trend { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--a1-fw-medium); }
.a1 .trend.-up { color: var(--a1-ok); }
.a1 .trend.-down { color: var(--a1-bad); }

/* ═══ 8 · الحالة — ثلاثُ قنواتٍ إلزاميّة: أيقونة + لون + نصّ ════════════════
   مُرقّاةٌ من CouncilViolations.aspx:870-880 — المجموعةُ الوحيدةُ في الشجرة
   التي تجتاز WCAG AA (6.37 / 6.78 / 6.80).
   ⛔ لا يوجد في هذا النظامِ شارةٌ بلا نصّ. اللونُ وحدَه ممنوعٌ بالبناء. */
.a1 .badge {
  display: inline-flex; align-items: center; gap: var(--a1-sp-2);
  padding: 3px var(--a1-sp-3); border-radius: var(--a1-r-pill);
  font-size: var(--a1-fs-xs); font-weight: var(--a1-fw-bold); line-height: 1.6;
  border: 1px solid; white-space: nowrap;
  background: var(--a1-neutral-bg); color: var(--a1-neutral); border-color: var(--a1-neutral-br);
}
.a1 .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.a1 .badge.-ok { background: var(--a1-ok-bg);   color: var(--a1-ok);   border-color: var(--a1-ok-br); }
.a1 .badge.-warn { background: var(--a1-warn-bg); color: var(--a1-warn); border-color: var(--a1-warn-br); }
.a1 .badge.-bad { background: var(--a1-bad-bg);  color: var(--a1-bad);  border-color: var(--a1-bad-br); }
.a1 .badge.-info { background: var(--a1-info-bg); color: var(--a1-info); border-color: var(--a1-info-br); }
.a1 .badge.-solid { background: var(--a1-brand); color: var(--a1-on-brand); border-color: transparent; }

/* نقطة + نصّ — من LmsLessonPlan.aspx:693-697 (تباين 7.09–8.31) */
.a1 .dotstat { display: inline-flex; align-items: center; gap: var(--a1-sp-2); font-size: var(--a1-fs-sm); }
.a1 .dotstat .d { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--a1-neutral); }
.a1 .dotstat.-ok .d { background: var(--a1-ok); } .dotstat.-warn .d { background: var(--a1-warn); }
.a1 .dotstat.-bad .d { background: var(--a1-bad); } .dotstat.-info .d { background: var(--a1-info); }

/* مفتاحُ الألوان — المفتاحُ الوحيدُ في الشجرةِ كان في CouncilViolations:859.
   هنا صار مكوّنًا، فلا تُصبَغ خليّةٌ في هذا النظامِ بلا مفتاحٍ يُفسّرها. */
.a1 .legend { display: flex; flex-wrap: wrap; gap: var(--a1-sp-2) var(--a1-sp-4); align-items: center;
          padding: var(--a1-sp-2) var(--a1-sp-3); background: var(--a1-surface-2);
          border: 1px dashed var(--a1-line-2); border-radius: var(--a1-r-sm); font-size: var(--a1-fs-xs); }
.a1 .legend .t-label { text-transform: none; letter-spacing: 0; }

.a1 .chip { display: inline-flex; align-items: center; gap: var(--a1-sp-2); padding: 2px var(--a1-sp-3);
        border-radius: var(--a1-r-pill); background: var(--a1-surface-2); border: 1px solid var(--a1-line);
        font-size: var(--a1-fs-xs); color: var(--a1-ink-2); }
.a1 .chip.-on { background: var(--a1-brand-50); border-color: var(--a1-brand-200); color: var(--a1-brand-700); font-weight: var(--a1-fw-medium); }
.a1 .chip button { all: unset; cursor: pointer; opacity: .6; }
.a1 .chip button:hover { opacity: 1; }

/* ═══ 9 · الجداول — الكثافةُ من الرمزِ لا من ورقةٍ ثانية ════════════════════ */
.a1 .tbl-wrap { overflow-x: auto; border: 1px solid var(--a1-line); border-radius: var(--a1-r); background: var(--a1-surface); }
.a1 .tbl { width: 100%; border-collapse: collapse; font-size: var(--a1-fs-md); }
.a1 .tbl th, .a1 .tbl td { padding: var(--a1-pad-cell); text-align: start; vertical-align: middle;
                   border-block-end: 1px solid var(--a1-line); white-space: nowrap; }
.a1 .tbl th { position: sticky; inset-block-start: 0; z-index: 2;
          background: var(--a1-surface-2); color: var(--a1-muted);
          font-size: var(--a1-fs-xs); font-weight: var(--a1-fw-bold);
          letter-spacing: .04em; text-transform: uppercase; }
.a1 .tbl tbody tr { height: var(--a1-row-h); }
.a1 .tbl tbody tr:hover { background: var(--a1-brand-50); }
.a1 .tbl tbody tr:last-child td { border-block-end: 0; }
.a1 .tbl td.num { font-variant-numeric: var(--a1-num); text-align: end; }
.a1 .tbl td.wrap { white-space: normal; min-width: 220px; }
.a1 .tbl .row-act { display: flex; gap: var(--a1-sp-1); opacity: 0; transition: opacity var(--a1-t-fast); }
.a1 .tbl tr:hover .row-act, .a1 .tbl tr:focus-within .row-act { opacity: 1; }

/* الصفُّ المميَّز: خلفيّةٌ + شارةٌ + tooltip على الفرعَين
   ⛔ من Sch_ste_Manage.aspx:135-145 — يضبط التلميحَ على if **و** else،
      فالصفُّ غيرُ الملوَّنِ يفسّر نفسَه أيضًا. وهذا ما يغلق HF-1/HF-2/HF-3. */
.a1 .tbl tr.-flag td { background: var(--a1-warn-bg); }
.a1 .tbl tr.-flag:hover td { background: color-mix(in srgb, var(--a1-warn-bg) 82%, var(--a1-warn) 8%); }

.a1 .pager { display: flex; align-items: center; gap: var(--a1-sp-2); padding: var(--a1-sp-3);
         border-block-start: 1px solid var(--a1-line); font-size: var(--a1-fs-sm); color: var(--a1-muted); }
.a1 .pager .grow { flex: 1; }

/* ═══ 10 · التبويبات ═══════════════════════════════════════════════════════ */
.a1 .tabs { display: flex; gap: var(--a1-sp-1); border-block-end: 1px solid var(--a1-line); overflow-x: auto; }
.a1 .tab { appearance: none; background: none; border: 0; font: inherit; cursor: pointer;
        padding: var(--a1-sp-3) var(--a1-sp-4); color: var(--a1-muted); font-weight: var(--a1-fw-medium);
        border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;
        display: inline-flex; align-items: center; gap: var(--a1-sp-2); }
.a1 .tab:hover { color: var(--a1-ink-2); }
.a1 .tab[aria-selected="true"] { color: var(--a1-brand); border-block-end-color: var(--a1-brand); }
.a1 .tab .cnt { font-size: var(--a1-fs-xs); background: var(--a1-surface-2); border: 1px solid var(--a1-line);
            padding: 0 6px; border-radius: var(--a1-r-pill); }
.a1 .tab[aria-selected="true"] .cnt { background: var(--a1-brand-50); border-color: var(--a1-brand-200); color: var(--a1-brand-700); }
.a1 .panel[hidden] { display: none; }

/* ═══ 11 · الحالاتُ الست: فارغ · تحميل · خطأ · ممنوع · للقراءة · غير متّصل ══
   من DisciplineCouncil.aspx — أغنى تغطيةٍ مقيسة (EMPTY=14 · ERROR=5). */
.a1 .state { display: flex; flex-direction: column; align-items: center; gap: var(--a1-sp-3);
         padding: var(--a1-sp-10) var(--a1-sp-5); text-align: center; color: var(--a1-muted); }
.a1 .state .ic { width: 52px; height: 52px; border-radius: var(--a1-r-lg); display: grid; place-items: center;
             font-size: var(--a1-fs-2xl); background: var(--a1-surface-2); border: 1px solid var(--a1-line); }
.a1 .state .h { font-size: var(--a1-fs-lg); font-weight: var(--a1-fw-bold); color: var(--a1-ink); }
.a1 .state .p { max-width: 46ch; font-size: var(--a1-fs-sm); }
.a1 .state.-error .ic { background: var(--a1-bad-bg);  color: var(--a1-bad);  border-color: var(--a1-bad-br); }
.a1 .state.-denied .ic { background: var(--a1-warn-bg); color: var(--a1-warn); border-color: var(--a1-warn-br); }

/* شريطُ «للقراءة فقط» — يقول لماذا، لا «معطّل» فحسب */
.a1 .readonly-bar { display: flex; align-items: center; gap: var(--a1-sp-3);
  padding: var(--a1-sp-3) var(--a1-sp-4); border-radius: var(--a1-r-sm);
  background: var(--a1-info-bg); color: var(--a1-info); border: 1px solid var(--a1-info-br); font-size: var(--a1-fs-sm); }
.a1 .stale-bar { display: flex; align-items: center; gap: var(--a1-sp-3);
  padding: var(--a1-sp-2) var(--a1-sp-4); border-radius: var(--a1-r-sm);
  background: var(--a1-warn-bg); color: var(--a1-warn); border: 1px solid var(--a1-warn-br); font-size: var(--a1-fs-xs); }

/* الهيكلُ العظميّ — تحميلٌ لا يقفز */
.a1 .skel { background: linear-gradient(90deg, var(--a1-surface-2) 25%, var(--a1-line) 37%, var(--a1-surface-2) 63%);
        background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--a1-r-sm); }
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.a1 .skel.-line { height: 12px; margin-block: 6px; }
.a1 .skel.-row { height: var(--a1-row-h); margin-block-end: 6px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

.a1 .spinner { width: 18px; height: 18px; border: 2px solid var(--a1-line-2);
           border-block-start-color: var(--a1-brand); border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

/* ═══ 12 · هويّةُ الطالب — المكوّنُ المركزيُّ للنظام كلِّه ═══════════════════
   دورةُ العملِ كلُّها تدور حول طالبٍ بعينِه، فالهويّةُ مكوّنٌ لا تكرارُ عنوان. */
.a1 .identity { display: flex; align-items: center; gap: var(--a1-sp-4); min-width: 0; }
.a1 .avatar { width: 46px; height: 46px; border-radius: var(--a1-r); flex: 0 0 auto;
          display: grid; place-items: center; font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-lg);
          background: var(--a1-brand-100); color: var(--a1-brand-700); border: 1px solid var(--a1-brand-200); }
.a1 .avatar.-sm { width: 32px; height: 32px; font-size: var(--a1-fs-sm); border-radius: var(--a1-r-sm); }
.a1 .avatar.-lg { width: 64px; height: 64px; font-size: var(--a1-fs-2xl); }
.a1 .identity .who { min-width: 0; }
.a1 .identity .nm { font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-lg);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a1 .identity .mt { font-size: var(--a1-fs-xs); color: var(--a1-muted); display: flex; flex-wrap: wrap;
                 gap: var(--a1-sp-1) var(--a1-sp-3); align-items: center; }

/* شارةُ الدور — لونٌ دلاليٌّ + نصّ. مشتركةٌ مع الجوّالِ بالقيمة. */
.a1 .role { display: inline-flex; align-items: center; gap: var(--a1-sp-2); font-size: var(--a1-fs-xs);
        font-weight: var(--a1-fw-bold); padding: 2px var(--a1-sp-3); border-radius: var(--a1-r-pill);
        color: var(--a1-role-fg); background: var(--a1-role-admin); }
.a1 .role.-student { background: var(--a1-role-student); }
.a1 .role.-parent { background: var(--a1-role-parent); }
.a1 .role.-teacher { background: var(--a1-role-teacher); }
.a1 .role.-counselor { background: var(--a1-role-counselor); }
.a1 .role.-supervisor { background: var(--a1-role-supervisor); }

/* ═══ 13 · الخطُّ الزمنيّ — الإجراءاتُ والملاحظات ═══════════════════════════ */
.a1 .timeline { display: flex; flex-direction: column; gap: 0; }
.a1 .tl-item { display: grid; grid-template-columns: 34px 1fr; gap: var(--a1-sp-3);
            padding-block-end: var(--a1-sp-5); position: relative; }
.a1 .tl-item:not(:last-child)::before {
  content: ""; position: absolute; inset-block: 30px 0; inset-inline-start: 16px;
  width: 2px; background: var(--a1-line);
}
.a1 .tl-mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
           background: var(--a1-surface); border: 2px solid var(--a1-line); color: var(--a1-muted);
           font-size: var(--a1-fs-sm); z-index: 1; }
.a1 .tl-item.-ok   .tl-mark { border-color: var(--a1-ok-br);   color: var(--a1-ok);   background: var(--a1-ok-bg); }
.a1 .tl-item.-warn .tl-mark { border-color: var(--a1-warn-br); color: var(--a1-warn); background: var(--a1-warn-bg); }
.a1 .tl-item.-bad  .tl-mark { border-color: var(--a1-bad-br);  color: var(--a1-bad);  background: var(--a1-bad-bg); }
.a1 .tl-item.-info .tl-mark { border-color: var(--a1-info-br); color: var(--a1-info); background: var(--a1-info-bg); }
.a1 .tl-body { min-width: 0; padding-block-start: 4px; }
.a1 .tl-head { display: flex; align-items: center; gap: var(--a1-sp-2); flex-wrap: wrap; }
.a1 .tl-who { font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-sm); }
.a1 .tl-when { font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .tl-txt { font-size: var(--a1-fs-sm); color: var(--a1-ink-2); margin-block-start: var(--a1-sp-1); }

/* ═══ 14 · مسارُ العمل Stepper ══════════════════════════════════════════════ */
.a1 .steps { display: flex; gap: var(--a1-sp-1); flex-wrap: wrap; align-items: center; }
.a1 .step { display: inline-flex; align-items: center; gap: var(--a1-sp-2);
         padding: var(--a1-sp-2) var(--a1-sp-3); border-radius: var(--a1-r-sm);
         background: var(--a1-surface-2); border: 1px solid var(--a1-line);
         font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .step .n { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
           background: var(--a1-line); color: var(--a1-ink-2); font-size: 10px; font-weight: var(--a1-fw-bold); }
.a1 .step.-done { background: var(--a1-ok-bg); border-color: var(--a1-ok-br); color: var(--a1-ok); }
.a1 .step.-done .n { background: var(--a1-ok); color: var(--a1-ok-bg); }
.a1 .step.-now { background: var(--a1-brand-50); border-color: var(--a1-brand-200); color: var(--a1-brand-700); font-weight: var(--a1-fw-bold); }
.a1 .step.-now .n { background: var(--a1-brand); color: var(--a1-on-brand); }
.a1 .steps .arw { color: var(--a1-line-2); }

/* ═══ 15 · التقويم ═════════════════════════════════════════════════════════ */
.a1 .cal { border: 1px solid var(--a1-line); border-radius: var(--a1-r); overflow: hidden; background: var(--a1-surface); }
.a1 .cal-head { display: flex; align-items: center; gap: var(--a1-sp-2); padding: var(--a1-sp-3) var(--a1-sp-4);
            border-block-end: 1px solid var(--a1-line); }
.a1 .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.a1 .cal-dow { padding: var(--a1-sp-2); text-align: center; font-size: var(--a1-fs-xs); color: var(--a1-muted);
            font-weight: var(--a1-fw-bold); background: var(--a1-surface-2); border-block-end: 1px solid var(--a1-line); }
.a1 .cal-day { min-height: 88px; padding: var(--a1-sp-2); border-inline-end: 1px solid var(--a1-line);
            border-block-end: 1px solid var(--a1-line); display: flex; flex-direction: column; gap: 3px; }
.a1 .cal-day:nth-child(7n) { border-inline-end: 0; }
.a1 .cal-day .n { font-size: var(--a1-fs-xs); color: var(--a1-muted); font-variant-numeric: var(--a1-num); }
.a1 .cal-day.-off { background: var(--a1-surface-2); }
.a1 .cal-day.-today { background: var(--a1-brand-50); }
.a1 .cal-day.-today .n { color: var(--a1-brand-700); font-weight: var(--a1-fw-bold); }
.a1 .ev { font-size: var(--a1-fs-xs); padding: 2px var(--a1-sp-2); border-radius: var(--a1-r-sm);
      background: var(--a1-info-bg); color: var(--a1-info); border: 1px solid var(--a1-info-br);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.a1 .ev.-ok { background: var(--a1-ok-bg); color: var(--a1-ok); border-color: var(--a1-ok-br); }
.a1 .ev.-warn { background: var(--a1-warn-bg); color: var(--a1-warn); border-color: var(--a1-warn-br); }
.a1 .ev.-bad { background: var(--a1-bad-bg); color: var(--a1-bad); border-color: var(--a1-bad-br); }

/* فتحاتُ الحجز */
.a1 .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--a1-sp-2); }
.a1 .slot { appearance: none; font: inherit; cursor: pointer; text-align: center;
         padding: var(--a1-sp-2); border-radius: var(--a1-r-sm); border: 1px solid var(--a1-line-2);
         background: var(--a1-surface); color: var(--a1-ink); font-variant-numeric: var(--a1-num); font-size: var(--a1-fs-sm); }
.a1 .slot:hover:not([disabled]) { border-color: var(--a1-brand); background: var(--a1-brand-50); color: var(--a1-brand-700); }
.a1 .slot[aria-pressed="true"] { background: var(--a1-brand); border-color: var(--a1-brand); color: var(--a1-on-brand); font-weight: var(--a1-fw-bold); }
.a1 .slot[disabled] { background: var(--a1-surface-2); color: var(--a1-muted); cursor: not-allowed;
                  text-decoration: line-through; text-decoration-thickness: 1px; }

/* ═══ 16 · الرسائل ═════════════════════════════════════════════════════════ */
.a1 .thread-list { display: flex; flex-direction: column; }
.a1 .thread { display: flex; gap: var(--a1-sp-3); padding: var(--a1-sp-3) var(--a1-sp-4); cursor: pointer;
          border-block-end: 1px solid var(--a1-line); align-items: flex-start; }
.a1 .thread:hover { background: var(--a1-surface-2); }
.a1 .thread.-on { background: var(--a1-brand-50); }
.a1 .thread .tx { flex: 1; min-width: 0; }
.a1 .thread .tn { display: flex; align-items: center; gap: var(--a1-sp-2); }
.a1 .thread .nm { font-weight: var(--a1-fw-bold); font-size: var(--a1-fs-sm); }
.a1 .thread .tm { margin-inline-start: auto; font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .thread .pv { font-size: var(--a1-fs-xs); color: var(--a1-muted); overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
/* غيرُ مقروء: ثلاثُ إشاراتٍ لا واحدة — وزنٌ + نقطةٌ + عدّاد */
.a1 .thread.-unread .nm { font-weight: var(--a1-fw-bold); }
.a1 .thread.-unread .pv { color: var(--a1-ink-2); font-weight: var(--a1-fw-medium); }
.a1 .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a1-brand); flex: 0 0 auto; }

.a1 .msgs { display: flex; flex-direction: column; gap: var(--a1-sp-3); padding: var(--a1-sp-4); }
.a1 .msg { max-width: 74%; padding: var(--a1-sp-3) var(--a1-sp-4); border-radius: var(--a1-r-lg);
        background: var(--a1-surface-2); border: 1px solid var(--a1-line);
        align-self: flex-start; font-size: var(--a1-fs-sm); }
.a1 .msg.-mine { align-self: flex-end; background: var(--a1-brand-50); border-color: var(--a1-brand-200); }
.a1 .msg .meta { font-size: var(--a1-fs-xs); color: var(--a1-muted); margin-block-start: var(--a1-sp-1);
             display: flex; gap: var(--a1-sp-2); align-items: center; }
.a1 .composer { display: flex; gap: var(--a1-sp-2); padding: var(--a1-sp-3) var(--a1-sp-4);
            border-block-start: 1px solid var(--a1-line); align-items: flex-end; }

/* ═══ 17 · الحوارُ والورقةُ المنزلقة ═══════════════════════════════════════ */
.a1 .scrim { position: fixed; inset: 0; background: var(--a1-scrim); z-index: 60;
         display: grid; place-items: center; padding: var(--a1-sp-4); }
.a1 .dialog { background: var(--a1-surface); border: 1px solid var(--a1-line); border-radius: var(--a1-r-lg);
          box-shadow: var(--a1-sh-3); width: min(560px, 100%); max-height: 88vh; overflow: auto; }
.a1 .dialog-head { display: flex; align-items: center; gap: var(--a1-sp-3);
               padding: var(--a1-sp-4) var(--a1-pad-card); border-block-end: 1px solid var(--a1-line); }
.a1 .dialog-body { padding: var(--a1-pad-card); display: flex; flex-direction: column; gap: var(--a1-sp-4); }
.a1 .dialog-foot { padding: var(--a1-sp-3) var(--a1-pad-card); border-block-start: 1px solid var(--a1-line);
               display: flex; gap: var(--a1-sp-2); justify-content: flex-end; }
.a1 .sheet { position: fixed; inset-block-end: 0; inset-inline: 0; background: var(--a1-surface);
         border-start-start-radius: var(--a1-r-lg); border-start-end-radius: var(--a1-r-lg);
         box-shadow: var(--a1-sh-3); z-index: 61; max-height: 86vh; overflow: auto; }

/* ═══ 18 · التنبيهاتُ العابرة ═══════════════════════════════════════════════ */
.a1 .toasts { position: fixed; inset-block-end: var(--a1-sp-5); inset-inline-start: var(--a1-sp-5);
          display: flex; flex-direction: column; gap: var(--a1-sp-2); z-index: 70; }
.a1 .toast { display: flex; align-items: center; gap: var(--a1-sp-3); min-width: 260px;
         padding: var(--a1-sp-3) var(--a1-sp-4); border-radius: var(--a1-r-sm); box-shadow: var(--a1-sh-2);
         background: var(--a1-surface); border: 1px solid var(--a1-line); font-size: var(--a1-fs-sm); }
.a1 .toast.-ok { border-color: var(--a1-ok-br);   background: var(--a1-ok-bg);   color: var(--a1-ok); }
.a1 .toast.-bad { border-color: var(--a1-bad-br);  background: var(--a1-bad-bg);  color: var(--a1-bad); }
.a1 .toast.-warn { border-color: var(--a1-warn-br); background: var(--a1-warn-bg); color: var(--a1-warn); }

/* ═══ 19 · أدواتٌ مساعدة ═══════════════════════════════════════════════════ */
.a1 .row { display: flex; align-items: center; gap: var(--a1-sp-3); flex-wrap: wrap; }
.a1 .col { display: flex; flex-direction: column; gap: var(--a1-sp-3); }
.a1 .grow { flex: 1; min-width: 0; }
.a1 .end { margin-inline-start: auto; }
.a1 .hr { height: 1px; background: var(--a1-line); border: 0; }
.a1 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.a1 [hidden] { display: none !important; }

/* التركيزُ مرئيٌّ دائمًا — شرطُ وصوليّةٍ لا خيارُ ذوق */
.a1 :focus-visible { outline: 2px solid var(--a1-brand); outline-offset: 2px; border-radius: 3px; }

/* هدفُ اللمسِ 44px على الشاشاتِ الصغيرة */
@media (pointer: coarse) {
.a1 .btn, .a1 .tab, .a1 .slot, .a1 .nav-item { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20 · مكوّناتٌ رُقّيت بعد سقوطِ بوّابة WORKFLOW-COVERAGE-01
   ───────────────────────────────────────────────────────────────────────────
   عند قياسِ النماذجِ الثمانيةِ تبيّن أنّها اخترعت: ٦ نسخٍ من المبدّلِ المقسَّم،
   ونسختَين من صفِّ الأرقامِ المضغوط، ونسختَين من شريطِ الإجراءاتِ اللاصق.
   وهو العطبُ نفسُه المقيسُ في المنتَج (٢٨ تطبيقًا لسبعةِ مكوّنات).
   ⇒ عُولج في الطبقةِ كما ينصّ معيارُ البوّابة، لا في الشاشات.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── المبدّلُ المقسَّم — يخدم: الدور · الصفة · الحصّة · حالةَ الشاشة ── */
.a1 .segment { display: inline-flex; gap: 2px; padding: 2px; flex-wrap: wrap;
           background: var(--a1-surface-2); border: 1px solid var(--a1-line); border-radius: var(--a1-r-pill); }
.a1 .segment > button, .a1 .segment > a {
  appearance: none; font: inherit; cursor: pointer; border: 0; background: transparent;
  color: var(--a1-ink-2); padding: 3px var(--a1-sp-3); border-radius: var(--a1-r-pill);
  font-size: var(--a1-fs-xs); line-height: 1.7; text-decoration: none; white-space: nowrap;
}
.a1 .segment > button:hover, .a1 .segment > a:hover { background: var(--a1-brand-50); color: var(--a1-brand-700); }
.a1 .segment > button[aria-pressed="true"], .a1 .segment > a[aria-pressed="true"] {
  background: var(--a1-brand); color: var(--a1-on-brand); font-weight: var(--a1-fw-bold);
}
/* شريطُ اختيارٍ فوق الصفحة — يحمل مبدّلًا أو أكثرَ ووصفًا */
.a1 .pickbar { display: flex; gap: var(--a1-sp-2); align-items: center; flex-wrap: wrap;
           padding: var(--a1-sp-2) var(--a1-sp-5); background: var(--a1-surface-2);
           border-block-end: 1px solid var(--a1-line); }

/* ── صفُّ الأرقامِ المضغوط — نسخةٌ مصغّرةٌ من .kpi حين لا تتّسع البطاقات ── */
.a1 .metrics { display: flex; gap: var(--a1-sp-6); flex-wrap: wrap; }
.a1 .metric .v { font-size: var(--a1-fs-xl); font-weight: var(--a1-fw-bold); font-variant-numeric: var(--a1-num); line-height: 1.2; }
.a1 .metric .l { font-size: var(--a1-fs-xs); color: var(--a1-muted); }
.a1 .metrics.-onbrand .v { color: var(--a1-side-fg); }
.a1 .metrics.-onbrand .l { color: var(--a1-side-dim); }

/* ── بطاقةُ «أوّلُ ما يجب فعلُه» — عمودُ فقرةِ لوحةِ الدور ── */
.a1 .focus { background: var(--a1-surface); border: 1px solid var(--a1-line); border-radius: var(--a1-r);
         padding: var(--a1-sp-5); display: flex; gap: var(--a1-sp-5); align-items: center; flex-wrap: wrap; }
.a1 .focus .big { font-size: var(--a1-fs-3xl); font-weight: var(--a1-fw-bold); line-height: 1.1; text-wrap: balance; }

/* ── شريطُ الإجراءاتِ — لاصقٌ أسفلَ الشاشةِ أو ظاهرٌ عند التحديد ── */
.a1 .actionbar { display: flex; gap: var(--a1-sp-3); align-items: center; flex-wrap: wrap;
             padding: var(--a1-sp-3) var(--a1-sp-5); background: var(--a1-surface);
             border-block-start: 1px solid var(--a1-line); box-shadow: var(--a1-sh-2); }
.a1 .actionbar.-stick { position: sticky; inset-block-end: 52px; z-index: 25; }
.a1 .actionbar.-bulk { background: var(--a1-brand-50); border: 1px solid var(--a1-brand-200);
                    border-radius: var(--a1-r-sm); box-shadow: none; padding: var(--a1-sp-3) var(--a1-sp-4); }

/* ── مجموعةُ اختيارٍ حصريّة بنبرةٍ دلاليّة — الرصد · التقدير · القرار ── */
.a1 .choice { display: inline-flex; gap: 2px; }
.a1 .choice > button {
  appearance: none; font: inherit; cursor: pointer; min-width: 34px; min-height: 30px;
  border: 1px solid var(--a1-line-2); background: var(--a1-surface); color: var(--a1-muted);
  border-radius: var(--a1-r-sm); font-size: var(--a1-fs-xs); font-weight: var(--a1-fw-bold);
}
.a1 .choice > button:hover { border-color: var(--a1-brand); color: var(--a1-brand); }
.a1 .choice > button[aria-pressed="true"][data-tone="ok"] { background: var(--a1-ok-bg);   color: var(--a1-ok);   border-color: var(--a1-ok-br); }
.a1 .choice > button[aria-pressed="true"][data-tone="warn"] { background: var(--a1-warn-bg); color: var(--a1-warn); border-color: var(--a1-warn-br); }
.a1 .choice > button[aria-pressed="true"][data-tone="bad"] { background: var(--a1-bad-bg);  color: var(--a1-bad);  border-color: var(--a1-bad-br); }
.a1 .choice > button[aria-pressed="true"][data-tone="info"] { background: var(--a1-info-bg); color: var(--a1-info); border-color: var(--a1-info-br); }

/* ── لوحتان متجاورتان بتمريرٍ مستقلّ — الرسائل · أيُّ قائمة/تفصيل ── */
.a1 .panes { display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
         height: calc(100vh - 57px - 52px); min-height: 480px; }
@media (max-width: 860px) { .panes { grid-template-columns: 1fr; height: auto; } }
.a1 .pane { border-inline-end: 1px solid var(--a1-line); background: var(--a1-surface);
        display: flex; flex-direction: column; min-height: 0; }
.a1 .pane:last-child { border-inline-end: 0; }
.a1 .pane-head { padding: var(--a1-sp-3) var(--a1-sp-4); border-block-end: 1px solid var(--a1-line);
             display: flex; gap: var(--a1-sp-2); align-items: center; }
.a1 .pane-scroll { overflow: auto; flex: 1; min-height: 0; }

/* ── شريطُ الهويّة — ترويسةُ صفحةٍ محورُها شخص ── */
.a1 .idbar { padding: var(--a1-sp-5); background: var(--a1-surface); border-block-end: 1px solid var(--a1-line);
         display: flex; gap: var(--a1-sp-5); align-items: center; flex-wrap: wrap; }

/* ═══ 21 · إصلاحُ التجاوزِ الأفقيِّ المقيس ══════════════════════════════════
   قِيس تجاوزٌ عند ٩٩٢ و٥٤٨ بكسل في لوحةِ الدورِ والاستدعاء. السببُ ليس تصميمًا
   بل قاعدةً في CSS: عنصرُ الشبكة/المرونة قيمتُه الدنيا min-width:auto، فيرفض
   الانكماشَ تحت عرضِ محتواه ويدفع الصفحةَ للتمرير. العلاجُ في الطبقةِ مرّةً واحدة. */
.a1 .split > *, .a1 .grid > *, .a1 .app > *, .a1 .panes > * { min-width: 0; }
.a1 .cal, .a1 .cal-grid { min-width: 0; }
.a1 .cal-day { overflow: hidden; }
.a1 .slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
/* الشبكةُ الجانبيّةُ تنطوي أبكر: عند ٩٩٢ لم يعد العمودانِ يتّسعان */
@media (max-width: 1040px) { .split { grid-template-columns: 1fr; } }

/* ═══ 22 · الروابطُ — ثغرةٌ كشفها المسحُ الشامل ══════════════════════════════
   أيُّ <a> لم يُعطَ لونًا يأخذ أزرقَ المتصفّحِ الافتراضيَّ (#0000EE)، وهو على
   السطحِ الداكن 1.81 : 1 ⇒ ساقطٌ تمامًا. ولم يظهر هذا في العلاماتِ اليدويّةِ
   لأنّها لم تُوضَع على الروابط — «صفرُ أزواجٍ مقيسة» ليس «اجتاز». */
.a1 a { color: var(--a1-brand); text-underline-offset: 2px; }
.a1 a:hover { color: var(--a1-brand-700); }
.a1 a:visited { color: var(--a1-brand); }
/* الروابطُ التي تلبس زيَّ زرٍّ أو شريحةٍ تحتفظ بلونِ ذلك المكوّن */
.a1 a.btn, .a1 a.chip, .a1 a.badge, .a1 a.nav-item, .a1 a.slot, .a1 a.proto { color: inherit; }
.a1 a.btn.-primary { color: var(--a1-on-brand); }
.a1 .side a, .a1 .stage a { color: var(--a1-side-fg); }