/* Curb — layout + components. The look comes from the shared
   Lumistead tokens; this file only does layout and a few cozy
   marketplace-specific touches. tokens.css is vendored from
   Lumistead-Standard/lumistead-tokens.css — keep it in sync;
   don't hardcode a color a token already names. */

@import "./tokens.css?v=2";

/* Curb's signature accent — the ONLY palette override allowed.
   Same value lives in lumistead.app.json `accent`. */
:root {
  --accent: #245a37;
  --topbar-h: 68px;
}

* { box-sizing: border-box; }
body { margin: 0; }

/* ───────────────────────── top bar ───────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,243,234,0.86);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex-shrink: 0; }
.brand-mark {
  font-size: 1.5rem; line-height: 1;
}
.brand-words { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.brand-words .lumi-eyebrow { font-size: 0.56rem; letter-spacing: 0.24em; }
.brand-name { font-size: 1.5rem; color: var(--ink); }

.search { position: relative; flex: 1; max-width: 440px; }
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute); font-size: 1.05rem; pointer-events: none;
}
.search input {
  width: 100%;
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 10px 16px 10px 38px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.search input::placeholder { color: var(--ink-faint); }
.search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.nav { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.nav-link {
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(46,38,28,0.05); }
.nav-link.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-badge {
  display: none; font-family: var(--font-mono); font-size: 0.62rem;
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px; padding: 1px 6px; margin-left: 2px; vertical-align: 1px;
}
.nav-badge.show { display: inline-block; }
.nav-sell { padding: 9px 18px !important; font-size: 0.92rem; white-space: nowrap; }

/* ───────────────────────── view shell ───────────────────────── */
.view {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  min-height: calc(100vh - var(--topbar-h) - 60px);
}

.view-head { margin-bottom: var(--sp-5); }
.view-head h1 { font-family: var(--font-display); font-weight: 500; font-size: 2rem; margin: 0 0 var(--sp-2); }
.view-head p { margin: 0; }

/* hero (browse) */
.hero { margin-bottom: var(--sp-5); }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; line-height: 1.06; margin: 0 0 var(--sp-2); }
.hero h1 .accent { color: var(--accent); }
.hero p { margin: 0; max-width: 56ch; }

/* ───────────────────────── category chips ───────────────────────── */
.cats {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) 0 var(--sp-4);
  margin: 0 0 var(--sp-3); scrollbar-width: thin;
}
.cats::-webkit-scrollbar { height: 6px; }
.cats::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.cat {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-soft);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.cat:hover { transform: translateY(-1px); border-color: var(--line-2); color: var(--ink); }
.cat.active {
  color: var(--on-accent); background: var(--accent); border-color: transparent;
  box-shadow: var(--shadow);
}
.cat .cat-emoji { font-size: 1rem; }

/* ───────────────────────── filter bar ───────────────────────── */
.filters {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.filters .count { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-mute); margin-right: auto; }
.field {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 0.82rem; color: var(--ink-mute);
}
.field select, .field input {
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 7px 11px;
  transition: border-color 0.2s var(--ease);
}
.field select:focus, .field input:focus { outline: none; border-color: var(--accent); }
.field input.price-max { width: 92px; }
.toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-soft);
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 7px 13px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.toggle.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.toggle input { display: none; }

/* ───────────────────────── listing grid ───────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--sp-4);
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; text-align: left;
  box-shadow: var(--shadow);
  animation: rise 0.4s var(--ease) both;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 16px 34px -18px rgba(60,48,30,0.34);
}
.tile {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  overflow: hidden; background: #ece6da;
}
.tile .tile-emoji { font-size: 3.4rem; transition: transform 0.4s var(--ease); }
.card:hover .tile .tile-emoji { transform: scale(1.08) rotate(-3deg); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.price-pill {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.86rem;
  color: var(--ink); background: rgba(255,255,255,0.92);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
}
.price-pill.free { color: var(--on-accent); background: var(--accent); border-color: transparent; }

.heart {
  position: absolute; right: 10px; top: 10px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; border-radius: 999px; cursor: pointer; font-size: 1rem;
  color: var(--ink); background: rgba(255,255,255,0.92);
  border: 1px solid var(--line); backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.heart:hover { transform: scale(1.12); }
.heart.saved { color: #c0392b; }
.heart.saved::after { content: "♥"; }
.heart:not(.saved)::after { content: "♡"; }

.card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 5px; }
.card-title { font-weight: 600; font-size: 0.98rem; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ink-mute); }
.card-meta .dot { opacity: 0.5; }
.card-meta .where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sold-flag {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(244,239,228,0.55); backdrop-filter: blur(1px);
}
.sold-flag span {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,0.92); border: 1px solid var(--line-2);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
  padding: 6px 14px; border-radius: 999px; transform: rotate(-7deg);
}
.card.is-sold .tile-emoji { opacity: 0.5; }

/* ───────────────────────── empty states ───────────────────────── */
.empty {
  text-align: center; padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: rgba(46,38,28,0.02);
}
.empty .emoji { font-size: 2.6rem; display: block; margin-bottom: var(--sp-3); opacity: 0.8; }
.empty h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin: 0 0 var(--sp-2); color: var(--ink); }
.empty p { margin: 0 auto var(--sp-4); max-width: 42ch; }

/* ───────────────────────── detail ───────────────────────── */
.back {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.86rem; color: var(--ink-mute);
  background: none; border: none; padding: 6px 0; margin-bottom: var(--sp-4);
  transition: color 0.2s var(--ease);
}
.back:hover { color: var(--ink); }

.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--sp-6); align-items: start; }
.detail-photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center;
  background: #ece6da;
}
.detail-photo .tile-emoji { font-size: 7rem; }
.detail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.detail-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.detail-info .price { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; color: var(--ink); line-height: 1; }
.detail-info .price.free { color: var(--accent); }
.detail-info h1 { font-family: var(--font-sans); font-weight: 600; font-size: 1.5rem; margin: 0; line-height: 1.2; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.meta-rows { display: flex; flex-direction: column; gap: var(--sp-2); font-size: 0.92rem; color: var(--ink-soft); }
.meta-rows .row { display: flex; gap: 10px; align-items: center; }
.meta-rows .row .k { color: var(--ink-mute); width: 92px; flex-shrink: 0; font-size: 0.82rem; }
.desc { color: var(--ink-soft); line-height: 1.6; white-space: pre-wrap; }
.seller-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
}
.seller-card .avatar {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 600; color: var(--on-accent); flex-shrink: 0;
}
.seller-card .who { font-weight: 600; color: var(--ink); }
.seller-card .who small { display: block; font-weight: 400; color: var(--ink-mute); font-size: 0.78rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.actions .lumi-btn, .actions .lumi-btn-ghost { padding: 11px 20px; }
.actions .danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-2)); }
.actions .danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); }
.owner-note {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-sm); padding: 8px 12px;
}

/* ───────────────────────── sell form ───────────────────────── */
.sell-wrap { max-width: 680px; margin: 0 auto; }
.form-card { display: flex; flex-direction: column; gap: var(--sp-5); }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row > label { font-family: var(--font-sans); font-weight: 500; font-size: 0.86rem; color: var(--ink-soft); }
.form-row > label .hint { font-weight: 400; color: var(--ink-faint); margin-left: 6px; font-size: 0.78rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.input, .textarea, select.input {
  width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 14px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.input:focus, .textarea:focus, select.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input.with-prefix { padding-left: 28px; }
.prefix-wrap { position: relative; }
.prefix-wrap .prefix { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); font-family: var(--font-mono); }

.emoji-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-opt {
  width: 44px; height: 44px; font-size: 1.4rem; display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  cursor: pointer; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.emoji-opt:hover { transform: translateY(-2px); }
.emoji-opt.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }

.form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.preview-mini {
  display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-mute); font-size: 0.82rem;
}
.preview-mini .chip-tile {
  width: 52px; height: 52px; border-radius: var(--radius-sm); display: grid; place-items: center;
  font-size: 1.5rem; border: 1px solid var(--line); background: var(--panel-2);
}
.preview-mini .chip-tile-empty { font-size: 1.4rem; opacity: 0.5; }

/* ───────────────────────── chips (shared) ───────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--ink-soft); background: rgba(46,38,28,0.05);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.tag.cond { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

/* ───────────────────────── modal ───────────────────────── */
.modal-layer {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(34,30,24,0.38); backdrop-filter: blur(4px);
  padding: var(--sp-5); animation: fade 0.2s var(--ease);
}
.modal {
  width: 100%; max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(60,48,30,0.42); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4);
  animation: rise 0.28s var(--ease);
}
.modal h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin: 0; }
.modal .modal-sub { margin: 0; font-size: 0.88rem; }
.modal .textarea { min-height: 96px; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); }
.thread { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 200px; overflow-y: auto; }
.bubble {
  align-self: flex-end; max-width: 85%;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 14px 14px 4px 14px; padding: 8px 12px; font-size: 0.9rem; color: var(--ink);
}
.bubble small { display: block; font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-mute); margin-top: 3px; }

/* ───────────────────────── toast ───────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(0);
  z-index: 200; font-family: var(--font-sans); font-size: 0.9rem; color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px;
  box-shadow: 0 14px 34px -16px rgba(60,48,30,0.4); display: flex; align-items: center; gap: 9px;
  animation: toastin 0.32s var(--ease);
}
.toast .t-emoji { font-size: 1.05rem; }

/* ───────────────────────── footer ───────────────────────── */
.app-foot {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5);
  font-family: var(--font-mono); font-size: 0.7rem;
  display: flex; align-items: center; gap: 10px; justify-content: center;
  border-top: 1px solid var(--line);
}
.foot-dot { color: var(--accent); font-size: 0.6rem; }
.foot-sep { opacity: 0.4; }

/* ───────────────────────── utility ───────────────────────── */
.hidden { display: none !important; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastin { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* stagger the grid a touch */
.grid .card:nth-child(2) { animation-delay: 0.03s; }
.grid .card:nth-child(3) { animation-delay: 0.06s; }
.grid .card:nth-child(4) { animation-delay: 0.09s; }
.grid .card:nth-child(5) { animation-delay: 0.12s; }
.grid .card:nth-child(6) { animation-delay: 0.15s; }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
  .brand-words { display: none; }
  .nav-link { padding: 8px 9px; }
}
@media (max-width: 680px) {
  .topbar-inner { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .search { max-width: none; }
  .nav .nav-link[data-view="browse"] { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .view { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .hero h1 { font-size: 1.9rem; }
}

/* ═══════════════ anti-peeve update: status, terms, offers, reputation ═══════════════ */

/* status chips + pending flag */
.status-chip {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; border: 1px solid transparent;
}
.status-chip.ok    { color: var(--ok);   background: color-mix(in srgb, var(--ok) 14%, transparent);   border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.status-chip.warn  { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.status-chip.muted { color: var(--ink-mute); background: rgba(46,38,28,0.05); border-color: var(--line); }

.status-flag { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(244,239,228,0.42); backdrop-filter: blur(1px); }
.status-flag span {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; transform: rotate(-6deg);
  background: rgba(255,255,255,0.92); border: 1px solid var(--line-2);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
}
.status-flag.warn span { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); }

.offers-tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
  color: var(--accent); background: rgba(255,255,255,0.92); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line-2));
  border-radius: 999px; padding: 3px 8px; backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
}

/* seller-declared terms strip */
.terms { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag.firm { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.tag.soft { color: var(--ink-soft); }

/* reputation */
.who-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seller-card .who { display: flex; align-items: center; gap: 7px; }
.verified { color: var(--ok); font-weight: 700; font-size: 0.82rem; }
.rep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-soft); }
.rep-stat.good { color: var(--ok); }
.rep-stat.bad  { color: var(--danger); }
.rep-dot { opacity: 0.4; }
.rep-since { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); }

/* owner status switcher */
.seg-wrap { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-bottom: var(--sp-1); }
.seg-label { font-size: 0.78rem; color: var(--ink-mute); }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-btn {
  font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-soft); background: transparent;
  border: none; cursor: pointer; padding: 6px 13px; border-radius: 999px; transition: all 0.2s var(--ease);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { color: var(--on-accent); background: var(--accent); }

/* make-offer nudge + offer-sent button */
.nudge { margin: 0; font-size: 0.8rem; color: var(--warn); line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 8%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line)); border-radius: var(--radius-sm); padding: 9px 12px; }
.lumi-btn.sent { filter: saturate(0.7) brightness(0.92); }

/* scam-aware composer */
.safety { font-size: 0.78rem; color: var(--cool); line-height: 1.45;
  background: color-mix(in srgb, var(--cool) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cool) 24%, var(--line));
  border-radius: var(--radius-sm); padding: 9px 12px; }
.scam-warn { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--danger); line-height: 1.45;
  background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: var(--radius-sm); padding: 10px 12px; }
.scam-warn strong { color: var(--danger); font-weight: 600; }
.scam-warn span { color: var(--ink-soft); }

/* small buttons */
.lumi-btn.small, .lumi-btn-ghost.small { padding: 7px 14px; font-size: 0.82rem; }

/* ───────────────────────── offers view ───────────────────────── */
.offers-sec { margin-bottom: var(--sp-6); }
.offers-h { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 var(--sp-4); color: var(--ink); }
.offers-empty { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: var(--sp-5); text-align: center; }

.offer-card {
  display: flex; gap: var(--sp-4); align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-3); animation: rise 0.35s var(--ease) both;
}
.offer-thumb { flex-shrink: 0; width: 84px; height: 84px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 2rem; overflow: hidden; cursor: pointer; border: 1px solid var(--line); position: relative; background: var(--panel-2); }
.offer-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer-main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1; }
.offer-title { font-weight: 600; color: var(--ink); cursor: pointer; }
.offer-title:hover { color: var(--accent); }
.offer-sub { font-size: 0.78rem; }
.offer-rows { display: flex; flex-direction: column; gap: 6px; }
.offer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.offer-amt { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1; }
.offer-amt small { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.02em; }
.offer-amt.good { color: var(--ok); }
.offer-amt.ok   { color: var(--glow); }
.offer-amt.low  { color: var(--danger); }
.offer-from { font-size: 0.82rem; color: var(--ink-soft); }
.offer-from small { color: var(--ink-mute); }
.offer-when { font-size: 0.72rem; margin-left: auto; }
.offer-msg { margin: 0; font-size: 0.88rem; color: var(--ink-soft); font-style: italic; line-height: 1.45; }
.offer-note { margin: 0; font-size: 0.8rem; color: var(--warn); }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 2px; }

.deal-badge { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); }
.deal-badge.ok    { color: var(--ok);     background: color-mix(in srgb, var(--ok) 13%, transparent);     border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.deal-badge.bad   { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.deal-badge.muted { color: var(--ink-mute); background: rgba(46,38,28,0.04); }

@media (max-width: 560px) {
  .offer-card { flex-direction: column; }
  .offer-thumb { width: 100%; height: 120px; }
  .nav .nav-link[data-view="saved"] { display: none; }
}

/* ═══════════════ listing quality: photos, gallery, specs ═══════════════ */

/* sell-form photo uploader */
.photo-drop {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  padding: 12px 16px; background: var(--bg-2); color: var(--ink-soft);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.photo-drop:hover { border-color: var(--accent); color: var(--ink); }
.photo-drop .drop-sub { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); letter-spacing: 0.02em; }
.photo-drop input[type="file"] { display: none; }

.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.photo-thumb {
  position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line-2);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb .cover-tag {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.04em;
  background: var(--accent); color: var(--on-accent); padding: 2px 6px; border-radius: 0 var(--radius-sm) 0 0;
}
.photo-thumb .rm {
  position: absolute; right: 3px; top: 3px; width: 20px; height: 20px;
  display: grid; place-items: center; border: none; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: var(--ink); font-size: 0.7rem; cursor: pointer;
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(40,30,16,0.2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.photo-thumb .rm:hover { background: var(--danger); color: var(--on-accent); }

/* detail gallery */
.detail-gallery { display: flex; flex-direction: column; gap: 0; }
.photo-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.photo-thumbs .photo-thumb { cursor: pointer; padding: 0; background: var(--bg-2); }
.photo-thumbs .photo-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* sell-form spec grid */
.spec-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.spec-section .spec-fields:empty { display: none; }
.tested-row { gap: 7px; }
.tested-row:empty { display: none; }
.spec-label { font-family: var(--font-sans); font-weight: 500; font-size: 0.86rem; color: var(--ink-soft); }
.spec-label .hint { font-weight: 400; color: var(--ink-faint); margin-left: 6px; font-size: 0.78rem; }

/* detail spec table */
.spec-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.spec-heading { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.spec-table {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2);
}
.spec-row { display: flex; gap: 12px; padding: 9px 14px; font-size: 0.88rem; }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-row .k { color: var(--ink-mute); width: 120px; flex-shrink: 0; font-size: 0.82rem; }
.spec-row .v { color: var(--ink-soft); }

/* tested badge (clones .status-chip.ok so it sits inside .chips) */
.tested-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  border-radius: 999px; padding: 4px 10px;
}

/* preview-mini cover image */
.preview-mini .chip-tile { overflow: hidden; }
.preview-mini .chip-tile img { width: 100%; height: 100%; object-fit: cover; }

/* W2 responsive — own block, append-only (do not edit existing @media in place) */
@media (max-width: 680px) {
  .spec-fields { grid-template-columns: 1fr; }
}

/* ═══════════════ market pricing intelligence: meter, deal chip, demand, drop nudge ═══════════════ */

/* SELL-FORM live price meter */
.price-meter {
  margin-top: var(--sp-2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(46,38,28,0.04);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.price-meter .pm-chip { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.price-meter .pm-reason { margin: 4px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }

/* band tints — same color-mix recipe as .nudge / .safety / .scam-warn */
.price-meter.band-free { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.price-meter.band-free .pm-chip { color: var(--accent); }
.price-meter.band-no-comps { border-color: var(--line); background: rgba(46,38,28,0.04); }
.price-meter.band-no-comps .pm-chip { color: var(--ink-mute); }
.price-meter.band-way-under { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.price-meter.band-way-under .pm-chip { color: var(--warn); }
.price-meter.band-under { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.price-meter.band-under .pm-chip { color: var(--ok); }
.price-meter.band-fair { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.price-meter.band-fair .pm-chip { color: var(--ok); }
.price-meter.band-high { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.price-meter.band-high .pm-chip { color: var(--warn); }
.price-meter.band-way-over { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.price-meter.band-way-over .pm-chip { color: var(--danger); }
.price-meter.band-absurd-low { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.price-meter.band-absurd-low .pm-chip { color: var(--danger); }

/* BUYER deal chip (detail chips row) — same shape as .status-chip */
.deal-chip {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; border: 1px solid transparent;
}
.deal-chip.great { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.deal-chip.fair { color: var(--ink-soft); background: rgba(46,38,28,0.05); border-color: var(--line); }
.deal-chip.high { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.deal-chip.way-over { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* COMP-RANGE mini-row (detail, under price) */
.comp-range { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); margin-top: -6px; }

/* DEMAND line (detail + card) */
.demand-line { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); letter-spacing: 0.02em; }
.card-demand { font-family: var(--font-mono); font-size: 0.64rem; color: var(--ink-faint); margin-top: 2px; }

/* PRICE-DROP nudge (Your Stall) — reuses the .nudge warn aesthetic */
.stall-check { margin-bottom: var(--sp-6); }
.stall-check-h { margin-bottom: var(--sp-4); }
.drop-nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--line));
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: var(--sp-3);
}
.drop-nudge .dn-title { font-weight: 600; color: var(--warn); }
.drop-nudge .dn-msg { flex: 1; min-width: 200px; }
.drop-nudge .lumi-btn.small { margin-left: auto; }

/* W1 responsive — own block, append-only (do not edit existing @media in place) */
@media (max-width: 560px) {
  .drop-nudge .lumi-btn.small { margin-left: 0; }
  .drop-nudge .dn-msg { min-width: 0; }
}

/* ═══════════════ trust, safety, scheduling & location ═══════════════ */

/* reputation star line (folds into the existing .rep row) */
.rep-stars { color: var(--glow); }

/* reviews panel + rows (detail page, under reputation) */
.reviews-panel {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.reviews-panel h4 { font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin: 0 0 var(--sp-1); }
.review-row { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.review-row .stars { color: var(--glow); font-size: 0.82rem; letter-spacing: 0.06em; }
.review-row .by { font-size: 0.74rem; color: var(--ink-mute); font-family: var(--font-mono); }
.review-row .note { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* 5-star picker (review modal) */
.star-pick { display: inline-flex; gap: 4px; }
.star-pick button {
  background: none; border: none; cursor: pointer; font-size: 1.6rem; line-height: 1;
  color: var(--ink-faint); transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}
.star-pick button:hover { transform: scale(1.15); }
.star-pick button.on { color: var(--glow); }

/* quiet report link (detail actions + message modal) */
.report-link {
  background: none; border: none; cursor: pointer; font-family: var(--font-sans);
  font-size: 0.78rem; color: var(--ink-mute); padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.report-link:hover { color: var(--danger); }

/* map link + distance tag (detail) — uses --cool, the info/safe color */
.map-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.map-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--cool); text-decoration: none; }
.map-link:hover { text-decoration: underline; }
.dist { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); }
.safe-note { font-size: 0.74rem; color: var(--cool); margin: 4px 0 0; }

/* scheduled pickup line (offers, both sides) */
.offer-sched { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.pickup-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.84rem; color: var(--ink-soft); font-family: var(--font-mono);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 26%, var(--line));
  border-radius: var(--radius-sm); padding: 8px 12px;
}

/* W4 responsive — own block, append-only (do not edit existing @media in place) */
@media (max-width: 560px) {
  .map-row { gap: var(--sp-2); }
  .offer-sched { width: 100%; }
}

/* ═══════════════ W3: Messages — inbox + threaded view ═══════════════ */

/* inbox list */
.inbox { display: flex; flex-direction: column; gap: var(--sp-3); }
.inbox-row {
  display: flex; gap: var(--sp-4); align-items: center;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4);
  box-shadow: var(--shadow);
  cursor: pointer; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); animation: rise 0.3s var(--ease) both;
}
.inbox-row:hover { border-color: var(--line-2); box-shadow: 0 12px 28px -16px rgba(60,48,30,0.32); }
.inbox-thumb {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 1.5rem; overflow: hidden;
  border: 1px solid var(--line); position: relative; background: var(--panel-2);
}
.inbox-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inbox-row .avatar {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 600; color: var(--on-accent); flex-shrink: 0;
}
.inbox-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inbox-top { display: flex; align-items: center; gap: 8px; }
.inbox-who { font-weight: 600; color: var(--ink); }
.inbox-listing { font-size: 0.82rem; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-snippet { font-size: 0.86rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-when { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); margin-left: auto; }
.unread-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); flex-shrink: 0; }
.inbox-row.unread .inbox-snippet { color: var(--ink); font-weight: 500; }
.inbox-row.unread .inbox-who { color: var(--ink); }

/* thread view */
.thread-view { max-width: 640px; margin: 0 auto; }
.thread-listing {
  display: flex; gap: var(--sp-3); align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3); cursor: pointer; margin-bottom: var(--sp-4);
}
.thread-flow { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.bubble.them {
  align-self: flex-start; background: rgba(46,38,28,0.05);
  border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; color: var(--ink-soft);
}
.bubble.system {
  align-self: center; max-width: 92%; text-align: center; color: var(--cool);
  background: color-mix(in srgb, var(--cool) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cool) 24%, var(--line));
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.82rem;
}

/* intent chips */
.intent-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.intent-chip {
  font-family: var(--font-sans); font-size: 0.82rem; color: var(--ink-soft);
  background: rgba(46,38,28,0.05); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: all 0.2s var(--ease);
}
.intent-chip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

/* above-asking caution banner (#19) — reuses the scam-warn danger palette */
.above-ask {
  display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--danger); line-height: 1.45;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--sp-3);
}
.above-ask strong { color: var(--danger); font-weight: 600; }

/* stale-thread nudge reuses .nudge; just tint its link */
.thread-nudge a { color: var(--accent); }

/* composer */
.composer { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.composer-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* W3 responsive — own block, append-only (do not edit existing @media in place) */
@media (max-width: 560px) {
  .inbox-row { gap: var(--sp-3); }
  .nav .nav-link[data-view="stall"] { display: none; }
}

/* ─────────── two-level categories (subcategory filter + chips) ─────────── */
/* Browse: a secondary subcategory chip row under the category row. Lighter
   and slightly smaller than .cats so the hierarchy reads at a glance. */
.subcats {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  padding: 0 0 var(--sp-3); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  scrollbar-width: thin;
}
.subcats::-webkit-scrollbar { height: 6px; }
.subcats::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.subcat {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-mute);
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.subcat:hover { color: var(--ink); border-color: var(--line-2); }
.subcat.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Detail: the subcategory chip sits next to the category chip. Echoes the
   .tag.cond accent tint but a touch softer so the category still leads. */
.tag.subcat-chip {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ============================================================
   STEP 3 — title-based comps: comp range basis/avg, the
   "Similar listings" panel, and the Sell-form live peek. Styled
   with the existing theme tokens so it reads as part of the app.
   ============================================================ */

/* the comp-range line now carries an average + an honest basis suffix */
.comp-range .comp-avg { color: var(--ink-soft); }
.comp-range .comp-basis { color: var(--ink-faint); }

/* Similar listings — a horizontally scrolling row of compact cards */
.similar-panel { margin: 6px 0 2px; }
.similar-panel h4 { margin: 0 0 2px; font-size: 0.95rem; font-family: var(--font-display); }
.similar-panel .similar-sub { margin: 0 0 10px; font-size: 0.78rem; }
.similar-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 116px;
  gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.similar-card {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  scroll-snap-align: start; border-radius: var(--radius-sm);
  outline: none; transition: transform 0.16s var(--ease);
}
.similar-card:hover { transform: translateY(-2px); }
.similar-card:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
.similar-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel-2);
}
.similar-tile img { width: 100%; height: 100%; object-fit: cover; }
.similar-tile .tile-emoji { font-size: 2rem; }
.similar-tag {
  position: absolute; top: 6px; left: 6px;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
}
.similar-tag.sold {
  background: color-mix(in srgb, var(--ink-faint) 30%, var(--panel));
  color: var(--ink-mute); border-color: var(--line);
}
.similar-tag.warn {
  background: color-mix(in srgb, var(--warn) 22%, var(--panel));
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
}
.similar-title {
  font-size: 0.74rem; line-height: 1.25; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.similar-price { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); }
.similar-price.free { color: var(--accent); }

/* Sell form: a quiet "Similar items sell for ~$X" peek under the title */
.sell-peek { display: none; margin-top: 8px; font-family: var(--font-mono); font-size: 0.74rem; }
.sell-peek.show { display: block; }
.sell-peek .peek-amt { color: var(--accent); }
.sell-peek .peek-basis { color: var(--ink-faint); }

/* ─────────── anti-low-effort messaging (step 4) ─────────── */
/* live first-message character counter + helper copy. Sits under the composer
   textarea; turns accent once the 30-char floor is met. Uses theme tokens only. */
.char-count {
  font-size: 0.76rem; color: var(--ink-mute); line-height: 1.4;
  margin-top: calc(-1 * var(--sp-1));
}
.char-count.ok { color: var(--accent); }

/* spam / low-effort warning — same shape as .scam-warn but in the WARN palette
   (it's a "this looks low-effort/spammy" nudge, not the danger-red scam alert). */
.spam-warn {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--warn); line-height: 1.45;
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 38%, var(--line));
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.spam-warn.hidden { display: none; }
.spam-warn strong { color: var(--warn); font-weight: 600; }
.spam-warn span { color: var(--ink-soft); }

/* disabled Send while the first message is under the floor / tripping spam.
   Scoped to the composer so it never touches the shared button token elsewhere. */
.composer .lumi-btn:disabled {
  cursor: not-allowed; opacity: 0.5; filter: saturate(0.6);
  box-shadow: 0 0 0 1px var(--line-2);
}
.composer .lumi-btn:disabled:hover { transform: none; filter: saturate(0.6); }

/* a11y: keyboard focus rings for the clickable inbox rows + the thread's
   listing header card (both are role="button" tabindex="0"). */
.inbox-row:focus-visible,
.thread-listing:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* ============================================================
   WAVE-4 step 1 — grounded-light polish (no token changes).
   Lift white cards off the warm paper, sharpen chip contrast,
   and give every interactive div a subtle forest focus ring.
   Append-only block; works entirely within the existing tokens.
   ============================================================ */

/* White cards read flat on warm paper — give them a hairline edge plus a
   firmer ambient shadow so the panel lifts off the page. The hairline is a
   neutral warm-brown ring (matches the token shadow family, not a glow). */
.card,
.offer-card,
.inbox-row {
  box-shadow:
    0 0 0 1px rgba(60, 48, 30, 0.06),
    0 10px 24px -14px rgba(60, 48, 30, 0.34);
}
.card:hover {
  box-shadow:
    0 0 0 1px rgba(60, 48, 30, 0.08),
    0 18px 36px -18px rgba(60, 48, 30, 0.40);
}
.inbox-row:hover {
  box-shadow:
    0 0 0 1px rgba(60, 48, 30, 0.08),
    0 14px 30px -16px rgba(60, 48, 30, 0.36);
}

/* Chip contrast on paper — bump the tint/border mix a notch so status, deal
   and offer-amount chips read cleanly against white and warm-paper alike. */
.status-chip.ok,
.deal-chip.great {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.status-chip.warn,
.deal-chip.high {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  border-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.deal-chip.way-over {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}
.deal-badge.ok {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-color: color-mix(in srgb, var(--ok) 42%, transparent);
}
.deal-badge.bad {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
}
/* the "ok" offer-amount (65–89% of ask) used --glow, which is a soft warm
   highlight — too low-contrast for a standalone label on paper. Re-tint to
   the warn token so the three offer tiers (good/ok/low) stay legible. */
.offer-amt.ok { color: var(--warn); }

/* Subtle forest focus-visible rings on the remaining interactive divs:
   listing cards (role="button" tabindex="0") and the similar-card tiles.
   Inbox rows + thread header already have theirs above. */
.card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent),
    0 10px 24px -14px rgba(60, 48, 30, 0.34);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* ============================================================
   WAVE-4 · Profiles (#/u/:name) + clickable seller/buyer names.
   Warm-paper card, deep-forest accents, existing tokens only.
   ============================================================ */

/* A clickable person's name (offers, inbox, reviews, seller card). Reads as
   an inline link in the forest accent, underlined on hover/focus. */
.name-link {
  color: var(--accent);
  font-weight: inherit;
  cursor: pointer;
  border-radius: 3px;
}
.name-link:hover { text-decoration: underline; }
.name-link:focus-visible {
  outline: none;
  text-decoration: underline;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* the seller-card name link inherits the heavier weight + ink-on-hover feel */
.seller-card .who .name-link { color: var(--ink); font-weight: 600; }
.seller-card .who .name-link:hover { color: var(--accent); }

/* an avatar that links to a profile — same disc, now interactive. */
.avatar.avatar-link { cursor: pointer; }
.avatar.avatar-link:hover { filter: brightness(1.06); }
.avatar.avatar-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* "View your public profile →" row on Your stall. */
.profile-link-row {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 7px 12px 7px 7px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font: inherit; font-size: 0.84rem; cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.profile-link-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
}
.profile-link-row .avatar { width: 26px; height: 26px; font-size: 0.74rem; color: var(--on-accent); }
.profile-link-row .pl-arrow { color: var(--accent); font-weight: 600; }

/* ---- the profile page ---- */
.profile { max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }

.profile-header { padding: var(--sp-5) var(--sp-5); }
.profile-id { display: flex; align-items: center; gap: var(--sp-4); }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.9rem;
  color: var(--on-accent); flex-shrink: 0;
}
.profile-id-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.profile-name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.profile-since { font-family: var(--font-mono); font-size: 0.74rem; }
.profile-stars { color: var(--glow); font-size: 0.86rem; letter-spacing: 0.04em; }

/* the stat strip under the header */
.profile-stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.pstat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 84px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.pstat-v { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.pstat-k { font-size: 0.72rem; color: var(--ink-mute); }
.pstat.good .pstat-v { color: var(--ok); }
.pstat.bad .pstat-v { color: var(--danger); }
.pstat .pstat-v.rep-stars { color: var(--glow); }

/* section headings on the profile */
.profile-sec-h {
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem;
  margin: 0 0 var(--sp-4); color: var(--ink);
}
.profile-subsec-h {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mute);
  margin: var(--sp-4) 0 var(--sp-2);
}
.profile-listings .lumi-muted,
.profile-reviews .lumi-muted { margin: 0; }

/* reviews-received rows reuse .review-row + .stars/.by/.note from the detail
   panel; add the role tag + the top line layout. */
.profile-reviews .review-row { padding: var(--sp-3) 0; }
.rr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.role-tag {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2);
}
.role-tag.as-seller {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.role-tag.as-buyer {
  color: var(--cool);
  background: color-mix(in srgb, var(--cool) 14%, transparent);
  border-color: color-mix(in srgb, var(--cool) 38%, transparent);
}

@media (max-width: 560px) {
  .profile-id { gap: var(--sp-3); }
  .profile-avatar { width: 60px; height: 60px; font-size: 1.5rem; }
  .profile-name { font-size: 1.35rem; }
  .pstat { min-width: 72px; flex: 1 1 calc(50% - var(--sp-3)); }
}

/* ============================================================
   WAVE-4 step 3 — bidirectional ratings + reviews
   Quick-tag picker in the review modal, the positive-tag chips
   shown on review rows, and the "stars + Reviewed" deal badge.
   ============================================================ */

/* the multi-select quick-tag picker in the review modal — same cozy,
   paper-grounded chip language as .toggle, lit with the forest accent. */
.tag-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pick .tag-chip {
  font-family: var(--font-sans); font-size: 0.8rem; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: var(--panel-2);
  border: 1px solid var(--line-2);
  transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tag-pick .tag-chip:hover { border-color: var(--accent); color: var(--ink); }
.tag-pick .tag-chip.on {
  color: var(--on-accent); background: var(--accent); border-color: transparent;
}
.tag-pick .tag-chip:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* the positive tags shown on a posted review (detail panel + profile rows) —
   small, quiet, forest-tinted so they read as endorsements, not buttons. */
.review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.review-tag {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

/* the "★★★★★ Reviewed" badge once you've left a review on a deal — the
   stars you gave, inline, in the deal-badge ok pill. */
.deal-badge.review-done { display: inline-flex; align-items: center; gap: 5px; }
.deal-badge.review-done .stars { color: var(--glow); letter-spacing: 0.5px; }

/* ============================================================
   WAVE-4 step 4 — price-drop history + badge
   Honest, market-set pricing made legible (peeve #4: fake
   "must-sell" urgency). A small "↓ was $X" tag on the card and a
   "↓ Price dropped — was $X" badge + tiny history line on detail.
   Warm-toned (the existing --warn drop-nudge language), grounded
   on paper — reads as a real signal, never alarmist.
   ============================================================ */

/* card tile badge — sits opposite the price pill (bottom-right), same
   paper-glass pill language as .price-pill / .offers-tag. */
.drop-tag {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.02em;
  color: var(--warn); background: rgba(255,255,255,0.92);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line-2));
  border-radius: 999px; padding: 3px 9px; backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(40,30,16,0.18);
}
/* nudge the heart up a touch when a drop tag shares the corner is not needed —
   the heart lives top-right; the drop tag lives bottom-right, no overlap. */

/* detail-view price-drop block: a bold badge under the price + a tiny,
   quiet history line ("was $X · N days ago"). */
.price-drop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 2px 0 4px; }
.price-drop .pd-badge {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: 999px; padding: 3px 10px;
}
.price-drop .pd-line { font-size: 0.74rem; }

/* ============================================================
   WAVE-4 step 5 — block / hide a seller
   The "Block {name}" action on a profile, the blocked banner,
   and the "Blocked" management list on your own profile.
   Grounded-light: warm paper, flat, danger-tinted destructive
   action; no glow.
   ============================================================ */

/* the block / unblock action under the profile header stats */
.profile-actions {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
/* "Block {name}" reads as a quiet, danger-tinted control on paper */
.block-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}
.block-btn:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
}
/* the unblock variant returns to the neutral ghost look */
.block-btn.unblocked { color: var(--ink-soft); border-color: var(--line-2); }
.block-btn.unblocked:hover {
  color: var(--ink); background: var(--bg-2); border-color: var(--line-2);
}

/* a clear banner at the top of a blocked seller's profile */
.blocked-banner {
  font-size: 0.84rem; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}

/* the "Blocked" management list on your own profile */
.profile-blocked .blocked-sub { margin: 0 0 var(--sp-4); }
.blocked-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.blocked-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.blocked-row .avatar { width: 32px; height: 32px; font-size: 0.86rem; color: var(--on-accent); flex: 0 0 auto; }
.blocked-row .blocked-name { flex: 1 1 auto; min-width: 0; }
.blocked-unblock { margin-left: auto; flex: 0 0 auto; }

/* ============================================================
   SAVED SEARCHES + new-match alerts
   The "🔔 Save this search" pill in the filter bar, the small
   presence dot on the Saved nav link, and the "Saved searches"
   section on the Saved view (one row per search with a live
   match count + a forest-accent "N new since you saved").
   Grounded-light: warm paper, flat, accent-tinted highlights,
   no glow.
   ============================================================ */

/* the "Save this search" pill — sits at the end of the filter bar, reading
   like the existing .toggle pills but accent-tinted to signal the action */
.save-search-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 500;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px; padding: 7px 14px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.save-search-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

/* the summary line inside the Save-search modal */
.search-summary-line {
  font-family: var(--font-mono); font-size: 0.74rem;
  margin: var(--sp-2) 0 0;
}

/* a small presence dot on the Saved nav link — no number, just a signal */
.nav-dot {
  display: none; width: 7px; height: 7px; margin-left: 4px; vertical-align: 1px;
  background: var(--accent); border-radius: 999px;
}
.nav-dot.show { display: inline-block; }

/* section headers shared by the Saved view's two sections */
.saved-sec-h {
  font-family: var(--font-display); font-size: 1.04rem; font-weight: 600;
  color: var(--ink); margin: 0 0 var(--sp-4);
}
.saved-searches { margin-bottom: var(--sp-6); }
.saved-listings { margin-top: var(--sp-2); }
.saved-searches .ss-empty { margin: 0; max-width: 56ch; }

/* the saved-search rows */
.saved-search-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.saved-search-row {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.saved-search-row:hover { border-color: var(--line-2); background: var(--panel-2); }
/* a row with new matches gets a quiet forest-accent left edge */
.saved-search-row.has-new {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}
.saved-search-row .ss-main { flex: 1 1 auto; min-width: 0; }
.saved-search-row .ss-name {
  font-family: var(--font-sans); font-size: 0.96rem; font-weight: 600; color: var(--ink);
}
.saved-search-row .ss-summary {
  font-size: 0.78rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin-top: 6px; font-size: 0.74rem;
}
.ss-meta .ss-count { font-family: var(--font-mono); color: var(--ink-mute); }
.ss-meta .ss-new {
  font-family: var(--font-mono); font-weight: 500; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px; padding: 2px 9px;
}
.ss-meta .ss-since { font-family: var(--font-mono); }
.saved-search-row .ss-actions {
  display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
}
.saved-search-row .ss-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  font-size: 0.9rem; line-height: 1; color: var(--ink-mute); cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.saved-search-row .ss-remove:hover {
  color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

/* responsive: stack the row on narrow screens so name + actions don't crush */
@media (max-width: 560px) {
  .saved-search-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .saved-search-row .ss-actions { justify-content: flex-end; }
  .saved-search-row .ss-summary { white-space: normal; }
  .save-search-btn { width: 100%; justify-content: center; }
}

/* ───────────────────────── accounts / auth ───────────────────────── */
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; }
.link-btn:hover { text-decoration: underline; }
.acct-dot { color: var(--ok); font-size: 0.58rem; }
.acct-dot.live { color: var(--accent); }
.acct-dot.offline { color: var(--ink-mute); }
.auth-modal .form-row { gap: 6px; }
.auth-err { margin: 0; font-size: 0.82rem; color: var(--danger); }
.auth-toggle { background: none; border: none; cursor: pointer; color: var(--ink-mute); font-family: var(--font-sans); font-size: 0.82rem; text-align: center; padding: 6px; width: 100%; }
.auth-toggle:hover { color: var(--accent); }