/* ---------------------------------------------------------------------------
   Turnberry Jam Vinyl — phone-first.
   Palette carries over from the rebuild scope: petrol accent, oxblood for
   destructive actions, neutrals biased slightly green so they read as chosen.
   System font stack on purpose: a PWA that must work offline shouldn't wait on
   a font CDN it can't reach.
   --------------------------------------------------------------------------- */

:root {
  --ground: #eaedeb;
  --surface: #f8f9f8;
  --surface-2: #e1e6e3;
  --ink: #131a19;
  --ink-2: #3a4744;
  --muted: #68746f;
  --line: #cbd3cf;
  --line-soft: #dce2df;

  --accent: #125e63;
  --accent-ink: #ffffff;
  --accent-soft: #dceaea;

  --owned: #2c6b4f;
  --owned-soft: #dce9e1;
  --wanted: #7e5a0f;
  --wanted-soft: #f2e8d2;
  --danger: #8c2f39;
  --danger-soft: #f2dedf;

  --radius: 10px;
  --tap: 44px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d1312;
    --surface: #151d1c;
    --surface-2: #1e2827;
    --ink: #dfe6e3;
    --ink-2: #b4c0bc;
    --muted: #889591;
    --line: #2c3937;
    --line-soft: #222d2c;

    --accent: #5cb3b7;
    --accent-ink: #08201f;
    --accent-soft: #16302f;

    --owned: #74c29a;
    --owned-soft: #16291f;
    --wanted: #d2ab5c;
    --wanted-soft: #2e2716;
    --danger: #d2737c;
    --danger-soft: #33191c;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Room for the iOS home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -0.015em; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.app { max-width: 720px; margin: 0 auto; }

.boot { padding: 48px 20px; color: var(--muted); text-align: center; }

/* ---- header -------------------------------------------------------------- */

.top {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 10px;
  padding-top: calc(14px + env(safe-area-inset-top));
}

.top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.who h1 { font-size: 1.4rem; }

.counts {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.count-owned { color: var(--owned); font-weight: 600; }
.count-wanted { color: var(--wanted); font-weight: 600; }
.dot { margin: 0 6px; }

/* Wraps rather than shrinking. This row started as two buttons and grew to four (Add, Check,
   Reconcile, Sign out); at 402px they cannot sit on one line, and flex-shrink:0 on nowrap buttons
   pushed the whole document wider than the viewport, which is what made every page scroll sideways. */
.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

/* The collector name has to be allowed to shrink too, or it does the same thing on its own. */
.who { min-width: 0; }
.who h1 { overflow-wrap: anywhere; }

.switcher, .filters {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.switcher::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.86rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.chip-on:hover { color: var(--accent-ink); }

.search { margin-top: 12px; }

.search input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  /* 16px minimum, or iOS Safari zooms the whole page on focus. */
  font-size: 16px;
}
.search input::placeholder { color: var(--muted); }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.12s, border-color 0.12s, opacity 0.12s;
  white-space: nowrap;
  /* Some of these are links rather than buttons (Check, Reconcile), and an anchor brings the
     browser's underline with it. A control that looks like a button should look the same whichever
     element it happens to be. */
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:not(:disabled):hover { filter: brightness(1.08); }

.btn-quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-2);
  font-weight: 500;
}
.btn-quiet:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }

.btn-got { background: var(--owned-soft); color: var(--owned); border-color: var(--owned); }
.btn-got:hover { background: var(--owned); color: var(--surface); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-text { color: var(--danger); border-color: var(--danger-soft); }
.btn-danger-text:hover { border-color: var(--danger); color: var(--danger); }

.btn-block { width: 100%; min-height: var(--tap); }
.btn-icon { padding: 8px 11px; }

/* ---- list ---------------------------------------------------------------- */

.list-wrap { padding: 8px 16px 40px; }

.result-count {
  margin: 10px 2px 6px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.empty { padding: 40px 8px; text-align: center; color: var(--muted); }

.banner {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin: 10px 0;
  font-size: 0.9rem;
}
.banner-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.records { list-style: none; margin: 0; padding: 0; }

.record {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

/* Wish-list rows carry a left edge rather than a full tint — it survives both themes
   and doesn't fight the pills. */
.record-wanted {
  border-left: 3px solid var(--wanted);
  padding-left: 12px;
}

.record-main { min-width: 0; flex: 1; }

.record-artist {
  margin: 0;
  font-weight: 650;
  font-size: 0.97rem;
  overflow-wrap: anywhere;
}

.record-title {
  margin: 1px 0 0;
  color: var(--ink-2);
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}

.record-meta {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.record-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.record-tags:empty { display: none; }

.pill {
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
}
.pill-wanted { background: var(--wanted-soft); color: var(--wanted); }
.pill-also { background: var(--accent-soft); color: var(--accent); }

.record-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- sign in ------------------------------------------------------------- */

.signin {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.signin-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
}

.wordmark { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }

/* A record: black disc, petrol label, spindle hole. */
.disc {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--ground) 0 3px, transparent 3px),
    radial-gradient(circle at 50% 50%, var(--accent) 3px 13px, transparent 13px),
    repeating-radial-gradient(circle at 50% 50%, #1a1a1a 13px 15px, #262626 15px 17px);
}

.wordmark h1 { font-size: 1.22rem; line-height: 1.15; }
.wordmark-sub {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- forms --------------------------------------------------------------- */

.field { display: block; margin-bottom: 14px; }
.field > span, .field > legend {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 5px;
  padding: 0;
}

.field input, .field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 60px; resize: vertical; }

fieldset.field { border: 0; margin: 0 0 14px; padding: 0; }

.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; min-width: 0; }

.form-error {
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 8px;
  font-size: 0.87rem;
}

.segmented { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }

.seg {
  flex: 1;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.seg + .seg { border-left: 1px solid var(--line); }
.seg-on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---- editor sheet -------------------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 17, 0.5);
  z-index: 40;
}

.sheet {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
}

@media (min-width: 620px) {
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 540px;
    max-height: 88dvh;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.sheet-head h2 { font-size: 1.05rem; }

.sheet-body { padding: 16px 18px; overflow-y: auto; }

.sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
}
.sheet-foot .spacer { flex: 1; }

/* ---- blazor boot + error ------------------------------------------------- */

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 22vh auto 0;
}
.loading-progress circle {
  fill: none;
  stroke: var(--line);
  stroke-width: 0.5rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--accent);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8) 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  inset: 22vh 0 auto 0;
  padding-top: 3.7rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.9rem;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---- cover art ------------------------------------------------------------ */

.record-art {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface-2);
}

/* A blank sleeve, so rows without art keep the same rhythm as rows with it. */
.record-art-blank {
  display: block;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, var(--line) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, var(--surface-2) 2px 100%);
}

/* ---- catalog lookup ------------------------------------------------------- */

.lookup { margin-bottom: 6px; }

.lookup-bar { display: flex; gap: 8px; }
.lookup-bar input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.lookup-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.matches {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 46dvh;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.match {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
}
.match + .match { border-top: 1px solid var(--line-soft); }

.match-art {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 3px;
  object-fit: cover;
  background: var(--surface-2);
}
.match-art-blank {
  display: block;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.match-text { flex: 1; min-width: 0; }
.match-artist { margin: 0; font-weight: 650; font-size: 0.9rem; overflow-wrap: anywhere; }
.match-title { margin: 0; font-size: 0.87rem; color: var(--ink-2); overflow-wrap: anywhere; }
.match-meta { margin: 2px 0 0; font-size: 0.75rem; color: var(--muted); }

.or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.matched-note {
  margin: 0 0 14px;
  padding: 8px 11px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 8px;
  font-size: 0.82rem;
}

.linkish {
  border: 0;
  background: none;
  padding: 0 0 0 6px;
  font: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- reconcile ------------------------------------------------------------ */

.review {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}

.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dupe-warn {
  background: var(--wanted-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.dupe-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--wanted);
}
.dupe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}
.dupe-row + .dupe-row { margin-top: 8px; }
.muted { color: var(--muted); font-size: 0.82rem; }

.banner-ok {
  background: var(--owned-soft);
  color: var(--owned);
  border: 1px solid var(--owned);
}

.banner-offline {
  background: var(--wanted-soft);
  color: var(--wanted);
  border: 1px solid var(--wanted);
}

/* ---- scanner -------------------------------------------------------------- */

.scan-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 58dvh;
  background: #0c1211;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}

.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A window rather than a crosshair: a barcode is wide and short, so show that shape. */
.scan-reticle {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 22%;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}

.manual { margin-top: 4px; }

/* ---- verdict -------------------------------------------------------------- */

.verdict {
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  margin-bottom: 14px;
  border: 1px solid;
}

/* The headline is deliberately oversized: it gets read at arm's length, one-handed,
   in a shop, and it is the entire reason the app exists. */
.verdict-head {
  margin: 0;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.verdict-sub { margin: 8px 0 0; font-size: 0.95rem; opacity: 0.85; }

.verdict-owned   { background: var(--owned-soft);  color: var(--owned);  border-color: var(--owned); }
.verdict-wanted  { background: var(--wanted-soft); color: var(--wanted); border-color: var(--wanted); }
.verdict-new     { background: var(--surface);     color: var(--ink);    border-color: var(--line); }
.verdict-unknown { background: var(--surface-2);   color: var(--muted);  border-color: var(--line); }

.scan-subject { margin-bottom: 14px; }

.scan-actions { display: flex; flex-direction: column; gap: 8px; }
.scan-actions .btn-block { width: 100%; }

.scan-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); }

.dismissed { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Icon-only control. Square and no narrower than the text buttons are tall, so it stays a
   comfortable tap target rather than shrinking to the glyph. */
.btn-square {
  width: 38px;
  padding: 8px;
  flex-shrink: 0;
}
.btn-square svg { display: block; }

/* ---- account -------------------------------------------------------------- */

.account-head { font-size: 1.02rem; margin: 0 0 12px; }
.account-body { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

.page-foot { margin: 26px 0 0; text-align: center; font-size: 0.86rem; }
.page-foot a { color: var(--muted); text-underline-offset: 3px; }
.page-foot a:hover { color: var(--accent); }

/* ---- sort ----------------------------------------------------------------- */

.sorts { margin-top: 8px; align-items: center; }

.sort-label {
  flex-shrink: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 2px;
}

/* Slightly lighter than the status filters: sorting is a preference, filtering changes what
   you are looking at, and the two rows sit next to each other. */
.sorts .chip { min-height: 30px; padding: 4px 12px; font-size: 0.82rem; }

/* ---- sticky controls ------------------------------------------------------ */

/* The collection page splits its header: identity scrolls away, controls stay. Other pages keep
   using .top on its own and are short enough not to need stickiness at all. */
.controls {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}
.controls .search { margin-top: 10px; }

/* ---- collector picker (the page heading itself) --------------------------- */

.counts span { display: block; }

.who-title { display: flex; align-items: center; min-width: 0; }

/* A native select wearing the heading's type. Native because iOS then gives it a real picker
   wheel, it needs no JavaScript, and it keeps working for a third collector. */
.name-picker {
  max-width: 100%;
  padding: 0 22px 0 0;
  border: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  cursor: pointer;
  appearance: none;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2368746f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 8px;
}
.name-picker:hover { color: var(--accent); }

/* ---- account gear --------------------------------------------------------- */

.who-name { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Quiet by default: it sits beside the collection name and should not compete with it. */
.gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
}
.gear:hover { color: var(--accent); background: var(--surface-2); }
.gear svg { display: block; }

/* ---- record detail -------------------------------------------------------- */

.record-open { cursor: pointer; }
.record-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.record-head { font-size: 1.3rem; }

.sleeve { margin: 4px 0 14px; }
.sleeve-img {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--surface-2);
}
.sleeve-meta { text-align: center; margin: 0 0 16px; }

/* Who has it and since when. Centred under the pressing details it belongs with, and quiet —
   it's provenance, not something you came to this page to read. */
.holders { list-style: none; margin: -8px 0 16px; padding: 0; text-align: center; }
.holder {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
.holder-who { font-weight: 600; color: var(--ink-2); }
.holder-when::before { content: " · "; }

.listen { margin-bottom: 18px; text-decoration: none; }

.section-head {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 8px;
}

.tracks { list-style: none; margin: 0; padding: 0; }

.track {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  margin-bottom: 5px;
  font-size: 0.92rem;
}

/* Fixed width and tabular figures so A1..B4 form a straight column rather than a ragged edge. */
.track-pos {
  flex: 0 0 34px;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.track-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.track-dur { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }

.scans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.scan {
  width: 100%;
  border-radius: 8px;
  background: var(--surface-2);
  display: block;
}

/* ---- cover as the way in -------------------------------------------------- */

/* A bare button wrapper: the sleeve is the control, so it gets the focus ring and the pointer,
   and the row around it stays inert. */
.cover-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  line-height: 0;
}
.cover-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.zoomable {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  width: 100%;
  line-height: 0;
  border-radius: var(--radius);
}
.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #07100f;
  display: flex;
  flex-direction: column;
}
.lightbox:focus { outline: none; }

.lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  background: var(--surface);
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
/* Zoomed: the stage scrolls so the image can be panned rather than squeezed. */
.lightbox-stage.zoomed {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 4px;
}
.lightbox-img.zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
  border-radius: 0;
}

.lightbox-hint {
  margin: 0;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.account-action { margin-top: 12px; }

/* ---- spins ---------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Plain text rather than a pill: it's a fact about the record, not a status, and two coloured
   pills side by side already compete. */
.spins {
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  align-self: center;
}

.spin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.spin-line { margin: 0; font-size: 0.9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.spin-box .btn { min-height: var(--tap); flex-shrink: 0; }

/* ---- pick for me ---------------------------------------------------------- */

.picker {
  position: fixed;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 400px);
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
}
.picker:focus { outline: none; }

.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.picker-head h2 { font-size: 1.05rem; }

/* Perspective on the stage, transform on the sleeve: the sleeve tips forward from its bottom edge,
   the way a record leans when you thumb past it in a crate. */
.pick-stage {
  perspective: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 0;
  min-height: calc(min(56vw, 220px) + 76px);
}

.pick-sleeve {
  width: min(56vw, 220px);
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
  transform-origin: 50% 100%;
  will-change: transform;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.pick-sleeve img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick-sleeve .record-art-blank { width: 100%; height: 100%; border-radius: 6px; }

.pick-artist {
  margin: 14px 0 0;
  font-weight: 650;
  font-size: 1.1rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.pick-title {
  margin: 1px 0 0;
  color: var(--ink-2);
  text-align: center;
  overflow-wrap: anywhere;
}

.pick-land { animation: pick-land 0.22s ease-out; }
@keyframes pick-land {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

.pick-result { min-height: 2.6em; margin-top: 6px; text-align: center; }
.pick-spins { margin: 0; font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pick-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--wanted); }
.pick-error { margin: 8px 0 0; }

.picker-foot { display: flex; gap: 8px; margin-top: 12px; }
.picker-foot .btn { flex: 1; min-height: var(--tap); }
.picker-foot.is-hidden { visibility: hidden; }

/* ---- filter row with the picker ------------------------------------------- */

/* Filters on the left, picker pinned right. The filters keep their own horizontal scroll, so on a
   narrow phone they shrink and scroll rather than pushing the picker off the edge. */
.filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.filter-row .filters { margin-top: 0; min-width: 0; }

/* Same height as the chips beside it, so the row reads as one line. */
.pick-btn {
  margin-left: auto;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 7px;
}

/* ---- where it's filed ------------------------------------------------------ */

/* The letter and position read first — they're what you walk to the rack with — and the
   neighbours sit under them in the quieter type. */
.pick-where, .shelf-where {
  margin: 10px 0 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pick-between, .shelf-between {
  margin: 1px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.shelf-where, .shelf-between { text-align: center; }
.shelf-where { margin-top: 0; }
.shelf-between { margin-bottom: 14px; }

/* ---- filter row, hardened -------------------------------------------------- */

/* On iPhone the picker button could come up clipped at the right edge on the first paint, then sit
   correctly forever after one tap — the signature of the sticky bar being painted from a stale
   layer rather than of a wrong layout (measured correct at 375 and 393, stuck and unstuck).
   Two changes, both harmless if the cause turns out to be something else:

   1. The row is sized explicitly instead of by leftover space. The filters take the remaining width
      and scroll inside themselves; the button is a fixed 34px that flex cannot shrink or push. With
      margin-left:auto the button's position depended on the scroller measuring itself first.
   2. The sticky bar gets its own compositing layer, so it is rasterised at its real size rather than
      reused from a layer measured while the page was still settling. */
.filter-row { width: 100%; }
.filter-row .filters { flex: 1 1 auto; }
.pick-btn { flex: 0 0 auto; margin-left: 0; }

.controls { transform: translateZ(0); }

/* ---- picker filter ---------------------------------------------------------- */

/* One segmented control rather than four pills: the pills wrapped to two lines on a phone, and
   these are four settings of one dial, which is what .segmented already says elsewhere (the
   Owned/Wish list switch in the editor). It divides the width it has, so it cannot overflow. */
.pick-caption {
  margin: 12px 0 5px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The count stacks under the label: side by side it forced an abbreviation, and the count is the
   reason for the numbers at all — it says whether there's anything behind an option before you
   choose it. */
.pick-segmented .seg {
  /* .seg is a plain button elsewhere, so it needs to become a flex box before it can stack. */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 5px 2px;
  font-size: 0.78rem;
  line-height: 1.15;
}
.seg-count { font-size: 0.68rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

.pick-none { padding: 30px 8px; }