/* 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: var(--zs-font-institutional) !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: #ffffff;
  --zs-section-bg: #ffffff;
}

/* 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%;
}

/* Lesson routes in Light: the whole canvas is white, like the site header. */
html.light[data-zs-school-lesson="1"] body,
html.light[data-zs-school-lesson="1"] main {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ─── Light: dark "island" blocks (chapter heroes, story headers, test call)
   become light surfaces. `data-zs-island` marks every block painted with the
   chapter's `heroGrad`; its hard-coded white text turns to the Light ink.
   Accent colors (C.accent / C.amber / …) inside are untouched. Dark mode is
   unchanged: the variable falls back to the chapter's own gradient. */
html.light {
  --zs-island-bg: linear-gradient(135deg, #f4f7fb 0%, #ffffff 55%, #f6f8f4 100%);
}

html.light [data-zs-island] {
  box-shadow: inset 0 0 0 1px rgba(11, 13, 12, 0.08) !important;
  color: #0b0d0c;
}

html.light [data-zs-island] :is(
  [style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"],
  [style*="color: rgb(255, 255, 255)"], [style*="color:white"], [style*="color: white"]
):not([style*="background"]) {
  color: #0b0d0c !important;
}

html.light [data-zs-island] :is(
  [style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"]
) {
  color: rgba(11, 13, 12, 0.66) !important;
}

html.light [data-zs-island] [style*="background:rgba(255,255,255"],
html.light [data-zs-island] [style*="background: rgba(255, 255, 255"] {
  background: rgba(11, 13, 12, 0.04) !important;
  border-color: rgba(11, 13, 12, 0.1) !important;
}

/* Island gradient-clipped titles (white → gold on navy) read as ink in Light. */
html.light [data-zs-island] [style*="background-clip: text"],
html.light [data-zs-island] [style*="background-clip:text"] {
  background-image: linear-gradient(180deg, #0b0d0c 0%, #0b0d0c 60%, #8a6410 100%) !important;
}

/* Island gold accents (#E0B547 on navy) → the same gold, deep enough for white. */
html.light [data-zs-island] :is(
  [style*="color:#E0B547"], [style*="color: #E0B547"], [style*="color: rgb(224, 181, 71)"]
) {
  color: #8a6410 !important;
}

html.light [data-zs-island] :is(
  [style*="color:rgba(224,181,71"], [style*="color: rgba(224, 181, 71"]
) {
  color: rgba(138, 100, 16, 0.8) !important;
}

/**
 * /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;
  }
}