/* Sack on a carpet dragged onto a rougher floor. Classroom board build.
   Light theme, fixed (the page is embedded in a lecture app iframe). */

:root{
  --bg:#f4f6fa;
  --panel:#ffffff;
  --ink:#131a2a;
  --ink-2:#4a5670;
  --ink-3:#77839c;
  --line:#dfe4ee;
  --line-2:#eef1f7;

  --f1:#2f6fd0;         /* smooth floor mu1, and w1 / f1        */
  --f2:#d9662b;         /* rough floor mu2, and w2 / f2         */
  --pull:#6a4bd6;       /* pull force / rope                    */
  --cm:#d92b3f;         /* centre of mass marker                */
  --ok:#159a63;         /* work / area                          */
  --crit:#e07b00;

  --r:14px;
  --shadow:0 1px 2px rgba(19,26,42,.06), 0 6px 18px rgba(19,26,42,.06);
  --fs: clamp(14px, 0.95vw, 19px);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs);
  line-height:1.35;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
  touch-action:manipulation;
}

#app{
  height:100%;
  display:grid;
  grid-template-columns: minmax(0,1fr) clamp(300px, 23vw, 390px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "stage side";
  gap:clamp(8px,0.8vw,14px);
  padding:clamp(8px,0.8vw,14px);
}

/* ---------- top bar ---------- */
#topbar{
  grid-area:top;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(6px,.6vw,11px) clamp(12px,1.1vw,20px);
  box-shadow:var(--shadow);
}
#topbar h1{margin:0;font-size:clamp(18px,1.5vw,28px);letter-spacing:-.015em;font-weight:700;}
#topbar .sub{margin:2px 0 0;color:var(--ink-2);font-size:clamp(11px,.88vw,16px);}
#topbar .sub b{color:var(--ink);}
.pill{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
  padding:6px clamp(10px,1vw,18px);border-radius:999px;border:2px solid;
  font-weight:700;line-height:1.15;text-align:right;min-width:min(28vw,244px);
}
.pill #statusMain{font-size:clamp(14px,1.12vw,21px);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.pill #statusSub{font-size:clamp(10px,.76vw,13.5px);font-weight:600;opacity:.85;letter-spacing:0;}
.pill-ok  {background:#eaf7f1;border-color:#159a63;color:#0d6b45;}
.pill-run {background:#f0edfc;border-color:#6a4bd6;color:#4a32a8;}

/* ---------- stage ---------- */
#stage{
  grid-area:stage;min-width:0;min-height:0;
  display:flex;flex-direction:column;gap:clamp(6px,.7vw,12px);
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:0;min-width:0;
  padding:clamp(3px,.4vw,8px) clamp(6px,.7vw,12px) clamp(4px,.5vw,8px);
}
.panel.scene{flex:3 1 0;}
.panel.graph{flex:2 1 0;}
.panel-head{display:flex;align-items:baseline;gap:10px;padding:2px 4px;flex:0 0 auto;min-width:0;}
.panel-head h2{margin:0;font-size:clamp(12px,.98vw,18px);font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.panel-head .hint{color:var(--ink-3);font-size:clamp(10px,.76vw,13.5px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.panel-head .hint b{color:var(--cm);}
.canvas-wrap{position:relative;flex:1 1 auto;min-height:0;min-width:0;}
.canvas-wrap>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
#cScene{cursor:grab;}
#cScene.grabbing{cursor:grabbing;}

/* ---------- side panel ---------- */
#side{
  grid-area:side;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(7px,0.7vw,11px);padding-right:2px;
}
.block{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(7px,.65vw,12px);flex:0 0 auto;
}
.block-title{
  font-size:clamp(10px,.76vw,13.5px);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}

/* buttons */
.btn{
  -webkit-appearance:none;appearance:none;
  min-height:50px;padding:0 10px;border-radius:12px;
  border:2px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-weight:700;font-size:clamp(12px,.88vw,16px);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  touch-action:manipulation;user-select:none;
  transition:background .12s, border-color .12s, transform .06s;
}
.btn:active{transform:translateY(1px);}
.btn .ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor;}
.btn .ic[hidden]{display:none;}
.btn-primary{background:var(--pull);border-color:var(--pull);color:#fff;}
.btn.on{background:#f0edfc;border-color:var(--pull);color:#4a32a8;}
.btn[disabled]{opacity:.42;cursor:default;pointer-events:none;}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.btn-row3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  -webkit-appearance:none;appearance:none;
  min-height:44px;padding:0 12px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--ink-2);
  font:inherit;font-weight:600;font-size:clamp(11px,.84vw,15px);cursor:pointer;
  touch-action:manipulation;user-select:none;
}
.chip.on{background:#eaeefc;border-color:#3b4fd8;color:#3b4fd8;}
.chip::before{content:"\25CB\a0";}
.chip.on::before{content:"\25CF\a0";}
.chip[disabled]{opacity:.38;cursor:default;pointer-events:none;}

/* sliders */
.slider-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:5px 2px 0;}
.slider-row label{font-size:clamp(11px,.84vw,15px);color:var(--ink-2);font-weight:600;}
.slider-row output{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(12px,.98vw,17px);white-space:nowrap;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;
  margin:0;touch-action:pan-y;display:block;
}
input[type=range]:focus{outline:none;}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(59,79,216,.35);}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:8px;background:var(--line);}
input[type=range]::-moz-range-track{height:12px;border-radius:8px;background:var(--line);}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;
  background:#3b4fd8;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-top:-10px;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:#3b4fd8;
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
#sMu1::-webkit-slider-thumb{background:var(--f1);} #sMu1::-moz-range-thumb{background:var(--f1);}
#sMu2::-webkit-slider-thumb{background:var(--f2);} #sMu2::-moz-range-thumb{background:var(--f2);}
#sS1::-webkit-slider-thumb{background:var(--cm);}  #sS1::-moz-range-thumb{background:var(--cm);}
#sPos::-webkit-slider-thumb{background:var(--pull);} #sPos::-moz-range-thumb{background:var(--pull);}

.pairline{margin-top:6px;font-size:clamp(11px,.84vw,15px);color:var(--ink-2);font-weight:600;}
.pairline b{color:var(--ink);font-variant-numeric:tabular-nums;}

/* readouts */
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;}
.ro{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  border-bottom:1px solid var(--line-2);padding:2px 0;}
.ro .k{color:var(--ink-2);font-size:clamp(10px,.78vw,14px);font-weight:600;}
.ro .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(12px,.94vw,17px);white-space:nowrap;}
.ro .v.ok{color:var(--ok);} .ro .v.f1{color:var(--f1);} .ro .v.f2{color:var(--f2);}

.formula{
  margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#f6f7fb;border:1px solid var(--line);
  color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(11px,.82vw,15px);line-height:1.5;
}
.formula b{color:var(--ok);font-size:1.08em;}
.match{margin-top:6px;font-size:clamp(10px,.76vw,13.5px);color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;}
.match b{color:var(--ink-2);}
.note{
  margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#fdf6ec;border:1px solid #f0dfc4;
  color:#8a5a10;font-size:clamp(10px,.78vw,14px);font-weight:600;
}

/* details blocks */
.notes{padding:0;}
.notes summary{
  list-style:none;cursor:pointer;padding:clamp(9px,.85vw,14px);
  font-weight:700;font-size:clamp(12px,.92vw,16.5px);min-height:52px;
  display:flex;align-items:center;gap:8px;touch-action:manipulation;
}
.notes summary::-webkit-details-marker{display:none;}
.notes summary::before{content:"\25B8";color:var(--ink-3);font-size:1.1em;}
.notes[open] summary::before{content:"\25BE";}
.notes-body{padding:0 clamp(10px,.9vw,15px) clamp(10px,.9vw,15px);
  font-size:clamp(11px,.8vw,15px);color:var(--ink-2);}
.notes-body p{margin:0 0 .7em;}
.notes-body b{color:var(--ink);}
.notes-body .cav{color:var(--ink-3);font-size:.95em;}

/* short / narrow boards */
@media (max-height:760px){
  .btn{min-height:46px;}
  .chip{min-height:40px;padding:0 10px;}
  .block{padding:7px 8px;}
  input[type=range]{height:34px;}
  #side{gap:7px;}
  .notes summary{min-height:46px;padding:9px 11px;}
}
@media (max-width:1180px){#app{grid-template-columns:minmax(0,1fr) 296px;}}
@media (max-width:980px){.readouts{grid-template-columns:1fr;}}