/* Newton's Laws, Chapter 2 (F = ma): only what this page adds to the lab kit (lab.css) and the unit styles (unit.css). */
#nl2-lab .lab-view canvas:focus{outline:none}
#nl2-lab .lab-view canvas:focus-visible,#nl2-lab .nl2-graphbox canvas:focus-visible{outline:2px solid var(--sim-acc);outline-offset:-2px;border-radius:14px}
#nl2-lab .lab-tools button{min-width:36px;min-height:36px}
#nl2-lab .lab-seg button{min-height:36px}
#nl2-lab .lab-field input[type=range]{min-height:36px;margin:0}
#nl2-lab .lab-chk{min-height:36px;cursor:pointer;line-height:1.3}
#nl2-lab .lab-chk input{width:18px;height:18px;accent-color:var(--acc);flex:0 0 auto}
#nl2-lab .lab-btn{min-height:38px}
#nl2-lab .nl2-note{margin:0}
#nl2-lab .lab-readout dd{white-space:nowrap}
#nl2-lab .lab-hud{max-width:calc(100% - 7rem)}
#nl2-lab .lab-hud sub{font-size:.75em}
#nl2-lab .lab-toast{top:3.6rem}
#nl2-lab .lab-sec ul{padding-left:1.3rem}
#nl2-lab .lab-formula{overflow-wrap:anywhere}
#nl2-lab .lab-src{overflow-wrap:anywhere}
#nl2-lab .nl2-box{display:flex;flex-direction:column;gap:.5rem}
#nl2-lab .nl2-box .lab-small{margin:0}
#nl2-lab .nl2-after{margin:-.4rem 0 1rem}
/* the missions sit under the simulation on wide screens, and after the panel on narrow ones */
#nl2-lab .nl2-main{grid-template-rows:auto 1fr}
#nl2-lab .nl2-main>.lab-view{grid-column:1;grid-row:1}
#nl2-lab .nl2-main>.lab-panel{grid-column:2;grid-row:1 / span 2}
#nl2-lab .nl2-main>.nl2-mbox{grid-column:1;grid-row:2;min-width:0}
#nl2-lab .nl2-mbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem .9rem;display:flex;flex-direction:column;gap:.45rem}
#nl2-lab .nl2-mbox h3{margin:0;font:700 .78rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#nl2-lab .nl2-mbox .lab-progress{margin:0}
#nl2-lab .nl2-mbox .lab-missions{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
#nl2-lab .lab-missions li button{min-height:32px;padding:.25rem .7rem}
#nl2-lab .nl2-main .lab-view{height:min(74vh,660px)}
/* the other stages */
#nl2-lab .nl2-fview{height:min(62vh,480px);min-height:360px}
#nl2-lab .nl2-tview{height:300px;min-height:280px}
#nl2-lab .nl2-tstage .lab-row .lab-btn{flex:1 1 auto;padding:.4rem .55rem;font-size:.82rem}
/* the drag-the-graph box */
#nl2-lab .nl2-graphbox{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:.8rem;align-items:start;margin:.6rem 0 .8rem}
#nl2-lab .nl2-graphbox canvas{display:block;width:100%;height:330px;border-radius:14px;background:#06111a;touch-action:none}
#nl2-lab .nl2-gside{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;display:flex;flex-direction:column;gap:.55rem}
#nl2-lab .nl2-gside .lab-readout{grid-template-columns:1fr}
#nl2-lab .nl2-gside .lab-readout dd{text-align:left;white-space:normal;margin-bottom:.25rem}
#nl2-lab .nl2-gside .lab-small{margin:0}
@media (max-width:860px){
  #nl2-lab .nl2-main{grid-template-rows:none}
  #nl2-lab .nl2-main>.lab-view,#nl2-lab .nl2-main>.lab-panel,#nl2-lab .nl2-main>.nl2-mbox{grid-column:auto;grid-row:auto}
  #nl2-lab .nl2-main .lab-view{height:min(80vh,600px);min-height:520px}
  #nl2-lab .nl2-graphbox{grid-template-columns:1fr}
}
@media (max-width:600px){
  #nl2-lab .lab-hud{font-size:11px}
  #nl2-lab .lab-toast{top:4.6rem;font-size:.8rem;max-width:84%}
  #nl2-lab .nl2-graphbox canvas{height:300px}
}
#nl2-lab .lab-chk sub{font-size:.72em}
#nl2-lab #nl2-fread{grid-template-columns:minmax(0,1fr) auto}