/* Foundations (React) — wide workspace + modern editorial presentation.
   Presentation only. Tajawal via layout + F tokens. */

:root {
  --school-lesson-max: 1840px;
  --school-lesson-gutter: 40px;
  --school-prose-max: 72ch;
  --school-section-gap: clamp(40px, 4vw, 72px);
  --school-radius: 12px;
  --school-hairline: rgba(11, 13, 12, 0.08);
}

.zs-school-lesson-workspace,
.zs-foundations-workspace {
  width: min(calc(100% - (2 * var(--school-lesson-gutter))), var(--school-lesson-max)) !important;
  max-width: var(--school-lesson-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  :root {
    --school-lesson-gutter: 24px;
    --school-section-gap: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --school-lesson-gutter: 18px;
    --school-section-gap: 28px;
  }

  .zs-school-lesson-workspace,
  .zs-foundations-workspace {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--school-lesson-gutter) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  :root {
    --school-lesson-gutter: 16px;
  }
}

/* Prevent residual horizontal page overflow on narrow phones */
@media (max-width: 768px) {
  .zs-chapter-typography,
  .zs-foundations-workspace {
    overflow-x: clip;
  }
}

.zs-chapter-typography,
.zs-chapter-typography * {
  font-family: "Tajawal", var(--font-body, "Tajawal"), sans-serif !important;
  font-synthesis: none;
  letter-spacing: 0 !important;
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: geometricPrecision;
}

.zs-chapter-typography code,
.zs-chapter-typography kbd,
.zs-chapter-typography pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

/* Heading hierarchy — editorial, not dashboard */
.zs-chapter-typography h1 {
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  font-size: clamp(1.85rem, 2.4vw, 2.75rem) !important;
}

.zs-chapter-typography h2 {
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  font-size: clamp(1.35rem, 1.7vw, 1.85rem) !important;
  margin-block: var(--school-section-gap) 0.75rem !important;
}

.zs-chapter-typography h3 {
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-size: clamp(1.1rem, 1.25vw, 1.35rem) !important;
}

.zs-chapter-typography h4 {
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}

.zs-chapter-typography p {
  line-height: 1.9;
  font-weight: 400;
}

/* Controlled prose measure inside wide workspace */
.zs-foundations-workspace > p,
.zs-chapter-typography .zs-prose,
.zs-foundations-workspace .zs-prose {
  max-width: var(--school-prose-max);
}

/* Flatten card soup — no floating chrome */
.zs-chapter-typography .zs-card,
.zs-foundations-workspace [data-zs-card],
.zs-chapter-typography [class*="card"],
.zs-foundations-workspace [class*="Card"],
.zs-chapter-typography div {
  box-shadow: none !important;
}

/* Soften nested panel feel without rewriting chapter JSX */
.zs-foundations-workspace {
  --zs-card-bg: #ffffff;
  --zs-card-bg-strong: #fafaf7;
  --zs-card-border: rgba(11, 13, 12, 0.08);
  --zs-card-border-strong: rgba(11, 13, 12, 0.14);
  --zs-section-bg: #f6f6f2;
  --zs-divider: rgba(11, 13, 12, 0.08);
  --zs-shadow-sm: none;
  --zs-shadow-md: none;
  --zs-shadow-lg: none;
}

html.light .zs-foundations-workspace,
html.light .zs-chapter-typography {
  --zs-card-bg: #ffffff;
  --zs-card-bg-strong: #fafaf7;
  --zs-page-bg: #f6f6f2;
  --zs-section-bg: #f6f6f2;
}

/* Dark foundations — graphite, not card soup */
html:not(.light) .zs-foundations-workspace {
  --zs-card-bg: #0b0d10;
  --zs-card-bg-strong: #101318;
  --zs-card-border: rgba(255, 255, 255, 0.08);
  --zs-card-border-strong: rgba(255, 255, 255, 0.12);
  --zs-page-bg: #07080a;
  --zs-section-bg: #07080a;
  --zs-divider: rgba(255, 255, 255, 0.07);
}

/* Wider grids / diagrams inside Foundations */
.zs-foundations-workspace [style*="grid"],
.zs-foundations-workspace [style*="display: grid"],
.zs-foundations-workspace [style*="display:grid"],
.zs-foundations-workspace svg,
.zs-foundations-workspace canvas,
.zs-foundations-workspace table {
  max-width: none;
}

/* Reduce decorative thick chrome — keep 1px hairlines where present */
html.light .zs-foundations-workspace {
  --school-hairline: rgba(11, 13, 12, 0.08);
}

/* Professor controls — sit in the section, not a floating pill island */
.zs-foundations-workspace [class*="Professor"],
.zs-chapter-typography [class*="professor"],
.zs-foundations-workspace button[aria-label*="أستاذ"],
.zs-foundations-workspace [data-professor] {
  box-shadow: none !important;
  border-radius: 10px !important;
}

/* Lab / assessment surfaces — full workspace width */
.zs-foundations-workspace [class*="Lab"],
.zs-foundations-workspace [class*="lab"],
.zs-foundations-workspace [class*="Assessment"],
.zs-foundations-workspace [class*="Quiz"],
.zs-foundations-workspace [class*="quiz"] {
  max-width: none !important;
  width: 100%;
}

/**
 * /school/* — mobile layout polish (<768px only).
 * Profile: student-profile.module.css
 * Chapters / tracks: .zs-track-overview (TrackOverview)
 */

@media (max-width: 767px) {
  /* ── Track overview (/school/chapters-overview, market-language-overview, etc.) ── */
  .zs-track-overview {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  .zs-track-overview .max-w-7xl {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 16px;
    padding-top: max(5.5rem, calc(56px + env(safe-area-inset-top, 0px)));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .zs-track-overview .rounded-3xl.p-8,
  .zs-track-overview .rounded-3xl.p-8.md\:p-12,
  .zs-track-overview .rounded-3xl.p-12 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px 18px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .zs-track-overview .mb-16 {
    margin-bottom: 22px;
  }

  .zs-track-overview .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 20px;
  }

  .zs-track-overview p.max-w-3xl.mx-auto,
  .zs-track-overview p.max-w-2xl.mx-auto,
  .zs-track-overview .max-w-3xl.mx-auto.leading-relaxed {
    line-height: 1.6;
    max-width: min(100%, 36ch);
    margin-inline: auto;
  }

  .zs-track-overview .text-center.py-16 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .zs-track-overview .text-5xl,
  .zs-track-overview .md\:text-6xl {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.2;
  }

  /* Stage cards — stack icon + body; badge row wraps */
  .zs-track-overview .space-y-6 > div > .flex.gap-6 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .zs-track-overview .space-y-6 .flex-shrink-0 .w-20 {
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
  }

  .zs-track-overview .space-y-6 .flex-shrink-0 .w-10 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .zs-track-overview .space-y-6 .rounded-2xl.p-6 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 20px 18px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .zs-track-overview .space-y-6 .flex.items-center.justify-between {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  .zs-track-overview .space-y-6 .text-2xl.font-bold {
    font-size: 1.2rem;
    line-height: 1.4;
    margin-bottom: 12px;
    width: 100%;
  }

  /* Chapter list rows — full width, no overlap */
  .zs-track-overview a[href^="/school/"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 44px;
    padding: 14px 0;
  }

  .zs-track-overview a[href^="/school/"] > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }

  .zs-track-overview a[href^="/school/"] > div > span:first-child {
    min-width: 0;
    width: auto;
  }

  .zs-track-overview a[href^="/school/"] > div > div {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .zs-track-overview a[href^="/school/"] h3 {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
  }

  .zs-track-overview a[href^="/school/"] p {
    line-height: 1.6;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .zs-track-overview a[href^="/school/"] > div > .flex.items-center {
    min-height: 44px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .zs-track-overview a[href^="/school/"] svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .zs-track-overview .grid.grid-cols-2 {
    gap: 18px;
    margin-bottom: 4px;
  }

  .zs-track-overview .grid.grid-cols-2 > div {
    min-width: 0;
    padding: 18px 14px;
  }

  .zs-track-overview .flex.flex-wrap.gap-4 a,
  .zs-track-overview .flex.flex-wrap.gap-4 button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .zs-track-overview .zs-track-back-link {
    min-height: 44px;
  }
}

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/dd994fbf464986f0-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/e97026df054cf2a3-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/63a79a6cf340c5d2-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/f15f45d13243c643-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/1ebb550cd0a67fc6-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/ce401babc0566bc1-s.p.woff2?dpl=dpl_ELkKj8rnBeGGLVSp3vMsMBmJVM4N) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Tajawal Fallback';src: local("Arial");ascent-override: 67.93%;descent-override: 37.71%;line-gap-override: 21.13%;size-adjust: 94.66%
}.__className_468375 {font-family: 'Tajawal', 'Tajawal Fallback';font-style: normal
}.__variable_468375 {--font-body: 'Tajawal', 'Tajawal Fallback'
}