/* Variable refractive index slabs — four cases. 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;

  --ray:#d92b3f;        /* the traced ray                    */
  --exact:#159a63;      /* exact / analytic overlay          */
  --disc:#6a4bd6;       /* discrete N-slice construction     */
  --focus:#e07b00;      /* focus, key answer                 */
  --idx:#23407f;        /* index map deep end                */
  --norm:#8b93a8;       /* normals, construction             */
  --accent:#3b4fd8;

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

*{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(310px, 24vw, 410px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "stage side";
  gap:clamp(7px,0.75vw,13px);
  padding:clamp(7px,0.75vw,13px);
}

/* ---------- 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(5px,.55vw,10px) clamp(11px,1vw,19px);
  box-shadow:var(--shadow);
}
#topbar h1{margin:0;font-size:clamp(17px,1.42vw,27px);letter-spacing:-.015em;font-weight:700;}
#topbar .sub{margin:2px 0 0;color:var(--ink-2);font-size:clamp(11px,.86vw,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,262px);
}
.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;}
.pill-crit{background:#fdf0e6;border-color:#e07b00;color:#a35800;}
.pill-bad {background:#fdecee;border-color:#d92b3f;color:#a41628;}

/* ---------- 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(3px,.4vw,8px) clamp(6px,.65vw,11px) clamp(4px,.5vw,8px);
}
.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;}
.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;}

/* ---------- side panel ---------- */
#side{
  grid-area:side;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(6px,0.65vw,10px);padding-right:2px;
}
.block{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(7px,.6vw,11px);flex:0 0 auto;
}
.block[hidden]{display:none;}
.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;
}

/* case selector */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.case{
  -webkit-appearance:none;appearance:none;
  min-height:58px;padding:6px 8px;border-radius:12px;
  border:2px solid var(--line);background:#fff;color:var(--ink-2);
  font:inherit;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  touch-action:manipulation;user-select:none;
  transition:background .12s,border-color .12s,transform .06s;
}
.case:active{transform:translateY(1px);}
.case .cl{font-weight:700;font-size:clamp(12px,.9vw,16px);color:var(--ink);letter-spacing:-.01em;}
.case .cs{font-size:clamp(9.5px,.72vw,13px);color:var(--ink-3);font-weight:600;line-height:1.2;}
.case.on{background:#eaeefc;border-color:var(--accent);}
.case.on .cl{color:var(--accent);}
.case.on .cs{color:#5566c9;}

/* 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,.86vw,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(--disc);border-color:var(--disc);color:#fff;}
.btn[disabled]{opacity:.42;cursor:default;pointer-events:none;}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.btn-row3{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;}

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

/* sliders */
.slider-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:5px 2px 1px;}
.slider-row label{font-size:clamp(11px,.83vw,15px);color:var(--ink-2);font-weight:600;}
.slider-row output{font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(13px,.98vw,18px);white-space:nowrap;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:42px;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:var(--accent);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:var(--accent);
  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:4px 11px;}
.ro{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  border-bottom:1px solid var(--line-2);padding:2px 0;}
.ro.wide{grid-column:1 / -1;}
.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(--exact);} .ro .v.bad{color:var(--ray);} .ro .v.crit{color:var(--focus);}
.ro .v.key{color:var(--focus);}

.formula{
  margin:8px 0 2px;padding:8px 10px;border-radius:10px;background:#f6f7fb;border:1px solid var(--line);
  color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:clamp(11px,.83vw,15px);line-height:1.5;
}
.formula b{color:var(--focus);}
.invar{
  margin:8px 0 2px;padding:8px 10px;border-radius:10px;
  background:#eaf7f1;border:1px solid #b8e2ce;color:#0d6b45;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:clamp(11px,.85vw,15.5px);line-height:1.45;
}
.warn{
  margin:8px 0 2px;padding:8px 10px;border-radius:10px;
  background:#fdecee;border:1px solid #f3c2c8;color:#a41628;font-weight:600;
  font-size:clamp(10.5px,.8vw,14.5px);
}
.warn[hidden]{display:none;}
.note{margin:7px 0 0;color:var(--ink-3);font-size:clamp(10px,.78vw,14px);}

/* details blocks */
.notes{padding:0;}
.notes summary{
  list-style:none;cursor:pointer;padding:clamp(9px,.8vw,14px);
  font-weight:700;font-size:clamp(12px,.9vw,16px);min-height:50px;
  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(9px,.8vw,14px) clamp(9px,.8vw,14px);
  font-size:clamp(10.5px,.8vw,14.5px);color:var(--ink-2);}
.notes-body p{margin:0 0 .55em;}
.notes-body b{color:var(--ink);}
.notes-body .cav{color:var(--ink-3);font-size:.95em;}
.deriv{margin:0;padding:0;list-style:none;}
.deriv li{
  margin:0 0 5px;padding-left:22px;position:relative;
  font-variant-numeric:tabular-nums;line-height:1.42;
}
.deriv li::before{
  content:counter(li);counter-increment:li;
  position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  background:#eaeefc;color:var(--accent);font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.deriv{counter-reset:li;}
.deriv li b{color:var(--ink);}
.deriv li.key{color:var(--ink);font-weight:700;}
.deriv li.key::before{background:#fdf0e6;color:var(--focus);}

/* short / narrow boards */
@media (max-height:760px){
  .btn{min-height:46px;}
  .chip{min-height:40px;padding:0 11px;}
  .case{min-height:52px;}
  .block{padding:7px 8px;}
  input[type=range]{height:36px;}
  #side{gap:6px;}
  .notes summary{min-height:44px;padding:8px 10px;}
  .slider-row{margin:3px 2px 0;}
}
@media (max-width:1400px){#app{grid-template-columns:minmax(0,1fr) clamp(300px,25vw,360px);}}
@media (max-width:1120px){#app{grid-template-columns:minmax(0,1fr) 300px;}}
@media (max-width:960px){.readouts{grid-template-columns:1fr;}}