/* Palette: five colors plus white, the brand color (header), and one red reserved for likes and destructive actions. */
:root {
    --color-paper: #f4f3f2;
    --color-ink: #262421;
    --color-muted: #5b544c;
    --color-line: #e2ddd5;
    --color-accent: #26596e;
    --color-surface: #ffffff;
    --color-brand: #22304a;
    --color-heart: #b4464b;
    --color-danger: var(--color-heart);
    /* Derived, not a new color: 3:1 against white for input and button edges. */
    --color-line-strong: color-mix(in srgb, var(--color-muted) 70%, var(--color-surface));

    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --width-page: 1080px;
    --width-narrow: 640px;
    --width-content: var(--width-page);
    --gutter: 16px;
    --radius: 4px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--color-accent); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: var(--space-2); background: var(--color-surface); padding: var(--space-2) var(--space-3); z-index: 10; }

.muted { color: var(--color-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Header */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}

.site-header--inner {
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-3) var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand toggle account" "nav nav nav" "search search search";
    gap: var(--space-3) var(--space-4);
    align-items: center;
}

.site-header--brand {
    grid-area: brand;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-header--nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
@media (max-width: 420px) { .site-header--nav { gap: var(--space-1) var(--space-3); font-size: 0.9375rem; } }
.site-header--nav a { color: var(--color-muted); text-decoration: none; padding: var(--space-1) 0; }
.site-header--nav a:hover { color: var(--color-ink); }
.site-header--nav a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }

.site-header--search { grid-area: search; display: none; }
.site-header--search.is-open { display: block; }
.search-toggle { grid-area: toggle; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--color-ink); border-radius: var(--radius); }
.search-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--color-accent); }
.site-header--search input { width: 100%; }

.site-header--account { grid-area: account; justify-self: end; }
.site-header--account > a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.site-header--account > a:hover { text-decoration: underline; }

@media (min-width: 900px) {
    .site-header--inner {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "brand nav toggle account" "search search search search";
        gap: 0 var(--space-6);
    }
    .site-header--search.is-open { margin: var(--space-3) 0 var(--space-1); }
    .search-toggle { margin-right: calc(-1 * var(--space-3)); }
}

/* Page */
.page {
    flex: 1;
    width: 100%;
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-6) var(--gutter) var(--space-12);
}

.page--header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.page--header .page--title { margin-bottom: 0; }
.page--title { font-size: 1.625rem; margin-bottom: var(--space-4); letter-spacing: -0.015em; }
.page--title a { color: inherit; }
.page--title:has(+ .page--subtitle) { margin-bottom: var(--space-1); }
.page--subtitle { color: var(--color-muted); margin-bottom: var(--space-6); }

.narrow { max-width: var(--width-narrow); }
.narrow-form { max-width: var(--width-narrow); }
.auth { margin: var(--space-8) auto 0; max-width: 420px; }

.section { margin-top: var(--space-8); }
.page > .section:first-child { margin-top: 0; }
.section--header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); border-bottom: 2px solid var(--color-line); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.section--header .section--heading { border: 0; padding: 0; margin: 0; }
.section--heading { font-size: 1.125rem; border-bottom: 2px solid var(--color-line); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }

.empty { color: var(--color-muted); }
.hint { color: var(--color-muted); font-size: 0.875rem; margin: 0; }
.prose { max-width: 68ch; }

.notice { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid var(--color-accent); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.notice-error { border-left-color: var(--color-ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-muted); }
.site-footer--inner { max-width: var(--width-page); margin: 0 auto; padding: var(--space-3) var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); font-size: 0.8125rem; }
.site-footer--inner p { margin: 0; }
.site-footer a { color: var(--color-muted); }

/* Forms */
input, select, textarea, button { font: inherit; color: inherit; }

input:not([type="checkbox"]):not([type="file"]), select, textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius);
    padding: 0.5rem 0.625rem;
    min-height: 2.5rem;
    max-width: 100%;
}
input:not([type="checkbox"]):not([type="file"]):focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: 0; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--color-ink) !important; }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input:not([type="file"]) { width: 100%; }
.field--error { margin: 0; font-size: 0.875rem; font-weight: 600; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack + form { margin-top: var(--space-3); }
.actions { display: flex; gap: var(--space-3); align-items: center; }
.checkbox { display: flex; gap: var(--space-2); align-items: center; }
.checkbox input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); }

.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-form input { flex: 1 1 12rem; }
.inline-form select { flex: 0 1 auto; }
.inline-form select.inline-form--grow { flex: 1 1 12rem; }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-6); }
.filters .field { flex: 1 1 8rem; max-width: 14rem; }
.filters select { width: 100%; }

.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); max-width: var(--width-narrow); }
.search-form input { flex: 1; }

.code-input { font-size: 1.5rem !important; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }

/* Buttons */
.button, .button-secondary, .button-danger {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.5rem; padding: 0.5rem 1rem;
    border-radius: var(--radius); border: 1px solid transparent;
    font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button { background: var(--color-accent); color: var(--color-surface); }
.button:hover { background: var(--color-ink); color: var(--color-surface); }
.button-secondary, .button-danger { min-height: 2rem; padding: 0.3rem 0.75rem; font-size: 0.875rem; }
.button-secondary { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.button-secondary:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.button-danger { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.button-danger:hover { background: color-mix(in srgb, var(--color-danger) 18%, transparent); color: var(--color-danger); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.link-button { background: none; border: 0; padding: 0; color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; font-size: inherit; }
.link-button:hover { color: var(--color-ink); }

/* Lists of things */
.plain-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }

.tabs { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.tabs a { color: var(--color-muted); text-decoration: none; padding-bottom: var(--space-1); }
.tabs a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-list a { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); text-decoration: none; }
.chip-list a:hover { border-color: var(--color-ink); }

.row-list { list-style: none; }
.row-list--item, .import-job { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; }
.row-list > li + li { border-top: 1px solid var(--color-line); }
.row-list--item > div:not(.row-list--album), .row-list--album > div { display: flex; flex-direction: column; min-width: 0; }
.row-list--album { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.import-job { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.import-job--head { display: flex; justify-content: space-between; gap: var(--space-4); }
.import-job--head .muted { white-space: nowrap; }
.import-job progress { width: 100%; accent-color: var(--color-accent); }

/* Covers */
.cover { display: block; aspect-ratio: 1; object-fit: cover; background: var(--color-line); border-radius: 2px; outline: 1px solid rgb(0 0 0 / 0.08); outline-offset: -1px; }
.cover-missing { background: var(--color-line); }

/* Album rows (ranked and plain lists) */
.album-list { list-style: none; }
.album-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.album-row + .album-row { border-top: 1px solid var(--color-line); }
.album-row--rank { width: 2rem; flex: none; text-align: left; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.album-row--cover { flex: none; }
.album-row--cover .cover { width: 96px; height: 96px; }
.album-row { gap: var(--space-4); }
.album-row--title { font-size: 1.0625rem; }
.album-row--main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.album-row--title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.album-row--title:hover { text-decoration: underline; }
.album-row--artist { overflow-wrap: anywhere; }
.album-row--meta { color: var(--color-muted); font-size: 0.875rem; }
.album-row--score { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.album-row--average { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.album-row--count { color: var(--color-muted); font-size: 0.8125rem; }

@media (max-width: 480px) {
    .album-row { gap: var(--space-3); }
    .album-row--rank { width: 1.5rem; font-size: 0.875rem; }
    .album-row--cover .cover { width: 64px; height: 64px; }
}

/* Album grid */
.album-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.album-grid-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.album-tile { display: flex; flex-direction: column; min-width: 0; font-size: 0.9375rem; }
.album-tile--link { text-decoration: none; color: var(--color-ink); display: flex; flex-direction: column; gap: var(--space-2); }
.album-tile--link .cover { width: 100%; }
.album-tile--link:hover .album-tile--title { text-decoration: underline; }
.album-tile--title { font-weight: 600; overflow-wrap: anywhere; }
.album-tile--artist, .album-tile--meta { color: var(--color-muted); overflow-wrap: anywhere; }
.album-tile--meta { font-size: 0.8125rem; }
.album-tile--rating { font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
    .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .album-grid-small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
}

/* Album page */
.album-page--head { display: grid; gap: var(--space-6); }
.album-page--cover .cover { width: 100%; }
.album-page > .section, .album-page > .notice { max-width: var(--width-content); }
.content-column { max-width: var(--width-content); }
.album-page--title { font-size: 1.875rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.album-page--artist { font-size: 1.25rem; margin: var(--space-1) 0 var(--space-4); }
.album-page--meta { color: var(--color-muted); margin: 0 0 var(--space-1); }
.album-page--genres { margin: 0; }

.album-page--info { min-width: 0; }

@media (min-width: 720px) {
    .album-page--head { grid-template-columns: 300px 1fr; gap: var(--space-8); align-items: stretch; }
    .album-page--cover { align-self: start; }
    .album-page--cover .cover { max-width: 300px; }
}

.meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.meta > div { display: contents; }
.meta dt { color: var(--color-muted); }
.meta-inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-4); }
.meta-inline > div { display: flex; gap: var(--space-2); }

.album-page--rating { margin-top: auto; padding-top: var(--space-6); display: flex; align-items: center; gap: var(--space-4); }
.score { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.score--value { font-size: 2.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.score--count { color: var(--color-muted); font-size: 0.875rem; }

.rate { padding-bottom: 0; }
.rate--remove { font-size: 0.875rem; margin-top: var(--space-4); }

.rate-popover {
    width: min(560px, calc(100vw - 2 * var(--gutter)));
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-ink);
    padding: var(--space-6);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
}
.rate-popover::backdrop { background: rgb(0 0 0 / 0.3); }
.rate-popover--header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.rate-popover--heading { font-size: 1.125rem; overflow-wrap: anywhere; }

.rating-picker { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-1); }
.rating-picker label {
    display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
    border: 1px solid var(--color-line-strong); border-radius: var(--radius); background: var(--color-surface);
    font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.rating-picker label:hover { border-color: var(--color-ink); }
.rating-picker input:checked + label { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
.rating-picker input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 480px) { .rating-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); } }

.score-value { margin: 0; padding-bottom: var(--space-2); border-bottom: 4px solid var(--color-ink); font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.album-page--rating-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.own-rating { background: none; border: 0; padding: 0; font-size: 0.9375rem; color: var(--color-accent); text-decoration: none; cursor: pointer; }
.own-rating:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.15em; }
.own-rating strong { font-weight: 700; }

.field--optional { font-weight: 400; color: var(--color-muted); }
.rate-popover--actions { justify-content: space-between; }

.vote-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.vote-list li { display: flex; gap: var(--space-4); align-items: baseline; }

.source-links { display: flex; gap: var(--space-4); margin-top: var(--space-8); font-size: 0.875rem; }
.source-links a { color: var(--color-muted); }

/* Reviews */
.review-stack { display: flex; flex-direction: column; }
.review { padding: var(--space-6) 0; }
.review + .review { border-top: 1px solid var(--color-line); }
@media (max-width: 480px) { .review { padding: var(--space-5) 0; } }
.review--score { margin: 0 0 var(--space-4); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.review--score-max { font-size: 0.7em; font-weight: 400; color: var(--color-muted); letter-spacing: 0; margin-left: 1px; }
.review--album { display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink); margin-bottom: var(--space-4); width: fit-content; }
.review--album:hover .review--album-title { text-decoration: underline; }
.review--album-title { font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.review--album-artist { color: var(--color-muted); }
.review-with-album { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.review--cover .cover { width: 100%; }
.review--top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.review--top .review--album { margin-bottom: 0; }
.review--top .review--score { margin: 0; flex: none; }
.review:not(.review-with-album) .review--content { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
.review:not(.review-with-album) .review--score { grid-row: 1 / span 2; margin: 0; line-height: 1.2; }
.review:not(.review-with-album) .review--body, .review:not(.review-with-album) .review--footer { grid-column: 2; }
@media (max-width: 480px) {
    .review:not(.review-with-album) .review--content { display: block; }
    .review:not(.review-with-album) .review--score { margin: 0 0 var(--space-3); }
}
.review--content { min-width: 0; }
@media (max-width: 560px) {
    .review-with-album { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }
    .review-with-album .review--content { display: contents; }
    .review-with-album .review--top { flex-direction: column; gap: var(--space-2); margin-bottom: 0; }
    .review-with-album .review--album-title { font-size: 1.125rem; }
    .review-with-album .review--body, .review-with-album .review--footer { grid-column: 1 / -1; }
    .review-with-album .review--footer { margin-top: 0; }
}
.review--body { overflow-wrap: anywhere; max-width: 68ch; }
.review--body p:last-child { margin-bottom: 0; }
.review--footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); font-size: 0.875rem; color: var(--color-muted); }
.review--byline { margin: 0; }
.review--author { color: var(--color-muted); font-weight: 600; text-decoration: none; }
.review--author:hover { color: var(--color-ink); text-decoration: underline; }
.review--actions { display: flex; align-items: center; gap: var(--space-3); }


.heart { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; display: block; }
.like-button, .like-count { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.like-button { background: none; border: 0; padding: var(--space-1); margin: calc(-1 * var(--space-1)); cursor: pointer; font-size: inherit; border-radius: var(--radius); }
.like-button { color: var(--color-heart); }
.like-button:hover .heart, .like-button[aria-pressed="true"] .heart { fill: currentColor; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table thead th { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.discography--year { width: 4rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.discography--num { width: 1%; white-space: nowrap; }
.discography--title { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.discography--title .cover { width: 40px; height: 40px; flex: none; }
.discography--title:hover span { text-decoration: underline; }
@media (max-width: 480px) {
    .discography--count { display: none; }
    .data-table th, .data-table td { padding: var(--space-2); }
}

/* Genre tree */
.genre-tree { columns: 3 260px; column-gap: var(--space-8); }
.genre-tree--group { break-inside: avoid; margin-bottom: var(--space-6); }
.genre-tree--top { font-size: 1.0625rem; margin-bottom: var(--space-2); }
.genre-tree--top a { color: var(--color-ink); }
.genre-tree ul { list-style: none; }
.genre-tree ul ul { padding-left: var(--space-4); border-left: 1px solid var(--color-line); margin: var(--space-1) 0 var(--space-1) var(--space-1); }
.genre-tree li { padding: 0.125rem 0; }
.genre-tree .muted { font-size: 0.8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }

/* Lists */
.list-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.list-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.list-card--covers { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: var(--space-2); }
.list-card--covers .cover { width: 100%; border-radius: 0; }
.list-card--title { font-weight: 650; font-size: 1.0625rem; text-decoration: none; overflow-wrap: anywhere; }
.list-card--title:hover { text-decoration: underline; }
.list-card--meta { color: var(--color-muted); font-size: 0.875rem; }

.list-items { list-style: none; display: flex; flex-direction: column; margin-top: var(--space-6); border-top: 1px solid var(--color-line); }
.list-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; align-items: flex-start; }
.list-item + .list-item { border-top: 1px solid var(--color-line); }
.list-item--rank { width: 2rem; flex: none; font-size: 1.25rem; font-weight: 650; color: var(--color-muted); text-align: left; font-variant-numeric: tabular-nums; }
.list-item--cover .cover { width: 96px; height: 96px; }
.list-item--main { display: flex; flex-direction: column; min-width: 0; }
.list-item--title { font-weight: 650; font-size: 1.0625rem; text-decoration: none; }
.list-item--title:hover { text-decoration: underline; }
.after-section { margin-top: var(--space-4); }
.list-item--note { margin-top: var(--space-2); max-width: 68ch; }
@media (max-width: 480px) {
    .list-item { gap: var(--space-3); padding: var(--space-3); }
    .list-item--cover .cover { width: 64px; height: 64px; }
    .list-item--rank { width: 1.5rem; font-size: 1rem; }
}

.edit-items { list-style: none; }
.edit-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.edit-item + .edit-item { border-top: 1px solid var(--color-line); }
.edit-item--position { width: 1.75rem; text-align: left; color: var(--color-muted); font-variant-numeric: tabular-nums; flex: none; }
.edit-item .cover { width: 48px; height: 48px; flex: none; }
.edit-item--controls { display: flex; gap: var(--space-2); align-items: center; }
.edit-item--note { flex-basis: 100%; }
.edit-item--note summary { cursor: pointer; color: var(--color-accent); font-size: 0.875rem; width: max-content; }
.edit-item--note form { margin-top: var(--space-2); }
.row-list--album .cover { width: 48px; height: 48px; flex: none; }

/* Profile */
.stat-strip { display: flex; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.stat-strip > div { flex: 1 1 8rem; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column-reverse; }
.stat-strip > div + div { border-left: 1px solid var(--color-line); }
.stat-strip dt { font-size: 0.8125rem; color: var(--color-muted); }
.stat-strip dd { font-size: 1.375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-strip dd a { color: inherit; }
@media (max-width: 480px) {
    .stat-strip > div { flex-basis: 50%; }
    .stat-strip > div + div { border-left: 0; }
    .stat-strip > div:nth-child(even) { border-left: 1px solid var(--color-line); }
    .stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--color-line); }
}

.profile-columns { display: grid; gap: 0 var(--space-8); }
@media (min-width: 720px) { .profile-columns { grid-template-columns: 1fr 1fr; } }

.bars { width: 100%; border-collapse: collapse; }
.bars th { width: 2.5rem; text-align: right; padding: 0.125rem var(--space-3) 0.125rem 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars td { padding: 0.125rem 0; }
.bars td.num { width: 3.5rem; padding-left: var(--space-3); color: var(--color-muted); }
.bars--bar { display: block; height: 1.125rem; background: var(--color-accent); border-radius: 0 2px 2px 0; }

/* Pager */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.pager a[rel="next"] { justify-self: end; }
.pager--status { color: var(--color-muted); font-size: 0.875rem; }

/* Import sources */
.source-list { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.source + .source { border-top: 1px solid var(--color-line); }
.source--summary { padding: var(--space-4); font-weight: 600; cursor: pointer; }
.source--summary:hover { color: var(--color-accent); }
.source--body { padding: 0 var(--space-4) var(--space-4); }

.scale-choice { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.choice { border: 0; margin: 0; padding: 0; display: flex; gap: var(--space-4); align-items: center; }
.choice legend { font-weight: 600; font-size: 0.9375rem; padding: 0; margin-bottom: var(--space-1); }
.choice label { display: flex; gap: var(--space-2); align-items: center; min-height: 2.25rem; cursor: pointer; }
.choice input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--color-accent); }

/* Breadcrumbs */
.breadcrumbs { margin-bottom: var(--space-4); font-size: 0.875rem; color: var(--color-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.breadcrumbs ol + ol { margin-top: var(--space-1); }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--space-1); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-ink); }
.list-settings { margin-top: var(--space-8); }
#add .row-list { margin-top: var(--space-3); }

/* Filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.filter-bar--field { display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; color: var(--color-muted); }
.filter-bar--field select { min-height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; color: var(--color-ink); }
.filter-bar--apply { min-height: 2rem; padding: 0.25rem 0.75rem; font-size: 0.875rem; }
.filter-bar--clear { font-size: 0.875rem; }
.js .filter-bar--apply { display: none; }

/* Search suggestions */
.site-header--search { position: relative; }
.suggestions {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    list-style: none; background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    max-height: 70vh; overflow-y: auto; padding: var(--space-1) 0;
}
@media (min-width: 900px) { .suggestions { min-width: 360px; left: auto; } }
.suggestions--group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: 0.75rem; font-weight: 600; color: var(--color-muted); }
.suggestions--item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer; }
.suggestions--item .cover { width: 40px; height: 40px; flex: none; }
.suggestions--item[aria-selected="true"], .suggestions--item:hover { background: var(--color-paper); }
.suggestions--text { display: flex; flex-direction: column; min-width: 0; }
.suggestions--label { font-weight: 600; overflow-wrap: anywhere; }
.suggestions--more { border-top: 1px solid var(--color-line); color: var(--color-muted); }
.suggestions--more .suggestions--label { font-weight: 400; }
.suggestions--sub { font-size: 0.8125rem; color: var(--color-muted); overflow-wrap: anywhere; }

/* Loading */
.spinner {
    display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
[aria-busy="true"] { cursor: progress; }

/* Stat cells: a row of numbers with labels */
.stat-cells { max-width: var(--width-content); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-8) 0 0; }
.stat-cells--cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-1) var(--space-6); min-width: 0; }
.stat-cells--cell:first-child { padding-left: 0; }
.stat-cells--cell + .stat-cells--cell { border-left: 1px solid var(--color-line); }
.stat-cells--cell dt { order: 2; font-size: 0.8125rem; color: var(--color-muted); }
.stat-cells--value { order: 1; font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; min-height: 2.5rem; display: flex; align-items: center; }
.stat-cells--value a:not(.button) { color: inherit; text-decoration: none; }
.stat-cells--value a:not(.button):hover { text-decoration: underline; }
.stat-cells--value .button { font-size: 0.875rem; line-height: 1.4; min-height: 2.125rem; padding: 0.3rem 0.75rem; }
.stat-cells--sub { order: 3; font-size: 0.8125rem; color: var(--color-muted); }
.stat-cells--none { font-size: 1rem; font-weight: 400; color: var(--color-muted); }
.stat-cells--own { background: none; border: 0; padding: 0; font: inherit; color: var(--color-accent); cursor: pointer; }
.stat-cells--own:hover { color: var(--color-ink); }
.stat-cells-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 560px) {
    .stat-cells, .stat-cells-3, .stat-cells-5 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-3); }
    .stat-cells .stat-cells--cell { padding: 0; border: 0; }
    .stat-cells--value { font-size: 1.375rem; min-height: 2.125rem; }
    .stat-cells--cell-action { order: 10; flex-basis: 100%; align-items: stretch; }
    .stat-cells--cell-action .stat-cells--value { width: 100%; }
    .stat-cells--cell-action dt { display: none; }
    .stat-cells--cell-action .button { width: 100%; min-height: 2.75rem; font-size: 1rem; }
}
.stat-cells--popover { display: contents; }
.stat-cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* Account menu */
.account-button { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: var(--space-1) 0; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.account-button:hover { color: var(--color-accent); }
.chevron { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.account-menu {
    position: fixed; inset: auto; top: 3.5rem;
    right: calc(max(0px, (100vw - var(--width-page)) / 2) + var(--gutter));
    margin: 0; padding: var(--space-1) 0; min-width: 12rem;
    background: var(--color-surface); color: var(--color-ink);
    border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.account-menu ul { list-style: none; }
.account-menu a, .account-menu button {
    display: block; width: 100%; padding: var(--space-2) var(--space-4); text-align: left;
    background: none; border: 0; font: inherit; color: var(--color-ink); text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--color-paper); }
.account-menu li:last-child { border-top: 1px solid var(--color-line); margin-top: var(--space-1); padding-top: var(--space-1); }
.inline-links a { white-space: nowrap; }
.inline-form .button-secondary, .inline-form .button-danger { min-height: 2.5rem; }

/* Menu popover (add to list) */
.button-secondary .chevron { margin-left: var(--space-1); }
.menu-popover {
    margin: auto; padding: var(--space-1) 0; width: min(320px, calc(100vw - 2 * var(--gutter)));
    background: var(--color-surface); color: var(--color-ink);
    border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.menu-popover::backdrop { background: rgb(0 0 0 / 0.2); }
.menu-popover ul { list-style: none; max-height: 50vh; overflow-y: auto; }
.menu-popover button, .menu-popover--footer {
    display: flex; justify-content: space-between; gap: var(--space-3); width: 100%;
    padding: var(--space-2) var(--space-4); background: none; border: 0; font: inherit; color: var(--color-ink); text-align: left; text-decoration: none; cursor: pointer;
}
.menu-popover button:hover:not(:disabled), .menu-popover--footer:hover { background: var(--color-paper); }
.menu-popover button:disabled { opacity: 1; cursor: default; color: var(--color-muted); }
.menu-popover--note { font-size: 0.8125rem; }
.menu-popover--footer { color: var(--color-accent); border-top: 1px solid var(--color-line); margin-top: var(--space-1); }

/* Native selects with a consistent chevron */
select {
    appearance: none; -webkit-appearance: none; padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b544c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 14px; cursor: pointer;
}

/* Brand header */
.site-header { background: var(--color-brand); border-bottom: 0; }
.site-header--brand, .site-header--account > a, .account-button, .search-toggle { color: var(--color-surface); }
.site-header--nav a { color: rgb(255 255 255 / 0.78); }
.site-header--nav a:hover, .site-header--nav a[aria-current="page"] { color: var(--color-surface); }
.site-header--nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-surface); }
.account-button:hover, .search-toggle:hover, .search-toggle[aria-expanded="true"] { color: rgb(255 255 255 / 0.78); }
.site-header--search input { border-color: transparent; }
.site-header :focus-visible { outline-color: var(--color-surface); }
.site-header--search input:focus { outline: 2px solid var(--color-surface); outline-offset: 1px; border-color: transparent; }
.site-header--brand:hover, .site-header--account > a:hover { color: rgb(255 255 255 / 0.78); }

/* Small phones */
.site-header--brand { white-space: nowrap; }
/* Phones: sections move into a menu */
.menu-toggle { grid-area: menu; display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: none; border: 0; padding: 0; color: var(--color-surface); cursor: pointer; }
.menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-toggle:hover { color: rgb(255 255 255 / 0.78); }
.nav-menu a[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--color-accent); }
@media (max-width: 599px) {
    .site-header--inner { grid-template-columns: 1fr auto auto auto; grid-template-areas: "brand toggle menu account" "search search search search"; gap: var(--space-2) var(--space-2); }
    .site-header--nav { display: none; }
    .menu-toggle { display: inline-flex; }
    .site-header--account { margin-left: var(--space-2); }
}
.inline-links { line-height: 2; }
.inline-links a { display: inline-block; padding: 0.125rem 0; }
.nav-menu li:last-child { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 599px) {
    .site-header--account { min-width: 0; }
    .account-button { max-width: 7.5rem; }
    .account-button--name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-button .chevron { flex: none; }
}
.section--more { margin: var(--space-6) 0 0; }
.profile-page .section { margin-top: var(--space-12); }
.profile-page .profile-columns { gap: 0 var(--space-12); }

/* Explore */
.album-tile--reason { font-size: 0.8125rem; color: var(--color-accent); }
.explore-list { display: flex; flex-direction: column; gap: 0.125rem; }
.explore-list--reason { font-size: 0.875rem; color: var(--color-muted); }

/* Onboarding */
.is-hidden { display: none !important; }
.welcome { max-width: 760px; margin: var(--space-8) auto var(--space-12); text-align: center; }
.welcome--lead, .welcome--title { max-width: 560px; margin-left: auto; margin-right: auto; }
.welcome--covers { list-style: none; display: flex; justify-content: center; align-items: center; margin: 0 0 var(--space-8); }
.welcome--covers li { flex: none; margin: 0 -10px; }
.welcome--covers .cover { width: 112px; height: 112px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); border-radius: 3px; }
.welcome--covers li:nth-child(odd) { transform: rotate(-4deg); }
.welcome--covers li:nth-child(even) { transform: rotate(3deg) translateY(6px); }
.welcome--covers li:nth-child(4) { z-index: 2; transform: scale(1.18); }
.welcome--covers li:nth-child(3), .welcome--covers li:nth-child(5) { z-index: 1; }
@media (max-width: 600px) {
    .welcome--covers li:nth-child(1), .welcome--covers li:nth-child(7) { display: none; }
    .welcome--covers .cover { width: 80px; height: 80px; }
}
.welcome--title { font-size: 2.25rem; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.welcome--lead { font-size: 1.125rem; color: var(--color-muted); margin-bottom: var(--space-8); }
.welcome--actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.welcome--primary { min-height: 3rem; padding: 0.75rem 2rem; font-size: 1.0625rem; }
.welcome--alt { margin: var(--space-3) 0 0; color: var(--color-muted); font-size: 0.9375rem; }
.onboarding--lead { font-size: 1.125rem; color: var(--color-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-6); }
.onboarding--progress { margin-bottom: var(--space-6); }
.onboarding--progress progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--color-line); overflow: hidden; display: block; margin-bottom: var(--space-2); }
.onboarding--progress progress::-webkit-progress-bar { background: var(--color-line); }
.onboarding--progress progress::-webkit-progress-value { background: var(--color-accent); transition: width 0.2s; }
.onboarding--progress progress::-moz-progress-bar { background: var(--color-accent); }
.onboarding--progress p { margin: 0; color: var(--color-muted); }
.onboarding--progress span { font-weight: 700; color: var(--color-ink); }
.onboarding--card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.onboarding--card .cover { width: 100%; margin-bottom: var(--space-1); }
.onboarding--rate-button { margin-top: auto; align-self: flex-start; }
.onboarding--card .album-tile--artist { margin-bottom: var(--space-2); }
.onboarding--card.is-rated .onboarding--rate-button { background: var(--color-accent); color: var(--color-surface); }
.quick-picker { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-1); }
.quick-picker button { min-height: 2.75rem; padding: 0; border: 1px solid var(--color-line-strong); border-radius: var(--radius); background: var(--color-surface); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.quick-picker button:hover { border-color: var(--color-ink); }
.quick-picker button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
@media (max-width: 480px) { .quick-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.onboarding--top-actions { display: flex; align-items: center; gap: var(--space-4); }
.onboarding--skip { color: var(--color-muted); font-size: 0.9375rem; }
.onboarding--more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-8) 0 0; }
.onboarding--more a { font-weight: 600; }
.prose ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose .section--heading { margin-top: var(--space-8); }

.subgenre-list { list-style: none; columns: 4 200px; column-gap: var(--space-8); }
@media (max-width: 600px) { .subgenre-list { columns: 2; column-gap: var(--space-4); font-size: 0.9375rem; } }
.subgenre-list li { break-inside: avoid; padding: var(--space-1) 0; }
.subgenre-more { margin-top: var(--space-4); }
.subgenre-more summary { cursor: pointer; color: var(--color-accent); font-weight: 600; font-size: 0.9375rem; width: max-content; padding: var(--space-1) 0; }
.subgenre-more[open] summary { display: none; }
.subgenre-more[open] { margin-top: 0; }
.discography-more { margin-top: var(--space-3); }
.discography-more summary { cursor: pointer; color: var(--color-accent); font-weight: 600; font-size: 0.9375rem; width: max-content; padding: var(--space-1) 0; }
.discography-more[open] summary { display: none; }
.artist-page--missing { margin-top: var(--space-8); }
.artist-page--missing + .source-links { margin-top: var(--space-3); }