/* ── Mobile gestures & system suppression ────────────────────────────── */

/* prevent iOS rubber-band and chrome pull-to-refresh */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* fast taps; no 300ms */
button, label.mh-btn, .swatch, .parts__tab, .toolbar__btn, .mh-iconbtn { touch-action: manipulation; }

/* no text selection while interacting with controls */
.toolbar, .palette, .parts, .viewer, .actions, .canvas-hud {
  -webkit-user-select: none;
  user-select: none;
}

/* hide focus rings only when triggered by pointer, keep for keyboard */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--mh-blue); outline-offset: 2px; }

/* iOS Safari: kill the default zoom on input focus when font is <16 */
input { font-size: 16px; }
.picker__hex input { font-size: 16px; }

/* ── Touch targets ────────────────────────────────────────────────────
   Small controls keep their visual size but get an invisible pseudo-
   element that widens the tappable area toward the 44px guideline. */
.mh-chip, .parts__tab, .parts__mode-btn, .palette__hue, .slot-card__delete {
  position: relative;
}
.mh-chip::before, .parts__tab::before, .parts__mode-btn::before, .swatch::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
/* 16px hue strip → ~36px hit zone (capped so it doesn't eat the SV square) */
.palette__hue::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}
/* 22px delete cross → 44px hit zone */
.slot-card__delete::before {
  content: '';
  position: absolute;
  inset: -11px;
}

/* ── Landscape phone — 3-column grid ─────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .editor {
    display: grid;
    grid-template-columns: 160px 1fr 184px;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "viewer parts    palette"
      "viewer canvas   palette"
      "viewer toolbar  palette"
      "actions actions actions";
    gap: 0;
    /* notched phones in landscape: keep side columns out of the cutout */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  .viewer {
    grid-area: viewer;
    height: 100%;
    border-right: 1px solid var(--mh-border);
    border-bottom: 0;
  }
  .viewer__controls { gap: 4px; }
  .viewer__expand { width: 28px; height: 28px; }

  .parts {
    grid-area: parts;
    border-bottom: 1px solid var(--mh-border);
    min-width: 0;
  }
  .parts__scroll { padding: 4px 6px; }
  .parts__tab { padding: 4px 10px; font-size: 11px; }
  .parts__layer { padding: 4px 8px; font-size: 10px; }

  .canvas-wrap { grid-area: canvas; min-height: 0; }

  .toolbar {
    grid-area: toolbar;
    border-top: 1px solid var(--mh-border);
    grid-auto-columns: 1fr;
    padding: 2px;
  }
  .toolbar__btn { height: 36px; }

  .palette {
    grid-area: palette;
    border-left: 1px solid var(--mh-border);
    border-top: 0;
    overflow-y: auto;
    padding: 6px 6px;
  }
  .palette__sv { height: 110px; }   /* taller in landscape since column is narrow */
  .palette__hue { height: 14px; }
  .palette__row { margin-top: 6px; }
  .palette__current { width: 24px; height: 24px; }
  .swatch { width: 22px; height: 22px; }

  .actions {
    grid-area: actions;
    padding: 4px 6px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0));
  }
  .actions .mh-btn { height: 34px; font-size: 12px; }

  /* viewer.is-hidden in column layout collapses height; in landscape, collapse width instead */
  .viewer.is-hidden {
    width: 0;
    height: 100%;
    border-right: 0;
    overflow: hidden;
  }
  .viewer.is-hidden + * { /* keep parts/canvas/palette in place */ }
}