/* M4A -> MP3 converter — only what style.css doesn't already provide.
   The widget, dropzone, badges, status, result and CTA styles are all inherited. */

.bitrate-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.bitrate-row select {
  border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.5rem;
  font: inherit; color: var(--ink); background: var(--card);
}
.option-note { color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; }

/* A disabled primary action must not look like an available one. Without this the
   empty state shows two identical full-width blue buttons, one of which does nothing —
   the first thing a new visitor sees. */
.convert-btn:disabled {
  background: var(--border); color: var(--muted); cursor: not-allowed;
}

/* Per-file rows. Each carries live state (duration, size, progress, outcome), so this
   replaces the plain .file-list the HEIC widget uses.

   Every child is placed explicitly. With only `grid-template-columns` and one child
   carrying a row span, auto-placement put the FILENAME in the right-hand column and the
   status on the left — so the list read backwards. */
.track-list { list-style: none; margin: 0; padding: 0; text-align: left; max-height: 18rem; overflow-y: auto; }
.track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.track:last-child { border-bottom: 0; }
.track-name {
  grid-column: 1; grid-row: 1;
  min-width: 0;                 /* let a long filename shrink instead of widening the row */
  font-weight: 600; color: var(--ink); font-size: 0.9rem;
  overflow-wrap: anywhere;      /* break inside a word only when there is no alternative */
}
.track-meta {
  grid-column: 1; grid-row: 2;
  min-width: 0;
  color: var(--muted); font-size: 0.8rem;
  /* No break-all here: this is prose, and mid-word breaks made "browser" read as
     "b rowser" once the column narrowed on a phone. */
}
.track-state {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.track-state.pending { color: var(--muted); }
.track-state.working { color: var(--accent); }
.track-state.done { color: var(--ok); }
.track-state.failed { color: var(--err); }
.track-state.rejected { color: var(--muted); }
.track.rejected .track-name { color: var(--muted); font-weight: 500; }

.clear-btn { margin-top: 0.75rem; }

.cancel-btn { width: 100%; margin-top: 0.75rem; background: none; color: var(--muted); border: 1px solid var(--border); }
.cancel-btn:hover { background: #f0f2f6; color: var(--ink); }

.fail-note { color: var(--err); font-size: 0.9rem; margin: 0.75rem 0 0; }

/* The claim this page is built around — given visual weight to match. */
.privacy-note {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: #e8f7ee; border: 1px solid #bfe6cd; border-radius: var(--radius);
}
.privacy-note h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--ok); }
.privacy-note p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.privacy-note p:last-child { margin-bottom: 0; }