/* =========================================================
   Mobile & touch pass — loads last.
   Touch targets at 44px, the Helm keeps root/scale reachable
   on phones, panels and grids collapse to one column, the neck
   and keyboard scroll sideways with bigger cells.
   ========================================================= */

/* Touch: bigger targets wherever a finger lands. */
@media (pointer: coarse) {
  .text-button, .secondary-button, .primary-button, .string-toggle, .diatonic-btn, .mode-btn, .neighbour-btn,
  .key-option, .sighting-result, .sighting-chip, .riff-chip, .map-slot button, .dock-btn, .helm-tool, .star-select-option { min-height: 44px; }
  .note-chip, .helm-chip { min-width: 46px; min-height: 44px; }
  .tone { min-width: 40px; min-height: 40px; font-size: .82rem; }
  .fret-cell { min-width: 50px; min-height: 60px; }
  .fretboard { grid-template-columns: 92px 70px repeat(var(--fretted-count), minmax(50px, 1fr)); min-width: calc(162px + var(--fretted-count) * 50px); }
  .string-control button, .dock-string button { min-width: 44px; min-height: 44px; }
  .key { min-width: 44px; }
  .keyboard { --white-w: 44px; min-width: calc(var(--whites) * 44px); }
  .star-select-trigger { min-height: 48px; }
}

/* Phones and small tablets. */
@media (max-width: 760px) {
  .app-shell { width: calc(100% - 16px); }
  .panel { padding: 16px 12px; border-radius: 14px; }
  .hero { padding: 16px 12px; }
  .brand-lockup { flex-direction: column; align-items: flex-start; gap: 10px; }
  .logo-mark { width: 56px; height: 56px; }
  .wordmark-svg { width: 100%; }
  .subtitle { font-size: .9rem; }
  .control-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .control-grid .custom-select-field:first-child { grid-column: 1 / -1; }
  .quick-actions, .quick-action-group { flex-direction: column; align-items: stretch; }
  .quick-action-group .secondary-button, .preset-select { width: 100%; }
  .tuning-controls { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .fret-tools { grid-template-columns: 1fr; }
  .fret-focus-tool, .neck-view-tool, .audio-tool { grid-column: auto; }
  .mode-nav-buttons { grid-template-columns: 1fr 1fr; }
  .neighbour-list, .diatonic-row, .key-list, .sighting-results { grid-template-columns: 1fr 1fr; }
  .chord-tools, .strings-row, .maps-bar, .pattern-guide-actions, .scale-notes-heading, .section-heading, .mode-nav-heading, .sighting-controls, .riff-controls { flex-direction: column; align-items: stretch; }
  .riff-actions { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .riff-style-select, .key-root-select, .compact-chord-select { width: 100%; }
  .legend { font-size: .72rem; }
  .fretboard-scroll, .keyboard-scroll, .riff-neck-scroll { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }

  /* The Helm on a phone: readout on top, root + scale menus underneath, tools in a row. */
  .helm-inner { width: 100%; border-radius: 0 0 12px 12px; padding: 8px 10px 10px; gap: 8px; }
  .helm-top { display: none; }
  .helm-readout { flex: 1 1 100%; max-width: none; }
  .helm-selects { display: flex; flex: 1 1 100%; gap: 6px; }
  #helmMapSelect { display: none; }
  #helmRootSelect { flex: 0 0 82px; width: 82px; }
  #helmScaleSelect { flex: 1 1 auto; width: auto; }
  .helm-notes { display: none; }
  .helm-tools { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .helm-tools .helm-tool { flex: 1 1 0; padding: 0 6px; font-size: .74rem; }
  body.has-control-center { padding-right: 0; }
  body.has-control-center .helm { padding-right: 0; }
}

@media (max-width: 480px) {
  .control-grid, .neighbour-list, .diatonic-row, .key-list, .sighting-results, .mode-nav-buttons { grid-template-columns: 1fr; }
  .riff-actions { grid-template-columns: 1fr; }
  .wheel-copy { font-size: .8rem; }
}

/* Safe areas on notched phones. */
@supports (padding: max(0px)) {
  .helm { padding-top: env(safe-area-inset-top, 0px); }
  .app-shell { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
}