/* Copyright Ayers Electronics Inc. All rights reserved. */

/* One playlist's screen: the name, its line of facts and the three buttons at the head, then the
   saved titles as rows - the grip mark, the place in the order, the title over its facts, and the
   length at the right edge. The edit walk uses the same rows, one of them lifted out. */

#playlistPage {
  padding: 24px 24px 48px;
  overflow-y: auto;
}

#playlistPage .playlist-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
#playlistPage .playlist-head > * + * {
  margin-top: 8px;
}
/* The buttons stand a step further off: 8px of the head's own and 8px of theirs. */
#playlistPage .playlist-head > .playlist-buttons {
  margin-top: 16px;
}

#playlistPage .playlist-name {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--text);
}

#playlistPage .playlist-meta,
#playlistPage .playlist-hint {
  font-size: var(--type-label);
  color: var(--muted);
}

#playlistPage .playlist-buttons,
#playlistPage .playlist-foot {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-right: -12px;
  margin-bottom: -12px;
}
/* The buttons wrap, so each carries its spacing on its right and bottom and the row takes the last
   of each straight back. */
#playlistPage .playlist-buttons > *,
#playlistPage .playlist-foot > * {
  margin-right: 12px;
  margin-bottom: 12px;
}

#playlistPage .playlist-btn {
  padding: 8px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  color: var(--text);
  font-size: var(--type-body);
  font-weight: 600;
  cursor: pointer;
}

/* The rows and, while Rename is open, the two-column split beside them: the rows keep their own
   width and the Rename column takes a fixed one, so the keys never move as the list does. Plain
   view keeps the rows alone, full width. */
#playlistPage .playlist-body {
  display: block;
}
#playlistPage .playlist-body.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 20px;
  align-items: start;
}

#playlistPage .playlist-rows {
  display: flex;
  flex-direction: column;
}
#playlistPage .playlist-rows > * + * {
  margin-top: 4px;
}

/* The Rename column: its own heading and hint, the name field, then the approved keypad laid into
   the slot beneath it - the same in-flow panel the Search page anchors (css/layout/search.css). */
#playlistPage .playlist-rename-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#playlistPage .playlist-rename-col > * + * {
  margin-top: 9px;
}
#playlistPage .playlist-rename-head {
  display: flex;
  flex-direction: column;
}
#playlistPage .playlist-rename-head > * + * {
  margin-top: 3px;
}
#playlistPage .playlist-rename-head b {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--text);
}
#playlistPage .playlist-rename-hint {
  font-size: var(--type-micro);
  letter-spacing: 0.06em;
  color: var(--muted);
}
#playlistPage .playlist-keypad-slot {
  flex: none;
}
#playlistPage .playlist-keypad-slot:empty {
  display: none;
}

#playlistPage .playlist-row {
  display: grid;
  grid-template-columns: 24px 32px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--control-min-height);
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

/* The pick-up control: the grip through the mark, its own inner grid matching the outer four
   columns exactly, so a row with no Remove chip (the plain list) looks unchanged. */
#playlistPage .playlist-row-pick {
  display: grid;
  grid-column: 1 / span 4;
  grid-template-columns: 24px 32px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Remove, on each row the edit walk offers it - never on the row that is held. */
#playlistPage .playlist-row-remove {
  grid-column: 5;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  color: var(--text);
  font-size: var(--type-label);
  font-weight: 600;
  cursor: pointer;
}

/* Picked up: the row lifts out of the list on the accent and the gap it will drop into stays open
   under it, so a still frame shows what the D-pad is about to do. */
#playlistPage .playlist-row.held {
  border-color: var(--accent);
  background: var(--elevated);
}

/* The row the D-pad is on: the whole row wears the accent, its facts and length read against it,
   and its pick button draws the white ring (base.css). Never on the row that is held - that keeps
   its own lifted look above. */
#playlistPage .playlist-row:focus-within:not(.held) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
#playlistPage .playlist-row:focus-within:not(.held) .pl-place,
#playlistPage .playlist-row:focus-within:not(.held) .pl-facts,
#playlistPage .playlist-row:focus-within:not(.held) .pl-length,
#playlistPage .playlist-row:focus-within:not(.held) .pl-mark {
  color: var(--on-accent);
  opacity: 0.82;
}
#playlistPage .playlist-row:focus-within:not(.held) .pl-grip i {
  background: var(--on-accent);
}

#playlistPage .pl-place {
  font-size: var(--type-label);
  color: var(--muted);
  text-align: right;
}

#playlistPage .pl-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#playlistPage .pl-body > * + * {
  margin-top: 2px;
}

#playlistPage .pl-title {
  overflow: hidden;
  font-size: var(--type-body);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#playlistPage .pl-facts,
#playlistPage .pl-length,
#playlistPage .pl-mark {
  font-size: var(--type-label);
  color: var(--muted);
}

#playlistPage .pl-mark {
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#playlistPage .playlist-empty {
  margin: 0;
  font-size: var(--type-body);
  color: var(--muted);
}