/*
 * Covers, and the look every page shares (spec v1.1 §6).
 *
 * Sleeve's signature, modernised: covers lead; album, artist and playlist heroes and
 * Home's feature take a tint sampled from the cover (--tint, set on the section by
 * tint.js) as a gradient that melts into --bg; titles are set wide and heavy in the
 * display face; tracklists read like the back of a sleeve (number, title, dotted
 * leader, duration in tabular figures). Cards have no boxes: a cover and two lines.
 *
 * Every tinted surface mixes --tint TOWARD --bg, never toward white, which is what
 * keeps tint.js's guarantee (--fg-muted >= 4.5:1 on the tint) true for every stop.
 */

/* --- Covers --------------------------------------------------------------------------------- */

/* On near-black a dark cover has no edge and a shadow is invisible, so every cover
   carries a 1px light edge. An outline, offset inward, paints over the image (an inset
   shadow would sit under it). */
.cover {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface-2);
  border-radius: var(--radius-cover);
  outline: 1px solid var(--edge);
  outline-offset: -1px;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover--empty::after,
.player-art:has(> img[hidden])::after {
  content: "\266A";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  font-size: 1.5em;
}

/* An artist is a monogram in a circle (an album is a square): the first letter in the
   display face at normal width on --surface-2. The size follows the frame (48px in
   rows, 40px in search), so the letter is em-based. The circle must out-rank the row's
   small square corner (`.row .cover`, rows.css, loaded later), hence the doubled class. */
.cover--monogram {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: 1.125rem;
  line-height: 1;
  user-select: none;
}
.cover.cover--monogram,
.row .cover.cover--monogram { border-radius: 50%; }
.search .row .cover--monogram { font-size: 1rem; }