.school-dialog { margin: auto; padding: 0; width: min(860px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid var(--line2); border-radius: var(--r-panel); color: var(--ink); background: var(--bg2); box-shadow: 0 24px 90px #0004; overflow: hidden; }
.school-dialog::backdrop { background: #0009; }
.school-dialog-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 36px); min-height: 0; }
.school-dialog-header { display: flex; gap: var(--s16); justify-content: space-between; align-items: start; flex: none; padding: 24px; border-bottom: 1px solid var(--line); }
.school-dialog-header h2 { font-size: var(--t-title); overflow-wrap: anywhere; }
.school-dialog-header p { color: var(--muted); margin-top: var(--s8); }
.school-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 var(--s24) var(--s24); }
.curriculum-unit { border: 0; margin: 8px 0; border-radius: var(--r-row); background: var(--tint); }
.curriculum-unit > summary { display: flex; align-items: center; gap: var(--s16); min-height: 56px; padding: 16px; list-style: none; cursor: pointer; font-weight: 500; overflow-wrap: anywhere; }
.curriculum-unit > summary::-webkit-details-marker { display: none; }
.curriculum-unit > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 var(--s4) 0 auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.curriculum-unit[open] > summary::after { transform: rotate(225deg); }
.curriculum-stage { margin: var(--s24) 0 var(--s8); color: var(--muted); font: 400 var(--t-mono)/1.6 var(--mono); }
.curriculum-lessons { padding: 0 16px var(--s16) 40px; margin: 0; }
.curriculum-lessons li { padding: var(--s8) 0; color: var(--muted); overflow-wrap: anywhere; }
body:is([data-screen="landing"], [data-screen="classroom"], [data-screen="course"], [data-screen="lesson"]) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body:is([data-screen="landing"], [data-screen="classroom"], [data-screen="course"], [data-screen="lesson"]) .school-room { width: 100%; flex: 1; min-height: 0; overflow: hidden; padding-top: var(--s32); padding-bottom: var(--s32); }
@media(max-width: 639px) {
  .school-dialog-body { padding: 0 var(--s16) var(--s16); }
  body:is([data-screen="landing"], [data-screen="classroom"], [data-screen="course"], [data-screen="lesson"]) .school-room { padding-top: var(--s20); padding-bottom: var(--s20); }
}

.school-dialog-close,.school-dialog-header [data-dialog-close] { flex: none; white-space: nowrap; min-height: var(--control); padding: 8px 16px; border: 1px solid var(--line2); border-radius: var(--r-control); background: var(--tint); color: var(--ink); font-weight: 500; line-height: 1.4; }
.school-dialog-close:hover,.school-dialog-header [data-dialog-close]:hover { border-color: var(--muted); }