/* Phone-first working surface: scene, plan, then the next cutting action. */
@media (max-width: 680px) {
  html, body { max-width: 100%; }
  main { padding: 0 !important; }
  .site-header { min-height: 52px; padding: 8px 12px; gap: 8px; align-items: center; }
  .site-header .brand { font-size: 30px; }
  .header-actions { gap: 5px; }
  .header-actions .system-state, .header-link-home { display: none; }
  .header-link { padding: 6px; font-size: 10px; }
  .viewport-panel { min-width: 0; border-radius: 0; }
  .mobile-tree .phase-badge { display: none; }
  .mobile-tree .simulator-shell { gap: 0; }
  .viewport-toolbar { display: flex; flex-wrap: wrap; padding: 6px 8px; gap: 5px; }
  .toolbar-identity, .camera-frame-readout, .flight-hint, .viewport-foot { display: none; }
  .phase-badge { padding: 5px 7px; min-height: 26px; font-size: 10px; }
  .mode-switch { flex: 1; min-width: 210px; padding: 2px; }
  .mode-button { min-height: 40px; padding: 6px 8px; font-size: 11px; }
  .viewport-toolbar > .mobile-disclosure { flex-basis: 100%; }
  .mobile-disclosure { min-width: 0; background: #20282a; color: #ecf5eb; border-top: 1px solid #ffffff20; }
  .mobile-disclosure > summary { cursor: pointer; padding: 10px 12px; min-height: 40px; font: 700 12px/20px system-ui,sans-serif; }
  .mobile-disclosure > summary:focus-visible { outline: 2px solid #bff558; outline-offset: -3px; }
  .mobile-disclosure[open] > summary { color: #bff558; }
  .camera-controls { display: flex; flex-wrap: wrap; overflow: visible; padding: 5px; }
  .camera-controls button { min-height: 44px; flex: 1 1 28%; font-size: 11px; padding: 6px; }
  .camera-divider { display: none; }
  .workflow-key { display: flex; overflow-x: auto; gap: 2px; padding: 4px; }
  .workflow-step { flex: 1 0 62px; min-width: 62px; min-height: 44px; padding: 5px; gap: 3px; }
  .workflow-key .workflow-step { min-height: 48px; }
  .workflow-index, .workflow-step > span:first-child { display: none; }
  .workflow-name, .workflow-step strong { font-size: 10px; }
  .workflow-dots { gap: 4px; }
  .workflow-dots i { width: 7px; height: 7px; }
  .viewport { height: 49svh !important; min-height: 260px !important; max-height: 560px; }
  .scene-label { display: none; }
  .viewport-control-dock, .control-dock { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: visible; }
  .dock-group { padding: 7px 8px; min-width: 0; }
  .dock-heading { margin-bottom: 4px; }
  .dock-heading, .dock-heading h3, .dock-heading strong, .dock-heading > span { font-size: 10px; }
  .dock-group button, .dock-group select { min-height: 44px; }
  .dock-group button small, .dock-guide-link, .dock-heading-meta, .analyzer-select > small { display: none; }
  .dock-sequence, .dock-trigger, .viewport-control-dock > .mobile-disclosure { grid-column: 1 / -1; }
  .dock-action-grid { grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; align-items: end; }
  .cut-plan-picker { min-width: 0; }
  .cut-plan-picker > span { display: none; }
  .cut-plan-picker select { width: 100%; font-size: 16px; }
  .dock-action-grid .dock-reset { min-height: 44px; font-size: 11px; padding: 5px; }
  .dock-trigger-body { grid-template-columns: 1fr 1fr; gap: 5px; }
  .gas-trigger, .auto-saw { min-height: 46px !important; padding: 7px !important; }
  .gas-trigger strong, .auto-saw strong { font-size: 15px; }
  .dock-trigger-progress { grid-column: 1 / -1; }
  .trigger-meta { margin-top: 2px; }
  .trigger-icon, .auto-saw-icon { display: none; }
  .mobile-mill .analyzer-group, .mobile-mill .action-group { grid-column: 1 / -1; }
  .mobile-mill .analyzer-group { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .analyzer-group .dock-heading, .analyzer-select { grid-column: 1 / -1; }
  .analyzer-select > span { display: none; }
  .analyzer-select select { width: 100%; font-size: 16px; min-height: 44px; }
  .analyzer-group .optimizer-button, .analyzer-group .auto-plan-button { margin: 0; padding: 7px; }
  .analyzer-group button b { font-size: 12px; }
  .mobile-mill .action-group { grid-row: 2; }
  .height-group input { min-height: 44px; }
  .height-group output { font-size: 12px; }
  .rotation-group button { padding: 7px; }
  .analysis-panel { color: #192a24; }
  .model-notes { color: #192a24; padding: 15px; }
  footer { padding: 16px; font-size: 12px; }
}
@media (max-width: 680px) and (max-height: 500px) {
  .viewport { height: 68svh !important; min-height: 210px !important; }
}