/* release-tags.css — small, unobtrusive informational chips on the search
 * "Raw sources" one-line release rows. Rendered by the layout agent as
 *   <span class="rel-tag rel-tag--${kind}">${text}</span>
 * (kind ∈ quality | protocol | codec | hdr | audio | subs | size | lang).
 * This is a secondary section, so keep chips quiet: a faint tinted pill that
 * only reads as an accent, never competing with the release title. */

.rel-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  vertical-align: middle;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Neutral default: dim text on a faint elevated surface. */
  color: var(--muted, #9aa0b4);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Per-kind accents — codec vs audio vs hdr must be separable at a glance.
 * Each uses a tinted border + text with a very faint matching fill, so the row
 * stays calm while the colour still discriminates. */

/* codec (x265 / H.264 / AV1 / 10-bit) — cool blue */
.rel-tag--codec {
  color: #7cc4ff;
  background: rgba(64, 150, 255, 0.10);
  border-color: rgba(64, 150, 255, 0.32);
}

/* HDR / Dolby Vision — warm gold, the "premium picture" cue */
.rel-tag--hdr {
  color: #ffd257;
  background: rgba(255, 200, 60, 0.11);
  border-color: rgba(255, 200, 60, 0.34);
}

/* audio (Atmos / DTS-HD / DD+ / FLAC …) — green */
.rel-tag--audio {
  color: #74d99a;
  background: rgba(70, 200, 120, 0.10);
  border-color: rgba(70, 200, 120, 0.30);
}

/* subtitles — teal/cyan, adjacent-but-distinct from audio */
.rel-tag--subs {
  color: #63d3d0;
  background: rgba(70, 200, 200, 0.10);
  border-color: rgba(70, 200, 200, 0.28);
}

/* size — plain neutral (informational, not a quality signal) */
.rel-tag--size {
  color: var(--muted, #9aa0b4);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* language / MULTI — the app accent purple, ties it to the rest of the UI */
.rel-tag--lang {
  color: var(--accent-2, #a87bff);
  background: rgba(140, 92, 255, 0.12);
  border-color: rgba(140, 92, 255, 0.34);
}

/* quality / protocol — not normally emitted by release-tags.js (the row shows
 * them already), but styled so a caller that does emit them stays consistent. */
.rel-tag--quality {
  color: var(--fg, #f4f5f8);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.rel-tag--protocol {
  color: var(--muted, #9aa0b4);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.10);
  text-transform: uppercase;
}