:root {
  --bg: #111a26;
  --text: #f2e9dc;
  --text-muted: #c8bba6;
  --accent: #d9a441;
  --card-bg: #1b2634;
  --danger: #e06c6c;
  /* recolors every native checkbox/radio/range on the site to the accent
     gold instead of the browser-default blue, for free */
  accent-color: var(--accent);
  color-scheme: dark;
  /* small reusable type scale — most of the site still sets one-off
     font-sizes inline (fine for one-of-a-kind widgets), but headings and
     the handful of sitewide secondary-text patterns (tagline, metadata)
     read off this scale so they stay consistent as a group */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.35rem;
  --fs-xl: 2rem;
  --lh-body: 1.6;
  --lh-heading: 1.25;
}
* { box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: var(--lh-body);
  margin: 0;
  padding: 0 20px 60px;
}
/* base heading rhythm so any h1/h2/h3 reads consistently even outside the
   page-chrome <header> (e.g. the album page's title, which isn't wrapped
   in <header> since it's page content, not a page label) */
h1, h2, h3 {
  font-weight: bold;
  line-height: var(--lh-heading);
  margin: 1.4em 0 0.4em;
}
h1 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, var(--fs-xl)); margin-top: 0; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
main > h1:first-child, main > h2:first-child, main > h3:first-child { margin-top: 0; }
/* application chrome, not page content — compact, quiet, and the same on
   every page, so it never competes with a page's own title (issue #50) */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--card-bg);
}
.site-nav-left { display: flex; align-items: center; gap: 14px; }
.site-nav-logo { color: var(--text); font-weight: bold; font-size: 1rem; letter-spacing: 1px; text-decoration: none; flex: 0 0 auto; }
.site-nav-logo:hover { color: var(--accent); }
.site-nav-divider { color: var(--text-muted); opacity: 0.5; font-size: 0.85rem; }
/* the site's one community call-to-action, not a plain nav link — smaller
   than the logo and set in accent gold with a small "+" so it invites a
   contribution rather than reading as just another destination */
.site-nav-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: bold; font-size: 0.85rem; text-decoration: none; }
.site-nav-cta:hover { text-decoration: underline; }
.site-nav-cta-icon { font-size: 1rem; line-height: 1; }

/* below ~480px logo+divider+cta and the auth widget together are tight
   against the viewport edge; drop the auth widget to its own row rather
   than letting the bar overflow and force horizontal scroll */
@media (max-width: 480px) {
  .site-nav { flex-wrap: wrap; row-gap: 10px; }
  .auth-nav { flex: 1 1 100%; justify-content: center; display: flex; }
}

header { padding: 40px 0 28px; text-align: center; }
header h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); letter-spacing: 2px; }
header h1 a { color: inherit; text-decoration: none; }
header h1 a:hover { color: var(--accent); }
/* secondary text pattern used sitewide — short captions under a title as
   well as full instructional sentences (login prompts, empty states), so
   hierarchy comes from color/size alone rather than italics, which reads
   fine for a caption but hurts legibility once the text runs to a sentence */
.tagline { color: var(--text-muted); font-size: var(--fs-sm); }

/* visually hidden but still reachable by screen readers — used for section
   headings that would otherwise add visual clutter to a calm, minimal layout */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* shared style for inline metadata links on release pages — artist,
   genre, and (later) label/year/city links. keeps the surrounding text
   color instead of a default blue hyperlink, but stays recognisably
   clickable via a faint underline at rest (muted-tone, offset below the
   text so it doesn't cut through descenders) that brightens to the accent
   gold and thickens slightly on hover/focus — same idea as Discogs/
   Letterboxd's understated metadata links */
.meta-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.meta-link:hover, .meta-link:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
}

/* links that leave the archive entirely (discogs, bandcamp, a user's
   personal site) — solid accent color plus a small arrow so a reader can
   tell before clicking that it's not another archive page, unlike
   .meta-link's understated in-place treatment */
.external-link {
  color: var(--accent);
  text-decoration: none;
}
.external-link:hover, .external-link:focus-visible {
  text-decoration: underline;
}
.external-link-icon { font-size: 0.85em; }

.auth-nav { flex: 0 0 auto; text-align: left; font-style: normal; }
.auth-widget { position: relative; display: inline-block; }
.auth-trigger {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-trigger:hover { background: var(--accent); color: var(--bg); }
.auth-caret { font-size: 0.7rem; }
.gen-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  flex-shrink: 0;
}
.manage-row-avatar {
  vertical-align: middle;
  margin-right: 8px;
}
.auth-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  z-index: 10;
}
/* [hidden] alone loses to the plain .auth-menu rule above at equal
   specificity (author stylesheet beats the UA default either way) — this
   needs to win explicitly so the JS-toggled dropdown actually stays closed */
.auth-menu[hidden] { display: none; }
.auth-menu a, .auth-menu button {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.auth-menu a:hover, .auth-menu button:hover { background: rgba(217, 164, 65, 0.15); color: var(--accent); }
/* section heading within the menu (currently just "administration") —
   reuses the same muted/uppercase/tracked treatment the role label used to
   have, so a second group label later can lean on this instead of a new rule */
.auth-menu-label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; padding: 6px 10px 2px; }
.auth-menu-divider { width: 100%; border: none; border-top: 1px solid var(--text-muted); opacity: 0.25; margin: 5px 0; }

.onboarding-checklist { background: var(--card-bg); border: 1px solid var(--text-muted); border-radius: 6px; padding: 16px 18px; margin-bottom: 28px; }
.onboarding-checklist-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.onboarding-checklist-header h3 { margin: 0; font-size: var(--fs-md); }
.onboarding-checklist-subtitle { margin: 2px 0 0; }
/* glanceable, always visible even collapsed, so dismissing the item list
   doesn't hide the one thing ("how close am I?") the bar exists to answer */
.onboarding-checklist-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.onboarding-checklist-progress-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.onboarding-checklist-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; }
.onboarding-checklist-progress-label { flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-xs); }
.onboarding-checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.onboarding-checklist-items li { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-sm); }
.onboarding-checklist-items li::before { content: '○'; flex: 0 0 auto; color: var(--text-muted); font-size: 0.7em; }
.onboarding-checklist-items li.done::before { content: '✓'; color: var(--accent); }
.onboarding-checklist-items li.done { color: var(--text-muted); text-decoration: line-through; }
.onboarding-checklist-items li a { color: var(--accent); text-decoration: none; }
.onboarding-checklist-items li a:hover, .onboarding-checklist-items li a:focus-visible { text-decoration: underline; }
.onboarding-checklist-remove { margin-top: 12px; }

.profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-stats { display: flex; gap: 28px; margin-left: auto; }
/* supporting info under the tagline, not a hero section — same visual
   register as the footer's "133 releases and counting" line: muted, small,
   wraps as plain text rather than laid out as cards */
.homepage-stats { margin: 10px 0 0; font-size: 0.9rem; color: var(--text-muted); }
.homepage-stat-num { color: var(--text); font-weight: bold; }
.profile-stat { text-align: center; }
.profile-stat-num { display: block; font-size: 1.4rem; font-weight: bold; color: var(--text); }
.profile-stat-label { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.edit-profile-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.edit-profile-btn:hover { background: var(--accent); color: var(--bg); }
.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 24px 0 0;
  border-bottom: 1px solid var(--card-bg);
}
.profile-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.profile-tab:hover { color: var(--text); }
.profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.profile-tab-content { margin-top: 20px; }
.favorites-section { margin: 24px 0; }
.profile-activity { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--card-bg); }
.favorites-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.favorite-slot { position: relative; }
.favorite-slot.filled a { display: block; }
.favorite-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; display: block; }
.favorite-cover-blank { background: var(--card-bg); border: 1px solid var(--text-muted); }
.favorite-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(17, 26, 38, 0.85);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.favorite-remove-btn:hover { background: #a44; }
.favorite-slot.favorite-empty {
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.favorite-add-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
}
.favorite-add-btn:hover { color: var(--accent); }
.favorite-slot .favorite-search-input {
  width: 100%;
  padding: 6px 8px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  border-radius: 4px;
  box-sizing: border-box;
}
.favorite-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.favorite-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.favorite-result:first-child { border-top: none; }
.favorite-result:hover { background: var(--bg); color: var(--accent); }
#profile-name { color: var(--text); font-weight: bold; font-size: 1.4rem; margin: 0; }
/* field labels on the edit-profile page — block + spaced so each field reads
   as its own row rather than running into the previous one's helper text */
#edit-profile-content label { display: block; margin: 20px 0 6px; font-size: 0.9rem; }
.profile-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-edit-row input {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
.profile-edit-row textarea {
  width: 100%;
  max-width: 500px;
  min-height: 70px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.profile-bio { margin: 12px 0; color: var(--text); white-space: pre-wrap; }
.profile-edit-row select {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
}
.avatar-swatches { display: flex; gap: 8px; margin: 8px 0 20px; }
.avatar-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.avatar-swatch.active { border-color: var(--text); }
.danger-zone { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--card-bg); }
button.danger {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid #a44;
  color: #c66;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
button.danger:hover { background: #a44; color: #fff; }
button.danger:disabled { opacity: 0.4; cursor: not-allowed; }
/* general fallback so a plain class="secondary" button is never left with
   raw browser styling just because it isn't nested in a scope (.review-box,
   .submit-page, etc) that happens to style it — those can still override */
button.secondary {
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}
button.secondary:hover { border-color: var(--accent); color: var(--accent); }
button.secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.profile-edit-row button {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
.profile-edit-row button:hover { background: var(--accent); color: var(--bg); }
.profile-edit-row button:disabled { opacity: 0.4; cursor: not-allowed; }

#username-picker {
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 16px 0 24px;
}
#username-picker label { display: block; margin-bottom: 8px; }
#username-check-status { margin: 6px 0 0; font-size: 0.85rem; }

/* release page reads top-to-bottom as one column: cover+metadata, then
   external resources, then "your activity"+reviews — no sidebar, so
   everything shares the same quiet vertical rhythm */
.album-layout { display: flex; flex-direction: column; gap: 32px; margin-top: 20px; }

/* the compact cover+metadata pairing at the top of the page — stacked on
   mobile, side-by-side once there's room. plain spacing, no card
   background, so it reads as typeset content rather than a widget */
.release-external { display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }

/* "your activity" + reviews read as one connected block, set apart from the
   external links above by a hairline rule (same quiet idiom as
   .raters-list li) rather than a card */
.reviews-section { display: flex; flex-direction: column; gap: 28px; padding-top: 24px; border-top: 1px solid var(--card-bg); }
.your-activity { display: flex; flex-direction: column; gap: 10px; }
.personal-widget { display: flex; flex-direction: column; gap: 8px; }

/* a compact toolbar, not a form — rating select plus three status toggles
   sit on one row with no labels of their own; each control (a "n/10" value,
   a status name) already communicates what it does. spacing (not borders)
   separates the controls from each other */
.personal-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.widget-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.widget-label { color: var(--text-muted); font-size: 0.85rem; margin-right: 4px; }
/* shared by the rating and collection selects — same look as the filter
   selects in .controls, just sized for a compact row rather than a toolbar */
.widget-select {
  padding: 5px 8px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 4px;
}
.widget-select:hover, .widget-select:focus-visible { border-color: var(--accent); }
/* Backlog/Collection — quick-action toggles, same quiet idiom as .sort-link
   (no visible border until active) so the row reads as a toolbar rather
   than a set of form fields */
.status-toggle {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}
.status-toggle:hover, .status-toggle:focus-visible { color: var(--accent); }
.status-toggle.active { border-color: var(--text-muted); color: var(--text); }
.status-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bandcamp/Discogs — compact, no heading, kept apart from "report incorrect
   info" (.release-report) below since the two serve different purposes */
.sidebar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* compact icon-and-label treatment, kept visually secondary to the release
   itself — plain text-accent color, no button chrome, no arrow icon (that's
   reserved for .external-link-icon on generic outbound links elsewhere) */
.brand-link { display: inline-flex; align-items: center; gap: 8px; }
.brand-link-icon { display: block; height: 18px; width: auto; }
.release-report { margin: 0; }

.section-heading { margin: 0 0 14px; font-size: var(--fs-md); }

.raters-sort { margin: 16px 0 0; display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.sort-link {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}
.sort-link:hover { color: var(--accent); }
.sort-link.active { border-color: var(--text-muted); color: var(--text); }
/* used by the album page's raters list ("who rated this") */
.show-more-btn {
  display: block;
  margin: 10px 0 0;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}
.show-more-btn:hover { border-color: var(--accent); color: var(--accent); }
.raters-list { list-style: none; margin: 10px 0 0; padding: 0; }
.raters-list li {
  padding: 18px 0;
  border-top: 1px solid var(--card-bg);
  font-size: 0.9rem;
}
.raters-list li:first-child { padding-top: 4px; }
/* the signed-in viewer's own card, so it reads as "this is you" at a glance
   rather than blending into the rest of the list it now lives in */
.raters-list li.is-you { padding-left: 12px; border-left: 2px solid var(--accent); }
.raters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px; }
.raters-list a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: bold; font-size: 0.95rem; }
.raters-list a:hover { color: var(--accent); }
.raters-score { color: var(--accent); }
.raters-date { color: var(--text-muted); font-size: 0.8rem; margin-left: auto; }
/* one role per account is worth flagging (mod/admin); plain 'user' accounts
   never get one, so this stays rare and doesn't clutter every card */
.role-badge {
  padding: 1px 6px;
  border: 1px solid var(--text-muted);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* non-italic and roomier line-height — italic serif body text at length
   (a full review, not just a label) is genuinely hard to read */
.raters-review {
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--card-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.65;
  white-space: pre-wrap;
}
.raters-empty { padding: 16px 0 4px; text-align: center; }
.helpful-btn {
  margin-top: 6px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}
.helpful-btn:hover { border-color: var(--accent); color: var(--accent); }
.helpful-btn.active { border-color: var(--accent); color: var(--accent); background: var(--card-bg); }
.helpful-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.helpful-count { color: var(--text-muted); font-size: 0.8rem; }
.raters-review-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mod-remove-btn {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid #a44;
  color: #c66;
  font-family: inherit;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}
.mod-remove-btn:hover { background: #a44; color: #fff; }
.mod-remove-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.review-box { margin-bottom: 10px; }
.review-box textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 8px;
}
#save-review-btn {
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
#save-review-btn:hover { background: var(--accent); color: var(--bg); }
.review-box button.secondary {
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
.review-box button.secondary:hover { border-color: var(--accent); color: var(--accent); }
.review-box button:disabled { opacity: 0.4; cursor: not-allowed; }

/* profile "ratings & reviews" tab — each rating reads as one compact,
   top-to-bottom unit (cover, then title/artist/score/date stacked beside
   it) rather than a wide row with the score pulled off to the far edge.
   deliberately its own classes rather than reusing .raters-* (that
   component lists people who rated one release, on the album page; this
   one lists releases one person rated, on the profile page) — title/artist
   styling still borrows .card-title/.card-artist so it reads consistently
   with release cards elsewhere on the site */
.rating-list { list-style: none; margin: 16px 0 0; padding: 0; }
.rating-row { padding: 10px 0; border-top: 1px solid var(--card-bg); }
.rating-row:first-child { padding-top: 4px; border-top: none; }
.rating-row-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.rating-row-link:hover .card-title { color: var(--accent); }
.rating-cover { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; flex: none; }
.rating-cover-blank { background: var(--card-bg); border: 1px solid var(--text-muted); }
.rating-heading { min-width: 0; display: flex; flex-direction: column; }
.rating-heading .card-title, .rating-heading .card-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rating-heading .card-artist { margin: 1px 0 0; }
/* indent matches .rating-cover's width (52px) + .rating-row-link's gap
   (12px) so the score/date/review align under the title rather than
   trailing off under the artwork */
.rating-details { margin: 4px 0 0 64px; }
.rating-meta { font-size: 0.85rem; color: var(--text-muted); }
.rating-score { color: var(--accent); }
.rating-review {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--card-bg);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.rating-details .helpful-count { display: block; margin-top: 6px; }

.mod-card {
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mod-card dl { grid-template-columns: 100px 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.85rem; }
.mod-card .profile-edit-row button {
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
.mod-card .approve-btn:hover { background: var(--accent); color: var(--bg); }
/* specific enough to beat .mod-card .profile-edit-row button's accent border above,
   so the reject button reads as the destructive action without an inline style */
.mod-card .profile-edit-row .reject-btn { border-color: var(--danger); color: var(--danger); }
.mod-card .reject-btn:hover { background: var(--danger); color: var(--bg); }
.mod-card button:disabled { opacity: 0.4; cursor: not-allowed; }
/* fade the card out on approve/reject instead of yanking it away instantly,
   so the action reads as "done" rather than the row just vanishing */
.mod-card.card-removing { opacity: 0; transform: scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
/* the edit form's field list can run long (genres, formats, labels...), so
   its save/cancel row sticks to the bottom of the viewport instead of
   requiring a scroll to reach it — same complaint issue #26 raised about
   the separate catalog admin tool's popups */
.mod-card-editing .edit-actions-row {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 12px -16px -14px;
  padding: 10px 16px;
  background: var(--card-bg);
  border-top: 1px solid var(--text-muted);
}

/* manage.html's user table — horizontal scroll wrapper keeps a wide table
   from forcing the whole page to scroll sideways on narrow viewports */
.table-scroll { overflow-x: auto; }
.manage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.manage-table th, .manage-table td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.manage-table thead tr { color: var(--text-muted); font-size: var(--fs-xs); border-bottom: 1px solid var(--card-bg); }
.manage-table tbody tr { border-bottom: 1px solid var(--card-bg); }
.manage-table tbody tr:hover { background: var(--card-bg); }
.manage-table td { white-space: normal; }
/* click-to-sort column header — looks like the surrounding label, not a
   button, until hovered/focused */
.sort-th-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sort-th-btn:hover, .sort-th-btn:focus-visible { color: var(--accent); }
.search-row {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.search-row input {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  border-radius: 4px;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.controls:last-of-type { margin-bottom: 30px; }
.controls input, .controls select {
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  color: var(--text);
  font-family: inherit;
  border-radius: 4px;
}
#random-btn, #more-filters-btn, #clear-filters-btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
}
#random-btn:hover, #more-filters-btn:hover, #clear-filters-btn:hover { background: var(--accent); color: var(--bg); }
.load-more-row { display: flex; justify-content: center; margin-top: 24px; }
#load-more-btn {
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 4px;
  cursor: pointer;
}
#load-more-btn:hover { background: var(--accent); color: var(--bg); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.card {
  display: block;
  background: var(--card-bg);
  border-radius: 6px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.card:hover { border-color: var(--accent); }
.card-cover-wrap { position: relative; margin-bottom: 10px; }
.card-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; display: block; }
.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: rgba(17, 26, 38, 0.85);
  border: 1px solid var(--text-muted);
  border-radius: 6px;
  padding: 3px 8px;
}
.card-badge.high-rated { border-color: var(--accent); }
.card-badge-score { color: var(--text); font-weight: bold; font-size: 0.95rem; }
.card-badge.high-rated .card-badge-score { color: var(--accent); }
.card-badge-count { color: var(--text-muted); font-size: 0.75rem; }
.card-badge-standalone { position: static; display: inline-flex; margin-bottom: 10px; }
/* three deliberate size tiers so a card scans title -> artist -> meta at a
   glance, rather than color/weight alone doing all the work on top of a
   single shared size */
.card-title { font-weight: bold; font-size: var(--fs-md); line-height: 1.3; }
.high-rated { color: var(--accent); }
.card-artist { color: var(--text-muted); font-size: var(--fs-base); margin: 2px 0 8px; }
.card-meta, .card-genres { font-size: var(--fs-xs); color: var(--text-muted); }
.card-genres { margin-top: 6px; }
.empty { text-align: center; color: var(--text-muted); grid-column: 1/-1; }
/* letterboxd-style poster grid for backlog/collection — cover art only, no
   title/artist underneath */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.art-card { display: block; border-radius: 4px; overflow: hidden; }
.art-card-cover { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 4px; transition: opacity 0.15s; }
.art-card:hover .art-card-cover { opacity: 0.8; }
.art-card-blank {
  background: var(--card-bg);
  border: 1px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  box-sizing: border-box;
}
.album-profile { max-width: 700px; margin: 40px auto; }
/* the profile page is wider than a plain album/artist page (#profile-main
   only, not .album-profile generally) so its poster grids fit more covers
   per row — kept the same across every tab, rather than resizing per tab */
#profile-main { max-width: 1040px; }
/* manage.html's user table needs more room than a plain album/artist page
   to fit its columns without cramming — same override pattern as
   #profile-main above */
#manage-main { max-width: 1040px; }
.album-profile h1 { margin-bottom: 0; }
/* the "by Artist" byline under an album title — deliberately quieter than a
   real heading, so it's its own class rather than a bare `.album-profile h2`
   selector, which used to also catch (and wrongly mute) unrelated h2s that
   share the .album-profile content-wrapper class: guide.html's section
   headings, the profile page's "favourites"/"activity" headings and its
   own username heading */
.release-artist { color: var(--text-muted); font-weight: normal; font-size: var(--fs-lg); margin-top: 4px; }
/* compact two-column pairing: cover on the left, metadata dl on the right
   (community rating included as its final row) — stacked on narrow
   viewports since the dl's fixed label width needs room to breathe */
.album-top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 620px) {
  .album-top { flex-direction: row; }
}
.album-profile .cover { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 6px; flex: 0 0 auto; }
.album-meta-col { flex: 1; min-width: 0; }
.album-meta-col dl { margin: 0; }

.site-footer { max-width: 700px; margin: 60px auto 0; padding: 24px 20px 0; border-top: 1px solid var(--card-bg); text-align: center; color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; }
.site-footer p { margin: 6px 0; }
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 24px 0; }
dt { color: var(--text-muted); font-size: var(--fs-sm); }
.links a { color: var(--accent); }
/* lightweight in-context actions (report a problem, etc) rather than a
   destination to browse to — muted and small so it reads as a footnote,
   not a navigation link */
.action-link { color: var(--text-muted); font-size: 0.8rem; text-decoration: none; }
.action-link:hover, .action-link:focus-visible { color: var(--text); text-decoration: underline; }

.submit-page { max-width: 640px; margin: 0 auto; }
.submit-page fieldset { border: 1px solid var(--text-muted); border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; }
.submit-page legend { padding: 0 6px; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.submit-page label { display: block; margin: 8px 0 4px; font-size: 0.9rem; }
.submit-page input[type=text], .submit-page input[type=number], .submit-page input[type=url], .submit-page input[type=date], .submit-page select, .submit-page textarea {
  width: 100%; padding: 8px 10px; background: var(--card-bg); border: 1px solid var(--text-muted);
  color: var(--text); font-family: inherit; border-radius: 4px;
}
.submit-page input[type=date] { cursor: text; }
.submit-page input[type=date]:hover, .submit-page input[type=date]:focus { border-color: var(--accent); }
/* the little calendar glyph is a separate pseudo-element the color/accent
   properties above don't reach — webkit-only, but that covers Chrome,
   Edge and Safari; Firefox just inherits color-scheme's dark chrome instead */
.submit-page input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(85%) sepia(8%) saturate(400%);
  cursor: pointer;
  border-radius: 3px;
}
.submit-page input[type=date]::-webkit-calendar-picker-indicator:hover { filter: invert(75%) sepia(40%) saturate(500%) hue-rotate(1deg); }
.submit-page textarea { min-height: 60px; resize: vertical; }
.submit-page .row { display: flex; gap: 12px; flex-wrap: wrap; }
.submit-page .row > div { flex: 1; min-width: 140px; }
.submit-page .checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; max-height: 160px; overflow-y: auto; }
.submit-page .checks label {
  display: flex; align-items: center; gap: 7px; margin: 0; padding: 3px 8px 3px 4px;
  font-size: 0.85rem; border-radius: 4px; transition: background-color 0.15s;
}
.submit-page .checks label:hover { background: rgba(217, 164, 65, 0.12); }
.submit-page .checks input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
/* genres form a tree (any genre can have children), so they get their own
   layout: one per line so indentation reads correctly, plus a search box
   to cut down the list once there are a lot of them */
.submit-page #genre-search, .submit-page .e-genre-search { margin-bottom: 8px; }
.submit-page #genre-checks, .submit-page .e-genre-checks { display: block; flex-wrap: nowrap; max-height: 220px; }
.submit-page #genre-checks label, .submit-page .e-genre-checks label { display: flex; margin: 3px 0; }
.submit-page #genre-checks label.root, .submit-page .e-genre-checks label.root { font-weight: bold; }
.submit-page .label-row-input { display: flex; gap: 8px; margin-bottom: 8px; }
.submit-page .label-row-input input { flex: 1; }
.submit-page #labels-added { list-style: none; padding: 0; margin: 0 0 8px; }
.submit-page #labels-added li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--card-bg); font-size: 0.85rem; }
.submit-page #labels-added button { padding: 2px 8px; font-size: 0.75rem; }
.submit-page button[type=submit] {
  padding: 10px 20px; background: var(--accent); color: var(--bg); border: none;
  border-radius: 4px; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 1rem;
}
.submit-page button.secondary {
  padding: 6px 12px; background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 0.85rem;
}
.submit-page button[type=submit]:disabled { opacity: 0.6; cursor: default; }
#submit-status { margin-top: 14px; font-size: 0.9rem; min-height: 1.2em; }
#submit-status.error { color: var(--danger); }

.field-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; padding: 0;
  border: 1px solid var(--text-muted); color: var(--text-muted);
  font-size: 0.68rem; line-height: 1; background: transparent;
  cursor: help; margin-left: 5px; vertical-align: middle; position: relative;
  font-family: inherit;
}
.field-hint:hover, .field-hint:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.field-hint:hover::after, .field-hint:focus::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: 140%; z-index: 5;
  width: max-content; max-width: 240px;
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--text-muted); border-radius: 4px;
  padding: 8px 10px; font-size: 0.75rem; line-height: 1.4;
  font-weight: normal; text-align: left; text-transform: none; letter-spacing: normal;
}
#submit-status.success { color: var(--accent); }