/* ===========================================================================
   iLabs — shared lab-page components (Forces labs)
   ---------------------------------------------------------------------------
   Every Forces lab page (mechanics, circuit, optics, waves, rotation, thermo,
   electro, logic-gates) used to carry its own copy of these rules, which had
   drifted apart (stage padding 14 vs 16, controls column 300 vs 320, …).
   This is the single source. A page's own <style> now only holds rules that
   are genuinely specific to that lab (canvas cursors, its own diagrams, …).
   Loaded after site.css: <link rel="stylesheet" href="../assets/lab.css">
   ===========================================================================*/

/* ---------- lab header ---------- */
.lab-head{ padding:30px 0 6px; }
.lab-head .kicker{ font-size:var(--fs-label); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px; }
.lab-head h1{ font-size:clamp(1.75rem,3.6vw,2.4rem); margin:0 0 .3em; letter-spacing:-.02em; }
.lab-head p{ color:var(--chrome-2); max-width:64ch; font-size:1.0625rem; line-height:1.65; margin:0; }

/* ---------- mode tabs (one per section of a lab) ---------- */
.modes{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 20px; }
.mode-btn{ font:inherit; font-size:.9375rem; font-weight:500; padding:.55em 1.15em; min-height:40px;
  border-radius:999px; border:1px solid var(--edge); background:var(--surface); color:var(--chrome-2); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s; }
.mode-btn:hover{ border-color:var(--edge-hi); color:var(--chrome); }
.mode-btn.active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }

/* ---------- stage + controls ---------- */
.lab-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; margin-bottom:14px; }
@media (max-width:880px){ .lab-grid{ grid-template-columns:minmax(0,1fr); } }
/* grid children must be allowed to shrink, otherwise a wide diagram/table inside
   forces the whole page wider than the phone (this was the horizontal-scroll bug) */
.lab-grid > *{ min-width:0; }
.stage-card{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-lg); padding:16px; }
.stage-toolbar{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.stage-toolbar .spacer{ flex:1; }
.readout{ font-family:"IBM Plex Mono",monospace; font-size:.875rem; color:var(--chrome-2); }
.readout b{ color:var(--chrome); font-weight:500; }

.controls{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-lg); padding:18px; }
.ctrl{ margin-bottom:18px; }
.ctrl:last-child{ margin-bottom:0; }
.ctrl label{ display:flex; justify-content:space-between; gap:10px; font-size:.9375rem; color:var(--chrome-2); margin-bottom:8px; }
.ctrl label .val{ font-family:"IBM Plex Mono",monospace; font-size:.875rem; color:var(--accent); }
.ctrl select{ width:100%; font:inherit; font-size:.9375rem; color:var(--chrome); background:var(--field); border:1px solid var(--edge-hi);
  border-radius:var(--r-sm); padding:.5em .7em; min-height:40px; margin-bottom:6px; cursor:pointer; }
.ctrl select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.ctrl input[type=range]{ width:100%; accent-color:var(--accent); height:28px; cursor:pointer; }

/* ---------- readout cards ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:16px 0; }
.stat{ background:var(--panel-2); border:1px solid var(--edge); border-radius:var(--r-md); padding:14px 16px; }
.stat .k{ font-size:var(--fs-label); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chrome-3); margin-bottom:6px; }
.stat .v{ font-family:"IBM Plex Mono",monospace; font-size:1.15rem; color:var(--chrome); }
.stat.tag .v{ font-size:.9375rem; color:var(--accent); }

/* ---------- "what each mode covers" notes ---------- */
.notes{ margin:32px 0 8px; }
.notes .card{ margin-bottom:12px; line-height:1.7; }

/* ---------- phones: only what's needed ---------- */
@media (max-width:700px){
  .lab-head{ padding:18px 0 2px; }
  .lab-head p{ font-size:1rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .crumbs{ display:none; }
  .modes{ margin:16px 0 14px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:calc(var(--gutter) * -1); margin-right:calc(var(--gutter) * -1); padding:2px var(--gutter); }
  .modes::-webkit-scrollbar{ display:none; }
  .mode-btn{ flex:0 0 auto; }
  .stage-card{ padding:12px; border-radius:var(--r-md); }
  .controls{ padding:16px; }
  .stat{ padding:12px 14px; }
}