/* 中学理科ラボ 共通スタイル
   docs/science-lab.md #5 のトークン。ここに無い色を 各ツールで 足さない。
   ⚠ ダークモードは 作らない（教室は明るい）。暗いのは 盤面だけ（.stage--dark）*/
:root{
  --paper:#f2f4f5;  --panel:#ffffff;
  --ink:#1f2933;    --ink2:#5b6b78;
  --rule:#cbd5da;   --grid:#e3e8ea;
  --act:#0f6f8c;    --act2:#12889f;
  --stage:#141a1f;
  --q-force:#c0532e; --q-current:#2f7fb3; --q-field:#6a5a9c;
  --q-heat:#b8863b;  --q-light:#d8b13a;   --q-wave:#3f8f7a;
  --pad:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.5;
  overscroll-behavior:none;
}
/* 数値は 桁が動かないように。ここが揃わないと 計測器に見えない */
.num,input[type=number],.val,.readout b{font-variant-numeric:tabular-nums}

/* ── 全体レイアウト。PCは 横、スマホは 縦。どちらも 1画面完結 ── */
.lab{display:flex; flex-direction:column; height:100dvh}
.lab__head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px var(--pad); background:var(--panel); border-bottom:1px solid var(--rule);
}
/* 一覧へ 戻る。⚠ 主役では ない ので 見出しより 弱く。指で 押せる 高さは 確保する */
.lab__back{
  display:inline-flex; align-items:center; min-height:32px; padding:0 8px; margin-left:-8px;
  color:var(--ink2); font-size:12px; text-decoration:none; border-radius:6px; white-space:nowrap;
}
.lab__back:hover{color:var(--act); background:var(--paper)}
.lab__title{font-size:15px; font-weight:700; margin:0; white-space:nowrap}
.lab__title small{display:block; font-size:11px; font-weight:400; color:var(--ink2)}
.lab__body{display:flex; flex:1; min-height:0}
.lab__stage{flex:1; min-width:0; position:relative; background:var(--panel)}
.lab__stage canvas{display:block; width:100%; height:100%; touch-action:none}
.lab__side{
  width:330px; flex:none; background:var(--panel); border-left:1px solid var(--rule);
  overflow-y:auto; padding:var(--pad); display:flex; flex-direction:column; gap:14px;
}
@media (max-width:860px){
  .lab__body{flex-direction:column}
  .lab__stage{flex:1 1 46%; min-height:240px}
  .lab__side{width:auto; border-left:0; border-top:1px solid var(--rule); flex:1 1 54%}
}

/* ── 操作パネル ── */
.grp{border:0; margin:0; padding:0}
.grp__t{font-size:12px; font-weight:700; color:var(--ink2); letter-spacing:.04em; margin:0 0 6px}
.ctl{margin:0 0 12px}
.ctl__lab{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:2px}
.ctl__lab span{font-size:13px}
.ctl__v{display:flex; align-items:baseline; gap:2px; color:var(--act); font-weight:700}
.ctl__v input{
  width:82px; font-size:20px; font-weight:700; color:var(--act); text-align:right;
  border:1px solid transparent; border-radius:6px; background:transparent; padding:1px 4px;
  font-family:inherit;
}
.ctl__v input:hover{border-color:var(--rule)}
.ctl__v input:focus{outline:none; border-color:var(--act); background:#fff}
.ctl__v u{font-size:12px; color:var(--ink2); text-decoration:none; font-weight:400}
/* fmt つきの つまみ（日付・時刻など 数では 読めない 値）*/
.ctl__v .fmt{font-size:20px; font-variant-numeric:tabular-nums}

/* 数値欄の 上下ボタンを 消す。桁が 切れる原因になり、指では 押せない */
input[type=number]{-moz-appearance:textfield; appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:32px; background:transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--rule); border-radius:2px}
input[type=range]::-moz-range-track{height:3px; background:var(--rule); border-radius:2px}
/* つまみは 44px の当たり判定を 確保する（GIGA端末は 指で触る）*/
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; margin-top:-10.5px; border-radius:50%;
  background:var(--panel); border:2px solid var(--act); cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--panel); border:2px solid var(--act); cursor:grab;
}
input[type=range]:active::-webkit-slider-thumb{background:var(--act)}

/* セグメント切替（モード・材質など）*/
.seg{display:flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.seg button{
  flex:1; min-height:40px; padding:0 10px; border:0; border-right:1px solid var(--rule);
  background:var(--panel); color:var(--ink2); font:inherit; font-size:13px; cursor:pointer;
  white-space:nowrap;   /* 「凸レンズ」が 2行に 折り返さないように */
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--act); color:#fff; font-weight:700}
/* 選択肢が 多い とき（wrap:true）。⚠ 指で 押す ので 1つ 44px 以上 */
.seg--wrap{flex-wrap:wrap; gap:6px; border:0; overflow:visible}
.seg--wrap button{
  flex:0 0 auto; min-height:44px; padding:0 14px;
  border:1px solid var(--rule); border-right:1px solid var(--rule); border-radius:8px;
}

/* 表示の 出す/隠す。先生が「まず予想させてから 出す」ためのもの */
.tgs{display:flex; flex-wrap:wrap; gap:6px}
.tg{
  min-height:36px; padding:0 12px; border:1px solid var(--rule); border-radius:18px;
  background:var(--panel); color:var(--ink2); font:inherit; font-size:13px; cursor:pointer;
}
.tg[aria-pressed=true]{border-color:var(--act); color:var(--act); font-weight:700; background:#eef6f9}

/* 読み取り値（先生が「ここを見て」と指す場所）*/
.readout{border:1px solid var(--rule); border-radius:8px; padding:10px 12px; background:#fafbfc}
.readout dl{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0; align-items:baseline}
.readout dt{font-size:12px; color:var(--ink2)}
.readout dd{margin:0; text-align:right; font-size:20px; font-weight:700}
.readout dd u{font-size:12px; color:var(--ink2); text-decoration:none; font-weight:400; margin-left:1px}
.readout .note{margin:8px 0 0; font-size:13px; color:var(--ink2); text-align:center;
  border-top:1px solid var(--rule); padding-top:8px}
.readout .note b{color:var(--ink); font-size:15px}

/* 下のボタン列 */
.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.btn{
  min-height:40px; padding:0 14px; border:1px solid var(--rule); border-radius:8px;
  background:var(--panel); color:var(--ink); font:inherit; font-size:13px; cursor:pointer;
}
.btn:hover{border-color:var(--act); color:var(--act)}
.btn--main{background:var(--act); border-color:var(--act); color:#fff; font-weight:700}
.btn--main:hover{background:var(--act2); border-color:var(--act2); color:#fff}
/* 要望を送る。⚠ 主役では ない ので 弱く。a でも ボタンと 同じ 高さに そろえる */
a.btn{display:inline-flex; align-items:center; text-decoration:none}
.btn--quiet{background:transparent; color:var(--ink2); border-style:dashed}
.btn--quiet:hover{border-style:solid}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:9px 16px; border-radius:8px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s; z-index:20;
}
.toast.on{opacity:1}