/* ─ Album Detail ─ */

/* Shared Accent-Pill for the album-detail genre row (primary genre + "+N"). */
.album-detail-genre-pill {
  appearance: none;
  vertical-align: middle;
  padding: 0.1em 0.45em;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.album-detail-genre-pill:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.album-detail-genre-pill:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.album-detail-genre-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
}

/* Cursor-anchored genre list (context-menu style) opened from the "+N" chip. */
.genre-menu {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  max-width: 280px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Genre chips mirror the .genre-pill styling on the Genres page. */
.genre-menu-item {
  appearance: none;
  text-align: left;
  padding: 0.12em 0.5em;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--genre-color, var(--accent)) 22%, transparent);
  background: color-mix(in srgb, var(--genre-color, var(--accent)) 6%, transparent);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.genre-menu-item:hover {
  background: color-mix(in srgb, var(--genre-color, var(--accent)) 14%, transparent);
  border-color: color-mix(in srgb, var(--genre-color, var(--accent)) 45%, transparent);
  color: var(--genre-color, var(--accent));
}

.genre-menu-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--genre-color, var(--focus-ring-color));
  outline-offset: var(--focus-ring-offset);
}
