:root {
  --bg:        #f4efe6;
  --bg-card:  #fbf7ef;
  --ink:       #1a1714;
  --ink-soft:  #4a423a;
  --ink-mute:  #8b8278;
  --line:      #e3dccf;
  --line-soft: #ece5d6;
  --accent:    #b8431f;
  --accent-ink:#5a1d0a;
  --accent-teal: #2f6363;
  --accent-mustard: #b88a1f;
  /* MY-315: the deep end of the mustard ramp. A distinct "earned/heritage" gold,
     deliberately separate from the rust --accent and the moss --accent-moss so
     the Founding Member badge doesn't read as a plan tier. */
  --accent-mustard-deep: #8a6414;
  --accent-moss: #4a7a47;
  --accent-moss-deep: #3d6b3a;
  --accent-moss-ink: #2c4e2a;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  --shadow: 0 1px 2px rgba(26,23,20,0.04), 0 8px 24px rgba(26,23,20,0.06);
  --shadow-hover: 0 4px 8px rgba(26,23,20,0.06), 0 16px 40px rgba(26,23,20,0.10);

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ============================================================
   RECORD SHOP SCENE — fixed, never scrolls
   wood wall + framed posters + turntable + chalkboard + crates
   ============================================================ */
body {
  /* faint paper grain on top of everything */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 160px 160px;
  background-attachment: fixed;
}

.shop-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Wood-plank wall — fills viewport, never scrolls */
.shop-wall {
  position: absolute;
  inset: 0;
  background:
    /* vertical plank seams */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 159px,
      rgba(90, 55, 25, 0.16) 159px,
      rgba(90, 55, 25, 0.16) 160px,
      transparent 160px,
      transparent 161px
    ),
    /* warm wash that's slightly darker toward edges to suggest a room */
    radial-gradient(ellipse at center,
      rgba(244, 239, 230, 0) 0%,
      rgba(120, 80, 40, 0.08) 60%,
      rgba(80, 50, 25, 0.16) 100%);
}

/* Floor strip at the bottom — a darker wood band where the crates sit */
.shop-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background:
    linear-gradient(180deg,
      rgba(60, 35, 18, 0.0) 0%,
      rgba(60, 35, 18, 0.18) 35%,
      rgba(40, 22, 10, 0.30) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(40, 22, 10, 0.12) 0,
      rgba(40, 22, 10, 0.12) 1px,
      transparent 1px,
      transparent 80px
    );
}

/* SVG illustrations on each side wall — fixed via parent .shop-scene */
.shop-art {
  position: absolute;
  top: 70px;
  bottom: 0;
  width: 300px;
  height: calc(100vh - 70px);
  opacity: 0.92;
}
.shop-art-left  { left: 0; }
.shop-art-right { right: 0; }

/* Hide the side art on narrow screens — too crowded */
@media (max-width: 1100px) {
  .shop-art { display: none; }
}

/* keep all real content above the scene */
.site-header, .page, .site-footer { position: relative; z-index: 1; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* HEADER */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative;
  font-size: 14px; color: var(--ink-soft); font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease;
}
.site-nav a:hover { color: var(--accent-ink); }
.site-nav a.active {
  color: var(--ink);
  font-weight: 600;
}
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -2px;
  height: 2px;
  background: var(--accent-ink);
  border-radius: 2px;
}

/* PAGE */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 80px;
}

.back {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.back:hover { color: var(--accent-ink); }

/* HERO */
.hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
/* v2: editorial hero — left-aligned headline + right-aligned search/stats column */
.hero-v2 {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
/* groove: second hairline below the divider, like a record groove or master-tape leader */
.hero-v2::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--line);
  opacity: 0.55;
}
.hero-v2 .hero-left { flex: 1 1 auto; min-width: 0; }
.hero-v2 .hero-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  min-width: 280px;
}
.hero-v2 h1 { font-size: 64px; margin-top: 4px; }
.hero-v2 .lede { max-width: 620px; margin-bottom: 0; }

/* Search box in the hero */
.hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.hero-search-icon { color: var(--ink-mute); flex: 0 0 auto; }
.hero-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}
.hero-search input::placeholder { color: var(--ink-mute); }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search-clear {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease;
}
.hero-search-clear:hover { color: var(--ink); background-color: rgba(0,0,0,0.06); }
.stat-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat-line .stat-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
.stat-line .stat-l { margin-right: 2px; }
.stat-line .stat-sep { margin: 0 8px; color: var(--line); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  background: rgba(184, 67, 31, 0.08);
  border: 1px solid rgba(184, 67, 31, 0.35);
  border-radius: 2px;
  padding: 4px 10px 3px;
  margin: 0 0 14px;
  transform: rotate(-1.2deg);
  transform-origin: left center;
  box-shadow: 1px 1px 0 rgba(184, 67, 31, 0.10);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-variation-settings: "opsz" 120;
}
.lede {
  max-width: 540px;
  color: var(--ink-soft);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.lede-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-right: 4px;
}

/* SIDE A · LIBRARY leader stamp — record-label inner ring vibe */
.side-leader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.side-leader-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fbf7ef;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  padding-top: 1px;
}
.side-leader-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.side-leader-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.stats {
  display: flex;
  gap: 32px;
  margin: 0;
}
.stats div { text-align: right; }
.stats dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.stats dd {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

/* RARITY MEDALLION BADGE — inline SVG shield with score + tier band */
.rarity-badge {
  display: inline-block;
  width: 36px;
  margin-left: 10px;
  vertical-align: -0.32em;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(26, 23, 20, 0.22));
}
.rarity-badge svg { width: 100%; height: auto; display: block; overflow: visible; }
.rarity-badge.lg { width: 64px; margin-left: 16px; vertical-align: -0.18em; }

/* Tier gradient stops (top → bottom of shield) */
.rarity-badge.tier-grail    .g-top { stop-color: #d76a4a; } .rarity-badge.tier-grail    .g-bot { stop-color: #8a2a14; }
.rarity-badge.tier-scarce   .g-top { stop-color: #e3a665; } .rarity-badge.tier-scarce   .g-bot { stop-color: #a06c1f; }
.rarity-badge.tier-uncommon .g-top { stop-color: #b6c498; } .rarity-badge.tier-uncommon .g-bot { stop-color: #5e6e3f; }
.rarity-badge.tier-common   .g-top { stop-color: #cfc8b5; } .rarity-badge.tier-common   .g-bot { stop-color: #7e7561; }

/* Ribbon tails — darker tone per tier */
.rarity-badge.tier-grail    .ribbon { fill: #5e1a08; }
.rarity-badge.tier-scarce   .ribbon { fill: #6e4612; }
.rarity-badge.tier-uncommon .ribbon { fill: #3f4a26; }
.rarity-badge.tier-common   .ribbon { fill: #574f3f; }

.rarity-badge .shield-ring { stroke: rgba(255, 255, 255, 0.42); stroke-width: 0.7; }
.rarity-badge .groove { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.6; }
.rarity-badge .groove-dot { fill: rgba(255, 255, 255, 0.7); }
.rarity-badge .score {
  font-size: 20px;
  fill: #fff;
  letter-spacing: -0.02em;
}
.rarity-badge .tier {
  font-size: 6.5px;
  letter-spacing: 0.18em;
  fill: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.rarity-badge.lg .score { font-size: 22px; }
.rarity-badge.lg .tier  { font-size: 7px; }

/* SHOWCASE TRIO — large editorial 3-up band beneath the hero */
.showcase-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 56px;
}
.showcase-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 200ms ease;
}
.showcase-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0);
  box-shadow:
    0 1px 0 var(--stripe) inset,
    0 12px 28px -10px rgba(26, 23, 20, 0.22),
    0 4px 10px -4px rgba(26, 23, 20, 0.12);
}
.showcase-tile.placeholder {
  opacity: 0.55;
  pointer-events: none;
}

/* Tier stripe sits on the top edge of the card */
.showcase-tile::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--stripe);
  z-index: 2;
}
.showcase-tile.kind-rarest      { --stripe: linear-gradient(90deg, #b03219, #8a2a14 60%, #5e1a08); }
.showcase-tile.kind-collectable { --stripe: linear-gradient(90deg, #d3a05b, #a06c1f 60%, #6e4612); }
.showcase-tile.kind-valuable    { --stripe: linear-gradient(90deg, #93a571, #5e6e3f 60%, #3f4a26); }

/* Cover: large square with overlaid kicker + badge */
.showcase-tile-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #1a1714;
  overflow: hidden;
}
/* Subtle corner scrims to guarantee badge legibility against busy cover art */
.showcase-tile-cover::before,
.showcase-tile-cover::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.showcase-tile-cover::before {
  top: 0; left: 0; right: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover::after {
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0) 100%);
}
.showcase-tile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.showcase-tile:hover .showcase-tile-cover img { transform: scale(1.035); }
.showcase-tile-cover.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
}
.showcase-tile-cover.empty svg { width: 56px; height: 56px; opacity: 0.5; }

/* Kicker label — top-left chip over the cover */
.showcase-kicker {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 9px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a1714;
  background: #fcf8f0;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.32);
}

/* Metric badge — bottom-right over cover, glassy dark */
.showcase-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 8px 12px 9px;
  background: #14120f;
  color: #fcf8f0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
  min-width: 64px;
  text-align: right;
}
.showcase-badge .badge-l {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 248, 240, 0.7);
  line-height: 1;
  margin-bottom: 3px;
}
.showcase-badge .badge-v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 60;
}

/* Body */
.showcase-tile-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.showcase-tile-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-tile-artist {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase-tile-artist .yr { color: var(--ink-mute); }
.showcase-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 8px 0 0;
  font-weight: 600;
}
.showcase-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-empty-msg {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0;
}
.showcase-pending-note {
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  margin: -4px 0 16px;
  font-style: italic;
}

/* edition line on cards */
.edition-line {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* EDITION + RARITY PANELS (album detail) */
.edition-panel, .rarity-panel {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.edition-panel h2, .rarity-panel h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.edition-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 10px;
  font-style: italic;
}
.edition-body { margin: 0; color: var(--ink-soft); max-width: 65ch; font-size: 15px; }

.rarity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.rarity-head h2 { margin: 0; }
.rarity-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rarity-rescore-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rarity-rescore-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.rarity-rescore-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.rarity-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-weight: 600;
}
.rarity-tag.tier-grail    { color: #6c2424; border-color: #c98a8a; background: #f7e6e6; }
.rarity-tag.tier-scarce   { color: #7a4a14; border-color: #d8a878; background: #fbecd6; }
.rarity-tag.tier-uncommon { color: #4a5238; border-color: #b6bd9c; background: #eef0e3; }
.rarity-tag.tier-common   { color: #6b6b6b; border-color: #cfcabd; background: #f0ece1; }
.rarity-bar {
  margin: 18px 0 0;
}
.rarity-track {
  position: relative;
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.rarity-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8431f 0%, #d4924e 40%, #b6bd9c 70%, #cfcabd 100%);
}
.rarity-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
}
.rarity-notes { margin: 20px 0 0; color: var(--ink-soft); max-width: 65ch; font-size: 14.5px; }
.rarity-notes-estimated {
  color: var(--ink-mute);
  font-style: italic;
}

/* MY-65/60: "Not yet scored" pill and pending rarity panel.
   Honest pending state so users don't see a fake rarity number. */
.rarity-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed #cfcabd;
  background: transparent;
  color: var(--ink-mute);
  font-weight: 600;
  vertical-align: middle;
}
.rarity-pending.rarity-pending-lg {
  font-size: 12px;
  padding: 6px 14px;
  letter-spacing: 0.16em;
}
.rarity-panel-pending {
  background: var(--bg);
  border-style: dashed;
}
.rarity-pending-note {
  margin: 16px 0 0;
  color: var(--ink-soft);
  max-width: 65ch;
  font-size: 14.5px;
}

/* VALUE & COLLECTABILITY PANEL (album detail) */
.value-panel {
  margin: 0 0 40px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.value-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.value-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.value-amount {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.value-cell {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
}
.value-cell-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.value-cell-figure {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
}
.value-cell-of {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
}
.value-cell-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.value-notes {
  margin: 18px 0 0;
  color: var(--ink-soft);
  max-width: 65ch;
  font-size: 14.5px;
}
/* MY-65/60: pending value treatment - lower visual weight than a real figure
   so a missing price reads as "not yet" rather than "$0". */
.value-amount-pending {
  color: var(--ink-mute);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
}
.value-cell-pending {
  border-style: dashed;
  background: transparent;
}
.value-cell-figure-pending {
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-mute);
  letter-spacing: 0;
}

/* MY-156: tiny source provenance pill next to the value figure on the album
   page. Shops/Discogs are high-confidence; Heuristic is the floor estimate.
   Same color family as MY-153 pv2-src-* badges so the system reads consistent. */
.value-source-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  cursor: help;
  border: 1px solid transparent;
  white-space: nowrap;
}
.value-source-badge-shops {
  background: #e8f3e8;
  color: #2d5a2d;
  border-color: #b6d7b6;
}
.value-source-badge-discogs {
  background: #efe6f5;
  color: #4a2a6a;
  border-color: #c9b6dd;
}
.value-source-badge-heuristic {
  background: #fbf1d9;
  color: #6a5117;
  border-color: #e3cd92;
}
.value-source-badge-other {
  background: #ece8e0;
  color: #4a4538;
  border-color: #c9c2b3;
}
.kv-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.kv-value-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 4px;
}

/* TOP-5 PANEL (top artists + top genres) */
.top-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.top-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
}
.top-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.top-sub {
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  font-size: 10px;
}
.top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.top-list li:last-child { border-bottom: none; }
.rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.top-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.top-name:hover { color: var(--accent-ink); }
.top-name.as-link {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.top-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

/* CONTROLS (sort + genre filter) */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 32px;
}
.sort-control { display: flex; align-items: center; gap: 10px; }
.sort-control label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.sort-control select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 28px 7px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%238b8278' stroke-width='1.4'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s ease;
}
.sort-control select:hover { border-color: var(--ink-mute); }
.sort-control select:focus { outline: none; border-color: var(--accent); }

.genre-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

/* Genre filter section pinned below the library grid */
.genre-filter-section {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.genre-filter-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 14px;
}

/* Active-filter indicator next to the Sort dropdown */
.genre-active-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.chip.inline { padding: 4px 6px 4px 12px; }
.chip-clear {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
  opacity: 0.7;
  transition: opacity .15s ease, background-color .15s ease;
}
.chip-clear:hover { opacity: 1; background-color: rgba(0,0,0,0.08); }
.chip {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ink-mute); color: var(--ink); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 6px;
}
.chip.active .chip-n { color: #fff; background: rgba(255,255,255,0.18); }

/* MY-314: format badges on album cards (format, disc count, pressing variant).
   Unobtrusive mono pills below the meta line. Legacy NULL-format rows render no
   badge at all, so existing collections look unchanged. */
.fmt-badges {
  gap: 6px;
}
.fmt-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
}
.fmt-badge-format {
  border-color: var(--accent);
  color: var(--accent);
}
.fmt-badge-variant {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fmt-badge-discs {
  color: var(--ink-mute);
}

/* GROUPED RESULTS (when sorted by artist/genre) */
.group { margin-bottom: 48px; }
.group:last-child { margin-bottom: 0; }
.group-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.group-title a:hover { color: var(--accent-ink); }
.group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.no-results {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* genre tags inside cards */
.genre-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.chip-mini {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
}
.card {
  background: transparent;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.card:hover { transform: translateY(-2px); }
.card:hover .cover { box-shadow: var(--shadow-hover); }
.cover {
  aspect-ratio: 1/1;
  background: var(--bg-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease;
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
}
.cover-placeholder.big { background: var(--bg-card); border-radius: var(--r-lg); }

.card-body { padding: 14px 4px 0; }
.card-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 2px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: flex-start;
}
.album-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-body h3 .rarity-badge { flex: 0 0 36px; margin-top: 2px; margin-left: 0; }
.artist { margin: 0 0 6px; color: var(--ink-soft); font-size: 14px; }
.meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.meta-sub { margin-top: 4px; }
.dot { color: var(--line); }

/* MY-308: not-owned discography state on the artist page. Same .card markup as
   an owned record, rendered as a non-interactive <div> (there is no album row to
   open) and visually recessed so the vault reads as the foreground. Deliberately
   NOT hidden or half-height: the point of the page is that these are real
   releases you could still hunt down. */
.card-not-owned { cursor: default; }
.card-not-owned:hover { transform: none; }
.card-not-owned:hover .cover { box-shadow: var(--shadow); }
.card-not-owned .cover {
  filter: grayscale(1);
  opacity: 0.5;
  box-shadow: none;
  border: 1px dashed var(--line);
}
.card-not-owned .card-body { opacity: 0.62; }
/* MY-359: compilations / box sets on the artist page. MusicBrainz files every
   repackaging of an already-listed album as its own release group, so they are
   split out of the main grid and collapsed by default. Same secondary-section
   idiom as .vp-retired-arcs. Rendered only when the artist actually has some. */
.disc-compilations {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.disc-compilations-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.disc-compilations-summary::-webkit-details-marker { display: none; }
.disc-compilations-summary::marker { content: ''; }
.disc-compilations-summary:hover { color: var(--ink); }
.disc-compilations-caret {
  display: inline-block;
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.disc-compilations[open] > .disc-compilations-summary .disc-compilations-caret {
  transform: rotate(180deg);
}
.disc-compilations-count {
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.8;
}
.disc-compilations-note {
  margin: 6px 0 14px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.not-owned-pill {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px dashed var(--line);
  color: var(--ink-mute);
  white-space: nowrap;
  margin-top: 3px;
}

/* ALBUM DETAIL */
.album-hero {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 56px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.album-cover {
  aspect-ratio: 1/1;
  background: var(--bg-card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-info h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  margin: 0 0 6px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.album-artist {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent-ink);
  margin: 0 0 24px;
}
.album-artist a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* MY-337: the spin control's own row, directly under the title and artist and
   visually separated from .album-actions further down. The artist line owns the
   24px gap to whatever follows it, so when this row is present it takes that gap
   over instead of adding a second one. flex-wrap means a long localized label
   drops to its own line on a narrow viewport rather than overflowing. */
.album-artist:has(+ .album-spin-row) { margin-bottom: 12px; }
.album-spin-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin: 0 0 24px;
}
.kv div { border-top: 1px solid var(--line); padding-top: 10px; }
.kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.kv dd { margin: 0; font-size: 15px; color: var(--ink); }
.kv dd .kv-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.kv dd .kv-link:hover,
.kv dd .kv-link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
  outline: none;
}
.notes { margin-top: 16px; color: var(--ink-soft); font-size: 15px; max-width: 60ch; }
.source a { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

/* TRACKS */
.tracklist h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.tracks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.tracks li {
  display: grid;
  grid-template-columns: 36px 1fr auto 60px;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.tracks li:hover { background: var(--bg-card); }
.tn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.ttitle { font-size: 15px; }
.twriters { font-size: 12px; color: var(--ink-mute); font-style: italic; }
.tdur { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); text-align: right; }
.muted { color: var(--ink-mute); }

/* ARTIST */
.artist-hero { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.artist-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.artist-hero .kv { max-width: 600px; }
.bio { margin-top: 20px; max-width: 65ch; color: var(--ink-soft); }

/* MY-306: artist favorite/star toggle. One rule set for all three surfaces
   (artist hero, library group-by-artist header, Top artists list); the size is
   inherited from the surrounding heading via `em` so the star scales with the
   56px hero h1 and the much smaller list rows without a per-surface override. */
.artist-star {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 0 0.25em;
  margin: 0;
  font-size: 0.8em;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, transform 0.15s ease;
}
.artist-star:hover { color: var(--accent-ink); transform: scale(1.15); }
.artist-star.is-on { color: var(--accent-ink); }
/* The optimistic flip disables the button until the POST settles. Keep it fully
   legible while in flight -- this is a 1-bit toggle, not a destructive action. */
.artist-star[disabled] { cursor: default; opacity: 0.6; }
.artist-star:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
/* Top artists rows are a grid/flex line ending in .top-count; keep the star from
   stretching the row height. */
.top-list li .artist-star { font-size: 14px; }

/* MY-307 — per-artist show/concert log. Owner-only section on the artist page. */
.artist-show-list { list-style: none; margin: 0 0 16px; padding: 0; max-width: 65ch; }
.artist-show-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.artist-show-row:first-child { border-top: 1px solid var(--line); }
.artist-show-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
/* Fixed-ish date column, then the venue takes the rest. min-width:0 +
   overflow-wrap keep a long unbroken venue name from pushing the row wide
   (MY-247: every text child of a flex container needs its own element). */
.artist-show-date {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 14px;
}
.artist-show-where {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.artist-show-notes {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.artist-show-actions { display: flex; gap: 8px; margin-top: 10px; }
.artist-show-actions .btn-secondary { padding: 4px 12px; font-size: 13px; }

/* EMPTY */
.empty {
  text-align: center;
  padding: 80px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-icon { color: var(--ink-mute); margin-bottom: 16px; }
.empty h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.empty p { color: var(--ink-soft); margin: 0; }

/* MY-88: empty-vault CTA actions row + button styles */
.empty-cta { max-width: 560px; }
.empty-cta p { margin: 0 0 22px; }
.empty-cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mvv-cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line, #d8c9a7);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mvv-cta-primary {
  background: #5a1a1a;
  color: #fbf6ec;
  border-color: #5a1a1a;
}
.mvv-cta-primary:hover { background: #3a1010; border-color: #3a1010; }
.mvv-cta-secondary {
  background: transparent;
  color: var(--ink, #1a1a1a);
}
.mvv-cta-secondary:hover { background: rgba(90, 26, 26, 0.06); border-color: #5a1a1a; color: #5a1a1a; }
.empty-cta-loading p { color: var(--ink-mute); font-style: italic; }

/* Console-surface variant: compact CTA card that fits inside #nowSpinningSlot */
.now-spinning-empty-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.now-spinning-empty-cta .ns-empty-line {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  margin: 6px 0 0;
}
.now-spinning-empty-cta .ns-empty-sub {
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
}
.ns-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ns-empty-actions .mvv-cta { padding: 9px 16px; font-size: 11px; }

/* Next Spin page empty variant */
.ns-page-empty {
  text-align: center;
  padding: 60px 20px;
  max-width: 560px;
  margin: 0 auto;
}
.ns-page-empty .empty-icon { color: var(--ink-mute); margin-bottom: 16px; }
.ns-page-empty h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.ns-page-empty p {
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.55;
}

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 40px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.site-footer .footer-beta { color: var(--ink-soft, var(--ink-mute)); }
.site-footer .footer-beta a {
  color: var(--accent, #2f6f4a);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.site-footer .footer-beta a:hover { opacity: 0.85; }
.site-footer .footer-beta .footer-version {
  display: inline-block;
  margin: 0 0.4em 0 0.3em;
  padding: 1px 6px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft, var(--ink-mute));
  background: rgba(90, 26, 26, 0.06);
  border: 1px solid rgba(90, 26, 26, 0.15);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.release-h2 .release-version,
.admin-title .admin-version {
  display: inline-block;
  margin-left: 0.45em;
  padding: 2px 8px;
  font-size: 0.55em;
  vertical-align: middle;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent, #2f6f4a);
  background: rgba(47, 111, 74, 0.08);
  border: 1px solid rgba(47, 111, 74, 0.25);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: none;
}
.admin-title .admin-version {
  font-size: 0.45em;
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .showcase-trio { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .showcase-tile-cover { aspect-ratio: 16 / 9; }
  .hero-v2 h1 { font-size: 48px; }
  .hero-v2 { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero-v2 .hero-right { align-items: stretch; min-width: 0; }
  .hero-search { width: 100%; }
}

@media (max-width: 768px) {
  .site-header, .page { padding-left: 20px; padding-right: 20px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero h1 { font-size: 40px; }
  .stats { gap: 24px; }
  .stats div { text-align: left; }
  .album-hero { grid-template-columns: 1fr; gap: 24px; }
  .album-cover { max-width: 340px; }
  .album-info h1 { font-size: 36px; }
  .tracks li { grid-template-columns: 28px 1fr auto; }
  .twriters { display: none; }
  .controls { flex-direction: column; align-items: stretch; gap: 16px; }
  .top-panel { grid-template-columns: 1fr; gap: 16px; }
}

/* states */
.loading, .error {
  text-align: center;
  padding: 100px 20px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.error { color: var(--accent-ink); }
.error .muted { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-mute); text-transform: none; letter-spacing: 0; }

/* ===========================================================================
   Next Spin — homepage teaser + dedicated page
   =========================================================================== */

/* --- Homepage teaser strip --- */
.ns-teaser {
  margin: 32px 0 36px;
  padding: 22px 26px;
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f7efe1 100%);
  border: 1px solid rgba(184, 67, 31, 0.22);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
  position: relative;
}
.ns-teaser-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ns-teaser-kicker {
  color: var(--accent-ink);
  font-weight: 600;
}
.ns-teaser-sep { color: var(--ink-mute); }
.ns-teaser-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.ns-teaser-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
}
.ns-teaser-cover {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1410;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.ns-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-teaser-body { min-width: 0; }
.ns-teaser-context {
  color: var(--ink-mute);
  font-size: 13px;
  margin: 0 0 6px;
}
.ns-teaser-context a, .ns-anchor-link { color: var(--accent-ink); font-weight: 500; }
.ns-teaser-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.ns-teaser-title a { color: inherit; text-decoration: none; }
.ns-teaser-title a:hover { color: var(--accent-ink); }
.ns-teaser-artist {
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 4px;
}
.ns-teaser-yr { color: var(--ink-mute); font-style: normal; }
.ns-teaser-reason {
  margin: 4px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  max-width: 64ch;
}
.ns-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ns-teaser-pos {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mid, #5b574e);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 999px;
  background: rgba(20, 30, 30, 0.03);
}
.ns-teaser-loading, .ns-teaser-error .ns-teaser-body { color: var(--ink-mute); font-style: italic; }

/* --- Picker settings strip (homepage teaser, read-only summary) --- */
.ns-settings-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(20, 30, 30, 0.035);
  border: 1px solid rgba(20, 30, 30, 0.08);
  border-radius: 8px;
}
.ns-settings-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.ns-settings-strip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.ns-settings-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-soft);
  border: 1px solid rgba(20, 30, 30, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ns-settings-strip-edit {
  font-size: 11px;
  font-weight: 600;
  color: rgb(47, 99, 99);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 120ms ease;
}
.ns-settings-strip-edit:hover {
  background: rgba(47, 99, 99, 0.10);
  text-decoration: none;
}

/* MY-254: the theme pill is a real button (opens the inline chooser below),
   unlike its plain-span .ns-settings-pill siblings -- reset UA button
   styling but keep the exact same pill look. */
.ns-settings-pill-theme {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ns-settings-pill-theme:hover,
.ns-settings-pill-theme[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ns-settings-pill-caret {
  font-size: 9px;
  transition: transform 0.15s;
}
.ns-settings-pill-theme[aria-expanded="true"] .ns-settings-pill-caret {
  transform: rotate(180deg);
}
/* Reuses .ns-theme-grid/.ns-theme-chip from the full Next Spin page's own
   grid as-is; just tightened to fit inline under the settings strip. */
.ns-teaser-theme-chooser {
  margin: 0 0 10px;
  padding: 10px;
  background: rgba(20, 30, 30, 0.035);
  border: 1px solid rgba(20, 30, 30, 0.08);
  border-radius: 8px;
}
.ns-teaser-theme-chooser .ns-theme-grid { gap: 6px; }
.ns-teaser-theme-chooser .ns-theme-chip {
  padding: 6px 12px;
  font-size: 12px;
}

/* --- Lock chips (teaser + page) --- */
.ns-lockchips, .ns-lockoffers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ns-lockchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 11px;
  background: rgba(47, 99, 99, 0.14);
  color: var(--ink);
  border: 1px solid rgba(47, 99, 99, 0.32);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ns-lockchip:hover { background: rgba(47, 99, 99, 0.22); border-color: rgba(47, 99, 99, 0.55); }
.ns-lockchip-x {
  font-size: 14px;
  line-height: 1;
  color: var(--ink-mute);
  margin-left: 2px;
}
.ns-lockoffer {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px dashed rgba(20, 30, 30, 0.30);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ns-lockoffer:hover {
  color: var(--ink);
  border-color: rgba(47, 99, 99, 0.55);
  background: rgba(47, 99, 99, 0.06);
}
.ns-lock-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(20, 30, 30, 0.14);
}
.ns-lock-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ns-lock-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
}

/* --- Configure picker: "Options saved" pill + footer return button --- */
.ns-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ns-control-header .ns-control-title { margin: 0; }
.ns-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: rgba(47, 99, 99, 0.10);
  color: var(--ink-soft);
  border: 1px solid rgba(47, 99, 99, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: help;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ns-save-pill svg { color: rgb(47, 99, 99); flex-shrink: 0; }
.ns-save-pill.is-flash {
  background: rgba(47, 99, 99, 0.28);
  color: var(--ink);
  border-color: rgba(47, 99, 99, 0.70);
  animation: nsSavePillFlash 1100ms ease-out 1;
}
@keyframes nsSavePillFlash {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.06); }
  100% { transform: scale(1); background: rgba(47, 99, 99, 0.10); color: var(--ink-soft); border-color: rgba(47, 99, 99, 0.28); }
}
.ns-page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 32px 0 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(20, 30, 30, 0.10);
}
.ns-btn-return {
  text-decoration: none;
}

/* --- Match pill --- */
.ns-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: rgba(47, 99, 99, 0.10);
  color: var(--accent-teal);
  border: 1px solid rgba(47, 99, 99, 0.28);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.ns-match-score {
  padding: 2px 5px;
  background: var(--accent-teal);
  color: #fbf7ef;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

/* --- Buttons --- */
.ns-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ns-btn:disabled { opacity: 0.55; cursor: wait; }
.ns-btn-primary {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
}
.ns-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.ns-btn-secondary {
  background: #fbf7ef;
  color: var(--ink);
  border-color: rgba(26,23,20,0.18);
}
.ns-btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.ns-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(26,23,20,0.16);
}
.ns-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }

/* --- Dedicated page hero --- */
.ns-page-hero {
  margin: 8px 0 28px;
  max-width: 760px;
}
.ns-page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 12px;
}
.ns-page-hero .lede { color: var(--ink-soft); font-size: 15px; max-width: 60ch; line-height: 1.55; }

/* --- Controls panel --- */
.ns-controls {
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.ns-control-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.ns-theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ns-theme-chip {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(26,23,20,0.18);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.ns-theme-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.ns-theme-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fbf7ef;
}
.ns-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.ns-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ns-field-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  font-weight: 600;
}
.ns-field select {
  appearance: none;
  background: #fbf7ef;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  padding: 8px 28px 8px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%231a1714' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ns-field select:focus { border-color: var(--accent); outline: none; }
.ns-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 14px;
}
.ns-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.ns-toggle input { accent-color: var(--accent); width: 14px; height: 14px; }
.ns-toggle:hover { color: var(--ink); }
.ns-actions-bar {
  display: flex;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(26,23,20,0.08);
  padding-top: 14px;
}

/* --- Result grid --- */
.ns-result { margin-bottom: 36px; }
.ns-result-head { margin-bottom: 14px; }
.ns-result-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0;
}
.ns-result-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .ns-result-grid { grid-template-columns: 1fr; }
}

/* Anchor card */
.ns-anchor-card {
  display: block;
  background: #1a1714;
  color: #f4efe6;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 14px 30px -22px rgba(26,23,20,0.65);
  transition: transform 0.15s;
}
.ns-anchor-card:hover { transform: translateY(-2px); }
.ns-anchor-card.empty {
  background: #fbf7ef;
  color: var(--ink-soft);
  border: 1px dashed rgba(26,23,20,0.2);
  padding: 22px;
}
.ns-anchor-cover {
  aspect-ratio: 1 / 1;
  background: #0a0805;
}
.ns-anchor-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-anchor-body { padding: 14px 16px 16px; }
.ns-anchor-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-mustard);
  margin: 0 0 6px;
  font-weight: 600;
}
.ns-anchor-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.ns-anchor-artist {
  font-size: 13px;
  color: rgba(244,239,230,0.78);
  margin: 0 0 8px;
}
.ns-anchor-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ns-chip-mini {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(244,239,230,0.10);
  color: rgba(244,239,230,0.82);
  border-radius: 999px;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ns-anchor-empty { font-size: 13px; margin: 8px 0 0; line-height: 1.5; }

/* Suggestion cards */
.ns-suggestions { display: block; }
.ns-primary-slot { margin-bottom: 28px; }
.ns-suggest-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.ns-suggest-card.primary {
  border-color: rgba(184, 67, 31, 0.35);
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f7eddd 100%);
  box-shadow: 0 10px 28px -22px rgba(184, 67, 31, 0.45);
}
.ns-suggest-cover {
  display: block;
  aspect-ratio: 1 / 1;
  width: 140px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1410;
  box-shadow: 0 8px 18px -12px rgba(26,23,20,0.5);
}
.ns-suggest-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-suggest-body { min-width: 0; }
.ns-suggest-role {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 4px;
}
.ns-suggest-card.primary .ns-suggest-role { color: var(--accent-ink); }
/* MY-238: "From the Vault" badge on rediscovery picks (neglected rare records). */
.ns-vault-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #5e1a08;
  color: #f4e4d4;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ns-suggest-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.ns-suggest-title a { color: var(--ink); text-decoration: none; }
.ns-suggest-title a:hover { color: var(--accent-ink); }
.ns-suggest-artist {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.ns-suggest-reason {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 56ch;
}

/* MY-54 Slice 4: AI-grounded reasoning gets a touch more weight + reading width
   to signal it's the editorial version, not the templated one. */
.ns-suggest-reason.has-ai {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 6px;
  max-width: 60ch;
}
.ns-suggest-reason.is-loading {
  color: var(--ink-mute);
  font-style: italic;
}
.ns-suggest-reason-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.ns-reason-baseline {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.ns-reason-toggle {
  background: none;
  border: 0;
  padding: 0 0 8px;
  margin: 0 0 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink, var(--ink));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}
.ns-reason-toggle:hover { text-decoration: underline; }
.ns-reason-toggle:disabled { opacity: 0.5; cursor: default; }
.ns-reason-toggle-cue { transition: transform 120ms ease; display: inline-block; }
.ns-reason-toggle:hover .ns-reason-toggle-cue { transform: translateX(2px); }
.ns-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ns-alternates-group { margin-top: 4px; }
.ns-alternates-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(26,23,20,0.10);
}
.ns-alternates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ns-empty-card {
  padding: 30px;
  background: var(--bg-card);
  border: 1px dashed rgba(26,23,20,0.18);
  border-radius: 6px;
  text-align: center;
}
.ns-empty-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ns-empty-card p { color: var(--ink-mute); margin: 0; }
.ns-muted { color: var(--ink-mute); font-size: 13px; }

/* Section titles */
.ns-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.ns-section-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }

/* MY-179 Slice 4: Build a playlist card */
.ns-playlist { margin-bottom: 36px; }
.ns-playlist-panel { max-width: 640px; }
.ns-playlist-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.ns-playlist-length-field { min-width: 140px; }
.ns-playlist-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ns-playlist-progress-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0;
}
.ns-playlist-progress-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ns-playlist-teaser-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ns-playlist-hint {
  color: var(--ink-mute);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 56ch;
}
.ns-playlist-notice {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 56ch;
  padding: 8px 10px;
  border-radius: 8px;
}
.ns-playlist-notice.error {
  color: var(--accent-ink);
  background: rgba(184, 67, 31, 0.08);
  border: 1px solid rgba(184, 67, 31, 0.25);
}
.ns-playlist-replace {
  margin-top: 6px;
}
.ns-playlist-tracks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ns-playlist-track {
  display: grid;
  grid-template-columns: 22px 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.ns-playlist-track.current {
  border-color: rgba(184, 67, 31, 0.35);
  background: linear-gradient(180deg, #fbf7ef 0%, #f7eddd 100%);
  box-shadow: 0 10px 24px -20px rgba(184, 67, 31, 0.45);
}
.ns-playlist-track.played { opacity: 0.65; }
.ns-playlist-track.upcoming { border-style: dashed; }
.ns-playlist-track-index {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
}
.ns-playlist-track-cover {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1410;
}
.ns-playlist-track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-playlist-track-body { min-width: 0; }
.ns-playlist-track-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  margin: 0 0 2px;
  color: var(--ink);
}
.ns-playlist-track-artist { font-size: 12px; color: var(--ink-soft); margin: 0 0 4px; }
.ns-playlist-track-reason {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-mute);
  margin: 0;
  max-width: 48ch;
}
.ns-playlist-track-action { flex-shrink: 0; }
.ns-playlist-track-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
  white-space: nowrap;
}
.ns-playlist-track-badge.upcoming { color: rgba(26,23,20,0.35); }
@media (max-width: 560px) {
  .ns-playlist-track { grid-template-columns: 20px 40px 1fr; }
  .ns-playlist-track-action { grid-column: 1 / -1; margin-top: 4px; padding-left: 60px; }
}

/* Override search */
.ns-override { margin: 8px 0 36px; }
.ns-search-wrap { position: relative; max-width: 560px; }
.ns-search-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.ns-search-input:focus { border-color: var(--accent); outline: none; }
.ns-search-results {
  margin-top: 6px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.14);
  border-radius: 4px;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 14px 28px -20px rgba(26,23,20,0.35);
}
.ns-search-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26,23,20,0.06);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.ns-search-row:last-child { border-bottom: 0; }
.ns-search-row:hover { background: rgba(184, 67, 31, 0.06); }
.ns-search-cover {
  width: 36px; height: 36px;
  background: #1a1410;
  border-radius: 3px;
  overflow: hidden;
}
.ns-search-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-search-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-search-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ns-search-artist { font-size: 11.5px; color: var(--ink-mute); }
.ns-search-cue {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  font-weight: 600;
}
.ns-search-empty { padding: 14px; color: var(--ink-mute); font-size: 13px; margin: 0; }

/* History list */
.ns-history-list { display: flex; flex-direction: column; gap: 0; }
/* MY-310: the row is a grid of [navigating link | remove actions]; the original
   five-column layout moved onto .ns-history-link. The remove buttons cannot live
   inside the link, so the link can no longer be the row itself. */
.ns-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.08);
  border-top: 0;
  color: var(--ink);
  font-size: 13px;
  transition: background 0.12s;
}
.ns-history-link {
  display: grid;
  grid-template-columns: 44px 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.ns-history-row:first-child { border-top: 1px solid rgba(26,23,20,0.08); border-radius: 4px 4px 0 0; }
.ns-history-row:last-child { border-radius: 0 0 4px 4px; }
.ns-history-row:hover { background: rgba(184, 67, 31, 0.05); }
.ns-history-idx {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-align: center;
}
.ns-history-row:first-child .ns-history-idx {
  color: #fbf7ef;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 0;
}
.ns-history-cover { width: 36px; height: 36px; border-radius: 3px; overflow: hidden; background: #1a1410; }
.ns-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-history-meta { display: flex; flex-direction: column; min-width: 0; }
.ns-history-title { font-weight: 600; color: var(--ink); }
.ns-history-artist { color: var(--ink-mute); font-size: 11.5px; }
.ns-history-source {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-teal);
  padding: 2px 8px;
  background: rgba(47, 99, 99, 0.08);
  border-radius: 999px;
}
.ns-history-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-mute);
}
.ns-history-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ns-history-remove {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid rgba(26,23,20,0.16);
  border-radius: 4px;
  padding: 5px 7px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ns-history-remove:hover {
  color: #b03030;
  border-color: #b03030;
  background: rgba(176, 48, 48, 0.08);
}
.ns-history-remove:disabled { cursor: wait; opacity: 0.5; }
.ns-history-remove-batch {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 5px 8px;
}
.ns-history-notice {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-mute);
}
.ns-history-notice.error { color: #b03030; }
@media (max-width: 640px) {
  .ns-history-link { grid-template-columns: 36px 36px 1fr auto; }
  .ns-history-source { display: none; }
  /* The batch button's label would otherwise force the row wider than the
     viewport next to the per-row ✕; the title attribute keeps the meaning. */
  .ns-history-remove-batch { font-size: 0; padding: 5px 6px; }
  .ns-history-remove-batch::after { content: '⨯⨯'; font-size: 11px; }
  .ns-teaser-row { grid-template-columns: 80px 1fr; }
  .ns-teaser-cover { width: 80px; height: 80px; }
  .ns-teaser-title { font-size: 19px; }
  .ns-page-hero h1 { font-size: 36px; }
}

/* ---------------------------------------------------------------------------
   Now Spinning — live homepage card (chalkboard-inspired)
   --------------------------------------------------------------------------- */
.now-spinning-card {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 22px;
  align-items: stretch;
  margin: 22px 0 4px;
  padding: 18px 22px 18px 18px;
  background:
    linear-gradient(180deg, #1d2f27 0%, #16261f 100%);
  border: 1px solid #0e1a14;
  border-radius: 8px;
  box-shadow:
    0 2px 0 #5a3a20,                        /* warm wood ledge */
    0 10px 22px -10px rgba(10, 12, 10, 0.55),
    inset 0 0 0 1px rgba(255, 247, 230, 0.04);
  color: #fbf7ef;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.now-spinning-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 2px 0 #5a3a20,
    0 14px 26px -10px rgba(10, 12, 10, 0.6),
    inset 0 0 0 1px rgba(255, 247, 230, 0.06);
}
.now-spinning-card::before {
  /* faint chalk-dust texture on the board */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 230, 0.05) 0, transparent 38%),
    radial-gradient(circle at 88% 78%, rgba(255, 247, 230, 0.04) 0, transparent 42%);
  pointer-events: none;
}
.now-spinning-loading, .now-spinning-empty {
  grid-template-columns: 1fr;
  min-height: 96px;
  padding: 18px 22px;
}

.ns-kicker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ns-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b8431f;
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: nsPulse 2.2s ease-in-out infinite;
}
.ns-dot-off {
  background: #6b6258;
  box-shadow: none;
  animation: none;
}
@keyframes nsPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 67, 31, 0.06); }
}
.ns-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b88a1f;
}

.ns-cover {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0805;
  box-shadow:
    0 1px 0 rgba(255, 247, 230, 0.04),
    0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.ns-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ns-cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 247, 230, 0.35);
}
.ns-disc {
  position: absolute;
  right: -52px; top: 50%;
  transform: translateY(-50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #b8431f 0 18%, transparent 18.5%),
    repeating-radial-gradient(circle at 50% 50%,
      #15110d 0 2px, #1a1410 2px 4px);
  box-shadow:
    0 0 0 1.5px #0a0805,
    0 4px 10px -3px rgba(0, 0, 0, 0.55);
  opacity: 0.94;
}

.ns-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 6px;
}
.ns-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 2px 0 6px;
  color: #fbf7ef;
}
.ns-artist {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  color: #e9dcc1;
  margin: 0 0 6px;
}
.ns-year {
  color: #b88a1f;
  font-size: 14px;
}
.ns-sidetrack {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #b88a1f;
  margin: 4px 0 2px;
}
.ns-note {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(251, 247, 239, 0.78);
  margin: 6px 0 4px;
}
/* MY-341: the Now Spinning card lists every note stacked on this spin, oldest
   first, instead of only the newest. .ns-sidetrack and .ns-note keep their
   existing type treatment inside a row; the margins that spaced them as block
   paragraphs are dropped so the rows read as one list. */
.ns-notes {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ns-note-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ns-note-row .ns-sidetrack,
.ns-note-row .ns-note { margin: 0; }
.ns-cta {
  display: inline-block;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8431f;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
a.now-spinning-card:hover .ns-cta {
  color: #d96b3a;
  border-bottom-color: #d96b3a;
}
.ns-empty-line {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: #e9dcc1;
  margin: 4px 0;
}
.ns-empty-sub { margin: 4px 0 0; }
.ns-empty-link {
  color: #b8431f;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(184, 67, 31, 0.4);
}
.ns-empty-link:hover { border-bottom-color: #b8431f; }
.ns-loading {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: rgba(251, 247, 239, 0.6);
}

@media (max-width: 640px) {
  .now-spinning-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 14px; }
  .ns-cover { width: 110px; height: 110px; }
  .ns-disc { display: none; }
  .ns-title { font-size: 22px; }
  .ns-artist { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Album page editorial upgrade — NOW SPINNING badge, story, trivia, lyrics
   --------------------------------------------------------------------------- */
.album-now-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(184, 67, 31, 0.08);
  border: 1px solid rgba(184, 67, 31, 0.28);
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.album-now-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: nsPulse 2.2s ease-in-out infinite;
}
.album-hero.is-now-spinning {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
}
.album-year { color: var(--ink-mute); font-size: 0.92em; }
.album-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.album-action {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  padding: 6px 12px;
  background: rgba(184, 67, 31, 0.06);
  border: 1px solid rgba(184, 67, 31, 0.25);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.album-action:hover {
  background: rgba(184, 67, 31, 0.12);
  border-color: var(--accent);
}
.album-action[disabled],
.album-action:disabled {
  cursor: default;
  opacity: 1;
}
.album-action.album-action-primary {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.album-action.album-action-primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
.album-action.album-action-primary:disabled {
  background: var(--ink-mute);
  border-color: var(--ink-mute);
  cursor: wait;
}
.album-action.album-action-current {
  background: rgba(47, 99, 99, 0.12);
  color: var(--accent-teal);
  border-color: rgba(47, 99, 99, 0.4);
  font-weight: 600;
}

/* Current-spin strip (editable) */
.current-spin-strip {
  margin: 18px 0 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(184, 67, 31, 0.2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.cs-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 10px;
}
.cs-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
}
.cs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-field-wide { flex: 1 1 220px; }
.cs-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cs-input {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  padding: 6px 10px;
  background: #fdfaf3;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 4px;
  color: var(--ink);
  min-width: 60px;
}
.cs-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.cs-input-narrow { width: 72px; }
/* MY-340: .cs-stop is gone from this block -- "Lift needle" moved up into
   .album-spin-row and is styled by .album-action with the rest of that row. */
.cs-save {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid;
  transition: background 0.15s ease;
  color: #fbf7ef;
  background: var(--accent);
  border-color: var(--accent);
}
.cs-save:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.cs-status {
  margin: 8px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-mute);
  min-height: 14px;
}

/* Read-only spin strip (shown on someone else's public vault).
   MY-341: .cs-fields-readonly is gone -- the read-only strip now renders the same
   .cs-notes list as the owner's view, so there is no separate pill row to lay out. */
.cs-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  color: var(--ink);
}
.cs-pill .cs-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cs-pill-note {
  font-style: italic;
  color: var(--ink-soft);
}

/* MY-341: the stack of entries saved during this spin, oldest first, sitting
   above the form that adds the next one. Reuses .cs-pill so a saved entry looks
   the same here as it does on a read-only vault. */
.cs-notes {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-note-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Read-only view chrome: hidden nav links */
body.vv-readonly-view .site-nav a.is-hidden { display: none; }

/* Story section */
.album-story {
  margin: 28px 0 6px;
  padding: 22px 26px;
  background: var(--bg-card);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 6px;
  position: relative;
}
.album-story-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.album-story-body {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.album-story-body p { margin: 0 0 14px; }
.album-story-body p:last-child { margin-bottom: 0; }
.album-story-body p:first-child::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  padding: 4px 10px 0 0;
  color: var(--accent);
}
.album-story-empty .album-story-body { font-style: italic; }

/* Trivia section */
.album-trivia {
  margin: 22px 0 6px;
  padding: 20px 26px;
  background: #f8f3ea;
  border: 1px dashed rgba(26, 23, 20, 0.16);
  border-radius: 6px;
}
.album-trivia-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin: 0 0 12px;
}
.album-trivia-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.album-trivia-list li {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.album-trivia-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 6px;
  background: var(--accent-mustard);
  border-radius: 50%;
}

@media (max-width: 640px) {
  .album-story { padding: 18px; }
  .album-story-body { font-size: 16px; }
  .album-trivia { padding: 16px 18px; }
  .cs-input-narrow { width: 60px; }
}

/* ============================================================
   Enrichment — admin strip + per-album CTA + source footers
   ============================================================ */
.enrich-admin {
  margin: 18px 0 6px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(47, 99, 99, 0.25);
  border-left: 3px solid var(--accent-teal);
  border-radius: 6px;
}
.enrich-admin-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.enrich-admin-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.enrich-admin-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-teal); font-weight: 700;
}
.enrich-admin-count {
  font-size: 14px; color: var(--ink); font-weight: 500;
}
.enrich-admin-fail {
  font-size: 11px; color: var(--accent); font-weight: 600;
  padding: 2px 8px; background: rgba(184,67,31,0.1); border-radius: 3px;
}
.enrich-admin-actions { display: flex; align-items: center; gap: 12px; }
.enrich-progress {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-soft);
}
.enrich-admin-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  background: var(--accent-teal); color: #fbf7ef;
  border: 1px solid var(--accent-teal);
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  transition: background 0.15s ease;
}
.enrich-admin-btn:hover:not(:disabled) { background: #1f4a4a; border-color: #1f4a4a; }
.enrich-admin-btn:disabled { opacity: 0.55; cursor: default; }
.enrich-admin-bar {
  margin-top: 10px; height: 4px;
  background: rgba(47, 99, 99, 0.12); border-radius: 2px; overflow: hidden;
}
.enrich-admin-bar-fill {
  height: 100%; background: var(--accent-teal);
  transition: width 0.4s ease;
}

/* Per-album Generate CTA */
.enrich-cta {
  margin: 24px 0;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px dashed rgba(184, 67, 31, 0.35);
  border-radius: 6px;
  text-align: center;
}
.enrich-cta-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 8px;
}
.enrich-cta-body {
  font-size: 14px; color: var(--ink-soft); margin: 0 auto 14px;
  max-width: 520px; line-height: 1.55;
}
.enrich-cta-error {
  font-size: 12px; color: var(--accent); margin: 0 0 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.enrich-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-mute);
  margin-top: 10px; min-height: 1em;
}

/* Source footer under story / trivia */
.enrich-foot {
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--ink-mute);
  letter-spacing: 0.04em;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.enrich-foot a { color: var(--accent-teal); text-decoration: none; }
.enrich-foot a:hover { text-decoration: underline; }
.enrich-refresh {
  margin-left: 10px;
  background: none; border: 1px solid rgba(184, 67, 31, 0.3);
  color: var(--accent-ink); font-family: inherit; font-size: 10px;
  padding: 2px 8px; border-radius: 3px; cursor: pointer; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.enrich-refresh:hover { background: rgba(184, 67, 31, 0.08); }

/* =========================================================================
   Vault Paths
   ========================================================================= */

/* --- Homepage teaser (mirrors ns-teaser, mustard-leaning accent) --- */
.vp-teaser {
  margin: 28px 0 36px;
  padding: 22px 26px;
  background:
    linear-gradient(180deg, #fbf7ef 0%, #f5ecdc 100%);
  border: 1px solid rgba(184, 138, 31, 0.28);
  border-left: 4px solid var(--accent-mustard);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 8px 22px -16px rgba(26,23,20,0.22);
  position: relative;
}
.vp-teaser-eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.vp-teaser-kicker { color: var(--accent-ink); font-weight: 600; }
.vp-teaser-sep    { color: var(--ink-mute); }
.vp-teaser-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--ink-soft);
}
.vp-teaser-count {
  margin-left: auto;
  padding: 3px 8px;
  background: rgba(184, 138, 31, 0.14);
  color: var(--accent-mustard);
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.vp-teaser-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: start;
}
.vp-teaser-cover {
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 4px; overflow: hidden;
  background: #1a1410; color: rgba(251, 247, 239, 0.45);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 18px -10px rgba(26,23,20,0.35);
}
.vp-teaser-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-teaser-cover .vp-cover-ghost { width: 60%; height: 60%; display: flex; }
.vp-teaser-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-teaser-body { min-width: 0; }
.vp-teaser-context { color: var(--ink-mute); font-size: 13px; margin: 0 0 6px; }
.vp-teaser-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 22px; line-height: 1.18;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 6px;
}
.vp-teaser-title a { color: inherit; text-decoration: none; }
.vp-teaser-title a:hover { color: var(--accent-ink); }
.vp-teaser-artist {
  font-weight: 400; font-size: 16px;
  color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-teaser-yr { color: var(--ink-mute); font-style: normal; }
.vp-teaser-reason {
  margin: 4px 0 14px; color: var(--ink-soft);
  font-size: 14px; line-height: 1.5; max-width: 64ch;
}
.vp-teaser-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vp-teaser { transition: opacity 180ms ease, transform 180ms ease; }
.vp-teaser-shuffling { opacity: 0.35; transform: scale(0.995); }
.vp-teaser-loading, .vp-teaser-error .vp-teaser-body {
  color: var(--ink-mute); font-style: italic;
}
.vp-teaser-empty .vp-teaser-body { color: var(--ink-soft); }

/* --- Seedling state (Vault Paths, pre-threshold) --- */
/* Shown when a user hasn't logged enough listening sessions yet. The teaser
   variant is a slimmed-down version of vp-teaser; the page variant
   (vp-seedling) is a full-bleed card that replaces the workbench. */
.vp-teaser-seedling .vp-teaser-body p {
  color: var(--ink-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 6px;
}
.vp-teaser-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 8px 0 0;
}

.vp-seedling {
  margin: 12px 0 48px;
  display: flex;
  justify-content: flex-start;
}
.vp-seedling-card {
  max-width: 640px;
  width: 100%;
  padding: 36px 38px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f3e9d6 100%);
  border: 1px solid rgba(184, 138, 31, 0.28);
  border-left: 4px solid var(--accent-mustard);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(26,23,20,0.04), 0 12px 32px -18px rgba(26,23,20,0.28);
}
.vp-seedling-kicker {
  color: var(--accent-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.vp-seedling-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.vp-seedling-lede {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 56ch;
}
.vp-seedling-progress {
  height: 8px;
  background: rgba(26, 20, 16, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.vp-seedling-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-mustard) 0%, var(--accent-ink) 100%);
  border-radius: 999px;
  transition: width 240ms ease;
}
.vp-seedling-meta {
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.vp-seedling-meta strong { color: var(--accent-ink); font-weight: 700; }
.vp-seedling-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
@media (max-width: 640px) {
  .vp-seedling-card { padding: 26px 22px; }
  .vp-seedling-title { font-size: 24px; }
}

/* --- Page hero --- */
.vp-hero {
  margin: 8px 0 24px;
  max-width: 760px;
}
.vp-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 48px; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 4px 0 12px;
}
.vp-hero-lede {
  color: var(--ink-soft); font-size: 15px;
  max-width: 60ch; line-height: 1.55;
}

/* --- Generator bar --- */
.vp-genbar {
  margin: 0 0 22px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.vp-genbar-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.vp-genbar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 18px; color: var(--ink);
  margin: 0;
}
.vp-genbar-sub { color: var(--ink-mute); font-size: 13px; font-style: italic; }
.vp-genbar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vp-chip {
  padding: 6px 12px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.vp-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.vp-chip.active {
  background: var(--accent);
  color: #fbf7ef;
  border-color: var(--accent);
}
.vp-genbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vp-genbar-limit {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); font-size: 13px;
}
.vp-genbar-limit input {
  width: 64px; padding: 6px 8px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px; background: #fbf7ef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--ink);
}
.vp-genbar-limit input:focus { outline: none; border-color: var(--accent); }

/* --- MY-180 Slice 3: Custom Arc Composer --- */
.vp-cac-slot { display: block; margin: 0 0 22px; }
.vp-cac {
  padding: 20px 22px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
}
.vp-cac-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vp-cac-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600; font-size: 18px; color: var(--ink);
  margin: 0;
}
.vp-cac-sub { color: var(--ink-mute); font-size: 13px; font-style: italic; }
.vp-cac-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 6px;
}
.vp-cac-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  background: #fbf7ef;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5;
  resize: vertical;
  min-height: 68px;
}
.vp-cac-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,26,26,0.10); }
.vp-cac-refinements { min-height: 52px; margin-top: 4px; }
.vp-cac-counter-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 6px 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.vp-cac-count { color: var(--ink-mute); }
.vp-cac-count.is-under { color: var(--ink-mute); }
.vp-cac-count.is-over { color: #a12727; font-weight: 600; }
.vp-cac-hint { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; }
.vp-cac-hint.is-over { color: #a12727; }
.vp-cac-hint-text { margin: 2px 0 8px; font-size: 13px; line-height: 1.5; }
.vp-cac-error {
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(161,39,39,0.14);
  border-left: 4px solid #a12727;
  border-radius: 3px;
  color: #6a1919;
  font-size: 13px; line-height: 1.5;
}
.vp-cac-thin-banner {
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(209,153,0,0.22);
  border-left: 4px solid #d19900;
  border-radius: 3px;
  color: #5a4200;
  font-size: 13px; line-height: 1.5;
}
.vp-cac-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 12px;
}
.vp-cac-preview {
  margin: 14px 0 8px;
  padding: 14px 16px;
  background: rgba(90,26,26,0.06);
  border: 1px solid rgba(90,26,26,0.18);
  border-radius: 4px;
}
.vp-cac-preview-head {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 10px;
}
.vp-cac-preview-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.vp-cac-preview-stats {
  color: var(--ink-soft); font-size: 13px; font-style: italic;
}
.vp-cac-preview-note { margin: 0 0 10px; font-size: 12px; line-height: 1.5; }
.vp-cac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vp-cac-chip {
  padding: 4px 10px;
  background: #fbf7ef;
  color: var(--ink-soft);
  border: 1px solid rgba(26,23,20,0.14);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
}
.vp-cac-nochips { font-size: 12px; margin: 0 0 12px; }
.vp-cac-thumbs {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  margin-bottom: 12px;
}
.vp-cac-thumb {
  margin: 0;
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
}
.vp-cac-thumb-placeholder {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  background: rgba(26,23,20,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 22px;
}
.vp-cac-thumb-owned {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(45,110,60,0.92); color: #fbf7ef;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.vp-cac-thumb-cap {
  display: flex; flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; line-height: 1.3;
}
.vp-cac-thumb-artist { color: var(--ink-soft); font-weight: 600; }
.vp-cac-thumb-title { color: var(--ink-mute); font-style: italic; }
.vp-cac-thumb-year { color: var(--ink-mute); font-size: 10px; }
.vp-cac-insufficient .vp-cac-empty {
  padding: 8px 0 4px;
}
.vp-cac-empty-lede {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  margin: 0 0 6px;
}
.vp-cac-empty-hint { font-size: 13px; margin: 0 0 16px; color: var(--ink-soft); }
.vp-cac-empty-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.vp-cac-empty-thesis summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: 6px 0; }
.vp-cac-empty-quote {
  margin: 8px 0 0; padding: 8px 12px;
  border-left: 2px solid rgba(26,23,20,0.15);
  color: var(--ink-soft); font-size: 13px; font-style: italic;
}
/* Composer-scoped button state fixes.
   Site-wide .vp-btn:disabled uses opacity: 0.55 which reads as "live" on
   filled primary buttons and as "identical to enabled" on ghost buttons.
   Override with a stronger disabled treatment INSIDE the composer only. */
.vp-cac .vp-btn-primary:disabled,
.vp-cac-actions .vp-btn-primary:disabled,
.vp-cac-empty-actions .vp-btn-primary:disabled {
  background: #d6cfc4;
  border-color: #d6cfc4;
  color: #8b8278;
  opacity: 1;
  cursor: not-allowed;
}
.vp-cac .vp-btn-ghost:disabled,
.vp-cac-actions .vp-btn-ghost:disabled {
  color: #b5aea1;
  border-color: rgba(26,23,20,0.08);
  background: transparent;
  opacity: 1;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .vp-cac { padding: 16px 14px; }
  .vp-cac-thumbs { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
  .vp-cac-actions { flex-direction: column; align-items: stretch; }
  .vp-cac-actions .vp-btn { width: 100%; text-align: center; justify-content: center; }
  .vp-cac-empty-actions .vp-btn { width: 100%; text-align: center; justify-content: center; }
}

/* --- Tabs --- */
.vp-tabs {
  display: flex; gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid rgba(26,23,20,0.12);
}
.vp-tab {
  padding: 10px 16px;
  background: transparent; border: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.vp-tab:hover { color: var(--accent-ink); }
.vp-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* --- List controls + score guide (Cycle 7 navigation consolidation) --- */
.vp-list-tools {
  margin: -4px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
  background: rgba(251,247,239,0.72);
}
.vp-list-tools-main {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.vp-list-search {
  display: flex;
  flex: 1 1 320px;
  max-width: 560px;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vp-list-search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--ink);
  font: 400 13px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.vp-list-search input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.vp-list-filters {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.vp-list-filter {
  padding: 7px 11px;
  border: 1px solid rgba(26,23,20,0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.vp-list-filter:hover { border-color: var(--accent); color: var(--accent-ink); }
.vp-list-filter.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fbf7ef;
}
.vp-score-guide { margin-top: 10px; }
.vp-score-guide summary {
  width: max-content;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.vp-score-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.vp-score-guide-grid p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 9px 10px;
  border-left: 2px solid var(--accent-mustard);
  background: rgba(26,23,20,0.035);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.4;
}
.vp-score-guide-grid strong { color: var(--ink); font-size: 12px; }

/* --- List + cards --- */
.vp-list { display: flex; flex-direction: column; gap: 14px; }
.vp-loading, .vp-empty {
  padding: 32px 0; text-align: center; font-style: italic;
}
.vp-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid rgba(26,23,20,0.10);
  border-left: 3px solid rgba(26,23,20,0.18);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vp-card:hover {
  border-color: rgba(184, 67, 31, 0.30);
  box-shadow: 0 6px 16px -12px rgba(26,23,20,0.20);
}
.vp-card-pinned {
  border-left-color: var(--accent-moss, #4a7a47);
  background: linear-gradient(180deg, var(--bg-card) 0%, #f3f6ee 100%);
}
.vp-card-resolved { border-left-color: var(--accent-teal); background: linear-gradient(180deg, #fbf7ef 0%, #f1f5f3 100%); }
.vp-card-cover {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  background: #1a1410; color: rgba(251, 247, 239, 0.45);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px -10px rgba(26,23,20,0.32);
}
.vp-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-card-cover .vp-cover-ghost { width: 56%; height: 56%; display: flex; }
.vp-card-cover .vp-cover-ghost svg { width: 100%; height: 100%; }
.vp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vp-card-head { display: flex; flex-direction: column; gap: 8px; }
.vp-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 18px;
  line-height: 1.22; letter-spacing: -0.005em;
  color: var(--ink); margin: 0;
}
.vp-card-title a { color: inherit; text-decoration: none; }
.vp-card-title a:hover { color: var(--accent-ink); }
/* Title-as-button (unresolved paths): inherits typographic styling from .vp-card-title */
.vp-card-title-btn {
  display: inline; appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left;
  cursor: pointer; line-height: inherit;
}
.vp-card-title-btn:hover { color: var(--accent-ink); }
.vp-card-title-btn:focus-visible { outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 3px; border-radius: 2px; }
.vp-card-chev {
  display: inline-block; margin-left: 6px;
  font-weight: 600; color: var(--ink-mute);
  transition: transform 160ms ease;
}
.vp-card-title-btn[aria-expanded="true"] .vp-card-chev { transform: rotate(90deg); color: var(--accent-ink); }
/* Expand button in the card footer */
.vp-btn-expand .vp-expand-icon {
  display: inline-block; transition: transform 160ms ease;
}
.vp-btn-expand[aria-expanded="true"] .vp-expand-icon { transform: rotate(90deg); }
/* Collapsed state — the [hidden] attribute already hides it, but keep this for clarity */
.vp-pressing-collapsed[hidden] { display: none; }
/* Open state — a subtle fade-in so the drawer doesn't pop */
.vp-pressing-open { animation: vp-pressing-fade 180ms ease-out both; }
@keyframes vp-pressing-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vp-card-artist {
  font-weight: 400; font-size: 14px;
  color: var(--ink-soft); font-style: italic; margin-left: 4px;
}
.vp-card-yr { color: var(--ink-mute); font-style: normal; }
.vp-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vp-card-reason {
  margin: 0; color: var(--ink-soft);
  font-size: 13.5px; line-height: 1.5;
}

/* ============================================================ */
/* Vault Paths v2 evidence chips. Small pills under the reason  */
/* line, one per signal that fired. Primary label is ink; the   */
/* detail clause is muted. Discogs-verified chip gets a tasteful*/
/* green accent so it reads as the firewall it is.              */
/* ============================================================ */
.vp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 2px;
}
.vp-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 11.5px; line-height: 1.35;
  color: var(--ink);
  max-width: 100%;
}
.vp-chip-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vp-chip-detail {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 11px;
}
.vp-chip-discogs_verified {
  background: rgba(46, 95, 71, 0.07);
  border-color: rgba(46, 95, 71, 0.22);
}
.vp-chip-discogs_verified .vp-chip-label { color: var(--accent-green, #2e5f47); }
.vp-chip-top_artist, .vp-chip-family_match {
  background: rgba(46, 95, 71, 0.05);
  border-color: rgba(46, 95, 71, 0.16);
}
.vp-chip-producer_match {
  background: rgba(184, 138, 31, 0.07);
  border-color: rgba(184, 138, 31, 0.22);
}
.vp-chip-recent_spin_family, .vp-chip-recent_spin_decade {
  background: rgba(120, 60, 40, 0.05);
  border-color: rgba(120, 60, 40, 0.16);
}
.vp-chip-findable {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}

/* Banner above the path list when experimental (low-confidence) */
/* picks are filtered out. Quiet, single-line, with a link button.*/
.vp-exp-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: rgba(46, 95, 71, 0.05);
  border: 1px solid rgba(46, 95, 71, 0.18);
  border-radius: 6px;
  font-size: 12.5px; color: var(--ink-soft);
}
.vp-exp-banner-on {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}
.vp-exp-banner-text strong { color: var(--ink); font-weight: 700; }
.vp-link-btn {
  background: none; border: 0; padding: 0;
  color: var(--accent-green, #2e5f47);
  font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.vp-link-btn:hover { color: var(--ink); }

/* ============================================================ */
/* Vault Paths v2 - Phase 1: Collection Arcs panel.             */
/* Sits above the Insights panel. Each arc is an expandable     */
/* card with progress bar + ordered step list. Steps reuse the  */
/* same evidence-chip treatment as regular path cards.          */
/* ============================================================ */
.vp-arcs-slot { display: block; }
.vp-arcs-panel {
  margin: 0 0 18px;
  padding: 16px 18px 14px;
  background: rgba(184, 138, 31, 0.05);
  border: 1px solid rgba(184, 138, 31, 0.22);
  border-radius: 8px;
}
.vp-arcs-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.vp-arcs-kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-mustard, #b88a1f); font-weight: 700;
  margin-bottom: 4px;
}
.vp-arcs-title {
  margin: 0; font-size: 18px; line-height: 1.25;
  color: var(--ink); font-weight: 700;
  font-family: var(--font-display, inherit);
}
.vp-arcs-loading { padding: 12px 0; font-size: 13px; }
.vp-arc-stack { display: flex; flex-direction: column; gap: 12px; }
.vp-arc-card {
  position: relative;
  padding: 12px 14px 14px 16px;
  background: var(--bg, #fff);
  border: 1px solid rgba(0,0,0,0.10);
  border-left: 3px solid var(--accent-mustard, #b88a1f);
  border-radius: 6px;
}
.vp-arc-head {
  display: flex; align-items: center; gap: 12px;
  padding-right: 70px; /* room for the absolute-positioned Archive button */
  position: relative;
}
.vp-arc-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute, #888);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vp-arc-dismiss:hover,
.vp-arc-dismiss:focus-visible {
  background: rgba(90, 26, 26, 0.08);
  color: var(--accent-maroon, #5a1a1a);
  border-color: rgba(90, 26, 26, 0.2);
  outline: none;
}
.vp-arc-toggle {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0; margin: 0;
  text-align: left; cursor: pointer; color: inherit;
  font: inherit;
  min-width: 0;
}
.vp-arc-caret {
  flex: 0 0 auto;
  color: var(--accent-mustard, #b88a1f);
  font-size: 14px;
  width: 14px;
}
.vp-arc-head-text {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.vp-arc-kind {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute, #888);
}
.vp-arc-title {
  font-size: 15px; line-height: 1.3;
  color: var(--ink); font-weight: 700;
  font-family: var(--font-display, inherit);
}
.vp-arc-subtitle {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4;
}
.vp-arc-progress-wrap {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.vp-arc-progress {
  position: relative;
  width: 70px; height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.vp-arc-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent-mustard, #b88a1f);
  border-radius: 3px;
  transition: width 200ms ease;
}
.vp-arc-progress-n {
  font-size: 11.5px; color: var(--ink-mute, #888);
  font-variant-numeric: tabular-nums;
}
.vp-arc-retire {
  margin: 14px 0 0 26px;
  padding: 10px 0 0;
  border-top: 1px dashed rgba(0,0,0,0.10);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-mute, #888);
}
.vp-arc-retire-label {
  color: var(--ink-soft);
  font-style: italic;
}
.vp-arc-retire-opt {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,0.18);
}
.vp-arc-retire-opt:hover,
.vp-arc-retire-opt:focus-visible {
  color: var(--accent, #2e5f47);
  text-decoration-color: currentColor;
  outline: none;
}
.vp-arc-retire-opt-mute {
  color: var(--ink-mute, #999);
}
.vp-arc-retire-opt-mute:hover,
.vp-arc-retire-opt-mute:focus-visible {
  color: #8a4a3a;
  text-decoration-color: currentColor;
}
.vp-arc-retire-sep {
  color: rgba(0,0,0,0.20);
}
.vp-arc-premise {
  margin: 8px 0 0 26px;
  color: var(--ink-soft);
  font-size: 13px; line-height: 1.55;
  font-style: italic;
}
.vp-arc-steps {
  margin: 12px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.vp-arc-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.015);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 5px;
}
.vp-arc-step.is-next {
  background: rgba(184, 138, 31, 0.08);
  border-color: rgba(184, 138, 31, 0.25);
}
.vp-arc-step.is-done {
  opacity: 0.6;
  background: rgba(46, 95, 71, 0.05);
  border-color: rgba(46, 95, 71, 0.18);
}
.vp-arc-step-num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-mustard, #b88a1f);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vp-arc-step.is-done .vp-arc-step-num {
  background: var(--accent-green, #2e5f47);
}
.vp-arc-step-body { flex: 1 1 auto; min-width: 0; }
.vp-arc-step-title {
  margin: 0 0 3px;
  font-size: 14px; line-height: 1.35;
  color: var(--ink); font-weight: 600;
}
.vp-arc-step-artist { color: var(--ink); }
.vp-arc-step-sep { color: var(--ink-mute, #b0a89e); margin: 0 2px; font-weight: 400; }
.vp-arc-step-year {
  font-weight: 400; color: var(--ink-mute, #888);
  font-size: 12.5px;
}
.vp-arc-step-role {
  margin: 0 0 6px; color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.45;
  font-style: italic;
}
/* Rich explanation block. Default closed - click "Why this fits" to expand. */
.vp-arc-step-explain {
  margin: 0 0 10px;
  border-top: 1px dotted var(--rule-soft, #d8cfc4);
  padding-top: 6px;
}
.vp-arc-step-explain-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6258);
  padding: 2px 0;
  user-select: none;
}
.vp-arc-step-explain-summary::-webkit-details-marker { display: none; }
.vp-arc-step-explain-summary:hover { color: var(--ink, #2a241d); }
.vp-arc-step-explain-caret {
  display: inline-block;
  transition: transform 0.18s ease;
  font-size: 11px;
  opacity: 0.7;
}
.vp-arc-step-explain[open] > .vp-arc-step-explain-summary .vp-arc-step-explain-caret {
  transform: rotate(180deg);
}
.vp-arc-step-explain-body {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 2px;
  border-left: 2px solid var(--accent-green-soft, #cfd8d2);
  padding: 4px 0 4px 10px;
}
.vp-arc-step-explain-section { margin: 0; }
.vp-arc-step-explain-heading {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6258);
}
.vp-arc-step-explain-section p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink, #2a241d);
}
.vp-arc-step-foot {
  margin-top: 6px;
  display: flex; align-items: center; gap: 10px;
}
.vp-arc-bought-link {
  font-size: 12.5px;
  color: var(--accent-green, #2e5f47);
  font-weight: 600;
  text-decoration: none;
}
.vp-arc-bought-link:hover { text-decoration: underline; }
.vp-arc-bought-done {
  font-size: 12px;
  color: var(--accent-green, #2e5f47);
  font-weight: 600;
}
.vp-arc-step-pin {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft, #5a564a);
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.vp-arc-step-pin .vp-pin-icon { font-size: 13px; line-height: 1; }
.vp-arc-step-pin.is-pinned { color: var(--accent-maroon, #7a2533); }
.vp-arc-step-pin:hover:not(:disabled) { text-decoration: underline; }
.vp-arc-step-pin:disabled { opacity: 0.65; cursor: progress; }

/* "Not for me" link on each non-acquired arc step. Sits next to the pin
   button, styled as a quieter secondary link so it doesn't compete. */
.vp-arc-step-replace {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mute, #807a6b);
  margin-left: 6px;
}
.vp-arc-step-replace:hover:not(:disabled) { color: var(--ink-soft, #5a564a); text-decoration: underline; }
.vp-arc-step-replace:disabled { opacity: 0.7; cursor: progress; }
.vp-arc-step-replace.vp-arc-step-replace-error { color: var(--accent-maroon, #7a2533); }

/* ============================================================ */
/* Vault Paths - Retired Arcs section.                          */
/* Collapsed <details> at the bottom of the Vault Paths view.   */
/* Quiet, muted treatment -- these are parked, not highlighted. */
/* ============================================================ */
.vp-retired-arcs {
  margin-top: 18px;
  border-top: 1px solid var(--border, #e8e0d8);
  padding-top: 14px;
}
.vp-retired-arcs-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft, #5a564a);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vp-retired-arcs-summary::-webkit-details-marker { display: none; }
.vp-retired-arcs-summary::marker { display: none; }
.vp-retired-arcs-summary:hover { color: var(--ink, #2a241d); }
.vp-retired-arcs-caret {
  display: inline-block;
  transition: transform 0.18s ease;
  font-size: 10px;
  opacity: 0.7;
}
.vp-retired-arcs[open] > .vp-retired-arcs-summary .vp-retired-arcs-caret {
  transform: rotate(180deg);
}
.vp-retired-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(130px, max-content));
  gap: 10px;
  margin: 12px 0 10px;
}
.vp-retired-tools label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--ink-mute, #807a6b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vp-retired-tools input,
.vp-retired-tools select {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--border, #e0d7cb);
  border-radius: 5px;
  background: var(--bg-card, #fbf7ef);
  color: var(--ink, #2a241d);
  font: 400 13px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.vp-retired-tools input:focus,
.vp-retired-tools select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #7a2533) 35%, transparent);
  outline-offset: 1px;
  border-color: var(--accent, #7a2533);
}
.vp-retired-empty {
  margin: 12px 0 0;
  color: var(--ink-mute, #807a6b);
  font-size: 13px;
  font-style: italic;
}
.vp-retired-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vp-retired-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-muted, #f6f2ec);
  border-radius: 7px;
  border: 1px solid var(--border, #e8e0d8);
}
/* The row's flex display overrides the browser's default [hidden] rule unless
   we restate it at author priority. Keep filtered retired arcs out of both the
   visual list and the accessibility tree. */
.vp-retired-row[hidden] { display: none; }
.vp-retired-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vp-retired-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft, #5a564a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vp-retired-meta {
  font-size: 12px;
  color: var(--ink-mute, #9a9080);
  font-style: italic;
}
.vp-arc-reopen {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-green, #2e5f47);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.vp-arc-reopen:hover:not(:disabled) { text-decoration: underline; }
.vp-arc-reopen:disabled { opacity: 0.55; cursor: progress; }

@media (max-width: 640px) {
  .vp-retired-tools { grid-template-columns: 1fr; }
  .vp-retired-row { align-items: center; }
}

/* ============================================================ */
/* Vault Paths v2 - Phase 2: Collection Insights panel.         */
/* Sits above the path list. Each card is a single detector hit */
/* with severity dots, kind label, title, summary, dismiss btn. */
/* Kind drives a 2px left border accent so the eye can scan the */
/* mix at a glance without each card shouting for attention.    */
/* ============================================================ */
.vp-gaps-slot { display: block; }
.vp-gaps-panel {
  margin: 0 0 18px;
  padding: 16px 18px 14px;
  background: rgba(46, 95, 71, 0.04);
  border: 1px solid rgba(46, 95, 71, 0.16);
  border-radius: 8px;
}
.vp-gaps-panel.vp-gaps-empty {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.10);
}
.vp-gaps-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.vp-gaps-kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-green, #2e5f47); font-weight: 700;
  margin-bottom: 4px;
}
.vp-gaps-title {
  margin: 0; font-size: 18px; line-height: 1.25;
  color: var(--ink); font-weight: 700;
  font-family: var(--font-display, inherit);
}
.vp-gaps-lede {
  margin: 6px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5;
}
.vp-gap-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vp-gap-card {
  position: relative;
  padding: 11px 13px 12px 15px;
  background: var(--bg, #fff);
  border: 1px solid rgba(0,0,0,0.10);
  border-left: 3px solid rgba(0,0,0,0.20);
  border-radius: 5px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.vp-gap-card.is-dismissed {
  opacity: 0.65;
  background: rgba(0,0,0,0.02);
}
.vp-gap-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.vp-gap-spacer { flex: 1 1 auto; }
.vp-gap-severity {
  display: inline-flex; align-items: center; gap: 3px;
}
.vp-gap-dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
}
.vp-gap-dot.on { background: var(--accent-green, #2e5f47); }
.vp-gap-kind {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute, #888);
}
.vp-gap-updated {
  padding: 3px 7px;
  border: 1px solid rgba(46,95,71,0.28);
  border-radius: 999px;
  background: rgba(46,95,71,0.10);
  color: var(--accent-green, #2e5f47);
  font: 700 9.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vp-gap-title {
  margin: 0 0 4px; font-size: 14.5px; line-height: 1.35;
  color: var(--ink); font-weight: 600;
}
.vp-gap-summary {
  margin: 0; color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.5;
}
.vp-gap-dismiss-btn { font-size: 11.5px; }
.vp-gap-foot { margin-top: 10px; }
.vp-gap-walk-btn {
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.vp-gap-walk-btn:disabled { opacity: 0.85; cursor: progress; }

/* Walk-this-path busy state: spinner + animated dots inside the button, plus an
   expectation-setter hint below it. Generating a fresh arc takes 30-60 seconds
   (AI curation + Discogs verification), so the visual cue + copy keeps the user
   from thinking the click hung. */
.vp-gap-walk-btn .vp-walk-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  vertical-align: -2px;
  animation: vpWalkSpin 0.9s linear infinite;
}
.vp-gap-walk-btn .vp-walk-busy-label {
  display: inline-block;
  vertical-align: middle;
}
.vp-gap-walk-btn .vp-walk-dots {
  display: inline-block;
  margin-left: 1px;
  min-width: 14px;
  text-align: left;
}
.vp-gap-walk-btn .vp-walk-dots > span {
  display: inline-block;
  opacity: 0.25;
  animation: vpWalkDot 1.4s ease-in-out infinite;
}
.vp-gap-walk-btn .vp-walk-dots > span:nth-child(2) { animation-delay: 0.2s; }
.vp-gap-walk-btn .vp-walk-dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes vpWalkSpin {
  to { transform: rotate(360deg); }
}
@keyframes vpWalkDot {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}
.vp-gap-walk-hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #6b5a4a;
  font-style: italic;
  max-width: 38em;
}
@media (prefers-reduced-motion: reduce) {
  .vp-gap-walk-btn .vp-walk-spinner { animation: none; border-top-color: currentColor; opacity: 0.5; }
  .vp-gap-walk-btn .vp-walk-dots > span { animation: none; opacity: 0.6; }
}
.vp-gap-show-dismissed {
  display: inline-block; margin-top: 12px;
  font-size: 12.5px;
}
.vp-gap-dismissed-wrap { margin-top: 14px; }
.vp-gap-dismissed-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.vp-gap-dismissed-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute, #888); font-weight: 700;
}
.vp-gap-grid-dismissed { opacity: 0.95; }
.vp-gap-empty { font-size: 13px; }

/* Kind-coded left-border accents. Mustard, green, rust, ink. */
.vp-gap-card.vp-gap-era_gap             { border-left-color: var(--accent-mustard, #b88a1f); }
.vp-gap-card.vp-gap-label_completion    { border-left-color: var(--accent-green,   #2e5f47); }
.vp-gap-card.vp-gap-producer_clustering { border-left-color: var(--accent-rust,    #7a3a22); }
.vp-gap-card.vp-gap-decade_balance      { border-left-color: var(--ink,            #222);    }
.vp-gap-card.vp-gap-solo_offshoots      { border-left-color: var(--accent-green,   #2e5f47); }

.vp-gaps-loading { padding: 12px 0; font-size: 13px; }

.vp-card-notes {
  margin: 0; padding: 8px 12px;
  background: rgba(184, 138, 31, 0.08);
  border-left: 2px solid var(--accent-mustard);
  border-radius: 0 4px 4px 0;
  color: var(--ink-soft); font-size: 13px;
}
.vp-card-notes-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-mustard);
  font-weight: 700; margin-right: 6px;
}
.vp-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.vp-card-backups {
  font-size: 12.5px; color: var(--ink-soft);
}
.vp-card-backups summary {
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-mute);
  padding: 4px 0; outline: none;
}
.vp-card-backups summary:hover { color: var(--accent-ink); }
.vp-card-backups[open] summary { color: var(--accent-ink); margin-bottom: 6px; }

/* --- Version blocks --- */
.vp-version {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
}
.vp-version-preferred {
  background: rgba(47, 99, 99, 0.07);
  border: 1px solid rgba(47, 99, 99, 0.22);
}
.vp-version-backup {
  background: rgba(26,23,20,0.03);
  border: 1px dashed rgba(26,23,20,0.14);
  margin-top: 6px;
}
.vp-version-head {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.vp-version-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700;
  color: var(--accent-teal);
}
.vp-version-backup .vp-version-label { color: var(--ink-mute); }
.vp-version-why {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic; font-size: 12.5px;
  color: var(--ink-soft);
}
.vp-version-lines {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--ink); font-size: 13px;
}
.vp-version-lines span { white-space: nowrap; }
.vp-version-lines span:not(:last-child)::after {
  content: '·'; margin-left: 10px; color: var(--ink-mute);
}
.vp-version-avoid {
  margin: 6px 0 0; padding: 4px 8px;
  background: rgba(184, 67, 31, 0.07);
  border-left: 2px solid var(--accent);
  color: var(--ink-soft); font-size: 12px;
  border-radius: 0 3px 3px 0;
}

/* --- Pills (source + status) --- */
.vp-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vp-pill-rust    { background: rgba(184, 67, 31, 0.10); color: var(--accent-ink);    border-color: rgba(184, 67, 31, 0.28); }
.vp-pill-teal    { background: rgba(47, 99, 99, 0.10);  color: var(--accent-teal);   border-color: rgba(47, 99, 99, 0.28); }
.vp-pill-mustard { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard); border-color: rgba(184, 138, 31, 0.32); }
.vp-pill-ink     { background: rgba(26, 23, 20, 0.06);  color: var(--ink-soft);      border-color: rgba(26, 23, 20, 0.16); }

/* --- Priority bar --- */
.vp-prio {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--ink-mute);
}
.vp-prio-bar {
  display: inline-block; width: 56px; height: 5px;
  background: rgba(26,23,20,0.10);
  border-radius: 999px; overflow: hidden;
}
.vp-prio-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-mustard), var(--accent));
  border-radius: 999px;
}
.vp-prio-n { font-weight: 700; color: var(--ink-soft); letter-spacing: 0.05em; }

.vp-pressing-empty {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--accent-mustard);
  background: rgba(184, 138, 31, 0.07);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .vp-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .vp-tab {
    flex: 1 0 auto;
    min-width: max-content;
    padding-inline: 14px;
  }
  .vp-list-tools-main {
    align-items: stretch;
    flex-direction: column;
  }
  .vp-list-search {
    flex-basis: auto;
    max-width: none;
  }
  .vp-list-filters {
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .vp-list-filter { flex: 0 0 auto; }
  .vp-score-guide-grid { grid-template-columns: 1fr; }
  .vp-genbar { padding: 16px 14px; }
  .vp-genbar-actions { align-items: stretch; flex-direction: column; }
  .vp-genbar-limit { justify-content: space-between; }
  .vp-genbar-actions .vp-btn { justify-content: center; width: 100%; }
}

/* --- Buttons (parallel to ns-btn for consistency) --- */
.vp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.vp-btn:disabled { opacity: 0.55; cursor: wait; }
.vp-btn-primary {
  background: var(--accent); color: #fbf7ef; border-color: var(--accent);
}
.vp-btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.vp-btn-ghost {
  background: transparent; color: var(--ink-soft); border-color: rgba(26,23,20,0.16);
}
.vp-btn-ghost:hover { color: var(--accent-ink); border-color: var(--accent); background: rgba(184, 67, 31, 0.06); }

/* "I bought this" — primary positive action on Vault Path cards.
   Muted moss green echoes the pinned state but reads as a confirmed acquisition. */
.vp-btn-bought {
  background: var(--accent-moss);
  color: #fbfaf4;
  border-color: var(--accent-moss-deep);
  font-weight: 600;
}
.vp-btn-bought:hover {
  background: var(--accent-moss-deep);
  border-color: var(--accent-moss-deep);
  color: #fbfaf4;
}
.vp-bought-icon {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.5px);
}

/* Manual Add Album banner shown when the user arrived from a Vault Path "I bought this" button. */
.from-path-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  margin: 0 0 16px;
  background: rgba(95, 122, 88, 0.10);
  border-left: 3px solid var(--accent-moss-deep);
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.from-path-banner-body { flex: 1 1 auto; }
.from-path-banner-body strong { color: var(--accent-moss-deep); margin-right: 4px; }
.from-path-banner-body em { font-style: italic; }
.from-path-banner-link {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 2px;
}
.from-path-banner-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .from-path-banner { flex-direction: column; gap: 8px; }
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .vp-teaser-row { grid-template-columns: 64px 1fr; gap: 14px; }
  .vp-teaser-cover { width: 64px; height: 64px; }
  .vp-teaser-title { font-size: 18px; }
  .vp-teaser-artist { font-size: 14px; }
  .vp-hero-title { font-size: 34px; }
  .vp-card { grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 16px; }
  .vp-card-cover { width: 64px; height: 64px; }
  .vp-card-title { font-size: 16px; }
  .vp-tabs { overflow-x: auto; }
  .vp-tab { white-space: nowrap; }
}

/* =========================================================================
   Vault Paths — Pinned state (green) + Pressing Notes drawer
   ========================================================================= */

/* Pin button — pinned variant
   Muted forest green: tasteful, editorial, never neon. */
.vp-btn-pinned {
  background: var(--accent-moss);
  color: #fbfaf4;
  border-color: var(--accent-moss-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vp-btn-pinned:hover:not(:disabled) {
  background: var(--accent-moss-deep);
  border-color: var(--accent-moss-deep);
  color: #fbfaf4;
}
.vp-btn-pinned:disabled {
  opacity: 0.85;
  cursor: progress;
}
.vp-pin-icon {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  margin-right: 2px;
  transform: translateY(-0.5px);
}

/* "Actively hunting" pill in the meta row */
.vp-pill-hunting {
  background: rgba(74, 122, 71, 0.10);
  color: var(--accent-moss-ink);
  border-color: rgba(74, 122, 71, 0.32);
  gap: 6px;
}
.vp-hunting-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-moss);
  box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45);
  animation: vp-hunt-pulse 2.2s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes vp-hunt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 122, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 122, 71, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-hunting-dot { animation: none; }
}

/* Pressing Notes drawer — inline expandable section
   Lives between card body content and .vp-card-actions footer.
   Light moss tint, never gamified. */
.vp-pressing {
  margin-top: 10px;
  padding: 14px 16px 16px;
  background: rgba(74, 122, 71, 0.06);
  border: 1px solid rgba(74, 122, 71, 0.18);
  border-radius: 6px;
}
.vp-pressing-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}
.vp-pressing-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-moss-ink);
  font-weight: 700;
}
.vp-pressing-sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Tag row */
.vp-pressing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.vp-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  background: rgba(26,23,20,0.04);
  color: var(--ink-soft);
}
.vp-tag-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.75;
}
.vp-tag-avail-easy     { background: rgba(74, 122, 71, 0.12);  color: var(--accent-moss-ink);    border-color: rgba(74, 122, 71, 0.32); }
.vp-tag-avail-moderate { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard);     border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-avail-hard     { background: rgba(184, 67, 31, 0.10);  color: var(--accent-ink);         border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-price-budget   { background: rgba(47, 99, 99, 0.10);   color: var(--accent-teal);        border-color: rgba(47, 99, 99, 0.28); }
.vp-tag-price-mid      { background: rgba(184, 138, 31, 0.12); color: var(--accent-mustard);     border-color: rgba(184, 138, 31, 0.32); }
.vp-tag-price-premium  { background: rgba(184, 67, 31, 0.10);  color: var(--accent-ink);         border-color: rgba(184, 67, 31, 0.28); }
.vp-tag-source         { background: rgba(26, 23, 20, 0.05);   color: var(--ink-mute);           border-color: rgba(26, 23, 20, 0.10); }

/* Field grid — 2 col on desktop, 1 col on mobile */
.vp-pressing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  margin: 0;
}
.vp-pressing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 4px 0;
  border-top: 1px solid rgba(74, 122, 71, 0.14);
}
.vp-pressing-row:first-child,
.vp-pressing-row:nth-child(2) {
  border-top: 0;
  padding-top: 0;
}
.vp-pressing-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 600;
  margin: 0;
}
.vp-pressing-val {
  font-size: 13.5px;
  color: var(--ink);
  margin: 1px 0 0;
  line-height: 1.4;
}
.vp-pressing-note {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 122, 71, 0.18);
}
.vp-pressing-loading {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--ink-mute);
  margin: 4px 0 0;
}

/* Mobile: stack grid + tighten padding */
@media (max-width: 720px) {
  .vp-pressing {
    padding: 12px 14px 14px;
  }
  .vp-pressing-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .vp-pressing-row {
    border-top: 1px solid rgba(74, 122, 71, 0.14);
    padding: 6px 0;
  }
  .vp-pressing-row:nth-child(2) {
    border-top: 1px solid rgba(74, 122, 71, 0.14);
    padding-top: 6px;
  }
  .vp-pressing-row:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* =========================================================================
   Vault Paths layout — side modules (Latest Listens + Active Hunts)
   ========================================================================= */

/* Three-column layout. Sides at fixed 260px, main fluid.
   The decorative shop-art SVGs only appear above 1100px, so the side
   modules effectively REPLACE them on the Vault Paths route in that range. */
.vp-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}
.vp-main { min-width: 0; }
.vp-side {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* On the Vault Paths route, fade the decorative gutters so the
   functional panels are the dominant frame. We don't hide them
   entirely — a faint trace preserves the record-shop atmosphere. */
body.on-vault-paths .shop-art { opacity: 0.18; transition: opacity 0.3s ease; }

/* Shared side-module header styling */
.vp-side-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.vp-side-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-weight: 600;
}
.vp-side-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.vp-side-loading,
.vp-side-empty {
  margin: 0;
  padding: 8px 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}
.vp-side-foot {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.vp-side-foot:hover {
  color: var(--accent);
  border-bottom-color: rgba(184, 67, 31, 0.45);
}

/* -------- Latest Listens list -------- */
.vp-ll-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid rgba(26, 23, 20, 0.10);
  border-radius: 6px;
  overflow: hidden;
}
.vp-ll-row + .vp-ll-row { border-top: 1px solid rgba(26, 23, 20, 0.08); }
.vp-ll-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.vp-ll-link:hover { background: rgba(184, 67, 31, 0.05); }
.vp-ll-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #1a1410;
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}
.vp-ll-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-ll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.vp-ll-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.vp-ll-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-ll-artist {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-ll-year { opacity: 0.7; }
.vp-ll-when {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-top: 1px;
}

/* -------- Active Hunts quick-link card -------- */
.vp-hunt-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, var(--bg-card) 0%, #f0f4ec 100%);
  border: 1px solid rgba(74, 122, 71, 0.30);
  border-left: 3px solid var(--accent-moss);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.vp-hunt-card:hover {
  border-color: var(--accent-moss-deep);
  box-shadow: 0 8px 22px -14px rgba(74, 122, 71, 0.55);
  transform: translateY(-1px);
}
.vp-hunt-card:focus-visible {
  outline: 2px solid var(--accent-moss);
  outline-offset: 2px;
}
.vp-hunt-art {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto;
}
.vp-hunt-art svg { width: 100%; height: 100%; display: block; }
.vp-hunt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vp-hunt-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
.vp-hunt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: var(--accent-moss);
  color: #fbfaf4;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  transform: translateY(-1px);
}
.vp-hunt-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.vp-hunt-cta {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-moss-ink);
  font-weight: 600;
}

/* -------- Pinned tab active accent (subtle moss tint) -------- */
.vp-tab[data-vp-tab="pinned"].active {
  color: var(--accent-moss-ink);
  border-bottom-color: var(--accent-moss);
}

/* -------- Mobile: stack the layout, drop sticky -------- */
@media (max-width: 980px) {
  .vp-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vp-side {
    position: static;
    top: auto;
  }
  /* On mobile, surface the Active Hunts card ABOVE the main list
     (it's the most actionable element) and Latest Listens BELOW. */
  .vp-side-right { order: -1; }
  .vp-side-left  { order: 2; }
  .vp-main       { order: 1; }

  .vp-hunt-card {
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 14px;
  }
  .vp-hunt-art { width: 72px; height: 72px; margin: 0; }
}

/* === Phase C: Auth, Account, Add-album === */

/* Header layout: nav center, account right */
.site-header { gap: 24px; }
.site-nav { flex: 1; justify-content: flex-start; margin-left: 28px; }
.account-slot { display: flex; align-items: center; gap: 10px; }

.acct-anon { display: flex; align-items: center; gap: 8px; }
.acct-link {
  background: transparent; border: 0; font-size: 14px;
  color: var(--ink-soft); cursor: pointer; padding: 6px 10px;
  font-family: inherit; font-weight: 500;
}
.acct-link:hover { color: var(--accent-ink); }
.acct-cta {
  background: var(--ink); color: var(--bg-card);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 140ms ease, transform 140ms ease;
}
.acct-cta:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.acct-menu { position: relative; }
.acct-chip {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px 4px 4px;
  font-family: inherit; font-size: 14px; color: var(--ink);
  cursor: pointer; transition: border-color 140ms ease;
}
.acct-chip:hover { border-color: var(--ink-mute); }
.acct-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-ink); color: var(--bg-card);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-name { font-weight: 500; }

.acct-pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  min-width: 240px; padding: 6px; z-index: 30;
  display: flex; flex-direction: column;
  /* Hidden by default; revealed by hover or click (is-open). */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.acct-menu:hover .acct-pop,
.acct-menu:focus-within .acct-pop,
.acct-menu.is-open .acct-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}
/* Invisible bridge so cursor can travel from chip to dropdown without losing hover */
.acct-pop::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.acct-pop a, .acct-pop button {
  text-align: left; background: transparent; border: 0;
  padding: 9px 14px; font-size: 14px; color: var(--ink);
  text-decoration: none; border-radius: var(--r-sm);
  font-family: inherit; cursor: pointer;
}
.acct-pop a:hover, .acct-pop button:hover { background: var(--line-soft); color: var(--accent-ink); }
.acct-pop-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.acct-logout { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px; color: var(--ink-soft); }

/* Signed-out inline text links (About / Release notes) before sign-in CTAs */
.acct-anon .acct-link-text {
  font-size: 13.5px; color: var(--ink-soft); text-decoration: none;
  padding: 6px 8px; font-weight: 500; letter-spacing: 0.01em;
  transition: color 140ms ease;
}
.acct-anon .acct-link-text:hover { color: var(--accent-ink); }

/* Auth modal */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26,23,20,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(6px);
}
.auth-card {
  background: var(--bg-card); border-radius: var(--r-md);
  width: 100%; max-width: 420px;
  padding: 28px 28px 22px; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.auth-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0; font-size: 24px;
  color: var(--ink-mute); cursor: pointer; line-height: 1;
  font-family: inherit;
}
.auth-close:hover { color: var(--ink); }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.auth-tab {
  background: transparent; border: 0;
  padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--ink-mute); cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--ink); border-bottom-color: var(--accent-ink); font-weight: 600; }
.auth-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-form .field label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.auth-form .field input, .auth-form .field textarea {
  padding: 10px 12px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.auth-form .field input:focus { outline: none; border-color: var(--accent-ink); }
.field-hint { font-size: 12px; color: var(--ink-mute); }
.auth-err, .acct-err, .add-err {
  background: #f8e6e0; color: #6b1f0a;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 12px;
}
.acct-ok {
  background: #e3efe1; color: #234d1a;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13px; margin-bottom: 12px;
}
.acct-pw-form .field { margin-bottom: 14px; }
.acct-pw-form .field-label {
  display: block; font-size: 12px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.acct-pw-form input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: inherit; font-size: 14px;
  color: var(--ink);
}
.acct-pw-form input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent-ink); }
.auth-submit {
  width: 100%; padding: 11px;
  background: var(--ink); color: var(--bg-card);
  border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; margin-top: 4px;
  transition: background 140ms ease;
}
.auth-submit:hover:not(:disabled) { background: var(--accent-ink); }
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-foot { font-size: 12.5px; color: var(--ink-mute); text-align: center; margin: 14px 0 0; }

/* Account settings page */
.account-page, .add-page { max-width: 720px; margin: 0 auto; padding: 36px 32px 64px; }
.account-head, .add-head { margin-bottom: 28px; }
.account-head h1, .add-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; letter-spacing: -0.015em; margin: 4px 0 8px;
}
.account-head .eyebrow, .add-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-ink); margin: 0;
}
.account-head .lede, .add-head .lede { color: var(--ink-soft); font-size: 15px; margin: 0; }

.acct-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 24px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.02em; }
.field input, .field textarea {
  padding: 10px 12px; font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); }

.acct-public {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 22px;
}
.acct-public legend {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); padding: 0 8px;
}
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent-ink); }
.slug-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); overflow: hidden;
}
.slug-row .slug-prefix {
  padding: 10px 12px; background: var(--line-soft);
  font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft);
  border-right: 1px solid var(--line); white-space: nowrap;
}
.slug-row input { border: 0; flex: 1; font-family: var(--font-mono); }
.slug-link { font-size: 13px; color: var(--accent-ink); margin-top: 8px; display: inline-block; }

.acct-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.btn-primary {
  background: var(--ink); color: var(--bg-card);
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 140ms ease;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-secondary {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Add album page */
.photo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 28px;
}
.photo-tile { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.photo-frame {
  width: 100%; aspect-ratio: 1;
  background: var(--line-soft);
  border: 1px dashed var(--ink-mute);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-empty {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.btn-photo {
  background: var(--bg-card); border: 1px solid var(--ink);
  color: var(--ink); border-radius: var(--r-sm);
  padding: 9px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.btn-photo:hover { background: var(--ink); color: var(--bg-card); }
.photo-status {
  font-size: 12px; color: var(--ink-mute); margin: 0;
  min-height: 1em;
}
.add-form .field { margin-bottom: 16px; }
/* MY-161: manual entry cover photo row */
.manual-cover-row { display: flex; gap: 14px; align-items: center; }
.manual-cover-frame {
  width: 80px; height: 80px; flex-shrink: 0;
  background: var(--line-soft);
  border: 1px dashed var(--ink-mute);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center; padding: 4px;
}
.manual-cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.manual-cover-actions { display: flex; flex-direction: column; gap: 6px; }

/* ============================ BARCODE SCANNER ============================ */
.barcode-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
}
.barcode-viewfinder {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  background: #15110f;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.barcode-viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.barcode-reticle {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  bottom: 38%;
  border: 2px solid rgba(241, 231, 210, 0.9);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.barcode-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #f1e7d2;
  background: rgba(21, 17, 15, 0.65);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barcode-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.barcode-manual {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(90, 26, 38, 0.18);
}
.barcode-manual-label {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-muted, #6c5a4e);
}
.barcode-manual-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.barcode-manual-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid rgba(90, 26, 38, 0.25);
  background: #fdf9ef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.barcode-manual-form button { flex: 0 0 auto; }
@media (max-width: 480px) {
  .barcode-manual-form { flex-direction: column; }
  .barcode-manual-form button { width: 100%; }
}

@media (max-width: 640px) {
  .acct-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
  .account-page, .add-page { padding: 24px 18px 48px; }
  .site-header { padding: 14px 18px; gap: 10px; flex-wrap: wrap; }
  .site-nav {
    margin-left: 0;
    flex-wrap: wrap;       /* allow links + Add CTA to wrap onto a second row */
    row-gap: 4px;
    width: 100%;            /* claim the full row so Add CTA can flow under */
    justify-content: flex-start;
  }
  /* Promote the Add-album CTA at small widths so it's always tappable. */
  .site-nav a.nav-add-cta {
    margin-left: auto;      /* push to end of its row, but it'll wrap if cramped */
    order: 99;              /* always last in source order at mobile too */
  }
  .acct-name { display: none; }
  .acct-anon .acct-link { display: none; }
  .acct-anon .acct-link-text { display: none; }
}

/* Mobile floating action button: an always-visible "+" anchor to #/add so the
   user never has to hunt for the CTA, even if the nav row scrolls.
   Hidden when signed-out, when viewing a public profile, or above 640px. */
.fab-add {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-maroon, #6b1f2a);
  color: #f6efe2;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  z-index: 60;
  display: none;
  font-weight: 400;
  font-family: var(--font-display, Georgia, serif);
}
.fab-add:hover, .fab-add:focus-visible {
  background: #4f1620;
  outline: none;
  transform: translateY(-1px);
  transition: transform 120ms ease, background 120ms ease;
}
.fab-add:active { transform: translateY(0); }
@media (max-width: 640px) {
  .fab-add.fab-add-visible { display: block; }
}

/* --- Phase C: wide-screen frame ---
   The decorative .shop-art side SVGs this once reserved space for are now
   removed (see ".shop-scene { display: none !important }" below), so the old
   320/340px side padding was dead space that crushed usable width on common
   1101-1699px laptops (e.g. 1366px Windows Chrome): content dropped to ~726px,
   collapsing the Console sub-lane cards to one-word-per-line strips and
   wrapping the header brand. Keep only the wider max-width frame; horizontal
   padding falls back to the base .page/.site-header/.site-footer 40px. */
@media (min-width: 1101px) {
  .page { max-width: 1640px !important; }
}
@media (min-width: 1700px) {
  .page { max-width: 1800px !important; }
}

/* ============================================================
   Landing page — high-end vintage aesthetic
   ============================================================ */

/* Nav hides when logged out */
.site-nav.is-hidden { display: none !important; }

/* Kill the cheesy shop-scene SVGs everywhere — the photo backdrop carries the atmosphere now. */
.shop-scene { display: none !important; }
html, body { background: transparent !important; }
body { background-image: none !important; }   /* drop the body paper grain (we add a fresh one over the photo) */
.site-header {
  background: linear-gradient(180deg, rgba(244,239,230,0.94) 0%, rgba(244,239,230,0.82) 70%, rgba(244,239,230,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: none;
}
.site-footer { background: transparent; }
.page { background: transparent; }

/* Hero photographic backdrop — the wall photo backs the landing, the turntable photo backs the vault. */
.hero-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
body.logged-out .hero-bg-landing { display: block; }
body:not(.logged-out) .hero-bg-vault { display: block; }
.hero-bg picture,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-bg img {
  object-fit: cover;
  /* Slightly desaturate + lift midtones so it sits behind type without competing */
  filter: contrast(0.95) saturate(0.85);
}
/* Warm cream veil — fades the photo so type stays readable but atmosphere comes through.
   Landing variant is asymmetric (heavier on the headline side so the lede reads,
   lighter on the right so the record wall is unmistakable). Bottom still fades to
   cream so the photo dissolves before the footer. */
.hero-bg-landing .hero-bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(244, 239, 230, 0.78) 0%, rgba(244, 239, 230, 0.66) 38%, rgba(244, 239, 230, 0.38) 70%, rgba(244, 239, 230, 0.28) 100%),
    linear-gradient(180deg, rgba(244, 239, 230, 0.05) 0%, rgba(244, 239, 230, 0) 35%, rgba(244, 239, 230, 0.45) 78%, rgba(244, 239, 230, 0.90) 100%);
}
/* Vault variant: the turntable should be clearly visible — just softened
   enough that album covers and metadata stay legible on top of it.
   Lighter at the top (where the hero/headline sits) so the photo reads,
   denser toward the middle where the cards stack. */
.hero-bg-vault .hero-bg-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(244, 239, 230, 0.55) 0%,
      rgba(244, 239, 230, 0.65) 30%,
      rgba(244, 239, 230, 0.78) 60%,
      rgba(244, 239, 230, 0.88) 100%);
}
.hero-bg-vault img {
  filter: contrast(1.0) saturate(0.85) brightness(1.0);
}
/* Subtle paper grain — SVG noise turbulence, ~4% opacity */
.hero-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Landing layout */
.landing {
  padding: 12px 0 80px;
  position: relative;
}

/* Hero: two-column on desktop (copy left, large LP mark right), single column on mobile */
.land-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0 96px;
  text-align: left;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}
.land-hero-copy {
  min-width: 0;
}
.land-hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.land-mark-svg {
  width: 100%;
  height: auto;
  max-width: 440px;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(20, 8, 12, 0.28)) drop-shadow(0 6px 14px rgba(20, 8, 12, 0.18));
}
@media (max-width: 900px) {
  .land-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 0 64px;
    max-width: 760px;
  }
  .land-hero-mark {
    order: -1;
  }
  .land-mark-svg {
    max-width: 260px;
  }
}

.land-hero-rule {
  width: 56px;
  height: 1px;
  background: var(--ink);
  margin-bottom: 22px;
  opacity: 0.8;
}

.land-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 20px;
}

.land-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 28px;
  font-variation-settings: "opsz" 144;
}
.land-title-line {
  display: block;
}
.land-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-ink);
}

.land-lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 0 36px;
  font-variation-settings: "opsz" 18;
}

.land-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.land-cta {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 0;            /* sharp corners — feels printed */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms, transform 80ms;
  line-height: 1;
}
.land-cta:active { transform: translateY(1px); }
.land-cta.primary {
  background: var(--ink);
  color: var(--bg-card);
  border-color: var(--ink);
}
.land-cta.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.land-cta.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.land-cta.ghost:hover { background: var(--ink); color: var(--bg-card); }

.land-foot-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 10px 0 0;
  font-family: var(--font-body);
}

/* Feature triad — magazine columns with big Fraunces numerals */
.land-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid rgba(26, 23, 20, 0.12);
  border-bottom: 1px solid rgba(26, 23, 20, 0.12);
}
@media (max-width: 900px) {
  .land-features { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
}

.land-feature {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.land-feature-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 54px;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}
.land-feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}
.land-feature p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* Closing rule — centered editorial pull-quote */
.land-rule {
  text-align: center;
  padding: 96px 24px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.land-rule-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
}
.land-rule-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-ink);
}
.land-rule-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto 32px;
  max-width: 540px;
}
.land-rule-cta { padding: 16px 32px; font-size: 13px; }

/* ============================================================
   Brand mark — Fraunces italic VV stamp (v4)
   ============================================================ */
.brand-mark { color: var(--ink); display: block; }
.brand { gap: 12px; }
.brand-name {
  letter-spacing: 0.01em;
}

/* ============================================================
   Admin — owner-only console
   ============================================================ */
.admin-wrap {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 0 64px;
}
.admin-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 8px;
}
.admin-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--ink);
}
.admin-sub {
  font-family: var(--font-body, "Inter", sans-serif);
  color: var(--ink-muted, #5f5448);
  margin: 0 0 32px;
  max-width: 560px;
}
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.admin-stat {
  background: rgba(255, 252, 246, 0.85);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 4px;
  padding: 20px 22px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.admin-stat-meta {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12px;
  color: var(--ink-muted, #5f5448);
  margin-top: 6px;
}

/* ---- Admin tab navigation ---- */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(26,23,20,0.10);
  margin-bottom: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 10px 22px;
  border: none;
  background: none;
  color: var(--ink-muted, #5f5448);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.is-active {
  color: var(--rust, #b8431f);
  border-bottom-color: var(--rust, #b8431f);
}
.admin-panel { outline: none; }

/* ---- Pipeline tab ---- */
.admin-pipe-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.admin-pipe-hero {
  flex-shrink: 0;
}
.admin-pipe-hero-value {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.admin-pipe-hero-of {
  font-size: 22px;
  color: var(--ink-muted, #5f5448);
}
.admin-pipe-hero-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted, #5f5448);
  margin-top: 4px;
}
.admin-pipe-alert {
  background: #fff3cd;
  border: 1px solid #e6c84a;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 13px;
  color: #6b4a00;
}
.admin-pipe-ok {
  background: #d4edda;
  border: 1px solid #7acc8a;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 13px;
  color: #155724;
}
.admin-pipe-table { margin-bottom: 8px; }
.admin-pipe-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.admin-pipe-bar-track {
  background: rgba(26,23,20,0.08);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
  min-width: 80px;
}
.admin-pipe-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.admin-section-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--ink);
}
.admin-section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
  width: 100%;
}
.admin-section-toggle:hover { color: #5a1a26; }
.admin-section-chevron {
  font-size: 11px;
  font-style: normal;
  color: rgba(26, 23, 20, 0.45);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.admin-table-wrap {
  background: rgba(255, 252, 246, 0.85);
  border: 1px solid rgba(26, 23, 20, 0.08);
  border-radius: 4px;
  overflow-x: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 13px;
  min-width: 920px;
}
.admin-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--ink-muted, #5f5448);
  padding: 12px 12px;
  border-bottom: 1px solid rgba(26, 23, 20, 0.08);
  background: rgba(26, 23, 20, 0.025);
  white-space: nowrap;
}
/* MY-163: sortable column headers in the admin users table. */
.admin-table th.admin-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
}
.admin-table th.admin-th-sortable:hover {
  background: rgba(90, 26, 26, 0.06);
  color: var(--ink, #1a1714);
}
.admin-table th.admin-th-sortable:focus-visible {
  outline: 2px solid var(--maroon, #5a1a1a);
  outline-offset: -2px;
}
.admin-table th.admin-th-sortable.is-active {
  color: var(--maroon, #5a1a1a);
  background: rgba(90, 26, 26, 0.05);
}
.admin-th-arrow {
  font-size: 9px;
  letter-spacing: 0;
  margin-left: 2px;
}
.admin-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(26, 23, 20, 0.05);
  color: var(--ink);
  vertical-align: middle;
  white-space: nowrap;
}
.admin-table td:nth-child(2) { white-space: normal; max-width: 180px; }
.admin-table td:nth-child(3) { font-size: 12.5px; color: var(--ink-muted, #5f5448); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(184, 67, 31, 0.03); }
.admin-table td.num { font-variant-numeric: tabular-nums; color: var(--ink-muted, #5f5448); }
.admin-role {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(26, 23, 20, 0.08);
  color: var(--ink);
}
.admin-role[data-role="owner"] {
  background: #1a1714;
  color: #fbf7ef;
}
.admin-role[data-role="admin"] {
  background: #b8431f;
  color: #fbf7ef;
}

/* ----- admin: online status pill + last seen ----- */
.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #5f5448);
  white-space: nowrap;
}
.admin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 23, 20, 0.22);
  box-shadow: 0 0 0 2px rgba(26, 23, 20, 0.04);
  flex-shrink: 0;
}
.admin-status.is-online {
  color: #2f7a3b;
  font-weight: 600;
}
.admin-status.is-online .admin-status-dot {
  background: #3aa14b;
  box-shadow: 0 0 0 3px rgba(58, 161, 75, 0.18);
  animation: admin-status-pulse 2.4s ease-in-out infinite;
}
@keyframes admin-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(58, 161, 75, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(58, 161, 75, 0.06); }
}
.admin-lastseen {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-muted, #5f5448);
  white-space: nowrap;
}

.admin-empty {
  padding: 48px;
  text-align: center;
  color: var(--ink-muted, #5f5448);
  font-style: italic;
}

/* ----- admin: per-row plan select + delete button ----- */
.admin-plan-select {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 4px 22px 4px 8px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 3px;
  background: #fbf7ef;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%235f5448' stroke-width='1.4' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.admin-plan-select:hover { border-color: rgba(184, 67, 31, 0.5); }
.admin-plan-select:focus {
  outline: none;
  border-color: #b8431f;
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.15);
}
.admin-plan-select:disabled { opacity: 0.5; cursor: wait; }

/* Admin users pager. Sits below the users table. */
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding: 10px 12px;
  border-top: 1px solid rgba(26, 23, 20, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #5f5448);
}
.admin-pager-info { font-variant-numeric: tabular-nums; }
.admin-pager-controls { display: flex; align-items: center; gap: 12px; }
.admin-pager-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.admin-pager-size select {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: #fbf6ec;
  color: var(--ink, #1a1714);
  cursor: pointer;
}
.admin-pager-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: transparent;
  color: var(--ink, #1a1714);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-pager-btn:hover:not(:disabled) {
  background: #5a1a1a;
  border-color: #5a1a1a;
  color: #fbf6ec;
}
.admin-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.admin-table-wrap.is-loading { opacity: 0.55; pointer-events: none; }

.admin-actions-cell { text-align: right; }
.admin-dedupe-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted, #5f5448);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 4px;
}
.admin-dedupe-btn:hover {
  background: #1a4f2e;
  border-color: #1a4f2e;
  color: #fbf7ef;
}
.admin-dedupe-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.admin-wipe-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted, #5f5448);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 4px;
}
.admin-wipe-btn:hover {
  background: #7a4a00;
  border-color: #7a4a00;
  color: #fbf7ef;
}
.admin-wipe-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.admin-delete-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid rgba(26, 23, 20, 0.18);
  border-radius: 2px;
  background: transparent;
  color: var(--ink-muted, #5f5448);
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-delete-btn:hover {
  background: #7a2417;
  border-color: #7a2417;
  color: #fbf7ef;
}
.admin-delete-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.admin-self-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #5f5448);
  opacity: 0.6;
}

/* =====================================================================
   THE CONSOLE — unified frame around Now Spinning, Next Spin,
   Vault Paths, and Latest Listens. Replaces the old stacked rows.
   ===================================================================== */
.console {
  margin: 18px 0 32px;
  padding: 18px 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,253,247,0.65) 0%, rgba(251,247,239,0.45) 100%);
  border: 1px solid rgba(26, 23, 20, 0.10);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 8px 24px -16px rgba(26, 23, 20, 0.18);
  position: relative;
}
.console::before {
  /* faint inner ruled line evoking a mixer's panel */
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(26, 23, 20, 0.07);
  border-radius: 4px;
  pointer-events: none;
}
.console-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute, #5f5448);
  position: relative;
  z-index: 1;
}
.console-mark {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, #b8431f);
  box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18);
  animation: console-pulse 2.4s ease-in-out infinite;
}
@keyframes console-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(184, 67, 31, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(184, 67, 31, 0.06); }
}
.console-kicker { color: var(--ink, #1a1714); font-weight: 600; letter-spacing: 0.22em; }
.console-sep    { opacity: 0.5; }
.console-tag    { font-style: italic; text-transform: none; letter-spacing: 0; font-family: 'Fraunces', Georgia, serif; font-size: 13px; color: var(--ink-mute, #5f5448); }

.console-grid {
  display: grid;
  /* Two columns: a wide "now" zone on the left (Now Spinning on top,
     Next Spin + Vault Paths in a row underneath) and the Latest Listens
     timeline as a tall right column. */
  grid-template-columns: minmax(0, 1fr) 250px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "anchor   listens"
    "sublane  listens";
  gap: 16px;
  position: relative;
  z-index: 1;
}
.console-cell-anchor  { grid-area: anchor; }
.console-cell-listens { grid-area: listens; }

/* The middle sub-lane that holds Next Spin and Vault Paths side-by-side */
.console-sublane {
  grid-area: sublane;
  display: grid;
  /* minmax(0, 1fr) (not bare 1fr) so the two cards always split the row
     evenly and can never fall back to their min-content width and wrap
     text one word per line. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.console-cell-next,
.console-cell-playlist { min-width: 0; }

/* Margin reset on existing teaser cards so they sit flush in console cells */
.console-cell .ns-teaser,
.console-cell .ns-playlist-teaser,
.console-cell .now-spinning-card {
  margin: 0;
  height: 100%;
}

/* When Next Spin is in the narrow sublane, switch the grid to a single
   column so cover stacks above the body (no word-by-word wrap). */
.console-cell-next .ns-teaser-row {
  grid-template-columns: 1fr !important;
  gap: 12px;
  align-items: start;
}
.console-cell-next .ns-teaser-cover {
  width: 84px !important;
  height: 84px !important;
}
.console-cell-next .ns-teaser-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Trim heavy padding inside teasers so they fit the narrow column */
.console-cell-next .ns-teaser {
  padding: 16px 14px;
}
/* Smaller title/lede sizing in sublane teasers */
.console-cell-next .ns-teaser-title {
  font-size: 19px;
  line-height: 1.2;
}
.console-cell-next .ns-teaser-reason {
  font-size: 12.5px;
  line-height: 1.45;
}
/* Buttons can wrap and shrink in narrow cells */
.console-cell-next .ns-teaser-actions {
  flex-wrap: wrap;
  gap: 8px;
}
.console-cell-next .ns-btn {
  font-size: 10px;
  padding: 6px 10px;
}
/* Tag chip can wrap, count pill moves below */
.console-cell-next .ns-teaser-eyebrow {
  flex-wrap: wrap;
  gap: 4px 6px;
}

/* MY-212: playlist teaser (replaces the old Vault Paths pane in this slot).
   Reuses .ns-playlist-track / .ns-playlist-builder from the full Next Spin
   page's "Build a playlist" card as-is; this just tightens them for the
   sublane's narrow column, mirroring the .console-cell-next treatment above
   and the existing @media(max-width:560px) collapse already defined for
   .ns-playlist-track further up this file. */
.console-cell-playlist .ns-playlist-teaser {
  padding: 16px 14px;
}
.console-cell-playlist .ns-teaser-eyebrow {
  flex-wrap: wrap;
  gap: 4px 6px;
}
.console-cell-playlist .ns-playlist-track {
  grid-template-columns: 20px 40px 1fr;
  padding: 8px 10px;
  gap: 8px;
}
/* MY-273 fix: the narrow console grid sizes the cover column at 40px, but the
   shared .ns-playlist-track-cover is a fixed 48px — the 8px overflow spilled
   across the gap into the body text, so the title/artist overlapped the
   thumbnail edge. Match the cover element to its 40px track here (console
   only; the full "View full chain" page keeps its 48px track + cover). */
.console-cell-playlist .ns-playlist-track-cover {
  width: 40px;
  height: 40px;
}
.console-cell-playlist .ns-playlist-track-action {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-left: 48px;
}
.console-cell-playlist .ns-playlist-track-reason {
  font-size: 12px;
  max-width: none;
}
.console-cell-playlist .ns-playlist-builder {
  padding: 12px;
  gap: 10px;
}
.console-cell-playlist .ns-btn {
  font-size: 10px;
  padding: 6px 10px;
}
.console-cell-playlist .ns-playlist-teaser-full {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-mute);
}
.console-cell-playlist .ns-playlist-progress-label {
  margin-bottom: 6px;
}
/* MY-273: current step + upcoming preview tiles stacked compactly in the
   sublane. Mirrors .ns-playlist-tracks (full page) with a tighter gap. */
.console-cell-playlist .ns-playlist-teaser-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Soft seam between the now-lane and the listens column */
.console-cell-listens { border-left: 1px solid rgba(26, 23, 20, 0.08); padding-left: 16px; }

/* ---- Latest Listens vertical timeline (right column of console) ---- */
.ll-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.ll-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 4px;
}
.ll-col-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink, #1a1714);
}
.ll-col-tag {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute, #5f5448);
}
.ll-col-loading,
.ll-col-empty {
  margin: 0;
  padding: 6px 2px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute, #5f5448);
}
.ll-stack {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
/* Vertical timeline rail */
.ll-stack::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(184, 67, 31, 0.6) 0%,
    rgba(26, 23, 20, 0.12) 35%,
    rgba(26, 23, 20, 0.05) 100%);
}
.ll-stack-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 4px 6px 4px 0;
  border-radius: 3px;
  position: relative;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ll-stack-row:hover {
  background: rgba(184, 67, 31, 0.05);
  transform: translateX(1px);
}
.ll-stack-tick {
  position: absolute;
  left: -12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbf7ef;
  border: 1px solid rgba(26, 23, 20, 0.35);
  transform: translateY(-50%);
}
.ll-stack-row.is-latest .ll-stack-tick {
  background: var(--accent, #b8431f);
  border-color: var(--accent, #b8431f);
  box-shadow: 0 0 0 2px rgba(184, 67, 31, 0.18);
}
.ll-stack-thumb {
  width: 36px; height: 36px;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(26, 23, 20, 0.06);
  flex-shrink: 0;
}
.ll-stack-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ll-stack-dot {
  width: 100%; height: 100%;
  display: block;
  background: radial-gradient(circle, rgba(26,23,20,0.18) 0%, rgba(26,23,20,0.06) 70%);
}
.ll-stack-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.ll-stack-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #1a1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-stack-artist {
  font-size: 11.5px;
  color: var(--ink-mute, #5f5448);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-stack-when {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #5f5448);
  opacity: 0.75;
  margin-top: 1px;
}
.ll-col-foot {
  align-self: flex-start;
  margin-top: auto;
  padding: 6px 2px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-ink, #7a2417);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.ll-col-foot:hover {
  color: var(--accent, #b8431f);
  border-bottom-color: rgba(184, 67, 31, 0.45);
}

/* ---- Mobile: collapse console to single column ---- */
@media (max-width: 980px) {
  .console { padding: 14px 14px 16px; }
  .console-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "anchor"
      "sublane"
      "listens";
    gap: 12px;
  }
  .console-sublane { grid-template-columns: 1fr; }
  .console-cell-listens {
    border-left: none;
    border-top: 1px solid rgba(26, 23, 20, 0.07);
    padding-left: 0;
    padding-top: 12px;
  }
  /* On mobile, restore the original side-by-side cover+body for the teasers */
  .console-cell-next .ns-teaser-row {
    flex-direction: row;
    align-items: center;
  }
}

/* ---- The Console as its own page: larger frame, taller listens lane ---- */
.console-page {
  margin: 22px 0 48px;
  padding: 24px 24px 28px;
}
.console-grid-page {
  /* Same two-column shape, but with a wider Latest Listens lane since it now
     shows the last 10 spins instead of 5. */
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}
.console-grid-page .console-sublane { gap: 18px; }
.console-grid-page .console-cell-listens .ll-stack {
  /* Roomier vertical timeline for 10 entries */
  max-height: none;
}
.hero-console h1 {
  /* Slightly tighter hero so the Console gets the visual weight */
  margin-bottom: 4px;
}
.hero-console .lede { margin-top: 4px; }
@media (max-width: 980px) {
  .console-page { padding: 16px 14px 18px; }
  .console-grid-page { grid-template-columns: 1fr; gap: 14px; }
}

/* Vault Paths: 2-col variant (Latest Listens lives in The Console now) */
.vp-layout.vp-layout-2col {
  grid-template-columns: minmax(0, 1fr) 260px;
}
@media (max-width: 980px) {
  .vp-layout.vp-layout-2col { grid-template-columns: 1fr; }
}

/* --- Top-nav "Add album" CTA (tasteful moss accent) --- */
.site-nav a.nav-add-cta { white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--accent-moss);
  border-radius: 999px;
  color: var(--accent-moss-ink);
  background: rgba(74, 122, 71, 0.06);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.site-nav a.nav-add-cta span[aria-hidden="true"] {
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-moss-deep);
}
.site-nav a.nav-add-cta:hover {
  background: rgba(74, 122, 71, 0.14);
  border-color: var(--accent-moss-deep);
  color: var(--accent-moss-ink);
}
.site-nav a.nav-add-cta.active::after { display: none; }
@media (max-width: 720px) {
  .site-nav a.nav-add-cta { white-space: nowrap; margin-left: 6px; padding: 5px 10px 5px 8px; font-size: 12px; }
}

/* ===== Beta-full waitlist panel (auth modal swap) ===== */
.beta-full { padding: 32px 28px 28px; text-align: left; }
.beta-full-eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  color: var(--ink-mute); font-weight: 600; margin: 0 0 8px;
}
.beta-full-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 24px; line-height: 1.2;
  color: var(--ink); margin: 0 0 12px;
}
.beta-full-lede {
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px;
}
.beta-full-form .field { margin-bottom: 12px; }
.beta-full-actions { margin-top: 8px; }

/* ===== Admin: Beta access section ===== */
.admin-beta {
  margin: 0 0 28px;
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 12px;
  padding: 18px 20px;
}
.admin-beta-grid {
  display: grid; gap: 24px;
  /* Right column gets more room — it hosts the waitlist table with action buttons. */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
}
@media (max-width: 800px) {
  .admin-beta-grid { grid-template-columns: 1fr; }
}
/* Grid children with tables need min-width:0 to prevent intrinsic table width
   from forcing the column wider than the card. */
.admin-beta-grid > .admin-beta-form,
.admin-beta-grid > .admin-beta-waitlist { min-width: 0; }
.admin-beta-waitlist { overflow-x: auto; }
/* min-width: 520px keeps the table from compressing the Actions column off the
   visible area on narrow grid columns. The parent's overflow-x:auto then
   reveals a horizontal scrollbar so the invite buttons are always reachable. */
.admin-wl-table { width: 100%; min-width: 520px; table-layout: auto; }
.admin-wl-actions { white-space: nowrap; text-align: right; }
.admin-wl-actions .admin-btn { margin-left: 4px; }
.admin-beta-label {
  display: block; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute); margin: 0 0 4px;
}
.admin-beta-hint {
  color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0 0 12px;
}
.admin-beta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-beta-row input[type="number"] {
  width: 110px; padding: 8px 10px;
  border: 1px solid var(--rule, #d8d2c4); border-radius: 6px;
  font: 600 16px 'Inter', system-ui, sans-serif; color: var(--ink);
  background: #fcfbf7;
}
.admin-beta-row input[type="number"]:focus {
  outline: 2px solid var(--accent-moss, #4f6f44); outline-offset: 1px;
  border-color: var(--accent-moss, #4f6f44);
}
.admin-beta-save {
  appearance: none; cursor: pointer;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border: 0; border-radius: 6px; padding: 9px 16px;
  font: 600 13px 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.admin-beta-save:hover { background: var(--accent-moss-deep, #3e5836); }
.admin-beta-save:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-beta-status { font-size: 13px; color: var(--ink-soft); }
.admin-beta-status.is-ok    { color: var(--accent-moss-deep, #3e5836); font-weight: 600; }
.admin-beta-status.is-error { color: #a8462e; font-weight: 600; }
.admin-beta-meta {
  margin: 14px 0 0; font-size: 13px; color: var(--ink-soft);
}
.admin-beta-meta strong { color: var(--ink); }
.admin-beta-wl-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.admin-beta-wl-count {
  display: inline-block; min-width: 24px; padding: 2px 8px;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border-radius: 999px; font: 600 12px 'Inter', sans-serif;
  letter-spacing: 0.02em; text-align: center;
}
.admin-table-compact { font-size: 13px; }
.admin-table-compact th, .admin-table-compact td { padding: 6px 10px; }

/* === Beta pill (header) === */
.beta-pill {
  display: inline-block; margin-left: 10px;
  padding: 2px 9px; vertical-align: middle;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border-radius: 999px;
  font: 600 10px/1.5 'Inter', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  user-select: none; cursor: default;
}

/* === Add Album: intake tabs (Photo / Manual) === */
.intake-tabs {
  display: flex; gap: 0; margin: 0 0 22px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.intake-tab {
  appearance: none; background: none; border: none;
  padding: 10px 16px; cursor: pointer;
  font: 500 14px 'Inter', sans-serif;
  color: var(--ink-soft, #6a6a6a);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.intake-tab.is-active { color: var(--ink, #1a1a1a); border-bottom-color: var(--accent-moss, #4f6f44); }
.intake-tab:hover:not(.is-active) { color: var(--ink, #1a1a1a); }

.intake-pane[hidden] { display: none; }

/* "Identify with AI" CTA row */
.identify-row {
  display: flex; gap: 12px; align-items: center;
  margin: 20px 0 24px; padding: 16px;
  background: rgba(79, 111, 68, 0.04);
  border: 1px solid rgba(79, 111, 68, 0.16);
  border-radius: 8px;
}
.identify-row .identify-copy { flex: 1; font: 400 13px/1.5 'Inter', sans-serif; color: var(--ink-soft, #6a6a6a); }
.identify-row .identify-copy strong { color: var(--ink, #1a1a1a); font-weight: 600; }
.btn-identify {
  appearance: none; cursor: pointer;
  background: var(--accent-moss, #4f6f44); color: #fff;
  border: none; border-radius: 6px;
  padding: 10px 18px;
  font: 600 13px 'Inter', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn-identify:hover:not(:disabled) { background: #3f5a36; }
.btn-identify:disabled { opacity: 0.5; cursor: not-allowed; }

/* Vision spinner / status */
.vision-status {
  margin: 12px 0; padding: 14px 16px;
  background: rgba(0,0,0,0.03); border-radius: 6px;
  font: 400 13px 'Inter', sans-serif; color: var(--ink-soft);
  display: flex; align-items: center; gap: 10px;
}
.vision-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(79, 111, 68, 0.2);
  border-top-color: var(--accent-moss, #4f6f44);
  border-radius: 50%;
  animation: vv-spin 0.8s linear infinite;
}
@keyframes vv-spin { to { transform: rotate(360deg); } }

/* Track list editor inside add form */
.track-editor { margin-top: 6px; }
.track-row {
  display: grid; grid-template-columns: 48px 1fr 80px 32px;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.track-row input {
  padding: 7px 10px; border: 1px solid var(--rule, rgba(0,0,0,0.12));
  border-radius: 4px; font: 400 13px 'Inter', sans-serif;
}
.track-row .track-num { text-align: center; }
.btn-track-remove {
  appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--rule, rgba(0,0,0,0.12));
  border-radius: 4px; width: 28px; height: 28px;
  color: var(--ink-soft); font-size: 16px; line-height: 1;
}
.btn-track-remove:hover { color: #c44; border-color: #c44; }
.btn-track-add {
  appearance: none; cursor: pointer;
  background: none; border: 1px dashed var(--rule, rgba(0,0,0,0.18));
  border-radius: 4px; padding: 7px 14px;
  font: 500 12px 'Inter', sans-serif;
  color: var(--ink-soft);
  margin-top: 4px;
}
.btn-track-add:hover { color: var(--ink); border-color: var(--ink-soft); }

/* MY-353: Founding-Member editor for the shared hero fields. Sits between the
   Country/Formed/Genres list and the global bio blurb, so it needs its own top
   gap to read as a separate affordance rather than part of the list. */
.artist-info-edit { margin-top: 14px; }
.artist-info-edit .add-form { margin-top: 12px; }

/* MY-309: per-user artist bio blocks on the artist page. */
.artist-bio-scope {
  margin: 0 0 14px; font: 400 12px 'Inter', sans-serif;
  color: var(--ink-soft); opacity: .85;
}
.artist-bio-hint {
  margin: 0 0 8px; font: 400 12px 'Inter', sans-serif; color: var(--ink-soft);
}
.artist-bio-subhead {
  margin: 16px 0 8px; font: 600 13px 'Inter', sans-serif;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
}
.artist-bio-member-list { list-style: none; margin: 0; padding: 0; }
/* MY-247: both text children are wrapped and constrained, so a long member name
   or role wraps instead of blowing the flex row out horizontally. */
.artist-bio-member {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.artist-bio-member-name {
  font: 500 14px 'Inter', sans-serif; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;
}
.artist-bio-member-meta {
  font: 400 13px 'Inter', sans-serif; color: var(--ink-soft);
  min-width: 0; overflow-wrap: anywhere;
}
.artist-bio-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .artist-bio-field-row { grid-template-columns: 1fr; } }
/* Two class selectors so this outranks .track-row's four-column grid regardless
   of stylesheet source order: name, role, from, to, remove. */
.track-row.member-row { grid-template-columns: 1fr 1fr 80px 80px 32px; }
@media (max-width: 520px) {
  .track-row.member-row { grid-template-columns: 1fr 1fr 32px; }
}

/* Edit / Delete buttons on album detail */
.album-action.album-action-edit { /* uses default album-action style */ }
.album-action.album-action-danger {
  color: #b03030; border-color: rgba(176, 48, 48, 0.3);
}
.album-action.album-action-danger:hover { background: #b03030; color: #fff; border-color: #b03030; }

/* === Community page === */
.community {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.community-hero {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.community-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.community-title {
  font: 600 44px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink, #1c1c1a);
}
.community-lede {
  font: 400 16px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  max-width: 640px;
}
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.community-loading, .community-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  font: 400 14px/1.5 'Inter', sans-serif;
}
.community-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  align-items: flex-start;
}
.community-card:hover {
  border-color: var(--ink-soft, rgba(0,0,0,0.35));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.community-cover {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 3px;
  overflow: hidden;
  background: #f4f3ef;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.community-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.community-cover-empty {
  color: var(--ink-soft, #9a9994);
}
.community-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-card-kicker {
  font: 500 10.5px/1.35 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #7a7a75);
  margin: 0;
  /* Allow up to two lines so longer collection names ('The Buchanan Vinyl
     Collection') aren't truncated mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.community-card-name {
  font: 600 20px/1.2 'Cormorant Garamond', 'Georgia', serif;
  margin: 2px 0 4px;
  color: var(--ink, #1c1c1a);
  letter-spacing: -0.005em;
}
.community-card-meta {
  font: 400 12.5px/1.4 'Inter', sans-serif;
  color: var(--ink-soft, #6e6e69);
  margin: 0;
}
.community-card-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--rule, rgba(0,0,0,0.10));
  font: 500 13px/1 'Inter', sans-serif;
}
.community-card-count {
  color: var(--ink, #1c1c1a);
  letter-spacing: 0.01em;
}
.community-card-arrow {
  font-size: 16px;
  color: var(--accent, #4a7257);
  transition: transform 160ms ease;
}
.community-card:hover .community-card-arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .community { padding: 32px 18px 60px; }
  .community-title { font-size: 34px; }
  .community-grid { grid-template-columns: 1fr; }
}

/* Compact nav for anonymous visitors — keeps the Community link visible. */
.site-nav.nav-public-only a[data-nav].is-hidden { display: none; }

/* ============================================================
   Bulk Import — Add Album → "Bulk import" tab
   Editorial / collector aesthetic, matches .admin-beta + .rarity-panel
   ============================================================ */
.bulk-intro {
  margin: 4px 0 22px;
}
.bulk-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1d1b16);
  margin: 0 0 8px;
}
.bulk-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft, #58544b);
  margin: 0 0 10px;
  max-width: 62ch;
}
.bulk-lede strong { color: var(--ink, #1d1b16); font-weight: 600; }
.bulk-lede-mini {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
}

/* Drop zone */
.bulk-drop {
  border: 2px dashed var(--rule, #d8d2c4);
  border-radius: 14px;
  background: var(--surface-2, #faf7f0);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  outline: none;
}
.bulk-drop:hover,
.bulk-drop:focus-visible {
  border-color: var(--accent, #4a7257);
  background: #f5f1e5;
}
.bulk-drop.is-over {
  border-color: var(--accent, #4a7257);
  background: #eef3ec;
  transform: scale(1.01);
}
.bulk-drop-icon {
  font-size: 38px;
  line-height: 1;
  color: var(--accent, #4a7257);
  margin-bottom: 10px;
}
.bulk-drop-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin-bottom: 4px;
}
.bulk-drop-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
}

/* Status line */
.bulk-status {
  margin: 14px 2px 0;
  font-size: 14px;
  color: var(--ink-soft, #58544b);
  min-height: 1.2em;
}
.bulk-status.is-err {
  color: #b03a2e;
  font-weight: 500;
}

/* Each step section */
.bulk-step {
  margin: 28px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.bulk-step-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin: 0 0 4px;
}
.bulk-step-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
  margin: 0 0 14px;
  line-height: 1.5;
}
.bulk-step-commit {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Column mapping table */
.bulk-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.bulk-map-table th,
.bulk-map-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule, #ece7da);
  text-align: left;
  vertical-align: middle;
}
.bulk-map-table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute, #7a766d);
  font-weight: 600;
  border-bottom: 1.5px solid var(--rule, #d8d2c4);
}
.bulk-map-name {
  font-weight: 600;
  color: var(--ink, #1d1b16);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 13px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-map-sample {
  color: var(--ink-mute, #7a766d);
  font-size: 13px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-map-select {
  width: 100%;
  max-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--rule, #d8d2c4);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #1d1b16);
  font: inherit;
  font-size: 13.5px;
}
.bulk-map-select:focus {
  outline: none;
  border-color: var(--accent, #4a7257);
  box-shadow: 0 0 0 3px rgba(74,114,87,0.18);
}

/* Data preview table */
.bulk-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule, #ece7da);
  border-radius: 8px;
  background: var(--surface-2, #faf7f0);
}
.bulk-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
  min-width: 100%;
}
.bulk-preview-table th,
.bulk-preview-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule, #ece7da);
  text-align: left;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bulk-preview-table thead th {
  background: #f1ece0;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  position: sticky;
  top: 0;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bulk-preview-table tbody tr:last-child td { border-bottom: 0; }

/* Commit button + hint */
.bulk-commit-btn {
  font-size: 15px;
  padding: 10px 20px;
}
.bulk-commit-hint {
  font-size: 13px;
  color: var(--ink-mute, #7a766d);
  flex: 1 1 240px;
}

/* Success celebration */
.bulk-success {
  margin: 28px 0 0;
  padding: 32px 24px;
  border: 1px solid var(--accent-soft, #cfded4);
  background: linear-gradient(180deg, #f3f8f4 0%, #faf7f0 100%);
  border-radius: 14px;
  text-align: center;
}
.bulk-success-num {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent, #4a7257);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.bulk-success-label {
  font-size: 16px;
  color: var(--ink, #1d1b16);
  font-weight: 500;
  margin-bottom: 12px;
}
.bulk-success-sub {
  font-size: 13.5px;
  color: var(--ink-mute, #7a766d);
  margin: 0 0 18px;
  line-height: 1.55;
}
.bulk-skipped-note {
  color: var(--ink-mute, #7a766d);
  font-size: 13px;
}
.bulk-success-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Errors disclosure */
.bulk-errs {
  margin: 12px auto 18px;
  max-width: 560px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.bulk-errs > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  list-style: none;
}
.bulk-errs > summary::-webkit-details-marker { display: none; }
.bulk-errs > summary::before {
  content: '▸ ';
  color: var(--ink-mute, #7a766d);
  font-size: 12px;
}
.bulk-errs[open] > summary::before { content: '▾ '; }
.bulk-errs ul {
  margin: 10px 0 4px;
  padding-left: 18px;
  color: var(--ink-soft, #58544b);
  line-height: 1.5;
}
.bulk-errs li { margin: 2px 0; }

/* MY-177 Slice 5b: hunt-match review block in bulk-import success card */
.bulk-hunt-matches {
  margin: 16px auto 18px;
  max-width: 560px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 10px;
  padding: 14px 16px 12px;
}
.bulk-hunt-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.bulk-hunt-head strong {
  color: var(--ink, #1d1b16);
  font-size: 14.5px;
  font-weight: 600;
}
.bulk-hunt-sub {
  color: var(--ink-mute, #7a766d);
  font-size: 12.5px;
}
.bulk-hunt-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.bulk-hunt-row {
  border-top: 1px solid var(--rule, #e6e1d8);
  padding: 8px 0;
}
.bulk-hunt-row:first-child { border-top: 0; }
.bulk-hunt-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.bulk-hunt-cb {
  margin-top: 3px;
  flex-shrink: 0;
}
.bulk-hunt-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bulk-hunt-album {
  color: var(--ink, #1d1b16);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
}
.bulk-hunt-meta {
  color: var(--ink-mute, #7a766d);
  font-size: 12px;
}
.bulk-hunt-row-done {
  opacity: 0.55;
}
.bulk-hunt-row-done .bulk-hunt-album::after {
  content: ' \2713';
  color: var(--accent, #4a7257);
  font-weight: 600;
}
.bulk-hunt-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bulk-hunt-status {
  color: var(--ink-mute, #7a766d);
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .bulk-title { font-size: 24px; }
  .bulk-drop { padding: 32px 16px; }
  .bulk-success-num { font-size: 48px; }
  .bulk-map-name, .bulk-map-sample { max-width: 120px; }
}

/* ---------- Discogs import (Add Album → From Discogs tab) ---------- */

/* MY-95: OAuth hero card - primary onboarding CTA on the Discogs Add tab.
   Token-paste form lives below in .discogs-advanced (collapsed by default). */
.discogs-oauth-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  margin: 16px 0 22px;
  border: 1px solid #5a1a1a;
  background: var(--bg-card);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
}
.discogs-oauth-hero[hidden] { display: none; }
.discogs-oauth-hero-copy strong {
  display: block;
  color: #5a1a1a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}
.discogs-oauth-hero-copy p {
  margin: 0;
  color: var(--ink, #1d1b16);
  font-size: 14px;
  line-height: 1.5;
}
.discogs-oauth-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.discogs-oauth-hero-actions .discogs-oauth-hero-meta {
  color: var(--muted, #6b6657);
  font-size: 12.5px;
}
.discogs-oauth-hero-status {
  margin: 0;
  min-height: 1em;
  color: var(--muted, #6b6657);
  font-size: 13px;
}

.discogs-advanced {
  margin: 6px 0 16px;
  border-top: 1px solid var(--rule, #e5e2d8);
  padding-top: 12px;
}
.discogs-advanced > summary {
  cursor: pointer;
  color: var(--muted, #6b6657);
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 4px 0;
  user-select: none;
  list-style: revert;
}
.discogs-advanced > summary:hover { color: #5a1a1a; }
.discogs-advanced[open] > summary { color: #5a1a1a; margin-bottom: 8px; }
.discogs-advanced-body {
  padding-top: 6px;
}

.discogs-conn {
  margin: 16px 0;
}
.discogs-conn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--rule, #e5e2d8);
  background: #f7f4ec;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
}
.discogs-conn-card strong {
  color: var(--ink, #1d1b16);
  font-weight: 600;
  font-size: 14px;
}
.discogs-conn-sub {
  color: var(--muted, #6b6657);
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.discogs-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.discogs-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.discogs-token-saved {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: -4px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }

/* Preview summary stats — horizontal 4-cell grid */
.dg-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 8px;
}
.dg-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--rule, #e5e2d8);
  background: #fbf9f3;
  border-radius: 8px;
  text-align: center;
}
.dg-summary-stat strong {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  line-height: 1;
  letter-spacing: -0.01em;
}
.dg-summary-stat span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted, #6b6657);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dg-summary-stat.dg-stat-new {
  background: #f0f5ee;
  border-color: #cdd9c5;
}
.dg-summary-stat.dg-stat-new strong { color: #3d5a30; }

.dg-truncated {
  margin: 10px 0;
  padding: 10px 12px;
  background: #fff7e6;
  border: 1px solid #ead8b0;
  border-radius: 6px;
  color: #6b5a28;
  font-size: 13px;
}

.dg-nothing {
  margin: 14px 0;
  padding: 14px;
  background: #f7f4ec;
  border: 1px dashed var(--rule, #e5e2d8);
  border-radius: 8px;
  color: var(--muted, #6b6657);
  text-align: center;
  font-style: italic;
}

.dg-import-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 4px;
  padding: 14px;
  background: #f0f5ee;
  border: 1px solid #cdd9c5;
  border-radius: 8px;
}

/* MY-261: degraded/throttled preview -- must read as an error needing a retry,
   never as the neutral "nothing new" state. */
.dg-degraded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 16px;
  background: #fbeceb;
  border: 1px solid #e0b4b0;
  border-left: 4px solid #b3261e;
  border-radius: 8px;
  color: #7a231c;
}
.dg-degraded p {
  margin: 0;
  line-height: 1.45;
}
.dg-degraded .btn-primary {
  align-self: flex-start;
}
.dg-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink, #1d1b16);
  cursor: pointer;
}
.dg-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3d5a30;
}

.dg-details {
  margin: 14px 0;
  border: 1px solid var(--rule, #e5e2d8);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.dg-details > summary {
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1d1b16);
  cursor: pointer;
  background: #f7f4ec;
  list-style: none;
  user-select: none;
}
.dg-details > summary::-webkit-details-marker { display: none; }
.dg-details > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--muted, #6b6657);
  transition: transform 0.15s ease;
}
.dg-details[open] > summary::before { transform: rotate(90deg); }

.dg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
.dg-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #fbf9f3;
  border-bottom: 1px solid var(--rule, #e5e2d8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted, #6b6657);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dg-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1eee4;
  color: var(--ink, #1d1b16);
  vertical-align: top;
}
.dg-table tbody tr:last-child td { border-bottom: 0; }
.dg-cell-artist { font-weight: 500; }
.dg-cell-year, .dg-cell-reason {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted, #6b6657);
}

@media (max-width: 640px) {
  .dg-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .dg-summary-stat strong { font-size: 22px; }
  .dg-table { font-size: 12px; }
  .dg-table thead th, .dg-table tbody td { padding: 8px 10px; }
}

/* ---------- Discogs enrichment progress strip (library hero) ---------- */
.discogs-format-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: end;
  margin: 6px 0 14px;
  padding: 22px 58px 22px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 15%, rgba(184, 138, 31, 0.18), transparent 32%),
    linear-gradient(135deg, #f7f0df 0%, #fbf8f0 68%);
  border: 1px solid rgba(90, 26, 38, 0.24);
  border-left: 4px solid #5a1a26;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(46, 28, 20, 0.07);
}
.discogs-format-banner-copy { max-width: 820px; }
.discogs-format-banner-kicker {
  display: block;
  margin-bottom: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a1a26;
}
.discogs-format-banner h2 {
  margin: 0 0 7px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.12;
  color: var(--ink, #1d1b16);
}
.discogs-format-banner p {
  margin: 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft, #5e594d);
}
.discogs-format-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 185px;
}
.discogs-format-banner-primary {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid #5a1a26;
  border-radius: 4px;
  background: #5a1a26;
  color: #fbf7ef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.discogs-format-banner-primary:hover {
  background: #45131c;
  border-color: #45131c;
}
.discogs-format-banner-dismiss {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft, #5e594d);
  font: 400 24px/30px Arial, sans-serif;
  cursor: pointer;
}
.discogs-format-banner-dismiss:hover,
.discogs-format-banner-dismiss:focus-visible {
  background: rgba(90, 26, 38, 0.09);
  color: #5a1a26;
}
@media (max-width: 720px) {
  .discogs-format-banner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    padding: 20px 46px 20px 19px;
  }
  .discogs-format-banner-actions {
    min-width: 0;
    width: 100%;
  }
}

.discogs-strip {
  margin: 6px 0 18px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid rgba(90, 26, 38, 0.22);
  border-left: 3px solid #5a1a26;
  border-radius: 6px;
}
.discogs-strip-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.discogs-strip-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.discogs-strip-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #5a1a26; font-weight: 700;
}
.discogs-strip-count {
  font-size: 14px; color: var(--ink, #1d1b16); font-weight: 500;
}
.discogs-strip-rem {
  font-size: 11px; color: #5a1a26; font-weight: 600;
  padding: 2px 8px; background: rgba(90, 26, 38, 0.08); border-radius: 3px;
}
.discogs-strip-done {
  font-size: 11px; color: #3d5a30; font-weight: 600;
  padding: 2px 8px; background: rgba(61, 90, 48, 0.10); border-radius: 3px;
}
.discogs-strip-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.discogs-strip-sync {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--ink-soft, #6b6657);
}
.discogs-strip-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 600;
  background: #5a1a26; color: #fbf7ef;
  border: 1px solid #5a1a26;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.discogs-strip-btn:hover { background: #45131c; border-color: #45131c; }
.discogs-strip-bar {
  margin-top: 10px; height: 4px;
  background: rgba(90, 26, 38, 0.10); border-radius: 2px; overflow: hidden;
}
.discogs-strip-bar-fill {
  height: 100%; background: #5a1a26;
  transition: width 0.4s ease;
}

/* ---------- Community: Most-held albums widget ---------- */
.popular-albums {
  margin: 0 0 44px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.10));
}
.popular-albums-head { margin-bottom: 22px; }
.popular-albums-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 12px;
}
.popular-albums-title {
  font: 600 28px/1.1 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink, #1c1c1a);
}
.popular-albums-sub {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 0;
  max-width: 560px;
}
.popular-albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.popular-albums-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 6px;
  align-items: flex-start;
}
.popular-albums-rank {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5a1a26;
  color: #fbf7ef;
  font: 600 13px/1 'Inter', sans-serif;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.popular-albums-cover {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  background: #f1eee4;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-albums-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popular-albums-card-novert {
  color: var(--ink-soft, #9a9a92);
  font-size: 24px;
}
.popular-albums-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.popular-albums-artist {
  font: 500 11px/1.2 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-albums-album {
  font: 600 16px/1.25 'Cormorant Garamond', 'Georgia', serif;
  margin: 0;
  color: var(--ink, #1c1c1a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.popular-albums-stat {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 6px 0 0;
}
.popular-albums-stat strong {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
}
.popular-albums-empty {
  padding: 20px 22px;
  background: #f7f4ec;
  border: 1px dashed var(--rule, rgba(0,0,0,0.18));
  border-radius: 6px;
}
.popular-albums-empty p {
  margin: 0;
  font: 400 14px/1.5 'Inter', sans-serif;
  color: var(--ink, #1c1c1a);
}
.popular-albums-empty-sub {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: var(--ink-soft, #6b6b66) !important;
}

@media (max-width: 640px) {
  .popular-albums-title { font-size: 24px; }
  .popular-albums-grid { grid-template-columns: 1fr; }
  .popular-albums-cover { flex-basis: 56px; width: 56px; height: 56px; }
}

/* ============================================================
   Brand mark variants — monochrome MVV monogram, archival imprint
   ============================================================ */
/* The brand mark is the FULL-color vinyl logo. No opacity tricks — the logo
   should read clearly wherever it appears. Sizes are tuned per surface. */
.brand-mark { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* Section titles — sits next to page h1's like "The Vault", "Next Spin".
   Sized to feel like a publisher's mark beside the headline, not a tiny dot. */
.brand-mark--section {
  height: 40px; width: 40px;
}

/* Album detail eyebrow — smaller, sits next to the "Album" pill. */
.brand-mark--meta {
  height: 22px; width: 22px;
}

/* Console eyebrow — next to the all-caps "THE CONSOLE" label. */
.brand-mark--label {
  height: 18px; width: 18px;
}

/* Footer lockup. */
.brand-mark--footer {
  height: 32px; width: 32px;
}

/* Ghost watermark behind the Console hero — large, very faint. */
.brand-mark--ghost {
  height: 180px; width: 180px;
  opacity: 0.08;
  position: absolute;
  pointer-events: none;
}

/* Loading / empty state — centered above the message. */
.brand-mark--empty {
  height: 56px; width: 56px;
  display: block;
  margin: 0 auto 14px;
  opacity: 0.85;
}

/* Success state (e.g. bulk import) — larger, celebratory. */
.brand-mark--hero {
  height: 72px; width: 72px;
  display: block;
  margin: 0 auto 18px;
}

/* About page — large, prominent brand display. */
.brand-mark--display {
  height: 180px; width: 180px;
  display: block;
  margin: 0 auto 28px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.22));
}

/* ghost watermark positioned in upper-right of the Console hero */
.hero-ghost {
  top: 12px;
  right: 16px;
}

/* page title row — h1 + section mark side by side */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.page-title-row > h1 { margin: 0; }

/* Album detail: eyebrow + meta brand mark together */
.album-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.album-eyebrow-row > .eyebrow { margin: 0; }

/* Bulk import success: subtle hero-size mark above the count */
.bulk-success-mark {
  margin-bottom: 8px;
}

/* Footer lockup: mark sits above the meta line, centered */
.site-footer .brand-mark--footer {
  margin: 0 auto 2px;
  display: block;
}

/* Console eyebrow: keep the brand mark snug with the kicker */
.console-eyebrow > .brand-mark--label {
  margin-right: 2px;
  /* sits next to "THE CONSOLE" all-caps label, NOT inside a chip */
}

@media (max-width: 640px) {
  .brand-mark--section { height: 32px; width: 32px; }
  .brand-mark--meta    { height: 18px; width: 18px; }
  .brand-mark--footer  { height: 26px; width: 26px; }
  .brand-mark--ghost   { height: 120px; width: 120px; }
  .brand-mark--empty   { height: 44px; width: 44px; }
  .brand-mark--hero    { height: 56px; width: 56px; }
  .brand-mark--display { height: 132px; width: 132px; margin-bottom: 22px; }
  .hero-ghost { top: 8px; right: 10px; }
}

/* === About page === */
.about-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
.about-hero {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.about-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.about-title {
  font: 600 52px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink, #1c1c1a);
}
.about-subtitle {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0 auto;
  max-width: 520px;
}
.about-letter {
  font: 400 17px/1.7 'Inter', sans-serif;
  color: var(--ink, #2a2622);
  max-width: 640px;
  margin: 0 auto;
}
.about-letter p {
  margin: 0 0 20px;
}
.about-salutation {
  font: 500 19px/1.5 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  color: var(--ink, #1c1c1a);
  margin-bottom: 24px !important;
}
.about-letter strong { font-weight: 600; color: var(--ink, #1c1c1a); }
.about-signoff {
  margin-top: 32px !important;
  padding-top: 24px;
  border-top: 1px solid var(--rule, rgba(0,0,0,0.10));
  font: 500 19px/1.4 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  color: var(--ink, #1c1c1a);
}
.about-signoff-meta {
  display: block;
  margin-top: 4px;
  font: 400 13px/1.4 'Inter', sans-serif;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #6b6b66);
}
.about-cta {
  margin: 56px auto 0;
  padding: 22px 24px;
  max-width: 640px;
  background: var(--surface-soft, rgba(0,0,0,0.025));
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
}
.about-cta-line {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  text-align: center;
}
.about-cta-line a { color: var(--accent, #5a1a26); text-decoration: underline; text-underline-offset: 2px; }
.about-cta-line a:hover { text-decoration: none; }

@media (max-width: 640px) {
  .about-page { padding: 40px 20px 64px; }
  .about-title { font-size: 38px; }
  .about-subtitle { font-size: 15px; }
  .about-letter { font-size: 16px; }
  .about-salutation { font-size: 17px; }
}

/* === Release notes / roadmap === */
.release-notes {
  max-width: 920px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
.release-hero {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.12));
}
.release-kicker {
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 14px;
}
.release-title {
  font: 600 44px/1.05 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink, #1c1c1a);
}
.release-lede {
  font: 400 16px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  max-width: 640px;
}
.release-section {
  margin-top: 56px;
}
.release-section:first-of-type { margin-top: 0; }
.release-h2 {
  font: 600 28px/1.15 'Cormorant Garamond', 'Georgia', serif;
  margin: 0 0 6px;
  color: var(--ink, #1c1c1a);
}
.release-section-lede {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #6b6b66);
  margin: 0 0 24px;
  max-width: 620px;
}
.release-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.release-feature {
  padding: 22px 22px 24px;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
  background: var(--surface, rgba(255,255,255,0.6));
}
.release-feature h3 {
  font: 600 17px/1.3 'Inter', sans-serif;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--ink, #1c1c1a);
}
.release-feature p {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
}
.release-roadmap,
.release-changelog {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.release-roadmap li,
.release-changelog li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
  background: var(--surface, rgba(255,255,255,0.6));
  align-items: start;
}
/* Monthly changelog uses a single tall <li> per month, so the side-by-side
   date/content grid (above) leaves the date pinned to the very top and out of
   sight as you scroll. Switch to a stacked layout for the changelog so the
   date sits above the content as a header strip. */
.release-changelog > li {
  display: block;
  padding: 18px 22px 20px;
}
.release-changelog > li > .release-changelog-date {
  display: block;
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.release-roadmap-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent, #5a1a26);
  color: #f1e7d2;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: start;
  width: max-content;
}
.release-changelog-date {
  font: 500 12px/1.3 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  align-self: start;
  padding-top: 2px;
}
.release-roadmap li > div,
.release-changelog li > div {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
}
.release-roadmap li > div strong,
.release-changelog li > div strong {
  display: block;
  font: 600 15px/1.4 'Inter', sans-serif;
  color: var(--ink, #1c1c1a);
  margin-bottom: 3px;
}
/* Monthly changelog: themed sub-sections inside a single month <li>.
   The header is intentionally quiet (small caps, low contrast) so it reads
   as a divider, not a section heading competing with the page <h2>. */
.release-changelog-theme {
  font: 600 11px/1.3 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b66);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,0.08));
}
.release-changelog-theme:first-child {
  margin-top: 0;
}
.release-changelog-bullets {
  list-style: disc outside;
  padding: 0 0 0 20px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.release-changelog-bullets li {
  /* Override the parent grid layout so nested bullets render as normal list items. */
  display: list-item;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
}
.release-changelog-bullets li::marker {
  color: var(--ink-soft, #9a9a93);
}
/* Inline lead-in inside each bullet. Specificity needs to beat
   `.release-changelog li > div strong { display: block }` above, so we match
   the same depth-of-nesting (li > div > ul > li > strong). */
.release-changelog li > div .release-changelog-bullets li strong,
.release-changelog-bullets li strong {
  display: inline;
  font: 600 14px/1.55 'Inter', sans-serif;
  color: var(--ink, #1c1c1a);
  margin: 0;
  margin-right: 4px;
}
/* Major initiative blocks — mobile, community redesign, etc. */
.release-initiative {
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 10px;
  padding: 26px 26px 22px;
  background: var(--surface, rgba(255,255,255,0.65));
  margin-bottom: 20px;
}
.release-initiative:last-child { margin-bottom: 0; }
.release-initiative-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.release-initiative-title {
  font: 600 22px/1.2 'Cormorant Garamond', 'Georgia', serif;
  margin: 0;
  color: var(--ink, #1c1c1a);
}
.release-initiative-lede {
  font: 400 15px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0 0 18px;
  max-width: 720px;
}
.tag-initiative {
  background: #1c1c1a;
  color: #f1e7d2;
}
.release-phase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.release-phase-list > li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--rule, rgba(0,0,0,0.08));
  border-radius: 7px;
  background: var(--surface-soft, rgba(0,0,0,0.018));
  align-items: start;
}
.release-phase-label {
  font: 600 11px/1.3 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #5a1a26);
  padding-top: 3px;
}
.release-phase-list > li p {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
}
@media (max-width: 720px) {
  .release-phase-list > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.release-cta {
  margin-top: 56px;
  padding: 22px 24px;
  background: var(--surface-soft, rgba(0,0,0,0.025));
  border: 1px solid var(--rule, rgba(0,0,0,0.10));
  border-radius: 8px;
}
.release-cta-line {
  font: 400 14px/1.6 'Inter', sans-serif;
  color: var(--ink-soft, #5a5a55);
  margin: 0;
  text-align: center;
}
.release-cta-line a { color: var(--accent, #5a1a26); text-decoration: underline; text-underline-offset: 2px; }
.release-cta-line a:hover { text-decoration: none; }

@media (max-width: 640px) {
  .release-notes { padding: 32px 20px 64px; }
  .release-title { font-size: 34px; }
  .release-section { margin-top: 40px; }
  .release-h2 { font-size: 24px; }
  .release-roadmap li,
  .release-changelog li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Footer links — small text links sitting under the brand mark */
.footer-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
  font: 400 12px/1.4 'Inter', sans-serif;
  letter-spacing: 0.04em;
}
.footer-links a {
  color: var(--ink-soft, #6b6b66);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.footer-links a:hover {
  color: var(--ink, #1c1c1a);
  border-bottom-color: var(--ink, #1c1c1a);
}
.footer-links .footer-link-sep {
  color: var(--ink-soft, #b8b3ad);
  user-select: none;
}

/* =============================================================================
   Upgrade Paths v2 — library-driven row layout (cream + maroon + moss palette)
   ============================================================================= */

.vp-upgrade-teaser-slot:empty { display: none; }
.vp-upgrade-teaser {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(280px, 1.6fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(90,26,26,0.18);
  border-left: 4px solid var(--accent-maroon, #6b1f2a);
  border-radius: 8px;
  background: linear-gradient(135deg, #fdf8ed 0%, #f4ead8 100%);
}
.vp-upgrade-teaser-copy h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font: 700 18px/1.2 var(--font-display, Georgia, serif);
}
.vp-upgrade-teaser-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.vp-upgrade-teaser-kicker {
  color: var(--accent-maroon, #6b1f2a);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vp-upgrade-teaser-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.vp-upgrade-teaser-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  border: 1px solid rgba(26,23,20,0.10);
  border-radius: 6px;
  background: rgba(255,255,255,0.56);
}
.vp-upgrade-teaser-card strong,
.vp-upgrade-teaser-card span,
.vp-upgrade-teaser-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-upgrade-teaser-card > span:not(.vp-upgrade-teaser-tier) {
  color: var(--ink-soft);
  font-size: 12px;
}
.vp-upgrade-teaser-card small { color: var(--ink-mute); font-size: 10.5px; }
.vp-upgrade-teaser-tier {
  width: max-content;
  margin-bottom: 3px;
  font: 700 9px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.upgrade-intro {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f6efe2 100%);
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 8px;
}
.upgrade-intro-lede {
  margin: 0 0 12px;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink, #1c1c1a);
  font-size: 0.95rem;
  line-height: 1.45;
}
.upgrade-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.upgrade-subtab {
  background: transparent;
  border: 1px solid var(--ink-line, #d9d2c5);
  color: var(--ink, #1c1c1a);
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upgrade-subtab:hover {
  border-color: var(--accent-maroon, #6b1f2a);
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-subtab.active {
  background: var(--accent-maroon, #6b1f2a);
  border-color: var(--accent-maroon, #6b1f2a);
  color: #f6efe2;
}
.upgrade-subtab-n {
  font-size: 0.75rem;
  opacity: 0.75;
}
.upgrade-subtab.active .upgrade-subtab-n { opacity: 0.95; }

@media (max-width: 760px) {
  .vp-upgrade-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .vp-upgrade-teaser-cards { grid-template-columns: 1fr; }
  .vp-upgrade-teaser .vp-btn { width: 100%; justify-content: center; }
}

.upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upgrade-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: #fdfaf3;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-left: 3px solid var(--ink-line, #d9d2c5);
  border-radius: 6px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.upgrade-row:hover {
  border-color: var(--ink-soft, #b8b3ad);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.upgrade-row-pinned {
  border-left-color: var(--accent-maroon, #6b1f2a);
  background: linear-gradient(180deg, #fdfaf3 0%, #f9f0e1 100%);
}
.upgrade-row-dismissed {
  opacity: 0.7;
  border-left-color: var(--ink-soft, #b8b3ad);
}

.upgrade-row-cover {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0e9d8;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-soft, #b8b3ad);
}
.upgrade-row-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.upgrade-row-cover-placeholder {
  font-size: 1.8rem;
}

.upgrade-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-row-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-row-title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--ink, #1c1c1a);
  font-weight: 600;
}
.upgrade-row-title a {
  color: inherit;
  text-decoration: none;
}
.upgrade-row-title a:hover { color: var(--accent-maroon, #6b1f2a); }
.upgrade-row-artist {
  font-weight: 400;
  color: var(--ink-mid, #5b574e);
  font-size: 0.95rem;
}
.upgrade-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.upgrade-row-currentline {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.85rem;
  color: var(--ink-mid, #5b574e);
}
.upgrade-row-currentlbl {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
  margin-right: 4px;
}
.upgrade-row-raritynote {
  margin: 2px 0 0 0;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.82rem;
  color: var(--ink-mid, #5b574e);
  line-height: 1.45;
  font-style: italic;
}
.upgrade-row-raritynote .upgrade-row-currentlbl {
  font-style: normal;
}
.upgrade-row-play, .upgrade-row-val {
  font-size: 0.78rem;
  color: var(--ink-mid, #5b574e);
}
.upgrade-row-val { font-variant-numeric: tabular-nums; }

/* Rarity pills — match Grail/Scarce/Uncommon/Common palette used elsewhere */
.upgrade-pill-grail    { background: #2a1a1f; color: #f6efe2; }
.upgrade-pill-scarce   { background: var(--accent-maroon, #6b1f2a); color: #f6efe2; }
.upgrade-pill-uncommon { background: #cfc0a4; color: #1c1c1a; }
.upgrade-pill-common   { background: #ece2cf; color: #1c1c1a; }
.upgrade-pill-n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  opacity: 0.75;
}

.upgrade-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Options drawer */
.upgrade-options {
  margin-top: 6px;
  padding: 12px 14px;
  background: #fbf7ef;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 5px;
}
.upgrade-options[hidden] { display: none; }
.upgrade-options-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upgrade-options-loading {
  font-style: italic;
  color: var(--ink-mid, #5b574e);
  display: flex;
  align-items: center;
  gap: 8px;
}
.upgrade-options-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--ink-line, #d9d2c5);
  border-top-color: var(--accent-maroon, #6b1f2a);
  border-radius: 50%;
  animation: upgradeSpin 0.8s linear infinite;
}
@keyframes upgradeSpin { to { transform: rotate(360deg); } }
.upgrade-options-error {
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-options-summary {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink, #1c1c1a);
  font-size: 0.92rem;
  line-height: 1.5;
}
.upgrade-options-current {
  margin: 0;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink-mid, #5b574e);
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 8px 10px;
  background: #f3ecdc;
  border-left: 3px solid var(--ink-line, #d9d2c5);
  border-radius: 3px;
}
.upgrade-options-currentlbl {
  font-weight: 600;
  color: var(--ink, #1c1c1a);
  margin-right: 4px;
}
.upgrade-version-better {
  margin: 6px 0 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--ink-line, #d9d2c5);
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.86rem;
  color: var(--ink, #1c1c1a);
  line-height: 1.45;
}
.upgrade-version-betterlbl {
  font-weight: 600;
  color: var(--accent-moss, #4f6f44);
  margin-right: 4px;
}

.upgrade-version {
  padding: 10px 12px;
  background: #fdfaf3;
  border: 1px solid var(--ink-line, #d9d2c5);
  border-radius: 4px;
}
.upgrade-version-preferred {
  border-left: 3px solid var(--accent-moss, #4f6f44);
}
.upgrade-version-backup {
  border-left: 3px solid var(--ink-line, #d9d2c5);
}
.upgrade-version-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 4px;
}
.upgrade-version-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--accent-moss, #4f6f44);
}
.upgrade-version-backup .upgrade-version-label { color: var(--ink-mid, #5b574e); }
.upgrade-version-why {
  font-size: 0.85rem;
  color: var(--ink-mid, #5b574e);
  font-style: italic;
}
.upgrade-version-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.9rem;
  color: var(--ink, #1c1c1a);
}
.upgrade-backups {
  font-size: 0.88rem;
}
.upgrade-backups > summary {
  cursor: pointer;
  font-family: var(--font-body, Georgia, serif);
  color: var(--ink-mid, #5b574e);
  padding: 4px 0;
}
.upgrade-backups[open] > summary { color: var(--ink, #1c1c1a); }
.upgrade-avoid {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--accent-maroon, #6b1f2a);
}
.upgrade-avoid-lbl {
  font-weight: 600;
  margin-right: 4px;
}
.upgrade-options-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.upgrade-options-stamp {
  font-size: 0.72rem;
  color: var(--ink-soft, #b8b3ad);
  font-style: italic;
}

@media (max-width: 560px) {
  .upgrade-row {
    grid-template-columns: 64px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }
  .upgrade-row-cover { width: 64px; height: 64px; }
  .upgrade-row-title { font-size: 1rem; }
}

/* ============================ Catalog-number intake ============================ */
.catalog-candidate-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.catalog-candidate {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(90, 26, 38, 0.18);
  background: #fdf9ef;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.catalog-candidate:hover,
.catalog-candidate:focus-visible {
  border-color: var(--accent-moss, #4f6f44);
  background: #fbf5e3;
  outline: none;
}
.catalog-candidate-title {
  font-weight: 600;
  color: var(--ink, #1d1b16);
  margin-bottom: 2px;
}
.catalog-candidate-meta {
  font-size: 0.875rem;
  color: var(--text-muted, #6c5a4e);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* === Bug report modal === */
.bug-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 12, 10, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.bug-modal {
  background: #f6efe0; color: #1a1714;
  border: 1px solid rgba(26, 23, 20, 0.15);
  border-radius: 10px;
  max-width: 640px; width: 100%;
  padding: 28px 28px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  font-family: 'Inter', system-ui, sans-serif;
}
.bug-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.bug-modal-head h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 28px;
  margin: 0; color: #1a1714;
}
.bug-modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: #5a1a26;
  padding: 4px 10px; border-radius: 4px;
}
.bug-modal-close:hover { background: rgba(90, 26, 38, 0.1); }
.bug-modal-lede {
  font-size: 14px; color: #5a4a3e; margin: 0 0 18px;
  line-height: 1.5;
}
.bug-form { display: flex; flex-direction: column; gap: 14px; }
.bug-field { display: flex; flex-direction: column; gap: 4px; }
.bug-field-label { font-size: 13px; font-weight: 600; color: #2a221e; }
.bug-req { color: #5a1a26; }
.bug-field input[type="text"],
.bug-field textarea,
.bug-field select {
  font: inherit; font-size: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(26, 23, 20, 0.2);
  border-radius: 6px;
  background: #fffdf5;
  color: #1a1714;
  width: 100%;
}
.bug-field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.bug-field input:focus, .bug-field textarea:focus, .bug-field select:focus {
  outline: 2px solid #5a1a26; outline-offset: 1px;
}
.bug-field input[type="file"] { font-size: 13px; }
.bug-field-hint { font-size: 12px; color: #6c5a4e; }
.bug-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .bug-field-row { grid-template-columns: 1fr; } }
.bug-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 6px;
}
.bug-btn-primary, .bug-btn-secondary {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.bug-btn-primary {
  background: #5a1a26; color: #f1e7d2; border-color: #5a1a26;
}
.bug-btn-primary:hover { background: #6b1f2d; }
.bug-btn-primary:disabled { opacity: 0.6; cursor: default; }
.bug-btn-secondary {
  background: transparent; color: #2a221e;
  border-color: rgba(26, 23, 20, 0.25);
}
.bug-btn-secondary:hover { background: rgba(26, 23, 20, 0.05); }
.bug-form-status { font-size: 13px; min-height: 18px; }
.bug-form-status.is-success { color: #2a6b3a; }
.bug-form-status.is-error { color: #8a1f2a; }

/* === Admin bugs table === */
.admin-bugs { margin-top: 12px; }
.admin-bug-table { font-size: 14px; }
.admin-bug-table th { white-space: nowrap; }
.admin-bug-toggle {
  background: transparent; border: none; cursor: pointer;
  color: #5a1a26; font-weight: 600; padding: 2px 0;
  text-align: left; font: inherit; font-size: 14px;
  text-decoration: underline; text-decoration-thickness: 1px;
}
.admin-bug-toggle:hover { color: #1a1714; }
.admin-bug-sev {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-bug-sev.sev-low { background: rgba(108, 90, 78, 0.15); color: #6c5a4e; }
.admin-bug-sev.sev-medium { background: rgba(180, 130, 50, 0.18); color: #8a5a1a; }
.admin-bug-sev.sev-high { background: rgba(170, 60, 40, 0.18); color: #8a2a20; }
.admin-bug-sev.sev-critical { background: #5a1a26; color: #f1e7d2; }
.admin-bug-status {
  font: inherit; font-size: 13px;
  padding: 4px 6px; border-radius: 4px;
  border: 1px solid rgba(26, 23, 20, 0.2);
  background: #fffdf5;
}
.admin-bug-row[data-status="fixed"] { opacity: 0.55; }
.admin-bug-row[data-status="wontfix"] { opacity: 0.45; font-style: italic; }
.admin-bug-uid { color: #8a7a6c; font-size: 12px; }
.admin-bug-delete {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: #8a1f2a;
  padding: 0 8px; border-radius: 4px;
}
.admin-bug-delete:hover { background: rgba(138, 31, 42, 0.1); }
.admin-bug-detail {
  padding: 14px 18px 16px; background: rgba(241, 231, 210, 0.5);
  border-radius: 6px; margin: 4px 0 10px;
}
.admin-bug-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 22px; margin-bottom: 12px;
}
.admin-bug-detail-grid h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #6c5a4e; margin: 0 0 4px;
}
.admin-bug-detail-grid p {
  margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap;
}
.admin-bug-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #6c5a4e; word-break: break-all; }
.admin-bug-notes-label {
  display: block; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #6c5a4e; margin-bottom: 4px;
}
.admin-bug-notes {
  width: 100%; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(26, 23, 20, 0.2);
  background: #fffdf5; color: #1a1714;
  resize: vertical;
}
.admin-bug-notes-actions {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-end; margin-top: 6px;
}
.admin-bug-notes-saved { font-size: 13px; color: #2a6b3a; }
.admin-bug-notes-save {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  background: #5a1a26; color: #f1e7d2; border: 1px solid #5a1a26;
}
.admin-bug-notes-save:hover { background: #6b1f2d; }
.admin-bug-notes-save:disabled { opacity: 0.6; cursor: default; }

/* Feature requests: reuse bug-modal-* and admin-bug-* patterns. */
.feature-modal-backdrop { /* shares all rules with .bug-modal-backdrop */ }
.bug-field-checkbox { flex-direction: row; align-items: center; gap: 10px; }
.bug-field-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: #5a1a26; }
.bug-field-checkbox span { font-size: 14px; color: #3a302a; }
.admin-feature-requests { margin-top: 12px; }
.admin-feature-row[data-status="shipped"] { opacity: 0.55; }
.admin-feature-row[data-status="declined"] { opacity: 0.45; font-style: italic; }
.admin-bug-sev { /* category badges use the medium tone neutrally */ }
.admin-feature-tester {
  display: inline-block; margin-left: 6px;
  color: #2d6a3f; font-weight: 700;
  font-size: 13px;
}

/* ============================================
   Growth plan (admin-only, owner-gated)
   Mirrors editorial cream + maroon aesthetic.
   ============================================ */
.admin-growth {
  margin-top: 24px;
}
.growth-doc {
  background: #f7f3ea;
  border: 1px solid #d4c9b8;
  border-radius: 4px;
  padding: 28px 32px;
  font-family: var(--font-body, "Inter", sans-serif);
  color: var(--ink, #1a1714);
  line-height: 1.55;
}
.growth-confidential {
  background: #5a1a26;
  color: #f7f3ea;
  padding: 10px 14px;
  border-radius: 3px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 18px;
  text-align: center;
}
.growth-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d4c9b8;
}
.growth-lede {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink, #1a1714);
  margin: 0 0 22px;
  font-style: italic;
}
.growth-northstar {
  background: rgba(90, 26, 38, 0.06);
  border-left: 3px solid #5a1a26;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.growth-northstar h3 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: #5a1a26;
  margin: 0 0 8px;
}
.growth-northstar p {
  margin: 0;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.growth-section {
  margin: 14px 0;
  border-top: 1px solid #d4c9b8;
  padding-top: 14px;
}
.growth-section[open] {
  padding-bottom: 8px;
}
.growth-section > summary {
  cursor: pointer;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.growth-section > summary::-webkit-details-marker { display: none; }
.growth-section > summary::before {
  content: "▸";
  color: #5a1a26;
  display: inline-block;
  width: 18px;
  font-size: 13px;
  transition: transform 0.15s ease;
}
.growth-section[open] > summary::before {
  transform: rotate(90deg);
}
.growth-body {
  padding: 10px 0 4px 18px;
}
.growth-body h4 {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 16px 0 6px;
  text-transform: none;
  letter-spacing: 0;
}
.growth-body p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.growth-body ul, .growth-body ol {
  margin: 6px 0 12px;
  padding-left: 22px;
}
.growth-body li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.growth-body code {
  background: rgba(26, 23, 20, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.growth-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 13.5px;
  background: #fffcf6;
  border: 1px solid #d4c9b8;
}
.growth-table th {
  text-align: left;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  color: var(--ink-muted, #5f5448);
  padding: 9px 12px;
  background: #efe8d8;
  border-bottom: 1px solid #d4c9b8;
}
.growth-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #e9dfcb;
  vertical-align: top;
  color: var(--ink);
}
.growth-table tr:last-child td { border-bottom: none; }
.growth-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 2px;
  background: #e3dccb;
  color: #5f5448;
  border: 1px solid #d4c9b8;
}
.growth-pill-live {
  background: #d8ead8;
  color: #2d6a3f;
  border-color: #b9d6b9;
}
.growth-pill-planned {
  background: #e0e7f3;
  color: #2c4a7a;
  border-color: #c5d2e6;
}
.growth-pill-next {
  background: #f5e6c2;
  color: #7a5a18;
  border-color: #e6d3a0;
}
.growth-pill-future {
  background: #ece6da;
  color: #6a6051;
  border-color: #d4c9b8;
}
.growth-mathbox {
  background: rgba(26, 23, 20, 0.04);
  border-left: 2px solid #5a1a26;
  padding: 10px 14px;
  margin: 10px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  border-radius: 0 3px 3px 0;
}
.growth-mathbox-sub {
  font-size: 11px;
  color: var(--ink-muted, #5f5448);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.growth-numbered {
  counter-reset: gnum;
  margin: 8px 0 4px;
  padding-left: 0;
  list-style: none;
}
.growth-numbered > li {
  counter-increment: gnum;
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.growth-numbered > li::before {
  content: counter(gnum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #5a1a26;
  font-weight: 700;
  padding-top: 3px;
}
.growth-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #d4c9b8;
  font-size: 12px;
  color: var(--ink-muted, #5f5448);
  font-style: italic;
}
.growth-footer code {
  background: rgba(26, 23, 20, 0.06);
  padding: 1px 5px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
@media (max-width: 640px) {
  .growth-doc { padding: 20px 18px; }
  .growth-table { font-size: 12.5px; }
  .growth-table th, .growth-table td { padding: 7px 8px; }
  .growth-section > summary { font-size: 17px; }
}

/* ============================================
   "Find this record" — affiliate links
   Two surfaces: compact right-rail stack inside
   album-info, and a full card lower on the page.
   ============================================ */

/* --- Compact stack (album hero, below album-actions) --- */
.album-find-stack {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(26, 23, 20, 0.14);
}
.album-find-stack-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  color: var(--ink-muted, #5f5448);
  margin-bottom: 8px;
}
.album-find-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.find-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 7px;
  border-radius: 3px;
  background: #fffcf6;
  border: 1px solid rgba(26, 23, 20, 0.14);
  color: var(--ink, #1a1714);
  text-decoration: none;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.find-icon:hover {
  border-color: rgba(90, 26, 38, 0.45);
  background: #fff;
  transform: translateY(-1px);
}
.find-icon-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: #1a1714;
  color: #f7f3ea;
}
.find-icon-label {
  letter-spacing: 0.02em;
}
/* Per-platform mark tints — muted, not pure brand. */
.find-icon-discogs .find-icon-mono { background: #1a1714; color: #f7f3ea; }
.find-icon-amazon  .find-icon-mono { background: #2a2520; color: #f5b34a; }
.find-icon-ebay    .find-icon-mono { background: #e2333c; color: #fffcf6; }


/* --- Full card lower on the page --- */
.album-find-card {
  margin: 28px 0;
  background: #f7f3ea;
  border: 1px solid #d4c9b8;
  border-radius: 4px;
  padding: 22px 24px 18px;
}
.find-card-head {
  margin-bottom: 14px;
  border-bottom: 1px solid #d4c9b8;
  padding-bottom: 12px;
}
.find-card-head h2 {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ink, #1a1714);
}
.find-card-sub {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 13px;
  color: var(--ink-muted, #5f5448);
  margin: 0;
}
.find-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.find-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #fffcf6;
  border: 1px solid rgba(26, 23, 20, 0.12);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink, #1a1714);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.find-btn:hover {
  border-color: rgba(90, 26, 38, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(26, 23, 20, 0.05);
}
.find-btn-mark {
  flex: 0 0 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  background: #1a1714;
  color: #f7f3ea;
}
.find-btn-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.find-btn-platform {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1a1714);
  letter-spacing: 0.01em;
}
.find-btn-blurb {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12.5px;
  color: var(--ink-muted, #5f5448);
}
.find-btn-arrow {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-muted, #5f5448);
  opacity: 0.7;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.find-btn:hover .find-btn-arrow {
  opacity: 1;
  color: #5a1a26;
  transform: translate(2px, -2px);
}
/* Per-platform mark tints for the card. */
.find-btn-discogs .find-btn-mark { background: #1a1714; color: #f7f3ea; }
.find-btn-amazon  .find-btn-mark { background: #2a2520; color: #f5b34a; }
.find-btn-ebay    .find-btn-mark { background: #e2333c; color: #fffcf6; }


.find-card-disclosure {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid #d4c9b8;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 11.5px;
  color: var(--ink-muted, #5f5448);
  font-style: italic;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .album-find-card { padding: 18px 16px 14px; }
  .find-card-grid { grid-template-columns: 1fr 1fr; }
  .find-btn { padding: 12px 10px; gap: 10px; }
  .find-btn-mark { flex-basis: 32px; height: 32px; font-size: 15px; }
  .find-btn-platform { font-size: 15px; }
  .find-btn-blurb { font-size: 12px; }
}
@media (max-width: 420px) {
  .find-card-grid { grid-template-columns: 1fr; }
}

/* --- Compact find-stack variant for Vault Path cards + Arc steps --- */
.album-find-stack-compact {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(26, 23, 20, 0.10);
}
.album-find-stack-compact .album-find-stack-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
}
.album-find-stack-compact .find-icon {
  padding: 4px 8px 4px 5px;
  font-size: 11.5px;
  gap: 6px;
}
.album-find-stack-compact .find-icon-mono {
  width: 17px;
  height: 17px;
  font-size: 10px;
}
.album-find-stack-compact .album-find-stack-row {
  gap: 6px;
}
/* Vault arc steps: stack sits between chips and the bought-link footer. */
.vp-arc-step .album-find-stack-compact {
  border-top: none;
  padding-top: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.vp-arc-step.is-done .album-find-stack-compact { display: none; }
/* Vault path cards: keep the stack visually grouped with the recommendation body. */
.vp-card .album-find-stack-compact {
  border-top: 1px dashed rgba(26, 23, 20, 0.12);
  margin: 10px 0 4px;
}
.vp-card-resolved .album-find-stack-compact { display: none; }

/* =============================================================================
   Active Hunts tab — compact rows, want meter slider, score breakdown.
   Editorial / collector aesthetic: tight grid, low-chrome controls, the
   composite priority chip is the only loud accent (tasteful green) so the eye
   lands on the prioritization signal without making the list feel game-y.
   ============================================================================= */
.hunts-intro {
  margin: 0 0 18px;
  padding: 0;
}
.hunts-intro-lede {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.72);
}
.hunts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hunt-row {
  background: var(--surface, #fff);
  border: 1px solid rgba(26, 23, 20, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hunt-row:hover {
  border-color: rgba(26, 23, 20, 0.22);
  box-shadow: 0 1px 0 rgba(26, 23, 20, 0.04);
}
.hunt-row-main {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: flex-start;
}
.hunt-cover {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: 1px solid rgba(26, 23, 20, 0.1);
}
.hunt-cover-blank {
  /* MVV vinyl LP mark on a soft cream wash. Centered, scaled to 72% of the tile. */
  background-color: rgba(26, 23, 20, 0.04);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='%2315110f'/%3E%3Cg fill='none' stroke='%232a2520' stroke-width='0.8' opacity='0.7'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Ccircle cx='100' cy='100' r='84'/%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Ccircle cx='100' cy='100' r='72'/%3E%3Ccircle cx='100' cy='100' r='66'/%3E%3Ccircle cx='100' cy='100' r='60'/%3E%3Ccircle cx='100' cy='100' r='54'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='48' fill='%235a1a26'/%3E%3Cg transform='translate(100 100) scale(0.78) translate(-100 -110)' stroke='%23f1e7d2' stroke-linecap='square'%3E%3Cline x1='40' y1='115' x2='70' y2='40' stroke-width='10'/%3E%3Cline x1='130' y1='40' x2='160' y2='115' stroke-width='10'/%3E%3Cline x1='25' y1='110' x2='60' y2='180' stroke-width='10'/%3E%3Cline x1='140' y1='180' x2='175' y2='110' stroke-width='10'/%3E%3Cline x1='60' y1='180' x2='130' y2='40' stroke-width='12'/%3E%3Cline x1='140' y1='180' x2='70' y2='40' stroke-width='12'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='3.5' fill='%231a1714'/%3E%3Ccircle cx='100' cy='100' r='1.2' fill='%23f1e7d2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 88%;
}
.hunt-row-body {
  min-width: 0;
}
.hunt-row-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.hunt-title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink, #1a1714);
}
.hunt-year {
  font-weight: 400;
  color: rgba(26, 23, 20, 0.55);
  font-size: 0.88rem;
  margin-left: 4px;
}
/* Title-as-button: opens the pressing-details drawer. Inherits typographic
   styling from .hunt-title so the visual hierarchy is unchanged. */
.hunt-title-btn {
  display: inline; appearance: none; background: none; border: 0;
  padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-align: left; cursor: pointer; line-height: inherit;
}
.hunt-title-btn:hover { color: var(--accent-ink, #4f6f44); }
.hunt-title-btn:focus-visible {
  outline: 2px solid var(--accent-moss, #4f6f44);
  outline-offset: 3px; border-radius: 2px;
}
.hunt-title-chev {
  display: inline-block; margin-left: 4px;
  font-weight: 500; color: rgba(26, 23, 20, 0.4);
  transition: transform 160ms ease;
}
.hunt-title-btn[aria-expanded="true"] .hunt-title-chev {
  transform: rotate(90deg); color: var(--accent-ink, #4f6f44);
}
.hunt-artist {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(26, 23, 20, 0.7);
}
.hunt-reason {
  margin: 6px 0 8px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(26, 23, 20, 0.62);
  font-style: italic;
}
.hunt-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hunt-want {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(26, 23, 20, 0.7);
}
.hunt-want-label {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hunt-want-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 4px;
  background: rgba(26, 23, 20, 0.14);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.hunt-want-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #3f6b3a);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(26, 23, 20, 0.25);
  cursor: pointer;
}
.hunt-want-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent, #3f6b3a);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(26, 23, 20, 0.25);
  cursor: pointer;
}
.hunt-want-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(63, 107, 58, 0.3);
}
.hunt-want-value {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink, #1a1714);
}
.hunt-why {
  font-size: 0.85rem;
  color: rgba(26, 23, 20, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hunt-why:hover { color: var(--ink, #1a1714); }
.hunt-why-icon {
  display: inline-block;
  font-size: 0.9em;
  width: 1em;
  text-align: center;
  transition: transform 0.12s ease;
}
.hunt-row-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding-top: 2px;
}
.hunt-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--accent, #3f6b3a);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hunt-score-empty {
  background: rgba(26, 23, 20, 0.08);
  color: rgba(26, 23, 20, 0.5);
  font-weight: 500;
}

/* Tier colors. Lower display priority = higher tier. */
.hunt-tier-grail   { background: #5a1a26; color: #f1e7d2; }  /* maroon, brand-aligned */
.hunt-tier-high    { background: #8a5a1a; color: #f7eedb; }  /* amber */
.hunt-tier-medium  { background: #3f6b3a; color: #fff; }     /* default green */
.hunt-tier-casual  { background: rgba(26, 23, 20, 0.55); color: #f1e7d2; } /* muted slate */
.hunt-tier-unscored { background: rgba(26, 23, 20, 0.08); color: rgba(26, 23, 20, 0.5); }

/* The label sits above the chip and tints to match. */
.hunt-tier-label {
  font-size: 0.62rem;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-bottom: 3px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(26, 23, 20, 0.06);
  color: rgba(26, 23, 20, 0.7);
}
.hunt-tier-label-grail   { background: rgba(90, 26, 38, 0.12);  color: #5a1a26; }
.hunt-tier-label-high    { background: rgba(138, 90, 26, 0.12); color: #6e4615; }
.hunt-tier-label-medium  { background: rgba(63, 107, 58, 0.12); color: #2f5a2c; }
.hunt-tier-label-casual  { background: rgba(26, 23, 20, 0.08);  color: rgba(26, 23, 20, 0.6); }

.hunt-score-caption {
  font-size: 0.7rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: rgba(26, 23, 20, 0.5);
  margin-top: 2px;
}
.hunt-why-body {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(26, 23, 20, 0.025);
  border-radius: 8px;
  border: 1px solid rgba(26, 23, 20, 0.06);
}
.hunt-bd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hunt-bd-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hunt-bd-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.82rem;
}
.hunt-bd-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: rgba(26, 23, 20, 0.7);
  font-weight: 600;
}
.hunt-bd-value {
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1a1714);
  font-weight: 600;
}
.hunt-bd-max {
  color: rgba(26, 23, 20, 0.4);
  font-weight: 400;
  font-size: 0.82em;
}
.hunt-bd-bar {
  height: 4px;
  background: rgba(26, 23, 20, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.hunt-bd-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #3f6b3a);
  border-radius: 999px;
  transition: width 0.18s ease;
}
.hunt-bd-note {
  font-size: 0.78rem;
  color: rgba(26, 23, 20, 0.55);
  font-style: italic;
}
.hunt-bd-totals {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(26, 23, 20, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hunt-bd-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.86rem;
}
.hunt-bd-total-label {
  color: rgba(26, 23, 20, 0.7);
}
.hunt-bd-total-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink, #1a1714);
}
.hunt-bd-total-row-composite .hunt-bd-total-label,
.hunt-bd-total-row-composite .hunt-bd-total-value {
  color: var(--accent-strong, #2f5530);
  font-weight: 700;
}
.hunt-bd-formula {
  margin: 6px 0 0;
  font-size: 0.78rem;
  text-align: right;
  font-style: italic;
}
.hunt-row-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(26, 23, 20, 0.08);
}
.hunts-empty {
  padding: 24px 0;
}
/* MY-72: inline toast above the Active Hunts list (e.g. duplicate-add notice). */
.hunts-inline-toast {
  display: none;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid #5a1a1a;
  background: rgba(90, 26, 26, 0.06);
  color: #5a1a1a;
  font: 500 14px/1.4 Georgia, "Times New Roman", serif;
  border-radius: 2px;
  transition: opacity 360ms ease;
  opacity: 0;
}
.hunts-inline-toast-visible {
  display: block;
  opacity: 1;
}
.hunts-inline-toast-fade {
  display: block;
  opacity: 0;
}
.vp-quota-upgrade {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 6px 10px;
  border: 1px solid #5a1a1a;
  border-radius: 999px;
  color: #5a1a1a;
  background: #fffaf0;
  font: 700 12px/1.2 Inter, system-ui, sans-serif;
  text-decoration: none;
  animation: vp-quota-upgrade-flash 650ms ease-in-out 3;
}
.vp-quota-upgrade:hover,
.vp-quota-upgrade:focus-visible {
  color: #fffaf0;
  background: #5a1a1a;
  outline: none;
}
@keyframes vp-quota-upgrade-flash {
  50% { box-shadow: 0 0 0 5px rgba(90, 26, 26, 0.16); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-quota-upgrade { animation: none; }
}
@media (max-width: 600px) {
  .hunt-row-main { grid-template-columns: 48px 1fr auto; gap: 10px; }
  .hunt-cover, .hunt-cover-blank { width: 48px; height: 48px; }
  .hunt-want-slider { width: 110px; }
  .hunt-controls { gap: 10px; }
}

/* ---------------------------------------------------------------------------
 * Active Hunts: + Add a hunt toolbar, "Added by you" badge, modal w/ Discogs
 * typeahead. Modal uses the same maroon+cream editorial palette as the rest
 * of the site so it feels native to Vault Paths / Active Hunts.
 * --------------------------------------------------------------------------- */
.hunts-page-toolbar {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hunts-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.hunts-add-plus {
  font-size: 1.15em;
  line-height: 1;
  font-weight: 700;
}
.hunts-add-hint {
  font-size: 0.85rem;
  font-style: italic;
}

/* Arc origin line sits below the artist name on Active Hunts cards. */
.hunt-arc-origin {
  margin: 2px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
}
.hunt-arc-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2a3d5f;
  background: #e8eef7;
  border: 1px solid #c3cfe0;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Added by you badge sits inline next to the artist name. */
.hunt-manual-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b3f3f;
  background: #f6e9e9;
  border: 1px solid #d9c5c5;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Modal */
.add-hunt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 22, 0.55);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
  animation: addHuntFadeIn 0.18s ease-out;
}
@keyframes addHuntFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.add-hunt-open { overflow: hidden; }

.add-hunt-modal {
  width: 100%;
  max-width: 560px;
  background: #fbf7f1;
  border: 1px solid #e2d6c4;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(40, 18, 18, 0.28);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.add-hunt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.add-hunt-title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: #2a1a1a;
}
.add-hunt-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b3f3f;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.add-hunt-close:hover { background: #f0e3d4; }
.add-hunt-lede { margin: 0; font-size: 0.9rem; line-height: 1.45; }

.add-hunt-search { display: flex; }
.add-hunt-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #d3c2a9;
  border-radius: 8px;
  background: #fff;
  color: #2a1a1a;
}
.add-hunt-input:focus {
  outline: none;
  border-color: #7a3b3b;
  box-shadow: 0 0 0 3px rgba(122, 59, 59, 0.18);
}

.add-hunt-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.add-hunt-loading { margin: 6px 2px; font-size: 0.88rem; }
.add-hunt-loading.error { color: #8a2424; }

.add-hunt-result {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: #fff;
  border: 1px solid #ead9c0;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.add-hunt-result:hover, .add-hunt-result:focus {
  border-color: #7a3b3b;
  background: #fdf6ed;
  outline: none;
}
.add-hunt-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #efe2cc;
}
.add-hunt-thumb-blank { background: linear-gradient(135deg, #efe2cc, #d9c4a3); }
.add-hunt-result-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.add-hunt-result-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #2a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-hunt-result-artist {
  font-size: 0.85rem;
  color: #5a4a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-hunt-result-meta {
  font-size: 0.75rem;
  color: #8a7a6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected state card */
.add-hunt-sel-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: #f4ead8;
  border: 1px solid #d4be9c;
  border-radius: 10px;
}
.add-hunt-sel-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: #efe2cc;
}
.add-hunt-sel-cover-blank { background: linear-gradient(135deg, #efe2cc, #d9c4a3); }
.add-hunt-sel-body { flex: 1; min-width: 0; }
.add-hunt-sel-title { font-weight: 600; color: #2a1a1a; font-size: 1rem; }
.add-hunt-sel-artist { color: #5a4a4a; font-size: 0.9rem; }
.add-hunt-sel-meta { font-size: 0.78rem; margin-top: 3px; }
.add-hunt-sel-clear {
  background: transparent;
  border: 1px solid #b3927a;
  color: #6b3f3f;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.82rem;
  cursor: pointer;
}
.add-hunt-sel-clear:hover { background: #fff; }

/* Want slider in modal */
.add-hunt-want { display: flex; flex-direction: column; gap: 6px; }
.add-hunt-want[hidden], .add-hunt-selected[hidden] { display: none; }
.add-hunt-want-label { font-size: 0.88rem; color: #4a3838; font-weight: 600; }
.add-hunt-want-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.add-hunt-want-end {
  font-size: 0.72rem;
  color: #8a7a6a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.add-hunt-want-slider {
  flex: 1;
  accent-color: #7a3b3b;
}
.add-hunt-want-value {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  color: #7a3b3b;
}

.add-hunt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #ead9c0;
  padding-top: 12px;
}
.add-hunt-err {
  color: #8a2424;
  font-size: 0.85rem;
  margin: 0;
  padding: 8px 10px;
  background: #fbe9e9;
  border: 1px solid #e8c4c4;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .add-hunt-modal { padding: 16px; }
  .add-hunt-title { font-size: 1.1rem; }
  .add-hunt-sel-card { flex-wrap: wrap; }
  .add-hunt-sel-clear { margin-left: auto; }
}

/* === Connected accounts (Discogs OAuth) === */
.connected-acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.connected-acct-info { flex: 1 1 220px; }
.connected-acct-info strong { display: block; font-size: 16px; margin-bottom: 2px; }
.connected-acct-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Footer social icon links — sit inline with the other footer-links pills */
.footer-links a.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid transparent;
}
.footer-links a.footer-social svg {
  display: block;
}
.footer-links a.footer-social .footer-social-label {
  font: inherit;
}
@media (max-width: 480px) {
  .footer-links a.footer-social .footer-social-label {
    /* keep label readable; icons stay visible at all widths */
    font-size: 12px;
  }
}

/* Landing-page "Follow along" social row — under the CTA, above the foot note */
.land-social {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font: 400 13px/1.5 'Inter', sans-serif;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}
.land-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft, #6b6b66);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.land-social-link:hover {
  color: var(--ink, #1c1c1a);
  border-bottom-color: var(--ink, #1c1c1a);
}
.land-social-link svg {
  display: block;
}

/* ===== MY-66 Slice A: provisional rarity badge + enrichment progress bar ===== */

/* Provisional dot - small amber pip on the badge corner indicating an
   estimated score that has not yet been Discogs-verified. */
.rarity-badge.provisional .prov-dot {
  fill: #d99a3a;
  stroke: #fbf6ec;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 2px rgba(217, 154, 58, 0.55));
}

/* Per-user enrichment progress bar. Lives at the top of the library page. */
.enrich-bar {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: #f3eddc;
  border: 1px solid rgba(90, 26, 26, 0.15);
  border-radius: 8px;
  font-family: Georgia, serif;
}
.enrich-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.enrich-bar-title {
  font-weight: 600;
  color: #5a1a1a;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.enrich-bar-pct {
  font-size: 13px;
  color: #6b4a2a;
  font-variant-numeric: tabular-nums;
}
.enrich-bar-track {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(120, 90, 60, 0.12);
}
.enrich-seg { height: 100%; transition: flex 0.3s ease; }
.enrich-seg.seg-discogs   { background: #5a1a1a; }
.enrich-seg.seg-verified  { background: #8a5a3a; }
.enrich-seg.seg-heuristic { background: #d99a3a; }
.enrich-seg.seg-pending   { background: rgba(120, 90, 60, 0.18); }
.enrich-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: #4a3826;
}
.enrich-bar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.enrich-bar-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.enrich-bar-legend b { font-weight: 700; color: #2a1f12; font-variant-numeric: tabular-nums; }

/* ===== MY-225: Discogs-resolve drain ETA line ===== */
.enrich-drain {
  margin-top: 10px;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.enrich-drain-ok      { background: rgba(90, 110, 70, 0.12);  color: #3a4a2a; border-color: rgba(90, 110, 70, 0.25); }
.enrich-drain-slow    { background: rgba(200, 150, 50, 0.14); color: #5a4216; border-color: rgba(200, 150, 50, 0.30); }
.enrich-drain-stalled { background: rgba(170, 60, 50, 0.12);  color: #5a1a14; border-color: rgba(170, 60, 50, 0.28); }

/* ===== MY-10: Large-import progress banner ===== */
/* Sticky banner shown while a Discogs or CSV import is running. Persists across navigation
   via __mvvImportState + mountImportProgressBanner() in app.js. */
.import-banner {
  position: sticky;
  /* Stack below .site-header (which is also sticky at top:0, z-index:10).
     --mvv-header-h is measured from the live header by setImportBannerOffset()
     in app.js; 84px default covers the desktop case (38px brand mark + 44px
     padding + 1px border) if the JS hasn't run yet. */
  top: var(--mvv-header-h, 84px);
  z-index: 9;
  background: #fbf6ec;
  border-bottom: 1px solid rgba(90, 26, 38, 0.18);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 2px 6px rgba(90, 26, 38, 0.06);
  padding: 10px 18px 12px;
  font-family: Georgia, "Times New Roman", serif;
}
.import-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.import-banner-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.import-banner-title {
  font-weight: 700;
  color: #5a1a26;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.import-banner-detail {
  color: #4a3826;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.import-banner-link {
  color: #5a1a26;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(90, 26, 38, 0.35);
  padding-bottom: 1px;
  white-space: nowrap;
}
.import-banner-link:hover { border-bottom-color: #5a1a26; }
.import-banner-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(90, 26, 38, 0.18);
  border-top-color: #5a1a26;
  border-radius: 50%;
  display: inline-block;
  animation: importBannerSpin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes importBannerSpin { to { transform: rotate(360deg); } }
.import-banner-track {
  margin-top: 8px;
  height: 4px;
  width: 100%;
  background: rgba(120, 90, 60, 0.14);
  border-radius: 3px;
  overflow: hidden;
}
.import-banner-fill {
  height: 100%;
  background: #5a1a26;
  border-radius: 3px;
  transition: width 0.35s ease;
}
@media (max-width: 520px) {
  .import-banner { padding: 9px 12px 11px; }
  .import-banner-title { font-size: 13px; }
  .import-banner-detail { font-size: 12px; }
}

/* ============================================================ */
/* MY-125 / MY-126 / MY-129 / MY-130: Account self-service       */
/* ============================================================ */

.acct-danger {
  margin: 22px 0 16px;
  padding: 18px 20px 20px;
  background: #fdf3ef;
  border: 1px solid #d9a89a;
  border-radius: 8px;
}
.acct-danger > legend {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-ink);
  padding: 0 8px;
  background: #fdf3ef;
}
.danger-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.danger-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.danger-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-ink);
  margin: 0;
  letter-spacing: 0.01em;
}
.danger-copy {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.danger-copy a { color: var(--accent-ink); text-decoration: underline; }
.danger-card-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.danger-card-copy {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.acct-forgot-link {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.acct-forgot-link a {
  color: var(--accent-ink);
  text-decoration: underline;
}
.acct-forgot-link a:hover { text-decoration: none; }
.danger-pending {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff5e6;
  border-left: 3px solid var(--accent-mustard);
  border-radius: 3px;
  font-size: 13px;
  color: var(--ink-soft);
}
.btn-danger {
  align-self: flex-start;
  appearance: none;
  border: 1px solid #a13a1a;
  background: #b8431f;
  color: #fff;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background: #962f0e; border-color: #7a2406; }
.btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }

/* Auth pages (Forgot / Reset) -------------------------------- */
.auth-page {
  max-width: 480px;
  margin: 40px auto;
  padding: 24px 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--ink-mute);
  border-radius: 6px;
}
.auth-page h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  color: var(--accent-ink);
  margin: 0 0 6px;
}
.auth-page .auth-lede {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.5;
}
.auth-page form { display: flex; flex-direction: column; gap: 12px; }
.auth-page label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth-page input[type=email],
.auth-page input[type=password],
.auth-page input[type=text] {
  width: 100%;
  padding: 9px 11px;
  font-size: 15px;
  border: 1px solid var(--ink-mute);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  box-sizing: border-box;
}
.auth-page .auth-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.auth-page .auth-back {
  font-size: 13px;
  color: var(--ink-soft);
}
.auth-ok {
  margin-top: 14px;
  padding: 12px 14px;
  background: #eaf2ea;
  border-left: 3px solid var(--accent-moss);
  border-radius: 3px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.auth-err {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fbe9e4;
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  font-size: 13px;
  color: var(--accent-ink);
}

/* Login modal: forgot password link */
.auth-forgot {
  display: block;
  margin: 6px 0 2px;
  font-size: 12px;
  text-align: right;
}
.auth-forgot a { color: var(--accent-ink); }
.auth-forgot a:hover { text-decoration: underline; }

/* Policy page (Account deletion) ------------------------------ */
.policy-page {
  max-width: 760px;
  margin: 36px auto;
  padding: 28px 32px 32px;
  background: var(--bg-card);
  border: 1px solid var(--ink-mute);
  border-radius: 6px;
}
.policy-page h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  color: var(--accent-ink);
  margin: 0 0 10px;
}
.policy-page p,
.policy-page li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.policy-page ul { padding-left: 22px; }
.policy-page .policy-back { margin-top: 18px; font-size: 13px; }

/* Delete account confirm modal (reuses .add-hunt-overlay) ----- */
.delete-acct-card {
  background: var(--bg-card);
  border: 1px solid var(--ink-mute);
  border-radius: 6px;
  padding: 22px 24px 24px;
  max-width: 440px;
  width: calc(100% - 32px);
}
.delete-acct-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  color: var(--accent-ink);
  margin: 0 0 10px;
}
.delete-acct-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.delete-acct-card label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 6px;
  font-weight: 600;
}
.delete-acct-card input {
  width: 100%;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid var(--ink-mute);
  border-radius: 4px;
  box-sizing: border-box;
}
.delete-acct-card .delete-acct-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* MY-153: admin-only Pricing v2 debug card. Reuses .value-panel shell;
   these classes only style the additive surfaces introduced for the
   multi-source pricing readout. Card is gated server-side (admin-only
   field) AND client-side (admin user check) so this CSS will only
   ever paint pixels for user_id=1. */
.pv2-panel {
  border-style: dashed;
  border-color: var(--maroon, #5a1a1a);
  background: var(--bg-card);
}
.pv2-admin-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--maroon, #5a1a1a);
  color: #fbf6ec;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pv2-amount {
  font-variant-numeric: tabular-nums;
}
.pv2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 14px 0 8px;
  font-size: 13px;
}
.pv2-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #eee;
  color: #222;
  border: 1px solid rgba(0,0,0,0.08);
}
.pv2-src-discogs   { background: #fde8d1; color: #6b3a0a; border-color: #e8b97a; }
.pv2-src-shops     { background: #e3f0d8; color: #2d4a1a; border-color: #b4cfa1; }
.pv2-src-heuristic { background: #fef0c7; color: #6a4d10; border-color: #e9c97a; }
.pv2-src-cache     { background: #e0e8f5; color: #1f3a6b; border-color: #a9bbd7; }
.pv2-src-other,
.pv2-src-unknown   { background: #e6e6e6; color: #4a4a4a; border-color: #c0c0c0; }
.pv2-path,
.pv2-cached,
.pv2-warn,
.pv2-err {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
}
.pv2-path   { background: rgba(0,0,0,0.04); color: #444; }
.pv2-cached { background: #d8e8d4; color: #2d4a1a; }
.pv2-warn   { background: #fde2c7; color: #7a3a0a; }
.pv2-err    { background: #f7d4d4; color: #7a1a1a; }
.pv2-conf {
  margin: 10px 0 14px;
}
.pv2-conf-label {
  font-size: 12px;
  color: var(--ink-muted, #6b5e4a);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pv2-conf-num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 600;
  color: var(--ink, #2a1f10);
}
.pv2-conf-bar {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.pv2-conf-fill {
  height: 100%;
  background: var(--maroon, #5a1a1a);
  border-radius: 999px;
  transition: width 200ms ease;
}
.pv2-tiers {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.7;
}
.pv2-tiers li {
  padding: 2px 0;
  color: var(--ink-muted, #6b5e4a);
}
.pv2-tier-label {
  display: inline-block;
  min-width: 90px;
  font-weight: 600;
  color: var(--ink, #2a1f10);
}
.pv2-tier-state {
  display: inline-block;
  min-width: 80px;
}
.pv2-tier-yes .pv2-tier-state { color: #2d4a1a; }
.pv2-tier-no  .pv2-tier-state { color: #888; }
.pv2-tier-reason {
  color: var(--ink-muted, #6b5e4a);
  font-style: italic;
}
.pv2-details {
  margin-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 10px;
}
.pv2-details summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon, #5a1a1a);
  padding: 4px 0;
  user-select: none;
}
.pv2-details summary:hover {
  text-decoration: underline;
}
.pv2-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 4px;
  margin: 10px 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}
.pv2-dl dt {
  color: var(--ink-muted, #6b5e4a);
  font-weight: 500;
}
.pv2-dl dd {
  margin: 0;
  color: var(--ink, #2a1f10);
  font-variant-numeric: tabular-nums;
}
.pv2-dl-inputs {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
.pv2-pre {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: #f7f1e2;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
  white-space: pre;
}
.pv2-pre code {
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink, #2a1f10);
}

/* ============================================================================
 * MY-177 Slice 2: post-save hunt-match modal
 * Shares .bug-modal-backdrop / .bug-modal chrome so we inherit the existing
 * editorial-cream look. Adds row layout + match-quality badges.
 * ============================================================================ */
.hunt-match-list {
  list-style: none;
  margin: 14px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hunt-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: #f6ecd6;
  border: 1px solid rgba(90, 26, 38, 0.18);
  border-radius: 8px;
}
.hunt-match-text { flex: 1 1 auto; min-width: 0; }
.hunt-match-title {
  font-weight: 600;
  font-size: 15px;
  color: #2a1f10;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hunt-match-meta {
  font-size: 13px;
  color: #6b5b4a;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hunt-match-quality {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 12px;
}
.hunt-match-quality-exact {
  background: rgba(40, 90, 50, 0.15);
  color: #2c5e34;
}
.hunt-match-quality-high {
  background: rgba(90, 26, 38, 0.15);
  color: #5a1a26;
}
.hunt-match-quality-fuzzy {
  background: rgba(120, 95, 50, 0.15);
  color: #6b5326;
}
.hunt-match-confirm {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .hunt-match-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hunt-match-confirm { width: 100%; }
}

/* =============================================================================
   MY-177 Slice 3: 'You may already own this' passive callout on Active Hunts
   rows. Surfaces a matcher hit between an active hunt and an album in the
   user's library. Sits inline above the hunt reason / find-stack, with a
   one-click 'Mark acquired' that POSTs to the link-album route from Slice 2.
   Olive accent (matching the 'high' match-quality treatment from the Slice 2
   post-save modal) keeps it tonally connected without competing with the
   maroon vault chrome.
   ========================================================================= */
.hunt-already-own {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: #f4f1e6;
  border: 1px solid #c9c19a;
  border-radius: 8px;
}
.hunt-already-own-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: #6b6a3a;
  color: #fbf7f1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.hunt-already-own-body {
  flex: 1 1 auto;
  min-width: 0;
}
.hunt-already-own-msg {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #4a4628;
}
.hunt-already-own-sub {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.hunt-already-own-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.hunt-already-own-view {
  font-size: 0.82rem;
  white-space: nowrap;
}
.hunt-already-own-resolve {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.85rem;
}
@media (max-width: 540px) {
  .hunt-already-own {
    flex-direction: column;
    gap: 10px;
  }
  .hunt-already-own-actions {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
  }
  .hunt-already-own-resolve { flex: 1 1 auto; }
}

/* MY-177 Slice 4: 'Acquired from Active Hunts' badge on album detail.
   Sits inside .album-info after the find-stack; passive olive attribution. */
.album-acquired-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 12px 8px 10px;
  background: #f4f1e6;
  border: 1px solid #c9c19a;
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.3;
  color: #4a4628;
  max-width: 100%;
}
.album-acquired-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #6b6a3a;
  color: #fbf7f1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.album-acquired-body {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.album-acquired-title {
  font-weight: 600;
}
.album-acquired-sub {
  font-size: 0.8rem;
  opacity: 0.85;
}
@media (max-width: 540px) {
  .album-acquired-badge {
    border-radius: 10px;
  }
}

/* Admin pipeline health panel (MY-242) */
.admin-pipeline-health {
  margin-bottom: 24px;
}
.pipeline-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pipeline-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid #d4c9b8;
}
.pipeline-pill-green { background: #d8ead8; color: #2d6a3f; border-color: #b9d6b9; }
.pipeline-pill-yellow { background: #f4eccf; color: #7a5f20; border-color: #e2d3a2; }
.pipeline-pill-red { background: #f3dede; color: #9a2c2c; border-color: #e2bcbc; }
.pipeline-gen {
  font-size: 11px;
  color: #8a7f70;
  margin-left: auto;
}
.pipeline-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipeline-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e3dccb;
  border-radius: 3px;
  background: #fbf8f1;
}
.pipeline-row.pipeline-red { border-color: #e2bcbc; background: #fcf4f4; }
.pipeline-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
}
.pipeline-dot-green { background: #3f9d5b; }
.pipeline-dot-yellow { background: #d4a72c; }
.pipeline-dot-red { background: #c0392b; }
.pipeline-main { flex: 1 1 auto; min-width: 0; }
.pipeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.pipeline-label { font-weight: 600; color: #4a4136; }
.pipeline-meta { font-size: 12px; color: #8a7f70; }
.pipeline-detail {
  margin-top: 4px;
  font-size: 12px;
  color: #6a5f52;
  line-height: 1.4;
}
.pipeline-action {
  display: block;
  margin-top: 2px;
  color: #9a2c2c;
  font-style: italic;
}

/* MY-249 cover-recovery status widget: reuse pipeline-row look, add a couple of
   muted supporting lines below the detail. */
.pipeline-crs-stats {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6a5f52;
}
.pipeline-crs-dispatch { font-weight: 600; }
.pipeline-crs-dispatch-wrap {
  display: block;
  margin-top: 2px;
}
.pipeline-crs-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #8a7f70;
  font-style: italic;
  cursor: help;
}

/* PWA install + offline banners (Slice 3 stopgap) */
.pwa-install-banner,
.pwa-offline-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: -80px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-hover);
  font-size: 0.85rem;
  color: var(--ink);
  transition: bottom 0.2s ease-out;
}
.pwa-install-banner-visible,
.pwa-offline-banner-visible {
  bottom: 16px;
}
.pwa-install-text {
  flex: 1;
  line-height: 1.4;
}
.pwa-install-help {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  white-space: nowrap;
}
.pwa-install-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pwa-install-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent-ink);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.pwa-install-btn:hover { opacity: 0.9; }
.pwa-install-dismiss {
  padding: 2px 6px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pwa-install-dismiss:hover { color: var(--ink); }
.pwa-offline-banner {
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  background: #f6e9e9;
  border-color: #d9c5c5;
}
@media (max-width: 480px) {
  .pwa-install-banner,
  .pwa-offline-banner {
    left: 8px;
    right: 8px;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .pwa-install-actions { justify-content: flex-end; }
}

/* ============================================================
   MY-315 — FOUNDING MEMBER BADGE
   Two variants of one idea. The medallion is the vinyl-label seal
   on a collector's own public vault hero; the pill is the compact
   form for lists (community directory, account, admin table).
   Both use the mustard ramp so the badge reads as "earned" rather
   than as a plan tier — the rust --accent is the product's primary
   and the moss is already spoken for.
   ============================================================ */

/* --- Compact pill: same mono/uppercase/rounded-rect language as .growth-pill,
       in the warm-gold variant. inline-flex (not inline-block) because this one
       carries a leading glyph. --- */
.founding-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 8px 3px 6px;
  border-radius: 3px;
  background: #f7ecc9;
  color: var(--accent-mustard-deep);
  border: 1px solid #e6d3a0;
  white-space: nowrap;
}
.founding-pill svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

/* --- Medallion: ~84px circular seal. Concentric rings read as a record label,
       the arc text rides an SVG <textPath>, the serial is the display serif in
       italic to feel struck rather than typeset. --- */
.founding-medallion {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.fm-disc {
  fill: #fbf3df;
  stroke: var(--accent-mustard-deep);
  stroke-width: 1;
}
.fm-ring-outer {
  fill: none;
  stroke: var(--accent-mustard);
  stroke-width: 1.4;
}
.fm-ring-inner {
  fill: none;
  stroke: var(--accent-mustard);
  stroke-width: 0.7;
  opacity: 0.55;
}
.fm-arc-text {
  font-family: var(--font-mono);
  font-size: 7.6px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--accent-mustard-deep);
  text-transform: uppercase;
}
.fm-serial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13.5px;
  fill: var(--ink);
}
.fm-sub {
  font-family: var(--font-mono);
  font-size: 5.6px;
  letter-spacing: 0.1em;
  fill: var(--ink-mute);
  text-transform: uppercase;
}

/* --- Placement rows. Each wraps an existing name/title element plus the badge
       so the badge sits beside it and wraps below on narrow screens instead of
       squeezing the name. --- */
.community-card-name-row,
.account-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Each row inherits the margin its wrapped heading used to carry, so adding the
   badge shifts nothing for users who don't have one. */
.community-card-name-row { margin: 2px 0 4px; }
.community-card-name-row .community-card-name { margin: 0; }
.account-head-row { margin: 4px 0 8px; }
.account-head-row h1 { margin: 0; }

/* --- Admin users table: audit column. --- */
.admin-founding-cell { text-align: center; white-space: nowrap; }
.admin-founding {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.admin-founding.is-founding {
  color: var(--accent-mustard-deep);
  font-weight: 700;
}
.admin-founding-no { font-weight: 500; opacity: 0.8; }

@media (max-width: 640px) {
  .founding-medallion { width: 64px; height: 64px; }
}


/* MY-323: /welcome getting-started tour. Shell styling only -- the card
   visuals and animations are MY-321's job; this just gives the route a frame
   that matches the rest of the app so the placeholder copy is legible. */
.welcome-page {
  max-width: 760px;
  margin: 36px auto;
  padding: 20px 32px 28px;
  background: var(--bg-card);
  border: 1px solid var(--ink-mute);
  border-radius: 6px;
}
.welcome-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.welcome-head .eyebrow { margin: 0; }
.welcome-skip {
  background: transparent;
  border: 0;
  padding: 4px 2px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.welcome-skip:hover { color: var(--accent-ink); }
.welcome-card { min-height: 220px; padding: 12px 0 4px; }
.welcome-step {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.welcome-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  color: var(--accent-ink);
  margin: 0 0 10px;
}
.welcome-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 56ch;
}
.welcome-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.welcome-choice,
.welcome-action {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid var(--maroon, #5a1a1a);
  background: transparent;
  color: var(--maroon, #5a1a1a);
  text-decoration: none;
  cursor: pointer;
}
.welcome-choice:hover,
.welcome-action:hover { background: var(--maroon, #5a1a1a); color: var(--paper, #f1e7d2); }
.welcome-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule, #e6e1d8);
}
.welcome-nav button {
  background: transparent;
  border: 1px solid var(--rule, #e6e1d8);
  border-radius: 4px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.welcome-nav button:disabled { opacity: 0.4; cursor: default; }
.welcome-dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.welcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule, #e6e1d8);
}
.welcome-dot.is-active { background: var(--maroon, #5a1a1a); }
@media (max-width: 560px) {
  .welcome-page { margin: 16px 8px; padding: 16px 18px 22px; }
  .welcome-choices { flex-direction: column; align-items: stretch; }
  .welcome-choice { text-align: center; }
}

/* ============================================================
   MY-321: /welcome card content + animated mock-ups
   ------------------------------------------------------------
   The "Lottie" animations are inline SVG driven by CSS keyframes
   (see the long note above WELCOME_ART in app.js for why). Two
   rules make the whole thing degrade safely:

     1. Every animated element's BASE state is its END frame, and
        the keyframes start from the hidden/empty state. So if
        animation never runs -- prefers-reduced-motion, an old
        engine, CSS that failed to parse -- the user sees the
        finished picture rather than a blank box.
     2. Everything uses animation-fill-mode: backwards, so an
        element with a stagger delay stays at its 0% frame during
        the delay instead of flashing its end state first.
   ============================================================ */

.welcome-art { margin: 0 0 18px; }
.welcome-art svg { display: block; width: 100%; height: auto; }
/* See rule 2 above. Harmless on the many un-animated shapes. */
.welcome-art svg [class] {
  animation-fill-mode: backwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- shared mock-up vocabulary, borrowed from the real surfaces ---- */
.wa-panel {
  fill: var(--bg-card);
  stroke: var(--line);
  stroke-width: 1;
}
/* Album covers: square with var(--r-md)-ish corners, like .card .cover. */
.wa-cv { fill: var(--accent); }
.wa-cv2, .wa-pop2 { fill: var(--accent-teal); }
.wa-cv3, .wa-pop3 { fill: var(--accent-mustard); }
.wa-cv4, .wa-pop4 { fill: var(--accent-moss); }
.wa-cv5, .wa-pop5 { fill: var(--accent-ink); }
.wa-cv6 { fill: var(--accent-moss-deep); }
.wa-cv8 { fill: var(--accent-teal); }
/* The dark placeholder the real hunt/vault-path covers use. */
.wa-thumb { fill: #1a1410; }
.wa-label {
  font: 600 8px var(--font-body);
  letter-spacing: 0.1em;
  fill: var(--ink-mute);
}
.wa-mid { text-anchor: middle; }
.wa-figure { font: 700 20px var(--font-display); fill: var(--ink); }
.wa-arcname { font: 600 11px var(--font-display); fill: var(--ink); }
.wa-srcname { font: 400 10px var(--font-body); fill: var(--ink-soft); }
.wa-srcprice { font: 500 10px var(--font-mono); fill: var(--ink); text-anchor: end; }
.wa-row { fill: var(--line); }
.wa-row-dim { fill: var(--line-soft); }
.wa-track { fill: var(--line-soft); }
.wa-fill { fill: var(--accent-moss); }
/* Progress bars grow from their left edge. These need the `.welcome-art svg`
   prefix to out-specify the shared transform-origin: center default above --
   without it the fills scale out from the middle. */
.welcome-art svg .wa-fill,
.welcome-art svg .wa-typed { transform-origin: left center; }
.wa-chip { fill: var(--line-soft); }
.wa-chip-high { fill: rgba(184, 67, 31, 0.18); }
.wa-chip-mid { fill: rgba(184, 138, 31, 0.20); }
.wa-chip-low { fill: rgba(74, 122, 71, 0.18); }
.wa-chiptext { font: 600 7px var(--font-body); fill: var(--ink-soft); }
.wa-file { fill: var(--bg); stroke: var(--ink-mute); stroke-width: 1.2; }
.wa-file-fold { fill: none; stroke: var(--ink-mute); stroke-width: 1.2; }
.wa-typed { fill: var(--ink-soft); }
.wa-caret { fill: var(--accent); }
.wa-oauth-path { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.wa-oauth-dot { fill: var(--accent); }

@keyframes wa-pop-in {
  0%   { opacity: 0; transform: scale(0.86); }
  6%   { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* ---- Card 1, one shared 16s period so every beat stays in phase ---- */
.wa-covers .wa-cv { animation-name: wa-pop-in; animation-duration: 16s; }
.wa-cv2 { animation-delay: 0.18s; }
.wa-cv3 { animation-delay: 0.36s; }
.wa-cv4 { animation-delay: 0.54s; }
.wa-cv5 { animation-delay: 0.72s; }
.wa-cv6 { animation-delay: 0.90s; }
.wa-cv7 { animation-delay: 1.08s; }
.wa-cv8 { animation-delay: 1.26s; }

.wa-value { animation: wa-c1-value 16s infinite; }
@keyframes wa-c1-value {
  0%, 22%   { opacity: 0; transform: translateY(6px); }
  30%, 100% { opacity: 1; transform: none; }
}
.wa-hunt { animation: wa-c1-hunt 16s infinite; }
@keyframes wa-c1-hunt {
  0%, 47%   { opacity: 0; transform: translateY(6px); }
  55%, 100% { opacity: 1; transform: none; }
}
.wa-arc { animation: wa-c1-arc 16s infinite; }
@keyframes wa-c1-arc {
  0%, 72%   { opacity: 0; transform: translateY(6px); }
  80%, 100% { opacity: 1; transform: none; }
}
/* 7 of 12 -- the base value is the end frame, so a static render is honest. */
.wa-arc .wa-fill { transform: scaleX(0.58); animation: wa-c1-arcfill 16s infinite; }
@keyframes wa-c1-arcfill {
  0%, 80%   { transform: scaleX(0); }
  92%, 100% { transform: scaleX(0.58); }
}

/* ---- Card 2, ~5s per option: source -> work -> covers land ---- */
.wa-oauth-dot { animation: wa-c2-oauth 5s infinite; }
@keyframes wa-c2-oauth {
  0%        { opacity: 0; transform: translateX(0); }
  5%        { opacity: 1; transform: translateX(0); }
  26%       { opacity: 1; transform: translateX(72px); }
  30%, 100% { opacity: 0; transform: translateX(72px); }
}
.wa-progress { transform: scaleX(1); animation: wa-c2-progress 5s infinite; }
@keyframes wa-c2-progress {
  0%, 26%   { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}
.wa-rows .wa-row { animation: wa-c2-rows 5s infinite; }
.wa-row2 { animation-delay: 0.15s; }
.wa-row3 { animation-delay: 0.30s; }
@keyframes wa-c2-rows {
  0%, 10%   { opacity: 0; transform: translateX(-8px); }
  24%, 100% { opacity: 1; transform: none; }
}
.wa-typed1 { transform: scaleX(1); animation: wa-c2-type1 5s infinite; }
@keyframes wa-c2-type1 {
  0%, 8%    { transform: scaleX(0); }
  34%, 100% { transform: scaleX(1); }
}
.wa-typed2 { transform: scaleX(1); animation: wa-c2-type2 5s infinite; }
@keyframes wa-c2-type2 {
  0%, 38%   { transform: scaleX(0); }
  62%, 100% { transform: scaleX(1); }
}
.wa-caret { animation: wa-c2-caret 0.9s steps(1) infinite; }
@keyframes wa-c2-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.wa-pop .wa-cv { animation: wa-c2-pop 5s infinite; }
.wa-pop2 { animation-delay: 0.08s; }
.wa-pop3 { animation-delay: 0.16s; }
.wa-pop4 { animation-delay: 0.24s; }
.wa-pop5 { animation-delay: 0.32s; }
@keyframes wa-c2-pop {
  0%, 62%   { opacity: 0; transform: scale(0.7); }
  72%, 100% { opacity: 1; transform: none; }
}

/* ---- Card 3, a 24s cycle of three 8s scenes ---- */
.welcome-art-cycle { position: relative; aspect-ratio: 320 / 150; }
.welcome-art-cycle .welcome-scene {
  position: absolute;
  inset: 0;
  animation: wa-cycle3 24s infinite;
  animation-fill-mode: backwards;
}
.welcome-art-cycle .welcome-scene-1 { animation-delay: 8s; }
.welcome-art-cycle .welcome-scene-2 { animation-delay: 16s; }
@keyframes wa-cycle3 {
  0%              { opacity: 0; }
  3%, 30%         { opacity: 1; }
  33.34%, 100%    { opacity: 0; }
}
/* Scene internals share the 24s period and sit inside their own window, so a
   scene is never caught mid-animation as it fades in. */
.wa-hunt-row { animation: wa-c3-hunt 24s infinite; }
.wa-hr2 { animation-delay: 0.5s; }
.wa-hr3 { animation-delay: 1.0s; }
@keyframes wa-c3-hunt {
  0%, 2%    { opacity: 0; transform: translateY(8px); }
  7%, 100%  { opacity: 1; transform: none; }
}
.wa-arc-title { animation: wa-c3-arctitle 24s infinite; }
@keyframes wa-c3-arctitle {
  0%, 35%   { opacity: 0; }
  39%, 100% { opacity: 1; }
}
.wa-arc-line {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 400;
  animation: wa-c3-arcline 24s infinite;
}
@keyframes wa-c3-arcline {
  0%, 35%   { stroke-dashoffset: 400; }
  48%, 100% { stroke-dashoffset: 0; }
}
.wa-step { fill: var(--accent-moss); animation: wa-c3-step 24s infinite; }
.wa-step2 { animation-delay: 0.4s; }
.wa-step3 { animation-delay: 0.8s; }
.wa-step4 { animation-delay: 1.2s; }
.wa-step5 { animation-delay: 1.6s; }
@keyframes wa-c3-step {
  0%, 38%   { opacity: 0; transform: scale(0.4); }
  44%, 100% { opacity: 1; transform: none; }
}
.wa-arc-fill { transform: scaleX(0.58); animation: wa-c3-arcfill 24s infinite; }
@keyframes wa-c3-arcfill {
  0%, 44%   { transform: scaleX(0); }
  56%, 100% { transform: scaleX(0.58); }
}
.wa-src { animation: wa-c3-src 24s infinite; }
.wa-src2 { animation-delay: 0.35s; }
.wa-src3 { animation-delay: 0.70s; }
@keyframes wa-c3-src {
  0%, 68%   { opacity: 0; transform: translateX(-6px); }
  74%, 100% { opacity: 1; transform: none; }
}
.wa-total { animation: wa-c3-total 24s infinite; }
@keyframes wa-c3-total {
  0%, 78%   { opacity: 0; transform: translateY(6px); }
  84%, 100% { opacity: 1; transform: none; }
}

/* ---- Card 2's ranked options ---- */
.welcome-choices { display: block; }
.welcome-option {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.welcome-option:first-child { border-top: 0; }
/* The art sits beside both the button and its note, not just the button --
   auto-placement would strand it in the first row. */
.welcome-option .welcome-art { grid-area: 1 / 1 / span 2 / 1; margin: 0; }
.welcome-option-note {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}
.welcome-choice {
  justify-self: start;
  border-color: var(--accent);
  color: var(--accent-ink);
}
.welcome-choice:hover { background: var(--accent); color: var(--bg-card); }
.welcome-choice-primary {
  background: var(--accent);
  color: var(--bg-card);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 22px;
}
.welcome-choice-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
/* Tertiary is a text link, not a button -- it must read as the last resort. */
.welcome-choice-tertiary {
  border: 0;
  padding: 4px 0;
  background: transparent;
  text-decoration: underline;
  color: var(--ink-soft);
}
.welcome-choice-tertiary:hover { background: transparent; color: var(--accent-ink); }

/* ---- Card 1 / Card 3 call to action ---- */
.welcome-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.welcome-action {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-card);
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
}
.welcome-action:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.welcome-secondary {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
}
.welcome-secondary:hover { color: var(--accent-ink); }

/* ---- reduced motion: same picture, no movement ----
   Every scene falls back to its end frame. The Card 3 cycle stops stacking its
   three scenes and lays them out side by side instead, so a reduced-motion user
   still sees all three surfaces rather than only the last one. */
@media (prefers-reduced-motion: reduce) {
  .welcome-art svg [class],
  .welcome-art-cycle .welcome-scene { animation: none !important; }
  .welcome-art-cycle {
    position: static;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .welcome-art-cycle .welcome-scene { position: static; opacity: 1; }
}
/* The same fallback keyed off the class renderWelcome adds via
   welcomeReducedMotion(). Two copies because CSS cannot make a media query
   apply a class -- the media query is what actually serves users, the class
   makes the resolved preference visible in the DOM (and assertable without a
   browser). KEEP THE TWO BLOCKS IN SYNC. */
.welcome-static .welcome-art svg [class],
.welcome-static .welcome-art-cycle .welcome-scene { animation: none !important; }
.welcome-static .welcome-art-cycle {
  position: static;
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.welcome-static .welcome-art-cycle .welcome-scene { position: static; opacity: 1; }

@media (max-width: 560px) {
  .welcome-option { grid-template-columns: 1fr; gap: 10px; }
  .welcome-option .welcome-art { grid-area: auto; }
  .welcome-option-note { grid-column: 1; }
  .welcome-art-cycle { aspect-ratio: 320 / 150; }
  .welcome-cta { gap: 12px; }
}