/**
 * ملاءمة تصميم سطح المكتب لعرض الشاشة.
 * ≥1280: جاهز بدون تصغير.
 * <1280 (بدون xsr-phone): xsr-fit-fluid — تخطيط الكمبيوتر بعرض النافذة.
 * xsr-fit-narrow (لوحة 1280+zoom) يبقى للتوافق إن وُجد، والـ JS لم يعد يفعّله على المسار الضيق.
 */
:root {
  --xsr-design-width: 1280;
  --xsr-fit: 1;
}

html.xsr-fit-ready {
  zoom: var(--xsr-fit);
}

/* وضع سطح المكتب بعرض مرن (هاتف + Request desktop site، أو نافذة ضيقة) */
html.xsr-fit-ready.xsr-fit-fluid {
  zoom: 1;
  overflow-x: hidden;
}

html.xsr-fit-ready.xsr-fit-fluid body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  box-sizing: border-box;
}

html.xsr-fit-ready.xsr-fit-fluid.design-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-fluid.data-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-fluid.verify-page-root:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-fluid.admin-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-fluid:has(body.collab-editor-page):not(.xsr-collab-mobile) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

html.xsr-fit-ready.xsr-fit-fluid.design-page body.design-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-fluid.data-page body.data-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-fluid.verify-page-root body.verify-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-fluid.admin-page body.admin-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-fluid:not(.xsr-collab-mobile) body.collab-editor-page {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

html.xsr-fit-ready.xsr-fit-fluid .space-track-courses,
html.xsr-fit-ready.xsr-fit-fluid .track-courses-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-fluid .course-info-panel__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-fluid .cert-outer-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-fluid .course-info-unit,
html.xsr-fit-ready.xsr-fit-fluid .space-track-courses > * {
  min-width: 0;
  max-width: 100%;
}

@supports not (zoom: 1) {
  html.xsr-fit-ready.xsr-fit-fluid {
    zoom: unset;
  }

  html.xsr-fit-ready.xsr-fit-fluid body {
    transform: none !important;
    width: 100% !important;
  }
}

/* Firefox ومتصفحات بلا zoom: scale على body مع تعويض العرض */
@supports not (zoom: 1) {
  html.xsr-fit-ready {
    zoom: unset;
  }

  html.xsr-fit-ready body {
    transform: scale(var(--xsr-fit));
    transform-origin: top center;
    width: calc(100% / var(--xsr-fit));
  }

  html.xsr-fit-ready.xsr-fit-narrow body {
    width: calc(var(--xsr-design-width) * 1px);
    min-width: calc(var(--xsr-design-width) * 1px);
  }
}

/* على الشاشات الأضيق من عرض التصميم: حافظ على لوحة 1280 ثم صغّرها بالـ zoom */
html.xsr-fit-ready.xsr-fit-narrow body {
  width: calc(var(--xsr-design-width) * 1px);
  min-width: calc(var(--xsr-design-width) * 1px);
  box-sizing: border-box;
}

html.xsr-fit-ready.xsr-fit-narrow {
  overflow-x: hidden;
}

/*
 * صفحات التصميم والبيانات والتحقق والإدارة ومحرر التعاون (Desktop site فقط):
 * ارتفاع اللوحة = ارتفاع الشاشة ÷ معامل الزوم.
 * على collab مع UA جوّال: لا xsr-fit-narrow — انظر collab-editor-mq.css.
 */
html.xsr-fit-ready.xsr-fit-narrow.design-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-narrow.data-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-narrow.verify-page-root:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-narrow.admin-page:not(:has(body.xsr-chat-side-dock)),
html.xsr-fit-ready.xsr-fit-narrow:has(body.collab-editor-page):not(.xsr-collab-mobile) {
  height: calc(100dvh / var(--xsr-fit));
  max-height: calc(100dvh / var(--xsr-fit));
  overflow: hidden;
}

html.xsr-fit-ready.xsr-fit-narrow.design-page body.design-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-narrow.data-page body.data-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-narrow.verify-page-root body.verify-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-narrow.admin-page body.admin-workspace:not(.xsr-chat-side-dock),
html.xsr-fit-ready.xsr-fit-narrow:not(.xsr-collab-mobile) body.collab-editor-page {
  height: calc(100dvh / var(--xsr-fit));
  max-height: calc(100dvh / var(--xsr-fit));
  min-height: calc(100dvh / var(--xsr-fit));
  overflow: hidden;
}

@supports not (zoom: 1) {
  html.xsr-fit-ready.xsr-fit-narrow.design-page body.design-workspace:not(.xsr-chat-side-dock),
  html.xsr-fit-ready.xsr-fit-narrow.data-page body.data-workspace:not(.xsr-chat-side-dock),
  html.xsr-fit-ready.xsr-fit-narrow.verify-page-root body.verify-workspace:not(.xsr-chat-side-dock),
  html.xsr-fit-ready.xsr-fit-narrow.admin-page body.admin-workspace:not(.xsr-chat-side-dock),
  html.xsr-fit-ready.xsr-fit-narrow:not(.xsr-collab-mobile) body.collab-editor-page {
    height: calc(100dvh / var(--xsr-fit));
    max-height: calc(100dvh / var(--xsr-fit));
    min-height: calc(100dvh / var(--xsr-fit));
  }
}

/* الشبكات مضبوطة أصلاً بعدد أعمدة مناسب؛ لا نفرض تكديساً إضافياً على الهاتف */
html.xsr-fit-ready.xsr-fit-narrow .space-track-courses,
html.xsr-fit-ready.xsr-fit-narrow .track-courses-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-narrow .course-info-panel__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-narrow .cert-outer-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html.xsr-fit-ready.xsr-fit-narrow .course-info-unit,
html.xsr-fit-ready.xsr-fit-narrow .space-track-courses > * {
  min-width: 0;
  max-width: 100%;
}

/* هاتف حقيقي: لا لوحة 1280 ولا zoom — انظر xsecroot-phone.css */
html.xsr-phone,
html.xsr-phone.xsr-fit-ready,
html.xsr-phone.xsr-fit-narrow {
  zoom: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
}

html.xsr-phone body,
html.xsr-phone.xsr-fit-narrow body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh;
  overflow: visible !important;
  box-sizing: border-box;
}

@supports not (zoom: 1) {
  html.xsr-phone body,
  html.xsr-phone.xsr-fit-narrow body {
    transform: none !important;
    width: 100% !important;
  }
}