/* Touch-friendly spacing and minimum target sizes */
:root {
  --touch-min-size: 44px;
  --touch-pad-y: 12px;
  --touch-pad-x: 14px;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.action-button,
.protocol-button,
.nav-button,
[data-mobile-toggle],
[data-mobile-close] {
  min-height: var(--touch-min-size);
  min-width: var(--touch-min-size);
  padding: var(--touch-pad-y) var(--touch-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link {
  min-height: var(--touch-min-size);
  padding: var(--touch-pad-y) var(--touch-pad-x);
  display: inline-flex;
  align-items: center;
}

a.action-button,
a.protocol-button,
a.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  min-height: var(--touch-min-size);
  padding: 10px 12px;
}

/* Media should never force horizontal scroll */
img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

/* SoundCloud embeds: reduce default height on phones */
@media (max-width: 640px) {
  iframe[src*="soundcloud.com/player"] {
    height: 240px !important;
  }
}