/* Proton Roller Coaster — classroom board build.
   Light theme, fixed (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;

  --u:#3b4fd8;        /* U curve            */
  --e:#e07b00;        /* total energy E     */
  --ke:#159a63;       /* kinetic energy     */
  --pe:#6a4bd6;       /* potential energy   */
  --proton:#d92b3f;   /* the proton         */
  --force:#e07b00;    /* force arrow        */
  --eq:#0f8fa8;       /* equilibrium marker */
  --turn:#8b93a8;     /* turning points     */

  --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, 24vw, 400px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "stage side";
  gap:clamp(8px,0.9vw,16px);
  padding:clamp(8px,0.9vw,16px);
}

/* ---------- 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,.7vw,12px) clamp(12px,1.1vw,20px);
  box-shadow:var(--shadow);
}
#topbar h1{
  margin:0;font-size:clamp(19px,1.65vw,30px);letter-spacing:-.015em;font-weight:700;
}
#topbar .sub{
  margin:2px 0 0;color:var(--ink-2);font-size:clamp(12px,.92vw,17px);
}
#topbar .units{color:var(--ink-3);}
.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;
}
.pill #statusMain{font-size:clamp(14px,1.1vw,20px);text-transform:uppercase;letter-spacing:.04em;}
.pill #statusSub{font-size:clamp(11px,.8vw,14px);font-weight:600;opacity:.8;}
.pill-bound{background:#eaf7f1;border-color:#159a63;color:#0d6b45;}
.pill-free {background:#fdf0e6;border-color:#e07b00;color:#a35800;}

/* ---------- stage ---------- */
#stage{
  grid-area:stage;min-width:0;min-height:0;
  display:grid;
  grid-template-rows: 3fr 118px 2fr;
  gap:clamp(8px,0.9vw,16px);
}
.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(4px,.5vw,10px) clamp(6px,.7vw,12px) clamp(4px,.5vw,8px);
}
.panel-head{display:flex;align-items:baseline;gap:10px;padding:2px 6px 2px;flex:0 0 auto;}
.panel-head h2{margin:0;font-size:clamp(13px,1.02vw,19px);font-weight:700;letter-spacing:-.01em;}
.panel-head .hint{color:var(--ink-3);font-size:clamp(11px,.8vw,14px);}
.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;}

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

/* buttons */
.btn{
  -webkit-appearance:none;appearance:none;
  min-height:50px;padding:0 12px;border-radius:12px;
  border:2px solid var(--line);background:#fff;color:var(--ink);
  font:inherit;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  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(--u);border-color:var(--u);color:#fff;}
.btn-primary.playing{background:var(--e);border-color:var(--e);}
.btn-row{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;}
.preset-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.btn.preset{font-size:clamp(14px,1.02vw,19px);}
.btn.preset.sel{background:#eaeefc;border-color:var(--u);color:var(--u);}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  -webkit-appearance:none;appearance:none;
  min-height:44px;padding:0 14px;border-radius:999px;
  border:2px solid var(--line);background:#fff;color:var(--ink-2);
  font:inherit;font-weight:600;font-size:clamp(12px,.88vw,16px);cursor:pointer;
  touch-action:manipulation;user-select:none;
}
.chip.on{background:#eaeefc;border-color:var(--u);color:var(--u);}
.chip::before{content:"○ ";}
.chip.on::before{content:"● ";}

/* sliders */
.slider-row{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px 2px;}
.slider-row label{font-size:clamp(12px,.88vw,16px);color:var(--ink-2);font-weight:600;}
.slider-row output{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(14px,1.05vw,19px);}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;
  margin:0;touch-action:pan-y;
}
input[type=range]:focus{outline:none;}
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:34px;height:34px;border-radius:50%;
  background:var(--u);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);margin-top:-11px;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:var(--u);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}

/* readouts */
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;}
.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(11px,.82vw,15px);font-weight:600;}
.ro .k i{color:var(--ink-3);font-style:normal;font-weight:500;font-size:.88em;}
.ro .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(14px,1.05vw,19px);}
.turn{margin-top:7px;color:var(--ink-2);font-size:clamp(12px,.86vw,16px);font-weight:600;}
.turn b{color:var(--ink);}

.bars{height:96px;}

/* notes */
.notes{padding:0;}
.notes summary{
  list-style:none;cursor:pointer;padding:clamp(10px,.9vw,15px);
  font-weight:700;font-size:clamp(13px,.95vw,17px);min-height:52px;
  display:flex;align-items:center;gap:8px;touch-action:manipulation;
}
.notes summary::-webkit-details-marker{display:none;}
.notes summary::before{content:"▸";color:var(--ink-3);font-size:1.1em;}
.notes[open] summary::before{content:"▾";}
.notes-body{padding:0 clamp(10px,.9vw,15px) clamp(10px,.9vw,15px);
  font-size:clamp(12px,.85vw,15.5px);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:680px){
  #stage{grid-template-rows:3fr 92px 2fr;}
  .bars{height:82px;}
  .btn{min-height:46px;}
  .chip{min-height:42px;}
  .block{padding:8px 9px;}
  input[type=range]{height:38px;}
  .block-title{margin-bottom:4px;}
  .block-title.tight{margin-top:7px;}
  #side{gap:8px;}
}
@media (max-width:1120px){
  #app{grid-template-columns:minmax(0,1fr) 300px;}
}
@media (max-width:900px){
  .readouts{grid-template-columns:1fr;}
}