/* Music-list spacing, measured against the signed-in reference on 22 October.
   Keep the waveform renderer and the separate stem-mixer layout intact. */
.cat{max-width:1760px}
@media (min-width:1125px){
  body.sb-on .cat{padding-left:32px;padding-right:32px}
  .rows:not(.deskroom){gap:8px;padding-top:20px}
  .rows:not(.deskroom) .row{
    grid-template-columns:22px 60px minmax(170px,196px) minmax(0,1fr) 64px 140px auto;
    column-gap:18px;padding-top:10px;padding-bottom:10px;min-height:100px;
    contain-intrinsic-size:auto 106px;
  }
  .rows:not(.deskroom) .row .tools .ico{width:40px}
  .rows:not(.deskroom) .row .tags .g,
  .rows:not(.deskroom) .row .tags .m{-webkit-line-clamp:2}
}
@media (min-width:1125px) and (max-width:1679px){
  .rows:not(.deskroom) .row{
    grid-template-columns:22px 60px minmax(170px,196px) minmax(0,1fr) 64px auto;
    column-gap:16px;
  }
  .rows:not(.deskroom) .row .tags{display:none}
  .rows:not(.deskroom) .row .tools .ico{width:36px}
}
@media (min-width:1125px) and (max-width:1365px){
  body.sb-on .cat{padding-left:24px;padding-right:24px}
  .rows:not(.deskroom) .row{
    grid-template-columns:22px 60px minmax(160px,180px) minmax(0,1fr) 60px auto;
    column-gap:14px;
  }
  .rows:not(.deskroom) .row .tools .ico{width:34px}
}
@media (min-width:1125px) and (pointer:coarse){
  .rows:not(.deskroom) .row .tools .ico{width:44px}
}
@media (min-width:1125px) and (max-width:1279px){
  .rows:not(.deskroom) .row{
    grid-template-columns:22px 60px 160px minmax(0,1fr) 60px 176px;
    column-gap:12px;
  }
  .rows:not(.deskroom) .row .tools{display:grid;grid-template-columns:repeat(4,44px);gap:0}
  .rows:not(.deskroom) .row .tools .ico{width:44px;height:44px}
}
/* Retain every action on tablets without squeezing the title or overflowing. */
@media (min-width:621px) and (max-width:1124px){
  .cat{padding-left:24px;padding-right:24px}
  .rows:not(.deskroom) .row{
    grid-template-columns:22px 60px minmax(0,1fr) 60px 176px;
    column-gap:12px;min-height:88px;contain-intrinsic-size:auto 88px;
  }
  .rows:not(.deskroom) .row .wave,
  .rows:not(.deskroom) .row .tags{display:none}
  .rows:not(.deskroom) .row .tools{display:grid;grid-template-columns:repeat(4,44px);gap:0}
  .rows:not(.deskroom) .row .tools .ico{width:44px;height:44px}
}
@media (min-width:621px) and (max-width:900px){
  .brand.topnav{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .brand.topnav .tn-links{justify-self:start;flex-wrap:wrap;max-width:100%;gap:14px 20px}
}