/* PLAYER-01 — controls r3. Uses DS-001 v02 tokens; see design/COMPONENTS.md. */
.player { --seek-accent:var(--accent); }
:root[data-theme=royal] .player { --seek-accent:#ffe1a0; }
:root[data-theme=plum] .player { --seek-accent:#ffd1e8; }
.player[hidden], #reopen-player[hidden] { display:none!important; }
.player .player-top, .player.minimised .player-top { flex-wrap:wrap; min-width:0; width:100%; }
.player-view-controls { display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.player-view-controls button { flex:0 0 auto; white-space:normal; }
.player .player-top .now-text { flex:1 1 220px!important; }
.player .now-text, .player #now-artist { overflow-wrap:anywhere; }
.player.minimised #now-artist { max-width:100%; }
.player.minimised #source-link:not([hidden]) { display:inline-block; }
.player .player-message { margin:0 auto; width:min(760px,100%); }
.player .player-message:empty { display:none; }
.player .player-recovery, .player.minimised:has(.player-message:not(:empty)) .player-recovery { display:none; }
.player[data-error=true] .player-recovery { display:flex!important; flex-wrap:wrap; }
.player[data-error=true] .player-message { color:var(--error); }
.player.minimised .player-view-controls .quiet { padding:8px 10px; }
.player:not(.focus) #now-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player .provider-shell { flex-shrink:0; }
.player.minimised #focus-button { display:inline-flex!important; }
.player.minimised:not(.focus) { display:flex; flex-direction:column; gap:8px; }

/* A single control layout for compact, expanded and Focus. No shrinking circles. */
.player .playback, .player.minimised .playback { display:flex; flex-direction:column; width:min(760px,100%); min-width:0; gap:4px; flex-shrink:0; }
.player .transport { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:12px; width:100%; }
.player .transport button, .recording-actions .tile-play {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 48px; width:48px; height:48px; min-width:48px; min-height:48px;
  padding:0; border-radius:50%; aspect-ratio:1; line-height:1;
}
.player .transport .play-button { flex-basis:56px; width:56px; height:56px; min-width:56px; min-height:56px; }
.player .transport svg { width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.player .play-button svg { fill:currentColor; stroke:none; }
.player .play-button .pause-icon, .player .play-button[data-playing=true] .play-icon { display:none; }
.player .play-button[data-playing=true] .pause-icon { display:block; }
.player .seek-step { position:relative; color:var(--text); }
.player .seek-step svg { width:32px; height:32px; position:absolute; top:4px; }
.player .seek-step span { position:absolute; bottom:7px; font:600 11px/1 system-ui,sans-serif; }
.player .transport .queue-control { color:var(--muted); }
.player.minimised .transport .queue-control { display:none; }
.player .timeline, .player.minimised .timeline {
  display:flex!important; align-items:center; flex:0 0 auto; width:100%; min-height:44px;
  gap:10px; margin:0; color:var(--text); font:600 .875rem/1.3 system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}
.player .timeline span { flex:none; min-width:3.4em; }
.player .timeline #duration { text-align:right; }
.player .timeline input {
  appearance:none; -webkit-appearance:none; flex:1 1 0; min-width:0; width:100%;
  height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; cursor:pointer; touch-action:pan-y;
}
.player .timeline input::-webkit-slider-runnable-track { height:10px; border-radius:99px; background:linear-gradient(to right,var(--seek-accent) var(--progress,0%),var(--line) var(--progress,0%)); }
.player .timeline input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:28px; height:28px; margin-top:-9px; border-radius:50%; background:var(--seek-accent); border:3px solid var(--surface); box-shadow:0 0 0 2px var(--seek-accent); }
.player .timeline input::-moz-range-track { height:10px; border-radius:99px; background:var(--line); }
.player .timeline input::-moz-range-progress { height:10px; border-radius:99px; background:var(--seek-accent); }
.player .timeline input::-moz-range-thumb { box-sizing:border-box; width:28px; height:28px; border-radius:50%; background:var(--seek-accent); border:3px solid var(--surface); box-shadow:0 0 0 2px var(--seek-accent); }
.player .timeline input:disabled { cursor:default; opacity:.5; }
.player .seek-note { margin:4px 0 0; color:var(--text-muted); text-align:center; font-size:.75rem; line-height:1.5; }
.player:not(.minimised) .player-extra { display:flex; gap:8px; flex-wrap:wrap; }
.player:not(.minimised) .repeat-button { display:inline-flex; align-items:center; gap:6px; }
@media(max-width:700px) {
  .player:not(.focus) { gap:8px; }
  .player .player-top .now-text { flex-basis:100%!important; }
  .player-view-controls { width:100%; margin:0; justify-content:space-between; }
  .player-view-controls button { flex:1; min-width:0; }
  .player .player-message { max-height:none; overflow:visible; }
  .player .provider-shell iframe { max-width:100%; }
  .player.focus { overflow-y:auto; }
  .player .transport { gap:8px; }
}
@media(max-width:360px) {
  .player .transport { gap:4px; }
  .player .timeline { gap:6px; }
  .player.focus .playback { padding:12px 8px; }
}