/* music_embed.css — the bring-your-own-Spotify panel.
 *
 * Mounts on two surfaces with different palettes: the gym cockpit (gold --cy) and the dashboard
 * (blue --action, multi-theme). Only --bg/--text/--line are named the same on both, so the panel
 * ADOPTS ITS HOST'S ACCENT through a fallback chain rather than hardcoding one brand colour and
 * fighting whichever theme it lands in. Every value degrades to a literal, so it is also correct
 * on a surface that defines no tokens at all.
 *
 * The resting state is deliberately INERT — hollow dot, muted readout, no glow. Most media
 * widgets shout "play me"; this one is powered-down until you act, because that is literally
 * true: nothing is requested from Spotify until Play is pressed. The state line is the panel's
 * one loud idea; everything around it stays quiet.
 */

.music-embed-panel {
  --me-accent: var(--cy, var(--action, #e0b271));
  --me-text: var(--text, #eef2f8);
  --me-line: var(--line, rgba(255, 255, 255, 0.08));
  --me-muted: var(--muted, color-mix(in srgb, var(--me-text) 58%, transparent));
  --me-display: var(--font-display, var(--serif, ui-sans-serif, system-ui, sans-serif));
  --me-body: var(--font-body, var(--sans, ui-sans-serif, system-ui, sans-serif));
  --me-mono: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid var(--me-line);
  border-radius: 14px;
  background: var(--card, var(--panel, transparent));
}

.music-embed-panel > h2,
.music-embed-panel > h3 {
  margin: 0 0 10px;
  font-family: var(--me-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--me-muted);
}

/* Input grows, control stays put. Stacks under 380px so the tap targets never crush. */
.me-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.me-link {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px; /* WCAG 2.5.5 tap floor */
  padding: 0 12px;
  font-family: var(--me-body);
  font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  color: var(--me-text);
  background: color-mix(in srgb, var(--me-text) 6%, transparent);
  border: 1px solid var(--me-line);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.me-link::placeholder { color: var(--me-muted); }

.me-link:focus-visible,
.me-play:focus-visible,
.me-open:focus-visible {
  outline: 2px solid var(--me-accent);
  outline-offset: 2px;
}

.me-play {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--me-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0d0e12;
  background: var(--me-accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.me-play:hover { filter: brightness(1.08); }

/* THE SIGNATURE: a machine readout of the privacy contract. Hollow dot = nothing fetched. */
.me-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-family: var(--me-mono);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--me-muted);
}

.me-note::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor; /* hollow: inert */
}

.music-embed-panel[data-me-state="live"] .me-note {
  color: var(--me-accent);
}

.music-embed-panel[data-me-state="live"] .me-note::before {
  background: currentColor; /* filled: live */
  border-color: currentColor;
}

.music-embed-panel[data-me-state="error"] .me-note {
  color: var(--warn, #f59e0b);
}

/* FULL player — artwork, track list, scrubbing — not the compact mini bar. The 352px frame is
 * kept; what was broken is that the iframe painted WHITE wherever Spotify had not yet drawn
 * (during load, and below a short list), which on the dark cockpit read as a torn-out slab.
 * Painting the element's own backdrop in Spotify's near-black means unfilled and loading area
 * matches the player instead of flashing white. */
.me-frame:empty { display: none; }

.me-frame iframe {
  display: block;
  width: 100%;
  height: 352px;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  background: #121212;
  color-scheme: normal; /* keep Spotify's own chrome out of the host theme's inversion */
}

/* The handoff. On iOS a tab that locks or backgrounds stops playing, so the embed cannot carry a
 * whole session — this hands the same {kind,id} to the native app, which owns background audio,
 * lock-screen controls, and the listener's full library. */
.me-open {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--me-body);
  font-size: 0.78rem;
  line-height: 44px; /* tap floor without changing the inline rhythm */
  color: var(--me-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.me-open[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .me-play { transition: none; }
}

/* --- Spotify sign-in strip (lib/spotify_panel.js) ----------------------------------------
 * Composes ABOVE the link row. Same adopt-the-host-accent contract as the panel itself.
 * Rendered only when a tier applies; tier 0 (unconfigured substrate) removes it entirely. */
.sp-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--me-line, rgba(255, 255, 255, 0.08));
  margin-bottom: 0.6rem;
}
.sp-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--me-muted, rgba(238, 242, 248, 0.58));
  flex: 1 1 14rem;
}
.sp-controls { display: flex; gap: 0.5rem; }
/* The display:flex above (and any future .sp-* display rule) would silently defeat the
   [hidden] attribute the tier logic relies on — same trap .me-open[hidden] guards against. */
.sp-strip [hidden] { display: none !important; }
.sp-strip button {
  min-height: 44px; /* tap floor, same as the panel's own controls */
  padding: 0 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  background: none;
  border: 1px solid var(--me-accent, #e0b271);
  border-radius: 6px;
  color: var(--me-accent, #e0b271);
  cursor: pointer;
}
.sp-strip button:hover { background: color-mix(in srgb, var(--me-accent, #e0b271) 12%, transparent); }
[data-spotify-tier="reconnect"] .sp-strip,
[data-spotify-tier="reconnect"] .sp-note { cursor: pointer; }

/* --- Connected tier tucks the paste-a-link entry (operator fix 2026-07-30) ---------------
 * With a live Spotify connection the strip owns control; the paste row underneath reads as
 * clutter and its idle/error notes double up. The row returns the moment the user
 * disconnects or the token expires (tier attribute flips off "connected"). A LIVE embed the
 * user started earlier keeps its frame and its "Live" note — never kill playing music. */
[data-spotify-tier="connected"] .me-row { display: none; }
[data-spotify-tier="connected"]:not([data-me-state="live"]) .me-note { display: none; }