/* Song swaps. Every swap is a deck: your side on the left, their side on the right, a spine with status and time between. */

/* ---------- List ---------- */

.swap-list { display: flex; flex-direction: column; }
.swap-row {
  display: grid;
  grid-template-columns: 28px minmax(140px, 200px) minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 12px var(--s3);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.swap-row:last-child { border-bottom: 0; }
.swap-row.is-compact { grid-template-columns: minmax(0, 1fr) 32px; }
.swap-row.is-clickable { cursor: pointer; }
.swap-row.is-clickable:hover { background: var(--sunken); }
.swap-row.is-current { background: var(--signal-soft); box-shadow: inset 3px 0 0 var(--signal); }
.swap-list-head { font-size: 12px; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--line-strong); padding-top: 10px; padding-bottom: 10px; }
.swap-list-head .deck-spine { font-weight: 600; }
.swap-history { border: 1px solid var(--line); border-radius: var(--r1); }

.swap-pick { display: flex; align-items: center; justify-content: center; }
.swap-pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); cursor: pointer; }
:root[data-theme="dark"] .swap-pick input { accent-color: var(--signal); }

.swap-partner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.swap-partner-text { display: flex; flex-direction: column; min-width: 0; }
.swap-partner-text .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.swap-open { text-align: left; text-decoration: none; min-width: 0; }
.swap-open:hover .user-name { text-decoration: underline; }

.swap-deck { grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr); }
.swap-side { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.swap-track { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.swap-track .track { flex: 1 1 auto; }
.swap-track.is-empty { min-height: 40px; }
.swap-side.is-theirs .swap-track { flex-direction: row-reverse; }
.swap-side.is-theirs .swap-track.is-empty { justify-content: flex-start; text-align: right; }
.swap-track-meta { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.swap-marks { display: inline-flex; gap: 2px; }
.swap-mark { display: inline-flex; }
.swap-mark.good { color: var(--good); }
.swap-mark.bad { color: var(--bad); }
.swap-mark.muted { color: var(--ink-3); }
.swap-num { flex: none; min-width: 52px; font-size: 18px; text-align: right; }
.swap-side.is-theirs .swap-num { text-align: left; }
.swap-num.muted { color: var(--ink-3); }
.swap-status { justify-content: center; }
.swap-pad { padding: var(--s3); margin: 0; }

.swap-filters { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Wizard ---------- */

.swap-choice { padding: 0 var(--s3) 0 0; gap: var(--s2); }
.swap-choice-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px var(--s3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.swap-choice:hover { background: var(--sunken); }
.swap-choice.is-selected:hover { background: var(--signal-soft); }
.swap-choice-main:focus-visible { outline-offset: -2px; }
.swap-contact-text { display: flex; flex-direction: column; min-width: 0; }
.swap-avg { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 112px; }

/* ---------- Position picker ---------- */

.swap-positions { max-height: 48vh; }
.swap-position { padding-top: 8px; padding-bottom: 8px; }
.swap-pos-num { flex: none; width: 44px; color: var(--ink-2); }
.swap-est { flex: none; min-width: 56px; text-align: right; }
.swap-lock { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--ink-2); }

/* ---------- Detail ---------- */

.swap-head { display: flex; flex-direction: column; gap: var(--s4); }
.swap-head .deck { align-items: start; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); }
.swap-head .deck-side { display: flex; flex-direction: column; gap: var(--s3); }
.swap-head .deck-side.is-theirs { align-items: flex-end; }
.swap-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.swap-person.is-theirs { flex-direction: row-reverse; text-align: right; }
.swap-person-text { display: flex; flex-direction: column; min-width: 0; }
.swap-person-text a { text-decoration: none; }
.swap-person-text a:hover { text-decoration: underline; }
.swap-exposure { display: flex; flex-direction: column; gap: 6px; }
.swap-head .deck-side.is-theirs .swap-exposure { align-items: flex-end; }
.swap-exposure .pill-value.muted { color: var(--ink-3); }
.swap-period { height: 34px; font-size: 14px; }
.swap-accept { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }

.swap-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.swap-column { display: flex; flex-direction: column; gap: var(--s3); border-top: 3px solid var(--ink); }
.swap-column.is-theirs { border-top-color: var(--line-strong); }
.swap-column .section-head { margin-bottom: 0; align-items: flex-start; }
.swap-column .section-head p { margin: 2px 0 0; }
.swap-song { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r1); min-width: 0; }
.swap-song.is-rejected { background: var(--sunken); }
.swap-song.is-rejected .cover { opacity: 0.6; }
.swap-song-top { align-items: flex-start; }
.swap-song-head { flex: 1 1 200px; }
.swap-embed { width: 100%; height: 80px; border: 0; border-radius: var(--r1); background: var(--sunken); }
.swap-placements td, .swap-placements th { padding-left: 8px; padding-right: 8px; }
.swap-placements .track-title { max-width: 220px; }

.swap-pct { display: inline-block; min-width: 44px; padding: 1px 6px; border-radius: var(--r1); font-size: 12px; font-weight: 600; text-align: center; }
.swap-band-good { color: var(--good); }
.swap-band-fair { background: var(--good-soft); color: var(--ink); }
.swap-band-weak { background: var(--bad-soft); color: var(--ink); }
.swap-band-bad { color: var(--bad); }

.swap-counter { align-self: center; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .swap-row { grid-template-columns: 28px minmax(0, 1fr); }
  .swap-row .swap-deck { grid-column: 1 / -1; }
  .swap-list-head .swap-deck { display: none; }
  .swap-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .swap-deck, .swap-head .deck { grid-template-columns: minmax(0, 1fr); }
  .swap-row .deck-spine { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .swap-row .deck-spine .meter { width: 96px; }
  .swap-side.is-theirs { flex-direction: row-reverse; }
  .swap-side.is-theirs .swap-track { flex-direction: row; }
  .swap-side.is-theirs .swap-track.is-empty { text-align: left; }
  .swap-side.is-theirs .swap-num { text-align: right; }
  .swap-head .deck-side.is-theirs, .swap-head .deck-side.is-theirs .swap-exposure { align-items: flex-start; }
  .swap-head .deck-spine { align-items: flex-start; text-align: left; }
  .swap-person.is-theirs { flex-direction: row; text-align: left; }
  .swap-avg { display: none; }
  .swap-row.is-compact { grid-template-columns: minmax(0, 1fr) 32px; }
  .swap-row.is-compact .swap-deck { grid-column: auto; }
}

/* Placement tables sit in half-width columns: let long playlist names truncate instead of scrolling sideways. */
.swap-placements { table-layout: auto; }
.swap-placements .track { max-width: 100%; }
.swap-placements .track-title { max-width: 170px; }
@media (min-width: 1001px) and (max-width: 1400px) {
  .swap-placements .track-title { max-width: 120px; }
  .swap-placements td, .swap-placements th { padding-left: 6px; padding-right: 6px; }
}

/* ---------- Measured streams (Spotify for Artists) ---------- */

.swap-exposure-title { gap: 6px; }
.swap-measure[title] { cursor: help; }
.swap-est { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.swap-est.is-measured .icon { color: var(--good); }

/* ---------- Sides, figures and their basis ---------- */

/* "Your track" / "Their track" and "Gained" / "Offered": read by screen readers always, shown once the header row is gone. */
.swap-side-label, .swap-fig-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.swap-track-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.swap-fig { position: relative; display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 64px; }
.swap-side.is-theirs .swap-fig { align-items: flex-start; }
.swap-fig .swap-num { min-width: 0; }
.swap-fig-unit { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.swap-list [role="list"] { display: flex; flex-direction: column; }
.swap-select-all { align-items: center; }
.swap-check { display: none; }
.is-selected > .swap-check { display: inline-flex; }

.swap-next { margin: 0 0 var(--s1); padding-left: 20px; }
.swap-avg-note, .swap-table-note { margin: 0; max-width: none; }
.swap-column-title { font-size: 18px; }

.swap-place-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; white-space: normal; overflow: visible; }
.swap-drift { height: auto; min-height: 22px; white-space: normal; }
.swap-embed-ask { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) 12px; border: 1px solid var(--line); border-radius: var(--r1); background: var(--sunken); }
.swap-extend-off { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.swap-lock { white-space: normal; text-align: right; }

@media (max-width: 1000px) {
  .swap-side-label, .swap-fig-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font-size: 12px; font-weight: 600; color: var(--ink-2); }
}

@media (max-width: 860px) {
  .swap-fig, .swap-side.is-theirs .swap-fig { align-items: flex-end; }
  .swap-placements .track-title { max-width: 46vw; }
  .swap-placements td, .swap-placements th { padding-left: 8px; padding-right: 8px; }
  .swap-position { flex-wrap: wrap; }
  .swap-extend-off { width: 100%; }
}