/**
 * Layout uses CSS logical properties (inline-start/end, padding-inline) so the
 * entire interface mirrors when the document direction flips to RTL for Arabic.
 * There is no separate Arabic stylesheet.
 */

:root {
  --navy: #14304f;
  --accent: #1e7a5f;      /* Algerian green, used as the primary action colour */
  --accent-dark: #155e49;
  --accent-light: #e3f2ec;
  --sand: #f6f4ef;
  --bg: #f7f9fb;
  --card: #ffffff;
  --line: #e3e8ee;
  --text: #17212e;
  --muted: #5f6b7a;
  --red: #b3402f;
  --amber: #9a6b00;
  --amber-bg: #fdf4e3;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 40, 70, .06), 0 4px 14px rgba(16, 40, 70, .05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Media is the classic source of a page that won't fit a phone: an image or a
   video at its intrinsic size drags the whole document wider than the viewport
   and every screen ends up zoomed out. */
img, video { max-width: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Arabic benefits from slightly more line height and a larger base size. */
html[dir="rtl"] body { line-height: 1.75; font-size: 16.5px; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; }

#root { min-height: 100vh; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px;
  background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--navy); }

/* Same gradient recipe as the homepage hero band, so the mark in the topbar
   reads as part of the same palette rather than a separately-chosen colour. */
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(150deg, var(--navy) 0%, #17415f 55%, var(--accent-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}

.brand-delta {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700; letter-spacing: .01em;
}
.brand-suffix { font-weight: 600; }

/* The mark sits left, the full name beside it. `color` drives the SVG, which
   is drawn in currentColor — so the logo follows the palette instead of
   carrying its own. */
.brand-mark-img {
  height: 26px; width: auto; display: block;
  color: var(--navy);
}
.brand-stack { display: flex; flex-direction: column; line-height: 1.2; }
.brand-full {
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--navy); white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 6px; }

.nav-link {
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--muted); background: transparent; border: none;
}
.nav-link:hover { background: var(--bg); color: var(--navy); }
.nav-link.active { background: var(--accent-light); color: var(--accent-dark); }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.lang-switch { display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-btn {
  border: none; background: transparent; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.lang-btn.active { background: var(--navy); color: #fff; }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); font-size: 13px;
}
html[dir="rtl"] .user-chip { padding: 5px 5px 5px 12px; }

.avatar {
  width: 28px; height: 28px; border-radius: 999px; background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 9px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-outline { background: #fff; border-color: var(--line); color: var(--navy); }
.btn-danger { background: #fbecea; color: var(--red); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- layout */

.page { flex: 1; padding: 28px; max-width: 1180px; margin: 0 auto; width: 100%; }
.page-narrow { max-width: 620px; }

.page-head { margin-bottom: 22px; }
.page-title { font-size: 25px; font-weight: 800; color: var(--navy); }
.page-sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 20px; }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spread { margin-inline-start: auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.section-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 26px 0 12px; }

/* ---------------------------------------------------------------- landing */

.hero {
  position: relative; overflow: hidden;
  background: var(--navy); /* fallback while the video loads / if it fails */
  color: #fff; padding: 74px 28px 84px; text-align: center;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(20,48,79,.88) 0%, rgba(23,65,95,.82) 55%, rgba(21,94,73,.85) 100%);
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 40px; font-weight: 800; max-width: 780px; margin: 0 auto 16px; line-height: 1.2; }
.hero p { font-size: 17px; color: #d6e6df; max-width: 620px; margin: 0 auto 30px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-outline { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }

/* -------------------------------------------------------- study video band */

.study-band {
  position: relative; overflow: hidden; min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy);
}
.study-band-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.study-band-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,32,46,.35) 0%, rgba(20,32,46,.72) 100%);
}
.study-band-content {
  position: relative; z-index: 2; color: #fff; text-align: center;
  max-width: 640px; padding: 40px 24px;
}
.study-band-content h2 { font-size: 27px; font-weight: 800; margin-bottom: 14px; }
.study-band-content p { font-size: 15.5px; line-height: 1.7; color: #dfe8ee; margin: 0; }

/* -------------------------------------------------------------- explorers */

.explorers {
  padding: 56px 28px; background: var(--sand);
}
.explorers-inner {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center;
}
@media (max-width: 780px) { .explorers-inner { grid-template-columns: 1fr; } }
.explorers-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.explorers-videos video {
  width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.explorers-quote blockquote {
  margin: 0 0 12px; font-size: 24px; font-weight: 700; color: var(--navy);
  line-height: 1.4; font-style: italic;
}
.explorers-quote cite {
  display: block; font-size: 14px; font-weight: 600; color: var(--muted); font-style: normal;
}
.explorers-quote cite::before { content: "— "; }

.feature { padding: 22px; }
.feature-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px;
}
.feature h3 { font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }

.footer { background: var(--navy); color: #a9bccd; padding: 26px; text-align: center; font-size: 13px; margin-top: auto; }

/* ---------------------------------------------------------------- forms */

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14.5px; font-family: inherit; background: #fff; color: var(--text);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.field-row { display: flex; gap: 12px; }
.field-row > * { flex: 1; }

.alert { padding: 12px 15px; border-radius: 9px; font-size: 14px; margin-bottom: 15px; }
.alert-error { background: #fbecea; color: var(--red); border: 1px solid #f0cdc7; }
.alert-ok { background: var(--accent-light); color: var(--accent-dark); border: 1px solid #b9ded1; }
.alert-info { background: var(--amber-bg); color: var(--amber); border: 1px solid #ecd9ac; }

/* consent block — visually distinct because it is a legal act, not a checkbox */
.consent-box {
  border: 1.5px solid var(--accent); background: var(--accent-light);
  border-radius: 10px; padding: 15px; margin: 16px 0;
}
.consent-box h4 { margin: 0 0 8px; font-size: 14px; color: var(--accent-dark); }
.consent-box p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: #24443a; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--accent-dark); }
.consent-check input { margin-top: 3px; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- catalog */

.filters { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.filters select { padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: #fff; font-family: inherit; }

/* ---------------------------------------------------------------- teach: trimesters & batch classes */

.trimester-block {
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg);
}
.trimester-badge {
  width: 24px; height: 24px; border-radius: 999px; background: var(--navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.class-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap;
}
.class-title-input {
  flex: 1; min-width: 160px; border: 1px solid transparent; background: transparent;
  padding: 6px 8px; border-radius: 6px; font-size: 14px; font-family: inherit; color: var(--text);
}
.class-title-input:hover, .class-title-input:focus { border-color: var(--line); background: var(--bg); outline: none; }
.class-date-input {
  border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 6px;
  font-size: 12.5px; font-family: inherit; color: var(--muted);
}
.class-date-input:hover, .class-date-input:focus { border-color: var(--line); background: var(--bg); outline: none; }

/* ---------------------------------------------------------------- scope calendar (module detail) */

.scope-block {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff;
}
.scope-block.selectable { cursor: pointer; transition: border-color .15s ease; }
.scope-block.selectable:hover { border-color: var(--accent); }
.scope-block.selected { border-color: var(--accent); background: var(--accent-light); }

.module-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.module-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.module-title { font-weight: 700; font-size: 15.5px; color: var(--text); line-height: 1.4; }
.module-meta { font-size: 13px; color: var(--muted); }
.module-summary { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.module-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; gap: 10px; }
.price { font-size: 19px; font-weight: 800; color: var(--accent-dark); }
.price small { font-size: 12px; font-weight: 600; color: var(--muted); margin-inline-start: 4px; }

.pill {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.pill-exam { background: #fdf1e3; color: #9a5b00; }
.pill-live { background: #fbecea; color: var(--red); }
.pill-ok { background: var(--accent-light); color: var(--accent-dark); }
.pill-wait { background: var(--amber-bg); color: var(--amber); }
.pill-grey { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- lists / tables */

.list-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-title { font-weight: 600; font-size: 14.5px; }
.list-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: start; background: var(--bg); color: var(--muted); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .03em; padding: 11px 15px; font-weight: 700;
}
td { padding: 12px 15px; border-top: 1px solid var(--line); }
/* Admin and Teach tables are wider than a phone. `overflow: hidden` clipped the
   right-hand columns away with no way to reach them; letting the wrapper scroll
   on its own axis keeps the page itself from scrolling sideways. */
.table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.table-wrap table { min-width: 560px; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px;
}
.stat .n { font-size: 25px; font-weight: 800; color: var(--navy); }
.stat .l { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.empty { text-align: center; padding: 46px 20px; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- payment */

.pay-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 560px) { .pay-methods { grid-template-columns: 1fr; } }
.pay-option {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 15px;
  background: #fff; text-align: start; font-size: 14px; font-weight: 600; color: var(--navy);
}
.pay-option.selected { border-color: var(--accent); background: var(--accent-light); }
.pay-option small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 3px; }

.pay-details {
  background: var(--sand); border: 1px dashed #cfc7b5; border-radius: 10px;
  padding: 16px; margin: 16px 0; font-size: 14px; line-height: 1.7;
}
.pay-account { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--navy); direction: ltr; display: inline-block; }

/* ---------------------------------------------------------------- report */

.note-card { border-inline-start: 4px solid var(--accent); background: #fff; border-radius: 0 10px 10px 0; padding: 14px 16px; border: 1px solid var(--line); }
html[dir="rtl"] .note-card { border-radius: 10px 0 0 10px; }
.note-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.stars { color: #d99e00; letter-spacing: 1px; }

.attend-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; margin-inline-end: 7px; }
.dot-present { background: var(--accent); }
.dot-absent { background: var(--red); }
.dot-late { background: var(--amber); }

/* ---------------------------------------------------------------- modal */

.backdrop {
  position: fixed; inset: 0; background: rgba(12, 28, 46, .5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: #fff; border-radius: 14px; padding: 24px; width: 480px; max-width: 100%;
  max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(10, 25, 45, .28);
}

.spinner { text-align: center; padding: 60px; color: var(--muted); }

/* ---------------------------------------------------------------- role picker */

.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .role-grid { grid-template-columns: 1fr; } }

.role-card {
  border: 1.5px solid var(--line); border-radius: 11px; padding: 14px 13px;
  background: #fff; text-align: start; display: flex; flex-direction: column; gap: 4px;
}
.role-card.selected { border-color: var(--accent); background: var(--accent-light); }
.role-icon { font-size: 22px; }
.role-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.role-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* explanation panel — used for the sub-account concept at signup */
.explain-box {
  background: var(--sand); border: 1px solid #e4ddcd; border-radius: 11px;
  padding: 14px 16px; margin: 18px 0 14px;
}
.explain-box h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--navy); }
.explain-box p { margin: 0; font-size: 13px; line-height: 1.65; color: #4a4738; }

.child-block {
  border: 1px solid var(--line); border-radius: 11px; padding: 14px;
  margin-bottom: 12px; background: #fcfdfe;
}

/* generated credentials, shown once */
.cred-card {
  border: 1.5px solid var(--accent); border-radius: 11px; padding: 14px 16px;
  margin-bottom: 10px; background: var(--accent-light);
}
.cred-name { font-weight: 700; font-size: 14.5px; color: var(--navy); margin-bottom: 8px; }
.cred-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 3px 0; }
.cred-row span { color: #24443a; }
.cred-row code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 14px; font-weight: 700;
  background: #fff; border: 1px solid #b9ded1; border-radius: 6px; padding: 3px 9px;
  color: var(--navy); direction: ltr;
}

/* ---------------------------------------------------------------- teacher profile */

.teacher-head { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 620px) { .teacher-head { flex-direction: column; } }

.teacher-avatar {
  width: 68px; height: 68px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 800;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.chip.on { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }

.link { color: var(--accent-dark); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- search */

.search-input {
  flex: 1; min-width: 220px; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 14px; font-family: inherit; background: #fff;
}
.search-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- progress bar */

.progress-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }

/* ==========================================================================
   Small screens
   --------------------------------------------------------------------------
   Most families reach Delta from a phone, so this is the common case rather
   than an afterthought. The page used to overflow horizontally — which is why
   a phone rendered it zoomed out — and the cause was the top bar: brand, nav,
   language switch and account controls all sat on one non-wrapping flex row
   far wider than 360px. Everything below either wraps that row, gives a wide
   child its own scroll axis, or brings oversized type down to phone scale.
   ========================================================================== */

/* ---- tablets and small laptops ---- */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 10px 16px; gap: 10px 12px; }

  /* Brand and account controls share the first row; navigation drops beneath
     them and scrolls sideways on its own, so links stay reachable without a
     hamburger menu (which would need markup, and so a rebuild, to work). */
  .brand { order: 1; }
  .topbar-right { order: 2; margin-inline-start: auto; }
  .nav-links {
    order: 3; width: 100%; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links:empty { display: none; }
  .nav-link { white-space: nowrap; flex-shrink: 0; }

  .page { padding: 22px 18px; }
  .hero { padding: 58px 20px 64px; }
  .hero h1 { font-size: 33px; }
  .explorers { padding: 44px 18px; }
}

/* ---- phones ---- */
@media (max-width: 640px) {
  .page { padding: 18px 14px; }
  .page-title { font-size: 21px; }
  .card-pad { padding: 16px; }

  .hero { padding: 44px 18px 50px; }
  .hero h1 { font-size: 27px; line-height: 1.25; }
  .hero p { font-size: 15px; margin-bottom: 24px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .study-band { min-height: 280px; }
  .study-band-content { padding: 32px 18px; }
  .study-band-content h2 { font-size: 21px; }
  .study-band-content p { font-size: 14.5px; }

  .explorers { padding: 36px 14px; }
  .explorers-videos { gap: 8px; }
  .explorers-videos video { height: 168px; }
  .explorers-quote blockquote { font-size: 19px; }

  /* Two inputs side by side leaves neither usable at this width. */
  .field-row { flex-wrap: wrap; }
  .field-row > * { flex: 1 1 100%; }

  /* These rows are fine wide, but their two halves collide on a phone. */
  .row-between, .module-foot, .note-head, .cred-row { flex-wrap: wrap; }

  .filters { gap: 8px; }
  .filters select, .search-input { flex: 1 1 100%; min-width: 0; }

  .section-title { margin-top: 20px; }
  .stat { min-width: 120px; padding: 13px 14px; }
  .stat .n { font-size: 22px; }

  .backdrop { padding: 12px; align-items: flex-start; padding-top: 24px; }
  .modal { padding: 18px; max-height: 92vh; }

  .footer { padding: 22px 16px; }

  /* The account controls need a row of their own here. Sharing one with the
     brand squeezed "Créer un compte" off the edge of the screen. Language
     choice sits at the start, the sign-in pair at the end, and if even that is
     too wide the pair wraps below rather than being clipped. */
  .topbar-right {
    order: 2; width: 100%; margin-inline-start: 0;
    flex-wrap: wrap; justify-content: space-between; gap: 8px;
  }
  .topbar-right .btn { flex: 1 1 auto; }
}

/* ---- narrow phones ---- */
@media (max-width: 430px) {
  .topbar { padding: 9px 12px; }
  .brand { font-size: 15.5px; gap: 8px; }
  .brand-mark { width: 28px; height: 28px; font-size: 13.5px; }
  .brand-mark-img { height: 21px; }
  /* On a narrow phone the wordmark is what pushes the navigation off the row,
     and the mark alone is enough once someone is already on the site. */
  .brand-full { display: none; }

  /* The switcher spells out العربية / Français / English, which is wide. Tighten
     it rather than abbreviate — a language you can't read isn't a useful label. */
  .lang-switch { padding: 2px; }
  .lang-btn { padding: 4px 8px; font-size: 11.5px; }

  /* Keep the avatar and the sign-out button; the full name is the part that
     can be dropped without losing anything the user needs to act on. */
  .user-chip { gap: 6px; padding: 4px; }
  .user-chip > span { display: none; }

  .btn { padding: 10px 15px; font-size: 14px; }
  .btn-sm { padding: 6px 10px; font-size: 12.5px; }

  .hero h1 { font-size: 24px; }
  .explorers-videos { grid-template-columns: 1fr; }
  .explorers-videos video { height: 200px; }

  /* Account numbers and generated passwords are long unbroken strings. */
  .pay-account, .cred-row code { word-break: break-all; }
}

/* ==========================================================================
   Subject categories — the catalogue's front door
   --------------------------------------------------------------------------
   Mirrors the mobile home screen: a film per discipline, its name and count
   underneath rather than over the top, so nothing obscures the footage and the
   words stay properly legible. The poster still paints immediately while the
   clip streams in behind it.
   ========================================================================== */

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-tile { display: block; text-align: start; background: none; border: none; padding: 0; width: 100%; }
.cat-media {
  position: relative; height: 190px; border-radius: var(--radius);
  overflow: hidden; background: var(--navy);
}
.cat-media video, .cat-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cat-media img { transition: opacity .35s ease; }
.cat-tile:hover .cat-media { box-shadow: var(--shadow); }
.cat-head { display: flex; align-items: flex-start; gap: 10px; margin-top: 11px; }
.cat-name { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.3; flex: 1; }
.cat-count {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-light); color: var(--accent-dark); white-space: nowrap;
}

/* Long generated schedules stay short until the teacher asks for the term. */
.class-group { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px 14px; }
.class-group + .class-group { margin-top: 12px; }
.class-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.class-group-title { font-weight: 700; font-size: 15px; color: var(--navy); }
.class-group-meta { font-size: 12.5px; color: var(--muted); }
.collapse-toggle {
  border: none; background: transparent; color: var(--accent-dark);
  font-size: 13px; font-weight: 700; padding: 7px 0; margin-top: 6px;
}
.collapse-toggle:hover { text-decoration: underline; }

@media (max-width: 940px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; gap: 18px; }
  .cat-media { height: 172px; }
  .cat-name { font-size: 16.5px; }
}

/* A headline number that opens the people behind it. Reads as pressable —
   a count you can't interrogate is just decoration. */
.stat-link { cursor: pointer; text-align: start; font: inherit; color: inherit; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.stat-link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-link .l::after { content: " ›"; color: var(--accent-dark); font-weight: 700; }

/* One teacher opened up: their programmes, who is in them, what has been paid. */
.drill { background: var(--bg); border-top: 1px solid var(--line); padding: 14px 16px; }
.drill-mod { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.drill-mod + .drill-mod { margin-top: 10px; }
.drill-figs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; font-size: 13px; }
.drill-fig b { display: block; font-size: 16px; color: var(--navy); font-weight: 800; }
.drill-fig span { color: var(--muted); font-size: 12px; }