/* piano-mobile.css — responsive tablet/mobile layer for piano.php (PRO-88).
   ============================================================================
   The workstation is a fixed 1640px console that a JS fit() normally shrinks with
   an inline transform:scale() — tiny and awkward on a phone (whole console scaled
   down, panning sideways). Below 1024px this layer instead reflows the ENTIRE
   console into ONE full-width vertical column, so every panel is complete and
   comfortable in portrait. The ONLY element that scrolls horizontally is the
   piano keybed, inside its own container (the natural piano-roll pattern — same
   as Ear Training) — the page itself never scrolls sideways.

   Pure CSS: scoped to @media, no JS and no bundle rebuild. Loaded AFTER
   pro88.css / piano-skin.css so `!important` cleanly overrides the fit() inline
   transform/height it keeps re-applying.

   IMPORTANT (this is why an earlier attempt failed): piano-skin.css already
   reserves the left rail width — .pn-chrome/.pn-stagewrap get padding-left 84px
   (≤1100) / 66px (≤720), which clears the fixed 56px cosmic rail. This file must
   NEVER reduce that left inset, or content slides under the rail and is clipped.
   ============================================================================ */

@media (max-width: 1024px) {

  /* ── 1. Neutralize the fit() transform-scaler → the console flows at the
        container's real width instead of a scaled 1640px. ─────────────────── */
  .pn-stage-scaler {
    transform: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    will-change: auto !important;   /* also stops it acting as a fixed-pos container */
  }
  .pn-stage-mount {
    overflow: visible !important;
    height: auto !important;
  }

  /* ── 2. Safety net against page-level horizontal scroll. The reflow below is
        the real fix (content fits); this just guarantees the page never widens.
        NOTE: left padding is deliberately left untouched (rail inset). ─────── */
  .app, .pn-shell, .pn-chrome, .pn-stagewrap, .pn-synth { max-width: 100vw; overflow-x: hidden; }
  .pn-stagewrap { width: auto !important; }
  .pn-synth * { min-width: 0; }   /* let the intrinsically-wide grid children shrink */

  /* ── 3. Reflow both decks + every panel row into ONE full-width column. Use
        minmax(0,1fr) (not 1fr) so the wide keybed can't pin a column open. ─── */
  .chassis-top,
  .chassis-bottom {
    display: flex !important; flex-direction: column !important;
    gap: 12px; width: 100% !important;
  }
  .header,
  .patch-strip,
  .panel,
  .keys-row,
  .scale-row,
  .scale-row.chord-row {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important; min-height: 0 !important; gap: 10px !important;
  }
  .module { min-height: 0 !important; }

  /* ── 4. The keybed: a full-width container whose keys keep a playable size, so
        the key strip scrolls horizontally INSIDE it to reach other octaves. ── */
  .piano {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .piano-keys { width: max-content !important; min-width: 100%; }
  .key-white {
    flex: 0 0 46px !important; width: 46px !important;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  }
  .key-black { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

  /* No physical keyboard on touch → drop the QWERTY shortcut hints; note names stay. */
  @media (hover: none) { .key-qwerty { display: none !important; } }
}

/* ── Phones: slightly narrower keys so more of an octave is visible at once
     (still comfortably tappable); the rest is reached by scrolling the strip. ── */
@media (max-width: 560px) {
  .key-white { flex-basis: 40px !important; width: 40px !important; }
}

/* ============================================================================
   Component fit-ups. The panels stack fine, but a few dense controls (built for
   the wide desktop console) overflow / crop / overlap in the narrow column.
   ============================================================================ */
@media (max-width: 1024px) {

  /* KEY·HARMONY + TUNING·MAQAM — ROOT / MODE / preset buttons. Desktop packs them
     into fixed 12/7/3-column grids, so labels like "Phrygian" / "Mixolydian" /
     "Chromatic" overflowed their cell. Let each button size to its label + wrap. */
  .scale-preset-grid { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .scale-preset-grid .sbtn {
    flex: 0 0 auto; white-space: nowrap;
    padding: 9px 11px !important; font-size: 11px !important; border-radius: 6px;
  }

  /* MODE catalogue scroll — touch buttons are taller, so give the internal
     scroll more room (~3 wrapped rows) and momentum scrolling. */
  .mode-scroll {
    max-height: 156px;
    -webkit-overflow-scrolling: touch;
  }
  .mode-group-lbl { font-size: 10px; }

  /* CHORD PADS — the 50px chord name overflowed the (now narrower) pad and cropped
     ("Bdim" → "3dim"). Fluid pad sizing + a name that scales to fit. */
  .pads-wrap.chord-pads {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
    grid-auto-rows: 118px !important; gap: 8px !important;
  }
  .chord-pad { padding: 10px 6px !important; overflow: hidden; min-width: 0; }
  .chord-pad .cp-roman { font-size: 11px !important; }
  .chord-pad .cp-name  { font-size: clamp(22px, 6.5vw, 34px) !important; }
  .chord-pad .cp-notes { font-size: 12px !important; }

  /* MICROTUNING — 12 sliders in a fixed 12-col grid were ~19px wide, so the thumbs
     overlapped. Give each a comfortable min width and trim the cell padding so the
     track always clears its neighbours. Wraps to rows (no h-scroll — only the
     keybed scrolls sideways). */
  .cents-row { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)) !important; gap: 6px !important; }
  .cent-cell { padding: 8px 3px !important; gap: 6px !important; }
  .cent-track { min-height: 86px !important; }

  /* I/O strip — 3 groups in a space-between row collided. Stack them; each group
     wraps its own label+jack pairs. */
  .io { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; }
  .io-group { flex-wrap: wrap !important; gap: 10px 14px !important; }
}

/* Phones: microtuning to a tidy 6×2 with a slimmer track; a touch smaller chord name. */
@media (max-width: 560px) {
  .cents-row { grid-template-columns: repeat(6, 1fr) !important; }
  .cent-track { width: 30px !important; }
  .chord-pad .cp-name { font-size: clamp(20px, 7.5vw, 30px) !important; }
}