/* ============================================================
   My Collection — vinyl tracker, valuation & wishlist
   Editorial extension of the Bring Back Records design language.
   Reuses --paper / --ink / --accent / type tokens from styles.css.
   ============================================================ */

.mc { position: relative; z-index: 2; max-width: var(--content-w); margin: 0 auto; padding: 104px 40px 120px; overflow-anchor: none; }
.mc * { box-sizing: border-box; }

/* ---- shared small bits -------------------------------------------------- */
.mc-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.mc-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.mc-money { font-family: var(--sans); font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mc-serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }

.mc-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 60%, #fff 40%);
}
/* Collector level badge — subtle chip in the value bar + tap/hover tooltip. */
.mc-lvl { position: relative; display: inline-flex; }
.mc-lvl-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2);
  background: color-mix(in oklab, var(--accent) 8%, #fff);
  transition: border-color .15s ease, background .15s ease;
}
.mc-lvl-chip:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--rule)); }
.mc-lvl-dot { color: var(--accent); font-size: 8px; line-height: 1; }
/* A touch more prominent on My Collection (the owner's own badge). */
.mc .mc-lvl-chip {
  color: var(--ink);
  background: color-mix(in oklab, var(--accent) 15%, #fff);
  border-color: color-mix(in oklab, var(--accent) 38%, var(--rule));
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 22%, transparent),
              0 8px 18px -13px color-mix(in oklab, var(--accent) 70%, transparent);
}
.mc .mc-lvl-chip:hover {
  background: color-mix(in oklab, var(--accent) 22%, #fff);
  border-color: color-mix(in oklab, var(--accent) 58%, var(--rule));
}
.mc .mc-lvl-dot { animation: mcLvlDot 2.4s ease-in-out infinite; }
@keyframes mcLvlDot { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .mc .mc-lvl-dot { animation: none; } }
.mc-lvl-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 250px; max-width: 78vw; padding: 12px 14px;
  background: #fffdf8; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(23,19,15,.5);
  font-family: Helvetica, Arial, sans-serif; text-transform: none; letter-spacing: 0;
}
.mc-lvl-pop-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.mc-lvl-pop-list { list-style: none; margin: 0; padding: 0; }
.mc-lvl-pop-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; color: var(--ink-2); }
.mc-lvl-pop-list li.on { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--ink); font-weight: 600; }
.mc-lvl-pop-name { white-space: nowrap; }
.mc-lvl-pop-range { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.mc-lvl-pop-list li.on .mc-lvl-pop-range { color: var(--accent); }
.mc-lvl-pop-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-mute); }
.mc-lvl-pop-foot b { color: var(--ink-2); }

/* Collector level-up celebration banner (top of My Collection). */
.mc-levelup {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, var(--rule));
  border-radius: 14px;
  background: linear-gradient(118deg,
    color-mix(in oklab, var(--accent) 18%, #fff),
    color-mix(in oklab, var(--accent) 6%, #fff));
  box-shadow: 0 16px 36px -20px color-mix(in oklab, var(--accent) 75%, transparent);
  font-family: Helvetica, Arial, sans-serif; color: var(--ink);
  animation: mcLevelPop .5s cubic-bezier(.2,1.25,.35,1) both;
}
/* one-shot shimmer sweep across the banner */
.mc-levelup::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(75deg, transparent 32%,
    color-mix(in oklab, #fff 55%, transparent) 48%, transparent 64%);
  transform: translateX(-125%);
  animation: mcLevelSheen 1.15s ease .35s 1;
}
.mc-levelup-burst { flex: none; font-size: 26px; line-height: 1;
  animation: mcLevelBurst .6s cubic-bezier(.2,1.5,.4,1) both; }
.mc-levelup-body { flex: 1; min-width: 0; }
.mc-levelup-h { font-family: var(--sans); font-weight: 900; letter-spacing: -.01em;
  font-size: 16px; color: var(--accent); margin-bottom: 3px; }
.mc-levelup-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.mc-levelup-text b { color: var(--ink); font-weight: 700; }
.mc-levelup-x { align-self: flex-start; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-mute); padding: 0 2px; }
.mc-levelup-x:hover { color: var(--ink); }
@keyframes mcLevelPop { 0% { opacity: 0; transform: translateY(-8px) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes mcLevelBurst { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; opacity: 1; } }
@keyframes mcLevelSheen { to { transform: translateX(125%); } }
@media (prefers-reduced-motion: reduce) {
  .mc-levelup, .mc-levelup-burst { animation: none; }
  .mc-levelup::after { display: none; }
}

.mc-delta { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-delta.up { color: oklch(0.52 0.13 150); }
.mc-delta.down { color: oklch(0.55 0.16 28); }
.mc-delta.flat { color: var(--ink-mute); }
.mc-arrow { font-size: 11px; line-height: 1; }

/* ---- hero: the rolling collection value --------------------------------- */
.mc-hero {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end;
  padding: 8px 0 32px;
}
.mc-hero-label { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.mc-hero-total {
  font-family: var(--sans); font-weight: 900; letter-spacing: -0.045em;
  font-size: clamp(64px, 9vw, 132px); line-height: 0.86; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline;
}
.mc-hero-total .cur { font-size: 0.46em; color: var(--ink-mute); margin-right: 0.06em; font-weight: 800; }
.mc-hero-delta { margin-top: 6px; }
.mc-hero-sub { display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.mc-hero-milestone { margin-top: 22px; max-width: 460px; }
.mc-milestone-bar { height: 6px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.mc-milestone-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.mc-milestone-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-mute); margin-top: 7px; display: flex; justify-content: space-between; }

/* hero side stats */
.mc-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mc-stat { background: var(--paper); padding: 16px 18px; }
.mc-stat-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.mc-stat-v { font-family: var(--serif); font-size: 26px; line-height: 1.05; margin-top: 8px; }
.mc-stat-v small { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink-2); display: block; margin-top: 3px; }

/* ---- toolbar: tabs + controls ------------------------------------------- */
.mc-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 36px 0 22px; flex-wrap: wrap; }
.mc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ink); }
.mc-tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 4px; margin-right: 30px; color: var(--ink-mute); position: relative; transition: color 0.15s;
}
.mc-tab:hover { color: var(--ink); }
.mc-tab.active { color: var(--ink); }
.mc-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--accent); }
.mc-tab .ct { font-weight: 400; color: var(--ink-mute); margin-left: 7px; }

.mc-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* min-width up from 200px to keep the full placeholder visible now that the
   input is 16px (below 16px iOS Safari zooms the viewport on focus). */
.mc-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: #fff8; padding: 8px 12px; min-width: 224px; }
.mc-search input { border: 0; background: transparent; outline: none; font-family: var(--sans); font-size: 16px; color: var(--ink); width: 100%; }
.mc-search svg { color: var(--ink-mute); flex-shrink: 0; }
.mc-select { position: relative; }
.mc-select select {
  appearance: none; -webkit-appearance: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); background: #fff8; color: var(--ink-2); padding: 9px 30px 9px 12px; cursor: pointer; outline: none;
}
.mc-select::after { content: "▾"; position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-mute); font-size: 10px; }
.mc-add {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: var(--ink); color: var(--paper); padding: 10px 16px; transition: background 0.15s;
}
.mc-add:hover { background: var(--accent); }
.mc-add .plus { font-size: 14px; line-height: 1; }

/* ---- record cards ------------------------------------------------------- */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mc-card { background: var(--paper); padding: 18px; display: grid; grid-template-columns: 76px 1fr; gap: 16px; position: relative; transition: background 0.15s; }
.mc-card:hover { background: color-mix(in oklab, var(--paper) 82%, #fff 18%); }
.mc-card-cover { width: 76px; height: 76px; flex-shrink: 0; }
.mc-card-cover > div { box-shadow: 0 8px 18px -12px rgba(0,0,0,.4) !important; }
.mc-card-body { min-width: 0; }
.mc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-card-title { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.16; }
.mc-card-artist { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.mc-card-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 10px; line-height: 1.5; }
.mc-card-meta b { color: var(--ink-2); font-weight: 600; }
.mc-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 14px; }
.mc-card-val { font-family: var(--sans); font-weight: 900; font-size: 25px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.mc-card-val .cur { font-size: 0.6em; color: var(--ink-mute); font-weight: 800; }
.mc-card-range { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); margin-top: 5px; letter-spacing: 0.03em; }

/* condition chip */
.mc-cond { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; padding: 3px 7px; border: 1px solid currentColor; border-radius: 3px; }
.mc-cond.M, .mc-cond.NM { color: oklch(0.50 0.12 150); }
.mc-cond.VGplus { color: oklch(0.55 0.10 90); }
.mc-cond.VG { color: oklch(0.55 0.10 70); }
.mc-cond.low { color: var(--ink-mute); }

/* row actions on hover */
.mc-card-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s; }
.mc-card:hover .mc-card-actions { opacity: 1; }
.mc-iconbtn { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-mute); border-radius: 4px; transition: all 0.15s; }
.mc-iconbtn:hover { color: var(--ink); border-color: var(--ink); }
.mc-iconbtn.danger:hover { color: oklch(0.55 0.16 28); border-color: oklch(0.55 0.16 28); }

/* sparkline */
.mc-spark { display: flex; align-items: flex-end; gap: 12px; }
.mc-spark svg { display: block; overflow: visible; }

/* ---- wishlist card variant --------------------------------------------- */
.mc-card.wish .mc-card-foot { flex-direction: column; align-items: stretch; gap: 12px; }
.mc-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: var(--accent); color: #fff; padding: 11px 14px; transition: filter 0.15s;
}
.mc-buy:hover { filter: brightness(1.07); }
.mc-buy .ar { transition: transform 0.18s; }
.mc-buy:hover .ar { transform: translateX(3px); }
.mc-buy-row { display: flex; gap: 8px; }
.mc-move {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--ink); color: var(--ink); padding: 11px 12px; white-space: nowrap; transition: all 0.15s;
}
.mc-move:hover { background: var(--ink); color: var(--paper); }
.mc-vendor { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-mute); text-align: center; }

/* ---- stats dashboard ---------------------------------------------------- */
.mc-dash { margin-top: 64px; }
.mc-dash-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.mc-dash-head h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin: 0; }
.mc-dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mc-panel { background: var(--paper); padding: 24px; }
.mc-panel-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }

/* trend line chart */
.mc-trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.mc-trend-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); margin-top: 8px; }

/* breakdown bars */
.mc-break + .mc-break { margin-top: 26px; }
.mc-bk-row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 12px; margin-bottom: 9px; }
.mc-bk-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-bk-track { height: 9px; background: var(--paper-2); border: 1px solid var(--rule); position: relative; }
.mc-bk-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 0.7s cubic-bezier(0.2,0.8,0.2,1); }
.mc-bk-fill.accent { background: var(--accent); }
.mc-bk-val { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; }

/* highlight tiles */
.mc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1px; }
.mc-tile { background: var(--paper); padding: 22px 24px; display: flex; gap: 16px; align-items: center; }
.mc-tile .cv { width: 64px; height: 64px; flex-shrink: 0; }
.mc-tile-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.mc-tile-t { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.05; margin-top: 6px; }
.mc-tile-s { font-family: var(--mono); font-size: 10px; color: var(--ink-2); margin-top: 6px; }

/* ---- empty state -------------------------------------------------------- */
.mc-empty { text-align: center; padding: 80px 24px; border: 1px dashed var(--rule); }
.mc-empty h3 { font-family: var(--serif); font-style: italic; font-size: 34px; font-weight: 400; margin: 0 0 12px; }
.mc-empty p { font-family: var(--body-serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 460px; margin: 0 auto 28px; }
.mc-empty-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.mc-empty-stack { display: flex; justify-content: center; gap: -20px; margin-bottom: 32px; }
.mc-empty-stack > div { margin-left: -28px; box-shadow: 0 16px 30px -20px rgba(0,0,0,.5) !important; transform: rotate(var(--r)); }
.mc-empty-stack > div:first-child { margin-left: 0; }
.mc-empty-badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; margin-bottom: 18px; }
.mc-empty-steps { list-style: none; margin: 8px auto 28px; padding: 0; max-width: 460px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mc-empty-steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; background: var(--paper); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.mc-empty-steps li:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 8px 22px -16px rgba(0,0,0,.5); }
.mc-empty-steps li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-es-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--wash, rgba(0,0,0,.04)); color: var(--ink); }
.mc-es-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.mc-es-body b { font-family: var(--sans, var(--mono)); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
.mc-es-body small { font-family: var(--body-serif); font-size: 13.5px; color: var(--ink-2); }
.mc-es-go { flex: 0 0 auto; color: var(--ink-mute, var(--ink-2)); font-size: 17px; }
.mc-empty-steps li:hover .mc-es-go { color: var(--accent); }
.mc-empty-payoff { margin: 24px auto 0 !important; max-width: 460px; font-family: var(--body-serif); font-size: 14px !important; color: var(--ink-2); }

.mc-btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 12px 18px; transition: all 0.15s;
}
.mc-btn.solid { background: var(--ink); color: var(--paper); }
.mc-btn.solid:hover { background: var(--accent); }
.mc-btn.ghost { border: 1px solid var(--ink); color: var(--ink); }
.mc-btn.ghost:hover { background: var(--ink); color: var(--paper); }
/* Discogs one-tap: accent-filled so the fastest bulk-activation path co-leads
   with "Add your first record" without outranking it. */
.mc-btn.discogs { background: var(--accent); color: #fff; }
.mc-btn.discogs:hover { filter: brightness(0.92); }
.mc-btn.discogs svg { flex: 0 0 auto; }
.mc-empty-discogs-hint { margin: 14px auto 0; max-width: 460px; font-family: var(--body-serif); font-size: 13.5px; color: var(--ink-2); }
.mc-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mc-linkbtn:hover { color: var(--ink); }

/* ===========================================================
   FIRST-RECORD ACTIVATION NUDGE (sitewide, logged-in + zero records)
   Bottom-fixed toast so it never fights the fixed top nav or per-page
   clearance; dismissible, and it removes itself the instant a record lands.
   =========================================================== */
.frb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: var(--paper); border-top: 2px solid var(--accent); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.7); padding-bottom: env(safe-area-inset-bottom, 0px); animation: frb-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes frb-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.frb-in { max-width: var(--content-w); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 13px 20px; }
.frb-badge { color: var(--accent); font-size: 12px; flex: 0 0 auto; }
.frb-txt { flex: 1 1 auto; font-family: var(--body-serif); font-size: 14px; line-height: 1.4; }
.frb-txt b { font-weight: 700; }
.frb-cta { flex: 0 0 auto; background: var(--accent); color: #fff; border: 0; border-radius: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 10px 16px; cursor: pointer; transition: filter .15s; }
.frb-cta:hover { filter: brightness(.92); }
.frb-x { flex: 0 0 auto; background: none; border: 0; color: var(--paper); opacity: .6; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.frb-x:hover { opacity: 1; }
@media (max-width: 640px) {
  .frb-in { flex-wrap: wrap; padding: 11px 14px; gap: 8px 12px; }
  .frb-txt { flex: 1 1 100%; order: 1; font-size: 13px; }
  .frb-badge { display: none; }
  .frb-cta { order: 2; }
  .frb-x { order: 3; margin-left: auto; }
}

/* ===========================================================
   MARKETING SURFACE (logged out)
   =========================================================== */
/* Nav clearance lives on .mkt so the price ticker (first child) sits flush
   under the fixed nav; the safe-area term keeps it clear of the taller nav on
   notched iOS. .mkt-hero then only carries breathing room below the ticker.
   66px matches the home's effective ticker offset (the nav is ~65px tall). */
.mkt { position: relative; z-index: 2; padding-top: calc(66px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
/* Sit the ticker flush against the bottom of the fixed nav: pull it up so its
   top tucks just under the nav (hidden by the higher-z nav) and drop its own
   top border, so the nav's bottom border is the SINGLE divider line — no gap,
   no double rule. */
.mkt .hd-ticker { margin-top: -5px; border-top: none; }
/* Mobile nav is a touch taller than desktop, so less upward tuck is needed. */
@media (max-width: 640px) { .mkt .hd-ticker { margin-top: -2px; } }
.mkt-hero { max-width: var(--content-w); margin: 0 auto; padding: 44px 40px 56px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.mkt-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.mkt-h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.4vw, 84px); line-height: 0.98; letter-spacing: -0.015em; margin: 0; }
.mkt-h1 em { font-style: italic; color: var(--accent); }
.mkt-lede { font-family: var(--body-serif); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 520px; margin: 26px 0 32px; }
.mkt-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mkt-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 18px; }

/* sample collection preview with blurred values */
.mkt-preview { position: relative; }
.mkt-preview-card { background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 40px 80px -50px rgba(0,0,0,.55); }
.mkt-pv-top { padding: 20px 22px; border-bottom: 1px solid var(--rule); display: flex; align-items: flex-end; justify-content: space-between; }
.mkt-pv-total { font-family: var(--sans); font-weight: 900; font-size: 44px; letter-spacing: -0.04em; line-height: 0.9; }
.mkt-pv-total .blur { filter: blur(9px); user-select: none; }
.mkt-pv-list > div { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--rule); }
.mkt-pv-list > div:last-child { border-bottom: 0; }
.mkt-pv-t { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.05; }
.mkt-pv-a { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.mkt-pv-v { font-family: var(--sans); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.mkt-pv-v.blur { filter: blur(6px); }
.mkt-pv-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 26px; background: linear-gradient(to bottom, transparent 40%, color-mix(in oklab, var(--paper) 88%, transparent) 100%);
  pointer-events: none;
}
.mkt-pv-lock span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); padding: 7px 13px; border-radius: 999px; }

/* feature row (legacy 3-cell grid — kept for reference) */
.mkt-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.mkt-feat-cell { background: var(--paper); padding: 30px 26px; }
.mkt-feat-n { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.16em; }
.mkt-feat-h { font-family: var(--serif); font-size: 23px; font-style: italic; margin: 14px 0 10px; }
.mkt-feat-p { font-family: var(--body-serif); font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ===========================================================
   MARKETING SURFACE — feature showcase (the current My Collection
   feature set), animated in on scroll. Append-only upgrade.
   =========================================================== */
/* Solo CTA under the hero dash (moved out of the dark dashboard card, so it
   needs light-surface styling to override the dark .mkt-dash-foot base). */
.mkt-dash-foot-solo {
  max-width: 420px; margin: 14px auto 0;
  border-color: var(--rule); background: var(--paper); color: var(--accent);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
}
.mkt-dash-foot-solo:hover { background: color-mix(in oklab, var(--paper) 90%, var(--accent) 10%); }

/* Scroll-reveal vocabulary shared across the showcase. */
.mkt-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.mkt-reveal.in { opacity: 1; transform: none; }

.mkt-feat { max-width: var(--content-w); margin: 0 auto; padding: 32px 40px 40px; }
.mkt-feat-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.mkt-feat-kick { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.mkt-feat-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; }

.mkt-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mkt-sc-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mkt-sc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px color-mix(in oklab, var(--accent) 40%, rgba(0,0,0,.4)); border-color: color-mix(in oklab, var(--rule) 55%, var(--accent)); }
.mkt-sc-visual {
  position: relative; height: 148px; padding: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(120% 130% at 80% 0%, color-mix(in oklab, var(--accent) 8%, var(--paper-2)) 0%, var(--paper-2) 62%);
  border-bottom: 1px solid var(--rule);
}
.mkt-sc-body { padding: 20px 22px 24px; }
.mkt-sc-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mkt-sc-h { font-family: var(--serif); font-size: 21px; font-style: italic; line-height: 1.12; margin: 10px 0 9px; }
.mkt-sc-p { font-family: var(--body-serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* --- visual: value spark --- */
.mkt-sc-value { width: 100%; }
.mkt-sc-value-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.mkt-sc-value-v { font-family: var(--sans); font-weight: 900; font-size: 30px; letter-spacing: -0.03em; color: var(--ink); }
.mkt-sc-value-d { font-family: var(--sans); font-weight: 800; font-size: 13px; color: #2e8b57; background: rgba(46,139,87,.12); padding: 3px 9px; border-radius: 20px; }
.mkt-sc-spark { position: relative; height: 46px; }
.mkt-sc-spark svg { width: 100%; height: 46px; display: block; clip-path: inset(0 100% 0 0); }
.in .mkt-sc-spark svg { animation: mktWipe 1.1s .25s forwards; }
.mkt-sc-spark-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); transform: translate(-50%, -50%); opacity: 0; }
.in .mkt-sc-spark-dot { animation: mktFadeIn .4s 1.15s forwards; }
@keyframes mktWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes mktFadeIn { to { opacity: 1; } }

/* --- visual: DNA genre bars --- */
.mkt-sc-dna { width: 100%; display: flex; flex-direction: column; gap: 9px; }
.mkt-sc-dna-row { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 10px; }
.mkt-sc-dna-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-sc-dna-t { height: 7px; background: var(--paper); border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.mkt-sc-dna-t i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 60%, #fff), var(--accent)); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.in .mkt-sc-dna-t i { width: var(--w); }

/* --- visual: snap-to-add scan frame --- */
.mkt-sc-scan { position: relative; width: 108px; height: 108px; }
.mkt-sc-scan img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.mkt-sc-scan .c { position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); }
.mkt-sc-scan .tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.mkt-sc-scan .tr { top: -5px; right: -5px; border-left: 0; border-bottom: 0; }
.mkt-sc-scan .bl { bottom: -5px; left: -5px; border-right: 0; border-top: 0; }
.mkt-sc-scan .br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.mkt-sc-scan-line { position: absolute; left: 2px; right: 2px; top: 8%; height: 2px; background: var(--accent); box-shadow: 0 0 9px var(--accent); border-radius: 2px; }
.in .mkt-sc-scan-line { animation: mktScan 2.4s ease-in-out infinite; }
@keyframes mktScan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }

/* --- visual: your next record --- */
.mkt-sc-next { display: flex; align-items: center; gap: 14px; }
.mkt-sc-next-cv { position: relative; width: 74px; height: 74px; flex: none; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.mkt-sc-next-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-sc-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }
.in .mkt-sc-shine { animation: mktShine 2.8s ease-in-out 1s infinite; }
@keyframes mktShine { 0% { left: -50%; } 40%, 100% { left: 130%; } }
.mkt-sc-next-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkt-sc-next-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.mkt-sc-next-t { font-family: var(--serif); font-style: italic; font-size: 18px; }
.mkt-sc-next-add { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--accent); margin-top: 3px; }

/* --- visual: grail watch --- */
.mkt-sc-grail { display: flex; align-items: center; gap: 14px; }
.mkt-sc-grail-cv { position: relative; width: 74px; height: 74px; flex: none; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }
.mkt-sc-grail-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-sc-grail-badge {
  position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
  background: #caa53d; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.in .mkt-sc-grail-badge { animation: mktBadge 2.2s ease-in-out infinite; }
@keyframes mktBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.mkt-sc-grail-meta { display: flex; flex-direction: column; gap: 4px; }
.mkt-sc-grail-v { font-family: var(--sans); font-weight: 800; font-size: 18px; color: var(--ink); }
.mkt-sc-grail-v i { font-style: normal; font-size: 12px; font-weight: 800; color: #2e8b57; margin-left: 4px; }

/* --- visual: leaderboard --- */
.mkt-sc-board { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mkt-sc-board-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.mkt-sc-board-row.you { background: color-mix(in oklab, var(--accent) 12%, var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, var(--rule)); }
.mkt-sc-board-rk { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-mute); }
.mkt-sc-board-row.you .mkt-sc-board-rk { color: var(--accent); }
.mkt-sc-board-nm { font-family: var(--sans); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-sc-board-v { font-family: var(--sans); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- closing CTA band --- */
.mkt-band { max-width: var(--content-w); margin: 0 auto; padding: 60px 40px 110px; text-align: center; }
.mkt-band-h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 16px; }
.mkt-band-p { font-family: var(--body-serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 560px; margin: 0 auto 28px; }
.mkt-band-cta { justify-content: center; }

@media (max-width: 900px) {
  .mkt-showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mkt-feat { padding: 24px 20px 32px; }
  .mkt-showcase { grid-template-columns: 1fr; gap: 14px; }
  .mkt-band { padding: 44px 20px 90px; }
  .mkt-sc-visual { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-reveal { opacity: 1; transform: none; transition: none; }
  .mkt-sc-spark svg { clip-path: none; animation: none; }
  .mkt-sc-spark-dot { opacity: 1; animation: none; }
  .mkt-sc-dna-t i { transition: none; width: var(--w); }
  .mkt-sc-scan-line, .in .mkt-sc-shine, .in .mkt-sc-grail-badge { animation: none; }
}

/* ===========================================================
   AUTH SCREENS (login / signup / forgot)
   =========================================================== */
.auth {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper); animation: mcFade 0.25s ease;
  /* --ink-mute (#8a8072) is only 3.33:1 on --paper, which fails AA for the
     field labels, legal line and placeholders on this form. This is the same
     warm grey, darkened to 4.85:1, and scoped to the auth screens. */
  --auth-mute: #6f6657;
}
@keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
.auth-aside { position: relative; background: var(--ink); color: var(--paper); padding: 48px 52px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.auth-aside .grainwash { position: absolute; inset: 0; opacity: 0.5; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); pointer-events: none; }
/* #6: full bar-chart wordmark (matching the main nav) instead of the old
   red-dot + text placeholder. Dark aside -> cream mark, like the footer. */
.auth-brand { display: flex; align-items: center; gap: 11px; position: relative; }
.auth-brand .auth-mark { height: 30px; width: auto; display: block; flex: none; }
.auth-brand .auth-wordmark { font-family: var(--serif); font-size: 26px; letter-spacing: -0.015em; line-height: 1; color: var(--paper); }
.auth-brand .auth-wordmark .brand-art { font-style: italic; font-weight: 400; margin-right: 3px; color: color-mix(in oklab, var(--paper) 58%, transparent); }
.auth-aside-quote { position: relative; }
.auth-aside-quote .q { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.auth-aside-quote .q em { color: var(--accent); font-style: italic; }
.auth-aside-meta { position: relative; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243,237,225,0.55); display: flex; gap: 18px; flex-wrap: wrap; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.auth-form { width: 100%; max-width: 380px; }
.auth-close { position: absolute; top: 24px; right: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--auth-mute); display: flex; align-items: center; gap: 7px; z-index: 2; }
.auth-close:hover { color: var(--ink); }
.auth-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--auth-mute); }
.auth-h { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 46px); font-weight: 400; line-height: 1.02; margin: 14px 0 8px; }
.auth-sub { font-family: var(--body-serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 28px; }

.auth-social { display: grid; gap: 10px; margin-bottom: 22px; }
.auth-soc-btn { display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid var(--ink); background: #fff8; padding: 12px; font-family: var(--sans); font-weight: 600; font-size: 14px; transition: all 0.15s; }
.auth-soc-btn:hover { background: var(--ink); color: var(--paper); }
.auth-soc-btn:hover svg, .auth-soc-btn:hover svg * { filter: none; }
.auth-or { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--auth-mute); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.auth-field { margin-bottom: 18px; }
.auth-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--auth-mute); margin-bottom: 7px; }
.auth-input { width: 100%; border: 0; border-bottom: 1.5px solid var(--rule); background: transparent; padding: 9px 2px; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; transition: border-color 0.15s; }
.auth-input:focus { border-color: var(--accent); }
/* No opacity here: 0.6 on the old muted grey put the placeholder at ~1.9:1. */
.auth-input::placeholder { color: var(--auth-mute); opacity: 1; }
.auth-field-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-field-row a { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--auth-mute); }
.auth-field-row a:hover { color: var(--accent); }

.auth-submit { width: 100%; background: var(--ink); color: var(--paper); padding: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-top: 8px; transition: background 0.15s; }
.auth-submit:hover { background: var(--accent); }
.auth-foot { font-family: var(--body-serif); font-size: 14.5px; color: var(--ink-2); margin-top: 24px; text-align: center; }
/* .auth-linkbtn is a <button> that has to read as one of these inline links
   (it triggers a rate-limited request, so it needs a disabled state). */
.auth-foot a, .auth-foot .auth-linkbtn { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.auth-foot a:hover, .auth-foot .auth-linkbtn:hover { color: var(--accent); }
.auth-foot .auth-linkbtn:disabled { color: var(--auth-mute); text-decoration-color: var(--rule); cursor: default; }
.auth-legal { font-family: var(--mono); font-size: 9.5px; line-height: 1.6; color: var(--auth-mute); margin-top: 22px; text-align: center; }
.auth-legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ===========================================================
   SIGNUP GATE (the soft wall)
   =========================================================== */
.gate-backdrop { position: fixed; inset: 0; z-index: 95; background: color-mix(in oklab, var(--ink) 38%, transparent); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; animation: mcFade 0.2s ease; }
.gate { width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); animation: gateIn 0.28s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes gateIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.gate-top { background: var(--ink); color: var(--paper); padding: 26px 28px; position: relative; overflow: hidden; }
.gate-top .grainwash { position: absolute; inset: 0; opacity: 0.4; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px); }
.gate-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); position: relative; }
.gate-h { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.05; margin: 12px 0 0; position: relative; }
.gate-body { padding: 26px 28px 28px; }
.gate-p { font-family: var(--body-serif); font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; }
.gate-list { display: grid; gap: 12px; margin-bottom: 26px; }
.gate-li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.gate-li .gi { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; }
.gate-actions { display: grid; gap: 10px; }
.gate-skip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); text-align: center; padding: 4px; }
.gate-skip:hover { color: var(--ink); }
.gate-x { position: absolute; top: 18px; right: 20px; color: rgba(243,237,225,0.6); font-size: 18px; line-height: 1; z-index: 2; }
.gate-x:hover { color: var(--paper); }

/* ===========================================================
   ADD-RECORD FLOW (stepped modal / drawer)
   =========================================================== */
.add-backdrop { position: fixed; inset: 0; z-index: 95; background: color-mix(in oklab, var(--ink) 40%, transparent); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; animation: mcFade 0.2s ease; }
.add-modal { width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); animation: gateIn 0.28s cubic-bezier(0.2,0.8,0.2,1); }
.add-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--rule); }
.add-steps { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.add-step { display: flex; align-items: center; gap: 7px; }
.add-step .n { width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; font-size: 9px; }
.add-step.active { color: var(--ink); }
.add-step.active .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.add-step.done .n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.add-step-sep { width: 18px; height: 1px; background: var(--rule); }
.add-x { color: var(--ink-mute); font-size: 20px; line-height: 1; }
.add-x:hover { color: var(--ink); }
.add-body { padding: 22px 24px; overflow-y: auto; }
.add-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--rule); }

.add-title { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 0 0 4px; }
.add-hint { font-family: var(--body-serif); font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }

/* search results */
.add-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ink); background: #fff8; padding: 11px 14px; margin-bottom: 14px; }
.add-search input { border: 0; background: transparent; outline: none; font-family: var(--sans); font-size: 16px; width: 100%; color: var(--ink); }
.add-results { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); max-height: 330px; overflow-y: auto; }
.add-res { display: grid; grid-template-columns: 46px 1fr auto; gap: 13px; align-items: center; background: var(--paper); padding: 11px 14px; text-align: left; transition: background 0.12s; }
.add-res:hover { background: color-mix(in oklab, var(--paper) 78%, #fff 22%); }
.add-res-t { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.05; }
.add-res-a { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 3px; }
.add-res-rank { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.add-manual-link { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 14px; display: inline-flex; gap: 7px; align-items: center; }
.add-manual-link:hover { color: var(--accent); }

/* selected album banner */
.add-sel { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--rule); background: #fff6; margin-bottom: 20px; }
.add-sel .cv { width: 54px; height: 54px; flex-shrink: 0; }
.add-sel-t { font-family: var(--serif); font-style: italic; font-size: 18px; }
.add-sel-a { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 3px; }
.add-sel-change { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--rule); padding: 6px 9px; }
.add-sel-change:hover { color: var(--ink); border-color: var(--ink); }

/* pressing picker (Discogs) */
.add-pr-attr { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-mute); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.add-pr-list { display: grid; gap: 10px; }
.add-pr {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; text-align: left; transition: all 0.14s;
}
.add-pr:hover { border-color: var(--ink-mute); }
.add-pr.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in oklab, var(--paper) 92%, var(--accent) 8%); }
.add-pr-main { min-width: 0; }
.add-pr-label { font-family: var(--sans); font-weight: 700; font-size: 14.5px; }
.add-pr-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.add-pr-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--rule); color: var(--ink-2); border-radius: 3px; }
.add-pr-notes { font-family: var(--body-serif); font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.add-pr-meta { font-family: var(--mono); font-size: 9px; color: var(--ink-mute); margin-top: 8px; letter-spacing: 0.03em; }
.add-pr-val { text-align: right; white-space: nowrap; }
.add-pr-val .num { font-family: var(--sans); font-weight: 900; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.add-pr-val .lbl { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 3px; }

/* condition selector */
.add-cond-list { display: grid; gap: 7px; }
.add-cond {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--rule); background: var(--paper); padding: 12px 15px; text-align: left; transition: all 0.14s;
}
.add-cond:hover { border-color: var(--ink-mute); }
.add-cond.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.add-cond-code { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.add-cond-name { font-family: var(--sans); font-weight: 700; font-size: 13.5px; }
.add-cond-blurb { font-family: var(--body-serif); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin-top: 3px; }
.add-cond-val { font-family: var(--sans); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.add-back { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.add-back:hover { color: var(--ink); }
.add-next { background: var(--ink); color: var(--paper); padding: 12px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; transition: background 0.15s; }
.add-next:hover { background: var(--accent); }
.add-next:disabled { opacity: 0.4; cursor: not-allowed; }
.add-next:disabled:hover { background: var(--ink); }

/* manual entry form */
.add-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.add-manual-grid .full { grid-column: 1 / -1; }
.add-mf label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.add-mf input, .add-mf select { width: 100%; border: 1px solid var(--rule); background: #fff8; padding: 9px 11px; font-family: var(--sans); font-size: 16px; color: var(--ink); outline: none; }
.add-mf input:focus, .add-mf select:focus { border-color: var(--accent); }

/* ===========================================================
   NAV AVATAR + DROPDOWN
   =========================================================== */
.nav-acct { position: relative; display: flex; align-items: center; }
.nav-avatar { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.nav-avatar .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 11px; display: grid; place-items: center; letter-spacing: 0.02em; }
.nav-avatar .nm { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.nav-avatar:hover .nm { color: var(--ink); }
.nav-signin { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--ink); padding: 7px 13px; transition: all 0.15s; color: var(--ink); }
.nav-signin:hover { background: var(--ink); color: var(--paper); }
.nav-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 230px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 24px 50px -28px rgba(0,0,0,.5); z-index: 80; animation: gateIn 0.18s ease; }
.nav-menu-head { padding: 16px; border-bottom: 1px solid var(--rule); }
.nav-menu-head .nm { font-family: var(--sans); font-weight: 700; font-size: 14px; }
.nav-menu-head .em { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); margin-top: 3px; overflow-wrap: anywhere; }
.nav-menu a { display: flex; align-items: center; gap: 11px; padding: 12px 16px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); transition: background 0.12s, color 0.12s; cursor: pointer; }
.nav-menu a:hover { background: color-mix(in oklab, var(--paper) 80%, #fff 20%); color: var(--ink); }
.nav-menu a svg { color: var(--ink-mute); }
.nav-menu a.sep { border-top: 1px solid var(--rule); }
.nav-menu a.signout { color: oklch(0.55 0.16 28); }

/* ===========================================================
   PROTOTYPE STATE SWITCHER
   =========================================================== */
.proto-sw { position: fixed; bottom: 24px; left: 24px; z-index: 88; background: var(--ink); color: var(--paper); border-radius: 8px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.6); font-family: var(--mono); max-width: 230px; overflow: hidden; }
.proto-sw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; }
.proto-sw-head .t { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,237,225,0.6); }
.proto-sw-head .dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.7 0.16 145); }
.proto-sw-body { padding: 4px 8px 10px; display: grid; gap: 4px; }
.proto-sw-grp { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243,237,225,0.4); margin: 7px 4px 2px; }
.proto-sw button { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(243,237,225,0.8); padding: 7px 9px; border-radius: 5px; transition: background 0.12s, color 0.12s; }
.proto-sw button:hover { background: rgba(243,237,225,0.1); color: var(--paper); }
.proto-sw button.on { background: var(--accent); color: #fff; }
.proto-sw .chev { transition: transform 0.2s; font-size: 10px; }
.proto-sw.collapsed .chev { transform: rotate(-90deg); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 980px) {
  .mc-hero { grid-template-columns: 1fr; gap: 28px; }
  .mc-dash-grid { grid-template-columns: 1fr; }
  .mkt-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }
  .mkt-feat-grid { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 640px) {
  /* Clear the real nav (which runs ~9px taller than --nav-h once its own padding
     + brand are counted) and leave a small, even breath below it, so the first
     element — the level-up banner OR the jump-nav — is never tucked under the nav
     and the tab row isn't cramped. max(...) adds notch clearance on inset devices. */
  .mc { padding: calc(var(--nav-h) + 24px + max(0px, env(safe-area-inset-top, 0px) - 12px)) 18px 120px; }
  /* M7 (QA, real-device iOS Safari): line-height 0.86 + a huge mobile font lets
     the digits overhang their line box and collide with the "+£… this week" /
     uplift lines stacked directly beneath. A 0.1em padding-bottom buffer wasn't
     enough on a real device, so this both relaxes the line-height (less native
     overhang) and gives the lines below a much bigger fixed gap rather than
     relying on a thin, font-rendering-sensitive margin. */
  .mc-hero-total { font-size: clamp(54px, 17vw, 92px); line-height: 1.05; padding-bottom: 0.18em; }
  .mc-hero-delta { margin-top: 18px; }
  .mc-grid { grid-template-columns: 1fr; }
  .mc-tiles { grid-template-columns: 1fr; }
  /* Item 2: the controls bar used to be sticky here (position: sticky; top: 56px,
     plus a full-bleed blurred backdrop) and stayed pinned under the nav while you
     scrolled, eating ~half the mobile viewport before any records showed. It now
     scrolls away with the page as normal in-flow content (falls back to the base
     .mc-bar flow rule). Desktop was already non-sticky. */
  .mc-controls { width: 100%; }
  /* #7: search shared a wrapping row with the genre/sort selects, so a long
     selected genre (which varies per profile) squeezed it to icon-only and
     clipped the placeholder. Give it its own full-width row so the
     "Search this collection…" placeholder always shows, consistently. */
  .mc-search { flex: 1 1 100%; min-width: 0; }
  /* The backdrop height is set to window.visualViewport.height in JS so it
     shrinks when the keyboard opens (iOS doesn't shrink vh/dvh for the
     keyboard). The modal fits within that and its body scrolls. */
  .add-modal { max-width: 100%; max-height: 100%; align-self: flex-end; }
  .add-modal .add-body { flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
  .add-backdrop { place-items: end stretch; padding: 0; }
  .add-manual-grid { grid-template-columns: 1fr; }
  .mkt-pv-total { font-size: 36px; }
  .proto-sw { bottom: 14px; left: 14px; }
  .nav-avatar .nm { display: none; }
}

/* ---- Password show/hide toggle (login + signup) ---- */
.auth-pass-wrap { position: relative; display: block; }
.auth-pass-wrap .auth-input { width: 100%; padding-right: 52px; }
.auth-pass-toggle {
  position: absolute; right: 0; bottom: 7px;
  background: none; border: 0; padding: 2px 2px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--auth-mute); cursor: pointer; opacity: 1;
  transition: color 0.15s, opacity 0.15s;
}
.auth-pass-toggle:hover { color: var(--accent); opacity: 1; }

/* ---- Add-record: "every record ever made" catalog results ---- */
.add-cat-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 14px 14px 6px; border-top: 1px solid var(--rule); margin-top: 6px;
}
.add-cat-spin { opacity: 0.6; text-transform: none; letter-spacing: 0; }
.add-res-cat .add-res-cover { overflow: hidden; border-radius: 2px; background: var(--paper-2, #eee); }
.add-res-cat-tag {
  color: var(--paper); background: var(--accent);
  padding: 3px 9px; border-radius: 999px; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.add-res-cat[disabled] { opacity: 0.5; pointer-events: none; }
.add-cat-empty { padding: 14px; font-size: 13px; color: var(--ink-mute); font-style: italic; }
.add-cat-pricing {
  padding: 12px 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}

/* ======================================================================
   Collection v2 — scanner, add flow, verified cards
   (appended; see MyCollectionAdd_v2.jsx / BarcodeScanner.jsx / MyCollectionV2.jsx)
   ====================================================================== */

/* verified-collection card extras */
.v2-badge { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:20px; font-size:11px; letter-spacing:.02em; }
.v2-badge.scanned { background:oklch(0.52 0.13 150 / .15); color:oklch(0.42 0.13 150); }
.v2-badge.manual { background:var(--paper-2, #efe9df); color:var(--ink-mute); }
.v2-public-note { font-size:12px; color:var(--ink-mute); margin-top:12px; max-width:46ch; }

/* ---- scanner overlay ---- */
.bs-overlay { position:fixed; inset:0; z-index:9999; background:#000; display:flex; flex-direction:column; }
.bs-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; color:#fff; }
.bs-title { font-size:15px; letter-spacing:.04em; text-transform:uppercase; }
.bs-close { background:none; border:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.bs-stage { position:relative; flex:1; overflow:hidden; }
.bs-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bs-frame { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(78vw,360px); height:170px; }
.bs-corner { position:absolute; width:26px; height:26px; border:3px solid #fff; }
.bs-corner.tl { top:0; left:0; border-right:none; border-bottom:none; }
.bs-corner.tr { top:0; right:0; border-left:none; border-bottom:none; }
.bs-corner.bl { bottom:0; left:0; border-right:none; border-top:none; }
.bs-corner.br { bottom:0; right:0; border-left:none; border-top:none; }
.bs-scanline { position:absolute; left:6px; right:6px; top:50%; height:2px; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:bsscan 1.8s ease-in-out infinite; }
@keyframes bsscan { 0%{top:10%} 50%{top:90%} 100%{top:10%} }
.bs-hint { position:absolute; left:0; right:0; top:50%; text-align:center; color:#fff; font-size:14px; }
.bs-hint-bottom { top:auto; bottom:28px; opacity:.85; }
.bs-fallback { background:#111; color:#fff; padding:18px; }
.bs-fallback-msg { font-size:13px; opacity:.85; margin-bottom:12px; }
.bs-manual { display:flex; gap:8px; }
.bs-manual-input { flex:1; padding:12px; font-size:16px; border-radius:8px; border:1px solid #444; background:#1c1c1c; color:#fff; }
.bs-manual-go { padding:12px 16px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:15px; }
.bs-manual-go:disabled { opacity:.4; }
.bs-type-instead { background:none; border:none; color:#fff; opacity:.8; padding:16px; font-size:14px; text-decoration:underline; cursor:pointer; }

/* ---- add flow modal ---- */
.av2-backdrop { position:fixed; inset:0; background:rgba(20,16,12,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:500; }
.av2-modal { background:var(--paper); width:100%; max-width:520px; max-height:90vh; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.av2-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--rule); }
/* Top-left "back to collection" group: a chevron next to the title. Pairs with
   the × (top-right); both dismiss the sheet, and the chevron gives the visible
   affordance for the same gesture the hardware/Safari Back button now does. */
.av2-head-left { display:flex; align-items:center; gap:6px; min-width:0; }
.av2-back-arrow { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; padding:5px; margin:-5px 0 -5px -7px; cursor:pointer; color:var(--ink-mute); border-radius:8px; flex:0 0 auto; }
.av2-back-arrow:hover { color:var(--ink); background:var(--paper-2); }
.av2-head-title { text-transform:uppercase; letter-spacing:.06em; font-size:13px; }
.av2-x { background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--ink-mute); flex:0 0 auto; }
.av2-body { overflow:auto; }
.av2-pane { padding:20px; }
.av2-title { font-size:20px; margin:0 0 6px; }
.av2-hint { color:var(--ink-mute); font-size:14px; margin:0 0 14px; }
.av2-foot { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
.av2-next { padding:11px 18px; border:none; border-radius:8px; background:var(--ink); color:var(--paper); font-size:15px; cursor:pointer; }
.av2-next:disabled { opacity:.4; }
.av2-back { padding:11px 16px; border:1px solid var(--rule); border-radius:8px; background:#fff; cursor:pointer; }
.av2-back:disabled { opacity:.4; }
.av2-back-link, .av2-entry-link { background:none; border:none; color:var(--accent); cursor:pointer; padding:6px 0; font-size:14px; }
.av2-consent-lede { font-size:15px; }
.av2-consent-list { padding-left:18px; font-size:14px; line-height:1.55; }
.av2-consent-ack { display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:14px; }
.av2-entry-primary { width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px; border:2px solid var(--ink); border-radius:12px; background:#fff; cursor:pointer; margin-bottom:12px; }
.av2-entry-primary span { font-size:17px; font-weight:600; }
.av2-entry-primary small { color:var(--ink-mute); }
.av2-entry-secondary { width:100%; padding:13px; border:1px solid var(--rule); border-radius:10px; background:#fff; cursor:pointer; margin-bottom:10px; font-size:15px; }
.av2-public-note { font-size:12px; color:var(--ink-mute); margin-top:14px; }
.av2-cand-list, .av2-results { display:flex; flex-direction:column; gap:8px; }
.av2-cand, .av2-res { display:flex; gap:10px; align-items:center; text-align:left; padding:10px; border:1px solid var(--rule); border-radius:10px; background:#fff; cursor:pointer; }
.av2-cand-thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; background:#eee; flex:none; }
.av2-cand-main { display:flex; flex-direction:column; gap:2px; }
.av2-cand-meta, .av2-cand-fmt { font-size:12px; color:var(--ink-mute); }
.av2-res { justify-content:space-between; }
.av2-res-rank { color:var(--ink-mute); font-size:12px; }
.av2-search input, .av2-manual-grid input { width:100%; padding:11px; border:1px solid var(--rule); border-radius:8px; font-size:16px; }
.av2-search { margin-bottom:12px; }
.av2-manual-grid { display:flex; flex-direction:column; gap:10px; }
.av2-manual-grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--ink-mute); }
.av2-chosen { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.av2-chosen-cover { width:56px; height:56px; object-fit:cover; border-radius:6px; }
.av2-chosen-meta { font-size:13px; color:var(--ink-mute); }
/* Media and sleeve grade are both required, and a mis-tap silently records the
   wrong condition AND the wrong valuation — so these get full 44px+ targets and
   a gap wide enough that the media row can't be hit from the sleeve row. Eight
   grades at 50px + 10px gaps still fit one row in the 520px modal and wrap
   cleanly below that. */
.av2-grade-group { margin-bottom:18px; }
.av2-grade-label { font-size:13px; color:var(--ink-mute); margin-bottom:8px; }
.av2-grade-row { display:flex; flex-wrap:wrap; gap:10px; }
.av2-grade { min-width:50px; min-height:48px; padding:12px 10px; border:1px solid var(--rule); border-radius:8px; background:#fff; cursor:pointer; font-size:16px; }
.av2-grade.sel { background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* The plain-words line under each grade row: what the selected grade means,
   or (before a pick) how to tell VG+ from VG. min-height stops the panel
   jumping as descriptions of different lengths swap in. */
.av2-grade-desc { margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--ink-2); min-height:2.4em; }
.av2-grade-desc-hint { color:var(--ink-mute); }
.av2-est { min-height:22px; font-size:14px; margin-top:8px; }
.av2-est-val { color:var(--accent); font-weight:600; }
.av2-est-busy, .av2-est-none { color:var(--ink-mute); }

/* ---- collection v2 dashboard ---- */
.v2-progress-panel { margin-bottom:18px; }
.v2-progress-head { font-size:22px; margin:6px 0 8px; }
.v2-progress-head b { font-size:26px; }
.v2-progress-pct { color:var(--ink-mute); font-size:14px; margin-left:8px; }
.v2-gaps-label { font-size:12px; color:var(--ink-mute); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.04em; }
.v2-gaps { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.v2-gap { flex:none; width:56px; text-align:center; text-decoration:none; color:inherit; opacity:.92; transition:opacity .15s; }
.v2-gap:hover { opacity:1; }
.v2-gap-rank { display:block; font-size:10px; color:var(--ink-mute); margin-top:4px; }
.v2-cond-dist { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
.v2-cond-row { display:flex; align-items:center; gap:10px; }
.v2-cond-code { width:38px; font-size:13px; font-weight:600; }
.v2-cond-track { flex:1; height:10px; background:var(--rule); border-radius:6px; overflow:hidden; }
.v2-cond-fill { display:block; height:100%; background:var(--accent); }
.v2-cond-n { width:28px; text-align:right; font-size:13px; color:var(--ink-mute); }

/* value-over-time chart with axes */
.v2-vot { display:flex; gap:8px; }
.v2-vot-yaxis { display:flex; flex-direction:column; justify-content:space-between; height:150px; text-align:right; font-size:11px; color:var(--ink-mute); min-width:42px; }
.v2-vot-plot { flex:1; min-width:0; }
.v2-vot-plot svg { height:150px; }
.v2-vot-xaxis { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-mute); margin-top:4px; }
/* #5: on the 2-col dashboard grid the right panel (genre + decade bars) is
   taller, so the left chart panel stretches but its fixed-150px chart left
   dead space below. Let the left panel and its stretch-friendly SVG
   (preserveAspectRatio:none) fill the column height. Single-col mobile
   (<=980px) keeps the fixed 150px chart. */
@media (min-width: 981px) {
  .mc-dash-grid .mc-panel { display:flex; flex-direction:column; }
  .mc-dash-grid .v2-vot { flex:1; }
  .mc-dash-grid .v2-vot-yaxis { height:auto; }
  .mc-dash-grid .v2-vot-plot { display:flex; flex-direction:column; }
  .mc-dash-grid .v2-vot-plot svg { flex:1; height:auto; min-height:150px; }
}

/* ===== Collection v2 — leaderboards + public collection view ===== */
.lb, .pubcol { max-width:780px; margin:0 auto; padding:32px 18px 80px; }
.lb-title { font-family:var(--serif, Georgia); font-size:34px; margin:0 0 6px; }
.lb-sub { color:var(--ink-mute); font-size:14px; max-width:54ch; margin:0 0 18px; }
.lb-tabs { display:flex; gap:6px; border-bottom:1px solid var(--rule); margin-bottom:18px; }
.lb-tab { background:none; border:none; padding:10px 14px; font-size:15px; color:var(--ink-mute); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.lb-tab.active { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }
.lb-genre-select { margin-bottom:14px; }
.lb-genre-select select { padding:9px 12px; border:1px solid var(--rule); border-radius:8px; font-size:16px; background:#fff; max-width:100%; }
.lb-note { color:var(--ink-mute); font-size:13px; font-style:italic; margin:0 0 14px; }
.lb-empty { padding:40px 0; text-align:center; color:var(--ink-mute); }
.lb-list { display:flex; flex-direction:column; gap:6px; }
.lb-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px; border:1px solid var(--rule); border-radius:10px; background:#fff; cursor:pointer; transition:border-color .15s; }
.lb-row:hover { border-color:var(--accent); }
.lb-row.me { background:var(--paper-2, #efe9df); }
.lb-rank { width:30px; font-size:16px; font-weight:600; color:var(--ink-mute); text-align:center; flex:none; }
.lb-rank.medal.r0 { color:#b8860b; } .lb-rank.medal.r1 { color:#8a8a8a; } .lb-rank.medal.r2 { color:#a0673a; }
.lb-name { font-size:16px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-meta { font-size:14px; color:var(--ink-mute); text-align:right; }
.lb-meta b { color:var(--ink); font-size:16px; }
.lb-arrow { color:var(--ink-mute); flex:none; }
.lb-back { background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0 0 14px; }
.pubcol-head { margin-bottom:20px; }
.pubcol-stats { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }

/* leaderboard rows — crown jewel cover + collecting-since */
.lb-crown { flex:none; width:48px; height:48px; border-radius:4px; overflow:hidden; }
.lb-crown-blank { display:block; width:48px; height:48px; background:var(--paper-2, #efe9df); }
.lb-name-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lb-name-col .lb-name { flex:none; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-since { font-size:12px; color:var(--ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-meta small { display:block; font-size:11px; font-weight:400; color:var(--ink-mute); }

/* clear the fixed nav (match .mc) */
.pubcol { padding-top: 104px; }
/* Leaderboards carries the price ticker flush under the nav (first child). The
   nav-clearance padding sits it right under the nav; the ticker breaks out of
   this centered column to full width and drops its top border so the nav's
   bottom border is the single divider. .lb-head keeps its breathing room. */
.lb { padding-top: calc(66px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
.lb > .hd-ticker {
  margin-top: -5px; border-top: none;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.lb > .hd-ticker + .lb-head { margin-top: 28px; }
@media (max-width: 640px) { .lb > .hd-ticker { margin-top: -2px; } }

/* leaderboard crown key + badge */
.lb-key { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-mute); margin-top:4px; }
.lb-key-crown { color:#b8860b; display:inline-flex; }
.lb-since svg { color:#b8860b; }
.lb-crown { position:relative; }
.lb-crown-badge { position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:#b8860b; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); }

/* ===== Account settings ===== */
.acct { max-width:640px; margin:0 auto; padding:104px 18px 80px; }
.acct-head { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.acct-avatar { flex:none; width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; }
.acct-sub { color:var(--ink-mute); font-size:14px; margin-top:4px; }
.acct-card { border:1px solid var(--rule); border-radius:12px; padding:18px; margin-bottom:14px; background:#fff; }
.acct-card-k { font-size:15px; font-weight:600; }
.acct-card-d { font-size:13px; color:var(--ink-mute); margin:4px 0 12px; }
.acct-row { display:flex; gap:8px; }
.acct-row input { flex:1; min-width:0; padding:11px; border:1px solid var(--rule); border-radius:8px; font-size:16px; }
.acct-btn { padding:11px 16px; border:none; border-radius:8px; background:var(--ink); color:var(--paper); font-size:14px; cursor:pointer; white-space:nowrap; }
.acct-btn:disabled { opacity:.5; }
.acct-btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--rule); }
.acct-btn.danger { background:none; color:oklch(0.55 0.16 28); border:1px solid currentColor; }
.acct-link { background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; padding:10px 0 0; }
.acct-msg { font-size:13px; color:var(--ink-mute); margin-top:10px; }

.acct-col { display:flex; flex-direction:column; gap:8px; }

/* ===== Leaderboards — dynamism: podium, bars, badges, movers, champions, rarest ===== */
.lb-tabs { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab { white-space: nowrap; flex: none; }

/* podium */
.lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 12px 0 24px; }
.lb-pod { flex: 1; max-width: 168px; text-align: center; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 14px 8px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: transform .2s ease, box-shadow .2s ease; }
.lb-pod:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
.lb-pod-1 { transform: scale(1.05); } .lb-pod-1:hover { transform: translateY(-3px) scale(1.05); }
.lb-pod-medal { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; margin: 10px 0 4px; }
.lb-pod-medal.m1 { background: #caa53d; } .lb-pod-medal.m2 { background: #9a9a9a; } .lb-pod-medal.m3 { background: #a0673a; }
.lb-pod-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lb-pod-val { font-size: 13px; color: var(--ink-mute); }
.lb-pod-bar { width: 64%; margin-top: 10px; border-radius: 6px 6px 0 0; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 35%, var(--paper))); }
.lb-pod-1 .lb-pod-bar { height: 36px; } .lb-pod-2 .lb-pod-bar { height: 22px; } .lb-pod-3 .lb-pod-bar { height: 14px; }

/* per-row value bar (animates on mount) */
.lb-bar { display: block; height: 5px; background: var(--rule); border-radius: 5px; overflow: hidden; margin-top: 7px; }
.lb-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 5px; animation: lbbar .85s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes lbbar { to { width: var(--w); } }
@media (prefers-reduced-motion: reduce) { .lb-bar i { animation: none; width: var(--w); } }

/* badges */
.lb-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.lb-badge { font-size: 10px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); background: var(--paper-2, #efe9df); border-radius: 20px; padding: 2px 7px; }

/* movers chip */
.lb-mv { font-size: 11px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
.lb-mv.up { color: oklch(0.5 0.13 150); } .lb-mv.down { color: oklch(0.55 0.16 28); } .lb-mv.flat { color: var(--ink-mute); }

/* genre champions */
.lb-champ-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .lb-champ-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .lb-champ-grid { grid-template-columns: repeat(3, 1fr); } }
.lb-champ { text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 16px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lb-champ:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.09); border-color: var(--accent); }
.lb-champ-genre { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lb-champ-name { font-family: var(--serif); font-size: 20px; margin: 6px 0 2px; }
.lb-champ-val { font-weight: 700; }
.lb-champ-tag { font-size: 11px; color: var(--ink-mute); margin-top: 8px; }

/* rarest finds */
.lb-rare-list { display: flex; flex-direction: column; gap: 6px; }
.lb-rare { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color .2s ease; }
.lb-rare:hover { border-color: var(--accent); }
.lb-rare-rank { width: 20px; font-weight: 700; color: var(--ink-mute); flex: none; }
.lb-rare-cover { flex: none; }
.lb-rare-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-rare-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rare-a { font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rare-v { font-weight: 700; flex: none; }

/* ===== Leaderboards v3 — stats hero, dramatic podium, gallery, polish ===== */

/* Entrance: rows/cards rise + fade, staggered by --i. */
@keyframes lbrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lbshine { 0% { left: -60%; } 32%, 100% { left: 130%; } }

/* ---- Aggregate stats hero band (dark command bar) ---- */
.lb-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule); border-radius: 16px; overflow: hidden;
  margin: 0 0 24px; box-shadow: 0 22px 50px -30px rgba(0,0,0,.5);
}
.lb-stat {
  background: radial-gradient(150% 170% at 0% 0%, #241d15 0%, #14110d 62%);
  color: #f3ede1; padding: 20px 14px; text-align: center;
}
.lb-stat-n { font-family: var(--sans, system-ui); font-weight: 900; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.lb-stat-n .cur { font-size: .6em; opacity: .8; margin-right: 1px; font-weight: 800; }
.lb-stat-n small { font-size: .46em; font-weight: 700; opacity: .55; letter-spacing: 0; }
.lb-stat-l { font-family: var(--mono, ui-monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,237,225,.58); margin-top: 8px; }
.lb-stat-hero { background: radial-gradient(150% 170% at 100% 0%, #2a2016 0%, #14110d 62%); }
.lb-stat-hero .lb-stat-n { color: color-mix(in oklab, var(--accent) 72%, #f3ede1); font-size: 35px; }
@media (max-width: 680px) {
  .lb-stats { grid-template-columns: repeat(2, 1fr); }
  .lb-stat-hero { grid-column: 1 / -1; order: -1; }
  .lb-stat-n { font-size: 26px; } .lb-stat-hero .lb-stat-n { font-size: 30px; }
}

/* ---- Podium: taller, gradient leader, shine, crown + sub-line ---- */
.lb-podium { gap: 14px; margin: 8px 0 30px; }
.lb-pod { position: relative; overflow: hidden; padding: 18px 10px 0; border-radius: 14px; }
.lb-pod-1 {
  background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent) 9%, #fff));
  border-color: color-mix(in oklab, var(--accent) 42%, var(--rule));
  box-shadow: 0 16px 36px -20px color-mix(in oklab, var(--accent) 60%, rgba(0,0,0,.5));
}
.lb-pod-cover { position: relative; border-radius: 6px; box-shadow: 0 12px 26px -12px rgba(0,0,0,.45); }
.lb-pod-crownico {
  position: absolute; top: -8px; right: -8px; width: 21px; height: 21px; border-radius: 50%;
  background: #caa53d; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.32); z-index: 2;
}
.lb-pod-val { font-family: var(--sans, system-ui); font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-top: 2px; }
.lb-pod-1 .lb-pod-val { font-size: 19px; }
.lb-pod-val .cur { font-size: .7em; opacity: .7; margin-right: 1px; }
.lb-pod-val b { font-weight: 800; }
.lb-pod-sub { font-size: 11px; color: var(--ink-mute); margin-top: 3px; }
.lb-pod-1 .lb-pod-bar { height: 50px; } .lb-pod-2 .lb-pod-bar { height: 32px; } .lb-pod-3 .lb-pod-bar { height: 18px; }
.lb-pod-bar { margin-top: 12px; }
.lb-pod-shine {
  position: absolute; top: 0; left: -60%; width: 42%; height: 100%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: lbshine 3.6s ease-in-out 1.1s infinite;
}

/* ---- Ranked rows: stagger in, sub-line, richer bar, hover ---- */
.lb-row { animation: lbrise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 38ms); transition: border-color .15s, transform .15s, box-shadow .15s; }
.lb-row:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: 0 10px 22px -14px rgba(0,0,0,.35); }
.lb-row.top { border-color: color-mix(in oklab, var(--accent) 26%, var(--rule)); }
.lb-sub-line { font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar i { background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, var(--paper)), var(--accent)); }
.lb-meta b { display: inline-flex; align-items: baseline; }
.lb-meta .cur { font-size: .68em; opacity: .7; margin-right: 1px; }

/* ---- Genre champions: cover-led cards ---- */
.lb-champ { display: flex; gap: 14px; align-items: center; animation: lbrise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 48ms); }
.lb-champ-cover { flex: none; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(0,0,0,.42); }
.lb-champ-body { flex: 1; min-width: 0; }
.lb-champ-name { font-size: 18px; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-champ-val { font-family: var(--sans, system-ui); font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin-top: 2px; }
.lb-champ-val .cur { font-size: .68em; opacity: .7; margin-right: 1px; }
.lb-champ-tag { display: inline-flex; align-items: center; gap: 6px; color: #b8860b; margin-top: 8px; }
.lb-champ-tag svg { color: #caa53d; flex: none; }

/* ---- Rarest finds: cover gallery ---- */
.lb-rare-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); justify-content: center; gap: 16px; }
.lb-rare-card {
  position: relative; display: flex; flex-direction: column; text-align: left; width: 150px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  padding: 0 0 12px; cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
  animation: lbrise .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--i, 0) * 42ms);
}
.lb-rare-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(0,0,0,.32); border-color: var(--accent); }
.lb-rare-card.top { border-color: #caa53d; box-shadow: 0 0 0 1px #caa53d inset; }
.lb-rare-rank {
  position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(20,17,13,.78); color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); z-index: 2;
}
.lb-rare-card.top .lb-rare-rank { background: #caa53d; }
.lb-rare-v {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(20,17,13,.8); color: #fff; font-weight: 800; font-size: 13px;
  padding: 3px 9px; border-radius: 20px; backdrop-filter: blur(2px);
}
.lb-rare-v .cur { font-size: .8em; opacity: .85; margin-right: 1px; }
.lb-rare-body { padding: 10px 12px 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-rare-body .lb-rare-t { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rare-body .lb-rare-a { font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rare-owner { font-size: 11px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lb-row, .lb-champ, .lb-rare-card { animation: none; }
  .lb-pod-shine { animation: none; display: none; }
}

/* ── Catalogue-number entry (av2 add flow) ───────────────────────────────
   A second way into the same pressing-confirmation flow as barcode scan.
   Inputs are 16px so iOS Safari doesn't zoom-jump on focus. */
.av2-catno-form { display: flex; gap: 8px; margin: 4px 0 14px; }
.av2-catno-input {
  flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--rule); border-radius: 8px;
  font-size: 16px; letter-spacing: .04em; text-transform: uppercase; background: #fff; color: var(--ink);
}
.av2-catno-input::placeholder { letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.av2-catno-go {
  flex: none; padding: 12px 18px; border: none; border-radius: 8px;
  background: var(--ink); color: var(--paper); font-size: 15px; cursor: pointer;
}
.av2-catno-go:disabled { opacity: .4; cursor: default; }
.av2-catno-eg {
  font-family: var(--mono); font-size: .92em; letter-spacing: .04em;
  background: var(--paper-2, #f1ece4); padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}

/* Desktop: the modal is wider than a phone — lay candidates out in a two-up
   grid instead of a single stretched column. Same cards, reused by every
   lookup path (scan / catno / search). */
@media (min-width: 560px) {
  .av2-cand-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .av2-cand { align-items: flex-start; }
}

/* ============================================================
   Collection visibility toggle (public / private) — owner page.
   Appended for the public/private visibility feature. Mobile-first.
   ============================================================ */
.v2-vis { margin-top: 16px; max-width: 520px; }
.v2-vis-main { display: flex; align-items: flex-start; gap: 14px; }
.v2-vis-switch {
  flex: 0 0 auto; position: relative; width: 58px; height: 34px; padding: 0;
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
  background: color-mix(in oklab, var(--paper) 50%, #000 6%);
  transition: background .18s ease, border-color .18s ease;
}
.v2-vis-switch .v2-vis-knob {
  position: absolute; top: 50%; left: 4px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: left .18s ease;
}
.v2-vis-switch.on { background: var(--accent); border-color: var(--accent); }
.v2-vis-switch.on .v2-vis-knob { left: 28px; }
.v2-vis-switch:disabled { opacity: .55; cursor: default; }
.v2-vis-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.v2-vis-text { min-width: 0; }
.v2-vis-state { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-vis-state b { font-weight: 900; }
.v2-vis-explain { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); max-width: 46ch; }
.v2-vis-flag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.v2-vis-flag.saving { color: var(--ink-mute); border: 1px solid var(--rule); }
.v2-vis-flag.saved { color: oklch(0.5 0.13 150); border: 1px solid color-mix(in oklab, oklch(0.5 0.13 150) 40%, var(--rule)); }
.v2-vis-err { color: var(--accent); }
.v2-vis-retry { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* inline consent (going public) / confirm (going private) panel */
.v2-vis-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: color-mix(in oklab, var(--paper) 60%, #fff 40%); }
.v2-vis-panel-h { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.v2-vis-panel-lede { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.v2-vis-panel-list { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.v2-vis-ack { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.v2-vis-ack input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
.v2-vis-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.v2-vis-cancel, .v2-vis-go { font: inherit; font-weight: 700; font-size: 13.5px; padding: 11px 16px; border-radius: 10px; cursor: pointer; min-height: 44px; }
.v2-vis-cancel { background: none; border: 1px solid var(--rule); color: var(--ink-2); }
.v2-vis-go { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.v2-vis-go.danger { background: var(--ink); border-color: var(--ink); }
.v2-vis-go:disabled { opacity: .5; cursor: default; }

/* anonymised (private) leaderboard rows: no link affordance */
.lb-row.anon, .lb-pod.anon { cursor: default; }
.lb-row.anon .lb-name, .lb-pod.anon .lb-pod-name { color: var(--ink-mute); font-style: italic; }

@media (max-width: 560px) {
  .v2-vis { max-width: none; }
  .v2-vis-switch { width: 64px; height: 38px; }
  .v2-vis-switch .v2-vis-knob { width: 30px; height: 30px; }
  .v2-vis-switch.on .v2-vis-knob { left: 30px; }
  .v2-vis-cancel, .v2-vis-go { flex: 1 1 auto; }
}

/* ===========================================================
   Collection v2 QA fixes — CN-02, CN-03, CN-04, PC-02, PC-03.
   Appended (not overwritten) — later rules win on equal specificity.
   =========================================================== */

/* CN-02 — catalogue-number provenance badge. Verified treatment, like the
   `scanned` badge (not the muted `manual` one), with a distinct hue so it
   reads as its own provenance. */
.v2-badge.catalogue { background: oklch(0.55 0.12 255 / .15); color: oklch(0.45 0.13 262); }

/* CN-03 — reserve the top-right of the card body so the M/M condition control
   never sits under the absolute .mc-card-actions cluster. The cluster now holds
   TWO 26px buttons (details + remove) + 6px gap at top:12/right:12, so it spans
   ~58px from the card edge; reserve 62px so the widest chip (M/M) stays clear at
   every breakpoint (it's always visible <=640px, and on hover on desktop). */
.mc-card-top { padding-right: 62px; }
/* Touch/narrow: the delete cluster isn't hover-revealed, so keep it reachable
   (space is already reserved above, so no overlap). */
@media (max-width: 640px) {
  .mc-card-actions { opacity: 1; }
}

/* CN-04 — make "Closest gaps" a proper feature: bigger heading, larger
   tappable thumbnails (Sleeve bumped 56->84 in JSX), more breathing room.
   .v2-gaps keeps overflow-x:auto so the row scrolls rather than widening the
   page (no body overflow involved). */
.v2-progress-panel { padding: 28px; margin-bottom: 22px; }
.v2-progress-head { font-size: 26px; margin: 8px 0 10px; }
.v2-progress-head b { font-size: 34px; }
.v2-gaps-label { font-size: 13.5px; margin: 22px 0 12px; }
.v2-gaps { gap: 14px; padding-bottom: 8px; }
.v2-gap { width: 84px; }
.v2-gap-rank { font-size: 11px; margin-top: 6px; }

/* PC-02 — anonymous (and cover-less) leaderboard tiles show the site logo
   instead of a blank, cropped to fill the existing tile dimensions. */
.lb-crown-logo { display: block; width: 48px; height: 48px; object-fit: cover; }
.lb-pod-logo { display: block; object-fit: cover; border-radius: 6px; }

/* PC-03 — redacted value marker for anonymous (private) rows. */
.lb-val-hidden { color: var(--ink-mute); font-weight: 700; }

/* ===========================================================
   Purchase metadata — net value uplift, shared add/edit fields,
   item detail readout. (Brief A: purchase price, gift, uplift.)
   =========================================================== */

/* net value uplift (collection hero) */
.mc-uplift { margin-top: 12px; }
.mc-uplift-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.mc-uplift-fig { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mc-uplift-fig.pos { color: var(--accent); }
.mc-uplift-fig.zero { color: var(--ink-mute); }
.mc-uplift-fig.neg { color: oklch(0.5 0.12 28); }
.mc-uplift-cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 5px; }

/* shared purchase fields (add flow + item edit) */
.av2-purchase { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.av2-pf { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-mute); }
.av2-pf-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
/* min-height matches the date field's forced 44px (next rule) so all three
   purchase fields sit the same height — see M2-01 below for why that
   matters. */
.av2-pf-input { width: 100%; padding: 11px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 8px; font-size: 16px; background: #fff; color: var(--ink); }
/* iOS Safari renders input[type=date] with its own intrinsic width and a
   vertically/horizontally off value, so it sat misaligned next to the text
   inputs. Strip the native appearance, pin full width, and left-align the
   value so the date field matches the rest of the purchase fields.
   M2-01 (QA, real-device retest): that min-height was set ONLY here, while
   the price/location text inputs' natural height (padding + content, no
   explicit box-sizing) settled a couple of px shorter — so the date field
   was a measurably different height from its siblings ("a small positioning
   glitch"). Confirmed in an isolated repro (42px vs 45px) and fixed by
   moving min-height + box-sizing onto the shared .av2-pf-input rule above,
   so every purchase field is the same height. */
.av2-pf-input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 100%; text-align: left; }
.av2-pf-input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.av2-pf-input[type="date"]::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
/* min-height matches .av2-pf-input above — the price field is its own
   .av2-price-wrap (not a plain .av2-pf-input), so without this it would
   become the odd-height-out once the date/location fields were equalised. */
.av2-price-wrap { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 8px; background: #fff; overflow: hidden; }
.av2-price-wrap.disabled { opacity: 0.5; }
.av2-price-cur { padding: 0 4px 0 11px; color: var(--ink-mute); font-size: 16px; }
/* It also carries .av2-pf-input (for the shared text size/colour), but its
   OWN min-height would stack with .av2-price-wrap's — the wrapper already
   reserves the 44px tap target via align-items:center, so let the input
   size to its natural content height inside it. */
.av2-price-input { border: none; border-radius: 0; min-height: 0; padding-top: 0; padding-bottom: 0; }
.av2-price-input:focus { outline: none; }
.av2-pf-gift { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.av2-pf-err { color: oklch(0.5 0.12 28); font-size: 13px; margin: 8px 0 0; }

/* item detail readout (view mode) */
.cid-readout { margin-top: 4px; }
.cid-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.cid-row:first-child { border-top: 1px solid var(--rule); }
/* Upgrade headroom — what a better copy of a record you already own is worth.
   Sits inside the read-out with the other facts, tinted so it reads as a finding
   rather than another field. */
.cid-upgrade {
  margin: 12px 0 2px; padding: 12px 14px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-radius: 8px;
}
.cid-upgrade-k {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}
.cid-upgrade-p { margin: 0; font-family: var(--body-serif); font-size: 14px; line-height: 1.5; color: var(--ink); }
.cid-upgrade-p b { font-weight: 700; }
.cid-upgrade-n { margin: 6px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.45; color: var(--ink-mute); }
.cid-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.cid-v { font-size: 15px; color: var(--ink); text-align: right; }

/* ---- collection folders (filter chips + management) --------------------- */
.mc-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.mc-fchip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2);
  background: #fff8; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mc-fchip:hover { border-color: var(--ink-mute); color: var(--ink); }
.mc-fchip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mc-fchip.new { color: var(--ink-mute); border-style: dashed; }
.mc-fchip.new:hover { color: var(--ink); border-color: var(--ink-mute); }
.mc-fchip-ct { font-size: 10px; opacity: 0.65; font-variant-numeric: tabular-nums; }
.mc-fchip.active .mc-fchip-ct { opacity: 0.85; }

.mc-fchip-wrap { display: inline-flex; align-items: center; gap: 3px; }
.mc-fchip-tools { display: inline-flex; align-items: center; gap: 3px; }
.mc-fchip-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 999px;
  background: #fff8; color: var(--ink-2); cursor: pointer; font-size: 12px; line-height: 1;
}
.mc-fchip-tool:hover { border-color: var(--ink-mute); color: var(--ink); }
.mc-fchip-tool.danger:hover { color: var(--accent); border-color: var(--accent); }

.mc-fchip-edit, .mc-fchip-confirm {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 6px 4px 13px; background: #fff8;
}
.mc-fchip-confirm { border-color: var(--accent); }
.mc-fchip-confirm-msg { font-family: var(--sans); font-size: 12px; color: var(--ink-2); max-width: 280px; line-height: 1.35; }
.mc-fchip-input {
  border: 0; background: transparent; outline: none; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink); width: 130px;
}
.mc-fchip-mini {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border: 0; border-radius: 999px; padding: 7px 11px; background: var(--ink); color: var(--paper); cursor: pointer;
}
.mc-fchip-mini:disabled { opacity: 0.45; cursor: default; }
.mc-fchip-mini.ghost { background: transparent; color: var(--ink-mute); }
.mc-fchip-mini.ghost:hover { color: var(--ink); }
.mc-fchip-mini.danger { background: var(--accent); }
.mc-fchip-manage {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute); background: transparent; border: 0; cursor: pointer; padding: 8px 6px; margin-left: 2px;
}
.mc-fchip-manage:hover, .mc-fchip-manage.on { color: var(--ink); }

.mc-folder-empty {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute);
  padding: 44px 4px; text-align: center; border: 1px dashed var(--rule);
}

/* folder picker inside the item detail/edit modal */
.cid-folder-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  border: 1px solid var(--rule); background: #fff8; color: var(--ink); padding: 10px 12px; cursor: pointer; outline: none;
}

@media (max-width: 640px) {
  /* M7: .mc-uplift's base rule (margin-top: 12px, below) sits later in this
     file than the responsive section near the top, so an override placed
     there would be shadowed by source order. Override it here instead, after
     the base rule, so it actually takes effect at mobile widths. */
  .mc-uplift { margin-top: 18px; }
  /* >=44px tap targets on mobile */
  .mc-fchip { min-height: 44px; padding: 0 16px; }
  .mc-fchip-tool { width: 44px; height: 44px; }
  .mc-fchip-mini { min-height: 44px; padding: 0 16px; }
  .mc-fchip-confirm-msg { max-width: 100%; }
}

/* ---- add-flow grade step: mobile stability (QA Stream 03, Item 2) ---- */
/* The negative-price validation error (Stream 02) toggled in and out of flow
   and pushed the grade step around on a phone. The error text is now always in
   the DOM; hide it with display:none on desktop (no gap, Stream 02 desktop
   layout unchanged) and reserve its row with visibility:hidden on mobile so a
   validity change causes no reflow. */
.av2-pf-err-reserve { display: none; }
@media (max-width: 640px) {
  .av2-pf-err-reserve { display: block; visibility: hidden; }
  /* Mobile: the add flow is a true full-screen overlay, not a centred card.
     The backdrop is an opaque page filling the viewport (nothing behind shows
     or scrolls); the modal fills it edge to edge with no radius; the header is
     sticky and never clipped; only .av2-body scrolls. 100dvh (not 90vh) so the
     iOS toolbar collapsing or the keyboard opening does not resize or shift it. */
  .av2-backdrop { padding: 0; align-items: flex-start; justify-content: center; background: var(--paper); overflow-x: hidden; }
  .av2-modal {
    width: 100%; max-width: none;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; box-shadow: none;
  }
  .av2-head { position: sticky; top: 0; background: var(--paper); z-index: 1; }
  /* Internal vertical scroll only; overflow-x:hidden kills the left/right pan
     (overflow-y:auto alone makes the computed overflow-x:auto). */
  .av2-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  /* Long "Artist — Title" / where-bought text must wrap, not push the layer
     wider than the viewport. min-width:0 lets the flex text column shrink. */
  .av2-cand-main, .av2-chosen > div { min-width: 0; }
  .av2-cand-t, .av2-cand-meta, .av2-chosen-t, .av2-chosen-meta, .av2-title { overflow-wrap: anywhere; }
}

/* ===========================================================
   Invite a friend: hero entry button + share sheet.
   The sheet reuses .av2-backdrop/.av2-modal (full-cover + body-lock on
   mobile, centred card on desktop); the classes below style its contents
   and the entry button that opens it. Append-only.
   =========================================================== */
.mc-invite {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 13px; letter-spacing: .02em;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mc-invite:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mc-invite svg { flex: none; }

/* Appraisal trigger — same pill, accent-outlined so the "take it out of the app"
   action reads as the valuable one without needing a second button style. */
.mc-appraise { border-color: color-mix(in oklab, var(--accent) 55%, var(--rule)); color: var(--accent); }
.mc-appraise:hover { border-color: var(--accent); background: var(--accent); color: var(--paper); }

/* Appraisal document overlay. Wider than the other av2 sheets because it holds
   an A4 document preview (rendered in an isolated iframe). */
.apx-modal { max-width: 860px; }
.apx-body { padding: 20px 22px 24px; display: flex; flex-direction: column; }
.apx-lede { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.apx-preview { border-radius: 10px; overflow: hidden; }
.apx-frame { display: block; width: 100%; height: 58vh; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.apx-loading { display: flex; align-items: center; justify-content: center; height: 40vh; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink-mute); font-family: var(--mono); font-size: 13px; }
.apx-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.apx-print {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 11px 22px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em; cursor: pointer;
  transition: filter .15s ease;
}
.apx-print:hover { filter: brightness(0.94); }
.apx-print.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.apx-print svg { flex: none; }
.apx-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.4; flex: 1 1 200px; min-width: 180px; }
@media (max-width: 640px) {
  .apx-body { padding: 14px 16px 24px; }
  /* The tall preview pushes the save button off-screen, so on mobile the
     action bar leads and stays pinned under the sheet header. */
  .apx-actions {
    order: -1; margin-top: 0; margin-bottom: 12px;
    position: sticky; top: 0; z-index: 3;
    background: var(--paper); padding: 6px 0 12px;
    border-bottom: 1px solid var(--rule);
  }
  .apx-lede { order: 0; font-size: 14px; }
  .apx-preview { order: 1; }
  .apx-print { flex: 1 1 auto; justify-content: center; }
  .apx-frame { height: 54vh; }
}

.inv-modal { max-width: 460px; }
.inv-pane { padding: 22px 20px 24px; }
.inv-lede { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.inv-share {
  width: 100%; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: filter .15s ease;
}
.inv-share:hover { filter: brightness(0.94); }
.inv-share svg { flex: none; }

.inv-copy { margin-top: 18px; }
.inv-copy-label {
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px;
  color: var(--ink-mute); margin-bottom: 8px;
}
.inv-copy-row { display: flex; gap: 8px; }
.inv-copy-url {
  flex: 1 1 auto; min-width: 0;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: 13px;
}
.inv-copy-btn {
  flex: none; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--ink); border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.inv-copy-btn:hover { background: var(--accent); border-color: var(--accent); }
.inv-copy-btn.done { background: oklch(0.5 0.13 150); border-color: oklch(0.5 0.13 150); color: #fff; }

@media (max-width: 640px) {
  /* The sheet is small, but reusing .av2-modal makes it a full-cover layer on
     mobile (per the overlay discipline). Keep the contents comfortably padded. */
  .inv-pane { padding: 22px 18px 28px; }
}

/* ===========================================================
   Collection import (CSV / Discogs) — CollectionImport.jsx.
   Reuses the av2 modal chrome (.av2-backdrop / .av2-modal / .av2-head
   / .av2-body) and the design tokens from styles.css / collection.css.
   Append-only. ci-* namespace.
   =========================================================== */

/* Import entry button — secondary sibling of .mc-add (outlined, not filled) */
.mc-import {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  padding: 9px 14px; transition: background 0.15s, color 0.15s; cursor: pointer;
}
.mc-import:hover { background: var(--ink); color: var(--paper); }

/* "Pending valuation" on a record tile (imported, not yet priced) */
.mc-card-val.pending {
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-mute); line-height: 1.3;
}

/* Modal: a touch wider than the add flow for the preview table */
.ci-modal { max-width: 640px; }
.ci-body { padding: 0; }
.ci-pane { padding: 20px 22px 26px; }
.ci-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ci-lede { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: 2px 0 18px; }
.ci-fineprint { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); margin: 4px 0 14px; }
.ci-err { margin: 0; padding: 12px 22px; background: color-mix(in oklab, var(--accent) 12%, var(--paper)); color: var(--accent); font-size: 13px; border-bottom: 1px solid var(--rule); }

/* Source picker */
.ci-source {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--rule); padding: 16px; margin-bottom: 12px; background: var(--paper);
  border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.ci-source-active:hover { border-color: var(--ink); background: var(--paper-2); }
.ci-source-soon { opacity: 0.62; cursor: default; }
.ci-source-ico { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 10px; color: var(--ink-2); }
.ci-source-txt { display: flex; flex-direction: column; gap: 3px; }
.ci-source-h { font-weight: 800; font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ci-source-txt small { font-size: 12.5px; color: var(--ink-mute); }
.ci-soon { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 7px; }

.ci-hints { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ci-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.ci-hint b { color: var(--ink-2); }

/* Column mapping */
.ci-maptable { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.ci-maprow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.ci-maprow:last-child { border-bottom: none; }
/* Let the grid tracks shrink below their content so a long header name or a
   wide native <select> wraps/clips instead of overflowing the modal width. */
.ci-mapcol, .ci-mapsel { min-width: 0; }
.ci-mapsel select { max-width: 100%; box-sizing: border-box; }
.ci-mapname { font-weight: 700; font-size: 13.5px; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }
.ci-mapsample { font-family: var(--mono); font-size: 10.5px; color: var(--ink-mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-maparrow { color: var(--ink-mute); font-size: 14px; }
/* 16px (not the old 13px): under 16px iOS Safari zooms the viewport on focus,
   which is worst here — the mapper is a long list of side-by-side selects and
   the zoom hides the row you are on. Padding trimmed so the row keeps its
   height, and the track already has min-width:0 so the wider text can't push
   the modal out. */
.ci-mapsel select { width: 100%; font-size: 16px; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }
.ci-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }

/* Actions */
.ci-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.ci-actions-center { justify-content: center; }
.ci-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 11px 18px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s; border: 1px solid var(--ink); }
.ci-btn.solid { background: var(--ink); color: var(--paper); }
.ci-btn.solid:hover { background: var(--accent); border-color: var(--accent); }
.ci-btn.ghost { background: transparent; color: var(--ink); }
.ci-btn.ghost:hover { background: var(--paper-2); }
.ci-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Preview */
.ci-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.ci-sum { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); }
.ci-sum b { color: var(--ink); }
.ci-sum.new { border-color: color-mix(in oklab, oklch(0.5 0.13 150) 50%, var(--rule)); }
.ci-sum.new b { color: oklch(0.45 0.13 150); }
.ci-sum.dup { color: var(--ink-mute); }
.ci-sum.attn b { color: var(--accent); }

.ci-previewwrap { border: 1px solid var(--rule); border-radius: 12px; overflow: auto; max-height: 46vh; }
.ci-preview { width: 100%; border-collapse: collapse; font-size: 13px; }
.ci-preview thead th { position: sticky; top: 0; background: var(--paper-2); text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding: 9px 10px; border-bottom: 1px solid var(--rule); z-index: 1; }
.ci-prow td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ci-prow:last-child td { border-bottom: none; }
.ci-prow.duplicate { opacity: 0.55; }
.ci-prow.attention { background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }
.ci-prow-title { font-weight: 700; color: var(--ink); line-height: 1.3; }
.ci-prow-artist { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }
.ci-canon { color: oklch(0.45 0.13 150); margin-left: 6px; }
.ci-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; display: block; background: var(--paper-2); }
.ci-thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--ink-mute); border: 1px solid var(--rule); }
.ci-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.ci-badge.new { background: color-mix(in oklab, oklch(0.5 0.13 150) 16%, var(--paper)); color: oklch(0.4 0.13 150); }
.ci-badge.dup { background: var(--paper-2); color: var(--ink-mute); }
.ci-badge.attn { background: color-mix(in oklab, var(--accent) 14%, var(--paper)); color: var(--accent); }

/* Writing + done */
.ci-bigh { font-family: var(--sans); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); margin: 12px 0; }
.ci-progress { width: 100%; max-width: 320px; height: 8px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; margin: 6px 0 10px; }
.ci-progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.ci-progress-num { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.ci-done-ico { color: oklch(0.5 0.13 150); margin-top: 8px; }
.ci-done-sub { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 4px 0 8px; max-width: 420px; }
/* Post-import proof chips: record count + canon coverage. Same visual language
   as the collection page's .mc-chip so the summary reads as part of the shelf. */
.ci-done-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 10px; }
.ci-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 60%, #fff 40%);
}
.ci-fail { width: 100%; max-width: 440px; text-align: left; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.ci-fail-h { font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.ci-fail ul { margin: 0; padding-left: 18px; }
.ci-fail li { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }

@media (max-width: 560px) {
  .ci-pane { padding: 16px 14px 22px; }
  .ci-maprow { grid-template-columns: 1fr auto 1fr; gap: 7px; padding: 10px; }
  .ci-preview { font-size: 12px; }
  .ci-actions { flex-direction: column-reverse; }
  .ci-btn { width: 100%; text-align: center; }
  .ci-actions-center .ci-btn { width: auto; }
}

/* ---- import: "here's what we found" playback (mapping confirmation) ------- */
.ci-found { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.ci-found-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.ci-found-row:last-child { border-bottom: none; }
.ci-found-tick { flex: 0 0 auto; align-self: center; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, oklch(0.5 0.13 150) 18%, var(--paper)); color: oklch(0.4 0.13 150); }
.ci-found-field { font-weight: 800; font-size: 14px; color: var(--ink); }
.ci-found-from { font-size: 13px; color: var(--ink-mute); }
.ci-found-from b { color: var(--ink-2); font-weight: 700; }
.ci-found-eg { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-left: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ci-ask { border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--rule)); background: color-mix(in oklab, var(--accent) 6%, var(--paper)); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.ci-ask-h { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 10px; line-height: 1.45; }
.ci-ask-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ci-ask-label { flex: 0 0 110px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ci-ask-sel { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }

.ci-skip { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; margin-bottom: 12px; }
.ci-skip b { color: var(--ink-2); font-weight: 600; }

.ci-link { background: none; border: none; padding: 0; margin: 2px 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ci-link:hover { color: var(--accent); }
.ci-hint-reassure { color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 11px 13px; }

@media (max-width: 560px) {
  .ci-found-eg { margin-left: 0; max-width: 100%; flex-basis: 100%; }
  .ci-ask-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .ci-ask-label { flex-basis: auto; }
}

/* import: disabled source card while another source is mid-flight */
.ci-source-disabled { opacity: 0.5; pointer-events: none; }
button.ci-source { font: inherit; text-align: left; }

/* ===========================================================
   Collection DNA panel (components/CollectionDNA.jsx).
   Sits between the hero and the tabs/shelf. The personality
   read is the hero (large serif); the fingerprint dimensions
   read as supporting metadata beneath it. Brand tokens only.
   =========================================================== */
.dna {
  margin: 8px 0 30px;
  padding: 26px 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.dna-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dna-read { margin-top: 12px; }
.dna-read-body {
  font-family: var(--serif);
  font-size: clamp(21px, 2.7vw, 30px);
  line-height: 1.32;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.dna-read-loading { color: var(--ink-mute); font-style: italic; }

.dna-nudge {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

/* fingerprint dimensions */
.dna-dims {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.dna-dim { background: var(--paper); padding: 18px 20px; min-width: 0; }
.dna-dim-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dna-dim-v {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dna-dim-note {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 4px;
}
.dna-bars { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.dna-bar-row { display: flex; align-items: center; gap: 10px; }
.dna-bar-label {
  flex: 0 0 84px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dna-bar-track {
  flex: 1 1 auto;
  height: 7px;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
.dna-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.dna-bar-n {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  min-width: 30px;
  text-align: right;
}

/* Part 5 — "+N more" reconciliation line under the era/genre bars, plus the
   extra fingerprint blocks (span / hundred / value shape / condition). */
.dna-bars-more { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-mute); }
.dna-facts { margin-top: 14px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.dna-fact { background: var(--paper); padding: 16px 20px; display: block; text-decoration: none; color: inherit; }
.dna-fact-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.dna-fact-v { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 5px; line-height: 1.45; overflow-wrap: anywhere; }
.dna-fact-link { cursor: pointer; transition: background 0.15s; }
.dna-fact-link:hover { background: color-mix(in oklab, var(--paper) 82%, #fff 18%); }
.dna-fact-link .dna-fact-k::after { content: " →"; }

/* locked teaser (< 20 records) — intentional retention bait, not an error */
.dna-locked { text-align: center; padding: 38px 28px; }
.dna-lock-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-mute);
}
.dna-locked .dna-eyebrow { display: block; }
.dna-lock-head {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink);
  margin-top: 10px;
  letter-spacing: -0.01em;
}
.dna-lock-sub {
  font-family: var(--body-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 440px;
  margin: 10px auto 0;
}

@media (max-width: 640px) {
  .dna { padding: 20px 18px; }
  .dna-dims { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Value-over-time chart (Brief B) — per-item detail modal.
   Inline-SVG line chart; estimated (dashed --ink-mute) vs live (solid --accent)
   is the load-bearing visual split. Brand tokens only, no default chart colours.
   =========================================================================== */
.vh { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.vh-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}

/* headline: current value + windowed delta */
.vh-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.vh-current { display: flex; align-items: baseline; gap: 8px; }
.vh-cur-num {
  font-family: var(--sans); font-weight: 900; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; font-size: 30px; line-height: 1; color: var(--ink);
}
.vh-cur-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.vh-delta { display: flex; align-items: baseline; gap: 8px; }
.vh-delta-num { font-family: var(--sans); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.vh-delta-pct { font-weight: 600; opacity: 0.85; }
.vh-delta.up .vh-delta-num { color: var(--accent); }
.vh-delta.down .vh-delta-num { color: var(--ink-2); }
.vh-delta.flat .vh-delta-num { color: var(--ink-mute); }
.vh-delta-lab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }

/* metadata: confidence chip + master note */
.vh-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.vh-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 11px; min-height: 30px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); -webkit-tap-highlight-color: transparent;
}
.vh-chip-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-mute); }
.vh-chip.is-high .vh-chip-dot { background: var(--accent); }
.vh-chip.is-medium .vh-chip-dot { background: var(--ink-2); }
.vh-chip.is-low .vh-chip-dot { background: var(--ink-mute); }
.vh-explain {
  font-family: var(--body-serif); font-size: 13px; line-height: 1.5; color: var(--ink-2);
  margin: -2px 0 10px; max-width: 52ch;
}
.vh-note {
  font-family: var(--body-serif); font-style: italic; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-mute); margin: -2px 0 10px; max-width: 52ch;
}

/* chart box */
.vh-chartbox { position: relative; width: 100%; margin-top: 4px; }
.vh-svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.vh-grid { stroke: var(--rule); stroke-width: 1; }
.vh-ylab, .vh-xlab {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; fill: var(--ink-mute);
}
.vh-line-live { stroke: var(--accent); stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vh-line-est { stroke: var(--ink-mute); stroke-width: 1.75; fill: none; stroke-dasharray: 4 4; stroke-linecap: round; }
.vh-dot-live { fill: var(--accent); }
.vh-cross { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.vh-active { stroke: var(--paper); stroke-width: 2; }
.vh-active.live { fill: var(--accent); }
.vh-active.est { fill: var(--ink-mute); }

/* tooltip */
.vh-tip {
  position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none;
  background: var(--ink); color: var(--paper); border-radius: 8px; padding: 7px 10px;
  box-shadow: 0 6px 22px rgba(23,19,15,0.22); white-space: nowrap; z-index: 2;
}
.vh-tip-v { font-family: var(--sans); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.vh-tip-d { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; opacity: 0.8; margin-top: 1px; }
.vh-tip-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.vh-tip-tag.est { color: #d8cdb8; }
.vh-tip-tag.live { color: var(--accent); }

/* legend + captions */
.vh-legend { display: flex; gap: 18px; margin-top: 12px; }
.vh-leg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.vh-swatch { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.vh-swatch.live { border-top-color: var(--accent); }
.vh-swatch.est { border-top-color: var(--ink-mute); border-top-style: dashed; }
.vh-caption { margin-top: 12px; font-family: var(--body-serif); font-style: italic; font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); max-width: 56ch; }

/* states */
.vh-loading { font-family: var(--body-serif); font-size: 14px; color: var(--ink-mute); padding: 18px 0; }
.vh-empty { padding: 22px 18px; border: 1px dashed var(--rule); border-radius: 12px; background: var(--paper-2); text-align: center; }
.vh-empty-t { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.vh-empty-s { font-family: var(--body-serif); font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.vh-single { padding: 22px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); text-align: center; }
.vh-single-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); margin: 0 auto 10px; }
.vh-single-t { font-family: var(--body-serif); font-size: 14px; color: var(--ink-2); }
.vh-single-s { font-family: var(--body-serif); font-size: 12.5px; color: var(--ink-mute); margin-top: 3px; }

@media (max-width: 480px) {
  .vh-cur-num { font-size: 26px; }
  .vh-head { gap: 4px 14px; }
  .vh-legend { gap: 14px; }
}

/* single-reading state: muted dot when that lone reading is estimated, so it
   never reads as a live valuation (Brief B no-fabrication rule). */
.vh-single-dot.est { background: var(--ink-mute); }

/* ===========================================================================
   Part 2 — the whole collection tile is a tap target for the detail view (and
   its value chart). The 13px details icon was the only way in and few people
   found it on mobile. The icon buttons still work (they stopPropagation).
   =========================================================================== */
.mc-card-tappable { cursor: pointer; }
.mc-card-tappable:active { background: color-mix(in oklab, var(--paper) 88%, var(--ink) 12%); }

/* ===========================================================================
   Part 4 — portfolio block (total + this-week movement + movers), below the
   DNA panel. Snapshot-sourced so it reconciles with the tile deltas. The
   per-mover change reuses the existing .mc-delta up/down treatment.
   =========================================================================== */
.mc-portfolio { margin: 20px 0 4px; }
.mcp-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.mcp-total { font-family: var(--sans); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mcp-cur { font-size: 0.62em; color: var(--ink-mute); font-weight: 800; margin-right: 1px; }
.mcp-move { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.mcp-move::before { content: "· "; color: var(--ink-mute); }
.mcp-move.up { color: oklch(0.52 0.13 150); }
.mcp-move.down { color: oklch(0.55 0.16 28); }
.mcp-move.flat { color: var(--ink-mute); }
.mcp-movers { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 14px; }
.mcp-movers-h { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.mcp-movers-list { display: grid; gap: 2px; }
.mcp-mover { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 8px; margin: 0; cursor: pointer; border-radius: 8px; transition: background 0.15s; font: inherit; color: inherit; }
.mcp-mover:hover { background: color-mix(in oklab, var(--paper) 82%, #fff 18%); }
.mcp-mover-cover { width: 40px; height: 40px; flex-shrink: 0; }
.mcp-mover-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.mcp-mover-t { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-mover-a { font-family: var(--sans); font-weight: 700; font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcp-mover .mc-delta { flex: none; font-size: 13px; }

/* ===========================================================================
   Part 6 — best dig card (owner-only). Cost data appears here and in the
   user-initiated share image only, never on a public/shared collection.
   =========================================================================== */
.bd-card { margin: 18px 0 4px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
.bd-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.bd-main { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.bd-cover { width: 84px; height: 84px; flex-shrink: 0; }
.bd-info { min-width: 0; flex: 1 1 auto; }
.bd-title { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.bd-artist { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.bd-nums { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bd-nums b { color: var(--ink-2); font-weight: 600; }
.bd-sep { color: var(--rule); }
.bd-uplift { font-family: var(--sans); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: oklch(0.52 0.13 150); margin-top: 8px; font-variant-numeric: tabular-nums; }
.bd-pct { font-size: 14px; font-weight: 700; color: var(--ink-mute); }
.bd-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bd-share { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--paper); background: var(--accent); border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: opacity 0.15s; }
.bd-share:hover { opacity: 0.9; }
.bd-share:disabled { opacity: 0.6; cursor: default; }
.bd-note { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }

/* ===========================================================================
   Part 7 — grail watch: "moved this week" treatment on wishlist cards. The
   movement number itself reuses the .mc-delta up/down/flat classes.
   =========================================================================== */
.wish-moved-tag { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--rule)); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.mc-card.wish-moved { box-shadow: inset 3px 0 0 var(--accent); }

/* ===========================================================================
   Part 8 — DNA shift banner, shown above the DNA panel on the next visit after
   an unseen regeneration. Tap acknowledges + scrolls to the read; × dismisses.
   =========================================================================== */
.dna-shift { display: flex; align-items: stretch; margin: 0 0 12px; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--rule)); border-radius: 3px; background: color-mix(in oklab, var(--accent) 8%, var(--paper)); overflow: hidden; }
.dna-shift-main { flex: 1 1 auto; text-align: left; background: none; border: none; cursor: pointer; padding: 12px 16px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dna-shift-cta { color: var(--accent); font-weight: 700; }
.dna-shift-x { flex: none; background: none; border: none; border-left: 1px solid color-mix(in oklab, var(--accent) 30%, var(--rule)); cursor: pointer; padding: 0 16px; font-size: 20px; line-height: 1; color: var(--ink-mute); }
.dna-shift-x:hover { color: var(--ink); }

/* ===========================================================================
   Part 9 — Your Next Record card, directly below the DNA panel.
   =========================================================================== */
.nr { margin: 14px 0 4px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; }
.nr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nr-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.nr-ai { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 8px; }
.nr-lock, .nr-loading { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 12px; }
/* --- Your Next Record: AI CTA (click to generate) --- */
.nr-cta { margin-top: 12px; }
.nr-cta-lead { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 16px; max-width: 48ch; }
.nr-generate { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 360px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--paper); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 14px 22px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.nr-generate:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.16); filter: brightness(1.05); }
.nr-generate:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.nr-generate:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; filter: none; }
.nr-spark { display: inline-block; animation: nrTwinkle 2.4s ease-in-out infinite; }
@keyframes nrTwinkle { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .nr-spark { animation: none; } }
.nr-error { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--accent); margin-top: 10px; }
.nr-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.nr-refresh { display: inline-block; margin-top: 12px; background: none; border: none; padding: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nr-refresh:disabled { color: var(--ink-mute); cursor: default; text-decoration: none; }
.nr-ack { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 10px; }
.nr-main { display: flex; gap: 16px; margin-top: 12px; align-items: flex-start; }
.nr-cover { width: 92px; height: 92px; flex-shrink: 0; }
.nr-info { min-width: 0; flex: 1 1 auto; }
.nr-title { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
.nr-artist { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.nr-why { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; }
.nr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nr-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; border-radius: 999px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-block; }
.nr-btn.solid { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.nr-btn.solid:hover { background: var(--accent); border-color: var(--accent); }
.nr-btn.solid:disabled { background: var(--rule); border-color: var(--rule); color: var(--ink-mute); cursor: default; }
.nr-btn.ghost { background: none; color: var(--ink-2); border: 1px solid var(--rule); }
.nr-btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.nr-complete { margin-top: 12px; }
.nr-complete-h { font-family: var(--serif); font-style: italic; font-size: 20px; }
.nr-complete-s { font-family: var(--sans); font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }

/* Your Next Record: tap-to-reveal face-down card (2026-07). The whole card is
   a button; the sleeve is a face-down record you tap to unwrap. */
.nr-reveal {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  margin-top: 12px; padding: 14px; cursor: pointer;
  background: color-mix(in oklab, var(--paper) 70%, var(--paper-2) 30%);
  border: 1px dashed color-mix(in oklab, var(--accent) 45%, var(--rule));
  border-radius: 6px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
/* a slow shine that sweeps across the whole card, inviting the tap */
.nr-reveal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 30%, color-mix(in oklab, var(--accent) 18%, transparent) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: nrCardShine 5.6s cubic-bezier(0.5,0,0.2,1) infinite;
}
@keyframes nrCardShine { 0%, 62% { transform: translateX(-120%); } 84%, 100% { transform: translateX(120%); } }
.nr-reveal:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in oklab, var(--accent) 6%, var(--paper));
  box-shadow: 0 10px 26px rgba(23,19,15,0.14);
}
.nr-reveal:active { transform: translateY(0); box-shadow: none; }
.nr-reveal:disabled { cursor: default; }
.nr-reveal-sleeve {
  position: relative; z-index: 2; width: 88px; height: 88px; flex-shrink: 0; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(23,19,15,0.18);
  /* the face-down record breathes, tilting like it wants to be flipped */
  animation: nrSleeveBreathe 3.6s ease-in-out infinite;
  transition: transform .18s ease;
}
@keyframes nrSleeveBreathe {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50%      { transform: rotate(1.5deg) scale(1.035); }
}
/* a gleam that rotates over the vinyl, catching the light */
.nr-reveal-sleeve::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in oklab, var(--accent) 55%, #fff) 24deg, transparent 60deg);
  opacity: .5; animation: nrSpin 4.5s linear infinite;
}
.nr-reveal:hover .nr-reveal-sleeve { transform: rotate(0deg) scale(1.06); }
.nr-reveal-q {
  position: relative; z-index: 1;
  font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 1;
  color: color-mix(in oklab, var(--accent) 80%, #fff 20%);
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 55%, transparent);
  animation: nrQPulse 2.2s ease-in-out infinite;
}
@keyframes nrQPulse {
  0%, 100% { opacity: .82; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}
.nr-reveal-spin {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--accent);
  animation: nrSpin 0.8s linear infinite;
}
.nr-reveal-copy { position: relative; z-index: 2; min-width: 0; flex: 1 1 auto; }
.nr-reveal-h { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.15; color: var(--ink); }
.nr-reveal-s { font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 6px 0 0; max-width: 46ch; }
.nr-reveal-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 55%, #000 12%);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 88%, #fff 12%), var(--accent));
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: #fff;
  box-shadow: 0 3px 10px color-mix(in oklab, var(--accent) 40%, transparent);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  /* a gentle attention pulse so the action reads as the point of the card */
  animation: nrCtaPulse 2.4s ease-in-out infinite;
}
.nr-reveal-cta .nr-spark { color: #fff; }
@keyframes nrCtaPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 3px 10px color-mix(in oklab, var(--accent) 40%, transparent); }
  50%      { transform: scale(1.045); box-shadow: 0 5px 18px color-mix(in oklab, var(--accent) 55%, transparent); }
}
/* a light sweeps through the CTA pill, like the leaderboard shine */
.nr-reveal-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: nrCtaShine 2.8s ease-in-out infinite;
}
@keyframes nrCtaShine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.nr-reveal:hover .nr-reveal-cta {
  transform: scale(1.06);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 78%, #fff 22%), var(--accent));
}
/* reveal animation on the unwrapped pick */
.nr-revealed { animation: nrReveal 0.42s cubic-bezier(0.2,0.8,0.2,1) both; }
@keyframes nrReveal { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes nrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nr-revealed { animation: none; }
  .nr-reveal-spin { animation-duration: 1.6s; }
  .nr-reveal::before,
  .nr-reveal-sleeve,
  .nr-reveal-sleeve::after,
  .nr-reveal-q,
  .nr-reveal-cta,
  .nr-reveal-cta::after { animation: none; }
  .nr-reveal-sleeve { transform: none; }
  .nr-reveal-cta { transform: none; }
  .nr-reveal-q { opacity: 1; }
}
@media (max-width: 460px) {
  .nr-reveal-sleeve { width: 72px; height: 72px; }
  .nr-reveal-q { font-size: 32px; }
}

/* =========================================================================
   OPTION B — shelf-first layout (2026-07): sticky section jump-nav, a
   compact value bar in place of the tall hero, and a single Insights block
   below the grid so the records lead. Legacy .mc-hero styles above are kept
   for the old CollectionApp; V2 no longer uses them.
   ========================================================================= */

/* --- sticky jump-nav, tucked under the fixed site nav -------------------- */
.mc-jumpnav {
  position: sticky; top: calc(var(--nav-h) + max(0px, env(safe-area-inset-top, 0px) - 12px)); z-index: 40;
  margin: 0 -40px 22px; padding: 0 40px;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: saturate(150%) blur(9px);
  -webkit-backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 1px solid var(--rule);
}
.mc-jumpnav-inner { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mc-jumpnav-inner::-webkit-scrollbar { display: none; }
.mc-jumplink {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap; padding: 14px 14px 13px; line-height: 1; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.mc-jumplink:hover { color: var(--ink); }
.mc-jumplink.active { color: var(--ink); border-bottom-color: var(--accent); }
.mc-jumplink-alt { margin-left: auto; color: var(--ink-2); }
.mc-jumplink-alt:hover { color: var(--accent); }

/* jump targets land below the sticky nav rather than under it */
#sec-top, #sec-shelf, #sec-dna, #sec-next, #sec-numbers { scroll-margin-top: calc(var(--nav-h) + 64px); }

/* --- compact value bar --------------------------------------------------- */
.mc-valuebar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: start;
  padding: 4px 0 28px; border-bottom: 1px solid var(--rule); margin-bottom: 10px;
}
.mc-vb-main { min-width: 0; }
.mc-vb-figure { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.mc-vb-total {
  font-family: var(--sans); font-weight: 900; letter-spacing: -0.045em;
  font-size: clamp(48px, 7vw, 84px); line-height: 0.9; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline;
}
.mc-vb-total .cur { font-size: 0.46em; color: var(--ink-mute); margin-right: 0.06em; font-weight: 800; }
.mc-vb-move {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--sans); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums;
}
.mc-vb-move small { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.mc-vb-move .mc-arrow { font-size: 12px; }
.mc-vb-move.up { color: oklch(0.52 0.13 150); }
.mc-vb-move.down { color: oklch(0.55 0.16 28); }
.mc-vb-move.flat { color: var(--ink-mute); font-weight: 600; }
.mc-vb-chips { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.mc-vb-uplift { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mc-vb-uplift-v { font-family: var(--sans); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.mc-vb-uplift.pos .mc-vb-uplift-v { color: oklch(0.52 0.13 150); }
.mc-vb-uplift.neg .mc-vb-uplift-v { color: oklch(0.55 0.16 28); }
.mc-vb-uplift.zero .mc-vb-uplift-v { color: var(--ink-mute); }
.mc-vb-uplift-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.mc-vb-uplift-cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); flex-basis: 100%; }
.mc-vb-side { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 300px; max-width: 300px; }
.mc-vb-side .v2-vis { margin-top: 0; max-width: none; width: 100%; }
.mc-vb-side .mc-invite { margin-top: 6px; align-self: flex-start; }

/* --- insights block ------------------------------------------------------ */
.mc-insights { display: block; }
.mc-insight { margin: 0; }

@media (max-width: 860px) {
  /* Stacked: give the value figure clear air from the public/private +
     invite column below it so the two read as separate sections (Part 2). */
  .mc-valuebar { grid-template-columns: 1fr; gap: 34px; }
  .mc-vb-side { width: 100%; max-width: none; }
}
@media (max-width: 640px) {
  /* Stick just under the REAL nav (which runs taller than --nav-h once its padding
     + brand are counted). Bias to a hair of OVERLAP rather than exact-flush: the
     nav is opaque so a few px of overlap is invisible and can't leak the list
     through a gap, while the tab labels keep their padding (no re-cramping). */
  .mc-jumpnav { margin: 0 -18px 16px; padding: 0 18px;
    top: calc(var(--nav-h) + 5px + max(0px, env(safe-area-inset-top, 0px) - 12px)); }
  .mc-vb-total { font-size: clamp(46px, 15vw, 72px); }
  #sec-top, #sec-shelf, #sec-dna, #sec-next, #sec-numbers { scroll-margin-top: calc(var(--nav-h) + 56px); }
}

/* ============================================================
   Floating feedback widget (components/FeedbackWidget.jsx)
   Bottom-RIGHT so it clears the bottom-left prototype switcher.
   ============================================================ */
.fbw { position: fixed; bottom: 24px; right: 24px; z-index: 89; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--mono); transition: opacity 0.25s ease, transform 0.25s ease, bottom 0.25s ease; }
/* When the first-record nudge bar is showing (only coincides on Leaderboards),
   lift the feedback launcher clear of it so the two don't overlap. */
body.frb-active .fbw { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
/* Tuck the launcher away while the footer is in view so it never covers footer
   links or bottom-of-page content. Suppressed while the panel is open. */
.fbw--hidden { opacity: 0; pointer-events: none; transform: translateY(16px); }

.fbw-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--ink); color: var(--paper); border: none; border-radius: 999px; box-shadow: 0 16px 40px -18px rgba(0,0,0,.6); cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.14s ease, background 0.14s ease; }
.fbw-tab:hover { transform: translateY(-1px); background: var(--accent); }
.fbw-tab svg { display: block; }
.fbw-open .fbw-tab { width: 44px; height: 44px; padding: 0; justify-content: center; }
.fbw-tab-x { font-size: 15px; line-height: 1; }

.fbw-panel { width: 320px; max-width: calc(100vw - 32px); background: var(--paper); border: 1px solid var(--ink); border-radius: 12px; box-shadow: 0 28px 60px -24px rgba(0,0,0,.55); padding: 18px; animation: fbwIn 0.18s ease; }
@keyframes fbwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.fbw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fbw-title { font-family: var(--serif, Georgia, serif); font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.fbw-x { background: none; border: none; cursor: pointer; color: var(--ink-mute); font-size: 13px; line-height: 1; padding: 4px; }
.fbw-x:hover { color: var(--accent); }
.fbw-sub { margin-top: 5px; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; letter-spacing: 0.02em; color: var(--ink-mute); }

.fbw-mood { display: flex; gap: 8px; margin: 14px 0 10px; }
.fbw-mood-b { width: 40px; height: 36px; border: 1px solid var(--rule); border-radius: 8px; background: #fffdf8; cursor: pointer; font-size: 17px; line-height: 1; transition: border-color 0.12s, background 0.12s, transform 0.1s; }
.fbw-mood-b:hover { transform: translateY(-1px); }
.fbw-mood-b.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, #fffdf8); }
.fbw-mood-b.on.down { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, #fffdf8); }

.fbw-area { width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fffdf8; color: var(--ink); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.fbw-area:focus { outline: none; border-color: var(--accent); }
.fbw-err { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--accent); }

.fbw-send { width: 100%; margin-top: 12px; padding: 11px 16px; background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: filter 0.12s; }
.fbw-send:hover { filter: brightness(1.05); }
.fbw-send:disabled { opacity: 0.6; cursor: default; }
.fbw-foot { margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

.fbw-done { text-align: center; padding: 12px 6px 8px; }
.fbw-tick { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 14%, var(--paper)); color: var(--accent); font-size: 19px; margin-bottom: 12px; }
.fbw-done-t { font-family: var(--serif, Georgia, serif); font-size: 19px; color: var(--ink); }
.fbw-done-s { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-mute); }

@media (max-width: 640px) {
  .fbw { bottom: 16px; right: 16px; }
  body.frb-active .fbw { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .fbw-panel { width: calc(100vw - 32px); }
  /* iOS Safari auto-zooms the viewport when a focused field is under 16px and
     doesn't zoom back out. Keep the desktop 12.5px look but hold at 16px on
     mobile so focusing the feedback field doesn't shift the page (FEED-01). */
  .fbw-area { font-size: 16px; }
}

/* ===========================================================
   EXPLORE-MORE — cross-link strip (deepen sessions). Sits at the foot of a
   surface and links to the others; card grid, on-brand, keyboard-friendly.
   =========================================================== */
.xplore { width: 100%; max-width: var(--content-w); margin: 42px auto 10px; }
.xplore-h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 13px; }
.xplore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.xplore-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 42px 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.xplore-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(0,0,0,.5); }
.xplore-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xplore-label { font-family: var(--sans, var(--mono)); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.xplore-sub { font-family: var(--body-serif); font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.xplore-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-size: 17px; transition: color .15s ease, transform .15s ease; }
.xplore-card:hover .xplore-go { color: var(--accent); transform: translateY(-50%) translateX(2px); }
@media (max-width: 720px) { .xplore-grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Collection DNA v3, milestone-ladder redesign. Appended; supersedes the
   earlier .dna-read-body / .dna-dims / .dna-facts / .dna-locked visuals above
   (those classes are no longer rendered). Reuses the .dna panel container,
   .dna-eyebrow, .dna-lock-mark and .dna-shift rules already defined.
   =========================================================================== */

/* --- progress ladder (always visible) --- */
.dna-ladder { margin: 20px 0 6px; }
.dna-ladder-rail {
  position: relative;
  height: 22px;
  margin: 0 11px 0;
  display: flex;
  align-items: center;
}
.dna-ladder-rail::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: var(--rule);
  border-radius: 2px;
}
.dna-ladder-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dna-node-dot {
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background 0.25s, border-color 0.25s;
}
.dna-node-dot.done {
  background: var(--accent);
  border-color: var(--accent);
}
.dna-ladder-labels {
  margin: 9px 0 0;
  display: flex;
  justify-content: space-between;
}
.dna-node-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dna-node-label.done { color: var(--ink-2); }
.dna-node-label:first-child { text-align: left; }
.dna-node-label:nth-child(2) { text-align: center; }
.dna-node-label:last-child { text-align: right; }

/* --- section groups --- */
.dna-group { margin-top: 22px; }
.dna-group-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

/* --- stat card rows --- */
.dna-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dna-cards-3 { grid-template-columns: repeat(3, 1fr); }
.dna-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 15px 16px;
  min-width: 0;
  /* Lifted, orange-tinted drop shadow (the 3D lift from the design). */
  box-shadow: 0 1px 2px rgba(23, 19, 15, 0.05), 0 10px 20px -8px color-mix(in oklab, var(--accent) 32%, transparent);
  display: block;
  text-decoration: none;
  color: inherit;
}
.dna-card-link { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.dna-card-link:hover {
  background: color-mix(in oklab, var(--paper) 82%, #fff 18%);
  box-shadow: 0 2px 4px rgba(23, 19, 15, 0.06), 0 14px 26px -8px color-mix(in oklab, var(--accent) 45%, transparent);
}
.dna-card-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dna-card-link .dna-card-k::after { content: " \2192"; }
.dna-card-v {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 7px;
  overflow-wrap: anywhere;
}
.dna-card-empty { color: var(--ink-mute); font-size: 17px; }
.dna-card-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 7px;
  line-height: 1.4;
}
.dna-card-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.dna-card-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
/* MOST VALUABLE card: title lead, value emphasis, artist/year caption */
.dna-card-mv-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 7px;
  overflow-wrap: anywhere;
}
.dna-card-mv-val {
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  color: var(--ink);
  margin-top: 6px;
}
.dna-card-mv-val .cur { font-size: 0.62em; color: var(--ink-mute); margin-right: 0.04em; font-weight: 800; }
/* MOST VALUABLE: cover thumb beside the title/value (the crown-jewel look) */
.dna-mv-inner { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.dna-mv-cover { flex: none; width: 56px; border-radius: 4px; overflow: hidden; line-height: 0; }
.dna-mv-text { min-width: 0; }
.dna-mv-text .dna-card-mv-title { margin-top: 0; }

/* --- The Read dark bubble (the one dark surface in the section) --- */
.dna-read-bubble {
  background: #17130f;
  background: color-mix(in oklab, var(--ink) 96%, #000 4%);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow: 0 2px 6px rgba(23, 19, 15, 0.18), 0 10px 30px rgba(23, 19, 15, 0.16);
  min-height: 150px;
}
.dna-read-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 70%, #fff 30%);
}
.dna-read-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #f3ede1;
  color: var(--paper);
  margin: 10px 0 0;
}
.dna-read-em { font-style: italic; color: var(--accent); }
.dna-read-support {
  font-family: var(--body-serif);
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--paper) 72%, transparent);
  margin: 12px 0 0;
  max-width: 460px;
}
.dna-read-open {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #17130f;
  color: var(--ink);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.05s, filter 0.2s;
  box-shadow: 0 0 0 rgba(217, 119, 87, 0);
}
.dna-read-open:hover {
  box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 55%, transparent);
  filter: brightness(1.05);
}
.dna-read-open:active { transform: translateY(1px); }
/* opened state: eyebrow + headline on the left, paragraph on the right */
.dna-read-bubble-open {
  display: grid;
  grid-template-columns: minmax(160px, 0.85fr) 1.4fr;
  gap: 26px;
  align-items: start;
  animation: dnaReadFade 0.4s ease both;
}
@keyframes dnaReadFade { from { opacity: 0; } to { opacity: 1; } }
.dna-read-open-head .dna-read-headline { margin-top: 8px; }
.dna-read-open-body { min-width: 0; }
.dna-read-para {
  font-family: var(--body-serif);
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--paper) 88%, transparent);
  margin: 0;
}
.dna-read-para-loading { color: color-mix(in oklab, var(--paper) 55%, transparent); font-style: italic; }

/* --- locked / blurred groups --- */
.dna-lockgroup { position: relative; margin-top: 4px; }
.dna-lockgroup-blur {
  filter: blur(7px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.dna-lockgroup-blur .dna-read-bubble { min-height: 0; }
.dna-lockgroup-blur > * + * { margin-top: 12px; }
.dna-lockgroup-veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.dna-lock-copy {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 4px 0 0;
  max-width: 320px;
  line-height: 1.5;
}

/* --- skeletons (content-free; nothing readable leaks under a blur) --- */
.dna-skel { box-shadow: none; }
.dna-skel-k { height: 8px; width: 40%; border-radius: 3px; background: var(--rule); }
.dna-skel-v { height: 20px; width: 62%; border-radius: 4px; background: var(--paper-2); margin-top: 10px; }
.dna-skel-bar { height: 6px; width: 100%; border-radius: 4px; background: var(--paper-2); margin-top: 12px; }
.dna-skel-bubble { background: color-mix(in oklab, var(--ink) 90%, transparent); }
.dna-skel-bubble .dna-skel-k { background: color-mix(in oklab, var(--paper) 40%, transparent); }
.dna-skel-line { height: 12px; border-radius: 4px; background: color-mix(in oklab, var(--paper) 22%, transparent); margin-top: 12px; }
.dna-skel-line.short { width: 55%; }

/* --- responsive --- */
@media (max-width: 720px) {
  .dna-cards, .dna-cards-3 { grid-template-columns: repeat(2, 1fr); }
  /* Three Deep Read cards in a 2-col grid leave "Most valuable" alone on the
     second row at half-width; span it full-width per the design (DNA-01). */
  .dna-card-mv { grid-column: 1 / -1; }
  .dna-read-bubble-open { grid-template-columns: 1fr; gap: 14px; }
  /* Locked DNA: clip the tall blurred skeleton to a compact teaser strip so the
     lock veil doesn't eat the whole mobile screen. */
  .dna-lockgroup-blur { max-height: 190px; overflow: hidden; }
}
@media (max-width: 460px) {
  .dna-cards, .dna-cards-3 { grid-template-columns: 1fr 1fr; }
  .dna-read-bubble { padding: 20px 18px; }
  .dna-node-label { font-size: 9px; letter-spacing: 0.08em; }
}

/* ============================================================
   THE INDEX — daily portfolio report (TheIndex.jsx)
   ============================================================ */

/* Reveal button — the "way in", sits under the headline value */
.ti-reveal {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 11px 16px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 999px;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.6);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ti-reveal:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -18px rgba(0,0,0,.55); background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
.ti-reveal:active { transform: translateY(0); }
.ti-reveal-ic { color: var(--accent); flex: 0 0 auto; }
.ti-reveal-go { color: color-mix(in oklab, var(--paper) 70%, var(--accent)); font-size: 14px; }

/* ---- The Index, promoted onto the page ------------------------------------
   The panel behind .ti-reveal holds the chart, every mover and every sell signal.
   This is its headline, sitting in the page where a phone can actually see it —
   a reveal button is a door, and nobody opens a door they have no reason to try.
   Each row is a button into the same panel, so the affordance is unchanged. */
.ti-strip {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2, var(--paper));
}
.ti-strip-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; width: 100%;
  padding: 11px 14px;
  background: none; border: 0; border-top: 1px solid var(--rule);
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: background .14s ease;
}
.ti-strip-row:first-child { border-top: 0; }
.ti-strip-row:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.ti-strip-k {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ti-strip-v { display: flex; align-items: baseline; gap: 10px; min-width: 0; justify-content: flex-end; }
.ti-strip-title {
  font-family: var(--body-serif); font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ti-strip-d {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ti-strip-d.up { color: #2f7d4f; }
.ti-strip-d.down { color: #a8422a; }
.ti-strip-d small { font-size: 10px; font-weight: 500; opacity: .72; margin-left: 5px; }
/* On a phone the key and the value each get their own line rather than fighting
   for one — the record title is the part that must not truncate to nothing. */
@media (max-width: 560px) {
  .ti-strip-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .ti-strip-v { justify-content: space-between; }
}

/* Overlay + panel */
.ti-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: color-mix(in oklab, var(--ink) 46%, transparent);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  animation: mcFade .2s ease;
}
.ti-panel {
  position: relative; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  animation: gateIn .2s ease;
}
.ti-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.ti-eyebrow { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); line-height: 1; }
.ti-sub { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.ti-close { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink-mute); cursor: pointer; font-size: 13px; line-height: 1; transition: color .15s, border-color .15s; }
.ti-close:hover { color: var(--ink); border-color: var(--ink); }

.ti-loading, .ti-quiet, .ti-empty { font-family: var(--body-serif); color: var(--ink-mute); }
.ti-loading { padding: 48px 24px; text-align: center; }
.ti-empty { padding: 44px 26px; text-align: center; }
.ti-empty-t { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.ti-empty-s { font-size: 14px; }

.ti-body { padding: 22px 24px 26px; }

/* Hero */
.ti-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.ti-hero-total { font-family: var(--serif); font-size: 46px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.ti-hero-move { font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; display: inline-flex; align-items: baseline; gap: 5px; }
.ti-hero-move.up { color: #2f7d55; }
.ti-hero-move.down { color: var(--accent); }
.ti-hero-move.flat, .ti-hero-move.building { color: var(--ink-mute); }
.ti-hero-move small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.ti-hero-move.building small { text-transform: none; letter-spacing: 0.01em; font-size: 12px; }
.ti-hero-pct { opacity: .85; }
.ti-arrow { font-size: 11px; }

/* Sparkline */
.ti-spark { margin: 12px 0 22px; }
.ti-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ti-area { fill: color-mix(in oklab, var(--accent) 9%, transparent); stroke: none; }
.ti-line-live { stroke: var(--accent); stroke-width: 2; fill: none; }
.ti-line-est { stroke: var(--ink-mute); stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; opacity: .7; }
.ti-dot-live { fill: var(--accent); }
.ti-dot-est { fill: var(--ink-mute); }
.ti-spark-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* Sections */
.ti-section { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--rule); }
.ti-sec-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }

.ti-mover, .ti-sell { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.ti-mover:last-of-type, .ti-sell:last-of-type { border-bottom: none; }
.ti-mover-rec { min-width: 0; }
.ti-mover-title { font-family: var(--body-serif); font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-mover-artist { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
.ti-mover-delta { flex: 0 0 auto; font-family: var(--mono); font-size: 14px; display: inline-flex; align-items: baseline; gap: 6px; }
.ti-mover-delta.up { color: #2f7d55; }
.ti-mover-delta.down { color: var(--accent); }
.ti-mover-delta small, .ti-sell-gain small { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); }

.ti-sell-gain { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ti-sell-pct { font-family: var(--mono); font-size: 15px; color: #2f7d55; }

.ti-note { margin-top: 12px; font-family: var(--body-serif); font-size: 12.5px; font-style: italic; color: var(--ink-mute); }
.ti-quiet { font-size: 13.5px; }
.ti-foot { margin-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-mute); line-height: 1.5; }

@media (max-width: 560px) {
  .ti-overlay { padding: 0; }
  .ti-panel { max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; border: none; }
  .ti-hero-total { font-size: 38px; }
}

/* The Index reveal button — "new report" dot */
.ti-reveal { position: relative; }
.ti-reveal.has-new { background: color-mix(in oklab, var(--ink) 82%, var(--accent)); }
.ti-reveal-dot {
  position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
  animation: tiPulse 1.8s ease-out infinite;
}
@keyframes tiPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .ti-reveal-dot { animation: none; } }

/* Add-flow save failure. Previously a failed insert fell through `finally` with
   nothing rendered, so the sheet closed as though it had saved. */
.av2-save-err {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 8px;
  background: oklch(0.94 0.04 28); border: 1px solid oklch(0.78 0.09 28);
  color: oklch(0.42 0.12 28); font-size: 14px; line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  .av2-save-err { background: oklch(0.28 0.06 28); border-color: oklch(0.45 0.09 28); color: oklch(0.9 0.05 28); }
}

/* ===========================================================
   A11Y — touch targets and keyboard reveal.
   Appended, so these win over the base rules above.
   =========================================================== */

/* Close/dismiss buttons drew between 11px and 34px of hit area. A transparent,
   centred ::before grows the *target* to 44x44 while the glyph keeps its
   designed size, so nothing moves and no icon is rescaled. The pseudo is
   position:absolute, which also keeps it out of flow (.mc-iconbtn is a grid
   container — an in-flow pseudo would become a second grid item and push the
   icon off-centre). .gate-x and .auth-close are already position:absolute and
   must stay that way; they are their own containing block. */
.fbw-x, .av2-x, .frb-x, .mc-iconbtn { position: relative; }
.fbw-x::before,
.gate-x::before,
.av2-x::before,
.frb-x::before,
.mc-iconbtn::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  min-width: 100%; min-height: 100%;
}
/* Already a wide icon+label row, so it only needs vertical reach. */
.auth-close::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%); height: 44px;
}

/* The two card buttons sat 6px apart, so 44px targets would have overlapped —
   and the right-hand one is the destructive Remove. Widen the gap to 18px so
   the targets meet without overlapping, and extend the reserve set by CN-03
   (was 62px) so the M/M condition chip stays clear of the hit area, not just
   the visible buttons. Chips themselves stay 26px. */
.mc-card-actions { gap: 18px; }
.mc-card-top { padding-right: 76px; }

/* The action cluster is hover-revealed, so a keyboard user was tabbing onto an
   invisible Remove button. Reveal it on focus too, and give it a real ring. */
.mc-card:focus-within .mc-card-actions { opacity: 1; }
.mc-iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-x:focus-visible, .av2-x:focus-visible, .fbw-x:focus-visible,
.frb-x:focus-visible, .auth-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- GuestShelf: records a signed-out visitor logged on this device --------
   Sits above the marketing hero on /collection and renders only when the guest
   collection is non-empty (components/GuestShelf.jsx). Uses the .mkt vocabulary
   so it reads as part of the page rather than a bolted-on banner. */
.gs { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.gs-inner { max-width: var(--content-w); margin: 0 auto; padding: 26px 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.gs-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.gs-h { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.06; letter-spacing: -0.01em; margin: 0; }
.gs-val { color: var(--accent); }
.gs-lede { font-family: var(--body-serif); font-size: 15.5px; line-height: 1.5;
  color: var(--ink-2); max-width: 560px; margin: 12px 0 18px; }
.gs-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gs-fine { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-mute); }
.gs-fine-block { display: block; margin-top: 12px; }
.gs-covers { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.gs-cover { width: 72px; height: 72px; border: 1px solid var(--rule); background: var(--paper);
  overflow: hidden; display: grid; place-items: center; }
.gs-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gs-cover-txt, .gs-more { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 900px) {
  .gs-inner { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  /* Covers scroll rather than wrap into a ragged block on a phone. */
  .gs-covers { overflow-x: auto; padding-bottom: 4px; }
  .gs-cover { flex: 0 0 auto; }
}

/* ---- Leaderboard: where the signed-in collector stands ----------------------
   The board is unpaginated and value-sorted, so a mid-pack collector had no way to
   find themselves — their row carried a `me` class and nothing else: no rank
   readout, no jump. Muted text uses --ink-2, since --ink-mute is 3.33:1 on paper
   and fails WCAG AA for body copy. */
.lb-standing { max-width: var(--content-w); margin: 0 auto 18px; padding: 16px 20px;
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lb-standing-main { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); color: var(--ink); }
.lb-standing-main strong { color: var(--accent); font-weight: 400; }
.lb-standing-sub { font-family: var(--body-serif); font-size: 15px; color: var(--ink-2); }
.lb-standing-jump { margin-left: auto; padding: 9px 15px; min-height: 44px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; cursor: pointer; }
.lb-standing-jump:hover { background: var(--ink); color: var(--paper); }
.lb-standing-empty { border-left-color: var(--ink-mute); }
/* Brief highlight so "Show my row" lands somewhere visible on a long board. */
.lb-row.flash { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
  .lb-standing { margin-bottom: 14px; padding: 14px 16px; }
  .lb-standing-jump { margin-left: 0; width: 100%; }
}