/* 物理实验页共用样式。
   底座直接继承全站沙盒皮肤 `耍起/模拟.css`（同一套色标、同一个页头、同一圈焦点环），
   这里只留物理页独有的零件：台面浮层、读数带、图像条、时间轴、速度档。
   用法：站点里是 `耍起/科学/物理/物理.css`，所以往上是两层。 */
@import url("../../模拟.css");

/* 页头那句副标题（模拟.css 里叫 .tip，物理页沿用 .hint 这个老名字） */
.hint { font-size:11.5px; letter-spacing:.14em; color:var(--muted); }

/* 台面：物理页的 #stage 是 body 的直接子元素（没有 .main 包一层），自己留边距 */
#stage { margin:0 clamp(14px,3vw,34px); }

/* 台面上的浮层读数与提示条 */
#overlay { position:absolute; left:12px; top:10px; font-size:12px; letter-spacing:.1em;
  color:var(--muted); font-variant-numeric:tabular-nums; pointer-events:none; line-height:1.7; }
#overlay b { color:var(--fg); font-weight:400; }
#banner { position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-size:13px; letter-spacing:.14em; color:var(--fg); background:var(--bg);
  border:1px solid var(--line-hi); border-radius:3px; padding:6px 14px; display:none; }
#banner.on { display:block; }

/* 下方图像条 */
#graphwrap { flex:none; height:clamp(110px,17vh,160px); margin:10px clamp(14px,3vw,34px) 0;
  border:1px solid var(--line); border-radius:3px; position:relative; }
#graph { display:block; width:100%; height:100%; }
.legend { position:absolute; right:10px; top:8px; font-size:11px; letter-spacing:.1em; color:var(--muted); }
.legend span { margin-left:12px; }

/* 读数带 */
.readout { flex:none; display:flex; flex-wrap:wrap; gap:6px 26px;
  padding:10px clamp(14px,3vw,34px) 0; font-size:12.5px; letter-spacing:.1em;
  color:var(--muted); font-variant-numeric:tabular-nums; }
.readout b { color:var(--fg); font-weight:400; }

/* 时间轴 + 速度档 */
#scrub { flex:1 1 160px; -webkit-appearance:none; appearance:none; height:2px;
  background:var(--line-hi); border-radius:2px; border:0; }
#scrub::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--fg); border:0; cursor:pointer; }
#scrub::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--fg); border:0; cursor:pointer; }
#scrub:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
.spd { display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.spd button { font:inherit; font-size:11.5px; letter-spacing:.1em; color:var(--muted);
  background:transparent; border:0; padding:8px 12px; cursor:pointer; }
.spd button.on { color:var(--fg); background:var(--panel-hi); }
.spd button + button { border-left:1px solid var(--line); }

@media (max-width:680px) { .hint { display:none; } }