/* @level atom */
/*
 * touch.css — coarse-pointer (touch) ERGONOMICS, applied app-wide. Everything here is gated on
 * `@media (pointer: coarse)`, so a MOUSE (a "fine" pointer) is completely unaffected: desktop stays
 * compact + dense, touch gets finger-sized targets. This is the single, generic home for touch tuning
 * — the one place to grow a hit area, rather than scattering per-component tweaks.
 *
 * Why media-gate instead of unconditionally bigger controls: a node DAW is information-dense; padding
 * every control to ~44px on a mouse would bloat it. `(pointer: coarse)` means "the primary input can't
 * point precisely" — i.e. a finger — so we spend the space only where it helps. Sizes lean toward the
 * ~40px touch-target guidance without forcing a layout reflow on desktop.
 *
 * Loaded as a Tier-1 foundation sheet (index.html <link>, after utilities.css) so it applies before any
 * component renders. Phase 1 (the record arc's touch fix) made the canvas DRAG work; this is Phase 2.
 */

@media (pointer: coarse) {
  /* Ports — the wiring endpoints. The visible dot stays put (wires anchor to its live centre); we only
     add VERTICAL breathing room so a finger lands one endpoint, not the row above/below it. */
  .port {
    padding-top: var(--m-size-space-2);
    padding-bottom: var(--m-size-space-2);
  }

  /* Palette tiles — spawning is a primary action; the nav-arc made them compact (~28px rows). Give a
     finger a comfortable row to tap. */
  .palette-tile { min-height: 40px; }

  /* Dials — the drag is relative (works on touch already); a taller grab band makes a precise vertical
     drag easy without clipping a neighbour. */
  .param.dialable { min-height: 38px; }

  /* The small glyph BUTTONS scattered across the UI — card chrome (remove/bypass/minimise/maximise),
     the canvas magnify −/%/+, the arranger time-zoom, the pop-out tools, the topbar icon buttons, and
     the audio toggle. A comfortable square target; flex-centre keeps the glyph centred at the new size. */
  .audio-node .remove,
  .audio-node .bypass,
  .audio-node .minimize,
  .audio-node .maximize,
  .canvas-zoom button,
  .arr-tl-zoom button,
  .m-overlay-tool,
  .m-overlay-close,
  .m-expand,
  .project-icon-btn,
  #start-audio {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Native <select> dropdowns (export format/rate/depth/bitrate, enum params) — a comfortable row height
     so the tap + the native picker are easy to land. */
  select { min-height: 34px; }
}