/* Scoped collection controls: vertical gestures always belong to the page. */
.design-app #inspection-stage,
.design-app[data-view="2d"][data-flat-zoomed="true"] #inspection-stage { touch-action: pan-y pinch-zoom; }
.design-app .zoom-controls button { min-width: 44px; min-height: 44px; }
.design-app .board-controls button { min-height: 44px; }
.design-app .inspection-loading { top: 12px; left: 50%; transform: translateX(-50%); font-size: 8px; }
.design-app[data-view="dimensional"] .inspection-fallback:not(.is-loaded),
.design-app .webgl-fallback .inspection-fallback { visibility: visible; opacity: 1; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.design-app[data-view="dimensional"] #inspection-stage:has(.inspection-fallback:not(.is-loaded)) canvas { visibility: hidden; }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .home-collection .design-app { margin-inline: 0; width: 100%; }
  .design-app .app-bar { display: none; }
  .design-app .app-workspace { display: flex; flex-direction: column; min-height: 0; }
  .design-app .app-canvas-wrap { order: 1; }
  .design-app .canvas-toolbar { min-height: 56px; height: 56px; padding: 4px 10px; flex-wrap: nowrap; }
  .design-app .view-switch { flex: 1; max-width: 320px; }
  .design-app .view-switch button { flex: 1; min-width: 44px; min-height: 44px; padding: 8px; font-size: 10px; }
  .design-app .toolbar-right,
  .design-app .stage-readout,
  .design-app .stage-title,
  .design-app .stage-help,
  .design-app .stage-reticle,
  .design-app .app-status { display: none; }
  .design-app .app-canvas { flex: none; height: clamp(370px, 112vw, 460px); min-height: 0; }
  .design-app .zoom-controls { bottom: 0; right: 0; left: 0; height: 48px; justify-content: center; border-inline: 0; border-bottom: 0; background: var(--studio); }
  .design-app .zoom-controls output { min-width: 48px; font-size: 10px; }
  .design-app .zoom-controls #zoom-fit { min-width: 66px; font-size: 10px; }
  .design-app #inspection-stage { bottom: 48px; }
  .design-app .app-inspector { order: 2; display: grid; grid-template-columns: minmax(0, 1fr) 94px; gap: 4px 10px; border: 0; padding: 12px; }
  .design-app .app-inspector .panel-label { grid-column: 1; grid-row: 1; font-size: 10px; justify-content: flex-start; }
  .design-app .app-inspector .panel-label > span:first-child { display: none; }
  .design-app .app-inspector h4 { grid-column: 1; grid-row: 2; margin: 0; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
  .design-app .board-controls { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; gap: 6px; }
  .design-app .board-controls button { width: 44px; height: 44px; }
  .design-app .app-inspector > p,
  .design-app .piece-spec { display: none; }
  .design-app .inspect-original { grid-column: 1 / -1; margin-top: 6px; min-height: 44px; font-size: 10px; }
  .design-app .app-library { order: 3; min-width: 0; padding: 0 12px 10px; border: 0; }
  .design-app .app-library > .panel-label,
  .design-app .library-note { display: none; }
  .design-app .board-thumbs { display: flex; gap: 8px; margin: 0; padding: 3px 0; overflow-x: auto; scroll-snap-type: x proximity; }
  .design-app .board-thumbs button { flex: 0 0 52px; min-width: 44px; min-height: 66px; opacity: .65; transform: none; border: 2px solid transparent; scroll-snap-align: center; }
  .design-app .board-thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--signal); transform: none; }
  .design-app .board-thumbs button::after { font-size: 8px; }
  #collection-dialog #close-collection { min-width: 44px; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .design-app .app-canvas { height: 310px; }
}