/* marketplace-kinds.css — honest two-kind listing rendering
 * ============================================================================
 * Filed: 2026-08-08 for LIVE-MARKETPLACE-SPEC §1 (the two listing kinds) and §3
 * (the conversion engine). Additive layer only: it uses the existing navy /
 * gold / cream tokens from shared-styles.css and introduces no new palette, no
 * new font and no framework.
 *
 * WHY OPEN-MARKET ROWS LOOK DIFFERENT ON PURPOSE
 *   A `qardon_terms` row has agreed terms behind it. An `open_market` row has
 *   nothing but a cash price and a source. The two must never be mistaken for
 *   each other, so the open-market card is deliberately quieter: no gold badge,
 *   a single price column, the source it came from, and one call to action.
 *
 * COPY LAW: no string in this file. All user-visible words live in
 * marketplace-kinds.js so the copy-law scan has one place to read.
 */

/* ── The open-market card ──────────────────────────────────────────────── */
.om-card {
  background: var(--white);
  border: 1px dashed rgba(10, 14, 26, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s;
}
.om-card:hover { box-shadow: var(--shadow); }

.om-card .om-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 50px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.om-card .om-img.has-photo { background: var(--cream); }
.om-card .om-img img { width: 100%; height: 100%; object-fit: cover; }

/* The open-market label. Deliberately NOT gold: gold means agreed terms. */
.om-label {
  display: inline-block;
  background: rgba(10, 14, 26, 0.06);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 100px;
}
.om-card .om-img .om-label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
}

.om-card .om-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.om-card .om-cat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.om-card .om-title { font-size: 15.5px; margin: 0; }
.om-card .om-title a { color: var(--navy); }
.om-card .om-title a:hover { color: var(--gold); }
.om-card .om-loc { font-size: 12px; color: var(--ink-mute); }

.om-price {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.om-price .lbl {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.om-price .val {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  color: var(--navy);
  margin-top: 2px;
}
.om-price .val.unpriced { font-size: 15px; color: var(--ink-soft); }

.om-source {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.om-source a { color: var(--navy); font-weight: 600; text-decoration: underline; }
.om-source a:hover { color: var(--gold); }
.om-source .quote { display: block; font-style: italic; margin-top: 3px; }

.om-invites { font-size: 11.5px; color: var(--ink-mute); }

.om-cta { margin-top: auto; }
.om-cta .btn { width: 100%; }
.om-optout {
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-top: auto;
}

/* ── The carry-at-cash badge (qardon_terms, carry-at-cash rows only) ─────
 * Reuses the existing .badge-zero pill; this class only makes room for the
 * longer verbatim wording. */
.badge-zero.qk-same-as-cash {
  font-size: 10px;
  padding: 5px 9px;
  max-width: calc(100% - 24px);
  line-height: 1.3;
}

/* The featured-listing tile on /marketplace/ has no positioning context of its
 * own; the badge needs one. Additive, and harmless to the existing layout. */
.featured-listing .img { position: relative; }

.qk-covenant {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── The invitation panel ──────────────────────────────────────────────── */
.qk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9000;
}
.qk-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.qk-panel h3 { font-size: 22px; margin-bottom: 6px; }
.qk-panel .qk-item {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.qk-panel .qk-intro { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.qk-panel .qk-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
}
.qk-panel .qk-close:hover { color: var(--navy); }
.qk-panel .qk-fine { font-size: 11.5px; color: var(--ink-mute); margin-top: 12px; }

/* Honest-state message block. One class per outcome, all readable. */
.qk-state {
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 16px;
}
.qk-state.ok {
  background: rgba(16, 130, 78, 0.08);
  color: #0E6B45;
  border: 1px solid rgba(16, 130, 78, 0.18);
}
.qk-state.pending {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--border);
}
.qk-state.blocked {
  background: rgba(184, 58, 38, 0.08);
  color: #9A2E1F;
  border: 1px solid rgba(184, 58, 38, 0.18);
}

/* ── The open-market block on the listing detail page ──────────────────── */
.om-detail {
  background: var(--white);
  border: 1px dashed rgba(10, 14, 26, 0.22);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.om-detail h2 { font-size: 20px; margin: 10px 0 4px; }
.om-detail .om-loc { font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; }
.om-detail .om-price { margin-bottom: 16px; }
.om-detail .om-price .val { font-size: 30px; }
.om-detail .om-explain {
  font-size: 13.5px;
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.om-detail .om-source { margin-top: 14px; }

/* ── 2026-08-28 wave (PLAN-Marketplace-Appealing-Functional) ───────────────
 * Program cards, honest unpriced values, the imageless category mark, and the
 * responsive rules this layer never had. Still no strings, still token-only. */

/* The imageless card mark: the category initial on the cream gradient.
 * Never a stock photo, never AI imagery (REQ-MKTP-IMG-004). */
.img .img-mark,
.om-img .img-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 56px;
  font-weight: 600;
  color: rgba(10, 14, 26, 0.14);
  user-select: none;
}

/* Neutral origin badge (data-driven, e.g. "Owner Financing"). Not gold:
 * gold is reserved for the carry-at-cash 0% badge. */
.badge-origin {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 100px;
  max-width: calc(100% - 24px);
}

/* Honest unpriced value inside a terms price-row (canon "See seller for price"). */
.price-row .val.unpriced {
  font-size: 14px;
  color: var(--ink-soft);
  font-family: inherit;
}

/* The program card: a terms row whose price lives at the source. */
.listing-card.qk-program { display: flex; flex-direction: column; }
.listing-card.qk-program .qk-cover { display: block; }
.listing-card.qk-program .qk-title-link { color: inherit; display: block; }
.listing-card.qk-program .qk-title-link:hover h4 { color: var(--gold); }
.qk-program-src {
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.qk-program-src .attr { display: block; margin-bottom: 6px; }
.qk-program-src .qk-src-cta {
  display: inline-block;
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}
.qk-program-src .qk-src-cta:hover { color: var(--gold); }

/* Responsive: this layer previously had no breakpoint rules at all. */
@media (max-width: 600px) {
  .om-card .om-body { padding: 13px 14px; gap: 8px; }
  .om-detail { padding: 18px; }
  .om-detail .om-price .val { font-size: 24px; }
  .qk-panel { padding: 20px; }
  .img .img-mark, .om-img .img-mark { font-size: 44px; }
}

/* ── 2026-09-02 — the offer builder inside the invitation panel (additive) ── */
.qk-offer { border: 1px solid var(--border, #e6e2d6); border-radius: 12px; padding: 12px 14px 8px; margin: 6px 0 12px; background: var(--cream-soft, #f7f4ea); }
.qk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qk-chip { border: 1px solid var(--border, #e6e2d6); background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; color: var(--navy, #0A0E1A); }
.qk-chip.on { background: var(--navy, #0A0E1A); color: #fff; border-color: var(--navy, #0A0E1A); }
.qk-offer-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.qk-sum-row { background: #fff; border-radius: 10px; padding: 8px 10px; text-align: center; }
.qk-sum-row b { display: block; font-size: 17px; color: var(--navy, #0A0E1A); font-variant-numeric: tabular-nums; }
.qk-sum-row span { font-size: 11px; color: var(--ink-soft, #666); }
.qk-sum-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft, #666); line-height: 1.45; }
.qk-warn { grid-column: 1 / -1; font-size: 13px; color: #8a1c1c; }
@media (max-width: 420px) { .qk-offer-sum { grid-template-columns: 1fr; } }

/* ── 2026-09-03 offer engine v2: three shapes, declined hint, facts, lane note ── */
.qk-shapes{display:grid;grid-template-columns:1fr;gap:8px;margin:6px 0 12px}
@media(min-width:560px){.qk-shapes{grid-template-columns:repeat(3,1fr)}}
.qk-shape{text-align:left;border:1px solid var(--line,#d9d4c7);border-radius:12px;padding:10px 12px;background:var(--panel,#fffdf8);cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:inherit}
.qk-shape.on{border-color:var(--gold,#b8892b);box-shadow:0 0 0 2px rgba(184,137,43,.18)}
.qk-shape-title{font-weight:700;font-size:.92rem}
.qk-shape-line{font-size:.9rem}
.qk-shape-hint{font-size:.78rem;opacity:.75}
.qk-declined{font-size:.85rem;padding:8px 10px;border-radius:10px;background:rgba(184,137,43,.08);margin:6px 0}
.qk-facts{font-size:.82rem;opacity:.85;margin:4px 0 8px}
.qk-lane-note{font-size:.85rem;padding:8px 10px;border-radius:10px;background:rgba(40,90,120,.08);margin:6px 0}
.qk-verify{border:1px dashed var(--line,#d9d4c7);border-radius:12px;padding:10px 12px;margin:4px 0 12px}
.qk-verify-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.qk-verify-row input{flex:0 0 150px;padding:9px 10px;border:1px solid var(--line,#d9d4c7);border-radius:8px;font:600 16px Inter,sans-serif;letter-spacing:.12em}
.qk-verify-note{font-size:.8rem;opacity:.8;flex:1 1 220px}
.qk-verify-state{font-size:.85rem;margin-top:4px;min-height:1em}
.qk-verify-state.ok{color:#1f5a33}.qk-verify-state.bad{color:#8a1c1c}

/* 2026-09-04 — the interest the buyer does not pay here (dollars, with source). */
.qk-interest {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--gold, #D4AF37);
  background: rgba(212,175,55,0.08);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft, #3a3f4b);
}
.qk-interest strong { color: var(--navy, #0A0E1A); }
.qk-interest.big { font-size: 14px; padding: 12px 14px; margin-top: 12px; }
.qk-interest-src { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-mute, #6b7280); }
.qk-interest-src a { color: var(--navy, #0A0E1A); text-decoration: underline; }