/* --- The tag editor (js/components/tag-editor.js, genre-input.js) ------------------------ */

/* The form: two columns in the wide dialog, Title and Genres across both; one column on
   a phone. */
.tag-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.tag-form > .tag-wide { grid-column: 1 / -1; }
@media (max-width: 40rem) {
  .tag-form { grid-template-columns: minmax(0, 1fr); }
}

.tag-summary { color: var(--fg-muted); font-size: var(--text-sm); }
.tag-summary:empty { display: none; }

/* What a save also does: short lines under the form. */
.tag-notes {
  margin: 0;
  padding-left: 1.125rem;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.tag-notes > li + li { margin-top: var(--space-1); }

/* A changed field: a brass edge on its control, which is what will be written (the
   name also says ", changed"). Set beside the focus ring, never instead of it. The
   selectors repeat forms.css's so they outrank it. */
.field.is-changed input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
.field.is-changed .chip-input { box-shadow: inset 3px 0 0 var(--accent); }
.field.is-changed input:not([type="range"]):not([type="checkbox"]):not([type="file"]):focus-visible {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px rgba(143, 200, 255, .35);
}
.genre-field.is-changed .chip-input > input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
.genre-field.is-changed .chip-input > input:not([type="range"]):not([type="checkbox"]):not([type="file"]):focus-visible { box-shadow: none; }

/* The genre chip input: one box styled as an input, holding the chips and a borderless
   text box that takes the rest of the line. */
.chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h);
  padding: var(--space-1);
  background-color: var(--bg);
  border: 1px solid var(--control-border, var(--line));
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.chip-input:hover { border-color: var(--control-border-hover, var(--line-strong)); }
.chip-input:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(143, 200, 255, .35);
}
.field.is-changed .chip-input:focus-within { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px rgba(143, 200, 255, .35); }
.chip-input > input:not([type="range"]):not([type="checkbox"]):not([type="file"]) {
  flex: 1 1 8rem;
  width: auto;
  min-width: 8rem;
  min-height: 2rem;
  padding: 0 var(--space-2);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.chip-input > input:not([type="range"]):not([type="checkbox"]):not([type="file"]):focus-visible { box-shadow: none; }

/* Suggestions: a list under the field, in the flow (a dialog body scrolls, and a
   floating list would be clipped by it). */
.genre-suggestions {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
}
.genre-suggestions[hidden] { display: none; }
.genre-suggestions > li {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.genre-suggestions > li:hover { background: rgba(255, 255, 255, .08); }
.genre-suggestions > li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
@media (pointer: coarse) {
  .genre-suggestions > li { min-height: var(--target); }
}

/* What typing did ("this became separate genres"); nothing when empty. */
.field-note { color: var(--fg-muted); font-size: var(--text-sm); }
.field-note:empty { display: none; }

/* Saving: the status line and Stop on one row, the bar of files done under them. The
   line's own indeterminate bar (notice.js statusLine) gives way to this determinate
   one, which says the save is running with motion off just as well. */
.tag-saving {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.tag-saving > .status { grid-column: 1; }
.tag-saving > .tag-stop { grid-column: 2; grid-row: 1; }
.tag-saving > .tag-progress { grid-column: 1 / -1; }
.tag-saving .status-progress { display: none; }
.tag-progress { width: 100%; height: .375rem; accent-color: var(--accent); }

/* A save that left files unchanged: the sentence, then one line per file. */
.tag-report { flex-wrap: wrap; }
.tag-failures {
  flex-basis: 100%;
  margin: 0;
  padding: 0 0 0 calc(1.25rem + var(--space-3));
  list-style: none;
  font-size: var(--text-sm);
}
.tag-failures > li { display: grid; gap: .125rem; padding: var(--space-1) 0; }
.tag-failure-name { font-weight: 500; overflow-wrap: anywhere; }
.tag-failure-why { color: var(--fg-muted); }
/* What Try again will do: a note under the reasons, lined up with them. */
.tag-retry-note {
  flex-basis: 100%;
  margin: var(--space-1) 0 0;
  padding-left: calc(1.25rem + var(--space-3));
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
/* The same report on the page, when the dialog was closed mid-save: Dismiss under the
   text, and room around it under the hero (the album) or above the tables (the
   missing-genre report). */
.tag-report > .btn { margin-left: calc(1.25rem + var(--space-3)); }
.hero + .tag-report { max-width: var(--measure-list); margin: 0 0 var(--space-5); }
.genre-report > .tag-report { margin: 0; }

/* Frozen after a partial save (Try again sends the same change): the fields read as
   read-only, still focusable and selectable. The selector repeats forms.css's so it
   outranks it. */
.tag-editor input[data-frozen="true"]:not([type="range"]):not([type="checkbox"]):not([type="file"]),
.tag-editor .chip-input:has(> input[readonly]) {
  color: var(--fg-muted);
  background-color: var(--surface-2);
  cursor: default;
}

/* A track row's Edit button shows like its star: on hover and focus, always on touch. */
.tracklist .track-edit { flex: none; color: var(--fg-muted); opacity: 0; transition: opacity var(--motion) var(--ease); }
.tracklist > li:hover .track-edit,
.tracklist .track-edit:focus-visible { opacity: 1; }
@media (hover: none) { .tracklist .track-edit { opacity: 1; } }

/* Where nothing hovers, the star and Edit, both always shown, crowded the duration: an
   admin's row (li.has-more) shows one "More" instead, an action sheet of Star or Unstar
   and Edit track (tag-editor.js). A lit star stays beside it: it is the row's state. */
.tracklist .track-more { display: none; flex: none; color: var(--fg-muted); }
@media (hover: none) {
  .tracklist > li.has-more .track-edit,
  .tracklist > li.has-more .star-btn:not([aria-pressed="true"]) { display: none; }
  .tracklist > li.has-more .track-more { display: inline-grid; }
}