.classroom-sorting{min-width:0;margin:20px 0;padding:24px;border:1px solid var(--border,#665237);border-radius:12px;background:var(--panel,#0e1118);color:var(--text,#eee4cc);overflow-wrap:anywhere}
.classroom-sorting>header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.classroom-sorting h2{margin:0;font-size:clamp(22px,3vw,30px)}
.classroom-sorting-fullscreen{position:fixed;inset:0;z-index:var(--z-modal,1000);box-sizing:border-box;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.classroom-sorting-fullscreen::backdrop{background:var(--panel,#0e1118)}
.classroom-sorting-fullscreen>header,.classroom-sorting-fullscreen>.classroom-sorting-stage,.classroom-sorting-fullscreen>.classroom-sorting-controls{max-width:1200px;margin-inline:auto}
.classroom-sorting-fullscreen .classroom-sorting-stage{margin-top:12px;padding:12px;border:0}
.classroom-sorting-fullscreen .classroom-sorting-controls{margin-top:12px;padding-top:12px;text-align:center}
.classroom-sorting h3{margin:0 0 16px;font-size:clamp(22px,3vw,32px)}
.classroom-sorting p{margin:12px 0;line-height:1.5}
.classroom-sorting button{min-height:48px;white-space:normal;font:inherit}
.classroom-sorting :focus-visible{outline:3px solid var(--gold,#e6b85f);outline-offset:4px}
.classroom-sorting-stage{min-width:0;margin-top:24px;padding:24px;border:1px solid var(--border,#665237);border-radius:12px;text-align:center}
.classroom-sorting .sorting-video-cinematic{display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:12px;min-width:0;height:auto;min-height:0;padding:0}
.classroom-sorting .sorting-faculty-video{display:block;width:100%;height:min(60vh,640px);height:min(60dvh,640px);min-height:0;object-fit:contain;background:var(--panel,#0e1118)}
.classroom-sorting .sorting-video-actions,.classroom-sorting-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.classroom-sorting .sorting-video-actions button{padding:12px 20px;border:1px solid var(--border,#665237);border-radius:8px;background:var(--panel,#0e1118);color:var(--text,#eee4cc);cursor:pointer}
.classroom-sorting button:disabled{opacity:.55;cursor:wait}
.classroom-sorting-result img{display:block;width:min(100%,480px);height:min(50vh,480px);height:min(50dvh,480px);object-fit:contain;margin:0 auto}
.classroom-sorting-result h4{margin:12px 0;font-size:clamp(28px,4vw,44px);color:var(--gold,#e6b85f)}
.classroom-sorting-controls{margin-top:24px;border-top:1px solid var(--border,#665237);padding-top:24px}
.classroom-sorting-controls ul{margin:0;padding:0;list-style:none;max-height:240px;overflow-y:auto;overscroll-behavior:contain}
.classroom-sorting-controls li{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 4px;border-bottom:1px solid var(--border,#665237)}
.classroom-sorting-controls small,.classroom-sorting-note{color:var(--muted,#bbb3a0)}
@media(max-width:600px){.classroom-sorting,.classroom-sorting-stage{padding:16px}.classroom-sorting .sorting-video-actions button,.classroom-sorting-actions button{flex:1 1 100%}}
/* The shared ceremony reserves room for controls; only the media area shrinks. */
.classroom-sorting-fullscreen[open]{display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.classroom-sorting-fullscreen[open]>header{width:100%;flex:0 0 auto;gap:8px 16px}
.classroom-sorting-fullscreen[open]>header h2{font-size:clamp(18px,2.4vw,26px)}
.classroom-sorting-fullscreen[open]>header p,.classroom-sorting-fullscreen[open] .sorting-video-note,.classroom-sorting-fullscreen[open] .classroom-sorting-note{display:none}
.classroom-sorting-fullscreen[open]>.classroom-sorting-stage{display:flex;flex:1 1 0;flex-direction:column;min-height:0;width:100%;margin-top:0;padding:4px;overflow-y:auto;overscroll-behavior:contain}
.classroom-sorting-fullscreen[open] .classroom-sorting-stage>h3{flex:0 0 auto;margin:0 0 8px;font-size:clamp(20px,2.8vw,30px)}
.classroom-sorting-fullscreen[open] .sorting-video-cinematic{display:flex;flex:1 1 0;flex-direction:column;min-height:0;gap:8px;overflow-y:auto;overscroll-behavior:contain}
.classroom-sorting-fullscreen[open] .sorting-faculty-video{flex:1 1 0;height:0;min-height:0;max-height:none;object-fit:contain}
.classroom-sorting-fullscreen[open] .sorting-video-actions{flex:0 0 auto;gap:8px}
.classroom-sorting-fullscreen[open] .sorting-video-actions button{margin:0;padding:8px 16px;min-height:48px}
.classroom-sorting-fullscreen[open]>.classroom-sorting-controls{flex:0 0 auto;width:100%;margin-top:0;padding-top:8px}
.classroom-sorting-fullscreen[open]>.classroom-sorting-controls>p{margin:0 0 8px;line-height:1.3}
.classroom-sorting-fullscreen[open] .classroom-sorting-result{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.classroom-sorting-fullscreen[open] .classroom-sorting-result img{flex:1 1 0;height:0;min-height:0;max-height:none;width:min(100%,480px);object-fit:contain}
.classroom-sorting-fullscreen[open] .classroom-sorting-result h4{flex:0 0 auto;margin:8px 0;font-size:clamp(24px,3.5vw,38px)}
.classroom-sorting-fullscreen[open] .classroom-sorting-result p{flex:0 0 auto;margin:4px 0}
.classroom-sorting-fullscreen[open] .enrollment-error{flex:0 0 auto;margin:4px 0}
.classroom-sorting-fullscreen[open]>[role=alert]{flex:0 1 auto;min-height:0;max-height:25vh;max-height:25dvh;margin:0;overflow-y:auto;overscroll-behavior:contain}
.classroom-sorting-fullscreen[open]:not(:has(>.classroom-sorting-stage)){overflow-y:auto}
@media(max-width:600px){.classroom-sorting-fullscreen[open]{gap:6px;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.classroom-sorting-fullscreen[open] .sorting-video-actions button{flex:1 1 140px}.classroom-sorting-fullscreen[open]>header h2{font-size:18px}}
@media(prefers-reduced-motion:no-preference){.classroom-sorting-result{animation:classroom-sorting-reveal .4s ease-out both}}
@keyframes classroom-sorting-reveal{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}