/* css/now-playing.css — mirrors + controls the driver's Spotify playback */

/* Reuses .sleep-btn's glass-circle recipe (css/layout.css), mirrored to the
 * left side, one row below the driver badge's band — the same
 * stacked-button rhythm the sleep/theme/driver-info column already uses on
 * the right. */
.now-playing-back-btn {
  top: calc(var(--space-md) + 3.25rem + var(--space-xs));
  left: var(--space-md);
  right: auto;
}

.now-playing-back-btn svg {
  transform: rotate(180deg);
}

.now-playing-back-btn[hidden] {
  display: none;
}

.now-playing-body {
  flex: 1;
  min-height: 0; /* without this, a flex item defaults to min-height:auto and grows
                    to fit tall content instead of being clamped to .panel's height
                    — which would push the grid-carousel views past needing their
                    own vertical scroll and make .panel scroll as a whole instead,
                    taking the search header/mode toggle off-screen with it. */
  display: flex;
}

.now-playing-layout {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

@media (orientation: portrait) {
  .now-playing-layout {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

.album-art-frame {
  position: relative;
  flex: none;
  width: clamp(9rem, 22vw, 15rem);
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-card);
}

/* Now Playing's own motif — a faint "vinyl groove" ring, distinct from
 * Journey's map corner glyph, Weather's isobar ring, and Discover's
 * editorial byline rule. */
.album-art-frame__motif {
  position: absolute;
  inset: 8%;
  z-index: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0,
    transparent 7%,
    var(--color-accent-faint) 7.4%,
    transparent 7.8%
  );
  opacity: 0.5;
  pointer-events: none;
}

.album-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-art--empty {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, var(--color-accent-faint), var(--color-surface-raised));
}

.track-info {
  flex: 1;
  min-width: 0;
}

.track-title {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  margin-bottom: 0.3rem;
}

.track-artist {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  margin-bottom: var(--space-md);
}

.progress-track {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.progress-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.playback-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (orientation: landscape) {
  .playback-controls {
    justify-content: flex-start;
  }
}

/* Phase 4 (docs/plan/00-implementation-plan.md §7.4): a calm, persistent
   note for free-tier Spotify accounts — playback controls already
   silently no-op (204, no effect) rather than error for these, so this
   note is the honest explanation, not a blocking state. */
.now-playing-premium-note {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

@media (orientation: landscape) {
  .now-playing-premium-note {
    text-align: left;
  }
}

.control-btn {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-hairline-faint);
  color: var(--color-text-secondary);
}

.control-btn--secondary {
  width: 3rem;
  height: 3rem;
}

.control-btn--secondary svg {
  width: 1.1rem;
  height: 1.1rem;
}

.control-btn--primary {
  width: 4.25rem;
  height: 4.25rem;
  background: var(--color-accent-faint);
  border-color: var(--color-hairline);
  color: var(--color-accent);
}

.control-btn--primary svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* ---- Spotify search ------------------------------------------------------ */

.now-playing-search {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.search-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.search-back-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  transform: rotate(180deg);
}

.search-title {
  font-family: var(--font-serif);
  font-size: var(--text-title);
}

.search-form {
  margin-bottom: var(--space-md);
}

.search-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-hairline-faint);
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* A true segmented toggle, not a jump-to-scroll nav — switching modes
 * swaps which grid-carousel is mounted below, never scrolls. */
.search-mode-toggle {
  align-self: stretch;
  justify-content: center;
}

.search-mode-toggle__btn:disabled {
  opacity: 0.4;
}

/* ---- Shared grid-carousel mount --------------------------------------
 * The mount point for js/components/carousel.js's paginateToGridPages() +
 * createCarousel() — used for search results, the driver's playlists, and
 * a playlist's own tracks. flex:1 gives it a real measurable box even
 * before any tiles exist (paginateToGridPages() measures this box to
 * decide how many tiles fit per page), and there is deliberately no
 * overflow-y here — paging is left/right via the carousel, never a
 * vertical scroll. */
.search-results-mount,
.playlist-grid-mount,
.playlist-tracks-mount {
  flex: 1;
  min-height: 0;
}

.search-result-tile,
.playlist-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-hairline-faint);
}

.search-result-tile__art,
.playlist-tile__art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.search-result-tile__art--empty,
.playlist-tile__art--empty {
  background: radial-gradient(circle, var(--color-accent-faint), var(--color-surface-raised));
}

.search-result-tile__title,
.playlist-tile__name {
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.search-result-tile__subtitle {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
}

/* ---- Empty-state action row ------------------------------------------- */

.now-playing-empty-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}