/* ===== responsive.css — small-screen / touch layout =====
   Loaded LAST. The desktop look (the original fixed 960px float grid) is left
   untouched above the breakpoint; below it the grid reflows to a single fluid
   column and the hard-coded widths (header bar, 740px column, 720px waveform,
   floated controls) go fluid. Equal-specificity rules win here purely by source
   order, so the selectors mirror style.css.

   Touch *input* already works — the knobs and loop handles use Pointer Events
   with touch-action:none — so this is almost entirely layout, plus a few
   touch-ergonomics tweaks (tap targets, no tap-flash, no iOS focus-zoom). */

/* kill the blue tap flash on the anchor-buttons; stop handle drags selecting */
a.button,
a.transport,
.tracks .track a.remove,
.tracks .track .controls .loop a,
.tracks .track .controls .buttons a {
  -webkit-tap-highlight-color: transparent;
}

.session .tracks .track .slider.loop .ui-slider-handle {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* coarse pointers (touch): the loop handles are only ~6px wide — give them a
   fat invisible grab area so they're tappable. The ::before is part of the
   handle for hit-testing, so pointerdown still lands on the handle. */
@media (pointer: coarse) {
  .session .tracks .track .slider.loop .ui-slider-handle::before {
    content: '';
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -15px;
    right: -15px;
  }
}

@media (max-width: 960px) {
  /* fluid containers */
  .wrap {
    width: auto;
    max-width: 960px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .wrap_narrow {
    width: auto;
  }

  /* header: drop the 155px absolute grid and let logo + search bar flow */
  .header .wrap {
    height: auto;
    padding-bottom: 14px;
  }
  .header .logo {
    position: static;
  }
  .header input,
  .header input.add_track {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 16px; /* >=16px stops iOS Safari zooming in on focus */
  }

  /* stack the two columns: main (transport + tracks) first, sidebar below */
  .session > .wrap {
    display: flex;
    flex-direction: column;
  }
  .session > .wrap > .left {
    float: none;
    width: auto;
    order: 1;
  }
  .session > .wrap > .sidebar {
    float: none;
    width: auto;
    padding-top: 28px;
    order: 2;
  }
  .session > .wrap > .clear {
    display: none;
  }

  .session input#session_title {
    font-size: 16px;
  }

  /* track card + waveform go fluid. The canvases keep their 720px internal
     resolution and are just CSS-scaled to the container; LoopSlider reads the
     element's real on-screen rect, so its hit-math stays correct. */
  .session .tracks {
    margin-top: 24px;
  }
  .session .tracks .track .wrap_narrow {
    width: auto;
    box-sizing: border-box;
  }
  .session .tracks .track .seek {
    width: auto;
  }
  .session .tracks .track .wav,
  .session .tracks .track .wav .waveform,
  .session .tracks .track .wav canvas {
    width: 100%;
  }
  .session .tracks .track .preloader {
    width: 100%;
  }

  /* controls: unfloat the three blocks so knobs / loop times / buttons stack */
  .session .tracks .track .controls .knobs {
    float: none;
  }
  .session .tracks .track .controls .loop {
    float: none;
    display: inline-block;
    margin-top: 18px;
  }
  .session .tracks .track .controls .buttons {
    float: right;
    margin-top: 18px;
  }
}

/* phones: tighten knob spacing and let the track buttons wrap full-width */
@media (max-width: 480px) {
  .session .tracks .track .controls .knobs .knobcontainer {
    margin-right: 14px;
  }
  .session .tracks .track .controls .buttons {
    float: none;
  }
  .session .tracks .track .controls .buttons a {
    margin-left: 0;
    margin-right: 8px;
  }
}