/* --- Library ------------------------------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: var(--space-1);
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab {
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-3);
  color: var(--fg-muted);
  font-family: var(--font-chrome);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--fg); }
/* The tab strip scrolls sideways, so it clips; the ring is drawn inside the tab. */
.tab:focus-visible { outline-offset: -3px; border-radius: var(--radius-control); }
.tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.panel-bar .field-label { color: var(--fg-muted); }
.panel-status { margin: 0; color: var(--fg-muted); font-family: var(--font-chrome); font-size: var(--meta); }
.pager { display: flex; margin: var(--space-7) auto 0; }

/* In Library a row list (artists, playlists) uses the width, in as many columns as fit;
   the queue and search stay one column. :where() keeps this at one class, so a view's
   own list (the genre index, genres.css) still sets its own columns. */
:where(.library) .row-list {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  column-gap: var(--space-5);
}

/* --- Search ------------------------------------------------------------------------------------- */

/* The search icon sits inside the field, on the left; the field is a raised pill. The
   submit (search.js) is an icon button at the pill's right end, shown while the form is
   in use: focus in it, or a query in the field (Enter submits either way). Hidden by
   opacity only, so it stays in the accessibility tree; it takes no clicks while hidden,
   so a click on the empty field's right end still lands in the field. The field rule
   names the input's id because the base text-field rule (forms.css) is (0,3,1); it sets
   no border colour, so hover and the focus ring still come from forms.css. */
.search-form { position: relative; display: flex; gap: var(--space-2); max-width: 40rem; margin-bottom: var(--space-3); }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  color: var(--fg-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.search-field #search-input {
  min-height: 3rem;
  padding: 0 calc(var(--control-h-sm) + .75rem) 0 2.75rem;
  background-color: var(--surface);
  border-radius: var(--radius-pill);
}
.search-submit {
  position: absolute;
  top: 0;
  right: .375rem;
  bottom: 0;
  margin: auto 0;
  color: var(--fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease);
}
.search-form:focus-within .search-submit,
.search-form:has(#search-input:not(:placeholder-shown)) .search-submit { opacity: 1; pointer-events: auto; }
.results > h2 { margin: var(--space-7) 0 var(--space-4); }

/* --- Queue page ---------------------------------------------------------------------------------- */

/* The saved-queue offer is a panel. On the page it shares the empty state's column. */
.resume {
  max-width: 28rem;
  margin: var(--space-4) auto 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.resume p { margin: 0; }
.resume .btn-primary { margin-top: var(--space-4); }

/* --- Starred ------------------------------------------------------------------------------------- */

.starred > h2 { margin: var(--space-7) 0 var(--space-4); }
.starred > h1 + h2 { margin-top: 0; }