/* Spinbook: Inner Sleeve. Tokens and decisions are in project/design/README.md; sizes and spacing
   follow the Stitch screens. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Tokens: light is warm paper, dark is warm black under a turntable lamp. theme.js sets
   data-theme when someone picks one; otherwise the device decides. */
:root {
  color-scheme: light;
  --paper: #F2ECE1;
  --raised: #F8F4EC;
  --inset: #EBE4D8;
  --ink: #1F1A17;
  --ink-2: #5E5248;
  --rule: rgb(31 26 23 / 10%);
  --rule-strong: rgb(31 26 23 / 15%);
  --field: rgb(31 26 23 / 22%);
  --faint: rgb(31 26 23 / 25%);
  --wash: rgb(31 26 23 / 6%);
  --accent: #A4462A;
  --on-accent: #F2ECE1;
  --lamp: #C9973F;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 2px;
  --page: 64rem;
  --gutter: 1.5rem;
  /* Between one module of a page and the next: this much either side of a hairline. */
  --module-gap: 3rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15110E;
    --raised: #1E1914;
    --inset: #191410;
    --ink: #EDE5D8;
    --ink-2: #A89A8A;
    --rule: rgb(237 229 216 / 10%);
    --rule-strong: rgb(237 229 216 / 15%);
    --field: rgb(237 229 216 / 22%);
    --faint: rgb(237 229 216 / 25%);
    --wash: rgb(237 229 216 / 6%);
    --accent: #D9774F;
    --on-accent: #15110E;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15110E;
  --raised: #1E1914;
  --inset: #191410;
  --ink: #EDE5D8;
  --ink-2: #A89A8A;
  --rule: rgb(237 229 216 / 10%);
  --rule-strong: rgb(237 229 216 / 15%);
  --field: rgb(237 229 216 / 22%);
  --faint: rgb(237 229 216 / 25%);
  --wash: rgb(237 229 216 / 6%);
  --accent: #D9774F;
  --on-accent: #15110E;
}
@media (max-width: 40rem) { :root { --gutter: 1.25rem; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--accent) 18%, transparent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--faint); text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, time, .mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sep { color: var(--faint); margin: 0 .5rem; font-family: var(--mono); }

/* Section labels: small, uppercase, tracked */
.label {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1rem;
  padding-bottom: .5rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--rule-strong);
}
.count { font: .6875rem var(--mono); color: var(--ink-2); }

/* Page chrome */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 2.5rem;
}
.wordmark {
  font: italic 400 1.5rem/1 var(--serif);
  letter-spacing: -.025em;
  text-decoration: none;
  color: var(--ink);
}
a.wordmark:hover { color: var(--accent); }
.masthead nav { display: flex; gap: 1.75rem; }
.masthead nav a {
  font: 500 .75rem/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-bottom: .3rem;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* The menu: Scanners, Settings, Theme, Log out */
/* The negative margin keeps the 2rem target from making the masthead taller. */
.menu { position: relative; margin: -.5rem 0 -.5rem auto; align-self: center; }
.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--ink-2);
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { color: var(--accent); }
.burger, .burger::before, .burger::after { display: block; width: 1.125rem; height: 1.5px; background: currentColor; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 13rem;
  padding: 1rem 1.25rem;
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--wash);
}
.masthead .menu-panel nav { flex-direction: column; align-items: flex-start; gap: .875rem; }
.masthead .menu-panel nav a[aria-current="page"] { color: var(--accent); border-bottom-color: transparent; }
.account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font: .6875rem var(--mono);
  letter-spacing: .05em;
  color: var(--ink-2);
}
@media (max-width: 40rem) {
  .masthead-inner { padding: 1.25rem var(--gutter) 1rem; gap: .875rem 1rem; }
  .masthead-inner > nav { order: 3; width: 100%; gap: 1.25rem; }
  .masthead-inner > nav a { font-size: .6875rem; }
  .masthead-inner > nav a[aria-current="page"] { color: var(--accent); }
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 5rem;
}
@media (max-width: 40rem) { main { padding: 1.5rem var(--gutter) 3rem; } }

.page-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.25; }
.page-head .lede { font: italic 1.125rem/1.4 var(--serif); color: var(--ink-2); margin: .25rem 0 0; }
.stats { margin: 0; font: .75rem var(--mono); color: var(--ink-2); }
.stats strong { color: var(--ink); font-weight: 600; }
.narrow { max-width: 34rem; }

/* Modules: the sections a page is made of (a record's sleeve and notes, the path, finds, missing
   albums, history, the Collection wall). Each one after the first sits below a hairline, with
   --module-gap either side. A module that comes back empty from htmx takes its rule with it. */
.module + .module { margin-top: var(--module-gap); padding-top: var(--module-gap); border-top: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; gap: 1.5rem; }
.stack > * { margin: 0; }

.site-foot { border-top: 1px solid var(--rule); }
.site-foot > div {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font: .75rem var(--mono);
  letter-spacing: .05em;
  color: var(--ink-2);
}
.foot-mark { font: 1rem var(--serif); letter-spacing: 0; color: var(--ink); }

/* Panels: a raised sheet with a hairline edge */
.panel {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem;
}
@media (max-width: 40rem) { .panel { padding: 1rem; } }
.panel-head {
  padding-bottom: .75rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2 {
  font: 500 .6875rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Buttons */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  font: 500 .75rem/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, .button:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
button.secondary, .button.secondary { background: transparent; color: var(--ink-2); border-color: var(--faint); }
button.secondary:hover, .button.secondary:hover { color: var(--accent); border-color: var(--accent); }
button.wide { width: 100%; }
button.tall { padding: .875rem 1.5rem; }
button.small, .button.small { min-height: 0; padding: .375rem .75rem; font-size: .6875rem; letter-spacing: .05em; }
/* Quiet text actions: Rename, Unclaim, Remove, Log out, Theme */
button.quiet, summary.quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 400 .75rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 2px;
  cursor: pointer;
}
button.quiet:hover, summary.quiet:hover { color: var(--accent); background: none; text-decoration-color: var(--accent); }
summary.quiet { list-style: none; display: inline; }
summary.quiet::-webkit-details-marker { display: none; }
.account button.quiet, .theme-toggle { font: .6875rem var(--mono); letter-spacing: .05em; }

/* Forms */
form { margin: 0; }
.field { display: block; margin: 0 0 1.25rem; }
.field > span {
  display: block;
  margin-bottom: .375rem;
  font: 500 .625rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
input[type="text"], input[type="password"], input:not([type]), select {
  display: block;
  width: 100%;
  padding: .625rem .875rem;
  font: .875rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field);
  border-radius: var(--radius);
  transition: border-color .15s, background-color .15s;
}
input:focus { outline: none; border-color: var(--accent); background: var(--raised); box-shadow: 0 0 0 1px var(--accent); }
input::placeholder { color: var(--ink-2); opacity: .5; }
input.mono { font-family: var(--mono); font-size: .8125rem; }
.submit { padding-top: .75rem; }
.hint { font-size: .75rem; line-height: 1.625; color: var(--ink-2); max-width: 28rem; margin-bottom: 1.5rem; }
.error {
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding: .25rem 0 .25rem .75rem;
  margin: 0 0 1.5rem;
  font-size: .875rem;
}

.notice {
  border-left: 2px solid var(--ink-2);
  padding: .25rem 0 .25rem .75rem;
  margin: 0 0 1.5rem;
  font-size: .875rem;
}
.locate-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.locate-status:empty { display: none; }
.rec-note { margin: .25rem 0 0; font-size: .75rem; color: var(--ink-2); }

/* Pilot lamp: lit in the accent, dim when quiet */
.lamp {
  display: inline-block;
  flex: none;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink-2) 35%, transparent);
}
.lamp.lit { background: var(--accent); box-shadow: 0 0 5px 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.lamp.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  50% { opacity: .45; box-shadow: 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .lamp.pulse { animation: none; } }

/* Covers: square, never cropped */
.cover {
  flex: none;
  width: var(--cover, 4rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--wash);
  border: 1px solid var(--rule-strong);
  /* Card on paper: a tight contact shadow and a soft one under it */
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%), 0 2px 4px rgb(0 0 0 / 10%), 0 6px 10px -4px rgb(0 0 0 / 18%);
}
@media (max-width: 40rem) { .cover { --cover: 3.5rem; } }
/* No art at all: a typographic sleeve in the palette */
.sleeve {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .3rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font: 400 .5625rem/1.1 var(--serif);
}
.sleeve em { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.sleeve span, .sleeve em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Now spinning: the newest Spin, large, with its record peeking out from behind the sleeve */
.now:not(:empty) { margin-bottom: 4rem; }
.now-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.75rem;
  font: 500 .75rem/1.4 var(--sans);
  letter-spacing: 0;
}
.now-label { letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.now-head.spinning .now-label { color: var(--accent); }
.now-head .lamp { width: .5rem; height: .5rem; }
.now > .removed { padding: 0; }
.now-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  padding: 2.5rem;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgb(31 26 23 / 3%);
}
/* Room on the right for the record to slide out (--room). A double LP or more (--discs, from the
   server) stacks down, each disc behind --stack lower than the one in front of it, and the stack
   as a whole is centred on the sleeve: half of it reaches above, half below. A 7" or 10" is drawn
   that much of an LP (--size, from the server), sleeve, record and all. */
.sleeve-stack {
  --room: calc(8.5rem * var(--size, 1));
  --stack: calc(2.5rem * var(--size, 1));
  --overhang: calc((var(--discs, 1) - 1) * var(--stack) / 2);
  position: relative;
  width: calc(18rem * var(--size, 1));
  aspect-ratio: 1;
  margin-right: var(--room);
  margin-block: var(--overhang);
}

/* The sleeve: printed card, so it has weight, a sheen and worn edges */
.jacket {
  position: relative;
  z-index: 1;
  height: 100%;
  background: #1F1A17;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 12%),
    0 2px 2px rgb(0 0 0 / 12%),
    0 4px 4px rgb(0 0 0 / 12%),
    0 8px 8px rgb(0 0 0 / 12%),
    0 16px 16px rgb(0 0 0 / 12%),
    /* where it lies over the record */
    6px 0 14px -4px rgb(0 0 0 / 45%);
  overflow: hidden;
}
.jacket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 35%, rgb(255 255 255 / 0%) 65%, rgb(0 0 0 / 14%) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), inset 0 0 18px rgb(0 0 0 / 22%);
  pointer-events: none;
}
/* The spine catches the light */
.jacket::after { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 1px; background: rgb(255 255 255 / 25%); }
.jacket .cover { --cover: 100%; display: block; height: 100%; border: 0; box-shadow: none; background: transparent; }
.jacket .sleeve { padding: calc(1.25rem * var(--size, 1)); font-size: calc(1.5rem * var(--size, 1)); }

/* The record: the pressing's colour, a platter that turns, and a glare on top that stays where the
   lamp is. Out of the sleeve far enough to see the label turn. */
.record {
  position: absolute;
  /* centred on the sleeve (95% tall, so 2.5% from the top), then moved up by half the stack and
     down by its place in it */
  top: calc(2.5% - var(--overhang) + var(--disc, 0) * var(--stack));
  right: calc(-1 * var(--room));
  /* Its own layer, under the sleeve, so its label stays on it whether it turns or not; the disc
     in front comes later, so it's drawn over the ones behind */
  z-index: 0;
  width: 95%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 22%), 0 4px 6px -4px rgb(0 0 0 / 22%);
}
/* The turning part: the whole record, colour, marbling, grooves, label and all, an image the
   server draws */
.platter { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
/* Always turning, Now spinning or Last spin: it's the brand. Slower than 33⅓ rpm (1.8s), which
   pulls the eye from everything else on the page. A click stops it where it is (theme.js). */
.platter { animation: turn 6s linear infinite; }
/* Only the disc in front turns: a double LP's others lie still behind it */
.record.behind .platter { animation: none; }
:root[data-record="still"] .platter { animation-play-state: paused; }
:root[data-record] .record { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .platter { animation: none; } }
.record::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, rgb(255 255 255 / 0%) 0deg, rgb(255 255 255 / 28%) 18deg, rgb(255 255 255 / 0%) 38deg, rgb(255 255 255 / 0%) 190deg, rgb(255 255 255 / 18%) 206deg, rgb(255 255 255 / 0%) 226deg);
  /* off the label, which is matte paper */
  -webkit-mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  mask: radial-gradient(circle, transparent 0 32%, #000 33%);
  pointer-events: none;
}
/* A CD splits the light into a rainbow, on either side, that stays put while it turns; off the
   clear hub */
.record.cd::after {
  background:
    conic-gradient(from 20deg, rgb(255 255 255 / 0%) 0deg, rgb(255 255 255 / 30%) 18deg, rgb(255 255 255 / 0%) 38deg, rgb(255 255 255 / 0%) 190deg, rgb(255 255 255 / 20%) 206deg, rgb(255 255 255 / 0%) 226deg),
    conic-gradient(from 30deg, rgb(255 90 90 / 0%) 0deg, rgb(255 90 90 / 22%) 10deg, rgb(255 210 70 / 22%) 22deg, rgb(80 210 120 / 22%) 34deg, rgb(70 150 255 / 22%) 46deg, rgb(170 90 255 / 22%) 58deg, rgb(170 90 255 / 0%) 70deg, rgb(255 90 90 / 0%) 180deg, rgb(255 90 90 / 22%) 190deg, rgb(255 210 70 / 22%) 202deg, rgb(80 210 120 / 22%) 214deg, rgb(70 150 255 / 22%) 226deg, rgb(170 90 255 / 22%) 238deg, rgb(170 90 255 / 0%) 250deg);
  -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 28%);
  mask: radial-gradient(circle, transparent 0 27%, #000 28%);
}
.liner { min-width: 0; }
.kicker { margin: 0 0 .5rem; font: .6875rem/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.now-title { margin: 0 0 .5rem; font: 400 clamp(1.875rem, 4.5vw, 3rem)/1.15 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.now-artist { margin: 0 0 1.5rem; font: italic 1.5rem/1.3 var(--serif); color: var(--ink-2); }
.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.5rem;
  margin: 0 0 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: .75rem;
}
.details:empty { display: none; }
.details dt { margin-bottom: .125rem; font: .625rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.details dd { margin: 0; font-weight: 500; }
.logged {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  font: .6875rem var(--mono);
  color: var(--ink-2);
}
.logged .ring { color: var(--accent); font-size: .875rem; }
.logged .entry-action { margin-left: auto; }
.logged .entry-action button { font-size: .6875rem; }
@media (max-width: 48rem) {
  .now-card { grid-template-columns: 1fr; gap: 1.25rem; padding: .875rem .875rem 1.25rem; }
  .sleeve-stack { --room: calc(5.5rem * var(--size, 1)); --stack: calc(1.5rem * var(--size, 1)); width: calc((100% - 6rem) * var(--size, 1)); margin-right: 0; }
  .now-title { font-size: 1.5rem; }
  .now-artist { font-size: 1.125rem; margin-bottom: 1rem; }
}

/* The log: Spins and Unmatched Scans */
.log { list-style: none; margin: 0; padding: 0; }
.log > li { border-bottom: 1px solid var(--rule); }
.spin {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 0;
  transition: background-color .15s;
}
.spin:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.spin-title { margin: 0; overflow-wrap: anywhere; }
.spin-title .title { font: 400 1.25rem/1.3 var(--serif); letter-spacing: -.025em; }
.spin-title .by { font: .75rem var(--serif); color: var(--ink-2); margin: 0 .35rem; }
.spin-title em { font: italic 1.125rem/1.3 var(--serif); color: var(--ink-2); }
.spin .note { margin: .125rem 0 0; font: .6875rem var(--mono); letter-spacing: -.01em; color: var(--ink-2); }
.when { text-align: right; line-height: 1.4; }
.when time { display: block; font-size: .75rem; color: var(--ink-2); }
.when .where { display: block; font: .625rem/1.6 var(--mono); color: color-mix(in srgb, var(--ink-2) 80%, transparent); }
.when .entry-action { margin-top: .25rem; }
.when .entry-action button { font-size: .6875rem; }
/* Remove shows when you reach for the row */
@media (hover: hover) {
  .spin .entry-action, .now-card .entry-action { opacity: 0; transition: opacity .15s; }
  .spin:hover .entry-action, .spin:focus-within .entry-action,
  .now-card:hover .entry-action, .now-card:focus-within .entry-action { opacity: 1; }
}
@media (max-width: 40rem) {
  .spin { column-gap: .875rem; grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: .875rem 0; }
  .spin .cover { grid-row: 1 / span 2; }
  .spin .when { grid-column: 2; text-align: left; margin-top: .25rem; }
  .spin .when time, .spin .when .where { display: inline; font-size: .625rem; }
  .spin .when .where::before { content: " · "; }
  .spin-title .title { font-size: 1rem; }
  .spin-title .by { display: none; }
  .spin-title em { display: block; font-size: .875rem; }
  .spin .note { font-size: .625rem; }
}

/* Each Spin links to its record's page: the title, stretched over the row (Remove stays on top) */
.spin { position: relative; }
.spin-title a.title { color: inherit; text-decoration: none; }
.spin-title a.title::after { content: ""; position: absolute; inset: 0; }
.spin-title a.title:focus-visible { outline: none; }
.spin:has(a.title:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.spin .entry-action { position: relative; z-index: 1; }
.now-title a { color: inherit; text-decoration: none; }
.now-title a:hover { color: var(--accent); }

.unmatched-panel { margin-top: 3rem; }
.panel-intro { margin-bottom: 1.25rem; }
.panel-intro p { margin: .25rem 0 0; font-size: .75rem; color: var(--ink-2); }
.unmatched-panel .log { border-top: 1px solid var(--rule); }
.unmatched {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1rem 0;
}
.unmatched .meta, .unmatched time { font: .75rem var(--mono); color: var(--ink-2); }
.unmatched .entry-action { margin-left: auto; }
.barcode {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .625rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  font: 500 .6875rem var(--mono);
  letter-spacing: .1em;
}
.barcode::before {
  content: "";
  width: 1.25rem;
  height: 1em;
  background: linear-gradient(90deg,
    currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px,
    currentColor 6px 7px, transparent 7px 9px, currentColor 9px 10px, transparent 10px 11px,
    currentColor 11px 13px, transparent 13px 14px, currentColor 14px 15px, transparent 15px 17px,
    currentColor 17px 18px, transparent 18px);
}
.removed { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; font-size: .8125rem; color: var(--ink-2); }
.removed .entry-action { margin-left: auto; }

.empty { margin: 1.5rem 0 0; }
.empty h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.empty ol { margin: 0; padding-left: 1.25rem; }
.empty li { margin: .35rem 0; }
.empty li::marker { font-family: var(--mono); color: var(--ink-2); }

/* Getting started: the steps to a first Scan, each ticked once done */
.getting-started > .muted { margin: -.25rem 0 1rem; }
.getting-started ol { padding-left: 1.5rem; }
.getting-started li.step { margin: .75rem 0; }
.getting-started li.step p { margin: 0; }
.getting-started li.done { color: var(--ink-2); }
.getting-started li.done::marker { content: "✓  "; color: var(--accent); }
.getting-started .qr { width: 9rem; margin-top: .75rem; padding: .25rem; background: #fff; border-radius: var(--radius); }
.getting-started .qr svg { display: block; width: 100%; height: auto; }

/* Scanners */
.scanner-list { padding: 1.25rem; }
.scanner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 .75rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.scanner:last-child { border-bottom: 0; padding-bottom: .5rem; }
.scanner .lamp { margin-top: .55rem; }
.scanner h3 { font-size: 1.25rem; line-height: 1.375; letter-spacing: 0; }
.scanner .claimed { margin: .125rem 0 0; font: .6875rem var(--mono); color: var(--ink-2); }
.scanner .seen { margin: .4rem 0 0; font: .625rem var(--mono); color: var(--ink-2); text-align: right; }
.scanner .actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: .75rem; }
.scanner .actions .sep { margin: 0; font-size: .625rem; }
.scanner details[open] { flex-basis: 100%; order: 3; }
.scanner details[open] summary { display: none; }
.rename { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; margin-top: .5rem; }
.rename .field { flex: 1 1 14rem; margin: 0; max-width: 28rem; }
.rename > input { flex: 1; min-width: 0; }
@media (max-width: 40rem) {
  .scanner { grid-template-columns: auto minmax(0, 1fr); }
  .scanner .seen { grid-column: 2; text-align: left; margin-top: .25rem; }
}
.phone-link { font-size: .8125rem; }

/* Add a Scanner: the Wi-Fi, then a card with the code to scan */
.setup { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; }
@media (max-width: 48rem) { .setup { grid-template-columns: 1fr; gap: 1.5rem; } }
.setup-part { padding: 1.75rem; }
.setup-part .panel-head { margin-bottom: 1.25rem; }
.setup-part h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: .5rem; }
.code-inset {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}
.codes {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: .75rem;
  background: #fff;
  border: 1px solid rgb(31 26 23 / 10%);
}
.codes svg { width: 17rem; max-width: 100%; height: auto; display: block; }
.setup-text { word-break: break-all; font-size: .6875rem; }
details.plain summary { cursor: pointer; font-size: .75rem; color: var(--ink-2); }
.claim-status { grid-column: 1 / -1; }
.claim-status.waiting {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .625rem;
  font: .75rem var(--mono);
  letter-spacing: .05em;
  color: var(--accent);
}
.claim-status.expired { font-size: .875rem; color: var(--accent); }
.claim-status.claimed { padding: 1.75rem; }
.claim-status.claimed h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
/* Once claimed (or expired), the Wi-Fi and the code are done with */
.setup:has(.claim-status.claimed) .setup-part,
.setup:has(.claim-status.expired) .setup-part { display: none; }

/* Collection: Discogs on a faceplate strip */
.faceplate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem;
  border-color: var(--rule-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
.faceplate .who { display: flex; align-items: flex-start; gap: .875rem; flex: 1 1 22rem; min-width: 0; }
.faceplate .who > div { flex: 1; min-width: 0; }
.faceplate .who > .lamp { margin-top: .5rem; }
.connected { margin: 0; font-size: .75rem; color: var(--ink-2); }
.connected .brand { font: 500 1.25rem/1.25 var(--serif); letter-spacing: 0; color: var(--ink); }
.connected .sep { margin: 0 .5rem; }
.connected strong { font: 500 .75rem var(--mono); color: var(--ink); }
.faceplate .buttons { display: flex; gap: .625rem; flex-wrap: wrap; }
.sync-line { margin: .125rem 0 0; font: .6875rem var(--mono); letter-spacing: -.01em; color: var(--ink-2); }
.sync-inset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .625rem;
  margin: .625rem 0 0;
  padding: .625rem 1rem;
  background: var(--inset);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: .75rem var(--mono);
}
.sync-inset.failed { color: var(--accent); }
.spinner { color: var(--accent); display: inline-block; animation: turn 1.2s linear infinite; }
@keyframes turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.progress { width: 12rem; max-width: 100%; height: 6px; background: var(--rule); margin-left: auto; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.percent { font-size: .6875rem; color: var(--ink-2); }
.collection-note { margin-top: 2rem; font-size: .8125rem; color: var(--ink-2); }
.connect h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.connect p { font-size: .875rem; color: var(--ink-2); }

/* Log in and Sign up: a card on the paper, with a record peeking out behind it */
.door {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem var(--gutter);
}
.door .card { position: relative; width: 100%; max-width: 26.25rem; }
.door .card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -7rem;
  width: 12rem;
  height: 24rem;
  transform: translateY(-50%);
  background:
    radial-gradient(circle 15rem at -3rem 50%, transparent 0 4.4rem, rgb(255 255 255 / 4%) 4.5rem 4.6rem, transparent 4.7rem 9rem, rgb(255 255 255 / 3%) 9.1rem 9.2rem, transparent 9.3rem),
    repeating-radial-gradient(circle at -3rem 50%, #1A1613 0 2px, #241E19 2px 3px);
  clip-path: circle(15rem at -3rem 50%);
  opacity: .9;
}
@media (max-width: 44rem) { .door .card::after { display: none; } }
.door .panel {
  padding: 2.5rem;
  border-color: rgb(31 26 23 / 12%);
  box-shadow: 0 1px 2px rgb(31 26 23 / 3%);
}
@media (max-width: 40rem) { .door .panel { padding: 2rem 1.5rem; } }
.card-label {
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font: 500 .625rem var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.masthead-mark { text-align: center; margin-bottom: 2.25rem; }
.door .wordmark { display: block; font-size: clamp(2.25rem, 8vw, 2.625rem); line-height: 1.25; }
.tagline { margin: .5rem 0 0; font: italic 300 1rem var(--serif); color: var(--ink-2); }
.door h2 { font-size: 1.875rem; margin: 0 0 1rem; }
.door .alt { text-align: center; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .75rem; }
.door .alt a { color: var(--ink-2); text-underline-offset: 4px; }
.door .alt a:hover { color: var(--accent); }
.door-foot {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  font: .6875rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.door-foot .theme-toggle { letter-spacing: .1em; text-transform: uppercase; }

/* Stickers */
.sticker-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.sticker-form .field { flex: 1 1 20rem; margin: 0; }
.print-area { margin-top: 2rem; }
.sticker { display: inline-flex; gap: 3mm; align-items: center; background: #fff; color: #000; padding: 2mm 3mm; border: 1px dashed #8888; margin: 0 0 1rem; }
/* The QR code is 29 modules with its margin: 4 whole pixels each on screen, 20 mm in print */
.sticker .qr svg { display: block; width: 116px; height: 116px; }
.sticker .label { font: 9pt/1.3 var(--sans); letter-spacing: 0; text-transform: none; max-width: 40mm; color: #000; }
.sticker .code { font: 8pt var(--mono); letter-spacing: .05em; margin-top: 1mm; }
/* The sheet (TASK-033): each Sticker with its cover and a tick; unticked ones fade, and aren't printed */
.sticker-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.sheet-item { display: flex; align-items: center; gap: .625rem; cursor: pointer; }
.sheet-item .cover { width: 3rem; height: 3rem; flex: none; }
.sheet-item .sticker { margin: 0; }
.sheet-item:has(.keep:not(:checked)) .sticker { opacity: .35; }
@media print {
  body { background: #fff; }
  main { margin: 0; padding: 0; max-width: none; }
  .masthead, .site-foot, main > :not(.print-area), .print-area > :not(.sticker, .sheet-item) { display: none !important; }
  .sticker { border: 0; margin: 0; }
  .sticker .qr svg { width: 20mm; height: 20mm; }
  /* Cut lines between the Stickers, and none left unticked */
  .sticker-sheet { display: flex; flex-wrap: wrap; gap: 0; }
  .sheet-item .keep, .sheet-item .cover { display: none; }
  .sheet-item:has(.keep:not(:checked)) { display: none; }
  /* All one width, so the sheet cuts into a clean grid */
  .sheet-item .sticker { width: 64mm; box-sizing: border-box; border: .2mm dashed #999; break-inside: avoid; }
}

/* A record's page: the sleeve beside its liner notes, then its history by month */
.back {
  display: inline-block;
  margin-bottom: 2rem;
  font: .6875rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
}
.back:hover { color: var(--accent); }
.record-page {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.record-page .sleeve-stack { width: calc(21rem * var(--size, 1)); }
.record-title { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.details dd a { text-decoration-color: var(--faint); }
.tally { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.tally-count { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1rem; }
.tally-count .number { font: 400 3.5rem/1 var(--serif); letter-spacing: -.02em; }
.tally-label { font: .6875rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tally-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .75rem 2rem; margin: 0; }
.tally-facts > div { padding-left: .75rem; border-left: 1px solid var(--rule-strong); }
.tally-facts dt { margin-bottom: .125rem; font: .625rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tally-facts dd { margin: 0; font-size: .8125rem; }
.tally-facts time { white-space: nowrap; }
.tally-facts .latest dd { color: var(--accent); }
.tally-none { padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--ink-2); }
.tally-none p { margin: 0; }
.sticker-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .875rem !important; font-size: .75rem; }
.history .month {
  margin: 2rem 0 0;
  padding-bottom: .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font: 500 .6875rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { display: flex; align-items: center; gap: .75rem; padding: .875rem 0; border-bottom: 1px solid var(--rule); }
.history-list time { font-size: .8125rem; }
.history-list .where { margin-left: auto; font: .75rem var(--mono); color: var(--ink-2); }
.history-list .lamp { width: .4375rem; height: .4375rem; }
.lamp.ring { background: transparent; border: 1px solid color-mix(in srgb, var(--ink-2) 60%, transparent); }
.show-earlier {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 2rem auto 0;
  font: .6875rem var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: underline dashed var(--faint);
  text-underline-offset: 6px;
}
.show-earlier:hover { color: var(--accent); }
@media (max-width: 48rem) {
  .record-page { grid-template-columns: 1fr; gap: 2rem; }
  .record-page .sleeve-stack { width: calc((100% - 6rem) * var(--size, 1)); }
  .tally-facts { grid-template-columns: 1fr 1fr; }
}

/* A record's recommendations, above its history: from the shelves, then from the record store */
.rec-head { margin-bottom: 1.5rem; }
.rec-head .label { display: flex; align-items: center; gap: .625rem; }
.rec-head .lamp { width: .5rem; height: .5rem; }
.rec-lede { margin: .25rem 0 0; font: italic 1rem var(--serif); color: var(--ink-2); }
.path-steps, .find-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
/* The path reads left to right, each step joined to the one before by what they share */
.path-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.via {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .625rem;
  font: .625rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.via .arrow { font-size: .875rem; letter-spacing: 0; }
.shelf-cover { position: relative; display: block; margin-bottom: .875rem; }
.shelf-cover .jacket { height: auto; aspect-ratio: 1; transition: transform .2s; }
.shelf-cover:hover .jacket { transform: translateY(-3px); }
.shelf-cover .tag {
  position: absolute;
  z-index: 3;
  left: .5rem;
  bottom: .5rem;
  max-width: calc(100% - 1rem);
  padding: .2rem .45rem;
  background: rgb(21 17 14 / 82%);
  color: #EDE5D8;
  font: .625rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelf-title { margin: 0; font: 400 1.125rem/1.3 var(--serif); overflow-wrap: anywhere; }
.shelf-title a { color: inherit; text-decoration: none; }
.shelf-title a:hover { color: var(--accent); }
.shelf-artist { margin: .125rem 0 .625rem; font: italic .875rem var(--serif); color: var(--ink-2); }
.shelf-foot {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--rule);
  font: .6875rem var(--mono);
  color: var(--ink-2);
}
.shelf-foot span:last-child { color: var(--ink); }

.find-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.find-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}
.find-top { display: flex; justify-content: space-between; align-items: center; min-height: 2.125rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); }
.find-top .tag {
  padding: .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font: .625rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.find-top .year { font: .6875rem var(--mono); color: var(--ink-2); }
.find-body { display: flex; gap: 1rem; align-items: flex-start; flex: 1; }
.find-body .cover { --cover: 4.5rem; }
.find-cover { position: relative; }
.find-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--wash); }
.find-body > div { min-width: 0; }
.find-title { margin: 0; font: 400 1.25rem/1.25 var(--serif); overflow-wrap: anywhere; }
.find-artist { margin: .125rem 0 .5rem; font: italic .9375rem var(--serif); color: var(--ink-2); }
.find-kind { margin: 0; font: .625rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.find-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1rem; padding-top: .875rem; border-top: 1px solid var(--rule); }
.find-price { margin: 0; font: 600 .875rem var(--mono); }
.find-stock { margin: 0; font: .625rem var(--mono); color: var(--ink-2); }
.find-buy { display: flex; gap: .5rem; }
.find-foot .button { white-space: nowrap; }
@media (max-width: 64rem) {
  .path-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .find-cards { grid-template-columns: 1fr; }
}

/* The Collection as a wall of covers, like records faced out in a shop bin */
.wall { margin-top: 2.5rem; }
.wall-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 2rem;
  padding: .75rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
}
.wall-filters { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; letter-spacing: .025em; }
.wall-filters a { color: var(--ink-2); text-decoration: none; padding-bottom: .2rem; }
.wall-filters a:hover { color: var(--ink); }
.wall-filters a[aria-current] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.wall-sorts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font: .6875rem var(--mono); }
.wall-sorts .sep { margin: 0; }
.sort-label { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.wall-sorts a { color: var(--ink-2); text-decoration: none; }
.wall-sorts a:hover { color: var(--ink); }
.wall-sorts a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); text-underline-offset: 2px; }
.wall-legend {
  margin: 0 0 0 auto;
  padding-left: 1rem;
  border-left: 1px solid var(--rule-strong);
  font: italic .625rem var(--mono);
  color: var(--ink-2);
}
.wall-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}
.wall-card a { display: block; height: 100%; padding: 6px; background: var(--raised); border: 1px solid rgb(31 26 23 / 12%); box-shadow: 0 1px 2px rgb(0 0 0 / 6%); text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.wall-card a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(0 0 0 / 12%); }
.wall-sleeve .cover { --cover: 100%; display: block; border: 0; box-shadow: none; }
.wall-title { margin: .5rem .25rem 0; font: 400 .9375rem/1.25 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-meta { display: flex; justify-content: space-between; gap: .5rem; margin: .125rem .25rem .25rem; font-size: .8125rem; }
.wall-meta em { font-family: var(--serif); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-spins { flex: none; font: .6875rem var(--mono); color: var(--accent); }
/* Never played: dimmed, so the unplayed shelf is easy to see */
.wall-card.unplayed a { opacity: .45; filter: grayscale(1); box-shadow: none; }
.wall-card.unplayed a:hover { opacity: 1; filter: none; }
.wall-card.unplayed .wall-spins { color: var(--ink-2); }
.wall-more {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.wall-more p { margin: 0; font: .75rem var(--mono); color: var(--ink-2); }
@media (max-width: 64rem) { .wall-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .wall-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall-legend { margin-left: 0; padding-left: 0; border-left: 0; }
}