/* Intrinsic button widths keep the right group out of the playback controls. */
@media (min-width: 901px) {
  body.web-adapter:not(.immersive-mode) #controls {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    column-gap: 20px;
  }
  body.web-adapter:not(.immersive-mode) .control-cluster { gap: 10px; }
  body.web-adapter:not(.immersive-mode) .control-cluster.actions { grid-area: 1 / 1; }
  body.web-adapter:not(.immersive-mode) .control-cluster.transport { grid-area: 1 / 2; }
  body.web-adapter:not(.immersive-mode) .control-cluster.modes { grid-area: 1 / 3; }
  body.web-adapter:not(.immersive-mode) .control-cluster.transport {
    width: max-content;
    gap: 10px;
  }
  body.web-adapter:not(.immersive-mode) .control-cluster.modes {
    justify-self: end;
    width: max-content;
    flex-wrap: nowrap;
    gap: 10px;
  }
  body.web-adapter:not(.immersive-mode) #controls .ctrl-btn:not(#play-btn):not(.quality-pill) {
    width: 36px;
    min-width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
  body.web-adapter:not(.immersive-mode) #lyric-timing-control,
  body.web-adapter:not(.immersive-mode) #volume-control {
    width: 36px;
    min-width: 36px;
    flex: 0 0 36px;
  }
  body.web-adapter:not(.immersive-mode) #time-display { min-width: 82px; flex: 0 0 auto; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body.web-adapter:not(.immersive-mode) #controls {
    column-gap: 12px;
  }
  body.web-adapter:not(.immersive-mode) .control-cluster,
  body.web-adapter:not(.immersive-mode) .control-cluster.transport,
  body.web-adapter:not(.immersive-mode) .control-cluster.modes { gap: 8px; }
  body.web-adapter:not(.immersive-mode) #controls .ctrl-btn:not(#play-btn):not(.quality-pill),
  body.web-adapter:not(.immersive-mode) #lyric-timing-control,
  body.web-adapter:not(.immersive-mode) #volume-control {
    width: 34px;
    min-width: 34px;
    flex-basis: 34px;
  }
  body.web-adapter:not(.immersive-mode) .control-track { gap: 8px; }
  body.web-adapter:not(.immersive-mode) .control-cover { width: 44px; height: 44px; flex-basis: 44px; }
}