/* WalkupSongPlayer widget — LocalTeams "Search Music" dialog styling.
   Namespaced under .wsp. Inherits the app's --lt-* tokens when present and
   falls back to the same values so the widget renders standalone (sample.html).
   Icons use Font Awesome classes; the host page must load FA 6. */
.wsp {
  --wsp-ink-1: var(--lt-ink-1, oklch(20% 0.02 240));
  --wsp-ink-4: var(--lt-ink-4, oklch(46% 0.02 240));
  --wsp-ink-5: var(--lt-ink-5, oklch(62% 0.014 240));
  --wsp-surface: var(--lt-surface, oklch(99% 0.003 235));
  --wsp-sunken: var(--lt-surface-sunken, oklch(95% 0.008 235));
  --wsp-line: var(--lt-line, oklch(88% 0.014 235));
  --wsp-line-strong: var(--lt-line-strong, oklch(85% 0.014 235));
  --wsp-line-soft: var(--lt-line-soft, oklch(90% 0.012 235));
  --wsp-accent: var(--lt-accent, oklch(52% 0.16 246));
  --wsp-accent-hover: var(--lt-accent-hover, oklch(46% 0.16 246));
  --wsp-accent-ink: var(--lt-accent-ink, oklch(40% 0.15 246));
  --wsp-accent-tint: var(--lt-accent-tint, oklch(94% 0.035 246));
  --wsp-trust-tint: var(--lt-trust-tint, oklch(94% 0.05 152));
  --wsp-trust-ink: oklch(38% 0.12 152);
  --wsp-font-display: var(--lt-font-display, 'Manrope', 'Helvetica Neue', sans-serif);
  --wsp-font-body: var(--lt-font-body, 'Public Sans', 'Helvetica Neue', sans-serif);

  font-family: var(--wsp-font-body);
  color: var(--wsp-ink-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.wsp *, .wsp *::before, .wsp *::after { box-sizing: border-box; }
.wsp button { font-family: inherit; }

/* --- Header zone: service sign-in + search ----------------------------- */
.wsp-head { flex: 0 0 auto; padding-bottom: 14px; border-bottom: 1px solid var(--lt-line-faint, oklch(92% 0.01 235)); }

.wsp-services { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.wsp-services-label { font-size: 12px; font-weight: 600; color: var(--wsp-ink-4); }
.wsp-services-group {
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--wsp-line-strong); border-radius: 8px;
  background: oklch(96% 0.005 235);
}
.wsp-service-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--wsp-ink-1);
  padding: 7px 13px;
}
.wsp-service-btn:hover { background: var(--wsp-sunken); }
.wsp-service-btn.signed-in { color: var(--wsp-trust-ink); background: var(--wsp-trust-tint); }
.wsp-services-divider { width: 1px; align-self: stretch; background: var(--wsp-line); }

.wsp-searchbox { position: relative; }
/* Cover both render modes: plain <i> (FA CSS) and the kit's <svg> replacement. */
.wsp-searchbox > i,
.wsp-searchbox > .svg-inline--fa {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--wsp-ink-5); pointer-events: none;
}
.wsp-input {
  width: 100%; padding: 9px 12px 9px 32px; font-size: 13px;
  font-family: var(--wsp-font-body); color: var(--wsp-ink-1);
  border: 1px solid var(--wsp-line-strong); border-radius: 8px;
  background: #fff; outline: none;
}
.wsp-input:focus { border-color: var(--wsp-accent); box-shadow: 0 0 0 3px oklch(52% 0.16 246 / 0.28); }

.wsp-status { font-size: 12px; color: var(--wsp-ink-5); min-height: 16px; margin: 8px 2px 0; }

/* --- Results ------------------------------------------------------------ */
.wsp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 2px 12px; }
.wsp-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--wsp-ink-5); margin: 12px 0 8px;
}
.wsp-cards { display: flex; flex-direction: column; gap: 8px; }

.wsp-card { border: 1px solid var(--wsp-line-soft); border-radius: 10px; padding: 12px 14px; background: var(--wsp-surface); }
.wsp-card-main { display: flex; align-items: center; gap: 12px; }
.wsp-card-meta { flex: 1; min-width: 0; }
.wsp-card-titlerow { display: flex; align-items: center; gap: 8px; }
.wsp-card-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wsp-card-artist { font-size: 12px; color: var(--wsp-ink-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wsp-chip-selected {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--wsp-trust-tint); color: var(--wsp-trust-ink);
}
.wsp-chip-explicit {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; line-height: 1;
  background: var(--wsp-ink-5); color: #fff; padding: 2px 5px; border-radius: 3px;
}

.wsp-startat { flex: 0 0 auto; text-align: right; }
.wsp-startat-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wsp-ink-5);
}
.wsp-startat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wsp-startat-value.none { color: oklch(70% 0.012 240); }

.wsp-playbtn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 12px;
  background: var(--wsp-accent-tint); color: var(--wsp-accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.wsp-playbtn:hover:not(:disabled) { background: var(--wsp-accent); color: #fff; }
.wsp-playbtn.playing { background: var(--wsp-accent); color: #fff; }
.wsp-playbtn.loading { background: var(--wsp-accent-tint); color: var(--wsp-accent-ink); cursor: wait; font-size: 22px; }
.wsp-playbtn:disabled { background: var(--wsp-sunken); color: var(--wsp-ink-5); cursor: not-allowed; }

.wsp-usebtn {
  flex: 0 0 auto; border: none; cursor: pointer;
  font-family: var(--wsp-font-display); font-weight: 700; font-size: 12.5px;
  background: var(--wsp-accent); color: #fff;
  padding: 8px 15px; border-radius: 8px;
}
.wsp-usebtn:hover:not(:disabled) { background: var(--wsp-accent-hover); }
.wsp-usebtn:disabled { background: var(--wsp-sunken); color: var(--wsp-ink-5); cursor: default; }

/* Suggested starts */
.wsp-starts { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.wsp-starts-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--wsp-ink-5);
}
.wsp-start-chip {
  border: 1px solid transparent; cursor: pointer;
  background: var(--wsp-sunken); color: var(--wsp-ink-4);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 999px;
}
.wsp-start-chip:hover { background: var(--wsp-accent-tint); color: var(--wsp-accent-ink); }
.wsp-start-chip.active { background: var(--wsp-accent-tint); color: var(--wsp-accent-ink); border-color: var(--lt-accent-line, oklch(85% 0.03 246)); }

/* Scrub bar */
.wsp-scrub { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wsp-scrub-time { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wsp-ink-4); min-width: 34px; }
.wsp-scrub-time.dur { font-weight: 400; color: var(--wsp-ink-5); text-align: right; }
.wsp-scrub-wrap { flex: 1; padding: 4px 0; cursor: pointer; }
.wsp-scrub-track { width: 100%; height: 5px; border-radius: 999px; background: oklch(92% 0.01 235); position: relative; }
.wsp-scrub-fill { height: 100%; border-radius: 999px; background: var(--wsp-accent); width: 0%; }
.wsp-scrub-knob {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--wsp-accent); box-shadow: 0 1px 3px rgba(0,0,0,0.25); left: 0%;
}

/* --- No-matches box ------------------------------------------------------ */
.wsp-nomatch {
  border: 1px dashed var(--wsp-line-strong); border-radius: 10px;
  padding: 22px; text-align: center; margin-top: 14px;
}
.wsp-nomatch-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.wsp-nomatch-sub { font-size: 13px; color: var(--wsp-ink-4); margin-bottom: 14px; }
.wsp-nomatch-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wsp-btn-primary {
  display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  font-family: var(--wsp-font-display); font-weight: 700; font-size: 13px;
  background: var(--wsp-accent); color: #fff; padding: 9px 16px; border-radius: 8px;
}
.wsp-btn-primary:hover { background: var(--wsp-accent-hover); }
.wsp-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--wsp-font-display); font-weight: 700; font-size: 13px;
  background: var(--wsp-surface); color: var(--wsp-ink-1);
  border: 1px solid var(--wsp-line-strong); padding: 9px 16px; border-radius: 8px;
}
.wsp-btn-ghost:hover { background: var(--wsp-sunken); }

.wsp-empty-note { font-size: 13px; color: var(--wsp-ink-5); padding: 8px 0; }

/* Idle state — shown before the first search (no fetch on launch) */
.wsp-prompt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 56px 24px; text-align: center;
}
.wsp-prompt > i { font-size: 26px; color: oklch(80% 0.02 240); }
.wsp-prompt-text {
  font-family: var(--wsp-font-display); font-weight: 700; font-size: 14.5px;
  color: var(--wsp-ink-5);
}

.wsp-applelink {
  background: none; border: none; padding: 8px 0 0; cursor: pointer;
  color: var(--wsp-accent); font-size: 12.5px; font-weight: 600;
}
.wsp-applelink:hover { color: var(--wsp-accent-ink); }