/* Inclined plane mirror — full image. 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;

  --mir:#1f7a99;        /* mirror                   */
  --ok:#159a63;         /* feet ray, visible        */
  --bad:#d92b3f;        /* feet ray, blocked        */
  --crit:#e07b00;       /* limiting case            */
  --head:#3b4fd8;       /* head ray                 */
  --img:#8b93a8;        /* virtual image            */
  --constr:#6a4bd6;     /* construction lines       */

  --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.6vw,29px);letter-spacing:-.015em;font-weight:700;}
#topbar .sub{margin:2px 0 0;color:var(--ink-2);font-size:clamp(12px,.92vw,17px);}
#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(30vw,250px);
}
.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:.85;text-transform:none;letter-spacing:0;}
.pill-ok  {background:#eaf7f1;border-color:#159a63;color:#0d6b45;}
.pill-bad {background:#fdecee;border-color:#d92b3f;color:#a41628;}
.pill-crit{background:#fdf0e6;border-color:#e07b00;color:#a35800;}

/* ---------- stage ---------- */
#stage{grid-area:stage;min-width:0;min-height:0;display:flex;}
.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;flex:1 1 auto;
  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;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;touch-action:none;cursor:grab;}
.canvas-wrap>canvas.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(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;
}

/* 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-primary{background:var(--crit);border-color:var(--crit);color:#fff;}
.btn[disabled]{opacity:.42;cursor:default;pointer-events:none;}
.btn-row{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;margin-top:10px;}
.dmax{margin-top:10px;font-size:clamp(13px,.95vw,17px);color:var(--ink-2);font-weight:600;}
.dmax b{color:var(--crit);font-variant-numeric:tabular-nums;}
.dmax.none b{color:var(--bad);}

/* 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:#3b4fd8;color:#3b4fd8;}
.chip::before{content:"\25CB\a0";}
.chip.on::before{content:"\25CF\a0";}

/* 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;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:34px;height:34px;border-radius:50%;
  background:#3b4fd8;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:#3b4fd8;
  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 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(11px,.82vw,15px);font-weight:600;}
.ro .v{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(13px,1vw,18px);white-space:nowrap;}
.ro .v.ok{color:var(--ok);} .ro .v.bad{color:var(--bad);} .ro .v.crit{color:var(--crit);}
.turn{margin-top:8px;color:var(--ink-2);font-size:clamp(12px,.86vw,16px);font-weight:600;}

/* details blocks */
.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:"\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(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;}
.formula{
  margin:10px 0 4px;padding:9px 11px;border-radius:10px;background:#f6f7fb;border:1px solid var(--line);
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(12px,.88vw,16px);line-height:1.5;
}
.warn{
  margin:8px 0 4px;padding:9px 11px;border-radius:10px;
  background:#fdecee;border:1px solid #f3c2c8;color:#a41628;font-weight:600;
}
.warn[hidden]{display:none;}

/* short / narrow boards */
@media (max-height:660px){
  .btn{min-height:46px;}
  .chip{min-height:42px;}
  .block{padding:8px 9px;}
  input[type=range]{height:38px;}
  #side{gap:8px;}
  .notes summary{min-height:46px;padding:9px 11px;}
}
@media (max-width:1120px){#app{grid-template-columns:minmax(0,1fr) 300px;}}
@media (max-width:900px){.readouts{grid-template-columns:1fr;}}