/* Shared calm presentation and teacher controls for all three classroom tools. */
body.calm-tool{margin:0;overflow:hidden;height:100svh;background:#dcecf0;color:#17394a;font-family:system-ui,-apple-system,sans-serif}
body.calm-tool .wrap{width:100%;margin:0;max-width:none}
body.calm-tool main{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body.calm-tool header{display:flex!important;position:fixed;inset:12px 14px auto;width:auto;z-index:2;align-items:center;justify-content:space-between;gap:16px;padding:0;margin:0;pointer-events:none}
body.calm-tool header a{pointer-events:auto}
body.calm-tool header :is(.brand,.site-logo){width:clamp(160px,23vw,260px);flex:0 1 auto;max-width:45vw}
body.calm-tool header img{display:block;width:100%;height:auto}
body.calm-tool header a:last-child{font:16px/1.4 system-ui,sans-serif;text-decoration:none;color:#17394a;background:#fffffff0;border:1px solid #a7bfbc;border-radius:22px;padding:10px 16px;min-height:48px}
body.calm-tool .lesson{display:block;margin:0;padding:0}
body.calm-tool .calm-scene{position:fixed;inset:0;width:100%;height:100svh;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#dcecf0}
body.calm-tool .calm-scene>.scene{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;margin:0;background:transparent}
body.calm-tool #gear{position:fixed;right:14px;bottom:14px;width:48px;height:48px;min-height:48px;padding:0;font-size:22px;border:1px solid #a7bfbc;border-radius:22px;background:#ffffffe8;color:#17394a;z-index:5;cursor:pointer}
body.calm-tool #teacher{position:fixed;right:16px;bottom:74px;width:min(360px,calc(100vw - 32px));max-height:calc(100svh - 100px);overflow:auto;padding:18px;border:0;border-radius:20px;background:#fffffff5;color:#17394a;box-shadow:0 8px 28px #0004;z-index:4}
body.calm-tool #teacher:not([hidden]){display:block!important}
body.calm-tool #teacher h2{margin:0 0 12px;font-size:20px}
body.calm-tool #teacher h3{font-size:17px;margin:12px 0 8px}
body.calm-tool #teacher p{font-size:14px;line-height:1.5}
body.calm-tool #teacher :is(input,select){width:100%;min-height:36px}
body.calm-tool #teacher :is(button,select){min-height:48px;font:inherit}
body.calm-tool #teacher .scene-choices{margin:0 0 14px;gap:6px}
body.calm-tool #teacher .exercise-settings{display:block!important;margin-top:14px}
body.calm-tool #teacher .scene-info{display:flex;gap:10px;justify-content:space-between;font-size:13px;margin:12px 0}
body.calm-tool #close{width:100%;min-height:48px;margin-top:14px;padding:10px 16px;border:1px solid #a7bfbc;border-radius:22px;background:#fffdf6;color:#17394a;font-weight:700}
body.calm-tool :is(button,a,input,select):focus-visible{outline:3px solid #c78e24;outline-offset:4px}
body.calm-tool .calm-controls{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;white-space:nowrap}
body.calm-tool .calm-controls button{width:auto;min-height:48px;margin:0;padding:10px 16px;border:1px solid #a7bfbc;border-radius:22px;background:#fffffff0;color:#17394a;font:750 20px/1.4 system-ui,sans-serif;box-shadow:0 6px 22px #0002}
body.calm-tool #status{position:fixed;left:50%;top:12px;bottom:auto;transform:translateX(-50%);z-index:2;width:max-content;max-width:40vw;min-height:0;margin:0;padding:7px 14px;border-radius:18px;background:#ffffffe8;color:#17394a;font:14px/1.4 system-ui,sans-serif;text-align:center}
body.calm-tool #teacher .quiet-readout{margin-top:12px}
body.calm-tool .calm-footer{display:none}
[hidden]{display:none!important}
@media(max-width:650px){body.calm-tool header{inset:8px 10px auto}body.calm-tool header :is(.brand,.site-logo){width:160px}body.calm-tool header a:last-child{font-size:14px;padding:8px 12px}body.calm-tool #status{top:auto;bottom:90px;max-width:85vw}body.calm-tool .calm-controls{left:12px;bottom:24px;transform:none}body.calm-tool .calm-controls button{font-size:17px;padding:10px 14px}}
@media(max-width:650px){body.calm-tool .calm-controls{max-width:calc(100vw - 84px)}body.calm-tool .calm-controls button{white-space:normal}body.calm-tool #status{bottom:112px}}
