/* Align tablet metadata against the actions, with a small breathing space. */
@media(min-width:701px) and (max-width:1180px){
  #beatList .beat-metadata{align-items:flex-end;text-align:right;padding-right:5px}
  #beatList .beat-spec{justify-content:flex-end}
  #beatList .beat-genres{justify-content:flex-end}
  #playerBar .player-mobile-metadata{align-items:flex-end;text-align:right;padding-right:7px}
  #playerBar .player-info .player-spec-mini{justify-content:flex-end}
  #playerBar #playerGenres{justify-content:flex-end}
}
/* A narrow desktop window still has a mouse; do not change the phone layout. */
@media(max-width:700px) and (hover:hover) and (pointer:fine){
  #beatList .beat-metadata{grid-column:3/4}
  #beatList .beat-genres{justify-content:flex-end;text-align:right;padding-right:3px!important}
  #playerBar .player-mobile-metadata{align-items:flex-end;justify-content:flex-end;text-align:right;padding-right:5px}
  #playerBar .player-info .player-spec-mini{justify-content:flex-end}
  #playerBar #playerGenres{justify-content:flex-end}
}
/* Keep the original title artwork; align the three mobile text blocks. */
@media(max-width:700px){
  #contactInfo .contact-intro{align-items:stretch}
  #contactInfo .contact-wordmark{align-self:flex-start;text-align:left}
  #contactInfo .contact-tagline{width:100%;max-width:none;text-align:center;margin:18px 0 0;align-self:center}
  #contactInfo .contact-alternative{position:static;max-width:100%;margin-top:26px;align-self:flex-end;text-align:right;justify-items:end}
}
#contactForm .contact-line{border:1px solid #c1c3c6;border-radius:3px;padding:10px 15px;min-height:44px}
#contactForm .contact-line:focus{border-color:#fff;box-shadow:0 0 0 1px #ffffff14}
#contactForm .contact-line:user-invalid{border-color:#e3a49a}
/* Give the photo intrinsic height, including in mobile WebKit grid layout. */
@media(max-width:800px){
  #aboutInfo .about-portrait{display:block;min-height:0;height:auto;aspect-ratio:auto;border:1px solid #292b2e;border-radius:5px}
  #aboutInfo .about-portrait img{position:static;inset:auto;display:block;width:100%;height:auto;aspect-ratio:2048/1145;object-fit:contain;object-position:center}
}
/* Avoid the native WebKit tap overlay over delegated click targets. */
@media(hover:none),(pointer:coarse){
  html,body,body *{-webkit-tap-highlight-color:transparent}
  html,body{overflow-x:clip}
  .auth-panel input,.contact-form input,.contact-form textarea,.contact-form select{font-size:16px}
}
.auth-forgot{display:block;width:max-content;margin:13px 0 0 auto;color:#b4b7bd;font-size:11px;text-underline-offset:4px}
.auth-forgot:hover{color:#fff}
.auth-forgot:focus-visible{outline:1px solid #ddd;outline-offset:5px}
/* A clear current-track surface on touch phones; desktop stays unchanged. */
@media(max-width:700px) and (pointer:coarse){
  #beatList .beat-row{transition:background-color .18s ease,box-shadow .18s ease}
  #beatList .beat-row.is-current{background:#202124;box-shadow:inset 2px 0 0 #a6a8ae;border-radius:5px}
}
@media(prefers-reduced-motion:reduce){#beatList .beat-row{transition:none}}