/* The song card and section picker under a pasted link (assets/rangepicker.js), on the home page
 * and in the web app. Colours come from theme.css so dark mode follows; inside the blue studio
 * block the app swaps them for glass-on-blue (app.css). */
.link-section {
  --ls-bg: var(--color-surface-base);
  --ls-line: var(--color-border-default);
  --ls-ink: var(--color-ink-950);
  --ls-muted: var(--color-ink-500);
  --ls-track: var(--color-border-default);
  --ls-fill: var(--color-brand-500);
  --ls-handle: #fff;
  --ls-handle-ring: var(--color-brand-500);
  --ls-focus: rgba(37, 99, 235, 0.22);
  margin-top: 12px; padding: 14px 16px 12px; text-align: left;
  background: var(--ls-bg); border: 1px solid var(--ls-line); border-radius: 14px; color: var(--ls-ink);
}
.link-section:empty { display: none; }
.link-song { display: flex; align-items: center; gap: 12px; min-width: 0; }
.link-cover { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: var(--ls-track); }
.link-meta { min-width: 0; }
.link-title { font-weight: 700; font-size: 0.95rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.link-length, .link-note, .link-selected, .link-pick-lead { font-size: 0.85rem; color: var(--ls-muted); margin: 0; }
.link-length { margin-top: 2px; }
.link-note { margin-top: 10px; }
.link-pick-lead { margin-top: 14px; font-weight: 600; color: var(--ls-ink); }
.link-picker { margin: 6px 0 0; }
.link-selected { margin-top: 6px; line-height: 1.4; }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.link-actions .btn:disabled { opacity: 0.5; }
.link-looking { margin-top: 10px; font-size: 0.85rem; }

/* The range itself. */
.rp { position: relative; padding: 24px 10px 0; user-select: none; -webkit-user-select: none; }
.rp-times { position: absolute; left: 10px; right: 10px; top: 0; height: 20px; pointer-events: none; }
.rp-time { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ls-ink); white-space: nowrap; }
.rp-track { position: relative; height: 28px; touch-action: none; cursor: pointer; }
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 999px; background: var(--ls-track); }
.rp-fill { position: absolute; top: 50%; height: 10px; transform: translateY(-50%); border-radius: 999px; background: var(--ls-fill); cursor: grab; }
.is-dragging .rp-fill { cursor: grabbing; }
.rp-handle {
  position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; transform: translateY(-50%);
  border-radius: 50%; background: var(--ls-handle); border: 3px solid var(--ls-handle-ring);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25); cursor: grab; outline: none; touch-action: none; z-index: 1;
}
.rp-handle::after { content: ""; position: absolute; inset: -10px; }
.rp-handle:focus-visible { box-shadow: 0 0 0 5px var(--ls-focus), 0 2px 6px rgba(15, 23, 42, 0.25); }
.is-dragging .rp-handle { cursor: grabbing; }
.rp-scale { display: flex; justify-content: space-between; margin: 2px -10px 0; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--ls-muted); }

@media (max-width: 480px) {
  .link-section { padding: 12px 12px 10px; }
  .link-actions .btn { flex: 1; justify-content: center; }
}