/* GENERATED FILE — do not hand-edit.
   Source: public/web/styles.css (Blake's original, byte-identical, untouched).
   Regenerate with: node scripts/scope-web-demo-css.mjs
   See that script for what "@scope" cannot do on its own and why. */
@scope (.blake-install-scope) {
/* ============================================================
   GOBAZAAR Web — demo stylesheet
   Day: cream / white / electric cobalt, gold held for CTAs.
   Night: app brand law (purple-black / amber / violet, no blue).
   Corner language: cards 18, blocks 12, chips 6, pills 999.
   ============================================================ */

:scope {
  --canvas: #FAF6ED;
  --band: #F1EADA;
  --card: #FFFFFF;
  --hairline: #E5DCC6;
  --hairline-card: #ECE6D6;
  --ink: #0C1A2E;
  --ink-muted: #5B6B7D;
  --accent: #1B6FD0;
  --accent-deep: #14549C;
  --accent-sky: #5BAFD6;
  --gold: #C0A040;
  /* Gold for TEXT on light grounds. #C0A040 measures 2.52:1 on the white card and
     2.33:1 on the cream canvas; this reads 4.90:1 and 4.54:1. Fills, bars and
     borders keep --gold. Blake, 2026-09-18, for accessibility. Site-wide from
     2026-10-20 (Blake, card 1218653294313289): every brand-gold text rule that
     paints on a light ground by day uses this, the wallet's two gold inks point
     at it, and View Collection's border (its only boundary) takes it too. The
     welcome name keeps its 2026-08-31 ruling; the demo-bar rules never render.
     Known and accepted: on the band (#F1EADA) this reads 4.09:1 and on the
     gold-tint chips 4.0 to 4.4; the test goldTextDayInk.test.ts holds the list
     of what moved and what stayed. */
  --gold-text: #8A6D1F;
  --gold-ink: #0C1A2E;
  /* Destructive red for TEXT on the white card. #D86060 measures 3.65:1 there;
     this reads 5.9:1. Borders and fills keep --destructive. Same reasoning as
     --gold-text (Blake 2026-09-28, Remove at the bottom of Edit). */
  --destructive-text: #B23A3A;
  --wordmark: #0C1A2E; /* navy by day -- the rendered mark is assets/logo-day.svg, not this token; ruled 2026-08-23 */
  --success: #7EC850;
  --destructive: #D86060;
  --flap: #F3EDDD;
  --flap-edge: #E2D9C2;
  --flap-letter: #0C1A2E;
  --overlay: rgba(12, 26, 46, 0.82);
  --shadow: 0 2px 14px rgba(12, 26, 46, 0.07);
  --shadow-hover: 0 14px 36px rgba(12, 26, 46, 0.14);

  --font-wordmark: "Josefin Sans", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-label: "Rajdhani", sans-serif;

  --r-card: 18px;
  --r-block: 12px;
  --r-chip: 6px;
  --r-pill: 999px;
}

:scope[data-mode="night"] {
  --canvas: #07050F;
  --band: #0D0A1A;
  --card: #100C1C;
  --hairline: #1C1035;
  --hairline-card: #241640;
  --ink: #F4ECD8;
  /* cream-based muted (was mauve #8A7090): legible supporting copy with a
     day-mode tie-in, still clearly secondary to full-cream ink */
  --ink-muted: #B9AC93;
  --accent: #9B6FD8;
  --accent-deep: #B18BE8;
  --accent-sky: #9B6FD8;
  --gold: #E8A820;
  --gold-text: #E8A820; /* the amber already clears 9:1 on the night card */
  --gold-ink: #07050F;
  --destructive-text: #D86060; /* the red already clears 5:1 on the night card */
  --wordmark: #F0C060;
  --flap: #14101E;
  --flap-edge: #241838;
  --flap-letter: #E8A820;
  --overlay: rgba(7, 5, 15, 0.86);
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* dropped: `html { scroll-behavior: smooth; }` — scroll-behavior is a document-scroll concern; :scope on the wrapper div would do nothing (see scope-web-demo-css.mjs) */
:scope { overflow-x: clip; }
:scope {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--ink);
  transition: background 0.45s ease, color 0.45s ease;
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* The hint inside every text box. Only the nav search and the Discover bar owned a
   hint color; every other box took the React shell's Tailwind preflight default, the
   box's text color at half strength: navy at 50 % on the white card reads 3.37:1 by
   day, under the 4.5:1 text needs (3.31 on the cream canvas, 3.23 on the band). The
   muted ink reads 5.46 / 5.06 / 4.56 and is redefined at night, so one rule covers
   both modes. opacity: 1 so the rule stands on its own: Firefox paints ::placeholder
   at 0.54 by default, and only the site's shell (Tailwind's preflight) resets it; the
   demo port has no preflight. Card 1219183977639312. */
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.only-mobile { display: none !important; }
.only-mobile-flex { display: none !important; }

.microlabel {
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  transition: background 0.45s ease;
}
.nav-inner {
  display: flex; align-items: center; gap: 18px; height: 76px;
  width: 100%; padding: 0 24px;
}
.brand { display: flex; align-items: center; flex: none; }
.logo-img { height: 58px; width: auto; display: block; }
.modal-logo { height: 74px; }

.cat-strip {
  display: flex; gap: 2px; align-items: center;
  width: 100%; padding: 0 16px;
  border-top: 1px solid var(--hairline);
  overflow-x: auto; scrollbar-width: none;
}
.cat-strip-link {
  padding: 11px 13px;
  font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
@media (hover: hover) { .cat-strip-link:hover { color: var(--accent); } }
.cat-strip-link.on { color: var(--ink); border-bottom-color: var(--gold); }

.nav-search { flex: 1 1 180px; min-width: 0; max-width: 430px; position: relative; }
.nav-search input {
  width: 100%; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  padding: 0 18px 0 42px;
  font-family: var(--font-body); font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.nav-search input:focus { border-color: var(--accent); }
.nav-search input::placeholder { color: var(--ink-muted); font-size: 14px; }
.nav-search .search-ic { position: absolute; left: 16px; top: 14px; width: 16px; height: 16px; color: var(--ink-muted); }
.search-results {
  position: absolute; top: 52px; left: 0; right: 0;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); box-shadow: var(--shadow-hover);
  overflow: hidden; display: none; z-index: 70;
}
.search-results.open { display: block; }
.search-hit { display: flex; gap: 12px; padding: 10px 14px; align-items: center; width: 100%; text-align: left; }
.search-hit:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.search-hit img { width: 40px; height: 40px; border-radius: var(--r-chip); object-fit: cover; }
.search-hit .t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.search-hit .p { font-size: 12px; color: var(--ink-muted); }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline);
}
.icon-btn svg { width: 18px; height: 18px; color: var(--ink); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }

.btn-cat {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-label); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-cat:hover { color: var(--accent); }
.btn-list {
  height: 44px; padding: 0 18px;
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: filter 0.2s, transform 0.12s;
}
.btn-list:hover { filter: brightness(1.06); }
.btn-list:active { transform: translateY(1px); }
.btn-signin {
  height: 44px; padding: 0 22px;
  background: var(--accent); color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.2s;
}
.btn-signin:hover { background: var(--accent-deep); }
:scope[data-mode="night"] .btn-signin { color: #07050F; }

.btn-inbox {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.2s;
}
.btn-inbox svg { width: 17px; height: 17px; }
.btn-inbox:hover, .btn-inbox.here { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-inbox .badge {
  background: var(--gold); color: var(--gold-ink);
  min-width: 20px; height: 20px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
}

.bell-wrap { position: relative; }
.bell-panel {
  position: absolute; right: 0; top: 52px; width: 320px;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); box-shadow: var(--shadow-hover);
  display: none; z-index: 70; overflow: hidden;
}
.bell-panel.open { display: block; }
.bp-head { padding: 12px 14px 8px; color: var(--ink-muted); border-bottom: 1px solid var(--hairline-card); }
.bp-row { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--hairline-card); font-size: 13.5px; }
.bp-row:last-child { border-bottom: none; }
.bp-row b { font-family: var(--font-display); font-size: 13.5px; }
.bp-row span { color: var(--ink-muted); }
.bp-row .wt { font-size: 11.5px; }

.avatar-chip {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px 0 6px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--card);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  flex: none;
}
.avatar-xl { width: 76px; height: 76px; font-size: 24px; }
.mode-toggle { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); overflow: hidden; height: 44px; }
.mode-toggle button {
  padding: 0 13px;
  font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.mode-toggle button.on { background: var(--gold); color: var(--gold-ink); }

.mega {
  position: absolute; left: 0; right: 0; top: 76px;
  background: var(--card);
  border-bottom: 1px solid var(--hairline-card);
  box-shadow: var(--shadow-hover);
  display: none;
}
.mega.open { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; padding: 18px 0 22px; }
.mega-tile { border-radius: var(--r-block); overflow: hidden; position: relative; aspect-ratio: 1; }
.mega-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.mega-tile:hover img { transform: scale(1.06); }
.mega-tile span {
  position: absolute; left: 8px; bottom: 8px; right: 8px;
  background: var(--canvas); color: var(--ink);
  border-radius: var(--r-chip);
  padding: 4px 7px;
  font-family: var(--font-label); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center;
}

/* ============ TICKER ============ */
.ticker {
  border-bottom: 1px solid var(--hairline);
  overflow: hidden; position: relative;
  height: 40px; display: flex; align-items: center;
  background: var(--canvas);
}
.ticker-label {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; flex: none;
  position: relative; z-index: 2; background: var(--canvas);
  height: 100%;
}
.ticker-label .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.ticker-track {
  display: flex; gap: 42px; white-space: nowrap;
  animation: ticker 84s linear infinite;
  font-size: 13.5px; color: var(--ink-muted);
}
.ticker-track b { color: var(--ink); font-weight: 600; }
.ticker-track .amt { color: var(--accent); font-weight: 600; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-fade-r { position: absolute; top: 0; bottom: 0; right: 0; width: 60px; z-index: 1; pointer-events: none; background: linear-gradient(to left, var(--canvas), transparent); }

/* ============ HERO ============ */
/* Longhand, not the `padding: 42px 0 40px` shorthand: the hero is also .wrap,
   and the shorthand zeroed .wrap's side gutter at every width (PRE-SHOW 6). */
.hero { padding-top: 42px; padding-bottom: 40px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas: "left board" "ctas board";
  gap: 10px 44px;
  align-items: center;
}
.hero-left { grid-area: left; align-self: end; }
.hero-board { grid-area: board; justify-self: end; }
.hero-ctas { grid-area: ctas; align-self: start; display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.hero-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-line .gold { color: var(--gold-text); font-weight: 700; }
.board-label { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); margin-bottom: 12px; }
.board-label .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.board-rows { display: flex; flex-direction: column; gap: 9px; position: relative; width: fit-content; }
.flap-row { display: flex; gap: 5px; }
.flap {
  width: clamp(19px, 3.1vw, 42px);
  height: clamp(27px, 4.3vw, 58px);
  background: var(--flap);
  border: 1px solid var(--flap-edge);
  border-radius: clamp(3px, 0.45vw, 7px);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 2.5vw, 34px);
  color: var(--flap-letter);
  position: relative;
  overflow: hidden;
  flex: none;
}
.flap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--flap-edge);
}
.flap.flip { animation: flapflip 0.32s ease; }
@keyframes flapflip {
  0% { transform: rotateX(0); filter: brightness(1); }
  49% { transform: rotateX(-88deg); filter: brightness(0.82); }
  51% { transform: rotateX(88deg); filter: brightness(0.82); }
  100% { transform: rotateX(0); filter: brightness(1); }
}
.board-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(28px, 2.8vw, 40px); height: clamp(28px, 2.8vw, 40px);
  border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center;
  font-size: clamp(13px, 1.4vw, 19px); font-weight: 700;
  box-shadow: var(--shadow-hover);
  border: 2px solid var(--canvas);
  z-index: 2;
}
.hero-sub {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.3vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-sub b { color: var(--gold-text); }
.hero-support {
  margin-top: 8px;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink-muted);
  max-width: 60ch;
}

.cta-primary {
  background: var(--gold); color: var(--gold-ink);
  padding: 0 34px; height: 58px;
  border-radius: var(--r-block);
  font-family: var(--font-label); font-weight: 700; font-size: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.2s;
}
.cta-primary:hover { box-shadow: var(--shadow-hover); }
.cta-primary:active { transform: translateY(1px) scale(0.99); }
.cta-primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.5s ease;
}
.cta-primary:hover::before { left: 130%; }
.cta-secondary {
  border: 1.5px solid var(--accent); color: var(--accent);
  padding: 0 30px; height: 58px;
  border-radius: var(--r-block);
  font-family: var(--font-label); font-weight: 700; font-size: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 0.2s;
}
.cta-secondary .arr { transition: transform 0.2s; }
.cta-secondary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cta-secondary:hover .arr { transform: translateX(4px); }

/* ============ VITALS ============ */
.vitals {
  display: flex; margin: 30px 0 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.vital { flex: 1; padding: 22px 8px; text-align: center; }
.vital + .vital { border-left: 1px solid var(--hairline); }
.vital .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.02em;
  color: var(--ink);
}
.vital .l { margin-top: 4px; color: var(--ink-muted); }

/* ============ SECTIONS ============ */
section { padding: 56px 0 8px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.sec-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em;
  color: var(--ink);
}
.sec-count { color: var(--ink-muted); font-size: 14px; }
.sec-link { margin-left: auto; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.1em; font-size: 13px; text-transform: uppercase; }

/* category mosaic */
.mosaic {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 165px);
  grid-template-areas:
    "fa fa co co ga ga"
    "fa fa mu el el me"
    "sp ho ho ot ot ot";
}
.tile-fa { grid-area: fa; } .tile-co { grid-area: co; } .tile-ga { grid-area: ga; }
.tile-mu { grid-area: mu; } .tile-el { grid-area: el; } .tile-me { grid-area: me; }
.tile-sp { grid-area: sp; } .tile-ho { grid-area: ho; } .tile-ot { grid-area: ot; }
.tile {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  cursor: pointer; border: none; padding: 0; text-align: left;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.tile:hover img { transform: scale(1.05); }
.tile .lab {
  position: absolute; top: 12px; left: 12px;
  background: var(--canvas); color: var(--ink);
  padding: 6px 10px; border-radius: var(--r-chip);
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.tile .cnt {
  position: absolute; right: 12px; bottom: 12px;
  background: var(--overlay); color: #fff;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 12px; opacity: 0; transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}
.tile:hover .cnt { opacity: 1; transform: translateY(0); }

/* category page head */
.cat-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 6px 0 2px; }
.catpage { padding-top: 28px; }

/* ============ RAILS + LISTING CARDS ============ */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 16px; overflow-x: auto;
  padding: 4px 4px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  align-items: stretch;
}
.rail > * { scroll-snap-align: start; }
.cardwrap { display: flex; flex-direction: column; height: 100%; }
.cardwrap .lcard { flex: 1; }
.lcard-meta { flex: 1; }
.reason { font-size: 12px; color: var(--accent); padding: 0 2px 6px; min-height: 22px; }

.lcard {
  background: var(--card);
  border: 1px solid var(--hairline-card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer; text-align: left; padding: 0;
  display: flex; flex-direction: column;
}
.lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.lcard-imgwrap { position: relative; aspect-ratio: 1; overflow: hidden; }
.lcard-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.buzz {
  position: absolute; top: 10px; left: 10px;
  background: #EFD98F; color: #4A3908;
  border-radius: var(--r-chip); padding: 4px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em;
}
:scope[data-mode="night"] .buzz { background: #F6CE7C; color: #3F2B05; }
.want-chip {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: var(--success); color: #10310A;
  border-radius: var(--r-chip); padding: 4px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em;
  white-space: nowrap;
}
.lcard-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--overlay) 0%, transparent 45%);
  display: flex; align-items: flex-end;
  padding: 12px;
  opacity: 0; transition: opacity 0.22s ease;
  pointer-events: none;
}
.lcard:hover .lcard-overlay, .lcard:focus-visible .lcard-overlay { opacity: 1; }
/* On a device that cannot hover the exchange chips stay on the photo (Blake
   2026-09-26, card 1218342678103159): a first tap used to reveal them and the
   next tap opened the listing, with nothing to say so. The same gate the Save
   tag got on 2026-09-22 (.img-share, below). The collection manager's own
   overlay (.mgr-overlay, the personal view of your pieces) is a different
   thing and keeps its tap toggle. With the overlay at rest, a LOOKING-FOR
   MATCH chip (bottom-left, hidden only on hover) shares the photo with the
   tags, so the tags sit one row above it: 10 + the chip's ~20-23 (the
   installed site's 1.55 line-height makes it the taller) + 5-8 of air, and
   the gradient moves up with them so they keep their ground. */
@media (hover: none) {
  .lcard .lcard-overlay { opacity: 1; }
  .lcard .want-chip ~ .lcard-overlay { padding-bottom: 38px; background: linear-gradient(to top, var(--overlay) 38px, transparent calc(45% + 38px)); }
}
/* tags only, kept to the right: the overlay also opens on keyboard focus, and on a
   device that cannot hover it is always open, where the LOOKING-FOR MATCH chip at
   the bottom-left stays put (it fades on hover alone), so left-aligned tags would
   sit under it (Blake 2026-09-10; the seller tier came off); on touch the tags
   also move up a row when that chip is there (the (hover: none) rule above) */
.ov-bottom { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 8px; }
.lcard-overlay .xchip, .lcard-overlay .xchip.hy { color: #F0C060; border-color: rgba(240, 192, 96, 0.6); }

.lcard-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.lcard-userrow { display: flex; align-items: center; gap: 7px; }
.mini-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  flex: none;
}
.uname { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink-muted); }
.social { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: 12px; }
/* ─── THE COUNTS AND THE ⋯ ARE ONE UNIT (Blake 2026-09-02) ─────────────────
   On a phone the browse grid is two-up and a card's user row has about 141px
   for about 180px of content (avatar 26 · name 43 · counts 60 · ⋯ 28 · three
   7px gaps). Letting the row WRAP rather than clip was right, but the ⋯ is
   the last flex item, so it was the one that wrapped, alone, and whether it
   did flipped on a few pixels of digit or name width: two cards from the
   same seller landed their ⋯ in two different places. Grouped with the
   counts it can never separate from them. The name is the one child allowed
   to give: it truncates. At phone width the group takes its own line on
   EVERY card (see the 720px block), so the layout is a property of the
   viewport, not of the text. */
.lcard-actions { margin-left: auto; display: inline-flex; align-items: center; flex: 0 0 auto; }
.lcard-userrow .uname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social svg { width: 13px; height: 13px; }
.social-like { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.social-like svg { width: 13px; height: 13px; }
/* Hover only where hover exists: a phone leaves :hover stuck after a tap, and a
   red outline that never fills then reads as a like that did not take, whether
   it did or not (Blake 2026-09-18). Same rule as .type-tab below; the three
   other hearts (.tp-likes, .cm-like, .take-like) follow it. */
@media (hover: hover) { .social-like:hover { color: var(--destructive); } }
.social-like.on { color: var(--destructive); }
.social-like.on svg { fill: currentColor; }
/* the comment glyph is a control: it drives the caret into the card's composer (Blake 2026-09-09 #4) */
.social-comment { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.social-comment svg { width: 13px; height: 13px; }
@media (hover: hover) { .social-comment:hover { color: var(--accent); } }
.lcard-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* wraps only when the price and its FAIR/OVER pills don't fit, on EVERY card: a
   rail card used to clip that row while a grid card wrapped it, so the same card
   looked different by where it lived (Blake 2026-09-10). */
.lcard-priceline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.lcard-price { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); flex: none; }
.cvotes { margin-left: auto; display: inline-flex; gap: 5px; }
.cvote {
  border-radius: var(--r-pill); padding: 6px 9px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em;
  border: 1.5px solid;
  transition: background 0.15s, color 0.15s;
  min-height: 30px;
  white-space: nowrap;
}
.cvote.fair { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: hover) { .cvote.fair:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.cvote.fair.voted { background: var(--accent); color: #fff; border-color: var(--accent); }
:scope[data-mode="night"] .cvote.fair.voted { color: #07050F; }
.cvote.over { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
@media (hover: hover) { .cvote.over:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); } }
.cvote.over.voted { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.card-offer {
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-block);
  height: 40px;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: filter 0.15s, transform 0.12s;
}
.card-offer:hover { filter: brightness(1.06); }
.card-offer:active { transform: scale(0.99); }

/* THE TAKE BLOCK IS THE APP'S (ListingCardV2, Blake 2026-09-09 #3): no box around
   it — the quote panel, VIEW ALL and the composer stack straight on the card. */
.social-block {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.take-top { display: flex; flex-direction: column; gap: 6px; }
/* the preview is the app's quote panel (cprev): the band surface, a hairline, a
   3px gold rule on the left, the commenter's photo, their handle (navy by day, gold
   by night — see below), the take on up to two lines, its like count. --band IS the app's `muted` token by day and
   by night (#F1EADA / #0D0A1A) and --gold its `primary` (#C0A040 / #E8A820) —
   the same values, not lookalikes. */
.lcard-comment {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px 9px 10px;
  background: var(--band);
  border: 1px solid var(--hairline-card); border-left: 3px solid var(--gold);
  border-radius: var(--r-block);
  font-size: 12.5px; line-height: 1.4; color: var(--ink);
}
.lcard-comment .avatar-sm { flex: none; margin-top: 1px; }
.lcard-comment .tp-body {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Day-mode text is the hero heading's ink (#0C1A2E), not gold: gold text on the
   cream band measured 2.10:1, under the 4.5:1 AA floor; navy measures 14.57:1.
   Night keeps the app's gold, which measures 9.35:1 on its band (Blake
   2026-09-10; the app carries the same day-mode ratio and gets its own PR). */
.lcard-comment b { color: var(--ink); font-weight: 700; font-family: var(--font-display); cursor: pointer; }
:scope[data-mode="night"] .lcard-comment b { color: var(--gold); }
.lcard-comment b:hover { text-decoration: underline; }
.lcard-comment .tp-likes { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: 12px; margin-top: 1px; padding: 0; }
/* a take's heart is a control: tap to like, filled red when liked (Blake 2026-09-10) —
   the same red and fill as the detail page's .take-like.on */
@media (hover: hover) { .lcard-comment button.tp-likes:hover { color: var(--destructive); } }
.lcard-comment .tp-likes.on { color: var(--destructive); }
.lcard-comment .tp-likes.on svg { fill: currentColor; }
.lcard-comment .tp-likes svg { width: 13px; height: 13px; }
/* Phone widths: the card's social glyphs at touch scale (Blake 2026-09-10). 13px is
   desktop scale; on a phone the like and comment controls read as decoration. The
   app's card uses the same 18 and 16, so mobile web and the app match. Hit areas
   reach 44 through an invisible pseudo-element, so the row keeps its height. */
@media (max-width: 720px) {
  .social-like svg, .social-comment svg { width: 18px; height: 18px; }
  .social-like, .social-comment { font-size: 13px; }
  .lcard-comment .tp-likes svg { width: 16px; height: 16px; }
  .lcard-comment .tp-likes { font-size: 13px; }
  .social-like, .social-comment, .pm-trigger, .lcard-comment .tp-likes, .view-all, .cvote, .take-composer .send { position: relative; }
  .social-like::before, .social-comment::before, .pm-trigger::before { content: ""; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -8px; }
  .lcard-comment .tp-likes::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
  .cvote::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .view-all::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -8px; }
  .take-composer .send::before { content: ""; position: absolute; left: -7px; right: -7px; top: -7px; bottom: -7px; }
}
.lcard-comment .tp-likes i { font-style: normal; }
/* no takes yet: a plain muted line — no panel chrome around nothing */
.lcard-comment.muted { display: block; background: none; border: 0; padding: 2px 0; color: var(--ink-muted); opacity: 0.75; }
.view-all {
  font-family: var(--font-label); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
/* same day/night split as the commenter handle: gold on white measured 2.52:1 */
:scope[data-mode="night"] .view-all { color: var(--gold); }
/* the composer, likewise the app's: band surface, a gold-tinted hairline, and the
   send disc neutral until there is text (.armed, set by app.js on input), then gold */
.take-composer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
  border-radius: var(--r-block);
  padding: 7px 12px;
  color: var(--ink-muted); font-size: 12.5px;
  background: var(--band);
  text-align: left;
  transition: border-color 0.15s;
}
.take-composer:hover, .take-composer:focus-within { border-color: var(--gold); }
.take-composer .send { color: color-mix(in srgb, var(--gold) 67%, transparent); font-size: 12px; background: none; border: 0; }
.send-disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-style: normal;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 31%, transparent);
  color: color-mix(in srgb, var(--gold) 67%, transparent);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.send-disc svg { width: 14px; height: 14px; }
.take-composer.armed .send-disc { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

.xchips { display: inline-flex; gap: 4px; }
/* all exchange chips gold — transaction chrome is a gold theme */
.xchip {
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold-text);
  border-radius: var(--r-chip); padding: 2px 6px;
  font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: 0.1em;
}
.xchip.hy { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* ============ VERDICTS ============ */
/* minmax(0, 1fr), not 1fr: a 1fr track's minimum is its content, so one card's unbreakable
   top row or a long handle widened every card past a phone. */
.vd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.vd-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 13px;
  position: relative;
}
.vd-top { display: flex; align-items: center; gap: 8px; }
.vd-q { color: var(--ink-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-kind {
  border-radius: var(--r-chip); padding: 4px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em;
  background: color-mix(in srgb, var(--success) 18%, transparent); color: #3E7A1E;
  flex: none;
}
:scope[data-mode="night"] .vd-kind { color: var(--success); }
.lock-chip {
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-text);
  border-radius: var(--r-chip); padding: 4px 9px;
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  flex: none;
  /* a lock glyph plus the days left (Blake 2026-09-29): half the width of "LOCKS IN 7D", so the
     question beside it fits a phone */
  display: inline-flex; align-items: center; gap: 4px;
}
.lock-chip svg { width: 11px; height: 11px; flex: none; }
/* Below 367px the question cannot fit whole beside the tag and the chip (measured in all three
   chip states, day and night), so it hides rather than being cut; the section heading above asks
   it in full. 360px Androids land here. */
@media (max-width: 366px) {
  .vd-top .vd-q { display: none; }
  .vd-top .lock-chip { margin-left: auto; }
}
.lock-chip.locked { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted); }
/* LAST DAY stays gold — red is reserved for serious things */
.lock-chip.lastday { background: var(--gold); color: var(--gold-ink); }

.vd-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.vd-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.vd-slot-wrap { position: relative; }

/* One uniform deal slot per side */
.vd-slot {
  position: relative;
  aspect-ratio: 1.35; width: 100%;
  border-radius: var(--r-block);
  border: 1px solid var(--hairline-card);
  overflow: hidden;
  cursor: pointer;
  background: var(--card);
}
.vd-slot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-slot:not(.fan):not(.cash-only):hover > img { filter: brightness(1.05); }

/* cash-only slot: centered plate, light gold treatment */
.vd-slot.cash-only {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--gold) 7%, transparent) 0 10px, transparent 10px 20px),
    color-mix(in srgb, var(--gold) 10%, var(--card));
  border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  cursor: default;
}
/* an EMPTY side (no items, no cash) is not a cash plate: no gold wash, no gold
   dashes — a quiet placeholder beside the gg-val that says "Nothing offered"
   (PR #811 review, item 5). */
.vd-slot.cash-only.empty { background: transparent; border: 1.5px dashed var(--hairline-card); }
.cash-lab { color: var(--gold-text); font-size: 10.5px; }
.cash-amt { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); color: var(--gold-text); }

/* fan slot: uniform stacked cards */
.vd-slot.fan { overflow: visible; border: none; background: none; }
.vd-slot.fan .fan-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-block);
  border: 2px solid var(--card);
  box-shadow: var(--shadow);
  transform-origin: 50% 85%;
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.vd-slot.fan .fan-0 { transform: scale(0.94) rotate(-4deg); z-index: 3; }
.vd-slot.fan .fan-1 { transform: scale(0.94) rotate(3.5deg); z-index: 2; }
.vd-slot.fan .fan-2 { transform: scale(0.94) rotate(9deg); z-index: 1; }
.vd-slot.fan:hover .fan-0, .vd-slot.fan:focus-visible .fan-0 { transform: scale(0.94) rotate(-8deg) translateX(-4%); }
.vd-slot.fan:hover .fan-1, .vd-slot.fan:focus-visible .fan-1 { transform: scale(0.94) rotate(6deg) translateX(3%); }
.vd-slot.fan:hover .fan-2, .vd-slot.fan:focus-visible .fan-2 { transform: scale(0.94) rotate(13deg) translateX(7%); }
.fan-count {
  position: absolute; left: 8px; bottom: 8px; z-index: 4;
  background: var(--overlay); color: #fff;
  border-radius: var(--r-pill); padding: 5px 10px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em;
}
.cash-capsule {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  background: var(--gold); color: var(--gold-ink);
  border: 2px solid var(--card);
  border-radius: var(--r-pill); padding: 4px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  box-shadow: var(--shadow);
}

.vd-side-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vd-role { color: var(--ink-muted); font-size: 10px; }
.vd-handle {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink);
  /* a long handle ends in an ellipsis instead of running into the other side's */
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vd-gave { color: var(--ink-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-swap {
  align-self: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
  border: 2px solid var(--canvas);
  box-shadow: var(--shadow);
  flex: none;
}

/* meter: gold left (side A), grey middle (even), blue right (side B) */
.vd-meter { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.vd-meter i { display: block; height: 100%; transition: width 0.5s ease; }
.vd-meter .ma { background: var(--gold); }
.vd-meter .me { background: color-mix(in srgb, var(--ink) 28%, transparent); }
.vd-meter .mb { background: var(--accent); }

.vd-votes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.vd-vote {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color 0.2s, background 0.15s;
  min-height: 48px;
}
.vd-vote .vlab { font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vd-vote .vpct { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
@media (hover: hover) { .vd-vote.va:not(:disabled):hover { border-color: var(--gold); } }
@media (hover: hover) { .vd-vote.ve:not(:disabled):hover { border-color: var(--ink-muted); } }
@media (hover: hover) { .vd-vote.vb:not(:disabled):hover { border-color: var(--accent); } }
.vd-vote.voted { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.vd-vote:disabled { cursor: default; }
.vd-foot { color: var(--ink-muted); font-size: 12.5px; }
.final-line { font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; color: var(--ink); text-transform: uppercase; }

.vd-pop {
  /* scoped to its own side; grows downward past the slot for big bundles,
     capped + scrollable so a 5-item list never gets cut off */
  position: absolute; inset: -6px -6px auto -6px; z-index: 5;
  min-height: calc(100% + 12px); max-height: 330px;
  background: var(--card);
  border: 1.5px solid var(--hairline-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hover);
  padding: 12px;
  display: none;
  flex-direction: column; gap: 8px;
  overflow-y: auto;
  opacity: 0; transform: scale(0.96);
}
.vd-pop.open { display: flex; animation: popin 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) forwards; }
/* hover = live preview: scrollable and clickable while the pointer stays on
   the side (host-bound hover); click still pins it open */
.vd-pop.peek { display: flex; animation: popin 0.18s ease forwards; }
@keyframes popin { to { opacity: 1; transform: scale(1); } }
.vd-pop-head { display: flex; align-items: center; justify-content: space-between; color: var(--ink-muted); padding: 2px 2px 4px; }
.vd-pop-close { color: var(--ink-muted); font-size: 14px; padding: 4px 8px; border-radius: var(--r-chip); }
.vd-pop-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.vd-pop-item {
  display: flex; gap: 12px; align-items: center; text-align: left;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.vd-pop-item:not(.cashrow):hover { border-color: var(--accent); transform: translateX(2px); }
.vd-pop-item img { width: 52px; height: 52px; border-radius: var(--r-chip); object-fit: cover; }
.vd-pop-item .cashmini {
  width: 52px; height: 52px; border-radius: var(--r-chip); flex: none;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: var(--gold-text); font-size: 19px;
}
.vd-pop-item .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.vd-pop-item .t { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-pop-item .d { color: var(--ink-muted); font-size: 12px; }
.vd-pop-item .go { color: var(--accent); font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; flex: none; }

/* ============ BROWSE ============ */
.cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-tab {
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 10px 16px; color: var(--ink-muted);
  font-family: var(--font-label); font-weight: 600; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.18s;
  min-height: 40px;
}
@media (hover: hover) { .cat-tab:hover { border-color: var(--accent); color: var(--accent); } }
.cat-tab.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.type-tabs { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.type-tab {
  border: 1.5px solid var(--hairline); border-radius: var(--r-pill);
  padding: 7px 14px; color: var(--ink-muted);
  font-size: 13px; font-weight: 600;
  transition: all 0.18s;
  min-height: 36px;
}
/* Hover only where hover exists: iOS leaves :hover stuck after a tap, and the
   outline then reads as a chosen chip (Blake 2026-09-13). */
@media (hover: hover) { .type-tab:hover { border-color: var(--accent); color: var(--accent); } }
.type-tab.on { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); color: var(--accent); }

/* auto-fill floor keeps cards from squeezing below min-content and clipping */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding-bottom: 8px; }
.grid-cards .lcard, .grid-cards .cardwrap { min-width: 0; }
.empty-note { color: var(--ink-muted); padding: 20px 0; }
.view-more-row { display: flex; justify-content: center; padding: 22px 0 8px; }
.view-more {
  border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill); padding: 12px 30px;
  font-family: var(--font-label); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.2s;
  min-height: 46px;
}
.view-more:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ============ HOW / CTA / FOOTER ============ */
.how-rows { border-top: 1px solid var(--hairline); }
.how-row {
  display: grid; grid-template-columns: 110px 1fr 1.4fr; gap: 28px;
  padding: 30px 6px; border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.how-num { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: color-mix(in srgb, var(--ink) 22%, transparent); }
.how-t { font-family: var(--font-display); font-weight: 600; font-size: 21px; }
.how-d { color: var(--ink-muted); line-height: 1.6; }

.cta-band { text-align: center; padding: 78px 0 86px; }
.cta-band h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.02em; margin-bottom: 26px;
}
.fee-line { margin-top: 18px; color: var(--ink-muted); font-size: 14.5px; }

footer { background: var(--band); border-top: 1px solid var(--hairline); padding: 52px 0 40px; }
footer .logo-img { height: 52px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-tag { margin-top: 14px; color: var(--ink-muted); font-size: 14px; max-width: 30ch; line-height: 1.6; }
.foot-col .h { color: var(--ink); margin-bottom: 14px; }
.foot-col a { display: block; color: var(--ink-muted); padding: 5px 0; font-size: 14.5px; }
.foot-col a:hover { color: var(--accent); }
.foot-note {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 20px;
  color: var(--ink-muted); font-size: 13px; flex-wrap: wrap;
}

/* ============ AUTHED HOME ============ */
.welcome { padding: 44px 0 8px; }
.welcome-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
.welcome h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em;
}
/* The handle is the one word in this sentence that is about the reader, so
   it carries the brand gold and the rest of the line stays ink — the
   trailing period included, so the sentence still closes in the body
   voice. Blake ruled brand gold (var(--gold), #C0A040 by day) on
   2026-08-31 knowing what it measures here: 2.33:1 against the cream
   canvas at this heading’s 46px/700, under the 3:1 WCAG floor for large
   text. Night is unaffected — #E8A820 on #07050F is far clear of it — so
   the softness is a day-mode trade, taken deliberately. The email estate
   answered the same question differently (goldink #8F7420 for gold-as-text
   on cream, PR 728); if that ever becomes the site-wide answer, this is
   the one declaration that has to change. */
.welcome h1 .wel-name { color: var(--gold); }
.welcome .sub, .profile .sub { color: var(--ink-muted); margin-top: 6px; }
.welcome-list { flex: none; }
.floor-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.deal-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}
.deal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.state-chip {
  align-self: flex-start;
  border-radius: var(--r-chip); padding: 4px 9px;
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  flex: none;
}
.state-chip.act { background: var(--gold); color: var(--gold-ink); }
.state-chip.wait { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted); }
.deal-card .it { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.deal-card .wt { color: var(--ink-muted); font-size: 13px; }
.deal-cta { color: var(--accent); font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; }

/* ============ LISTING DETAIL ============ */
/* Longhand: .detail is also .wrap; the shorthand zeroed its side gutter (PRE-SHOW 6). */
.detail { padding-top: 40px; padding-bottom: 80px; }
.crumb { color: var(--ink-muted); font-size: 13.5px; margin-bottom: 22px; display: inline-flex; gap: 6px; align-items: center; }
.detail-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: start; }
.gallery { position: sticky; top: 132px; }
.gallery-main {
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline-card);
  background: var(--card);
  cursor: zoom-in;
}
.gallery-main.zoomed { cursor: zoom-out; }
.gallery-main img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 0.25s ease;
  will-change: transform;
}
.gallery-main.zoomed img { transform: scale(2.3); }
.gallery-note { margin-top: 10px; color: var(--ink-muted); font-size: 12.5px; text-align: center; }
.d-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
.d-priceline { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; }
.d-price { font-family: var(--font-display); font-weight: 700; font-size: 32px; }
.d-declared { color: var(--ink-muted); font-size: 12.5px; }
.d-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.d-chip {
  border: 1px solid var(--hairline-card); border-radius: var(--r-chip);
  padding: 4px 9px; font-family: var(--font-label); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.d-chip.grade { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-text); border-width: 1.5px; }
.d-votes { display: flex; gap: 8px; margin: 14px 0 8px; align-items: center; flex-wrap: wrap; }
.d-vote {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  padding: 10px 18px; display: inline-flex; gap: 8px; align-items: baseline;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em;
  transition: all 0.15s;
  min-height: 44px;
}
.d-vote .n { font-family: var(--font-display); }
.d-vote.fair { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: hover) { .d-vote.fair:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); } }
.d-vote.fair.voted { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.d-vote.over { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
@media (hover: hover) { .d-vote.over:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--gold); } }
.d-vote.over.voted { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--gold); }
.d-votenote { color: var(--ink-muted); font-size: 12.5px; }

.vote-bars { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; max-width: 420px; }
.vb-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; }
.vb-lab { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; }
.vb-lab.fair { color: var(--accent); }
.vb-lab.over { color: var(--gold-text); }
.vb-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.vb-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.vb-bar i.fair { background: var(--accent); }
.vb-bar i.over { background: var(--gold); }
.vb-n { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--ink-muted); }

.pricecheck {
  background: var(--card); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--r-card); padding: 18px; margin: 18px 0;
  box-shadow: var(--shadow);
}
.pricecheck.prerun { box-shadow: none; }
.pc-run-btn {
  margin-top: 12px;
  border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill); padding: 10px 22px;
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.2s;
  min-height: 42px;
}
.pc-run-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pc-checking { color: var(--ink-muted); font-size: 13.5px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pc-badge {
  margin-left: auto;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  border-radius: var(--r-pill); padding: 4px 10px;
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
}
.pc-range { display: flex; align-items: center; gap: 12px; }
.pc-range .v { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.pc-bar { flex: 1; height: 5px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 3px; position: relative; }
.pc-bar .band { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.pc-bar .ask {
  position: absolute; top: 50%; width: 13px; height: 13px;
  background: var(--gold); border: 2px solid var(--card);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.pc-reason { margin-top: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }
.pricecheck:not(.prerun) .pc-reason { margin-top: 12px; }
.pc-verdict { margin-top: 8px; font-family: var(--font-label); font-weight: 700; letter-spacing: 0.1em; font-size: 12px; color: var(--accent); }

.spec-table {
  width: 100%; border-collapse: collapse; margin: 14px 0 18px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  overflow: hidden; font-size: 14px;
}
.spec-table th, .spec-table td { padding: 10px 14px; border-bottom: 1px solid var(--hairline-card); text-align: left; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }
.spec-table th {
  width: 148px; color: var(--ink-muted); font-weight: 600;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.spec-table td { color: var(--ink); }
.d-social { margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.d-social-counts { display: flex; gap: 18px; color: var(--ink-muted); font-size: 13.5px; align-items: center; }
.d-social-counts svg { width: 14px; height: 14px; vertical-align: -2px; }

.seller-card {
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--hairline-card); border-radius: var(--r-card);
  padding: 14px; margin: 16px 0; background: var(--card);
}
.seller-card .who .h, .thread-head .who .h { font-family: var(--font-display); font-weight: 600; }
.seller-card .who .l, .thread-head .who .l { color: var(--ink-muted); font-size: 12.5px; }
.seller-card .msg {
  margin-left: auto; border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill); padding: 9px 15px;
  font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.1em;
  min-height: 40px;
}
.seller-card .msg:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.d-desc { color: var(--ink-muted); line-height: 1.65; font-size: 15px; margin: 14px 0; }
.d-lf { margin: 14px 0 22px; }
.d-lf .h { margin-bottom: 8px; color: var(--ink-muted); }
.lf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Looking For and Trade for chips (the profile, the listing page, the wizard's Trade For step). The
   ink is the deep accent, not the accent: the accent on its own 9% tint read 4.09:1 by day (measured
   2026-09-27), the deep accent reads 6.2 by day and 6.9 by night. Every chip carries a border of the
   same width so a chip that is filled and one that is outlined are the same size. */
.lf-chip {
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-deep);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill); padding: 4.5px 10.5px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.lf-chip .lf-x { color: var(--accent); font-size: 10px; padding: 2px; opacity: 0.7; }
.lf-chip .lf-x:hover { opacity: 1; }

/* composer */
.composer {
  background: var(--card); border: 1.5px solid var(--hairline-card);
  border-radius: var(--r-card); box-shadow: var(--shadow-hover);
  overflow: hidden;
}
.composer-tabs { display: flex; border-bottom: 1px solid var(--hairline-card); }
.composer-tab {
  flex: 1; padding: 14px 8px; text-align: center;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
  color: var(--ink-muted);
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  min-height: 48px;
}
.composer-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.composer-tab:disabled { opacity: 0.35; cursor: not-allowed; }
.composer-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.c-label { color: var(--ink-muted); font-size: 12px; }
.cash-input {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 0 16px; height: 58px;
}
.cash-input:focus-within { border-color: var(--accent); }
.cash-input .cur { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink-muted); }
.cash-input input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  color: var(--ink); width: 100%;
}
.quick-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-chip {
  border: 1px solid var(--hairline-card); border-radius: var(--r-pill);
  padding: 8px 13px; font-size: 12.5px; color: var(--ink-muted);
  min-height: 36px;
}
.quick-chip:hover { border-color: var(--accent); color: var(--accent); }
.item-pick { display: flex; flex-direction: column; gap: 8px; }
.item-opt {
  display: flex; gap: 12px; align-items: center;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 9px; text-align: left;
  transition: border-color 0.15s, background 0.15s;
  min-height: 56px;
}
.item-opt img { width: 48px; height: 48px; border-radius: var(--r-chip); object-fit: cover; }
.item-opt .t { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.item-opt .v { color: var(--ink-muted); font-size: 12.5px; }
.item-opt .tick {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--hairline-card);
  display: grid; place-items: center; font-size: 12px;
  /* The check is in the markup for every item (renderComposer writes it, picked or not), so the
     glyph is drawn only once the item is picked. It used to be white here: invisible on the day
     card, but on the night card every item looked picked (card 1218929541936463). Same shape as
     the share sheet row's .share-tick: transparent until .sel fills the circle and inks it. */
  color: transparent;
}
.item-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.item-opt.sel .tick { background: var(--accent); border-color: var(--accent); color: #fff; }
.composer textarea {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  background: none; color: var(--ink);
  padding: 12px 14px; font-family: var(--font-body); font-size: 16px;
  resize: vertical; min-height: 64px; outline: none;
}
.composer textarea:focus { border-color: var(--accent); }
.sum-rows { border-top: 1px dashed var(--hairline-card); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-muted); }
.sum-row.total { color: var(--ink); font-weight: 700; font-family: var(--font-display); font-size: 15px; }
.btn-offer {
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-block); height: 56px;
  font-family: var(--font-label); font-weight: 700; font-size: 15.5px; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.12s, filter 0.15s;
}
.btn-offer:hover { filter: brightness(1.05); }
.btn-offer:active { transform: scale(0.99); }
/* Offer sent: the composer's in-place confirmation (app.js renderComposerSent) */
.composer-sent .sent-body { align-items: center; text-align: center; padding: 8px 0; }
.sent-check { width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; }
.sent-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.sent-sub { color: var(--ink-muted); font-size: 13.5px; }
.btn-offer.sent-cta { align-self: stretch; text-decoration: none; }
.btn-offer.mob.sent { text-decoration: none; }
.escrow-note { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 12.5px; }
.escrow-note .lock { color: var(--accent); }

.similar { margin-top: 56px; }

.mobile-offer-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  background: var(--card);
  border-top: 1px solid var(--hairline-card);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center; gap: 14px;
}
/* The row's one rule of who yields: the button grows to fill the row but never shrinks
   below its label (flex 1 0 auto, nowrap, its own side padding), and the title block
   keeps its width where there is room and shrinks to an ellipsis where there is not
   (flex 0 1 auto, min-width 0). With `flex: 1` the button could shrink to nothing and
   was crushed into a three-line column by any long title, which is most real listings:
   44.5 px wide and three lines beside a 74-character title at 375 wide (measured on prod,
   2026-10-17). Short titles look as they always did. Card 1219618166948354. */
.mob-price { font-family: var(--font-display); font-weight: 700; font-size: 19px; display: flex; flex-direction: column; line-height: 1.15; flex: 0 1 auto; min-width: 0; }
.mob-price small { font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-offer.mob { flex: 1 0 auto; white-space: nowrap; height: 50px; font-size: 14px; padding: 0 18px; }

/* ============ PROFILE ============ */
/* Longhand: .profile is also .wrap; the shorthand zeroed its side gutter (PRE-SHOW 6). */
.profile { padding-top: 36px; padding-bottom: 70px; }
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
/* The photo aligns to the NAME, not to the middle of everything beside it.
   align-items:center on the row centers the 76px avatar against the whole
   meta block, so how far it sags depends on how much text happens to sit
   there: measured at 1280px, 3px low on a profile with an empty bio and
   36.5px low on one carrying a bio and badge chips (Blake reported the
   first, 2026-08-31; both are the same defect). align-self on the avatar
   alone — NOT align-items on the row — is what fixes it without dragging
   .ph-actions up to the top row with it (measured: .ph-actions stays at the
   same y either way).

   🪤 NO OPTICAL NUDGE, and the first attempt at one was backwards. Aligning
   the circle to the @handle's cap-height sounds right and moves it the WRONG
   WAY: measured off the real font (Space Grotesk 700 at 36px in a 46px line
   box), the ink starts 9.3px BELOW the box top, so a cap-height nudge would
   push the avatar DOWN 6.3px from where it already sits. Nor was the
   centered position ever 3px off by coincidence — an 82px block minus a 76px
   avatar is exactly 6, halved is exactly 3, so a `margin-top: 3px` here
   would have reproduced the bug byte for byte and shipped as a no-op. Top of
   the circle to top of the text block, nothing added. */
.profile-head > .avatar { align-self: flex-start; }
.ph-meta { min-width: 0; }
.ph-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Share and settings travel together, so a long name moves them as a pair. */
.ph-icons { display: inline-flex; align-items: center; gap: 10px; }
/* List an Item was 40px beside 44px neighbours at every width (.btn-exchange is 40px
   elsewhere). On the profile it matches them. */
.ph-actions-own #ph-listitem { height: 44px; }
/* no tier to name (a level not derived from points): no chip, not an empty pill.
   The element stays in the page so profileFixups can fill it (2026-09-10). */
.level-chip:empty { display: none; }
.level-chip {
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-text);
  border-radius: var(--r-chip); padding: 5px 10px;
  font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em;
}
.ph-actions { margin-left: auto; display: flex; gap: 10px; }
/* 1px-gap grid over a hairline background: borders stay perfect at any column count */
.stats-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin: 26px 0 8px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.stat { padding: 18px 8px; text-align: center; background: var(--canvas); }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); }
.stat .l { margin-top: 3px; color: var(--ink-muted); font-size: 10.5px; }
.lf-manage { display: flex; flex-direction: column; gap: 14px; }
.lf-add { display: flex; gap: 10px; max-width: 460px; }
.lf-add input {
  flex: 1; height: 46px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
  padding: 0 18px; font-size: 16px; outline: none;
}
.lf-add input:focus { border-color: var(--accent); }
.status-chip {
  position: absolute; top: 10px; left: 10px;
  background: var(--accent); color: #fff;
  border-radius: var(--r-chip); padding: 4px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em;
}
:scope[data-mode="night"] .status-chip { color: #07050F; }
.closet-card .lcard-meta { gap: 5px; }

/* ============ INBOX ============ */
.inbox { padding-bottom: 70px; }
.inbox-grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 20px;
  align-items: start;
}
.thread-list {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 140px;
}
.thread-row {
  display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--card); border: 1.5px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 13px 14px;
  transition: border-color 0.15s, transform 0.15s;
}
@media (hover: hover) { .thread-row:hover { border-color: var(--accent); } }
.thread-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.tr-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
/* The name has the first line to itself and the tags sit on the second, on every row and at every
   width, so the statuses line up and no name is cut to make room (Blake, 2026-09-28). */
.tr-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.tr-top b { font-family: var(--font-display); font-size: 14px; flex-basis: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On their own line the tags run a size down from the site's chip (Blake, 2026-09-28). */
.tr-top .state-chip { font-size: 10px; padding: 3px 8px; letter-spacing: 0.1em; }
.tr-last { color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ═══ PERSON THREADS (Blake 2026-09-02): one row per counterpart, one timeline. ═══ */
.tr-deals { font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--hairline-card); border-radius: var(--r-chip); padding: 1px 6px; white-space: nowrap; }
/* Offer blocks sit full-bleed inside the timeline's 16px gutter, the way the
   summary sat above the messages before; history rows keep their own width. */
.timeline .tl-offer { margin: 0 -16px; }
.timeline .tl-offer:first-child { margin-top: -16px; }
.timeline .tl-hist .hist-row { width: 100%; }
.tr-unread {
  background: var(--gold); color: var(--gold-ink);
  min-width: 20px; height: 20px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  flex: none;
}
.thread-view {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  min-height: 560px;
}
.thread-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline-card); }
.thread-back { font-size: 18px; padding: 4px 10px; border-radius: var(--r-chip); }
.offer-summary { padding: 14px 16px; border-bottom: 1px solid var(--hairline-card); display: flex; flex-direction: column; gap: 12px; }
.os-grid { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: 12px; align-items: center; }
.os-side { display: flex; flex-direction: column; gap: 3px; }
.os-side b { font-family: var(--font-display); font-size: 14.5px; }
.os-get { flex-direction: row; display: flex; gap: 10px; align-items: center; }
.os-get img { width: 52px; height: 52px; border-radius: var(--r-block); object-fit: cover; flex: none; }
.os-get > span { display: flex; flex-direction: column; gap: 3px; }
.stepper { display: flex; gap: 0; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.step::before {
  content: ""; position: absolute; top: 5px; left: -50%; right: 50%;
  height: 2px; background: var(--hairline-card);
}
.step:first-child::before { display: none; }
.step .dot-step { width: 12px; height: 12px; border-radius: 50%; background: var(--hairline-card); position: relative; z-index: 1; }
.step.done .dot-step { background: var(--accent); }
.step.you .dot-step { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.step.wait .dot-step { background: var(--ink-muted); }
.step-lab { font-family: var(--font-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-muted); text-align: center; }
.step.you .step-lab { color: var(--gold-text); font-weight: 700; }
.step.done .step-lab { color: var(--ink); }
.thread-cta { height: 46px; font-size: 13px; }
.msgs { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.msg-row { display: flex; }
.msg-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 78%;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 13px; font-size: 14px; line-height: 1.5;
}
.msg-row.mine .bubble {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 14px 14px 4px 14px;
}
.bubble .when { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-muted); }
.msg-composer { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hairline-card); }
/* min-width: 0 lets the box give up its ~20-character natural width, so Send
   stays on a phone's screen (Blake 2026-09-28); at 380 and below app.js
   switches the hint to "Message" and the slimmer padding keeps it whole at 320 */
.msg-composer input {
  flex: 1; min-width: 0; height: 46px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--ink);
  padding: 0 18px; font-size: 16px; outline: none;
}
@media (max-width: 380px) { .msg-composer input { padding: 0 12px; } }
.msg-composer input:focus { border-color: var(--accent); }
.msg-send { width: 52px; height: 46px; flex: none; font-size: 15px; }

/* ============ MODAL / TOAST / DEMO BAR ============ */
.modal-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(7, 10, 18, 0.55);
  display: none; place-items: center;
}
.modal-back.open { display: grid; }

/* ── LIST & EARN guest interstitial (card 1218246646201528) ─────────────────
   Two columns on a wide viewport so the headline and the button sit together
   and nothing has to be scrolled past to reach the CTA; one column on a phone,
   where the paid-social clicks actually land. Tokens only — the sheet inverts
   correctly in night because --card, --ink and --gold already do. */
.promo-sheet-back { z-index: 95; padding: 16px; }
.promo-sheet {
  width: min(620px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-card);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-hover);
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 620px) { .promo-sheet { grid-template-columns: 1.25fr 1fr; } }
.promo-sheet-copy { padding: 26px 24px 22px; }
.promo-sheet-ladder {
  padding: 26px 24px 22px;
  border-top: 1px solid var(--hairline-card);
  background: var(--band);
}
@media (min-width: 620px) {
  .promo-sheet-ladder { border-top: 0; border-left: 1px solid var(--hairline-card); }
}
.promo-sheet-mark {
  display: block; font-family: var(--font-wordmark); font-weight: 700;
  font-size: 13px; letter-spacing: 0.26em; color: var(--wordmark); margin-bottom: 20px;
}
.promo-sheet-head {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 1.14; letter-spacing: -0.015em; color: var(--ink); margin: 8px 0 10px;
}
.promo-sheet-sub { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 8px; }
.promo-sheet-where { font-size: 13.5px; line-height: 1.5; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
.promo-sheet-cta { width: 100%; }
.promo-sheet-dismiss {
  display: block; width: 100%; text-align: center; background: none; border: 0;
  color: var(--ink-muted); font-size: 12.5px; padding: 12px 0 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.promo-sheet-rungs { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hairline-card); }
.promo-sheet-rung {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline-card);
  font-size: 12.5px; color: var(--ink-muted);
}
.promo-sheet-rung em { font-style: normal; font-size: 11px; opacity: 0.8; }
.promo-sheet-rung b {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--gold-text); font-variant-numeric: tabular-nums;
}
.promo-sheet-rung.top { color: var(--ink); font-weight: 600; }
.promo-sheet-rung.top b { font-size: 19px; }
.promo-sheet-fine { font-size: 10.5px; line-height: 1.5; color: var(--ink-muted); margin: 12px 0 0; }
.modal {
  width: min(430px, 92vw);
  background: var(--card); border-radius: var(--r-card);
  padding: 30px; box-shadow: var(--shadow-hover);
  text-align: center;
}
.modal-emblem { display: flex; justify-content: center; }
.modal h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin: 14px 0 8px; }
.modal p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }
.modal .btn-signin { width: 100%; height: 52px; }
.modal .later { margin-top: 12px; color: var(--ink-muted); font-size: 13.5px; }

/* width: max-content matters: a fixed box at left: 50% shrink-wraps to the
   space right of center, half the viewport, so a long message stacked into a
   tall oval on phones and the old max-width never applied (Blake 2026-09-13). */
.toast {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--canvas);
  border-radius: var(--r-block); padding: 13px 22px;
  font-size: 14.5px; line-height: 1.4; z-index: 95; opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  width: max-content; max-width: min(360px, calc(100vw - 32px)); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.demo-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 80;
  display: flex; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-pill); padding: 6px 8px;
  box-shadow: var(--shadow-hover);
  flex-wrap: wrap;
}
.demo-bar .tag { font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-muted); padding: 0 6px; }
.demo-seg { display: flex; border: 1px solid var(--hairline-card); border-radius: var(--r-pill); overflow: hidden; }
.demo-seg button {
  padding: 7px 12px;
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
}
.demo-seg button.on { background: var(--ink); color: var(--canvas); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1150px) and (min-width: 721px) {
  .nav .mode-toggle { display: none; }
  .btn-list { padding: 0 13px; }
  .btn-inbox { padding: 0 13px; }
  .nav-inner { gap: 10px; }
}
@media (max-width: 1024px) {
  /* board folds between the support line and the CTA row */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "board" "ctas";
    gap: 26px;
  }
  .hero-board { justify-self: start; }
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 170px;
    grid-auto-flow: dense;
    grid-template-areas: none;
  }
  .tile-fa, .tile-co, .tile-ga, .tile-mu, .tile-el, .tile-me, .tile-sp, .tile-ho, .tile-ot { grid-area: auto; }
  .tile-fa, .tile-ga, .tile-el, .tile-ot { grid-column: span 2; }
  .detail-grid { grid-template-columns: 1fr; }
  .gallery { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .floor-strip { grid-template-columns: 1fr; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
  .mobile-offer-bar { display: flex; }
  .demo-bar { bottom: 84px; }
  /* minmax(0, 1fr), not 1fr: a 1fr track's minimum is its content, and one long preview
     line (nowrap) set the width of every row, past a phone's edge (card 1218933667586137). */
  .inbox-grid { grid-template-columns: minmax(0, 1fr); }
  .thread-list { position: static; }
  .inbox-grid .thread-view { display: none; }
  .inbox-grid.thread-open .thread-view { display: flex; }
  .inbox-grid.thread-open .thread-list { display: none; }
}
@media (max-width: 780px) {
  /* 240px floor, not 160: every grid card carries the take block now, and four-up
     at 752-780px (an iPad in portrait) left the preview a 36px text column.
     240px is a phone rail card's width, the narrowest card that already carried
     the block legibly (adversarial review 2026-09-10). */
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .only-desktop { display: none !important; }
  .only-mobile { display: grid !important; }
  .only-mobile-flex { display: flex !important; }
  .nav-inner { gap: 6px; padding: 0 10px; }
  .logo-img { height: 44px; }
  .nav .mode-toggle { display: none; }
  .btn-signin { padding: 0 16px; font-size: 13px; }
  .btn-cat { padding: 0 8px; font-size: 11.5px; }
  .vd-grid { grid-template-columns: minmax(0, 1fr); }
  .nav-search {
    display: none;
    position: absolute; left: 0; right: 0; top: 76px;
    max-width: none; padding: 10px 18px 14px;
    background: var(--canvas); border-bottom: 1px solid var(--hairline);
    z-index: 65;
  }
  .nav-search.mobile-open { display: block; }
  .nav-search .search-ic { left: 34px; top: 24px; }
  .search-results { top: 62px; left: 18px; right: 18px; }
  .btn-list { padding: 0 13px; font-size: 12px; }
  .btn-inbox { padding: 0 13px; }
  .hero { padding-top: 36px; padding-bottom: 40px; }
  .flap-row { gap: 3px; }
  .welcome-row { flex-direction: column; align-items: stretch; }
  .welcome-list { width: 100%; }
  .rail { grid-auto-columns: 240px; }
  .how-row { grid-template-columns: 56px 1fr; gap: 14px; }
  .how-row .how-d { grid-column: 2; }
  .vitals { flex-direction: column; }
  .vital + .vital { border-left: none; border-top: 1px solid var(--hairline); }
  .cvote { padding: 7px 11px; min-height: 34px; }
  .card-offer { height: 44px; }
  .demo-bar { left: 10px; right: 10px; justify-content: center; }
  .ph-actions { margin-left: 0; width: 100%; }
}

/* ============================================================
   ROUND-7 ADDITIONS
   Collections nav + shelf + discovery · listing manager ·
   Live Listings · Ambassador dashboard · The Exchange
   ============================================================ */

/* --- nav: Collections as a destination, not a category --- */
.btn-collections {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.2s, color 0.2s;
}
.btn-collections svg { width: 17px; height: 17px; color: var(--gold); }
.btn-collections:hover { border-color: var(--accent); color: var(--accent); }
.btn-collections.here { border-color: var(--gold); }

/* --- shared bits --- */
.count-chip {
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-text);
  border-radius: var(--r-pill); padding: 3px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.tab-n { opacity: 0.6; font-size: 11px; }
.sec-link.see-all { margin-left: auto; color: var(--accent); cursor: pointer; }
.sec-link.see-all:hover { text-decoration: underline; }
/* ── lane B (2026-10-20, card 1219064058157837): a See All that opens a page of its own (the home's matches row)
   sits on its heading's line, level with the first line, the heading wrapping beside it (Blake: "can see all be
   in line with the title?"). The title starts from zero width, so it gives the See All room; its smallest width
   is still its longest word, so at a very large text size or a very narrow screen, where that word cannot fit
   beside the See All, the head wraps as every head does and the See All drops below, never over the word. ── */
.sec-head.sec-head-inline .sec-title { flex: 1 1 0; }
.sec-head.sec-head-inline .sec-link.see-all { flex: none; white-space: nowrap; }

/* --- top collections shelf (home) --- */
.coll-rail { grid-auto-columns: 236px; }
.coll-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: 14px; padding: 11px;
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.coll-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.coll-thumbs { display: flex; gap: 6px; }
.coll-thumbs img { flex: 1; min-width: 0; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.coll-owner { display: flex; align-items: center; gap: 7px; }
.coll-uname { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); }
.coll-stats { font-size: 12.5px; color: var(--ink-muted); }
.coll-stats b { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 14px; }

/* --- collections discovery page --- */
.collpage { padding-top: 28px; padding-bottom: 80px; }
/* minmax(0, 1fr): one 30-character handle widened the column, and with it every card in the
   list, past a phone (cards 1218961747044655, 1218961721555442). */
.collector-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.collector-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.cc-id { display: flex; gap: 12px; align-items: center; }
.cc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cc-handle { font-family: var(--font-display); font-weight: 700; font-size: 16px; cursor: pointer; }
.cc-handle:hover { color: var(--accent); }
.cc-since { color: var(--ink-muted); font-size: 10px; }
.cc-follow { height: 36px; padding: 0 14px; font-size: 11.5px; flex: none; }
.cc-known { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-chip {
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold-text);
  border-radius: var(--r-chip); padding: 3px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.1em;
}
.cc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline-card);
  border-top: 1px solid var(--hairline-card); border-bottom: 1px solid var(--hairline-card);
}
.cc-stat { background: var(--card); padding: 10px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cc-stat b { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.cc-stat .microlabel { color: var(--ink-muted); font-size: 9.5px; }
.cc-gold { color: var(--gold-text); }
.cc-hl-lab { color: var(--accent); }
.cc-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-hl { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0; min-width: 0; }
.cc-hl img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--hairline-card); transition: transform 0.2s; }
.cc-hl:not(:disabled):hover img { transform: scale(1.04); }
.cc-hl .t { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-hl .p { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink-muted); }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.cc-view {
  border: 1.5px solid var(--gold-text); color: var(--gold-text); /* the border is this button's only boundary: 2.52:1 in --gold, 4.9:1 here (Blake 2026-10-20) */
  border-radius: var(--r-pill); height: 42px;
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.2s;
}
.cc-view:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.cc-exch, .btn-exchange {
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-pill); height: 42px;
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: filter 0.15s, transform 0.12s;
}
.cc-exch:hover, .btn-exchange:hover { filter: brightness(1.06); }
.cc-exch:active, .btn-exchange:active { transform: scale(0.99); }
.btn-exchange { margin-left: auto; padding: 0 20px; height: 40px; }

/* --- listing manager grid (own profile) + public collection grid --- */
.mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mgr-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); overflow: hidden;
  box-shadow: var(--shadow); text-align: left;
  display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mgr-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.mgr-card.pub[data-golisting] { cursor: pointer; }
.mgr-imgwrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.mgr-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.mgr-overlay {
  position: absolute; inset: 0;
  background: var(--overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.mgr-card:hover .mgr-overlay, .mgr-card:focus-within .mgr-overlay, .mgr-card.show .mgr-overlay { opacity: 1; pointer-events: auto; }
.mgr-btn {
  width: min(160px, 90%); height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.65); color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
}
.mgr-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.mgr-locked { color: rgba(255, 255, 255, 0.8); font-size: 11px; text-align: center; }
.mgr-meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mgr-title { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-priceline { display: flex; align-items: center; gap: 8px; }
.mgr-priceline b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold-text); }
.mgr-struck { color: var(--ink-muted); font-family: var(--font-display); font-size: 14px; }
.mgr-est { color: var(--ink-muted); font-size: 12.5px; }
.mgr-note { color: var(--ink-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgr-add { min-height: 205px; }

/* --- live listings (compact shoppable grid) --- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.live-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); overflow: hidden; text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex; flex-direction: column; padding: 0;
}
.live-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.live-imgwrap { aspect-ratio: 1; overflow: hidden; }
.live-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.live-meta { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 4px; }
.live-title { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-priceline { display: flex; align-items: center; gap: 7px; }
.live-priceline b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); }
.grid-compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* 240, not 205: the profile grids' cards carry the take block too, and at 205-236px (a 740-880px window) the preview squeezed to a sliver and the vote pills clipped. Same floor as every other card grid (2026-09-10). */

/* --- Your Numbers tabs + Ambassador dashboard --- */
.dash-tabs { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-pill); overflow: hidden; }
.dash-tab {
  padding: 8px 16px;
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
  transition: background 0.15s, color 0.15s;
}
.dash-tab.on { background: var(--ink); color: var(--canvas); }
.dash-tab.amb.on { background: var(--gold); color: var(--gold-ink); }
.level-chip.amb-chip { background: var(--gold); color: var(--gold-ink); }
.amb-dash { display: flex; flex-direction: column; gap: 14px; }
.amb-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.amb-code {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  border-radius: var(--r-chip); padding: 7px 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em;
  color: var(--gold);
  transition: background 0.15s;
}
.amb-code:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.amb-code .copy-hint { font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.amb-note { color: var(--ink-muted); font-size: 12.5px; }
.amb-grid { grid-template-columns: repeat(4, 1fr); }
.amb-hero { grid-column: span 2; background: color-mix(in srgb, var(--gold) 7%, var(--card)); }
.amb-hero .n { color: var(--gold); }
.bounty {
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 16px; background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.bounty-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.bounty-lab { color: var(--gold); font-size: 13px; }
.bounty-note { color: var(--ink-muted); font-size: 12px; }
.bounty-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bounty-track { display: flex; flex-direction: column; gap: 7px; }
.bt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bt-lab { color: var(--ink-muted); font-size: 10.5px; }
.bt-n { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.bt-n .of { color: var(--ink-muted); font-weight: 500; font-size: 12px; }
.bt-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bt-bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); transition: width 0.6s ease; }
.bt-togo { color: var(--ink-muted); font-size: 11.5px; }

/* --- deal thread: waiting strip + pop anchor --- */
.offer-summary { position: relative; }
.wait-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px dashed var(--hairline-card); border-radius: var(--r-block);
  padding: 10px 14px;
}
.wait-lab { color: var(--ink-muted); }
.withdraw-btn {
  border: 1.5px solid color-mix(in srgb, var(--destructive) 55%, transparent); color: var(--destructive);
  border-radius: var(--r-pill); height: 34px; padding: 0 14px;
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s;
}
.withdraw-btn:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }

/* --- THE EXCHANGE --- */
/* longhand on purpose: shorthand would zero .wrap's responsive side padding */
.exchange { padding-top: 32px; padding-bottom: 90px; }
.exch-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 26px; }
.exch-title { display: flex; align-items: center; gap: 12px; }
.exch-glyph {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.exch-glyph svg { width: 22px; height: 22px; }
.ex-swap-badge svg { width: 26px; height: 26px; }
.exch-with { display: flex; align-items: center; gap: 9px; color: var(--ink-muted); font-size: 14px; }
.exch-with b { color: var(--ink); font-family: var(--font-display); cursor: pointer; }
.exch-with b:hover { color: var(--accent); }
.exch-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.you-cap { color: var(--gold-text); }
.their-cap { color: var(--accent); }
.exch-deck {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.exch-deck.mine { border-top: 3px solid var(--gold); animation: deck-left 0.45s ease both; }
.exch-deck.theirs { border-top: 3px solid var(--accent); animation: deck-right 0.45s ease both; }
@keyframes deck-left { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes deck-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.deck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deck-lab { font-size: 12px; }
.exch-deck.mine .deck-lab, .exch-deck.mine .deck-total { color: var(--gold-text); }
.exch-deck.theirs .deck-lab, .exch-deck.theirs .deck-total { color: var(--accent); }
.deck-total { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.deck-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ex-card {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  overflow: hidden; text-align: left; padding: 0 0 8px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ex-card:not(:disabled):hover { transform: translateY(-2px); box-shadow: var(--shadow); }
@media (hover: hover) { .exch-deck.mine .ex-card:not(:disabled):hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); } }
@media (hover: hover) { .exch-deck.theirs .ex-card:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } }
.ex-card:disabled { opacity: 0.45; cursor: not-allowed; }
.exch-deck.mine .ex-card.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.exch-deck.theirs .ex-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ex-imgwrap { position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 4px; }
.ex-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.ex-check {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.exch-deck.mine .ex-check { background: var(--gold); color: var(--gold-ink); }
.exch-deck.theirs .ex-check { background: var(--accent); color: #fff; }
:scope[data-mode="night"] .exch-deck.theirs .ex-check { color: #07050F; }
.ex-card.sel .ex-check { opacity: 1; transform: scale(1); }
@keyframes check-pop { to { opacity: 1; transform: scale(1); } }
.ex-dis-tag, .ex-unl {
  position: absolute; left: 7px; bottom: 7px;
  border-radius: var(--r-chip); padding: 3px 7px;
  font-family: var(--font-label); font-weight: 700; font-size: 9px; letter-spacing: 0.1em;
  background: var(--overlay); color: #fff;
}
.ex-unl { background: color-mix(in srgb, var(--gold) 85%, #000 10%); color: var(--gold-ink); }
.ex-title { padding: 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-val { padding: 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-muted); }

.exch-center {
  /* top clears the sticky nav + the overhanging swap badge */
  position: sticky; top: 172px;
  background: var(--card); border: 1.5px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 20px 18px;
  box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; gap: 13px; align-items: center;
  animation: center-up 0.5s ease both;
}
@keyframes center-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ex-swap-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center; font-size: 23px; font-weight: 700;
  border: 3px solid var(--canvas); box-shadow: var(--shadow-hover);
  margin-top: -46px;
}
.ex-swap-badge.spin { animation: ex-spin 0.45s ease; }
@keyframes ex-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.ex-verdict {
  font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-align: center; min-height: 20px;
}
.ex-verdict.even { color: var(--success); }
.favor-bar {
  width: 100%; height: 10px; border-radius: 5px;
  background: var(--accent); overflow: hidden;
}
.favor-bar i { display: block; height: 100%; background: var(--gold); transition: width 0.45s cubic-bezier(0.3, 0.9, 0.35, 1); }
.favor-caps { width: 100%; display: flex; justify-content: space-between; }
.favor-caps .microlabel { font-size: 10px; }
.table-lists { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tbl-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tbl-lab { font-size: 10px; }
.tbl-row {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-chip);
  padding: 5px 7px; font-size: 11.5px;
  animation: row-in 0.22s ease both;
}
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tbl-row img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex: none; }
.tbl-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tbl-row b { font-family: var(--font-display); font-size: 11.5px; flex: none; }
.tbl-cash {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  display: grid; place-items: center;
  color: var(--gold-text); font-weight: 700; font-size: 13px;
}
.tbl-x { color: var(--ink-muted); font-size: 10px; padding: 3px; flex: none; }
.tbl-x:hover { color: var(--destructive); }
.tbl-empty { color: var(--ink-muted); font-size: 11.5px; padding: 8px 2px; }
.ex-cash-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-cash { display: flex; flex-direction: column; gap: 6px; }
.ex-cash .microlabel { font-size: 10px; color: var(--ink-muted); }
.ex-cash-input {
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--r-block); padding: 0 12px; height: 46px;
  border: 1.5px solid var(--hairline-card);
}
.mine-cash .ex-cash-input { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.mine-cash .ex-cash-input:focus-within { border-color: var(--gold); }
.their-cash .ex-cash-input { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.their-cash .ex-cash-input:focus-within { border-color: var(--accent); }
.ex-cash-input .cur { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-muted); }
.ex-cash-input input {
  flex: 1; width: 100%; border: none; outline: none; background: none;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink);
}
.ex-review { width: 100%; height: 52px; font-size: 14px; }
.ex-review:disabled { opacity: 0.45; cursor: not-allowed; }
.ex-hint { color: var(--ink-muted); font-size: 12.5px; text-align: center; min-height: 18px; }

/* exchange review sheet */
.rv-modal { width: min(520px, 94vw); text-align: left; padding: 24px; }
.rv-head { display: flex; align-items: center; justify-content: space-between; }
.rv-head h3 { margin: 0; }
.rv-close { position: static; }
.rv-scroll { max-height: min(480px, 55dvh); overflow-y: auto; margin: 14px 0; display: flex; flex-direction: column; gap: 7px; padding-right: 4px; }
.rv-lab { font-size: 11px; margin-top: 4px; }
.rv-row {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-chip);
  padding: 7px 9px; font-size: 13px;
}
.rv-row img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }
.rv-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row b { font-family: var(--font-display); }
.rv-row.total { border-style: dashed; font-weight: 700; }
.rv-row.total b { color: var(--gold-text); }
.rv-swap { display: flex; justify-content: center; padding: 4px 0; }
.rv-verdict {
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--r-block);
  font-family: var(--font-label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-text); text-align: center;
}
.rv-verdict.even { border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success); }
.rv-modal .btn-offer { width: 100%; }

/* exchange success takeover */
.ex-success {
  position: fixed; inset: 0; z-index: 96;
  background: var(--overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  animation: fade-in 0.25s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.ex-success-circle {
  width: 96px; height: 96px; border-radius: 50%;
  background: color-mix(in srgb, var(--success) 22%, transparent);
  border: 2px solid var(--success);
  display: grid; place-items: center;
  color: var(--success); font-size: 44px; font-weight: 700;
  animation: check-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ex-success h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #fff; }
.ex-success p { color: rgba(255, 255, 255, 0.8); font-size: 14.5px; }

/* --- round-7 responsive --- */
@media (max-width: 1180px) {
  .exch-grid { grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 1024px) {
  .exch-grid { grid-template-columns: minmax(0, 1fr); }
  .exch-deck { min-width: 0; }
  .exch-deck.theirs { order: 0; }
  .exch-center { order: 1; position: static; }
  .exch-deck.mine { order: 2; }
  .ex-swap-badge { margin-top: -44px; }
  .deck-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; grid-template-columns: none; overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
  .collector-grid { grid-template-columns: minmax(0, 1fr); }
  .amb-grid { grid-template-columns: repeat(2, 1fr); }
  .bounty-tracks { grid-template-columns: 1fr; }
}
/* mobile bottom tab bar (app CustomTabBar mirror) — desktop hidden */
.tab-bar { display: none; }

@media (max-width: 720px) {
  /* primary destinations move into the bottom tab bar — NAV-SCOPED: .btn-inbox
     is reused by the deal thread's Counter button and insights actions, and the
     unscoped rule was hiding those too (Blake report 2026-08-30) */
  .nav-actions .btn-collections, .nav-actions .btn-list, .nav-actions .btn-inbox { display: none !important; }
  :scope { padding-bottom: 66px; }
  .tab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
    display: flex; align-items: flex-end;
    background: var(--card); border-top: 1px solid var(--hairline-card);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
  }
  .tb-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--ink-muted);
    font-family: var(--font-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
    position: relative; padding: 2px 0;
  }
  .tb-item svg { width: 20px; height: 20px; }
  .tb-item.on { color: var(--gold-text); }
  .tb-plus {
    width: 42px; height: 42px; margin-top: -20px;
    border-radius: 50%;
    background: var(--gold); color: var(--gold-ink);
    display: grid; place-items: center;
    font-size: 23px; font-weight: 700; font-family: var(--font-display);
    border: 3px solid var(--card); box-shadow: var(--shadow-hover);
  }
  .tb-badge {
    position: absolute; top: -2px; right: calc(50% - 22px);
    background: var(--gold); color: var(--gold-ink);
    min-width: 17px; height: 17px; border-radius: var(--r-pill);
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 10px;
    padding: 0 4px;
  }
  .demo-bar { bottom: 78px; }
  .mobile-offer-bar { bottom: 60px; }
  .mgr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .live-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .grid-compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .table-lists { grid-template-columns: 1fr; }
  .coll-rail { grid-auto-columns: 210px; }
  .mgr-add { min-height: 160px; }
  .exch-head { gap: 12px; }
}

/* ============================================================
   ROUND-11 ADDITIONS
   receipts · dispute history · gacha v2 · storefront columns
   ============================================================ */

/* public profile: bio→badges breathing room; uniform badge fill */
.rep-badges.inline { margin-top: 14px; }
.rep-badges .badge-chip, .rep-badges .badge-chip.pinned, .rep-dash .badge-chip, .rep-dash .badge-chip.pinned {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--ink);
}

/* exchange banner: CTA pinned to the far right at every width */
.exch-banner.balanced { justify-content: space-between; flex-wrap: nowrap; }
.exch-banner.balanced .exch-banner-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.exch-banner-toprow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.exch-banner.balanced .exch-banner-sub { flex-basis: auto; }
.exch-banner.balanced .btn-exchange.big { flex: none; margin-left: 16px; }
@media (max-width: 720px) {
  .exch-banner.balanced .btn-exchange.big { padding: 0 16px; height: 46px; font-size: 12px; }
  .exch-banner.balanced .btn-exchange.big span { display: none; }
}

/* public collection: make-offer overlay + gold action */
.mgr-btn.gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.mgr-btn.gold:hover { filter: brightness(1.06); background: var(--gold); }
.mgr-card.pub .mgr-overlay { pointer-events: none; }
.mgr-card.pub:hover .mgr-overlay, .mgr-card.pub:focus-within .mgr-overlay { pointer-events: auto; }
.lcard:hover .want-chip { opacity: 0; transition: opacity 0.15s; }

/* storefront stats: engagement + sales side by side */
.dash-cols { display: grid; grid-template-columns: 2fr 3fr; gap: 18px; align-items: start; }
.dash-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.dash-grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }

/* saved state: tag fills gold */
.img-share.on { opacity: 1; background: var(--gold); color: var(--gold-ink); }
.lcard .img-share.on { opacity: 1; transform: translateY(0); }

/* receipts */
.thread-cta.outline { background: none; border: 1.5px solid var(--gold); color: var(--gold-text); }
.thread-cta.outline:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); filter: none; }
.receipt-meta { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; flex-wrap: wrap; }

/* gacha v2 — one clean card, springy entrance, gold shimmer */
.gacha-card.v2 {
  position: relative; overflow: hidden;
  animation: gacha-pop 0.55s cubic-bezier(0.34, 1.45, 0.5, 1) both;
  padding: 26px 24px 20px;
}
@keyframes gacha-pop { 0% { transform: scale(0.7) translateY(24px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.gacha-eyebrow { color: var(--gold); letter-spacing: 0.22em; }
.gacha-shimmer {
  position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--gold) 22%, transparent), transparent);
  transform: rotate(14deg); pointer-events: none;
  animation: gacha-sweep 1.1s ease 0.5s both;
}
@keyframes gacha-sweep { to { left: 130%; } }

/* ============================================================
   ROUND-10 ADDITIONS
   app CTAs · verdict clarity · exchange filters/flip v2 ·
   settings suite · dispute · gachapon · tutorial
   ============================================================ */

/* nav app CTAs */
.store-badges { display: inline-flex; gap: 8px; flex: none; }
.store-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 13px;
  background: var(--ink); color: var(--canvas);
  border-radius: 9px;
  text-align: left;
  transition: filter 0.15s;
}
.store-badge:hover { filter: brightness(1.15); }
.store-badge svg { width: 17px; height: 17px; flex: none; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.store-badge small { font-size: 8px; opacity: 0.75; letter-spacing: 0.02em; }
.store-badge span { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
/* Nav "Open in App" (PRE-SHOW 6 #14, approved option A): the same 44px circle
   and hairline as Search and the Bell (.icon-btn), a phone glyph, and a small
   gold ↗ badge on the phone's top-right corner for "opens the app". The label
   stays in the DOM, visually hidden, so the accessible name is unchanged. */
.app-open {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 50%;
  color: var(--ink);
}
.app-open > svg { width: 18px; height: 18px; color: var(--ink); }
.app-open-badge {
  position: absolute; left: calc(50% + 1px); top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center;
  pointer-events: none;
}
.app-open-badge svg { width: 8px; height: 8px; }
.app-open-txt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hero tertiary cta */
.cta-secondary.quiet { border-color: var(--hairline); color: var(--ink-muted); }
.cta-secondary.quiet:hover { border-color: var(--accent); color: var(--accent); background: none; }

/* WGTBD verdict overlay + spacing */
.win-overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--gold) 55%, transparent), transparent 55%);
  border-radius: var(--r-block);
}
.win-overlay span {
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-pill); padding: 5px 12px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: var(--shadow);
}
.verdicts-sec { padding-bottom: 64px; }

/* collector rail sizing + follow-button fit */
.collector-rail { grid-auto-columns: 420px; }
.cc-handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cc-follow { height: 32px; padding: 0 12px; font-size: 10.5px; }

/* deals polish */
.offer-actions { max-width: 440px; }
.offer-stamp { color: var(--ink-muted); font-size: 10px; }
.gg-side { position: relative; }
.dash-group-lab { color: var(--ink-muted); margin-bottom: 8px; }

/* exchange: deck filters + flip back v2 */
.deck-filters { display: flex; flex-direction: column; gap: 8px; }
.deck-search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  padding: 0 12px; height: 38px;
}
.deck-search:focus-within { border-color: var(--accent); }
.deck-search .ds-ic svg, .deck-search .search-ic { width: 13px; height: 13px; color: var(--ink-muted); position: static; }
.deck-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--ink); font-size: 13px; font-family: var(--font-body); }
.deck-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.type-tab.sm { padding: 5px 10px; font-size: 11px; min-height: 28px; }
.fb-specs { display: flex; flex-direction: column; gap: 3px; }
.fb-row { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; }
.fb-row i { font-style: normal; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; color: var(--ink-muted); }
.fb-row b { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 10.5px; text-align: right; }
.flip-back { border-top: 2px solid var(--gold); }
.soft-in { animation: fade-in 0.22s ease both; }

/* settings suite */
.acct-group-lab { color: var(--ink-muted); margin: 20px 0 8px; }
.acct-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.acct-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); padding: 13px 16px; text-align: left;
  transition: border-color 0.15s;
}
.acct-row:not(.static):hover { border-color: var(--accent); }
.acct-row.static { cursor: default; }
.acc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-meta b { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.acc-meta span { color: var(--ink-muted); font-size: 12px; }
.acct-acc {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); margin-bottom: 10px; overflow: hidden;
}
.acct-acc summary {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; cursor: pointer; list-style: none;
}
.acct-acc summary::-webkit-details-marker { display: none; }
.acct-acc .acc-chev { color: var(--ink-muted); transition: transform 0.2s; }
.acct-acc[open] .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.acc-body .acct-row { border-color: var(--hairline-card); }
.acct-row.danger .acc-meta b { color: var(--destructive); }
.acct-row.signout { margin-top: 16px; }
.acct-row.signout .acc-meta b { color: var(--destructive); }
.acct-terms { display: block; margin: 22px auto 0; color: var(--ink-muted); font-size: 13px; }
.acct-terms:hover { color: var(--accent); }

/* dispute */
.dispute-link {
  align-self: flex-start;
  color: color-mix(in srgb, var(--destructive) 65%, transparent);
  font-size: 11px; padding: 2px 0;
}
.dispute-link:hover { color: var(--destructive); }
.dispute-line {
  border: 1px dashed color-mix(in srgb, var(--destructive) 40%, transparent);
  border-radius: var(--r-block); padding: 10px 13px;
  color: var(--ink-muted); font-size: 12.5px;
}
.dispute-modal .type-tab.on { background: color-mix(in srgb, var(--destructive) 10%, transparent); border-color: var(--destructive); color: var(--destructive); }
.dispute-file { background: var(--destructive); color: #fff; }
.dispute-file:disabled { opacity: 0.45; cursor: not-allowed; }
.dispute-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 10px 0; }
.dispute-done h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.dispute-done p { color: var(--ink-muted); font-size: 13.5px; }
.dispute-ref {
  border: 1.5px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--r-chip); padding: 8px 16px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; color: var(--gold-text);
}
.ex-success-circle.small { width: 62px; height: 62px; font-size: 28px; }

/* gachapon */
.gacha-back {
  position: fixed; inset: 0; z-index: 97;
  background: rgba(7, 5, 15, 0.88);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.3s ease both;
}
.gacha-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px; }
.gacha-strip { color: var(--gold); letter-spacing: 0.22em; font-size: 12px; animation: fade-in 0.4s ease both; }
.gacha-medallion { position: relative; width: 168px; height: 168px; }
.gm-hem {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 62%, #EFE6CF 63%);
  -webkit-mask: radial-gradient(circle at 50% 50%, black 0 100%);
  animation: gacha-settle 2.2s cubic-bezier(0.34, 1.7, 0.5, 1) both;
}
.gm-ring {
  position: absolute; inset: 10px; border-radius: 50%;
  background: var(--gold);
  border: 4px solid #C9A84C;
  display: grid; place-items: center;
  box-shadow: 0 8px 40px rgba(232, 168, 32, 0.35);
  animation: gacha-settle 2.2s cubic-bezier(0.34, 1.7, 0.5, 1) both;
}
.gm-disc {
  width: 108px; height: 108px; border-radius: 50%;
  background: #EFE6CF; color: #4A3908;
  display: grid; place-items: center;
  border: 2px solid #C9A84C;
}
.gm-disc svg { width: 44px; height: 44px; }
@keyframes gacha-settle { 0% { transform: rotate(-65deg) scale(0.7); opacity: 0; } 30% { opacity: 1; } 100% { transform: rotate(0) scale(1); opacity: 1; } }
.gm-glint {
  position: absolute; inset: 10px; border-radius: 50%; overflow: hidden;
  pointer-events: none;
}
.gm-glint::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: rotate(24deg);
  animation: gacha-glint 1s ease 2.3s both;
}
@keyframes gacha-glint { to { left: 130%; } }
.gacha-card {
  width: min(380px, 88vw);
  background: var(--card); border-radius: var(--r-card);
  padding: 20px; text-align: center;
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  box-shadow: var(--shadow-hover);
  animation: center-up 0.5s ease 1.9s both;
}
.gacha-rarity {
  border-radius: var(--r-pill); padding: 4px 12px;
  font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.14em;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted);
}
.gacha-rarity.r-uncommon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.gacha-rarity.r-rare { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.gacha-rarity.r-epic { background: var(--gold); color: var(--gold-ink); }
.gacha-rarity.r-legendary { background: var(--ink); color: var(--gold); border: 1px solid var(--gold); }
.gacha-label { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.gacha-desc { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
.gacha-claim { width: 100%; height: 50px; font-size: 13.5px; }
.gacha-foot { color: var(--ink-muted); font-size: 11.5px; }

/* tutorial */
.tut-back {
  position: fixed; inset: 0; z-index: 97;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.25s ease both;
  padding: 18px;
}
.tut-card {
  position: relative;
  width: min(560px, 94vw); max-height: 92dvh; overflow-y: auto;
  background: var(--card); border-radius: var(--r-card);
  padding: 26px 26px 22px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  box-shadow: var(--shadow-hover);
}
.tut-skip { position: absolute; top: 14px; right: 16px; color: var(--ink-muted); letter-spacing: 0.12em; font-size: 10.5px; z-index: 2; }
.tut-skip:hover { color: var(--ink); }
.tut-progress { width: 100%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.tut-progress i { display: block; height: 100%; background: var(--gold); transition: width 0.3s ease; }
.tut-img { width: 100%; border-radius: var(--r-block); overflow: hidden; }
.tut-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tut-emblem { padding: 14px 0 4px; }
.tut-emblem .logo-img { height: 88px; }
.tut-eyebrow { color: var(--gold); letter-spacing: 0.2em; font-size: 10.5px; }
.tut-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.02em; }
.tut-body { color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; max-width: 46ch; }
.tut-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 6px; }
.tut-backbtn { color: var(--ink-muted); font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 4px; }
.tut-backbtn:disabled { opacity: 0.3; cursor: default; }
.tut-next { height: 48px; padding: 0 30px; font-size: 14px; }
.tut-card.outro .tut-title { font-size: clamp(28px, 3.6vw, 36px); }
.tut-card.outro .cta-primary { margin-top: 6px; }

@media (max-width: 720px) {
  .acct-quick { grid-template-columns: 1fr; }
  .collector-rail { grid-auto-columns: 330px; }
  .offer-actions { max-width: none; }
}

/* ============================================================
   ROUND-9 ADDITIONS
   inline takes · offer feed · flip cards · checkout · account
   ============================================================ */

/* inline take composer */
.take-composer.live { padding: 3px 4px 3px 12px; cursor: text; }
.take-composer.live .take-in {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  color: var(--ink); font-size: 12.5px; font-family: var(--font-body);
  padding: 6px 0;
}
.take-composer.live .send { padding: 0; border-radius: 50%; } /* the disc inside is the visual; the button is the hit area (44px on the installed site, overrides.css) */
/* while the tour types, the field takes the whole row: the message the act
   types ("Wore mine to death. Worth it.") measures 166px in a 158px field and
   the tail was clipped (Blake 2026-09-02 desktop #1). The send pill is parked,
   not removed, so nothing shifts — it returns the moment .tour-live lifts,
   which is before the ghost reaches for it. */
.take-composer.live { position: relative; }
/* desktop: Send stays visible at its natural ~30px (overrides.css forces 44px on the
   installed site); with the inset relaxed the 166px line fits a 176px field. */
.take-composer.live:has(.take-in.tour-live) { padding-left: 4px; }
.take-composer.live > .take-in.tour-live + .send { min-width: 0; }
/* phones: a 118px field cannot hold the line with any Send beside it, so the pill is
   parked while the ghost TYPES (.tour-typing) and is back in place before the ghost
   reaches for it. Height untouched, so the card never jumps. */
@media (max-width: 720px) {
  .take-composer.live .take-in.tour-typing { letter-spacing: -0.15px; }
  .take-composer.live:has(.take-in.tour-typing) .send { position: absolute; right: 4px; opacity: 0; pointer-events: none; }
}
.take-composer.live .send:hover .send-disc { border-color: var(--gold); }

/* lock glyph in manager overlay */
.mgr-locked { display: inline-flex; align-items: center; gap: 6px; }
.mgr-locked svg { width: 13px; height: 13px; flex: none; }
.escrow-note .lock svg { width: 14px; height: 14px; display: block; }
.rv-repeat svg { width: 16px; height: 16px; }

/* creator: banked vs on-the-table */
.cpf-gap {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-muted); z-index: 1;
}
.cp-potential {
  border: 1.5px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--r-block); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cpp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cpp-n { font-size: 13px; color: var(--ink-muted); }
.cpp-n b { font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.cpp-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.cpp-bar i { display: block; height: 100%; background: var(--gold); border-radius: 5px; transition: width 0.6s ease; }
.cpp-line { font-size: 13px; color: var(--ink-muted); }
.cpp-line b { color: var(--gold); font-family: var(--font-display); }

/* offer feed (all offers view + offers-on-item modal) */
.offer-feed { display: flex; flex-direction: column; gap: 8px; }
.offer-feed.page { max-width: 760px; }
.of-row {
  display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--card); border: 1.5px solid var(--hairline-card);
  border-radius: var(--r-block); padding: 11px 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.of-row:not(.dead):hover, .of-row.soft:hover { border-color: var(--accent); transform: translateX(2px); }
.of-row.dead { opacity: 0.55; cursor: default; }
.of-row.dead.soft { opacity: 0.7; cursor: pointer; }
/* The row's own controls (Blake 2026-09-02). The row is a div with the
   thread-opening body as its own button, because a button cannot hold
   buttons. Accept on top, Counter and Decline beneath: the thread's own
   arrangement at row scale. On phones the cluster takes the next line. */
.of-body { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.of-row.dead .of-body { cursor: default; }
.of-actions.offer-actions { flex: none; max-width: none; gap: 4px; margin-left: 4px; }
.of-actions .accept-btn { height: 32px; font-size: 11px; padding: 0 14px; }
.of-actions .oa-row { gap: 4px; }
.of-actions .btn-inbox, .of-actions .decline-btn { height: 30px; font-size: 11px; padding: 0 10px; }
.of-thumb { width: 44px; height: 44px; border-radius: var(--r-chip); object-fit: cover; flex: none; }
.of-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.of-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.of-top b { font-family: var(--font-display); font-size: 13.5px; }
.of-with { color: var(--ink-muted); font-size: 12px; }
.of-when { color: var(--ink-muted); font-size: 11px; margin-left: auto; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.of-sum { color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-sum i { font-style: normal; opacity: 0.6; }

/* exchange flip cards */
.ex-imgwrap { perspective: 900px; }
.flip-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.ex-card:not(:disabled):hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { position: absolute; inset: 0; backface-visibility: hidden; }
.flip-front img { width: 100%; height: 100%; object-fit: cover; }
.flip-back {
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--ink) 4%, var(--card));
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; overflow: hidden;
}
.fb-cond { font-family: var(--font-label); font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; color: var(--gold); }
.fb-desc {
  flex: 1; color: var(--ink-muted); font-size: 11px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-val { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink); }

/* checkout */
.checkout { padding-top: 30px; padding-bottom: 90px; }
.co-sub { color: var(--ink-muted); margin: 6px 0 20px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.co-main, .co-side { display: flex; flex-direction: column; gap: 14px; }
.co-side { position: sticky; top: 140px; }
.co-card {
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.co-eyebrow { color: var(--ink-muted); }
.co-deposit {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--r-block); padding: 11px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.co-deposit b { font-family: var(--font-display); font-size: 14.5px; }
.co-deposit span { color: var(--ink-muted); font-size: 12.5px; }
.co-total span:last-child { color: var(--gold-text); font-size: 17px; }
.co-note {
  border-radius: var(--r-block); padding: 12px 14px; font-size: 13px; line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start;
}
.co-note.info { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.co-note.lock { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); }
.co-note.lock svg { width: 16px; height: 16px; flex: none; color: var(--success); margin-top: 2px; }
.co-addr { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.co-addr b { font-family: var(--font-display); }
.co-addr span { color: var(--ink-muted); }
.co-pay { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.co-brand { background: var(--ink); color: var(--canvas); border-radius: 4px; padding: 3px 7px; font-size: 11px; letter-spacing: 0.06em; }
.co-exp { color: var(--ink-muted); font-size: 12.5px; font-weight: 500; }
.co-change { align-self: flex-start; color: var(--accent); font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 0; }
.co-cta { width: 100%; }
.co-fine { color: var(--ink-muted); font-size: 12.5px; text-align: center; }

/* account */
.account { padding-top: 28px; padding-bottom: 90px; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 18px; }
.acct-sec { gap: 14px; }
.acct-sec:nth-child(2) { grid-row: span 2; }
.acct-sec .wz-label input { height: 46px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block); background: var(--card); color: var(--ink); padding: 0 13px; font-size: 15px; font-family: var(--font-body); outline: none; }
.acct-sec .wz-label input:focus { border-color: var(--accent); }

/* want modal: keep the save CTA on screen */
.modal.want-modal { max-height: 90dvh; display: flex; flex-direction: column; }
.want-modal .want-scroll { flex: 1; min-height: 0; max-height: none; }
.want-modal .btn-offer { flex: none; margin-top: 12px; }

@media (max-width: 1024px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-side { position: static; }
  .acct-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ROUND-8 ADDITIONS
   Creator program · reputation dash · want builder · insights ·
   activity drawer · wizard v2 · exchange polish
   ============================================================ */

/* --- share on the image (hover, top-right) --- */
.img-share {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s;
}
.img-share svg { width: 15px; height: 15px; }
.lcard:hover .img-share, .lcard:focus-within .img-share, .gallery-main:hover .img-share { opacity: 1; transform: translateY(0); }
@media (hover: hover) { .img-share:hover { color: var(--accent); } }
.img-share.big { width: 42px; height: 42px; opacity: 0; }
.img-share.big svg { width: 18px; height: 18px; }
/* A phone has no hover, so the tag above only ever showed on the card last
   touched (Blake, 2026-09-21). Where nothing can hover it is always shown; after
   .img-share.big so that rule's opacity 0 cannot outrank this one. */
@media (hover: none) { .lcard .img-share, .gallery-main .img-share { opacity: 1; transform: none; } }
.gallery-main { position: relative; }
.ov-bottom { flex-wrap: wrap; }

/* --- card CTA: own listing → insights --- */
.card-offer.insights { background: none; border: 1.5px solid var(--accent); color: var(--accent); }
.card-offer.insights:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); filter: none; }

/* --- ⋯ owner menu --- */
.pm-div { height: 1px; background: var(--hairline-card); margin: 5px 4px; }
.own-panel {
  border: 1.5px dashed color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: var(--r-card); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.own-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- insights modal --- */
.ins-modal { width: min(560px, 94vw); text-align: left; padding: 22px; }
.ins-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.ins-head img { width: 52px; height: 52px; border-radius: var(--r-chip); object-fit: cover; }
.ins-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ins-who b { font-family: var(--font-display); font-size: 16px; }
.ins-who span { color: var(--ink-muted); font-size: 12.5px; }
.ins-spark {
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 14px; margin-bottom: 12px;
}
.ins-spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ins-spark-head .microlabel { color: var(--ink-muted); }
.ins-spark-head b { font-family: var(--font-display); font-size: 22px; }
.ins-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.ins-bars i {
  flex: 1; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--accent) 75%, transparent);
  animation: bar-rise 0.5s ease both;
  transform-origin: bottom;
}
.ins-bars i:last-child { background: var(--gold); }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ins-grid { grid-template-columns: repeat(4, 1fr); }
.ins-actions { display: flex; gap: 10px; margin-top: 14px; }
.ins-actions .btn-inbox { flex: 1; justify-content: center; }

/* --- activity drawer --- */
.drawer-back {
  position: fixed; inset: 0; z-index: 88;
  background: rgba(7, 10, 18, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-back.open { opacity: 1; pointer-events: auto; }
/* Closed, the drawer is parked 2 % past the right edge and is NOT painted: visibility
   hidden, switched on at the start of the slide-in and off only after the slide-out
   (the sticky offer bar's own tuck shape, below). Painted while parked, its day shadow
   (36 px of navy blur) reached about 28 px back onto every page as a faint gray band
   down the right edge, measured 5.6 to 6.1 levels darker at 1280 and 375 wide; and
   its close button and rows sat in the tab order, invisible. Card 1219184341019440. */
.activity-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 89;
  width: min(380px, 92vw);
  background: var(--card); border-left: 1px solid var(--hairline-card);
  box-shadow: var(--shadow-hover);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), visibility 0s linear 0.32s;
  display: flex; flex-direction: column;
}
.activity-drawer.open { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.3, 0.9, 0.3, 1), visibility 0s; }
.ad-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px; border-bottom: 1px solid var(--hairline-card);
}
.ad-head .microlabel { color: var(--ink-muted); font-size: 13px; }
.ad-close { color: var(--ink-muted); font-size: 15px; padding: 6px 10px; border-radius: var(--r-chip); }
.ad-close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ad-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ad-row {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 11px 10px; border-radius: var(--r-block);
  transition: background 0.15s;
}
.ad-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ad-row img { width: 44px; height: 44px; border-radius: var(--r-chip); object-fit: cover; flex: none; }
.ad-dot { width: 44px; height: 44px; border-radius: var(--r-chip); flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.ad-dot svg { width: 18px; height: 18px; color: var(--gold); }
.ad-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ad-meta b { font-family: var(--font-display); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-meta span { color: var(--ink-muted); font-size: 12.5px; }
.ad-meta .wt { font-size: 11px; }
.ad-chev { color: var(--ink-muted); }
/* ── lane B (2026-10-17, card 1219300833363291): the Activity row's 44px slot holds the person's picture when the row has no listing picture ── */
.ad-row .ad-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.ad-row .ad-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* ── lane B (2026-10-17, card 1219063265423680): a number on the bell, unread rows, Mark all as read ── */
.icon-btn .bell-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 2px var(--canvas); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 1; }
.ad-row.unread { background: color-mix(in srgb, var(--accent) 4%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.ad-row.unread:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ad-head-actions { display: flex; align-items: center; gap: 2px; }
.ad-readall { font-family: var(--font-label); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); padding: 6px 8px; border-radius: var(--r-chip); white-space: nowrap; }
.ad-readall:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* --- founders creator dashboard --- */
.cp-hero {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--gold) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--r-card); padding: 18px 20px;
}
.cp-hero-left { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 240px; }
.cp-eyebrow { color: var(--gold); }
.cp-line { font-family: var(--font-display); font-weight: 600; font-size: 17px; max-width: 34ch; }
.cp-hero-right { display: flex; gap: 22px; }
.cp-earn { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.cp-earn b { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold); }
.cp-earn .microlabel { color: var(--ink-muted); font-size: 9.5px; }
.cp-funnel {
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--card); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.cp-sec-lab { color: var(--ink-muted); }
.cpf-row { display: grid; grid-template-columns: 210px 1fr 76px; gap: 14px; align-items: center; }
.cpf-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cpf-meta b { font-family: var(--font-display); font-size: 14px; }
.cpf-meta span { color: var(--ink-muted); font-size: 11.5px; }
.cpf-bar { position: relative; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; }
.cpf-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--gold) 80%, transparent); border-radius: 6px; transition: width 0.6s ease; }
.cpf-count { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--gold-ink); z-index: 1; }
:scope[data-mode="night"] .cpf-count { color: #07050F; }
.cpf-pay { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--gold); text-align: right; }
.cpf-each { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10.5px; color: var(--ink-muted); }
.cpf-total { border-top: 1px dashed var(--hairline-card); padding-top: 10px; font-size: 13px; color: var(--ink-muted); }
.cpf-total b { color: var(--gold); font-family: var(--font-display); }
.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-band, .cp-payout {
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--card); padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.cp-mult { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--gold); letter-spacing: -0.02em; }
.cp-band-note { font-size: 13px; color: var(--ink-muted); }
.cp-band-note b { color: var(--ink); }

/* --- reputation dashboard (public profile) --- */
.rep-dash {
  border: 1px solid var(--hairline-card); border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow);
  padding: 18px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px 24px;
  align-items: center;
}
.rep-tier { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rep-gem {
  width: 54px; height: 54px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-size: 26px;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--tier) 45%, transparent);
}
.rep-tier-meta { display: flex; flex-direction: column; gap: 2px; }
.rep-tier-meta b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; }
.rep-tier-meta .microlabel { color: var(--ink-muted); }
.rep-progress { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; }
.rep-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.rep-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.rep-pts { color: var(--ink-muted); font-size: 12px; }
.rep-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline-card); border-radius: var(--r-block); overflow: hidden; border: 1px solid var(--hairline-card); }
.rep-cell { background: var(--card); padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.rep-cell b { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.rep-cell .microlabel { color: var(--ink-muted); font-size: 9.5px; }
.rep-badges { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-pill);
  padding: 7px 13px;
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
}
.badge-chip svg { width: 14px; height: 14px; color: var(--gold); }
.badge-chip.pinned { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--ink); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.stats-row.stats-7 { grid-template-columns: repeat(7, 1fr); }

/* --- prominent exchange banner (public collection) --- */
.exch-banner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 16px 20px;
  background: color-mix(in srgb, var(--gold) 6%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--r-card);
}
.exch-banner-copy { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.btn-exchange.big {
  height: 52px; padding: 0 26px; margin-left: 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px;
  box-shadow: var(--shadow);
}
.btn-exchange.big svg { width: 18px; height: 18px; }
.btn-exchange svg { width: 15px; height: 15px; }
.cc-exch { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cc-exch svg { width: 14px; height: 14px; }
.exch-banner-sub { color: var(--ink-muted); font-size: 12.5px; flex-basis: 100%; }
.exch-glyph svg, .ex-swap-badge svg { width: 22px; height: 22px; }
.ex-swap-badge svg { width: 24px; height: 24px; }

/* --- rich offer history --- */
.hist-detail.rich { display: block; padding: 12px; }
.hist-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hist-side { display: flex; flex-direction: column; gap: 6px; }
.hist-side .lg-row { cursor: default; }
.hist-side .lg-row[data-golisting] { cursor: pointer; }

/* --- scan: the cover-photo button and the one question (Blake 2026-09-12;
   the gold button 2026-09-13) ---
   Gold is the site's CTA color and is held for exactly that; this is the
   step's primary action, so it earns it: NEXT's fill, NEXT's label type, and
   the always-on sheen the Price Check button carries (pcsheen, further down).
   Tokens throughout — the night palette redefines --gold, and a literal here
   would read as day gold on a purple-black ground. */
.wz-scan-card {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-block);
  border: 0;
  background: var(--gold);
  color: var(--gold-ink);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.2s;
}
.wz-scan-card:hover { box-shadow: var(--shadow-hover); }
.wz-scan-card:active { transform: translateY(1px) scale(0.99); }
.wz-scan-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: pcsheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
.wz-scan-t { display: block; font-family: var(--font-label); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.wz-scan-s { display: block; margin-top: 2px; font-size: 14px; color: color-mix(in srgb, var(--gold-ink) 80%, var(--gold)); }
@media (prefers-reduced-motion: reduce) { .wz-scan-card::after { animation: none; } }

/* --- scan sweep: the cover thumb while a scan runs (Blake 2026-09-13) ---
   The markup is on Tyler's card: while the scan runs, the cover <img> sits in
     <span class="wz-scan-frame"><img/><span class="wz-scan-line"></span>
       <span class="wz-scan-corner tl"></span> ...and tr, bl, br</span>
   The frame clips, not .wz-thumb: the remove button hangs outside the thumb. */
.wz-scan-frame { position: relative; display: block; width: 96px; height: 96px; border-radius: var(--r-block); overflow: hidden; }
.wz-scan-frame img { display: block; }
.wz-scan-line {
  position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 60%, transparent);
  animation: wz-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}
/* The second photo the scan reads sweeps half a beat behind the cover (Blake, 2026-09-15). */
.wz-scan-frame.support .wz-scan-line { animation-delay: -0.8s; }
@keyframes wz-sweep { from { transform: translateY(0); } to { transform: translateY(100px); } }
.wz-scan-corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--gold); pointer-events: none; }
.wz-scan-corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.wz-scan-corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; border-top-right-radius: 3px; }
.wz-scan-corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; border-bottom-left-radius: 3px; }
.wz-scan-corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; border-bottom-right-radius: 3px; }
/* The line is the motion; the corners alone still say "scanning". */
@media (prefers-reduced-motion: reduce) { .wz-scan-line { display: none; } }

/* 430 / 18 / 30 are Blake's numbers off the board, not defaults. */
.scanask-modal { width: min(430px, 94vw); border-radius: 18px; padding: 30px; text-align: left; }
.scanask-chips { margin-top: 14px; }
.scanask-go {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  /* #fff, not a token: the site has no --accent-ink, and every other filled
     accent surface here hardcodes white the same way. Both colourways take it
     — day cobalt #1B6FD0, night violet #9B6FD8. */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
/* Disabled until a chip is chosen — the scan cannot run without an answer, so
   offering the button before there is one would promise a thing it cannot do. */
.scanask-go:disabled { opacity: 0.45; cursor: not-allowed; }
.scanask-not {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
}
.scanask-not:hover { color: var(--ink); }

/* --- the scan's live progress banner ---
   Replaces the gold "Scan your cover photo" card while a scan owns the cover,
   rather than sitting beside it. That XOR is not cosmetic: it is what makes a
   second billed scan unstartable while one is in flight, enforced by there
   being no button to press rather than by a flag someone can forget to check. */
.wz-scan-live {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline-card);
  background: var(--card);
}
.wz-scan-live.run { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.wz-scan-live.unresolved { border-color: var(--gold); }
/* Done stays gold, not green: status green is for chips and dots only. */
.wz-scan-live.done { border-color: var(--gold); }
.wz-scan-live.failed { border-color: var(--destructive); }

.wzscan-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.wzscan-seg { flex: 1; }
.wzscan-seg i { display: block; height: 4px; border-radius: 999px; background: var(--hairline); }
.wzscan-seg.done i { background: var(--gold); }
.wzscan-seg.on i { background: var(--gold); animation: wzscan-pulse 1.1s ease-in-out infinite; }
.wzscan-seg span { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-muted); }
.wzscan-seg.done span, .wzscan-seg.on span { color: var(--ink); }
@keyframes wzscan-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* The pulse is the only thing saying "still going", so it stops rather than
   freezing mid-fade — a segment stuck at 40% opacity reads as broken. */
@media (prefers-reduced-motion: reduce) { .wzscan-seg.on i { animation: none; } }

.wzscan-t { font-weight: 700; color: var(--ink); }
.wzscan-s { margin-top: 2px; font-size: 14px; color: var(--ink-muted); }
.wzscan-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wzscan-go {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff; /* no --accent-ink exists; same hardcode as .scanask-go */
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.wzscan-x {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
}
.wzscan-x:hover { color: var(--ink); }

/* --- scan-filled fields awaiting confirmation ---
   The amber is the whole signal: a pending value is ON SCREEN but NOT LIVE, so
   it must not look like an ordinary filled field. --gold is the token this site
   already uses for "the machine did this" (the scan card, the price check), and
   reusing it keeps one visual vocabulary rather than inventing a second. */
.wz-scanhdr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.wz-scanhdr-t { flex: 1 1 100%; font-weight: 700; color: var(--ink); }
.wz-scanhdr-s { flex: 1 1 auto; font-size: 14px; color: var(--ink-muted); }
.wz-scanhdr-x {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.wz-scanhdr-x:hover { color: var(--ink); }

/* The plain caption for a scan that looked and could not tell. Deliberately
   NOT an error style — nothing went wrong, the photo just did not say. */
.wz-scanread {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--ink-muted);
}

/* No ring on a pending field (Blake 2026-09-13): the Confirm / Clear row
   under it is the mark. */

.wz-pend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin: -4px 0 12px;
  font-size: 13px;
  color: var(--ink-muted);
}
.wz-pend-acts { display: flex; align-items: center; gap: 8px; }
/* Confirm is the small gold button; Clear is its outlined twin. Confirm
   nudges 2 px for 0.4 s every 5 s so a pending row catches the eye without a
   ring on the field (Blake 2026-09-13). */
.wz-pend-ok {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-chip);
  background: var(--gold);
  color: var(--gold-ink);
  font-family: var(--font-label); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  animation: wz-nudge 5s ease-in-out infinite;
}
@keyframes wz-nudge {
  0%, 92%, 100% { transform: translateX(0); }
  94% { transform: translateX(-2px); }
  96% { transform: translateX(2px); }
  98% { transform: translateX(-1px); }
}
.wz-pend-x {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--hairline-card);
  border-radius: var(--r-chip);
  background: none;
  color: var(--ink-muted);
  font-family: var(--font-label); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.wz-pend-x:hover { color: var(--ink); border-color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .wz-pend-ok { animation: none; } }

/* --- want builder modal --- */
.want-modal { width: min(560px, 94vw); text-align: left; padding: 22px; }
.want-scroll { max-height: min(520px, 62dvh); gap: 14px; }
.want-err {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--destructive) 40%, transparent);
  color: var(--destructive);
  border-radius: var(--r-chip); padding: 9px 12px; font-size: 13px;
}
.want-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; }
.want-tog-lab { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.want-toggle-row .wz-hint { display: block; margin-top: 1px; }
.want-switch {
  width: 46px; height: 27px; border-radius: var(--r-pill); flex: none;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  position: relative; transition: background 0.2s;
}
.want-switch i {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
  transition: transform 0.22s cubic-bezier(0.3, 0.9, 0.3, 1.2);
}
.want-switch.on { background: var(--accent); }
.want-switch.on i { transform: translateX(19px); }
.want-switch.big { width: 54px; height: 31px; }
.want-switch.big i { width: 25px; height: 25px; }
.want-switch.big.on i { transform: translateX(23px); }

/* --- wizard v2 --- */
.wz-err { color: var(--destructive); font-size: 12.5px; }
.wz-err.soft { color: var(--ink-muted); }
.wz-photo-controls { display: flex; gap: 10px; align-items: center; }
.photo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; cursor: pointer;
  border: 1.5px solid var(--accent); color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s;
}
.photo-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.photo-btn svg { width: 16px; height: 16px; }
.photo-count { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--ink-muted); }
.wz-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.wz-thumb { position: relative; width: 96px; }
.wz-thumb img { width: 96px; height: 96px; border-radius: var(--r-block); object-fit: cover; }
.cover-badge {
  position: absolute; left: 6px; bottom: 6px;
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-chip); padding: 2px 7px;
  font-family: var(--font-label); font-weight: 700; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
}
.thumb-x {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--canvas); font-size: 10px;
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.wz-select {
  height: 48px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--card); color: var(--ink);
  padding: 0 12px; font-size: 15px; font-family: var(--font-body); outline: none;
  max-width: 240px;
}
.wz-select.sm { max-width: 110px; height: 44px; }
.weight-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.avail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-card);
  padding: 16px 18px;
}
.avail-copy b { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; display: block; }
.avail-copy span { color: var(--ink-muted); font-size: 13px; line-height: 1.5; display: block; margin-top: 3px; max-width: 52ch; }
.preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.preset-btn {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 10px 10px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.preset-btn b { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.preset-btn span { color: var(--ink-muted); font-size: 11px; }
.preset-btn.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dims-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.dims-row label { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-label); font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.dims-row input {
  height: 44px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--card); color: var(--ink);
  padding: 0 12px; font-size: 15px; outline: none; width: 100%;
}
.dims-row input:focus { border-color: var(--accent); }
.clear-dims { align-self: flex-start; color: var(--ink-muted); font-size: 12.5px; padding: 4px 0; }
.clear-dims:hover { color: var(--destructive); }
.handle-input { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block); padding: 0 12px; height: 48px; }
.handle-input .at { color: var(--ink-muted); font-weight: 700; }
.handle-input input { flex: 1; border: none; outline: none; background: none; color: var(--ink); font-size: 16px; }
.edit-av-row .quick-chip { display: inline-flex; align-items: center; gap: 6px; }
.edit-av-row .quick-chip svg { width: 13px; height: 13px; }

/* --- exchange: offer-sealed animation --- */
.ex-fly-stage { position: relative; width: min(420px, 88vw); height: 120px; display: flex; align-items: center; justify-content: center; }
.fly-lane { position: absolute; top: 50%; display: flex; gap: 8px; }
.fly-lane.left { left: 0; transform: translateY(-50%); }
.fly-lane.right { right: 0; transform: translateY(-50%); flex-direction: row-reverse; }
.fly { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 2px solid var(--canvas); box-shadow: var(--shadow-hover); opacity: 0; }
.fly.to-right { animation: fly-right 0.7s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
.fly.to-left { animation: fly-left 0.7s cubic-bezier(0.4, 0, 0.3, 1) forwards; }
@keyframes fly-right { 0% { opacity: 0; transform: translateX(0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(150px) scale(0.4); } }
@keyframes fly-left { 0% { opacity: 0; transform: translateX(0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(-150px) scale(0.4); } }
.ex-seal {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink);
  display: grid; place-items: center;
  border: 3px solid var(--canvas); box-shadow: var(--shadow-hover);
  animation: seal-pop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 0.45s both;
}
.ex-seal svg { width: 36px; height: 36px; }
@keyframes seal-pop { 0% { transform: scale(0.4) rotate(-120deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.spark {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  animation: spark-out 0.7s ease-out forwards;
}
@keyframes spark-out {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(120px) scale(0.3); }
}
.ex-success h2 { animation: fade-in 0.4s ease 0.7s both; }
.ex-success p { animation: fade-in 0.4s ease 0.85s both; }

/* --- round-8 responsive --- */
@media (max-width: 1024px) {
  .rep-dash { grid-template-columns: 1fr; }
  .cp-cols { grid-template-columns: 1fr; }
  .cpf-row { grid-template-columns: 1fr 76px; }
  .cpf-row .cpf-bar { grid-column: 1; }
  .stats-row.stats-7 { grid-template-columns: repeat(4, 1fr); }
  .ins-grid { grid-template-columns: repeat(2, 1fr); }
  .preset-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stats-row.stats-7 { grid-template-columns: repeat(2, 1fr); }
  .cp-hero-right { width: 100%; justify-content: space-between; }
  .cp-earn { text-align: left; }
  .exch-banner { padding: 14px; }
  .hist-sides { grid-template-columns: 1fr; }
  .dims-row { grid-template-columns: 1fr; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* dropped: `html { scroll-behavior: auto; }` — scroll-behavior is a document-scroll concern; :scope on the wrapper div would do nothing (see scope-web-demo-css.mjs) */
}

/* ============ ROUND-6 ADDITIONS ============ */

/* photo avatars */
.avatar-img { overflow: hidden; padding: 0; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 26px; height: 26px; font-size: 10px; }
[data-gouser] { cursor: pointer; }
.uname:hover, .vd-handle:hover, b[data-gouser]:hover { color: var(--accent); }

/* post menu (app PostMenu pattern) */
.pm-wrap { position: relative; margin-left: 4px; }
.pm-wrap.ct { position: absolute; top: 8px; right: 8px; margin: 0; }
.pm-trigger {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink-muted);
}
.pm-trigger.big { width: 40px; height: 40px; border: 1px solid var(--hairline-card); }
@media (hover: hover) { .pm-trigger:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } }
.pm-trigger svg { width: 17px; height: 17px; }
.pm-wrap.ct .pm-trigger { background: var(--card); box-shadow: var(--shadow); }
.post-menu {
  position: absolute; right: 0; top: 32px; z-index: 40;
  min-width: 210px;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); box-shadow: var(--shadow-hover);
  display: none; flex-direction: column; padding: 6px;
}
.post-menu.open { display: flex; }
.pm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-chip);
  font-size: 13.5px; color: var(--ink); text-align: left;
}
.pm-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pm-item svg { width: 15px; height: 15px; color: var(--ink-muted); }
.share-sm { width: 38px; height: 38px; }
.share-sm svg { width: 15px; height: 15px; }
.d-titlerow { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }

/* comments modal (IG-web style) */
.cm-back {
  position: fixed; inset: 0; z-index: 92;
  background: rgba(7, 10, 18, 0.7);
  display: none; place-items: center;
}
.cm-back.open { display: grid; }
.cm-modal {
  position: relative;
  width: min(1020px, 94vw); height: min(640px, 88dvh);
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow-hover);
  display: grid; grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
}
.cm-close {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.cm-image { background: #0A0A12; cursor: pointer; }
.cm-image img { width: 100%; height: 100%; object-fit: contain; }
.cm-side { display: flex; flex-direction: column; min-width: 0; }
.cm-head { display: flex; gap: 10px; align-items: center; padding: 14px 52px 14px 16px; border-bottom: 1px solid var(--hairline-card); }
.cm-head .who { min-width: 0; flex: 1; }
.cm-head .h { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.cm-head .l { color: var(--ink-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-view { color: var(--accent); font-family: var(--font-label); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; flex: none; }
.cm-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
/* the pop-up's empty state, the app sheet's line (Blake 2026-09-10) */
.cm-empty { margin: auto 0; padding: 28px 16px; text-align: center; color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
.cm-row { display: flex; gap: 10px; align-items: flex-start; }
.cm-body { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.cm-body b { font-family: var(--font-display); }
.cm-meta { color: var(--ink-muted); font-size: 11.5px; margin-top: 3px; }
.cm-meta .cm-reply { color: var(--ink-muted); font-weight: 600; }
.cm-like { color: var(--ink-muted); padding: 2px; }
.cm-like svg { width: 13px; height: 13px; }
@media (hover: hover) { .cm-like:hover { color: var(--destructive); } }
.cm-like.on { color: var(--destructive); }
.cm-like.on svg { fill: currentColor; }
.cm-composer { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hairline-card); }
.cm-composer input {
  flex: 1; height: 42px;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--ink);
  padding: 0 16px; font-size: 16px; outline: none;
}
.cm-composer input:focus { border-color: var(--accent); }
.cm-send { color: var(--accent); font-family: var(--font-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; padding: 0 6px; }
.view-all { text-align: left; }

/* dashboard */
.range-chips { margin-left: auto; display: inline-flex; gap: 5px; }
.range-chip {
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 6px 11px; color: var(--ink-muted);
  font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
}
@media (hover: hover) { .range-chip:hover { border-color: var(--accent); color: var(--accent); } }
.range-chip.on { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.dash-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-block);
  overflow: hidden;
}
.dash-tile { background: var(--card); padding: 18px 14px; }
.dash-tile .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 28px); }
.dash-tile .l { margin-top: 3px; color: var(--ink-muted); font-size: 10.5px; }
.most-viewed {
  margin-top: 14px; width: 100%;
  display: flex; gap: 14px; align-items: center; text-align: left;
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-block); padding: 12px;
  transition: border-color 0.15s;
}
.most-viewed:hover { border-color: var(--accent); }
.most-viewed img { width: 64px; height: 64px; border-radius: var(--r-chip); object-fit: cover; }
.most-viewed .mv-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.most-viewed b { font-family: var(--font-display); }
.most-viewed .go { color: var(--ink-muted); font-size: 20px; }

/* PROFILE PHOTO POP-OUT (Blake 2026-08-31). Rides .modal-back, the same
   backdrop every other sheet on the floor uses, so the dimmed page, the
   fade-in and the click-out all behave the way they already do everywhere
   else and nothing new had to be invented for them.
   The frame is sized off the VIEWPORT, never the file: a 96px upload and a
   2000px one land in the same circle, and neither can push the ✕ off
   screen on a phone. Circle rather than square deliberately — the avatar is
   already object-fit:cover in a circle everywhere else, so this shows the
   same crop the person clicked, just bigger, instead of revealing corners
   they have never seen. */
.avzoom { position: relative; width: min(420px, 82vw, 82vh); aspect-ratio: 1; }
.avzoom img {
  width: 100%; height: 100%; display: block;
  border-radius: 50%; object-fit: cover;
  background: var(--card); box-shadow: var(--shadow-hover);
}
/* Parked ON the circle's rim at 45°, not in the bounding square's corner.
   The corner is r(√2−1) away from the edge — about 87px of empty dim at the
   420px size — which reads as a stray button rather than this photo's close.
   The percentages put the button's centre exactly on the rim at any size:
   r + r/√2 and r − r/√2 over a 2r box are 85.36% and 14.64%. */
.avzoom .cm-close { top: 14.64%; left: 85.36%; right: auto; transform: translate(-50%, -50%); }
/* profile bio + edit */
.ph-bio { margin-top: 8px; color: var(--ink); font-size: 14.5px; line-height: 1.55; max-width: 56ch; }
.edit-av-row { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.wz-label textarea, .modal textarea {
  width: 100%; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  background: none; color: var(--ink);
  padding: 10px 12px; font-family: var(--font-body); font-size: 16px;
  min-height: 70px; resize: vertical; outline: none; margin-top: 6px;
}
/* looking-for builder */
.lf-new { border: 1.5px dashed var(--accent); background: none; cursor: pointer; }
.lf-builder {
  margin-top: 14px; padding: 16px;
  border: 1.5px dashed var(--hairline-card); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 12px;
}
.lfb-cats, .lfb-subs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.lfb-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.lfb-fields input, .lfb-fields select, .lf-add input {
  height: 44px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
  padding: 0 16px; font-size: 16px; outline: none; flex: 1; min-width: 150px;
}
.lfb-fields input:focus, .lf-add input:focus { border-color: var(--accent); }
.lfb-preview { min-height: 30px; }
.lfb-actions { display: flex; gap: 10px; align-items: center; }
.lf-add { display: flex; gap: 10px; max-width: 480px; margin-top: 8px; }
/* A chip the seller can turn on and off (the Trade For step): off is outlined in the accent with the
   muted ink, on is the filled chip with an accent border. Opacity is gone: at 65% an unselected chip read
   2.4:1 by day and 2.7 by night (Blake, 2026-09-28: the unselected ones get an outline). */
.sel-chip { cursor: pointer; }
.sel-chip:not(.on) { background: transparent; color: var(--ink-muted); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sel-chip.on { border-color: var(--accent); }

/* collection */
.add-tile {
  border: 2px dashed var(--gold); border-radius: var(--r-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 260px; color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
  transition: background 0.2s, transform 0.15s;
}
.add-tile:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); transform: translateY(-2px); }
.add-tile .plus { font-size: 44px; font-weight: 700; font-family: var(--font-display); line-height: 1; }
.status-chip {
  position: absolute; top: 10px; left: 10px;
  border-radius: var(--r-chip); padding: 4px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em;
  background: var(--accent); color: #fff;
}
:scope[data-mode="night"] .status-chip { color: #07050F; }
.status-chip.st-pending { background: var(--gold); color: var(--gold-ink); }
.status-chip.st-traded { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.status-chip.st-sold { background: color-mix(in srgb, var(--ink) 75%, transparent); color: var(--canvas); }
.status-chip.st-in-collection { background: var(--card); color: var(--ink-muted); border: 1px solid var(--hairline-card); }
/* Night text on the TINTED chips (Blake 2026-09-06). The rule above that puts
   dark ink on every night chip is right for the filled ones (active, pending,
   sold). Under the live install's @scope it becomes :scope[data-mode="night"]
   .status-chip and gains a level of specificity, so it beat the traded and
   in-collection chips' own colors: TRADED went near-black on a dark violet
   tint (1.3:1) and IN COLLECTION near-black on the card (1.05:1). The demo's
   plain sheet ties the two and source order hid it. These outrank the
   override in both sheets. accent-deep on the tint measures 5.7:1, ink-muted
   on the card 8.6:1. */
:scope[data-mode="night"] .status-chip.st-traded { color: var(--accent-deep); }
:scope[data-mode="night"] .status-chip.st-in-collection { color: var(--ink-muted); }
/* ── lane D (card 1219177682942591): a listing in review on Your Collection ──
   The submitted sheet's chip (.pub-sheet-chip) carried onto the tile's photo:
   gold type on the collection chip's dark plate (.coll-chip), never a gold
   fill, which on this grid is the PENDING chip. The night rule is needed
   because the scoped sheet's night override above outranks the base chip. */
.status-chip.st-in-review { color: var(--gold); background: rgba(10, 8, 18, 0.86); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); backdrop-filter: blur(3px); }
:scope[data-mode="night"] .status-chip.st-in-review { color: var(--gold); }

/* wizard */
.wizard { padding-top: 36px; padding-bottom: 80px; max-width: 760px; }
.wz-steps { display: flex; gap: 4px; margin: 18px 0 24px; }
.wz-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.wz-step::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--hairline); }
.wz-step:first-child::before { display: none; }
.wz-dot {
  width: 28px; height: 28px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: var(--hairline); color: var(--ink-muted);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
}
.wz-step.on .wz-dot { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.wz-step.done .wz-dot { background: var(--accent); color: #fff; }
:scope[data-mode="night"] .wz-step.done .wz-dot { color: #07050F; }
.wz-slab { font-size: 10px; color: var(--ink-muted); }
.wz-step.on .wz-slab { color: var(--ink); }
.wz-body { display: flex; flex-direction: column; gap: 18px; min-height: 320px; }
.wz-hint { color: var(--ink-muted); font-size: 14px; }
.wz-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wz-photo { border-radius: var(--r-block); overflow: hidden; border: 2.5px solid transparent; padding: 0; }
.wz-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.wz-photo.sel { border-color: var(--gold); }
.wz-label { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.wz-label b { color: var(--gold-text); }
/* Hints and errors inside a label are body copy, not label type: Manrope,
   normal weight, no tracking, no caps (Blake 2026-09-13). */
.wz-label .wz-hint, .wz-label .wz-err { font-family: var(--font-body); font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.5; }
.wz-label input {
  height: 48px; border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--card); color: var(--ink);
  padding: 0 14px; font-size: 16px; font-family: var(--font-body); outline: none;
}
.wz-label input:focus { border-color: var(--accent); }
/* The show-password eye (card 1219063264613290): a sibling of the field's
   label (inside it, a button would join the field's name), placed over the
   field's right end: 44 x 44, inset 2 px inside the 48 px field, which keeps
   its text 50 px clear. Edge's own reveal button is hidden, so there is one. */
.auth-pwfield { position: relative; }
.auth-pwfield input { padding-right: 50px; }
.auth-pwfield input::-ms-reveal { display: none; }
.auth-eye { position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-muted); border-radius: var(--r-block); }
.auth-eye svg { width: 18px; height: 18px; }
.auth-eye:hover { color: var(--ink); }
.auth-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.wz-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.wz-chips.wz-scroll { max-height: 96px; overflow-y: auto; }
.wz-toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wz-toggle {
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 12px; display: flex; flex-direction: column; gap: 3px; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.wz-toggle small { font-family: var(--font-body); font-weight: 500; font-size: 11.5px; color: var(--ink-muted); }
.wz-toggle.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wz-review { display: flex; gap: 18px; align-items: flex-start; }
.wz-review img { width: 180px; border-radius: var(--r-block); aspect-ratio: 1; object-fit: cover; }
.wz-review-meta { display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; }
.wz-review-meta b { font-family: var(--font-display); font-size: 18px; }
/* The Review step's Trade for (card 1219082500646283): a full-width block under the photo + meta
   row, a defined section with a hairline on top and the listing page's microlabel heading (.d-lf .h),
   the entries as lf-chips TWO ACROSS on a grid at every width. Equal columns, so a long label wraps
   at its spaces inside its cell and the grid row keeps both cells the same height; a lone entry takes
   one cell, not the row. .wz-body spaces its children 18px apart; the -4px brings the hairline to
   14px under the row. */
.wz-review-tf { border-top: 1px solid var(--hairline); padding-top: 11px; margin-top: -4px; }
.wz-review-tf .h { margin-bottom: 8px; color: var(--ink-muted); }
.wz-review-tf-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wz-review-tf-chips .lf-chip { display: flex; justify-content: center; text-align: center; min-width: 0; line-height: 1.3; }
.wz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.wz-nav .cta-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* deals: give/get + ledger + fees + history */
.gg-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.gg-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gg-lab { color: var(--ink-muted); }
.gg-val { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.summary-toggle {
  align-self: flex-start;
  color: var(--accent); font-family: var(--font-label); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 0;
}
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ledger-side { display: flex; flex-direction: column; gap: 7px; }
.lg-row {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; color: var(--ink);
  border: 1px solid var(--hairline-card); border-radius: var(--r-chip);
  padding: 6px 9px;
}
.lg-row[data-golisting]:hover { border-color: var(--accent); cursor: pointer; }
.lg-row img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; }
.lg-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row b { font-family: var(--font-display); }
.lg-cash {
  width: 30px; height: 30px; border-radius: 4px; flex: none !important;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  display: grid; place-items: center;
  color: var(--gold-text); font-weight: 700;
}
.lg-row.subtotal { border-style: dashed; color: var(--ink-muted); }
.fee-block {
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--gold) 4%, transparent);
}
.true-cost { color: var(--ink-muted); font-size: 12px; padding-top: 4px; }
.cta-row { display: flex; justify-content: flex-end; }
.thread-cta {
  background: var(--gold); color: var(--gold-ink);
  border-radius: var(--r-pill);
  height: 42px; padding: 0 22px;
  font-family: var(--font-label); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: filter 0.15s, transform 0.12s;
}
.thread-cta:hover { filter: brightness(1.06); }
.offer-actions { display: flex; flex-direction: column; gap: 8px; }
.accept-btn { height: 48px; }
.oa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.decline-btn {
  border: 1.5px solid color-mix(in srgb, var(--destructive) 60%, transparent);
  color: var(--destructive);
  border-radius: var(--r-pill); height: 44px;
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
}
.decline-btn:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }
.history { padding: 12px 16px; border-bottom: 1px solid var(--hairline-card); }
.hist-row {
  width: 100%; display: flex; gap: 10px; align-items: center;
  padding: 8px 4px; text-align: left;
  opacity: 0.7;
}
.hist-row:hover { opacity: 1; }
.hist-text { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countered-chip {
  border: 1.5px solid var(--gold); color: var(--gold-text);
  border-radius: var(--r-chip); padding: 2px 8px;
  font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.1em;
}
.hist-chev { color: var(--ink-muted); }
.hist-detail {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; margin: 2px 0 8px;
  border: 1px dashed var(--hairline-card); border-radius: var(--r-chip);
  font-size: 13px; color: var(--ink-muted);
  opacity: 0.85;
}
.thread-view .vd-slot { max-width: 100%; }

/* responsive for round-6 */
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-modal { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; height: 92dvh; width: 96vw; }
  .cm-image img { object-fit: cover; }
  .wz-toggles { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .wz-photos { grid-template-columns: repeat(2, 1fr); }
  .gg-grid { grid-template-columns: 1fr; }
  .gg-grid .vd-swap { justify-self: center; }
  .range-chips { margin-left: 0; width: 100%; }
}

/* ============ ROUND-12 ADDITIONS — Wallet & Payments (#/wallet) ============ */

/* The wallet's two gold inks (#A87818, #8F7420; 3.5 to 4.5:1 on its tints) point at the one
   day ink since 2026-10-20 (Blake, card 1218653294313289); night keeps its own amber. */
:scope { --wal-amber: var(--gold-text); --wal-goldink: var(--gold-text); }
:scope[data-mode="night"] { --wal-amber: #E8B54A; --wal-goldink: #E8A820; }

.wallet { padding-top: 18px; padding-bottom: 64px; }

/* hero — gold is transaction chrome, and this is the transaction drawer */
.wal-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 78%, #000));
  color: var(--gold-ink); border-radius: var(--r-card); padding: 22px 24px;
  box-shadow: var(--shadow); margin-bottom: 18px;
}
.wal-eyebrow { color: var(--gold-ink); opacity: 0.75; }
.wal-count-row { display: flex; align-items: baseline; gap: 7px; }
.wal-count { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -0.5px; }
.wal-unit { font-family: var(--font-display); font-weight: 600; font-size: 17px; opacity: 0.8; }
.wal-perks { display: block; font-size: 13px; opacity: 0.85; margin-top: 2px; }
.wal-acc { display: block; font-size: 13px; opacity: 0.9; margin-top: 8px; }
.wal-acc b { font-family: var(--font-display); }
.wal-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.wal-pending {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--gold-ink) 14%, transparent); border-radius: var(--r-pill); padding: 5px 11px;
}
.wal-pending svg { width: 12px; height: 12px; }
.wal-avail { font-size: 13px; opacity: 0.95; }
.wal-avail b { font-family: var(--font-display); font-size: 21px; margin-right: 4px; }
.wal-avail.dim { opacity: 0.75; }
.wal-withdraw-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wal-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; transition: transform 0.15s, opacity 0.15s; border: 1.5px solid transparent;
}
.wal-btn:hover { transform: translateY(-1px); }
.wal-btn.solid { background: var(--gold-ink); color: var(--gold); }
.wal-btn.solid:disabled { opacity: 0.5; cursor: default; transform: none; }
.wal-btn.ghost { background: transparent; border-color: color-mix(in srgb, var(--gold-ink) 45%, transparent); color: var(--gold-ink); }

/* two-column dashboard */
.wal-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; align-items: start; }
.wal-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wal-sec { display: flex; flex-direction: column; gap: 10px; }
.wal-sec .sec-title { font-size: 16px; margin: 0; }
.wal-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wal-add { background: none; border: none; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer; }
.wal-add:hover { text-decoration: underline; }
.wal-note-r { font-size: 11px; color: var(--ink-muted); }

/* generic rows */
.wal-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block); background: var(--card);
}
.wal-ic {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.wal-ic svg { width: 15px; height: 15px; }
.wal-ic.gold { background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--wal-goldink); }
.wal-ic.amber { background: color-mix(in srgb, var(--wal-amber) 14%, transparent); color: var(--wal-amber); }
.wal-badge {
  font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: 0.6px;
  padding: 3px 8px; border-radius: var(--r-chip); border: 1px solid; flex: none;
}
.wal-badge.gold { color: var(--wal-goldink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.wal-badge.amber { color: var(--wal-amber); border-color: color-mix(in srgb, var(--wal-amber) 40%, transparent); background: color-mix(in srgb, var(--wal-amber) 9%, transparent); }
.wal-setdefault { background: none; border: none; font-size: 11px; color: var(--ink-muted); cursor: pointer; }
.wal-setdefault:hover { color: var(--ink); text-decoration: underline; }
.wal-amt { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.wal-amt.big { font-size: 18px; color: var(--wal-goldink); }
.wal-empty {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px;
  border: 1.5px dashed var(--hairline); border-radius: var(--r-block); background: var(--card); cursor: pointer; color: var(--ink-muted);
}
.wal-empty b { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.wal-empty span { font-size: 12px; }
.wal-empty svg { width: 24px; height: 24px; }
.wal-emptyline { font-size: 12px; color: var(--ink-muted); line-height: 1.5; }

/* payout account states */
.wal-connect {
  display: flex; align-items: center; gap: 11px; padding: 13px 12px; width: 100%; text-align: left;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block); background: var(--card);
}
.wal-connect.on { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.wal-connect.dashed { border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.wal-connect.dashed:hover { transform: translateY(-1px); border-color: var(--accent); }
.wal-connect.verifying { animation: wal-pulse 1.1s ease-in-out infinite; }
@keyframes wal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.wal-disconnect { background: none; border: none; align-self: flex-start; font-size: 12px; color: var(--ink-muted); text-decoration: underline; cursor: pointer; }

/* info strips + escrow cards */
.wal-info { display: flex; align-items: flex-start; gap: 8px; padding: 8px 11px; border-radius: 9px; font-size: 12px; line-height: 1.45; border: 1px solid; }
.wal-info svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.wal-info.accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.wal-info.amber { color: var(--wal-amber); background: color-mix(in srgb, var(--wal-amber) 8%, transparent); border-color: color-mix(in srgb, var(--wal-amber) 24%, transparent); }
.wal-esc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--hairline-card); border-radius: var(--r-block); background: var(--card); }
.wal-esc.past { opacity: 0.75; }
.wal-esc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wal-esc-top b { font-family: var(--font-display); font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wal-esc-mid { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wal-esc-date { font-size: 12px; color: var(--ink-muted); }
.wal-esc-note { font-size: 12px; color: var(--ink-muted); }
.wal-release {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--wal-goldink);
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 10px; cursor: pointer; transition: background 0.15s;
}
.wal-release:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }

/* points column */
.wal-pts-head { display: flex; align-items: baseline; gap: 9px; }
.wal-pts-head b { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; }
.wal-acc2 { font-size: 12px; color: var(--ink-muted); }
.wal-acc2 b { color: var(--ink); font-family: var(--font-display); }
.wal-tier { margin: 2px 0; }
.wal-priority { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 11%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.wal-priority svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--wal-goldink); }
.wal-priority .acc-meta b { font-size: 12px; color: var(--wal-goldink); }
.wal-priority .acc-meta span { font-size: 11px; }
.wal-streak { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border-radius: 10px; background: color-mix(in srgb, var(--wal-amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--wal-amber) 20%, transparent); }
.wal-streak svg { width: 16px; height: 16px; flex: none; color: var(--wal-amber); }
.wal-streak .acc-meta b { font-size: 13px; color: var(--wal-amber); }
.wal-streak .acc-meta span { font-size: 12px; }
.gold-text { color: var(--wal-goldink); }
.wal-boosts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wal-boost-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.boost-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.boost-chip svg { width: 12px; height: 12px; }
.wal-earn-lab { margin-top: 2px; }
.wal-earn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wal-earn-tile { display: flex; flex-direction: column; gap: 1px; padding: 10px 11px; border-radius: 10px; background: var(--band); }
.wal-earn-tile b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--wal-goldink); }
.wal-earn-tile span { font-size: 11px; color: var(--ink-muted); }
.wal-earnnote {
  display: flex; align-items: flex-start; gap: 7px; padding: 9px 11px; border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 7%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  font-size: 11px; line-height: 1.5; color: var(--wal-goldink);
}
.wal-earnnote svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }
.wal-stripe {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 2px auto 0;
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: var(--r-pill); font-size: 12px; color: var(--ink-muted);
}
.wal-stripe svg { width: 14px; height: 14px; }

/* modals */
.wal-modal-sub { font-size: 13px; color: var(--ink-muted); margin: 4px 0 10px; }
.wal-with-amt { font-family: var(--font-display); font-weight: 700; font-size: 36px; margin: 4px 0 10px; }
.wal-cardfield { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.wal-cardfield input {
  width: 100%; background: var(--band); border: 1.5px solid var(--hairline); border-radius: 10px;
  padding: 11px 12px; font-family: var(--font-body); font-size: 14px; color: var(--ink);
}
.wal-cardfield input:first-child { grid-column: 1 / -1; }
.wal-cardfield input:focus { outline: none; border-color: var(--accent); }

/* profile points cell → wallet */
.rep-cell-link { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.rep-cell-link:hover { border-color: var(--gold); transform: translateY(-1px); }

/* welcome boost banner */
.boost-banner {
  display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 2px; padding: 7px 13px;
  border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.boost-banner svg { width: 13px; height: 13px; }
.boost-banner b { font-weight: 700; }

@media (max-width: 1024px) {
  .wal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wal-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .wal-hero-right { align-items: flex-start; }
  .wal-withdraw-row { justify-content: flex-start; }
  .wal-count { font-size: 38px; }
}

/* ============ ROUND-12 ADDITIONS — Discover (#/discover) ============ */

.discover { padding-top: 18px; padding-bottom: 64px; }
.discover .hide { display: none !important; }

.disc-navlink { display: inline-flex; align-items: center; gap: 5px; color: var(--wal-goldink); font-weight: 600; }
.disc-navlink svg { width: 12px; height: 12px; }

.disc-bar {
  display: flex; align-items: center; gap: 11px; background: var(--card);
  border: 1.5px solid var(--hairline); border-radius: var(--r-pill); padding: 13px 18px;
  box-shadow: var(--shadow); transition: border-color 0.15s;
}
.disc-bar:focus-within { border-color: var(--accent); }
.disc-bar > svg, .disc-bar .search-ic { width: 18px; height: 18px; color: var(--ink-muted); flex: none; }
.disc-bar input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
.disc-bar input::placeholder { color: var(--ink-muted); }
.disc-clear { background: none; border: none; color: var(--ink-muted); font-size: 14px; cursor: pointer; padding: 4px; }
.disc-surprise {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--wal-goldink);
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--r-pill); padding: 8px 14px; transition: transform 0.15s, background 0.15s;
}
.disc-surprise:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--gold) 20%, transparent); }
.disc-surprise svg { width: 13px; height: 13px; }

.disc-try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.disc-slash { font-size: 12px; color: var(--ink-muted); margin-left: auto; }
.disc-slash kbd {
  font-family: var(--font-display); font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--hairline); background: var(--band); color: var(--ink);
}

.disc-facets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; }
.disc-fsep { width: 1px; height: 18px; background: var(--hairline); margin: 0 6px; }
.disc-catsel { width: auto; padding: 7px 10px; font-size: 13px; }
.disc-sechead { margin-top: 18px; }
.disc-approx { font-size: 13px; color: var(--ink-muted); margin: 2px 0 8px; }

.disc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.disc-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  transition: border-color 0.15s, transform 0.15s;
}
.disc-row:hover { border-color: var(--accent); transform: translateY(-1px); }
.disc-row > img { width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex: none; }
.disc-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.disc-row-meta b {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-row-meta > span { font-size: 12px; color: var(--ink-muted); }
.disc-row .xchips { flex: none; }
.disc-zero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 0 30px; text-align: center; }
.disc-zero svg { width: 30px; height: 30px; color: var(--ink-muted); }
.disc-zero b { font-family: var(--font-display); font-size: 16px; }
.disc-zero span { font-size: 13px; color: var(--ink-muted); }
.disc-zero .btn-signin { width: auto; margin-top: 6px; }

.disc-lf {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: var(--r-card); padding: 14px 16px; margin-top: 14px; margin-bottom: 4px; transition: transform 0.15s;
}
.disc-lf:hover { transform: translateY(-1px); }
.disc-lf .acc-meta b { font-size: 14px; }

.disc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.disc-tag {
  font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-pill); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform 0.15s, background 0.15s;
}
.disc-tag:hover { transform: translateY(-1px); }
.disc-tag.on { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.disc-tagbox { margin-top: 12px; }
.disc-tagbox.empty { padding: 16px; text-align: center; font-size: 13px; color: var(--ink-muted); border: 1px dashed var(--hairline); border-radius: var(--r-block); }
.disc-more {
  display: block; width: 100%; margin-top: 8px; padding: 10px; cursor: pointer; text-align: center;
  background: none; border: 1px dashed var(--hairline); border-radius: var(--r-block);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent);
}
.disc-more:hover { border-color: var(--accent); }

.disc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.disc-cattile {
  position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-block); overflow: hidden;
  border: none; padding: 0; cursor: pointer; background: var(--band);
}
.disc-cattile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.disc-cattile:hover img { transform: scale(1.05); }
.disc-cattile-ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 10px 12px; background: linear-gradient(180deg, transparent 40%, rgba(7, 5, 15, 0.78));
}
.disc-cattile-ov b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #FFF; }
.disc-cattile-ov span { font-size: 11px; color: rgba(255, 255, 255, 0.85); }

.disc-traders { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.disc-trader {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 148px;
  background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  padding: 16px 12px; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.disc-trader:hover { border-color: var(--gold); transform: translateY(-1px); }
.disc-trader b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); margin-top: 4px; }
.disc-trader-trades { font-size: 12px; color: var(--ink-muted); }
.disc-trader-tier { font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: 0.5px; }

.search-seeall {
  display: block; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--hairline-card);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent);
}
.search-seeall:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

@media (max-width: 720px) {
  .disc-surprise span { display: none; }
  .disc-row .xchips { display: none; }
  .disc-bar { padding: 11px 14px; }
}

/* ============ ROUND-12 ADDITIONS — detail multi-photo gallery ============ */
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.g-thumb {
  position: relative; width: 72px; height: 72px; flex: none; padding: 0; cursor: pointer;
  border: 2px solid var(--hairline-card); border-radius: 10px; overflow: hidden; background: var(--band);
  transition: border-color 0.15s, transform 0.15s;
}
.g-thumb:hover { transform: translateY(-1px); }
.g-thumb.on { border-color: var(--gold); }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-cover {
  position: absolute; left: 3px; bottom: 3px; font-family: var(--font-label); font-weight: 600;
  font-size: 8.5px; letter-spacing: 0.5px; color: var(--gold-ink); background: var(--gold);
  padding: 1px 5px; border-radius: 4px;
}
.g-swap { animation: gfade 0.25s ease; }
@keyframes gfade { from { opacity: 0.35; } to { opacity: 1; } }

/* ============ ROUND-12 ADDITIONS — auth flow (#/auth) ============ */

.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 16px 90px; background: var(--canvas); }
.auth-card {
  width: min(460px, 100%); background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 26px 26px 24px;
}
.auth-card.hero-card { text-align: center; padding: 40px 30px 28px; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.auth-brand .logo-img { height: 56px; }
.auth-h1 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.5px; margin: 0; }
.auth-h1 b { color: var(--gold-text); }
.auth-support { font-size: 15px; color: var(--ink-muted); margin: 6px 0 0; }
.auth-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.auth-oauth {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #FFF; color: #111; border: 1px solid #D9D4C8; border-radius: 10px; padding: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.15s;
}
.auth-oauth:hover { transform: translateY(-1px); }
.auth-oauth svg { width: 16px; height: 16px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.auth-divider i { flex: 1; height: 1px; background: var(--hairline); }
.auth-divider span { font-size: 12px; color: var(--ink-muted); }
.auth-primary {
  width: 100%; background: var(--gold); color: var(--gold-ink); border: none; border-radius: 10px;
  padding: 13px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.5px;
  cursor: pointer; transition: transform 0.15s, filter 0.15s;
}
.auth-primary:hover { transform: translateY(-1px); filter: brightness(1.04); }
.auth-primary:disabled { opacity: 0.45; cursor: default; transform: none; }
.auth-outline {
  width: 100%; background: transparent; color: var(--wal-goldink); border: 1.5px solid var(--gold);
  border-radius: 10px; padding: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.auth-outline:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.auth-guest { background: none; border: none; margin-top: 16px; font-size: 13.5px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.auth-legal { font-size: 11px; color: var(--ink-muted); margin: 18px 0 0; line-height: 1.5; }
.auth-legal a { color: var(--accent); text-decoration: underline; cursor: pointer; }

.auth-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.auth-back {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; background: var(--band);
  border: none; border-radius: 9px; color: var(--ink); font-size: 15px; cursor: pointer;
}
.auth-dots { flex: 1; display: flex; justify-content: center; gap: 7px; margin-right: 32px; }
.auth-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--band); border: 1px solid var(--hairline); }
.auth-dots i.on { background: var(--gold); border-color: var(--gold); }
.auth-h2 { font-family: var(--font-label); font-weight: 700; font-size: 26px; letter-spacing: 1px; margin: 0; }
.auth-sub { font-size: 14px; color: var(--ink-muted); margin: 3px 0 16px; }
.auth-body { display: flex; flex-direction: column; gap: 13px; }
.auth-dob { display: flex; gap: 8px; }
.auth-dob input { max-width: 64px; text-align: center; }
.auth-dob input:last-child { max-width: 90px; }
.auth-swap { font-size: 13px; color: var(--ink-muted); text-align: center; margin: 2px 0 0; }
.auth-swap a { color: var(--accent); font-weight: 600; cursor: pointer; }
.auth-path {
  display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  background: var(--card); border: 1.5px solid var(--hairline); border-radius: 12px; padding: 15px 14px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.auth-path:hover { transform: translateY(-1px); }
.auth-path.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.auth-path b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.auth-path span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.auth-termslink { font-size: 13px; color: var(--accent); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.auth-keep { display: flex; align-items: center; gap: 10px; }
.auth-keep .acc-meta { flex: unset; }
.auth-forgot { margin-left: auto; font-size: 12.5px; color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; flex-shrink: 0; }
/* "Forgot password?" on the Password label's line, right-aligned, beside the
   label rather than in it (so the field's name stays "Password"). In the Keep
   row it took 102 px of 289 at 375 and folded "Keep me signed in" onto two
   lines (Blake 2026-10-20). */
.auth-signpw { position: relative; }
.auth-signpw .auth-forgot { position: absolute; top: -2px; right: 0; }
/* register step 1: the server's password rules under the field, ticking live.
   Met = the gold text token (AA on both cards); not yet = muted ink. The
   field-level blur messages use the AA red text token. */
.auth-pwrules { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.auth-pwrules li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.4; }
.auth-pwrules li i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; box-sizing: border-box; position: relative; }
.auth-pwrules li.met { color: var(--gold-text); font-weight: 600; }
.auth-pwrules li.met i { background: var(--gold); border-color: var(--gold); }
.auth-pwrules li.met i::after { content: ""; position: absolute; left: 3px; top: 0.5px; width: 3px; height: 6px; border: solid var(--gold-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.auth-fielderr { margin: -6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--destructive-text); }
.auth-fielderr[hidden] { display: none; }
.auth-code { display: flex; gap: 8px; justify-content: center; }
.auth-code input {
  width: 46px; height: 56px; text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--ink); background: var(--band); border: 1.5px solid var(--hairline); border-radius: 10px;
}
.auth-code input:focus { outline: none; border-color: var(--accent); }
.auth-verified { text-align: center; padding: 24px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

@media (max-width: 480px) {
  .auth-code input { width: 40px; height: 50px; }
}

/* ============ ROUND-12 ADDITIONS — order tracking ============ */
.track-leg { border: 1px solid var(--hairline-card); border-radius: var(--r-block); padding: 13px 14px; margin-top: 10px; background: var(--card); }
.track-leg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.track-leg-head b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; min-width: 0; }
.track-qr { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--gold) 5%, transparent); }
.track-qr-code { color: var(--ink); flex: none; background: #FFF; border-radius: 8px; padding: 6px; display: grid; place-items: center; }
:scope[data-mode="night"] .track-qr-code { color: #14101E; }
.track-qr-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track-qr-meta b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }
.track-qr-meta span { font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.track-events { display: flex; flex-direction: column; }
.track-ev { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 5px 0 5px 18px; }
.track-ev i { position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--hairline); }
.track-ev:last-child i { background: var(--gold); }
.track-ev::before { content: ""; position: absolute; left: 7px; top: -6px; bottom: -6px; width: 1px; background: var(--hairline-card); }
.track-ev:first-child::before { top: 11px; }
.track-ev:last-child::before { bottom: auto; height: 17px; }
.track-ev-when { flex: none; width: 118px; font-size: 11.5px; color: var(--ink-muted); font-family: var(--font-display); }
.track-ev-what { font-size: 12.5px; line-height: 1.4; }
.track-confirm { width: 100%; margin-top: 8px; }
@media (max-width: 560px) {
  .track-ev { flex-direction: column; gap: 1px; }
  .track-ev-when { width: auto; }
  .track-qr { flex-direction: column; align-items: flex-start; }
}

/* ============ ROUND-12 ADDITIONS — chat-only threads ============ */
.chat-note {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  margin: 4px 14px 10px; padding: 12px 14px; border: 1px dashed var(--hairline);
  border-radius: var(--r-block); font-size: 12.5px; color: var(--ink-muted); line-height: 1.5;
}
.chat-note-link {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent); cursor: pointer;
}
.chat-note-link svg { width: 13px; height: 13px; }
.chat-note-link:hover { text-decoration: underline; }

/* ============ ROUND-12 ADDITIONS — dispute respond ============ */
.resp-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 14px 0; padding: 10px 12px; border-radius: var(--r-block);
  background: color-mix(in srgb, var(--destructive) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent);
}
.resp-banner-text { flex: 1; min-width: 200px; font-size: 12.5px; font-weight: 600; color: var(--destructive); line-height: 1.4; }
.resp-banner-btn {
  flex: none; background: var(--destructive); color: #FFF; border: none; border-radius: var(--r-pill);
  padding: 7px 14px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.resp-banner.sent {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--wal-goldink); font-size: 12.5px; font-weight: 600;
}
.resp-intro { font-size: 13px; color: var(--ink-muted); line-height: 1.55; margin: 4px 0 12px; }
.resp-claim {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
  background: color-mix(in srgb, var(--destructive) 5%, transparent); border-radius: var(--r-block);
}
.resp-claim .microlabel { color: var(--destructive); }
.resp-claim p { font-size: 13.5px; line-height: 1.5; margin: 0; }
.resp-claim-meta { font-size: 11.5px; color: var(--ink-muted); }
#respond-count.ready { color: var(--wal-goldink); font-weight: 600; }

/* ============ ROUND-12 ADDITIONS — feedback quick wins ============ */

/* WGTBD pop: fade + hint while more items sit below the fold */
.vd-pop.scrolly::after {
  content: "more ↓"; position: sticky; bottom: -12px; left: 0; right: 0; flex: none;
  display: block; text-align: center; padding: 18px 0 6px; margin-top: -14px;
  font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: 0.8px; color: var(--ink-muted);
  background: linear-gradient(180deg, transparent, var(--card) 55%);
  pointer-events: none;
}

/* guest hero CTAs: gold pair on top, How it works centered beneath */
.hero-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cta-gold-outline {
  background: transparent; border: 1.5px solid var(--gold); color: var(--wal-goldink);
  border-radius: var(--r-pill); padding: 13px 22px; font-family: var(--font-display); font-weight: 700;
  font-size: 14px; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.cta-gold-outline:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.cta-gold-outline .arr { display: inline-block; transition: transform 0.15s; }
.cta-gold-outline:hover .arr { transform: translateX(2px); }
.hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-how { align-self: center; }

/* offer decision buttons centered in the message frame, labels centered */
.thread-view .offer-actions { margin-left: auto; margin-right: auto; width: min(440px, 100%); }
.offer-actions .btn-offer, .offer-actions .btn-inbox, .offer-actions .decline-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hist-when { flex: none; font-size: 11px; color: var(--ink-muted); font-family: var(--font-display); }
.counter-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--hairline-card); border-radius: var(--r-block); font-size: 13px; }
.counter-line img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.counter-line .tbl-cash { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--wal-goldink); font-family: var(--font-display); font-weight: 700; }
.vd-flash { animation: vdflash 1.8s ease; }
@keyframes vdflash { 0%, 45% { box-shadow: 0 0 0 3px var(--gold), var(--shadow-hover); } 100% { box-shadow: none; } }
.mv-buzz {
  flex: none; font-family: var(--font-label); font-weight: 600; font-size: 10px; letter-spacing: 0.6px;
  color: var(--wal-goldink); background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--r-chip); padding: 3px 8px;
}
.review-dots { margin: 0 0 12px; }
.review-gems { display: flex; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.review-gem {
  background: none; border: none; cursor: pointer; font-size: 34px; line-height: 1;
  color: var(--hairline); transition: color 0.12s, transform 0.12s; padding: 4px;
}
@media (hover: hover) { .review-gem:hover { transform: scale(1.15); } }
.review-gem.on { color: var(--gold); }
@media (hover: hover) { .review-gems:hover .review-gem { color: var(--gold); } }
@media (hover: hover) { .review-gems .review-gem:hover ~ .review-gem { color: var(--hairline); } }
.review-lab { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--wal-goldink); min-height: 18px; }

/* ============ ROUND-12 ADDITIONS — message side rail ============ */
.msg-rail-back { position: fixed; inset: 0; z-index: 90; background: var(--overlay); animation: fadein 0.18s ease; }
@keyframes fadein { from { opacity: 0; } }
.msg-rail {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 94vw);
  background: var(--canvas); border-left: 1px solid var(--hairline);
  display: flex; flex-direction: column; box-shadow: var(--shadow-hover);
  animation: railin 0.24s cubic-bezier(0.32, 0.9, 0.35, 1);
}
@keyframes railin { from { transform: translateX(40px); opacity: 0.4; } }
.msg-rail-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); background: var(--card); }
.msg-rail-head .cm-close { position: static; margin-left: 4px; }
.msg-rail-deal {
  display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 10px 12px; text-align: left;
  background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: var(--r-block); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--wal-goldink); cursor: pointer;
}
.msg-rail-deal svg { width: 14px; height: 14px; flex: none; }
.msg-rail-msgs { flex: 1; overflow-y: auto; padding: 14px; }
.msg-rail-empty { text-align: center; color: var(--ink-muted); font-size: 13px; padding: 30px 10px; }
.msg-rail-composer { border-top: 1px solid var(--hairline); background: var(--card); padding: 12px 14px; }

/* ============ ROUND-12 ADDITIONS — detail takes spruce ============ */
/* a control since 2026-09-09 (#6): drives the caret into the big composer below it */
.takes-lab { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.takes-lab:hover { color: var(--accent); }
.takes-block { display: flex; flex-direction: column; gap: 8px; }
.take-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  animation: takein 0.35s ease backwards; animation-delay: var(--d, 0ms);
  transition: border-color 0.15s, transform 0.15s;
}
.take-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-1px); }
@keyframes takein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .take-row { animation: none; } }
.take-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.take-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.take-head b { font-family: var(--font-display); font-weight: 600; font-size: 13px; cursor: pointer; }
.take-head b:hover { color: var(--accent); }
.take-when { font-size: 11px; color: var(--ink-muted); }
.take-text { font-size: 13.5px; line-height: 1.5; }
.top-take {
  font-family: var(--font-label); font-weight: 600; font-size: 9px; letter-spacing: 0.7px;
  color: var(--wal-goldink); background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 4px; padding: 1px 6px;
}
.take-like {
  display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: center;
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 5px 10px; font-size: 12px; color: var(--ink-muted); cursor: pointer;
  transition: transform 0.12s, color 0.12s, border-color 0.12s;
}
.take-like svg { width: 13px; height: 13px; }
@media (hover: hover) { .take-like:hover { transform: scale(1.06); border-color: var(--destructive); color: var(--destructive); } }
.take-like.on { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 45%, transparent); background: color-mix(in srgb, var(--destructive) 7%, transparent); }
.take-like.on svg { fill: currentColor; }
.take-composer.big { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.take-composer.big .take-in { flex: 1; }

/* ============ ROUND-12 ADDITIONS — crop sheet ============ */
.crop-modal { max-width: 430px; }
.crop-vp {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r-block); background: #0E0B16; touch-action: none; cursor: grab;
  border: 1px solid var(--hairline);
}
.crop-vp:active { cursor: grabbing; }
.crop-vp img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; will-change: transform; }
.crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.35) 33.33%, transparent calc(33.33% + 0.5px)),
    linear-gradient(to right, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.35) 66.66%, transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.35) 33.33%, transparent calc(33.33% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.35) 66.66%, transparent calc(66.66% + 0.5px));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.crop-controls { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.crop-ctl { display: flex; align-items: center; gap: 7px; flex: 1; color: var(--ink-muted); }
.crop-ctl svg, .crop-rot-ic { width: 15px; flex: none; font-size: 14px; }
.crop-ctl input[type="range"] { width: 100%; accent-color: var(--gold); }
.wz-thumb .thumb-crop { /* bottom-right: the COVER badge owns bottom-left */
  position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; display: grid; place-items: center;
  background: rgba(14, 11, 22, 0.72); color: #FFF; border: none; border-radius: 8px; cursor: pointer;
}
.wz-thumb .thumb-crop svg { width: 13px; height: 13px; }
.wz-thumb .thumb-crop:hover { background: rgba(14, 11, 22, 0.9); }
.cta-gold-outline { text-transform: uppercase; letter-spacing: 0.5px; font-size: 13px; }

/* ============ ROUND-12 ADDITIONS — hero CTA refinement (Blake 2026-08-22) ============ */
.hero-cta-stack { display: flex; flex-direction: column; gap: 12px; }
/* square corners for the hero trio only; How it works centers to the pair's width */
.hero-ctas .cta-primary, .hero-ctas .cta-gold-outline, .hero-ctas .cta-secondary { border-radius: var(--r-chip); }
.stat-link { cursor: pointer; transition: border-color 0.15s, transform 0.15s; font: inherit; color: inherit; text-align: center; }
.stat-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.follist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fol-more { text-align: center; font-size: 12px; color: var(--ink-muted); padding: 8px 0 2px; }

/* safety net: an svg inside any modal never renders unsized/full-width */
.modal button svg:not([width]) { width: 15px; height: 15px; }

/* ============ ROUND-12 ADDITIONS — composer counter + mobile stats ============ */
.counter-composer { max-width: 540px; width: min(540px, 94vw); max-height: 88dvh; overflow-y: auto; }
.counter-composer .composer { border: none; padding: 0; margin-top: 6px; }
.counter-target {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 4px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: var(--r-block);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.counter-target img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: none; }

/* odd stat count on the 2-col mobile grid: last cell spans full width — a
   narrowed cell exposed the row band on both sides (Blake 2026-08-23) */
@media (max-width: 720px) {
  .stats-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* exchange chips never clip — rows wrap instead (Blake 2026-08-22, sunburst HYBRID) */
.xchips { flex-wrap: wrap; }
.mgr-priceline { flex-wrap: wrap; row-gap: 4px; }
.d-priceline { flex-wrap: wrap; row-gap: 4px; }
.ov-bottom { flex-wrap: wrap; row-gap: 4px; }

/* ============ ROUND-13 ADDITIONS (Blake feedback 2026-08-22 pm) ============ */
/* required asterisk rides the label line, never its own row */
.lab-t { display: inline; }
.lab-t b { color: var(--gold-text); }

/* collection-only cards — velvet-case treatment */
.lcard-imgwrap.coll-only img { outline: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); outline-offset: -1px; }
.coll-chip {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-label); font-weight: 600; font-size: 9.5px; letter-spacing: 0.8px;
  color: var(--gold); background: rgba(10, 8, 18, 0.72); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--r-chip); padding: 3px 8px; backdrop-filter: blur(3px);
}
.coll-chip.inline { position: static; background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--wal-goldink); backdrop-filter: none; }
.coll-declared { color: var(--ink-muted); letter-spacing: 0.6px; }
.card-offer.coll-msg { display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1.5px solid var(--gold); color: var(--wal-goldink); }
.card-offer.coll-msg svg { width: 14px; height: 14px; }
.card-offer.coll-msg:hover { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.coll-panel {
  display: flex; flex-direction: column; gap: 9px; padding: 16px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 5%, transparent); margin-top: 14px;
}
.coll-panel-lab { color: var(--wal-goldink); }
.coll-panel p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
.coll-msg-big { display: flex; align-items: center; justify-content: center; gap: 8px; }
.coll-msg-big svg { width: 15px; height: 15px; }

/* greyed exchange prefs when collection-only */
.wz-dim .wz-toggles { opacity: 0.42; pointer-events: none; filter: saturate(0.4); }

/* wizard price check */
.wz-pc { margin-top: 2px; }

/* composer icons (app parity) */
.mc-offer {
  display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  background: var(--band); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 9px 13px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--wal-goldink);
}
.mc-offer span { font-size: 14px; }
.mc-offer:hover { border-color: var(--gold); }
.mc-share {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer;
  background: var(--band); border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink-muted);
}
.mc-share svg { width: 17px; height: 17px; }
.mc-share:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) { .mc-offer small { display: none; } .mc-offer { padding: 9px 11px; } }

/* item-link message cards */
.msg-item-card {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 210px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; transition: transform 0.15s, border-color 0.15s;
}
.msg-item-card:hover { transform: translateY(-1px); border-color: var(--gold); }
.msg-item-card img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.mic-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mic-meta b { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mic-meta span { font-size: 11.5px; color: var(--ink-muted); }
.bubble.has-item { max-width: 300px; }

/* staged attachment above the rail composer */
.msg-attach {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-top: 1px dashed var(--hairline); background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.msg-attach .msg-item-card { margin-bottom: 0; flex: 1; }
.msg-attach .cm-close { position: static; flex: none; }

/* share-from-collection sheet */
.share-list { display: flex; flex-direction: column; gap: 8px; max-height: 44dvh; overflow-y: auto; margin-top: 8px; }
.share-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; cursor: pointer;
  border: 1.5px solid var(--hairline-card); border-radius: var(--r-block); background: var(--card);
  transition: border-color 0.15s;
}
.share-row input { display: none; }
.share-row img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.share-row .share-tick { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--hairline); border-radius: 50%; font-size: 11px; color: transparent; }
.share-row.on { border-color: var(--gold); }
.share-row.on .share-tick { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }

/* rail carets */
.rail-wrap { position: relative; }
.rail-next {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 40px; height: 40px; display: none; place-items: center; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 50%; box-shadow: var(--shadow-hover); font-size: 20px; line-height: 1;
  transition: transform 0.15s;
}
.rail-next.show { display: grid; }
.rail-next:hover { transform: translateY(-50%) scale(1.08); }

/* welcome action-triage chips */
.wel-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }

/* profile collection category chips */
.cat-tab.sub { font-size: 12px; padding: 6px 12px; }

/* rated chip on completed threads */
.rated-chip {
  display: inline-flex; align-items: center; align-self: center; gap: 4px; margin-left: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--wal-goldink);
  background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: var(--r-pill); padding: 6px 12px;
}
.offer-stamp svg { width: 11px; height: 11px; vertical-align: -1px; }

/* ============ ROUND-13 — mobile sweep (Blake 2026-08-22) ============ */
@media (max-width: 720px) {
  /* the hero's padding shorthand was killing the wrap gutter (burn #7) */
  .hero.wrap { padding-left: 18px; padding-right: 18px; }
  .hero-left { text-align: center; }
  .hero-grid { justify-items: center; }
  .hero-board { max-width: 100%; justify-self: center; }
  .board-rows { margin-left: auto; margin-right: auto; }
  .hero-ctas { width: 100%; align-items: stretch; }
  /* ALL THREE hero buttons share one width on phones (Blake 2026-09-03/04).
     The STACK is the max-content element — sized by the widest label — and
     the pair's row and How it works are each 100% of it, so they cannot
     differ. The first attempt (09-03) put max-content on the ROW and stretched
     How it works to the stack, which was still 100% of the hero: the pair
     ended up label-wide and centered while How it works went edge to edge —
     the wider-button bug in Blake's screenshot. Desktop is untouched: every
     rule here lives inside this ≤720px block. */
  .hero-cta-stack { width: max-content; max-width: 100%; margin: 0 auto; }
  .hero-cta-row { flex-direction: column; gap: 10px; width: 100%; }
  /* the 08-28 hero-trio pass made BROWSE inline-flex but centered it only in
     the >560px shared-footprint block — full-width phones need it too, or the
     label parks at the left edge while HOW IT WORKS floats centered
     (Blake 2026-08-31: all three centered; this was demo-only and never
     committed — the "lost commit") */
  .hero-cta-row .cta-primary, .hero-cta-row .cta-gold-outline { width: 100%; justify-content: center; text-align: center; }
  .hero-how { width: 100%; justify-content: center; text-align: center; }
  .vitals { justify-content: center; text-align: center; }
  /* exactly two cards per row on phones — never three squeezed columns */
  .grid-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  /* (retired 2026-09-10) The two-up user-row wrap that lived here put the counts
     and the ⋯ on their own line on grid cards only. Every card, rail or grid, now
     keeps the handle and its counts on one row under the photo and truncates the
     handle instead — the rail's rule, and the app's (ListingCardV2: only the
     username shrinks). Grid cards are never narrower than a phone rail card. */
  /* Offer rows with controls: the cluster takes its own line (Blake 2026-09-02). */
  .of-row.has-actions { flex-wrap: wrap; }
  .of-row.has-actions .of-actions { flex-basis: 100%; margin-left: 0; }
  .of-row.has-actions .of-actions .accept-btn { height: 40px; }
}
@media (max-width: 560px) {
  /* one card per row on phones, in EVERY card grid: the take block (preview +
     composer) rides every card now (Blake 2026-09-09 #2 — the 08-22 "comments
     live on the detail page" hide is retired), and two-up cannot hold it: a
     164px card leaves a 134px composer and a 64px field beside the 44px send.
     One-up at 375px measures card 339, composer 309, field 239 on the installed
     site — roomier than the 240px rail cards that already carry the block. */
  .grid-cards { grid-template-columns: 1fr !important; }
}

/* ============ ROUND-14 (Blake 2026-08-23) ============ */

/* price check — a button worth pressing, a reveal worth trusting */
.pc-run-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold-soft, #C0A040), color-mix(in srgb, var(--gold-soft, #C0A040) 78%, #000)) !important;
  color: var(--gold-ink) !important; border: none !important; border-radius: 10px !important;
  padding: 11px 18px !important; font-family: var(--font-display) !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: 0.3px; cursor: pointer;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gold) 30%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pc-run-btn i { font-style: normal; font-size: 14px; }
.pc-run-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 40%, transparent); }
.pc-run-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: pcsheen 2.6s ease-in-out infinite;
}
@keyframes pcsheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

.pc-reveal > * { animation: pcup 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
.pc-reveal .pc-head { animation-delay: 0ms; }
.pc-reveal .pc-range { animation-delay: 120ms; }
.pc-reveal .pc-verdict { animation-delay: 320ms; }
.pc-reveal .pc-reason { animation-delay: 440ms; }
@keyframes pcup { from { opacity: 0; transform: translateY(7px); } }
.pc-reveal .pc-bar .band { transform-origin: center; animation: pcband 0.6s 0.18s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
@keyframes pcband { from { transform: scaleX(0); } }
.pc-reveal .pc-bar .ask { animation: pcask 0.5s 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards; }
@keyframes pcask { from { opacity: 0; transform: translateY(-4px) scale(0.4); } }
.pc-reveal .pc-verdict { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .pc-reveal > *, .pc-reveal .pc-bar .band, .pc-reveal .pc-bar .ask { animation: none; }
  .pc-run-btn::after { animation: none; }
}

/* subcategory chips read clearly on the night ground (Blake: grey-on-black) */
.cat-tab.sub { color: var(--ink); border-color: var(--line, var(--hairline)); opacity: 0.92; }
.cat-tab.sub .tab-n { color: var(--ink-muted); }
.cat-tab.sub.on { opacity: 1; }

/* numbered 1-5 rating chips (diamond voting was too cryptic) */
.review-gem.num {
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 17px;
  font-family: var(--font-display); font-weight: 700; color: var(--ink-muted);
  background: var(--band); border: 1.5px solid var(--hairline); border-radius: 12px;
}
@media (hover: hover) { .review-gem.num:hover { color: var(--wal-goldink); border-color: var(--gold); } }
.review-gem.num.on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
@media (hover: hover) { .review-gems:hover .review-gem.num { color: var(--wal-goldink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); } }
@media (hover: hover) { .review-gems .review-gem.num:hover ~ .review-gem.num { color: var(--ink-muted); border-color: var(--hairline); background: var(--band); } }

/* composer buttons share one height; multi-item attach strip */
.mc-offer, .mc-share { height: 40px; box-sizing: border-box; }
.msg-attach-items { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.msg-attach-row { display: flex; align-items: center; gap: 8px; }
.msg-attach-row .msg-item-card { margin-bottom: 0; flex: 1; }
.thread-view .msg-attach { border-top: 1px dashed var(--hairline); margin: 0 14px; border-radius: 10px; }
.mgr-btn svg { width: 13px; height: 13px; vertical-align: -2px; }
.disc-navlink svg { width: 13px; height: 13px; }
.editl-preview { display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin-bottom: 12px; border: 1px solid var(--hairline-card); border-radius: var(--r-block); background: var(--band); }
.editl-preview img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }

/* ============ ROUND-14 ADDITIONS (Blake punch list 2026-08-23 pm) ============ */
/* selected sub-chip reads accent-on-accent-fill — the round-13 .sub rule was
   beating .on at equal specificity (navy on navy by day) */
.cat-tab.sub.on { background: var(--accent); border-color: var(--accent); color: #FFF; }
.cat-tab.sub.on .tab-n { color: #FFF; opacity: 0.8; }

/* review scale = stars with the digit underneath; fill rides the button color */
.review-gem.num {
  width: auto; height: auto; display: grid; place-items: center; row-gap: 3px;
  background: none; border: none; padding: 2px 6px; color: var(--hairline);
}
.review-gem.num .rg-star { font-style: normal; font-size: 30px; line-height: 1; }
.review-gem.num .rg-num { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1; color: var(--ink-muted); }
.review-gem.num.on { color: var(--gold-text); background: none; border: none; }
.review-gem.num.on .rg-num { color: var(--wal-goldink); }
@media (hover: hover) { .review-gem.num:hover { color: var(--gold); } }
@media (hover: hover) { .review-gems:hover .review-gem.num { color: var(--gold); background: none; border: none; } }
@media (hover: hover) { .review-gems:hover .review-gem.num .rg-num { color: var(--wal-goldink); } }
@media (hover: hover) { .review-gems .review-gem.num:hover ~ .review-gem.num { color: var(--hairline); background: none; border: none; } }
@media (hover: hover) { .review-gems .review-gem.num:hover ~ .review-gem.num .rg-num { color: var(--ink-muted); } }

/* ============ ROUND-15 ADDITIONS (Blake feedback 2026-08-23 pm, round 2) ============ */
/* Discover idle rhythm: .wrap's padding shorthand zeroes section vertical
   padding (burn #7), so gaps were whatever each block's innards left over —
   rails 22px, grids 0. Uniform rule: every section trails 22px (rails carry
   it inside .rail) + 26px top margin = one consistent 48px header gap. */
.discover #disc-idle > section.wrap { margin-top: 26px; padding-bottom: 22px; }
.discover #disc-idle > section.wrap:has(.rail) { padding-bottom: 0; }
.discover #disc-idle > div.wrap + section.wrap { margin-top: 44px; }

/* tablet stats-7: 4+3 on a 4-col grid left an empty slot showing the band —
   12-col grid, top row spans 3 each, bottom three span 4 each: both rows full */
@media (max-width: 1024px) and (min-width: 721px) {
  .stats-row.stats-7 { grid-template-columns: repeat(12, 1fr); }
  .stats-row.stats-7 > * { grid-column: span 3; }
  .stats-row.stats-7 > :nth-child(n+5) { grid-column: span 4; }
}

/* ============ ROUND-16 (Blake final edits 2026-08-23 pm) ============ */
/* you can't message yourself: own-listing seller card greys its Message */
.seller-card .msg:disabled { border-color: var(--hairline); color: var(--ink-muted); opacity: 0.55; cursor: default; }
.seller-card .msg:disabled:hover { background: none; }
/* ============ LIVE ROUND 1 — deals chat scrolls inside its pane (Blake 2026-08-28) ============ */
/* Two-pane widths only (the ≤1024px single-pane mode keeps plain page scroll).
   The thread pane pins to the viewport and .msgs scrolls internally; the rail
   scrolls on its own. Native scroll chaining hands the wheel to the page when
   a pane hits its end — no overscroll-behavior override, that chaining is the
   spec. Selectors carry .inbox for specificity over the base rules (burn:
   ROUND blocks can lose the cascade, bump specificity, don't trust order). */
@media (min-width: 1025px) {
  .inbox .inbox-grid .thread-list {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    padding-right: 2px;
  }
  .inbox .inbox-grid .thread-view {
    position: sticky; top: 140px;
    max-height: calc(100vh - 170px);
  }
}
/* Everything between the pinned head and the pinned composer — offer summary,
   history, messages — scrolls as ONE region, so an offer plate can never
   squeeze the chat into a slit. Global (not media-scoped): on ≤1024px the
   pane is unbounded, so this overflow simply never engages. */
.inbox .thread-view .thread-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.inbox .thread-view .thread-scroll .msgs { overflow-y: visible; }

/* #2 (Blake 2026-08-28) — the hero trio reads as ONE set: BROWSE THE FLOOR
   joins START TRADING / HOW IT WORKS at 16px Rajdhani 700 (it was 13px Space
   Grotesk via the generic .cta-gold-outline sizing). Scoped to the hero —
   the generic class still serves its other surfaces at its own size. */
.hero-ctas .cta-gold-outline {
  font-family: var(--font-label); font-weight: 700; font-size: 16px;
  letter-spacing: 0.14em;
  height: 58px; padding: 0 30px;
  display: inline-flex; align-items: center; gap: 8px;
}
/* …and the same FOOTPRINT (Blake round-1 follow-up): one shared width, sized
   to the longest label (BROWSE THE FLOOR → at 16px tracked ≈ 253px), content
   centered. Above the ≤560px stack only — mobile keeps its full-width CTAs. */
@media (min-width: 561px) {
  .hero-ctas .cta-primary, .hero-ctas .cta-gold-outline, .hero-ctas .cta-secondary {
    width: 254px; padding: 0 12px;
    justify-content: center; text-align: center;
  }
}

/* #13 (Blake 2026-08-28) — the deals badge fits ANY count: horizontal padding
   so two digits never touch the pill edge, and the tab-bar badge anchors its
   LEFT edge beside the icon so growth runs rightward, symmetric to the eye,
   instead of right-anchored growth that creeps across the glyph. */
.btn-inbox .badge { padding: 0 6px; line-height: 1; }
@media (max-width: 720px) {
  .tab-bar .tb-badge {
    padding: 0 5px; line-height: 1;
    right: auto; left: calc(50% + 3px);
  }
}

/* #6 — listing share sheet (desktop fallback when navigator.share is absent) */
.share-modal { max-width: 380px; }
.share-rows { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 4px; }
.share-rows .pm-item { border: 1px solid var(--hairline-card); border-radius: var(--r-block); text-decoration: none; }
.share-hint { padding: 8px 16px 14px; margin: 0; }

/* #11 (Blake 2026-08-28, screenshot) — with the username hidden ≤720px the
   avatar chip was an empty 44px pill around a 26px photo: small and
   off-center in its own ring. On mobile the chip IS the photo — the pill
   chrome collapses and the avatar fills out to the app's nav size. */
@media (max-width: 720px) {
  .avatar-chip { padding: 0; border: none; background: none; height: auto; gap: 0; }
  .avatar-chip .avatar { width: 40px; height: 40px; font-size: 14px; }
}

/* ============ HOME TRIAGE (Blake 2026-08-29) — capped horizontal action rail ============ */
/* The action strip is a RAIL again at every width (the 3-up grid grew into a
   29-card wall on staging): six ranked cards, sideways scroll, one dashed
   overflow card into Deals. .welcome scopes over the base .floor-strip grid
   and the ≤1024px single-column override alike (display:flex moots both). */
.welcome .floor-strip {
  display: flex; overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
}
.welcome .floor-strip .deal-card { flex: 0 0 300px; scroll-snap-align: start; }
.deal-card.more-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-style: dashed; text-decoration: none;
}
.deal-card.more-card .more-n { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent); }
@media (max-width: 1024px) {
  .welcome .floor-strip .deal-card { flex: 0 0 240px; }
}

/* ============ AUTH POP-UP (Blake 2026-08-29) ============ */
/* The auth card renders inside a modal on whatever page the visitor was on.
   Tall cards (register steps) scroll within the overlay. */
#auth-modal.auth-modal-back { align-items: flex-start; overflow-y: auto; padding: 40px 16px; }
#auth-modal .auth-card { margin: auto; max-width: 440px; width: 100%; box-shadow: var(--shadow-hover); }
/* wall trio: Sign In · Create an account · keep browsing — stacked, one size */
#wall .wall-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#wall .wall-actions .auth-primary, #wall .wall-actions .auth-outline { width: 100%; }

/* #3 (amended per Blake's eye) — the hero CTA carries the EXACT Price Check
   sheen: same pcsheen keyframes, same 2.6s rhythm (~1.4s rest, ~0.8s sweep).
   A 10s cadence swept for 1.3s and was missed entirely — the recognizable
   effect IS the frequency. 4s (Blake's tune, 2026-08-29): the same sweep with
   a calmer rest for a hero-scale button. Motion-reduced visitors keep the
   static button. */
.hero-ctas .cta-primary::before { animation: pcsheen 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .cta-primary::before { animation: none; }
}

/* auth modal: step-error strip (the validate() sentences and the server's
   own refusals) + the Stripe consent note. Day/night ride the tokens. */
.auth-error {
  border: 1px solid color-mix(in srgb, var(--danger, #C0453E) 45%, transparent);
  background: color-mix(in srgb, var(--danger, #C0453E) 9%, transparent);
  color: var(--danger, #C0453E);
  border-radius: var(--r-block);
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 4px;
}
.auth-stripe-note { color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; margin: 2px 0 6px; }

/* ============ GUIDED TOUR (Blake 2026-08-29) — phase 1 engine ============ */
.tour-layer { position: fixed; inset: 0; z-index: 200; }
/* tour: the dim layer owns the page while touring — stray clicks and scrolls
   don't wander the site mid-beat (Blake phase-1 note #4). Programmatic
   scrollIntoView still works; the card and its controls stay live. */
.tour-layer { pointer-events: auto; }
.tour-card, .tour-card * { pointer-events: auto; }

.tour-spot {
  position: fixed; display: none; pointer-events: none;
  border-radius: 14px; border: 2px solid var(--gold);
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ink) 62%, transparent);
  transition: left 0.45s ease, top 0.45s ease, width 0.45s ease, height 0.45s ease, opacity 0.3s ease;
}
/* mid-pan: the frame and caption drop low while the page glides, and bloom
   back on arrival — a pan never shows the box on the wrong content */
.tour-layer.tour-moving .tour-card { opacity: 0.12; }
/* the tour's own acts may grow panels (the price-check reveal); the page must not
   jump to compensate. overflow-anchor is not inherited, and the class rides on #app
   (not <html>: the scoped generator rewrites a leading html into :scope, which would
   leave the rule inert on the installed site), so the app subtree is excluded from
   anchor selection directly — with nothing left to anchor to, nothing adjusts. */
#app.gbz-touring, #app.gbz-touring * { overflow-anchor: none; }
.tour-layer.tour-moving .tour-spot { transition: none; } /* pinned to its element every frame of the glide — no tween lag, no fade (Blake 2026-09-02 mobile #1) */
/* freshly rendered overlay: fully invisible until the first placement lands
   (the pre-scroll flash Blake called in r8) */
.tour-layer.tour-pending .tour-spot, .tour-layer.tour-pending .tour-card { opacity: 0; }
.tour-card {
  position: fixed; pointer-events: auto;
  width: min(400px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--hairline-card);
  border-radius: var(--r-card); box-shadow: var(--shadow-hover);
  padding: 18px 20px 14px;
  transition: left 0.45s ease, top 0.45s ease, opacity 0.3s ease;
}
.tour-card.center {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ink) 62%, transparent), var(--shadow-hover);
  /* the welcome/finish moments carry the whole screen — presence (Blake's 1) */
  width: min(560px, calc(100vw - 32px));
  padding: 30px 34px 22px;
}
.tour-card.center h3 { font-size: 30px; }
.tour-card.center .tour-body { font-size: 15.5px; margin-bottom: 16px; }
.tour-eyebrow { color: var(--gold-text); letter-spacing: 0.14em; }
.tour-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 6px 0 4px; color: var(--ink); }
.tour-body { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
.tour-cta { width: 100%; margin-bottom: 8px; }
.tour-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.tour-nav {
  font-family: var(--font-label); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r-chip); color: var(--ink-muted);
}
.tour-nav.primary { background: var(--gold); color: var(--gold-ink); padding: 8px 22px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.tour-dots i.on { background: var(--accent); }
.tour-dots i.done { background: var(--gold); }
.tour-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tour-meta button { font-size: 12px; color: var(--ink-muted); }
.tour-meta #tour-auto.on { color: var(--gold-text); }
/* phones: the caption yields the screen to the UI (Blake mobile #1) */
@media (max-width: 720px) {
  .tour-card { width: min(320px, calc(100vw - 20px)); padding: 12px 14px 10px; }
  .tour-card h3 { font-size: 17px; }
  .tour-body { font-size: 12px; line-height: 1.45; margin: 0 0 8px; }
  .tour-card.center { width: min(400px, calc(100vw - 24px)); padding: 22px 22px 16px; }
  .tour-card.center h3 { font-size: 24px; }
  .tour-card.center .tour-body { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-card { transition: none; }
}

/* tour phase 2 — ghost cursor */
#tour-ghost {
  position: fixed; left: 0; top: 0; z-index: 220; pointer-events: none;
  width: 26px; height: 26px; opacity: 0;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ink) 45%, transparent));
  transition: transform 0.6s cubic-bezier(0.3, 0.9, 0.35, 1), opacity 0.25s;
}
/* the tap pulses the SVG CHILD only, around its own tip. Pulsing the
   positioned parent was the click-jerk in every build: the `scale` property
   MULTIPLIES the parent's translate, so each tap teleported the arrow toward
   the screen origin by (1 − scale) of its position and back (Blake r6 #1). */
#tour-ghost svg { display: block; transform-origin: 4px 2px; }
#tour-ghost.tap svg { animation: tour-tap 0.3s ease; }
@keyframes tour-tap { 40% { scale: 0.8; } 100% { scale: 1; } }
.tour-ripple {
  position: fixed; z-index: 219; pointer-events: none;
  width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid var(--gold);
  animation: tour-ripple 0.55s ease-out forwards;
}
@keyframes tour-ripple { from { opacity: 0.9; scale: 0.4; } to { opacity: 0; scale: 3.6; } }
.tour-live {
  outline: 2px solid var(--gold) !important; outline-offset: 2px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent) !important;
  position: relative; z-index: 30;
}
/* tour-only owner-view chip on storefront items (Blake r12 #6) */
.tour-insight-chip {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  font-family: var(--font-label); font-weight: 700; font-size: 9px; letter-spacing: 0.1em;
  color: var(--gold-ink); background: var(--gold);
  padding: 3px 7px; border-radius: 999px; pointer-events: none;
}
.tour-glow {
  outline: 3px solid var(--gold) !important; outline-offset: 3px; border-radius: 10px;
  animation: tour-glowpulse 1.1s ease-in-out 2;
  /* lift the glowed element's paint order — an outline alone stays under
     later-painted siblings and gets partially or fully covered (Blake final
     sweep). Relative with no offsets keeps layout identical. */
  position: relative; z-index: 30;
}
/* the fixed glow ring (r11): lives above the page like the spotlight, so no
   overflow-clipping ancestor can amputate its edges */
.tour-glowring {
  position: fixed; z-index: 210; pointer-events: none;
  border: 3px solid var(--gold); border-radius: 10px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 40%, transparent);
  animation: tour-glowpulse 1.1s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) { #tour-ghost { transition: opacity 0.25s; } }

/* ================= COLLECTION REORDER (Blake 2026-08-31) =================
   The lifted card is the only thing that changes: it scales a hair, takes the
   hover shadow, and rises above its neighbors. Everything else stays put, so
   the grid reads as the same grid with one card in your hand rather than as a
   different screen you have entered. */
.mgr-reorder-hint { color: var(--ink-muted); margin: 0 0 10px; }

/* touch-action is load-bearing, not a nicety: without it the browser claims
   the gesture for scrolling and pointermove stops firing mid-drag, which
   presents as a card that sticks to the pointer and then dies. `manipulation`
   keeps double-tap-to-zoom working while releasing pan. */
/* The wizard's photo thumbs join this rule rather than restating it. A second
   copy of these three values is how two paths drift, and this one is the
   difference between a gesture that arms on a phone and one that does not:
   without touch-action the browser claims the press for a pan and pointermove
   stops firing mid-drag. See installWizPhotoDrag. */
.mgr-grid [data-mgritem],
.wz-thumbs.reorderable .wz-thumb { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* The card is a control surface, not prose. user-select sits on the card
   ALWAYS, not only mid-drag: body.dragging-card arrived after the selection
   under the press had already started, and that selection was what "it
   highlights instead of grabbing" looked like (Blake, 2026-09-02). */
/* The photo must never start the browser's own drag: it cancels ours and
   leaves a ghost image on the cursor. draggable="false" on the img is the
   attribute half; this is the WebKit half. */
.mgr-grid [data-mgritem] img,
.wz-thumbs .wz-thumb img { -webkit-user-drag: none; }
/* On a mouse the body of the card is the handle, and the photo is the action
   zone. Say so. */
.mgr-card:not(.locked-order) .mgr-meta { cursor: grab; }
:scope.dragging-card, :scope.dragging-card * { cursor: grabbing !important; }
/* A drop lands under the cursor. Four buttons appearing under your hand the
   instant you let go reads as the card grabbing back, so the overlay stays
   hidden until the cursor leaves the card once (see holdOverlayUntilLeave). */
.mgr-card.just-dropped .mgr-overlay { opacity: 0 !important; pointer-events: none !important; }

.mgr-card.dragging {
  position: relative; z-index: 40;
  transform-origin: center;
  scale: 1.03;
  box-shadow: var(--shadow-hover);
  cursor: grabbing;
  /* The dragged card must never intercept its own hit-test — cardUnder()
     walks the siblings, and a card that answers elementFromPoint for itself
     would pin the insertion point to wherever it already is. */
  pointer-events: none;
}
/* The overlay's Relist/Remove buttons appearing under a moving finger is
   noise at best and a misfire at worst. */
.mgr-grid.reordering .mgr-overlay { opacity: 0 !important; pointer-events: none !important; }
/* The wizard's equivalent: ✕ and Crop appearing under a moving finger are a
   misfire waiting to happen, and the thumb's ✕ sits at its own corner — which
   is exactly where a drop lands. swallowNextClick is the other half. */
.wz-thumbs.reordering .thumb-x,
.wz-thumbs.reordering .thumb-crop { opacity: 0 !important; pointer-events: none !important; }
/* STRUCTURAL ONLY — deliberately no scale and no shadow. .wz-thumb has no
   border-radius of its own (the radius lives on the img), so a drop shadow
   here would paint square corners behind a rounded photo. The lift is Blake's
   to design; this is only what the gesture needs to function.
   pointer-events:none so the moving thumb never answers elementFromPoint for
   itself and pin the insertion point to where it already is. */
.wz-thumb.dragging { position: relative; z-index: 40; pointer-events: none; }
.wz-thumbs.reorderable .wz-thumb { cursor: grab; }
.mgr-grid.reordering .mgr-card:not(.dragging) { transition: transform 160ms ease; }
:scope.dragging-card { user-select: none; -webkit-user-select: none; }

/* A sold or traded card: still fully visible and still readable — the point is
   that trade history stays on the page — but visibly out of the running. It
   dims only WHILE a drag is happening, so the resting grid is untouched. */
.mgr-card.locked-order { cursor: default; }
.mgr-grid.reordering .mgr-card.locked-order { opacity: .38; }

/* The highlight cut. This is the thing being edited, so it has to be visible
   while editing it — a gold rule along the top of the cards currently holding
   a slot. Deliberately NOT a scrim over everything else: reordering is a
   judgment about where a card sits RELATIVE to its neighbors, and dimming
   the neighbors mutes the very thing you are aiming at. */
.mgr-card.is-highlight { box-shadow: inset 0 3px 0 0 var(--gold); }
/* The tag sits at the BOTTOM of the card's white space, not on the photo.
   Over the image it collided with the status chip, which already owns the
   top-left corner — two tags fighting for one spot, and the status is the one
   that has to stay readable. In the meta block it has room of its own and
   still reads as belonging to the card. */
.mgr-card.is-highlight .mgr-meta::after {
  content: "HIGHLIGHT";
  align-self: flex-start; margin-top: 2px;
  font-family: var(--font-label); font-weight: 700; font-size: 9.5px; letter-spacing: .12em;
  padding: 3px 7px; border-radius: var(--r-chip);
  background: var(--gold); color: var(--gold-ink);
}

/* The keyboard equivalent of "lifted". Dashed rather than solid so it never
   reads as the focus ring it sits next to. */
.mgr-card.kb-held,
.wz-thumb.kb-held { outline: 2px dashed var(--gold); outline-offset: 3px; z-index: 40; }

/* A drag is a position change, and animating it for someone who asked not to
   see motion is exactly what the query is for. The drag itself still works. */
@media (prefers-reduced-motion: reduce) {
  .mgr-card.dragging { scale: 1; }
  .mgr-grid.reordering .mgr-card:not(.dragging) { transition: none; }
}

/* Visually hidden, still announced. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIST & EARN PROMOTION — appended as ONE self-contained section rather than
   filed beside the rules it relates to, and that is deliberate. PR 766 is
   open and edits three points inside the PROFILE region (.profile-head,
   .welcome h1, and the run just above `profile bio + edit`); filing these
   there would put two in-flight branches on the same lines for no benefit.
   Nothing below alters an existing declaration, so the two merge in either
   order. Specificity carries the overrides, not source position:
   `.ph-bio-row .ph-bio` (0,2,0) beats `.ph-bio` (0,1,0) wherever it sits.
   ══════════════════════════════════════════════════════════════════════════ */

/* ================= LIST & EARN PROMOTION (Blake 2026-08-31) =================
   Everything here is built from tokens already in the sheet (--gold, --card,
   --hairline, --ink-muted, the .co-card shell) so the promotion inherits day
   and night for free and cannot drift from the palette on a mode change. */

/* The Wallet offer — the only pre-opt-in surface. Gold left edge rather than a
   gold fill: it sits inside a card that already has chips and badges, and a
   filled block there would outrank the balance it sits next to. */
.promo-offer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 12px;
  border: 1px solid var(--hairline-card); border-left: 3px solid var(--gold);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.promo-offer-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.promo-eyebrow { color: var(--gold-text); letter-spacing: 0.14em; }
.promo-offer-head { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.promo-offer-sub { font-size: 13.5px; line-height: 1.5; }
.promo-offer-fine { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.promo-start { flex: none; height: 46px; padding: 0 20px; }

/* The post-opt-in Wallet row. Same shape as walRow so the section reads as one
   list, but it is a <button> because it navigates. */
.promo-live-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 0; text-align: left;
  border-bottom: 1px solid var(--hairline-card);
}
.promo-live-go { margin-left: auto; flex: none; color: var(--gold-text); font-weight: 600; font-size: 13px; }

/* The profile chip. Inherits .level-chip so it matches the tier chip beside it
   exactly — same type, same radius — and only the pointer marks it as a link. */
.promo-chip { cursor: pointer; }
/* The promo chips sit BESIDE the bio, not up in the title row (Blake,
   2026-08-31 — in the title row they read as a second identity badge next to
   the tier chip, which is what looked wonky: a 3-day countdown is not who you
   are). This row is the home for EVERY active promo, so it is a wrapping
   container from the start rather than a slot for one.

   .ph-bio takes `flex: 0 1 auto`, deliberately NOT 1: with flex-grow the
   empty-bio case (a new account, which is exactly who this promotion targets)
   would stretch to full width and shove the chips to the far right, away from
   the text they belong to. At 0 they sit immediately after the bio, or at the
   left margin when there is no bio yet. */
.ph-bio-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.ph-bio-row .ph-bio { margin-top: 0; flex: 0 1 auto; }
/* An empty bio must leave NO trace, or the flex `gap` still fires against
   a zero-width paragraph and indents the chips 14px past the margin every
   other line on the page sits on. Measured: chip x=110 against .sub x=96.
   That is the DEFAULT case for the audience this promotion targets — a
   new account has no bio yet — so it is the state to get right first. */
.ph-bio-row .ph-bio:empty { display: none; }
.ph-promos { display: flex; gap: 8px; flex-wrap: wrap; flex: none; padding-top: 1px; }
.promo-chip:hover { background: color-mix(in srgb, var(--gold) 26%, transparent); }

/* ── The progress page ── */
/* Longhand, NOT the `padding: 30px 0 70px` shorthand that .profile uses:
   .wrap supplies `padding: 0 32px` and the shorthand silently zeroes it,
   which put this page's content flush against the viewport edge while the
   Wallet page it hangs off stayed inset. Measured: padL 0 here vs 32px on
   .wallet. Vertical-only longhand leaves .wrap's inset alone. */
.promo-page { padding-top: 30px; padding-bottom: 70px; }
.promo-hero { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.promo-hero-amt { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 56px); line-height: 1; color: var(--gold-text); }
.promo-hero-unit { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink-muted); margin-left: 10px; }
/* The bar is the only progress indicator; the numbers under it repeat it in
   words, so a color-blind or zoomed reader never depends on the fill alone. */
.promo-bar { height: 8px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.promo-bar-fill { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.promo-hero-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.promo-hero-line span { color: var(--ink-muted); }
.promo-hero-sub { font-size: 14.5px; line-height: 1.55; }
.promo-hero-fine { font-size: 13px; color: var(--ink-muted); line-height: 1.55; }

.promo-locked { padding: 20px 24px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.promo-locked-amt { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--gold-text); flex: none; }
.promo-locked-sub { font-size: 13px; color: var(--ink-muted); line-height: 1.55; flex: 1; min-width: 220px; }

.promo-ladder { padding: 6px 24px; }
.promo-rung {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--hairline-card);
}
.promo-rung:last-child { border-bottom: none; }
.promo-rung-amt { font-family: var(--font-display); font-weight: 700; font-size: 20px; width: 62px; flex: none; }
.promo-rung-terms { font-size: 14px; }
.promo-rung-state { margin-left: auto; font-size: 12.5px; color: var(--ink-muted); }
/* The open window is the only rung in gold; a closed one dims rather than
   disappearing, because the ladder's whole job is showing what is still below. */
.promo-rung.now .promo-rung-amt, .promo-rung.now .promo-rung-state { color: var(--gold-text); }
.promo-rung.now .promo-rung-state { font-weight: 600; }
.promo-rung.past { opacity: 0.45; }
/* The rung you actually won: gold like the open one, but it keeps full
   opacity while every other rung dims, so a finished ladder still reads
   at a glance as "this is the one that paid". */
.promo-rung.won .promo-rung-amt, .promo-rung.won .promo-rung-state { color: var(--gold-text); }
.promo-rung.won .promo-rung-state { font-weight: 600; }
.promo-hero-amt.dim { color: var(--ink-muted); }

@media (max-width: 720px) {
  .promo-start { width: 100%; }
  .promo-rung-state { margin-left: 0; width: 100%; }
}

/* The profile actions on a phone (Blake, 2026-09-15). The four controls did
   not fit one line: at 390px they wrapped, and .btn-exchange's desktop
   margin-left:auto pushed the first line right and left a gap on the left.
   Settings now sits beside Share in the name row (.ph-icons). Here, List an
   Item takes the full width and Edit profile and My Wallet split the row under
   it, all at one height. Own profile only: a public profile's Follow and
   Message keep their row. Kept here rather than in the 720px rule above so this
   section stays additive. */
@media (max-width: 720px) {
  .ph-actions-own { display: grid; grid-template-columns: 1fr 1fr; }
  .ph-actions-own #ph-listitem { grid-column: 1 / -1; margin-left: 0; }
  .ph-actions-own > button { height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============ FEED CARD ⋯ MENU — THE CONTAINING-BLOCK FIX ============
   `.lcard:hover` lifts the card with a transform (line ~496). Any non-none
   transform makes that element the containing block for `position: fixed`
   descendants — so the ⋯ dropdown, which the opener positions with viewport
   coordinates from getBoundingClientRect, has those coordinates re-read as
   card-relative the moment you hover. Measured on the live markup: the menu
   asked for top 762px and landed at 1387px. Off-screen. That is why the menu
   appears not to open, appears once you move OFF the card, and then runs from
   the cursor as you move back onto it.

   🔴 DO NOT "OPTIMIZE" THIS BACK TO A TRANSFORM. The hover lift may look like
   a free win for compositing; it is what breaks the menu. `top` with
   `position: relative` was the other candidate and was rejected: .lcard is
   position:static today, and making it relative would re-parent every
   absolutely-positioned child in the card.

   `transition: none` on the transform is load-bearing too. A transform
   ANIMATING toward none is still a non-none transform, so a 0.22s ease would
   hold the containing block open for 0.22s — long enough to place the menu
   wrong and then visibly snap it. The card settles instantly; the shadow keeps
   its easing, so the change reads as the card seating rather than a glitch.

   🪤 THIS PAIRING IS NOT PINNED BY A TEST, and an earlier draft of this very
   comment claimed it was. It is two rules in one stylesheet that only work
   together: `.lcard:hover` sets a transform, this removes it while a menu is
   open. Delete either half and the bug returns with nothing red anywhere,
   because no test can see a containing block. A demoContract anchor would
   catch it; worth adding once the branches in flight stop all moving that
   file's pinned count. */
.lcard.menu-open, .lcard.menu-open:hover {
  transform: none;
  transition: box-shadow 0.22s ease;
}
/* ==== IMAGE SCALE (Blake, ratified 2026-08-30) ====
   Listing-detail gallery -30%, deal-thread offer slots -15% on desktop.
   Container width only — aspect-ratio + object-fit untouched, so framing/crop
   is byte-identical to today, just smaller. Mobile (≤1024px) unchanged. */
@media (min-width: 1025px) {
  .detail-grid { grid-template-columns: minmax(0, 4.9fr) minmax(0, 7.1fr); }
  .thread-view .gg-grid { width: 85%; margin-inline: auto; }
}

/* ==== SUBNAV + MOBILE IMAGE SCALE (Blake, ratified 2026-08-30) ==== */
/* Item 1 mobile: detail gallery -30% — container only, aspect/crop identical */
@media (max-width: 1024px) {
  .gallery { max-width: 70%; margin-inline: auto; }
}
/* Item 1 mobile: deal-thread offer slots live side by side (was stacked full-width) */
@media (max-width: 720px) {
  .thread-view .gg-grid { grid-template-columns: 1fr auto 1fr; }
  .thread-view .gg-grid .vd-swap { justify-self: auto; }
}

/* Desktop subcategory flyout (Blake ruling #4: full-width panel, lead sub in gold) */
#subnav-panel {
  position: fixed; left: 0; right: 0; z-index: 60; display: none;
  background: var(--card); border-bottom: 1px solid var(--hairline-card);
  box-shadow: 0 18px 40px -24px rgba(12, 26, 46, 0.35);
}
#subnav-panel.open { display: block; }
.subnav-row {
  display: flex; align-items: center; gap: 4px 20px; padding: 13px 0;
  /* one line ALWAYS (Blake 2026-08-30) — dense mode below handles long lists */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.subnav-link { white-space: nowrap; flex: 0 0 auto; }
/* one size for every sub label, however long the list (Blake 2026-09-04): the row
   scrolls sideways instead of shrinking type. `.dense` only tightens the gap now. */
.subnav-row.dense { gap: 4px 12px; }
@media (max-width: 1180px) {
  .subnav-row.dense { gap: 4px 10px; }
}
.subnav-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-label); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: none; border: none; padding: 4px 0; cursor: pointer;
}
.subnav-link:hover { color: var(--gold); }
.subnav-link.lead { color: var(--gold-text); font-weight: 700; }
.subnav-link.all { margin-left: auto; color: var(--ink-muted); }
.subnav-link.all:hover { color: var(--gold); }
.subnav-pills { margin-bottom: 6px; }

/* Mobile mega-tile flip (Blake ruling #3). NOT true 3D: .mega-tile has
   overflow:hidden, which forces transform-style flat and kills backface
   tricks (burned 2026-08-30) — so this is the squeeze-flip illusion: the
   tile scales X through zero and the faces swap at the midpoint. <img>
   stays firstElementChild for the empty-tile fixup. */
.mega-tile.flipped { animation: megaflip 0.45s ease; }
.mega-tile .mega-back { display: none; }
.mega-tile.flipped .mega-back { display: flex; animation: megaback 0.45s linear; }
@keyframes megaflip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.04); } 100% { transform: scaleX(1); } }
@keyframes megaback { 0%, 50% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 1; } }
.mega-tile .mega-back {
  position: absolute; inset: 0;
  background: var(--canvas); /* cream, matching the site (Blake 2026-08-30) */
  border-radius: inherit;
  flex-direction: column; align-items: flex-start; /* NOT center: centered flex + overflow clips the top rows unscrollably */
  justify-content: flex-start;
  gap: 2px; padding: 10px 12px; overflow-y: auto;
}
.mega-tile .mega-back-title {
  width: 100%;
  /* The back face is a flex column of a fixed height (inset: 0 in the square
     tile) that scrolls. A row must keep its own height (flex: none): with the
     one-line overflow: hidden below, a row's min-height resolves to 0 and the
     default flex-shrink squeezes every row to ~4.5px so nothing ever
     overflows to scroll (card 1218355278664567). */
  flex: none;
  font-family: var(--font-label); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  padding: 2px 0 5px; margin-bottom: 3px;
  border-bottom: 1px solid var(--hairline-card);
  cursor: pointer;
}
.mega-tile .mega-back-link {
  flex: none; /* keeps its line height in the scrolling column; see .mega-back-title */
  font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  padding: 2px 0; cursor: pointer;
  /* one line, never wrapped (Blake 2026-09-04): a long sub truncates with an
     ellipsis inside the tile rather than breaking onto a second row */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mega-tile .mega-back-link.lead { color: var(--gold-text); font-weight: 700; }

/* ============================ IN PERSON (card 1218886635703438) ============================
   Mocks HANDOFF-1..3. Tokens only, so night inverts on its own; the one thing
   that does NOT invert is the code card, white in both modes on purpose (phone
   cameras read dark on light far more reliably). The outline buttons follow
   the pop-up's rule (collectionActionsPopup): day accent, night gold, the gold
   outline reading 2.52:1 on the white card. */
.cta-row.ip-two { gap: 10px; }
/* A 50% basis, not 0 or auto: with a 0 basis Chromium splits the free space
   after each button's own padding and border, and the outlined one came out
   2 px wider (measured at 390 px); equal bases shrink equally. */
.cta-row.ip-two .thread-cta { flex: 1 1 50%; padding: 0 10px; white-space: nowrap; min-width: 0; }
.thread-cta.outline.ip-open { border-color: var(--accent); color: var(--accent); }
.thread-cta.outline.ip-open:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-deep); }
:scope[data-mode="night"] .thread-cta.outline.ip-open { border-color: var(--gold); color: var(--gold); }
:scope[data-mode="night"] .thread-cta.outline.ip-open:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); color: var(--gold); }
.ip-helper { color: var(--ink-muted); font-size: 13px; line-height: 1.5; text-align: center; margin-top: 8px; }

.ip-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.ip-modal .rv-head { align-items: flex-start; margin-bottom: 14px; }
.ip-modal .rv-head h3 { line-height: 1.2; min-width: 0; overflow-wrap: anywhere; font-size: 22px; }

.ip-page { max-width: 520px; margin: 0 auto; padding: 22px 16px 44px; }
.ip-eyebrow { color: var(--ink-muted); }
.ip-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; margin: 8px 0 16px; }
.ip-card {
  background: var(--card); border: 1px solid var(--hairline-card); border-radius: var(--r-card);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 10px;
}
.ip-card.ip-state { align-items: center; text-align: center; gap: 12px; }
.ip-card.ip-state b { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.35; }
.ip-with { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ip-with .acc-meta b { font-size: 15px; }
.ip-rows { display: flex; flex-direction: column; gap: 7px; }
.ip-row { font-size: 14px; }
.ip-row span { white-space: normal; overflow: visible; }
/* the cash glyph the size of a thumbnail, so "You pay · $1,480 cash" stays on one line in the card */
.ip-row .tbl-cash { flex: 0 0 34px; width: 34px; height: 34px; }
.ip-line { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }
.ip-hint { color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 2px 0 0; }
.ip-fee { color: var(--ink); }
/* the slot stays in the layout while empty: the element's host is placed
   over it and gives it its height (inPerson.ts placeHost) */
.ip-pay { min-height: 0; }
.ip-payerr { color: var(--destructive-text); font-size: 13.5px; line-height: 1.45; margin: 0; }
/* The sheet is a .modal, and `.modal p` (0,1,1) outranks `.ip-payerr` (0,1,0), so every error line in the sheet
   painted muted ink while the scanned page painted it red. (0,2,0) wins for the error color only (IP4a round 2). */
.ip-modal .ip-payerr { color: var(--destructive-text); }
.ip-btn {
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--gold); color: var(--gold-ink); border: 1.5px solid var(--gold);
  border-radius: var(--r-block);
  font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: filter 0.15s, background 0.15s, transform 0.12s;
}
.ip-btn:hover { filter: brightness(1.06); }
.ip-btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.ip-btn.outline { background: none; border-color: var(--accent); color: var(--accent); border-radius: var(--r-pill); }
.ip-btn.outline:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-deep); filter: none; }
:scope[data-mode="night"] .ip-btn.outline { border-color: var(--gold); color: var(--gold); }
:scope[data-mode="night"] .ip-btn.outline:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.ip-link { display: block; width: 100%; min-height: 44px; text-align: center; color: var(--accent); font-family: var(--font-body); font-weight: 600; font-size: 14px; padding: 6px 0; }
.ip-link:hover { color: var(--accent-deep); }
.ip-foot { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; text-align: center; margin: 0; }

.ip-code { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ip-code-card, :scope[data-mode="night"] .ip-code-card {
  /* 26px around a 184px symbol of 29 modules is the four-module quiet zone the readers want */
  background: #FFFFFF; color: #0C1A2E; border-radius: 16px; padding: 26px 26px 16px;
  width: min(240px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--shadow);
}
.ip-code-card svg { width: 184px; height: 184px; display: block; fill: #0C1A2E; }
.ip-code-text { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0.2em; padding-left: 0.2em; }
.ip-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; margin: 0; }
.ip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.ip-expiry { color: var(--ink-muted); }

.ip-x1-back { z-index: 96; }
.ip-x1 { display: flex; flex-direction: column; gap: 10px; }
.ip-x1 .rv-head { margin-bottom: 4px; }
.ip-opt {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block); padding: 12px 14px;
  background: var(--card); color: var(--ink); font-family: var(--font-body);
}
.ip-opt b { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ip-opt span { color: var(--ink-muted); font-size: 13px; line-height: 1.45; }
.ip-opt:hover { border-color: var(--accent); }
.ip-opt:disabled { opacity: 0.45; }

.ip-type { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ip-type.inline { flex-direction: row; }
.ip-type.inline input { flex: 1; min-width: 0; height: 50px; }
.ip-type.inline .ip-btn { width: auto; flex: none; padding: 0 18px; }
.ip-typecode-lab { color: var(--ink-muted); font-size: 13px; margin: 6px 0 0; }
/* the payment element's host: off <body>, placed over the slot by inPerson.ts */
.ip-pay-host { box-sizing: border-box; }
.ip-pay-host:empty { display: none !important; }
.ip-confirmerr { text-align: center; }
.ip-type input {
  width: 100%; height: 50px; border: 1px solid var(--hairline-card); border-radius: var(--r-block);
  background: var(--band); color: var(--ink); text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase;
}

.ip-note span { font-size: 13.5px; color: var(--ink); }
.ip-receipt .ip-ok { margin-top: 6px; }
.ip-receipt .sum-row { margin-top: 2px; }
.ip-points span:last-child { color: var(--gold-text); font-weight: 700; }
.ip-questions a { color: var(--accent); }
/* IP5 (Blake, 2026-10-21): the waived in-person fee's $0.00 in the SOLD chip's green text (.vd-kind): the same
   literal by day, --success by night. `.ip-note .ip-zero` outranks `.ip-note span` in the deal summary; the night
   rule comes after it, so it wins that tie. */
.ip-zero, .ip-note .ip-zero { color: #3E7A1E; }
:scope[data-mode="night"] .ip-zero { color: var(--success); }
/* ============================================================
   YOUR COLLECTION ON A PHONE: TILE ACTIONS POP-UP + REMOVE IN EDIT
   (Blake 2026-09-28, card 1218941367836566)
   ============================================================ */
/* The hint under "Your Collection" names the gesture the device has: hover on
   a desktop, tap on a phone. Both are painted; CSS picks one on first paint. */
.hint-tap { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }

/* On a phone, the tap that opens the pop-up also FOCUSES the tile (tabindex),
   and :focus-within would lay the overlay's small buttons over the photo under
   the pop-up and leave them there after it closes. A pointer's focus reveals
   nothing; a keyboard's still does, so Tab and Space keep their path: the tile
   itself (:focus-visible; :has() sees only descendants) or a button in it.
   Touch devices only; a browser without :has() drops this one rule and keeps
   the reveal it had. */
@media (hover: none) {
  /* HOTFIX (Blake, 2026-10-03, at the show): on a phone the overlay must never
     paint at all. iOS applies :hover on the first tap, so the old reveal put the
     small buttons on the photo; the focus rule above then hid them the instant a
     finger PRESSED one (the press focuses the button, :focus-within matched), so
     the release fell through to the tile and opened the pop-up instead of the
     action. The pop-up is the phone's UI: the tile's tap opens it, and only a
     keyboard's focus (focus-visible) reveals the overlay. */
  .mgr-card[data-mgritem]:hover { transform: none; }
  .mgr-card[data-mgritem]:hover .mgr-overlay,
  .mgr-card[data-mgritem]:focus-within .mgr-overlay { opacity: 0; pointer-events: none; }
  .mgr-card[data-mgritem]:focus-visible .mgr-overlay,
  .mgr-card[data-mgritem]:has(:focus-visible) .mgr-overlay { opacity: 1; pointer-events: auto; }
}

/* The pop-up (mock M1/M2), in Quick Edit's shape: the item's name as the
   heading, its photo and status in the preview row, then every action at
   thumb size (≥ 44 px), stacked full width. List It is the filled gold
   primary (cta-primary's fill and corner); the rest are outline pills in the
   day accent — the gold outline reads 2.52:1 on the white card, under the
   4.5:1 text asks for — and gold at night, where the amber clears 9:1. */
.mgract-modal .rv-head { align-items: flex-start; margin-bottom: 14px; }
/* A title with no space to break at (a hyphenated card name) wraps inside the
   sheet rather than pushing the ✕ out; min-width: 0 is what lets a flex item shrink. */
.mgract-modal .rv-head h3 { line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.mgract-preview { margin-bottom: 20px; }
.mgract-preview .acc-meta span { color: var(--ink); font-size: 14px; }
.mgract-actions { display: flex; flex-direction: column; gap: 10px; }
.mgract-btn {
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 1.5px solid var(--accent); color: var(--accent);
  background: none; border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
/* The pressed tint lowers the accent to 4.35:1; the deeper accent reads 6.6:1
   on it (collectionActionsPopup.test.ts computes the pair). Night's own hover
   rule keeps gold. */
.mgract-btn:hover, .mgract-btn:active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-deep); }
:scope[data-mode="night"] .mgract-btn { border-color: var(--gold); color: var(--gold); }
:scope[data-mode="night"] .mgract-btn:hover, :scope[data-mode="night"] .mgract-btn:active { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.mgract-btn.primary, :scope[data-mode="night"] .mgract-btn.primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); border-radius: var(--r-block); }
.mgract-btn.primary:hover, :scope[data-mode="night"] .mgract-btn.primary:hover { background: var(--gold); filter: brightness(1.06); }
.mgract-locked { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-muted); font-size: 12.5px; padding-top: 2px; }
.mgract-locked svg { width: 13px; height: 13px; flex: none; }

/* Quick Edit and the pop-up scroll inside the sheet on a short phone. The
   site's .modal is centered with no height limit, so a sheet taller than the
   viewport (Quick Edit with Remove under it is ~715 px; an iPhone SE shows
   ~553 px with Safari's bars) lost its top AND bottom, and Remove with them.
   The whole sheet scrolls, as .promo-sheet does (the want sheet pins its head
   and scrolls a list inside; these have no list). The ✕ does not scroll with
   it: .cm-close is absolute against the fixed backdrop, so it stays at the
   screen's corner (measured in Chromium at 375x553, before and after the
   scroll). The vh line is for Safari before 15.4, which drops dvh. */
#editl-back .modal, .mgract-modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }

/* Remove, at the bottom of both edit screens (mocks Q1, M3): under a hairline
   rule below More Details in Quick Edit, below Back and Next in the full edit.
   Quiet, red, and the last thing on the screen; the two-tap confirm is
   collectionRemove.ts's. */
.edit-remove-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline-card); }
.wizard .edit-remove-wrap { margin-top: 26px; padding-top: 24px; }
.edit-remove {
  display: block; width: 100%; min-height: 50px; padding: 12px 16px; line-height: 1.2;
  border: 1.5px solid color-mix(in srgb, var(--destructive) 55%, transparent); color: var(--destructive-text);
  background: none; border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 700; font-size: 13.5px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s;
}
.edit-remove:hover, .edit-remove:active { background: color-mix(in srgb, var(--destructive) 10%, transparent); border-color: var(--destructive); }

/* Pop-up scroll areas keep a fling inside the pop-up (walk #11, Blake
   2026-10-01): at the end of the list the page behind does not take over.
   app.js also holds the page while a pop-up is open (popScrollAfterRender). */
.rv-scroll, .share-list, .cm-list, .msg-rail-msgs, .ad-list, .counter-composer,
.promo-sheet, .wz-chips.wz-scroll, #auth-modal.auth-modal-back, .inbox .inbox-grid .thread-list { overscroll-behavior: contain; }

/* ============ THE SUBMITTED SHEET (walk #12, Blake 2026-10-01) ============
   The app's PublishedSheet.tsx in the site's tokens: a close on a band-colored
   circle; the item row (cover, title, value, status chip); the heading and
   its sentence; "Add another item" as the gold pill and "Continue browsing" as an
   outlined pill of the same size. A bottom sheet on a phone, as in the app;
   a centered card from 620px up. Gold text on the day card uses --gold-text
   (the bare gold measures under 3:1 on white). */
.pub-sheet-back { z-index: 94; overscroll-behavior: contain; }
.modal.pub-sheet {
  width: min(440px, 92vw); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  text-align: left; padding: 8px 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--hairline-card);
}
.pub-sheet-top { display: flex; justify-content: flex-end; padding: 4px 0; }
.pub-sheet-x {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--band); color: var(--ink); font-size: 13px; line-height: 1;
}
:scope[data-mode="night"] .pub-sheet-x { background: var(--hairline-card); }
.pub-sheet-x:hover { filter: brightness(0.96); }
.pub-sheet-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--hairline-card); border-radius: var(--r-block);
}
.pub-sheet-thumb { width: 56px; height: 56px; flex: none; border-radius: var(--r-block); object-fit: cover; background: var(--band); display: block; }
:scope[data-mode="night"] .pub-sheet-thumb { background: var(--hairline-card); }
.pub-sheet-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pub-sheet-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.pub-sheet-value { font-size: 13px; color: var(--ink-muted); }
.pub-sheet-chip {
  flex: none; padding: 4px 10px; border-radius: var(--r-chip); border: 1px solid var(--gold);
  color: var(--gold-text); background: transparent;
  font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.pub-sheet-chip.live { background: var(--gold); color: var(--gold-ink); }
.modal .pub-sheet-head { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 4px 0 0; }
.modal .pub-sheet-body { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.pub-sheet-pill {
  width: 100%; height: 52px; border-radius: 26px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  transition: filter 0.15s, transform 0.12s;
}
.pub-sheet-pill:hover { filter: brightness(1.05); }
.pub-sheet-pill:active { transform: scale(0.99); }
.pub-sheet-pill.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); margin-top: 0; }
.pub-sheet-pill.outline:hover { filter: none; background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 619px) {
  .modal-back.pub-sheet-back { align-items: end; justify-items: stretch; }
  .modal.pub-sheet {
    width: 100%; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px));
  }
}

/* ============ PRE-SHOW 6 — website look and feel (Blake 2026-10-01) ============ */

/* #1 HERO. Two columns only from 1200px, with BARTER. on its own line, so the
   headline never wraps mid-phrase beside the board. Under 1200px it is ONE
   centered column at every width, headline on one line. Before this the hero
   was two columns down to 1025px (headline wrapping at 1030-1210), one column
   flush LEFT from 721-1024, and centered only at 720 and under. The gutter fix
   is the longhand .hero padding in the HERO section above. */
@media (min-width: 1200px) {
  .hero-line .gold { display: block; }
}
@media (max-width: 1199.98px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "left" "board" "ctas";
    gap: 26px;
    justify-items: center;
  }
  .hero-left { text-align: center; }
  .hero-line { white-space: nowrap; }
  .hero-support { margin-left: auto; margin-right: auto; }
  .hero-board { max-width: 100%; justify-self: center; }
  .board-rows { margin-left: auto; margin-right: auto; }
  .board-label { justify-content: center; }
  .hero-ctas { align-items: center; }
  .vitals { justify-content: center; text-align: center; }
}
@media (max-width: 720px) {
  .hero-line { font-size: clamp(30px, 10.2vw, 40px); }
  /* the ≤720px stack stretches the trio to one shared width (ROUND-13) */
  .hero-ctas { align-items: stretch; }
}

/* #22 The profile username and the stat numbers paint in ink from the first
   frame. They inherited body's color, and src/index.css transitions every
   element's color over 0.6s, so the name faded in from the page's starting
   color (measured at night: the first ~18 frames of @handle were day ink,
   rgb(12,26,46), on the night canvas before easing to cream). Their own color
   stops inheriting the animating value, and no color transition on these two
   means the theme's ink applies on the first frame. */
.d-title, .stat .n { color: var(--ink); transition: none; }

/* #13 The sticky Make-offer bar tucks away while the offer box's own Make offer
   button is on screen (wireOfferBarTuck in app.js toggles .tucked). A tucked bar
   is also visibility:hidden so keyboard and screen-reader users cannot land on
   an invisible button. A transition uses the transition-* values of the state
   it is heading INTO, so the delayed visibility lives on .tucked (hide after
   the fade-out finishes) and the zero-delay one on the base rule (show at once,
   then fade in). */
.mobile-offer-bar { transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s; }
.mobile-offer-bar.tucked {
  opacity: 0; transform: translateY(100%); pointer-events: none; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
@media (prefers-reduced-motion: reduce) { .mobile-offer-bar, .mobile-offer-bar.tucked { transition: none; } }

/* #25 The Exchange on a public profile, phone: a labeled button on the
   "Collection (N)" line instead of a glyph-only pill. The copy and top-row
   wrappers dissolve (display: contents) so their children sit on the banner's
   grid; the DOM, and the .exch-banner-toprow .count-chip / .sec-count that
   profileFixups.ts patches, are unchanged. */
@media (max-width: 720px) {
  .exch-banner.balanced {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px; row-gap: 4px;
  }
  .exch-banner.balanced .exch-banner-copy,
  .exch-banner.balanced .exch-banner-toprow { display: contents; }
  .exch-banner.balanced .exch-banner-toprow .sec-title { grid-column: 1; grid-row: 1; margin: 0; }
  .exch-banner.balanced .exch-banner-toprow .count-chip { grid-column: 2; grid-row: 1; justify-self: start; }
  .exch-banner.balanced .btn-exchange.big { grid-column: 4; grid-row: 1; margin-left: 0; }
  .exch-banner.balanced .exch-banner-toprow .sec-count { grid-column: 1 / -1; grid-row: 2; }
  .exch-banner.balanced .exch-banner-sub { grid-column: 1 / -1; grid-row: 3; }
  .exch-banner.balanced .btn-exchange.big span { display: inline; }
  .exch-banner.balanced .btn-exchange.big .exch-open { display: none; }
  /* Blake 2026-10-02 (option B): the pill read tall beside the Collection (N)
     chip on a phone; 40px matches the desktop .btn-exchange. Type, padding
     and glyph unchanged; the <=380 rule below drops to 40px to match. */
  .exch-banner.balanced .btn-exchange.big { gap: 8px; padding: 0 14px; height: 40px; }
}
@media (max-width: 380px) {
  .exch-banner.balanced { column-gap: 8px; padding: 12px; }
  .exch-banner.balanced .btn-exchange.big { padding: 0 11px; height: 40px; font-size: 11px; letter-spacing: 0.06em; gap: 6px; }
  .exch-banner.balanced .btn-exchange.big svg { width: 15px; height: 15px; }
}
/* At 320 with a two-digit Collection chip the labeled button ran ~6px past the
   banner; trim it a little further below 340. */
@media (max-width: 340px) {
  .exch-banner.balanced { column-gap: 6px; }
  .exch-banner.balanced .btn-exchange.big { padding: 0 8px; font-size: 10.5px; letter-spacing: 0.02em; gap: 5px; }
}

/* #14 Under 374px the signed-in phone nav needs 368px; tighten its spacing so
   the bell is never cut off at 360. */
@media (max-width: 373.98px) {
  .nav-inner { gap: 4px; padding: 0 8px; }
  .nav-actions { gap: 4px; }
}
/* #25 phone label reads "The Exchange ⇄": the glyph follows the words */
@media (max-width: 720px) {
  .exch-banner.balanced .btn-exchange.big svg { order: 2; }
}

/* Completed deal: "View Receipt" beside "★ Rate this deal", or beside the rated chip once
   rated (app.js, the `.cta-row.done-two` in offerBlock). The base .cta-row is the one-button
   row (flex-end, no gap), so without a class of its own this pair touched and sat flush right
   (Blake, mobile web staging pass 2026-10-02: View Receipt from x≈160 of 390). Centered with
   the in-person pair's 10px gap; on phones the pair also shares the row 50/50 the way
   .cta-row.ip-two does (the same 50% basis, for the same equal-width reason), with the
   padding down to 10px so both labels stay on one line at 360 and 390. Desktop keeps each
   button at its own width, centered. The chip loses its own 8px margin here: the gap is the
   spacing now. */
.cta-row.done-two { gap: 10px; justify-content: center; }
.cta-row.done-two .thread-cta { white-space: nowrap; min-width: 0; }
.cta-row.done-two .rated-chip { margin-left: 0; }
@media (max-width: 720px) {
  .cta-row.done-two .thread-cta { flex: 1 1 50%; padding: 0 10px; }
  .cta-row.done-two .rated-chip { flex: 1 1 50%; justify-content: center; }
}
/* 360-wide phones: at the 0.12em tracking "★ RATE THIS DEAL" measured 117px of its half's 120px
   content box (Chromium, Rajdhani loaded), so the tracking eases a step (111px measured) before a
   phone's text rendering could carry it into the pill's edge. The font itself is never touched. */
@media (max-width: 374px) {
  .cta-row.done-two .thread-cta { letter-spacing: 0.09em; }
}

/* ═══ PHONE DEAL BRIEF (Blake 2026-10-02, card 1219082576980545) ═══
   On a phone each deal's plate in the thread folds into a two-line brief that
   expands on tap (app.js dealBrief / dealBriefExpanded). The plate stays in
   the DOM; .brief-collapsed only hides it. Everything here is phone-scoped —
   on a wider screen the brief is not painted and the plate is untouched, so a
   tablet rotated past 720px simply shows the full plate again. */
.deal-brief { display: none; }
@media (max-width: 720px) {
  .deal-brief {
    display: flex; flex-direction: column; gap: 4px;
    width: calc(100% + 32px); margin: 0 -16px; text-align: left;
    padding: 11px 16px 12px;
    background: color-mix(in srgb, var(--gold) 7%, var(--card));
    border-bottom: 1px solid var(--hairline-card);
  }
  /* first in the timeline: the brief takes the plate's old seat against the head */
  .timeline .deal-brief:first-child { margin-top: -16px; }
  .deal-brief-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  .deal-brief-stamp { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deal-brief-tap { flex: none; color: var(--accent); font-family: var(--font-label); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
  .deal-brief-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deal-brief[aria-expanded="true"] { background: var(--card); border-bottom-style: dashed; }
  /* the plate: hidden (not removed) while its brief is collapsed; tucked up
     under the brief's dashed line when open — the timeline's 10px gap and the
     :first-child -16px no longer apply to it, the brief holds that seat */
  .timeline .tl-offer.brief-collapsed { display: none; }
  .timeline .deal-brief[aria-expanded="true"] + .tl-offer { margin-top: -10px; }
}

}