/* Playlist preview (js/preview.js): the Preview action on a playlist page and the small
   player it opens above the player bar. Colours and radii are the app's own (the device
   picker and cast dialog use the same panel). */

/* ---------- the station page action ---------- */
/* five actions on the row: a little less air between them so they hold one line on a laptop */
@media (min-width: 1281px) { .stn-actions:has(.stn-preview) { column-gap: 22px !important; } }
.stn-preview[hidden] { display: none !important; }   /* .stn-mymusic forces inline-flex */
.stn-preview.is-on { color: var(--al-accent, #C9A227); }
.stn-preview.is-on .ico { opacity: 1; }
.stn-preview.is-on:hover { opacity: .85; }

/* ---------- the panel ---------- */
.pv {
  position: fixed; right: 24px; bottom: 94px; z-index: 150;
  width: 400px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 16px 18px 14px;
  background: #1b2233; color: #f4f6fb;
  border: 1px solid #2a3348; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  font-family: inherit;
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.pv.is-in { opacity: 1; transform: none; }
.pv * { box-sizing: border-box; }
.pv button { font: inherit; cursor: pointer; }
.pv button:disabled { cursor: default; opacity: .4; }
.pv button:focus-visible, .pv-seek:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }

.pv-top { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C9A227;
}
.pv-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A227; }
.pv[data-state="playing"] .pv-dot { animation: pvPulse 1.4s ease-in-out infinite; }
.pv-count { flex: 1; font-size: 12px; font-weight: 600; color: #9aa3b5; white-space: nowrap; }
.pv-x {
  width: 32px; height: 32px; margin: -6px -8px -6px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: #9aa3b5;
  display: grid; place-items: center;
}
.pv-x svg { width: 20px; height: 20px; }
.pv-x:hover { color: #f4f6fb; background: #243044; }

.pv-now { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 12px; }
.pv-art {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
  background: #243044;
}
.pv-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-meta { flex: 1; min-width: 0; }
.pv-meta b, .pv-meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-meta b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pv-meta small { color: #9aa3b5; font-size: 12px; margin-top: 3px; }

/* the sample's own progress: its length is the preview length, never the track's */
.pv-seek {
  position: relative; height: 4px; border-radius: 2px; background: #2a3344;
  cursor: pointer; touch-action: none; margin: 0 0 8px;
}
.pv-seek::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.pv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #C9A227; }
.pv-fill::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: #f4f6fb; transform: translateY(-50%) scale(0); transition: transform .15s;
}
.pv-seek:hover .pv-fill::after, .pv-seek:focus-visible .pv-fill::after { transform: translateY(-50%) scale(1); }

.pv-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pv-time { font-size: 12px; color: #9aa3b5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-ctl { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pv-btn {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #e8edf5; display: grid; place-items: center;
}
.pv-btn svg { width: 22px; height: 22px; }
.pv-btn:hover:not(:disabled) { background: #243044; }
.pv-play { width: 40px; height: 40px; background: #C9A227 !important; color: #102018; position: relative; }
.pv-play svg { width: 20px; height: 20px; }
.pv-play:hover:not(:disabled) { filter: brightness(1.06); }
/* the button is a ring while the browser is still fetching the sample */
.pv[data-state="buffering"] .pv-play::after, .pv[data-state="loading"] .pv-play::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #C9A227;
  animation: pvSpin .8s linear infinite;
}
.pv-go {
  justify-self: end; height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #fff; color: #111; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.pv-go:hover { background: #e8ecf3; }
.pv-ghost {
  height: 34px; padding: 0 10px; border: 0; background: none; color: #9aa3b5;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pv-ghost:hover { color: #f4f6fb; }

/* the room carries on underneath: the sample is only on this device */
.pv-venue {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0; color: #8b95a8; font-size: 11px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-venue::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10l8-6 8 6v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/><path d='M10 20v-6h4v6'/></svg>") center / contain no-repeat;
}
.pv[data-state="complete"] .pv-venue, .pv[data-state="error"] .pv-venue, .pv[data-state="empty"] .pv-venue { display: none; }

/* which speaker the sample is coming out of */
.pv-out {
  display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 8px 0 0; padding: 0;
  border: 0; background: none; color: #C9A227; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
}
.pv-out span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-out em { flex: none; font-style: normal; color: #C9A227; text-decoration: underline; }
.pv-out:hover span { text-decoration: underline; }
.pv-out.is-set { color: #8b95a8; font-weight: 600; }
.pv[data-state="complete"] .pv-out, .pv[data-state="error"] .pv-out, .pv[data-state="empty"] .pv-out { display: none; }

/* the speakers this machine can play out of, once the browser has named them */
.pv-outs { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; max-height: 148px; overflow: auto; }
.pv-outs-row {
  border: 0; border-radius: 8px; background: #243044; color: #f4f6fb;
  padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-outs-row:hover { background: #2d3a52; }
.pv-outs-row.is-on { color: #C9A227; }
.pv-outs-note { margin: 4px 0 0; color: #8b95a8; font-size: 11px; line-height: 1.45; white-space: normal; }
.pv[data-state="complete"] .pv-outs, .pv[data-state="error"] .pv-outs, .pv[data-state="empty"] .pv-outs { display: none; }

/* the sequence is over, could not start, or there was nothing to sample */
.pv-end { display: none; }
.pv[data-state="complete"] .pv-end, .pv[data-state="error"] .pv-end, .pv[data-state="empty"] .pv-end { display: block; }
.pv[data-state="complete"] .pv-now, .pv[data-state="error"] .pv-now, .pv[data-state="empty"] .pv-now,
.pv[data-state="complete"] .pv-seek, .pv[data-state="error"] .pv-seek, .pv[data-state="empty"] .pv-seek,
.pv[data-state="complete"] .pv-row, .pv[data-state="error"] .pv-row, .pv[data-state="empty"] .pv-row { display: none; }
.pv-end b { display: block; font-size: 16px; font-weight: 700; margin: 2px 0 6px; }
.pv-end p { margin: 0 0 14px; color: #9aa3b5; font-size: 13px; line-height: 1.5; }
.pv-end-actions { display: flex; align-items: center; gap: 8px; }
.pv-end-actions .pv-go { justify-self: auto; }
.pv-end-actions .pv-ghost:last-child { margin-left: auto; }

/* screen-reader announcements */
.pv-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes pvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pvSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pv { transition: none; }
  .pv[data-state="playing"] .pv-dot { animation: none; }
  .pv-play::after { animation-duration: 1.6s; }
}

/* ---------- phone: full width above the player bar, clear of the tab bar ---------- */
@media (max-width: 980px) {
  .pv {
    left: 12px; right: 12px; width: auto; max-width: none;
    bottom: calc(env(safe-area-inset-bottom) + 150px);
    padding: 14px 14px 12px;
  }
  /* four ghost actions under the phone hero sit two by two rather than three and one;
     with Preview hidden (its playlist is playing) the other three stay on one line */
  .stn-phone-hero .stn-actions:has(.stn-preview:not([hidden])) {
    display: grid !important; grid-template-columns: 1fr 1fr; justify-items: center;
    gap: 6px 8px !important; width: min(88%, 360px); margin-left: auto !important; margin-right: auto !important;
  }
  /* the row has to hold the clock, three buttons and the pill on a 360px screen */
  .pv-row { grid-template-columns: auto 1fr auto; gap: 8px; }
  .pv-time { font-size: 11px; }
  .pv-go { height: 32px; padding: 0 10px; font-size: 11px; }
}