:root {
  --ink: #111111;
  --ink-2: #333333;
  --ink-3: #555555;
  --muted: #4a4a4a;
  --line: #b8b8b8;
  --accent: #c40500;
  --bg: #ffffff;
  --on-ink: #ffffff;    /* text on an --ink fill */
  --tag-bg: #ffffff;
  --placeholder: #eeeeee; /* behind covers while they load */
  --row-line: #e2e2e2;
  --row-hover: #f5f5f5;
  color-scheme: light;
}
/* Dark mode (the lightbulb toggle; light until it's used). */
:root[data-theme="dark"] {
  --ink: #ededed;
  --ink-2: #d0d0d0;
  --ink-3: #a6a6a6;
  --muted: #b0b0b0;
  --line: #5a5a5a;
  --accent: #e3342b;
  --bg: #141414;
  --on-ink: #141414;
  --tag-bg: #1f1f1f;
  --placeholder: #262626;
  --row-line: #2c2c2c;
  --row-hover: #1d1d1d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

.page {
  max-width: 1680px;
  margin: 0 auto;
  padding: 12px clamp(16px, 2vw, 32px) 96px;
}

/* Header */

.header { display: flex; flex-direction: column; gap: 16px; }

.top-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
}

.title-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }

h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.count { display: flex; align-items: baseline; gap: 6px; }
.count-num {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.count-label { font-size: 14px; font-weight: 500; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; color: var(--muted); }
/* Shown instead of the label text on phones. */
.field-icon { display: none; flex: none; }

.field input,
.field select {
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.field input { width: 300px; max-width: 100%; padding: 0 14px; }
/* The search box's clear button, shown whenever there's text (the browser's own one
   only appears on hover or focus, so it's hidden). */
.search-box { position: relative; display: flex; max-width: 100%; }
.search-box input { padding-right: 44px; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { color: var(--ink); }
.search-clear:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 8px; }
.field select { padding: 0 12px; }

.genre-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 20px;
  min-height: 44px;
  padding-top: 12px;
  border-top: 4px solid var(--ink);
}
.genres { display: flex; flex-wrap: wrap; gap: 0 20px; }
/* No styles to show (the wishlist) and no admin link: just the rule, no empty row. */
.genre-bar:has(.genres:empty):not(:has(.page-links)) { min-height: 0; padding-top: 0; }

/* Style filters: plain words, the selected one underlined in red. */
.genre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
/* The less used styles: a full-width row of their own, below the rest of the genre bar. */
/* Slides open: the row's height animates from 0 to its content's (grid 0fr -> 1fr). */
.genre-more {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.genre-more.open { grid-template-rows: 1fr; }
.genre-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  min-height: 0;
  overflow: hidden;
  /* Room for the focus outlines, which overflow: hidden would otherwise cut off. */
  margin: 0 -6px;
  padding: 0 6px 6px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.genre-more.open .genre-more-row { opacity: 1; transform: none; }
/* The chevron button that shows and hides them; it flips to point up when open. */
.genre-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.genre-toggle svg { display: block; margin: auto; transition: transform 0.15s; }
.genre-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.genre-toggle:hover { color: var(--accent); }
.genre-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 7" / 12" filters at the end of the expanded row: the format tag itself; selected, it
   fills in black instead of being underlined. */
.genre-format { text-decoration: none !important; }
.genre-format .tag.format-tag { font-size: 12px; padding: 2px 10px; }
.genre-format:hover .tag.format-tag { border-color: var(--accent); color: var(--accent); }
.genre-format[aria-pressed="true"] .tag.format-tag { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* Rating filters, on their own line below; selected, a dark ring goes round the tag. */
.genre-break { flex-basis: 100%; height: 0; }
.genre-format .tag.rating { font-size: 12px; padding: 2px 10px; }
.genre-format:hover .tag.rating:not(.rating-high) { border-color: var(--accent); }
.genre-format[aria-pressed="true"] .tag.rating { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.genre:hover { color: var(--accent); }
.genre:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.genre[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Above the heading: Collection / Wishlist at the left, the Details checkbox at the right. */
.site-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.site-nav { display: flex; gap: 24px; }

/* Right end of the genre bar, admin only: leave admin mode. */
.page-links { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.admin-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
}
.admin-link:hover { color: var(--accent); }
.page-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
/* The page you're on: bold and underlined, like the selected style. */
.page-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.page-link:hover { color: var(--accent); }

.view-toggles { display: flex; align-items: center; gap: 16px; }
.detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.detail-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-toggle[aria-pressed="true"] .bulb { fill: currentColor; fill-opacity: 0.25; }
.page-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Album grid */

.status { margin: 64px 0; font-size: 18px; color: var(--muted); }

/* Four covers per row on desktop, three on narrower windows, two on tablets and phones;
   tight gaps so the covers get the space. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.grid.detailed { row-gap: 32px; } /* room between one card's text and the next row */
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  /* Skip layout/paint for cards far off screen; the collection is large. */
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* Holds the cover and, on the wishlist, the Want tag over its corner. */
.cover-wrap { position: relative; margin-bottom: 12px; }

.cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover; /* downloaded scans aren't always square */
  background: var(--placeholder);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.14);
}

/* Admin: the Find / Change cover button in the bottom-left corner, shown while the cover is
   hovered, tapped or focused, and while a search runs or after it failed. Hidden, it takes
   no clicks, so a click on the cover's corner doesn't start a search unseen. */
.cover-hint {
  position: absolute;
  z-index: 3; /* above the details overlay and the tags */
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.88);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.cover-wrap:is(.peek, :focus-within) .cover-hint,
.cover-hint:is([aria-busy="true"], .failed) { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .cover-wrap:hover .cover-hint { opacity: 1; pointer-events: auto; }
}
.cover-hint:hover { background: var(--accent); }
.cover-hint:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cover-hint[aria-busy="true"] { cursor: progress; background: rgba(17, 17, 17, 0.88); }
.cover-hint.failed { background: var(--accent); }

/* Cover picker */

.picker {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}
.picker::backdrop { background: rgba(17, 17, 17, 0.55); }

.picker-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }

.picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--ink);
}
.picker-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.picker-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }

.picker-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.picker-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.picker-form { display: flex; flex-direction: column; gap: 6px; }
.picker-form label { font-size: 12px; font-weight: 500; color: var(--muted); }
.picker-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-form input {
  flex: 1 1 280px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.picker-submit {
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.picker-edit summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.picker-edit summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.picker-edit-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.picker-edit-form label { font-size: 13px; color: var(--muted); }
.picker-edit-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 ui-monospace, Consolas, monospace;
  resize: vertical;
}
.picker-submit:focus-visible,
.picker-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.picker-status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
}
.picker-status { margin: 0; font-size: 14px; color: var(--muted); }
.picker-status.error { color: var(--accent); }
.picker-back {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 24px 16px;
}

.candidate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.candidate:focus-visible { outline: none; }
.candidate[aria-busy="true"] { cursor: progress; opacity: 0.6; }

.candidate-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 8px;
  background: var(--placeholder);
  outline: 3px solid transparent;
  outline-offset: 3px;
}
.candidate:hover .candidate-img,
.candidate:focus-visible .candidate-img { outline-color: var(--ink); }
.candidate.current .candidate-img { outline-color: var(--accent); }

.candidate-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.candidate-title { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.candidate-meta { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }

.fade-in { animation: fade-in 0.4s ease; }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  .cover-hint,
  .cover-info,
  .genre-toggle svg,
  .tr-cover,
  .genre-more,
  .genre-more-row { transition: none; }
}

.title { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.artist { font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.meta { font-size: 14px; color: var(--ink-3); }

/* Text-only view: no covers, one record per row. */
.text-list { margin-top: 24px; border-top: 1px solid var(--line); }
.text-row {
  padding: 9px 4px;
  border-bottom: 1px solid var(--row-line);
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  content-visibility: auto;
  contain-intrinsic-size: auto 40px;
}
.text-row { cursor: pointer; }
.text-row:hover { background: var(--row-hover); }
.text-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* A row's cover, slid open below it on click: height animates from 0 (grid 0fr -> 1fr). */
.tr-cover {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.text-row.open .tr-cover { grid-template-rows: 1fr; }
.tr-cover-inner { min-height: 0; overflow: hidden; }
/* Detailed view: the record's styles and where it was bought. On desktop they sit beside
   the cover, level with its top: styles under the artist, the shop from under the price.
   On phones, each on its own line above the cover. */
.tr-style,
.tr-shop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 14px;
}
.tr-cover-box {
  position: relative;
  width: 280px;
  max-width: 100%;
  margin: 10px 0 6px;
}
.tr-cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--placeholder);
}
/* Admin: clicking the cover shows its buttons at the bottom left (hovering does too). */
.tr-cover-box.admin { cursor: pointer; }
.tr-cover-actions {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tr-cover-box:is(:hover, :focus-within, .show-actions) .tr-cover-actions { opacity: 1; pointer-events: auto; }
.tr-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(17, 17, 17, 0.88);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tr-action:hover { background: var(--accent); }
.tr-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tr-action[aria-busy="true"] { cursor: progress; background: rgba(17, 17, 17, 0.88); }
.tr-cover-msg:not(:empty) { margin-top: 6px; color: var(--accent); font-size: 13px; }
/* The tracklist, right beside the cover; long titles wrap. */
.tr-tracks { flex: 1 1 0; min-width: 0; cursor: auto; }
.tr-track-list { margin: 10px 0 6px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.tr-track { display: flex; gap: 10px; }
.tr-track-pos { flex: 0 0 2.2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tr-track-title { flex: 1; min-width: 0; color: var(--ink-2); }
.tr-track-artist { color: var(--ink-3); }
/* Track marks from the Annotations column: red for ++ and +, grey for the rest. */
.track-mark {
  display: inline-block;
  min-width: 2.4em;
  padding: 0 5px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: 1px;
}
.mark-best { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.mark-good { border-color: var(--accent); color: var(--accent); }
.mark-weak,
.mark-worst { border-style: dashed; }
.mark-worst { background: var(--placeholder); }
.tr-track-heading { margin-top: 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tr-track-heading:first-child { margin-top: 0; }
.tr-artist { color: var(--ink-2); }
.tr-album { font-weight: 700; }
.tr-year,
.tr-format,
.tr-price,
.tr-date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.text-row .tag,
.tag.inline { position: static; box-shadow: none; max-width: none; display: inline-block; white-space: nowrap; }
/* Format (12", 7", Single), shown as a tag like the rating's. */
.tag.format-tag { padding: 1px 8px; color: var(--ink); font-size: 11px; vertical-align: 1px; }

/* Text-only + details, desktop: columns for artist, album (year), format, price, date and tag.
   Price, date and tag are just wide enough and sit against the right edge, leaving the
   album column (and the tracklist under it) as much room as possible. */
.text-list.detailed .text-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 4em 4.5em 6em var(--tag-col, 6em);
  column-gap: 16px;
  align-items: center;
}
.text-list.detailed :is(.tr-main, .tr-sub) { display: contents; }
.text-list.detailed :is(.tr-main > *, .tr-tag, .tr-sub > *) { grid-row: 1; }
.text-list.detailed .tr-artist { grid-column: 1; }
.text-list.detailed .tr-album { grid-column: 2; }
.text-list.detailed .tr-format { grid-column: 3; }
.text-list.detailed .tr-price { grid-column: 4; }
.text-list.detailed .tr-date { grid-column: 5; }
.text-list.detailed .tr-tag { grid-column: 6; }
/* The collection's tag is only ever a rating ("★ 4.5"); the wishlist's Want labels need more. */
body[data-api="/api/albums"] .text-list.detailed { --tag-col: 4em; }
.text-list.detailed :is(.tr-price, .tr-date, .tr-tag) { white-space: nowrap; }
.text-list.detailed .tr-tag { justify-self: end; }
.text-list.detailed .tr-sub .tr-year { display: none; } /* shown after the title instead */
.tr-title-year { font-weight: 400; }
.text-list.detailed :is(.tr-year, .tr-format, .tr-price, .tr-date) { font-size: 14px; }
/* The cover lines up with the album column; the styles and shop share the row's columns. */
.text-list.detailed .tr-cover { grid-row: 2; grid-column: 1 / -1; grid-template-columns: subgrid; }
.text-list.detailed .tr-cover-inner { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.text-list.detailed .tr-cover-inner > * { grid-row: 1; }
.text-list.detailed .tr-media { grid-column: 2 / 4; display: flex; align-items: flex-start; gap: 24px; }
.text-list.detailed .tr-cover-box { flex: none; }
.text-list.detailed .tr-style { grid-column: 1; } /* under the artist */
.text-list.detailed .tr-style svg { display: none; } /* keeps it in line with the artists */
/* Under the price, starting where it starts. */
.text-list.detailed .tr-shop { grid-column: 4 / -1; }

/* Simple view (the default): covers only, plus the Want tag on the wishlist. */
.grid:not(.detailed) .card > :is(.title, .artist, .meta) { display: none; }
.grid:not(.detailed) .cover-wrap { margin-bottom: 0; }

/* Simple view: hovering (or tapping) a cover darkens it and shows the details at the top
   left, clear of the Want tag in the bottom right. */
.cover-info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 44px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); /* keeps the text readable on light covers */
  opacity: 0;
  pointer-events: none; /* clicks go through to the cover */
  transition: opacity 0.15s;
}.cover-info .artist,
.cover-info .meta { color: rgba(255, 255, 255, 0.9); }
.grid.detailed .cover-info { display: none; }
.cover-wrap.peek .cover-info { opacity: 1; }
/* Generated covers show the details all the time, over a shade that fades out from the
   top left instead of darkening the whole cover. */
.cover-wrap.generic .cover-info {
  opacity: 1;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 65%);
}
@media (hover: hover) {
  .cover-wrap:hover .cover-info { opacity: 1; }
}

/* Tags on the cover's bottom-right corner (wishlist Want level, collection rating).
   Opaque so they read on any cover. */
.tag {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 3px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--ink-3);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Want: strongest is solid red, then red outline, then grey. */
.want-5 { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.want-4 { border-color: var(--accent); color: var(--accent); }
.rating { color: var(--ink); }
.rating-star { color: var(--accent); }
/* 4.0 and above: solid red, like "Must have". */
.rating-high { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.rating-high .rating-star { color: #ffffff; }
/* The wishlist's target price, on the bottom-left corner. */
.tag.price-tag { left: 10px; right: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The admin's cover button takes the bottom-left corner; the price tag there steps aside. */
.cover-wrap.admin:is(.peek, :focus-within, :has(.cover-hint:is([aria-busy="true"], .failed))) .price-tag { opacity: 0; }
@media (hover: hover) {
  .cover-wrap.admin:hover .price-tag { opacity: 0; }
}

/* Phones: two covers per row, with tighter spacing and smaller text to fit. */
@media (max-width: 600px) {
  .grid {
    gap: 8px;
    margin-top: 24px;
  }
  .grid.detailed { row-gap: 20px; }
  .card { contain-intrinsic-size: auto 280px; }
  .title-group { gap: 10px; }
  /* The links wrap to their own row here; keep the extra styles right under the others. */
  .genre-more { order: 1; }
  .genre { min-height: 32px; }
  /* Text-only: smaller type; with details, two lines per record: "Artist – Album" across
     the full width, then year · format · price · date with the tag at the right. */
  .text-row { font-size: 15px; padding: 8px 2px; }
  .text-list.detailed .text-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; }
  .text-list.detailed .tr-sub { display: block; grid-column: 1; grid-row: 2; font-size: 13px; }
  .text-list.detailed .tr-main { display: block; grid-column: 1 / -1; grid-row: 1; }
  .text-list.detailed .tr-album::before { content: " – "; font-weight: 400; color: var(--ink-2); }
  .text-list.detailed .tr-format { margin-left: 6px; white-space: nowrap; }
  .text-list.detailed .tr-tag { grid-column: 2; grid-row: 2; }
  .text-list.detailed .tr-sub .tr-year { display: inline; }
  .tr-title-year { display: none; }
  .text-list.detailed :is(.tr-year, .tr-format, .tr-price, .tr-date) { font-size: inherit; }
  .tr-sub > * + *::before { content: " · "; color: var(--ink-3); }
  .text-list.detailed .tr-cover { grid-row: 3; grid-column: 1 / -1; }
  .tr-cover-box { width: 100%; }
  .text-list.detailed .tr-media { display: block; }
  .tr-track-list { margin-top: 4px; }
  .text-list.detailed .tr-cover-inner { display: block; }
  .tr-style,
  .tr-shop { margin-top: 6px; font-size: 13px; }
  .tr-style + .tr-shop { margin-top: 2px; }
  .text-list.detailed .tr-style svg { display: inline; }
  /* Just the icon's width, so it fits at the end of a full first line. */
  .genre-toggle { min-width: 20px; min-height: 32px; padding: 0; }
  /* The first line spreads across the full width, with All at the left edge and the
     chevron at the right; the gap is only the minimum. */
  .genres { flex-basis: 100%; justify-content: space-between; column-gap: 4px; }
  .genres:empty { display: none; } /* the wishlist has no styles */
  /* Japanese labels are compact; tighter spacing fits more styles on a line. */
  .ui-ja .genre-more-row { column-gap: 10px; }
  .page-links { order: 2; }
  /* Links, both checkboxes and the lightbulb on one line, even at 360px. */
  .site-bar { gap: 8px; }
  .site-nav { gap: 14px; }
  .view-toggles { gap: 10px; }
  .detail-toggle { gap: 5px; white-space: nowrap; }
  .theme-toggle { width: 26px; margin-left: -2px; }
  h1 { font-size: 40px; }
  .title-group { gap: 4px 10px; }
  .count-num { font-size: 22px; }
  .count-label { font-size: 12px; }
  /* Search and sort: an icon beside each box instead of a label above it, one per row. */
  .controls { width: 100%; gap: 8px; }
  .field { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px; }
  .field label { display: flex; color: var(--ink-2); }
  .field-icon { display: block; }
  .field-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .field input,
  .field select { flex: 1; min-width: 0; width: auto; }
  .search-box { flex: 1; min-width: 0; }
  .cover-wrap { margin-bottom: 8px; }
  .cover-info { padding: 8px 8px 32px; gap: 2px; }
  .cover-hint { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 6px; font-size: 11px; }
  .title { font-size: 15px; }
  .artist { font-size: 13px; }
  .meta { font-size: 12px; }
  .tag { right: 6px; bottom: 6px; padding: 2px 8px; font-size: 11px; }
  .tag.price-tag { left: 6px; right: auto; }
}