/* School lessons (school/school.js): same look as the "Who is learning today?" screens. */
#schoolScreen {
  position: fixed; inset: 0; z-index: 2000; overflow-y: auto; padding: 24px 16px 40px;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(88,166,255,.28), transparent 62%),
    radial-gradient(760px 520px at 100% 0%, rgba(181,140,255,.20), transparent 58%),
    #17121f;
}
#schoolScreen[hidden] { display: none; }
.sch-inner { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.sch-logo img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.sch-inner h1 { margin: 6px 0 4px; font-size: min(2rem, 8vw); }
.sch-crumbs { margin: 2px 0 6px; color: var(--text-dim); font-size: .85rem; }
.sch-cards { margin-top: 8px; }
.sch-card { padding: 24px 16px 20px; }
.sch-card.sch-off { opacity: .6; cursor: default; }
.sch-card.sch-off:hover { transform: none; }
.sch-ar { font-family: inherit; }
.sch-soon, .sch-count { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.sch-soon { background: rgba(255,194,71,.2); color: #ffc247; }
.sch-count { background: rgba(37,211,102,.18); color: #25d366; }

.sch-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sch-chapter { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--glass-border); background: rgba(36,27,48,.86); color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.sch-chapter:hover, .sch-chapter:focus-visible { border-color: #58a6ff; outline: none; }
.sch-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(88,166,255,.2); font-weight: 800; }
.sch-chapter-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sch-chapter-text small { color: var(--text-dim); }
.sch-draft { font-size: .72rem; font-weight: 800; color: #ffc247; background: rgba(255,194,71,.16); padding: 3px 10px; border-radius: 999px; }
.sch-best { font-weight: 800; color: #25d366; }
.sch-draft-note { margin: 4px auto 8px; padding: 6px 12px; max-width: 520px; border-radius: 12px; background: rgba(255,194,71,.16); color: #ffc247; font-size: .85rem; font-weight: 700; }

.sch-tabs { justify-content: center; margin: 8px 0 14px; }
.sch-body { text-align: right; line-height: 1.9; font-size: 1.08rem; padding: 4px 4px 14px; }
.sch-h { margin: 18px 0 6px; color: #8ec5ff; font-size: 1.2rem; }
.sch-def, .sch-ex, .sch-note { margin: 10px 0; padding: 12px 14px; border-radius: 14px; }
.sch-def { background: rgba(88,166,255,.14); border-inline-start: 4px solid #58a6ff; }
.sch-ex { background: rgba(37,211,102,.12); border-inline-start: 4px solid #25d366; }
.sch-note { background: rgba(255,194,71,.14); border-inline-start: 4px solid #ffc247; }
.sch-tag { display: inline-block; margin-inline-end: 8px; padding: 1px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .8rem; font-weight: 800; }
.sch-f { margin: 10px auto; padding: 10px 16px; max-width: max-content; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 1.25rem; font-weight: 800; text-align: center; letter-spacing: .02em; }

.sch-q, .sch-exo { margin: 12px 0; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--glass-border); background: rgba(36,27,48,.7); }
.sch-q.ok { border-color: #25d366; }
.sch-q.bad { border-color: #ff6b57; }
.sch-opt { display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; }
.sch-why { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: .98rem; }
.sch-sol { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(37,211,102,.12); }
.sch-sol p { margin: 4px 0; }
.sch-score { margin-top: 12px; }
.sch-unit { color: #8ec5ff !important; font-weight: 700; }
.sch-unit-head { margin: 18px 0 2px; padding: 10px 14px; border-radius: 14px; background: rgba(88,166,255,.14); border-inline-start: 4px solid #58a6ff; color: #cfe6ff; font-size: 1.02rem; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.sch-unit-head:first-child { margin-top: 4px; }
.sch-unit-head small { color: var(--text-dim); font-weight: 400; font-size: .8rem; }

/* pictures, experiments, "name the parts" exercise */
.sch-fig { margin: 14px 0; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); }
.sch-media { display: flex; justify-content: center; background: #fff; border-radius: 12px; overflow: hidden; }
.sch-media img { display: block; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.sch-media-svg { padding: 6px; } .sch-media-svg svg { display: block; width: 100%; height: auto; max-height: 420px; }
.sch-fig figcaption { margin-top: 8px; font-size: .92rem; line-height: 1.6; color: var(--text); }
.sch-credit { display: block; margin-top: 4px; font-size: .72rem; color: var(--text-dim); direction: ltr; text-align: start; }
.sch-credit a { color: inherit; text-decoration: underline; }
.sch-exp { margin: 14px 0; padding: 12px 14px; border-radius: 16px; background: rgba(120,200,140,.12); border-inline-start: 4px solid #6cc58b; line-height: 1.7; }
.sch-exp h4 { margin: 4px 0 6px; } .sch-exp ol { margin: 4px 0 8px; padding-inline-start: 22px; } .sch-exp p { margin: 4px 0; }
.sch-label { margin: 10px 0 14px; }
.sch-label-pic { position: relative; width: 100%; max-width: 560px; margin: 0 auto; direction: ltr; }
.sch-label-pic .sch-media { display: block; }
.sch-pin { position: absolute; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: #e5484d; color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.sch-label-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sch-lab-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--glass-border); }
.sch-lab-row b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #e5484d; color: #fff; display: grid; place-items: center; font-size: .85rem; }
.sch-lab-row select { flex: 1; min-width: 0; padding: 8px; border-radius: 10px; font: inherit; background: rgba(36,27,48,.9); color: var(--text); border: 1px solid var(--glass-border); }
.sch-lab-row.ok { border-color: #3fb950; background: rgba(63,185,80,.12); } .sch-lab-row.bad { border-color: #f85149; background: rgba(248,81,73,.1); }
.sch-lab-score { margin-top: 6px; font-weight: 700; }
.sch-label-pic .sch-media-svg { padding: 0; }
/* the back button is at the top of every school page and stays visible while the lesson is scrolled */
.sch-topbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-start; margin: -8px 0 4px; padding: 6px 0; pointer-events: none; }
.sch-top-back { margin-top: 0; pointer-events: auto; background: rgba(23,18,31,.92); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
/* year lock and price screen */
.sch-price { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: rgba(88,166,255,.2); color: #8ec5ff; }
.sch-pay { max-width: 520px; margin: 14px auto 0; padding: 16px; border-radius: 18px; border: 2px solid var(--glass-border); background: rgba(36,27,48,.86); text-align: start; }
.sch-pay-price { text-align: center; font-size: 2.2rem; font-weight: 900; color: #ffd166; }
.sch-pay-price small { display: block; font-size: .85rem; font-weight: 600; color: var(--text-dim); }
.sch-pay ul { margin: 12px 0; padding-inline-start: 20px; line-height: 1.7; }
.sch-pay-note { padding: 10px 12px; border-radius: 12px; background: rgba(255,194,71,.14); line-height: 1.6; }
.sch-pay-btn { display: block; width: 100%; margin-top: 10px; }
/* Arabic school section */
#schoolScreen[dir="rtl"] .sch-topbar { justify-content: flex-start; }
#schoolScreen .sch-chapter, #schoolScreen .sch-exp, #schoolScreen .sch-pay { text-align: start; }

/* YouTube videos in lessons */
.sch-vids { margin: 12px 0; display: grid; gap: 14px; }
.sch-vid { padding: 8px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); }
.sch-vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.sch-vid-frame iframe, .sch-vid-play, .sch-vid-play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.sch-vid-play { padding: 0; cursor: pointer; background: #000; }
.sch-vid-play span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 44px; line-height: 44px; border-radius: 14px; background: #e62117; color: #fff; font-size: 22px; text-align: center; }
.sch-vid-meta { margin-top: 8px; line-height: 1.6; }
.sch-vid-meta b { display: block; }
.sch-vid-meta small { color: var(--text-soft, inherit); opacity: .85; }
.sch-vid-note { margin: 0; font-size: .85rem; opacity: .8; }

/* zoom viewer for pictures, mind maps and boards */
.sch-fig .sch-media { cursor: zoom-in; position: relative; }
.sch-fig .sch-media::after { content: "🔍"; position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: .85rem; pointer-events: none; }
.sch-viewer { overscroll-behavior: contain; touch-action: none; position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.88); display: flex; flex-direction: column; }
.sch-viewer-bar { display: flex; gap: 8px; justify-content: center; padding: 10px; }
.sch-viewer-bar button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font-size: 1.3rem; cursor: pointer; }
.sch-viewer-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.sch-viewer-stage.grab { cursor: grabbing; }
.sch-viewer-inner { background: #fff; border-radius: 10px; transform-origin: center center; flex: none; }
.sch-viewer-inner svg, .sch-viewer-inner img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.sch-viewer-hint { text-align: center; color: rgba(255,255,255,.7); font-size: .8rem; padding: 6px 10px 10px; }