.repertoire {
  --row-inset: var(--space-4);
  --toggle-size: 2rem;
  --marker-size: 0.5rem;
  --col-gap: var(--space-3);
  /* toggle | active marker | title + artist | sheet count | own-sheet status */
  --song-cols: var(--toggle-size) var(--marker-size) minmax(0, 1fr) 5.5rem 7.5rem;
  /* Where the song title column starts — nested versions align to it */
  --title-offset: calc(var(--row-inset) + var(--toggle-size) + var(--marker-size) + 2 * var(--col-gap));
}

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

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

/* "Import / export" and "Új dal hozzáadása" */
.repertoire__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

.repertoire__title {
  margin-top: var(--page-title-gap);
  font-size: var(--text-2xl);
}

.repertoire__description {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

/* ---------- Toolbar ---------- */

.repertoire__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--page-section-gap);
}

.repertoire__search {
  flex: 1 1 16rem;
  max-width: 24rem;
}

.repertoire__filters {
  flex-wrap: wrap;
  max-width: 100%;
}

/* Secondary toggle, kept apart from the three segmented filters */
.repertoire__divider {
  width: var(--border-width);
  height: 1.5rem;
  background: var(--color-border-strong);
}

.repertoire__missing {
  border-color: var(--color-border-strong);
}

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

.repertoire__missing--on,
.repertoire__missing--on:hover {
  border-color: var(--color-accent-line);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.repertoire__missing--on svg {
  color: var(--color-accent);
}

.repertoire__missing-clear {
  margin-left: var(--space-1);
}

.repertoire__missing--on .repertoire__missing-clear {
  color: var(--color-text-muted);
}

/* Always visible: the dot's meaning must not depend on a tooltip */
.repertoire__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.repertoire__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.repertoire__musician strong {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.repertoire__flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.repertoire__flash svg {
  margin-top: 3px;
  color: var(--color-status-online);
}

.repertoire__flash-note {
  color: var(--color-text-subtle);
}

.repertoire__count {
  font-variant-numeric: tabular-nums;
}

/* Informational marker only — never interactive */
.song-dot {
  display: inline-block;
  width: var(--marker-size, 0.5rem);
  height: var(--marker-size, 0.5rem);
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* ---------- Song list ---------- */

.song-list {
  overflow: hidden;
}

.song-list__head,
.song__row {
  display: grid;
  grid-template-columns: var(--song-cols);
  align-items: center;
  column-gap: var(--col-gap);
  padding: 0 var(--row-inset);
}

.song-list__head {
  height: 2.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.song {
  border-bottom: var(--border-width) solid var(--color-border);
}

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

.song__row {
  min-height: 3rem;
  padding-block: var(--space-1);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

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

.song--expanded > .song__row {
  background: var(--color-surface-2);
}

.song__marker {
  display: flex;
  align-items: center;
}

/* Title and artist always share one line; the artist truncates before the title */
.song__heading {
  display: flex;
  align-items: baseline;
  column-gap: var(--space-3);
  min-width: 0;
  white-space: nowrap;
}

.song__title,
.song__artist {
  overflow: hidden;
  text-overflow: ellipsis;
}

.song__title {
  flex-shrink: 1;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

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

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

.song__count--none {
  color: var(--color-text-subtle);
}

.song__own {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.song__own--yes {
  color: var(--color-text-muted);
}

.song__own--yes svg {
  color: var(--color-accent);
}

/* ---------- Nested versions ---------- */

.song__versions {
  margin: 0 var(--row-inset) var(--space-3) var(--title-offset);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.song__versions[hidden] {
  display: none;
}

.song--expanded > .song__versions {
  margin-top: var(--space-1);
}

.version {
  position: relative;
  display: grid;
  /* icon | title | kind | musician | actions */
  grid-template-columns: 1rem minmax(0, 1fr) 7.5rem minmax(0, 13rem) auto;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 2.5rem;
  padding: 2px var(--space-1) 2px var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* The selected musician's own sheet: thin accent edge + "(te)" next to the name */
.version--own::before {
  content: "";
  position: absolute;
  inset: var(--space-2) auto var(--space-2) 0;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

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

/* Primary label, optional description and "Az enyém" on one line */
.version__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  white-space: nowrap;
}

.version__description {
  overflow: hidden;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
}

/* Primary information — opens the simulated preview */
.version__title {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 2px var(--space-1);
  margin-left: calc(-1 * var(--space-1));
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

.version__title:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
}

/* Kind and musicians are separate grid columns on desktop, one wrapped line on narrow screens */
.version__meta {
  display: contents;
}

.version__musicians {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.version__musician-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The selected musician's own personal sheet */
.version__mine {
  flex-shrink: 0;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent-hover);
}

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

.versions__empty {
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

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

/* ---------- Empty state ---------- */

.repertoire__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  border-style: dashed;
  background: transparent;
  text-align: center;
}

.repertoire__empty-icon {
  margin-bottom: var(--space-2);
  color: var(--color-text-subtle);
}

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

.repertoire__empty-text {
  max-width: 48ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

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

@media (max-width: 64rem) {
  .repertoire__divider {
    display: none;
  }

  .repertoire__legend {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 52rem) {
  .repertoire {
    --song-cols: var(--toggle-size) var(--marker-size) minmax(0, 1fr) auto auto;
  }

  /* Versions: title on the first line, kind + musician below, actions on the right */
  .version {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    grid-template-areas:
      'icon title actions'
      '.    meta  actions';
    row-gap: 2px;
    padding-block: var(--space-1);
  }

  .version__icon {
    grid-area: icon;
  }

  .version__name {
    grid-area: title;
  }

  .version__actions {
    grid-area: actions;
  }

  .version__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
  }
}

@media (max-width: 40rem) {
  .repertoire {
    --row-inset: var(--space-3);
  }

  .repertoire__header .btn--primary,
  .repertoire__header-actions,
  .repertoire__header-actions .btn,
  .repertoire__search {
    width: 100%;
    max-width: none;
  }

  /* Three equal filter columns: no horizontal scrolling or overlap */
  .repertoire__filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .repertoire__missing {
    width: 100%;
  }

  .repertoire__filters .segmented__label {
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 2rem;
    padding-block: var(--space-1);
    white-space: normal;
    text-align: center;
    line-height: var(--leading-snug);
  }

  /* Shorter column labels so the song title keeps most of the row (full text stays for screen readers) */
  .song__count-unit,
  .song__own-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .song-list__head {
    letter-spacing: 0.04em;
  }

  .song__versions {
    margin-left: var(--row-inset);
  }
}