/* LearnPlay Light Lab 3.0 · responsive, distraction-free science workbench. */
:root{--ll3-text:#e5f6fc;--ll3-aqua:#78efd9;--ll3-gold:#ffdd97;}
.sitebar .grade-picker select{background:#15384e;border:1px solid #497385;border-radius:10px;padding:8px 10px;color:#eafbf7;font-weight:760;min-height:40px}
.grade-picker{display:flex;align-items:center}
.instrument-bar{display:flex;align-items:center;gap:5px;border-top:1px solid #355a71;border-bottom:1px solid #355a71;background:#081b2c}
.instrument-bar .visual-tools{flex:1;min-width:0;border:0;background:transparent}
.timeline-tools{display:flex;gap:4px;align-items:center;padding:6px 8px;overflow-x:auto;flex-shrink:0}
.timeline-tools button,.timeline-tools select{border:1px solid #41687a;min-height:36px;border-radius:9px;color:#e5fcf3;background:#1a4256;font-size:11px;font-weight:800;padding:5px 8px;white-space:nowrap}
.timeline-tools select{background:#193548}
.timeline-tools button[aria-pressed=true],.timeline-tools button:hover{border-color:var(--ll3-aqua);background:#235e60}
.timeline-tools #timeStep{color:#f7e4b2;border-color:#82744f}
.timeline-tools #focusToggle{background:#2b564d;border-color:#6cbdad}
.sky-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;background:radial-gradient(ellipse at center,#16314f,#050f21 85%);touch-action:none;cursor:grab}
.sky-canvas:active{cursor:grabbing}
.sky-canvas[hidden],.sky-hud[hidden],.photon-tools[hidden]{display:none!important}
.sky-hud{position:absolute;top:9px;left:12px;right:12px;z-index:3;pointer-events:none;display:flex;justify-content:space-between;align-items:start;gap:8px}
.sky-hud span{display:block;padding:5px 8px;border-radius:7px;background:#071c30e9;border:1px solid #42758a;color:#e0ffec;font-size:10px;font-weight:850;letter-spacing:.035em}
.sky-hud #skyHudHint{font-weight:650;color:#b4cddd;font-size:10px}
.canvas-box:has(.sky-canvas:not([hidden])) #lightCanvas{visibility:hidden}
.canvas-box:has(.sky-canvas:not([hidden])) .canvas-fade{display:none}
.learning-prompt{padding:10px 12px;border:1px solid #49768a;background:linear-gradient(120deg,#153a4a,#102a3e);border-radius:12px;line-height:1.35}
.learning-prompt span:first-child{font-size:10px;letter-spacing:.08em;color:#a7f0df;font-weight:850}
.learning-prompt p{margin:4px 0;font-size:12px;color:#edf9f7}
#learningEquation{display:block;margin-top:4px;color:#ffdda1;font-weight:850;font-size:13px;font-variant-numeric:tabular-nums}
#learningEquation:empty{display:none}
.photon-tools{padding:10px;border:1px solid #3f687a;border-radius:11px;background:#0f3045}
.photon-tool-label{font-size:12px;font-weight:800;color:#e0f6f4;margin-bottom:8px}
.photon-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.photon-actions button{min-height:39px;padding:6px 5px;border:1px solid #3e7180;border-radius:8px;color:#e5fff7;background:#1b4b59;font-size:11px;font-weight:780}
.photon-actions button:active{background:#317b70}
.photon-actions button:last-child{background:#433440;border-color:#806575}
.photon-graph-toggle{display:flex;align-items:center;gap:7px;margin-top:10px;color:#bfd8e8;font-size:11px;font-weight:760}
.photon-graph-toggle input{width:17px;height:17px;accent-color:#68ead3}
.catalogue-credit{font-size:11px;line-height:1.5;opacity:.9}
/* Focus mode: full viewport laboratory, no endless page scrolling. */
body.light-focus{overflow:hidden;overscroll-behavior:contain}
body.light-focus .sitebar,body.light-focus .intro,body.light-focus .teaching-notes,body.light-focus footer{display:none!important}
body.light-focus .page-shell{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;padding-top:7px;padding-bottom:6px;overflow:hidden}
body.light-focus .mode-strip{flex-shrink:0;padding-bottom:7px}
body.light-focus .experiment{flex:1;min-height:0;overflow:hidden;align-items:stretch;grid-template-columns:minmax(0,1.6fr) minmax(320px,.85fr)}
body.light-focus .visual-card{min-height:0;max-height:none;align-self:stretch;position:relative;display:flex}
body.light-focus .canvas-box{flex:1;min-height:0;max-height:none;aspect-ratio:auto}
body.light-focus .control-card{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#497387 transparent}
body.light-focus .canvas-box:after{display:none}
@media(max-width:1100px){
 .instrument-bar{flex-wrap:wrap;gap:0}
 .instrument-bar .visual-tools{width:100%;flex-basis:100%}
 .timeline-tools{width:100%;justify-content:space-between;border-top:1px solid #2c5065}
 .timeline-tools button{flex:1}
}
@media(max-width:760px){
 .sitebar{gap:7px;flex-wrap:wrap}
 .sitebar .grade-picker select{min-height:37px;padding:6px;font-size:11px}
 .site-actions{gap:8px}
 .instrument-bar{flex-wrap:wrap}
 .instrument-bar .visual-tools{min-width:100%;flex-basis:100%;padding:6px}
 .timeline-tools{padding:4px 7px;gap:5px;justify-content:space-between}
 .timeline-tools button,.timeline-tools select{min-height:34px;font-size:10px;padding:5px 7px}
 .visual-card{max-height:min(54vh,445px)}
 .visual-top{min-height:39px}
 .canvas-box{max-height:28vh}
 .sky-hud #skyHudHint{max-width:43%;text-align:right;font-size:9px}
 .sky-hud span{font-size:9px}
 .learning-prompt{padding:8px}
 .learning-prompt p{font-size:11px}
 .photon-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
 .photon-actions button{font-size:10px;min-height:38px}
 body.light-focus .experiment{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(220px,48%) minmax(0,1fr);gap:6px}
 body.light-focus .visual-card{position:relative;top:auto;max-height:none;min-height:0}
 body.light-focus .visual-top{min-height:35px}
 body.light-focus .visual-bottom{min-height:0;padding:5px 8px}
 body.light-focus .canvas-box{max-height:none;min-height:0;flex:1}
 body.light-focus .control-card{padding:9px;gap:7px;max-height:none}
 body.light-focus .mode-strip button{min-height:36px}
 body.light-focus .learning-prompt{padding:6px 8px}
 body.light-focus .mode-description{font-size:11px}
}
@media(max-width:440px){
 .sitebar .return{display:none}
 .grade-picker select{max-width:100px}
 .sky-hud{left:7px;right:7px;top:6px}
 .sky-hud #skyHudTitle{max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .timeline-tools{gap:3px}
 .timeline-tools button,.timeline-tools select{font-size:9.5px;padding:4px 5px}
 .photon-actions button{font-size:9px;padding:4px}
 body.light-focus .experiment{grid-template-rows:minmax(160px,43%) minmax(0,1fr)}
}
@media(max-height:700px) and (max-width:760px){
 body.light-focus .experiment{grid-template-rows:minmax(140px,39%) minmax(0,1fr)}
 body.light-focus .visual-bottom{display:none}
 body.light-focus .learning-prompt p{margin:2px 0}
}
@media(prefers-reduced-motion:reduce){body.light-focus *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.time-readout{color:#a9cad5;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
body[data-light-mode="optics"] #lightCanvas{touch-action:none;cursor:crosshair}
@media(max-width:760px){.time-readout{font-size:9px}.timeline-tools{flex-wrap:nowrap}}
@media(max-width:440px){.time-readout{display:none}}

.sky-canvas:focus-visible{outline:3px solid #ffe09e;outline-offset:-3px}

@media(prefers-reduced-motion:reduce){.timeline-tools #timePause:disabled{opacity:.65;cursor:default}}