/* Small players and lists use square artwork; only the main turntable keeps its vinyl. */
.album-art.cover-art {
  border: 0;
  border-radius: 9px;
  transform: none;
  box-shadow: 0 3px 10px #26415d14;
}
.album-art.cover-art img { object-fit: cover; object-position: 70% center; }
.album-art.cover-art::after { content: none; }
.song-title { min-width: 0; }
.song-title > div:last-child { min-width: 0; }
.song-title :is(strong, small) { overflow: hidden; text-overflow: ellipsis; }
.song-title .album-art.cover-art { width: 47px; height: 47px; border-radius: 9px; }

/* The height is measured by player-ui.js, including the gap beneath the player. */
:root {
  --player-clearance: 0px;
  --player-panel-bottom: 20px;
  --player-panel-left: 12px;
  --player-panel-width: 360px;
  --player-panel-available-height: 60svh;
}
body.has-player { padding-bottom: var(--player-clearance); }
.weather-tower + .section { padding-top: 52px; }

.mini-player {
  left: auto;
  right: max(20px, calc((100% - 1180px) / 2));
  transform: none;
  grid-template-columns: minmax(150px, 1fr) minmax(240px, 1.2fr) auto auto;
  grid-template-areas: "info center discovery actions";
  gap: 16px;
  width: min(1180px, calc(100% - 40px));
  padding: 13px 16px;
}
.mini-player.is-moving { overflow: clip; }
.mini-info { grid-area: info; gap: 11px; max-width: none; }
.mini-info .album-art.cover-art { width: 49px; height: 49px; border-radius: 9px; }
.mini-copy { min-width: 0; }
.mini-info strong { font-size: 13px; line-height: 1.5; }
.mini-info small { margin-top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.5; }
.mini-center { grid-area: center; min-width: 0; }
:is(.mini-center, .music-player-controls) .transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.track-transport { display: flex; align-items: center; gap: 6px; }
:is(.mini-center, .music-player-controls) :is(.icon-button, .round-play) {
  width: 44px;
  height: 44px;
  flex: none;
}
:is(.mini-center, .music-player-controls) .round-play {
  background: var(--blue);
  color: var(--paper);
}
:is(.mini-center, .music-player-controls) .round-play svg { width: 19px; height: 19px; }
.mini-center .seek-row { margin-top: 1px; }
.playback-modes { display: flex; align-items: center; gap: 6px; flex: none; }
.playback-mode { position: relative; display: flex; cursor: pointer; }
.playback-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mode-label { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: inherit; transition: background-color .2s ease, color .2s ease; }
.mode-label svg { width: 18px; height: 18px; flex: none; }
.playback-mode:hover .mode-label { background: var(--blue-soft); }
.playback-mode input:checked + .mode-label { color: var(--blue); background: var(--blue-soft); }
.playback-mode input:focus-visible + .mode-label { outline: 2px solid #6a97b7; outline-offset: 2px; }
.mini-actions { grid-area: actions; gap: 5px; }
.mini-player .mini-actions .icon-button { width: 44px; height: 44px; flex: none; }
.mini-actions input { width: 48px; }
.mini-actions .volume-control { display: inline-flex; align-items: center; }
.mini-discovery { grid-area: discovery; display: flex; align-items: center; gap: 4px; }
.mini-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 77px;
  padding: 0 7px;
  color: #426c89;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.mini-picker svg { width: 15px; height: 15px; flex: none; }
.mini-picker:hover:not(:disabled), .mini-picker[aria-expanded="true"] { background: #eaf4fa; }
.mini-picker:disabled, .playback-mode:disabled { opacity: .45; cursor: not-allowed; }
:is(.mini-player, .music-player-controls, .player-picker) :is(button, select, input):focus-visible {
  outline: 2px solid #6a97b7;
  outline-offset: 2px;
}

.mini-player.collapsed {
  width: min(380px, calc(100% - 24px));
  right: 12px;
  left: auto;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "info discovery actions";
  gap: 4px;
  padding: 8px 10px;
}
.mini-player.collapsed .mini-info { gap: 9px; }
.mini-player.collapsed .mini-info .album-art.cover-art { width: 36px; height: 36px; flex: none; }
.mini-player.collapsed .mini-info small { display: block; margin-top: 1px; }
.mini-player.collapsed .mini-actions { gap: 0; }
.mini-player.collapsed .mini-actions :is(.volume-control, input) { display: none; }
.mini-player.collapsed .mini-discovery { justify-content: flex-start; gap: 0; border: 0; padding: 0; }
.mini-player.collapsed .mini-picker { width: 44px; min-width: 44px; height: 44px; padding: 0; gap: 0; }
.mini-player.collapsed .mini-picker svg { width: 18px; height: 18px; }
.mini-player.collapsed .picker-label { display: none; }

.music-player-controls {
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
.music-player-controls .seek-row { margin-top: 6px; }
.music-player-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 5px 8px;
  margin-top: 12px;
}
.music-player-actions .mini-picker { width: 100%; }
.music-player-actions :is(label, .volume-control) {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  color: var(--muted);
  font-size: 11px;
}
.music-player-actions :is(label, .volume-control) svg { width: 17px; height: 17px; flex: none; }
.music-player-actions input[type="range"] { width: 120px; }

.queue-panel.player-picker {
  bottom: var(--player-panel-bottom);
  left: var(--player-panel-left);
  right: auto;
  width: var(--player-panel-width);
  max-width: calc(100% - 24px);
  max-height: min(60svh, var(--player-panel-available-height));
  padding: 18px;
  overscroll-behavior: contain;
}
.player-picker h3 { font-size: 16px; }
.player-picker :is(.picker-subtitle, .queue-subtitle) {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  text-align: left;
}
.picker-option:hover, .picker-option[aria-pressed="true"] { background: var(--blue-soft); }
.picker-option .album-art.cover-art { width: 36px; height: 36px; border-radius: 7px; flex: none; }
.picker-copy { min-width: 0; flex: 1; }
.picker-copy :is(strong, small) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.picker-copy strong { font-size: 12px; font-weight: 550; line-height: 1.5; }
.picker-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.picker-option > :is(i, svg) { flex: none; width: 17px; color: var(--blue); }
.picker-option > i { display: inline-flex; align-items: center; justify-content: center; }
.picker-option > i svg { width: 16px; height: 16px; }
.picker-empty { padding: 20px 6px; color: var(--muted); font-size: 12px; line-height: 1.8; }

@media (max-width: 1050px) {
  .mini-player:not(.collapsed) {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 1.15fr) auto;
    grid-template-areas: "info center actions" "discovery center actions";
    gap: 3px 14px;
  }
  .mini-player:not(.collapsed) .mini-discovery { margin-left: 0; }
  .mini-player:not(.collapsed) .mini-info .album-art.cover-art { width: 42px; height: 42px; }
  .mini-player:not(.collapsed) .mini-info { gap: 10px; }
  .mini-player:not(.collapsed) .mini-picker { min-width: 70px; padding-inline: 4px; gap: 4px; }
  .mini-player:not(.collapsed) .mini-actions { flex-wrap: wrap; width: 93px; justify-content: center; }
  .mini-player:not(.collapsed) .mini-actions .volume-control { width: auto; justify-content: center; gap: 5px; }
  .mini-player:not(.collapsed) .mini-actions input { width: 59px; }
  .music-player-controls .transport { gap: 6px; }
}

@media (max-width: 760px) {
  body.has-player { padding-bottom: var(--player-clearance); }
  .weather-tower + .section { padding-top: 38px; }
  .song-title .album-art.cover-art { width: 42px; height: 42px; }
  /* Keep the touch target beside the duration, outside the artwork and title. */
  .music-table-header, .music-song {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    column-gap: 8px;
  }
  .music-table-header > :first-child { display: none; }
  .music-table-header > :nth-child(2), .music-song > .song-title { grid-column: 1; grid-row: 1; }
  .music-song > .icon-button { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .music-table-header > :last-child, .music-song > .track-time {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    text-align: right;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .music-song .song-title .album-art { flex: none; }
  .music-song .song-title :is(strong, small) { white-space: nowrap; }
  .mini-player, .mini-player.collapsed {
    bottom: 10px;
    right: 10px;
    width: calc(100% - 20px);
  }
  .mini-player:not(.collapsed) {
    padding: 10px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info actions" "center center" "discovery discovery";
    gap: 4px 8px;
  }
  .mini-player .mini-info { max-width: none; }
  .mini-info strong { font-size: 12px; }
  .mini-info small { font-size: 10px; }
  .mini-player:not(.collapsed) .mini-actions { width: auto; flex-wrap: nowrap; gap: 2px; }
  .mini-player:not(.collapsed) .mini-actions .mini-toggle { display: none; }
  .mini-player:not(.collapsed) .mini-actions .volume-control { display: inline-flex; gap: 3px; }
  .mini-player:not(.collapsed) .mini-actions .volume-control svg { display: none; }
  .mini-player:not(.collapsed) .mini-actions input { display: block; width: 35px; }
  .mini-player:not(.collapsed) .mini-center { display: block; }
  .mini-player:not(.collapsed) .mini-center .transport { gap: 6px; }
  .mini-player:not(.collapsed) .mini-center .round-play { width: 44px; height: 44px; }
  .mini-player:not(.collapsed) .mini-center .seek-row { margin-top: 1px; }
  .mini-player:not(.collapsed) .mini-discovery { margin: 0; justify-content: center; gap: 4px; border: 0; padding: 0; }
  .mini-player:not(.collapsed) .mini-picker { min-width: 72px; padding-inline: 5px; gap: 5px; }
  .mini-player.collapsed { padding: 7px 8px; gap: 4px; }
  .mini-player.collapsed .mini-info { gap: 6px; }
  .mini-player.collapsed .mini-info .album-art.cover-art { width: 32px; height: 32px; }
  .music-player-controls { max-width: 330px; margin: 18px auto 0; }
  .queue-panel.player-picker {
    padding: 15px;
  }
}

@media (max-width: 360px) {
  .mini-player:not(.collapsed) { column-gap: 6px; }
  .mini-player:not(.collapsed) .mini-discovery { gap: 0; }
  .mini-player:not(.collapsed) .mini-picker { min-width: 64px; padding-inline: 6px; }
}

[data-motion="reduced"] :is(.mini-picker, .mode-label) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.mini-picker, .mode-label) { transition: none; }
}