/* Copyright Ayers Electronics Inc. All rights reserved. */
/* Now Playing: the record fills the screen. Its art, stretched from a small copy, blurred and dimmed,
   is the whole field; the same art stands sharp at the left beside the title, the artist, the album
   and the transport. With no art the field is a quiet ground and the generated card takes the art's
   place at the same size. At a phone's width the art stacks above the words - the same breakpoint
   every phone-aware sheet in this client uses (parity.phone.maxWidthEpx, 767px). The air between
   things is margin: the television floor has no flex gap. */

#nowPlaying {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: var(--page-margin-vertical) var(--page-margin);
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 45%, var(--panel) 0%, var(--bg) 75%);
  color: var(--text);
}
#nowPlaying.hidden {
  display: none;
}
/* The field: a small copy of the art stretched past the edges, so the blur never shows a rim. */
#nowPlayingBackdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(36px) saturate(1.15);
  opacity: 0.6;
}
#nowPlayingBackdrop[data-missing="1"] {
  display: none;
}
/* The shade keeps the words readable over any art: darkest where the words stand, lightest behind
   the sharp art. */
.now-playing-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent 0%, var(--scrim-soft) 50%);
}
/* The head row, in the flow above the art at every width, so the art can never cover the way out:
   Back, then the screen's name. */
.now-playing-head {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
#nowPlayingClose {
  flex: none;
  white-space: nowrap;
  font-size: var(--type-label);
  letter-spacing: 0.12em;
  padding: 8px 14px;
}
.now-playing-heading {
  margin-left: 14px;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.now-playing-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.now-playing-art-wrap {
  flex: none;
  width: min(30vw, 54vh);
  height: min(30vw, 54vh);
  margin-right: 5vw;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
#nowPlayingArt {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
#nowPlayingArtMissing {
  display: none;
}
#nowPlayingArt[data-missing="1"] {
  display: none;
}
#nowPlayingArt[data-missing="1"] ~ #nowPlayingArtMissing {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
}
.now-playing-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
}
.now-playing-title {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-panel);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.now-playing-artist {
  font-size: var(--type-heading);
  color: var(--accent-text);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-playing-fact {
  font-size: var(--type-label);
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-playing-album {
  font-size: var(--type-body);
  color: var(--on-panel-variant);
  margin-top: 8px;
}
.now-playing-fact.hidden {
  display: none;
}
#nowPlayingLyricsNotice {
  color: var(--muted);
  margin-top: 12px;
}
#nowPlayingLyricsNotice.hidden {
  display: none;
}
.now-playing-scrub {
  display: flex;
  align-items: center;
  margin-top: 22px;
}
.now-playing-scrub > * + * {
  margin-left: 10px;
}
.now-playing-time {
  font-size: var(--type-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
}
/* The seek slider (js/now-playing-seek.js): the thin bar inside a taller box a press lands on. */
.now-playing-seek {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 24px;
  border-radius: var(--radius-small);
  cursor: pointer;
}
.now-playing-seek:focus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
}
.now-playing-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border-soft);
  border-radius: var(--radius-small);
}
.now-playing-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--radius-small);
}
/* Previous, the big Play, Next; then the run's Shuffle and Repeat; then Queue, Lyrics and More. A
   longer language wraps the row rather than running it off the screen. */
.now-playing-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.now-playing-row > * {
  margin: 0 10px 10px 0;
}
.now-playing-row > .now-playing-group {
  margin-left: 14px;
}
.now-playing-btn {
  background: var(--elevated);
  color: var(--on-elevated);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font-size: var(--type-body);
  cursor: pointer;
}
.now-playing-btn:disabled,
.now-playing-icon:disabled {
  opacity: 0.45;
  cursor: default;
}
/* The transport: the sprite's icon buttons, one square the info screen's button height, Play or Pause
   the one lit control; a mode that is on (Shuffle, Repeat) is drawn in the accent. */
.now-playing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--info-button-h);
  height: var(--info-button-h);
  padding: 0;
  border: 1px solid var(--border-soft);
}
.now-playing-icon-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.now-playing-more {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.now-playing-more.hidden {
  display: none;
}
.now-playing-more > * + * {
  margin-top: 10px;
}
.now-playing-more > .now-playing-btn {
  margin-right: 10px;
}
.now-playing-more-heading {
  color: var(--on-panel-variant);
}
/* After a minute untouched the words and the row fade and the art alone stands. A press anywhere on
   the surface (js/now-playing-music.js wake()) brings them back; the buttons stay reachable
   underneath, unseen, for a keyboard tab that lands on one directly. */
#nowPlaying.idle .now-playing-body,
#nowPlaying.idle .now-playing-head {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* A phone: the art above one title line, one artist line, the bar, then the row, all centred -
   finamp's player_screen.dart and feishin's mobile-fullscreen-player.tsx lay a phone player out the
   same way. */
@media (max-width: 767px) {
  #nowPlaying {
    padding: 20px 20px 24px;
    overflow-y: auto;
  }
  .now-playing-stage {
    flex-direction: column;
  }
  .now-playing-art-wrap {
    width: min(72vw, 40vh);
    height: min(72vw, 40vh);
    margin: 0 0 20px;
  }
  .now-playing-body {
    width: 100%;
    text-align: center;
  }
  .now-playing-title {
    font-size: var(--type-heading);
  }
  .now-playing-artist {
    font-size: var(--type-body);
  }
  .now-playing-row {
    justify-content: center;
  }
  .now-playing-row > .now-playing-group {
    margin-left: 0;
  }
}