/* Mobile + touch fixes. Everything is either a no-op on desktop (env() insets are 0) or scoped to
   small screens / touch, so the desktop look is unchanged. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.nav { padding-left:max(5vw, env(safe-area-inset-left)); padding-right:max(5vw, env(safe-area-inset-right)); }
section:not(.hero) { padding-left:max(5vw, env(safe-area-inset-left)); padding-right:max(5vw, env(safe-area-inset-right)); }
.hero-text { padding-left:max(5vw, env(safe-area-inset-left)); padding-right:max(5vw, env(safe-area-inset-right)); }
footer { padding-bottom:calc(8vh + env(safe-area-inset-bottom)); }
.toast { bottom:calc(24px + env(safe-area-inset-bottom)); }
button, a, input { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#title span.tap { transform:translateY(-14px) rotate(-3deg); font-style:italic; }
/* Hover effects stick after a tap on touch screens; keep them for mice only. */
@media (hover:none) {
  .card:hover { background:var(--paper); }
  .puzzle:not(.solved) .tile.movable:hover { background:#fffaf2; }
}
@media (max-width:640px) {
  .nav { padding-top:env(safe-area-inset-top); padding-bottom:0; font-size:13px; }
  .nav nav a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 6px; margin-left:0; }
  section:not(.hero) { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .small { font-size:13px; }
  .card i { font-size:15px; }
  .btn { font-size:15px; min-height:44px; padding:10px 18px; }
  .seq-controls { font-size:15px; }
  .seq-controls label { display:flex; align-items:center; gap:10px; flex:1 1 100%; }
  .seq-controls input[type=range] { flex:1; height:44px; }
  /* 16 steps don't fit as 16 columns on a phone (17px cells). Wrap each instrument into two bars of 8
     under its own label so every step is a ~44px target. */
  .seq { grid-template-columns:repeat(8, 1fr); gap:3px 1px; }
  .seq .label { grid-column:1 / -1; font-size:13px; margin:10px 0 2px; }
  .seq .cell { aspect-ratio:auto; min-height:44px; }
  .puzzle-side p { font-size:16px; }
  .chip { font-size:15px; min-height:44px; padding:8px 14px; }
  .fit-controls h3 { font-size:13px; }
  .fit-controls { min-width:0; flex-basis:100%; }
  .figure { margin:0 auto; }
  .notes div { gap:14px; align-items:baseline; }
  .notes dt { font-size:13px; flex:none; }
  footer { font-size:13px; }
  .toast { max-width:calc(100vw - 32px); text-align:center; }
}