/* Responsive layout (<= 800 px): the stage fills the screen; Filters/Queue and
   the node panel are bottom sheets opened by #btn-sheet-left / #btn-sheet-panel
   (61-responsive.js sets .app[data-sheet]). Touch targets are >= 44 px. */

.sheet-toggle { display: none; }

@media (max-width: 800px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top" "stage";
  }
  .brand { display: none; }
  .toolbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; min-height: var(--top-h); }
  .tool-group { flex-wrap: wrap; min-width: 0; }
  .tool-group.end { margin-left: auto; }
  .search-wrap { order: 3; flex: 1 1 100%; max-width: none; }
  .search, .btn { height: 44px; }
  .btn { min-width: 44px; }
  .icon-btn { width: 44px; }
  .sheet-toggle { display: inline-flex; }
  .stage { min-height: 0; }
  .minimap { display: none; }
  .zoom-controls { top: auto; right: 10px; bottom: 12px; flex-direction: row; }
  .cap-banner { top: auto; bottom: 66px; left: auto; right: 10px; transform: none; max-width: 170px; padding: 4px 10px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .hints { left: 10px; bottom: 12px; max-width: calc(100% - 170px); }
  .tab { min-height: 44px; }
  .sidebar, .panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: min(70vh, 560px); height: min(70dvh, 560px);
    min-height: 0; max-height: none;
    border: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .18);
    transform: translateY(100%); visibility: hidden;
  }
  .app[data-sheet=left] .sidebar,
  .app[data-sheet=panel] .panel { transform: none; visibility: visible; }
  .app[data-sheet] .hints { display: none; }
}

@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .sidebar, .panel { transition: transform .2s ease, visibility .2s; }
}