.setlist-editor {
  /*
   * Each list scrolls inside its column so the column headers stay visible.
   * 25rem ≈ everything above the lists (app header, back link, title block, status line,
   * column header) plus the bottom padding — so both columns end just above the viewport edge.
   */
  --list-max-height: max(16rem, calc(100vh - 25rem));
}

.page--content.setlist-editor {
  padding-bottom: var(--space-6);
}

.setlist-editor__back {
  margin-left: calc(-1 * var(--space-4));
}

/* ---------- Header ---------- */

.setlist-editor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.setlist-editor__eyebrow {
  margin-top: var(--page-title-gap);
}

.setlist-editor__title {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
}

.setlist-editor__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.setlist-editor__meta svg {
  color: var(--color-text-subtle);
}

.setlist-editor__active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-hover);
}

.setlist-editor__save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.setlist-editor__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.setlist-editor__state--dirty {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.setlist-editor__state-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-status-pending);
}

/* Unavailable actions: dimmed, still focusable, announced via aria-disabled */
.setlist-editor .btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

.setlist-editor .btn--primary[aria-disabled='true']:hover {
  background: var(--color-accent);
}

.setlist-editor .btn--ghost[aria-disabled='true']:hover,
.setlist-editor .btn--danger-ghost[aria-disabled='true']:hover {
  background: transparent;
  color: var(--color-text-muted);
}

/* Latest action — always rendered so screen readers pick up changes */
.setlist-editor__status {
  min-height: 1.25rem;
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.setlist-editor__status-text {
  animation: status-in var(--duration-base) var(--ease-standard);
}

@keyframes status-in {
  from {
    opacity: 0;
  }
}

.setlist-editor__readonly {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ---------- Columns ---------- */

.setlist-editor__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.setlist-editor__columns--single {
  grid-template-columns: minmax(0, 40rem);
}

.editor-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
}

.editor-column__head {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.editor-column__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.editor-column__title {
  font-size: var(--text-md);
}

.editor-column__title:focus-visible {
  border-radius: var(--radius-sm);
}

.editor-column__count {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.editor-column__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.editor-column__hint-narrow {
  display: none;
}

.editor-column__list {
  /* Contains absolutely positioned screen-reader text, so it can't stretch the page */
  position: relative;
  max-height: var(--list-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.editor-column__empty {
  padding: var(--space-8) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-align: center;
}

.editor-column__empty--programme {
  display: grid;
  gap: var(--space-2);
  min-height: 12rem;
  align-content: center;
  margin: var(--space-3);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.editor-column__empty-hint svg {
  display: inline-block;
  vertical-align: -2px;
  color: var(--color-text-muted);
}

/* Title and artist on one line — the artist truncates first */
.song-line {
  display: flex;
  align-items: baseline;
  column-gap: var(--space-3);
  min-width: 0;
  white-space: nowrap;
}

.song-line__title,
.song-line__artist {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The title keeps its full width unless it alone is wider than the line */
.song-line__title {
  flex: 0 0 auto;
  max-width: 100%;
  font-weight: var(--weight-medium);
}

.song-line__artist {
  flex-shrink: 1000;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ---------- Left: repertoire ---------- */

.pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2rem;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 2.75rem;
  padding: 2px var(--space-2) 2px var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.pick:last-child {
  border-bottom: 0;
}

.pick:hover {
  background: var(--color-surface-2);
}

.pick--added .song-line__title {
  color: var(--color-text-muted);
}

.pick__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-accent-hover);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pick__add:not([aria-disabled='true']) {
  color: var(--color-text);
}

.pick__add:not([aria-disabled='true']):hover {
  color: var(--color-accent-hover);
}

/* ---------- Right: programme ---------- */

.programme__row {
  position: relative;
  display: grid;
  /* grip | number | title + extras | planned length | actions; the note panel spans a second row */
  grid-template-columns: 1rem 1.75rem minmax(0, 1fr) 3rem auto;
  align-items: center;
  column-gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-surface-1);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.programme__row:last-child {
  border-bottom: 0;
}

.programme__row:hover {
  background: var(--color-surface-2);
}

.programme__row[draggable='true'] {
  cursor: grab;
}

.programme__row--dragged {
  opacity: 0.45;
}

/* Insertion line while dragging */
.programme__row--drop-before {
  box-shadow: inset 0 2px 0 var(--color-accent);
}

.programme__row--drop-after {
  box-shadow: inset 0 -2px 0 var(--color-accent);
}

.programme__row--new {
  animation: row-added 1.2s var(--ease-standard);
}

@keyframes row-added {
  from {
    background: var(--color-accent-soft);
  }
}

.programme__grip {
  display: flex;
  color: var(--color-text-subtle);
}

.programme__number {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.programme__actions {
  display: flex;
  gap: 2px;
}

/* Read-only view has no grip or actions. (Dragging is switched off while a text field in an
   editable row is pressed, so the editable rows are told apart by their actions.) */
.programme__row:not(:has(.programme__actions)) {
  grid-template-columns: 1.75rem minmax(0, 1fr) 3rem;
}

.programme__main {
  min-width: 0;
}

/* Planned length (m:ss) */
.programme__duration {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.programme__duration--unknown {
  color: var(--color-text-subtle);
}

.programme__duration--custom {
  font-weight: var(--weight-medium);
  color: var(--color-accent-hover);
}

/* Optional song: thin amber edge in addition to the „Elhagyható” text */
.programme__row--optional::before {
  content: "";
  position: absolute;
  inset: var(--space-2) auto var(--space-2) 0;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--color-status-pending);
}

/* Second line: optional toggle, note button, length override, note preview */
.programme__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  margin-top: 2px;
  font-size: var(--text-xs);
}

.programme__optional,
.programme__note-toggle,
.programme__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.programme__optional:hover,
.programme__note-toggle:hover {
  border-color: var(--color-text-subtle);
  color: var(--color-text);
}

/* Check box inside the toggle: empty = not optional, ticked = optional */
.programme__check {
  display: grid;
  place-items: center;
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.programme__optional[aria-pressed='true'],
.programme__badge {
  border-color: var(--color-status-pending);
  background: color-mix(in srgb, var(--color-status-pending) 14%, transparent);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.programme__optional[aria-pressed='true'] .programme__check {
  border-color: var(--color-status-pending);
  background: var(--color-status-pending);
  color: var(--color-bg);
}

.programme__badge svg {
  color: var(--color-status-pending);
}

.programme__note-toggle[aria-expanded='true'] {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.programme__custom {
  color: var(--color-accent-hover);
  white-space: nowrap;
}

.programme__custom-song {
  color: var(--color-text-subtle);
}

.programme__note {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  font-style: italic;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Concert note and length for this concert, opened from „Megjegyzés” */
.programme__details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  align-items: start;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-1) calc(2.75rem + 2 * var(--space-2));
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  cursor: auto;
}

.programme__details .field__label {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
}

.programme__details .programme__note-input {
  height: auto;
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

.programme__details .programme__hint,
.programme__details .programme__error {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.programme__done {
  grid-column: 1 / -1;
  justify-self: end;
}

/* ---------- Planned playing time (above the columns) ---------- */

.setlist-editor__timing {
  margin-bottom: var(--space-4);
}

.timing {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
}

.timing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.timing__title {
  font-size: var(--text-md);
}

.timing__scope {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.timing__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Label on top; the value and its detail share one line to keep the card low */
.timing__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-3);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.timing__stat .timing__label {
  grid-column: 1 / -1;
}

.timing__stat--optional {
  box-shadow: inset 3px 0 0 var(--color-status-pending);
}

.timing__label,
.timing__optional-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.timing__value {
  margin-top: 2px;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* „legalább” — the sum leaves out unknown lengths */
.timing__approx {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.timing__unknown {
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.timing__detail {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.timing__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.timing__warning svg {
  margin-top: 2px;
  color: var(--color-status-pending);
}

.timing__warning strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.timing__optional {
  margin-top: var(--space-3);
}

.timing__optional-title {
  margin-bottom: var(--space-1);
}

.timing__optional-count {
  font-variant-numeric: tabular-nums;
}

/* Several columns on wide screens (positions still read left to right), one on narrow ones */
.timing__optional-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  column-gap: var(--space-6);
  max-height: 9.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.timing__optional-item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
}

.timing__position {
  color: var(--color-text-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.timing__song {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timing__length {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.timing__length--unknown {
  font-style: italic;
  color: var(--color-text-subtle);
}

.timing__optional-total {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.timing__optional-sum {
  font-variant-numeric: tabular-nums;
}

.timing__optional-sum .timing__approx {
  font-size: var(--text-xs);
}

.timing__optional-empty {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* The lists end above the bottom of the window; the timing card's height is taken off
   (--timing-height is measured by the editor) */
.setlist-editor__columns {
  --list-max-height: max(18rem, calc(100vh - 25rem - var(--timing-height, 0px)));
}

/* ---------- Unsaved-changes dialog ---------- */

.editor-dialog {
  padding: 0 var(--space-3) var(--space-3);
}

.editor-dialog strong {
  font-weight: var(--weight-semibold);
}

.editor-dialog__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.editor-dialog__note svg {
  margin-top: 2px;
  color: var(--color-status-pending);
}

.editor-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

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

/* Stacked: repertoire above the programme; the add arrow points down towards it */
@media (max-width: 56rem) {
  .setlist-editor {
    --list-max-height: 22rem;
  }

  .setlist-editor__columns {
    --list-max-height: 22rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .pick__add svg {
    transform: rotate(90deg);
  }
}

@media (max-width: 40rem) {
  .setlist-editor__save {
    width: 100%;
  }

  .setlist-editor__save-button {
    margin-left: auto;
  }

  .editor-column__head {
    padding: var(--space-3);
  }

  .pick {
    padding-left: var(--space-3);
  }

  .programme__row {
    grid-template-columns: 1.5rem minmax(0, 1fr) 2.75rem auto;
    padding-left: var(--space-2);
  }

  .programme__row:not(:has(.programme__actions)) {
    grid-template-columns: 1.5rem minmax(0, 1fr) 2.75rem;
  }

  /* Narrow rows: the title wraps instead of being cut to a few letters */
  .programme__main .song-line {
    flex-wrap: wrap;
    white-space: normal;
  }

  .programme__main .song-line__title {
    flex-shrink: 1;
  }

  /* …and the artist gets its own, shortened line */
  .programme__main .song-line__artist {
    flex-basis: 100%;
    white-space: nowrap;
  }

  .programme__details {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
  }

  .timing {
    padding: var(--space-3);
  }

  .timing__stats {
    gap: var(--space-2);
  }

  .timing__stat {
    padding: var(--space-2);
  }

  .timing__value {
    font-size: var(--text-lg);
  }

  /* Touch screens: reorder with the ↑ ↓ buttons */
  .programme__grip,
  .editor-column__hint-wide,
  .editor-column__hint svg {
    display: none;
  }

  .editor-column__hint-narrow {
    display: inline;
  }
}

/* Phones: the three totals stack, each on one line (label left, value right) */
@media (max-width: 30rem) {
  .timing__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  /* label | value, detail below the label */
  .timing__stat {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .timing__stat .timing__label {
    grid-column: 1;
  }

  .timing__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    text-align: right;
  }

  .timing__detail {
    grid-column: 1;
  }
}

/* ---------- Live changes and concurrent edits (Phase 5) ---------- */

.programme__added {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  min-height: 1.5rem;
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-full);
  color: var(--color-accent-hover);
  white-space: nowrap;
}

/* The stored setlist changed while this draft has unsaved edits */
.setlist-editor__conflict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-status-pending);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-status-pending) 10%, transparent);
  font-size: var(--text-sm);
}

.setlist-editor__conflict > svg {
  color: var(--color-status-pending);
}

.setlist-editor__conflict p {
  flex: 1 1 20rem;
}

.setlist-editor__conflict strong {
  font-weight: var(--weight-semibold);
}

.editor-dialog__changes {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.editor-dialog__changes ul {
  margin-top: var(--space-1);
  padding-left: var(--space-5);
  list-style: disc;
}

.editor-dialog__live {
  color: var(--color-accent-hover);
}

.editor-dialog__muted {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}