/* mse3d 新模型统一打磨层（2026-09-06，批次 24）
   配合 model-polish.js 使用；只有批次 23 新增的 65 个模型引入，旧模型不受影响。
   目标：少字、画布优先、手机端可用、细节一致。放在 model-mobile.css 之后加载。 */

/* ---------- 全尺寸：状态面板减负 ---------- */
#status-panel { line-height: 1.45; }
#status-panel .legend-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
#status-panel .legend-item { font-size: 11px; white-space: nowrap; }

/* 说明抽屉：默认收起，读数与图例留在外面 */
#status-panel .mp-more {
  display: block; width: 100%; grid-column: 1 / -1;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--panel-border);
}
#status-panel .mp-more > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; letter-spacing: 1px; color: var(--accent);
  padding: 4px 0; min-height: 28px;
}
#status-panel .mp-more > summary::-webkit-details-marker { display: none; }
#status-panel .mp-more > summary::before {
  content: "▸"; display: inline-block; width: 12px; transition: transform .2s var(--ease-smooth, ease);
}
#status-panel .mp-more[open] > summary::before { transform: rotate(90deg); }
#status-panel .mp-more[open] > summary { margin-bottom: 6px; }
#status-panel .mp-more > *:not(summary) {
  font-size: 12px; line-height: 1.6; color: var(--text-sub);
  margin: 6px 0 0; max-width: 62ch;
}
#status-panel .mp-more > *:not(summary):first-of-type { margin-top: 0; }

/* ---------- 手机端 ---------- */
@media (max-width: 768px) {
  #app-layout { gap: 8px; }
  #header { padding: 8px 12px; }
  #header h1 { font-size: 15px; line-height: 1.25; margin: 0; }
  #header p.subtitle { font-size: 9px; opacity: .75; margin: 2px 0 0; }

  /* 画布优先：状态面板由 JS 挪到控件之后，这里保证画布有足够高度 */
  #graph-wrapper { min-height: 46vh; }
  #graph-wrapper canvas { max-width: 100%; }

  /* 状态面板：紧凑 */
  #status-panel { padding: 10px 12px; font-size: 12px; }
  #status-panel .status-title { font-size: 9.5px; letter-spacing: 1.5px; margin-bottom: 4px; }
  #status-panel .stage-row { gap: 6px; flex-wrap: wrap; }
  #status-panel .legend-item { font-size: 10px; }
  #status-panel .mp-more > *:not(summary) { font-size: 11.5px; }

  /* 控件：触控高度与间距 */
  #controls-bottom { padding: 10px 12px; }
  /* 横向控件行一律允许换行，杜绝 375px 下被裁掉的按钮与读数 */
  #controls-bottom [class*="row"], #controls-bottom [class*="group"], #controls-bottom [class*="step"],
  #controls [class*="row"], #controls [class*="group"], #controls [class*="step"],
  #status-panel [class*="row"], #status-panel [class*="gate"] {
    flex-wrap: wrap; max-width: 100%; }
  #controls-bottom .val-display, #controls-bottom [class*="val"],
  #controls .val-display, #controls [class*="val"] { flex-shrink: 0; }
  #controls-bottom .btn, #controls-bottom [class*="step-btn"],
  #controls .btn, #controls [class*="step-btn"] { flex-shrink: 0; }
  /* 用 clip 而不是 hidden：hidden 会让 flex/grid 子项失去「最小高度＝内容高」的保护，
     固定高度布局里页眉会被压扁（批次 25b 实测：页眉 48px 被压到 33px，标题裁半截） */
  #app-layout > * { max-width: 100%; box-sizing: border-box; overflow-x: clip; }
  /* 手机端是一列往下排、整页滚动：任何一块都不许被固定高度的布局压扁
     （页面桌面规则常给 #status-panel 写 min-height:0，手机上会被压到 22px、内容溢到框外） */
  #app-layout > * { flex-shrink: 0; }
  /* 状态面板永远排最后：部分页面自己的手机规则给 #status-panel 写了 order:2/3，
     会把 JS 的 DOM 重排压回画布或控件之前（拉伸曲线、钢四路线、诺伊曼漏斗、杨氏润湿都中过） */
  #app-layout > #status-panel { order: 99; }
  .chip, button.chip, .jump-btn, .play-btn { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  #controls-bottom button { min-height: 40px; }
  input[type="range"] { height: 40px; margin: 0; }
  .slider-item, .slider-row, .ctrl-row { margin: 4px 0; }
  .ctrl-label, .math-label { font-size: 11.5px; }
  .val-display { font-size: 12px; min-width: 56px; text-align: right; }
}

/* 窄手机（≤380px）再收一档 */
@media (max-width: 380px) {
  #header h1 { font-size: 14px; }
  #status-panel { font-size: 11.5px; }
  .chip, button.chip { padding: 8px 10px; font-size: 11.5px; }
}

/* 横屏手机：画布压到左边，面板右侧滚动 */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  #graph-wrapper { min-height: 70vh; }
}